/* ==========================================================================
   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).
     One scale for the whole site. Body text sits a step higher than most
     sites use, because a good share of the people reading this have low
     vision and should not have to zoom. The display end is deliberately
     shorter than it was: a headline that fills the screen stops being a
     headline and starts being an obstacle. */
  --step--2: clamp(0.76rem, 0.74rem + 0.10vw, 0.83rem);
  --step--1: clamp(0.89rem, 0.86rem + 0.14vw, 0.98rem);
  --step-0 : clamp(1.05rem, 1.01rem + 0.20vw, 1.18rem);
  --step-1 : clamp(1.22rem, 1.15rem + 0.32vw, 1.42rem);
  --step-2 : clamp(1.42rem, 1.31rem + 0.50vw, 1.70rem);
  --step-3 : clamp(1.65rem, 1.47rem + 0.78vw, 2.05rem);
  --step-4 : clamp(1.92rem, 1.65rem + 1.15vw, 2.48rem);
  --step-5 : clamp(2.24rem, 1.84rem + 1.70vw, 3.00rem);
  --step-6 : clamp(2.60rem, 2.02rem + 2.45vw, 3.60rem);
  --step-7 : clamp(3.00rem, 2.15rem + 3.60vw, 4.40rem);
  --step-8 : clamp(3.40rem, 2.20rem + 5.00vw, 5.40rem);

  /* 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: 84px;

  /* 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; overflow-x:clip; }
@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)); }
/* one or two cards should look like one or two cards, not fill the row */
.grid--few{ grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),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);
}
/* No rule in front of the label. It read as a dash and it is not one. */
.eyebrow::before{ content:none; }
.eyebrow--plain::before{ content: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); }

/* A slot with a real picture in it. The geometry stays exactly as designed:
   same aspect ratio, same corner radius, same place in the grid. Only the
   placeholder gradient and its label step aside. */
.imgph.is-filled{ background:none; }
.imgph.is-filled::before,
.imgph.is-filled::after{ content:none; display:none; }
.imgph.is-filled > img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  border-radius:inherit;
}
html[data-contrast="high"] .imgph.is-filled{ filter:none; }
@media (prefers-reduced-motion: no-preference){
  .imgph.is-filled > img{ transition:transform .6s var(--ease, ease); }
}

/* --------------------------------------------------------- 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--xs{ padding:.42rem .9rem; min-height:34px; font-size:.72rem; letter-spacing:.01em; border-radius:var(--r-pill); }
.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:60px; width:auto; flex:none; transition:transform var(--dur) var(--ease); }
@media (max-width:640px){ .brandlock__mark{ height:46px; } }
.site-footer .brandlock__mark{ height:104px; }
.brandlock:hover .brandlock__mark{ transform:scale(1.06); }
.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:40px; 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 h3{
  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 */
/* A page head with enough room for the photograph to be read. It is a
   picture of the work, not a texture behind a word. */
.phead{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:min(72svh, 680px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(6rem, 16vw, 11rem) clamp(2.5rem, 6vw, 4rem);
  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(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.14) 100%);
}
.phead h1{ text-shadow:0 2px 22px rgba(0,0,0,.5); }
.phead--center .lede{ margin-top:.9rem; }
.phead h1{ max-width:19ch; margin-bottom:0; }
.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; }
/* Snapping the last card to the end edge is what lets it be scrolled
   fully into view; snapping it to the start leaves it half off screen. */
.reel > :last-child{ scroll-snap-align:end; }
@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,.94) 0%, rgba(8,6,4,.88) 26%, rgba(8,6,4,.62) 48%,
    rgba(8,6,4,.26) 70%, rgba(8,6,4,0) 92%);
}
.slide__title, .slide__sub, .slide__meta{ text-shadow:0 2px 16px rgba(8,6,4,.85); }
.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 .45rem; color:#fff; line-height:1.15; }
.slide__sub{ font-size:var(--step--1); color:rgba(255,255,255,.88); margin:0 0 .9rem; max-width:34ch; line-height:1.45; }
.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; }

/* ------------------------------------------------------------- READ MORE
   Long sections stay long for the people who want them, and short for
   everyone else. Works with no JavaScript: it is a details element.
   -------------------------------------------------------------------- */
