/*
Theme Name: dublabjp-v2
Author: hirozumi.takeda@monosus.co.jp
Author URI: https://www.monosus.co.jp/
*/

/* ============================================================
   Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&family=Zalando+Sans:ital,wght@0,200..900;1,200..900&family=Zen+Kaku+Gothic+Antique:wght@400;500&display=swap');

/* ============================================================
   Custom Properties
   ============================================================ */
:root {
  --font-sans: "Zalando Sans", 'Zen Kaku Gothic Antique', sans-serif;
  --font-display: "Zalando Sans Expanded", 'Zen Kaku Gothic Antique', sans-serif;
  --font-tiny: 0.625rem;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.75rem;
  --font-4xl: 2rem;
  --font-5xl: 2.5rem;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-cozy: 1.8;
  --line-height-loose: 2;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-base: 1rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 2.5rem;
  --spacing-4xl: 3rem;
  --spacing-5xl: 4rem;

  /* min:1rem max:3rem / min:320px max:1920px */
  --margin: 1rem;
  --gutter: clamp(1rem, 5vw, 6rem);
  --gap: 1rem;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-green-50: #e7fcf2;
  --color-green-100: #cff9e6;
  --color-green-200: #b7f7d9;
  --color-green-300: #9ff4cc;
  --color-green-400: #6eeeb3;
  --color-green-500: #3ee999;
  --color-green-600: #0ee380;
  --color-green-700: #0bb666;
  --color-green-800: #08884d;
  --color-green-900: #065b33;
  --color-gray-50: #fbfbfb;
  --color-gray-100: #f4f4f4;
  --color-gray-200: #e0e0e0;
  --color-gray-300: #c2c2c2;
  --color-gray-400: #9e9e9e;
  --color-gray-500: #757575;
  --color-gray-600: #5c5c5c;
  --color-gray-700: #474747;
  --color-gray-800: #333333;
  --color-gray-900: #1f1f1f;
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-500);
  --color-text-inverted: var(--color-gray-50);
  --color-stroke-primary: var(--color-gray-300);
  --color-stroke-inverted: var(--color-gray-100);
  --color-background-primary: var(--color-gray-100);
  --color-background-inverted: var(--color-gray-900);
  --color-background-player: #26292c;
  --color-icon-primary: var(--color-gray-900);
  --color-icon-secondary: var(--color-gray-500);
  --color-icon-inverted: var(--color-gray-50);
}

/* ============================================================
   CSS Reset
   ============================================================ */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Base Elements
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  min-height: 100svh;
}

body {
  font-weight: 400;
  font-size: var(--font-base);
  font-family: var(--font-sans);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  padding-bottom: 101px;
  touch-action: manipulation;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-family: var(--font-display);
  line-height: var(--line-height-tight);
  font-weight: 500;
}

a {
  word-break: break-all;
  color: inherit;
  text-decoration: underline;
  transition: filter 0.1s ease;

  &:hover {
    filter: brightness(1.1);
  }

  &[href^="tel"],
  &:focus,
  &:visited {
    color: inherit;
    text-decoration: none;
  }
}

nav a {
  text-decoration: none;
}

img,
movie {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

button {
  color: var(--color-text-primary);
  cursor: pointer;
  border: none;
  background: transparent;
  outline: 0;
}

b,
strong,
dt,
th {
  font-weight: 500;
}

em {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-style: wavy;
  text-decoration-color: var(--color-stroke-secondary);
}

q {
  display: inline;
  font-style: italic;

  &:before {
    content: '"';
    font-style: normal;
  }

  &:after {
    content: '"';
    font-style: normal;
  }
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="password"] {
  appearance: none;
  border-radius: 0;
}

input[type="search"] {
  appearance: textfield;
}

small,
sup,
sub {
  font-size: 0.75em;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

ins {
  text-decoration: underline;
}

del,
strike,
s {
  text-decoration: line-through;
}

address,
cite,
var {
  font-style: italic;
}

/* ============================================================
   Layout
   ============================================================ */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5xl);
  max-width: 120rem;
  margin-inline: auto;
}

.container {
  padding: 0 var(--margin);
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);

  > article.page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl);
  }
}

body.page main.content,
body.search main.content {
  max-width: 40rem;
  margin-inline: auto;
}

/* ============================================================
   Loading State
   ============================================================ */
body.page-loading {
  cursor: wait;

  .container {
    pointer-events: none;
  }
}

/* ============================================================
   Live
   ============================================================ */
@keyframes blink {
  75% {
    opacity: 0;
  }
}

.live {
  position: relative;
  z-index: 1000;
  background: var(--color-green-600);
  overflow: hidden;
  padding-left: 64px;

  > dt {
    position: absolute;
    width: 64px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: var(--color-gray-900);
    font-size: var(--font-xs);
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;

    a {
      animation: blink 2s step-end infinite;
      font-weight: 500;
      color: var(--color-green-600);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;

      &::after {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgOS41TDkuNDk5OTggMi45OTk5OE05LjQ5OTk4IDIuOTk5OThWOS4yNE05LjQ5OTk4IDIuOTk5OThIMy4yNiIgc3Ryb2tlPSIjMEVFMzgwIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
        background-size: contain;
        margin-left: 0.25rem;
        vertical-align: middle;
      }
    }
  }

  > dd {
    font-size: var(--font-xs);
    line-height: var(--line-height-base);
    white-space: nowrap;
    display: block;
    padding: 0.5rem;
    line-height: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }    
  }
}

.live-link {
  font-family: var(--font-display);
  text-decoration: none;
}

/* ============================================================
   Header
   ============================================================ */
