/* ============================================================================
   01 · TOKENS
   Every colour, size, duration and easing in the site is declared here.
   Nothing below this file should contain a raw hex value.
   ========================================================================== */

:root{

  /* ── Brand palette (unchanged from the original site) ───────────────────── */
  --crimson:        #A81E36;
  --crimson-lt:     #C9314C;
  --crimson-dp:     #66101E;
  --gold:           #E8C784;
  --gold-dp:        #B98F3E;
  --cream:          #FFF4E8;
  --dim:            #BFA0A6;

  /* Derived brand tones — kept as tokens so tints stay consistent */
  --gold-bright:    #FFF3D6;
  --gold-04:        rgb(232 199 132 / .04);
  --gold-08:        rgb(232 199 132 / .08);
  --gold-14:        rgb(232 199 132 / .14);
  --gold-22:        rgb(232 199 132 / .22);
  --gold-40:        rgb(232 199 132 / .40);
  --gold-70:        rgb(232 199 132 / .70);
  --crimson-14:     rgb(168 30 54 / .14);
  --crimson-24:     rgb(168 30 54 / .24);
  --crimson-40:     rgb(168 30 54 / .40);

  /* ── Ink scale — the dark ground, darkest to lightest ───────────────────── */
  --ink-900:        #0A0204;   /* deepest — page floor            */
  --ink-800:        #120407;   /* body base                       */
  --ink-700:        #1C070C;   /* body top                        */
  --ink-600:        #24090F;   /* raised surface                  */
  --ink-500:        #2E0D15;   /* hover surface                   */

  /* ── Semantic surfaces ──────────────────────────────────────────────────── */
  --surface:        rgb(255 255 255 / .028);
  --surface-2:      rgb(255 255 255 / .050);
  --surface-3:      rgb(255 255 255 / .075);
  --glass:          rgb(12 3 6 / .72);

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --text:           var(--cream);
  --text-muted:     var(--dim);
  --text-faint:     rgb(191 160 166 / .62);
  --text-accent:    var(--gold);

  /* ── Lines & edges ──────────────────────────────────────────────────────── */
  --line:           rgb(232 199 132 / .13);   /* hairline, default     */
  --line-strong:    rgb(232 199 132 / .28);   /* emphasised border     */
  --line-bright:    rgb(232 199 132 / .55);   /* hover / active border */
  --rule:           rgb(232 199 132 / .20);   /* horizontal rules      */

  /* ── Type families ──────────────────────────────────────────────────────── */
  --font-display:   "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:      "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      "DM Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* ── Type scale — fluid, 320px → 1440px viewport ────────────────────────── */
  --t-2xs:          .625rem;                                    /* 10px  */
  --t-xs:           .6875rem;                                   /* 11px  */
  --t-sm:           .8125rem;                                   /* 13px  */
  --t-base:         clamp(.9375rem, .9rem + .18vw, 1.0625rem);  /* 15→17 */
  --t-lg:           clamp(1.0625rem, 1rem + .3vw, 1.25rem);     /* 17→20 */
  --t-xl:           clamp(1.35rem, 1.2rem + .6vw, 1.75rem);
  --t-2xl:          clamp(1.75rem, 1.45rem + 1.3vw, 2.6rem);
  --t-3xl:          clamp(2.2rem, 1.7rem + 2.2vw, 3.6rem);
  --t-4xl:          clamp(2.9rem, 1.9rem + 4.4vw, 6.2rem);

  /* Tracking — academic small-caps rely on this heavily */
  --track-label:    .26em;
  --track-eyebrow:  .32em;
  --track-tight:    -.012em;

  /* ── Spacing scale — 4px base, used for every gap and pad ───────────────── */
  --s1:  .25rem;   --s2:  .5rem;    --s3:  .75rem;   --s4:  1rem;
  --s5:  1.5rem;   --s6:  2rem;     --s7:  2.5rem;   --s8:  3rem;
  --s9:  4rem;     --s10: 5rem;     --s11: 6.5rem;   --s12: 9rem;

  /* Vertical rhythm between major blocks — fluid so mobile isn't cavernous */
  --block:          clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  --block-lg:       clamp(5rem, 3rem + 7vw, 9rem);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --wrap:           1180px;
  --wrap-narrow:    760px;
  --gutter:         clamp(1.25rem, 4vw, 2.5rem);
  --header-h:       72px;              /* fixed — prevents cross-page shift */
  --measure:        68ch;

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --r-xs:  3px;    --r-sm:  6px;    --r-md: 10px;
  --r-lg:  16px;   --r-xl:  22px;   --r-pill: 999px;

  /* ── Elevation ──────────────────────────────────────────────────────────── */
  --e1: 0 1px 2px rgb(0 0 0 / .4);
  --e2: 0 8px 24px -12px rgb(0 0 0 / .8);
  --e3: 0 22px 50px -24px rgb(0 0 0 / .92);
  --e4: 0 40px 80px -36px rgb(0 0 0 / 1);
  --glow-gold:    0 0 40px -8px rgb(232 199 132 / .45);
  --glow-crimson: 0 0 60px -10px rgb(168 30 54 / .55);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --dur-1: .16s;   --dur-2: .28s;   --dur-3: .45s;   --dur-4: .7s;
  --ease:        cubic-bezier(.2, .8, .2, 1);      /* standard out       */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.2, 1.35, .4, 1);    /* overshoot          */

  /* ── Z-index ladder — one place, no guessing ────────────────────────────── */
  --z-embers:  1;
  --z-content: 2;
  --z-grain:   3;
  --z-header:  80;
  --z-fab:     90;
  --z-bar:     99;
  --z-lightbox: 140;
  --z-intro:   200;

  /* Shared asset */
  --seal: url("../assets/img/ku-seal.png");
}
/* ============================================================================
   02 · RESET & BASE
   Minimal, opinionated. Bootstrap has been removed — this is the whole reset.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html{
  /* scrollbar-gutter keeps the page the SAME width whether content overflows
     or not — this is what stops the header/footer jumping between pages. */
  scrollbar-gutter: stable;
  /* clip (not hidden) so position:sticky keeps working inside */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s5));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--text);
  background:
    radial-gradient(920px 620px at 78% -14%, var(--crimson-40), transparent 62%),
    radial-gradient(760px 520px at 2% 24%,  rgb(185 143 62 / .13), transparent 60%),
    linear-gradient(180deg, var(--ink-700), var(--ink-800) 46%, var(--ink-900));
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fine film grain over the whole page. Pointer-events off so it never blocks. */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .4;
  background-image: radial-gradient(rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: 3px 3px;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold-40); color: var(--gold-bright); }

