/* ============================================================
   THE ROSEDALE SOCIETY
   Design System v1.0 — "Field Scholar"
   ------------------------------------------------------------
   A dark lodge with parchment breaks. Engraved natural-history
   artwork, duotone photography, brass hairlines, and a
   monospace field-journal voice.
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */
:root {
  /* --- ink family: the dark lodge --- */
  --ink:        #12150E;   /* base black-green      */
  --ink-2:      #1A1E14;   /* raised surface        */
  --ink-3:      #242A1C;   /* hairline on dark      */
  --ink-veil:   rgba(18, 21, 14, 0.72);

  /* --- parchment family: the paper breaks --- */
  --paper:      #EFE6D4;
  --paper-2:    #F5EFE1;
  --paper-3:    #E4D9C2;   /* hairline on paper     */

  /* --- pigment --- */
  --brass:      #A8842C;
  --brass-lt:   #C9A748;
  --brass-dk:   #7C601C;
  --moss:       #4A5A3E;
  --moss-lt:    #6E8159;
  --rust:       #8C4A2F;
  --rust-lt:    #B05E3B;

  /* --- type colour --- */
  --on-ink:        #E9E2CF;
  --on-ink-soft:   rgba(236, 230, 213, 0.82);
  --on-ink-faint:  rgba(236, 230, 213, 0.58);
  --on-paper:      #1E1B0C;
  --on-paper-soft: rgba(30, 27, 12, 0.84);
  /* 0.56 measured 3.76:1 on parchment — under the 4.5:1 AA floor, and
     this token carries real content (table row labels, card meta, form
     help text), not decoration. 0.66 measures 5.07:1 and still reads
     as the quiet tier. */
  --on-paper-faint:rgba(30, 27, 12, 0.66);

  /* --- families --- */
  /* Package A — "Press". Swap these three lines to change the whole site.
     Display: Fraunces (variable, optical size, warm old-style with a real italic)
     Text:    Source Serif 4 (drawn for screen reading, large x-height)
     Mono:    IBM Plex Mono — LABELS, TAGS AND DATA ONLY. Never body copy. */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-text:    "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
  --f-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- fluid type scale (fifth, 1.5 at desktop) --- */
  --t-display-xl: clamp(3.4rem, 11.5vw, 11rem);
  --t-display-l:  clamp(2.8rem, 7.4vw, 6.8rem);
  --t-display-m:  clamp(2.1rem, 4.6vw, 4rem);
  --t-display-s:  clamp(1.6rem, 3vw, 2.5rem);
  --t-lead:       clamp(1.32rem, 1.85vw, 1.85rem);
  --t-copy:       clamp(1.09rem, 1.12vw, 1.22rem);   /* running body text */
  --t-body:       clamp(1.05rem, 1.1vw, 1.18rem);
  --t-mono:       clamp(0.82rem, 0.92vw, 0.94rem);   /* labels only */
  --t-micro:      0.72rem;

  /* --- spacing (8pt, fluid at the top end) --- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;
  --s-chapter: clamp(4.75rem, 10vw, 9.5rem);

  /* --- measure & gutters --- */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --rail:   clamp(0px, 3.4vw, 58px);
  --maxw:   1560px;
  --measure: 66ch;

  /* --- motion --- */
  --e-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 0.32s;
  --d-base: 0.62s;
  --d-slow: 1.05s;

  --nav-h: 74px;
}

@media (max-width: 900px) { :root { --nav-h: 62px; } }

/* ---------- 2. RESET -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The JS scroll controller writes scrollTo every frame; native smooth
   behaviour turns each of those writes into its own animation and the
   two cancel each other out. Anchor jumps keep their easing via the
   controller instead. */
html.has-damped { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.66;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--brass); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brass-lt);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- 3. TYPOGRAPHY --------------------------------- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: 1.0;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.display--xl, .display--l { font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144; }
.display--m, .display--s  { font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72; }
.display--xl { font-size: var(--t-display-xl); }
.display--l  { font-size: var(--t-display-l);  }
.display--m  { font-size: var(--t-display-m); line-height: 1.02; }
.display--s  { font-size: var(--t-display-s); line-height: 1.1; letter-spacing: -0.01em; }
.display em, .display .it { font-style: italic; font-weight: 400; letter-spacing: -0.005em; }

/* Roman capitals — the "sporting label" voice */
.roman {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.06;
  text-wrap: balance;
}

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.72;
}
/* Kept for short data strings only. Running prose uses .copy. */
.mono--sentence {
  text-transform: none;
  letter-spacing: 0.02em;
  line-height: 1.72;
  max-width: 62ch;
}

/* ---- .copy — every paragraph of running text on the site ---- */
.copy {
  font-family: var(--f-text);
  font-size: var(--t-copy);
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 0;
  max-width: 66ch;
  text-wrap: pretty;
  font-variation-settings: "opsz" 20;
}
.copy + .copy { margin-top: 1.15em; }
.copy b, .copy strong { font-weight: 600; }
.copy.u-wide { max-width: none; }
.copy--tight { max-width: 54ch; }

.overline {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass-lt);
  display: flex;
  align-items: center;
  gap: 0.9em;
  /* some overlines are real <h2> section headings; keep the weight even */
  font-weight: 400;
}
.overline::before {
  content: "";
  width: clamp(22px, 4vw, 54px);
  height: 1px;
  background: currentColor;
  opacity: 0.75;
  flex: none;
}
.overline--plain::before { display: none; }
.on-paper .overline { color: var(--brass-dk); }

.lead {
  font-family: var(--f-text);
  font-size: var(--t-lead);
  font-style: italic;
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: -0.002em;
  max-width: 44ch;
  text-wrap: pretty;
}

.prose p + p { margin-top: 1.05em; }
.prose { max-width: var(--measure); }
.prose a { border-bottom: 1px solid var(--brass); padding-bottom: 1px; }
.prose a:hover { color: var(--brass-lt); }

.num {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  line-height: 0.86;
  letter-spacing: -0.03em;
  font-size: clamp(4rem, 11vw, 10rem);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- 4. SURFACES ----------------------------------- */
.on-ink   { background: var(--ink);   color: var(--on-ink); }
.on-ink-2 { background: var(--ink-2); color: var(--on-ink); }
.on-paper { background: var(--paper); color: var(--on-paper); }
.on-paper-2 { background: var(--paper-2); color: var(--on-paper); }

/* Paper gets a faint fibre tooth; ink gets a faint bloom. */
.on-paper::before, .on-paper-2::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(168,132,44,0.10), transparent 46%),
    radial-gradient(circle at 82% 78%, rgba(74,90,62,0.09), transparent 52%);
  z-index: 0;
}
.on-ink::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168,132,44,0.055), transparent 62%);
  z-index: 0;
}

/* Global paper grain — one shared noise layer, cheap and always on. */
.grain {
  position: fixed; inset: -10%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.20;
  mix-blend-mode: soft-light;
  background-image: var(--noise);
  background-size: 190px 190px;
}

/* ---------- 5. LAYOUT ------------------------------------- */
.section {
  position: relative;
  padding-block: var(--s-chapter);
  /* `clip` crops the bleeding ghost art exactly like `hidden` does, but
     without turning the section into a scroll container — which is what
     lets position:sticky inside a section (the mobile comparison header)
     actually stick to the viewport. `hidden` first as the fallback for
     browsers that don't know `clip`. */
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.section--tight { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--flush-top { padding-top: 0; }

.wrap {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 980px); }
.wrap--reading { width: min(100% - (var(--gutter) * 2), 760px); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.grid--2   { grid-template-columns: repeat(2, 1fr); }
.grid--3   { grid-template-columns: repeat(3, 1fr); }
.grid--4   { grid-template-columns: repeat(4, 1fr); }
.grid--5-7 { grid-template-columns: 5fr 7fr; }
.grid--7-5 { grid-template-columns: 7fr 5fr; }
.grid--1-1-align { align-items: center; }

@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5-7, .grid--7-5 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }

/* Hairline rules — the field-journal divider */
.rule {
  height: 1px; border: 0; margin: 0;
  background: var(--ink-3);
}
.on-paper .rule, .on-paper-2 .rule { background: var(--paper-3); }
.rule--dotted {
  height: 1px; background: none;
  border-top: 1px dotted rgba(233,226,207,0.28);
}
.on-paper .rule--dotted, .on-paper-2 .rule--dotted {
  border-top-color: rgba(35,32,15,0.26);
}
.rule--brass { background: linear-gradient(90deg, var(--brass), transparent); height: 2px; }

/* ---------- 6. SIDE RAILS --------------------------------- */
.siderail {
  position: fixed;
  top: 0; bottom: 0;
  width: var(--rail);
  z-index: 400;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--on-ink-faint);
  transition: color var(--d-base) var(--e-out);
}
.siderail--l { left: 0; }
.siderail--r { right: 0; }
.siderail span {
  writing-mode: vertical-rl;
  white-space: nowrap;
}
.siderail--l span { transform: rotate(180deg); }
body.rail-dark .siderail { color: rgba(35,32,15,0.34); }
@media (max-width: 1100px) { .siderail { display: none; } }