header[role="banner"] {
  padding: 1rem var(--margin) 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.branding {
  position: relative;
}

.site-title {
  width: 183px;
  height: 32px;
}

.home .site-title {
  width: 100%;
  max-width: 458px;
  height: auto;

  @media (width >= 48rem) {
    padding: 0;
  }
}

.site-description {
  font-size: var(--font-sm);
  font-family: var(--font-display);
  margin-bottom: var(--spacing-sm);

  > span {
    display: inline-block;

    &:nth-child(odd) {
      animation: flip-char-x 5s ease calc(var(--i) * 0.025s) infinite;
    }

    &:nth-child(even) {
      animation: flip-char-y 5s ease calc(var(--i) * 0.025s) infinite;
    }
  }

  @media (width >= 48rem) {
    font-size: var(--font-base);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    margin-bottom: 0;
  }
}

.home .site-description {
  margin-bottom: var(--spacing-base);
}

@keyframes flip-char-x {
  0% { transform: rotateX(0deg); }
  3% { transform: rotateX(90deg); }
  6% { transform: rotateX(0deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes flip-char-y {
  0% { transform: rotateY(0deg); }
  3% { transform: rotateY(90deg); }
  6% { transform: rotateY(0deg); }
  100% { transform: rotateY(0deg); }
}

/* ============================================================
   Menu
   ============================================================ */
.menu {
  position: relative;
  height: 32px;
  display: none;

  @media (width >= 48rem) {
    display: flex;
    align-items: center;
  }
}

.menu-primary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-base);
  font-size: var(--font-sm);
  font-family: var(--font-display);
}

.menu-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-base);
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--font-sm);
  a[target="_blank"]:after {
    margin-left: 0.25rem;
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTUuODMzM0wxNS44MzMzIDQuOTk5OTRNMTUuODMzMyA0Ljk5OTk0VjE1LjRNMTUuODMzMyA0Ljk5OTk0SDUuNDMzMzMiIHN0cm9rZT0iIzFGMUYxRiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
  }
}

