/* ============================================================
   Adventure Advertising — tokens
   Light, minimal: paper white, hairline rules, near-black ink,
   one green reserved for anything genuinely live.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --surface:#FAFAF9;
  --surface-2:#F4F3F1;
  --border:#E8E6E1;
  --border-strong:#D6D3CD;

  --text:#0F0F0F;
  --text-muted:#6A6A6A;
  --text-faint:#96958F;

  --ink:#111111;
  --ink-hover:#000000;
  --live:#12874A;
  --live-soft:rgba(18,135,74,.10);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  --shadow-sm:0 1px 2px rgba(15,15,15,.05);
  --shadow-lg:0 16px 48px rgba(15,15,15,.10);

  --font-display:'Instrument Sans','Helvetica Neue',system-ui,sans-serif;
  --font-body:'Figtree',-apple-system,'Segoe UI',system-ui,sans-serif;

  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* Any display value beats the [hidden] default, and this page toggles
   several grid/flex elements by attribute. Make hidden mean hidden. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.is-gated{overflow:hidden}
body.is-gated > header,body.is-gated > main,body.is-gated > footer{display:none}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.03em}
h1{font-size:clamp(38px,5.2vw,62px)}
h2{font-size:clamp(27px,3.2vw,40px)}
h3{font-size:clamp(19px,1.9vw,24px);letter-spacing:-.02em}
h4{font-size:14px;letter-spacing:-.01em;font-weight:600}

.container{max-width:1180px;margin:0 auto;padding:0 var(--s-6)}
.section{padding:var(--s-24) 0}
.section--alt{background:var(--surface);border-block:1px solid var(--border)}
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:var(--s-3);
}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--text-muted);max-width:58ch}
.prose{color:var(--text-muted);max-width:66ch;margin-top:var(--s-4)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:90;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:46px;padding:0 var(--s-6);border-radius:var(--r-sm);
  font-weight:500;font-size:15px;text-decoration:none;border:1px solid transparent;
  background:none;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out,opacity .15s ease-out;
}
.btn--primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--primary:hover{background:var(--ink-hover)}
.btn--ghost,.btn--quiet{border-color:var(--border-strong);color:var(--text);background:var(--bg)}
.btn--ghost:hover,.btn--quiet:hover{border-color:var(--text);background:var(--surface)}
.btn--text{color:var(--text-muted);height:40px;padding:0 var(--s-2)}
.btn--text:hover{color:var(--text)}
.btn--sm{height:36px;padding:0 var(--s-4);font-size:14px}
.btn--block{width:100%}
.btn:disabled{opacity:.55;cursor:default}
:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm);
}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease-out;
}
.nav.is-stuck{border-bottom-color:var(--border)}
.nav__inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s-6)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand__mark{width:24px;height:24px;color:var(--ink);flex:none}
.brand__text{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.035em;white-space:nowrap}
.brand__text--soft{color:var(--text-faint);font-weight:500}
.brand--lg .brand__mark{width:28px;height:28px}
.brand--lg .brand__text{font-size:19px}
.nav__links{display:flex;align-items:center;gap:var(--s-6)}
.nav__links a{text-decoration:none;font-size:15px;color:var(--text-muted);transition:color .15s ease-out}
.nav__links a:hover{color:var(--text)}
.nav__links a.btn{color:#fff}
.account{display:flex;align-items:center;gap:var(--s-3);padding-left:var(--s-4);border-left:1px solid var(--border)}
.account__who{font-size:14px;color:var(--text-muted);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__toggle{display:none;width:40px;height:40px;border:1px solid var(--border);border-radius:var(--r-sm);background:none;cursor:pointer;padding:0;place-items:center}
.nav__toggle span{display:block;width:17px;height:1.5px;background:var(--text);margin:3px auto;transition:transform .18s ease-out}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* ── sign-in gate ────────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:80;background:var(--bg);overflow-y:auto}
.gate__grid{
  min-height:100%;max-width:1180px;margin:0 auto;padding:var(--s-8) var(--s-6);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-24);align-items:center;
}
.gate__panel{max-width:420px;width:100%;justify-self:center}
.gate__title{font-size:clamp(30px,3.4vw,42px);margin:var(--s-12) 0 var(--s-4)}
.gate__sub{color:var(--text-muted);font-size:16px;margin-bottom:var(--s-8);max-width:38ch}
.gate__actions{display:grid;gap:var(--s-3)}
.gate__or{display:flex;align-items:center;gap:var(--s-4);margin:var(--s-2) 0;color:var(--text-faint);font-size:13px}
.gate__or::before,.gate__or::after{content:"";height:1px;background:var(--border);flex:1}
.gate__form{display:grid;gap:var(--s-4)}
.gate__error{
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4);font-size:14px;
  background:#FDF3F2;border:1px solid #F2D5D2;color:#9B2C22;border-radius:var(--r-sm);
}
.gate__legal{margin-top:var(--s-8);font-size:13px;color:var(--text-faint);max-width:40ch}

.gate__visual{display:grid;gap:var(--s-8);justify-items:center}
.globe{width:100%;max-width:440px;aspect-ratio:1;position:relative}
.globe canvas{width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;cursor:grab;touch-action:none}
.globe--failed{
  border-radius:50%;border:1px dashed var(--border-strong);
  display:grid;place-items:center;
}
.globe--failed::after{content:"Globe needs a connection";color:var(--text-faint);font-size:13px}
.globe__meta{width:100%;max-width:360px}
.globe__label{
  display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s-4);
}
.globe__legend{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.globe__legend li{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  font-size:14px;color:var(--text-muted);padding-bottom:var(--s-2);border-bottom:1px solid var(--border);
}
.globe__legend b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);font-size:15px}
.globe__legend span{display:flex;flex-direction:column}
.globe__legend em{font-style:normal;font-size:12px;color:var(--text-faint);margin-top:1px}
.globe__foot{margin-top:var(--s-4);font-size:12.5px;color:var(--text-faint);line-height:1.5}
.live-now{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-bottom:var(--s-6);padding-bottom:var(--s-4);border-bottom:1px solid var(--border);
  font-size:14px;color:var(--text-muted);
}
.live-now b{font-size:19px;font-family:var(--font-display);font-weight:600;color:var(--text);letter-spacing:-.02em}
.live-now em{font-style:normal;font-size:12.5px;color:var(--text-faint);width:100%;margin-top:2px}
.account__live{
  display:inline-flex;align-items:center;font-size:13.5px;color:var(--text-muted);
  border:1px solid var(--border);border-radius:var(--r-full);padding:3px 11px 3px 9px;
}
.account__live b{font-weight:600;color:var(--text)}

/* ── hero ────────────────────────────────────────────────── */
.hero{padding:var(--s-24) 0 var(--s-16)}
.hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-16);align-items:center}
.hero__copy h1{margin-bottom:var(--s-6)}
.hero__cta{display:flex;gap:var(--s-3);margin-top:var(--s-8);flex-wrap:wrap}
.hero__note{margin-top:var(--s-4);font-size:14px;color:var(--text-faint)}
.hero__note a{color:var(--text-muted)}