/* ---------- 7. NAV ---------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brass-dk), var(--brass-lt));
  z-index: 900;
  will-change: transform;
}

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 800;
  display: flex; align-items: center;
  padding-inline: clamp(1.1rem, 3.2vw, 2.6rem);
  gap: var(--s-4);
  transition: background var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              backdrop-filter var(--d-base);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(18, 21, 14, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--ink-3);
}
.nav__brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.nav__mark { height: clamp(26px, 3.4vw, 34px); width: auto; }
.nav__wordmark {
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.66rem, 0.92vw, 0.82rem);
  line-height: 1.25;
  color: var(--on-ink);
  white-space: nowrap;
}
.nav__wordmark small {
  display: block;
  font-size: 0.78em;
  letter-spacing: 0.34em;
  opacity: 0.6;
  font-weight: 400;
}
.nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem); margin-left: auto; }
.nav__links a {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  position: relative;
  padding-block: 4px;
  transition: color var(--d-fast) var(--e-out);
  white-space: nowrap;
}
.nav__links a::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brass-lt);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--d-base) var(--e-out);
}
.nav__links a:hover { color: var(--on-ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--on-ink); }
@media (max-width: 1080px) { .nav__links { display: none; } }

.burger {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-ink);
  z-index: 1001;
}
.burger__bars { display: grid; gap: 5px; width: 24px; }
.burger__bars i { display: block; height: 1px; background: currentColor; transition: transform var(--d-fast) var(--e-out), opacity var(--d-fast); }
body.menu-open .burger__bars i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
body.menu-open .burger__bars i:nth-child(2) { opacity: 0; }
body.menu-open .burger__bars i:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 1080px) { .burger { display: flex; } }

.menu {
  position: fixed; inset: 0;
  z-index: 950;
  background: var(--ink);
  display: grid;
  grid-template-rows: var(--nav-h) 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}
body.menu-open .menu { opacity: 1; visibility: visible; }
.menu__inner {
  align-self: center;
  padding-inline: clamp(1.4rem, 6vw, 4rem);
  display: grid; gap: 0.15rem;
}
.menu__inner a {
  font-family: var(--f-display);
  font-size: clamp(2rem, 8.5vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  display: flex; align-items: baseline; gap: 0.75rem;
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.5s var(--e-out), transform 0.5s var(--e-out);
}
.menu__inner a i {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--brass);
}
body.menu-open .menu__inner a { opacity: 1; transform: none; }
.menu__foot {
  padding: clamp(1.4rem, 6vw, 3rem);
  border-top: 1px solid var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  color: var(--on-ink-soft);
}
.menu__art {
  position: absolute; right: -6%; bottom: -4%;
  width: min(58vw, 460px);
  opacity: 0.14;
  pointer-events: none;
}

/* ---------- 8. BUTTONS ------------------------------------ */
.btn {
  --btn-bg: var(--brass);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; gap: 0.85em;
  padding: 1.05em 1.9em;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-base) var(--e-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--on-ink);
  transform: translateY(101%);
  transition: transform var(--d-base) var(--e-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--ink); }
.btn i { font-style: normal; transition: transform var(--d-base) var(--e-out); }
.btn:hover i { transform: translateX(5px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--on-ink);
  box-shadow: inset 0 0 0 1px var(--ink-3);
}
.btn--ghost::before { background: var(--brass); }
.on-paper .btn--ghost { --btn-fg: var(--on-paper); box-shadow: inset 0 0 0 1px var(--paper-3); }

.btn--lg { padding: 1.25em 2.4em; font-size: 0.78rem; }
@media (max-width: 560px) {
  .btn { width: 100%; justify-content: center; }
  .nav .btn { width: auto; }
}

/* text link with arrow */
.link {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-lt);
  padding-bottom: 0.35em;
  border-bottom: 1px solid currentColor;
  transition: gap var(--d-base) var(--e-out), color var(--d-fast);
}
.on-paper .link, .on-paper-2 .link { color: var(--brass-dk); }
.link:hover { gap: 1.1em; }

/* ---------- 9. MEDIA -------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--ink-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--4x5   { aspect-ratio: 4 / 5; }
.media--3x4   { aspect-ratio: 3 / 4; }
.media--1x1   { aspect-ratio: 1 / 1; }
.media--3x2   { aspect-ratio: 3 / 2; }
.media--16x9  { aspect-ratio: 16 / 9; }
.media--21x9  { aspect-ratio: 21 / 9; }
@media (max-width: 680px) { .media--21x9 { aspect-ratio: 16/10; } }

/* Slow drift inside the frame — the "breathing" photo. */
.media--drift img {
  transform: scale(1.06);
  transition: transform 1.6s var(--e-out);
  will-change: transform;
}
.media--drift:hover img { transform: scale(1.005); }

.media__cap {
  position: absolute; left: 0; bottom: 0;
  padding: 0.85rem 1.05rem;
  background: linear-gradient(to top, rgba(18,21,14,0.9), transparent);
  width: 100%;
  color: var(--on-ink-soft);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

figure.plate { position: relative; }
figure.plate figcaption {
  margin-top: 0.8rem;
  display: flex; gap: 0.7rem; align-items: baseline;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-ink-faint);
}
.on-paper figure.plate figcaption { color: var(--on-paper-faint); }
figure.plate figcaption b { color: var(--brass); font-weight: 400; }

/* Engraving plates — never a shadow, never a box. */
.engraving { pointer-events: none; user-select: none; }
.engraving img { width: 100%; height: auto; }
.engraving--float {
  position: absolute;
  z-index: 1;
  will-change: transform;
}
.engraving--dim  { opacity: 0.5; }
.engraving--ghost{ opacity: 0.16; }

/* Engravings sit on dark ground by way of a warm screen. */
.on-ink .engraving img, .on-ink-2 .engraving img {
  filter: sepia(0.35) saturate(1.15) brightness(1.06) contrast(1.02);
}

/* ---------- 10. COMPONENTS -------------------------------- */

/* -- Hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(18,21,14,0.32) 46%, rgba(18,21,14,0.62) 100%);
}
.hero__inner {
  position: relative; z-index: 3;
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  padding-bottom: clamp(3.5rem, 8vh, 7rem);
  padding-top: calc(var(--nav-h) + 3rem);
}
.hero__cue {
  position: absolute; z-index: 4;
  left: 50%; bottom: 2rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.7rem;
  color: var(--on-ink-faint);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
}
.hero__cue b { display: block; width: 0; height: 0; border: 6px solid transparent; border-top-color: var(--rust-lt); }
.hero__cue--anim b { animation: bob 2.6s var(--e-inout) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* -- Marker: the rust triangle + mono note -- */
.marker { display: flex; gap: 0.9rem; align-items: flex-start; }
.marker::before {
  content: ""; flex: none; margin-top: 0.42em;
  width: 0; height: 0;
  border: 7px solid transparent;
  border-top-color: var(--rust-lt);
}
.marker--dot::before {
  border: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--moss-lt); margin-top: 0.5em;
}
.marker p { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.035em; line-height: 1.8; text-transform: none; color: var(--rust-lt); }
.marker--dot p { color: var(--on-ink-soft); }
.on-paper .marker--dot p { color: var(--on-paper-soft); }

/* -- Stat -- */
.stat {
  position: relative;
  padding-top: var(--s-3);
  border-top: 1px solid currentColor;
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding-right: clamp(74px, 8vw, 110px);
  min-height: clamp(210px, 22vw, 300px);
}
.stat__k { display: block; color: var(--brass); }
.on-paper .stat__k { color: var(--brass-dk); }
.stat__u {
  display: block; margin-top: 0.7rem;
  color: var(--brass); letter-spacing: 0.3em;
}
.on-paper .stat__u { color: var(--brass-dk); }
.stat__l { display: block; margin-top: var(--s-2); max-width: 24ch; }
.stat__art {
  position: absolute; right: 0; top: var(--s-3);
  width: clamp(62px, 6.6vw, 96px);
}
.stat .num { font-size: clamp(3.4rem, 8vw, 7rem); }
@media (max-width: 680px) {
  .stat { min-height: 0; padding-right: clamp(66px, 22vw, 96px); }
  .stat__art { width: clamp(54px, 16vw, 78px); }
}

/* -- Card: gathering / feature -- */
.card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3) var(--s-4);
  border-top: 1px solid var(--ink-3);
  transition: background var(--d-base) var(--e-out);
}
.on-paper .card { border-top-color: var(--paper-3); }
.card:hover { background: rgba(168,132,44,0.05); }
.card__art { height: clamp(84px, 9vw, 122px); display: flex; align-items: center; }
.card__art img { height: 100%; width: auto; object-fit: contain; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-ink-faint);
  padding-top: var(--s-2);
  border-top: 1px dotted rgba(233,226,207,0.2);
}
.on-paper .card__meta { color: var(--on-paper-faint); border-top-color: rgba(35,32,15,0.2); }
.card__meta b { color: var(--brass); font-weight: 400; }
.on-paper .card__meta b { color: var(--brass-dk); }
.card__idx {
  position: absolute; top: var(--s-2); right: var(--s-3);
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; color: var(--on-ink-faint);
}
.on-paper .card__idx { color: var(--on-paper-faint); }

/* -- Member -- */
.member { display: grid; gap: var(--s-3); }
.member__photo { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--ink-2); }
.member__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.2s var(--e-out), filter 0.8s var(--e-out);
}
.member:hover .member__photo img { transform: scale(1); filter: brightness(1.08); }
.member__name { font-family: var(--f-display); font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.14; letter-spacing: -0.012em; }
.member__role { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }

