/* ==========================================================================
   BLACK ALBINISM — CORE
   Shared foundation for every world: tokens, reset, accessibility layer,
   and the primitives that keep six different design languages feeling
   like one organisation.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root{
  /* Typography scale (fluid) */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.79rem);
  --step--1: clamp(0.85rem, 0.82rem + 0.16vw, 0.95rem);
  --step-0 : clamp(1.00rem, 0.96rem + 0.22vw, 1.14rem);
  --step-1 : clamp(1.20rem, 1.12rem + 0.38vw, 1.45rem);
  --step-2 : clamp(1.44rem, 1.31rem + 0.64vw, 1.85rem);
  --step-3 : clamp(1.73rem, 1.51rem + 1.05vw, 2.36rem);
  --step-4 : clamp(2.07rem, 1.73rem + 1.68vw, 3.00rem);
  --step-5 : clamp(2.49rem, 1.96rem + 2.62vw, 3.82rem);
  --step-6 : clamp(2.99rem, 2.19rem + 4.00vw, 4.86rem);
  --step-7 : clamp(3.58rem, 2.39rem + 5.97vw, 6.19rem);
  --step-8 : clamp(4.30rem, 2.53rem + 8.85vw, 7.88rem);

  /* Spacing */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;   --sp-11: 11rem;

  /* Shape */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --dur-fast: .18s; --dur: .34s; --dur-slow: .7s;

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --header-h: 74px;

  /* Fallback world palette — every world overrides these */
  --ink: #14110f;
  --paper: #ffffff;
  --muted: #5d5750;
  --line: rgba(20,17,15,.14);
  --brand: #f2a93b;
  --brand-ink: #14110f;
  --surface: #f7f4ee;
  --focus: #1c6dd0;

  /* Fonts — each world overrides --font-display / --font-body */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.07), 0 18px 42px -18px rgba(0,0,0,.28);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.09), 0 40px 80px -32px rgba(0,0,0,.4);
}

/* ------------------------------------------------------- 2. RESET / BASE */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
h1,h2,h3,h4,h5{ font-family:var(--font-display); line-height:1.06; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
h1{ font-size:var(--step-6); }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:.07em; }
ul,ol{ margin:0 0 1em; padding-left:1.15em; }
li{ margin-bottom:.4em; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-7) 0; }
table{ border-collapse:collapse; width:100%; }

/* Focus — visible, thick, never removed */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
::selection{ background:var(--brand); color:var(--brand-ink); }

/* ------------------------------------------ 3. ACCESSIBILITY CONTROL LAYER
   Persons with albinism commonly live with low vision and photophobia.
   Text-size and contrast controls are a first-class part of this design,
   not an afterthought. Preference persists across the whole site.
   -------------------------------------------------------------------- */
html[data-scale="1"]{ font-size:112.5%; }
html[data-scale="2"]{ font-size:131.25%; }

html[data-contrast="high"]{
  --muted: var(--ink);
  --line: currentColor;
}
html[data-contrast="high"] body{ background:var(--paper); }
html[data-contrast="high"] .card,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .btn{ border-width:2px !important; }
html[data-contrast="high"] .imgph{ filter:contrast(1.15); }
html[data-contrast="high"] :where(p,li,dd,figcaption,.lede,.small){ color:var(--ink) !important; }

html[data-motion="off"] *{ animation:none !important; transition:none !important; }

.skip-link{
  position:absolute; left:var(--sp-4); top:-100px; z-index:9999;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; border-radius:var(--r-sm); font-weight:600;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:var(--sp-4); }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.a11y{ display:flex; align-items:center; gap:.35rem; }