/* Scrollbars, themed */
* { scrollbar-width: thin; scrollbar-color: var(--gold-22) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--gold-22); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--gold-40); }

/* Screen-reader only */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link — appears on first Tab */
.skip{
  position: fixed;
  top: var(--s3); left: var(--s3);
  z-index: calc(var(--z-intro) + 1);
  padding: var(--s3) var(--s5);
  background: var(--ink-600);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease);
}
.skip:focus { transform: none; }
/* ============================================================================
   03 · TYPOGRAPHY
   Three voices: display serif (Instrument), body grotesk (Manrope),
   institutional mono (DM Mono) for every label, eyebrow and numeral.
   ========================================================================== */

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
h5, h6 { font-weight: 500; }

p { text-wrap: pretty; }

/* ── Display sizes ────────────────────────────────────────────────────────── */
.display-1 { font-size: var(--t-4xl); }
.display-2 { font-size: var(--t-3xl); }
.display-3 { font-size: var(--t-2xl); }

/* Gilded italic — the signature treatment for the second word of a title */
.gilt{
  font-style: italic;
  background: linear-gradient(100deg, var(--gold-dp) 0%, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, var(--gold-dp) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gilt-sweep 9s linear infinite;
}
@keyframes gilt-sweep { to { background-position: -200% 0; } }

/* ── Eyebrow — the small tracked label above every section title ──────────── */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  max-width: 100%;
  /* Deliberately NOT nowrap: a long eyebrow on a narrow phone would set the
     min-content width of its whole grid column and push the page sideways. */
  text-wrap: balance;
}
.eyebrow::before{
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dp));
  flex: none;
}
.eyebrow--center::after{
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--gold-dp), transparent);
  flex: none;
}

/* ── Institutional label — used inside cards, dl, meta rows ───────────────── */
.label{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-dp);
}

/* ── Body helpers ─────────────────────────────────────────────────────────── */
.lead{
  font-size: var(--t-lg);
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 52ch;
}
.muted    { color: var(--text-muted); }
.measure  { max-width: var(--measure); }

/* Motto / tracked caps line */
.motto{
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-dp);
}

/* Numerals — tabular so counters and IDs never jitter mid-animation */
.num, [data-count]{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Ornamental divider: rule · diamond · rule ────────────────────────────── */
.ornament{
  display: block;
  position: relative;
  width: 140px;
  height: 1px;
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--gold-40) 50%, transparent);
}
.ornament::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold-70);
}
.ornament--left { margin-inline: 0; }

/* ── Hairline rule used between content blocks ────────────────────────────── */
.rule{
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--rule) 15%, var(--rule) 85%, transparent);
}
/* ============================================================================
   04 · LAYOUT
   The container + grid system that replaced Bootstrap.
   These four rules are what guarantee identical framing on every page.
   ========================================================================== */

/* ── Container ────────────────────────────────────────────────────────────────
   ONE container definition, used by header, main and footer alike. Because the
   width and gutter come from the same tokens, the brand mark in the header,
   the content edge in main, and the footer seal all sit on the same vertical
   line — on every page, at every breakpoint.                                  */
.wrap{
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: var(--z-content);
}
.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }

/* ── Page shell ───────────────────────────────────────────────────────────────
   Sticky footer without JS. min-height on the grid means a short page (404)
   frames exactly like a tall one (handbook).                                  */
.shell{
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}
/* Grid items default to min-width:auto, which lets one wide descendant (a
   max-content marquee track, a long code block) stretch the whole column and
   push the page sideways. Overriding it here fixes that class of bug once. */
.shell > *{ min-width: 0; }

/* ── Page panel — every page's <section> uses this, so top/bottom air is equal */
.panel{
  padding-block: var(--block) var(--block-lg);
}

/* ── Grid primitives ──────────────────────────────────────────────────────────
   Every layout primitive zeroes its children's automatic minimum size. Without
   this, a single nowrap label or wide image inside a column can widen the
   column past the viewport — the most common source of mobile side-scroll. */
.stack > *,
.split > *,
.auto-grid > *,
.sidebar-layout > *,
.section-head > *,
.cluster > *{ min-width: 0; }

.stack     { display: grid; gap: var(--gap, var(--s5)); }
.cluster   { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s4)); align-items: center; }

/* Auto-fitting card grid. min column width is a variable so each usage
   (officers vs gallery vs stats) can tune it without a new class. */
.auto-grid{
  display: grid;
  gap: var(--gap, var(--s5));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col, 300px), 100%), 1fr));
}

/* Two-column split that collapses at one breakpoint */
.split{
  display: grid;
  gap: var(--gap, var(--s8));
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem){
  .split{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--7-5 { grid-template-columns: 7fr 5fr; }
}

/* Sidebar + content, collapses to stacked */
.sidebar-layout{
  display: grid;
  gap: var(--s6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem){
  .sidebar-layout{ grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: var(--s7); }
}

/* Gap modifiers */
.gap-2 { --gap: var(--s2); } .gap-3 { --gap: var(--s3); }
.gap-4 { --gap: var(--s4); } .gap-5 { --gap: var(--s5); }
.gap-6 { --gap: var(--s6); } .gap-8 { --gap: var(--s8); }

/* ── Section header ───────────────────────────────────────────────────────── */
.section-head{
  display: grid;
  justify-items: center;
  gap: var(--s4);
  max-width: 62ch;
  margin: 0 auto var(--s8);
  text-align: center;
}
.section-head h2 { font-size: var(--t-3xl); }
.section-head p  { color: var(--text-muted); max-width: 54ch; }
.section-head .ornament { margin-top: var(--s2); }

.section-head--left{
  justify-items: start;
  text-align: left;
  margin-inline: 0;
}

/* ── Reading-progress bar ─────────────────────────────────────────────────── */
#bar{
  position: fixed;
  inset: 0 auto auto 0;
  z-index: var(--z-bar);
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  box-shadow: 0 0 12px var(--gold-40);
  will-change: width;
}

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.site-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);              /* fixed — no cross-page shift */
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-2) var(--ease),
              background   var(--dur-2) var(--ease);
}
/* Deepens once you scroll past the hero — set by js/modules/scroll.js */
.site-header.is-stuck{
  background: rgb(8 2 4 / .88);
  border-bottom-color: var(--line-strong);
  box-shadow: var(--e2);
}