/* -- Q&A block (member dossier / faq) -- */
.qa { border-top: 1px solid var(--ink-3); padding-top: var(--s-3); }
.on-paper .qa { border-top-color: var(--paper-3); }
.qa__q {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 0.85rem;
}
.on-paper .qa__q { color: var(--brass-dk); }

/* -- Accordion -- */
.acc { border-bottom: 1px solid var(--paper-3); }
.on-ink .acc { border-bottom-color: var(--ink-3); }
.acc__btn {
  width: 100%; text-align: left;
  display: flex; gap: var(--s-3); align-items: baseline;
  padding: clamp(1.15rem, 2.2vw, 1.7rem) 0;
  transition: color var(--d-fast) var(--e-out);
}
.acc__n {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; color: var(--brass-dk); flex: none;
  padding-top: 0.4em;
}
.on-ink .acc__n { color: var(--brass); }
.acc__q { flex: 1; font-family: var(--f-display); font-size: clamp(1.08rem, 1.65vw, 1.42rem); line-height: 1.3; letter-spacing: -0.008em; }
.acc__sign { flex: none; position: relative; width: 15px; height: 15px; margin-top: 0.45em; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px;
  background: currentColor; transition: transform var(--d-base) var(--e-out);
}
.acc__sign::after { transform: rotate(90deg); }
.acc[open] .acc__sign::after,
.acc.is-open .acc__sign::after { transform: rotate(0deg); }
.acc__body {
  overflow: hidden;
  height: 0;
  transition: height var(--d-base) var(--e-out);
}
.acc__body > div { padding-bottom: clamp(1.3rem, 2.4vw, 2rem); max-width: 68ch; }
.acc:hover .acc__q { color: var(--brass-dk); }
.on-ink .acc:hover .acc__q { color: var(--brass-lt); }

/* -- Marquee -- */
.marquee { overflow: hidden; position: relative; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__track > * { flex: none; }
.marquee--fade::before, .marquee--fade::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 10vw, 160px); z-index: 2; pointer-events: none;
}
.marquee--fade::before { left: 0;  background: linear-gradient(90deg, var(--paper), transparent); }
.marquee--fade::after  { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.on-ink .marquee--fade::before { background: linear-gradient(90deg, var(--ink), transparent); }
.on-ink .marquee--fade::after  { background: linear-gradient(-90deg, var(--ink), transparent); }

.ticker-word {
  font-family: var(--f-display);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1; letter-spacing: -0.02em;
  padding-inline: 0.35em;
  display: flex; align-items: center; gap: 0.5em;
  white-space: nowrap;
}
.ticker-word span { color: var(--brass); font-size: 0.3em; }

/* -- Seal (rotating) -- */
.seal { position: relative; display: inline-block; }
.seal img { width: 100%; }
.seal--spin img { animation: spin 64s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -- Footer -- */
.foot { position: relative; padding-top: var(--s-7); padding-bottom: var(--s-4); overflow: hidden; }
/* the mark is a roundel now, not a horizontal lockup */
.foot__logo { width: min(46vw, 190px); margin-inline: auto; }
.foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 860px) { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }
.foot h2 { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); font-weight: 400; margin-bottom: var(--s-2); }
.foot li + li { margin-top: 0.55rem; }
.foot a { color: var(--on-ink-soft); transition: color var(--d-fast); font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.08em; text-transform: none; }
.foot a:hover { color: var(--brass-lt); }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2);
  color: var(--on-ink-faint);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase;
}

/* -- Page masthead (interior pages) -- */
.masthead {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(4rem, 11vw, 9rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.masthead__art {
  position: absolute; right: -4%; top: 8%;
  width: min(52vw, 620px);
  opacity: 0.2;
  pointer-events: none;
}
@media (max-width: 780px) { .masthead__art { width: 90vw; right: -22%; top: auto; bottom: -8%; opacity: 0.11; } }

/* ---------- 11. MOTION ------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
  transition-delay: var(--rd, 0ms);
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(0.965); }
[data-reveal="clip"]  { opacity: 1; clip-path: inset(0 0 100% 0); transform: none;
                        transition: clip-path 1.15s var(--e-out); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* line-by-line display reveal */
.line { display: block; overflow: hidden; }
.line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--e-out);
  transition-delay: var(--ld, 0ms);
}
.is-in .line > span, .line.is-in > span { transform: none; }

/* scrubbed parallax targets */
[data-parallax] { will-change: transform; }

/* On handsets, parallax offsets fight a single-column stack and open
   gaps between plates. Motion there comes from the reveal alone. */
@media (max-width: 900px) {
  [data-parallax] { transform: none !important; }
  .engraving--float { opacity: 0.26 !important; }
  .masthead__art { opacity: 0.12; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .line > span { transform: none !important; }
  .hero__bg, [data-parallax] { transform: none !important; }
}

/* ---------- 12. UTILITIES --------------------------------- */
.u-brass { color: var(--brass); }
.on-paper .u-brass { color: var(--brass-dk); }
.u-rust  { color: var(--rust-lt); }
.u-soft  { color: var(--on-ink-soft); }
.on-paper .u-soft { color: var(--on-paper-soft); }
.u-faint { color: var(--on-ink-faint); }
.on-paper .u-faint { color: var(--on-paper-faint); }
.u-center { text-align: center; }
.u-center .overline { justify-content: center; }
.u-mt-2 { margin-top: var(--s-2); } .u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); } .u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); } .u-mt-7 { margin-top: var(--s-7); }
/* --s-8 was defined in the token scale but never had a utility, so any
   u-mt-8 in the markup silently applied no margin at all. */
.u-mt-8 { margin-top: var(--s-8); }
.u-full-bleed { width: auto; margin-inline: calc(50% - 50vw); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -100%; left: var(--s-2); z-index: 1200;
  background: var(--brass); color: var(--ink); padding: 0.8rem 1.2rem;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase;
}
.skip:focus { top: var(--s-2); }

/* ============================================================
   13. THE LEDGER — scarcity as interface
   ============================================================ */

/* -- seat counter in the nav -- */
.seatcount {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.35rem 0.85rem 0.35rem 0;
  margin-right: 0.4rem;
  border-right: 1px solid var(--ink-3);
  min-width: 148px;
}
.seatcount__n {
  grid-row: 1 / 3;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--brass-lt);
  font-variant-numeric: lining-nums tabular-nums;
}
.seatcount__bar {
  display: block; height: 2px; width: 100%;
  background: var(--ink-3);
  align-self: end; margin-bottom: 3px;
}
.seatcount__bar i {
  display: block; height: 100%;
  background: var(--brass-lt);
  transform-origin: 0 50%;
}
.seatcount__l {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-ink-faint);
  white-space: nowrap;
}
.seatcount:hover .seatcount__l { color: var(--on-ink-soft); }
.on-paper .seatcount { border-right-color: var(--paper-3); }
.on-paper .seatcount__n { color: var(--brass-dk); }
.on-paper .seatcount__bar { background: var(--paper-3); }
.on-paper .seatcount__bar i { background: var(--brass-dk); }
.on-paper .seatcount__l { color: var(--on-paper-faint); }
@media (max-width: 1280px) { .seatcount__l { display: none; } .seatcount { min-width: 0; } }

/* -- the meter: 99 marks -- */
.seatmeter {
  display: grid;
  grid-template-columns: repeat(33, 1fr);
  gap: clamp(3px, 0.5vw, 6px);
  max-width: 760px;
  margin-inline: auto;
}
.seatmeter i {
  display: block;
  aspect-ratio: 1;
  background: var(--brass);
  border-radius: 1px;
}
.seatmeter i.seat--open {
  background: none;
  box-shadow: inset 0 0 0 1px var(--rust-lt);
  opacity: 0.7;
}
.seatmeter--lg { grid-template-columns: repeat(33, 1fr); max-width: 980px; margin-inline: 0; }
@media (max-width: 680px) {
  .seatmeter, .seatmeter--lg { grid-template-columns: repeat(11, 1fr); gap: 4px; }
}

/* -- the ruled ledger -- */
.ledger {
  columns: 3;
  column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  counter-reset: none;
}
@media (max-width: 1180px) { .ledger { columns: 2; } }
@media (max-width: 720px)  { .ledger { columns: 1; } }

.lrow {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 2.6em 26px 1fr auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--paper-3);
  transition: background var(--d-fast) var(--e-out);
}
.on-ink .lrow { border-bottom-color: var(--ink-3); }
.lrow:hover { background: rgba(168,132,44,0.07); }
.lrow__n {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; color: var(--on-paper-faint);
  font-variant-numeric: tabular-nums;
}
.on-ink .lrow__n { color: var(--on-ink-faint); }
.lrow__mark { align-self: center; }
.lrow__mark .engraving { display: block; width: 26px; opacity: 0.9; }
.lrow__body { min-width: 0; }
.lrow__name {
  display: block;
  font-family: var(--f-display);
  font-size: 1.02rem; line-height: 1.24; letter-spacing: -0.008em;
}
.lrow__name a { border-bottom: 1px solid var(--brass); }
.lrow__proj {
  display: block; margin-top: 0.18rem;
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.02em; line-height: 1.5;
  color: var(--on-paper-soft);
}
.on-ink .lrow__proj { color: var(--on-ink-soft); }
.lrow__tag {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-dk); white-space: nowrap;
}
.on-ink .lrow__tag { color: var(--brass); }