.a11y__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  min-width:38px; height:38px; padding:0 .5rem;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--step--1); font-weight:600; line-height:1;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.a11y__btn:hover{ background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.a11y__btn[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.a11y__btn svg{ width:17px; height:17px; }

/* ------------------------------------------------------- 4. LAYOUT HELPERS */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--wrap-narrow); }
.wrap--wide{ max-width:1520px; }
.section{ padding-block:clamp(3.5rem, 8vw, 7.5rem); position:relative; }
.section--tight{ padding-block:clamp(2.5rem, 5vw, 4.5rem); }
.grid{ display:grid; gap:var(--sp-5); }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.g-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }
.split{ display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--wide-left{ grid-template-columns:1.25fr 1fr; }
  .split--wide-right{ grid-template-columns:1fr 1.25fr; }
  .split--flip > *:first-child{ order:2; }
}
.stack > * + *{ margin-top:var(--sp-4); }
.center{ text-align:center; }
.flow-narrow{ max-width:62ch; }

/* -------------------------------------------------------- 5. TYPE HELPERS */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body);
  font-size:var(--step--1); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); margin:0 0 var(--sp-4);
}
.eyebrow::before{
  content:""; width:1.9rem; height:2px; background:currentColor; display:block; flex:none;
}
.eyebrow--plain::before{ display:none; }
.lede{ font-size:var(--step-1); line-height:1.5; color:var(--muted); }
.small{ font-size:var(--step--1); color:var(--muted); }
.tiny{ font-size:var(--step--2); letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.u-brand{ color:var(--brand); }

/* --------------------------------------------------------- 6. NEEDS-INPUT
   Nothing on this site invents a number, a name, a partner or a price.
   Unconfirmed content renders as a visible, styled slot instead.
   -------------------------------------------------------------------- */
.ni{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.12em .55em;
  border:1.5px dashed color-mix(in srgb, var(--brand) 65%, transparent);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--brand) 9%, transparent);
  color:inherit;
  font-family:var(--font-body);
  font-size:.72em; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  line-height:1.35; vertical-align:middle; text-wrap:balance;
  max-width:100%;
}
.ni::before{ flex:none; }
.ni::before{ content:"◇"; font-size:.85em; opacity:.75; }
.ni--block{ display:inline-flex; margin-block:.2em; }
.ni-figure{
  display:flex; flex-direction:column; gap:.35rem; align-items:flex-start;
}
.ni-figure__slot{
  font-family:var(--font-display); font-size:var(--step-5); line-height:1;
  color:color-mix(in srgb, var(--ink) 30%, transparent);
  letter-spacing:-.03em;
}

/* --------------------------------------------------- 7. IMAGE PLACEHOLDERS
   Every image slot is designed, labelled, and drop-in replaceable.
   -------------------------------------------------------------------- */
.imgph{
  position:relative; overflow:hidden;
  aspect-ratio:var(--ratio, 4/3);
  border-radius:var(--r-md);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ph-a, var(--brand)) 90%, #000 0%) 0%,
      color-mix(in srgb, var(--ph-b, var(--ink)) 88%, transparent) 100%);
  isolation:isolate;
  display:grid; place-items:center;
}
.imgph::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(circle at 82% 88%, rgba(0,0,0,.30), transparent 52%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.055) 0 2px, transparent 2px 9px);
  mix-blend-mode:overlay;
}
.imgph::after{
  content:attr(data-label);
  position:relative; z-index:2;
  font-family:var(--font-mono); font-size:clamp(.58rem,1.1vw,.72rem);
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(4px);
  padding:.4rem .7rem; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);
  max-width:88%; text-align:center; line-height:1.4;
}
.imgph--portrait{ --ratio: 3/4; }
.imgph--square{ --ratio: 1/1; }
.imgph--wide{ --ratio: 16/9; }
.imgph--ultra{ --ratio: 21/9; }
.imgph--bare::after{ display:none; }
.imgph--tag::after{ position:absolute; top:.9rem; right:.9rem; font-size:.6rem; }
.imgph--round{ border-radius:var(--r-pill); }

/* --------------------------------------------------------- 8. BUTTONS */
.btn{
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.6rem;
  min-height:50px;
  border-radius:var(--r-pill);
  border:2px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-body);
  font-weight:700; font-size:var(--step--1); letter-spacing:.02em;
  text-decoration:none; text-align:center;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1.05em; height:1.05em; flex:none; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.btn--solid{ --btn-bg:var(--ink); --btn-fg:var(--paper); }