.anatomy{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-6);
}
.anatomy__head{display:flex;align-items:center;gap:var(--s-3);font-size:13.5px;color:var(--text-muted);margin-bottom:var(--s-6);flex-wrap:wrap}
.tag{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-full);border:1px solid var(--border-strong);color:var(--text-muted);
}
.tag--live{color:var(--live);border-color:rgba(18,135,74,.3);background:var(--live-soft)}
.curve{position:relative;height:92px;margin-bottom:var(--s-6);border-bottom:1px solid var(--border)}
.curve svg{width:100%;height:92px;display:block}
.curve__line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.5s .2s ease-out forwards;stroke:var(--ink)!important}
.curve__area{opacity:0;animation:fade .9s 1.1s ease-out forwards}
.curve__label{position:absolute;right:0;bottom:-22px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

.beats{list-style:none;padding:0;margin:var(--s-6) 0 0;display:grid;gap:var(--s-3)}
.beat{display:grid;grid-template-columns:48px 1fr;gap:var(--s-3);align-items:start;font-size:14.5px;color:var(--text-muted)}
.beat__t{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-faint);font-size:13px;padding-top:2px}
.beat b{color:var(--text);font-weight:600}
.beat--peak .beat__t{color:var(--live)}

/* ── stats ───────────────────────────────────────────────── */
.band{border-block:1px solid var(--border)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-8);padding:var(--s-12) var(--s-6)}
.stat__n{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.04em;line-height:1}
.stat__l{display:block;margin-top:var(--s-2);font-size:13.5px;color:var(--text-muted);max-width:22ch}

.section__head{display:grid;grid-template-columns:8fr 4fr;gap:var(--s-8);align-items:end;margin-bottom:var(--s-12)}
.section__note{color:var(--text-muted);font-size:15px;max-width:44ch}

/* ── filters ─────────────────────────────────────────────── */
.filters{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
.filters__row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{
  border:1px solid var(--border);background:var(--bg);color:var(--text-muted);
  padding:7px 14px;border-radius:var(--r-full);font-size:14px;cursor:pointer;
  transition:border-color .15s ease-out,color .15s ease-out,background-color .15s ease-out;
}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filters__row--sub .chip{font-size:13px;padding:5px 12px;border-radius:var(--r-sm)}
.filters__row--sub .chip[aria-pressed="true"]{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}
.results{font-size:13.5px;color:var(--text-faint);margin-bottom:var(--s-6)}

/* ── gallery ─────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.card{
  grid-column:span 1;text-align:left;padding:0;cursor:pointer;overflow:hidden;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  display:flex;flex-direction:column;
  transition:border-color .18s ease-out,box-shadow .18s ease-out,transform .18s ease-out;
}
.card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-lg)}
.card--wide{grid-column:span 2}
.card__poster{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.card--wide .card__poster{aspect-ratio:32/13}
.card__poster svg{width:100%;height:100%;display:block}
.card__thumb{width:100%;height:100%;object-fit:cover;transition:transform .35s ease-out}
.card:hover .card__thumb{transform:scale(1.03)}
.card__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,10,.14);transition:background-color .18s ease-out}
.card:hover .card__play{background:rgba(10,10,10,.05)}
.card__play svg{
  width:48px;height:48px;color:var(--ink);background:rgba(255,255,255,.94);
  border-radius:var(--r-full);padding:11px 9px 11px 13px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease-out;
}
.card:hover .card__play svg{transform:scale(1.06)}
.card__views{
  position:absolute;left:var(--s-4);bottom:var(--s-4);
  background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:var(--r-full);
  padding:5px 12px;font-size:12.5px;font-weight:600;
}
.card__views--live{color:var(--live)}
.card__rank{position:absolute;right:var(--s-4);top:var(--s-4);font-family:var(--font-display);font-weight:600;font-size:13px;color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.card__body{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.card__meta{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.card__title{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.025em;line-height:1.15}
.card__hook{color:var(--text-muted);font-size:14.5px;margin-top:var(--s-1)}
.card__foot{margin-top:auto;padding-top:var(--s-4);display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.pill{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--r-full);padding:4px 10px}
.card__cue{margin-left:auto;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.card__cue svg{width:14px;height:14px;transition:transform .16s ease-out}
.card:hover .card__cue svg{transform:translateX(3px)}

/* ── live ────────────────────────────────────────────────── */
.dot{
  display:inline-block;width:6px;height:6px;border-radius:var(--r-full);background:var(--live);
  margin-right:6px;vertical-align:middle;box-shadow:0 0 0 0 rgba(18,135,74,.5);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(18,135,74,0)}100%{box-shadow:0 0 0 0 rgba(18,135,74,0)}}