.site-header > .wrap{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

/* Brand lockup */
.brand{
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}
.brand__seal{
  width: 36px; height: 36px;
  filter: drop-shadow(0 0 12px rgb(232 199 132 / .35));
  transition: transform var(--dur-3) var(--ease-spring), filter var(--dur-3) var(--ease);
}
.brand:hover .brand__seal{
  transform: rotate(-8deg) scale(1.06);
  filter: drop-shadow(0 0 20px rgb(232 199 132 / .6));
}
.brand__name{
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.1;
  color: var(--cream);
}
.brand__sub{
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Primary nav */
.nav{
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.nav__link{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding-inline: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
/* Underline sweeps in from the left on hover */
.nav__link::after{
  content: "";
  position: absolute;
  left: var(--s4); right: var(--s4);
  bottom: 3px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link:hover{ color: var(--cream); background: var(--gold-04); }
.nav__link:hover::after{ transform: scaleX(1); }

.nav__link.is-active{ color: var(--gold); }
.nav__link.is-active::after{ transform: scaleX(1); }
/* Small diamond marks the current page */
.nav__link.is-active::before{
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  width: 3px; height: 3px;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--gold);
}

.header-cta{ flex: none; }

/* Mobile menu trigger */
.nav-toggle{
  display: none;
  width: 40px; height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--gold);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav-toggle:hover{ border-color: var(--line-bright); background: var(--gold-04); }
.nav-toggle__bars{ display: grid; gap: 4px; width: 17px; }
.nav-toggle__bars i{
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav{
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: calc(var(--z-header) - 1);
  display: grid;
  padding: var(--s4) var(--gutter) var(--s6);
  background: rgb(8 2 4 / .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: var(--e3);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              visibility 0s linear var(--dur-2);
}
.mobile-nav.is-open{
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.mobile-nav a{
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s4) var(--s2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}
.mobile-nav a span{ font-size: var(--t-2xs); color: var(--gold-dp); }
.mobile-nav a:hover{ color: var(--cream); padding-left: var(--s5); }
.mobile-nav a.is-active{ color: var(--gold); }
.mobile-nav .btn{ margin-top: var(--s5); }

/* NOTE: the show/hide switch between desktop nav and mobile drawer lives in
   12-responsive.css. It has to run last — .btn sets display:inline-flex in
   05-components.css, which would otherwise win over a hide rule declared here
   at equal specificity. */

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.site-footer{
  margin-top: var(--block-lg);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgb(10 2 4 / .6));
}

.footer-main{
  display: grid;
  gap: var(--s7);
  padding-block: var(--s8);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem){
  .footer-main{ grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}

.footer-brand{ display: grid; gap: var(--s4); align-content: start; }
.footer-brand .brand__name{ font-size: 1.25rem; }
.footer-brand p{
  font-size: var(--t-sm);
  color: var(--text-faint);
  max-width: 34ch;
}

.footer-col h3{
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-dp);
  margin-bottom: var(--s4);
}
.footer-col ul{ display: grid; gap: var(--s3); }
.footer-col a{
  position: relative;
  font-size: var(--t-sm);
  color: var(--text-muted);
  transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  display: inline-block;
}
.footer-col a:hover{ color: var(--gold); transform: translateX(4px); }
.footer-col a[aria-current="page"]{ color: var(--gold); }

.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-bottom strong{ color: var(--gold-dp); font-weight: 400; }
/* ============================================================================
   05 · COMPONENTS
   Buttons, cards, plaques, badges, pills, tags, notes — the shared vocabulary
   every page draws from.
   ========================================================================== */

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: var(--dur-1); }

.btn--gold{
  background: linear-gradient(100deg, var(--gold), #F7E3B4);
  color: #3B1108;
  box-shadow: 0 12px 26px -18px rgb(232 199 132 / .8);
}
.btn--gold:hover{ box-shadow: 0 18px 34px -18px rgb(232 199 132 / .95); }
/* Light sweeps across on hover */
.btn--gold::after{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .75) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform var(--dur-4) var(--ease);
}
.btn--gold:hover::after{ transform: translateX(130%); }

.btn--line{
  background: var(--gold-04);
  border-color: var(--line-strong);
  color: var(--gold);
}
.btn--line:hover{
  background: var(--gold-14);
  border-color: var(--line-bright);
  color: var(--gold-bright);
  box-shadow: 0 12px 30px -20px rgb(232 199 132 / .5);
}

.btn--ghost{ color: var(--text-muted); padding-inline: var(--s4); }
.btn--ghost:hover{ color: var(--gold); background: var(--gold-04); }

.btn--sm{ padding: .6rem 1.1rem; font-size: 10px; letter-spacing: .18em; }

/* ── Card — base surface for every boxed element ──────────────────────────── */
.card{
  position: relative;
  background:
    linear-gradient(160deg, var(--surface-2), var(--surface) 46%),
    var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-3) var(--ease),
              transform    var(--dur-3) var(--ease),
              box-shadow   var(--dur-3) var(--ease),
              background   var(--dur-3) var(--ease);
}
/* Hairline highlight along the top edge — reads as polished stone */
.card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-40) 30%, var(--gold-40) 70%, transparent);
  opacity: .55;
  transition: opacity var(--dur-3) var(--ease);
  pointer-events: none;
}
.card--hover:hover{
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--e3);
}
.card--hover:hover::before{ opacity: 1; }

/* Gold corner brackets — the academic-certificate detail. Opt in with the
   modifier so it stays deliberate rather than decoration everywhere. */
.card--brackets .corner{
  position: absolute;
  width: 15px; height: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease), scale var(--dur-3) var(--ease-spring);
  scale: .8;
}
.card--brackets .corner:nth-child(1){ top: 8px;    left: 8px;  border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); border-radius: var(--r-xs) 0 0 0; }
.card--brackets .corner:nth-child(2){ top: 8px;    right: 8px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); border-radius: 0 var(--r-xs) 0 0; }
.card--brackets .corner:nth-child(3){ bottom: 8px; left: 8px;  border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); border-radius: 0 0 0 var(--r-xs); }
.card--brackets .corner:nth-child(4){ bottom: 8px; right: 8px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); border-radius: 0 0 var(--r-xs) 0; }
.card--brackets:hover .corner{ opacity: .8; scale: 1; }