.btn--light{ --btn-bg:var(--paper); --btn-fg:var(--ink); }
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; border-color:rgba(255,255,255,.55); }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--sm{ padding:.55rem 1.05rem; min-height:40px; font-size:var(--step--2); }
.btn--lg{ padding:1.15rem 2.2rem; min-height:60px; font-size:var(--step-0); }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; font-size:var(--step--1); letter-spacing:.02em;
  text-decoration:none; color:var(--brand);
  border-bottom:2px solid transparent; padding-bottom:2px;
  transition:gap var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-arrow::after{ content:"→"; transition:transform var(--dur-fast) var(--ease); }
.link-arrow:hover{ gap:.7rem; border-bottom-color:currentColor; }

/* ------------------------------------------------------------- 9. CARDS */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card--link:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand); }
.card--flush{ padding:0; overflow:hidden; }
.card--flush .card__body{ padding:var(--sp-5); }
.card__kicker{ font-size:var(--step--2); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:.6rem; }
.card__title{ font-size:var(--step-2); margin-bottom:.5rem; }
.card__title a{ text-decoration:none; }
.card__title a::after{ content:""; position:absolute; inset:0; }

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem, 3vw, 2.5rem);
}

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .8rem; border-radius:var(--r-pill);
  border:1px solid var(--line);
  font-size:var(--step--2); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.chip--brand{ background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.chip--live{ background:#0f7a4d; color:#fff; border-color:transparent; }
.chip--soon{ background:transparent; color:var(--muted); border-style:dashed; }
.chip--dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

/* --------------------------------------------------- 10. REVEAL ON SCROLL */
.no-js .reveal{ opacity:1 !important; transform:none !important; }
html.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
.reveal{ opacity:1; }
html.js .reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.40s } .reveal[data-d="6"]{ transition-delay:.48s }

/* ------------------------------------------------------- 11. ROLLING HERO */
.roll{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.roll__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.5s var(--ease);
  will-change:opacity, transform;
}
.roll__slide.is-active{ opacity:1; animation:kenburns 11s linear both; }
.roll__slide .imgph{ width:100%; height:100%; border-radius:0; aspect-ratio:auto; }
@keyframes kenburns{ from{ transform:scale(1.02) } to{ transform:scale(1.13) } }
.roll__dots{ display:flex; gap:.5rem; }
.roll__dot{
  width:34px; height:4px; border-radius:2px; padding:0;
  background:rgba(255,255,255,.32); border:0;
  transition:background var(--dur) var(--ease);
}
.roll__dot[aria-current="true"]{ background:var(--brand); }

/* ----------------------------------------------------------- 12. MARQUEE */
.marquee{
  overflow:hidden; position:relative;
  border-block:1px solid var(--line);
  background:var(--surface);
}
.marquee__track{
  display:flex; width:max-content; gap:0;
  animation:slide 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee__item{
  display:flex; align-items:center; gap:.7rem;
  padding:.95rem clamp(1.2rem,3vw,2.2rem);
  font-size:var(--step--1); font-weight:600; white-space:nowrap;
  border-right:1px solid var(--line);
}
.marquee__item strong{ font-weight:800; }

/* --------------------------------------------------------- 13. WORLD BAR */
.worldbar{
  background:var(--ink); color:var(--paper);
  font-size:var(--step--2); letter-spacing:.05em;
}
.worldbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  min-height:38px; flex-wrap:wrap;
}
.worldbar a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; font-weight:700; opacity:.85; }
.worldbar a:hover{ opacity:1; text-decoration:underline; }
.worldbar__note{ opacity:.62; text-transform:uppercase; font-weight:600; }