.livebox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);margin-top:var(--s-6);font-size:14px;color:var(--text-muted)}
.livebox b{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--live);margin-bottom:6px}

/* ── meta lookup ─────────────────────────────────────────── */
.lookup{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-8)}
.lookup__form{display:grid;grid-template-columns:5fr 4fr auto;gap:var(--s-4);align-items:end}
.lookup #mStatus{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border);max-width:78ch}
.lookup code{font-size:13px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:1px 5px}
.madgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);margin-top:var(--s-6)}
.mad{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)}
.mad__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.mad__page{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.02em}
.pill--on{color:var(--live);border-color:rgba(18,135,74,.35)}
.mad__headline{font-weight:600;font-size:15px}
.mad__body{font-size:14.5px;color:var(--text-muted)}
.mad__body--none{color:var(--text-faint);font-style:italic}
.mad__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin:0;padding-top:var(--s-3);border-top:1px solid var(--border)}
.mad__meta dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:2px}
.mad__meta dd{margin:0;font-size:13.5px}
.mad__metrics{font-size:13.5px;color:var(--text-muted)}
.mad .sheet__link{margin-top:auto;font-size:14px;padding-top:var(--s-2)}

/* ── principles ──────────────────────────────────────────── */
.principles{list-style:none;padding:0;margin:0;display:grid;gap:0}
.principle{display:grid;grid-template-columns:64px 5fr 5fr;gap:var(--s-8);align-items:start;padding:var(--s-8) 0;border-top:1px solid var(--border)}
.principle:last-child{border-bottom:1px solid var(--border)}
.principle__n{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text-faint);line-height:1.6;letter-spacing:.02em}
.principle h3{margin-bottom:var(--s-3)}
.principle p{color:var(--text-muted);font-size:15.5px}
.principle__ev{font-size:14.5px;color:var(--text-muted);border-left:1px solid var(--border-strong);padding-left:var(--s-4)}
.principle__ev b{color:var(--text);font-weight:600;display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}