.menu-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-base);
  justify-content: center;

  li a {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

.icon-mixcloud a {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjM3MTMgMTcuNUgxNS43NjE5VjUuNjgyNTdMMTYuMjQ3MyAzLjk5Mzk4SDE1LjQwNTZMMTIuNDA4MyAxNy41SDcuNjEyMTFMNC41OTQ1OSAzLjk5Mzk4SDMuNzcyODlMNC4yMzgzMiA1LjY4MjU3VjE3LjVIMS42Mjg5MVYzLjMzMzM3SDYuNzkwMTlMOS42NjYwMyAxNi44Mzk0SDEwLjMzNDRMMTMuMjEgMy4zMzMzN0gxOC4zNzEzVjE3LjVaIiBmaWxsPSIjMUYxRjFGIi8+Cjwvc3ZnPg==');
}

.icon-spotify a {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuODMzMDEgMTIuNUM1LjgzMzAxIDEyLjUgOS41ODMwMSAxMS42NjY2IDEzLjMzMyAxMy4zMzMzIiBzdHJva2U9IiMxRjFGMUYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTUuNDE2OTkgMTBDNS40MTY5OSAxMCAxMC40MTcgOC43NSAxNC41ODM3IDExLjI1IiBzdHJva2U9IiMxRjFGMUYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTUgNy41MDAwMkM3LjUgNy4wODMzNyAxMS42NjY3IDYuNjY2NzEgMTUuODMzMyA5LjE2NjY2IiBzdHJva2U9IiMxRjFGMUYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEwLjAwMDMgMTguMzMzM0M1LjM5Nzk1IDE4LjMzMzMgMS42NjY5OSAxNC42MDIzIDEuNjY2OTkgOS45OTk5NkMxLjY2Njk5IDUuMzk3NTggNS4zOTc5NSAxLjY2NjYzIDEwLjAwMDMgMS42NjY2M0MxNC42MDI3IDEuNjY2NjMgMTguMzMzNyA1LjM5NzU4IDE4LjMzMzcgOS45OTk5NkMxOC4zMzM3IDE0LjYwMjMgMTQuNjAyNyAxOC4zMzMzIDEwLjAwMDMgMTguMzMzM1oiIHN0cm9rZT0iIzFGMUYxRiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
}

.icon-instagram a {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDMgMTMuMzMzM0MxMS44NDEyIDEzLjMzMzMgMTMuMzMzNyAxMS44NDA5IDEzLjMzMzcgOS45OTk5NkMxMy4zMzM3IDguMTU5MDEgMTEuODQxMiA2LjY2NjYzIDEwLjAwMDMgNi42NjY2M0M4LjE1OTM4IDYuNjY2NjMgNi42NjY5OSA4LjE1OTAxIDYuNjY2OTkgOS45OTk5NkM2LjY2Njk5IDExLjg0MDkgOC4xNTkzOCAxMy4zMzMzIDEwLjAwMDMgMTMuMzMzM1oiIHN0cm9rZT0iIzFGMUYxRiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMi41IDEzLjMzMzNWNi42NjY2N0MyLjUgNC4zNjU0OCA0LjM2NTQ4IDIuNSA2LjY2NjY3IDIuNUgxMy4zMzMzQzE1LjYzNDUgMi41IDE3LjUgNC4zNjU0OCAxNy41IDYuNjY2NjdWMTMuMzMzM0MxNy41IDE1LjYzNDUgMTUuNjM0NSAxNy41IDEzLjMzMzMgMTcuNUg2LjY2NjY3QzQuMzY1NDggMTcuNSAyLjUgMTUuNjM0NSAyLjUgMTMuMzMzM1oiIHN0cm9rZT0iIzFGMUYxRiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTE0LjU4MyA1LjQyNjg4TDE0LjU5MyA1LjQxNTc3IiBzdHJva2U9IiMxRjFGMUYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
}

.icon-x a {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjAxNjYgMTcuMzA3TDMuMTI3NzMgMy4zMDY5N0MyLjg3MjI5IDIuOTc4NTQgMy4xMDYzMyAyLjUgMy41MjI0MSAyLjVINS41ODg4OEM1Ljc0MzE3IDIuNSA1Ljg4ODgzIDIuNTcxMjMgNS45ODM1NiAyLjY5MzAzTDE2Ljg3MjQgMTYuNjkzQzE3LjEyNzkgMTcuMDIxNSAxNi44OTM4IDE3LjUgMTYuNDc3OCAxNy41SDE0LjQxMTNDMTQuMjU3IDE3LjUgMTQuMTExMyAxNy40Mjg3IDE0LjAxNjYgMTcuMzA3WiIgc3Ryb2tlPSIjMUYxRjFGIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8cGF0aCBkPSJNMTYuNjY2MyAyLjVMMy4zMzMwMSAxNy41IiBzdHJva2U9IiMxRjFGMUYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+');
}

.icon-youtube a {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNjY2NyA5Ljk5OTk4TDguNzUgMTEuNjY2NlY4LjMzMzMxTDExLjY2NjcgOS45OTk5OFoiIGZpbGw9IiMxRjFGMUYiIHN0cm9rZT0iIzFGMUYxRiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xLjY2NjYzIDEwLjU4OTZWOS40MTAzNEMxLjY2NjYzIDYuOTk3NTQgMS42NjY2MyA1Ljc5MTE2IDIuNDIxMiA1LjAxNDk0QzMuMTc1NzggNC4yMzg3MSA0LjM2Mzc2IDQuMjA1MTEgNi43Mzk3IDQuMTM3OTFDNy44NjU1NyA0LjEwNjA3IDkuMDE1NjIgNC4wODMyNSA5Ljk5OTk2IDQuMDgzMjVDMTAuOTg0MyA0LjA4MzI1IDEyLjEzNDQgNC4xMDYwNyAxMy4yNjAyIDQuMTM3OTFDMTUuNjM2MSA0LjIwNTExIDE2LjgyNDEgNC4yMzg3MSAxNy41Nzg3IDUuMDE0OTRDMTguMzMzMyA1Ljc5MTE2IDE4LjMzMzMgNi45OTc1NCAxOC4zMzMzIDkuNDEwMzRWMTAuNTg5NkMxOC4zMzMzIDEzLjAwMjMgMTguMzMzMyAxNC4yMDg4IDE3LjU3ODcgMTQuOTg0OUMxNi44MjQxIDE1Ljc2MTIgMTUuNjM2MiAxNS43OTQ4IDEzLjI2MDMgMTUuODYyQzEyLjEzNDQgMTUuODkzOCAxMC45ODQzIDE1LjkxNjcgOS45OTk5NiAxNS45MTY3QzkuMDE1NjIgMTUuOTE2NyA3Ljg2NTUyIDE1Ljg5MzggNi43Mzk2MiAxNS44NjJDNC4zNjM3MiAxNS43OTQ4IDMuMTc1NzcgMTUuNzYxMiAyLjQyMTE5IDE0Ljk4NDlDMS42NjY2MyAxNC4yMDg4IDEuNjY2NjMgMTMuMDAyMyAxLjY2NjYzIDEwLjU4OTZaIiBzdHJva2U9IiMxRjFGMUYiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9zdmc+");
}

.icon-google-photos a {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY1OF8xMTM5KSI+CjxwYXRoIGQ9Ik05LjUgOS41QzkuNSAxMi4wMDM3IDExLjQwMjggMTQuMDMzMyAxMy43NSAxNC4wMzMzQzE2LjA5NzIgMTQuMDMzMyAxOCAxMi4wMDM3IDE4IDkuNUw5LjUgOS41Wk05LjUgOS41TDEgOS41QzEgNi45OTYzMSAyLjkwMjc5IDQuOTY2NjcgNS4yNSA0Ljk2NjY3QzcuNTk3MjEgNC45NjY2NyA5LjUgNi45OTYzMSA5LjUgOS41Wk05LjUgOS41TDkuNSAxQzEyLjAwMzcgMSAxNC4wMzMzIDIuOTAyNzkgMTQuMDMzMyA1LjI1QzE0LjAzMzMgNy41OTcyMSAxMi4wMDM3IDkuNSA5LjUgOS41Wk05LjUgOS41TDkuNSAxOEM2Ljk5NjMxIDE4IDQuOTY2NjcgMTYuMDk3MiA0Ljk2NjY3IDEzLjc1QzQuOTY2NjcgMTEuNDAyOCA2Ljk5NjMxIDkuNSA5LjUgOS41WiIgc3Ryb2tlPSIjMUYxRjFGIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzY1OF8xMTM5Ij4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPg==');
}

/* Menu Drawer */
.menu-drawer {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-background-player);
  color: #f1f1f1;
  z-index: 999;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  &.is-open {
    top: 0;

    .menu-container {
      margin-top: -102px; /* Persistent player height */
    }
  }

  .brand-mark {
    color: #f1f1f1;
    width: 48px;
    height: 48px;
  }

  .credit-toggle {
    color: #f1f1f1;
  }

  .menu-secondary {
    a[target="_blank"]:after {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTUuODMzNEwxNS44MzMzIDVNMTUuODMzMyA1VjE1LjRNMTUuODMzMyA1SDUuNDMzMzMiIHN0cm9rZT0iI0ZCRkJGQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
    }
  }

  .icon-mixcloud a {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjM3MTMgMTcuNUgxNS43NjE5VjUuNjgyNTdMMTYuMjQ3MyAzLjk5Mzk4SDE1LjQwNTZMMTIuNDA4MyAxNy41SDcuNjEyMTFMNC41OTQ1OSAzLjk5Mzk4SDMuNzcyODlMNC4yMzgzMiA1LjY4MjU3VjE3LjVIMS42Mjg5MVYzLjMzMzM3SDYuNzkwMTlMOS42NjYwMyAxNi44Mzk0SDEwLjMzNDRMMTMuMjEgMy4zMzMzN0gxOC4zNzEzVjE3LjVaIiBmaWxsPSIjZjFmMWYxIi8+Cjwvc3ZnPg==');
  }

  .icon-spotify a {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuODMzMDEgMTIuNUM1LjgzMzAxIDEyLjUgOS41ODMwMSAxMS42NjY2IDEzLjMzMyAxMy4zMzMzIiBzdHJva2U9IiNmMWYxZjEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTUuNDE2OTkgMTBDNS40MTY5OSAxMCAxMC40MTcgOC43NSAxNC41ODM3IDExLjI1IiBzdHJva2U9IiNmMWYxZjEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTUgNy41MDAwMkM3LjUgNy4wODMzNyAxMS42NjY3IDYuNjY2NzEgMTUuODMzMyA5LjE2NjY2IiBzdHJva2U9IiNmMWYxZjEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEwLjAwMDMgMTguMzMzM0M1LjM5Nzk1IDE4LjMzMzMgMS42NjY5OSAxNC42MDIzIDEuNjY2OTkgOS45OTk5NkMxLjY2Njk5IDUuMzk3NTggNS4zOTc5NSAxLjY2NjYzIDEwLjAwMDMgMS42NjY2M0MxNC42MDI3IDEuNjY2NjMgMTguMzMzNyA1LjM5NzU4IDE4LjMzMzcgOS45OTk5NkMxOC4zMzM3IDE0LjYwMjMgMTQuNjAyNyAxOC4zMzMzIDEwLjAwMDMgMTguMzMzM1oiIHN0cm9rZT0iI2YxZjFmMSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
  }

  .icon-instagram a {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDMgMTMuMzMzM0MxMS44NDEyIDEzLjMzMzMgMTMuMzMzNyAxMS44NDA5IDEzLjMzMzcgOS45OTk5NkMxMy4zMzM3IDguMTU5MDEgMTEuODQxMiA2LjY2NjYzIDEwLjAwMDMgNi42NjY2M0M4LjE1OTM4IDYuNjY2NjMgNi42NjY5OSA4LjE1OTAxIDYuNjY2OTkgOS45OTk5NkM2LjY2Njk5IDExLjg0MDkgOC4xNTkzOCAxMy4zMzMzIDEwLjAwMDMgMTMuMzMzM1oiIHN0cm9rZT0iI2YxZjFmMSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMi41IDEzLjMzMzNWNi42NjY2N0MyLjUgNC4zNjU0OCA0LjM2NTQ4IDIuNSA2LjY2NjY3IDIuNUgxMy4zMzMzQzE1LjYzNDUgMi41IDE3LjUgNC4zNjU0OCAxNy41IDYuNjY2NjdWMTMuMzMzM0MxNy41IDE1LjYzNDUgMTUuNjM0NSAxNy41IDEzLjMzMzMgMTcuNUg2LjY2NjY3QzQuMzY1NDggMTcuNSAyLjUgMTUuNjM0NSAyLjUgMTMuMzMzM1oiIHN0cm9rZT0iI2YxZjFmMSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTE0LjU4MyA1LjQyNjg4TDE0LjU5MyA1LjQxNTc3IiBzdHJva2U9IiNmMWYxZjEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
  }

  .icon-x a {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjAxNjYgMTcuMzA3TDMuMTI3NzMgMy4zMDY5N0MyLjg3MjI5IDIuOTc4NTQgMy4xMDYzMyAyLjUgMy41MjI0MSAyLjVINS41ODg4OEM1Ljc0MzE3IDIuNSA1Ljg4ODgzIDIuNTcxMjMgNS45ODM1NiAyLjY5MzAzTDE2Ljg3MjQgMTYuNjkzQzE3LjEyNzkgMTcuMDIxNSAxNi44OTM4IDE3LjUgMTYuNDc3OCAxNy41SDE0LjQxMTNDMTQuMjU3IDE3LjUgMTQuMTExMyAxNy40Mjg3IDE0LjAxNjYgMTcuMzA3WiIgc3Ryb2tlPSIjZjFmMWYxIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8cGF0aCBkPSJNMTYuNjY2MyAyLjVMMy4zMzMwMSAxNy41IiBzdHJva2U9IiNmMWYxZjEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+');
  }

  .icon-youtube a {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNjY2NyA5Ljk5OTk4TDguNzUgMTEuNjY2NlY4LjMzMzMxTDExLjY2NjcgOS45OTk5OFoiIGZpbGw9IiNmMWYxZjEiIHN0cm9rZT0iI2YxZjFmMSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xLjY2NjYzIDEwLjU4OTZWOS40MTAzNEMxLjY2NjYzIDYuOTk3NTQgMS42NjY2MyA1Ljc5MTE2IDIuNDIxMiA1LjAxNDk0QzMuMTc1NzggNC4yMzg3MSA0LjM2Mzc2IDQuMjA1MTEgNi43Mzk3IDQuMTM3OTFDNy44NjU1NyA0LjEwNjA3IDkuMDE1NjIgNC4wODMyNSA5Ljk5OTk2IDQuMDgzMjVDMTAuOTg0MyA0LjA4MzI1IDEyLjEzNDQgNC4xMDYwNyAxMy4yNjAyIDQuMTM3OTFDMTUuNjM2MSA0LjIwNTExIDE2LjgyNDEgNC4yMzg3MSAxNy41Nzg3IDUuMDE0OTRDMTguMzMzMyA1Ljc5MTE2IDE4LjMzMzMgNi45OTc1NCAxOC4zMzMzIDkuNDEwMzRWMTAuNTg5NkMxOC4zMzMzIDEzLjAwMjMgMTguMzMzMyAxNC4yMDg4IDE3LjU3ODcgMTQuOTg0OUMxNi44MjQxIDE1Ljc2MTIgMTUuNjM2MiAxNS43OTQ4IDEzLjI2MDMgMTUuODYyQzEyLjEzNDQgMTUuODkzOCAxMC45ODQzIDE1LjkxNjcgOS45OTk5NiAxNS45MTY3QzkuMDE1NjIgMTUuOTE2NyA3Ljg2NTUyIDE1Ljg5MzggNi43Mzk2MiAxNS44NjJDNC4zNjM3MiAxNS43OTQ4IDMuMTc1NzcgMTUuNzYxMiAyLjQyMTE5IDE0Ljk4NDlDMS42NjY2MyAxNC4yMDg4IDEuNjY2NjMgMTMuMDAyMyAxLjY2NjYzIDEwLjU4OTZaIiBzdHJva2U9IiNmMWYxZjEiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9zdmc+");
  }

  .icon-google-photos a {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY1OF8xMTM5KSI+CjxwYXRoIGQ9Ik05LjUgOS41QzkuNSAxMi4wMDM3IDExLjQwMjggMTQuMDMzMyAxMy43NSAxNC4wMzMzQzE2LjA5NzIgMTQuMDMzMyAxOCAxMi4wMDM3IDE4IDkuNUw5LjUgOS41Wk05LjUgOS41TDEgOS41QzEgNi45OTYzMSAyLjkwMjc5IDQuOTY2NjcgNS4yNSA0Ljk2NjY3QzcuNTk3MjEgNC45NjY2NyA5LjUgNi45OTYzMSA5LjUgOS41Wk05LjUgOS41TDkuNSAxQzEyLjAwMzcgMSAxNC4wMzMzIDIuOTAyNzkgMTQuMDMzMyA1LjI1QzE0LjAzMzMgNy41OTcyMSAxMi4wMDM3IDkuNSA5LjUgOS41Wk05LjUgOS41TDkuNSAxOEM2Ljk5NjMxIDE4IDQuOTY2NjcgMTYuMDk3MiA0Ljk2NjY3IDEzLjc1QzQuOTY2NjcgMTEuNDAyOCA2Ljk5NjMxIDkuNSA5LjUgOS41WiIgc3Ryb2tlPSIjZjFmMWYxIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzY1OF8xMTM5Ij4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPg==');
  }

  .searchfield {
    color: var(--color-text-inverted);
  }

  .searchsubmit svg path {
    stroke: var(--color-icon-inverted);
  }
}

