/* ==========================================================================
   KUPAL UNIVERSITY: site.css
   One stylesheet for the whole site. Dark all the way through.

    0. Fonts            6. Header + menu
    1. Tokens           7. Home
    2. Base             8. Officers
    3. Type             9. Gallery + lightbox
    4. Layout          10. Not found
    5. Furniture       11. Motion states + reduced motion

   Every section says which tone it is (data-tone="ink | deep | crimson");
   all three are dark. Performance notes: nothing here repaints while you
   scroll. Moving things only use transform and opacity, there is no
   backdrop blur and no full-screen overlay.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS: self-hosted, OFL. Instrument Serif for display, Geist for text,
   Geist Mono for numbers and labels.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-400-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-400-italic-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/geist.woff2) format("woff2-variations"), url(../fonts/geist.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/geist-ext.woff2) format("woff2-variations"), url(../fonts/geist-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/geist-mono.woff2) format("woff2-variations"), url(../fonts/geist-mono.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/geist-mono-ext.woff2) format("woff2-variations"), url(../fonts/geist-mono-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* the brand */
  --ink: #0D0507;
  --deep: #170A0E;
  --ink-3: #22100F;
  --paper: #F2E9DA;
  --crimson: #8E1B2D;
  --crimson-hi: #B42B40;
  --crimson-deep: #5E0F1D;
  --crimson-night: #2A0710;
  --gold: #D9B672;
  --gold-hi: #F1DDA8;
  --gold-lo: #A47D3C;

  /* the dark palette every section shares */
  --bg: var(--ink);
  --fg: #F2E9DA;
  --fg-2: rgb(242 233 218 / .66);
  --fg-3: rgb(242 233 218 / .46);
  --line: rgb(242 233 218 / .13);
  --accent: var(--gold);
  --surface: rgb(255 255 255 / .035);

  /* type */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-display: clamp(3.4rem, 1.6rem + 7.6vw, 9.75rem);
  --fs-h2: clamp(2.6rem, 1.4rem + 4.2vw, 5.75rem);
  --fs-h3: clamp(1.8rem, 1.3rem + 1.5vw, 2.75rem);
  --fs-lead: clamp(1.15rem, 1.02rem + .45vw, 1.45rem);
  --fs-body: 1.0625rem;
  --fs-label: .78rem;

  /* space: an 8-point rhythm */
  --s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: clamp(2.25rem, 1.89rem + 1.62vw, 3rem);
  --s-6: clamp(3rem, 2.27rem + 3.24vw, 4.5rem);
  --s-7: clamp(3.75rem, 2.66rem + 4.86vw, 6rem);
  --s-8: clamp(4.5rem, 2.8rem + 7.57vw, 8rem);
  --gutter: clamp(1.25rem, .55rem + 2.8vw, 3.25rem);
  --section: clamp(6rem, 3.4rem + 7.5vw, 11rem);
  --max: 1480px;
  --nav-h: 64px;
  --nav-top: clamp(.75rem, .5rem + .6vw, 1.25rem);

  /* shape */
  --r-xl: 1.75rem;
  --r-lg: 1.375rem;
  --r-md: 1rem;
  --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.32, .72, 0, 1);

  /* layers */
  --z-coin: 3;
  --z-header: 20;
  --z-menu: 40;
  --z-box: 50;
  --z-veil: 70;
}

/* the three tones: all dark, each section paints its own */
[data-tone="ink"] { background: var(--ink); }
[data-tone="deep"] {
  background:
    radial-gradient(70% 60% at 15% 0%, rgb(142 27 45 / .16) 0%, transparent 70%),
    var(--deep);
}
[data-tone="crimson"] {
  --fg-2: rgb(246 235 218 / .76);
  --fg-3: rgb(246 235 218 / .56);
  --line: rgb(246 235 218 / .2);
  --accent: var(--gold-hi);
  --surface: rgb(255 255 255 / .06);
  background:
    radial-gradient(60% 70% at 85% 30%, rgb(180 43 64 / .35) 0%, transparent 70%),
    var(--crimson-deep);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  background: var(--ink);
  color-scheme: dark;
}
body {
  min-height: 100vh;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--crimson); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.skip-link {
  position: fixed; left: var(--gutter); top: .75rem; z-index: 100;
  padding: .7rem 1.1rem; border-radius: var(--r-pill);
  background: var(--gold); color: var(--ink); font-weight: 600;
  transform: translateY(-160%); transition: transform .4s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   3. TYPE
   Display type gets room for its descenders and italic overhangs: line
   heights never go below .9, and nothing that holds a heading clips it.
   -------------------------------------------------------------------------- */
.display, .h2, .h3, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: .94; letter-spacing: -.018em; }
.h2 { font-size: var(--fs-h2); line-height: .98; letter-spacing: -.014em; }
.h3 { font-size: var(--fs-h3); line-height: 1.06; }
em { font-style: italic; }
.display em, .h2 em, h1 em, h2 em { color: var(--accent); padding-right: .04em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: -.006em;
  color: var(--fg-2);
  max-width: 33em;
  text-wrap: pretty;
}
.prose { max-width: 36em; color: var(--fg-2); text-wrap: pretty; }

/* small all-caps labels in mono */
.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.label { color: var(--fg-3); }

/* the eyebrow pill above a section title */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .55rem 1rem .55rem .8rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg);
  justify-self: start;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(217 182 114 / .2);
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, .5rem + 1.6vw, 2rem); }
.stack { display: grid; gap: var(--s-3); align-content: start; }
.head { display: grid; gap: var(--s-4); }
.head--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: var(--s-5) var(--s-6); }
@media (max-width: 899.98px) { .head--split { grid-template-columns: 1fr; gap: var(--s-3); } }

/* the little line at the very bottom of each page */
.endnote {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem;
  padding: var(--s-4) var(--gutter);
  text-align: center;
}
.endnote em { font-family: var(--font-display); font-size: 1.2em; letter-spacing: 0; text-transform: none; color: var(--fg-2); }

/* --------------------------------------------------------------------------
   5. FURNITURE: buttons, links, mounts, emblem, veil, preloader
   -------------------------------------------------------------------------- */

/* ---- buttons: pills with the icon in its own little island ---- */
.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--ink);
  --btn-icon-bg: rgb(13 5 7 / .1);
  position: relative;
  display: inline-flex; align-items: center; gap: .9rem;
  min-height: 3.5rem;
  padding: .45rem .45rem .45rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .975rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform .6s var(--ease-spring), color .5s var(--ease-out);
}
.btn::before {                               /* a fill that rises from below on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover, var(--accent));
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .6s var(--ease-spring);
}
.btn:hover::before { transform: none; }
.btn:hover { color: var(--btn-hover-fg, var(--btn-fg)); }
.btn:active { transform: scale(.975); }
.btn__icon {
  display: grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--btn-icon-bg);
  transition: transform .6s var(--ease-spring);
}
.btn__icon svg { width: 1rem; height: 1rem; }
.btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.06); }
.btn--gold { --btn-bg: var(--gold); --btn-fg: #1A0A0D; --btn-hover: var(--gold-hi); }
.btn--line {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-hover: var(--fg); --btn-hover-fg: var(--ink);
  --btn-icon-bg: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px var(--line);
}
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---- the text link: an underline that draws itself ---- */
.link {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem;
  font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .55rem) / 100% 1px no-repeat;
  transition: background-size .6s var(--ease-out);
}
.link svg { width: .95em; height: .95em; transition: transform .6s var(--ease-spring); }
.link:hover { background-size: 0 1px; background-position: 100% calc(100% - .55rem); }
.link:hover svg { transform: translate(3px, -2px); }

/* ---- the double bezel: a tray with the photo set into it ---- */
.mount {
  display: block;
  padding: .4rem;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mount__core {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - .4rem);
  background: var(--ink-3);
}
.mount__core img { width: 100%; height: 100%; object-fit: cover; }
.mount__core::after {                        /* the inner edge, so the photo reads as set in */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .1);
}

/* ---- the emblem: a turning bezel of ticks and lettering round the seal ---- */
.emblem { position: relative; aspect-ratio: 1; pointer-events: none; }
.emblem > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.emblem__ticks { color: rgb(217 182 114 / .55); animation: spin 90s steps(2700) infinite reverse; }
.emblem__text { color: var(--gold); animation: spin 48s steps(1440) infinite; }
/* (the turns move in small steps: about 30 a second, 20 on phones. A slow
   turn looks the same, and the screen is only redrawn when a step lands
   instead of on every frame of a 120-180 Hz display) */
@media (pointer: coarse), (max-width: 899.98px) {
  .emblem__ticks { animation-timing-function: steps(1800); }
  .emblem__text { animation-timing-function: steps(960); }
}
.emblem__text text { font-family: var(--font-display); fill: currentColor; }
.emblem__rims { color: rgb(217 182 114 / .45); }
.emblem__seal {
  position: absolute; inset: 25%; width: 50%; height: 50%;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(217 182 114 / .5), 0 0 0 6px rgb(217 182 114 / .06), 0 18px 50px -10px rgb(0 0 0 / .7), 0 0 60px rgb(217 182 114 / .14);
}
@keyframes spin { to { rotate: 360deg; } }