/* ── builder ─────────────────────────────────────────────── */
.builder{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-8);align-items:start}
.builder__form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-8);display:grid;gap:var(--s-6);position:sticky;top:calc(var(--nav-h) + 24px)}
.field{display:grid;gap:var(--s-2)}
.field label,.field .label{font-size:14px;font-weight:500}
.field input,.field select{
  height:46px;padding:0 var(--s-3);border-radius:var(--r-sm);
  background:var(--bg);border:1px solid var(--border-strong);width:100%;font-size:15px;
  transition:border-color .15s ease-out,box-shadow .15s ease-out;
}
.field input::placeholder{color:var(--text-faint)}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.07)}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0F0F' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.hint{font-size:13px;color:var(--text-faint)}
.segmented{display:flex;gap:var(--s-1);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:4px;background:var(--bg)}
.segmented button{flex:1;height:36px;border:none;background:none;border-radius:var(--r-sm);font-size:14px;color:var(--text-muted);cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}
.segmented button:hover{color:var(--text)}
.segmented button[aria-checked="true"]{background:var(--ink);color:#fff;font-weight:500}

.builder__out{min-height:320px}
.brief{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-8)}
.brief__head{display:flex;justify-content:space-between;gap:var(--s-4);align-items:start;flex-wrap:wrap;margin-bottom:var(--s-6)}
.brief h3{margin-bottom:var(--s-2)}
.brief__sub{color:var(--text-muted);font-size:14.5px;max-width:52ch}
.brief__block{padding-top:var(--s-6);margin-top:var(--s-6);border-top:1px solid var(--border)}
.brief__label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s-4)}
.hooks{list-style:none;padding:0;display:grid;gap:var(--s-3)}
.hooks li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);font-size:16px}
.hooks li span{display:block;font-size:11.5px;color:var(--text-faint);margin-bottom:4px;letter-spacing:.08em;text-transform:uppercase}
.sheetlist{list-style:none;padding:0;display:grid;gap:var(--s-2)}
.sheetlist li{display:grid;grid-template-columns:88px 1fr;gap:var(--s-4);align-items:start;padding:var(--s-3) 0;border-bottom:1px solid var(--border);font-size:15px}
.sheetlist li:last-child{border-bottom:none}
.sheetlist .t{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;color:var(--text-faint);padding-top:3px}
.sheetlist .d b{display:block;font-weight:600;margin-bottom:2px}
.sheetlist .d span{color:var(--text-muted);font-size:14.5px}
.checks{list-style:none;padding:0;display:grid;gap:var(--s-2);color:var(--text-muted);font-size:15px}
.checks li{display:grid;grid-template-columns:20px 1fr;gap:var(--s-3);align-items:start}
.checks svg{width:16px;height:16px;color:var(--text);margin-top:5px}
.warn{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);font-size:14.5px;color:var(--text-muted)}
.warn b{color:var(--text);display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.empty{border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:var(--s-16) var(--s-8);text-align:center;color:var(--text-faint)}

/* ── detail sheet ────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(20,20,20,.34);backdrop-filter:blur(2px);animation:fade .2s ease-out forwards;opacity:0}
.sheet__panel{
  position:relative;width:min(780px,100%);background:var(--bg);
  border-left:1px solid var(--border);overflow-y:auto;padding:var(--s-12) var(--s-12) var(--s-24);
  animation:slidein .28s cubic-bezier(.22,.8,.3,1) forwards;transform:translateX(24px);opacity:0;
}
@keyframes slidein{to{transform:none;opacity:1}}
.sheet__close{
  position:absolute;top:var(--s-6);right:var(--s-6);width:38px;height:38px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);cursor:pointer;
  display:grid;place-items:center;transition:border-color .15s ease-out;z-index:2;
}
.sheet__close:hover{border-color:var(--text)}
.sheet__close svg{width:19px;height:19px}
.sheet__poster{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/7;margin-bottom:var(--s-8);border:1px solid var(--border)}

.player{position:relative;aspect-ratio:16/9;margin-bottom:var(--s-8);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.player img{width:100%;height:100%;object-fit:cover}
.player > svg{width:100%;height:100%;display:block}
.player__btn{position:absolute;inset:0;width:100%;border:none;background:rgba(10,10,10,.12);display:grid;place-items:center;cursor:pointer;transition:background-color .18s ease-out}
.player__btn:hover{background:rgba(10,10,10,.04)}
.player__btn svg{width:72px;height:52px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.22))}
.player__bg{fill:rgba(255,255,255,.94);transition:fill .18s ease-out}
.player__btn:hover .player__bg{fill:#fff}
.player__btn svg path:last-child{fill:var(--ink)}
.player__note{position:absolute;right:var(--s-3);bottom:var(--s-3);pointer-events:none;background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:var(--r-full);padding:4px 11px;font-size:12px;color:var(--text-muted)}
.player iframe{width:100%;height:100%;display:block;border:0}

.sheet__meta{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4)}
.sheet h2{margin-bottom:var(--s-3)}
.sheet__brand{font-size:15px;color:var(--text-muted);margin-bottom:var(--s-6)}
.sheet__block{padding-top:var(--s-8);margin-top:var(--s-8);border-top:1px solid var(--border)}
.sheet__block h3{margin-bottom:var(--s-4)}
.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:var(--s-4)}
.steps li{display:grid;grid-template-columns:26px 1fr;gap:var(--s-4);align-items:start;color:var(--text-muted);font-size:15.5px}
.steps li::before{
  counter-increment:s;content:counter(s);
  width:26px;height:26px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text);
  display:grid;place-items:center;font-size:12.5px;font-weight:600;
}
.steps b{color:var(--text);font-weight:600}
.kit{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.sheet__link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;margin-top:var(--s-6);border-bottom:1px solid var(--border-strong);padding-bottom:2px}
.sheet__link:hover{border-color:var(--text)}
.sheet__link svg{width:14px;height:14px}

/* ── ethics + footer ─────────────────────────────────────── */
.ethics{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-16);align-items:start}
.callout{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-8)}
.callout h3{margin-bottom:var(--s-4)}
.callout p{color:var(--text-muted);font-size:14.5px}
.callout p + p{margin-top:var(--s-4)}

.footer{border-top:1px solid var(--border);padding:var(--s-16) 0 var(--s-8)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:var(--s-8)}
.footer h4{margin-bottom:var(--s-4);color:var(--text)}
.footer ul{list-style:none;padding:0;display:grid;gap:var(--s-2)}
.footer a{color:var(--text-muted);text-decoration:none;font-size:15px;transition:color .15s ease-out}
.footer a:hover{color:var(--text)}
.footer__blurb{color:var(--text-faint);font-size:14px;margin-top:var(--s-4);max-width:38ch}
.footer__base{margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--border);color:var(--text-faint);font-size:13px}

/* ── reveal ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(10px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease-out,transform .5s ease-out}
.hero .reveal.in{transition-delay:var(--d,0ms)}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1040px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .card--wide{grid-column:span 2}
  .builder{grid-template-columns:1fr}
  .builder__form{position:static}
  .gate__grid{gap:var(--s-12)}
}
@media (max-width:900px){
  .gate__grid{grid-template-columns:1fr;padding:var(--s-8) var(--s-6) var(--s-16)}
  .gate__panel{order:2;max-width:440px}
  .gate__visual{order:1}
  .globe{max-width:300px}
  .gate__title{margin-top:var(--s-8)}
}
@media (max-width:860px){
  :root{--nav-h:64px}
  .nav__links{
    position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg);border-bottom:1px solid var(--border);padding:var(--s-4) var(--s-6) var(--s-6);
    display:none;box-shadow:var(--shadow-lg);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:14px 0;border-bottom:1px solid var(--border)}
  .nav__links a.btn{margin-top:var(--s-4);border-bottom:none;justify-content:center}
  .account{border-left:none;padding-left:0;padding-top:var(--s-4);justify-content:space-between}
  .nav__toggle{display:grid}
  .hero{padding:var(--s-16) 0 var(--s-12)}
  .hero__grid,.section__head,.ethics{grid-template-columns:1fr;gap:var(--s-8)}
  .section__head{align-items:start}
  .section{padding:var(--s-16) 0}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--s-6);padding:var(--s-8) var(--s-6)}
  .grid{grid-template-columns:1fr}
  .card--wide{grid-column:span 1}
  .card--wide .card__poster{aspect-ratio:16/9}
  .principle{grid-template-columns:1fr;gap:var(--s-4)}
  .sheet__panel{padding:var(--s-12) var(--s-6) var(--s-16);border-left:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .sheetlist li{grid-template-columns:70px 1fr;gap:var(--s-3)}
  .lookup{padding:var(--s-6)}
  .lookup__form{grid-template-columns:1fr}
  .madgrid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .container{padding:0 var(--s-4)}
  .footer__grid{grid-template-columns:1fr}
  .builder__form,.brief{padding:var(--s-6)}
  .gate__grid{padding:var(--s-6) var(--s-4) var(--s-12)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .curve__line{stroke-dashoffset:0}
  .curve__area{opacity:1}
  .sheet__panel,.sheet__scrim{opacity:1;transform:none}
}

/* ── Spreading fastest ─────────────────────────────────────────
   A ranked list, not cards: the eye should run down one column of
   rates and compare them, which a grid actively prevents. */