.more{ margin-top:var(--sp-4); }
.more > summary{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  list-style:none; width:fit-content;
  font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  font-weight:800; color:var(--accent);
  padding:.55rem .95rem; border:1px solid var(--line); border-radius:var(--r-pill);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.more > summary::-webkit-details-marker{ display:none; }
.more > summary::after{
  content:""; width:.5rem; height:.5rem; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
.more[open] > summary::after{ transform:translateY(1px) rotate(-135deg); }
.more > summary:hover{ background:color-mix(in srgb, var(--ink) 6%, transparent); border-color:currentColor; }
.more > summary:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }
.more > summary .more__less{ display:none; }
.more[open] > summary .more__more{ display:none; }
.more[open] > summary .more__less{ display:inline; }
.more__panel{ padding-top:var(--sp-4); }
.more[open] .more__panel{ animation:moreIn var(--dur) var(--ease) both; }
@keyframes moreIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .more[open] .more__panel{ animation:none; }
}


/* ------------------------------------------------------- CENTRED SECTIONS
   A section says what it is, then says it. Both sit on the centre line, so
   the eye starts in one place on every band of the page.
   -------------------------------------------------------------------- */
.sec-head{ text-align:center; margin:0 auto var(--sp-6); max-width:62ch; }
.sec-head .eyebrow{ justify-content:center; }
.sec-head h2, .sec-head h3{ margin:0 auto .6rem; }
.sec-head p{ margin:0 auto; color:var(--muted); }
.sec-head--wide{ max-width:78ch; }
.sec-head + .grid, .sec-head + .partners, .sec-head + .reel{ margin-top:0; }

/* A heading has to look like a heading. These sit clearly above the text
   under them rather than a half step away from it. */
h2{ font-size:var(--step-4); line-height:1.05; }
h3{ font-size:var(--step-2); line-height:1.15; }
.sec-head h2{ font-size:var(--step-5); letter-spacing:-.02em; }
.sec-head .lede, .sec-head p{ font-size:var(--step-1); line-height:1.5; }
@media (max-width:640px){
  .sec-head h2{ font-size:var(--step-4); }
}

/* ------------------------------------------------------------ LOGO WALL
   Partner marks, moving right to left, slowly, pausing when a visitor
   hovers so they can actually read one. Motion is off for anyone who has
   asked their device for less of it.
   -------------------------------------------------------------------- */
.marquee--logos{ background:transparent; border-block:1px solid var(--line); }
.marquee--logos .marquee__track{ animation-duration:48s; }
@media (prefers-reduced-motion: reduce){
  .marquee--logos .marquee__track{ animation:none; }
  .marquee--logos{ overflow-x:auto; }
}

/* Something we are building, said plainly, with no empty furniture under it. */
.soon{
  display:inline-flex; align-items:center; gap:.45rem; margin:.9rem 0 0;
  font-size:var(--step--2); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
  padding:.3rem .7rem; border:1px solid currentColor; border-radius:var(--r-pill);
}
.soon::before{
  content:""; width:.42rem; height:.42rem; border-radius:50%;
  background:currentColor; flex:none;
}

/* ---------------------------------------------------------------- VIDEO
   A player that keeps its shape at any width, loads nothing until someone
   asks for it, and sets no cookies before they do.
   -------------------------------------------------------------------- */
.vid{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-lg); background:#0B0A09;
  box-shadow:var(--shadow-md);
}
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid__note{
  margin:.75rem 0 0; font-size:var(--step--2); color:var(--muted); line-height:1.5;
}

/* ============================================================== GATEWAY
   A world that is not open yet still deserves a front door.

   The curtain lifts, the photographs behind it move, the name of the place
   fills the screen, and under it two things you can actually do today. No
   empty rooms behind it, because there is nothing behind it yet. When the
   world opens, the second button stops saying soon and opens the door.
   ===================================================================== */