/* Menu Toggle */
.menu-toggle {
  position: absolute;
  top: 1rem;
  right: var(--margin);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  z-index: 1000;
  mix-blend-mode: difference;

  .menu-icon-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all 0.2s ease;
  }

  &[aria-expanded="true"] {
    .menu-icon-bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    .menu-icon-bar:nth-child(2) {
      opacity: 0;
    }

    .menu-icon-bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
  }
}

.menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem 1rem;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (hover: hover) {
  .menu-container a:hover .brand-mark {
    animation: spin 1s linear infinite;
  }
}

/* ============================================================
   Search
   ============================================================ */
.search {
  width: 100%;
}

.searchform {
  line-height: 1;
  position: relative;
}

.searchfield {
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-stroke-primary);
  background: transparent;
  font-size: var(--font-base);

  &:focus {
    outline: none;
  }
}

article.no-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.searchsubmit {
  position: absolute;
  top: 50%;
  right: 1rem;
  display: block;
  padding: 0;
  cursor: pointer;
  transform: translateY(-50%);
  border: none;
  background: transparent;

  svg path {
    stroke: var(--color-icon-primary);
  }
}

/* ============================================================
   Footer
   ============================================================ */
.copyright {
  font-size: var(--font-xs);
}

.credit-toggle {
  font-size: var(--font-xs);
}