.lrow--open {
  grid-template-columns: 2.6em 1fr auto;
  border-bottom-style: dotted;
}
.lrow--open .lrow__name {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--rust);
}
.lrow--open .lrow__tag { color: var(--rust); opacity: 0.7; }

/* ============================================================
   14. THE OFFER — stack, guarantee, steps
   ============================================================ */
.stack { position: relative; }
.st { width: 100%; border-collapse: collapse; }
.st caption {
  text-align: left; padding-bottom: 0.9rem;
  color: var(--brass); letter-spacing: 0.24em;
}
.on-paper .st caption { color: var(--brass-dk); }
.st td { padding: 0.85rem 0; border-bottom: 1px solid var(--ink-3); vertical-align: top; }
.on-paper .st td { border-bottom-color: var(--paper-3); }
.st__item {
  font-family: var(--f-mono); font-size: var(--t-mono);
  letter-spacing: 0.02em; line-height: 1.5;
}
.st__item em {
  display: block; font-style: normal; margin-top: 0.22rem;
  font-size: 0.64rem; letter-spacing: 0.06em;
  color: var(--on-ink-faint);
}
.on-paper .st__item em { color: var(--on-paper-faint); }
.st__val {
  text-align: right; white-space: nowrap; padding-left: 1.5rem;
  font-family: var(--f-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--on-ink-soft);
}
.on-paper .st__val { color: var(--on-paper-soft); }
.st__total td { border-bottom: 0; padding-top: 1.25rem; }
.st__total .st__item, .st__total .st__val {
  color: var(--on-ink); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.on-paper .st__total .st__item, .on-paper .st__total .st__val { color: var(--on-paper); }
.st__dues td {
  border-top: 2px solid var(--brass);
  border-bottom: 0; padding-top: 1rem;
}
.st__dues .st__item, .st__dues .st__val {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  letter-spacing: -0.01em; text-transform: none;
  color: var(--brass-lt);
}
.on-paper .st__dues .st__item, .on-paper .st__dues .st__val { color: var(--brass-dk); }

.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  align-items: start;
  margin-top: var(--s-7);
  padding: clamp(1.5rem, 3vw, 2.4rem) 0 0;
  border-top: 2px solid var(--brass);
  max-width: 860px;
}
.guarantee__art { width: clamp(64px, 8vw, 96px); flex: none; }
.guarantee__art img { width: 100%; }
@media (max-width: 620px) { .guarantee { grid-template-columns: 1fr; } }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { padding-top: var(--s-3); border-top: 1px solid var(--paper-3); }
.on-ink .step { border-top-color: var(--ink-3); }
.step__n {
  display: block; margin-bottom: 0.8rem;
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.24em; color: var(--brass-dk);
}
.on-ink .step__n { color: var(--brass); }

.dates li {
  padding: 0.55rem 0;
  border-bottom: 1px dotted rgba(35,32,15,0.26);
  color: var(--on-paper-soft);
}
.dates li b { margin-right: 0.8rem; }

/* -- the problem block -- */
.problem__lines p {
  font-family: var(--f-mono);
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  letter-spacing: 0.02em;
  line-height: 1.95;
  color: var(--on-ink-soft);
  max-width: 62ch;
}
.problem__lines p + p { margin-top: 0.9rem; }
.problem .display { max-width: 22ch; }

/* -- compounding figures -- */
.compound {
  display: flex; flex-wrap: wrap;
  gap: 0.9rem clamp(1.5rem, 3.5vw, 3.5rem);
  padding-top: var(--s-3);
  border-top: 1px dotted rgba(35,32,15,0.26);
}
.on-ink .compound { border-top-color: rgba(233,226,207,0.2); }
.compound__i {
  font-family: var(--f-mono); font-size: var(--t-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-paper-soft);
}
.on-ink .compound__i { color: var(--on-ink-soft); }
.compound__i b {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: 1.9em; letter-spacing: -0.02em;
  color: var(--brass-dk); margin-right: 0.45em;
  font-variant-numeric: lining-nums;
}
.on-ink .compound__i b { color: var(--brass-lt); }

/* ============================================================
   15. FIELD MARKS
   ============================================================ */
.fieldmark img { width: 100%; height: auto; }
.markplate { width: min(52vw, 220px); }
.markplate .engraving { display: block; }
.markplate figcaption {
  margin-top: 0.9rem; padding-top: 0.7rem;
  border-top: 1px solid var(--ink-3);
  font-size: var(--t-micro); letter-spacing: 0.2em;
  color: var(--on-ink-faint);
}
.on-paper .markplate figcaption { border-top-color: var(--paper-3); color: var(--on-paper-faint); }

.markcard__art {
  height: 132px;
  display: flex; align-items: center; justify-content: center;
}
.markcard__art .engraving { width: auto; height: 100%; }
.markcard__art img { width: auto; height: 100%; object-fit: contain; }

/* form additions */
.form .f--hero > span { color: var(--brass); }
.on-paper .form .f--hero > span { color: var(--brass-dk); }
.form .f__help {
  display: block; margin: -0.25rem 0 0.7rem;
  font-family: var(--f-mono); font-size: 0.68rem;
  font-style: normal; letter-spacing: 0.02em; line-height: 1.6;
  color: var(--on-ink-faint); text-transform: none;
}
.on-paper .form .f__help { color: var(--on-paper-faint); }
.form .f__opt {
  font-style: normal; letter-spacing: 0.14em;
  color: var(--on-ink-faint); margin-left: 0.7em;
}
.on-ink .form input, .on-ink .form textarea {
  color: var(--on-ink); border-bottom-color: var(--ink-3);
}
.on-ink .form input:focus, .on-ink .form textarea:focus {
  border-bottom-color: var(--brass); background: rgba(168,132,44,.08);
}
.on-ink .form .f > span { color: var(--on-ink-soft); }
.on-ink .form .f > span b { color: var(--rust-lt); }

/* meter sits flush left inside a masthead, centred inside a centred section */
.masthead .seatmeter { margin-inline: 0; }
.seatmeter { will-change: auto; }

/* ============================================================
   16. MOTION II — pinned horizontal, panel stacking, depth
   ============================================================ */

/* -- 16.1 pinned horizontal chapter -------------------------- */
.hscroll {
  position: relative;
  /* height is set by JS: 100vh + the horizontal distance to travel */
  overflow: visible;
  isolation: isolate;
}
.hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3.5rem));
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}
.hscroll__head {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  position: relative;
}
.hscroll__hint {
  position: absolute; right: 0; bottom: 0;
  color: var(--brass-dk);
  animation: nudge 2.4s var(--e-inout) infinite;
}
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

.hscroll__track {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 4rem);
  padding-inline: var(--gutter);
  height: 100%;
  will-change: transform;
}
.hpanel {
  flex: none;
  width: clamp(280px, 31vw, 430px);
  height: min(84%, 720px);
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: 0.5rem;
  padding: clamp(1.2rem, 2vw, 1.9rem) 0 0;
  border-top: 1px solid var(--paper-3);
  position: relative;
}
.hpanel__idx { color: var(--brass-dk); letter-spacing: 0.22em; }
.hpanel__art { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 1rem 0; }
.hpanel__art .engraving { width: auto; height: 100%; display: flex; }
.hpanel__art img { width: auto; height: 100%; max-height: 220px; object-fit: contain; }
.hpanel__name { margin-top: 0.5rem; }
.hpanel__meta {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem;
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px dotted rgba(30,27,12,0.28);
  font-size: var(--t-micro);
  color: var(--on-paper-faint);
}
.hpanel__meta b { color: var(--brass-dk); font-weight: 400; }
.hpanel--end {
  width: clamp(300px, 34vw, 470px);
  grid-template-rows: auto auto auto !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 0;
  border-top: 0;
  height: auto;
}
.hpanel--end .display { margin: 0; }
.hpanel--end > * + * { margin-top: 1.1rem; }

.hscroll__rail {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  height: 2px;
  background: var(--paper-3);
}
.hscroll__rail i {
  display: block; height: 100%; width: 100%;
  background: var(--brass-dk);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* Handsets keep the pin. The rail is the whole point of the section, and
   a swipe carousel on a phone reads as a different component entirely —
   so the panels just get narrower and the travel gets shorter. */
@media (max-width: 900px) {
  .hscroll__sticky {
    padding-top: calc(var(--nav-h) + 1.1rem);
    padding-bottom: 1.1rem;
  }
  .hscroll__track { gap: 1.6rem; }
  .hpanel { width: 76vw; }
  .hpanel--end { width: 84vw; }
  .hpanel__art img { max-height: 130px; }
  .hscroll__hint { position: static; display: block; margin-top: 0.8rem; }
}

/* Anyone who has asked the OS to stop moving things gets the plain
   swipeable rail instead of a pinned one. */
@media (prefers-reduced-motion: reduce) {
  .hscroll { height: auto !important; }
  .hscroll__sticky { position: static; height: auto; padding-bottom: 2rem; }
  .hscroll__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    padding-bottom: 1.5rem;
    height: auto;
  }
  .hpanel { scroll-snap-align: center; }
  .hscroll__hint { position: static; display: block; margin-top: 1rem; }
}

