/* OFFSTAGE: sand and ink, straight from the logo.
   Display: Big Shoulders Display (heavy, condensed, like the wordmark). Text: Instrument Sans. Two colours, no accent. */
:root {
  --sand: #dac7a6; --sand-2: #cdb78f; --ink: #1e1d1b; --ink-2: #2b2926;
  --on-ink: #dac7a6; --on-ink-dim: rgba(218, 199, 166, .7); --on-sand: #1e1d1b; --on-sand-dim: rgba(30, 29, 27, .68);
  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; --sans: "Instrument Sans", system-ui, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4.5rem); --ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--ink); color: var(--on-ink); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
a { color: inherit; }
img, svg, video { display: block; }
::selection { background: var(--sand); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--sand); color: var(--ink); padding: .6rem 1rem; }
.skip:focus { left: 8px; }
.wrap { width: min(1320px, 100% - 2 * var(--gutter)); margin-inline: auto; }
[hidden] { display: none !important; }
h2 { font: 900 clamp(3.4rem, 11vw, 10rem)/.84 var(--display); text-transform: uppercase; letter-spacing: -.005em; }

/* navigation: always readable, because it inverts against whatever is behind it */
.nav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem var(--gutter); color: var(--sand); mix-blend-mode: difference; pointer-events: none; }
.nav a { pointer-events: auto; }
.brand img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); }
.nav-links a { text-decoration: none; font-weight: 500; font-size: .95rem; letter-spacing: .01em; }
.nav-links a:not(.nav-cta) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-block: .3rem; transition: background-size .45s var(--ease); }
.nav-links a:not(.nav-cta):hover { background-size: 100% 1px; }
.nav-cta { border: 1.5px solid currentColor; border-radius: 999px; padding: .55rem 1.1rem; transition: background .3s, color .3s; }
.nav-cta:hover { background: var(--sand); color: var(--ink); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: 0 1.7rem; border-radius: 999px; border: 1.5px solid transparent; font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s; }
.btn:hover { transform: translateY(-2px); }
.btn-sand { background: var(--sand); color: var(--ink); } .btn-sand:hover { background: transparent; color: var(--sand); border-color: var(--sand); }
.btn-ghost { color: var(--sand); border-color: rgba(218, 199, 166, .5); } .btn-ghost:hover { border-color: var(--sand); background: rgba(218, 199, 166, .1); }
.btn-ink { background: var(--ink); color: var(--sand); } .btn-ink:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line { color: var(--ink); border-color: rgba(30, 29, 27, .4); } .btn-line:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* THE OPENING */
.reel { position: relative; height: 560vh; background: var(--ink); }
.reel-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.film { position: absolute; inset: 0; }
.fv { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; opacity: 0; will-change: opacity, transform; transform: scale(var(--z, 1.04)); }
.fv:first-child { opacity: 1; }
.film-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 29, 27, .55) 0%, rgba(30, 29, 27, .1) 28%, rgba(30, 29, 27, .15) 58%, rgba(30, 29, 27, .78) 100%); }
/* the wordmark: each letter rises into place, then the whole thing is pulled through as you scroll */
.wm { position: absolute; left: 50%; top: 46%; width: min(88vw, 1500px); translate: -50% -50%; color: var(--sand); opacity: var(--wo, 1); transform: scale(var(--ws, 1)); transform-origin: 50% 50%; will-change: transform, opacity; filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .35)); }
.wm-svg { width: 100%; height: auto; overflow: hidden; }
.wl { transform: translateY(400px); transition: transform 1.25s var(--ease); transition-delay: calc(.25s + var(--i) * .07s); }
html.ready .wl { transform: none; }
.wm-sub { position: absolute; left: 50%; top: calc(46% + min(88vw, 1500px) * .1768 + 1.4rem); translate: -50% 0; width: max-content; max-width: 90vw; text-align: center; font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: .02em; color: var(--sand); opacity: calc(var(--wo, 1) * var(--sub, 0)); transition: opacity 1s var(--ease) 1.1s; }
html.ready .wm-sub { --sub: 1; }
.cue { position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0; margin: 0; font-size: .85rem; letter-spacing: .08em; color: var(--sand); opacity: var(--co, 1); display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(var(--sand), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.scene { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(3.5rem, 11vh, 8rem); color: var(--sand); pointer-events: none; }
.scene.on { pointer-events: auto; }
.ln { overflow: hidden; padding-block: .04em; font: 900 clamp(3rem, 8.4vw, 9.2rem)/.88 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.ln span { display: block; transform: translateY(112%); transition: transform .95s var(--ease); transition-delay: calc(var(--i) * .09s); }
.scene.on .ln span { transform: none; }
.scene:not(.on) .ln span { transform: translateY(-112%); transition-duration: .6s; transition-delay: 0s; }
.scene-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s; }
.scene.on .scene-ctas { opacity: 1; transform: none; }
.rail { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; display: grid; gap: 12px; list-style: none; }
.rail li { width: 3px; height: 26px; background: rgba(218, 199, 166, .3); border-radius: 2px; transition: height .5s var(--ease), background .4s; }
.rail li.on { height: 56px; background: var(--sand); }

/* ABOUT: sand paper */
.about { position: relative; z-index: 2; background: var(--sand); color: var(--on-sand); padding-block: clamp(6rem, 14vw, 12rem) clamp(5rem, 10vw, 9rem); }
.fill { max-width: 17ch; font-size: clamp(3.6rem, 10.4vw, 10rem); line-height: .86; }
.fill .w { opacity: .16; transition: opacity .35s linear; }
.fill .w.lit { opacity: 1; }
.rows { margin-top: clamp(4rem, 9vw, 8rem); display: grid; }
.row-block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); padding-block: clamp(2.2rem, 5vw, 4rem); border-top: 1.5px solid var(--ink); }
.row-block h3 { font: 800 clamp(1.8rem, 3.2vw, 2.8rem)/.95 var(--display); text-transform: uppercase; max-width: 10ch; }
.prose p { max-width: 40rem; font-size: 1.1875rem; line-height: 1.7; color: rgba(30, 29, 27, .9); }
.prose p + p { margin-top: 1.25rem; }
.steps { list-style: none; display: grid; max-width: 44rem; }
.steps li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.2rem; padding-block: 1.6rem; border-top: 1px solid rgba(30, 29, 27, .3); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps .n { font: 900 5rem/.8 var(--display); }
.steps strong { display: block; font: 800 1.9rem/1 var(--display); text-transform: uppercase; margin-bottom: .5rem; }
.steps p { color: var(--on-sand-dim); max-width: 34rem; }
.themes { display: grid; max-width: 44rem; }
.themes div { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; padding-block: 1.3rem; border-top: 1px solid rgba(30, 29, 27, .3); }
.themes div:first-child { border-top: 0; padding-top: 0; }
.themes dt { font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.themes dd { color: var(--on-sand-dim); }

/* EPISODES: ink */
.episodes { position: relative; z-index: 2; background: var(--ink); padding-block: clamp(5rem, 11vw, 10rem); }
.ep-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2rem; }
.ep-count { color: var(--on-ink-dim); font-size: 1rem; }
.ep-list { border-top: 1.5px solid var(--sand); }
.ep { border-bottom: 1px solid rgba(218, 199, 166, .35); }
.ep-head { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto 3rem; align-items: center; gap: 1.2rem; padding: clamp(1.3rem, 2.6vw, 2.2rem) 0; cursor: pointer; }
.ep-head:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }
.ep-n { font: 700 1.4rem/1 var(--display); color: var(--on-ink-dim); }
.ep-name { font: 900 clamp(2.4rem, 7vw, 6.2rem)/.9 var(--display); text-transform: uppercase; transition: transform .6s var(--ease); }
.ep-role { color: var(--on-ink-dim); font-size: 1rem; text-align: right; }
.ep-plus { position: relative; width: 32px; height: 32px; justify-self: end; }
.ep-plus::before, .ep-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: var(--sand); translate: -50% -50%; transition: transform .5s var(--ease); }
.ep-plus::after { transform: rotate(90deg); }
.ep.open .ep-plus::after { transform: rotate(0); }
.ep-head:hover .ep-name { transform: translateX(14px); }
.ep-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.ep.open .ep-body { grid-template-rows: 1fr; }
.ep-body > div { overflow: hidden; }
.ep-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); padding: 0 0 clamp(2rem, 4vw, 3.4rem) calc(4.5rem + 1.2rem); }
.ep-about p { color: var(--on-ink-dim); max-width: 26rem; }
.ep-about blockquote { margin: 1.2rem 0 0; font: 700 1.5rem/1.15 var(--display); text-transform: uppercase; }
.ep-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.clip { position: relative; aspect-ratio: 16 / 9; background: #0d0c0b center / cover no-repeat; border: 0; padding: 0; cursor: pointer; overflow: hidden; color: var(--sand); filter: sepia(.2) contrast(1.05); }
.clip iframe, .clip video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.clip .pl { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 40%, rgba(30, 29, 27, .8)); }
.clip .pl i { width: 64px; height: 64px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; transition: transform .4s var(--ease); }
.clip:hover .pl i { transform: scale(1.1); }
.clip .pl svg { width: 20px; height: 20px; fill: var(--ink); margin-left: 3px; }
.clip .cap { position: absolute; left: .9rem; bottom: .7rem; right: .9rem; font-weight: 500; font-size: .95rem; text-align: left; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.ep-empty { padding: clamp(2rem, 6vw, 5rem) 0; max-width: 34rem; font-size: 1.25rem; color: var(--on-ink-dim); }
.ep-empty b { display: block; margin-bottom: .6rem; font: 900 clamp(2rem, 4.4vw, 3.4rem)/.95 var(--display); text-transform: uppercase; color: var(--sand); }
.ep-empty a { color: var(--sand); }
.ep-peek { position: fixed; z-index: 25; left: 0; top: 0; width: 260px; aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; background: center / cover no-repeat; filter: sepia(.25) contrast(1.05); transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.92); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.ep-peek.on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); }