.gate{
  position:relative; min-height:100svh; display:grid; place-items:center;
  text-align:center; overflow:hidden; isolation:isolate;
  padding:clamp(5rem,12vh,9rem) var(--gutter);
  color:#fff;
}
.gate__bg{ position:absolute; inset:0; z-index:-2; }
.gate::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(74% 64% at 50% 44%, rgba(8,7,10,.22) 0%, rgba(8,7,10,.84) 62%, var(--gate-ink, #08070A) 100%),
    linear-gradient(var(--gate-ink, #08070A), transparent 20%, transparent 72%, var(--gate-ink, #08070A));
}
.gate__in{ position:relative; z-index:1; max-width:62rem; }
.gate__eyebrow{
  font-size:var(--step--2); letter-spacing:.22em; text-transform:uppercase;
  font-weight:800; color:var(--gate-accent, var(--brand)); margin:0 0 1.2rem;
}
.gate__title{
  font-size:clamp(3rem, 11vw, 9rem); line-height:.86; letter-spacing:-.045em;
  margin:0; text-wrap:balance;
}
.gate__title em{ font-style:italic; color:var(--gate-accent, var(--brand)); }
.gate__sub{
  font-size:clamp(1.05rem, 2.1vw, 1.5rem); line-height:1.5;
  max-width:46ch; margin:1.6rem auto 0; color:rgba(255,255,255,.88);
}
.gate__not{
  margin:1rem auto 0; max-width:46ch;
  font-size:var(--step-0); line-height:1.5; color:rgba(255,255,255,.66);
}
.gate__acts{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center;
  margin-top:var(--sp-6);
}
.gate__soon{
  display:inline-flex; align-items:center; gap:.5rem; margin:var(--sp-5) 0 0;
  font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase;
  font-weight:800; color:rgba(255,255,255,.62);
}
.gate__soon::before{
  content:""; width:.42rem; height:.42rem; border-radius:50%;
  background:var(--gate-accent, var(--brand)); flex:none;
  animation:gatePulse 2.6s ease-in-out infinite;
}
@keyframes gatePulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .gate__soon::before{ animation:none; opacity:1; } }

/* The curtain itself, shared by every world rather than living in one. */
.curtain{ display:none; }
html.js .curtain{
  position:fixed; inset:0; z-index:9997; background:var(--gate-ink, #08070A);
  display:grid; place-items:center; pointer-events:none;
  animation:curtainUp 1.5s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)) .25s forwards;
}
.curtain span{
  font-family:var(--font-display); font-style:italic;
  color:var(--gate-accent, var(--brand));
  font-size:clamp(1.4rem,5vw,3rem); letter-spacing:.02em;
}
@keyframes curtainUp{
  0%{ clip-path:inset(0 0 0 0); opacity:1 }
  55%{ opacity:1 }
  100%{ clip-path:inset(0 0 100% 0); opacity:1; visibility:hidden }
}
@media (prefers-reduced-motion: reduce){ .curtain{ display:none !important; } }

/* The way into a world sits in the middle of the band, like everything else. */
.door{ text-align:center; }
.door__in{ margin-inline:auto; }
.door h2, .door p{ margin-inline:auto; }
.door .btn-row, .door__meta{ justify-content:center; }
.door__bg{ animation:doorDrift 30s ease-in-out infinite alternate; }
@keyframes doorDrift{ from{ transform:scale(1.03) } to{ transform:scale(1.12) translate3d(-1.5%,-1.5%,0) } }
@media (prefers-reduced-motion: reduce){ .door__bg{ animation:none } }

/* ============================================================== DOORWAY
   A piece of work big enough to have its own world, introduced inside the
   track it belongs to. Full bleed, photographic, and unmistakably a way in
   rather than a paragraph about something elsewhere.
   ===================================================================== */
.door{
  position:relative; isolation:isolate; overflow:hidden;
  color:#fff; padding:clamp(4rem,10vh,7rem) 0;
  background:var(--door-ink, #0B0F14);
}
.door__bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; opacity:.5;
}
/* A doorway is a place, and a place is more than one photograph. The set
   turns over slowly behind the words. Positive stacking throughout: a
   drifting image at a negative index is painted behind the section's own
   background and never seen. */
.door__roll{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.door__roll .roll__slide{ opacity:0; }
.door__roll .roll__slide.is-active{ opacity:1; }
.door__roll img{
  width:100%; height:100%; object-fit:cover; opacity:.5;
  animation:doorDrift 30s ease-in-out infinite alternate;
}
.door::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    var(--door-ink, #0B0F14) 8%,
    color-mix(in srgb, var(--door-ink, #0B0F14) 74%, transparent) 48%,
    color-mix(in srgb, var(--door-ink, #0B0F14) 30%, transparent) 100%);
}
.door > .wrap{ position:relative; z-index:2; }
.door__in{ max-width:58rem; }
.door__eyebrow{
  font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; color:var(--door-accent, var(--brand)); margin:0 0 .9rem;
}
/* The shorthand here used to reset margin-inline to 0, which quietly
   undid the centring set further up and left every doorway heading
   sitting left of its own centred lede. */
.door h2{ margin:0 auto .9rem; max-width:20ch; }
.door h2 em{ font-style:normal; color:var(--door-accent, var(--brand)); }
.door p{ color:rgba(255,255,255,.86); max-width:56ch; }
.door .btn-row{ margin-top:var(--sp-5); }
.door__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin:var(--sp-5) 0 0;
  padding-top:var(--sp-4); border-top:1px solid rgba(255,255,255,.18);
  font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.62);
}

/* ====================================================== THE GLOBAL PASS
   One rhythm, one hover, one set of rules, one way sections meet.
   ===================================================================== */

/* -- Rhythm. Every band breathes the same amount. The Get Involved block
      was the one that felt right, so that is the measure. */
.section{ padding-block:clamp(4.5rem, 9vh, 7rem); }
.section--tight{ padding-block:clamp(3rem, 6vh, 4.5rem); }
.sec-head{ margin-bottom:var(--sp-7); }
.sec-head h2{ margin-bottom:.5rem; }
.sec-head p{ margin-top:.5rem; }
.sec-head + *{ margin-top:0; }


/* -- Text that is not holding its breath. */
body{ text-wrap:pretty; }
p{ max-width:72ch; }
.lede{ line-height:1.45; }
h1, h2, h3, .gate__title, .hero__title{ text-wrap:balance; }

/* -- Rules in our own colours. Red first, then yellow, never black. */
.reason{ border-top:2px solid var(--brand); }
.reason::after{ background:var(--red, #E01C2D); }
hr{ border:0; height:2px; background:linear-gradient(90deg, var(--red, #E01C2D) 0 3.2rem, var(--brand) 3.2rem 100%); opacity:.5; }

/* -- One hover. Lift, shadow, a yellow edge and a breath of warmth. */
.card, .storycard, .stmt, .reachcard, .person, .player, .track, .slide{
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover, .storycard:hover, .stmt:hover, .reachcard:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--brand);
  background:
    linear-gradient(color-mix(in srgb, var(--brand) 5%, transparent),
                    color-mix(in srgb, var(--brand) 5%, transparent)),
    var(--surface, var(--paper));
}
.card--link:focus-visible, .storycard:focus-within{
  outline:3px solid var(--brand); outline-offset:3px;
}

/* -- Bands that meet rather than collide. Each one fades into the next
      instead of stopping dead at a hard line. */
.band-cream, .band-tint, .band-mint, .band-panel{ position:relative; }
.band-deep, .closer{ position:relative; }
.band-deep::before, .closer::before{
  content:""; position:absolute; left:0; right:0; top:-2px; height:3.5rem;
  background:linear-gradient(to bottom, transparent, currentColor);
  opacity:.0; pointer-events:none;
}
.section + .section--same{ padding-top:0; }

/* -- A scrollbar that is present without taking the room. */
html{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 34%, transparent) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius:999px; border:2px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--ink) 52%, transparent); background-clip:content-box; }

/* -- A header that gets out of the way going down and comes back coming up. */
.site-header{ transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.site-header.is-away{ transform:translateY(-100%); }
@media (prefers-reduced-motion: reduce){ .site-header.is-away{ transform:none; } }

/* -- Read more, as a panel over the page rather than a jump to another one. */
.modal{
  position:fixed; inset:0; z-index:9998; display:grid; place-items:center;
  padding:var(--gutter); border:0; background:transparent; max-width:none; max-height:none;
}
.modal::backdrop{ background:rgba(8,7,6,.62); backdrop-filter:blur(3px); }
.modal__box{
  background:var(--paper); color:var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg, 0 30px 80px rgba(0,0,0,.35));
  max-width:min(66rem, 100%); max-height:min(82svh, 100%); overflow:auto;
  padding:clamp(1.6rem, 4vw, 3rem);
  animation:modalIn var(--dur) var(--ease) both;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(12px) scale(.985) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .modal__box{ animation:none } }
.modal__close{
  float:right; margin:-.4rem -.4rem 0 1rem;
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid var(--line); background:var(--surface, var(--paper)); color:inherit;
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.modal__close:hover{ border-color:var(--ink); }
.modal__close:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }

/* Partner marks sit in a white disc, in their own colours, large enough to
   recognise. A logo in grey is a logo nobody reads. */
.marquee--logos{ padding-block:var(--sp-5); border-block:1px solid var(--line); }
.marquee--logos .partner{
  width:138px; height:138px; flex:none;
  margin-inline:clamp(.5rem,1.4vw,1.1rem);
  padding:20px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; min-height:0;
  box-shadow:0 2px 14px rgba(20,17,15,.09);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.marquee--logos .partner:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 12px 30px rgba(20,17,15,.18);
}
.marquee--logos .partner__logo{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:0; background:none;
  filter:none; opacity:1;
}
@media (max-width:640px){
  .marquee--logos .partner{ width:104px; height:104px; padding:14px; }
}

/* Two bands that belong together do not need a field between them. */
.section--snug{ padding-top:clamp(2.2rem, 4.5vh, 3.4rem); }

/* ---------------------------------------------------------- FILM, FRAMED
   A still of ours with a play button on it, and the player only loads when
   somebody asks for it. Faster, no third-party cookie before a click, and
   it never shows the grey rectangle a film with no thumbnail gives you.
   -------------------------------------------------------------------- */
.vid{ position:relative; }
.vid__face{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; padding:0; margin:0; cursor:pointer; display:block;
  background:#0B0A09; border-radius:inherit; overflow:hidden;
}
.vid__face img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease);
}
.vid__face::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,6,4,.62), rgba(8,6,4,.12) 60%, rgba(8,6,4,.26));
}
.vid__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(64px, 9vw, 92px); aspect-ratio:1; border-radius:50%;
  background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center; z-index:2;
  box-shadow:0 10px 36px rgba(0,0,0,.45);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vid__play svg{ width:34%; height:34%; margin-left:8%; }