/* -- 16.2 the hero pins; the next chapter slides over it ----- */
.hero--pin { position: sticky; top: 0; z-index: 0; }
.hero--pin + * { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero--pin { position: relative; } }

/* the pinned hero is covered by each chapter's own opaque ground */
.on-ink, .on-ink-2, .on-paper, .on-paper-2 { position: relative; }
.hero--pin + section, .hero--pin ~ section { background-color: var(--ink); }
.hero--pin ~ section.on-paper   { background-color: var(--paper); }
.hero--pin ~ section.on-paper-2 { background-color: var(--paper-2); }
.hero--pin ~ section.on-ink-2   { background-color: var(--ink-2); }

/* -- 16.3 depth parallax inside the image frame -------------- */
/* The frame stays put; the photograph inside it drifts. This is
   what actually reads as depth — moving the whole box does not. */
.media--depth { overflow: hidden; }
.media--depth img {
  height: 124%;
  width: 100%;
  object-fit: cover;
  position: relative;
  top: -12%;
  will-change: transform;
}

/* -- 16.4 chapter snapping ----------------------------------- */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* .has-damped means the JS scroll controller is running and does the
     chapter settling itself; native snap on top of it rubber-bands. */
  html:not(.has-damped) { scroll-snap-type: y proximity; }
  .section--snap {
    scroll-snap-align: center;
    scroll-snap-stop: normal;
  }
  .hero--pin { scroll-snap-align: start; }
}

/* -- 16.5 scrubbed wipes ------------------------------------- */
.wipe { clip-path: inset(0 0 var(--wipe, 100%) 0); will-change: clip-path; }

/* -- 16.6 stronger engraving drift --------------------------- */
.engraving--float { will-change: transform; }

/* ============================================================
   17. POSITIONING COMPONENTS
   ============================================================ */

/* -- the honest comparison -------------------------------- */
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmp th, .cmp td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; }
.cmp thead th {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400;
  border-bottom: 1px solid var(--paper-3);
  padding-bottom: 0.9rem;
}
.on-ink .cmp thead th { border-bottom-color: var(--ink-3); }
.cmp tbody td { border-bottom: 1px solid var(--paper-3); font-size: 0.98rem; line-height: 1.5; }
.on-ink .cmp tbody td { border-bottom-color: var(--ink-3); }
.cmp__k {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-paper-faint); width: 24%;
}
.on-ink .cmp__k { color: var(--on-ink-faint); }
.cmp__b { color: var(--on-paper-soft); width: 32%; font-family: var(--f-text); }
.on-ink .cmp__b { color: var(--on-ink-soft); }
.cmp__a {
  color: var(--on-paper); width: 44%;
  font-family: var(--f-text); font-weight: 600;
  background: rgba(168,132,44,0.07);
  box-shadow: inset 2px 0 0 var(--brass);
}
.on-ink .cmp__a { color: var(--on-ink); background: rgba(168,132,44,0.10); }
.cmp thead .cmp__a { color: var(--brass-dk); font-weight: 500; }
.on-ink .cmp thead .cmp__a { color: var(--brass-lt); }
/* the cost row is last and it is the punchline — set it in display type */
.cmp tbody tr:last-child .cmp__a,
.cmp tbody tr:last-child .cmp__b {
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -0.01em;
}

/* On a handset it stays a real three-column table, exactly like the one
   on the desktop — criterion, them, us — because the side-by-side read IS
   the argument and any restacking breaks it into unrelated blocks. What
   changes is only the metrics: fixed column widths so the criterion never
   steals room from the values, and type sized so seven rows fit in about
   a screen and a half. The column heads stick under the nav. */
@media (max-width: 760px) {
  .cmp-wrap { overflow-x: visible; }
  .cmp { min-width: 0; width: 100%; table-layout: fixed; }

  .cmp th, .cmp td { padding: 0.62rem 0.46rem; }
  .cmp__k { width: 29%; font-size: 0.55rem; letter-spacing: 0.05em; }
  .cmp__b { width: 34.5%; }
  .cmp__a { width: 36.5%; }

  /* sticky lives on the cells, not the row: a collapsed-border table
     drops the row's own border when it sticks, so the rule is a shadow */
  .cmp thead th {
    position: sticky;
    top: var(--nav-h);
    z-index: 3;
    font-size: 0.64rem;
    letter-spacing: 0.07em;
    line-height: 1.4;
    padding-block: 0.75rem;
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--paper-3);
    background: var(--paper);
  }
  .on-ink .cmp thead th { background: var(--ink); box-shadow: 0 1px 0 var(--ink-3); }
  .cmp thead .cmp__a { background: var(--paper-2); }
  .on-ink .cmp thead .cmp__a { background: var(--ink-2); }

  .cmp tbody td { font-size: 0.78rem; line-height: 1.42; }
  .cmp tbody td[data-label]::before { content: none; }

  .cmp tbody tr:last-child .cmp__a,
  .cmp tbody tr:last-child .cmp__b { font-size: 1.02rem; line-height: 1.2; }
}

/* -- competitor price range: full band on desktop, anchor only on mobile */
@media (max-width: 760px) { .cmp__range { display: none; } }

/* -- the flyway banner sits over ink at full strength and shouts; the
      engraving is a mark here, not the subject of the section ------- */
/* dimmed so the mark sits behind the headline rather than competing
   with it; the lockup's wordmark is a reversed plate so it stays
   legible on ink at this strength */
/* a seal, not a banner — 620px was lockup width and dwarfed the headline */
.banner-mark { opacity: 0.9; width: min(42vw, 210px); margin-inline: auto; }
.banner-mark img { display: block; width: 100%; height: auto; }

/* -- the three virtues ------------------------------------ */
.virtues { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 4rem); }
@media (max-width: 900px) { .virtues { grid-template-columns: 1fr; } }
.virtue { border-top: 1px solid var(--paper-3); padding-top: var(--s-4); }
.on-ink .virtue { border-top-color: var(--ink-3); }
.virtue__art { height: clamp(110px, 12vw, 168px); display: flex; align-items: center; margin-bottom: var(--s-3); }
.virtue__art .engraving { height: 100%; display: flex; }
.virtue__art img { width: auto; height: 100%; object-fit: contain; }
.virtue__name { color: var(--brass-dk); }
.on-ink .virtue__name { color: var(--brass-lt); }

/* -- magnanimous ------------------------------------------ */
.magna {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  border-top: 2px solid var(--brass); padding-top: clamp(2rem, 4vw, 3rem);
}
.magna__art { width: clamp(120px, 16vw, 210px); }
.magna__art img { width: 100%; }
.magna .display--l { color: var(--brass-dk); }
.on-ink .magna .display--l { color: var(--brass-lt); }
@media (max-width: 700px) { .magna { grid-template-columns: 1fr; } }

/* -- who it is not for ------------------------------------ */
.notfor { border-top: 1px solid var(--ink-3); padding-top: var(--s-3); }
.on-paper .notfor { border-top-color: var(--paper-3); }
.notfor__t {
  color: var(--rust-lt); letter-spacing: 0.2em;
}
.on-paper .notfor__t { color: var(--rust); }

/* -- the house rules -------------------------------------- */
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vw, 5rem); }
@media (max-width: 820px) { .rules { grid-template-columns: 1fr; } }
.rule-item {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.5rem;
  border-top: 1px solid var(--ink-3); padding-top: var(--s-3);
}
.on-paper .rule-item { border-top-color: var(--paper-3); }
.rule-item__n { color: var(--brass); padding-top: 0.35rem; letter-spacing: 0.18em; }
.on-paper .rule-item__n { color: var(--brass-dk); }

/* -- what's included -------------------------------------- */
.inc { border-top: 1px solid var(--paper-3); padding-top: var(--s-3); }
.on-ink .inc { border-top-color: var(--ink-3); }
.inc__art { height: clamp(78px, 8vw, 108px); display: flex; align-items: center; }
.inc__art .engraving { height: 100%; display: flex; }
.inc__art img { width: auto; height: 100%; object-fit: contain; }

/* -- industry chips --------------------------------------- */
.industry {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--on-paper-soft);
  padding: 0.5em 1.1em;
  box-shadow: inset 0 0 0 1px var(--paper-3);
}
.on-ink .industry { color: var(--on-ink-soft); box-shadow: inset 0 0 0 1px var(--ink-3); }
.compound { align-items: center; }

/* the stat label is prose now, not a mono string */
.stat__l.copy { font-size: 0.98rem; line-height: 1.5; max-width: 26ch; }

/* ============================================================
   18. DENSITY BREAKERS
   Devices that carry a point without a paragraph.
   ============================================================ */

/* -- 18.1 POLAROID WALL — two counter-drifting rows --------- */
/* -- 18.1 THE PLATE REGISTER ---------------------------------
   A catalogue grid, not a scrapbook: full-bleed frames, no tilt,
   no shadow, a hairline and a plate number under each. Columns
   drift at slightly different rates (via [data-parallax], which
   is desktop-only) so the block breathes without wobbling.     */
.register {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 2.1rem);
  align-items: start;
}
.register > :nth-child(2n) { margin-top: clamp(1.2rem, 4vw, 4rem); }
.reg__plate { margin: 0; will-change: transform; }
.reg__plate img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--ink-2);
}
.reg__plate figcaption {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--paper-3);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-paper-faint);
}
.reg__plate figcaption b { color: var(--brass-dk); font-weight: 400; }
.on-ink .reg__plate figcaption,
.register.on-ink .reg__plate figcaption { border-top-color: var(--ink-3); color: var(--on-ink-faint); }
.on-ink .reg__plate figcaption b,
.register.on-ink .reg__plate figcaption b { color: var(--brass-lt); }