/* ---- the veil: the change between pages ----
   Two crimson doors close on the middle, a gold seam flashes where they
   meet, and the seal turns in inside a ring of ticks that draws itself.
   On the new page the seal spins away and the doors open from the middle. */
.veil { --mark: clamp(150px, 9rem + 6vw, 230px); position: fixed; inset: 0; z-index: var(--z-veil); pointer-events: none; visibility: hidden; }
.veil.is-busy { pointer-events: auto; }
.veil__door { position: absolute; top: 0; bottom: 0; width: 50%; will-change: transform; }
.veil__door--l { left: 0; width: calc(50% + 1px); background: linear-gradient(90deg, #2A0710 0%, var(--crimson-deep) 85%, #6B1222 100%); }
.veil__door--r { right: 0; background: linear-gradient(270deg, #2A0710 0%, var(--crimson-deep) 85%, #6B1222 100%); }
.veil__seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: linear-gradient(180deg, transparent, var(--gold-hi) 30%, #fff8e6 50%, var(--gold-hi) 70%, transparent); opacity: 0; transform: scaleY(0); will-change: transform, opacity; }
.veil__mark { position: absolute; left: 50%; top: 45%; width: var(--mark); aspect-ratio: 1; translate: -50% -50%; }
.veil__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; will-change: transform; }
.veil__ring circle { fill: none; stroke: var(--gold); stroke-width: .7; }
.veil__ticks line { stroke: rgb(241 221 168 / .85); stroke-width: .8; stroke-linecap: round; }
.veil__seal { position: absolute; inset: 22%; display: block; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgb(217 182 114 / .65), 0 0 0 5px rgb(217 182 114 / .08), 0 0 50px rgb(217 182 114 / .3); will-change: transform; }
.veil__seal img { width: 100%; height: 100%; }
.veil__shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgb(255 248 230 / .8), transparent); }
.veil__label { position: absolute; left: 0; right: 0; top: calc(45% + var(--mark) * .5 + 1.1rem); display: grid; justify-items: center; gap: .55rem; text-align: center; color: var(--paper); }
.veil__mask { display: block; overflow: clip; padding: .02em .12em .18em; }
.veil__word { display: block; font-family: var(--font-display); font-size: clamp(2.3rem, 1.5rem + 3vw, 4.5rem); line-height: 1.05; letter-spacing: -.01em; will-change: transform; }
.veil__sub { opacity: 0; color: rgb(242 233 218 / .72); }
/* the starting positions are set by js/site.js; arriving from another page,
   it starts closed */
.is-arriving .veil { visibility: visible; }
.is-arriving .veil__door { transform: none; }
.is-arriving .veil__seal { transform: none; }
.is-arriving .veil__ring { opacity: 1; }
.is-arriving .veil__word { transform: none; }
.is-arriving .veil__sub { opacity: 1; }
.is-arriving .veil__seam { opacity: .55; transform: none; }    /* the line where the doors meet, right through the seal */

/* ---- the intro: a title sequence on the first visit of a session ----
   Six scenes over about twenty seconds. Every moving part changes only
   transform or opacity (the ring strokes are the one exception: a small
   SVG drawing itself). */
.intro {
  --ring: min(60vh, 74vw, 600px);
  --cy: 46%;
  --bar: 7vh;
  position: fixed; inset: 0; z-index: 75;
  display: none;
  overflow: hidden;
  color: var(--paper);
  background: radial-gradient(55% 55% at 50% 46%, rgb(94 15 29 / .55) 0%, transparent 72%), var(--ink);
}
.is-intro .intro { display: block; }
.is-intro .coin-stage { z-index: 80; }
.intro__bar { position: absolute; z-index: 6; left: 0; right: 0; height: var(--bar); background: #000; }
.intro__bar--t { top: 0; }
.intro__bar--b { bottom: 0; }
.intro__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); padding-inline: var(--gutter); pointer-events: none; }
.intro__grid i { border-left: 1px solid rgb(242 233 218 / .07); transform-origin: 50% 0; }
.intro__grid i:last-child { border-right: 1px solid rgb(242 233 218 / .07); }
.intro__slate {
  position: absolute; z-index: 7; inset: calc(var(--bar) + 1.25rem) var(--gutter);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto;
  pointer-events: none;
}
.intro__slate .label { color: rgb(242 233 218 / .7); }
.intro__tr { justify-self: end; }
.intro__bl { grid-row: 3; align-self: end; }
.intro__tc, .intro__scene { color: var(--gold); font-variant-numeric: tabular-nums; }

/* scenes 1-2: the ring */
.intro__stage { position: absolute; z-index: 1; left: 50%; top: var(--cy); width: var(--ring); aspect-ratio: 1; translate: -50% -50%; }
.intro__line { position: absolute; left: -6%; right: -6%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hi) 30%, var(--gold-hi) 70%, transparent); transform: scaleX(0); }
.intro__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__ring circle { fill: none; stroke: var(--gold); stroke-width: .55; }
.intro__ticks line { stroke: rgb(217 182 114 / .65); stroke-width: .5; stroke-linecap: round; }
.intro__letters text { font-family: var(--font-display); font-size: 7.4px; fill: var(--gold-hi); }
.intro__window {
  position: absolute; inset: 21%;
  border-radius: 50%; overflow: hidden;
  clip-path: circle(50% at 50% 50%);      /* some phones ignore the rounded corners above for moving pictures */
  background: var(--ink-3);
  transform: scale(0);
}
.intro__window::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(217 182 114 / .55); pointer-events: none; }
.intro__window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.intro__tint { position: absolute; inset: 0; background: var(--crimson); mix-blend-mode: multiply; opacity: 0; }
.intro__seal { position: absolute; inset: 14%; width: 72%; height: 72%; opacity: 0; }
.intro__burst { position: absolute; left: 50%; top: 50%; }
.intro__burst i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-hi); opacity: 0; }
.intro__word {
  position: absolute; z-index: 1; top: var(--cy); translate: 0 -50%;
  overflow: clip; padding: .06em .12em .2em;
  font-family: var(--font-display);
  font-size: clamp(3rem, .5rem + 7.2vw, 9.5rem);
  line-height: 1.05;
  white-space: nowrap;
  pointer-events: none;
}
.intro__word span { display: block; }
.intro__word--l { right: calc(50% + var(--ring) * .5 + 1.5vw); text-align: right; color: transparent; -webkit-text-stroke: 1px rgb(241 221 168 / .85); }
.intro__word--r { left: calc(50% + var(--ring) * .5 + 1.5vw); font-style: italic; color: var(--gold); }

/* scene 3: the words, on three cards that wipe in over each other */
.intro__type { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intro__card { position: absolute; inset: 0; overflow: hidden; visibility: hidden; will-change: transform; }
.intro__card-in { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; will-change: transform; }
.intro__card--crimson .intro__card-in { background: radial-gradient(70% 80% at 30% 40%, var(--crimson-hi), var(--crimson-deep) 70%); }
.intro__card--ink .intro__card-in { background: radial-gradient(60% 60% at 50% 50%, #2C0B13, var(--ink) 75%); }
.intro__card--gold .intro__card-in { background: linear-gradient(160deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--ink); }
.intro__words { display: grid; justify-items: center; will-change: transform; }
.intro__huge { font-family: var(--font-display); font-size: clamp(5rem, 1.5rem + 17vw, 21rem); line-height: 1; letter-spacing: -.035em; overflow: clip; padding: 0 .12em .14em; white-space: nowrap; }
.intro__huge--line { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.intro__sub { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 1rem + 4.4vw, 5.5rem); line-height: 1.15; color: var(--gold-hi); overflow: clip; padding: 0 .12em .18em; margin-top: -.25em; }
.intro__huge span, .intro__sub span { display: inline-block; will-change: transform; }
.intro__card--gold .intro__sub { color: var(--crimson-deep); }

/* scene 4: the wall of photos */
.intro__mosaic {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px;
  padding: calc(var(--bar) + 10px) 10px;
  visibility: hidden; pointer-events: none;
  will-change: transform;
}
.intro__mosaic figure { margin: 0; overflow: hidden; border-radius: 12px; clip-path: inset(0 round 12px); background: var(--ink-3); will-change: transform; }
.intro__mosaic img { width: 100%; height: 100%; object-fit: cover; }

/* scene 5: MY KU LIFE, three shots wiping over each other */
.intro__game { position: absolute; inset: 0; z-index: 2; visibility: hidden; pointer-events: none; overflow: hidden; }
.intro__shot { position: absolute; inset: 0; overflow: hidden; visibility: hidden; will-change: transform; }
.intro__shot-in { position: absolute; inset: 0; will-change: transform; }
.intro__shot img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.intro__game::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(13 5 7 / .5), transparent 28%, transparent 50%, rgb(13 5 7 / .88)); pointer-events: none; }
.intro__game-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: calc(var(--bar) + clamp(1.5rem, 4vh, 3rem)); display: grid; gap: clamp(.25rem, .8vh, .6rem); }
.intro__game-copy p { margin: 0; overflow: clip; }
.intro__game-copy p > span { display: inline-block; will-change: transform; }
.intro__game-tag { color: var(--gold-hi); }
.intro__game-tag i { display: inline-block; width: .6em; height: .6em; margin-right: .6em; border-radius: 50%; background: #E0443E; box-shadow: 0 0 0 3px rgb(224 68 62 / .25); vertical-align: 0; }
.intro__game-name { font-family: var(--font-display); font-size: clamp(3.2rem, 1rem + 10vw, 12rem); line-height: 1; letter-spacing: -.02em; padding-bottom: .06em; }
.intro__game-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, .8rem + 2.2vw, 3rem); line-height: 1.2; color: var(--gold-hi); padding-bottom: .14em; }

