/* DAYLIGHT: Neur Culture in full daylight. Every section is a colour field with a premise; the interface
   (header, cursor, buttons, Eeky's panel) takes the ink of the field that is arriving in .4 s via NC.tint().
   Paper = the open plaza. Red = making (Studio). Cobalt = learning (Guides). Acid = people (Community, the
   Start here bar). Ochre = afternoon light (World). Ink = night, the footer. */

:root {
  --bg: var(--paper); --fg: var(--ink); --accent: var(--red);
  /* strict spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --hd: 64px; --barh: 44px;
  --shadow-ink: 0 1px 0 rgba(13,13,13,.08), 0 18px 30px -14px rgba(13,13,13,.45), 0 40px 70px -40px rgba(13,13,13,.5);
  --paper-2: #E6E1D6; --paper-3: #D9D3C6;
}
body { background: var(--bg); color: var(--fg); font-family: var(--font-display); font-size: 17px; }
::selection { background: var(--acid); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cond, .wide { font-family: var(--font-display); }
.serif { font-family: var(--font-serif); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; }

/* Fields. Each section owns a colour; JS-free this is the whole look, with JS the chrome re-tints too. */
.f-paper { background: var(--paper); color: var(--ink); }
.f-red { background: var(--red); color: var(--ink); }
.f-cobalt { background: var(--cobalt); color: var(--paper); }
.f-acid { background: var(--acid); color: var(--ink); }
.f-ochre { background: var(--ochre); color: var(--ink); }
.f-ink { background: var(--ink); color: var(--paper); }
.field { position: relative; }
/* Seams: each field is pasted over the last like a street poster, a diagonal lip of its own colour */
.seam::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--lip, 3.2vw) + 1px); height: var(--lip, 3.2vw); background: inherit; clip-path: polygon(0 100%, 100% 0, 100% 101%, 0 101%); pointer-events: none; z-index: 1; }
.seam.rev::before { clip-path: polygon(0 0, 100% 100%, 100% 101%, 0 101%); }