/* ── Shine sweep — reusable diagonal gloss ────────────────────────────────── */
.shine{
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .09) 50%, transparent 60%);
  transform: translateX(-110%);
  transition: transform 1s var(--ease);
}
:hover > .shine, :hover .shine{ transform: translateX(110%); }

/* ── Plaque — bordered band of institutional facts ────────────────────────── */
.plaque{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s5) var(--s8);
  padding: var(--s4) var(--s6);
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, var(--gold-04), transparent);
}
.plaque > div{
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.plaque b{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--gold);
  line-height: 1;
}
.plaque span{
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Stat tile ────────────────────────────────────────────────────────────── */
.stat{
  padding: var(--s5) var(--s4);
  text-align: center;
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat b{
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.1;
  color: var(--gold);
}
.stat span{
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.stat:hover{ background: linear-gradient(160deg, var(--crimson-24), var(--surface)); }

/* ── Pill / tag ───────────────────────────────────────────────────────────── */
.tag{
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  color: var(--text-muted);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.tag:hover{ border-color: var(--line-strong); color: var(--cream); }

/* ── Badge — "zero tolerance" style flag ──────────────────────────────────── */
.badge{
  display: inline-block;
  margin-left: var(--s2);
  padding: .18rem .5rem;
  border: 1px solid var(--crimson-lt);
  border-radius: var(--r-xs);
  background: rgb(201 49 76 / .18);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FFC9CF;
  vertical-align: 2px;
}

/* ── Note block ───────────────────────────────────────────────────────────── */
.note{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--gold-dp);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--gold-04);
}
.note > span{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: .3rem;
}
.note p{ font-size: var(--t-sm); color: var(--text-muted); }

/* ── Marquee ──────────────────────────────────────────────────────────────── */
.marquee{
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  border-block: 1px solid var(--line);
  padding-block: var(--s3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display: flex;
  gap: var(--s8);
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee span{
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.marquee span::after{ content: "✦"; margin-left: var(--s8); color: var(--gold-dp); }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Back-to-top ──────────────────────────────────────────────────────────── */
#top{
  position: fixed;
  right: var(--s5); bottom: var(--s5);
  z-index: var(--z-fab);
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgb(18 4 7 / .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity var(--dur-3) var(--ease),
              transform var(--dur-3) var(--ease-spring),
              visibility 0s linear var(--dur-3),
              background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
#top.is-visible{
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
#top:hover{ background: var(--gold-14); border-color: var(--line-bright); }
/* ============================================================================
   06 · INTRO CURTAIN + AMBIENT EFFECTS
   ========================================================================== */

#intro{
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  background: var(--ink-900);
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
}
#intro.is-gone{ opacity: 0; visibility: hidden; pointer-events: none; }

#intro .in-seal{
  width: clamp(88px, 16vw, 124px);
  opacity: 0;
  transform: scale(.86);
  filter: drop-shadow(0 0 40px rgb(232 199 132 / .45));
  animation: seal-in 1.1s var(--ease) .1s forwards;
}
#intro .in-line{
  position: absolute;
  bottom: calc(50% - 128px);
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dp), transparent);
  animation: line-grow .9s var(--ease) .5s forwards;
}
#intro .in-txt{
  position: absolute;
  bottom: calc(50% - 156px);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-dp);
  opacity: 0;
  animation: fade-in .7s var(--ease) .85s forwards;
}
@keyframes seal-in  { to { opacity: 1; transform: scale(1); } }
@keyframes line-grow{ to { width: 190px; } }
@keyframes fade-in  { to { opacity: 1; } }

/* Embers canvas — sits behind all content, never interactive */
#embers{
  position: fixed;
  inset: 0;
  z-index: var(--z-embers);
  pointer-events: none;
  opacity: .85;
}

/* Vignette to focus the centre of long pages */
.vignette{
  position: fixed;
  inset: 0;
  z-index: var(--z-embers);
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 55%, rgb(6 1 3 / .55));
}
/* ============================================================================
   07 · PAGE · HOME
   Hero + crest, facts band, house rules, admission ticket.
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--block);
  --gap: var(--s9);
}
.hero__copy{ display: grid; gap: var(--s4); align-content: start; }

.hero h1{
  font-size: var(--t-4xl);
  margin-block: var(--s3) var(--s1);
}
/* Each word rises in on load */
.hero h1 .w{
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: word-up .9s var(--ease) forwards;
}
.hero h1 .w:nth-child(2){ animation-delay: .12s; }
@keyframes word-up{ to { opacity: 1; transform: none; } }

.hero .ornament{ margin: var(--s2) 0; }
.hero__actions{ margin-top: var(--s5); }

.scroll-cue{
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s7);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.scroll-cue i{
  display: block;
  width: 1px; height: 24px;
  background: linear-gradient(var(--gold-dp), transparent);
  animation: cue 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue{ 0%,100%{ transform: scaleY(.35); } 50%{ transform: scaleY(1); } }

/* ── Crest stage — the seal with its orbital rings ────────────────────────── */
.crest{
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 42vw, 470px);
  perspective: 900px;
}
.crest::before{
  content: "";
  position: absolute;
  width: min(430px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--crimson-40), transparent 68%);
  filter: blur(28px);
}
.crest__ring{
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold-22);
}
.crest__ring--1{ width: min(390px, 86%);  aspect-ratio: 1; border-style: dashed; animation: spin 48s linear infinite; }
.crest__ring--2{ width: min(456px, 100%); aspect-ratio: 1; animation: spin 74s linear reverse infinite; }
.crest__ring--3{ width: min(520px, 112%); aspect-ratio: 1; border-color: var(--gold-08); animation: spin 104s linear infinite; }
@keyframes spin{ to { rotate: 360deg; } }

.crest__ring .dot{
  position: absolute;
  top: -4px; left: 50%;
  width: 6px; height: 6px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}
.crest__ring--2 .dot{ top: auto; bottom: -4px; }

.crest__seal{
  width: min(320px, 70%);
  filter: drop-shadow(0 0 46px rgb(232 199 132 / .32));
  animation: crest-float 7s var(--ease-in-out) infinite;
}
@keyframes crest-float{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -14px; } }

/* ── Facts band ───────────────────────────────────────────────────────────── */
.facts{ --col: 200px; --gap: var(--s3); margin-block: var(--block); }