@media (max-width: 1000px) { .register { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .register { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 0.7rem; }
  .register > :nth-child(2n) { margin-top: 1.6rem; }
}

/* -- 18.2 NUMBERED LIST — a label rule, then spot-art items -- */
.deck__head {
  display: flex; align-items: baseline; gap: 1.2rem;
  border-bottom: 1px solid var(--paper-3);
  padding-bottom: 0.9rem;
}
.on-ink .deck__head { border-bottom-color: var(--ink-3); }
.deck__head .overline::before { display: none; }
.deck__head b {
  margin-left: auto; font-family: var(--f-mono);
  font-size: var(--t-micro); letter-spacing: 0.2em; font-weight: 400;
  color: var(--on-paper-faint);
}
.on-ink .deck__head b { color: var(--on-ink-faint); }

.deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem) clamp(1.6rem, 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.deck--3 { grid-template-columns: repeat(3, 1fr); }
.deck--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1080px) { .deck, .deck--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .deck, .deck--3, .deck--2 { grid-template-columns: 1fr; } }

.dcard { position: relative; }
.dcard__n {
  display: block;
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.22em; color: var(--brass-dk);
  padding-bottom: 1.1rem;
  border-top: 1px solid var(--paper-3);
  padding-top: 0.9rem;
}
.on-ink .dcard__n { color: var(--brass); border-top-color: var(--ink-3); }
.dcard__art { height: clamp(76px, 8vw, 104px); display: flex; align-items: center; margin-bottom: 1.2rem; }
.dcard__art .engraving { height: 100%; display: flex; }
.dcard__art img { width: auto; height: 100%; object-fit: contain; }
.dcard h3 { font-family: var(--f-display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.16; letter-spacing: -0.012em; }
.dcard p {
  margin-top: 0.75rem;
  font-family: var(--f-text);
  font-size: 1rem; line-height: 1.6;
  color: var(--on-paper-soft);
  max-width: 34ch;
}
.on-ink .dcard p { color: var(--on-ink-soft); }

/* -- 18.3 PINNED STATE PANEL — image left, text right ------- */
.pin {
  position: relative;   /* height set by JS: (n + 1) x 100vh */
}
.pin__sticky {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 48% 1fr;
  align-items: center;
}
.pin__figs { position: relative; height: 100%; }
.pin__fig {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translate3d(-8%, 0, 0);
  transition: opacity 0.75s var(--e-out), transform 1s var(--e-out);
}
.pin__fig img { width: 100%; height: 100%; object-fit: cover; }
.pin__fig.is-on { opacity: 1; transform: none; }

.pin__texts {
  position: relative;
  padding-inline: clamp(1.5rem, 6vw, 6rem);
  padding-block: clamp(2rem, 6vh, 5rem);
}
.pin__text {
  position: absolute;
  left: clamp(1.5rem, 6vw, 6rem);
  right: clamp(1.5rem, 6vw, 6rem);
  top: 50%;
  transform: translateY(calc(-50% + 26px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--e-out), transform 0.8s var(--e-out);
  max-width: 42ch;
}
.pin__text.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.pin__text h2 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.016em;
  margin-top: 0.7rem;
}
.pin__text p {
  margin-top: 1.2rem;
  font-family: var(--f-text);
  font-size: var(--t-copy); line-height: 1.62;
  color: var(--on-ink-soft);
  max-width: 38ch;
}
.on-paper .pin__text p { color: var(--on-paper-soft); }

.pin__ticks { display: flex; gap: 0.6rem; align-items: center; }
.pin__ticks i {
  display: block; width: clamp(24px, 3vw, 40px); height: 2px;
  background: var(--ink-3);
}
.on-paper .pin__ticks i { background: var(--paper-3); }
.pin__ticks i.is-on { background: var(--rust-lt); }
.pin__count {
  display: block; margin-top: 0.5rem;
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; color: var(--on-ink-faint);
}
.on-paper .pin__count { color: var(--on-paper-faint); }
.pin__kicker {
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass-lt); margin-top: 1.4rem; display: block;
}
.on-paper .pin__kicker { color: var(--brass-dk); }

@media (max-width: 900px) {
  .pin { height: auto !important; }
  .pin__sticky { position: static; height: auto; grid-template-columns: 1fr; }
  .pin__figs { height: auto; }
  .pin__fig { position: relative; opacity: 1; transform: none; aspect-ratio: 4/3; }
  .pin__fig + .pin__fig { display: none; }
  .pin__texts { display: grid; gap: 3rem; padding-block: 3rem; }
  .pin__text,
  .pin__text.is-on {
    position: relative; left: auto; right: auto; top: auto;
    transform: none; opacity: 1; pointer-events: auto;
  }
  .pin__count { margin-top: 0; }
  .pin__ticks { display: none; }
}

/* -- 18.4 big statement panel, no body copy ----------------- */
.statement {
  min-height: 82svh;
  display: grid; place-items: center; text-align: center;
}
.statement .display { max-width: 18ch; }

/* ============================================================
   19. APPLICATION FORM — a normal form, laid out normally
   ============================================================ */
.appform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.4rem, 3vw, 2.6rem);
}
@media (max-width: 700px) { .appform { grid-template-columns: 1fr; } }

.fld { display: flex; flex-direction: column; margin: 0; }
.fld--wide { grid-column: 1 / -1; }

.fld label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  margin-bottom: 0.55rem;
}
.on-paper .fld label { color: var(--on-paper-soft); }
/* the required marker sits on ink; --rust-lt measures 3.96:1 there */
.fld abbr { color: #C87A52; text-decoration: none; border: 0; margin-left: 0.35em; }
.fld__opt {
  margin-left: 0.5em; letter-spacing: 0.14em;
  color: var(--on-ink-faint); text-transform: none;
}
.fld__help {
  font-family: var(--f-text);
  font-size: 0.92rem; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  color: var(--on-ink-faint);
  margin: -0.25rem 0 0.6rem;
}
.on-paper .fld__help { color: var(--on-paper-faint); }

.appform input,
.appform textarea {
  width: 100%;
  font-family: var(--f-text);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--on-ink);
  background: rgba(236, 230, 213, 0.045);
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  transition: border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
  -webkit-appearance: none;
  appearance: none;
}
.appform textarea { resize: vertical; min-height: 6.5rem; }
.appform input::placeholder,
.appform textarea::placeholder { color: var(--on-ink-faint); }
.appform input:hover, .appform textarea:hover { border-color: var(--brass-dk); }
.appform input:focus, .appform textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: rgba(168, 132, 44, 0.09);
  box-shadow: 0 0 0 3px rgba(168, 132, 44, 0.16);
}
.appform input:invalid:not(:placeholder-shown) { border-color: var(--rust); }

.on-paper .appform input, .on-paper .appform textarea {
  color: var(--on-paper); background: rgba(255,255,255,0.5); border-color: var(--paper-3);
}

.appform__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.8rem;
  margin-top: clamp(0.5rem, 1.5vw, 1.2rem);
  padding-top: clamp(1.2rem, 2.5vw, 2rem);
  border-top: 1px solid var(--ink-3);
}
.on-paper .appform__foot { border-top-color: var(--paper-3); }
.appform__foot .btn { flex: none; }
@media (max-width: 560px) { .appform__foot .btn { width: 100%; } }

/* ============================================================
   20. NORMALISED RAIL PANELS + SIX-UP STATS + CITATIONS
   ============================================================ */
/* Every gathering panel is the same shape: fixed rows, so titles,
   plates, ledes and meta all sit on shared baselines. */
.hpanel {
  grid-template-rows:
    auto                        /* index */
    clamp(96px, 11vh, 150px)    /* plate */
    5.6em                       /* title — two lines reserved */
    10.6em                      /* lede  — seven lines reserved */
    auto;                       /* meta  */
  height: auto;
  align-content: start;
}
.hpanel__art { height: 100%; padding: 0.6rem 0; }
.hpanel__art img { max-height: 100%; }
.hpanel__name {
  margin-top: 0.9rem;
  align-self: start;
  font-size: clamp(1.35rem, 1.85vw, 1.8rem);
  line-height: 1.16;
}
.hpanel__lede {
  font-family: var(--f-text);
  font-size: 0.96rem; line-height: 1.5;
  align-self: start;
  color: var(--on-paper-soft);
  margin-top: 0.2rem;
}
.hpanel__meta { margin-top: 0; align-self: end; }

.statgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 1000px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .statgrid { grid-template-columns: 1fr; } }
.statgrid .stat { min-height: 0; }
.statgrid .num { font-size: clamp(3rem, 6vw, 5rem); }

.cites { margin-top: 0.9rem; }
.cites li {
  font-family: var(--f-mono); font-size: var(--t-micro);
  line-height: 1.7; letter-spacing: 0.02em;
  color: var(--on-paper-faint);
  padding-left: 1.1rem; position: relative;
}
.on-ink .cites li { color: var(--on-ink-faint); }
.cites li::before { content: "—"; position: absolute; left: 0; }
.cites a { border-bottom: 1px solid currentColor; color: var(--brass-dk); }
.on-ink .cites a { color: var(--brass); }

