/* Header and hero. The stylesheets load in order: base, hero, strip, features, questions, responsive. */
/* ---------- Header ---------- */

.top {
  position: sticky; top: 0; z-index: 50;
  background: rgb(18 17 16 / 0.9);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.top.is-scrolled { border-bottom-color: var(--hairline); }
/* Until the hero's own button is scrolled away, the header's stays quiet: outlined, not amber.
   One amber action per view. */
.js .top .btn-small { transition: background-color 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease), transform 120ms var(--ease); }
.js .top:not(.is-scrolled) .btn-small { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--rule); }
@media (hover: hover) {
  .js .top:not(.is-scrolled) .btn-small:hover { background: var(--surface-high); }
}
.top-inner { display: flex; align-items: center; gap: 28px; max-width: calc(var(--wrap) + 2 * var(--gutter)); height: var(--top-h); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 34px; height: 34px; flex: none; fill: currentColor; }
.wordmark { font: var(--display-weight) 31px/1 var(--display); }
.top-nav { display: flex; gap: 26px; margin-left: auto; }
.top-nav a { padding: 10px 0; font-size: 15px; font-weight: 500; color: var(--text-dim); text-decoration: none; transition: color 160ms var(--ease); }
.top .btn { margin-left: 4px; }

/* The mark's intro: the curtain comes down once, as the lights go down. */
.js .top.is-intro .mark path { transform-box: fill-box; transform-origin: 50% 0; animation: curtain-down 900ms var(--ease) both; }
@keyframes curtain-down { from { transform: scaleY(0.04); opacity: 0; } 30% { opacity: 1; } }

/* ---------- Hero ---------- */

/* The light spill bleeds past the screen; clip it at the window edge so the page never scrolls sideways. */
.hero { --hero-top: clamp(16px, 2.2vw, 32px); padding-block: var(--hero-top) clamp(40px, 5vw, 72px); overflow-x: clip; }
.hero + .feature { padding-top: clamp(48px, 5.5vw, 88px); }
/* The whole hero fits the first view: the headline and lede size themselves by the window's
   width and height, and the screen takes whatever height is left. */
.hero-grid {
  display: flex; flex-direction: column; gap: clamp(18px, 3svh, 36px);
  min-height: calc(100svh - var(--top-h) - var(--hero-top) - clamp(14px, 2svh, 24px));
}
.hero-intro {
  /* The button's label sits on the headline's last baseline. */
  display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); align-items: last baseline;
  column-gap: clamp(24px, 4vw, 72px);
}
.hero-side { display: grid; justify-items: start; gap: clamp(16px, 2.4svh, 24px); }
/* The headline is always two lines, one phrase each, sized so the longer, "Silsode keeps
   track.", fills its column. Imbue's optical size widens it as it gets smaller, from 6.61em at
   90px and up to 6.82em at 36px, so 6.9em fits it at every size. */
.hero-head { container-type: inline-size; min-width: 0; }
h1 { font-size: min(100cqi / 6.9, 11svh, 116px); }
.hero-head h1 > span { display: block; white-space: nowrap; }
.lede { font-size: clamp(17px, min(1.45vw, 2.5svh), 21px); line-height: 1.5; max-width: 30em; }

/* The screen: key art projected in a dark room, the row as its title card. */
.screen-wrap { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: max(320px, min(400px, 54svh)); max-height: 800px; }
.screen { position: relative; isolation: isolate; flex: 1 1 auto; display: flex; flex-direction: column; }
.screen-spill { position: absolute; inset: 12% -2% -6%; z-index: -1; pointer-events: none; }
.screen-spill i {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(56px) saturate(1.25);
  opacity: 0; transform: scale(1.06);
  transition: opacity 900ms var(--ease);
}
.screen-spill i.is-on { opacity: 0.5; }
.screen-frame {
  /* clip, not hidden: the art's zoom overflows, and a frame that can scroll can be scrolled. */
  position: relative; overflow: hidden; overflow: clip; flex: 1 1 auto;
  border-radius: 24px;
  background: #0d0c0b;
  box-shadow: 0 0 0 1px rgb(233 228 217 / 0.07), 0 40px 120px -40px rgb(0 0 0 / 0.9);
}
.screen-art, .screen-art .art { position: absolute; inset: 0; }
.screen-art .art { opacity: 0; transition: opacity 900ms var(--ease); }
.screen-art .art.is-on { opacity: 1; }
.screen-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 45%); }
.screen-art .art.is-on img { animation: push 9s linear both; }
@keyframes push { from { transform: scale(1.06); } to { transform: scale(1); } }
.screen-frame::before {
  /* Scrims, so the title card and the programme stay readable on any key art. */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(13 12 11 / 0.72) 0%, rgb(13 12 11 / 0) 24%),
    linear-gradient(to top, rgb(13 12 11 / 0.97) 0%, rgb(13 12 11 / 0.88) 26%, rgb(13 12 11 / 0.35) 58%, rgb(13 12 11 / 0) 78%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(13 12 11 / 0.55) 100%);
}
.screen-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--grain) 0 0 / 200px; mix-blend-mode: overlay; opacity: 0.55;
}
.screen.is-changing .screen-grain { animation: flicker 600ms steps(4) both; }
/* First light: the projector warms up. */
.screen.is-intro .screen-art { animation: projector 1700ms var(--ease) both; }
@keyframes projector { 0% { filter: brightness(0); } 30% { filter: brightness(0.62); } 38% { filter: brightness(0.34); } 52% { filter: brightness(0.8); } 100% { filter: none; } }
@keyframes flicker { 0% { background-position: 0 0; } 25% { background-position: 37px 91px; } 50% { background-position: 113px 23px; } 75% { background-position: 61px 147px; } }