.credit {
  display: none;
  margin-top: -1rem;

  &.is-open {
    display: block;
  }

  .widget_text {
    font-size: var(--font-xs);
    text-align: center;
    line-height: var(--line-height-base);
  }
}

/* ============================================================
   Mixcloud Player
   ============================================================ */
.persistent-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1001;
  transition: bottom 0.2s ease;
  background: var(--color-background-player);
  border-top: 1px solid var(--color-stroke-primary);

  &.collapsed {
    bottom: -61px;
  }

  iframe {
    flex: 1;
    height: 100%;
    border: none;
  }
}

.mixcloud-player-container {
  position: relative;
  display: flex;
  height: 61px;
  border-top: 1px solid var(--color-stroke-primary);
}

.mixcloud-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  z-index: 1;
  background: var(--color-background-player);

  &.hidden {
    opacity: 0;
    pointer-events: none;
  }
}

.mixcloud-info {
  display: flex;
  align-items: center;
  height: 40px;
  background: var(--color-background-player);
  color: #f1f1f1;
  font-family: var(--font-display);
}

.mixcloud-track-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.mixcloud-title {
  font-size: var(--font-xs);
  line-height: var(--line-height-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--margin);

  &.marquee-active {
    display: inline-block;
    width: max-content;
    overflow: visible;
    text-overflow: clip;
  }

  &.marquee {
    display: inline-block;
    animation: marquee 15s linear infinite;
  }
}