.viral{list-style:none;margin:var(--s-6) 0 0;padding:0;border-top:1px solid var(--border)}

.vrow{
  display:grid;
  grid-template-columns:28px 104px 1fr auto 32px;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-2);
  border-bottom:1px solid var(--border);
  transition:background-color .15s ease-out;
}
.vrow:hover{background:var(--surface)}

.vrow__rank{font-family:var(--font-display);font-size:13px;color:var(--text-faint);text-align:right}

.vrow__rate{display:flex;flex-direction:column;line-height:1.15}
.vrow__rate b{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.vrow__rate em{font-style:normal;font-size:11px;color:var(--text-faint)}

.vrow__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.vrow__title{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow__by{font-size:13px;color:var(--text-muted)}

.vrow__facts{display:flex;align-items:center;gap:var(--s-2);font-size:12px;color:var(--text-muted);white-space:nowrap}

.src{
  font-family:var(--font-display);font-size:11px;font-weight:600;
  padding:2px var(--s-2);border-radius:var(--r-full);border:1px solid var(--border-strong);
}
.src--yt{color:#B3261E}
.src--fb{color:#1B5FBF}

.vrow__go{
  display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);
  color:var(--text-faint);transition:color .15s ease-out,background-color .15s ease-out;
}
.vrow__go:hover{color:var(--ink);background:var(--surface-2)}
.vrow__go svg{width:15px;height:15px}

.hint--foot{margin-top:var(--s-6);max-width:76ch}

@media (max-width:860px){
  /* The rate and the name are the story; rank and link are not. */
  .vrow{grid-template-columns:92px 1fr;gap:var(--s-3) var(--s-4);padding:var(--s-4) 0}
  .vrow__rank,.vrow__go{display:none}
  .vrow__facts{grid-column:2;justify-content:flex-start}
  /* One column of ellipses tells the reader nothing — let the headline
     wrap to two lines, which is what they actually came to read. */
  .vrow__title{
    white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-height:1.3;
  }
}

/* ── Legal pages ───────────────────────────────────────────────
   Long-form reading, not a landing page: one narrow column, generous
   leading, and tables that scroll rather than squeeze on a phone. */
.legal{padding:var(--s-16) 0 var(--s-24)}
.container--narrow{max-width:72ch;margin:0 auto;padding:0 var(--s-6)}

.legal h1{font-size:clamp(32px,5vw,46px);letter-spacing:-.02em;margin:var(--s-2) 0 var(--s-4)}
.legal h2{font-size:20px;margin:var(--s-12) 0 var(--s-3);letter-spacing:-.01em}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--text)}
.legal p{margin:0 0 var(--s-4)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--ink-hover)}

.legal__meta{color:var(--text-muted);font-size:14px;margin-bottom:var(--s-8)}

.legal__summary{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s-6);margin:0 0 var(--s-8);
}
.legal__summary h2{margin:0 0 var(--s-2);font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.legal__summary p{margin:0}

.legal__list{margin:0 0 var(--s-4);padding-left:var(--s-6)}
.legal__list li{margin-bottom:var(--s-2)}

/* A table is the honest shape for "what we collect and why" — but it
   must never make the page itself scroll sideways. */
.legal__table{width:100%;border-collapse:collapse;margin:0 0 var(--s-6);display:block;overflow-x:auto}
.legal__table th,.legal__table td{
  text-align:left;padding:var(--s-3);border-bottom:1px solid var(--border);
  font-size:15px;line-height:1.5;vertical-align:top;min-width:14ch;
}
.legal__table th{font-family:var(--font-display);font-weight:600;color:var(--text-muted);white-space:nowrap}

.legal__contact{
  background:var(--surface-2);border-radius:var(--r-md);
  padding:var(--s-4);line-height:1.8;
}
.legal__foot{margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--border);color:var(--text-muted)}
.footer__legal{margin-top:var(--s-2);font-size:13px;color:var(--text-faint)}
.footer__legal a{color:var(--text-muted)}
.gate__legal a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}

/* ── AI breakdown block ───────────────────────────────────────
   Deliberately not styled like the hand-written "How it is built"
   block above it — a dashed border and a muted disclosure line keep
   it visually distinct, because it is a different kind of claim. */