.vid__label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(.9rem,2vw,1.3rem);
  font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase;
  font-weight:800; color:#fff; text-align:left;
}
.vid__face:hover img{ transform:scale(1.04); }
.vid__face:hover .vid__play{ transform:translate(-50%,-50%) scale(1.07); }
.vid__face:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .vid__face:hover img{ transform:none; }
}

/* ===================================================== CARDS, ONE WAY
   Every card on this site works the same: the photograph fills it edge to
   edge, a gradient carries the words, and a yellow edge answers the cursor.
   ===================================================================== */
.track, .slide{
  border:1px solid transparent;
}
.track:hover, .slide:hover{ border-color:var(--brand); }

/* the picture fills the card, always, whatever shape the card ends up */
.track .imgph, .slide .imgph{
  position:absolute; inset:0; z-index:-2; border-radius:0;
  aspect-ratio:auto; width:100%; height:100%;
}
.track .imgph > img, .slide .imgph > img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.track::after{
  background:linear-gradient(to top, rgba(10,8,6,.93) 0%, rgba(10,8,6,.55) 42%, rgba(10,8,6,.10) 78%);
}
.track h3, .track p, .slide__title, .slide__sub{ text-shadow:0 2px 14px rgba(8,6,4,.6); }

/* a yellow edge on anything that behaves like a card */
.card, .storycard, .stmt, .reachcard, .person, .edition, .value{
  border-color:var(--line);
}
.card:hover, .storycard:hover, .stmt:hover, .reachcard:hover, .person:hover{
  border-color:var(--brand);
}
.card{ border:1px solid var(--line); }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }

/* A rolling head can carry plain photographs as well as filled slots. */
.roll__slide > img{ width:100%; height:100%; object-fit:cover; display:block; }


/* ------------------------------------------------- CENTRING, PROPERLY
   Paragraphs carry a measure limit of 72ch. In a centred block that is a
   trap: the text looks centred inside its own box while the box itself
   hugs the left edge, so a short line lands well left of everything above
   it. Anything that centres its text has to centre its boxes too. */
.center p, .center h1, .center h2, .center h3,
.sec-head p, .nextcard p, .fhero__in p, .phead--center p, .adv p,
.edition__sub, .edition__where, .edition__count{
  margin-inline:auto;
}

/* Every world names itself in the middle of its own header, the way
   Festivals & Culture does. Festivals keeps its name on the left because
   its three page nav already holds the centre. */
.worldmark{ margin-inline:auto; }
[data-world="festivals"] .worldmark{ margin-inline:0; }