/* scene 7: two rows of photos racing past each other, the last line between them */
.intro__rows { position: absolute; inset: 0; z-index: 2; visibility: hidden; pointer-events: none; overflow: hidden; will-change: transform; }
.intro__rows-in {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: center;
  padding: calc(var(--bar) + 2.5vh) 0;
  background: radial-gradient(70% 60% at 50% 50%, #3A0A15, var(--ink) 75%);
  will-change: transform;
}
.intro__row { justify-self: start; display: flex; gap: clamp(8px, 1vw, 14px); width: max-content; will-change: transform; }
.intro__row figure { margin: 0; flex: none; height: clamp(110px, 24vh, 270px); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; clip-path: inset(0 round 12px); background: var(--ink-3); }
.intro__row img { width: 100%; height: 100%; object-fit: cover; }
.intro__rows-title { display: grid; justify-items: center; margin: 0; text-align: center; font-family: var(--font-display); font-size: clamp(2.8rem, 1rem + 7vw, 8.5rem); line-height: 1.02; letter-spacing: -.02em; white-space: nowrap; }
.intro__rows-title em { color: var(--gold); padding-right: .06em; }
.intro__rows-title > span { display: block; overflow: clip; padding: .02em .1em .16em; margin: -.02em -.1em -.16em; }
.intro__rows-title > span > span { display: inline-block; }

/* scene 6: the council */
.intro__council { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); visibility: hidden; pointer-events: none; overflow: hidden; }
.intro__panel { position: relative; margin: 0; overflow: hidden; background: #0D0A2A; will-change: transform; }
.intro__panel + .intro__panel { box-shadow: -1px 0 0 rgb(217 182 114 / .45); }
.intro__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.intro__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(13 5 7 / .75) 0%, transparent 26%, transparent 52%, rgb(13 5 7 / .95) 100%); }
.intro__panel figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(var(--bar) + 5.5rem); padding: 0 1.2rem; display: grid; gap: .4rem; }
.intro__panel figcaption .label { color: var(--gold-hi); }
.intro__panel b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, .8rem + 2vw, 3.2rem); line-height: 1.12; }

/* the way in: the whole screen is the button. One tap starts the intro and
   the music together. */
.enter {
  position: absolute; inset: 0; z-index: 9;
  display: none; place-content: center; justify-items: center; gap: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  padding: var(--gutter); text-align: center; color: var(--paper); cursor: pointer;
  background: radial-gradient(55% 55% at 50% 46%, rgb(94 15 29 / .55) 0%, transparent 72%), var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.intro-gate .enter { display: grid; }
.enter .emblem { width: clamp(200px, 9rem + 18vw, 320px); margin-bottom: clamp(.25rem, 1vw, .75rem); }
.enter__name { font-family: var(--font-display); font-size: clamp(2.8rem, 1rem + 8vw, 5.75rem); line-height: 1.02; letter-spacing: -.015em; }
.enter__name em { color: var(--gold); padding-right: .06em; }
.enter__cue { display: inline-flex; flex-direction: column; align-items: center; gap: .8rem; color: var(--gold-hi); }
.enter__cue i { width: 1px; height: 2.6rem; background: linear-gradient(var(--gold), transparent); transform-origin: 50% 0; animation: enter-cue 1.8s var(--ease-io) infinite; }
@keyframes enter-cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.enter:focus-visible { outline: none; }

/* while the script runs the intro, the safety fade below stays off */
.intro-live .intro { animation: none !important; }
/* until the first click lets the browser play sound, a quiet note in the frame */
.intro__hear {
  position: absolute; z-index: 8; left: 50%; bottom: calc(var(--bar) * .5); translate: -50% 50%;
  display: inline-flex; align-items: center; gap: .6rem; margin: 0;
  color: var(--gold-hi); white-space: nowrap; pointer-events: none; visibility: hidden;
}
.intro__hear svg { width: 1.1rem; height: 1.1rem; flex: none; }
html:not(.sound-wait) .intro__hear { display: none; }

/* scene 6: the medallion and the name */
.intro__title { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--cy) + var(--ring) * .44); display: grid; justify-items: center; gap: 1.1rem; text-align: center; pointer-events: none; visibility: hidden; }
.intro__name { font-family: var(--font-display); font-size: clamp(3rem, 1rem + 6.4vw, 8.5rem); line-height: 1.02; letter-spacing: -.02em; white-space: nowrap; }
.intro__name em { color: var(--gold); padding-right: .06em; }
.intro__name > span { display: inline-block; overflow: clip; padding: .02em .1em .2em; margin: -.02em -.1em -.2em; vertical-align: top; }
.intro__name > span > span { display: inline-block; }
.intro__tag { opacity: 0; color: rgb(242 233 218 / .7); }
.intro__flash { position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle at 50% var(--cy), #FFF8E8 0%, rgb(241 221 168 / .96) 28%, rgb(217 182 114 / .92) 60%, rgb(140 100 48 / .9) 100%); opacity: 0; pointer-events: none; will-change: opacity; }

.intro__skip {
  position: absolute; z-index: 8; right: var(--gutter); bottom: calc(var(--bar) + 1rem);
  display: inline-flex; flex-direction: column; gap: .5rem; align-items: stretch;
  padding: .7rem 1.1rem .6rem;
  border-radius: var(--r-md);
  background: rgb(13 5 7 / .55);
  box-shadow: inset 0 0 0 1px rgb(242 233 218 / .18);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
  color: rgb(242 233 218 / .85);
  transition: background-color .3s, color .3s;
}
.intro__skip:hover { background: var(--gold); color: var(--ink); }
.intro__skip i { display: block; height: 1px; background: rgb(242 233 218 / .2); overflow: hidden; }
.intro__skip i b { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }
@media (max-width: 899.98px) {
  .intro { --ring: min(78vw, 46vh); --cy: 44%; --bar: 6vh; }
  .intro__word { left: 50% !important; right: auto !important; translate: -50% 0; text-align: center; font-size: clamp(2.5rem, 11vw, 4.5rem); }
  .intro__word--l { top: calc(var(--cy) - var(--ring) * .5 - 1.4em); }
  .intro__word--r { top: calc(var(--cy) + var(--ring) * .5 + .3em); }
  .intro__name { font-size: clamp(2.4rem, 11.5vw, 4.2rem); }
  .intro__bl { display: none; }
  .intro__huge { font-size: clamp(4rem, 25vw, 9rem); }
  .intro__mosaic { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; padding-inline: 6px; }
  .intro__mosaic figure { border-radius: 8px; clip-path: inset(0 round 8px); }
  .intro__panel figcaption { bottom: calc(var(--bar) + 5rem); padding: 0; justify-items: center; }
  .intro__tr-text { display: none; }
  .intro__panel figcaption .label { display: none; }
  .intro__game-copy { bottom: calc(var(--bar) + 4.75rem); }     /* clear of the Skip button */
  .intro__panel b { writing-mode: vertical-rl; rotate: 180deg; font-size: 1.7rem; }
}

/* --------------------------------------------------------------------------
   6. HEADER: a floating island; and the full-screen menu
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; z-index: var(--z-header);
  top: var(--nav-top); left: 0; right: 0;
  padding-inline: var(--gutter);
  pointer-events: none;
  transition: transform .8s var(--ease-spring);
}
.site-header.is-hidden { transform: translateY(calc(-100% - var(--nav-top) - 8px)); }
.island {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-2);
  max-width: var(--max); height: var(--nav-h);
  margin-inline: auto;
  padding: 0 .5rem 0 .65rem;
  border-radius: var(--r-pill);
  background: rgb(18 8 11 / .9);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgb(0 0 0 / .6);
}
.brand { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding-right: .5rem; }
.brand img { width: 42px; height: 42px; transition: rotate 1.2s var(--ease-spring); }
.brand:hover img { rotate: 360deg; }
.brand__name { display: grid; gap: .3rem; line-height: 1; }
.brand__name b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.05; }
/* phones: a tighter bar, so the name, Trailer, Sound and the menu fit on one
   line; on the smallest phones (under 360px) the seal stands in for the name */
@media (max-width: 479.98px) {
  .site-header { padding-inline: .75rem; }
  .island { gap: .5rem; padding-left: .5rem; padding-right: .4rem; }
  .brand { gap: .5rem; padding-right: 0; min-width: 2.75rem; }
  .brand img { width: 36px; height: 36px; }
  .brand__name b { font-size: 1.12rem; white-space: nowrap; }
  .island__end { gap: .35rem; }
}
@media (max-width: 359.98px) { .brand__name { display: none; } }
.brand__name small { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }

.nav { display: flex; gap: .25rem; margin-inline: auto; }
.nav a {
  position: relative;
  padding: .6rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 450;
  color: var(--fg-2);
  transition: color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.nav a:hover { color: var(--fg); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--fg); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: .3rem;
  width: 4px; height: 4px; border-radius: 50%; translate: -50% 0;
  background: var(--accent);
}
.island__end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
/* wide screens: the pages sit in the true middle of the bar, whatever the
   widths of the name on the left and the buttons on the right */
@media (min-width: 900px) {
  .island { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .nav { justify-self: center; margin-inline: 0; }
  .island__end { justify-self: end; margin-left: 0; }
}
/* the Sound switch: four bars that dance while the music plays */
.sound {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.9rem; padding: 0 1rem 0 .95rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2);
  transition: color .3s, background-color .3s;
}
.sound:hover { color: var(--fg); background: var(--surface); }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound__bars i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.22); transition: transform .4s var(--ease-out); }
.sound.is-on { color: var(--gold-hi); }
.sound.is-on .sound__bars i { transform: scaleY(.5); }
.sound.is-playing .sound__bars i { transition: none; }          /* js sets each bar to the music's level */
@media (max-width: 899.98px) { .sound { width: 3rem; height: 3rem; min-height: 0; padding: 0; justify-content: center; } .sound__text { display: none; } }
/* watch the intro again */
.replay {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.9rem; padding: 0 1.05rem 0 .9rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2);
  transition: color .3s, background-color .3s;
}
.replay:hover { color: var(--gold-hi); background: var(--surface); }
.replay__icon { width: .85rem; height: .85rem; flex: none; transition: transform .5s var(--ease-spring); }
.replay:hover .replay__icon { transform: scale(1.18); }
@media (max-width: 899.98px) { .replay { width: 3rem; height: 3rem; min-height: 0; padding: 0; justify-content: center; } .replay__text { display: none; } .replay__icon { width: 1rem; height: 1rem; } }
@media (max-width: 479.98px) { .replay, .sound, .island .burger { width: 2.75rem; height: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .replay { display: none; } }
/* mid-size screens: Trailer and Sound show just their icons, so the pages
   can stay in the middle of the bar */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .replay, .sound { width: 2.9rem; height: 2.9rem; min-height: 0; padding: 0; justify-content: center; }
  .replay__text, .sound__text { display: none; }
  .replay__icon { width: 1rem; height: 1rem; }
  .brand__name small { display: none; }
}
.island .btn { min-height: 2.9rem; padding: .3rem .3rem .3rem 1.15rem; font-size: .9rem; gap: .7rem; }
.island .btn__icon { width: 2.3rem; height: 2.3rem; }