/* LIVE FROM THE ISLANDS: the original real-bands chapter */
.stage { position: relative; z-index: 2; height: 440vh; background: var(--ink); }
.stage-stick { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); grid-template-rows: auto 1fr auto; grid-template-areas: "head head" ". list" "credit credit"; gap: 1rem clamp(1.4rem, 3vw, 3rem); padding: 96px max(var(--gutter), calc((100vw - 1320px) / 2)) 22px; isolation: isolate; overflow: hidden; }
.stage-head { grid-area: head; position: relative; z-index: 3; }
.stage-head h2 { font-size: clamp(3rem, 8vw, 7rem); }
.stage-note { margin-top: .9rem; max-width: 26rem; color: var(--on-ink-dim); text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
.stage-screen { position: absolute; inset: 0; z-index: -1; background: #0c0b0a center / cover no-repeat; overflow: hidden; contain: layout paint; }
.stage-screen iframe { position: absolute; border: 0; pointer-events: none !important; inset: 50% auto auto 50%; width: max(100vw, 177.78svh) !important; height: max(56.25vw, 100svh) !important; transform: translate(-50%, -50%) !important; opacity: 0; transition: opacity 1s; filter: sepia(.28) saturate(.8) contrast(1.05); }
.stage-screen.playing iframe { opacity: 1; }
.stage-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--ink) 0%, rgba(30, 29, 27, 0) 20%, rgba(30, 29, 27, 0) 72%, var(--ink) 100%); }
.stage-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20, 19, 17, .62) 0%, rgba(20, 19, 17, .05) 42%, rgba(20, 19, 17, .35) 100%); }
.stage-lt { position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - 1320px) / 2)); bottom: 4.2rem; display: grid; gap: .3rem; pointer-events: none; text-shadow: 0 2px 20px rgba(0, 0, 0, .95); }
.stage-lt b { font: 900 clamp(3rem, 8vw, 7rem)/.88 var(--display); text-transform: uppercase; }
.stage-lt span { color: var(--on-ink-dim); font-size: 1rem; }
.stage-screen.swap .stage-lt { animation: ltin .75s var(--ease); }
@keyframes ltin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.stage-eq { position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - 1320px) / 2)); bottom: 2.6rem; display: flex; gap: 4px; align-items: flex-end; height: 22px; }
.stage-eq i { width: 4px; height: 100%; background: var(--sand); transform-origin: bottom; transform: scaleY(.2); }
.stage-screen.playing .stage-eq i { animation: eq 1s ease-in-out infinite; }
.stage-eq i:nth-child(2) { animation-delay: -.3s !important; } .stage-eq i:nth-child(3) { animation-delay: -.6s !important; } .stage-eq i:nth-child(4) { animation-delay: -.15s !important; } .stage-eq i:nth-child(5) { animation-delay: -.45s !important; }
@keyframes eq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.stage-mute, .stage-fallback { position: absolute; z-index: 5; right: max(var(--gutter), calc((100vw - 1320px) / 2)); bottom: 2.2rem; min-height: 46px; padding: 0 1.2rem; display: inline-flex; align-items: center; border-radius: 999px; border: 1.5px solid rgba(218, 199, 166, .6); background: rgba(30, 29, 27, .55); color: var(--sand); font: 600 .92rem/1 var(--sans); cursor: pointer; text-decoration: none; }
.stage-mute[aria-pressed="false"] { background: var(--sand); color: var(--ink); }
.stage-fallback { right: auto; left: max(var(--gutter), calc((100vw - 1320px) / 2)); bottom: 6rem; }
.stage-list { grid-area: list; align-self: end; margin-bottom: 4.5rem; list-style: none; position: relative; z-index: 3; border-top: 1px solid rgba(218, 199, 166, .4); }
.stage-list li { position: relative; display: grid; grid-template-columns: 1.6rem 1fr; column-gap: 1rem; padding: 1.05rem .3rem 1.15rem; border-bottom: 1px solid rgba(218, 199, 166, .4); cursor: pointer; opacity: .55; transition: opacity .4s, padding .4s var(--ease); text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
.stage-list li span { grid-row: span 2; font: 800 1.3rem/1 var(--display); padding-top: .1rem; }
.stage-list li b { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1 var(--display); text-transform: uppercase; }
.stage-list li em { margin-top: .25rem; color: var(--on-ink-dim); font-style: normal; font-size: .95rem; }
.stage-list li i { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--sand); }
.stage-list li.on { opacity: 1; padding-left: .8rem; }
.stage-list li:hover { opacity: .9; }
.stage-credit { grid-area: credit; position: relative; z-index: 3; justify-self: end; text-align: right; max-width: 34rem; color: rgba(218, 199, 166, .5); font-size: .8rem; line-height: 1.5; }