/* ── House rules ──────────────────────────────────────────────────────────── */
.rules{ --gap: var(--s4); }
.rule-item{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s5);
  align-items: start;
  padding: var(--s5);
  overflow: hidden;
}
/* Crimson→gold spine grows on hover */
.rule-item::after{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(var(--gold), var(--crimson));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-3) var(--ease);
}
.rule-item:hover{ transform: translateX(5px); border-color: var(--line-strong); }
.rule-item:hover::after{ transform: scaleY(1); }
.rule-item__n{
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--gold-dp);
  padding-top: .35rem;
}
.rule-item h3{ font-size: 1.35rem; margin-bottom: var(--s1); }
.rule-item p { font-size: var(--t-sm); color: var(--text-muted); }

.rules-side{ align-self: start; }
@media (min-width: 62rem){
  .rules-side{ position: sticky; top: calc(var(--header-h) + var(--s6)); }
}
.rules-side h2{ font-size: var(--t-2xl); margin-block: var(--s3) var(--s3); }
.rules-side p { color: var(--text-muted); font-size: var(--t-sm); max-width: 42ch; }

/* ── Admission ticket ─────────────────────────────────────────────────────── */
.ticket{
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    linear-gradient(150deg, var(--crimson-24), rgb(24 7 11 / .92) 58%, var(--gold-08));
  border: 1px solid var(--line-strong);
  box-shadow: var(--e4);
  transition: border-color var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.ticket:hover{ border-color: var(--line-bright); }
@media (min-width: 48rem){
  .ticket{ grid-template-columns: 1fr 12px 200px; }
}

.ticket__body{
  position: relative;
  padding: clamp(1.75rem, 1rem + 3vw, 2.8rem);
  overflow: hidden;
}
.ticket__body::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  background: var(--seal) center / 60% no-repeat;
}
.ticket__body h2{ font-size: var(--t-2xl); margin-block: var(--s3) var(--s2); }
.ticket__note{ color: var(--text-muted); font-size: var(--t-sm); max-width: 46ch; margin-bottom: var(--s6); }

.ticket__fields{
  display: grid;
  gap: var(--s4) var(--s6);
  max-width: 520px;
  grid-template-columns: 1fr;
}
@media (min-width: 30rem){ .ticket__fields{ grid-template-columns: repeat(2, 1fr); } }
.ticket__fields > div{ border-top: 1px solid var(--line); padding-top: var(--s2); }
.ticket__fields dd{ font-size: var(--t-base); margin-top: 2px; }
.ticket__fields dd.is-ok{
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ticket__sign{
  display: inline-block;
  margin-top: var(--s6);
  padding-top: var(--s2);
  border-top: 1px solid var(--line-strong);
}
.ticket__sign i{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--cream);
}
.ticket__sign small{
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Wax-stamp — drops in when the block reveals */
.stamp{
  position: absolute;
  right: var(--s7); bottom: var(--s6);
  display: grid;
  place-items: center;
  gap: 2px;
  width: 124px; height: 124px;
  border: 2px solid var(--line-bright);
  border-radius: 50%;
  color: var(--gold);
  rotate: -14deg;
  opacity: 0;
  scale: 1.5;
  transition: opacity var(--dur-3) .35s var(--ease),
              scale   var(--dur-3) .35s var(--ease-spring);
}
.is-revealed .stamp{ opacity: .85; scale: 1; }
.stamp::after{
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--gold-40);
  border-radius: 50%;
}
.stamp b{ font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.stamp i{
  font-family: var(--font-mono); font-style: normal;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
}
@media (max-width: 47.99rem){
  .stamp{ position: static; margin-top: var(--s6); rotate: -7deg; }
}

/* Perforation strip */
.ticket__perf{
  position: relative;
  background: repeating-linear-gradient(var(--gold-40) 0 7px, transparent 7px 15px);
}
.ticket__perf::before,
.ticket__perf::after{
  content: "";
  position: absolute;
  left: 50%;
  width: 24px; height: 24px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--ink-800);
}
.ticket__perf::before{ top: -12px; }
.ticket__perf::after { bottom: -12px; }
@media (max-width: 47.99rem){
  .ticket__perf{ height: 12px; background: repeating-linear-gradient(90deg, var(--gold-40) 0 7px, transparent 7px 15px); }
  .ticket__perf::before{ top: 50%; left: -12px; translate: 0 -50%; }
  .ticket__perf::after { top: 50%; left: auto; right: -12px; bottom: auto; translate: 0 -50%; }
}

.ticket__stub{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s6) var(--s4);
  text-align: center;
  background: linear-gradient(160deg, var(--gold-14), var(--crimson-24));
}
.ticket__stub img{ width: 42px; opacity: .9; }
.ticket__stub .big{ font-family: var(--font-display); font-size: 1.55rem; line-height: 1.05; color: var(--cream); }
.ticket__stub .no{
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold);
}
.ticket__stub .fine{
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); line-height: 1.6; max-width: 16ch;
}
@media (max-width: 47.99rem){
  .ticket__stub{ flex-direction: row; justify-content: space-around; flex-wrap: wrap; padding: var(--s5) var(--s4); }
}
/* ============================================================================
   08 · PAGE · OFFICERS
   Org-chart roster of faculty ID cards.
   ========================================================================== */

.roster{
  display: grid;
  justify-items: center;
  gap: 0;
}
.roster__tier{
  display: grid;
  gap: var(--s5);
  width: 100%;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 320px));
  justify-items: center;
}
/* Connector between tiers */
.roster__drop{
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold-40), var(--gold-08));
}
.roster__branch{
  position: relative;
  width: min(720px, 84%);
  height: 28px;
}
.roster__branch::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-22) 12%, var(--gold-22) 88%, transparent);
}
.roster__branch i{
  position: absolute;
  top: 0;
  width: 1px; height: 28px;
  background: linear-gradient(var(--gold-40), transparent);
}
.roster__branch i:nth-child(1){ left: 0; }
.roster__branch i:nth-child(2){ left: 50%; }
.roster__branch i:nth-child(3){ right: 0; }
@media (max-width: 61.99rem){
  .roster__branch{ display: none; }
}

/* ── ID card ──────────────────────────────────────────────────────────────── */
.idcard{
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  transform-style: preserve-3d;
  will-change: transform;
}
.idcard:hover{ box-shadow: var(--e4); border-color: var(--line-bright); }