/* the menu button: two lines that fold into an X */
.burger { position: relative; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 1.5px; border-radius: 2px;
  background: currentColor;
  translate: -50% -50%;
  transition: transform .6s var(--ease-spring), rotate .6s var(--ease-spring);
}
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(2) { transform: translateY(4px); }
.menu-open .burger span:nth-child(1) { transform: none; rotate: 45deg; }
.menu-open .burger span:nth-child(2) { transform: none; rotate: -45deg; }
@media (min-width: 900px) { .island__end .burger { display: none; } }
@media (max-width: 899.98px) {
  .nav { display: none; }
  .island .btn { display: none; }
  .brand__name small { display: none; }
}

/* the menu: a crimson room with the pages in big type */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--nav-top) + var(--nav-h) + var(--s-5)) var(--gutter) var(--gutter);
  background: radial-gradient(70% 60% at 80% 20%, rgb(142 27 45 / .45) 0%, transparent 70%), var(--crimson-night);
  visibility: hidden;
  clip-path: inset(0 0 100% 0 round 0 0 2rem 2rem);
}
.menu-open .island { background: rgb(42 7 16 / .9); }
.menu__links { display: grid; align-content: center; gap: .35rem; }
.menu__links a {
  display: flex; align-items: baseline; gap: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 1.6rem + 7vw, 7.25rem);
  line-height: 1.08;
  letter-spacing: -.015em;
}
.menu__links a > span:first-child { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; color: var(--gold); }
.menu__mask { display: block; overflow: clip; padding: .02em .15em .14em 0; }
.menu__word { display: inline-block; transition: transform .7s var(--ease-spring), color .4s; }
.menu__links a:hover .menu__word { transform: translateX(.16em); color: var(--gold-hi); font-style: italic; }
.menu__links a[aria-current="page"] .menu__word { font-style: italic; color: var(--gold-hi); }
.menu__foot {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between;
  padding-top: var(--s-3);
  border-top: 1px solid rgb(242 233 218 / .14);
}
.menu__foot .actions { gap: .5rem; }

/* --------------------------------------------------------------------------
   7. HOME
   -------------------------------------------------------------------------- */

/* the medallion is drawn on a small canvas that follows it around */
.coin-stage {
  position: fixed; left: 0; top: 0; z-index: var(--z-coin);
  pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease-out);
  will-change: transform;
  max-width: none; max-height: none;           /* it can be wider than a phone's screen: never squeeze it */
}
.has-coin .coin-stage { opacity: 1; }
.has-coin .coin-flat { opacity: 0; }

/* ---- 7.1 hero ---- */
.hero { position: relative; min-height: 100svh; display: grid; overflow: hidden; }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 55% at 74% 48%, rgb(142 27 45 / .45) 0%, rgb(142 27 45 / 0) 70%),
    radial-gradient(45% 45% at 8% 92%, rgb(217 182 114 / .09) 0%, transparent 70%);
}
/* gold dust: two tiles of tiny dots drifting up, moved by the compositor */
.hero__dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__dust::before, .hero__dust::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200%;
  background-repeat: repeat;
  will-change: transform;
}
.hero__dust::before {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgb(241 221 168 / .8), transparent 70%),
    radial-gradient(1px 1px at 34% 72%, rgb(217 182 114 / .6), transparent 70%),
    radial-gradient(1.2px 1.2px at 58% 34%, rgb(241 221 168 / .55), transparent 70%),
    radial-gradient(1px 1px at 81% 58%, rgb(217 182 114 / .7), transparent 70%),
    radial-gradient(1.6px 1.6px at 92% 12%, rgb(241 221 168 / .5), transparent 70%),
    radial-gradient(1px 1px at 22% 88%, rgb(217 182 114 / .5), transparent 70%);
  background-size: 420px 420px;
  animation: dust 38s steps(1140) infinite;
}
.hero__dust::after {
  background-image:
    radial-gradient(2px 2px at 18% 42%, rgb(241 221 168 / .45), transparent 70%),
    radial-gradient(1.6px 1.6px at 66% 8%, rgb(217 182 114 / .5), transparent 70%),
    radial-gradient(2.2px 2.2px at 74% 76%, rgb(241 221 168 / .35), transparent 70%),
    radial-gradient(1.4px 1.4px at 40% 52%, rgb(217 182 114 / .45), transparent 70%);
  background-size: 640px 640px;
  animation: dust-far 64s steps(1920) infinite;
}
@keyframes dust { to { transform: translateY(-420px); } }
@keyframes dust-far { to { transform: translateY(-640px); } }

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(1rem, .5rem + 1.6vw, 2rem);
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(1.5rem, 1rem + 2vw, 3rem));
  padding-bottom: clamp(1.75rem, 1rem + 2vw, 3rem);
  min-height: 100svh;
}
.hero__meta {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .6rem; }
.hero__meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero__title {
  grid-column: 1 / span 7;
  align-self: center;
  font-size: clamp(4.2rem, min(11.4vw, 24vh), 10.5rem);   /* capped so it never reaches the medallion */
  line-height: .92;
  letter-spacing: -.028em;
  padding-block: var(--s-4) var(--s-5);
  white-space: nowrap;
}
.hero__line { display: block; padding-bottom: .04em; }
.hero__line--b { padding-left: .32em; }
.hero__line em { color: var(--gold); padding-right: .08em; }
.hero__coin {
  grid-column: 8 / -1;
  align-self: center; justify-self: center;
  position: relative;
  width: min(44vh, 31vw, 540px);
  aspect-ratio: 1;
  touch-action: pan-y;
  cursor: grab;
}
.hero__coin.is-dragging { cursor: grabbing; }
.hero__coin .coin-flat { position: relative; z-index: 1; width: 100%; height: 100%; transition: opacity .6s; }
.hero__coin .emblem { position: absolute; inset: -15%; }
.hero__hint { position: absolute; left: 50%; top: calc(100% + 18%); translate: -50% 0; white-space: nowrap; opacity: 0; transition: opacity .5s var(--ease-out); }
.has-coin .hero__coin:hover .hero__hint, .has-coin .hero__coin:focus-visible .hero__hint { opacity: 1; }
@media (hover: none) { .hero__hint { display: none; } }
.hero__foot {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: end;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.hero__lede { max-width: 31em; color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.5; }
.hero__lede strong { color: var(--fg); font-weight: 500; }
.hero__cue { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; }
.hero__cue i { position: relative; display: block; width: 1px; height: 48px; overflow: hidden; background: var(--line); }
.hero__cue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%;
  background: var(--gold);
  animation: cue 2.2s var(--ease-io) 6;
}
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(240%); } }
@media (max-width: 899.98px) {
  .hero__inner { grid-template-rows: auto auto auto auto; row-gap: var(--s-3); }
  .hero__meta span:nth-child(2) { display: none; }
  .hero__coin { grid-column: 1 / -1; grid-row: 2; width: min(58vw, 34vh); margin-block: var(--s-4) var(--s-2); }
  .hero__coin .emblem { inset: -13%; }
  .hero__title { grid-column: 1 / -1; grid-row: 3; font-size: clamp(3.8rem, 19.5vw, 8.5rem); padding-block: 0 var(--s-2); }
  .hero__line--b { padding-left: 0; }
  .hero__foot { grid-row: 4; grid-template-columns: 1fr; gap: var(--s-3); }
  .hero__cue { display: none; }
}