/* ============================================================
   21. MOTION III — one signature device per page
   ============================================================ */

/* 21.1 DEAL — cards stack up and square off as they enter */
.deal { perspective: 1400px; }
.deal > * {
  opacity: 0;
  transform: translateY(70px) rotate(var(--deal-r, -3deg)) scale(0.94);
  transition: opacity 0.9s var(--e-out), transform 1.05s var(--e-out);
  transition-delay: var(--rd, 0ms);
}
.deal > *.is-in { opacity: 1; transform: none; }

/* 21.2 SPLIT COLUMN — one side fixed while the other scrolls past */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.duo__fixed { position: sticky; top: calc(var(--nav-h) + clamp(1.5rem, 6vh, 5rem)); }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } .duo__fixed { position: static; } }

/* 21.3 CURTAIN — a full-height photo wipes open on entry */
.curtain { position: relative; overflow: hidden; }
.curtain img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.6s var(--e-out); }
.curtain::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform-origin: 50% 100%;
  transition: transform 1.15s var(--e-out);
}
.curtain.is-in::after { transform: scaleY(0); }
.curtain.is-in img { transform: scale(1); }

/* 21.4 more snap points, on every page */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .section--snap { scroll-snap-align: center; scroll-snap-stop: normal; }
  .pin, .hscroll { scroll-snap-align: none; }
  .statement { scroll-snap-align: center; }
}

/* ============================================================
   22. INDUSTRY TICKER — two continuous bands, alternating chips
   ============================================================ */
.ticker { overflow: hidden; }
.ticker__row {
  display: flex;
  width: max-content;
  gap: clamp(0.5rem, 0.9vw, 0.9rem);
  will-change: transform;
}
.ticker__row + .ticker__row { margin-top: clamp(0.5rem, 0.9vw, 0.9rem); }

.chip {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.75em 1.35em;
  color: var(--on-paper-soft);
  box-shadow: inset 0 0 0 1px var(--paper-3);
}
.chip--inv {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.on-ink .chip { color: var(--on-ink-soft); box-shadow: inset 0 0 0 1px var(--ink-3); }
.on-ink .chip--inv { background: var(--paper); color: var(--ink); box-shadow: none; }

/* ============================================================
   23. ENGRAVING WEIGHT
   The plates were sitting at full strength on top of the page,
   which reads as sticker art. They are printed ON the surface:
   knocked back, multiplied into the paper, never floating.
   ============================================================ */

/* Spot art inside decks, cards, rails and virtues */
.dcard__art .engraving,
.hpanel__art .engraving,
.inc__art .engraving,
.virtue__art .engraving,
.card__art .engraving,
.stat__art,
.markcard__art .engraving {
  opacity: 0.62;
  mix-blend-mode: multiply;
  transition: opacity var(--d-base) var(--e-out);
}
.on-ink .dcard__art .engraving,
.on-ink .hpanel__art .engraving,
.on-ink .inc__art .engraving,
.on-ink .virtue__art .engraving,
.on-ink .card__art .engraving,
.on-ink .stat__art,
.on-ink .markcard__art .engraving {
  opacity: 0.52;
  mix-blend-mode: screen;
}

/* they lift a little when the card is engaged */
.dcard:hover .dcard__art .engraving,
.inc:hover .inc__art .engraving,
.card:hover .card__art .engraving { opacity: 0.9; }

/* Marks riding over photography — these were the worst offenders */
.g-art__mark {
  opacity: 0.55;
  filter: drop-shadow(0 4px 18px rgba(18,21,14,.5));
  mix-blend-mode: screen;
}
.lrow__mark .engraving { opacity: 0.55; }
.markplate .engraving { opacity: 0.72; }

/* Big floating plates behind copy: further back still */
.engraving--float  { opacity: 0.34; }
.engraving--dim    { opacity: 0.42; }
.engraving--ghost  { opacity: 0.13; }
.masthead__art     { opacity: 0.15; }
.menu__art         { opacity: 0.10; }

@media (max-width: 900px) {
  .engraving--float { opacity: 0.2 !important; }
  .masthead__art { opacity: 0.09; }
}

/* the style guide must still show the plates honestly */
.markcard__art .engraving { opacity: 0.85; mix-blend-mode: normal; }
.on-ink .markcard__art .engraving { opacity: 0.8; mix-blend-mode: normal; }

/* ============================================================
   24. SCRUBBED WORD REVEAL
   Long prose lights word by word as the block crosses the
   viewport. Only colour animates — the text is always present
   and at full size, so nothing reflows and a screen reader
   reads the whole passage regardless of scroll position.
   ============================================================ */
/* Resting state first, per surface. The lit rules come last and are
   matched at the same depth as the .on-ink variant — equal specificity
   plus later in the file is the only reason they win. Put them any
   earlier and the dark-surface rule silently overrides them, which
   makes the whole effect a no-op on ink. */
.scrubwords .w {
  color: rgba(30, 27, 12, 0.24);
  transition: color 620ms cubic-bezier(.22,.61,.36,1);
}
.on-ink .scrubwords .w { color: rgba(236, 230, 213, 0.24); }

/* the lit colour is whatever the block already uses, so soft and faint
   variants keep their own tone */
.scrubwords .w.is-lit,
.on-ink .scrubwords .w.is-lit { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .scrubwords .w,
  .on-ink .scrubwords .w { color: inherit; transition: none; }
}

/* ============================================================
   25. RULES THAT DRAW ON
   Hairlines wipe in from the left rather than fading, which is
   what stops a page of horizontal rules reading as a template.
   ============================================================ */
.rule[data-reveal],
.overline[data-reveal]::before {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms cubic-bezier(.22,.61,.36,1) var(--rd, 0ms);
}
.rule[data-reveal].is-in,
.overline[data-reveal].is-in::before { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .rule[data-reveal], .overline[data-reveal]::before { clip-path: none; transition: none; }
}

/* ============================================================
   26. THE HIDDEN PLATES
   A few engravings have a photograph behind them. Hover one —
   or tap it on a phone — and the plate dissolves into the
   picture. Nothing labels them; they are for the people who
   put the cursor somewhere it did not need to go.
   ============================================================ */
/* Do NOT set `position` or `display` here.

   position: both current hosts are already absolutely positioned, and an
   equal-specificity `relative` later in the file silently overrode them,
   dragging a decorative plate into the layout flow. Absolute positioning
   already gives the photograph the containing block it needs.

   display: `inline-flex` made the plate a stretch-aligned flex item, so
   the wrapper collapsed to zero height — which also meant its lazy
   photograph never entered the viewport and never downloaded.

   pointer-events: decorative plates set `none` so they never steal the
   cursor. An egg host is the one plate that must catch it. */
.egg-swap:not(.masthead__art):not(.engraving--float) { position: relative; }
.engraving.egg-swap,
.masthead__art.egg-swap,
.banner-mark .egg-swap { pointer-events: auto; cursor: help; }

/* A masthead plate is painted behind the headline, so the text block was
   swallowing every hover before it reached the artwork. Lift the plate
   above it and let the cursor through the copy — these mastheads carry no
   links, so nothing but text selection is given up, and only here. */
.masthead__art.egg-swap { z-index: 2; }
.masthead:has(.egg-swap) .wrap { pointer-events: none; }
.masthead:has(.egg-swap) .wrap a,
.masthead:has(.egg-swap) .wrap button { pointer-events: auto; }

.banner-mark .egg-swap { display: block; position: relative; }
.egg-swap > img:first-child { transition: opacity 700ms var(--e-out); }
.egg-swap__egg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 900ms var(--e-out);
  pointer-events: none;
  /* Feathered, not cropped. A hard rectangle appearing inside an engraved
     plate reads as a pasted screenshot; fading the edges into the page
     makes the photograph feel like it was always underneath. */
  /* One gradient, no compositing. Two stacked linear masks default to
     `add`, which unions them — that left hard left/right edges and only
     softened the corners. `farthest-side` reaches all four sides of a
     non-square box, so every edge dissolves. */
  -webkit-mask-image: radial-gradient(farthest-side ellipse at 50% 50%,
                      #000 48%, rgba(0,0,0,0.72) 72%, transparent 100%);
          mask-image: radial-gradient(farthest-side ellipse at 50% 50%,
                      #000 48%, rgba(0,0,0,0.72) 72%, transparent 100%);
}

/* The seal is only 210px, so a contained portrait inside it is a stamp.
   Let this one overflow its host — the feathering means there is no edge
   to give the overflow away. */
.banner-mark .egg-swap__egg {
  /* Percentage insets fought the declared width and produced an off-centre
     sliver. A fixed box centred on the host is unambiguous. */
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(46vw, 290px);
  height: min(60vw, 380px);
  /* the global img reset caps everything at max-width:100%, which was
     clamping this back to the 210px seal */
  max-width: none;
}
.egg-swap:hover > img:first-child,
.egg-swap.is-shown > img:first-child { opacity: 0; }
.egg-swap:hover .egg-swap__egg,
.egg-swap.is-shown .egg-swap__egg { opacity: 1; }

/* Several hosts are deliberately faint (a ghosted float, a masthead
   plate at 15%). The photograph has to come up to full strength or the
   find is not worth making. */
.engraving.egg-swap:hover,
.engraving.egg-swap.is-shown,
.masthead__art.egg-swap:hover,
.masthead__art.egg-swap.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .egg-swap > img:first-child, .egg-swap__egg { transition: none; }
}

/* ---------- 18. THE ORRERY ---------------------------------- */
/* What the members do. Rings carry the meaning: the innermost ring holds
   the disciplines with the most people, so distance from the centre reads
   as scarcity. Only the dots orbit — the register and the centre readout
   stay still, because rotating text is unreadable and reads as a carousel.

   Everything is driven by two custom properties set in the markup (--x/--y
   for position, --spin for the ring's period) so the same CSS serves any
   number of rings without a rule per node. */

/* Named areas rather than source order, because the three text parts and
   the diagram need genuinely different arrangements at the two sizes: on a
   wide screen the register sits under the heading beside the diagram, on a
   phone the heading leads, the diagram follows, and the register is not
   shown at all. */
.orb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "head  stage"
    "reg   stage"
    "tail  stage";
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.orb__head     { grid-area: head; }
.orb__register { grid-area: reg; }
.orb__tail     { grid-area: tail; margin-top: var(--s-5); }
.orb__stage    { grid-area: stage; align-self: center; }

/* -- the register ------------------------------------------- */
/* The shorthand here used to be `margin: 0`, which sits later in the sheet
   than the spacing utilities and so silently beat the u-mt-* class on the
   markup — the register ended up flush against the headline with a computed
   margin-top of exactly 0. It owns its own top spacing now, and only zeroes
   the sides and bottom. */
.orb__register {
  list-style: none;
  margin: clamp(2.25rem, 3.4vw, 3.5rem) 0 0;
  padding: 0;
}

.orb__rowbtn {
  display: grid;
  grid-template-columns: 2.6ch 1fr auto;
  align-items: baseline;
  gap: 0 1.1rem;
  width: 100%;
  padding: 0.62rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ink-3);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out);
}
.orb__row:last-child .orb__rowbtn { border-bottom: 1px solid var(--ink-3); }