.idcard__strip{
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: linear-gradient(100deg, var(--crimson-dp), var(--crimson));
  border-bottom: 1px solid var(--line-strong);
}
.idcard__strip img{ width: 18px; height: 18px; flex: none; }
.idcard__strip span{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  /* One line, always — a wrapped strip breaks the card's header height and
     the whole roster stops aligning. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.idcard__no{
  margin-left: auto;
  flex: none;
  color: rgb(255 244 232 / .75) !important;
}

.idcard__main{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s5) var(--s5) var(--s6);
  text-align: center;
}

.idcard__photo{
  width: 128px;
  aspect-ratio: 4 / 5;
  margin: 0 auto var(--s4);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-500);
  border: 1px solid var(--line);
  transition: border-color var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.idcard__photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease);
}
.idcard:hover .idcard__photo{
  border-color: var(--line-bright);
  box-shadow: 0 14px 30px -16px rgb(232 199 132 / .45);
}
.idcard:hover .idcard__photo img{ transform: scale(1.07); }

.idcard__role{
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: .12em;
  color: var(--gold);
  margin-block: 2px var(--s3);
}
.idcard__idents{
  display: grid;
  gap: var(--s3);
  flex: 1;
  align-content: start;
}
.idcard__idents h3{ font-size: 1.65rem; margin-top: 2px; }
.idcard__idents > div + div{
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}
.idcard__user{
  font-family: var(--font-mono);
  font-size: .88rem;
  color: var(--cream);
  margin-top: 2px;
  word-break: break-all;
}

.idcard__barcode{
  height: 17px;
  margin-top: var(--s4);
  opacity: .4;
  background: repeating-linear-gradient(90deg,
    var(--cream) 0 1px, transparent 1px 3px,
    var(--cream) 3px 5px, transparent 5px 6px,
    var(--cream) 6px 7px, transparent 7px 10px);
}
/* ============================================================================
   09 · PAGE · HANDBOOK
   Cover, table of statutes, codex reader.
   ========================================================================== */

/* ── Cover ────────────────────────────────────────────────────────────────── */
.doc-cover{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  padding: var(--s7);
  margin-bottom: var(--block);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.doc-cover h2{ font-size: var(--t-2xl); margin-block: var(--s3) var(--s3); line-height: 1.08; }
.doc-cover p { color: var(--text-muted); font-size: var(--t-sm); max-width: 46ch; }

.doc-cover__meta{ display: flex; flex-wrap: wrap; gap: var(--s6); }
.doc-cover__meta dd{ font-size: var(--t-sm); margin-top: 2px; }
.doc-cover__meta dd.is-live{
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.doc-cover__meta dd.is-live::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: blip 2s var(--ease-in-out) infinite;
}
@keyframes blip{ 0%,100%{ opacity: 1; } 50%{ opacity: .3; } }

/* ── Sidebar: search + table of statutes ──────────────────────────────────── */
.reader-side{ display: grid; gap: var(--s3); align-content: start; }
@media (min-width: 62rem){
  .reader-side{ position: sticky; top: calc(var(--header-h) + var(--s5)); }
}

.doc-search{
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.doc-search:focus-within{ border-color: var(--line-bright); background: var(--surface-3); }
.doc-search svg{ width: 13px; height: 13px; color: var(--gold-dp); flex: none; }
.doc-search input{
  flex: 1;
  min-width: 0;
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--cream);
}
.doc-search input::placeholder{
  color: var(--text-faint);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--t-2xs);
}
.doc-hits{
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dp);
  min-height: 1em;
  padding-left: 2px;
}

.doc-toc{
  display: grid;
  gap: 2px;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 2px;
}
@media (max-width: 61.99rem){
  .doc-toc{
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    max-height: none;
    overflow-x: auto;
    padding-bottom: var(--s2);
    scroll-snap-type: x proximity;
  }
  .doc-toc__item{ scroll-snap-align: start; border-radius: var(--r-pill) !important; }
}

.doc-toc__item{
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  text-align: left;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: background var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              padding-left var(--dur-2) var(--ease);
  white-space: nowrap;
}
.doc-toc__item span{ font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--gold-dp); flex: none; }
.doc-toc__item b    { font-weight: 500; font-size: var(--t-sm); }
.doc-toc__item:hover{ background: var(--surface-2); color: var(--cream); padding-left: var(--s5); }
.doc-toc__item.is-active{
  background: linear-gradient(100deg, var(--gold-14), var(--crimson-24));
  color: var(--gold);
}
.doc-toc__item.is-active span{ color: var(--gold); }
.doc-toc__item.is-hidden{ display: none; }

/* ── Reader panel ─────────────────────────────────────────────────────────── */
.reader-main{
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.6rem);
  border-radius: var(--r-xl);
}
.reader-stage{ flex: 1; }

.doc{ display: none; }
.doc.is-open{
  display: block;
  animation: doc-in var(--dur-3) var(--ease) both;
}
@keyframes doc-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.doc__head{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s4);
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line-strong);
}
.doc__head h3{ font-size: var(--t-xl); }
.doc__count{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.doc__lead{ color: var(--text-muted); font-size: var(--t-base); margin-bottom: var(--s5); max-width: 64ch; }

/* Statute rows */
.statutes{ display: grid; }
.statute{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  padding: var(--s4) var(--s3);
  border-top: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease);
}
.statute:first-child{ border-top: none; }
.statute:hover{ background: var(--surface); }
.statute.is-hidden{ display: none; }
@media (max-width: 34rem){
  .statute{ grid-template-columns: 1fr; gap: var(--s2); }
}