/* ---- 7.2 marquee ---- */
.marquee { position: relative; z-index: 1; overflow: hidden; background: var(--crimson); color: var(--paper); }
.marquee__row { display: flex; width: max-content; }
.marquee__set { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: clamp(1.2rem, .8rem + 1.5vw, 2.5rem);
  padding-right: clamp(1.2rem, .8rem + 1.5vw, 2.5rem);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 5.25rem);
  line-height: 1.4;
  white-space: nowrap;
}
.marquee__item:nth-child(even) { font-style: italic; color: var(--gold-hi); }
.marquee__item::after {
  content: ""; width: .3em; height: .3em; flex: none;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.marquee__row--thin { background: var(--crimson-night); }
.marquee__row--thin .marquee__item { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; line-height: 3.4; font-style: normal; color: rgb(242 233 218 / .7); }
.marquee__row--thin .marquee__item::after { width: 5px; height: 5px; border-radius: 50%; clip-path: none; }

/* ---- 7.3 manifesto ---- */
.manifesto__stage { min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--nav-h) + var(--s-5)) var(--s-5); }
.manifesto__grid { align-items: center; row-gap: var(--s-6); }
.manifesto__coin { grid-column: 1 / span 4; justify-self: center; width: min(26vw, 360px); aspect-ratio: 1; }
.manifesto__body { grid-column: 5 / -1; gap: var(--s-4); }
.manifesto__text {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.25rem + 2.8vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.manifesto__text .is-struck { position: relative; white-space: nowrap; --strike: 1; }
.manifesto__text .is-struck::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; top: 55%; height: .07em;
  background: var(--crimson-hi);
  transform: scaleX(var(--strike)); transform-origin: left center;
}
.manifesto__text .is-accent { font-style: italic; color: var(--accent); }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fact { padding: var(--s-4) var(--s-3) 0 0; display: grid; gap: .75rem; align-content: start; }
.fact + .fact { padding-left: var(--s-4); border-left: 1px solid var(--line); }
.fact dt { order: 2; }
.fact dd { margin: 0; font-family: var(--font-display); font-size: clamp(2.75rem, 1.8rem + 3vw, 4.75rem); line-height: 1; }
@media (max-width: 899.98px) {
  .manifesto__stage { min-height: 0; padding-block: var(--section); }
  .manifesto__coin { display: none; }          /* phones: the medallion stays in the hero */
  .manifesto__body { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---- 7.4 the frame: one photo, cut into strips that slide in ----
   The strips come from above and below in turn while a line of type runs
   sideways behind them. Only transforms move, so it stays on the GPU's
   cheap path. */
.frame__stage { position: relative; height: 100svh; overflow: hidden; container-type: size; background: var(--ink); }
.frame__type {
  position: absolute; inset: 0;
  display: grid; align-content: center; gap: .1em;
  pointer-events: none;
}
.frame__big {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 1.5rem + 9vw, 11.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  white-space: nowrap;
  will-change: transform;
}
.frame__big--a { padding-left: var(--gutter); color: transparent; -webkit-text-stroke: 1px rgb(242 233 218 / .5); }
.frame__big--b { padding-left: 30vw; }
.frame__big em { color: var(--gold); }
.frame__strips { position: absolute; inset: 0; --n: 7; }
.frame__strip {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--i) * 100cqw / var(--n));
  width: calc(100cqw / var(--n) + 1px);
  overflow: hidden;
  will-change: transform;
}
.frame__strip img {
  position: absolute; top: 0; height: 100%;
  left: calc(var(--i) * -100cqw / var(--n));
  width: 100cqw; max-width: none;
  object-fit: cover;
  will-change: transform;
}
.frame__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(13 5 7 / .05) 35%, rgb(13 5 7 / .85) 100%); opacity: 0; pointer-events: none; }
.frame__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-3);
  padding: var(--s-5) var(--gutter);
}
.frame__caption .h3 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.75rem); }
.frame__caption .label { color: rgb(242 233 218 / .72); }
.js .frame__caption { opacity: 0; }
@media (max-width: 899.98px) {
  .frame__strips { --n: 5; }
  .frame__strip:nth-child(n + 6) { display: none; }
  .frame__big--b { padding-left: var(--gutter); }
}

/* ---- 7.5 moments: a sideways walk past the photos ---- */
.moments { position: relative; overflow: hidden; }
.moments__stage { position: relative; min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--nav-h) + var(--s-5)) var(--s-6); overflow: hidden; }
.moments__track {
  display: flex; align-items: center; gap: clamp(1.25rem, .8rem + 2vw, 3rem);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}
.moments__intro { width: min(29rem, 80vw); flex: none; display: grid; gap: var(--s-4); align-content: center; padding-right: var(--s-5); }
.moment { flex: none; width: clamp(18rem, min(36vw, 62vh), 40rem); }
.moment:nth-child(odd) { margin-top: 7vh; }
.moment:nth-child(even) { margin-bottom: 7vh; }
.moment .mount__core { aspect-ratio: 4 / 3; }
.moment--tall { width: clamp(15rem, min(26vw, 44vh), 28rem); }
.moment--tall .mount__core { aspect-ratio: 4 / 5; }
.moment img { transform: scale(1.18); }
.moment figcaption { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; padding: 1.1rem .5rem 0; }
.moment figcaption b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.8rem); line-height: 1.15; }
.moments__bar { position: relative; height: 1px; margin: var(--s-5) var(--gutter) 0; background: var(--line); overflow: hidden; }
.moments__bar span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.moments__count { position: absolute; right: var(--gutter); bottom: var(--s-4); }
@media (max-width: 899.98px), (prefers-reduced-motion: reduce) {
  .moments__stage { min-height: 0; padding-block: var(--section) var(--s-6); }
  .moments__track {
    width: auto; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--s-3);
    scrollbar-width: none;
  }
  .moments__track::-webkit-scrollbar { display: none; }
  .moment, .moment--tall { width: 78vw; scroll-snap-align: start; margin: 0 !important; }
  .moments__bar, .moments__count { display: none; }
}
/* phones: the intro stays put on its own row while the photos swipe under it */
@media (max-width: 899.98px) {
  .moments__track { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 78vw; column-gap: 1rem; row-gap: var(--s-5); }
  .moments__intro { grid-row: 1; grid-column: 1; position: sticky; left: 0; width: calc(100vw - 2 * var(--gutter)); padding-right: 0; }
  .moment, .moment--tall { grid-row: 2; width: auto; }
  .moment--tall .mount__core { aspect-ratio: 4 / 3; }
}

/* ---- 7.6 the council: a reel that plays each officer in turn ----
   The screen on the left shows one officer at a time (slow push-in, a light
   sweep, the name rising), the list on the right keeps pace. Hovering a
   name holds the reel on that officer. */