.mixcloud-episode-link {
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  &.hidden {
    display: none;
  }
}

.mixcloud-nav-btn {
  height: 100%;
  padding: 0 1rem;
  background: var(--color-background-player);
  color: var(--color-text-inverted);
  border: none;
  border-left: 1px solid var(--color-stroke-primary);
  cursor: pointer;
  font-size: var(--font-xs);
  transition: background 0.2s, opacity 0.2s;
  flex-shrink: 0;

  &:hover:not(:disabled) {
    filter: brightness(1.2);
  }

  &:disabled {
    color: var(--color-icon-secondary);
    cursor: not-allowed;
  }
}

/* Player in Content */
.player {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  background-size: cover;
  background-position: center;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
    backdrop-filter: blur(8px);
  }

  img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
    width: auto;
    height: 100%;
    padding: 5%;
    transition: all 0.1s ease;
    z-index: 1;
    backface-visibility: hidden;
  }

  @media (hover: hover) {
    img:hover {
      filter: brightness(1.1);
      transform: scale(1.01);
    }
  }
}

.load-button {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  cursor: pointer;
  z-index: 2;
  background: #fff;
  border: none;
  mix-blend-mode: exclusion;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><polygon points="0,0 1,0.5 0,1"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  text-indent: -9999px;
  height: 15%;
  aspect-ratio: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.player + .list-attribution {
  margin-top: 1rem;
}

.list-attribution {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.badge-attribution {
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--font-xs);
  line-height: 1;
  border: 1px solid var(--color-stroke-primary);
  padding: 0.25rem;
}

/* ============================================================
   Post Common
   ============================================================ */
.post-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
}

.post-title {
  line-height: var(--line-height-tight);

  small {
    color: var(--color-text-secondary);
    font-size: var(--font-base);
  }
}

h1.post-title {
  font-size: var(--font-4xl);

  @media (width >= 48rem) {
    font-size: var(--font-5xl);
  }
}

h2.post-title {
  font-size: var(--font-2xl);

  @media (width >= 48rem) {
    font-size: var(--font-3xl);
  }
}

.post-parent {
  font-family: var(--font-display);
  font-size: var(--font-xs);
  line-height: 1;

  a {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    background: var(--color-white);
  }

  @media (hover: hover) {
    a:hover {
      background: transparent;
    }
  }
}

.post-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.post-date {
  font-size: var(--font-xs);
  font-family: var(--font-display);
  line-height: 1;
}

.post-hosts {
  font-family: var(--font-display);

  a {
    text-decoration: none;
  }
}

/* ============================================================
   Post Content
   ============================================================ */
.post-content {
  display: flex;
  flex-direction: column;
  gap: 1.5em;

  > * {
    line-height: var(--line-height-cozy);
  }

  > h1,
  > h2,
  > h3,
  > h4,
  > h5,
  > h6 {
    margin-top: 1.5em;
    line-height: var(--line-height-tight);
  }

  > meta:first-child + * {
    margin-top: 0;
  }

  > h1,
  > h2,
  > h3 {
    font-size: var(--font-xl);
  }

  > h4,
  > h5,
  > h6 {
    font-size: var(--font-lg);
  }

  > div[class^="lazyblock"] {
    margin: 1.5em 0;
  }

  > .wp-block-image,
  > .wp-block-embed {
    margin: 1.5em 0;

    > img,
    > iframe {
      max-width: 100%;
    }
  }

  > .wp-block-separator {
    width: 100%;
    height: 1px;
    background: var(--color-stroke-primary);
    margin: 1.5em 0 0;
    border: none;

    &:not(.is-style-wide):not(.is-style-dots) {
      width: 100%;
    }
  }

  > .wp-block-heading {
    & + .wp-block-image,
    & + .wp-block-embed,
    & + .wp-block-lazyblock-playlist,
    & + .wp-block-lazyblock-profile {
      margin-top: 0;
    }
  }
}

.wp-block-list {
  padding-left: 2em;
  list-style-position: outside;
}

ul.wp-block-list {
  li::before {
    display: inline-block;
    content: "-";
    margin-left: -1.5em;
    padding-right: 1em;
  }
}

ol.wp-block-list {
  list-style: decimal;
}

.wp-embed-aspect-16-9 iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.wp-embed-aspect-4-3 iframe {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}


/* ============================================================
   Lazy Blocks
   ============================================================ */
.block-profile {
  display: flex;
  gap: var(--spacing-xl);

  .profile-figure {
    width: 100%;
    max-width: 6rem;
    overflow: hidden;
  }

  .profile-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .profile-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
  }

  .profile-caption {
  }

  .profile-name {
    font-weight: 500;
  }

  .profile-description {
    font-size: var(--font-sm);
    line-height: var(--line-height-loose);
  }
}

.block-playlist {
  list-style: none;
  padding: 0;
  margin: 0;

  .playlist-item {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-base) 0;
    border-top: 1px solid var(--color-stroke-primary);
  }

  .playlist-number {
    flex-shrink: 0;
    width: 3rem;
    font-family: var(--font-display);
    font-size: var(--font-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
  }

  .playlist-body {
    flex: 1;
    display: flex;
    gap: var(--spacing-base);
    align-items: flex-start;
    min-width: 0;
  }

  .playlist-artwork {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
  }

  .playlist-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
  }

  .playlist-title {
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
  }

  .playlist-artist {
    font-size: var(--font-sm);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
  }
}