/* APPLY: sand paper again */
.apply { position: relative; z-index: 2; background: var(--sand); color: var(--on-sand); padding-block: clamp(5rem, 11vw, 9rem); }
.apply-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.apply-copy { position: sticky; top: 7rem; }
.apply h2 { font-size: clamp(4rem, 10vw, 9rem); }
.lede { margin-top: 1.8rem; max-width: 30rem; font-size: 1.3rem; line-height: 1.5; }
.apply-points { list-style: none; margin-top: 2rem; display: grid; gap: .8rem; }
.apply-points li { padding-left: 1.6rem; position: relative; }
.apply-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; background: var(--ink); }
.apply-panel { background: var(--ink); color: var(--sand); padding: clamp(1.4rem, 3vw, 2.8rem); }
.form { display: grid; gap: 1.3rem; }
.form label { display: grid; gap: .45rem; font-weight: 500; font-size: .96rem; }
.form .req { float: right; font-weight: 400; font-size: .8rem; color: var(--on-ink-dim); }
.form label:has(.req) { grid-template-columns: 1fr auto; }
.form label:has(.req) > input, .form label:has(.req) > select { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; font: 400 1.05rem/1.4 var(--sans); color: var(--sand); background: transparent; border: 0; border-bottom: 1.5px solid rgba(218, 199, 166, .5); border-radius: 0; padding: .8rem 0; transition: border-color .25s; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sand) 50%), linear-gradient(135deg, var(--sand) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2rem; }
.form option { color: #111; background: #fff; }
.form textarea { border: 1.5px solid rgba(218, 199, 166, .5); padding: .8rem; }
.form input::placeholder, .form textarea::placeholder { color: rgba(218, 199, 166, .4); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--sand); }
.form input.invalid { border-color: #e8836f; }
.field-error { grid-column: 1 / -1; color: #f0a090; font-size: .88rem; font-weight: 400; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.band { border: 0; padding: 0; margin: 0; display: grid; gap: .8rem; }
.band legend { font-weight: 500; font-size: .96rem; padding: 0; margin-bottom: .6rem; }
.pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.3rem; border: 1.5px solid rgba(218, 199, 166, .5); border-radius: 999px; cursor: pointer; font-weight: 500; transition: all .25s; }
.pill input:checked + span { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.pill input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 3px; }
.band-box { display: grid; gap: 1rem; padding-top: .6rem; }
.member { display: grid; grid-template-columns: 1fr 1fr auto; gap: .8rem; align-items: center; }
.member-x { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(218, 199, 166, .5); background: transparent; color: var(--sand); cursor: pointer; font-size: 1.2rem; }
.link-btn { justify-self: start; background: none; border: 0; padding: .3rem 0; color: var(--sand); text-decoration: underline; text-underline-offset: 4px; font: 600 .96rem var(--sans); cursor: pointer; }
.apply-panel .btn-ink { background: var(--sand); color: var(--ink); } .apply-panel .btn-ink:hover { background: transparent; color: var(--sand); border-color: var(--sand); }
.apply-panel .btn-line { color: var(--sand); border-color: rgba(218, 199, 166, .5); }
.note { color: var(--on-ink-dim); font-size: .88rem; line-height: 1.5; }
.done h3 { font: 900 clamp(2.4rem, 5vw, 3.8rem)/.92 var(--display); text-transform: uppercase; margin-bottom: 1rem; }
.done p { margin-top: .8rem; }
.facts { display: grid; gap: .8rem; margin: 1.4rem 0; padding: 1.1rem 0; border-block: 1px solid rgba(218, 199, 166, .4); }
.facts dt { font-size: .85rem; color: var(--on-ink-dim); } .facts dd { font-weight: 600; font-size: 1.1rem; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 1.5rem; translate: -50% 40px; max-width: min(92vw, 30rem); padding: .9rem 1.2rem; background: var(--sand); color: var(--ink); font-weight: 500; opacity: 0; pointer-events: none; transition: all .4s var(--ease); }
.toast.show { opacity: 1; translate: -50% 0; }

/* FOOTER */
.footer { position: relative; z-index: 2; background: var(--ink); padding: clamp(5rem, 10vw, 9rem) 0 2.4rem; }
.footer-logo { width: 100%; height: auto; margin-bottom: clamp(2.4rem, 5vw, 4.4rem); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem 3rem; border-top: 1.5px solid var(--sand); padding-top: 1.6rem; }
.footer-grid a { text-underline-offset: 4px; }
.footer-small { color: var(--on-ink-dim); font-size: .85rem; }

/* phones */
@media (max-width: 860px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .wm { width: 92vw; top: 42%; } .wm-sub { top: calc(42% + 92vw * .1768 + 1rem); }
  .scene { bottom: 4.5rem; }
  .rail { display: none; }
  .row-block { grid-template-columns: 1fr; gap: 1rem; }
  .row-block h3 { max-width: none; }
  .steps li { grid-template-columns: 3.4rem 1fr; } .steps .n { font-size: 3.4rem; }
  .themes div { grid-template-columns: 1fr; gap: .3rem; }
  .ep-head { grid-template-columns: 2.4rem minmax(0, 1fr) 2.2rem; } .ep-role { display: none; }
  .ep-inner { grid-template-columns: 1fr; padding-left: 0; }
  .ep-peek { display: none; }
  .apply-grid { grid-template-columns: 1fr; } .apply-copy { position: static; }
  .row { grid-template-columns: 1fr; }
  .stage-stick { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "head" "." "list" "credit"; padding-top: 80px; gap: .8rem; }
  .stage-list { margin-bottom: 1rem; } .stage-list li { padding-block: .7rem; } .stage-list li em { display: none; } .stage-list li span { grid-row: auto; }
  .stage-lt, .stage-eq { display: none; }
  .stage-mute { top: 4.8rem; bottom: auto; right: var(--gutter); }
  .stage-credit { justify-self: start; text-align: left; }
  .member { grid-template-columns: 1fr; } .member-x { justify-self: end; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .wl { transform: none; transition: none; } .ln span { transform: none !important; } .cue::after { animation: none; } }
@media (max-width: 860px) { .stage-mute { top: auto !important; bottom: 12.2rem !important; right: var(--gutter); } }

/* ================= v4: a printed gig. Paper, ink, one hot colour, a halftone screen, a woven border. ================= */
:root { --paper: #e6d6b4; --sand: #e6d6b4; --ink: #161412; --hot: #ff4a1c; --teal: #0e6a62; --on-ink: #e6d6b4; --on-ink-dim: rgba(230, 214, 180, .7); }
html, body { background: var(--paper); color: var(--ink); }
.cursor { position: fixed; z-index: 90; left: 0; top: 0; width: 0; height: 0; pointer-events: none; mix-blend-mode: difference; }
.cursor span { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.cursor.big span { transform: scale(2.6); }
@media (hover: none) { .cursor { display: none; } }
.nav { color: var(--ink); mix-blend-mode: normal; }
.nav-links a:not(.nav-cta) { color: var(--ink); }
.nav.on-dark { color: var(--paper); }
.nav.on-dark .nav-links a { color: var(--paper); }
.nav-cta { background: var(--ink); color: var(--paper) !important; border-color: var(--ink); }
.nav.on-dark .nav-cta { background: var(--hot); border-color: var(--hot); color: var(--ink) !important; }
.btn-hot { background: var(--hot); color: var(--ink); } .btn-hot:hover { background: var(--paper); }
.btn-ghost { color: var(--paper); border-color: rgba(230, 214, 180, .55); }

/* the woven border (a nod to thundu kunaa mats) */
.zig { height: 26px; background: linear-gradient(135deg, var(--ink) 25%, transparent 25%) -13px 0 / 26px 26px, linear-gradient(225deg, var(--ink) 25%, transparent 25%) -13px 0 / 26px 26px, linear-gradient(315deg, var(--ink) 25%, transparent 25%) 0 0 / 26px 26px, linear-gradient(45deg, var(--ink) 25%, transparent 25%) 0 0 / 26px 26px; background-color: var(--hot); }
.zig-t { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
.zig-b { position: absolute; left: 0; right: 0; bottom: 0; }

/* OPENING */
.open { position: relative; height: 480vh; background: var(--paper); }
.open-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.paper { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); }
.paper::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255, 74, 28, .09), transparent 40%), radial-gradient(circle at 85% 80%, rgba(14, 106, 98, .12), transparent 45%); }
.logo-fill { position: relative; width: min(90vw, 1400px); aspect-ratio: 1021 / 361; margin: 0; transform: translateY(-3%) scale(var(--ls, 1)) rotate(var(--lr, 0deg)); transform-origin: 50% 50%; will-change: transform; }
.lf-shadow, .lf-mask { position: absolute; inset: 0; -webkit-mask: url(/brand/logo-ink.svg) center / 100% 100% no-repeat; mask: url(/brand/logo-ink.svg) center / 100% 100% no-repeat; }
.lf-shadow { background: var(--ink); transform: translate(1.1%, 2.4%); }
.lf-mask { background: var(--hot); overflow: hidden; clip-path: inset(var(--rev, 100%) 0 0 0); transition: clip-path 1.4s var(--ease); }
html.ready .lf-mask { --rev: 0%; }
.lf-shadow { clip-path: inset(var(--rev, 100%) 0 0 0); transition: clip-path 1.4s var(--ease) .12s; }
html.ready .lf-shadow { --rev: 0%; }
.lv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; mix-blend-mode: multiply; transition: opacity .7s; transform: scale(1.08); }
.lv.on { opacity: 1; }
.tag { position: absolute; left: 50%; bottom: 13vh; translate: -50% 0; width: min(92vw, 40rem); text-align: center; font: 500 clamp(1.05rem, 1.7vw, 1.4rem)/1.35 var(--sans); opacity: calc(1 - var(--p, 0) * 6); }
.tag span { background: var(--paper); padding: .2em .5em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cue { position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0; margin: 0; font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; display: flex; gap: .7rem; align-items: center; opacity: calc(1 - var(--p, 0) * 10); }
.cue i { width: 30px; height: 2px; background: var(--ink); transform-origin: left; animation: cuebar 1.6s var(--ease) infinite; }
@keyframes cuebar { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.sticker { position: absolute; z-index: 2; display: grid; place-content: center; text-align: center; width: clamp(110px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); transform: translate3d(var(--sx, 0), var(--sy, 0), 0) rotate(var(--sr, 0deg)); transition: transform .5s var(--ease); font-family: var(--display); text-transform: uppercase; line-height: .9; }
.sticker span { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; margin-bottom: .35rem; } .sticker b { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 900; }
.s1 { left: 6vw; top: 22vh; --sr: -12deg; background: var(--teal); }
.s2 { right: 7vw; bottom: 20vh; --sr: 9deg; background: var(--ink); }
.badge { position: absolute; z-index: 2; right: 9vw; top: 16vh; width: clamp(110px, 12vw, 170px); transform: rotate(var(--br, 0deg)); }
.badge text { font: 600 15.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink); }
.badge circle { fill: var(--hot); } .badge path:last-child { fill: var(--ink); }

/* the ink iris that opens from the middle */
.iris { position: absolute; inset: 0; background: var(--ink); color: var(--paper); clip-path: circle(var(--ir, 0%) at 50% 54%); will-change: clip-path; }
.iv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: invert(1); opacity: .55; }
.iris::after { content: ""; position: absolute; inset: 0; background: var(--paper); mix-blend-mode: multiply; pointer-events: none; }
.iris-in { position: absolute; inset: 0; z-index: 2; }
.scene { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(3rem, 10vh, 7rem); color: var(--paper); pointer-events: none; }
.scene.on { pointer-events: auto; }
.ln { font-size: clamp(3.4rem, 11vw, 11rem); line-height: .86; }
.scene[data-s="1"] .ln:last-of-type span { color: var(--hot); }
.scene-ctas { margin-top: 2rem; }