/* ------------------------------------------------------------ 14. HEADER */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--shadow-sm); background:var(--paper); }
.site-header__in{
  display:flex; align-items:center; gap:var(--sp-5);
  min-height:var(--header-h);
}
.brandlock{ display:flex; align-items:center; gap:.75rem; text-decoration:none; flex:none; }
.brandlock__mark{ height:38px; width:auto; flex:none; transition:transform var(--dur) var(--ease); }
@media (max-width:640px){ .brandlock__mark{ height:32px; } }
.site-footer .brandlock__mark{ height:66px; }
.brandlock:hover .brandlock__mark{ transform:rotate(-8deg) scale(1.04); }
.brandlock__text{ display:flex; flex-direction:column; line-height:1.05; }
.brandlock__name{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.brandlock__sub{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85; font-weight:700; }

/* The BA mark inside a sub-world: the way home. */
.homelink{
  display:flex; align-items:center; gap:.65rem; text-decoration:none; flex:none;
  padding:.3rem .8rem .3rem .35rem; border-radius:var(--r-pill);
  border:1px solid var(--line);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.homelink:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); border-color:currentColor; }
.homelink__mark{ height:26px; width:auto; flex:none; }
.homelink__label{ font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; font-weight:800; line-height:1.2; opacity:.8; }
.homelink__label b{ display:block; font-size:.72rem; letter-spacing:.04em; opacity:1; }
.divider-v{ width:1px; height:30px; background:var(--line); flex:none; }
.worldmark{
  font-family:var(--font-display); font-weight:800;
  font-size:1.12rem; letter-spacing:-.01em; text-decoration:none; flex:none;
}

.nav{ display:none; margin-left:auto; align-items:center; gap:clamp(.5rem,1.1vw,1.05rem); }
@media (min-width:1240px){ .nav{ display:flex; } }
.nav__link{
  position:relative; text-decoration:none;
  font-size:var(--step--1); font-weight:600; letter-spacing:.01em;
  padding:.4rem 0; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--brand); transition:right var(--dur) var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ right:0; }
.nav__link[aria-current="page"]{ color:var(--accent, var(--brand)); }

/* Dropdown sections */
.nav__item{ position:relative; }
.nav__toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-body); cursor:pointer;
}
.nav__chev{ width:9px; height:6px; transition:transform var(--dur-fast) var(--ease); flex:none; }
.nav__toggle[aria-expanded="true"] .nav__chev{ transform:rotate(180deg); }
.nav__toggle[data-section-current="true"]{ color:var(--accent, var(--brand)); }
.nav__toggle[data-section-current="true"]::after{ right:0; }
.nav__sub{
  position:absolute; top:calc(100% + .7rem); left:50%;
  transform:translate(-50%, -8px);
  min-width:250px; padding:.5rem;
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  display:grid; gap:1px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index:120;
}
.nav__sub::before{
  content:""; position:absolute; left:0; right:0; top:-.7rem; height:.7rem;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub,
.nav__toggle[aria-expanded="true"] + .nav__sub{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0);
}
.nav__sub a{
  display:block; padding:.65rem .85rem; border-radius:var(--r-sm);
  font-size:var(--step--1); font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__sub a:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); }
.nav__sub a[aria-current="page"]{ color:var(--accent, var(--brand)); }
.nav__sub a[aria-current="page"]::before{ content:"→ "; }

/* Drawer groups */
.drawer__group{ margin-top:var(--sp-6); }
.drawer__group h4{
  font-family:var(--font-body); font-size:var(--step--2); letter-spacing:.16em;
  text-transform:uppercase; opacity:.6; margin-bottom:.5rem; font-weight:700;
}
.drawer__link--sub{ font-size:var(--step-1); }
.header__end{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }
@media (min-width:1240px){ .header__end{ margin-left:0; } }
.header__cta{ display:none; }
@media (min-width:560px){ .header__cta{ display:inline-flex; } }
.a11y__group{ display:none; }
@media (min-width:760px){ .a11y__group{ display:flex; } }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
  border:1px solid var(--line); border-radius:var(--r-pill);
}
@media (min-width:1240px){ .burger{ display:none; } }
.burger span{ display:block; height:2px; background:currentColor; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--paper);
  padding:calc(var(--header-h) + 2.5rem) var(--gutter) var(--sp-7);
  overflow-y:auto;
  transform:translateY(-100%);
  transition:transform .5s var(--ease-out-expo);
  visibility:hidden;
}
.drawer.is-open{ transform:translateY(0); visibility:visible; }
.drawer__link{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-size:var(--step-2); font-weight:700;
  text-decoration:none;
}
.drawer__link span{ font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; opacity:.5; font-family:var(--font-body); }
.drawer__section{ margin-top:var(--sp-6); }
.drawer__section h4{ font-size:var(--step--2); letter-spacing:.16em; text-transform:uppercase; opacity:.55; margin-bottom:.8rem; font-family:var(--font-body); }