/* ============================================================
   Content Variants
   ============================================================ */
.content-information {
  .post-header {
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
  }

  .post-content {
    max-width: 40rem;
    margin-inline: auto;
  }

  @media (width >= 48rem) {
    .post-thumbnail {
      position: relative;
      aspect-ratio: 16 / 9;
      background-color: var(--color-white);
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.25);
        z-index: 1;
        backdrop-filter: blur(8px);
      }

      img {
        position: relative;
        z-index: 1;
        padding: var(--spacing-4xl) 0;
        aspect-ratio: 1 / 1;
        display: block;
        max-width: 40rem;
        width: auto;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

.content-program {
  gap: var(--spacing-2xl);

  .post-content {
    font-size: var(--font-sm);
  }

  .post-thumbnail {
    img {
      display: block;
      width: 100%;
      max-width: 32rem;
      margin-inline: auto;
    }
  }

  .row-container {
    gap: var(--spacing-5xl);
  }

  @media (width >= 48rem) {
    .post-header {
      position: relative;

      .post-parent {
        position: absolute;
        top: 0;
        right: 0;
      }

      .post-title {
        width: 100%;
        max-width: 40rem;
      }
    }
    .row-container {
      gap: var(--gutter);
    }
  }
}

.content-episode {
  @media (width >= 64rem) {
    .post-header {
      position: relative;
      padding-right: 40%;

      .post-parent {
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .post-content {
      max-width: 40rem;
      margin-inline: auto;
    }

    .player {
      position: sticky;
      top: var(--spacing-4xl);
    }
  }
}

.content-resident {
  .post-header,
  .post-content,
  .post-footer {
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
  }

  .post-thumbnail {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    width: 100%;
    max-width: 16rem;
    aspect-ratio: 1 / 1;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      user-select: none;
    }

    @media (width >= 48rem) {
      max-width: 30rem;
    }
  }
}

/* ============================================================
   Archive
   ============================================================ */
.archive-title {
  font-size: var(--font-xl);
  margin-bottom: 1rem;
}

.archive-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.load-more-container {
  text-align: center;
}

.list-container {
  display: flex;
  flex-direction: column;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--gap);

  @media (width >= 48rem) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width >= 64rem) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--gap);

  @media (width >= 48rem) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width >= 64rem) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.row-container {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);

  @media (width >= 64rem) {
    flex-direction: row;

    .container-primary {
      width: 75%;
    }

    .container-secondary {
      width: 25%;
    }

    .grid-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

.episode-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);

  @media (width >= 64rem) {
    flex-direction: row;

    > * {
      flex: 1;
    }
  }
}

/* ============================================================
   Filter UI
   ============================================================ */
.filter-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  @media (width >= 64rem) {
    border-top: 1px solid var(--color-stroke-primary);
    padding-bottom: 1rem;
  }

  &.expanded {
    padding-bottom: 2rem;

    .filter-title::before {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTIuNUwxMCA3LjVMMTUgMTIuNSIgc3Ryb2tlPSIjMUYxRjFGIiBzdHJva2Utd2lkdGg9IjEuNjY2NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
    }

    .filter-section {
      display: flex;
    }
  }
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1rem;
  background: var(--color-background-primary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.filter-title {
  font-weight: 500;
  cursor: pointer;
  min-height: 30px;
  display: inline-flex;
  align-items: center;

  &::before {
    content: '';
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgNy41TDEwIDEyLjVMMTUgNy41IiBzdHJva2U9IiMxRjFGMUYiIHN0cm9rZS13aWR0aD0iMS42NjY2NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
    background-size: contain;
    width: 1em;
    height: 1em;
    margin-right: 0.5rem;
    vertical-align: middle;

    @media (width >= 64rem) {
      display: none;
    }
  }
}

.filter-section {
  display: none;
  flex-direction: column;
  gap: 1rem;

  @media (width >= 64rem) {
    display: flex;
  }
}

.filter-actions {
  display: flex;
  gap: 0.5rem;

  button {
    line-height: 1;
    display: inline-block;
    padding: 0.5rem;
    font-size: var(--font-xs);
    cursor: pointer;
    border: 1px solid #999;
    font-family: var(--font-display);

    &:disabled {
      display: none;
    }
  }
}

button.reset-filters,
button.cancel-filters {
  border-color: transparent;
}

.filter-label {
  font-weight: 500;
  font-size: var(--font-sm);
}

.filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;

  .button-more {
    font-size: var(--font-xs);
  }
}

.badge-filter {
  line-height: 1;
  display: inline-block;
  padding: 0.5rem;
  font-size: var(--font-xs);
  cursor: pointer;
  background: #fff;
  color: #1f1f1f;
  font-family: var(--font-display);

  &:has(input:checked) {
    background: var(--color-background-player);
    color: #f1f1f1;
  }

  input {
    display: none;
  }
}

.filter-item-hidden {
  display: none;
}

/* ============================================================
   Summaries
   ============================================================ */

/* --- Base --- */
.summary a {
  text-decoration: none;
}

.summary > a {
  display: block;
}

.summary-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  width: 100%;
}