/* TICKER */
.ticker { position: relative; z-index: 4; background: var(--hot); color: var(--ink); overflow: hidden; border-block: 3px solid var(--ink); transform: rotate(-1.4deg) scale(1.03); margin-block: -1.2rem 3.2rem; }
.ticker-in { display: flex; width: max-content; padding-block: .7rem; animation: tick 28s linear infinite; will-change: transform; }
.ticker-in span { font: 900 clamp(2.4rem, 6vw, 5rem)/1 var(--display); text-transform: uppercase; padding-inline: 1.2rem; }
.ticker-in i { font-style: normal; font-size: clamp(1.6rem, 3.6vw, 3rem); align-self: center; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ABOUT */
.about { background: var(--paper); color: var(--ink); padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: 0; }
.fill .w { opacity: .14; }
.fill .w.lit { opacity: 1; }
.hs { position: relative; height: 380vh; margin-top: clamp(4rem, 8vw, 7rem); }
.hs-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; }
.hs-track { display: flex; gap: clamp(1.2rem, 3vw, 3rem); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.poster { position: relative; flex: none; width: min(78vw, 560px); height: min(66vh, 620px); color: var(--ink); overflow: hidden; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); display: grid; grid-template-rows: 1fr auto; }
.poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.poster .pt { position: relative; z-index: 2; margin: 0; padding: 1.4rem 1.5rem 1.6rem; background: var(--paper); border-top: 3px solid var(--ink); }
.poster .pt span { position: absolute; right: 1rem; top: -4.2rem; font: 900 7.5rem/1 var(--display); color: var(--paper); -webkit-text-stroke: 3px var(--ink); }
.poster h3 { font: 900 clamp(2rem, 3.6vw, 3rem)/.9 var(--display); text-transform: uppercase; margin-bottom: .6rem; }
.poster p { font-size: 1rem; line-height: 1.5; color: rgba(22, 20, 18, .85); max-width: 30rem; }
.p1 { background: var(--hot); transform: rotate(-1.6deg); } .p2 { background: var(--teal); transform: rotate(1.4deg) translateY(2vh); } .p3 { background: #c9b48c; transform: rotate(-1deg); } .p4 { background: var(--hot); transform: rotate(1.8deg) translateY(1vh); }
.hs-label { position: absolute; left: var(--gutter); bottom: 4vh; margin: 0; font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 1rem; align-items: center; }
.hs-label b { background: var(--ink); color: var(--paper); padding: .2rem .6rem; font-weight: 600; }
.rows { margin-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(6rem, 12vw, 10rem); }
.row-block { border-top: 3px solid var(--ink); }
.row-block h3 { color: var(--ink); }
.themes div, .steps li { border-top-color: rgba(22, 20, 18, .35); }
.about { position: relative; z-index: 2; }

/* EPISODES: hot paper */
.episodes { background: var(--hot); color: var(--ink); }
.ep-count { color: var(--ink); font-weight: 600; }
.ep-list { border-top: 3px solid var(--ink); }
.ep { border-bottom: 3px solid var(--ink); }
.ep-n, .ep-role { color: var(--ink); font-weight: 600; }
.ep-plus::before, .ep-plus::after { background: var(--ink); }
.ep-head:focus-visible { outline-color: var(--ink); }
.ep-about p { color: var(--ink); } .ep-about blockquote { color: var(--ink); }
.ep-empty { color: var(--ink); } .ep-empty b { color: var(--ink); } .ep-empty a { color: var(--ink); }
.clip { filter: contrast(1.05); border: 3px solid var(--ink); }
.clip .pl i { background: var(--ink); } .clip .pl svg { fill: var(--hot); }
.clip .pl { background: linear-gradient(180deg, transparent 40%, rgba(22, 20, 18, .7)); }

/* LIVE: ink */
.stage, .stage-stick { background: var(--ink); }
.stage-note, .stage-head h2 { color: var(--paper); }

/* APPLY */
.apply { background: var(--paper); }
.apply-panel { background: var(--ink); box-shadow: 12px 12px 0 var(--hot); }
.apply-points li::before { background: var(--hot); }

/* FOOTER */
.footer { background: var(--hot); color: var(--ink); padding-bottom: 2rem; }
.footer-grid { border-top-color: var(--ink); }
.footer-small { color: rgba(22, 20, 18, .7); }

@media (max-width: 860px) {
  .s1 { left: 4vw; top: 14vh; } .s2 { right: 4vw; bottom: 26vh; } .badge { right: 5vw; top: 12vh; width: 96px; }
  .logo-fill { width: 94vw; }
  .tag { bottom: 16vh; }
  .poster { width: 82vw; height: 62vh; }
  .poster .pt span { font-size: 5.5rem; top: -3.2rem; }
  .ticker { margin-block: -.8rem 2rem; }
}
@media (prefers-reduced-motion: reduce) { .ticker-in { animation: none; } .lf-mask, .lf-shadow { clip-path: none; } }
.iris { z-index: 6; }
.iv { opacity: .95; }
.s1 { left: 3vw; top: 11vh; width: clamp(96px, 10vw, 150px); }
.s2 { right: 4vw; bottom: 9vh; width: clamp(96px, 10vw, 150px); }
.badge { right: 5vw; top: 9vh; width: clamp(96px, 9.5vw, 140px); }
.zig-t { z-index: 7; }
@media (max-width: 860px) { .s1 { top: 9vh; } .badge { top: 8vh; } .s2 { bottom: 24vh; } }
.iv { filter: none; opacity: .4; }
.nav.on-dark .brand img { filter: invert(1) sepia(.35); }
.stage, .stage-stick { color: var(--paper); }
.brand { padding: .7rem .4rem; margin: -.7rem -.4rem; }
@media (max-width: 860px) {
  .stage-mute { top: 15rem !important; bottom: auto !important; right: var(--gutter) !important; min-height: 48px; padding: 0 1.3rem; background: rgba(22, 20, 18, .7); }
}
.poster .pt { grid-row: 2; }
html.in-stage .nav { color: var(--paper); } html.in-stage .nav .brand img { filter: invert(1) sepia(.35); } html.in-stage .nav-links a:not(.nav-cta) { color: var(--paper); } html.in-stage .nav-cta { background: var(--hot); border-color: var(--hot); color: var(--ink) !important; }