:root {
  color-scheme: dark; /* native bits (scrollbars, controls) follow the dark theme instead of flashing white */
  --ink: #1f202b;
  --ink-deep: #121219;
  --plum: #1f002d;
  --paper: #f3ebe1;
  --paper-dim: rgba(243, 235, 225, .62);
  --line: rgba(243, 235, 225, .16);
  --sun: #ffb862;
  --rose: #ff6f91;
  --lilac: #c69bff;
  --logo-grad: linear-gradient(180deg, var(--lilac) 0%, var(--rose) 48%, var(--sun) 100%);

  --gutter: clamp(16px, 4vw, 64px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --display: "Archivo", "Arial Narrow", sans-serif;
  --text: "Archivo", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

html {
  -webkit-text-size-adjust: 100%;
  /* no visible page scrollbar: scrolling (wheel, trackpad, touch, keys) works as before */
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--text);
  font-stretch: 100%;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }

/* film grain: keeps big flat areas from looking digital */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

img, video, canvas { display: block; max-width: 100%; }
img, canvas {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

::selection { background: var(--rose); color: var(--ink-deep); }

:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }

h2, .display {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.01em;
}

/* split-line reveal */
.line { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.line__in { display: block; will-change: transform; }


/* ---------- loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--gutter);
  background: #07060a;
  color: var(--paper);
}
.loader__count {
  align-self: end;
  justify-self: end;
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(110px, 24vw, 380px);
  line-height: .78;
  font-variant-numeric: tabular-nums;
}
.loader__count sup { font-size: .22em; vertical-align: top; margin-left: .1em; color: var(--rose); }
.loader__bar {
  display: block;
  height: 1px;
  margin: 28px 0 0;
  background: var(--line);
}
.loader__bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
}

.loader__enter {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.loader__enter[hidden] { display: none; }
.loader__btn {
  position: relative;
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(42px, 7vw, 104px);
  line-height: .9;
  text-transform: uppercase;
  overflow: hidden;
}
.loader__btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .06em;
  height: .07em;
  background: var(--logo-grad);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-out);
}
.loader__btn:hover::after, .loader__btn:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.loader__btn--quiet {
  font-family: var(--text);
  font-stretch: 100%;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.loader__btn--quiet::after { height: 1px; bottom: -2px; background: var(--paper-dim); }


/* ---------- maintenance (switched on from site-config.json) ---------- */

.maintenance {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(16px, 3vh, 28px);
  padding: var(--gutter) var(--gutter) 72px;
  text-align: center;
  overflow-y: auto;
  background:
    radial-gradient(120% 80% at 50% 115%, rgba(255, 111, 145, .28), transparent 60%),
    radial-gradient(80% 60% at 50% -10%, rgba(198, 155, 255, .18), transparent 60%),
    var(--plum);
}
.maintenance[hidden] { display: none; }
.is-maintenance body { overflow: hidden; }
.is-maintenance body > :not(.maintenance):not(dialog):not(template):not(script) { display: none !important; }

.maintenance__logo { width: clamp(110px, 16vw, 200px); height: auto; animation: maintIn 1s var(--ease-out) both; }
.maintenance__title {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(56px, 12vw, 180px);
  line-height: .86;
  text-transform: uppercase;
  animation: maintIn 1s var(--ease-out) .12s both;
}
.maintenance__message {
  max-width: 46ch;
  color: var(--paper-dim);
  animation: maintIn 1s var(--ease-out) .24s both;
}
.maintenance__eta {
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--paper-dim);
  animation: maintIn 1s var(--ease-out) .32s both;
}
.maintenance__eta[hidden] { display: none; }
.maintenance__eta time { color: var(--sun); font-variant-numeric: tabular-nums; }
.maintenance__discord {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 14px 22px;
  background: linear-gradient(165deg, var(--lilac), var(--rose) 50%, var(--sun));
  color: var(--plum);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: translate .5s var(--ease-out), box-shadow .5s var(--ease-out);
  animation: maintIn 1s var(--ease-out) .4s both;
}
.maintenance__discord:hover {
  translate: 0 -3px;
  box-shadow: 0 18px 40px -16px rgba(255, 111, 145, .7);
}
.maintenance__legal {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 24px;
  font-size: 11px;
  color: rgba(243, 235, 225, .4);
}
@keyframes maintIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- masthead ---------- */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 18px var(--gutter);
  /* slides in, never fades: a translucent parent would switch off the children's backdrop blur */
  translate: 0 -120%;
  visibility: hidden;
  transition: translate .8s var(--ease-out), visibility 0s .8s;
}
.masthead.is-visible { translate: 0 0; visibility: visible; transition-delay: 0s; }
.masthead__logo { position: relative; display: block; }
.masthead__logo img { width: 64px; height: auto; }
/* No bar behind the header: each logo / label gets its own soft, edgeless blur spot */
.masthead__logo::before,
.masthead__nav a::before,
.masthead__date::before {
  content: "";
  position: absolute;
  inset: -14px -22px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 10, 14, .08), rgba(10, 10, 14, 0));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}