.summary .post-title {
  font-size: var(--font-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Default --- */
.summary-default {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--gutter);
  border-top: 1px solid var(--color-stroke-primary);
  padding: var(--spacing-base) 0;

  > a {
    width: 100%;
    max-width: 6rem;

    img {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
    }
  }

  .summary-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    line-height: var(--line-height-base);
  }

  .post-excerpt {
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    line-height: var(--line-height-base);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- Episode --- */
.summary-episode {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  aspect-ratio: 4 / 5;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-base);
  background: var(--color-gray-900);
  color: var(--color-gray-50);

  .post-title,
  .post-hosts {
    width: 100%;
    max-width: calc(100% - calc(var(--spacing-base) * 2));
  }

  .post-title {
    position: absolute;
    top: var(--spacing-base);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    a {
      text-decoration: none;
      font-size: var(--font-sm);
      transition: opacity 0.1s ease;
      line-height: var(--line-height-base);
      display: block;
    }
  }

  .post-hosts {
    position: absolute;
    bottom: var(--spacing-base);    
    font-size: var(--font-xs);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- Program --- */
.summary-program {
  display: flex;
  gap: var(--spacing-xl);
  border-top: 1px solid var(--color-stroke-primary);
  padding: var(--spacing-base) 0;

  > a {
    width: 25%;
    max-width: 96px;
  }

  img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  .summary-header {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    line-height: var(--line-height-base);
  }

  .post-title {
    font-size: var(--font-lg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.program-residents {
  font-size: var(--font-sm);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Resident --- */
.summary-resident {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-base);
  border-top: 1px solid var(--color-stroke-primary);
  padding: var(--spacing-base) 0;

  a {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    padding: 0 var(--spacing-sm);
  }

  img {
    width: 100%;
    max-width: 20rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
  }
}

/* --- Information --- */
.summary-information {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--color-stroke-primary);
  padding: 1rem 0;

  .post-thumbnail {
    position: relative;
    aspect-ratio: 3 / 2;
    background-color: var(--color-white);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .overlay {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.25);
      z-index: 1;
      backdrop-filter: blur(8px);
    }

    img {
      position: relative;
      z-index: 2;
      padding: var(--spacing-base) 0;
      aspect-ratio: 1 / 1;
      display: block;
      width: auto;
      height: 100%;
      object-fit: contain;
    }
  }

  .summary-footer {
    display: flex;
    gap: var(--spacing-base);
    align-items: center;
  }
}

/* --- Carousel --- */
.post-carousel {
  position: relative;

  .prev {
    left: 0;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjIwcHgiIHN0cm9rZS13aWR0aD0iMS41IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY29sb3I9IiMwMDAwMDAiPjxwYXRoIGQ9Ik0xNSA2TDkgMTJMMTUgMTgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPg==');
  }

  .next {
    right: 0;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjIwcHgiIHN0cm9rZS13aWR0aD0iMS41IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgY29sb3I9IiMwMDAwMDAiPjxwYXRoIGQ9Ik05IDZMMTUgMTJMOSAxOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PC9zdmc+');
  }

  > a {
    background-color: var(--color-white);
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 9999px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 2rem;
    height: 2rem;
    transition: all 0.2s ease;
  }

  @media (hover: hover) {
    > a:hover {
      background-color: transparent;
    }
  }
}

/* ============================================================
   Post Navigation
   ============================================================ */
.post-navigation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;

  img {
    aspect-ratio: 1 / 1;
    width: 48px;
    object-fit: cover;
  }

  dl {
    font-family: var(--font-display);
  }

  dt {
    font-size: var(--font-xl);
  }

  dd {
    display: flex;
    gap: 1rem;
    border-top: 1px solid var(--color-stroke-primary);
    margin-top: 1rem;
    padding-top: 1rem;

    .nav-title {
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: var(--line-height-base);
    }
  }
}

.back-to-archive {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--font-sm);
  padding: 0.5rem 0;
  text-decoration: none;
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.6;
  }
}

/* ============================================================
   Buttons
   ============================================================ */
.button-more,
.button-link {
  line-height: 1;
  display: inline-flex;
  padding: 0.5rem;
  font-size: var(--font-base);
  cursor: pointer;
  font-family: var(--font-display);
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.button-more::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: '';
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTBIMTBNMTAgMTBIMTVNMTAgMTBWNU0xMCAxMFYxNSIgc3Ryb2tlPSIjMUYxRjFGIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
  background-size: contain;
}

/* ============================================================
   Front Page
   ============================================================ */
body.home {
  main.content {
    max-width: none;

    @media (width >= 64rem) {
      gap: 6rem;
    }
  }

  section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);

    > header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        font-size: var(--font-xl);
      }

      > a {
        font-family: var(--font-display);
        font-size: var(--font-xs);
        line-height: 1;
        text-decoration: none;
        border: 1px solid var(--color-stroke-primary);
        padding: 0.25rem 0.5rem;
      }
    }
  }

  .episodes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: calc(var(--gap) * 2);
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--margin));
    gap: var(--gap);

    &::-webkit-scrollbar {
      display: none;
    }

    > :first-child {
      margin-left: var(--margin);
    }

    > :last-child {
      margin-right: var(--margin);
    }

    > * {
      flex: 0 0 calc(100vw - var(--gap) * 4);
      scroll-snap-align: start;
    }

    @media (width >= 48rem) {
      > * {
        flex: 0 0 calc((100vw - var(--gap) * 5) / 2);
      }
    }

    @media (width >= 64rem) {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: visible;
      scroll-snap-type: none;
      scroll-padding-left: 0;
      margin-inline: 0;

      > :first-child {
        grid-column: span 2;
        grid-row: span 2;
        height: 100%;
        margin-left: 0;
        .post-title a {
          font-size: var(--font-lg);
          font-weight: 400;
        }
      }

      > :last-child {
        margin-right: 0;
      }
    }
  }

  .programs,
  .informations {
    @media (width >= 48rem) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gap);
    }

    @media (width >= 64rem) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .residents {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--gap);

    @media (width >= 48rem) {
      grid-template-columns: repeat(3, 1fr);
    }

    @media (width >= 64rem) {
      grid-template-columns: repeat(6, 1fr);
    }
  }
}