.statute__code{
  align-self: start;
  justify-self: start;
  padding: .28rem .55rem;
  border: 1px solid var(--gold-22);
  border-radius: var(--r-xs);
  background: var(--gold-08);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .04em;
  color: var(--gold);
  cursor: copy;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.statute__code:hover { background: var(--gold-22); color: var(--gold-bright); }
.statute__code:active{ transform: scale(.95); }
.statute__code.is-copied{ background: var(--gold); color: #3B1108; border-color: transparent; }
.statute.is-zt .statute__code{
  background: rgb(201 49 76 / .22);
  border-color: rgb(201 49 76 / .5);
  color: #FFC9CF;
}
.statute__text p{ font-size: var(--t-base); line-height: 1.62; }
.statute__tags{ display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }

.doc mark{
  background: var(--gold-22);
  color: var(--gold-bright);
  border-radius: 2px;
  padding: 0 .15em;
}

/* Sanctions ladder */
.sanctions{
  display: grid;
  gap: var(--s3);
  margin-block: var(--s5);
  padding-left: var(--s6);
  position: relative;
}
.sanctions::before{
  content: "";
  position: absolute;
  left: 5px; top: 18px; bottom: 18px;
  width: 1px;
  background: linear-gradient(var(--gold-40), var(--crimson-40));
}
.sanction{
  position: relative;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.sanction::before{
  content: "";
  position: absolute;
  left: calc(var(--s6) * -1); top: 1.35rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--crimson-lt);
  background: var(--ink-800);
}
.sanction:nth-child(2)::before{ border-color: #D2622B; }
.sanction:nth-child(3)::before{ border-color: var(--gold); }
.sanction:hover{ transform: translateX(5px); border-color: var(--line-strong); }
.sanction h4{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: var(--s2);
}
.sanction h4 b{
  margin-left: auto;
  font-weight: 400;
  font-size: var(--t-2xs);
  color: var(--gold);
  padding: .2rem .5rem;
  border: 1px solid var(--gold-22);
  border-radius: var(--r-xs);
}
.sanction p{ font-size: var(--t-sm); color: var(--text-muted); }

/* Numbered steps */
.doc-steps{ display: grid; gap: var(--s4); margin-top: var(--s3); counter-reset: st; }
.doc-steps li{
  counter-increment: st;
  position: relative;
  padding-left: var(--s8);
  font-size: var(--t-base);
  color: var(--text-muted);
}
.doc-steps li::before{
  content: counter(st, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--gold);
  border: 1px solid var(--gold-22);
  border-radius: var(--r-xs);
  padding: .2rem .45rem;
  line-height: 1;
}

/* Prev / next */
.doc-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.doc-move{
  padding: .6rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.doc-move:hover:not(:disabled){ background: var(--gold-14); border-color: var(--line-bright); }
.doc-move:disabled{ opacity: .28; cursor: not-allowed; }
.doc-pos{
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .2em;
  color: var(--text-faint);
}

.reader-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  margin-top: var(--s5);
}
.reader-foot i{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cream);
}
.reader-foot small{
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.reader-foot p{ font-size: var(--t-sm); color: var(--text-faint); max-width: 38ch; text-align: right; }
@media (max-width: 47.99rem){ .reader-foot p{ text-align: left; } }
/* ============================================================================
   10 · PAGE · GALLERY
   Archive plates + lightbox.
   ========================================================================== */

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.filters{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.filt{
  padding: .5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
}
.filt:hover { color: var(--cream); border-color: var(--line-strong); }
.filt:active{ transform: scale(.96); }
.filt[aria-pressed="true"]{
  background: linear-gradient(100deg, var(--gold), #F7E3B4);
  color: #3B1108;
  border-color: transparent;
  box-shadow: 0 8px 20px -12px rgb(232 199 132 / .8);
}

.grid-count{
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s6);
}

/* ── Photo grid ───────────────────────────────────────────────────────────── */
.gallery-grid{ --col: 310px; --gap: var(--s4); }

.plate{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--ink-900);
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease),
              box-shadow var(--dur-3) var(--ease);
}
.plate img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease), filter var(--dur-3) var(--ease);
  filter: saturate(.92) contrast(1.02);
}
.plate:hover,
.plate:focus-visible{
  transform: translateY(-5px);
  border-color: var(--line-bright);
  box-shadow: var(--e3);
}
.plate:hover img,
.plate:focus-visible img{ transform: scale(1.06); filter: none; }