.masthead__logo::before { inset: -16px -20px; }
.masthead__nav { display: flex; gap: 28px; margin-left: auto; }
.masthead__nav a, .masthead__date {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.masthead__nav a { position: relative; color: var(--paper-dim); transition: color .3s; }
.masthead__nav a:hover { color: var(--paper); }
.masthead__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.masthead__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.masthead__date { position: relative; color: var(--sun); font-variant-numeric: tabular-nums; }


/* ---------- cover (scroll-driven frame sequence) ---------- */

.cover { position: relative; height: 640vh; background: var(--plum); }
.cover__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.cover__canvas { width: 100%; height: 100%; }

.cover__hint {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vh, 32px);
  font-size: clamp(12px, .8vw, 24px);
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
  pointer-events: none;
}
.cover__hint.is-on { opacity: 1; }
.cover__hint.is-on.is-gone { opacity: 0; translate: -50% -30%; }
.cover__hint svg { width: auto; height: clamp(56px, 7vh, 140px); color: var(--paper); animation: nudge 2.2s var(--ease-out) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(14px); opacity: .55; }
}

.cover__outro {
  position: absolute;
  /* sits above the Discord / music cards, which settle in the bottom corners at the end */
  inset: auto var(--gutter) calc(clamp(24px, 5vh, 56px) + 76px);
  display: grid;
  justify-items: start;
  gap: 10px;
  pointer-events: none;
}
.cover__date {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 92px);
  line-height: .86;
  text-transform: uppercase;
}
.cover__platforms {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.cover__outro > * { opacity: 0; }


/* ---------- countdown ---------- */

.countdown {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 18vh var(--gutter) 10vh;
  overflow: hidden;
  isolation: isolate;
}
.countdown__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.countdown__bg img { width: 100%; height: 100%; object-fit: cover; }
.countdown__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(31, 32, 43, .55) 30%, rgba(18, 18, 25, .82) 100%),
    radial-gradient(120% 80% at 50% 110%, rgba(255, 111, 145, .22), transparent 60%);
}
.countdown__title { font-size: clamp(44px, 7.5vw, 132px); max-width: 12ch; }

.clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(40px, 8vh, 96px) 0 clamp(28px, 5vh, 56px);
  border-top: 1px solid var(--line);
}
.clock__unit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px clamp(8px, 1.6vw, 28px) 0;
  border-left: 1px solid var(--line);
}
.clock__unit:first-child { border-left: 0; padding-left: 0; }
.clock__num {
  display: flex;
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(64px, 14.5vw, 260px);
  line-height: .8;
  font-variant-numeric: tabular-nums;
}
.digit {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-bottom: .02em;
}
.digit__in { display: block; position: relative; top: 0; }
.digit__in b {
  display: block;
  font-weight: inherit;
  background: var(--logo-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.digit__in + .digit__in { position: absolute; left: 0; right: 0; top: 100%; }
.clock__label {
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--paper-dim);
}


/* ---------- ticker ---------- */

.ticker {
  overflow: hidden;
  padding: 3vh 0;
  background: var(--ink-deep);
  border-block: 1px solid var(--line);
  white-space: nowrap;
}
.ticker__track { display: inline-flex; will-change: transform; }
.ticker__track span {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(56px, 10vw, 170px);
  line-height: 1;
  text-transform: uppercase;
}
.ticker__track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
.ticker__track span::after {
  content: "";
  width: .16em;
  height: .16em;
  margin: 0 .45em;
  border-radius: 50%;
  background: var(--rose);
}


/* ---------- Jason & Lucia ---------- */

.duo { padding: 0 var(--gutter) 14vh; background: var(--ink-deep); }
.duo__art {
  height: 100svh;
  margin: 0 calc(var(--gutter) * -1);
  overflow: hidden;
}
.duo__art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.duo__title {
  font-size: clamp(48px, 9vw, 168px);
  margin: 14vh 0 12vh;
}
.duo__title .line:nth-child(2) { padding-left: 1.2em; }
.duo__title .line:nth-child(3) { padding-left: .4em; color: var(--sun); }

.hero-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
  align-items: end;
  margin-bottom: 18vh;
}
.hero-card__pic {
  grid-column: 1 / span 7;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.hero-card__pic img, .hero-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-card__text {
  grid-column: 9 / span 4;
  padding-bottom: 6vh;
  max-width: 34ch;
  color: var(--paper-dim);
}
.hero-card__name {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(54px, 7.5vw, 140px);
  line-height: .84;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 24px -.04em;
}
.hero-card__thumb {
  position: absolute;
  right: 0;
  top: -6vh;
  width: clamp(140px, 22vw, 360px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.hero-card--jason .hero-card__pic { grid-column: 6 / span 7; grid-row: 1; }
.hero-card--jason .hero-card__text { grid-column: 1 / span 4; grid-row: 1; }
.hero-card--jason .hero-card__thumb { right: auto; left: 0; top: -10vh; }


/* ---------- Leonida (horizontal) ---------- */

.leonida { background: var(--ink); overflow: hidden; }
.leonida__pin {
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.leonida__head {
  position: absolute;
  top: 12vh;
  left: var(--gutter);
  z-index: 2;
}
.leonida__head h2 { font-size: clamp(40px, 5.6vw, 96px); margin-top: 14px; }
.leonida__track {
  display: flex;
  align-items: flex-start;
  gap: 6vw;
  margin: 0;
  padding: 0 var(--gutter) 0 calc(var(--gutter) + clamp(260px, 32vw, 560px));
  list-style: none;
  will-change: transform;
}
/* photo + title stacked in normal flow (no viewport-height maths), so nothing can fall off a short screen */
.place {
  position: relative;
  flex: none;
  width: clamp(300px, 52vw, 920px);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}
.place:nth-child(even) { margin-top: 12vh; }
.place__pic { height: min(58vh, 64cqi); overflow: hidden; }
.place__pic img { width: 120%; max-width: none; height: 100%; object-fit: cover; margin-left: -10%; }
.place__name {
  position: relative;
  z-index: 1;
  margin: -.5em 0 0 -.06em;
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  /* sized off the card (cqi), not the viewport: "Port Gellhorn" fits on any screen */
  font-size: clamp(28px, min(13cqi, 13vh), 160px);
  white-space: nowrap;
  max-width: 100%;
  line-height: .84;
  text-transform: uppercase;
  text-shadow: 0 .04em .3em rgba(18, 18, 25, .35);
}


/* ---------- cast ---------- */

.cast { position: relative; padding: 18vh var(--gutter); background: var(--ink-deep); }
.cast__title { font-size: clamp(48px, 8vw, 150px); margin: 16px 0 10vh; }
.cast__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.cast__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 2.2vh 0;
  border-top: 1px solid var(--line);
  cursor: default;
}
.cast__name {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(40px, 6.4vw, 118px);
  line-height: .9;
  text-transform: uppercase;
  transition: transform .7s var(--ease-out), color .4s;
}
.cast__role {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-align: right;
}
.cast__list:hover .cast__name { color: rgba(243, 235, 225, .28); }
.cast__list .cast__row:hover .cast__name { color: var(--paper); transform: translateX(2vw); }
.cast__float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  width: clamp(220px, 24vw, 420px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  scale: .7;
}
.cast__float img { width: 100%; height: 100%; object-fit: cover; }
.cast__thumb { display: none; }


/* ---------- nights (editorial grid) ---------- */

.nights { padding: 16vh var(--gutter) 22vh; background: var(--ink); }
.nights__title { font-size: clamp(48px, 8.4vw, 156px); margin-bottom: 12vh; }
.nights__title .line:last-child { color: var(--rose); padding-left: 1.4em; }
.nights__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.nights__item { overflow: hidden; }
.nights__item img { width: 100%; height: 100%; object-fit: cover; }
.nights__item--a { grid-column: 1 / span 7; aspect-ratio: 16 / 10; }
.nights__item--b { grid-column: 9 / span 4; aspect-ratio: 3 / 4; margin-top: 20vh; }
.nights__item--c { grid-column: 2 / span 4; aspect-ratio: 4 / 5; margin-top: -8vh; }
.nights__item--d { grid-column: 7 / span 6; aspect-ratio: 16 / 9; margin-top: 10vh; }
.nights__item--e { grid-column: 1 / span 5; aspect-ratio: 16 / 9; margin-top: 6vh; }
.nights__item--f { grid-column: 6 / span 6; aspect-ratio: 16 / 9; margin-top: 18vh; }


/* ---------- trailer reel ---------- */

.reel { position: relative; height: 300vh; background: var(--ink-deep); }
.reel__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.reel__frame {
  position: absolute;
  inset: 0;
  clip-path: inset(24% 30% 24% 30%);
  will-change: clip-path;
}
.reel__preview { width: 100%; height: 100%; object-fit: cover; }
.reel__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 18, 25, .85), transparent 55%);
}
.reel__copy {
  position: absolute;
  inset: auto var(--gutter) clamp(96px, 13vh, 140px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.reel__title { font-size: clamp(72px, 15vw, 280px); }
.reel__choices { display: flex; flex-direction: column; gap: 4px; min-width: min(360px, 100%); }
.reel__btn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .3s, padding .5s var(--ease-out);
}
.reel__btn span::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 12px;
  border-left: 8px solid var(--sun);
  border-block: 5px solid transparent;
}
.reel__btn:hover { color: var(--sun); padding-left: 10px; }