/* -------------------------------------------------- 15. PORTAL TRANSITION
   Moving between worlds should feel like walking through a door.
   -------------------------------------------------------------------- */
.portal{
  position:fixed; inset:0; z-index:9998;
  display:grid; place-items:center;
  pointer-events:none; opacity:0;
  background:var(--portal-bg, #0b0b0c);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease-out-expo), opacity .1s linear;
}
.portal.is-on{ opacity:1; clip-path:inset(0 0 0 0); pointer-events:all; }
.portal__word{
  font-family:var(--font-display);
  font-size:clamp(2rem, 9vw, 6rem);
  letter-spacing:-.04em; font-weight:800;
  color:var(--portal-fg, #fff);
  opacity:0; transform:translateY(24px);
  transition:opacity .4s .18s var(--ease), transform .5s .18s var(--ease-out-expo);
  text-align:center; line-height:1;
}
.portal.is-on .portal__word{ opacity:1; transform:none; }
.portal__sub{
  display:block; margin-top:1rem;
  font-family:var(--font-body); font-size:var(--step--1);
  letter-spacing:.28em; text-transform:uppercase; font-weight:600;
  opacity:.6;
}
body.is-entering{ animation:fadein .7s var(--ease) both; }
@keyframes fadein{ from{ opacity:0 } to{ opacity:1 } }

/* ------------------------------------------------------- 16. WORLD DOORS */
.doors{ display:grid; gap:2px; grid-template-columns:1fr; }
@media (min-width:700px){ .doors{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1150px){ .doors{ grid-template-columns:repeat(5,1fr); } }
.door{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(240px, 34vw, 430px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--sp-5);
  text-decoration:none; color:#fff;
  background:var(--door-bg, #222);
  transition:flex var(--dur-slow) var(--ease);
}
.door::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--door-bg);
  transition:transform .8s var(--ease-out-expo), filter .5s var(--ease);
}
.door::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.door:hover::before{ transform:scale(1.08); filter:saturate(1.25) brightness(1.08); }
.door__num{ font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.2em; opacity:.7; }
.door__name{ font-family:var(--font-display); font-size:var(--step-3); font-weight:800; letter-spacing:-.02em; margin:.35rem 0 .3rem; line-height:1; }
.door__desc{ font-size:var(--step--1); opacity:.82; max-width:34ch; margin-bottom:.9rem; }
.door__go{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--step--2); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  transform:translateY(6px); opacity:0;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.door:hover .door__go, .door:focus-visible .door__go{ transform:none; opacity:1; }

/* ------------------------------------------------------------ 17. FOOTER */
.site-footer{
  background:var(--foot-bg, var(--ink));
  color:var(--foot-fg, #fff);
  padding-block:clamp(3rem,6vw,5rem) var(--sp-6);
}
.site-footer a{ color:inherit; text-decoration:none; opacity:.88; transition:opacity var(--dur-fast) var(--ease); }
.site-footer a:hover{ opacity:1; text-decoration:underline; }
.site-footer p,.site-footer .small,.site-footer li,.site-footer span{ color:inherit; }
.site-footer [style*="opacity"]{ opacity:1 !important; }
.site-footer .brandlock__sub{ opacity:.8; }

.footer__top{ display:grid; gap:var(--sp-7); grid-template-columns:1fr; }
@media (min-width:860px){ .footer__top{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer__col h4{
  font-family:var(--font-body);
  font-size:var(--step--2); letter-spacing:.16em; text-transform:uppercase;
  opacity:.78; margin-bottom:1rem; font-weight:700;
}
.footer__list{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.footer__list li{ margin:0; font-size:var(--step--1); }
.footer__bottom{
  margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between;
  font-size:var(--step--2); opacity:.85;
}
.socials{ display:flex; gap:.5rem; margin-top:1.2rem; }
.socials a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.32);
  display:grid; place-items:center; opacity:.95;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.socials a:hover{ background:var(--brand); color:var(--brand-ink); border-color:transparent; transform:translateY(-2px); opacity:1; }
.socials svg{ width:17px; height:17px; }

/* ------------------------------------------------------- 18. PAGE HEADERS */
.phead{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(4rem, 11vw, 9rem) clamp(2.5rem, 6vw, 5rem);
  color:#fff;
  background:var(--ink);
}
.phead__bg{ position:absolute; inset:0; z-index:-2; }
.phead::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.2) 100%);
}
.phead h1{ max-width:19ch; }
.phead .lede{ color:rgba(255,255,255,.82); max-width:56ch; }
.crumbs{ display:flex; gap:.5rem; flex-wrap:wrap; font-size:var(--step--2); letter-spacing:.09em; text-transform:uppercase; font-weight:700; opacity:.7; margin-bottom:var(--sp-4); }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

/* -------------------------------------------------------- 19. STAT BLOCKS */
.stats{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.stat{ background:var(--surface); padding:clamp(1.2rem,2.6vw,2rem); }
.stat__val{ font-family:var(--font-display); font-size:var(--step-5); line-height:1; letter-spacing:-.03em; display:block; margin-bottom:.5rem; }
.stat__label{ font-size:var(--step--1); color:var(--muted); display:block; }
.stat__note{ font-size:var(--step--2); color:var(--muted); display:block; margin-top:.5rem; }

/* An unconfirmed figure reads as a reserved slot. Not a zero, not a dash. */
.slot{
  display:block; width:3.1em; height:.38em; border-radius:var(--r-pill);
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb, currentColor 32%, transparent) 0 11px,
    transparent 11px 19px);
  margin:.55em 0 .8rem;
}

/* --------------------------------------------------------- 20. ACCORDION */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:1.25rem 0; text-align:left;
  font-family:var(--font-display); font-size:var(--step-1); font-weight:700;
}
.acc__btn span.ic{ flex:none; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.acc__btn[aria-expanded="true"] span.ic{ transform:rotate(45deg); background:var(--brand); border-color:transparent; color:var(--brand-ink); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out-expo); }
.acc__panel > div{ overflow:hidden; }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel p{ padding-bottom:1.4rem; max-width:70ch; color:var(--muted); }