.council .head { margin-bottom: var(--s-6); }
.reel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: center; }
.reel__screen { padding: .4rem; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.reel__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--r-xl) - .4rem);
  background: #0D0A2A;
  isolation: isolate;
}
.reel__shot { position: absolute; inset: 0; margin: 0; visibility: hidden; will-change: transform; }
.reel__shot.is-on { visibility: visible; }
.reel__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.reel__grade { z-index: 3; } .reel__sweep { z-index: 4; } .reel__hud, .reel__title, .reel__bars { z-index: 5; }
.reel__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(13 5 7 / .55) 0%, transparent 22%, transparent 52%, rgb(13 5 7 / .92) 100%),
    radial-gradient(120% 80% at 50% 120%, rgb(142 27 45 / .5), transparent 60%);
}
.reel__sweep {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgb(241 221 168 / .22) 48%, rgb(255 248 230 / .36) 50%, rgb(241 221 168 / .22) 52%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none; will-change: transform;
}
.reel__hud { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 1.1rem 1.25rem; }
.reel__hud .label { color: rgb(242 233 218 / .8); }
.reel__rec { display: inline-flex; align-items: center; gap: .55rem; }
.reel__rec i { width: 7px; height: 7px; border-radius: 50%; background: #E0443E; box-shadow: 0 0 0 3px rgb(224 68 62 / .25); animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .25; } }
.reel__title { position: absolute; left: 0; right: 0; bottom: 2.4rem; padding: 0 1.4rem; display: grid; gap: .35rem; }
.reel__role { color: var(--gold-hi); }
.reel__name { font-family: var(--font-display); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.5rem); line-height: 1.08; overflow: clip; padding: .04em .1em .16em 0; }
.reel__name span { display: inline-block; will-change: transform; }
.reel__bars { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.1rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.reel__bars i { display: block; height: 2px; border-radius: 2px; background: rgb(242 233 218 / .22); overflow: hidden; }
.reel__bars b { display: block; height: 100%; background: var(--gold-hi); transform-origin: left; transform: scaleX(0); }

.reel__list { border-top: 1px solid var(--line); }
.council__row {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto 3rem;
  align-items: center; gap: var(--s-3);
  padding: clamp(1rem, .7rem + .8vw, 1.5rem) var(--s-2);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.council__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--crimson-deep), var(--crimson));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .8s var(--ease-spring);
}
.council__row.is-on::before { transform: none; }
.council__row.is-on .label { color: rgb(242 233 218 / .78); }
.council__who { display: grid; gap: .3rem; }
.council__name { font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 2vw, 3.25rem); line-height: 1.08; transition: transform .7s var(--ease-spring); }
.council__row.is-on .council__name { transform: translateX(.18em); font-style: italic; }
.council__go {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .7s var(--ease-spring), background-color .4s, color .4s;
}
.council__go svg { width: 1rem; height: 1rem; }
.council__row.is-on .council__go { background: var(--gold); color: var(--ink); box-shadow: none; transform: rotate(45deg); }
.council__foot { margin-top: var(--s-5); display: flex; justify-content: flex-end; }
@media (max-width: 899.98px) {
  .reel { grid-template-columns: 1fr; gap: var(--s-4); }
  .reel__frame { aspect-ratio: 4 / 4.6; }
  .council__row { grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem; gap: .75rem; padding-inline: .25rem; }
  .council__handle { display: none; }
  .council__go { width: 2.75rem; height: 2.75rem; }
}

/* ---- 7.7 the archive: columns that drift at different speeds ---- */
.archive { position: relative; overflow: hidden; }
.archive::before, .archive::after {           /* the columns fade in and out rather than being cut */
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: 26vh; pointer-events: none;
}
.archive::before { top: 0; background: linear-gradient(180deg, var(--ink) 10%, rgb(13 5 7 / 0)); }
.archive::after { bottom: 0; background: linear-gradient(0deg, var(--ink) 12%, rgb(13 5 7 / 0)); }
.archive__cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, .4rem + 1vw, 1.5rem);
  padding: var(--s-6) var(--gutter);
}
.archive__col { display: grid; gap: clamp(.75rem, .4rem + 1vw, 1.5rem); align-content: start; will-change: transform; }
.archive__col:nth-child(even) { margin-top: 22vh; }
.archive__col .mount__core { aspect-ratio: var(--ar, 4 / 5); }
.archive__over {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 50%, rgb(13 5 7 / .88) 0%, rgb(13 5 7 / .6) 55%, rgb(13 5 7 / .1) 100%);
}
.archive__card { pointer-events: auto; display: grid; justify-items: center; gap: var(--s-4); text-align: center; padding: var(--gutter); }
.archive__card .eyebrow { justify-self: center; }
.archive__card .display { font-size: clamp(3rem, 1.5rem + 6.2vw, 8rem); }
@media (max-width: 899.98px) {
  .archive__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive__col:nth-child(n + 3) { display: none; }
  .archive__col:nth-child(even) { margin-top: 12vh; }
}

/* ---- 7.8 admissions: the slip ---- */
.admit { align-items: center; row-gap: var(--s-6); }
.admit__copy { grid-column: 1 / span 5; display: grid; gap: var(--s-4); align-content: start; }
.admit__desk { grid-column: 7 / -1; perspective: 1400px; }
.steps { display: grid; border-top: 1px solid var(--line); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: var(--s-3); border-bottom: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: "0" counter(step); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; color: var(--accent); padding-top: .45rem; }
.steps strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.65rem); line-height: 1.15; }
.steps span span { display: block; margin-top: .3rem; color: var(--fg-2); }
@media (max-width: 899.98px) { .admit__copy, .admit__desk { grid-column: 1 / -1; } }