/* ---------- finale ---------- */

.finale {
  position: relative;
  min-height: 110svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) 14vh;
  overflow: hidden;
  isolation: isolate;
}
.finale__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; }
.finale__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, transparent 35%, rgba(18, 18, 25, .75) 100%);
}
.finale__title { font-size: clamp(64px, 13vw, 250px); }
.finale__clock {
  margin-top: 28px;
  font-size: clamp(14px, 1.3vw, 20px);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--sun);
}


/* ---------- footer ---------- */

.site-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px 48px;
  padding: 56px var(--gutter) 128px;
  background: #0b0b10;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--paper-dim);
}
.site-foot__logo { width: 84px; height: auto; }
.site-foot__disclaimer { max-width: 60ch; line-height: 1.6; }
.site-foot__legal { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.site-foot__legal button {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color .3s, color .3s;
}
.site-foot__legal button:hover { color: var(--sun); border-color: var(--sun); }


/* ---------- radio (music player): the Discord card's mirror image, bottom right ---------- */

.radio {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  bottom: calc(clamp(12px, 2vw, 28px) + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0;
  translate: 0 20px;
  pointer-events: none;
  transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
}
.radio { visibility: hidden; }
.radio.is-ready { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; }

.radio__card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 296px;
  padding: 6px 18px 6px 6px;
  background: rgba(12, 12, 18, .64);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(243, 235, 225, .1), 0 24px 48px -24px rgba(0, 0, 0, .7);
  overflow: hidden;
  isolation: isolate;
}

/* Same hover as the Discord card, mirrored: the gradient opens rightwards from the logo tile */
.radio__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(165deg, var(--lilac) 0%, var(--rose) 50%, var(--sun) 100%);
  clip-path: inset(6px calc(100% - 58px) 6px 6px);
  transition: clip-path .75s var(--ease-out);
}
.radio__card:is(:hover, :has(:focus-visible))::before { clip-path: inset(0 0 0 0); }

.radio__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #fff;
}
.radio__toggle > svg {
  grid-area: 1 / 1;
  filter: drop-shadow(0 2px 6px rgba(80, 20, 60, .35));
  transition: opacity .3s ease, scale .5s var(--ease-out), rotate .6s var(--ease-out);
}
.radio__logo { width: 28px; height: 28px; }
.radio__icon { width: 22px; height: 22px; opacity: 0; scale: .6; }
/* same move as the Discord logo when the card is hovered */
.radio__card:is(:hover, :has(:focus-visible)) .radio__logo { scale: 1.12; rotate: -8deg; }
/* the logo steps aside for play / pause when you reach for the tile */
.radio__toggle:is(:hover, :focus-visible) .radio__logo { opacity: 0; scale: .6; rotate: -8deg; }
.radio:not(.is-playing) .radio__toggle:is(:hover, :focus-visible) .radio__icon--play,
.radio.is-playing .radio__toggle:is(:hover, :focus-visible) .radio__icon--pause { opacity: 1; scale: 1; }