#aiBlock{
  border:1px dashed var(--border-strong);border-radius:var(--r-md);
  padding:var(--s-5) var(--s-6);background:var(--surface);
}
#aiBlock h3{display:flex;align-items:center;gap:var(--s-2);font-size:15px;color:var(--text-muted)}
#aiBlock h3::before{content:"✦";color:var(--text-faint);font-size:13px}
.ai-status{color:var(--text-faint);font-size:14px}
.ai-disclosure{font-size:13px;color:var(--text-faint);font-style:italic;margin:var(--s-2) 0 var(--s-4);max-width:60ch}
.ai-mechanism{font-size:14.5px;margin-bottom:var(--s-3)}
.ai-beats{margin:0 0 var(--s-3);padding-left:var(--s-5);display:grid;gap:var(--s-2)}
.ai-beats li{font-size:14.5px;line-height:1.55}
.ai-confidence{font-size:12px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}

/* ── Most watched, per platform ────────────────────────────────
   Same row grammar as the viral board so the two read as siblings,
   but with a thumbnail and a unit label under every number — the
   unit is the whole point, since the platforms do not measure the
   same thing. */
.wgroup{margin-top:var(--s-8)}
.wgroup__h{font-size:16px;margin-bottom:var(--s-2)}
.wgroup__basis{font-size:13px;color:var(--text-faint);max-width:70ch;margin-bottom:var(--s-4)}
.wgroup__none{
  font-size:14px;color:var(--text-muted);max-width:70ch;line-height:1.6;
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--s-4);
}

.wlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.wrow{
  display:grid;grid-template-columns:24px 88px 1fr auto 32px;
  align-items:center;gap:var(--s-4);
  padding:var(--s-3) var(--s-2);border-bottom:1px solid var(--border);
  transition:background-color .15s ease-out;
}
.wrow:hover{background:var(--surface)}
.wrow__rank{font-family:var(--font-display);font-size:13px;color:var(--text-faint);text-align:right}
.wrow__thumb{width:88px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);background:var(--surface-2)}
.wrow__thumb--none{display:block;border:1px solid var(--border)}
.wrow__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.wrow__title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow__by{font-size:13px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow__num{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;white-space:nowrap}
.wrow__num b{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em}
.wrow__num em{font-style:normal;font-size:11px;color:var(--text-faint)}
.flag{
  margin-top:2px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:#9B6A22;border:1px solid #E8D5B0;border-radius:var(--r-full);padding:1px 6px;
}
.wrow__go{
  display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);
  color:var(--text-faint);transition:color .15s ease-out,background-color .15s ease-out;
}
.wrow__go:hover{color:var(--ink);background:var(--surface-2)}
.wrow__go svg{width:15px;height:15px}

@media (max-width:860px){
  .wrow{grid-template-columns:64px 1fr auto;gap:var(--s-3)}
  .wrow__rank,.wrow__go{display:none}
  .wrow__thumb{width:64px}
  .wrow__title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
}

/* ── Competitor watch ──────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.watchbar{display:flex;gap:var(--s-3);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--s-4)}
.field--inline{flex:1;min-width:220px}
.field--inline input,.field--region select{
  width:100%;height:46px;padding:0 var(--s-4);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg);
}
.field--region{max-width:280px;margin-bottom:var(--s-6)}
.field--region label{display:block;font-size:13px;color:var(--text-muted);margin-bottom:var(--s-2)}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0;margin:0 0 var(--s-4)}
.wchip{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-full);overflow:hidden}
.wchip__name{background:none;border:0;padding:6px var(--s-3);cursor:pointer;font-size:14px}
.wchip__name:hover{background:var(--surface-2)}
.wchip__x{background:none;border:0;border-left:1px solid var(--border);padding:6px 10px;cursor:pointer;color:var(--text-faint);line-height:1}
.wchip__x:hover{color:#9B2C22;background:var(--surface-2)}

.wsource{font-size:13px;color:var(--text-faint);margin-bottom:var(--s-4);max-width:70ch}
.wrlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.wr{display:grid;grid-template-columns:74px 1fr auto 30px;gap:var(--s-3);align-items:center;
  padding:var(--s-3) var(--s-2);border-bottom:1px solid var(--border)}
.wr--new{background:rgba(18,135,74,.045)}
.wr--stopped,.wr--gone{opacity:.72}
.wr__tag{justify-self:start}
.wr__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.wr__title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr__by{font-size:12.5px;color:var(--text-muted)}
.wr__num{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.1}
.wr__num em{font-style:normal;font-size:10px;font-weight:400;color:var(--text-faint)}
.wr__go{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);color:var(--text-faint)}
.wr__go:hover{color:var(--ink);background:var(--surface-2)}
.wr__go svg{width:14px;height:14px}

/* ── Festival planner ──────────────────────────────────────── */
.fest{list-style:none;margin:var(--s-4) 0 0;padding:0;border-top:1px solid var(--border)}
.fest__row{display:grid;grid-template-columns:74px 1fr auto;gap:var(--s-4);align-items:start;
  padding:var(--s-4) var(--s-2);border-bottom:1px solid var(--border)}