.cert {
  container-type: inline-size;
  position: relative;
  width: min(760px, 100%);
  margin-inline: auto;
  padding: 12px;
  border-radius: 6px;
  color: #241608;
  background:
    repeating-radial-gradient(circle at 50% 42%, rgb(162 133 63 / .06) 0 1px, transparent 1px 8px),
    linear-gradient(162deg, #FEFCF6 0%, #F6EFE0 58%, #EFE5D0 100%);
  box-shadow: 0 1px 2px rgb(20 2 6 / .4), 0 30px 60px -12px rgb(20 2 6 / .6), 0 70px 120px -40px rgb(20 2 6 / .7);
  transform: rotate(-2deg);
}
.cert__frame {
  position: relative;
  padding: clamp(1.1rem, 3.2cqw, 2rem) clamp(1rem, 3.6cqw, 2.4rem) clamp(1rem, 2.8cqw, 1.7rem);
  border: 1px solid rgb(162 133 63 / .55);
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgb(254 252 246 / .9), inset 0 0 0 4px rgb(162 133 63 / .3);
}
.cert__head { display: flex; align-items: center; gap: clamp(.6rem, 1.6cqw, 1rem); padding-bottom: clamp(.7rem, 1.9cqw, 1.1rem); border-bottom: 1px solid rgb(162 133 63 / .35); }
.cert__head img { width: clamp(34px, 6.4cqw, 52px); height: auto; flex: none; }
.cert__office { font-family: var(--font-mono); font-size: clamp(.6rem, 1.25cqw, .68rem); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8C6F2E; }
.cert__org { margin-top: .15rem; font-family: var(--font-display); font-size: clamp(1.05rem, 2.8cqw, 1.5rem); line-height: 1.1; color: #7A1626; }
.cert__no { margin-left: auto; text-align: right; font-family: var(--font-mono); font-size: clamp(.6rem, 1.2cqw, .66rem); line-height: 1.5; color: #9A8468; white-space: nowrap; }
.cert__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.1rem, 3.4cqw, 2.25rem); align-items: center; padding-block: clamp(1rem, 3cqw, 1.8rem); }
.cert__title-col { padding-right: clamp(1.1rem, 3.4cqw, 2.25rem); border-right: 1px solid rgb(162 133 63 / .3); }
.cert__kicker { font-family: var(--font-display); font-style: italic; font-size: clamp(.8rem, 1.9cqw, 1.05rem); color: #9A8468; }
.cert__title { margin-top: .3rem; font-family: var(--font-display); font-size: clamp(1.9rem, 6.6cqw, 3.4rem); line-height: 1.02; letter-spacing: -.015em; color: #241608; }
.cert__title em { font-style: italic; color: #8C1E30; }
.cert__sub { margin-top: .35rem; font-family: var(--font-display); font-style: italic; font-size: clamp(.9rem, 2.2cqw, 1.15rem); color: #8A7358; }
.cert__rows { display: grid; gap: clamp(.45rem, 1.3cqw, .75rem); }
.cert__row { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(.5rem, 1.3cqw, .9rem); }
.cert__row dt { font-family: var(--font-mono); font-size: clamp(.6rem, 1.25cqw, .68rem); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #9A8468; white-space: nowrap; }
.cert__row .dots { flex: 1; height: 1px; margin-bottom: .2rem; background-image: radial-gradient(circle, rgb(162 133 63 / .55) 1px, transparent 1px); background-size: 5px 1px; background-repeat: repeat-x; }
.cert__row dd { margin: 0; font-family: var(--font-display); font-size: clamp(1rem, 2.6cqw, 1.35rem); color: #241608; white-space: nowrap; }
.cert__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: clamp(.75rem, 2.1cqw, 1.2rem); border-top: 1px dashed rgb(162 133 63 / .4); }
.cert__sig { padding: 0 clamp(1.2rem, 3.4cqw, 2.2rem) .15rem 0; border-bottom: 1px solid rgb(36 22 8 / .22); font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 3.2cqw, 1.7rem); line-height: 1.2; color: #7A1626; }
.cert__sig-label { margin-top: .3rem; font-family: var(--font-mono); font-size: clamp(.6rem, 1.15cqw, .64rem); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #9A8468; }
.cert__wax {
  position: relative; display: grid; place-items: center; flex: none;
  width: clamp(44px, 8.6cqw, 68px); height: clamp(44px, 8.6cqw, 68px);
  border-radius: 47% 53% 52% 48% / 51% 47% 53% 49%;
  background: radial-gradient(circle at 34% 28%, #C93A4F 0%, #9C1F32 48%, #6E1120 100%);
  box-shadow: 0 4px 10px rgb(0 0 0 / .3), inset 0 -4px 8px rgb(0 0 0 / .4), inset 0 3px 6px rgb(255 255 255 / .2);
}
.cert__wax::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgb(255 226 176 / .35); border-radius: 50%; }
.cert__wax span { font-family: var(--font-display); font-size: clamp(.8rem, 1.9cqw, 1.1rem); letter-spacing: .04em; color: #F2D9A6; }
.coin-travels .cert__wax { background: none; box-shadow: none; }
.coin-travels .cert__wax::after, .coin-travels .cert__wax span { opacity: 0; }
.stamp {
  position: absolute; right: 22%; bottom: 13%;
  padding: .35em .8em .4em;
  border: 3px double rgb(156 34 52 / .8); border-radius: 4px;
  font-family: var(--font-mono); font-size: clamp(.85rem, 2.6cqw, 1.3rem); font-weight: 600; line-height: 1.1; letter-spacing: .16em; text-align: center;
  color: rgb(156 34 52 / .82);
  transform: rotate(-9deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.stamp small { display: block; margin-top: .2em; font-size: .42em; letter-spacing: .24em; }
.js .admit-scene .stamp { opacity: 0; }
.js .admit-scene.is-stamped .stamp { animation: stamp .5s var(--ease-out) both; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-9deg) scale(2.2); }
  60% { opacity: 1; transform: rotate(-9deg) scale(.92); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}
@container (max-width: 560px) {
  .cert__body { grid-template-columns: 1fr; gap: 1rem; }
  .cert__title-col { padding-right: 0; border-right: 0; }
  .cert__row dd { white-space: normal; text-align: right; }
  .stamp { right: auto; left: 49%; bottom: 7%; }
}

/* ---- 7.9 closing ---- */
.closing { text-align: center; padding-bottom: 0; }
.closing__inner { display: grid; justify-items: center; gap: var(--s-5); }
.closing .emblem { width: clamp(11rem, 8rem + 9vw, 16rem); }
.closing__title { font-size: clamp(4rem, 1.6rem + 11.5vw, 14.5rem); line-height: .96; letter-spacing: -.028em; padding-bottom: .06em; }
.closing__title em { color: var(--gold); }
.closing .lead { margin-inline: auto; }
.closing .actions { justify-content: center; }
.closing .endnote { margin-top: var(--section); border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   8. OFFICERS (and the head of every inner page)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(4rem, 2rem + 8vw, 9rem));
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem);
}
.page-head__grid { align-items: end; row-gap: var(--s-5); }
.page-head .eyebrow { grid-column: 1 / -1; }
.page-head h1 { grid-column: 1 / span 9; font-size: var(--fs-display); line-height: .96; letter-spacing: -.022em; padding-bottom: .05em; }
.page-head .lead { grid-column: 8 / -1; grid-row: 3; justify-self: end; }
.page-head__count { grid-column: 1 / span 6; grid-row: 3; }
.page-head::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; margin-inline: var(--gutter); background: var(--line); }
@media (max-width: 899.98px) {
  .page-head h1 { grid-column: 1 / -1; }
  .page-head .lead, .page-head__count { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

.roll { position: relative; }
.roll__card {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--nav-top) + var(--nav-h) + var(--s-4)) var(--s-5);
  background: radial-gradient(50% 60% at var(--gx, 30%) 50%, rgb(142 27 45 / .32) 0%, transparent 70%), var(--ink);
  overflow: hidden;
}
.roll__card + .roll__card { box-shadow: 0 -1px 0 var(--line), 0 -30px 60px -20px rgb(0 0 0 / .6); }
.roll__inner { position: relative; align-items: center; row-gap: var(--s-5); transform-origin: 50% 0; will-change: transform, opacity; }
.roll__portrait { grid-column: 1 / span 5; }
.roll__portrait .mount__core { aspect-ratio: 4 / 5; background: #0D0A2A; }
.roll__portrait img { object-position: 50% 30%; }
.roll__text { grid-column: 7 / -1; display: grid; gap: var(--s-3); align-content: center; }
.roll__no {
  font-family: var(--font-display); font-size: clamp(6rem, 3rem + 11vw, 14rem); line-height: .9;
  color: transparent; -webkit-text-stroke: 1px rgb(217 182 114 / .7);
  letter-spacing: -.03em;
}
.roll__role { font-size: clamp(3rem, 1.7rem + 4.4vw, 6.5rem); line-height: 1; letter-spacing: -.02em; padding-bottom: .04em; }
.roll__role em { color: var(--gold); }
.roll__who { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; }
.roll__name { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); line-height: 1.1; }
.roll__duty { font-size: var(--fs-lead); color: var(--fg-2); max-width: 27em; line-height: 1.55; }
@media (min-width: 900px) {
  .roll__card--flip .roll__portrait { grid-column: 8 / -1; grid-row: 1; }
  .roll__card--flip .roll__text { grid-column: 1 / span 6; grid-row: 1; }
}
@media (max-width: 899.98px) {
  .roll__card { position: relative; min-height: 0; padding-block: var(--s-6); }
  .roll__portrait { grid-column: 1 / -1; max-width: 26rem; }
  .roll__text { grid-column: 1 / -1; }
  .roll__no { font-size: clamp(5rem, 4rem + 8vw, 8rem); }
}

.note-band { padding-top: var(--section); }
.note-band__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.note-band .h3 { max-width: 16em; }
.note-band .endnote { margin-top: var(--section); border-top: 1px solid var(--line); }
@media (max-width: 699.98px) { .note-band__card { grid-template-columns: 1fr; } }

/* ---- the lineup: a match loading screen at the end of the roll call ----
   Five tall cards slide in from above and below in turn, each with a
   loading bar that fills to 100%; a light sweeps across as each is ready. */
.lineup {
  padding-block: var(--section) var(--s-6);
  background: radial-gradient(60% 50% at 50% 62%, rgb(142 27 45 / .32), transparent 70%), var(--ink);
}
.lineup__head { display: grid; justify-items: center; text-align: center; gap: var(--s-3); margin-bottom: var(--s-6); }
.lineup__head .eyebrow { justify-self: center; }
.lineup__status { color: var(--gold-hi); }
.lineup__row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, .3rem + .9vw, 1.25rem);
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  overflow: clip;                              /* the cards come out of the edges of the row */
}
.lineup__card { will-change: transform; }
.lineup__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #0D0A2A;
  clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.lineup__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s var(--ease-out); }
.lineup__frame:hover img, .lineup__frame:focus-visible img { transform: scale(1.06); }
.lineup__frame::after {                        /* the vignette and the double gold frame */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(13 5 7 / .8) 0%, transparent 20%, transparent 52%, rgb(13 5 7 / .96) 100%);
  box-shadow: inset 0 0 0 1px rgb(217 182 114 / .6), inset 0 0 0 5px rgb(13 5 7 / .55), inset 0 0 0 6px rgb(217 182 114 / .22);
}
.lineup__frame::before {                       /* the light that sweeps across once it's ready */
  content: ""; position: absolute; z-index: 2; top: -10%; bottom: -10%; left: 0; width: 60%;
  background: linear-gradient(100deg, transparent, rgb(255 244 220 / .38) 50%, transparent);
  transform: translateX(-170%) skewX(-12deg);
  pointer-events: none;
}
.lineup__card.is-ready .lineup__frame::before { animation: sweep 1.1s var(--ease-out) forwards; }
@keyframes sweep { to { transform: translateX(270%) skewX(-12deg); } }
.lineup__rank { position: absolute; z-index: 1; top: 1rem; left: 1rem; right: 1rem; display: flex; align-items: baseline; gap: .6rem; }
.lineup__rank b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1rem + 1.4vw, 2.6rem); line-height: 1.1; color: var(--gold-hi); }
.lineup__rank .label { color: rgb(242 233 218 / .88); font-size: .74rem; }
.lineup__plate { position: absolute; z-index: 1; left: 0; right: 0; bottom: 2.9rem; padding: 0 1rem; display: grid; gap: .35rem; }
.lineup__name { font-family: var(--font-display); font-size: clamp(1.5rem, .9rem + 1.5vw, 2.5rem); line-height: 1.12; overflow-wrap: anywhere; }
.lineup__plate .label { color: rgb(242 233 218 / .7); font-size: .72rem; overflow-wrap: anywhere; }
.lineup__load { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; }
.lineup__load i { display: block; height: 3px; background: rgb(242 233 218 / .18); overflow: hidden; }
.lineup__load b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform-origin: left; transform: scaleX(0); }
.lineup__load .label { color: var(--gold-hi); min-width: 3.4em; text-align: right; font-size: .72rem; }
@media (max-width: 899.98px) {
  .lineup__row {
    display: flex; overflow-x: auto; overflow-y: clip;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    padding-bottom: var(--s-3);
    scrollbar-width: none;
  }
  .lineup__row::-webkit-scrollbar { display: none; }
  .lineup__card { flex: none; width: 58vw; scroll-snap-align: start; }
}


/* --------------------------------------------------------------------------
   9. GALLERY + LIGHTBOX
   A mosaic of the photos at their own shapes, or an even grid; switching
   between them animates every photo to its new place.
   -------------------------------------------------------------------------- */
