/* Brand typefaces, self-hosted (SIL Open Font License; licences in /assets/fonts/). Latin + Romanian. */
@font-face{ font-family:"Work Sans"; src:url("/assets/fonts/work-sans.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Libre Baskerville"; src:url("/assets/fonts/libre-baskerville-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
/* ==========================================================================
   SIDE A · pre-opening · "The Cue"
   The A stands still. Words turn around its hole. A red cue reads them.
   Colour: lacquer #0D0C0A and bone #E9E2D6 (identity §11); oxide #B7422F as the single accent.
   Type: Work Sans (the label), Libre Baskerville italic (the liner notes), IBM Plex Mono (the catalogue).
   ========================================================================== */
:root{
  color-scheme:dark;
  --lacquer:#0D0C0A;
  --bone:#E9E2D6;
  --bone-2:#B9B3A8;        /* secondary on lacquer */
  --bone-3:#77726A;        /* tertiary on lacquer */
  --oxide:#B7422F;
  --ink-2:#4A443D;         /* secondary on bone */
  --ink-3:#7C756B;         /* tertiary on bone */
  --line-bone:#0D0C0A33;

  --f-label:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --f-liner:"Libre Baskerville",Baskerville,"Iowan Old Style",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gutter:clamp(18px,4.2vw,64px);
  --ease:cubic-bezier(.16,.84,.3,1);
  --arm:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--lacquer); }
body{ margin:0; background:var(--lacquer); color:var(--bone); font:400 16px/1.5 var(--f-label); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img,svg{ max-width:100%; }
[hidden]{ display:none!important; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--oxide); color:var(--bone); }
:focus-visible{ outline:2px solid var(--oxide); outline-offset:4px; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:var(--gutter); top:-80px; z-index:60; background:var(--bone); color:var(--lacquer); padding:12px 16px; font:500 13px/1 var(--f-mono); text-decoration:none; }
.skip:focus{ top:12px; }
.mono{ font-family:var(--f-mono); font-weight:400; font-size:12px; line-height:1.45; letter-spacing:.12em; text-transform:uppercase; }

/* Grain: one static tile, printed not animated */
.grain{ position:fixed; inset:0; z-index:40; pointer-events:none; background-image:var(--grain,none); opacity:.055; mix-blend-mode:overlay; }

/* ==========================================================================
   HERO: the horizontal lockup, split across the screen.
   Wordmark on the left (identity §08 "wordmark, where the A already appears"),
   the symbol on the right, standing in front of the turning words.
   ========================================================================== */
.hero{
  /* Phone geometry: the A lives in a cropped window; the motto always sits below it, on black */
  --S:min(67vw, 300px);                      /* spindle size: the whole A is 1.15 × this tall */
  --hx:56vw;                                 /* hole, horizontal (centres the A's asymmetric legs) */
  --atop:80px;                               /* apex of the A, just under the masthead */
  --hy:calc(var(--atop) + var(--S) * .474);  /* hole, vertical */
  --cut:calc(var(--hy) + var(--S) * .676 + 2px);    /* window ends right at the feet */
  position:relative; isolation:isolate; overflow:clip;
  min-height:100svh; padding-inline:var(--gutter); padding-block:0;
  display:grid; grid-template-rows:auto 1fr auto;
}

/* The spindle box: a square whose centre is the hole of the A */
.scene{ position:absolute; left:0; right:0; top:0; height:var(--cut); overflow:hidden; z-index:0; pointer-events:none; }
.spindle{
  position:absolute; pointer-events:none;
  width:var(--S); height:var(--S);
  left:calc(var(--hx) - var(--S) / 2);
  top:calc(var(--hy) - var(--S) / 2);
}
.ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; will-change:transform; }
.ring text{ font-family:var(--f-mono); }
.ring-a text{ font-family:var(--f-label); font-weight:600; fill:#E9E2D6; fill-opacity:.58; }
.ring-a tspan.on{ fill-opacity:1; }
.ring-a tspan.sep{ fill-opacity:.35; }
.ring-b text{ fill:#E9E2D6; fill-opacity:.24; }
.label-disc{ position:absolute; inset:0; width:100%; height:100%; }
.symbol{
  position:absolute; z-index:2;
  height:115%; width:auto; aspect-ratio:334.2/352;
  left:calc(50% - 115% * 193.4 / 352); top:calc(50% - 115% * 145 / 352);
  max-width:none; color:var(--bone); display:block; overflow:visible;
}
.cue{ position:absolute; inset:0; width:100%; height:100%; z-index:3; overflow:visible; }

/* The reading: what the cue is on */
/* The reading: what the cue is on. On phones it's a line under the window; on desktop it hangs by the cue. */
.reading{
  position:absolute; z-index:4; margin:0;
  left:var(--gutter); right:var(--gutter); top:calc(var(--cut) + 12px);
  display:flex; align-items:baseline; gap:12px; white-space:nowrap;
}
.reading .k{ color:var(--bone-3); }
.reading .k b{ font-weight:500; color:var(--oxide); }
.reading .w{ font:700 15px/1.2 var(--f-label); letter-spacing:.06em; text-transform:uppercase; color:var(--bone); }
.reading .w.is-redacted{ font:400 italic 15px/1.2 var(--f-liner); letter-spacing:0; text-transform:none; color:var(--bone-2); }
.reading .w.swap{ animation:cue-in .5s var(--ease) both; }
@keyframes cue-in{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* Mission, opened over the landing page (the music keeps playing) */
.sheet{ position:fixed; inset:0; z-index:80; background:var(--lacquer); visibility:hidden; transform:translateY(100%); transition:transform .55s cubic-bezier(.2,.7,.1,1), visibility 0s linear .55s; }
.sheet.is-open{ visibility:visible; transform:none; transition:transform .55s cubic-bezier(.2,.7,.1,1), visibility 0s; }
.sheet iframe{ display:block; width:100%; height:100%; border:0; background:var(--lacquer); }
html.sheet-open, html.sheet-open body{ overflow:hidden; }
.np-pill{ position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:2; display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0 8px 0 16px; background:var(--bone); color:var(--lacquer); border:0; cursor:pointer; white-space:nowrap; font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; box-shadow:0 10px 30px #0D0C0A80; }
.np-pill b{ font-weight:500; color:var(--oxide); }
.np-pill .x{ padding:9px 12px; background:var(--lacquer); color:var(--bone); }
.np-pill:hover .x{ background:var(--oxide); }
.np-pill .bars{ display:inline-flex; gap:2px; align-items:flex-end; height:11px; }
.np-pill .bars i{ width:2px; height:3px; background:var(--oxide); animation:level 1.1s var(--arm) infinite alternate; }
.np-pill .bars i:nth-child(2){ animation-delay:-.4s; }
.np-pill .bars i:nth-child(3){ animation-delay:-.8s; }
@media (prefers-reduced-motion:reduce){ .sheet, .sheet.is-open{ transition:none; } .np-pill .bars i{ animation:none; height:8px; } }

/* Masthead row */
.mast{
  position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-block:calc(18px + env(safe-area-inset-top,0px)) 12px;
}
.wordmark{ display:inline-flex; align-items:center; min-height:44px; color:var(--bone); }
.wordmark svg{ display:block; height:17px; width:auto; }
.mast .code{ color:var(--bone-3); }
.mast-l{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); }
.navlink{ position:relative; display:inline-flex; align-items:center; min-height:44px; color:var(--bone); text-decoration:none; border-left:1px solid #E9E2D633; padding-left:clamp(16px,2vw,28px); }
.navlink::after{ content:""; position:absolute; left:clamp(16px,2vw,28px); right:0; bottom:9px; height:2px; background:var(--oxide); transform:rotate(5deg) scaleX(0); transform-origin:left center; transition:transform .45s var(--arm); }
.navlink:hover::after, .navlink:focus-visible::after{ transform:rotate(5deg) scaleX(1); }
/* Language: EN / RO */
.lang{ display:flex; align-items:center; gap:6px; color:var(--bone-3); }
.lang a{ display:inline-flex; align-items:center; min-height:44px; min-width:28px; justify-content:center; color:var(--bone-3); text-decoration:none; }
.lang a:hover{ color:var(--bone); }
.lang a[aria-current]{ color:var(--bone); }
@media (min-width:1000px){
  /* desktop: MISSION sits on the wordmark's baseline, the divider matches the wordmark's height */
  .mast-l{ align-items:flex-end; }
  .mast-l .wordmark{ min-height:0; padding-block:7px; }
  .mast-l .navlink{ margin-bottom:5px; }
  .navlink{ position:relative; min-height:0; line-height:1; font-size:13px; border-left:0; padding-left:clamp(20px,2vw,30px); }
  .navlink::before{ content:""; position:absolute; left:0; bottom:2px; height:clamp(22px,1.9vw,30px); border-left:1px solid #E9E2D633; }
  .navlink::after{ left:clamp(20px,2vw,30px); bottom:-9px; }
}

/* Statement */
.statement{
  position:relative; align-self:start;             /* no z-index: lets the motto blend with the A */
  padding-top:calc(var(--cut) - 74px + 40px);   /* 74px = masthead row already above; 40px holds the Now playing line */
  padding-bottom:18px; display:grid; justify-items:start;
}
.motto{
  margin:0; font:800 clamp(56px,15.8vw,236px)/.84 var(--f-label); text-transform:uppercase; letter-spacing:-.04em;
  color:var(--bone); mix-blend-mode:difference;      /* turns lacquer where it crosses the A */
}
.motto span{ display:block; white-space:nowrap; }
.motto .l1{ font-size:.54em; letter-spacing:-.025em; line-height:.98; padding-bottom:.06em; }
.motto .l3{ padding-left:.42em; }
.motto .l3 .stop{ display:inline; color:transparent; }   /* drawn by the ghost, unblended */
.motto-wrap{ position:relative; }
.motto.ghost{ position:absolute; inset:0; mix-blend-mode:normal; color:transparent; pointer-events:none; }
.motto.ghost .l3 .stop{ color:var(--oxide); }
.lede{ margin:22px 0 0; max-width:24ch; font:400 italic clamp(18px,1.5vw,22px)/1.45 var(--f-liner); color:var(--bone); text-wrap:balance; }
.act{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; width:100%; }
.go{
  display:inline-flex; align-items:center; justify-content:space-between; gap:28px;
  min-height:58px; padding:0 22px; min-width:min(100%, 300px);
  background:var(--bone); color:var(--lacquer); text-decoration:none;
  font:500 13.5px/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent; transition:background-color .3s var(--ease), color .3s;
}
.go .arr{ font-size:18px; letter-spacing:0; transition:transform .5s var(--arm); }
.go:hover{ background:var(--oxide); color:var(--bone); }
.go:hover .arr{ transform:translateY(4px); }
.go:active{ transform:translateY(1px); }
.status{ margin:0; color:var(--bone-2); display:flex; flex-wrap:wrap; gap:4px 18px; }
.status .br{ flex-basis:100%; height:0; }
.status .more{ color:var(--bone); text-decoration:none; border-bottom:1px solid var(--oxide); padding-block:2px; white-space:nowrap; }
.status .more span{ display:inline-block; transition:transform .4s var(--arm); }
.status .more:hover span{ transform:translateX(4px); }
.status .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--oxide); margin-right:8px; vertical-align:1px; }

/* Utility row at the foot of the hero */
.foot{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 20px; padding-block:6px 18px; color:var(--bone-3); }
/* Listen: the four SIDE A series, as channel buttons */
.listen{ order:-1; display:grid; grid-template-columns:auto auto; align-items:center; gap:8px 14px; justify-items:start; }
.code-foot{ mix-blend-mode:difference; }
.listen-k{ color:var(--bone-3); }
.series{ display:flex; gap:6px; }
.series button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 14px;
  background:var(--lacquer); color:var(--bone-2); border:1px solid #E9E2D640; border-radius:0; cursor:pointer;
  font:400 11.5px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  -webkit-tap-highlight-color:transparent; transition:background-color .25s var(--ease), color .25s, border-color .25s;
}
.series button:hover{ color:var(--bone); border-color:var(--bone); }
.series button:active{ transform:translateY(1px); }
.series button[aria-pressed="true"]{ background:var(--bone); color:var(--lacquer); border-color:var(--bone); }
.series .bars{ display:none; gap:2px; align-items:flex-end; height:11px; }
.series button[aria-pressed="true"] .bars{ display:inline-flex; }
.series .bars i{ width:2px; height:3px; background:currentColor; }
.series button[aria-pressed="true"] .bars i{ animation:level 1.1s var(--arm) infinite alternate; }
.series button[aria-pressed="true"] .bars i:nth-child(2){ animation-delay:-.4s; }
.series button[aria-pressed="true"] .bars i:nth-child(3){ animation-delay:-.75s; }
.series-note{ grid-column:2; margin:0; min-height:1.4em; max-width:52ch; font:400 italic 14px/1.45 var(--f-liner); color:var(--bone-2); text-align:left; mix-blend-mode:difference; }
@keyframes level{ from{ height:3px; } to{ height:12px; } }

/* ==========================================================================
   JOIN: the bone band. You leave the dark room and step up to the counter.
   ========================================================================== */
.join{
  position:relative; background:var(--bone); color:var(--lacquer);
  padding-inline:var(--gutter); padding-block:clamp(40px,8vw,120px) clamp(48px,8vw,120px);
  display:grid; grid-template-columns:minmax(0,1fr); gap:34px;
  scroll-margin-top:0;
}
.join-intro{ min-width:0; }
.join .kicker{ margin:0; color:var(--ink-2); }
.join .kicker b{ color:var(--oxide); font-weight:500; }
.join h2{ margin:18px 0 0; font:900 clamp(54px,9.5vw,152px)/.84 var(--f-label); text-transform:uppercase; letter-spacing:-.045em; }
.join h2 .stop{ color:var(--oxide); }
:lang(ro) .join h2{ font-size:clamp(38px,11.4vw,96px); }
@media (min-width:1000px){ :lang(ro) .join h2{ font-size:clamp(60px,5.6vw,96px); } }
:lang(ro) .go, :lang(ro) .submit{ letter-spacing:.1em; }
.lede,.act{ position:relative; }
.status{ mix-blend-mode:difference; }
.tilt{ display:block; width:clamp(90px,9vw,150px); height:3px; margin:24px 0 0; background:var(--oxide); transform:rotate(5deg); transform-origin:left center; }
.join .pitch{ margin:22px 0 0; max-width:30ch; font:400 italic clamp(17px,1.4vw,20px)/1.55 var(--f-liner); color:#2A2622; }

/* The form reads like a track listing: label → value */
.form-wrap{ min-width:0; }
form{ display:grid; }
.row{ border-top:1px solid var(--lacquer); padding:14px 0 12px; display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:10px; }
.row:last-of-type{ border-bottom:1px solid var(--lacquer); }
.row .n{ color:var(--ink-3); padding-top:2px; transition:color .2s; }
.row label{ display:flex; align-items:baseline; gap:10px; color:var(--ink-2); }
.row label .req{ color:var(--oxide); }
.row label .opt{ margin-left:auto; color:var(--ink-3); letter-spacing:.1em; }
.val{ position:relative; display:flex; align-items:center; gap:10px; margin-top:4px; }
.val .arr{ flex:none; font:400 22px/1 var(--f-label); color:var(--ink-3); transition:color .25s, transform .45s var(--arm); }
.val .pre{ flex:none; font:500 22px/1 var(--f-label); color:var(--ink-2); margin-right:-6px; }
.row input{
  flex:1; min-width:0; min-height:48px; padding:4px 26px 4px 0; border:0; border-radius:0; background:transparent;
  color:var(--lacquer); font:500 clamp(21px,1.8vw,26px)/1.2 var(--f-label); letter-spacing:-.01em;
  -webkit-appearance:none; appearance:none; caret-color:var(--oxide);
}
.row input::placeholder{ color:#0D0C0A45; font-weight:400; opacity:1; }
.row input:focus{ outline:none; }
.row:focus-within{ border-top-color:var(--oxide); box-shadow:inset 0 2px 0 var(--oxide); }
.row:focus-within .n, .row:focus-within .arr{ color:var(--oxide); }
.row:focus-within .arr{ transform:translateX(4px); }
.hint{ grid-column:2; margin:4px 0 0; font:400 italic 14.5px/1.45 var(--f-liner); color:var(--ink-2); }
.val::after{
  content:""; position:absolute; right:4px; top:50%; width:11px; height:6px; margin-top:-6px;
  border-left:1.5px solid var(--lacquer); border-bottom:1.5px solid var(--lacquer);
  transform:rotate(-45deg) scale(.3); opacity:0; transition:opacity .2s, transform .35s var(--ease);
}
.row.is-valid .val::after{ opacity:.7; transform:rotate(-45deg) scale(1); }
.err{ grid-column:2; display:flex; gap:8px; margin:6px 0 0; color:var(--oxide); font:500 13px/1.45 var(--f-mono); letter-spacing:.01em; }
.err::before{ content:"\21B3"; flex:none; }
.row.is-invalid{ border-top-style:dashed; border-top-color:var(--oxide); }
.row.is-invalid .n{ color:var(--oxide); }
.row.skip-anim .val{ animation:skip .34s var(--arm); }
@keyframes skip{ 30%{ transform:translateX(-5px);} 65%{ transform:translateX(3px);} }

/* Consent: the hole becomes a stamp */
.consents{ border:0; margin:0; padding:18px 0 0; display:grid; gap:6px; }
.check{ position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:10px; padding:8px 0; cursor:pointer; }
.check input{ position:absolute; left:0; top:6px; width:32px; height:32px; margin:0; opacity:0; cursor:pointer; }
.stamp{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--lacquer); display:grid; place-items:center; transition:background-color .2s, border-color .2s; }
.stamp svg{ width:12px; height:13px; color:var(--bone); transform:scale(.3) rotate(-18deg); opacity:0; transition:transform .4s var(--arm), opacity .2s; }
.check input:checked + .stamp{ background:var(--lacquer); }
.check input:checked + .stamp svg{ transform:none; opacity:1; }
.check input:focus-visible + .stamp{ outline:2px solid var(--oxide); outline-offset:3px; }
.check:hover .stamp{ border-color:var(--oxide); }
.check-t{ display:block; font:700 16px/1.3 var(--f-label); }
.check-t .opt{ margin-left:8px; color:var(--ink-3); }
.check-s{ display:block; margin-top:3px; font-size:14px; line-height:1.5; color:var(--ink-2); }
.check.is-invalid .stamp{ border-color:var(--oxide); border-style:dashed; }
.check .err{ grid-column:2; }

.form-err{ margin:16px 0 0; padding:12px 14px; border:1.5px dashed var(--oxide); font-size:15px; line-height:1.5; }
.form-err .err-code{ display:block; margin-top:6px; font:400 11px/1.4 var(--f-mono); letter-spacing:.04em; color:var(--ink-3); word-break:break-word; }
.form-err strong{ display:block; margin-bottom:3px; color:var(--oxide); font:500 12px/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; }
.submit{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; min-height:66px; margin-top:20px; padding:0 24px; border:0; border-radius:0; cursor:pointer;
  background:var(--oxide); color:var(--bone);
  font:500 14px/1 var(--f-mono); letter-spacing:.24em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent; transition:background-color .3s var(--ease), transform .1s;
}
.submit .arr{ font-size:21px; letter-spacing:0; transition:transform .5s var(--arm); }
.submit:hover{ background:var(--lacquer); }
.submit:hover .arr{ transform:translateX(8px); }
.submit:active{ transform:translateY(2px); }
.submit[aria-busy="true"]{ cursor:progress; background:var(--lacquer); }
.submit:focus-visible{ outline:2px solid var(--lacquer); outline-offset:4px; }
.submit .turning{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--bone); position:relative; animation:spin 1.8s linear infinite; }
.submit .turning::after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:var(--oxide); }
.submit .turning::before{ content:""; position:absolute; left:50%; top:1px; width:1.5px; height:5px; margin-left:-.75px; background:var(--bone); }
@keyframes spin{ to{ transform:rotate(360deg);} }
.legal{ margin:18px 0 0; max-width:62ch; font-size:12.5px; line-height:1.6; color:var(--ink-2); }
.legal p{ margin:0 0 6px; }
.legal a{ color:var(--lacquer); font-weight:600; text-underline-offset:3px; text-decoration-thickness:1px; }
.legal a:hover{ color:var(--oxide); }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* SUCCESS: your name enters the groove */
.done:focus{ outline:none; }
/* SUCCESS · "You are on the record": your name, pressed and dated, then the week and the room */
.done{ container-type:inline-size; scroll-margin-top:36px; }
.pressed{ margin:0; color:var(--ink-2); }
.pressed b{ color:var(--lacquer); font-weight:500; }
.trk-no{ margin:28px 0 0; color:var(--oxide); display:flex; align-items:center; gap:10px; }
.trk-no i{ width:8px; height:8px; border-radius:50%; background:var(--oxide); }
.done-name{
  margin:8px 0 0; text-transform:uppercase; letter-spacing:-.05em; line-height:.84; font-weight:900; font-family:var(--f-label);
  font-size:clamp(56px, min(24cqw, calc(128cqw / var(--len, 5))), 168px); overflow-wrap:anywhere;
}
.done-name .stop{ color:var(--oxide); }
.done-lead{ margin:20px 0 0; font-size:clamp(19px,1.6vw,23px); line-height:1.4; }
.done-lead strong{ font-weight:700; }
.done-lead em{ font:400 italic 1em/1.4 var(--f-liner); }
.done .next{ margin:10px 0 0; font-size:17px; line-height:1.55; color:#2A2622; max-width:38ch; }
.manifest{ margin:34px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; border-top:1.5px solid var(--lacquer); padding-top:18px; }
.mf p{ margin:0; font-size:16.5px; line-height:1.6; color:#2A2622; max-width:40ch; text-wrap:pretty; }
.mf .mf-k{ margin-bottom:8px; color:var(--oxide); font-size:12px; line-height:1.4; }
.play-in{
  display:inline; padding:0; margin:0; border:0; background:none; cursor:pointer; color:var(--lacquer);
  font:700 1em/inherit var(--f-label); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:#0D0C0A55;
  -webkit-tap-highlight-color:transparent;
}
.play-in:hover{ text-decoration-color:var(--oxide); }
.play-in[aria-pressed="true"]{ color:var(--oxide); text-decoration-color:var(--oxide); }
.play-in[aria-pressed="true"]::after{ content:" ♪"; }
@media (min-width:1000px){ .manifest{ grid-template-columns:1fr 1fr; gap:36px; } }
/* Follow: the next step into SIDE A, not an ad */
.follow{ margin:34px 0 0; }
.follow-k{ margin:0 0 10px; color:var(--oxide); }
.follow-cta{
  position:relative; display:inline-flex; align-items:baseline; gap:.32em; padding:6px 0 12px; min-height:56px;
  color:var(--lacquer); text-decoration:none; font:800 clamp(30px,3.4vw,48px)/1 var(--f-label); letter-spacing:-.03em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}
.follow-cta .fw{ font-weight:500; }
.follow-cta .fh{ text-transform:none; letter-spacing:-.025em; }
.follow-cta .fa{ color:var(--oxide); font-weight:500; transition:transform .5s var(--arm); }
.follow-cta::after{ /* the underline draws itself in, then answers the cursor */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--oxide);
  transform:scaleX(.18); transform-origin:left; transition:transform .6s var(--arm);
}
.follow-cta:hover::after, .follow-cta:focus-visible::after{ transform:scaleX(1); }
.follow-cta:hover .fa, .follow-cta:focus-visible .fa{ transform:translateX(10px); }
.follow-cta:active{ opacity:.75; }
.follow-cta:focus-visible{ outline:2px solid var(--lacquer); outline-offset:6px; }
button.follow-cta{ background:none; border:0; border-radius:0; cursor:pointer; padding-left:0; padding-right:0; text-align:left; }
.bring-link{ display:block; margin-top:8px; font-style:normal; color:var(--ink-3); word-break:break-all; text-transform:none; letter-spacing:.04em; }
.follow-s{ margin:12px 0 0; font:400 italic 16px/1.5 var(--f-liner); color:var(--ink-2); max-width:40ch; }
.done-actions{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.ring-go{
  display:inline-flex; align-items:center; gap:16px; min-height:58px; padding:0 22px; border:0; border-radius:0; cursor:pointer;
  background:var(--lacquer); color:var(--bone); font:500 13px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent; transition:background-color .3s var(--ease);
}
.ring-go span{ font-size:17px; letter-spacing:0; transition:transform .5s var(--arm); }
.ring-go:hover{ background:var(--oxide); }
.ring-go:hover span{ transform:translateY(-4px); }
.more-link{ background:transparent; color:var(--lacquer); box-shadow:inset 0 0 0 1px var(--lacquer); text-decoration:none; }
.more-link:hover{ background:var(--lacquer); color:var(--bone); }
.more-link:hover span{ transform:translateX(4px); }
.done .igl{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--lacquer); text-underline-offset:4px; font:600 15px/1 var(--f-label); }
@media (prefers-reduced-motion:no-preference){
  .done.is-in .done-name{ animation:rise 1s .1s var(--ease) both; }
  .done.is-in .trk-no, .done.is-in .done-lead, .done.is-in .next{ animation:fade .9s .35s var(--ease) both; }
  .done.is-in .follow{ animation:fade 1s 1.1s var(--ease) both; }                          /* the pause, then the invitation */
  .done.is-in .follow-cta::after{ animation:draw-line 1.1s 1.5s var(--arm) both; }
  .done.is-in .manifest{ animation:fade 1s 1.5s var(--ease) both; }
}
@keyframes draw-line{ from{ transform:scaleX(0); } to{ transform:scaleX(.18); } }
@keyframes press{ 0%{ opacity:0; transform:translateY(-10px); background:transparent; } 55%{ opacity:1; transform:none; background:#B7422F1f; } 100%{ background:transparent; } }
.demo-note{ margin:8px 0 0; color:var(--oxide); }

/* Footer: almost invisible */
.base{ display:flex; flex-wrap:wrap; align-items:center; gap:0 26px; padding-inline:var(--gutter); padding-block:10px calc(10px + env(safe-area-inset-bottom,0px)); color:var(--bone-3); }
.base a{ text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.base a:hover{ color:var(--bone); }
.base .first{ margin-right:auto; color:var(--bone-2); }

/* Preview-only strip */
.pv{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(10px + env(safe-area-inset-bottom,0px)); white-space:nowrap; transition:opacity .6s; z-index:50; padding:8px 10px; background:#0D0C0Ae6; border:1px solid #E9E2D633; color:var(--bone-2); font-size:10.5px; }

/* ==========================================================================
   Load: the words start turning like a platter coming up to speed (JS).
   Type rises once. The logo never moves.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .motto span{ animation:rise 1s var(--ease) both; }
  .motto .l2{ animation-delay:.07s; } .motto .l3{ animation-delay:.14s; }
  .lede,.act,.reading,.foot{ animation:fade 1.1s .45s var(--ease) both; }
  .ring{ animation:fade 2.2s .1s ease-out both; }
}
@keyframes rise{ from{ transform:translateY(38%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* ==========================================================================
   430px+ phones get a touch more air
   ========================================================================== */
@media (min-width:410px){ .wordmark svg{ height:19px; } }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width:700px){
  .hero{ --S:min(50vw, 420px); --hx:58vw; --atop:96px; }
  .join{ gap:48px; }
}

/* ==========================================================================
   Desktop: cinematic. Wordmark and motto own the left, the A owns the right.
   ========================================================================== */
@media (min-width:1000px){
  .hero{ min-height:max(680px, 100svh); }
  .hero{ --S:min(58vw, 108svh); --hx:71vw; --hy:47svh; }
  .scene{ height:100%; overflow:visible; }
  /* hangs off the cue, outside the word ring, right-aligned to the grid */
  .reading{ left:auto; right:var(--gutter); top:max(104px, calc(var(--hy) - var(--S) * .38)); display:grid; justify-items:end; gap:4px; text-align:right; }
  .reading .w{ font-size:17px; }
  .wordmark svg{ height:clamp(22px,1.9vw,30px); }
  .mast{ padding-block:clamp(26px,4vh,40px) 0; }
  .mast .code{ display:none; }
  .statement{ align-self:center !important; padding-top:0; padding-bottom:0; }
  .motto{ font-size:clamp(96px, 10.2vw, 208px); }
  .lede{ margin-top:30px; }
  .act{ margin-top:28px; }
  .foot{ padding-block:0 26px; }
  .join{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(48px,7vw,140px); align-items:start; }
  .join-intro{ position:sticky; top:48px; }
  .row{ grid-template-columns:44px 170px minmax(0,1fr); padding:18px 0 16px; align-items:center; }
  .row label{ align-self:center; }
  .row .val{ margin-top:0; }
  .row .hint,.row .err{ grid-column:3; }
  .row label .opt{ display:none; }
  .row .opt-inline{ display:inline; }
  .check{ grid-template-columns:44px minmax(0,1fr); }
}
/* ==========================================================================
   Phone form: a ledger that runs edge to edge. Track and label on one line,
   the value full width underneath, the focused line lit like the row under the needle.
   ========================================================================== */
@media (max-width:999px){
  .foot{ display:block; padding-block:10px 22px; }
  .code-foot{ display:none; }
  .listen{ grid-template-columns:1fr; justify-items:stretch; gap:8px; }
  .series{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
  .series button{ padding:0 4px; font-size:11px; letter-spacing:.1em; min-height:46px; }
  .series .bars{ display:none !important; }
  .series-note{ grid-column:1; text-align:left; font-size:14px; }
  /* the A is smaller on phones, so the words turn on a wider orbit to stay readable */
  .ring, .cue{ inset:-25%; width:150%; height:150%; max-width:none; }
  .row .opt-inline{ display:none; }
  .join{ padding-block:56px 32px; gap:30px; }
  .join h2{ margin-top:14px; }
  .join .pitch{ margin-top:18px; }
  .form-wrap{ margin-inline:calc(var(--gutter) * -1); }
  form{ display:flex; flex-direction:column; }

  .row{
    grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-items:baseline;
    padding:18px var(--gutter) 14px; border-top:1px solid #0D0C0A40;
    transition:background-color .25s var(--ease);
  }
  .row:last-of-type{ border-bottom:0; }
  .row .n{ padding-top:0; }
  .row label{ font-size:12.5px; }
  .row .val, .row .hint, .row .err{ grid-column:1 / -1; }
  .row .val{ margin-top:8px; gap:12px; }
  .row .val .arr{ font-size:22px; }
  .row .val .pre{ font-size:24px; margin-right:-8px; }
  .row input{ font-size:24px; min-height:52px; padding-right:30px; }
  .row .hint{ margin-top:2px; font-size:15px; }
  .hint .hint-opt{ display:none; }
  .row:focus-within{ background:#0D0C0A0d; border-top-color:var(--oxide); box-shadow:inset 3px 0 0 var(--oxide); }
  .row.is-invalid{ background:#B7422F0f; }

  .consents{ padding:10px var(--gutter) 6px; border-top:1px solid #0D0C0A40; gap:0; }
  .check{ grid-template-columns:40px minmax(0,1fr); padding:14px 0; }
  .check + .check{ border-top:1px solid #0D0C0A1f; }
  .check input{ top:12px; width:36px; height:36px; }
  .stamp{ width:30px; height:30px; }
  .check-t{ font-size:17px; }
  .check-s{ font-size:14.5px; }

  /* the notice is read before the button, not after it */
  .legal{ order:1; margin:6px 0 0; padding-inline:var(--gutter); font-size:12.5px; }
  .form-err{ order:2; margin:14px var(--gutter) 0; }
  .submit{ order:3; margin-top:22px; min-height:72px; padding-inline:var(--gutter); font-size:15px; padding-bottom:env(safe-area-inset-bottom,0px); }
  .submit:active{ transform:none; background:var(--lacquer); }

  #done-state{ padding:6px var(--gutter) 64px; }
  .follow{ margin-top:30px; }
  .follow-cta{ display:flex; width:100%; min-height:76px; align-items:center; padding:14px 0 16px; border-top:1.5px solid var(--lacquer); font-size:clamp(26px,7.4vw,34px); }
  .follow-cta .fa{ margin-left:auto; }
  .follow-cta::after{ transform:scaleX(1); height:3px; }
  .done.is-in .follow-cta::after{ animation:none; }
}
@media (min-width:1500px){ .hero{ --S:min(56vw, 110svh); } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}