/* Archive number, top-left */
.plate__no{
  position: absolute;
  top: var(--s3); left: var(--s3);
  z-index: 2;
  padding: .18rem .45rem;
  border-radius: var(--r-xs);
  background: rgb(10 2 4 / .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--gold);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.plate:hover .plate__no,
.plate:focus-visible .plate__no{ opacity: 1; transform: none; }

.plate figcaption{
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s8) var(--s4) var(--s4);
  background: linear-gradient(transparent, rgb(8 2 4 / .96));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.plate:hover figcaption,
.plate:focus-visible figcaption{ opacity: 1; transform: none; }
.plate figcaption strong{
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
}
.plate figcaption span{ font-size: var(--t-xs); color: var(--gold); }

.plate.is-hidden{ display: none; }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lb{
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgb(6 1 3 / .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lb.is-open{ display: flex; animation: lb-fade var(--dur-2) both; }
@keyframes lb-fade{ from { opacity: 0; } to { opacity: 1; } }

.lb__img{
  max-width: min(1020px, 92vw);
  max-height: 68vh;
  border-radius: var(--r-md);
  border: 1px solid var(--line-bright);
  box-shadow: var(--e4);
  animation: lb-pop var(--dur-3) var(--ease) both;
}
@keyframes lb-pop{ from { transform: scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }

.lb h4{ font-size: 1.45rem; margin-top: var(--s4); text-align: center; }
.lb p {
  color: var(--gold);
  font-size: var(--t-sm);
  text-align: center;
  max-width: 60ch;
  margin-top: var(--s1);
}
.lb__counter{
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .2em;
  color: var(--text-faint);
  margin-top: var(--s3);
}

.lb__x,
.lb__nav{
  position: absolute;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: rgb(18 4 7 / .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.lb__x:hover,
.lb__nav:hover{ background: var(--gold-14); border-color: var(--line-bright); }
.lb__x:active,
.lb__nav:active{ transform: scale(.94); }

.lb__x  { top: var(--s5); right: var(--s5); padding: .5rem .9rem; }
.lb__nav{ top: 50%; translate: 0 -50%; padding: .85rem .7rem; font-size: 1.1rem; line-height: 1; }
.lb__nav--prev{ left: var(--s4); }
.lb__nav--next{ right: var(--s4); }

.lb__strip{
  display: flex;
  gap: var(--s1);
  margin-top: var(--s4);
  max-width: min(760px, 92vw);
  overflow-x: auto;
  padding-bottom: var(--s1);
}
.lb__strip img{
  width: 58px; height: 42px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  opacity: .38;
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.lb__strip img:hover{ opacity: .85; transform: translateY(-2px); }
.lb__strip img.is-active{ opacity: 1; border-color: var(--gold); }

@media (max-width: 40rem){
  .lb__img{ max-height: 58vh; }
  .lb__nav{ padding: .7rem .55rem; }
  .lb__x  { top: var(--s3); right: var(--s3); }
}
/* ============================================================================
   11 · ANIMATION & UTILITIES
   Every animation here is GPU-only (transform / opacity / filter). Nothing
   animates width, height, top or left, so none of it triggers layout.
   ========================================================================== */

/* ── Scroll reveal ────────────────────────────────────────────────────────────
   Elements carry data-reveal. js/modules/reveal.js adds .is-revealed and sets
   --d (the stagger delay) as an inline custom property.                       */
[data-reveal]{
  opacity: 0;
  transition:
    opacity   var(--dur-4) var(--ease) var(--d, 0ms),
    transform var(--dur-4) var(--ease) var(--d, 0ms),
    filter    var(--dur-4) var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed{
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Variants — pick per element, e.g. data-reveal="left" */
[data-reveal="up"],
[data-reveal=""]      { transform: translateY(24px); }
[data-reveal="down"]  { transform: translateY(-20px); }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="blur"]  { transform: translateY(16px); filter: blur(8px); }
[data-reveal="fade"]  { transform: none; }

/* ── Page transitions ─────────────────────────────────────────────────────────
   Cross-document View Transitions. Chromium ships this today; every other
   browser simply ignores the at-rule and navigates normally — no JS, no cost. */
@view-transition{ navigation: auto; }

::view-transition-old(root){
  animation: vt-out .18s var(--ease) both;
}
::view-transition-new(root){
  animation: vt-in .32s var(--ease) both;
}
@keyframes vt-out{ to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px);  } }

/* Header and footer are declared as their own transition groups, so they stay
   perfectly still while only the page body cross-fades. */
.site-header{ view-transition-name: site-header; }
.site-footer{ view-transition-name: site-footer; }
::view-transition-group(site-header),
::view-transition-group(site-footer){ animation: none; }

/* ── Entrance on first paint ──────────────────────────────────────────────── */
.enter{
  opacity: 0;
  transform: translateY(-10px);
  animation: enter-down .6s var(--ease) .05s forwards;
}
@keyframes enter-down{ to { opacity: 1; transform: none; } }

/* ── Micro-interaction helpers ────────────────────────────────────────────── */

/* Gold underline that sweeps in — for inline links */
.link-sweep{
  position: relative;
  color: var(--gold);
}
.link-sweep::after{
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.link-sweep:hover::after{ transform: scaleX(1); transform-origin: left; }

/* Lift on hover — cheap, transform only */
.lift{ transition: transform var(--dur-2) var(--ease); }
.lift:hover{ transform: translateY(-3px); }

/* Pressable — gives buttons physical feedback with zero layout cost */
.press{ transition: transform var(--dur-1) var(--ease); }
.press:active{ transform: scale(.97); }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.is-hidden   { display: none !important; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }  .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0; }
.full { width: 100%; }
.relative { position: relative; }

/* ── Reduced motion ───────────────────────────────────────────────────────────
   One global switch. Everything still WORKS — it just arrives instantly.      */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero h1 .w,
  #intro .in-seal,
  #intro .in-txt{ opacity: 1 !important; transform: none !important; }
  .gilt{ animation: none; background-position: 0 0; }
  @view-transition{ navigation: none; }
}
/* ============================================================================
   12 · RESPONSIVE OVERRIDES
   Most of the site is intrinsically responsive (clamp, auto-fit, min()).
   Only the handful of cases that genuinely need a breakpoint live here.
   Must stay LAST in the cascade.
   ========================================================================== */

/* ── Tablet and below ─────────────────────────────────────────────────────── */
@media (max-width: 61.99rem){

  :root{ --header-h: 64px; }

  /* Desktop nav out, drawer trigger in. Declared here (last file) so it beats
     .btn's own display rule in 05-components.css. */
  .nav          { display: none !important; }
  .header-cta   { display: none !important; }
  .nav-toggle   { display: grid; }

  /* Hero becomes centred and the crest drops below the copy */
  .hero{ --gap: var(--s7); }
  .hero__copy{ justify-items: center; text-align: center; }
  .hero__copy .eyebrow{ justify-content: center; }
  .hero__copy .lead   { margin-inline: auto; }
  .hero__actions      { justify-content: center; }
  .hero .ornament     { margin-inline: auto; }
  /* Rings are sized off the crest, which is nearly viewport-wide on a phone —
     cap them so the outermost ring never crosses the screen edge. */
  .crest              { order: -1; min-height: 300px; }
  .crest__ring--1     { width: min(290px, 76%); }
  .crest__ring--2     { width: min(330px, 87%); }
  .crest__ring--3     { width: min(368px, 97%); }
  .crest__seal        { width: min(240px, 62%); }

  .section-head--left{ justify-items: center; text-align: center; }
  .rules-side        { text-align: center; justify-items: center; }
  .rules-side .eyebrow{ justify-content: center; }
  .rules-side p      { margin-inline: auto; }

  .doc-cover{ flex-direction: column; align-items: flex-start; }
}

@media (min-width: 62rem){
  .mobile-nav { display: none; }
}

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 40rem){

  .panel{ padding-block: var(--s8) var(--s9); }

  /* A wrapped eyebrow leaves its hairline rule stranded on its own line —
     drop the rules on phones and let the tracked text carry it alone. */
  .eyebrow::before,
  .eyebrow--center::after{ display: none; }
  .eyebrow{ justify-content: center; text-align: center; }

  .plaque{ gap: var(--s4) var(--s5); padding: var(--s4); }
  .plaque b{ font-size: 1.15rem; }

  .rule-item{ gap: var(--s3); padding: var(--s4); }
  .rule-item h3{ font-size: 1.2rem; }

  .doc-cover{ padding: var(--s5); }
  .reader-main{ min-height: 0; }
  .doc__head h3{ font-size: 1.5rem; }
  .doc__count{ margin-left: 0; }

  .footer-bottom{ justify-content: center; text-align: center; }

  #top{ right: var(--s4); bottom: var(--s4); width: 38px; height: 38px; }
}

/* ── Very small ───────────────────────────────────────────────────────────── */
@media (max-width: 24rem){
  .brand__sub{ display: none; }
  .btn{ padding-inline: 1.2rem; }
}

/* ── Coarse pointers: no hover-only reveals ───────────────────────────────────
   On touch there is no hover, so captions and archive numbers would never be
   readable. Show them permanently instead.                                    */
@media (hover: none){
  .plate figcaption,
  .plate__no{ opacity: 1; transform: none; }
  .card--brackets .corner{ opacity: .5; scale: 1; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print{
  #intro, #embers, #bar, #top, .site-header, .site-footer,
  .lb, .filters, .doc-nav, .vignette, .marquee{ display: none !important; }
  body{ background: #fff; color: #000; }
  .doc{ display: block !important; page-break-inside: avoid; }
  .card{ border: 1px solid #ccc; }
}