/* Type */
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.kick { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.kick .bar-n { display: inline-block; width: 28px; height: 2px; background: currentColor; }
.lede { font: 500 clamp(19px, 1.55vw, 24px)/1.38 var(--font-display); max-width: 38ch; }
.body { font-size: 17px; line-height: 1.55; max-width: 60ch; }
.poster { font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .82; letter-spacing: -.012em; }
.poster-w { font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .86; letter-spacing: -.035em; }
[data-fit] { display: block; white-space: nowrap; }
.script { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; }
.tape { background: var(--acid); color: var(--ink); padding: 0 .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.c-red { color: var(--red); } .c-cobalt { color: var(--cobalt); } .c-ochre { color: var(--ochre); } .c-ink { color: var(--ink); } .c-paper { color: var(--paper); }

/* Status chips (honest states) */
.st { display: inline-flex; align-items: center; gap: var(--s2); font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px 6px; border: 1.5px solid currentColor; border-radius: 999px; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.prog::before { background: transparent; border: 1.5px solid currentColor; width: 5px; height: 5px; }
.st.soon::before { animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Buttons: stickers with a hard ink edge */
.btn { height: 48px; padding: 0 var(--s5); border-width: 2px; font-size: 12px; gap: var(--s3); }
.btn.acid { background: var(--acid); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .3s var(--ease-house), box-shadow .3s var(--ease-house), background-color .3s; }
.btn.acid:hover { background: var(--acid); color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn.acid:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.line:hover { background: currentColor; }
.btn.line:hover span { color: var(--bg); }
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.solid:hover { background: var(--paper); color: var(--ink); }
.btn .ar { display: inline-block; transition: transform .4s var(--ease-house); }
.btn:hover .ar { transform: translateX(4px); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.links-row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* Review notes sit flush, never floating */
.rn { border: 1.5px solid var(--ink); }

/* Header: a slim strip that takes the colour of the field you are in */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--hd); display: flex; align-items: center; gap: var(--s6); padding: 0 var(--pad); background: var(--bg); color: var(--fg); transition: background-color .4s var(--ease-house), color .4s var(--ease-house), transform .5s var(--ease-house); border-bottom: 1.5px solid color-mix(in srgb, var(--fg) 18%, transparent); }
.hd .logo { display: block; flex: none; }
.hd .logo i, .lockmask { display: block; width: 112px; height: 44px; background: currentColor; -webkit-mask: url(img/logo.png) left center / contain no-repeat; mask: url(img/logo.png) left center / contain no-repeat; }
.hd-nav { display: flex; gap: var(--s5); flex: 1; justify-content: center; }
.hd-nav a { position: relative; padding: var(--s2) 0; }
.hd-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-house); }
.hd-nav a:hover::after, .hd-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hd-where { display: inline-flex; align-items: center; gap: var(--s2); min-width: 150px; opacity: .85; }
.hd-where .chip { width: 12px; height: 12px; background: var(--accent); border: 1.5px solid currentColor; transition: background-color .4s; }
.hd-bag { display: inline-flex; gap: 6px; align-items: center; }
.hd-bag b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: currentColor; }
.hd-bag b span { color: var(--bg); font-size: 11px; }
.hd .btn { height: 40px; padding: 0 var(--s4); box-shadow: 3px 3px 0 var(--ink); }
.hd-menu { display: none; border-color: currentColor; background: transparent; color: inherit; }

/* Loader: paper; NEUR stamps letter by letter, "culture" writes on, Eeky slaps on, the paper peels away */
.dl-loader { background: transparent; display: block; }
.peel-paper { position: absolute; inset: 0; background: var(--paper); color: var(--ink); display: grid; place-items: center; }
.peel-paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(13,13,13,.06) 1px, transparent 1.2px); background-size: 5px 5px; }
.peel-flap { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(-10px 14px 18px rgba(13,13,13,.35)); }
.peel-flap i { position: absolute; inset: 0; background: linear-gradient(135deg, #cfc8b9 0%, #ece7dc 45%, #fbf9f4 70%, #d8d1c3 100%); clip-path: polygon(0 0, 0 0, 0 0); }
.lockup { position: relative; display: grid; place-items: center; }
.stamp { display: flex; font: 900 clamp(110px, 21vw, 330px)/.8 var(--font-display); font-stretch: 125%; letter-spacing: -.045em; text-transform: uppercase; }
.stamp b { display: inline-block; font-weight: 900; }
.dl-loader .stamp b { opacity: 0; }
.lockup .scr { position: absolute; right: -6%; bottom: -34%; width: 78%; overflow: visible; }
.lockup .scr text { font-family: var(--font-script); font-size: 170px; fill: transparent; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 900; stroke-dashoffset: 900; }
.lockup .slap { position: absolute; width: clamp(64px, 7.5vw, 112px); right: -7%; top: -46%; opacity: 0; transform: rotate(14deg); filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.dl-loader .count { color: var(--ink); }
.dl-loader .skipload { color: var(--ink); border-color: var(--ink); }
.no-loader .dl-loader, .js-ready .dl-loader[hidden] { display: none; }

/* Start here bar (acid) with Eeky standing on its end */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 94; height: var(--barh); background: var(--acid); color: var(--ink); border-top: 2px solid var(--ink); transition: transform .5s var(--ease-house); }
.bar a { display: flex; align-items: center; gap: var(--s3); height: 100%; padding: 0 140px 0 var(--pad); font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.bar a b { font-weight: 800; }
.bar a .ar { transition: transform .4s var(--ease-house); } .bar a:hover .ar { transform: translateX(6px); }
.bar a .tick { margin-left: auto; opacity: .7; }
.bar-off .bar { transform: translateY(110%); }
.companion { z-index: 96; right: var(--s5); bottom: calc(var(--barh) - 10px); transition: bottom .5s var(--ease-house), transform .6s var(--ease-house), opacity .4s; }
.bar-off .companion { bottom: var(--s3); }
.companion.away { transform: translateY(160%); opacity: 0; pointer-events: none; }
.companion > button { width: 76px; height: 112px; }
.companion > button img { filter: drop-shadow(0 8px 10px rgba(13,13,13,.32)); }
.companion .codec { right: 84px; bottom: 40px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 20px 20px 4px 20px; box-shadow: 6px 6px 0 var(--ink); padding: var(--s4) var(--s4) var(--s3); }
.companion .codec .freq { color: var(--ink); opacity: .7; }
.companion .codec p { font-size: 16px; line-height: 1.35; font-weight: 600; }
.companion .codec .opts a { border: 1.5px solid var(--ink); border-radius: 999px; padding: 11px 14px; }
.companion .codec .opts a:hover, .companion .codec .opts a:focus-visible { background: var(--acid); color: var(--ink); }

/* Menu: the city's blocks, one colour band per place */
.menu { padding: 0; justify-content: stretch; background: var(--ink); clip-path: circle(0% at calc(100% - 50px) 32px); }
.menu.open { clip-path: circle(150% at calc(100% - 50px) 32px); }
.menu-bands { display: flex; flex-direction: column; flex: 1; }
.mb { flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 0 var(--pad); background: var(--c); color: var(--t); font: 900 clamp(40px, 8.2vh, 112px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; transition: flex-grow .55s var(--ease-house); min-height: 0; overflow: hidden; }
.mb small { font: 600 11px/1.2 var(--font-mono); letter-spacing: .08em; text-align: right; max-width: 22ch; }
.mb:hover, .mb:focus-visible { flex-grow: 1.7; outline-offset: -6px; }
.menu-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) var(--pad); background: var(--ink); color: var(--paper); }
.menu-meta .btn { height: 40px; color: var(--paper); }

/* Cursor ring: takes the field's ink */
.cur { position: fixed; left: 0; top: 0; z-index: 160; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid var(--fg); border-radius: 50%; pointer-events: none; transition: width .3s var(--ease-house), height .3s var(--ease-house), margin .3s var(--ease-house), border-color .4s, background-color .3s; mix-blend-mode: normal; }
.cur.hot { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
@media (pointer: coarse) { .cur { display: none; } }

/* Curtain between pages: the next block's colour slides up */
.curtain { position: fixed; inset: 0; z-index: 140; background: var(--cc, var(--ink)); transform: translateY(101%); pointer-events: none; }
.curtain-in .curtain { transform: none; }

/* Footer: night */
.ft { position: relative; background: var(--ink); color: var(--paper); padding: var(--s9) var(--pad) calc(var(--barh) + var(--s5)); overflow: hidden; }
.ft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: linear-gradient(var(--ochre) 0 33%, var(--red) 33% 66%, var(--cobalt) 66%); }
.ft-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s7); align-items: start; }
.ft-ask { font: 900 clamp(34px, 4.2vw, 64px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.ft-ask .script { display: block; font-size: 1.15em; color: var(--ochre); line-height: .9; margin-top: -.08em; }
.ft-col { display: grid; gap: var(--s3); align-content: start; }
.ft-col a, .ft-col span { width: fit-content; }
.ft-col a:hover { color: var(--acid); }
.ft-col .soon { opacity: .55; }
.ft-lock { position: relative; margin: var(--s9) 0 var(--s6); }
.ft-lock .stamp { font-size: 27.5vw; color: var(--paper); line-height: .78; }
.ft-lock .scr { position: absolute; right: 1vw; bottom: -10%; width: 58%; }
.ft-lock .scr text { fill: var(--ochre); stroke: none; stroke-dasharray: none; stroke-dashoffset: 0; font-family: var(--font-script); font-size: 170px; }
.ft-legal { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; opacity: .7; }

/* Shared inner-page parts */
main { display: block; overflow-x: clip; }
.zine-art { display: block; }
.mini-zines .mz .obj { width: 100%; height: 100%; object-fit: contain; }
.pghead { position: relative; padding: calc(var(--hd) + var(--s9)) var(--pad) var(--s9); overflow: clip; }
.pghead .kick { margin-bottom: var(--s6); }
.pghead h1 { margin: 0 0 var(--s6); }
.pghead .lede { margin-top: var(--s5); }
.char { position: absolute; pointer-events: none; z-index: 4; filter: drop-shadow(0 26px 30px rgba(13,13,13,.35)); }
.rule { height: 2px; background: currentColor; border: 0; margin: 0; }
.rows { border-top: 2px solid currentColor; }
.row { position: relative; display: grid; grid-template-columns: 70px 1fr auto auto 40px; gap: var(--s5); align-items: center; padding: var(--s5) var(--pad); border-bottom: 2px solid currentColor; isolation: isolate; }
.row::before { content: ""; position: absolute; inset: 0; background: var(--rc, var(--acid)); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-house); z-index: -1; }
a.row:hover::before, a.row:focus-visible::before { transform: scaleY(1); }
a.row:hover, a.row:focus-visible { color: var(--rt, var(--ink)); }
.row .t { font: 900 clamp(28px, 3.6vw, 58px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.row .ar { font-size: 28px; transition: transform .45s var(--ease-house); }
a.row:hover .ar { transform: translateX(8px); }
.exits { display: grid; grid-template-columns: 1.4fr 1fr; }
.exit { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s7); min-height: 46vh; padding: var(--s8) var(--pad) var(--s7); overflow: hidden; transition: padding .6s var(--ease-house); }
.exit .t { font: 900 clamp(48px, 7vw, 120px)/.84 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.exit:hover { padding-top: var(--s9); }
.exit .ar { font-size: 40px; }

/* Objects (renders) with a typographic fallback slot */
.obj { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.obj.missing { visibility: hidden; }
.slot-fallback { display: none; }
.missing + .slot-fallback { display: grid; }

/* ======================= HOME ======================= */
/* 1 Hero: the plaza. Poster sentence at full width; NEUR, Eeky, the medallion, a zine and the cap drop in. */
.hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; }
.hero h1 { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--hd) + var(--s5)); }
.hero h1 .ln { font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .8; letter-spacing: -.012em; }
.hero h1 .ln + .ln { margin-top: .02em; }
.hero h1 .w { display: inline-block; }
.hero .l1 { font-size: 7.4vw; } .hero .l2 { font-size: 15.5vw; } .hero .l3 { font-size: 15.6vw; } .hero .l4 { font-size: 13.6vw; }
.hero .l1 .script { font-size: 1.1em; text-transform: none; letter-spacing: 0; font-weight: 400; vertical-align: -.1em; color: var(--red); margin: 0 .1em; }
.hero-ground { position: absolute; left: 0; right: 0; bottom: calc(var(--barh) + 64px); height: 2px; background: var(--ink); z-index: 3; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: var(--barh); height: 64px; display: flex; align-items: center; gap: var(--s6); padding: 0 var(--pad); z-index: 6; }
.hero-foot .line { font-weight: 600; font-size: 15px; max-width: 46ch; }
.hero-foot nav { display: flex; gap: var(--s5); margin-left: auto; }
.hero-foot nav a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-foot nav a:hover { color: var(--red); }
.hint { position: absolute; z-index: 6; right: var(--pad); bottom: calc(var(--barh) + 64px + var(--s3)); display: flex; align-items: center; gap: var(--s2); opacity: .75; }
.stage { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.stk { position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; will-change: transform; transform: translate(var(--x), var(--y)) rotate(var(--r, 0deg)); }
.stk:active { cursor: grabbing; }
.stk img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.stk.neur { width: calc(var(--h-neur) * .69); height: var(--h-neur); filter: drop-shadow(0 30px 34px rgba(13,13,13,.35)); }
.stk.eeky { width: calc(var(--h-eeky) * .593); height: var(--h-eeky); filter: drop-shadow(0 18px 18px rgba(13,13,13,.3)); }
.stk.med { width: var(--h-med); height: var(--h-med); filter: drop-shadow(0 14px 14px rgba(13,13,13,.35)); }
.stk.zine { width: var(--w-zine); height: calc(var(--w-zine) * 1.5); filter: drop-shadow(0 16px 16px rgba(13,13,13,.32)); }
.stk.cap { width: var(--w-cap); height: calc(var(--w-cap) * .667); filter: drop-shadow(0 14px 12px rgba(13,13,13,.3)); }
.hero { --h-neur: 58vh; --h-eeky: 27vh; --h-med: 15vh; --w-zine: 13vw; --w-cap: 13vw; }
/* composed end state (no JS, reduced motion) */
.stk.neur { --x: 54vw; --y: calc(100svh - var(--barh) - 64px - var(--h-neur)); }
.stk.eeky { --x: 79vw; --y: calc(100svh - var(--barh) - 64px - var(--h-eeky)); --r: -4deg; }
.stk.med { --x: 41vw; --y: calc(100svh - var(--barh) - 64px - var(--h-med)); --r: 12deg; }
.stk.zine { --x: 18vw; --y: calc(100svh - var(--barh) - 64px - var(--w-zine) * 1.5); --r: -7deg; }
.stk.cap { --x: 4vw; --y: calc(100svh - var(--barh) - 64px - var(--w-cap) * .667); --r: 4deg; }
/* zine with type set in code over the render */
.zine-art { position: relative; width: 100%; height: 100%; }
.zine-type { position: absolute; inset: 19% 12% 14% 18%; mix-blend-mode: multiply; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); pointer-events: none; }
.zine-type .zt { font: 900 1em/.84 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.zine-type .zm { font: 600 .32em/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.zine-fallback { position: absolute; inset: 14% 7% 10% 13%; background: #EFE7D3; box-shadow: inset 0 0 0 1px rgba(13,13,13,.12); }

/* 2 The question: red floods the field as it arrives */
.question { padding: var(--s10) var(--pad) var(--s10); min-height: 110vh; display: grid; align-content: center; overflow: hidden; }
.question .flood { position: absolute; inset: 0; background: var(--red); transform-origin: 50% 100%; }
.question > *:not(.flood) { position: relative; z-index: 2; }
.question .kick { margin-bottom: var(--s7); color: var(--ink); }
.question .q { font: 800 clamp(40px, 6.6vw, 116px)/.95 var(--font-display); letter-spacing: -.035em; color: var(--paper); max-width: 15ch; }
.question .name { margin: var(--s8) 0 0 auto; max-width: 30ch; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.25; font-weight: 600; color: var(--ink); }
.question .name b { font-weight: 900; color: var(--paper); background: var(--ink); padding: 0 .12em; }

/* 3 What we make: four full-width colour bands */
.bands { position: relative; display: flex; flex-direction: column; height: max(156vh, 1040px); }
.band { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr minmax(280px, 30vw); grid-template-rows: auto 1fr; column-gap: var(--s7); padding: var(--s5) var(--pad) 0; transition: flex-grow .8s var(--ease-house); overflow: visible; }
.bands .band:hover, .bands .band:focus-within { flex-grow: 2.1; }
.band-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); position: relative; z-index: 3; }
.band-t { grid-column: 1; grid-row: 2; align-self: end; font: 900 clamp(110px, 21vh, 250px)/.76 var(--font-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.015em; margin-bottom: -.06em; position: relative; z-index: 3; }
.band-t a::after { content: ""; position: absolute; inset: -200vh -100vw; }
.band-t a { position: static; }
.band { isolation: auto; }
.band-t a:focus-visible { outline: none; }
.band:has(.band-t a:focus-visible) { outline: 3px solid var(--accent); outline-offset: -6px; }
.band-line { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: var(--s5); font-size: 18px; line-height: 1.35; font-weight: 600; position: relative; z-index: 3; }
.band-line .go { display: inline-flex; gap: var(--s2); margin-top: var(--s3); font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.band-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.band-media { position: absolute; left: 34%; right: 34%; top: 22%; bottom: 18%; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease-house), transform .8s var(--ease-house); }
.band:hover .band-media, .band:focus-within .band-media { opacity: 1; transform: none; }
.band-char { position: absolute; z-index: 5; pointer-events: none; }
.band.studio .band-char { right: 33vw; bottom: 0; height: 62vh; filter: drop-shadow(0 26px 28px rgba(13,13,13,.35)); transition: transform .8s var(--ease-house); }
.band.studio:hover .band-char { transform: translateY(-4vh) rotate(-2deg); }
/* band media */
.reel { position: absolute; inset: 0; display: flex; gap: var(--s4); align-items: center; animation: nc-marquee 14s linear infinite; width: max-content; }
.reel .tc { flex: none; width: 260px; aspect-ratio: 4/3; background: var(--ink); color: #E7DCC8; display: grid; place-items: center; text-align: center; padding: var(--s4); font: 900 26px/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; box-shadow: inset 0 0 0 10px #000, var(--shadow-ink); }
.reel .tc small { display: block; font: 600 10px/1 var(--font-mono); letter-spacing: .1em; margin-top: var(--s3); opacity: .7; }
.mini-zines { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.mini-zines .mz { width: 23%; aspect-ratio: 1/1.5; margin: 0 -2%; transform: rotate(var(--r)); }
.mini-zines .mz:nth-child(1) { --r: -9deg; } .mini-zines .mz:nth-child(2) { --r: -2deg; } .mini-zines .mz:nth-child(3) { --r: 5deg; } .mini-zines .mz:nth-child(4) { --r: 11deg; }
.mini-zines .zine-type { font-size: clamp(14px, 1.4vw, 22px); }
.areas-pile { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: var(--s3); }
.areas-pile span { padding: var(--s3) var(--s4); background: var(--ink); color: var(--acid); font: 900 clamp(20px, 2vw, 30px)/1 var(--font-display); font-stretch: 62%; text-transform: uppercase; transform: rotate(var(--r, -2deg)); }
.areas-pile span:nth-child(even) { --r: 3deg; background: var(--paper); color: var(--ink); }
.skyline { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 4 Now showing: the title as a letter window over the still, zooming through the T */
.showing { position: relative; height: 100svh; overflow: hidden; }
.sh-still { position: absolute; inset: 0; overflow: hidden; background: #2b1d12; }
.sh-knock { position: absolute; inset: 0; background: var(--ink); color: #fff; mix-blend-mode: multiply; display: grid; place-items: center; z-index: 2; }
.sh-word { display: block; font: 900 27vw/.8 var(--font-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; will-change: transform; }
.sh-label { position: absolute; z-index: 3; left: var(--pad); top: calc(var(--hd) + var(--s5)); color: var(--paper); }
.sh-copy { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(var(--barh) + var(--s7)); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s6); color: var(--paper); }
.sh-copy h2 { font: 900 clamp(52px, 8.2vw, 140px)/.82 var(--font-display); font-stretch: 62%; text-transform: uppercase; max-width: 10ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.sh-copy p { margin-top: var(--s4); font-size: 20px; font-weight: 600; }
.sh-copy .btn.line { color: var(--paper); }
.sh-note { position: absolute; z-index: 4; right: var(--pad); top: calc(var(--hd) + var(--s5)); }
/* the designed placeholder still: a gallery wall at night with frames that are almost finished */
.wall { position: absolute; inset: -4%; background:
  radial-gradient(ellipse 30% 46% at 22% 30%, rgba(255,214,150,.55), transparent 70%),
  radial-gradient(ellipse 30% 46% at 52% 26%, rgba(255,214,150,.6), transparent 70%),
  radial-gradient(ellipse 30% 46% at 81% 30%, rgba(255,214,150,.5), transparent 70%),
  linear-gradient(#5b3b22, #2a1a0e 64%, #120b06 64.2%, #1d130b); }
.wall .fr { position: absolute; top: 18%; border: 1.6vw solid #b98a3c; box-shadow: inset 0 0 0 .4vw #6b4a1c, 0 2vw 3vw rgba(0,0,0,.55); background: #e9dcc3; }
.wall .fr::after { content: attr(data-l); position: absolute; left: 50%; bottom: -5.2vw; transform: translateX(-50%); font: 600 .8vw/1 var(--font-mono); letter-spacing: .08em; color: #e9dcc3; background: #2a1a0e; padding: .5vw .8vw; white-space: nowrap; }
.wall .f1 { left: 9%; width: 22%; height: 30%; background: linear-gradient(90deg, #d2462a 0 58%, #e9dcc3 58%); }
.wall .f2 { left: 39%; width: 26%; height: 38%; top: 13%; background: linear-gradient(#1D3FBF 0 40%, #e9dcc3 40%), #e9dcc3; }
.wall .f3 { left: 72%; width: 18%; height: 26%; background: repeating-linear-gradient(90deg, #0d0d0d 0 6%, transparent 6% 12%), #e9dcc3; clip-path: inset(0 0 0 0); }
.wall .rope { position: absolute; left: 0; right: 0; top: 70%; height: 1.2vw; background: #8e1612; border-radius: 1vw; box-shadow: 0 .6vw 1vw rgba(0,0,0,.5); transform: rotate(-.6deg); }

/* 5 Guides on cobalt: a shelf of zines that runs against your scroll */
.gshelf { padding: var(--s10) 0 var(--s9); overflow: hidden; }
.gs-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s7); align-items: end; padding: 0 var(--pad) var(--s8); }
.gs-head h2 { font-size: clamp(90px, 13vw, 220px); }
.gs-head .lede { margin-bottom: var(--s5); }
.gs-track { position: relative; cursor: grab; touch-action: pan-y; user-select: none; padding: var(--s6) 0 var(--s7); }
.gs-track:active { cursor: grabbing; }
.gs-row { display: flex; gap: var(--s7); width: max-content; padding-left: var(--pad); will-change: transform; }
.zcover { position: relative; flex: none; width: clamp(230px, 20vw, 320px); aspect-ratio: 1/1.5; display: block; transform: rotate(var(--r, 0deg)) translateY(var(--dy, 0)); transition: transform .6s var(--ease-house); }
.zcover:nth-child(4n+1) { --r: -3deg; } .zcover:nth-child(4n+2) { --r: 2deg; --dy: 34px; } .zcover:nth-child(4n+3) { --r: -1deg; --dy: -10px; } .zcover:nth-child(4n) { --r: 4deg; --dy: 22px; }
.zcover:hover, .zcover:focus-visible { transform: rotate(0) translateY(-18px) scale(1.04); }
.zcover .obj { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 24px rgba(5,10,40,.45)); }
.zcover .zine-type { font-size: clamp(26px, 2.5vw, 40px); }
.zcover .band-strip { position: absolute; left: 12%; right: 13%; top: 36%; height: 8%; }
.zcover .sticker { position: absolute; right: -6%; top: -4%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--acid); color: var(--ink); display: grid; place-items: center; text-align: center; font: 900 clamp(12px, 1vw, 15px)/.95 var(--font-display); font-stretch: 62%; text-transform: uppercase; border: 2px solid var(--ink); transform: rotate(12deg); }
.gshelf .foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 0 var(--pad); }

/* 5b What we can help with now */
.help { padding: var(--s10) 0 0; }
.help-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: end; padding: 0 var(--pad) var(--s8); }
.help-head h2 { font-size: clamp(64px, 8.6vw, 150px); }
.help .row .to { font-size: 12px; }
.help .row:nth-child(1) { --rc: var(--red); }
.help .row:nth-child(2) { --rc: var(--cobalt); --rt: var(--paper); }
.help .row:nth-child(3) { --rc: var(--ochre); }
.help .row:nth-child(4) { --rc: var(--acid); }
.help .row:nth-child(5) { --rc: var(--ink); --rt: var(--paper); }
.help .row:nth-child(6) { --rc: var(--red); }
.help .notes { padding: var(--s5) var(--pad) 0; }
/* shop teaser: the stall at the edge of the plaza */
.stall { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--s7); padding: var(--s9) var(--pad) var(--s10); }
.stall-objs { position: relative; height: min(64vh, 620px); }
.stall-objs .obj { position: absolute; filter: drop-shadow(0 30px 30px rgba(13,13,13,.32)); transition: transform .9s var(--ease-house); }
.stall-objs .tee { left: 0; top: 0; width: 72%; transform: rotate(-4deg); }
.stall-objs .pack { right: 2%; bottom: 0; width: 38%; transform: rotate(7deg); }
.stall-objs .capo { right: 10%; top: 2%; width: 30%; transform: rotate(-10deg); }
.stall:hover .tee { transform: rotate(-1deg) translateY(-10px); }
.stall:hover .pack { transform: rotate(2deg) translate(-10px, -6px); }
.stall-copy h2 { font-size: clamp(60px, 7.4vw, 128px); margin: var(--s4) 0 var(--s5); }
.stall-copy .lede { margin-bottom: var(--s6); }
.stall-copy .rn { margin-top: var(--s5); }
.obj-fb { position: absolute; display: grid; place-items: center; font: 900 28px/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; border: 2px dashed currentColor; }

/* 6 Community on acid */
.comm { padding: var(--s10) var(--pad) var(--s10); overflow: hidden; }
.comm h2 { font-size: clamp(64px, 9.4vw, 168px); max-width: 13ch; margin: var(--s6) 0 var(--s6); }
.comm .sub { font: 600 clamp(22px, 2.2vw, 34px)/1.2 var(--font-display); max-width: 26ch; }
.tags { list-style: none; margin: var(--s8) 0 var(--s7); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s3); max-width: 1100px; }
.tags li { padding: var(--s3) var(--s5); background: var(--ink); color: var(--acid); font: 900 clamp(26px, 3vw, 48px)/1 var(--font-display); font-stretch: 62%; text-transform: uppercase; transform: rotate(var(--r, -1.5deg)); box-shadow: 4px 4px 0 rgba(13,13,13,.25); }
.tags li:nth-child(3n+2) { --r: 2deg; background: var(--paper); color: var(--ink); }
.tags li:nth-child(3n) { --r: -3deg; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.seal { position: absolute; right: 7vw; top: 14vh; width: clamp(150px, 15vw, 240px); aspect-ratio: 1; color: var(--ink); }
.seal svg { width: 100%; height: 100%; animation: spin 26s linear infinite; }
.seal b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(26px, 2.6vw, 40px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 7 Close on paper */
.close { padding: var(--s10) var(--pad) var(--s9); }
.close h2 { font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .84; letter-spacing: -.04em; }
.close .links-row { margin-top: var(--s7); gap: var(--s7); }
.close .btn.acid { height: 72px; padding: 0 var(--s7); font-size: 15px; box-shadow: 6px 6px 0 var(--ink); }

/* ======================= PHONE ======================= */
@media (max-width: 820px) {
  :root { --hd: 58px; --barh: 48px; --pad: 16px; }
  .hd { gap: var(--s3); }
  .hd-nav, .hd-where { display: none; }
  .hd .logo i { width: 96px; height: 38px; }
  .hd-cta { margin-left: auto; }
  .hd-menu { display: inline-flex; }
  .hd .btn { height: 38px; padding: 0 var(--s3); }
  .bar a { padding-right: 96px; font-size: 11px; }
  .bar a .tick { display: none; }
  .companion > button { width: 58px; height: 86px; }
  .companion { right: var(--s3); }
  .companion .codec { right: 0; bottom: 96px; width: calc(100vw - 32px); }

  .hero { min-height: 700px; --h-neur: 40svh; --h-eeky: 19svh; --h-med: 11svh; --w-zine: 28vw; --w-cap: 30vw; }
  .hero .l1 { font-size: 11vw; } .hero .l2 { font-size: 21vw; } .hero .l3 { font-size: 21vw; } .hero .l4 { font-size: 15.6vw; }
  .hero .l1 .script { display: block; margin: .05em 0 0; font-size: 1em; }
  .hero-ground { bottom: calc(var(--barh) + 92px); }
  .hero-foot { height: 92px; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s2); }
  .hero-foot .line { font-size: 14px; }
  .hero-foot nav { margin-left: 0; gap: var(--s4); font-size: 14px; }
  .hint { display: none; }
  .stk.neur { --x: 40vw; --y: calc(100svh - var(--barh) - 92px - var(--h-neur)); }
  .stk.eeky { --x: 74vw; --y: calc(100svh - var(--barh) - 92px - var(--h-eeky)); }
  .stk.med { --x: 26vw; --y: calc(100svh - var(--barh) - 92px - var(--h-med)); }
  .stk.zine { --x: 4vw; --y: calc(100svh - var(--barh) - 92px - var(--w-zine) * 1.5); }
  .stk.cap { --x: 60vw; --y: calc(100svh - var(--barh) - 92px - var(--h-neur) - var(--w-cap) * .7); }

  .question { min-height: 0; padding: var(--s10) var(--pad); }
  .question .q { font-size: 13vw; }
  .question .name { margin: var(--s7) 0 0; }

  .bands { height: auto; }
  .band { display: flex; flex-direction: column; min-height: 76svh; padding: var(--s4) var(--pad) var(--s6); gap: var(--s4); }
  .band-t { font-size: 26vw; margin-top: auto; }
  .band.community .band-t { font-size: 18.6vw; }
  .band-line { padding: 0; font-size: 16px; max-width: 30ch; }
  .band-media { position: relative; inset: auto; opacity: 1; transform: none; height: 26svh; }
  .band-clip { position: relative; inset: auto; height: 26svh; order: 2; overflow: hidden; margin: 0 calc(-1 * var(--pad)); }
  .band-clip .band-media { position: absolute; inset: 0; height: auto; }
  .band.studio .band-char { right: -4vw; bottom: auto; top: -10svh; height: 42svh; }
  .band.studio .band-t { position: relative; z-index: 6; }
  .reel .tc { width: 180px; font-size: 20px; }
  .band-meta .st { font-size: 10px; }

  .sh-word { font-size: 31vw; }
  .sh-copy { grid-template-columns: 1fr; }
  .sh-copy h2 { font-size: 15vw; }
  .sh-note { top: calc(var(--hd) + 44px); left: var(--pad); right: auto; }

  .gs-head, .help-head { grid-template-columns: 1fr; gap: var(--s4); }
  .gs-head h2 { font-size: 30vw; }
  .zcover { width: 62vw; }
  .gshelf .foot { flex-direction: column; align-items: flex-start; }

  .row { grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); padding: var(--s4) var(--pad); }
  .row .n { display: none; }
  .row .to { grid-column: 1; grid-row: 2; }
  .row .st { grid-column: 2; grid-row: 1; justify-self: end; }
  .row .ar { display: none; }
  .row .t { font-size: 9.6vw; }

  .stall { grid-template-columns: 1fr; padding-top: var(--s8); }
  .stall-objs { height: 92vw; }
  .comm h2 { font-size: 15vw; }
  .seal { right: -10vw; top: 2vh; width: 40vw; opacity: .9; }
  .tags li { font-size: 8.4vw; }
  .close .links-row { flex-direction: column; align-items: flex-start; }

  .ft-top { grid-template-columns: 1fr 1fr; }
  .ft-top > :first-child { grid-column: 1 / -1; }
  .ft-lock { margin-top: var(--s8); }

  .exits { grid-template-columns: 1fr; }
  .exit { min-height: 34svh; }
  .exit .t { font-size: 15vw; }
}

/* Reduced motion: composed end states */
@media (prefers-reduced-motion: reduce) {
  .question .flood { transform: none !important; }
  .reel, .seal svg { animation: none; }
  .band-media { opacity: 1; transform: none; }
  .curtain { display: none; }
}

/* ======================= INNER PAGES ======================= */
.f-paper2 { background: var(--paper-2); color: var(--ink); }
.pghead h1.poster { font-size: clamp(80px, 13vw, 240px); }
.pghead .lede { max-width: 34ch; }
.strip { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: var(--s5) var(--s8); margin: 0; }
.strip div { display: grid; gap: var(--s2); }
.strip dt { opacity: .6; } .strip dd { margin: 0; font-size: 14px; }
.story3 { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid currentColor; }
.story3 li { padding: var(--s6) var(--s5) var(--s7) 0; display: grid; gap: var(--s3); align-content: start; border-right: 2px solid currentColor; padding-left: var(--s5); }
.story3 li:first-child { padding-left: 0; } .story3 li:last-child { border-right: 0; }
.story3 b { font: 900 clamp(34px, 3.6vw, 60px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.story3 p { font-size: 20px; line-height: 1.3; font-weight: 600; max-width: 22ch; }
.story3.mini { padding: 0; margin-top: var(--s7); } .story3.mini b { font-size: clamp(24px, 2.2vw, 34px); } .story3.mini p { font-size: 16px; }
.path { list-style: none; margin: 0; padding: var(--s6) var(--pad) var(--s9); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: p; }
.path li { position: relative; padding: var(--s6) var(--s6) 0 0; border-top: 2px solid currentColor; display: grid; gap: var(--s3); }
.path li::after { content: "→"; position: absolute; right: var(--s5); top: var(--s5); font-size: 28px; }
.path li:last-child::after { content: ""; }
.path b { font: 900 clamp(32px, 3.4vw, 56px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }

/* ABOUT */
.ab-head { min-height: 100svh; padding-bottom: var(--s10); }
.ab-head h1 { max-width: 70%; }
.ab-neur { right: 3vw; bottom: -14vh; height: 86vh; }
.ab-q { min-height: 90vh; }
.ab-name { height: 100svh; overflow: hidden; }
.ab-name-pin { height: 100svh; display: grid; align-content: center; padding: 0 var(--pad); }
.ab-word { font: 900 13.6vw/.8 var(--font-display); font-stretch: 62%; text-transform: uppercase; white-space: nowrap; margin: var(--s5) 0 0; }
.ab-word .drop { display: inline-block; }
.ab-word .keep { display: inline-block; color: var(--red); }
.ab-newer { font: 400 9vw/1 var(--font-script); color: var(--cobalt); margin: -.1em 0 0 52vw; }
.ab-name-line { margin-top: var(--s6); }
.ab-name-line b { color: var(--red); }
.ab-forces-head { padding-top: var(--s9); padding-bottom: var(--s7); }
.ab-forces-head h2 { font-size: clamp(64px, 9vw, 160px); }
.ab-forces-head .script { font-size: .62em; text-transform: none; font-weight: 400; vertical-align: .1em; }
.force-bands { display: flex; flex-direction: column; height: max(120vh, 760px); }
.force { flex: 1 1 0; display: grid; grid-template-columns: 70px 1fr minmax(240px, 30%); align-items: center; gap: var(--s5); padding: 0 var(--pad); transition: flex-grow .7s var(--ease-house); min-height: 0; overflow: hidden; }
.force:hover, .force:focus-visible { flex-grow: 2.4; outline-offset: -6px; }
.force h3 { font: 900 clamp(56px, 8.4vh, 120px)/.82 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.force p { font-size: clamp(18px, 1.6vw, 26px); font-weight: 600; }
.ab-founder { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto auto auto; column-gap: var(--s8); align-items: center; padding: var(--s10) var(--pad); }
.ab-med { grid-row: 1 / 4; width: 100%; max-width: 520px; filter: drop-shadow(0 34px 40px rgba(13,13,13,.35)); }
.ab-quote { font: italic 400 clamp(54px, 7vw, 124px)/.95 var(--font-serif); letter-spacing: -.02em; margin: var(--s5) 0; }
.ab-med-cap { opacity: .7; }
.ab-face { position: relative; min-height: 110vh; overflow: hidden; padding: var(--s10) var(--pad) 0; }
.ab-face-t { font-weight: 900; font-stretch: 125%; line-height: .8; }
.ab-face-neur { position: absolute; left: 50%; bottom: 0; height: 84vh; transform: translateX(-50%); filter: drop-shadow(0 30px 40px rgba(13,13,13,.4)); z-index: 2; }
.ab-face-line { position: absolute; left: var(--pad); bottom: calc(var(--barh) + var(--s7)); max-width: 22ch; z-index: 3; }

/* STUDIO */
.st-head { min-height: 100svh; display: grid; align-content: end; padding-bottom: var(--s10); }
.st-head h1.poster { font-size: 30vw; line-height: .76; }
.st-vyro { right: 6vw; bottom: 0; height: 88vh; }
.st-vyro-cap { position: absolute; right: var(--pad); bottom: var(--s5); }
.st-films { padding: var(--s9) 0 var(--s7); }
.st-films-head { display: flex; justify-content: space-between; margin-bottom: var(--s6); }
.reelrow { display: grid; grid-template-columns: 34px minmax(280px, 34vw) 1fr 34px; gap: var(--s6); align-items: center; padding: var(--s5) var(--pad); border-top: 2px solid #262626; transition: background-color .5s var(--ease-house); }
.reelrow:last-of-type { border-bottom: 2px solid #262626; }
a.reelrow:hover { background: #1a1a1a; }
.sprocket { align-self: stretch; background: repeating-linear-gradient(#0D0D0D 0 10px, #F0EDE6 10px 22px); width: 18px; justify-self: center; border-radius: 2px; opacity: .8; }
.rr-card { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #2a1a0e; box-shadow: var(--shadow-ink); }
.rr-copy { display: grid; gap: var(--s3); justify-items: start; }
.rr-t { font: 900 clamp(48px, 6vw, 108px)/.84 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.rr-l { font-size: 20px; font-weight: 600; }
.reelrow.muted .rr-t { color: #8E8B84; }
.q-card { background: #161616; display: grid; place-items: center; font: 900 160px/1 var(--font-serif); color: #3a3a3a; }
.wall-mini { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(255,214,150,.5), transparent 70%), linear-gradient(#5b3b22, #2a1a0e 70%, #120b06 70.2%); }
.wall-mini.dark { background: radial-gradient(ellipse 40% 50% at 30% 40%, rgba(255,214,150,.3), transparent 70%), #160e07; }
.wall-mini .fr { position: absolute; top: 22%; border: 8px solid #b98a3c; box-shadow: 0 10px 16px rgba(0,0,0,.5); }
.wall-mini .f1 { left: 10%; width: 30%; height: 38%; background: linear-gradient(90deg, #d2462a 0 58%, #e9dcc3 58%); }
.wall-mini .f2 { left: 46%; width: 24%; height: 46%; top: 16%; background: linear-gradient(#1D3FBF 0 40%, #e9dcc3 40%); }
.wall-mini .f3 { left: 76%; width: 16%; height: 30%; background: repeating-linear-gradient(90deg, #0d0d0d 0 6%, #e9dcc3 6% 12%); }
.wall-mini .rope { position: absolute; left: 0; right: 0; top: 64%; height: 10px; background: #8e1612; border-radius: 8px; box-shadow: 0 6px 10px rgba(0,0,0,.6); }
.st-note { margin-top: var(--s5); }
.st-story { padding: var(--s9) 0 var(--s9); }
.st-story .kick { margin-bottom: var(--s6); }
.st-lab { overflow: hidden; }
.st-lab-pin { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-top: calc(var(--hd) + var(--s7)); }
.st-lab-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s5); }
.st-lab-head .kick { grid-column: 1 / -1; }
.st-lab-head h2 { font-size: clamp(56px, 7vw, 120px); }
.st-lab-track { display: flex; gap: var(--s6); padding: var(--s7) var(--pad); width: max-content; align-items: stretch; }
.labcard { position: relative; width: min(560px, 74vw); min-height: 56vh; padding: var(--s6); display: grid; grid-template-rows: auto auto auto auto 1fr; gap: var(--s3); align-content: start; background: var(--ink); color: var(--paper); justify-items: start; overflow: hidden; transition: transform .6s var(--ease-house); }
.labcard:nth-child(2) { background: var(--red); color: var(--ink); transform: rotate(1deg); }
.labcard:nth-child(3) { background: var(--ochre); color: var(--ink); transform: rotate(-1deg); }
.labcard:hover { transform: translateY(-12px) rotate(0); }
.lc-t { font: 900 clamp(40px, 4.4vw, 72px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.lc-l { font-size: 18px; font-weight: 600; max-width: 28ch; }
.lc-obj { position: relative; align-self: end; justify-self: end; width: 70%; min-height: 160px; }
.lc-obj .obj { width: 100%; filter: drop-shadow(0 20px 20px rgba(0,0,0,.5)); }
.lc-frames { display: flex; gap: 8px; align-items: flex-end; height: 160px; }
.lc-frames i { flex: 1; background: var(--ink); height: 70%; border: 3px solid var(--paper); }
.lc-frames i:nth-child(2) { height: 100%; } .lc-frames i:nth-child(3) { height: 54%; } .lc-frames i:nth-child(4) { height: 84%; }
.lc-city { display: flex; gap: 6px; align-items: flex-end; height: 160px; }
.lc-city i { flex: 1; background: var(--ink); height: 50%; } .lc-city i:nth-child(2) { height: 92%; } .lc-city i:nth-child(3) { height: 64%; background: var(--paper); } .lc-city i:nth-child(4) { height: 100%; } .lc-city i:nth-child(5) { height: 40%; }

/* FILM: the letterbox opens */
.fm-open { position: relative; height: 100svh; overflow: hidden; }
.fm-frame { position: absolute; inset: 0; }
.fm-frame .sh-still { position: absolute; inset: 0; }
.fm-title { position: absolute; left: var(--pad); right: var(--pad); bottom: 16vh; color: var(--paper); z-index: 2; }
.fm-title h1 { font-size: clamp(72px, 11.5vw, 210px); line-height: .8; text-shadow: 0 4px 40px rgba(0,0,0,.4); max-width: 9ch; }
.fm-title .mono { margin-bottom: var(--s4); }
.lb { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ink); z-index: 3; }
.lb-t { top: 0; } .lb-b { bottom: 0; }
.fm-note { position: absolute; right: var(--pad); top: calc(var(--hd) + var(--s5)); z-index: 4; }
.fm-details { position: relative; padding: var(--s9) var(--pad) var(--s9); }
.fm-details .strip { padding-bottom: var(--s6); border-bottom: 2px solid #262626; }
.fm-premise { font: 900 clamp(48px, 7vw, 120px)/.88 var(--font-display); font-stretch: 62%; text-transform: uppercase; margin: var(--s8) 0; max-width: 14ch; }
.fm-premise .script { text-transform: none; font-weight: 400; font-size: 1.15em; }
.player { position: relative; width: min(100%, 1100px); aspect-ratio: 4/3; max-height: 82vh; margin: 0 auto var(--s9); background: #000; box-shadow: 0 0 0 1px #262626; display: grid; grid-template-rows: 1fr auto; }
.player-card { display: grid; place-items: center; align-content: center; gap: var(--s5); text-align: center; color: #E7DCC8; }
.pc-t { font: 900 clamp(48px, 7vw, 110px)/.84 var(--font-display); font-stretch: 62%; text-transform: uppercase; max-width: 8ch; }
.pc-play { width: 88px; height: 88px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.pc-play svg { width: 40px; }
.player-bar { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); color: #8E8B84; }
.player-bar i { flex: 1; height: 2px; background: #333; }
.player-rn { position: absolute; left: var(--s4); top: var(--s4); }
.fm-about { max-width: 980px; }
.fm-about .lede { font-size: clamp(22px, 2vw, 30px); max-width: 32ch; margin-top: var(--s5); }
.fm-vyro { right: 2vw; bottom: -6vh; height: 70vh; }
.fm-stills { padding: var(--s7) 0 var(--s9); overflow: hidden; }
.stills { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--s5); padding: var(--s6) var(--pad); align-items: start; }
.still { margin: 0; }
.still .wall-mini { position: relative; aspect-ratio: 4/3; }
.still.s2 { margin-top: var(--s9); } .still.s3 { margin-top: var(--s6); }
.still figcaption { margin-top: var(--s3); opacity: .7; }

/* LAB */
.graph { background-image: linear-gradient(rgba(29,63,191,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(29,63,191,.12) 1px, transparent 1px); background-size: 32px 32px; }
.lab-head { min-height: 92svh; }
.lab-head h1.poster { font-size: 22vw; }
.lab-rivet { right: 4vw; bottom: -10vh; height: 84vh; }
.lab-bench { padding: var(--s7) 0 var(--s9); }
.spec { display: grid; grid-template-columns: 200px 1fr minmax(260px, 30%); gap: var(--s7); padding: var(--s8) var(--pad); border-top: 2px solid var(--ink); align-items: start; }
.spec h2 { font-size: clamp(54px, 6.4vw, 112px); margin-bottom: var(--s4); }
.spec .links-row { margin-top: var(--s6); }
.spec-id { display: grid; gap: var(--s5); justify-items: start; }
.stampmark { display: inline-block; padding: var(--s3) var(--s4); border: 3px solid currentColor; font: 900 24px/1 var(--font-display); font-stretch: 62%; text-transform: uppercase; transform: rotate(-8deg); border-radius: 6px; }
.s-red { color: var(--red); } .s-ink { color: var(--ink); } .s-ochre { color: #9a6a12; }
.spec-obj .obj { width: 100%; filter: drop-shadow(0 26px 26px rgba(13,13,13,.35)); }
.spec-obj.big { height: 220px; }
.lc-frames.big i { background: var(--paper); border-color: var(--ink); }
.lc-city.big i:nth-child(3) { background: var(--ochre); }
.story3.light { margin-top: var(--s6); }

/* GUIDES */
.gd-head { padding-bottom: var(--s7); }
.gd-head h1.poster { line-height: .78; }
.gd-lib { padding: var(--s6) 0 var(--s9); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s8); }
.chipbtn { height: 44px; padding: 0 var(--s5); border-radius: 999px; border: 2px solid currentColor; background: transparent; color: inherit; font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, color .3s; }
.chipbtn[aria-pressed="true"] { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.chipbtn:hover { background: var(--paper); color: var(--ink); }
.filters-n { margin-left: auto; }
.shelf-grid { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s8) var(--s6); }
.gcard { display: grid; gap: var(--s5); }
.gcard .zcover { width: 100%; }
.gcard:nth-child(even) { margin-top: var(--s9); }
.gcard.is-out { display: none; }
.gmeta { display: grid; gap: var(--s2); justify-items: start; }
.gd-note { margin-top: var(--s8); }
.gd-path { padding-top: var(--s9); }
.gd-path .kick { margin-bottom: var(--s5); }

/* GUIDE: progress rail */
.gu-head { display: grid; grid-template-columns: 1fr 30%; column-gap: var(--s7); padding-bottom: var(--s8); }
.gu-head > :not(.gu-hero-zine) { grid-column: 1; }
.gu-head .kick a { text-decoration: underline; text-underline-offset: 4px; }
.gu-head h1.poster { font-size: clamp(80px, 11vw, 200px); }
.gu-strip { margin-top: var(--s6); padding-top: var(--s5); border-top: 2px solid currentColor; }
.gu-hero-zine { grid-column: 2; grid-row: 1 / 5; align-self: center; width: 100%; --r: 6deg; }
.gu-body { display: grid; grid-template-columns: 260px 1fr; gap: var(--s8); padding: var(--s7) var(--pad) var(--s10); }
.rail { position: sticky; top: calc(var(--hd) + var(--s6)); align-self: start; display: grid; grid-template-columns: 6px 1fr; gap: var(--s5); }
.rail-track { position: relative; background: color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 3px; overflow: hidden; }
.rail-fill { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--cobalt); transform-origin: top; transform: scaleY(0); }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.rail a { opacity: .45; transition: opacity .3s, color .3s; } .rail a.on { opacity: 1; color: var(--cobalt); }
.steps { display: grid; gap: var(--s10); max-width: 1000px; }
.step { position: relative; display: grid; gap: var(--s5); justify-items: start; }
.sn { font: 900 clamp(100px, 12vw, 200px)/.8 var(--font-display); font-stretch: 125%; color: var(--cobalt); letter-spacing: -.05em; }
.step h2 { font-size: clamp(54px, 6vw, 100px); }
.step .body { font-size: 21px; }
.prompt { margin: 0; padding: var(--s6); background: var(--ink); color: var(--paper); font-size: clamp(14px, 1.4vw, 20px); line-height: 1.7; white-space: pre-wrap; text-transform: none; letter-spacing: 0; box-shadow: 8px 8px 0 var(--cobalt); }
.prompt b { color: var(--acid); font-weight: 600; }
.six { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); width: 100%; margin-top: var(--s4); }
.six .zcover { width: 100%; --dy: 0; }
.six .zcover:nth-child(odd) { --r: -2deg; } .six .zcover:nth-child(even) { --r: 2deg; --dy: 18px; }
.six .zine-type { font-size: clamp(16px, 2vw, 30px); }
.ink-band { display: block; height: 30%; margin: auto 0; }
.uses { display: grid; grid-template-columns: 260px 1fr; gap: var(--s6); align-items: center; padding: var(--s6); background: var(--paper-2); border-top: 3px solid var(--ink); }
.uses .obj { width: 100%; filter: drop-shadow(0 20px 20px rgba(13,13,13,.35)); }
.uses-t { font: 900 clamp(36px, 3.6vw, 60px)/.88 var(--font-display); font-stretch: 62%; text-transform: uppercase; margin: var(--s2) 0 var(--s4); }
.uses .btn { margin-top: var(--s5); }

/* RESOURCES */
.rs-head { padding-bottom: var(--s8); }
.grp-h { display: grid; grid-template-columns: 70px 1fr auto 40px; align-items: center; gap: var(--s5); width: 100%; padding: var(--s6) var(--pad); background: none; border: 0; text-align: left; cursor: pointer; color: inherit; }
.grp-t { font: 900 clamp(48px, 6.6vw, 116px)/.84 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.pm { position: relative; width: 32px; height: 32px; } .pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: currentColor; transition: transform .5s var(--ease-house); }
.pm::after { transform: rotate(90deg); } [aria-expanded="true"] .pm::after { transform: rotate(0); }
.grp-b { overflow: hidden; }
.grp-b[hidden] { display: block; height: 0; }
.item { display: grid; grid-template-columns: 70px 1fr 1fr auto; gap: var(--s5); align-items: center; padding: var(--s5) var(--pad); border-top: 2px solid color-mix(in srgb, currentColor 30%, transparent); }
.item::before { content: ""; }
.it { font: 800 clamp(22px, 2vw, 32px)/1.05 var(--font-display); }
a.item:hover .it { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.item-note { padding: var(--s4) var(--pad) var(--s6) calc(var(--pad) + 70px + var(--s5)); }
.rs-note { padding: var(--s6) var(--pad); }

/* SHOP */
.sp-head { padding-bottom: var(--s8); }
.mocknote { padding: var(--s4) var(--pad); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.mocknote p { font-size: 12px; line-height: 1.5; }
.shelf { padding: var(--s9) 0 var(--s7); }
.shelf-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: end; margin-bottom: var(--s7); }
.shelf-head h2 { font-size: clamp(80px, 11vw, 200px); }
.goods { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.good a { display: grid; gap: var(--s3); align-content: start; }
.g-obj { position: relative; display: grid; place-items: center; aspect-ratio: 1; perspective: 900px; border-bottom: 3px solid currentColor; padding-bottom: var(--s4); }
.g-obj > * { transition: transform .7s var(--ease-house), filter .7s var(--ease-house); transform-style: preserve-3d; }
.g-obj .obj { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(13,13,13,.32)); }
.good a:hover .g-obj > *, .good a:focus-visible .g-obj > * { transform: translateY(-18px) rotateY(var(--ry, -12deg)) rotateX(var(--rx, 4deg)); filter: drop-shadow(0 40px 34px rgba(13,13,13,.4)); }
.g-name { font: 900 clamp(30px, 2.8vw, 46px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; margin-top: var(--s3); }
.g-why { font-size: 16px; font-weight: 600; max-width: 30ch; }
.g-price { display: flex; gap: var(--s3); align-items: center; }
.g-price em { font-style: normal; font-size: 10px; background: var(--acid); color: var(--ink); padding: 3px 6px; }
.pack-label { position: absolute; left: 37%; top: 54%; transform: rotate(-8deg) skewX(4deg); color: #b98a3c; font-size: clamp(10px, .9vw, 13px); line-height: 1.3; pointer-events: none; }
.g-zine { width: 64%; aspect-ratio: 1/1.5; }
.g-zine .zine-type { font-size: clamp(22px, 2vw, 34px); }
.typo-obj { position: relative; width: 70%; aspect-ratio: 1; display: grid; place-items: center; }
.typo-obj i { position: absolute; width: 62%; aspect-ratio: 4/5; background: var(--paper); box-shadow: 0 1px 0 rgba(13,13,13,.1), 0 18px 24px -10px rgba(13,13,13,.45); border: 1px solid rgba(13,13,13,.08); }
.typo-obj i:nth-child(1) { transform: rotate(-10deg) translate(-18%, 4%); background: var(--red); }
.typo-obj i:nth-child(2) { transform: rotate(4deg) translate(14%, -2%); background: var(--acid); }
.typo-obj i:nth-child(3) { transform: rotate(-1deg); }
.typo-obj b { position: relative; z-index: 2; font: 900 clamp(22px, 2.2vw, 36px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; color: var(--ink); transform: rotate(-1deg); }
.sp-why { padding-top: var(--s9); }

/* PRODUCT */
.pd { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s8); padding: calc(var(--hd) + var(--s7)) var(--pad) var(--s9); align-items: start; }
.pd-gallery { position: sticky; top: calc(var(--hd) + var(--s5)); }
.pd-stage { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 50% 55%, #F0EDE6, var(--paper-2) 70%); cursor: zoom-in; }
.pd-img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 34px 34px rgba(13,13,13,.35)); transition: transform .8s var(--ease-house); }
.pd-stage.v-detail .pd-img { transform: scale(2.1) translateY(14%); }
.pd-stage.v-fabric .pd-img { transform: scale(4) translate(-12%, -8%); }
.loupe { position: absolute; width: 190px; height: 190px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 16px 30px rgba(13,13,13,.35); pointer-events: none; opacity: 0; transition: opacity .3s; background-repeat: no-repeat; left: 0; top: 0; }
.pd-stage:hover .loupe { opacity: 1; }
.pd-typo { width: 70%; }
.pd-thumbs { display: flex; gap: var(--s3); margin-top: var(--s4); }
.thumb { height: 40px; padding: 0 var(--s4); border: 2px solid var(--ink); border-radius: 999px; background: transparent; font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.thumb[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pd-hint { margin-top: var(--s3); opacity: .6; }
.pd-info { display: grid; gap: var(--s5); align-content: start; }
.pd-info .kick a { text-decoration: underline; text-underline-offset: 4px; }
.pd-info h1 { font-size: clamp(64px, 7.4vw, 128px); }
.pd-price { display: flex; align-items: center; gap: var(--s4); font: 900 40px/1 var(--font-display); font-stretch: 62%; }
.sizes { border: 0; padding: 0; margin: 0; display: flex; gap: var(--s2); flex-wrap: wrap; }
.sizes legend { margin-bottom: var(--s3); }
.sizes label { position: relative; }
.sizes input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sizes span { display: grid; place-items: center; min-width: 56px; height: 48px; border: 2px solid var(--ink); font: 600 13px/1 var(--font-mono); }
.sizes input:checked + span { background: var(--ink); color: var(--paper); }
.sizes input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.pd-added { min-height: 1.4em; }
.inside ul { margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.inside li { padding: var(--s3) 0; border-bottom: 1.5px solid rgba(13,13,13,.2); font-weight: 600; }
.related .row { grid-template-columns: 1fr auto 40px; padding-left: 0; padding-right: 0; margin-top: var(--s3); }
.related .row .t { font-size: clamp(26px, 2.4vw, 40px); }
.pd-note { opacity: .75; line-height: 1.5; text-transform: none; letter-spacing: .02em; }

/* CART: the receipt prints */
.ct { display: grid; grid-template-columns: 1fr minmax(360px, 520px); gap: var(--s8); padding: calc(var(--hd) + var(--s8)) var(--pad) var(--s10); align-items: start; min-height: 100svh; }
.ct-head .kick a { text-decoration: underline; text-underline-offset: 4px; }
.ct-head h1.poster { font-size: clamp(90px, 12vw, 210px); margin: var(--s5) 0; }
.ticket-slot { position: relative; padding-top: 18px; }
.slot-mouth { position: absolute; left: -12px; right: -12px; top: 0; height: 22px; background: var(--ink); border-radius: 11px; z-index: 2; box-shadow: inset 0 -6px 8px rgba(255,255,255,.08); }
.ticket { position: relative; background: #FBF9F4; color: var(--ink); padding: var(--s6) var(--s6) var(--s7); box-shadow: 0 30px 50px -20px rgba(13,13,13,.4); font-family: var(--font-mono); clip-path: inset(0 0 0 0); }
.tk-h { display: flex; justify-content: space-between; padding-bottom: var(--s4); border-bottom: 2px dashed var(--ink); }
.tk-lines { list-style: none; margin: 0; padding: 0; }
.tk-lines li { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-bottom: 1.5px dashed rgba(13,13,13,.3); }
.tk-lines img, .tk-lines .tk-typo { width: 64px; height: 64px; object-fit: contain; }
.tk-lines .tk-typo { display: grid; place-items: center; background: var(--acid); font: 900 12px/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; text-align: center; }
.tk-name { font: 800 17px/1.2 var(--font-display); text-transform: none; }
.tk-meta { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.qty { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.qty button { width: 28px; height: 28px; border: 1.5px solid var(--ink); background: none; cursor: pointer; font-weight: 700; }
.tk-sum { display: flex; justify-content: space-between; padding: var(--s5) 0 var(--s2); font-size: 16px; font-weight: 600; }
.tk-ex { font-size: 10px; opacity: .65; margin-bottom: var(--s5); }
.tk-go { width: 100%; justify-content: center; }
.tk-msg { margin-top: var(--s4); font-size: 11px; line-height: 1.5; text-transform: none; letter-spacing: .02em; min-height: 3em; }
.tk-zig { position: absolute; left: 0; right: 0; bottom: -11px; height: 12px; background: linear-gradient(-45deg, transparent 6px, #FBF9F4 0) 0 0 / 12px 12px, linear-gradient(45deg, transparent 6px, #FBF9F4 0) 0 0 / 12px 12px; }

/* COMMUNITY: the shutter */
.cm-head { padding-bottom: var(--s8); }
.cm-t { font-size: clamp(64px, 9vw, 170px); max-width: 13ch; }
.cm-sub { font: 600 clamp(22px, 2.2vw, 34px)/1.2 var(--font-display); max-width: 26ch; }
.cm-door { padding: 0 var(--pad) var(--s9); }
.door-stage { position: relative; height: 92vh; min-height: 620px; overflow: hidden; border: 3px solid var(--ink); }
.door-inside { position: absolute; inset: 0; padding: var(--s7); display: grid; align-content: end; }
.areas6 { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid #333; }
.areas6 li { display: grid; gap: var(--s2); padding: var(--s5) var(--s4) var(--s5) 0; border-bottom: 2px solid #333; }
.areas6 b { font: 900 clamp(34px, 3.6vw, 62px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; color: var(--acid); }
.areas6 span { font-size: 16px; font-weight: 600; }
.shutter { position: absolute; inset: 0; background: repeating-linear-gradient(#bdbab3 0 22px, #8f8c85 22px 24px, #d9d6cf 24px 30px); box-shadow: 0 12px 24px rgba(0,0,0,.5); display: grid; place-items: center; transform: translateY(-46%); }
.sh-sign { background: var(--acid); color: var(--ink); border: 3px solid var(--ink); padding: var(--s4) var(--s6); font: 900 clamp(40px, 5vw, 84px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; transform: rotate(-3deg); margin-top: 40%; }
.sh-handle { position: absolute; bottom: 14px; left: 50%; width: 120px; height: 12px; margin-left: -60px; background: var(--ink); border-radius: 6px; }
.cm-promise { margin-top: var(--s7); font: 900 clamp(40px, 5.4vw, 92px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; max-width: 18ch; }

/* WORLD: a walk through the city */
.wd-head { padding-bottom: var(--s7); }
.wd-head h1.poster { font-weight: 900; font-stretch: 125%; }
.wd-walk { overflow: hidden; }
.wd-pin { position: relative; height: 100svh; overflow: hidden; }
.sun { position: absolute; right: 12vw; top: 12vh; width: 26vh; height: 26vh; border-radius: 50%; background: #F5C518; box-shadow: 0 0 0 20px rgba(245,197,24,.25), 0 0 0 46px rgba(245,197,24,.12); }
.city { position: absolute; left: 0; top: 0; bottom: 0; width: 500vw; }
.layer { position: absolute; left: 0; right: 0; bottom: 14vh; }
.layer.far { height: 56vh; background: linear-gradient(transparent 0, transparent 0), repeating-linear-gradient(90deg, #b9832a 0 7vw, transparent 7vw 9vw, #b9832a 9vw 13vw, transparent 13vw 14vw); -webkit-mask: linear-gradient(transparent 0 0); mask: none; clip-path: polygon(0 40%, 4% 40%, 4% 10%, 9% 10%, 9% 30%, 15% 30%, 15% 0, 19% 0, 19% 25%, 26% 25%, 26% 15%, 33% 15%, 33% 35%, 40% 35%, 40% 5%, 45% 5%, 45% 28%, 52% 28%, 52% 12%, 60% 12%, 60% 32%, 67% 32%, 67% 8%, 72% 8%, 72% 26%, 80% 26%, 80% 14%, 88% 14%, 88% 34%, 94% 34%, 94% 6%, 100% 6%, 100% 100%, 0 100%); opacity: .8; }
.layer.mid { height: 30vh; background: #9c6a1c; clip-path: polygon(0 50%, 6% 50%, 6% 20%, 12% 20%, 12% 60%, 20% 60%, 20% 10%, 25% 10%, 25% 45%, 34% 45%, 34% 25%, 41% 25%, 41% 55%, 50% 55%, 50% 15%, 57% 15%, 57% 40%, 66% 40%, 66% 22%, 74% 22%, 74% 50%, 83% 50%, 83% 18%, 90% 18%, 90% 42%, 100% 42%, 100% 100%, 0 100%); }
.street { position: absolute; left: 0; right: 0; bottom: 0; height: 14vh; background: var(--ink); }
.street::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; background: repeating-linear-gradient(90deg, var(--acid) 0 60px, transparent 60px 120px); }
.districts { position: absolute; inset: 0 0 14vh 0; display: flex; }
.district { position: relative; flex: 1; padding: calc(var(--hd) + var(--s8)) 4vw 0; }
.district h2 { font-size: clamp(64px, 8vw, 140px); margin: var(--s3) 0 var(--s4); }
.district .body { max-width: 26ch; font-weight: 600; }
.wd-neur { position: absolute; right: 6vw; bottom: 0; height: 58vh; filter: drop-shadow(0 24px 24px rgba(13,13,13,.35)); }
.cabinet { position: absolute; right: 8vw; bottom: 0; width: 22vh; height: 46vh; background: var(--red); border: 4px solid var(--ink); border-radius: 20px 20px 0 0; display: grid; place-items: start center; padding-top: 4vh; }
.cabinet span { width: 80%; aspect-ratio: 4/3; background: var(--ink); color: var(--acid); display: grid; place-items: center; text-align: center; font: 600 13px/1.2 var(--font-mono); text-transform: uppercase; box-shadow: inset 0 0 0 4px #222; animation: blink 2s steps(2) infinite; }
.screens { position: absolute; right: 6vw; bottom: 0; display: grid; grid-template-columns: repeat(3, 12vh); gap: 8px; }
.screens i { aspect-ratio: 4/3; background: var(--ink); border: 4px solid var(--paper); } .screens i:nth-child(2) { background: var(--red); transform: translateY(-40%); }
.gears { position: absolute; right: 6vw; bottom: 2vh; width: 34vh; }
.gears .sigil { width: 100%; animation: spin 20s linear infinite; }
.gears .sigil .tooth { fill: var(--ink); } .gears .sigil .ring, .gears .sigil .spoke { stroke: var(--ink); } .gears .sigil .core { fill: var(--red); }
.wd-med { position: absolute; right: 8vw; bottom: 4vh; width: 30vh; filter: drop-shadow(0 20px 20px rgba(13,13,13,.4)); }
.wd-eeky { position: absolute; left: 44vw; bottom: 11vh; height: 20vh; z-index: 4; filter: drop-shadow(0 10px 10px rgba(13,13,13,.35)); }
.wd-note { padding: var(--s5) var(--pad) var(--s7); }

/* CONTACT: the sentence */
.ctc { position: relative; min-height: 100svh; padding: calc(var(--hd) + var(--s9)) var(--pad) var(--s9); overflow: hidden; }
.ctc h1.poster { font-size: clamp(90px, 14vw, 250px); margin: var(--s5) 0 var(--s7); }
.sentence p { font: 800 clamp(30px, 4vw, 66px)/1.3 var(--font-display); letter-spacing: -.025em; max-width: 22ch; }
.blank { display: inline-block; position: relative; }
.blank input { font: inherit; letter-spacing: inherit; color: var(--cobalt); background: transparent; border: 0; border-bottom: 4px solid var(--ink); padding: 0 .1em; outline: none; min-width: 4ch; max-width: 80vw; }
.blank input::placeholder { color: rgba(13,13,13,.35); }
.blank input:focus { border-bottom-color: var(--cobalt); background: rgba(255,255,255,.35); }
.blank input[aria-invalid="true"] { border-bottom-color: var(--red); }
.sentence .links-row { margin-top: var(--s7); gap: var(--s6); }
.sentence .links-row a { text-decoration: underline; text-underline-offset: 4px; }
.form-msg { margin-top: var(--s5); min-height: 1.5em; font-size: 13px; text-transform: none; letter-spacing: .02em; }
.test-stamp { position: absolute; right: 6vw; top: 22vh; padding: var(--s4) var(--s6); border: 5px solid var(--red); color: var(--red); font: 900 clamp(40px, 5vw, 80px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; text-align: center; transform: rotate(10deg) scale(1); border-radius: 10px; opacity: .9; }
.test-stamp small { font: 600 14px/1 var(--font-mono); letter-spacing: .1em; }
.ctc-note { margin-top: var(--s7); }

/* PRIVACY */
.pv-head { padding-bottom: var(--s7); }
.pv { padding: 0 0 var(--s9); }
.pv-row { display: grid; grid-template-columns: 70px 1fr 1.4fr; gap: var(--s6); padding: var(--s7) var(--pad); border-top: 2px solid var(--ink); align-items: start; }
.pv-row h2 { font: 900 clamp(40px, 4.4vw, 76px)/.88 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.pv-row .body { font-size: 21px; }
mark { background: linear-gradient(var(--acid), var(--acid)) no-repeat 0 85% / var(--hl, 0%) 70%; color: inherit; transition: background-size 1.1s var(--ease-house); }
mark.on { --hl: 100%; }

/* 404: Eeky searching after dark */
.nf { position: relative; height: 100svh; min-height: 640px; overflow: hidden; display: grid; align-content: center; padding: 0 var(--pad); }
.nf-dark { position: absolute; inset: 0; background: radial-gradient(circle 22vmax at var(--lx, 60%) var(--ly, 55%), rgba(255,236,170,.0) 0%, rgba(13,13,13,.0) 30%, rgba(13,13,13,.92) 70%); z-index: 3; pointer-events: none; }
.nf-code { position: relative; z-index: 2; color: var(--acid); }
.nf-t { position: relative; z-index: 2; font-size: clamp(70px, 10.5vw, 190px); max-width: 11ch; margin: var(--s5) 0 var(--s7); }
.nf-t .script { text-transform: none; font-weight: 400; font-size: 1.1em; }
.nf-ways { position: relative; z-index: 4; display: flex; gap: var(--s5); flex-wrap: wrap; }
.nf-ways a { font: 900 clamp(32px, 3.4vw, 56px)/1 var(--font-display); font-stretch: 62%; text-transform: uppercase; padding: var(--s3) var(--s5); background: var(--acid); color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--paper); transition: transform .3s var(--ease-house); }
.nf-ways a:hover, .nf-ways a:focus-visible { transform: translate(-3px, -3px) rotate(-2deg); }
.nf-eeky { position: absolute; left: 0; top: 0; height: 30vh; z-index: 4; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); }
.nf-say { position: absolute; z-index: 4; left: var(--pad); bottom: calc(var(--barh) + var(--s5)); color: var(--acid); }

/* inner-page phone recomposition */
@media (max-width: 820px) {
  .pghead { padding-top: calc(var(--hd) + var(--s8)); padding-bottom: var(--s8); }
  .pghead h1.poster { font-size: 19vw; }
  .strip { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .story3, .path { grid-template-columns: 1fr; }
  .story3 li { border-right: 0; border-bottom: 2px solid currentColor; padding-left: 0; }
  .path li::after { content: "↓"; }
  .ab-head { min-height: 0; padding-bottom: 54svh; }
  .ab-head h1 { max-width: none; }
  .ab-neur { right: auto; left: 30vw; bottom: -6svh; height: 52svh; }
  .ab-word { font-size: 17vw; }
  .ab-newer { margin-left: 30vw; font-size: 16vw; }
  .force { grid-template-columns: 1fr; gap: var(--s2); align-content: center; padding: var(--s5) var(--pad); }
  .force-bands { height: auto; } .force { min-height: 22svh; }
  .ab-founder { grid-template-columns: 1fr; }
  .ab-med { grid-row: auto; max-width: 70vw; margin-bottom: var(--s6); }
  .ab-face { min-height: 90svh; }
  .ab-face-neur { height: 56svh; }
  .st-head h1.poster { font-size: 30vw; }
  .st-vyro { height: 56svh; right: -10vw; bottom: 22svh; }
  .reelrow { grid-template-columns: 1fr; gap: var(--s4); }
  .sprocket { display: none; }
  .st-lab-head { grid-template-columns: 1fr; }
  .labcard { width: 80vw; min-height: 64svh; }
  .fm-title h1 { font-size: 17vw; }
  .fm-vyro { height: 40svh; bottom: auto; top: -8svh; right: -12vw; opacity: .95; }
  .stills { grid-template-columns: 1fr; }
  .still.s2, .still.s3 { margin-top: 0; }
  .lab-head h1.poster { font-size: 27vw; }
  .lab-rivet { height: 46svh; right: -8vw; bottom: -4svh; }
  .lab-head { padding-bottom: 44svh; min-height: 0; }
  .spec { grid-template-columns: 1fr; gap: var(--s5); }
  .shelf-grid { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s4); }
  .gcard:nth-child(even) { margin-top: var(--s7); }
  .filters-n { margin-left: 0; width: 100%; }
  .gu-head { grid-template-columns: 1fr; }
  .gu-head h1.poster { font-size: 17vw; }
  .gu-hero-zine { grid-column: 1; grid-row: auto; width: 56vw; margin-top: var(--s6); }
  .gu-body { grid-template-columns: 1fr; gap: var(--s5); }
  .rail { position: sticky; top: var(--hd); z-index: 20; background: var(--paper); grid-template-columns: 1fr; padding: var(--s3) 0; margin: 0 calc(-1 * var(--pad)); padding-left: var(--pad); }
  .rail ol { display: flex; gap: var(--s4); overflow-x: auto; white-space: nowrap; }
  .rail-track { height: 4px; order: 2; margin-right: var(--pad); }
  .rail-fill { transform-origin: left; }
  .six { grid-template-columns: repeat(3, 1fr); }
  .uses { grid-template-columns: 1fr; }
  .grp-h { grid-template-columns: 1fr 32px; } .grp-h .mono { display: none; }
  .item { grid-template-columns: 1fr auto; gap: var(--s2); } .item::before { display: none; } .item .mono { grid-column: 1; }
  .item .st { grid-column: 2; grid-row: 1; }
  .item-note { padding-left: var(--pad); }
  .shelf-head { grid-template-columns: 1fr; gap: var(--s3); }
  .goods { grid-template-columns: 1fr; gap: var(--s8); }
  .g-obj { aspect-ratio: 4/3; }
  .pd { grid-template-columns: 1fr; padding-top: calc(var(--hd) + var(--s4)); }
  .pd-gallery { position: relative; top: 0; }
  .ct { grid-template-columns: 1fr; }
  .door-stage { height: 120svh; }
  .door-inside { padding: var(--s5); }
  .areas6 { grid-template-columns: 1fr 1fr; }
  .sh-sign { margin-top: 70%; }
  .district { flex: none; width: 100vw; padding-left: var(--pad); }
  .wd-neur { height: 38svh; }
  .sun { width: 16vh; height: 16vh; }
  .sentence p { font-size: 8.4vw; }
  .test-stamp { top: auto; bottom: 14svh; right: 4vw; font-size: 9vw; }
  .pv-row { grid-template-columns: 1fr; gap: var(--s3); }
  .nf-t { font-size: 16vw; }
  .nf-eeky { height: 22svh; }
}
@media (prefers-reduced-motion: reduce) {
  .lb { display: none; } .shutter { transform: translateY(-80%); } mark { --hl: 100%; }
  .cabinet span, .gears .sigil { animation: none; }
}

.rr-card.wall-mini { position: relative; inset: auto; }
.ft-ask .script { font-size: .9em; }
.g-obj .obj { position: absolute; left: 6%; top: 4%; width: 88%; height: 88%; }

.pd-typo[hidden] { display: none; }
.sh-sign { position: absolute; left: 50%; bottom: 64px; margin: 0; transform: translateX(-50%) rotate(-3deg); }
@media (max-width: 820px) { .sh-sign { margin-top: 0; } }
.sentence p { max-width: 30ch; font-size: clamp(28px, 3.4vw, 56px); }
@media (max-width: 820px) {
  [data-fit="desk"] { white-space: normal; }
  .shelf-head h2 { font-size: 21vw; }
  .bar a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: var(--barh); }
  .bar a .ar { display: none; }
  .ab-face-line { position: relative; left: auto; bottom: auto; margin-top: var(--s5); }
  .ab-face { padding-bottom: 60svh; }
  .fm-vyro { top: auto; bottom: -2svh; height: 30svh; right: -6vw; }
  .ab-word .keep { max-width: none; }
}
@media (max-width: 820px) { .cm-t { font-size: 13.4vw; } }
.obj-fb.slot-fallback { display: none; }
.missing + .obj-fb.slot-fallback { display: grid; }
.menu-meta .btn { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .wd-pin { height: auto; overflow: visible; }
  .city { position: relative; width: auto; }
  .layer, .sun, .wd-eeky { display: none; }
  .districts { position: relative; inset: auto; flex-direction: column; }
  .district { min-height: 80vh; padding-bottom: var(--s9); border-bottom: 14vh solid var(--ink); }
}

/* ===== v4.1 revisions ===== */
/* Hero: the sentence owns the top; the cast lands in a walled pit below it and never covers a word */
.hero h1 .hl { display: block; }
.hero h1 .hl-ph { display: none; }
.hero h1 .ln { display: block; }
.hero .hl-desk .ln:nth-child(1) { font-size: 6.4vw; } .hero .hl-desk .ln:nth-child(2) { font-size: 9.6vw; } .hero .hl-desk .ln:nth-child(3) { font-size: 11.4vw; }
.pit-line { position: absolute; left: var(--pad); right: var(--pad); height: 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); z-index: 3; pointer-events: none; }
.hero { --h-neur: 36vh; --h-eeky: 18vh; --h-med: 11vh; --w-zine: 7vw; --w-cap: 9vw; }
.stk.cap { height: calc(var(--w-cap) * .667); }
.hint { bottom: auto; top: var(--pit-top, 60vh); margin-top: var(--s3); }
@media (max-width: 820px) {
  .hero h1 .hl-desk { display: none; }
  .hero h1 .hl-ph { display: block; }
  .hero .hl-ph .ln { font-size: 14vw; }
  .hero { --h-neur: 28svh; --h-eeky: 14svh; --h-med: 8svh; --w-zine: 18vw; --w-cap: 24vw; }
  .hint { display: block; left: var(--pad); right: auto; font-size: 10px; }
}

/* Acid has one job: people (Community) and the one action (Start here). Everything else takes its field's ink. */
::selection { background: var(--ink); color: var(--paper); }
.btn.go { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 35%, transparent); transition: transform .3s var(--ease-house), box-shadow .3s var(--ease-house); }
.btn.go:hover { background: var(--ink); color: var(--paper); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 35%, transparent); }
.f-ink .btn.go, .f-cobalt .btn.go, .showing .btn.go { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.f-ink .btn.go:hover, .f-cobalt .btn.go:hover, .showing .btn.go:hover { background: var(--paper); color: var(--ink); }
.chipbtn[aria-pressed="true"] { background: var(--paper); color: var(--cobalt); border-color: var(--paper); }
.g-price em { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.typo-obj i:nth-child(2) { background: var(--ochre); }
.tk-lines .tk-typo { background: var(--paper-2); }
.prompt b { color: var(--ochre); }
.cabinet span { color: var(--ochre); }
.street::before { background: repeating-linear-gradient(90deg, var(--paper) 0 60px, transparent 60px 120px); }
.nf-code, .nf-say { color: var(--ochre); }
.nf-ways a { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 5px 5px 0 var(--ochre); }
.ft-col a:hover { color: var(--ochre); }
.companion .codec .opts a:hover, .companion .codec .opts a:focus-visible { background: var(--ink); color: var(--paper); }
.help .row:nth-child(4) { --rc: var(--cobalt); --rt: var(--paper); }
.help .row:nth-child(6) { --rc: var(--ochre); }
.mocknote.f-ink { border-color: var(--ink); }
.mocknote.f-ink b { color: var(--ochre); }
.blank input::placeholder { color: rgba(13,13,13,.5); }
.test-stamp small { display: block; margin-top: 6px; }
mark { background-image: linear-gradient(color-mix(in srgb, var(--ochre) 70%, transparent), color-mix(in srgb, var(--ochre) 70%, transparent)); }

/* World: a parallax walk through rendered plates (far skyline, mid buildings, front props) */
.wd-pin { --dusk: 0; background: linear-gradient(#E9B347, var(--ochre) 60%); }
.wd-pin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(142,22,18,.0), rgba(142,22,18,.35)); opacity: var(--dusk); pointer-events: none; z-index: 1; }
.sun, .layer.far, .layer.mid { clip-path: none; }
.layer { position: absolute; left: 0; bottom: auto; background-repeat: repeat-x; pointer-events: none; }
.layer.far { top: 6vh; height: 130vh; width: 260vw; background-image: none; background-size: auto 100%; opacity: .95; }
.layer.mid { bottom: 9vh; top: auto; height: 104vh; width: 420vw; background-image: none; background-size: auto 100%; background-position: 0 100%; }
.layer.front { display: none; }
.has-front .layer.front { display: block; bottom: 0; top: auto; height: 60vh; width: 640vw; background-image: none; background-size: auto 100%; background-position: 0 100%; z-index: 3; }
.street { height: 9vh; background: #2a1d10; z-index: 2; }
.street::before { height: 4px; }
.districts { inset: 0 0 9vh 0; z-index: 2; }
.district { padding-top: calc(var(--hd) + var(--s6)); }
.district > .mono, .district h2, .district .body { position: relative; z-index: 3; width: fit-content; max-width: 32ch; }
.district h2 { text-shadow: 0 2px 0 rgba(240,237,230,.25); }
.district .body { background: color-mix(in srgb, var(--ochre) 82%, transparent); padding: var(--s2) var(--s3); margin-left: calc(-1 * var(--s3)); }
.sign { position: absolute; right: 10vw; top: 26vh; display: grid; padding: var(--s4) var(--s5); background: var(--ink); border: 4px solid #b98a3c; box-shadow: 0 0 0 4px var(--ink), 0 30px 40px rgba(13,13,13,.35); transform: rotate(-4deg); z-index: 3; }
.sign span { font: 900 clamp(40px, 5vw, 86px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; color: var(--red); text-shadow: 0 0 18px rgba(226,54,27,.8); }
.sign span + span { color: var(--ochre); text-shadow: 0 0 18px rgba(215,160,51,.8); animation: blink 2.4s steps(2) infinite; }
.wd-neur { height: 48vh; bottom: 0; z-index: 3; }
.wd-med { width: 22vh; bottom: auto; top: 30vh; z-index: 3; }
.wd-eeky { bottom: 7vh; z-index: 5; }
.cabinet, .screens, .gears { display: none; }

/* Type instead of clip-art: motion as repeated type; the World entry as a plate */
.lc-type { display: grid; align-content: end; justify-items: start; min-height: 170px; overflow: hidden; }
.lc-type b { font: 900 clamp(46px, 5vw, 84px)/.78 var(--font-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; }
.lc-type b:nth-child(1) { opacity: .14; transform: translateX(-18%); } .lc-type b:nth-child(2) { opacity: .3; transform: translateX(-10%); } .lc-type b:nth-child(3) { opacity: .55; transform: translateX(-4%); }
.spec-obj.lc-type { min-height: 220px; height: auto; }
.lc-plate { width: 100%; height: 190px; overflow: hidden; }
.lc-plate .obj { width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; transform: scale(1.4); transform-origin: 50% 100%; }
.spec-obj.lc-plate { height: 240px; }
.q-poster { display: grid; align-content: space-between; padding: var(--s4); background: var(--cobalt); color: var(--paper); box-shadow: inset 0 0 0 10px #0b1a5a, var(--shadow-ink); }
.q-poster b { font: 900 clamp(44px, 5vw, 86px)/.8 var(--font-display); font-stretch: 62%; text-transform: uppercase; color: var(--paper); }
.q-poster b::after { content: "?"; color: var(--red); }

/* Film: poster in code, a designed 4:3 player, credits and a title still */
.fm-tag { margin-top: var(--s4); font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.fm-open.theme-question .fm-frame { background: radial-gradient(ellipse 60% 70% at 70% 40%, #2c4bd6, var(--cobalt) 40%, #0b1a5a 100%); }
.q-still { position: absolute; inset: 0; display: grid; place-items: center end; padding-right: 8vw; overflow: hidden; }
.q-still span { font: italic 400 72vh/1 var(--font-serif); color: rgba(240,237,230,.14); transform: rotate(8deg); }
.fm-sheet { display: grid; grid-template-columns: minmax(300px, 34vw) 1fr; gap: var(--s8); padding: var(--s9) var(--pad); align-items: start; }
.poster-card { position: relative; aspect-ratio: 2/3; display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s4); padding: var(--s6) var(--s5) var(--s5); overflow: hidden; color: #F3E7CF; box-shadow: 0 2px 0 rgba(255,255,255,.04), 0 40px 60px -20px rgba(0,0,0,.8); transform: rotate(-1.5deg); }
.poster-card.theme-museum { background: radial-gradient(ellipse 70% 40% at 50% 26%, rgba(255,214,150,.45), transparent 70%), linear-gradient(#5b3b22, #22150b 70%, #120b06); }
.poster-card.theme-question { background: radial-gradient(ellipse 70% 50% at 60% 30%, #3557e0, var(--cobalt) 45%, #0b1a5a); }
.poster-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 4px 4px; mix-blend-mode: overlay; }
.pk-top { text-align: center; letter-spacing: .3em; font-size: 11px; }
.pk-title { align-self: center; text-align: center; font: 900 clamp(54px, 6.4vw, 112px)/.8 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.pk-title em { font-style: normal; color: var(--ochre); }
.theme-question .pk-title em { color: var(--paper); } .theme-question .pk-title em::after { content: "?"; color: var(--red); }
.pk-tag { text-align: center; font: italic 400 clamp(18px, 1.5vw, 24px)/1.2 var(--font-serif); }
.pk-bill { text-align: center; font: 600 clamp(8px, .62vw, 10px)/1.5 var(--font-display); font-stretch: 62%; letter-spacing: .12em; border-top: 1px solid rgba(243,231,207,.35); padding-top: var(--s3); }
.pk-mark { position: absolute; right: var(--s4); top: var(--s4); width: 34px; opacity: .8; }
.pk-mark .sigil .tooth { fill: currentColor; } .pk-mark .sigil .ring, .pk-mark .sigil .spoke { stroke: currentColor; } .pk-mark .sigil .core { fill: var(--ochre); }
.fm-side .fm-premise { margin: var(--s7) 0 var(--s5); }
.fm-side .lede { max-width: 40ch; font-size: clamp(20px, 1.7vw, 26px); }
.fm-screen { position: relative; padding: var(--s8) 0 var(--s10); }
.player43 { width: min(calc(100% - 2 * var(--pad)), 1040px, 120vh); margin: var(--s5) auto 0; }
.p-bezel { padding: clamp(12px, 1.6vw, 24px); background: linear-gradient(#1c1c1c, #0f0f0f); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px #262626; }
.p-screen { aspect-ratio: 4/3; display: grid; place-content: center; justify-items: center; gap: var(--s5); text-align: center; color: #E7DCC8; background: radial-gradient(ellipse 80% 70% at 50% 45%, #1a1410, #050505 75%); border-radius: 6px; position: relative; overflow: hidden; }
.player43.theme-question .p-screen { background: radial-gradient(ellipse 80% 70% at 50% 45%, #13245f, #04081c 75%); }
.p-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(rgba(255,255,255,.025) 0 2px, transparent 2px 4px); pointer-events: none; }
.p-soon { opacity: .6; }
.p-controls { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s3) 0; color: #8E8B84; }
.p-btn { border: 1.5px solid #3a3a3a; border-radius: 999px; padding: 6px 10px; }
.p-scrub { flex: 1; height: 4px; background: #262626; border-radius: 2px; position: relative; } .p-scrub i { position: absolute; left: 0; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #8E8B84; }
.fm-screen .fm-vyro { right: 1vw; bottom: 0; height: 64vh; }
.fm-credits { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s8); padding: var(--s8) var(--pad) var(--s10); align-items: center; border-top: 2px solid #262626; }
.roll { margin: var(--s5) 0 0; display: grid; gap: 0; }
.roll div { display: grid; grid-template-columns: 160px 1fr; gap: var(--s5); padding: var(--s4) 0; border-bottom: 1.5px solid #262626; }
.roll dt { font: 600 11px/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.roll dd { margin: 0; font: 900 clamp(22px, 2vw, 32px)/1 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.title-still { margin: 0; }
.ts-card { aspect-ratio: 4/3; display: grid; align-content: space-between; padding: var(--s6); color: #F3E7CF; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.theme-museum .ts-card { background: radial-gradient(ellipse 60% 50% at 30% 30%, rgba(255,214,150,.35), transparent 70%), linear-gradient(120deg, #3b2614, #120b06); }
.theme-question .ts-card { background: radial-gradient(ellipse 60% 50% at 70% 30%, #3557e0, #0b1a5a); }
.ts-card b { font: 900 clamp(48px, 6vw, 110px)/.82 var(--font-display); font-stretch: 62%; text-transform: uppercase; max-width: 8ch; }
.title-still figcaption { margin-top: var(--s3); }

/* Product: views as real crops, facts, size guide */
.thumb { display: inline-flex; align-items: center; gap: var(--s2); height: 56px; padding: 4px var(--s4) 4px 4px; }
.thumb img { width: 46px; height: 46px; border-radius: 50%; background: var(--paper); object-fit: cover; object-position: 50% 30%; }
.thumb img.tz-2 { transform: scale(1.9); transform-origin: 50% 35%; clip-path: circle(26% at 50% 36%); }
.thumb img.tz-4 { transform: scale(3); transform-origin: 46% 40%; clip-path: circle(17% at 46% 40%); }
.pd-strip { padding: var(--s8) 0 var(--s9); }
.crops { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s4); padding: var(--s5) var(--pad) 0; }
.crop { margin: 0; }
.crop .obj { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: radial-gradient(ellipse at 50% 40%, #2a2a2a, #121212); }
.crop.c1 .obj { object-position: 50% 32%; transform: scale(1.6); transform-origin: 50% 32%; }
.crop.c2 .obj { object-position: 50% 0%; transform: scale(2.2); transform-origin: 50% 6%; }
.crop.c3 .obj { object-fit: contain; padding: 8%; }
.crop { overflow: hidden; }
.crop figcaption { margin-top: var(--s3); }
.pd-facts { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s7) var(--s8); padding: var(--s9) var(--pad) var(--s10); }
.fact { display: grid; gap: var(--s4); align-content: start; border-top: 2px solid var(--ink); padding-top: var(--s4); }
.fact-big { font: 900 clamp(36px, 3.8vw, 64px)/.92 var(--font-display); font-stretch: 62%; text-transform: uppercase; max-width: 16ch; }
.specs { margin: 0; display: grid; } .specs div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1.5px solid rgba(13,13,13,.18); }
.specs dt { font: 600 11px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; } .specs dd { margin: 0; font-weight: 700; }
.sizes-t { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 13px; }
.sizes-t th, .sizes-t td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1.5px solid rgba(13,13,13,.18); }
.sizes-t thead th { font-weight: 600; letter-spacing: .06em; }
.opens { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); } .opens li { font-size: 18px; font-weight: 600; padding-left: var(--s5); position: relative; } .opens li::before { content: "→"; position: absolute; left: 0; }

/* 404: the headline is always readable; Eeky lights the room around it */
.nf-t, .nf-code { z-index: 4; }
.nf-dark { background: radial-gradient(circle 24vmax at var(--lx, 70%) var(--ly, 55%), rgba(255,236,170,.10) 0%, rgba(13,13,13,0) 35%, rgba(13,13,13,.85) 72%); }

@media (max-width: 820px) {
  .companion > button { width: 52px; height: 72px; }
  .companion { right: var(--s2); bottom: calc(var(--barh) - 10px); }
  .bar-off .companion { bottom: var(--s2); }
  .bar a { padding-right: 72px; }
  .fm-sheet, .fm-credits, .pd-facts { grid-template-columns: 1fr; gap: var(--s6); }
  .poster-card { width: 86%; margin: 0 auto; }
  .fm-screen .fm-vyro { height: 30svh; bottom: auto; top: -6svh; right: -6vw; }
  .roll div { grid-template-columns: 1fr; gap: var(--s1); }
  .crops { grid-template-columns: 1fr 1fr; } .crop.c1 { grid-column: 1 / -1; }
  .layer.far { height: 70svh; top: 10svh; } .layer.mid { height: 62svh; }
  .sign { top: 40svh; right: 6vw; }
  .wd-neur { height: 34svh; }
  .district .body { max-width: 26ch; }
  .nf-eeky { height: 18svh; }
}
@media (prefers-reduced-motion: reduce) { .layer.mid, .layer.far, .layer.front { display: none; } }
/* plates placed to their content: far skyline base ~58vh, mid buildings stand behind the plaza edge, front plaza floor */
.layer.far { top: 28vh; height: 100vh; }
.layer.mid { bottom: 21vh; height: 58vh; }
.has-front .layer.front { height: 60vh; }
.has-front .street { display: none; }
.has-front .districts { inset: 0; z-index: 4; }
.has-front .wd-neur { bottom: 4vh; }
.has-front .wd-eeky { bottom: 3vh; }
@media (max-width: 820px) {
  .layer.far { top: 30svh; height: 64svh; }
  .layer.mid { bottom: 17svh; height: 42svh; }
  .has-front .layer.front { height: 42svh; }
}
.layer { background-color: transparent !important; }
.crop.c2 .obj { transform: scale(2.8); transform-origin: 50% 0%; object-position: 50% 0%; }
.ct-rn { margin-top: var(--s7); }
@media (max-width: 820px) { .shelf-head h2 { font-size: 17.5vw; } }

/* ===== v4.2: modular collections ===== */
.stk.pack { width: var(--w-cap); height: calc(var(--w-cap) * .667); filter: drop-shadow(0 14px 12px rgba(13,13,13,.3)); }
.gd-lib .filters, .jn-list .filters { padding: 0 var(--pad); }
.rs-filters { padding-top: var(--s6); padding-bottom: var(--s6); margin-bottom: 0; }
.grp.is-out, .jrow.is-out { display: none; }
/* home: the latest rail */
.latest { padding: var(--s9) 0 0; }
.latest-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 0 var(--pad) var(--s5); }
.latest-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 23vw); gap: var(--s4); overflow-x: auto; padding: var(--s3) var(--pad) var(--s6); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lt { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s3); min-height: 300px; padding: var(--s5); justify-items: start; transition: transform .5s var(--ease-house); }
.lt:hover, .lt:focus-visible { transform: translateY(-8px) rotate(-1deg); }
.lt-guides { background: var(--cobalt); color: var(--paper); } .lt-journal { background: var(--red); color: var(--ink); } .lt-downloads { background: var(--ink); color: var(--paper); } .lt-resources { background: var(--ochre); color: var(--ink); }
.lt-t { font: 900 clamp(34px, 2.8vw, 48px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; align-self: end; }
.lt-s { font-size: 15px; font-weight: 600; max-width: 26ch; }
.lt-k { opacity: .8; }
/* home stall: downloads only */
.stall-objs .packo { left: 4%; top: 6%; width: 64%; transform: rotate(-5deg); }
.stall-zine { position: absolute; right: 6%; top: 0; width: 32%; aspect-ratio: 1/1.5; transform: rotate(7deg); filter: drop-shadow(0 26px 26px rgba(13,13,13,.3)); }
.stall-zine .zine-type { font-size: clamp(18px, 1.8vw, 30px); }
.stall-typo { position: absolute; left: 30%; bottom: 0; width: 36%; transform: rotate(-3deg); }
.stall:hover .packo { transform: rotate(-2deg) translateY(-10px); }
.stall-note { margin-top: var(--s5); opacity: .7; }
/* journal index */
.jn-list { padding: var(--s4) 0 var(--s9); }
.jrows { border-top: 2px solid var(--ink); margin-top: var(--s6); }
.jrow { position: relative; isolation: isolate; display: grid; grid-template-columns: 150px 1fr auto 40px; gap: var(--s6); align-items: center; padding: var(--s6) var(--pad); border-bottom: 2px solid var(--ink); }
.jrow::before { content: ""; position: absolute; inset: 0; background: var(--rc); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-house); z-index: -1; }
.jrow:hover::before, .jrow:focus-visible::before { transform: scaleY(1); }
.j-main { display: grid; gap: var(--s2); }
.j-t { font: 900 clamp(40px, 5vw, 88px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.j-s { font-size: 18px; font-weight: 600; max-width: 48ch; }
.jrow .ar { font-size: 28px; transition: transform .45s var(--ease-house); } .jrow:hover .ar { transform: translateX(8px); }
.jn-note { margin-top: var(--s6); }
/* journal post */
.jp-head { display: grid; grid-template-columns: 1fr 26%; column-gap: var(--s7); }
.jp-head > :not(.jp-obj) { grid-column: 1; }
.jp-t { font-size: clamp(64px, 8.4vw, 150px); max-width: 14ch; }
.jp-obj { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 100%; transform: rotate(6deg); filter: drop-shadow(0 30px 30px rgba(13,13,13,.3)); }
.jp-body { padding: var(--s4) 0 var(--s10); }
.jp-story { margin-top: var(--s5); }
.jp-text { padding: var(--s8) var(--pad) 0; max-width: 820px; display: grid; gap: var(--s5); }
.jp-rel, .rs-detail .related, .gu-body .related { padding: var(--s7) var(--pad) 0; max-width: 1100px; }
.gu-body .related { padding-left: 0; padding-right: 0; }
.related .rel-row { grid-template-columns: 110px 1fr auto 40px; padding-left: var(--s3); padding-right: var(--s3); }
.related .rel-row .t { font-size: clamp(26px, 2.6vw, 44px); }
/* resource item */
.rs-item { display: grid; grid-template-columns: 1fr 30%; column-gap: var(--s7); }
.rs-item > :not(.rs-obj) { grid-column: 1; }
.rs-item .kick a, .jp-head .kick a { text-decoration: underline; text-underline-offset: 4px; }
.rs-obj { grid-column: 2; grid-row: 1 / 4; width: 100%; align-self: center; transform: rotate(-6deg); filter: drop-shadow(0 30px 30px rgba(13,13,13,.4)); }
.rs-detail { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s8); padding: var(--s9) var(--pad) var(--s10); }
.rs-detail .related { padding: 0; }
/* download item: typographic objects on the stage */
.pd-stage .typo-obj, .pd-stage .g-zine { width: 62%; }
.pd-stage .g-zine { width: 44%; }
.shelf-note { margin-top: var(--s6); }
/* world gallery strip */
.wd-gallery { padding: var(--s9) 0; }
.gal-head h2 { font-size: clamp(64px, 8vw, 140px); margin: var(--s4) 0 var(--s6); }
.gal-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30vw); gap: var(--s5); overflow-x: auto; padding: var(--s4) var(--pad) var(--s6); scroll-snap-type: x mandatory; }
.gal { margin: 0; scroll-snap-align: start; display: grid; gap: var(--s3); }
.gal-img { display: block; aspect-ratio: 4/5; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #E9B347, var(--ochre)); }
.gal.g1 .gal-img { aspect-ratio: 1; } .gal.g2 .gal-img { aspect-ratio: 3/4; margin-top: var(--s7); } .gal.g3 .gal-img { background: radial-gradient(ellipse at 50% 40%, #2c4bd6, var(--cobalt)); }
.gal-img .obj { width: 100%; height: 100%; transition: transform 1s var(--ease-house); }
.gal:hover .gal-img .obj { transform: scale(1.06); }
.gal figcaption { display: grid; gap: var(--s1); }
.gal figcaption b { font: 900 clamp(26px, 2.2vw, 38px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
@media (max-width: 820px) {
  .latest-row { grid-auto-columns: 74vw; }
  .latest-head { flex-direction: column; align-items: flex-start; }
  .jrow { grid-template-columns: 1fr auto; gap: var(--s3); }
  .jrow .j-date { grid-column: 1 / -1; } .jrow .ar { display: none; }
  .j-t { font-size: 11vw; }
  .jp-head, .rs-item { grid-template-columns: 1fr; }
  .jp-obj, .rs-obj { grid-column: 1; grid-row: auto; width: 54vw; margin-top: var(--s6); }
  .jp-t { font-size: 14vw; }
  .rs-detail { grid-template-columns: 1fr; }
  .related .rel-row { grid-template-columns: 1fr auto; } .related .rel-row .rel-k { grid-column: 1 / -1; } .related .rel-row .ar { display: none; }
  .gal-row { grid-auto-columns: 74vw; }
  .stall-zine { width: 36%; }
}

/* ===== v4.3: copy deck ===== */
.tags4 { display: inline-block; font: 600 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.tags4::before { content: "◆ "; font-size: 8px; vertical-align: 1px; }
.pg-rn, .ab-rn { margin-top: var(--s4); }
/* hero: kicker, the constraint, the answer */
.hero h1 { position: static; }
.hero-top { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--hd) + var(--s4)); }
.hero-kick { margin-bottom: var(--s3); }
.hero-sub { margin-top: var(--s4); max-width: 62ch; font: 600 clamp(16px, 1.3vw, 20px)/1.4 var(--font-display); }
.hero .hl-desk .ln:nth-child(1) { font-size: 8vw; } .hero .hl-desk .ln:nth-child(2) { font-size: 9vw; } .hero .hl-desk .ln:nth-child(3) { font-size: 7vw; }
.hero-foot { justify-content: space-between; }
.hero-foot .btn.acid { height: 42px; }
.hf-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 700; }
.stk.word { --wsz: 30px; display: grid; place-items: center; padding: .38em .7em .32em; border-radius: 999px; border: 3px solid var(--ink); font: 900 var(--wsz)/1 var(--font-display); font-stretch: 62%; text-transform: uppercase; white-space: nowrap; box-shadow: 4px 5px 0 var(--ink); }
.stk.word span { pointer-events: none; }
.w-biz { background: var(--cobalt); color: var(--paper); } .w-cre { background: var(--red); color: var(--ink); } .w-ent { background: var(--ochre); color: var(--ink); } .w-inn { background: var(--ink); color: var(--paper); box-shadow: 4px 5px 0 var(--ochre); }
/* section 2 */
.question .q { font-size: clamp(44px, 7vw, 124px); }
.q-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s8); margin-top: var(--s8); max-width: 1400px; }
.q-body { font: 600 clamp(18px, 1.45vw, 22px)/1.45 var(--font-display); color: var(--ink); max-width: 46ch; }
.q-pitch { font-size: clamp(21px, 1.8vw, 28px); line-height: 1.3; color: var(--paper); }
.q-side { display: grid; gap: var(--s5); align-content: start; }
.q-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s8); }
.q-foot .name { margin: 0; }
.ab-q2 { margin-top: var(--s7); max-width: 52ch; }
/* section 3: the head above the bands, and each band's headline */
.make-head { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s8); align-items: end; padding: var(--s8) var(--pad) var(--s6); }
.make-head .kick { grid-column: 1 / -1; }
.make-head h2 { font-size: clamp(64px, 8vw, 140px); }
.bands { height: auto; }
.bands .band { min-height: 36vh; }
.bl-h { display: block; font: 900 clamp(26px, 2.3vw, 40px)/.92 var(--font-display); font-stretch: 62%; text-transform: uppercase; margin-bottom: var(--s3); }
.band-line { font-size: 16px; }
.sh-aside { font: italic 400 clamp(20px, 1.6vw, 26px)/1.2 var(--font-serif); margin-top: var(--s3); opacity: .9; }
.comm .sub2, .cm-sub2 { margin-top: var(--s3); font-style: italic; }
.comm-status { margin: 0 0 var(--s6); }
/* journal strip on home */
.jstrip-sec { padding: var(--s9) 0 var(--s8); }
.jstrip-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: end; padding: 0 var(--pad) var(--s6); }
.jstrip-head h2 { font-size: clamp(60px, 7vw, 120px); }
.jstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); margin-bottom: var(--s6); }
.js-card { display: grid; gap: var(--s3); align-content: start; justify-items: start; padding: var(--s6) var(--pad); border-right: 2px solid var(--ink); min-height: 260px; transition: background-color .4s var(--ease-house); }
.js-card:hover { background: var(--paper-2); }
.js-t { font: 900 clamp(34px, 3.2vw, 56px)/.88 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.js-s { font-size: 16px; font-weight: 600; }
/* close */
.close .kick { margin-bottom: var(--s5); }
.close .links-row { justify-content: flex-start; }
.close-motto { margin-top: var(--s7); font-size: clamp(40px, 4vw, 70px); color: var(--red); }
/* inner pages */
.st-h2 { font: 900 clamp(34px, 3.6vw, 64px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; max-width: 16ch; margin-top: var(--s5); }
.st-story-t { font-size: clamp(44px, 5vw, 88px); max-width: 18ch; margin-bottom: var(--s6); }
.st-lab-b { grid-column: 1 / -1; }
.gd-path-t, .ab-four-t, .ab-rules-t { font-size: clamp(44px, 5.4vw, 96px); max-width: 18ch; margin: var(--s4) 0 var(--s6); }
.fline { margin: calc(-1 * var(--s5)) 0 var(--s7); padding: 0 var(--pad); min-height: 1.4em; }
.grp-d { padding: 0 var(--pad) var(--s4) calc(var(--pad) + 70px + var(--s5)); font-weight: 600; font-size: 18px; }
.rs-key { margin-top: var(--s5); }
.ab-mission { padding: var(--s10) var(--pad); }
.ab-m-t { font-size: clamp(54px, 6.6vw, 118px); max-width: 15ch; margin: var(--s5) 0 var(--s7); }
.c-cobalt-l { color: #5B7BFF; }
.ab-m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.ab-mission .q-body { color: var(--paper); }
.ab-pull { margin-top: var(--s8); opacity: .7; }
.ab-four { padding: var(--s9) 0 var(--s8); }
.ab-four .row { grid-template-columns: 70px 300px 1fr 40px; }
.ab-four .row .to { font-size: 18px; font-weight: 600; }
.ab-forces-intro { margin-top: var(--s5); }
.ab-rules { padding: var(--s10) var(--pad) var(--s9); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); counter-reset: r; }
.rules li { display: grid; gap: var(--s3); align-content: start; padding: var(--s6) var(--s5) var(--s6) 0; border-right: 2px solid var(--ink); counter-increment: r; }
.rules li + li { padding-left: var(--s5); } .rules li:last-child { border-right: 0; }
.rules li::before { content: "0" counter(r); font: 600 12px/1 var(--font-mono); }
.rules b { font: 900 clamp(30px, 2.6vw, 46px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.rules span { font-size: 17px; font-weight: 600; }
.cm-why { padding: var(--s8) var(--pad); }
.cm-why-t { font-size: clamp(56px, 7vw, 124px); margin: var(--s4) 0 var(--s5); }
.ctc-sub { margin: calc(-1 * var(--s5)) 0 var(--s7); }
.blank.sel select { font: inherit; letter-spacing: inherit; color: var(--cobalt); background: transparent; border: 0; border-bottom: 4px solid var(--ink); padding: 0 .1em; max-width: 80vw; cursor: pointer; }
.bag-pv { font-size: .45em; vertical-align: .6em; }
@media (max-width: 820px) {
  .hero .hl-ph .ln { font-size: 13vw; }
  .hero-sub { font-size: 14px; margin-top: var(--s3); }
  .hero-foot { height: 92px; }
  .hero-foot .links-row { gap: var(--s3); }
  .hf-rn { display: none; }
  .q-cols, .ab-m-cols, .make-head, .jstrip-head { grid-template-columns: 1fr; gap: var(--s5); }
  .question .q { font-size: 12vw; }
  .jstrip { grid-template-columns: 1fr; } .js-card { border-right: 0; border-bottom: 2px solid var(--ink); min-height: 0; }
  .rules { grid-template-columns: 1fr; } .rules li, .rules li + li { border-right: 0; border-bottom: 2px solid var(--ink); padding-left: 0; }
  .ab-four .row { grid-template-columns: 1fr; } .ab-four .row .ar { display: none; }
  .grp-d { padding-left: var(--pad); }
  .bands .band { min-height: 70svh; }
  .make-head h2 { font-size: 16vw; }
}
.bands .band { transition: min-height .8s var(--ease-house); }
@media (min-width: 821px) { .bands .band:hover, .bands .band:focus-within { min-height: 54vh; } }
.st-head, .pghead { grid-template-columns: minmax(0, 1fr); }
.rs-item { grid-template-columns: minmax(0, 1fr) 30%; }
.jp-head { grid-template-columns: minmax(0, 1fr) 26%; }
.ab-newer { margin-left: 40vw; }
.areas6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .band-meta { flex-wrap: wrap; }
  .ab-newer { margin-left: 18vw; }
  .ab-name-pin { width: 100% !important; max-width: 100vw; }
  .areas6 { grid-template-columns: minmax(0, 1fr); }
  .areas6 b { font-size: 8vw; }
  .rs-item, .jp-head { grid-template-columns: minmax(0, 1fr); }
}
.st-lab-pin { grid-template-columns: minmax(0, 1fr); }
.ab-newer { margin-left: 30vw; }
@media (max-width: 820px) { .ab-newer { margin-left: 12vw; } }
.make-head { grid-template-columns: 1fr; }
.make-head .lede { max-width: 44ch; }
.band-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 820px) { .band.studio .band-char { display: none; } }
.make-head h2 { max-width: 9ch; }
@media (min-width: 821px) { .band.studio .band-char { right: 30vw; height: 54vh; } }

/* ===== round 3: critique fixes (daylight-r2) ===== */
/* one Eeky per screen */
.companion.away-eeky { transform: translateY(160%); opacity: 0; pointer-events: none; }
.q-rn, .make-rn { margin-top: var(--s3); }
.close-mock { flex-basis: 100%; font-size: 11px; opacity: .75; }
.uses-st { margin-top: var(--s3); }
.ab-rules-rn { margin-top: var(--s5); }

/* exits: one leads as a colour field, the other trails beneath it as a line */
.exits { position: relative; display: block; }
.exits .exit:first-child { min-height: 44vh; padding-bottom: calc(var(--s8) + 64px); }
.exits .exit + .exit { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--s5); min-height: 0; padding: var(--s4) 0 0; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--s4); background: none !important; border-top: 1.5px solid currentColor; }
.exits .exit + .exit:hover { padding-top: var(--s4); }
.exits .exit + .exit .t { font-size: clamp(22px, 2vw, 32px); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.exits .exit + .exit .ar { font-size: 22px; margin-left: auto; }
.exits .exit + .exit:hover .ar { transform: translateX(6px); }

/* footer: full lockup on Home only; inner pages get a short sign-off */
body:not([data-page="index"]) .ft { padding-top: var(--s7); }
body:not([data-page="index"]) .ft-ask { font-size: clamp(22px, 2vw, 32px); max-width: 26ch; }
body:not([data-page="index"]) .ft-ask .script { font-size: 1.3em; }
body:not([data-page="index"]) .ft-top { gap: var(--s5); }
body:not([data-page="index"]) .ft-col { gap: var(--s2); }
body:not([data-page="index"]) .ft-lock { width: min(38vw, 520px); margin: var(--s5) 0 var(--s4); }
@media (max-width: 820px) {
  body:not([data-page="index"]) .ft-lock { width: 62vw; margin-top: var(--s5); }
  body:not([data-page="index"]) .ft-ask { font-size: 22px; }
}

/* filters: one row; on phone it scrolls sideways inside itself so the first entry shows on the first screen */
.filters { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.filters-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.filters-n { margin: 0; }
.filters .fline { display: inline; margin: 0; padding: 0; min-height: 0; font-size: inherit; }
@media (max-width: 820px) {
  .filters-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 2px var(--pad); scrollbar-width: none; }
  .filters-row::-webkit-scrollbar { display: none; }
  .chipbtn { flex: none; height: 38px; padding: 0 var(--s4); }
  .filters { margin-bottom: var(--s5); }
  .gd-head, .rs-head, .jn-head { padding-bottom: var(--s5); }
  .gd-head h1.poster, .jn-head h1.poster, .rs-head h1.poster { font-size: 13vw; }
  .gd-head .lede, .jn-head .lede, .rs-head .lede { font-size: 16px; }
  .gd-head .pg-rn { display: none; }
  .gd-lib, .jn-list { padding-top: var(--s4); }
}

/* guides: the shelf fans out, and re-fans when the filter changes */
.gcard > .zcover { rotate: calc((var(--i, 0) - 1.5) * 2.4deg); transition: rotate .7s var(--ease-house), transform .6s var(--ease-house); }
.gcard:hover > .zcover { rotate: 0deg; }

/* journal: the entries as a timeline of dates */
.jrows.timeline { position: relative; }
.jrows.timeline::before { content: ""; position: absolute; left: calc(var(--pad) + 6px); top: 0; bottom: 0; width: 2px; background: currentColor; opacity: .25; z-index: -2; }
.jrow .j-date { position: relative; padding-left: 30px; }
.j-dot { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }

/* home: where we can help, split by whether the page behind it is written */
.help-rows { display: grid; gap: var(--s7); }
.help-grp-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s5); padding: 0 var(--pad) var(--s4); }
.help-grp-h .mono:last-child { opacity: .75; max-width: 52ch; }
.hg-ready .row { --rc: var(--acid); }
.hg-ready .row .t { font-size: clamp(36px, 4.6vw, 76px); }
.hg-building .row .t { font-size: clamp(24px, 2.6vw, 42px); }
.hg-building .rows { border-top-style: dashed; }
.hg-building .row { border-bottom-style: dashed; }
.row.is-mock .to { font-style: italic; }

/* Studio: the Lab's own bench, objects standing on one surface */
.st-bench { padding: var(--s7) var(--pad) var(--s9); }
.bench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); }
.bobj { position: relative; display: grid; grid-template-rows: 280px auto; gap: calc(var(--s6) + 24px); }
.bobj::before { content: ""; position: absolute; left: calc(-1 * var(--s7) / 2 - 1px); right: calc(-1 * var(--s7) / 2 - 1px); top: 280px; height: 22px; background: linear-gradient(#c79a4c, #9a6d2b 70%, #7a5420); box-shadow: 0 26px 30px -18px rgba(13,13,13,.55); }
.bobj:first-child::before { left: calc(-1 * var(--pad)); } .bobj:last-child::before { right: calc(-1 * var(--pad)); }
.bobj .spec-obj { position: relative; z-index: 1; align-self: end; display: flex; align-items: flex-end; justify-content: center; height: 100%; width: 100%; transition: transform .6s var(--ease-house); }
.bobj .spec-obj .obj { max-height: 100%; width: auto; max-width: 92%; object-fit: contain; filter: drop-shadow(0 18px 14px rgba(13,13,13,.35)); }
.bobj .spec-obj.lc-type { display: grid; align-content: end; justify-items: start; height: 100%; overflow: hidden; }
.bobj .spec-obj.lc-plate { height: 220px; overflow: hidden; border-radius: 4px 4px 0 0; }
.bobj .spec-obj.lc-plate .obj { width: 100%; max-width: none; height: 100%; object-fit: cover; transform: scale(1.5); transform-origin: 10% 100%; }
.bobj:hover .spec-obj { transform: translateY(-10px) rotate(-1.5deg); }
.bo-tag { display: grid; gap: var(--s2); justify-items: start; padding-left: var(--s4); border-left: 3px solid var(--red); }
.bo-t { font: 900 clamp(28px, 2.6vw, 44px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.bo-l { font-weight: 600; max-width: 30ch; }
.bench-top { display: none; }
.st-lab-pin { min-height: 0; }
@media (max-width: 820px) {
  .bench { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74vw; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) var(--s4); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bobj { scroll-snap-align: start; grid-template-rows: 220px auto; }
  .bobj::before { top: 220px; }
  .bobj .spec-obj.lc-plate { height: 180px; }
}

/* Studio head on phone: Vyro stands below the headline, never over it */
@media (max-width: 820px) {
  .st-head .st-vyro { position: relative; right: auto; bottom: auto; display: block; height: 52svh; margin: var(--s4) 0 0 auto; }
  .st-head .st-vyro-cap { position: static; margin-top: var(--s3); padding-bottom: var(--s5); }
  .st-head { padding-bottom: var(--s5); }
  .lab-head .lab-rivet { position: relative; right: auto; bottom: auto; display: block; height: 46svh; margin: var(--s4) auto 0 -6vw; }
  .lab-head { padding-bottom: 0; }
}

/* Resources: the kit laid out on a table */
.rs-table { padding: var(--s7) 0 var(--s8); }
.kit { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s7); align-items: flex-end; padding: var(--s5) var(--pad) 0; }
.kit-o { display: grid; justify-items: center; gap: var(--s3); width: 170px; rotate: var(--r, 0deg); transition: rotate .5s var(--ease-house), transform .5s var(--ease-house); }
.kit-o:hover, .kit-o:focus-visible { rotate: 0deg; transform: translateY(-8px); }
.k0 { --r: -5deg; } .k1 { --r: 3deg; } .k2 { --r: -2deg; } .k3 { --r: 6deg; } .k4 { --r: -4deg; } .k5 { --r: 2deg; } .k6 { --r: -6deg; }
.kit-obj { height: 160px; width: 100%; display: grid; place-items: end center; }
.kit-obj .obj { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 14px rgba(13,13,13,.35)); }
.kit-obj .typo-obj { width: 100%; }
.kit-obj .typo-obj b { font-size: 22px; }
.kit-note { display: grid; align-content: end; width: 140px; aspect-ratio: 1; padding: var(--s4); background: var(--acid); font: 900 22px/.92 var(--font-display); font-stretch: 62%; text-transform: uppercase; box-shadow: 0 18px 22px -12px rgba(13,13,13,.45); }
.kit-tag { padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 3px 4px 0 var(--ink); }
.kit-cap { font-size: 10px; opacity: .75; text-align: center; }
@media (max-width: 820px) {
  .kit { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s4); scrollbar-width: none; }
  .kit-o { flex: none; width: 150px; }
}

/* Download: a file, not a box. The facts first, then the pages you can turn */
.dl { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s8); padding: calc(var(--hd) + var(--s7)) var(--pad) var(--s9); align-items: start; }
.dl-look { order: -1; }
.dl-info h1.poster { font-size: clamp(56px, 6.4vw, 116px); margin: var(--s4) 0 var(--s4); }
.dl-info .lede { margin: var(--s4) 0 var(--s5); }
.dl-specs { margin: 0 0 var(--s6); display: grid; border-top: 2px solid var(--ink); }
.dl-specs div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1.5px solid rgba(13,13,13,.2); align-items: center; }
.dl-specs dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.dl-specs dd { margin: 0; font-weight: 700; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.dl-specs a { text-decoration: underline; text-underline-offset: 3px; }
.dl-look-h { margin-bottom: var(--s5); }
.dl-pages { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1.3; perspective: 1600px; margin-bottom: 44px; }
.dl-page { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s6) var(--s5); background: #FBF8F2; color: var(--ink); border: 1px solid rgba(13,13,13,.1); box-shadow: 0 1px 0 rgba(13,13,13,.06), 0 28px 40px -20px rgba(13,13,13,.5); cursor: pointer; overflow: hidden; transform-origin: 0% 50%; }
.dl-page header, .dl-page footer { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.dl-page footer { margin-top: auto; padding-top: var(--s3); border-top: 1px solid rgba(13,13,13,.15); }
.dl-page h2 { font: 900 clamp(30px, 2.8vw, 48px)/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.dl-prompt { margin: 0; padding: var(--s5); background: var(--ink); color: var(--paper); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.7; white-space: pre-wrap; box-shadow: 6px 6px 0 var(--red); }
.dl-prompt b { color: var(--acid); font-weight: 600; }
.dl-pnote { font-size: 10px; opacity: .65; letter-spacing: .06em; text-transform: uppercase; }
.dl-vars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.dl-vars li { display: grid; gap: 2px; padding: var(--s3); border: 2px solid var(--ink); }
.dl-vars li:nth-child(1) { background: var(--red); } .dl-vars li:nth-child(2) { background: var(--cobalt); color: var(--paper); border-color: var(--cobalt); } .dl-vars li:nth-child(3) { background: var(--ochre); }
.dl-vars b { font-size: 10px; letter-spacing: .1em; font-weight: 600; }
.dl-vars span { font: 900 24px/.9 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.dl-vars small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.dl-line { font-weight: 600; font-size: 18px; line-height: 1.35; padding-left: var(--s3); border-left: 4px solid var(--red); }
.sk { display: block; height: 11px; border-radius: 2px; background: rgba(13,13,13,.1); }
.sk:nth-of-type(3n) { width: 64%; } .sk:nth-of-type(3n+2) { width: 86%; }
.dl-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dl-tabs .chipbtn { height: 38px; padding: 0 var(--s4); }
.dl-tabs .chipbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dl-tabs .chipbtn:hover { background: var(--paper); color: var(--ink); }
.dl-rn { margin-top: var(--s4); }
.dl-files { list-style: none; margin: 0; padding: 0; display: grid; }
.dl-files li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1.5px solid rgba(13,13,13,.18); font-weight: 700; font-size: 18px; }
.dl-fmt { opacity: .7; }
.pd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .dl { grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-top: calc(var(--hd) + var(--s5)); }
  .dl-look { order: 0; }
  .dl-info h1.poster { font-size: 14vw; margin-top: var(--s3); }
  .dl-pages { width: calc(100% - 28px); }
  .dl-page { padding: var(--s5) var(--s4) var(--s4); }
  .dl-vars span { font-size: 19px; }
  .pd-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Film: any film brings its own palette and still */
.fm-open.fp .fm-frame { background: radial-gradient(ellipse 60% 70% at 70% 40%, var(--fp-glow), var(--fp-bg) 75%); }
.poster-card.fp { background: radial-gradient(ellipse 70% 45% at 55% 28%, var(--fp-glow), transparent 70%), linear-gradient(var(--fp-bg), #070707); }
.player43.fp .p-screen { background: radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in srgb, var(--fp-bg) 85%, #ffffff), #050505 75%); }
.title-still.fp .ts-card { background: radial-gradient(ellipse 60% 50% at 30% 30%, var(--fp-glow), transparent 70%), linear-gradient(120deg, var(--fp-bg), #070707); }
.q-poster.fp { background: var(--fp-bg); box-shadow: inset 0 0 0 10px rgba(0,0,0,.35), var(--shadow-ink); }
.q-poster b::after { content: attr(data-glyph); color: var(--fp-accent, var(--red)); }
.fm-making { margin-top: var(--s6); padding-top: var(--s4); border-top: 1.5px solid #333; display: grid; gap: var(--s3); }

/* World: the skyline over the title; each district its own crop and its own hour */
.wd-head { position: relative; overflow: hidden; padding-bottom: 30vh; }
.wd-head > *:not(.wd-sky) { position: relative; z-index: 1; }
.wd-sky { position: absolute; left: -4vw; right: -4vw; bottom: -2vh; height: 40vh; background: none 50% 0 / max(108vw, 980px) auto no-repeat; pointer-events: none; z-index: 0; }
.layer.mid, .layer.front, .has-front .layer.front { display: none !important; }
.layer.far { top: 2vh; height: 70vh; width: 170vw; background: none 0 0 / 100% auto no-repeat !important; opacity: .5; }
.street { display: none; }
.districts { inset: 0; z-index: 2; }
.district { overflow: hidden; isolation: isolate; }
.district::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.d-plate { position: absolute; left: -12%; right: -12%; bottom: 0; height: 74%; background-repeat: no-repeat; z-index: -1; pointer-events: none; }
.d-plaza .d-plate { background-image: none; background-size: auto 150%; background-position: 50% 100%; }
.d-arcade::before { background: linear-gradient(rgba(226,54,27,.0), rgba(226,54,27,.28)); }
.d-arcade .d-plate { background-image: none; background-size: auto 260%; background-position: 3% 96%; filter: sepia(.3) saturate(1.35) brightness(1.02); }
.d-media::before { background: linear-gradient(#26318a, rgba(38,49,138,.55) 70%, rgba(38,49,138,.2)); }
.d-media .d-plate { background-image: none; background-size: auto 190%; background-position: 57% 72%; filter: saturate(1.05) brightness(.85) hue-rotate(-8deg); }
.d-tech::before { background: linear-gradient(#0d0d16, #1b1530 70%, #2a1d10); }
.d-tech .d-plate { background-image: none; background-size: auto 200%; background-position: 0% 74%; filter: brightness(.62) saturate(.9) contrast(1.1); }
.d-gallery::before { background: linear-gradient(#141018, #3b2614); }
.d-gallery .d-plate { background-image: none; background-size: auto 190%; background-position: 100% 72%; filter: brightness(.8) saturate(1.1); }
.d-media, .d-tech, .d-gallery { color: var(--paper); }
.d-media .body, .d-tech .body, .d-gallery .body { background: rgba(13,13,13,.55); color: var(--paper); }
.d-media h2, .d-tech h2, .d-gallery h2 { text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.sparks { position: absolute; left: 22%; bottom: 30%; width: 120px; height: 120px; z-index: 1; pointer-events: none; }
.sparks i { position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px 2px rgba(227,242,60,.8); animation: spark 1.4s ease-out infinite; }
.sparks i:nth-child(2) { animation-delay: .3s; left: 30%; } .sparks i:nth-child(3) { animation-delay: .6s; left: 70%; } .sparks i:nth-child(4) { animation-delay: .9s; left: 40%; } .sparks i:nth-child(5) { animation-delay: 1.1s; left: 62%; }
@keyframes spark { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--sx, 30px), -110px); opacity: 0; } }
.sparks i:nth-child(odd) { --sx: -34px; }
.wd-neur { z-index: 3; }
@media (max-width: 820px) {
  .wd-head { padding-bottom: 22svh; }
  .wd-sky { height: 26svh; background-size: 900px auto; background-position: 46% 0; }
  .layer.far { width: 300vw; height: 50svh; top: 8svh; }
  .d-plate { height: 58%; left: -30%; right: -30%; }
  .district > .mono, .district h2 { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  .sparks { display: none; }
  .district { min-height: 90vh; border-bottom: 0; }
}

.ft-ask .script { margin-top: .3em; }
/* World, crops by hand: each district shows a different building from the plates */
.d-plate { --ph: 66vh; left: 0; right: 0; height: var(--ph); }
.d-plaza .d-plate { background-size: auto 140%; background-position: calc(58vw - 1.05 * var(--ph)) 100%; }
.d-arcade .d-plate { background-size: auto 200%; background-position: calc(64vw - .39 * var(--ph)) 30%; }
.d-media .d-plate { background-size: auto 170%; background-position: calc(60vw - 1.479 * var(--ph)) 64%; }
.d-tech .d-plate { background-size: auto 170%; background-position: calc(64vw - .3825 * var(--ph)) 64%; }
.d-gallery .d-plate { background-size: auto 170%; background-position: calc(62vw - 2.346 * var(--ph)) 64%; }
.d-tech .sparks { left: 56vw; bottom: 22vh; }
.wd-head { min-height: 100svh; padding-bottom: 0; }
.wd-sky { height: 62%; bottom: 0; background-position: 50% 0; background-size: max(104vw, 900px) auto; }
@media (max-width: 820px) {
  .d-plate { --ph: 44svh; left: 0; right: 0; height: var(--ph); }
  .d-tech .sparks { left: 52vw; bottom: 14svh; }
  .wd-head { min-height: 92svh; }
  .wd-sky { height: 46%; background-size: 860px auto; background-position: 44% 0; }
}
/* one building per district: the plate is a window onto a single block */
.d-media .d-plate, .d-tech .d-plate, .d-gallery .d-plate { left: auto; right: 3vw; width: 50vw; background-size: auto 220%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.d-media .d-plate { background-position: calc(25vw - 1.914 * var(--ph)) 72%; }
.d-tech .d-plate { background-position: calc(25vw - .495 * var(--ph)) 72%; }
.d-gallery .d-plate { background-position: calc(25vw - 3.036 * var(--ph)) 72%; }
.d-tech .sparks { left: 66vw; bottom: 26vh; }
@media (max-width: 820px) {
  .d-media .d-plate, .d-tech .d-plate, .d-gallery .d-plate { right: 0; width: 100vw; }
  .d-media .d-plate { background-position: calc(50vw - 1.914 * var(--ph)) 72%; }
  .d-tech .d-plate { background-position: calc(50vw - .495 * var(--ph)) 72%; }
  .d-gallery .d-plate { background-position: calc(50vw - 3.036 * var(--ph)) 72%; }
  .d-tech .sparks { left: 44vw; bottom: 16svh; }
}
@media (max-width: 820px) { .wd-eeky { left: 4vw; } .gal-row { padding-left: var(--pad); padding-right: var(--pad); } }
.st-bench { padding-top: var(--s9); }
.st-lab-head { position: relative; z-index: 2; }
.bobj .spec-obj.lc-plate::after { display: none; }
.bobj .spec-obj.lc-plate .obj { transform: scale(1.25); transform-origin: 30% 100%; object-position: 8% 92%; }
.f-paper .chipbtn[aria-pressed="true"], .jn-list .chipbtn[aria-pressed="true"], .rs-filters .chipbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.jrows.timeline::before { z-index: 0; pointer-events: none; left: calc(var(--pad) + 6px); }

/* Real logo (GQ, 2026-11-01): the lockup is the logo file, never redrawn in other fonts */
.lockup .lg { width: min(64vw, 720px); height: auto; }
.ft-lock .lg { width: min(52vw, 760px); height: auto; filter: invert(1); }
body:not([data-page="index"]) .ft-lock .lg { width: 100%; }

/* ===================================================================================================
   v5 (GQ's positioning, 2026-11-01): five homepage sections, Work / Resources / About / Community.
   =================================================================================================== */
:root { --barh: 0px; }
@media (max-width: 820px) { :root { --barh: 0px; } }
.bar { display: none; }

/* header: logo left, four links right; Community leaves the site */
.hd-nav { justify-content: flex-end; gap: var(--s6); }
.hd-nav .ext span { display: inline-block; transition: transform .4s var(--ease-house); }
.hd-nav .ext:hover span { transform: translate(2px, -2px); }
.companion { bottom: var(--s4); }

/* ---------- HOME 1: the invitation ---------- */
.hero-top { top: calc(var(--hd) + var(--s5)); }
.hero h1 .hl-desk .ln { font-size: 9vw; }
.hero-sub { margin-top: var(--s5); max-width: 52ch; font: 600 clamp(17px, 1.45vw, 22px)/1.4 var(--font-display); }
.stk.word { --wsz: 28px; }
.stk.word.p1 { background: var(--cobalt); color: var(--paper); }
.stk.word.p2 { background: var(--red); color: var(--ink); }
.stk.word.p3 { background: var(--ochre); color: var(--ink); }
.stk.word.p4 { background: var(--ink); color: var(--paper); box-shadow: 4px 5px 0 var(--ochre); }
.stk.word.p5 { background: var(--acid); color: var(--ink); }
.hero-foot { height: 72px; bottom: 0; }
.hero-ground { bottom: 72px; }
.hero-foot .btn.acid { height: 50px; padding: 0 var(--s6); font-size: 13px; }
.hf-scroll { opacity: .7; }
.hint { right: var(--pad); left: auto; }

/* ---------- HOME 2: the work ---------- */
.work-sel { position: relative; }
.showing .sh-copy { bottom: var(--s8); padding-right: calc(var(--pad) + 96px); }
.sh-copy .sh-aside { font: 600 16px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; font-style: normal; opacity: .8; }
.more { padding: var(--s8) 0 var(--s9); }
.more .kick { margin-bottom: var(--s6); }
.more-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--s6); padding: 0 var(--pad); align-items: start; }
.mw { display: grid; gap: var(--s4); color: var(--paper); transition: transform .6s var(--ease-house); }
.mw:nth-child(2) { margin-top: var(--s8); } .mw:nth-child(3) { margin-top: var(--s5); }
.mw:hover, .mw:focus-visible { transform: translateY(-10px) rotate(-.6deg); }
.mw-vis { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: #161616; box-shadow: var(--shadow-ink); }
.mw-vis .rr-card { position: absolute; inset: 0; aspect-ratio: auto; }
.mw-copy { display: grid; gap: var(--s2); justify-items: start; }
.mw-copy .mono { opacity: .75; }
.mw-t { font: 900 clamp(38px, 3.6vw, 64px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.mw-s { font-size: 17px; font-weight: 600; max-width: 30ch; }
.reels4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8%; padding: 9% 8%; background: var(--red); }
.reels4 i { display: grid; place-items: end start; padding: 10%; font: 900 clamp(18px, 1.6vw, 28px)/1 var(--font-display); font-stretch: 62%; font-style: normal; color: var(--paper); background: var(--ink); border-radius: 6px; box-shadow: 0 14px 18px -8px rgba(0,0,0,.6); transform: rotate(var(--r, 0)); }
.reels4 i:nth-child(1) { --r: -4deg; } .reels4 i:nth-child(2) { --r: 3deg; background: var(--cobalt); } .reels4 i:nth-child(3) { --r: -2deg; background: var(--ochre); color: var(--ink); } .reels4 i:nth-child(4) { --r: 5deg; }
.mw:hover .reels4 i { transform: rotate(0) translateY(-6px); transition: transform .5s var(--ease-house); }
.cast4 { background: var(--ochre); display: flex; align-items: flex-end; justify-content: center; }
.cast4 img { height: 92%; width: auto; margin: 0 -7%; filter: drop-shadow(0 14px 14px rgba(13,13,13,.35)); transition: transform .5s var(--ease-house); }
.cast4 img:nth-child(1) { height: 70%; } .cast4 img:nth-child(3) { height: 72%; } .cast4 img:nth-child(4) { height: 46%; }
.mw:hover .cast4 img:nth-child(odd) { transform: translateY(-8px); }
.more-all { margin-top: var(--s8); }
.more .btn.line { color: var(--paper); }

/* ---------- HOME 3: why ---------- */
.question .q { max-width: 17ch; }
.question .q-foot { align-items: end; margin-top: var(--s8); gap: var(--s6); }
.question .q-foot .q-body { max-width: 44ch; font-size: clamp(19px, 1.6vw, 25px); }

/* ---------- HOME 4: the featured resource ---------- */
.feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s8); align-items: center; padding: var(--s10) var(--pad); min-height: 92vh; overflow: hidden; }
.feature .ft-copy .kick { margin-bottom: var(--s5); }
.feature .ft-copy h2 { font-size: clamp(56px, 6.4vw, 118px); max-width: 12ch; margin-bottom: var(--s5); }
.feature .ft-copy .lede { margin-bottom: var(--s6); max-width: 34ch; }
.feature .ft-obj { position: relative; display: grid; place-items: center; min-height: 54vh; }
.rs-typo { position: relative; display: grid; gap: var(--s3); justify-items: center; }
.rs-typo b { display: block; padding: .32em .6em .26em; font: 900 clamp(34px, 4vw, 72px)/1 var(--font-display); font-stretch: 62%; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 7px 0 var(--ink); transform: rotate(var(--r, 0)); }
.rs-typo b.t0 { --r: -4deg; background: var(--red); } .rs-typo b.t1 { --r: 3deg; background: var(--acid); } .rs-typo b.t2 { --r: -1.5deg; background: var(--paper); } .rs-typo b.t3 { --r: 2deg; background: var(--ochre); }
.rs-typo.big b { font-size: clamp(44px, 5.4vw, 96px); }
.rs-zines { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); width: 100%; }
.rs-zines .zcover { width: 100%; --dy: 0; }
.rs-zines .zcover:nth-child(odd) { --r: -3deg; } .rs-zines .zcover:nth-child(even) { --r: 3deg; --dy: 16px; }
.rs-zines .zine-type { font-size: clamp(16px, 1.8vw, 30px); }

/* ---------- HOME 5: community ---------- */
.comm { min-height: 92vh; display: grid; align-content: center; }
.comm h2 { max-width: 14ch; }
.comm .sub2 { font-size: clamp(44px, 5vw, 92px); line-height: 1; font-style: normal; margin: var(--s4) 0 var(--s7); color: var(--cobalt); }
.comm-go { position: relative; z-index: 3; }
.comm-go .btn { height: 56px; padding: 0 var(--s6); font-size: 13px; }
.comm-eeky { position: absolute; right: 6vw; bottom: 0; height: min(52vh, 520px); z-index: 2; pointer-events: none; filter: drop-shadow(0 24px 24px rgba(13,13,13,.3)); transform: rotate(-6deg); transform-origin: 50% 100%; }

/* ---------- WORK ---------- */
.wk-head { min-height: 86svh; display: grid; align-content: end; }
.wk-head h1.poster { line-height: .8; }
.wk-head .lede { margin-top: 0; }
.wk-jump { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.wk-jump a { padding: var(--s3) var(--s4); border: 2px solid var(--ink); border-radius: 999px; transition: background-color .3s, color .3s; }
.wk-jump a:hover, .wk-jump a:focus-visible { background: var(--ink); color: var(--paper); }
.wk-sh { display: grid; gap: var(--s4); margin-bottom: var(--s7); justify-items: start; }
.wk-sh h2 { font-size: clamp(56px, 7vw, 128px); }
.wk-sh .lede { max-width: 40ch; }
.wk-films { padding: var(--s9) 0 var(--s9); }
.wk-films .rr-card.wall-mini { position: relative; inset: auto; }
.wk-reels { padding: var(--s9) 0 var(--s10); overflow: hidden; }
.reel-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); padding: 0 var(--pad); }
.rt { position: relative; margin: 0; aspect-ratio: 9/16; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 14px; box-shadow: 0 30px 40px -20px rgba(13,13,13,.6); overflow: hidden; }
.rt2 { background: var(--cobalt); } .rt3 { background: var(--paper); color: var(--ink); } .rt4 { background: var(--ochre); color: var(--ink); }
.rt::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px); pointer-events: none; }
.rt-n { position: absolute; left: 10%; top: 6%; font: 900 clamp(60px, 7vw, 120px)/.8 var(--font-display); font-stretch: 62%; }
.rt .pc-play { width: 72px; height: 72px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.rt .pc-play svg { width: 30px; }
.rt figcaption { position: absolute; left: 10%; bottom: 6%; opacity: .8; }
.wk-cast { padding: var(--s9) 0 0; overflow: hidden; }
.cast-row { list-style: none; margin: 0; padding: 0 var(--pad); display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1fr; align-items: end; gap: var(--s5); }
.cm { position: relative; display: grid; justify-items: center; align-items: end; height: min(64vh, 620px); }
.cm img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 26px 26px rgba(13,13,13,.35)); }
.cm-eeky img { height: 58%; } .cm-rivet img { height: 78%; } .cm-vyro img { height: 88%; }
.cm b { position: absolute; left: 0; bottom: var(--s5); font: 900 clamp(34px, 3.6vw, 64px)/.86 var(--font-display); font-stretch: 62%; text-transform: uppercase; background: var(--ink); color: var(--ochre); padding: .12em .3em .06em; transform: rotate(-3deg); z-index: 2; }
.wk-client { padding: var(--s9) 0 var(--s10); }
.client-frames { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: var(--s5); padding: 0 var(--pad); align-items: end; }
.cf { position: relative; display: grid; place-items: end start; padding: var(--s4); border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(13,13,13,.04) 14px 15px); }
.cf1 { aspect-ratio: 16/10; } .cf2 { aspect-ratio: 4/5; } .cf3 { aspect-ratio: 9/16; } .cf4 { aspect-ratio: 2/3; }

/* ---------- FILM ---------- */
.fm-side .strip { grid-template-columns: repeat(3, auto); }

/* ---------- RESOURCES ---------- */
.rs-head { min-height: 70svh; display: grid; align-content: end; }
.rs-shelf { padding: var(--s7) var(--pad) var(--s10); }
.rs-shelf .chipbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rs-shelf .chipbtn:hover { background: var(--ink); color: var(--paper); }
.chipbtn .mono { font-size: 10px; opacity: .7; margin-left: 4px; }
.rs-list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
.rcard a { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transition: transform .4s var(--ease-house), box-shadow .4s var(--ease-house); background: var(--paper); }
.rcard a:hover, .rcard a:focus-visible { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--ink); }
.rc-obj { display: grid; place-items: center; aspect-ratio: 16/10; padding: var(--s6); background: var(--cobalt); border-bottom: 3px solid var(--ink); overflow: hidden; }
.rcard.rc1 .rc-obj { background: var(--red); } .rcard.rc2 .rc-obj { background: var(--ochre); }
.rc-obj .rs-zines { width: 80%; }
.rc-obj .rs-typo b { font-size: clamp(26px, 2.6vw, 44px); }
.rc-copy { display: grid; gap: var(--s3); align-content: start; justify-items: start; padding: var(--s5) var(--s5) var(--s6); }
.rc-t { font: 900 clamp(36px, 3.4vw, 60px)/.88 var(--font-display); font-stretch: 62%; text-transform: uppercase; }
.rc-s { font-size: 17px; font-weight: 600; max-width: 40ch; }
.rcard[hidden] { display: none; }
.rs-empty { margin-top: var(--s6); }

/* ---------- RESOURCE ---------- */
.rs-item { min-height: 92svh; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 var(--s8); align-content: end; }
.rs-item > .kick, .rs-item > h1, .rs-item > .lede { grid-column: 1; }
.rs-item-t { font-size: clamp(48px, 5vw, 92px); max-width: 14ch; }
.rs-item > .rs-item-obj { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; }
.rs-body { max-width: 760px; padding: var(--s8) 0; display: grid; gap: var(--s5); }

/* ---------- ABOUT ---------- */
.ab-head { display: grid; align-content: end; }
.ab-lead { position: relative; z-index: 5; font: 800 clamp(36px, 4.6vw, 84px)/1.02 var(--font-display); letter-spacing: -.03em; max-width: 19ch; }
.ab-q .q { max-width: 17ch; }
.ab-story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); padding: var(--s10) var(--pad); }
.ab-p { font: 600 clamp(20px, 1.8vw, 28px)/1.4 var(--font-display); max-width: 36ch; }
.ab-p + .ab-p { margin-top: var(--s9); }
.ab-aim { padding: var(--s10) var(--pad); min-height: 80vh; display: grid; align-content: center; }
.ab-aim-t { font: 800 clamp(40px, 5.6vw, 104px)/1 var(--font-display); letter-spacing: -.03em; color: var(--ochre); max-width: 18ch; }
.ab-face-eeky { position: absolute; right: 8vw; bottom: 0; height: 28vh; z-index: 3; filter: drop-shadow(0 16px 16px rgba(13,13,13,.35)); }
.ab-face-line { display: grid; gap: var(--s3); }
.ab-face-line .lede { max-width: 26ch; }

/* ---------- CONTACT / 404 ---------- */
.ctc h1.poster { line-height: .8; }
.nf-t { max-width: 13ch; }

/* ---------- review drawer: GQ only, closed by default ---------- */
.rv-tab { position: fixed; left: 0; top: 50%; z-index: 170; height: 30px; padding: 0 var(--s4); border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 10px 10px; background: var(--acid); color: var(--ink); font-size: 10px; cursor: pointer; transform: rotate(-90deg) translateY(-100%); transform-origin: 0 0; translate: 0 50%; white-space: nowrap; }
.rv-on .rv-tab { left: min(460px, 92vw); }
.rv-tab[aria-expanded="true"] { background: var(--ink); color: var(--acid); }
.rv-panel { position: fixed; left: 0; top: 0; bottom: 0; z-index: 169; width: min(460px, 92vw); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); border-right: 3px solid var(--ink); box-shadow: 12px 0 40px rgba(13,13,13,.25); padding: var(--s5) var(--s5) 80px; font-family: var(--font-display); }
.rv-panel[hidden] { display: none; }
.rv-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 2px solid var(--ink); }
.rv-x { height: 34px; padding: 0 var(--s4); border: 2px solid var(--ink); border-radius: 999px; background: transparent; cursor: pointer; font-size: 10px; }
.rv-key { font-size: 13px; margin: var(--s4) 0; opacity: .75; }
.rv-list { margin: 0; padding: 0 0 0 1.3em; display: grid; gap: var(--s4); }
.rv-list li { font-size: 14px; line-height: 1.45; }
.rv-list b { display: block; font: 600 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.rv-on [data-rv] { outline: 3px dashed var(--acid) !important; outline-offset: -6px; position: relative; }
.rv-on [data-rv]::after { content: "[" attr(data-rv) "]"; position: absolute; right: 10px; top: 10px; z-index: 50; background: var(--acid); color: var(--ink); font: 600 12px/1 var(--font-mono); padding: 6px 8px; border: 2px solid var(--ink); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .stk { opacity: 1 !important; }
}

/* ---------- PHONE (390) ---------- */
@media (max-width: 820px) {
  .hero { min-height: 680px; }
  .hero-sub { font-size: 16px; margin-top: var(--s4); }
  .hero-foot { height: 76px; flex-direction: row; align-items: center; justify-content: space-between; }
  .hero-ground { bottom: 76px; }
  .hero-foot .btn.acid { height: 48px; padding: 0 var(--s5); }
  .hint { display: block; top: var(--pit-top, 60vh); left: auto; right: var(--pad); font-size: 10px; }
  .showing .sh-copy { bottom: var(--s7); gap: var(--s5); }
  .more-row { grid-template-columns: 1fr; gap: var(--s8); }
  .mw:nth-child(n) { margin-top: 0; }
  .mw-t { font-size: 13vw; }
  .question .q-foot { flex-direction: column; align-items: flex-start; }
  .feature { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s9) var(--pad); min-height: 0; }
  .feature .ft-obj { min-height: 0; padding: var(--s5) 0; }
  .feature .ft-copy h2 { font-size: 13.4vw; }
  .rs-typo.big b { font-size: 11vw; }
  .comm { min-height: 0; padding-bottom: calc(var(--s10) + 26vh); }
  .comm .sub2 { font-size: 11vw; }
  .comm-go { flex-direction: column; align-items: flex-start; }
  .comm-eeky { height: 26vh; right: 4vw; }
  .wk-head { min-height: 78svh; }
  .wk-sh h2 { font-size: 15vw; }
  .reel-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .cast-row { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s4); }
  .cm { height: 46vh; }
  .cm b { font-size: 9vw; }
  .client-frames { grid-template-columns: 1fr 1fr; }
  .cf1 { grid-column: 1 / -1; }
  .rs-list { grid-template-columns: 1fr; }
  .rs-item { grid-template-columns: 1fr; }
  .rs-item > .rs-item-obj { grid-column: 1; grid-row: auto; padding: var(--s7) 0 0; }
  .rs-item-t { font-size: 13vw; }
  .ab-lead { font-size: 9.4vw; max-width: none; }
  .ab-story { grid-template-columns: 1fr; gap: var(--s7); padding: var(--s9) var(--pad); }
  .ab-p + .ab-p { margin-top: 0; }
  .ab-aim-t { font-size: 10.6vw; }
  .ab-face-eeky { height: 16svh; right: 4vw; }
  .rv-tab { font-size: 9px; height: 26px; padding: 0 var(--s3); }
  .showing .sh-copy { padding-right: var(--pad); }
}
/* grid heads: let fitted lines measure the column, not their own nowrap width */
.wk-head > *, .rs-head > *, .ab-head > *, .rs-item > *, .feature > *, .comm > *, .ctc > * { min-width: 0; }
.ab-face-line { width: min(36ch, 34vw); }
.ab-face-line .lede { font-size: clamp(20px, 1.7vw, 28px); max-width: none; }
@media (max-width: 820px) { .ab-face-line { width: auto; } }