/* ------------------------------------------------------------ 21. TIMELINE */
.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{ content:""; position:absolute; left:7px; top:.5rem; bottom:.5rem; width:2px; background:var(--line); }
.tl-item{ position:relative; padding-bottom:var(--sp-6); }
.tl-item::before{
  content:""; position:absolute; left:-2.2rem; top:.45rem;
  width:16px; height:16px; border-radius:50%;
  background:var(--brand); border:3px solid var(--paper);
  box-shadow:0 0 0 1px var(--line);
}
.tl-item__year{ font-family:var(--font-mono); font-size:var(--step--1); font-weight:700; color:var(--brand); letter-spacing:.08em; }

/* ------------------------------------------------------------- 22. FORMS */
.field{ display:grid; gap:.45rem; margin-bottom:var(--sp-4); }
.field label{ font-size:var(--step--1); font-weight:700; }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink);
  min-height:50px;
}
.field textarea{ min-height:130px; resize:vertical; }
.field .hint{ font-size:var(--step--2); color:var(--muted); }
.radio-cards{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); }
.radio-card{
  position:relative; border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:1rem; text-align:center; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  font-weight:700;
}
.radio-card input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-card:has(input:checked){ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, transparent); }
.radio-card:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:2px; }

/* -------------------------------------------------------- 23. MISC UTILS */
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.notice{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1rem 1.2rem; border-radius:var(--r-md);
  border:1.5px dashed var(--line);
  background:color-mix(in srgb, var(--brand) 7%, transparent);
  font-size:var(--step--1);
}
.notice strong{ display:block; margin-bottom:.15rem; }
.quote{ font-family:var(--font-display); font-size:var(--step-2); line-height:1.32; letter-spacing:-.02em; }
.quote__by{ font-family:var(--font-body); font-size:var(--step--1); font-weight:700; margin-top:1rem; display:block; }
.ratio-box{ position:relative; }
.overlap-up{ margin-top:clamp(-6rem,-8vw,-3rem); position:relative; z-index:2; }
.noscroll{ overflow:hidden; }