.orb__n {
  font-size: 1.42rem;
  line-height: 1;
  color: var(--brass);
  font-variant-numeric: lining-nums tabular-nums;
  transition: color var(--d-fast) var(--e-out), transform var(--d-base) var(--e-out);
  transform-origin: left baseline;
}
.orb__label {
  font-family: var(--f-text);
  font-size: var(--t-body);
  color: var(--on-ink-soft);
  transition: color var(--d-fast) var(--e-out);
}
/* The hairline grows from nothing as a row becomes active — the only
   moving part in the register, so the eye knows where it is. */
.orb__rule {
  display: block;
  width: clamp(1.5rem, 5vw, 3.5rem);
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--d-base) var(--e-out);
}

.orb__row.is-active .orb__label { color: var(--on-ink); }
.orb__row.is-active .orb__n     { color: var(--brass-lt); transform: translateX(2px); }
.orb__row.is-active .orb__rule  { transform: scaleX(1); }
.orb__rowbtn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* When one row is live the others recede, so the active line reads as
   chosen rather than merely brighter. */
.orb.is-engaged .orb__row:not(.is-active) .orb__label { color: var(--on-ink-faint); }
.orb.is-engaged .orb__row:not(.is-active) .orb__n     { color: var(--brass-dk); }

/* -- the stage ---------------------------------------------- */
.orb__stage { position: relative; aspect-ratio: 1; width: 100%; }
.orb__field { position: absolute; inset: 0; }

.orb__ring {
  position: absolute; inset: 0;
  /* Each ring layer spans the whole stage, so the last one in the DOM sat
     on top of every dot below it and ate their hovers — only the outer
     ring was reachable. The layers are transport, not targets; the dots
     opt back in individually. */
  pointer-events: none;
  animation: orbSpin var(--spin) linear infinite;
  /* direction is set per ring in the markup so neighbouring orbits turn
     against one another */
  animation-direction: var(--dir, normal);
}
/* The engraved track. A hairline circle, brass at a whisper, drawn with a
   border rather than SVG so it inherits the ring's own rotation for free. */
.orb__track {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--r); height: var(--r);
  margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2);
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  transition: border-color var(--d-slow) var(--e-out);
}
.orb__ring.is-lit .orb__track { border-color: rgba(168, 132, 44, 0.42); }

.orb__dot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  padding: 0; border: 0; background: none;
  /* not a control — the register holds the buttons */
  cursor: default;
  pointer-events: auto;
  /* counter-rotation keeps the pip visually upright and, more importantly,
     keeps its halo circular rather than smeared along the orbit. It has to
     oppose whichever way its own ring is turning, hence --dirinv. */
  animation: orbSpin var(--spin) linear infinite;
  animation-direction: var(--dirinv, reverse);
}
.orb__pip {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--brass-lt), var(--brass) 58%, var(--brass-dk));
  box-shadow: 0 0 0 1px rgba(18, 21, 14, 0.55);
  transform: scale(0.34);
  opacity: 0;
  transition: transform var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out);
}
.is-in .orb__pip, .orb--shown .orb__pip { transform: scale(1); opacity: 1; }

/* The halo is a second, larger ring that only exists when a dot is live. */
.orb__pip::after {
  content: "";
  position: absolute; inset: -55%;
  border-radius: 50%;
  border: 1px solid var(--brass-lt);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.orb__dot.is-active .orb__pip { transform: scale(1.32); }
.orb__dot.is-active .orb__pip::after { opacity: 0.75; transform: scale(1); }
.orb.is-engaged .orb__dot:not(.is-active) .orb__pip { opacity: 0.34; }

/* -- the readout -------------------------------------------- */
.orb__readout {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0.15rem;
  text-align: center;
  width: 34%;
  pointer-events: none;
}
.orb__count {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 0.86;
  color: var(--on-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.orb__name {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-lt);
  max-width: 16ch;
  line-height: 1.5;
}
/* The readout swaps text on a timer; a hard cut looks like a bug, so each
   change is a short settle rather than a fade in place. */
/* The readout changes on a three-second beat, so it can afford to be
   unhurried. Two things keep it from reading as a hard flip: a long ease
   with almost no acceleration at the end, and a 90ms offset between the
   numeral and the name so they move as a pair rather than a block —
   the count leads, the label follows it out and back in. */
.orb__count, .orb__name {
  transition: opacity 360ms var(--e-inout), transform 360ms var(--e-out);
}
.orb__name { transition-delay: 90ms; }
.orb__readout.is-swapping .orb__count { opacity: 0; transform: translateY(10px); }
.orb__readout.is-swapping .orb__name  { opacity: 0; transform: translateY(8px); }

.orb__tail { letter-spacing: 0.16em; }

@keyframes orbSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .orb {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "stage" "tail";
    grid-template-rows: auto auto auto;
    row-gap: clamp(1.75rem, 6vw, 2.75rem);
  }
  /* The register is hidden, not deleted. Every discipline and its count
     still reaches a screen reader — the diagram alone conveys none of it —
     but the rows no longer take up half a phone screen. */
  .orb__register {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .orb__tail { margin-top: 0; }
  .orb__stage { max-width: 27rem; margin-inline: auto; }
  /* Radii are set per ring in the markup as percentages of the stage, so
     they cannot be overridden individually here. Scaling the whole field
     pulls the outer ring back off the edges and shrinks the dots with it,
     which keeps the proportions the diagram depends on. */
  .orb__field { transform: scale(0.84); }
  .orb__count { font-size: clamp(2.4rem, 13vw, 3.6rem); }
}

/* Rotation is the first thing to go: the diagram still says everything it
   needs to say standing still, and the register never depended on it. */
@media (prefers-reduced-motion: reduce) {
  .orb__ring, .orb__dot { animation: none; }
  .orb__pip { transform: scale(1); opacity: 1; }
  .orb__readout.is-swapping .orb__count,
  .orb__readout.is-swapping .orb__name { opacity: 1; transform: none; }
}

/* The arm: a hairline from the hub to the live dot. It sits inside the
   rotating ring layer, so it tracks its dot without any per-frame work and
   cannot fall out of register with it. Scaled from the hub outward so the
   reveal reads as the instrument reaching for a reading. */
.orb__arm {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--len);
  height: 1px;
  transform-origin: left center;
  transform: rotate(var(--a)) scaleX(0);
  /* held transparent across the hub so the arm never crosses the readout */
  background: linear-gradient(90deg, transparent 0 40%, rgba(201, 167, 72, 0.45) 72%, var(--brass-lt));
  opacity: 0;
  transition: transform 620ms var(--e-out), opacity 380ms var(--e-out);
  pointer-events: none;
}
.orb__arm.is-active { transform: rotate(var(--a)) scaleX(1); opacity: 1; }

/* A held breath of light at the hub, so the readout sits on something
   rather than floating in flat ink. */
.orb__stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 62%; height: 62%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 132, 44, 0.10), transparent 68%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .orb__arm { transition: none; }
}

/* An invisible collar around each pip. The visual dot is 11–22px, which is
   below any sane pointer target and unpleasant to chase when it is also
   drifting. The collar takes the hover so the dot behaves like something
   you can actually catch, without making the mark itself bigger. */
.orb__dot::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
}
/* The track is a full-width box with only its border painted; left alone it
   swallows pointer events across the whole disc and steals hovers from the
   dots sitting on it. */
.orb__track { pointer-events: none; }
.orb__stage::before { pointer-events: none; }