.fest__when{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;padding-top:2px}
.fest__when b{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.02em}
.fest__when em{font-style:normal;font-size:10.5px;color:var(--text-faint)}
.fest__main{display:flex;flex-direction:column;gap:3px;min-width:0}
.fest__name{font-weight:600;display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.fest__meta{font-size:13px;color:var(--text-muted)}
.fest__note{font-size:13.5px;color:var(--text-faint);max-width:62ch;line-height:1.5}
.pill--peak{background:var(--live-soft);color:var(--live);border-color:transparent;font-size:11px}
.fest__flag{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-full);white-space:nowrap;border:1px solid var(--border-strong);color:var(--text-muted)}
.fest__flag--late{background:#FDF3F2;border-color:#F2D5D2;color:#9B2C22}
.fest__flag--now{background:#FFF7E8;border-color:#F0DFBB;color:#8A6412}
.fest__flag--ok{background:var(--live-soft);border-color:transparent;color:var(--live)}

@media (max-width:860px){
  .wr{grid-template-columns:1fr auto;gap:var(--s-2)}
  .wr__tag,.wr__go{display:none}
  .wr__title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .fest__row{grid-template-columns:56px 1fr;gap:var(--s-3)}
  .fest__flag{grid-column:2;justify-self:start;margin-top:var(--s-2)}
  .fest__when b{font-size:18px}
}

/* ── Admin ─────────────────────────────────────────────────── */
.legal__table-wrap{overflow-x:auto;margin-bottom:var(--s-8)}
.legal .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-4);margin:var(--s-6) 0 var(--s-12)}
.legal .stat{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4);display:flex;flex-direction:column;gap:2px}
.legal .stat b{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}
.legal .stat span{font-size:14px;font-weight:500}
.legal .stat em{font-style:normal;font-size:12px;color:var(--text-faint)}
.legal code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:.9em}
.flag--earned{color:var(--live);border-color:rgba(18,135,74,.3);background:var(--live-soft)}

/* ── Gate lines ────────────────────────────────────────────────
   Sits behind the sign-in panel. Pointer-events off so it can never
   swallow a click on the sign-in button, and masked at the edges so
   the ribbons fade out instead of ending abruptly at the viewport. */
.gate__lines{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 55%,#000 35%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 55%,#000 35%,transparent 78%);
}
.gate__lines svg{width:100%;height:100%;display:block}
.gate__grid{position:relative;z-index:1}

/* ══ Dark landing gate ═══════════════════════════════════════════
   The sign-in screen is the one place the site goes dark: the
   animated ribbons need a black field to read as light rather than
   as ink, and the panel is the only thing that should hold attention
   before someone is in. */
.gate--dark{
  --g-ink:#F5F4F0;
  --g-dim:rgba(245,244,240,.62);
  --g-faint:rgba(245,244,240,.40);
  --g-line:rgba(245,244,240,.16);
  background:#050505;color:var(--g-ink);
}

/* One centred column. The globe and its legend sit under the panel
   rather than beside it, so the button is the middle of the screen. */
.gate--dark .gate__grid{
  grid-template-columns:1fr;
  gap:var(--s-16);
  max-width:560px;
  justify-items:center;
  text-align:center;
  padding-block:var(--s-24);
}
.gate--dark .gate__panel{max-width:440px;justify-self:center}
.gate--dark .brand{justify-content:center}
.gate--dark .brand__text{color:var(--g-ink)}
.gate--dark .brand__text--soft{color:var(--g-faint)}
.gate--dark .gate__title{color:var(--g-ink)}
.gate--dark .gate__sub{color:var(--g-dim);max-width:none;margin-inline:auto}
.gate--dark .gate__legal{color:var(--g-faint);max-width:44ch;margin-inline:auto}
.gate--dark .gate__legal a{color:var(--g-dim)}
.gate--dark .gate__or{color:var(--g-faint)}
.gate--dark .gate__or::before,.gate--dark .gate__or::after{background:var(--g-line)}

/* Primary button inverts on black — white plate, dark text. */
.gate--dark .btn--primary{background:var(--g-ink);color:#0A0A0A;border-color:var(--g-ink)}
.gate--dark .btn--primary:hover{background:#fff}
.gate--dark .btn--quiet{background:transparent;color:var(--g-ink);border-color:var(--g-line)}
.gate--dark .btn--quiet:hover{border-color:var(--g-ink);background:rgba(245,244,240,.06)}
.gate--dark .btn--text{color:var(--g-faint)}
.gate--dark .btn--text:hover{color:var(--g-ink)}
.gate--dark .field input{background:rgba(245,244,240,.05);border-color:var(--g-line);color:var(--g-ink)}
.gate--dark .field input::placeholder{color:var(--g-faint)}
.gate--dark .field label{color:var(--g-dim)}

/* Globe and legend, now below and dimmer — supporting, not competing. */
.gate--dark .gate__visual{width:100%;max-width:440px}
.gate--dark .globe canvas{
  /* Inverting alone left a near-black sphere on a near-black field.
     Lift the midtones and push contrast so the landmass dots read,
     then a soft ring behind it so the silhouette separates from the
     background rather than dissolving into it. */
  filter:invert(1) hue-rotate(180deg) brightness(1.45) contrast(1.25);
}
.gate--dark .globe::after{
  content:"";position:absolute;inset:-6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(79,171,255,.16),transparent 72%);
  animation:gateGlow 9s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .gate--dark .globe::after{animation:none} }
.gate--dark .globe__label,.gate--dark .globe__foot{color:var(--g-faint)}
.gate--dark .globe__legend li{color:var(--g-dim);border-bottom-color:var(--g-line)}
.gate--dark .globe__legend b{color:var(--g-ink)}
.gate--dark .live-now{color:var(--g-dim)}

/* ── entrance motion ─────────────────────────────────────────────
   Staggered rise for the panel's own children, so the screen
   assembles instead of appearing. Purely decorative, so it is fully
   disabled under prefers-reduced-motion below. */
@keyframes gateRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gateGlow{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.06)}
}
.gate--dark .gate__panel > *{animation:gateRise .7s cubic-bezier(.16,1,.3,1) backwards}
.gate--dark .gate__panel > *:nth-child(1){animation-delay:.05s}
.gate--dark .gate__panel > *:nth-child(2){animation-delay:.14s}
.gate--dark .gate__panel > *:nth-child(3){animation-delay:.23s}
.gate--dark .gate__panel > *:nth-child(4){animation-delay:.32s}
.gate--dark .gate__panel > *:nth-child(5){animation-delay:.41s}
.gate--dark .gate__visual{animation:gateRise .9s cubic-bezier(.16,1,.3,1) .5s backwards}