.radio__meta { min-width: 0; }
.radio__track {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .35s ease;
}
.radio__artist {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-dim);
  transition: color .35s ease;
}
.radio__card:is(:hover, :has(:focus-visible)) .radio__track { color: var(--plum); transition-delay: .18s; }
.radio__card:is(:hover, :has(:focus-visible)) .radio__artist { color: rgba(31, 0, 45, .72); transition-delay: .24s; }

.radio__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 9px; margin-left: 8px; vertical-align: -1px; }
.radio__eq i {
  width: 2px;
  height: 100%;
  background: rgba(243, 235, 225, .35);
  transform-origin: bottom;
  transform: scaleY(.18);
  transition: background .4s;
}
.radio.is-playing .radio__eq i { background: var(--sun); animation: eq .9s ease-in-out infinite alternate; }
.radio.is-playing .radio__eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.radio.is-playing .radio__eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.radio.is-playing .radio__eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; }
.radio.is-playing .radio__eq i:nth-child(5) { animation-duration: 1s; animation-delay: -.65s; }
.radio__card:is(:hover, :has(:focus-visible)) .radio__eq i { background: var(--plum); }
@keyframes eq { from { transform: scaleY(.15); } to { transform: scaleY(1); } }

.radio__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(243, 235, 225, .08);
}
.radio__progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--lilac), var(--rose), var(--sun));
  transform: scaleX(0);
  transform-origin: left;
}

/* The "screen" above the remote. YouTube's terms want the player visible and at least
   200x200 while it plays, so it's shown whole (284x200) and framed instead of hidden. */
.radio__drawer {
  display: grid;
  grid-template-rows: 0fr;
  width: 296px;
  transition: grid-template-rows .7s var(--ease-out);
}
.radio__inner { min-height: 0; overflow: hidden; }
.radio__embed {
  position: relative;
  height: 213px; /* 200px player + frame */
  padding: 6px 6px 7px;
  background: rgba(12, 12, 18, .64);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(243, 235, 225, .1);
}
/* seam between screen and remote */
.radio__embed::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--lilac), var(--rose), var(--sun));
  opacity: .8;
}
.radio__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  opacity: 0;
  scale: .96;
  transition: opacity .6s ease .15s, scale .9s var(--ease-out) .1s;
}
.radio.is-open .radio__drawer { grid-template-rows: 1fr; }
.radio.is-open .radio__embed iframe { opacity: 1; scale: 1; }
/* neon spill while the record spins */
.radio.is-open .radio__embed {
  box-shadow:
    inset 0 0 0 1px rgba(243, 235, 225, .1),
    0 -18px 60px -28px rgba(198, 155, 255, .55),
    18px 0 60px -34px rgba(255, 111, 145, .5);
}
.radio.is-open .radio__card {
  box-shadow:
    inset 0 0 0 1px rgba(243, 235, 225, .1),
    0 30px 60px -28px rgba(255, 111, 145, .45);
}


/* ---------- Discord invite: the radio card's mirror image, bottom left ---------- */

.invite {
  position: fixed;
  left: clamp(12px, 2vw, 28px);
  bottom: calc(clamp(12px, 2vw, 28px) + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  gap: 14px;
  width: 296px;
  padding: 6px 6px 6px 18px;
  background: rgba(12, 12, 18, .64);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(243, 235, 225, .1), 0 24px 48px -24px rgba(0, 0, 0, .7);
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  text-decoration: none;
  opacity: 0;
  translate: 0 20px;
  pointer-events: none;
  transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
}
.invite { visibility: hidden; }
.invite.is-ready { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; }

/* One gradient layer for the whole card. At rest it's clipped to the icon tile;
   on hover the clip opens leftwards until it fills the card. */
.invite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(165deg, var(--lilac) 0%, var(--rose) 50%, var(--sun) 100%);
  clip-path: inset(6px 6px 6px calc(100% - 58px));
  transition: clip-path .75s var(--ease-out);
}
.invite:is(:hover, :focus-visible)::before { clip-path: inset(0 0 0 0); }