/* ==========================================================================
   24. SHOWCASE
   The teaser reel under the hero: one slide per thing the movement offers,
   each one a door into the world it belongs to. Scroll-snap so it swipes
   natively on a phone, with buttons and dots for everyone else.
   ========================================================================== */
.showcase{ position:relative; }
.showcase__head{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between;
  margin-bottom:var(--sp-5);
}
.showcase__ctrl{ display:flex; gap:.5rem; align-items:center; }
.showcase__btn{
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.showcase__btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.showcase__btn:disabled{ opacity:.3; cursor:default; }
.showcase__btn:disabled:hover{ background:none; color:inherit; border-color:var(--line); }
.showcase__btn svg{ width:16px; height:16px; }

.reel{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(280px, 84vw);
  gap:var(--sp-4);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:.5rem;
}
.reel::-webkit-scrollbar{ display:none; }
@media (min-width:760px){ .reel{ grid-auto-columns:minmax(300px, 46%); } }
@media (min-width:1180px){ .reel{ grid-auto-columns:minmax(320px, 31.5%); } }

.slide{
  scroll-snap-align:start;
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg);
  min-height:clamp(340px, 42vw, 440px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.2rem, 2.6vw, 1.8rem);
  text-decoration:none; color:#fff;
  background:var(--slide-bg, #222);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.slide:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.slide .imgph{ position:absolute; inset:0; z-index:-2; border-radius:0; }
.slide::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(8,6,4,.92) 6%, rgba(8,6,4,.55) 46%, rgba(8,6,4,.18) 100%);
}
.slide__tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border-radius:var(--r-pill);
  background:var(--slide-accent, #fff); color:var(--slide-accent-ink, #111);
  font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}
.slide__meta{
  font-size:var(--step--2); letter-spacing:.12em; text-transform:uppercase;
  font-weight:800; color:var(--slide-accent, #fff); margin-bottom:.4rem;
}
.slide__title{ font-size:var(--step-2); margin:0 0 .35rem; color:#fff; }
.slide__sub{ font-size:var(--step--1); color:rgba(255,255,255,.82); margin:0 0 1rem; max-width:32ch; }
.slide__go{
  display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  padding:.6rem 1.1rem; border-radius:var(--r-pill);
  background:var(--slide-accent, #fff); color:var(--slide-accent-ink, #111);
  font-size:var(--step--2); font-weight:800; letter-spacing:.05em;
  transition:gap var(--dur-fast) var(--ease);
}
.slide:hover .slide__go{ gap:.75rem; }
.slide__figure{
  position:relative; z-index:2; margin-bottom:auto;
  display:flex; align-items:center; gap:.9rem;
  padding:.9rem 1rem; border-radius:var(--r-md);
  background:rgba(0,0,0,.42); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  align-self:flex-start; margin-top:2.6rem;
}
.slide__figure b{ font-family:var(--font-display); font-size:var(--step-3); line-height:1; }
.slide__figure span{ font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.slide .ni{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); }

.reel__dots{ display:flex; gap:.4rem; justify-content:center; margin-top:var(--sp-5); }
.reel__dot{
  width:8px; height:8px; border-radius:50%; padding:0;
  background:color-mix(in srgb, var(--ink) 25%, transparent); border:0;
  transition:background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.reel__dot[aria-current="true"]{ background:var(--brand); width:26px; border-radius:4px; }