.wall { padding-top: var(--s-6); }
.wall__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: var(--s-4); }
.seg { position: relative; display: inline-flex; padding: .3rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
.seg__pill { position: absolute; z-index: -1; top: .3rem; bottom: .3rem; left: 0; width: 5rem; border-radius: var(--r-pill); background: var(--gold); transition: transform .6s var(--ease-spring), width .6s var(--ease-spring); }
.seg__btn { min-height: 2.75rem; padding: .65rem 1.3rem; border-radius: var(--r-pill); font-size: .9rem; font-weight: 500; line-height: 1; color: var(--fg-2); transition: color .4s var(--ease-out); }
.seg__btn:hover { color: var(--fg); }
.seg__btn.is-on { color: var(--ink); }

.wall__grid { --gap: clamp(.75rem, .4rem + 1vw, 1.5rem); }
.wall__grid.is-mosaic { columns: 3; column-gap: var(--gap); }
.wall__grid.is-mosaic .tile { break-inside: avoid; margin-bottom: var(--gap); }
.wall__grid.is-mosaic .mount__core { aspect-ratio: var(--ar); }
.wall__grid.is-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--gap) * .8); }
.wall__grid.is-grid .mount__core { aspect-ratio: 1; }
.tile { display: block; }
.tile__btn { display: block; width: 100%; text-align: left; border-radius: var(--r-lg); }
.tile .mount { border-radius: var(--r-lg); padding: .35rem; transition: box-shadow .5s var(--ease-out); }
.tile .mount__core { border-radius: calc(var(--r-lg) - .35rem); }
.tile img { transition: transform 1.1s var(--ease-out); }
.tile__btn:hover img, .tile__btn:focus-visible img { transform: scale(1.06); }
.tile__btn:hover .mount, .tile__btn:focus-visible .mount { box-shadow: inset 0 0 0 1px rgb(217 182 114 / .55); }
.tile__zoom {
  position: absolute; z-index: 1; right: .75rem; bottom: .75rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgb(13 5 7 / .6); color: var(--paper);
  box-shadow: inset 0 0 0 1px rgb(242 233 218 / .22);
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity .4s var(--ease-out), transform .6s var(--ease-spring);
}
.tile__zoom svg { width: 1rem; height: 1rem; }
.tile__btn:hover .tile__zoom, .tile__btn:focus-visible .tile__zoom { opacity: 1; transform: none; }
.wall .endnote { margin-top: var(--section); border-top: 1px solid var(--line); }
@media (hover: none) { .tile__zoom { display: none; } }
@media (max-width: 1099.98px) {
  .wall__grid.is-mosaic { columns: 2; }
  .wall__grid.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .wall__grid { --gap: .55rem; }
  .wall__grid.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile .mount { padding: .22rem; border-radius: 1rem; }
  .tile .mount__core { border-radius: .8rem; }
}

/* the viewer: the photo, arrows either side, and a strip of every photo */
.lightbox { position: fixed; inset: 0; z-index: var(--z-box); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; visibility: hidden; }
.lightbox.is-open { visibility: visible; }
.lightbox__back { position: absolute; inset: 0; background: rgb(10 3 5 / .96); opacity: 0; }
.lightbox__top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: var(--s-3) var(--gutter); }
.lightbox__stage { position: relative; display: grid; place-items: center; padding-inline: calc(var(--gutter) + 4.25rem); min-height: 0; }
.lightbox__img { max-width: min(100%, 1680px); max-height: calc(100svh - 13rem); width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8); }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox__prev { left: var(--gutter); }
.lightbox__next { right: var(--gutter); }
.lightbox__strip {
  position: relative; display: flex; gap: .5rem;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  overflow-x: auto; scrollbar-width: none;
  justify-content: safe center;
}
.lightbox__strip::-webkit-scrollbar { display: none; }
.lightbox__thumb {
  flex: none; width: 4.75rem; height: 3.25rem; border-radius: .6rem; overflow: hidden;
  opacity: .42; outline: 1.5px solid transparent; outline-offset: 2px;
  transition: opacity .3s, outline-color .3s, transform .5s var(--ease-spring);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: .8; }
.lightbox__thumb.is-on { opacity: 1; outline-color: var(--gold); transform: translateY(-3px); }
.icon-btn {
  display: grid; place-items: center; flex: none;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(242 233 218 / .16);
  transition: background-color .4s, color .4s, transform .6s var(--ease-spring);
}
.icon-btn:hover { background: var(--gold); color: var(--ink); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 599.98px) {
  .lightbox__stage { padding-inline: var(--gutter); }
  .lightbox__prev, .lightbox__next { display: none; }      /* swipe, or tap a thumbnail */
  .lightbox__thumb { width: 3.75rem; height: 2.75rem; }
}

/* --------------------------------------------------------------------------
   10. NOT FOUND
   -------------------------------------------------------------------------- */
.lost { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; text-align: center; padding-top: calc(var(--nav-h) + var(--s-5)); }
.lost__inner { display: grid; justify-items: center; align-content: center; gap: var(--s-4); padding: var(--s-5) var(--gutter); }
.lost .emblem { width: clamp(10rem, 8rem + 6vw, 13rem); }
.lost .num { font-size: .8rem; letter-spacing: .2em; color: var(--accent); }
.lost .display { font-size: clamp(3.2rem, 1.6rem + 6.5vw, 8rem); }
.lost .actions { justify-content: center; }
.lost .endnote { border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   11. MOTION STATES (what js/site.js animates from) + REDUCED MOTION
   -------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }

/* split headings: each line or letter rises out of a mask that is roomy
   enough for descenders and italics, and the split is undone afterwards */
.line-mask, .char-mask, .word-mask { overflow: clip; padding: .04em .14em .22em; margin: -.04em -.14em -.22em; }
.char-mask, .word-mask { display: inline-block; vertical-align: top; }

/* held back for the opening; if the script never arrives, they show anyway */
.is-opening [data-open], .is-opening .hero__line, .is-opening .island { opacity: 0; animation: safety-show .6s 4s forwards; }
@keyframes safety-show { to { opacity: 1; } }
.is-intro .intro { animation: safety-hide .6s 8s forwards; }
.is-arriving .veil { animation: safety-lift .6s 3s forwards; }
@keyframes safety-hide { to { opacity: 0; visibility: hidden; } }
@keyframes safety-lift { to { opacity: 0; visibility: hidden; } }

img, a { -webkit-user-drag: none; }
.hero__coin { -webkit-user-select: none; user-select: none; }
main:focus { outline: none; }

/* anything that loops forever stops while it's off screen (js toggles .is-idle) */
.is-idle, .is-idle * { animation-play-state: paused !important; }
@media (max-width: 899.98px) { .hero__dust { display: none; } }

/* --------------------------------------------------------------------------
   DEVICES: large screens scale everything up a step; phones held sideways
   get the side-by-side layouts back, sized to the short screen
   -------------------------------------------------------------------------- */
@media (min-width: 1900px) { html { font-size: 106.25%; } :root { --max: 1640px; } }
@media (min-width: 2400px) { html { font-size: 118.75%; } :root { --max: 1840px; } }

@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 520px) {
  .hero__inner { grid-template-rows: auto 1fr auto; row-gap: 0; padding-top: calc(var(--nav-top) + var(--nav-h) + .75rem); }
  .hero__meta { padding-bottom: .6rem; }
  .hero__title { grid-column: 1 / span 7; grid-row: 2; font-size: clamp(2.6rem, 16vh, 5rem); padding-block: .5rem; }
  .hero__line--b { padding-left: .3em; }
  .hero__coin { grid-column: 8 / -1; grid-row: 2; width: min(38vh, 26vw); margin: 0; }
  .hero__foot { grid-row: 3; grid-template-columns: minmax(0, 1fr) auto; padding-top: .75rem; gap: 1rem; }
  .hero__lede { font-size: 1rem; }
  .reel { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--s-4); }
  .reel__frame { aspect-ratio: 4 / 5; width: min(100%, 80svh * .8); margin-inline: auto; }
  .moment, .moment--tall { width: min(78vw, 100svh); }
  .lineup__card { width: min(58vw, 34svh); }
  .roll__card { padding-block: var(--s-5); }
  .roll__portrait { max-width: min(26rem, 60svh); }
  .manifesto__coin { width: min(40vw, 45svh); }
  .intro { --ring: min(60vh, 50vw); --cy: 50%; }
  .intro__word { font-size: clamp(1.8rem, 9vh, 3rem); }
  .intro__word--l { left: auto !important; right: calc(50% + var(--ring) * .5 + 1.5vw) !important; top: var(--cy); translate: 0 -50%; text-align: right; }
  .intro__word--r { left: calc(50% + var(--ring) * .5 + 1.5vw) !important; right: auto !important; top: var(--cy); translate: 0 -50%; text-align: left; }
  .intro__mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
  .intro__huge { font-size: clamp(3rem, 30vh, 8rem); }
  .intro__name { font-size: clamp(2rem, 11vh, 3.5rem); }
  .intro__title { top: calc(var(--cy) + var(--ring) * .4); }
  .intro__panel figcaption { bottom: calc(var(--bar) + 3.75rem); padding: 0 .8rem; justify-items: start; }
  .intro__panel b { writing-mode: horizontal-tb; rotate: 0deg; font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__dust { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .moment img { transform: none; }
  .js .frame__caption { opacity: 1; }
  .frame__shade { opacity: 1; }
}