.invite__meta { display: flex; flex-direction: column; min-width: 0; }
.invite__title {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .35s ease;
}
.invite__sub {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .35s ease;
}
/* the text turns as the gradient reaches it, not before */
.invite:is(:hover, :focus-visible) .invite__title { color: var(--plum); transition-delay: .18s; }
.invite:is(:hover, :focus-visible) .invite__sub { color: rgba(31, 0, 45, .72); transition-delay: .24s; }

.invite__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #fff;
}
.invite__icon svg {
  filter: drop-shadow(0 2px 6px rgba(80, 20, 60, .35));
  transition: scale .6s var(--ease-out), rotate .6s var(--ease-out);
}
.invite:is(:hover, :focus-visible) .invite__icon svg { scale: 1.12; rotate: -8deg; }

/* ---------- dock behaviour during the cover reveal ---------- */

/* Tucked away while the cover builds, so they never sit on top of it. They peek out when the
   pointer reaches their corner, and stay for good once the reveal is over. The music card
   never hides while it's playing: YouTube requires its player to stay visible. */
.radio.is-ready.is-tucked:not(.is-peek):not(.is-open):not(.is-playing),
.invite.is-ready.is-tucked:not(.is-peek) {
  opacity: 0;
  translate: 0 20px;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .45s ease, translate .6s var(--ease-out), visibility 0s linear .6s;
}

/* ---------- scroll nudge (shows after 2s without scrolling) ---------- */

.nudge {
  position: fixed;
  left: 50%;
  bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  translate: -50% 14px;
  pointer-events: none;
  transition: translate .6s var(--ease-out);
}
/* The blur is a soft spot with no edge: a radial mask feathers it into the page.
   Opacity is animated on the children, never on .nudge itself: a translucent parent
   would become the backdrop root and the blur would pop in only at the end of the fade. */
.nudge::before {
  content: "";
  position: absolute;
  inset: -56px -72px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 10, 14, .32), rgba(10, 10, 14, 0));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.nudge::before, .nudge > * { opacity: 0; transition: opacity .35s ease; }
.nudge.is-on { translate: -50% 0; transition-duration: .9s; }
.nudge.is-on::before, .nudge.is-on > * { opacity: 1; transition-duration: .7s; }
.nudge__shaft { width: 1px; height: 18px; background: currentColor; }
.nudge.is-on .nudge__shaft { opacity: .7; }
.nudge__label {
  font-size: 10px;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.nudge__head { display: block; animation: bob 1.6s var(--ease-out) infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(5px); }
}

/* ---------- dialogs ---------- */

dialog {
  padding: 0;
  border: 0;
  color: var(--paper);
  background: transparent;
  max-width: none;
  max-height: none;
}
dialog::backdrop { background: rgba(7, 6, 10, .88); backdrop-filter: blur(6px); }

.player { width: min(1200px, 94vw, calc((100svh - 120px) * 16 / 9)); }
.player__frame { aspect-ratio: 16 / 9; background: #000; }
.player__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.player__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}
.player__title { font-size: clamp(28px, 4vw, 60px); }
.player__close, .legal__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: rotate .5s var(--ease-out), color .3s, border-color .3s;
}
.player__close:hover, .legal__close:hover { rotate: 90deg; color: var(--sun); border-color: var(--sun); }