.screen-row {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(20px, 3.4vw, 52px) clamp(18px, 2.4vw, 32px);
}
/* A second scrim tied to the title card, so its text stays readable whatever the art or the frame height. */
.screen-row::before {
  content: ''; position: absolute; z-index: -1; inset: -50% 0 0 0; pointer-events: none;
  background:
    radial-gradient(64% 72% at 20% 70%, rgb(13 12 11 / 0.66), rgb(13 12 11 / 0) 72%),
    linear-gradient(to top, rgb(13 12 11 / 0.8), rgb(13 12 11 / 0.5) 48%, rgb(13 12 11 / 0) 100%);
}
.screen-fate, .screen-title { text-shadow: 0 1px 2px rgb(13 12 11 / 0.5), 0 2px 28px rgb(13 12 11 / 0.55); }
.screen-fate { display: flex; align-items: center; gap: 10px; font-size: clamp(15px, 1.3vw, 18px); font-weight: 500; }
.screen-title {
  /* Room below for its descenders, so a g or y never reaches the strip. */
  margin: calc(6px - var(--ink-top)) 0 calc(clamp(14px, 1.8vw, 22px) + var(--ink-bottom));
  font: var(--display-weight) clamp(54px, min(8.8vw, 15svh), 136px)/var(--lead) var(--display);
  text-wrap: balance;
}
.screen-track {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
  margin: 0 -14px; padding: 12px 14px; width: calc(100% + 28px);
  border-radius: 14px; transition: background-color 160ms var(--ease);
}
.screen-meta, .prog-meta, .tap-meta, .c-where, .c-next, .cu-meta { word-spacing: -0.3em; }
/* As wide as the longest meta any hero show can read (hero.js), so the strip beside it never moves. */
.screen-meta { flex: none; min-width: calc(var(--meta-ch, 0) * 1ch); margin-left: auto; text-align: right; font: 600 clamp(22px, 2.5vw, 38px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.screen-meta.is-nudged { animation: nudge 520ms var(--ease); }
@keyframes nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-2px); } }
.screen-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 44px; margin-top: 2px; }
.screen-msg { font-size: 15px; color: #b9b3a8; }
.screen.is-changing .screen-row > * { animation: card-in 700ms var(--ease) both; }
.screen.is-changing .screen-title { animation-delay: 60ms; }
.screen.is-changing .screen-track { animation-delay: 120ms; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } }

/* The programme: the shows on screen, as a channel strip across the top. */
.programme-bar {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 10px;
  padding: var(--corner) var(--corner) var(--corner) clamp(14px, 2.4vw, 36px);
}
.programme { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.programme::-webkit-scrollbar { display: none; }
.prog {
  position: relative; display: flex; align-items: center; gap: 10px; flex: none;
  min-height: 52px; padding: 6px 14px 6px 6px; border: 0; border-radius: 12px;
  background: rgb(18 17 16 / 0.42); color: var(--text); text-align: left; cursor: pointer;
  transition: background-color 200ms var(--ease), opacity 200ms var(--ease);
  overflow: hidden;
}
.prog img { width: 26px; height: 39px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgb(233 228 217 / 0.12); }
.prog-text { display: grid; gap: 3px; line-height: 1.1; }
.prog-title { font-size: 14px; font-weight: 600; white-space: nowrap; }
.prog-meta { font: 500 12px/1 var(--mono); color: #b3ada2; white-space: nowrap; }
.prog[aria-selected='true'] { background: rgb(233 228 217 / 0.16); }
.prog::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
}
.prog[aria-selected='true']::after { transform: scaleX(var(--p, 0)); }
.cycle-toggle { margin-left: auto; }
.no-js .programme-bar { display: none; }