/* A slow breathing halo behind the sign-in button, so the centre of
   the screen is never completely static. */
.gate--dark .gate__actions{position:relative}
.gate--dark .gate__actions::before{
  content:"";position:absolute;inset:-40% -25%;z-index:-1;
  background:radial-gradient(closest-side,rgba(79,171,255,.22),rgba(7,110,255,.10) 55%,transparent 75%);
  animation:gateGlow 7s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .gate--dark .gate__panel > *,
  .gate--dark .gate__visual,
  .gate--dark .gate__actions::before{animation:none}
}

@media (max-width:720px){
  .gate--dark .gate__grid{gap:var(--s-12);padding-block:var(--s-12)}
}

/* ══ Header: one line, bolder, quieter ═══════════════════════════
   Seven items wrapping to two lines made the masthead the busiest
   thing on the page. Five now, heavier weight, tighter tracking, and
   nowrap so it stays on one line rather than stacking. */
.nav__links{gap:var(--s-4);flex-wrap:nowrap;white-space:nowrap}
.nav__links a{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:-.01em;
  color:var(--text);
  padding:6px 2px;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a.btn{font-size:14px;letter-spacing:-.01em}
.brand__text{font-weight:700;letter-spacing:-.04em}
.nav__inner{gap:var(--s-4)}
.account{padding-left:var(--s-3);gap:var(--s-2)}

/* Below this the row genuinely cannot hold five items plus an
   account chip, so it becomes the existing mobile menu. */
@media (max-width:1080px){
  .nav__links{gap:var(--s-3)}
  .nav__links a{font-size:13.5px}
}

/* ══ Centre-aligned page ═════════════════════════════════════════
   Headings, intros and controls centre; rows of data stay left,
   because a centred table is unreadable — the eye needs a common
   left edge to scan a column of numbers. */
.section__head{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:var(--s-3);
  max-width:720px;
  margin-inline:auto;
}
.section__note{max-width:60ch;margin-inline:auto}
.filters{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.filters__row{justify-content:center}
.results{text-align:center}
.hint--foot{margin-inline:auto;text-align:center}
.wgroup__h,.wgroup__basis{text-align:center;margin-inline:auto}
.watchbar{justify-content:center}
.field--region{margin-inline:auto}
.chips{justify-content:center}
.wsource{text-align:center;margin-inline:auto}

/* Hero centres too, and the anatomy card sits under it rather than
   beside it so the column has one axis. */
.hero__grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s-12)}
.hero__copy{max-width:720px}
.hero .lede{margin-inline:auto}
.hero__cta{justify-content:center}
.hero__note{text-align:center}
.anatomy--hero{max-width:640px;width:100%;text-align:left}

/* ══ Scroll motion ═══════════════════════════════════════════════
   The reveal class already existed but was only on the hero. Now
   every section head rises as it arrives, which gives the long
   single-column page a rhythm as you scroll. */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
/* Rows arrive in sequence rather than all at once. CSS cannot count,
   so the stagger is written out — capped at twelve, after which the
   delay would be longer than anyone waits before scrolling. */
.wlist .wrow,.fest__row,.viral .vrow{animation:rowIn .45s cubic-bezier(.16,1,.3,1) backwards}
.wlist .wrow:nth-child(1),.fest__row:nth-child(1),.viral .vrow:nth-child(1){animation-delay:0ms}
.wlist .wrow:nth-child(2),.fest__row:nth-child(2),.viral .vrow:nth-child(2){animation-delay:40ms}
.wlist .wrow:nth-child(3),.fest__row:nth-child(3),.viral .vrow:nth-child(3){animation-delay:80ms}
.wlist .wrow:nth-child(4),.fest__row:nth-child(4),.viral .vrow:nth-child(4){animation-delay:120ms}
.wlist .wrow:nth-child(5),.fest__row:nth-child(5),.viral .vrow:nth-child(5){animation-delay:160ms}
.wlist .wrow:nth-child(6),.fest__row:nth-child(6),.viral .vrow:nth-child(6){animation-delay:200ms}
.wlist .wrow:nth-child(7),.fest__row:nth-child(7),.viral .vrow:nth-child(7){animation-delay:240ms}
.wlist .wrow:nth-child(8),.fest__row:nth-child(8),.viral .vrow:nth-child(8){animation-delay:280ms}
.wlist .wrow:nth-child(9),.fest__row:nth-child(9),.viral .vrow:nth-child(9){animation-delay:320ms}
.wlist .wrow:nth-child(10),.fest__row:nth-child(10),.viral .vrow:nth-child(10){animation-delay:360ms}
.wlist .wrow:nth-child(n+11),.fest__row:nth-child(n+11),.viral .vrow:nth-child(n+11){animation-delay:400ms}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .wlist .wrow,.fest__row,.viral .vrow{animation:none}
}
.brief__ainote{font-size:12.5px;color:var(--text-faint);margin-top:var(--s-4);line-height:1.5;text-align:left}
.brief__vo{font-size:15px;line-height:1.6;white-space:pre-wrap;background:var(--surface-2);border-radius:var(--r-md);padding:var(--s-4);text-align:left}