.legal {
  width: min(820px, 94vw);
  height: min(88svh, 920px);
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
}
.legal[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
/* Same language as the "Francesco Yazzo" details, at window scale: on open the gradient bar
   draws down the left edge and the text comes in line by line; closing plays it backwards. */
.legal { position: fixed; }
.legal::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--lilac), var(--rose), var(--sun));
  transform-origin: top;
  pointer-events: none;
}
.legal[open] { animation: legalIn .5s var(--ease-out) both; }
.legal[open]::after { animation: personBar .75s var(--ease-out) .05s both; }
.legal[open]::backdrop { animation: legalFade .4s ease both; }
.legal[open] :is(.legal__title, .legal__body > *) {
  animation: personRow .55s var(--ease-out) both;
  animation-delay: calc(.1s + var(--i, 0) * 45ms);
}
/* Exit uses its own keyframes: re-pointing the finished entrance at `reverse` would just snap. */
.legal.is-closing { animation: legalOut .38s cubic-bezier(.7, 0, .84, 0) .08s both; }
.legal.is-closing::after { animation: personBarOut .32s cubic-bezier(.7, 0, .84, 0) both; }
.legal.is-closing::backdrop { animation: legalFadeOut .42s ease .04s both; }
.legal.is-closing :is(.legal__title, .legal__body > *) {
  animation: personRowOut .25s cubic-bezier(.7, 0, .84, 0) both;
  animation-delay: calc((12 - var(--i, 0)) * 10ms);
}
@keyframes legalIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes legalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px); } }
@keyframes legalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes legalFadeOut { from { opacity: 1; } to { opacity: 0; } }
.legal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.legal__tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  overflow-x: auto;
  scrollbar-width: none;
}
.legal__tabs::-webkit-scrollbar, .legal__scroll::-webkit-scrollbar { display: none; }
.legal__tabs button {
  position: relative;
  padding: 10px 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-dim);
  transition: color .3s;
}
.legal__tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, var(--lilac), var(--rose), var(--sun));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.legal__tabs button:hover, .legal__tabs button[aria-current="page"] { color: var(--paper); }
.legal__tabs button[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.legal__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px) 64px;
}
.legal__title { font-size: clamp(40px, 6vw, 72px); margin-bottom: 20px; }
.legal__body { max-width: 64ch; }
.legal__body h3 {
  margin: 30px 0 8px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sun);
}
.legal__body p { color: var(--paper-dim); line-height: 1.7; }
.legal__body .legal__date { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 235, 225, .4); }
.legal__body a { color: var(--paper); text-underline-offset: 3px; }
.legal__body a:hover { color: var(--sun); }
/* controller's name: click to reveal the contact details */
.legal__person { margin-top: 10px; }
.legal__person summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}
.legal__person summary::-webkit-details-marker { display: none; }
.legal__person summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate .35s var(--ease-out), translate .35s var(--ease-out);
}
.legal__person[open] summary::after { rotate: 225deg; translate: 0 2px; }
.legal__person summary:hover { color: var(--sun); border-color: var(--sun); }
.legal__person dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 14px 18px;
  position: relative;
  background: rgba(243, 235, 225, .03);
}
/* the gradient bar draws itself top to bottom, then the rows slide in one by one */
.legal__person dl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--lilac), var(--rose), var(--sun));
  transform-origin: top;
}
.legal__person[open] dl { animation: personBg .5s ease both; }
.legal__person[open] dl::before { animation: personBar .6s var(--ease-out) both; }
.legal__person[open] :is(dt, dd) { animation: personRow .55s var(--ease-out) both; }
.legal__person[open] :is(dt, dd):nth-of-type(1) { animation-delay: .12s; }
.legal__person[open] :is(dt, dd):nth-of-type(2) { animation-delay: .2s; }
.legal__person[open] :is(dt, dd):nth-of-type(3) { animation-delay: .28s; }
/* closing = the opening played backwards: last row leaves first, then the bar draws back up.
   Same specificity as the opening delays above, and later, so these delays win. */
.legal__person.is-closing dl { animation: personBgOut .55s ease both; }
/* bar shrinks back up towards where it started drawing */
.legal__person.is-closing dl::before { animation: personBarOut .45s cubic-bezier(.7, 0, .84, 0) .1s both; }
.legal__person.is-closing :is(dt, dd) { animation: personRowOut .35s cubic-bezier(.7, 0, .84, 0) both; }
.legal__person.is-closing :is(dt, dd):nth-of-type(3) { animation-delay: 0s; }
.legal__person.is-closing :is(dt, dd):nth-of-type(2) { animation-delay: .06s; }
.legal__person.is-closing :is(dt, dd):nth-of-type(1) { animation-delay: .12s; }
@keyframes personBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes personBarOut { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes personRow { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes personRowOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-14px); } }
@keyframes personBg { from { background-color: rgba(243, 235, 225, 0); } to { background-color: rgba(243, 235, 225, .03); } }
@keyframes personBgOut { from { background-color: rgba(243, 235, 225, .03); } to { background-color: rgba(243, 235, 225, 0); } }
.legal__person dt {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  align-self: center;
}
.legal__person dd { margin: 0; color: var(--paper); overflow-wrap: anywhere; }


/* ---------- small screens ---------- */

@media (max-width: 860px) {
  .masthead { gap: 16px; }
  .masthead__nav { display: none; }
  .masthead__date { margin-left: auto; }

  .clock { grid-template-columns: repeat(2, 1fr); }
  .clock__unit:nth-child(3) { border-left: 0; padding-left: 0; }
  .clock__unit:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 22px; }
  .clock__num { font-size: clamp(64px, 24vw, 140px); }

  .hero-card { display: block; margin-bottom: 14vh; }
  .hero-card__text { padding: 28px 0 0; }
  .hero-card__thumb { display: none; }

  .leonida__head { top: 9vh; }
  .leonida__track { padding-left: 82vw; gap: 10vw; }
  .place { width: 80vw; }
  .place:nth-child(even) { margin-top: 6vh; }
  .place__pic { height: min(44vh, 90cqi); }

  .cast__row { flex-wrap: wrap; align-items: center; }
  .cast__role { text-align: left; width: 100%; }
  .cast__float { display: none; }

  .nights__grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .nights__item--a, .nights__item--d, .nights__item--f { grid-column: 1 / -1; margin-top: 0; }
  .nights__item--b, .nights__item--c, .nights__item--e { grid-column: span 3; margin-top: 0; }
  .nights__item--e { grid-column: 4 / span 3; }

  .site-foot { grid-template-columns: 1fr; }
  .legal { width: 100vw; height: 100svh; border: 0; }
  .legal__head { padding: 10px 10px 10px 16px; gap: 10px; }
  .legal__tabs { gap: 14px; }
  .legal__tabs button { font-size: 11px; letter-spacing: .1em; }
  .legal__scroll { padding: 28px 18px 56px; }
  .player__head { padding: 0 4px; }
  .site-foot__logo { width: 68px; }

  .radio__card { width: auto; grid-template-columns: 48px; gap: 0; padding: 5px; }
  .radio__card::before { clip-path: inset(5px); }
  .radio__toggle { width: 48px; height: 48px; }
  .radio__meta { display: none; }
  .radio__drawer { width: min(296px, calc(100vw - 96px)); } /* clears the Discord icon; still > 200px wide for YouTube */
  .invite { width: auto; grid-template-columns: 48px; padding: 5px; }
  .invite::before { clip-path: inset(5px); }
  .invite__meta { display: none; }
  .invite__icon { width: 48px; height: 48px; }
}

@media (hover: none) {
  /* a tap leaves :hover stuck on touch screens: keep both cards in their resting state */
  .radio__card:is(:hover, :has(:focus-visible))::before { clip-path: inset(6px calc(100% - 58px) 6px 6px); }
  .radio__card:hover .radio__track { color: var(--paper); }
  .radio__card:hover .radio__artist { color: var(--paper-dim); }
  .radio__card:hover .radio__eq i { background: rgba(243, 235, 225, .35); }
  .radio.is-playing .radio__card:hover .radio__eq i { background: var(--sun); }
  .invite:hover::before { clip-path: inset(6px 6px 6px calc(100% - 58px)); }
  .invite:hover .invite__title { color: var(--paper); }
  .invite:hover .invite__sub { color: var(--paper-dim); }
  .cast__float { display: none; }
  .cast__thumb {
    display: block;
    width: 84px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    order: -1;
  }
  .cast__row { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .radio.is-playing .radio__eq i, .nudge__head, .legal__person dl, .legal__person dl::before, .legal__person :is(dt, dd),
  .legal, .legal::after, .legal::backdrop, .legal :is(.legal__title, .legal__body > *),
  .maintenance > * { animation: none !important; }
  .invite::before, .invite__icon svg, .radio__card::before, .radio__toggle > svg, .radio__embed iframe { transition: none; }
}

/* ---------- fallback when the animation libraries can't load (CDN down, blocked, SRI mismatch) ---------- */

.is-static body::after { display: none; }
.is-static .cover { height: 100svh; }
.is-static .cover__canvas { background: #1f202b url("../assets/cover/sd/f334.webp") center / contain no-repeat; }
.is-static .cover__hint { display: none; }
.is-static .cover__outro > * { opacity: 1; }
.is-static .masthead { opacity: 1; translate: 0 0; visibility: visible; }
.is-static .leonida__pin { height: auto; padding: 22vh 0 10vh; overflow-x: auto; }
.is-static .reel { height: auto; }
.is-static .reel__pin { position: relative; }
.is-static .reel__frame { clip-path: none; }
.is-static .radio { display: none; }
.is-static .invite { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; }