/* ============================================================================
   Hudson River Company — styles.css
   Palette, type and layout translated from the HRC / CapLess deck system.
   Structure:
     1. Tokens
     2. Reset & base
     3. Typographic primitives (display, labels, rules, ornaments)
     4. Masthead / navigation
     5. Hero
     6. Section modules (problem, distinction, method, ledger, timeline,
        band, audiences, sequence, partners, about)
     7. Footer
     8. Motion & reveal
     9. Responsive
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Ground */
  --cream:        #faf6ec;   /* page field */
  --cream-tint:   #f4eee0;   /* alternating section field */
  --parchment:    #efe7d4;   /* panels, card grounds */

  /* Ink */
  --navy:         #16294b;   /* display type, dark bands */
  --navy-deep:    #0e1d36;   /* deepest ground */
  --navy-soft:    #24365a;
  --ink:          #22314e;   /* body copy */
  --ink-soft:     #4d5972;   /* secondary copy */

  /* Accent */
  --gold:         #a9843f;   /* accent, large type, ornament */
  --gold-deep:    #7d5f22;   /* accent for small text (contrast-safe) */
  --gold-light:   #c8ad74;   /* accent on dark grounds */
  --rule:         #d9cdb2;   /* hairlines on cream */
  --rule-dark:    #3a4a6b;   /* hairlines on navy */

  /* Type */
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Measure & rhythm */
  --wrap:        76rem;   /* 1216px */
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  --section-y:   clamp(4.5rem, 11vw, 9.5rem);
  --stack:       clamp(1.1rem, 1.6vw, 1.6rem);

  /* Motion */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --dur:         .8s;
}

/* ------------------------------------------------------- 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;      /* clears the sticky masthead on anchor jumps */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, .45vw + .95rem, 1.1875rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Extremely understated paper grain — two large, low-contrast washes only. */
  background-image:
    radial-gradient(60rem 40rem at 12% -5%, rgba(169,132,63,.045), transparent 60%),
    radial-gradient(50rem 36rem at 92% 22%, rgba(22,41,75,.035), transparent 62%);
  background-attachment: fixed;
}

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

p { margin: 0 0 var(--stack); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-deep); }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--cream);
  padding: .75rem 1.25rem; font-family: var(--sans);
  letter-spacing: .08em; text-transform: uppercase; font-size: .8rem;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--cream); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--cream-tint); }
.section--tint + .section--tint { padding-top: 0; }

/* ------------------------------------- 3. TYPOGRAPHIC PRIMITIVES */

/* Small roman-numeral section label with a hairline tail */
.section-label {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section-label span {
  font-family: var(--serif);
  font-size: .875rem;
  letter-spacing: .1em;
  color: var(--navy);
  border: 1px solid var(--rule);
  width: 2.1rem; height: 2.1rem;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  flex: none;
}
.section-label::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--rule), transparent);
  max-width: 22rem;
}
.section-label--invert { color: var(--gold-light); }
.section-label--invert span { color: var(--cream); border-color: var(--rule-dark); }
.section-label--invert::after { background: linear-gradient(90deg, var(--rule-dark), transparent); }

/* Display headings */
.display {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.35rem, 6.1vw, 4.6rem); }
.display--lg { font-size: clamp(2rem, 4.9vw, 3.6rem); }
.display--md { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.display--invert { color: var(--cream); }

.gold { color: var(--gold); }
.display--invert .gold { color: var(--gold-light); }

.eyebrow {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.5rem;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 1.45;
  color: var(--navy);
  font-weight: 400;
}
.lede--constrained { max-width: 46rem; }

.rule { border: 0; height: 1px; background: var(--rule); margin: 2rem 0; }
.rule--gold { background: linear-gradient(90deg, var(--gold), var(--rule) 45%, transparent); max-width: 30rem; }

/* Understated arrow link — the site's only "call to action" treatment */
.link-arrow {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--gold);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow::after { content: "→"; font-size: 1.05em; line-height: 1; }
.link-arrow:hover { color: var(--gold-deep); border-color: var(--gold-deep); gap: 1.05rem; }

/* Two-column editorial text block */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 62rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.two-col--wide { max-width: none; }

/* Pronounced editorial statement, centred with ornament */
.pronouncement {
  margin: clamp(3rem, 7vw, 5.5rem) 0 0;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  position: relative;
}
.pronouncement blockquote { margin: 0; }
.pronouncement p {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.7vw, 2.9rem);
  line-height: 1.2;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.pronouncement__mark {
  width: 1.6rem; height: 1.6rem; color: var(--gold);
  position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
  background: var(--cream); padding: 0 .5rem; box-sizing: content-box;
}
.section--tint .pronouncement__mark { background: var(--cream-tint); }
.pronouncement--tall { padding-block: clamp(3rem, 7vw, 4.75rem); }
.pronouncement--split p { font-size: clamp(1.45rem, 3.1vw, 2.5rem); }

.statement {
  max-width: 48rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  line-height: 1.5;
  color: var(--navy);
}

.footnote {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: 46rem;
}
.footnote cite { font-family: var(--serif); font-style: italic; }

.caveat {
  margin-top: 2.25rem;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  font-style: italic;
}

.fineprint {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(250, 246, 236, .62);
  max-width: 52rem;
}

/* Quoted prospective question */
.question {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--parchment);
  border-top: 2px solid var(--gold);
  max-width: 56rem;
}
.question__label {
  font-size: .78rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: .9rem;
}
.question__text {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.42;
  color: var(--navy);
  margin: 0;
  text-wrap: pretty;
}
.question--large { background: transparent; border-top-width: 1px; padding-inline: 0; }
.question--large .question__text { font-size: clamp(1.3rem, 2.4vw, 2rem); font-style: italic; }

/* --------------------------------------------- 4. MASTHEAD / NAVIGATION */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 236, .88);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.masthead__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .9rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.masthead__rule { height: 1px; background: var(--rule); }

.wordmark {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--navy); flex: none;
}
.wordmark__mark { width: 1.05rem; height: 1.05rem; color: var(--gold); flex: none; }
.wordmark__text {
  font-family: var(--serif);
  font-size: clamp(.9rem, 1.15vw, 1.06rem);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__list {
  list-style: none; display: flex; gap: clamp(1rem, 2.2vw, 2rem);
  margin: 0; padding: 0;
}
.nav__list a {
  font-size: .82rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.nav__list a:hover { color: var(--navy); }
.nav__list a[aria-current="true"] { color: var(--navy); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--rule); color: var(--navy);
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem .8rem; cursor: pointer;
}
.nav-toggle__bars { width: 1rem; height: 1px; background: currentColor; position: relative; display: block; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
}
.nav-toggle__bars::before { top: -.3rem; }
.nav-toggle__bars::after  { top:  .3rem; }

/* ------------------------------------------------------------- 5. HERO */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero__field { position: absolute; inset: 0; pointer-events: none; color: var(--gold); }
.hero__compass {
  position: absolute;
  top: 4%; right: 4%;
  width: clamp(18rem, 30vw, 30rem); height: auto;
  opacity: .11;
}
.hero__trace {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 34%;
  color: var(--gold); opacity: .28;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.hero__title { font-size: clamp(2.4rem, 5.6vw, 4.3rem); margin-bottom: 1.4rem; }
.hero__lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.4;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.hero__lede em { color: var(--gold); font-style: italic; }
.hero__para { max-width: 34rem; color: var(--ink); margin-bottom: 2.25rem; }

/* Full-width record strip beneath the hero columns */
.hero__facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.hero__facts .fact { min-width: 0; }
.hero__facts dt {
  font-size: .74rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: .35rem;
}
.hero__facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hero__figure { position: relative; justify-self: center; }
.hero__mrcapless {
  width: clamp(11rem, 18vw, 16.5rem);
  margin-inline: auto;
  position: relative; z-index: 2;
  filter: drop-shadow(0 12px 24px rgba(22, 41, 75, .07));
}
.hero__inst { position: absolute; color: var(--gold); opacity: .45; z-index: 1; }
.hero__inst--bridge { width: 6.5rem; right: -1.5rem; top: 18%; }
.hero__inst--scope  { width: 4.75rem; left: -2rem; bottom: 12%; }

.hero__scroll {
  position: relative;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: center;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__scroll span { display: inline-block; }
.hero__scroll::after {
  content: ""; display: block; width: 1px; height: 3rem;
  background: linear-gradient(var(--rule), transparent);
  margin: .8rem auto 0;
}

/* ------------------------------------------------- 6a. PROBLEM / INDEX LIST */
.index-list {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  border-top: 1px solid var(--rule);
  columns: 2;
  column-gap: clamp(2rem, 6vw, 5rem);
}
.index-list li {
  break-inside: avoid;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--navy);
}
.index-list__n {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; color: var(--gold-deep); flex: none;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- 6b. DISTINCTION */
.distinction {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1rem, 3vw, 2rem);
}
.distinction__side { padding-top: .5rem; }
.distinction__head {
  font-size: .78rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep);
  padding-bottom: .8rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.distinction__q {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.3; color: var(--ink-soft); font-style: italic;
}
.distinction__qs { list-style: none; margin: 0; padding: 0; }
.distinction__qs li {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.35;
  color: var(--navy);
  padding: .85rem 0 .85rem 1.6rem;
  border-bottom: 1px dotted var(--rule);
  position: relative;
}
.distinction__qs li::before {
  content: ""; position: absolute; left: 0; top: 1.45em;
  width: .5rem; height: 1px; background: var(--gold);
}
.distinction__qs li:last-child { border-bottom: 0; }
.distinction__note {
  margin-top: 1.25rem;
  font-size: .95rem;
  color: var(--ink-soft);
  max-width: 24rem;
}

/* A hairline meridian with the compass at its centre */
.distinction__divider {
  display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center;
  align-self: stretch; gap: 1rem; padding-top: 2.5rem;
}
.distinction__divider::before, .distinction__divider::after {
  content: ""; width: 1px; align-self: stretch;
}
.distinction__divider::before { background: linear-gradient(transparent, var(--rule)); }
.distinction__divider::after  { background: linear-gradient(var(--rule), transparent); }
.distinction__divider svg { width: 3.25rem; height: 3.25rem; color: var(--gold); opacity: .8; }

/* ---------------------------------------------------------- 6c. METHOD */
.section--method { background: var(--cream); }
.method {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.method__rail { position: relative; }
.rail {
  list-style: none; margin: 0; padding: 0;
  position: sticky; top: 7.5rem;
}
.rail__item {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .55rem 0;
  color: var(--ink-soft);
  opacity: .45;
  transition: opacity .45s var(--ease), color .45s var(--ease);
}
.rail__dot {
  width: .5rem; height: .5rem; margin-top: .55rem; flex: none;
  border: 1px solid var(--gold); border-radius: 50%;
  background: transparent;
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.rail__label {
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.35;
}
.rail__item.is-active { opacity: 1; color: var(--navy); }
.rail__item.is-active .rail__dot { background: var(--gold); transform: scale(1.35); }
.rail__item.is-past { opacity: .7; }
.rail__item.is-past .rail__dot { background: var(--rule); }
.rail__item--outcome .rail__label { color: var(--gold-deep); }

.method__mrcapless {
  width: 8.5rem;
  margin-top: 3rem;
  opacity: .95;
  position: sticky; top: 34rem;
}

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
  border-top: 1px solid var(--rule);
  max-width: 42rem;
  transition: opacity .5s var(--ease);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step__head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem; }
.step__n {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.step__icon { width: 2.6rem; height: 2.6rem; color: var(--gold); flex: none; }
.step__title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 700; color: var(--navy);
  margin: 0 0 .85rem; letter-spacing: -.01em;
}
.step p { color: var(--ink); max-width: 38rem; }
.step--outcome { border-top: 2px solid var(--gold); }
.step--outcome .step__title { color: var(--gold-deep); }

/* ---------------------------------------------------------- 6d. LEDGER */
.ledger {
  display: grid;
  grid-template-columns: 1fr minmax(15rem, 1.05fr) 1fr;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.ledger__head {
  font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--navy);
  padding-bottom: .8rem; margin-bottom: 0;
  border-bottom: 1px solid var(--navy);
}
.ledger__col--capless .ledger__head { color: var(--gold-deep); border-bottom-color: var(--gold); }
.ledger__list { list-style: none; margin: 0; padding: 0; }
.ledger__list li {
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .98rem;
  line-height: 1.4;
  color: var(--ink);
}
.ledger__centre { text-align: center; padding-top: 2rem; position: relative; }
/* Converging hairlines: both columns feed the same evidenced case (desktop only) */
@media (min-width: 62.01rem) {
  .ledger__centre::before, .ledger__centre::after {
    content: ""; position: absolute; top: 6.5rem;
    width: clamp(1rem, 3vw, 2.5rem); height: 1px;
  }
  .ledger__centre::before { right: 100%; background: linear-gradient(90deg, transparent, var(--navy)); }
  .ledger__centre::after  { left: 100%;  background: linear-gradient(90deg, var(--gold), transparent); }
}
.ledger__card {
  border: 1px solid var(--navy);
  outline: 1px solid var(--navy);
  outline-offset: 4px;
  background: var(--cream);
  padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;
}
.section--tint .ledger__card { background: var(--cream); }
.ledger__mark { width: 1.5rem; height: 1.5rem; color: var(--gold); margin: 0 auto .9rem; }
.ledger__card-title {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 700; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--navy); margin: 0;
}
.ledger__note {
  margin-top: 1.5rem; font-size: .9rem; line-height: 1.55;
  color: var(--ink-soft); text-align: left;
}

/* -------------------------------------------------------- 6e. TIMELINE */
.timeline { list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding: 0; }
.tl {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.tl:last-child { border-bottom: 1px solid var(--rule); }
.tl__when {
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0; padding-top: .35rem;
}
.tl__body h3 {
  font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600; color: var(--navy); margin: 0 0 .55rem;
}
.tl__body p { color: var(--ink); max-width: 42rem; margin: 0; }
.tl--live { border-top-color: var(--gold); }
.tl--live .tl__when { color: var(--gold); }
.tl--live::before {
  content: ""; position: absolute; left: -1rem; top: -1px; width: 3px; height: 100%;
  background: var(--gold);
}

/* ------------------------------------------------- 6f. BAND (FALL PROJECT) */
.band {
  background: var(--navy-deep);
  color: rgba(250, 246, 236, .88);
  padding-block: var(--section-y);
  position: relative;
  overflow: hidden;
}
.band__field { position: absolute; inset: 0; pointer-events: none; }
.band__compass {
  position: absolute; top: 50%; right: -10rem; transform: translateY(-50%);
  width: clamp(22rem, 38vw, 38rem); color: var(--gold-light); opacity: .07;
}
.band__inner { position: relative; }

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.figure-block { display: flex; flex-direction: column; justify-content: flex-end; }
.figure-block__n {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 700; line-height: 1;
  color: var(--cream); margin: 0 0 .6rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.figure-block__n--small { font-size: clamp(1.8rem, 4vw, 3rem); }
.figure-block__cap {
  font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-light); margin: 0;
}

.band__statement {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  line-height: 1.42; color: var(--cream);
  max-width: 52rem;
}
.band__facts {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  max-width: 62rem;
}
.band__facts li {
  padding: 1rem 0 1rem 1.6rem;
  border-bottom: 1px solid var(--rule-dark);
  position: relative;
  font-size: .98rem;
  color: rgba(250, 246, 236, .82);
}
.band__facts li::before {
  content: ""; position: absolute; left: 0; top: 1.7em;
  width: .55rem; height: 1px; background: var(--gold-light);
}

/* ------------------------------------------------------- 6g. AUDIENCES */
.audiences { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.audience {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--rule);
}
.audience:last-child { border-bottom: 1px solid var(--rule); }
.audience dt {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 600; color: var(--navy);
}
.audience__icon { width: 2.2rem; height: 2.2rem; color: var(--gold); flex: none; }
.audience dd { margin: 0; color: var(--ink); max-width: 40rem; padding-top: .35rem; }

.target {
  display: flex; gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--parchment);
  border-left: 3px solid var(--gold);
}
.target__icon { width: 3rem; height: 3rem; color: var(--gold-deep); flex: none; }
.target__label {
  font-size: .76rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: .5rem;
}
.target__value {
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 700; color: var(--navy); margin-bottom: .7rem; line-height: 1.1;
}
.target__note { font-size: .95rem; color: var(--ink); max-width: 44rem; margin: 0; }

/* -------------------------------------------------------- 6h. SEQUENCE */
.sequence {
  list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; padding: 0;
  max-width: 42rem;
}
.sequence__item {
  position: relative;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.15rem 1.5rem;
  border: 1px solid var(--rule);
  background: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--navy);
  margin-bottom: 2.4rem;
}
.sequence__item:last-child { margin-bottom: 0; }
.sequence__item:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -2.4rem;
  width: 1px; height: 2.4rem;
  background: linear-gradient(var(--gold), var(--rule));
}
.sequence__item:not(:last-child)::before {
  content: ""; position: absolute; left: 50%; bottom: -.85rem;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  z-index: 1;
}
.sequence__n {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; color: var(--gold-deep);
  border: 1px solid var(--rule); border-radius: 50%;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center; flex: none;
}
.sequence__item--end {
  background: var(--navy); border-color: var(--navy); color: var(--cream);
  font-weight: 600;
}
.sequence__item--end .sequence__n { color: var(--gold-light); border-color: var(--rule-dark); }

/* -------------------------------------------------------- 6i. PARTNERS */
.section--partners { background: var(--cream-tint); }
.partners {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.partners__head {
  font-size: .8rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-deep);
  padding-bottom: .85rem; border-bottom: 1px solid var(--rule);
  margin-bottom: 1.1rem; line-height: 1.5;
}
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  padding: .7rem 0 .7rem 1.9rem;
  border-bottom: 1px dotted var(--rule);
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--navy);
}
.tick-list li::before {
  content: ""; position: absolute; left: .15rem; top: 1.35em;
  width: .45rem; height: .45rem; border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.tick-list--plain li::before { border-radius: 50%; transform: none; }

.contact {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.contact__lead {
  font-size: .8rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1rem;
}
.contact__addr {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  font-weight: 600; margin-bottom: .9rem;
}
.contact__addr a {
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: .15rem;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact__addr a:hover { color: var(--gold-deep); }
.contact__note { color: var(--ink-soft); font-size: .95rem; }

/* ----------------------------------------------------------- 6j. ABOUT */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about__text p { max-width: 36rem; }
.about__crest { margin: 0; text-align: center; min-width: 0; }
.about__crest img { width: 100%; max-width: 26rem; margin-inline: auto; }
.about__crest figcaption {
  margin-top: 1rem;
  font-family: var(--serif); font-style: italic;
  font-size: .95rem; color: var(--ink-soft);
}

/* ------------------------------------------------------------ 7. FOOTER */
.footer {
  background: var(--navy);
  color: rgba(250, 246, 236, .72);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  font-size: .9rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.footer__mark { width: 1.4rem; height: 1.4rem; color: var(--gold-light); margin-bottom: .9rem; }
.footer__name {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cream);
  margin-bottom: .4rem;
}
.footer__meta { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
.footer__nav ul { list-style: none; margin: 0; padding: 0; }
.footer__nav li { margin-bottom: .5rem; }
.footer__nav a {
  color: rgba(250, 246, 236, .78); text-decoration: none; font-size: .88rem;
  border-bottom: 1px solid transparent; transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer__nav a:hover { color: var(--cream); border-bottom-color: var(--gold-light); }
.footer__legal p { font-size: .8125rem; line-height: 1.6; color: rgba(250, 246, 236, .58); }
.footer__copy { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); }

/* ------------------------------------------------- 8. MOTION & REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: 0ms;
  will-change: opacity, transform;
}
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Hairline drawing for the hero trajectory */
.draw-line {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  transition: stroke-dashoffset 2.4s var(--ease) .25s;
}
.draw-line.is-drawn { stroke-dashoffset: 0; }
.draw-line--dash { transition-duration: 1.8s; }

/* JS-off fallback: everything visible */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .draw-line { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .draw-line { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------- 9. RESPONSIVE */

/* Tablet & below — collapse the sticky rail and multi-column blocks */
@media (max-width: 62rem) {
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    max-height: 0; overflow: hidden;
    transition: max-height .35s var(--ease);
  }
  .nav.is-open { max-height: 30rem; }
  .nav__list {
    flex-direction: column; gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
  }
  .nav__list li { border-bottom: 1px solid var(--rule); }
  .nav__list li:last-child { border-bottom: 0; }
  .nav__list a { display: block; padding: .85rem 0; font-size: .9rem; }
  .nav__list a[aria-current="true"] { border-bottom-color: transparent; color: var(--gold-deep); }
  .nav-toggle { display: inline-flex; }
  .masthead { position: sticky; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__figure { order: -1; justify-self: end; }
  .hero__mrcapless { width: clamp(8.5rem, 26vw, 12rem); margin-inline: 0 2rem; }
  .hero__inst--bridge { width: 4.5rem; right: 1rem; top: 8%; }
  .hero__inst--scope { width: 3.5rem; left: -2.5rem; bottom: 18%; }
  .hero__compass { top: 2%; right: 4%; width: 16rem; opacity: .1; }

  .method { grid-template-columns: 1fr; }
  .method__rail { display: none; }

  .ledger { grid-template-columns: 1fr; }
  .ledger__centre { order: 3; padding-top: .5rem; }

  .about { grid-template-columns: minmax(0, 1fr); }
  .about__crest { order: -1; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__legal { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 46rem) {
  :root { --stack: 1rem; }

  /* Keep the masthead on one line at phone widths */
  .masthead__inner { gap: .75rem; padding-inline: 1.25rem; }
  .wordmark__text { font-size: .78rem; letter-spacing: .05em; }
  .wordmark__mark { width: .9rem; height: .9rem; }
  .nav-toggle { padding: .45rem .6rem; letter-spacing: .1em; }
  .nav-toggle__label { display: none; }

  .two-col, .two-col--wide { grid-template-columns: 1fr; gap: 1.25rem; }
  .index-list { columns: 1; }
  .distinction { grid-template-columns: 1fr; }
  .distinction__divider { justify-self: start; padding: 1rem 0; }
  .distinction__divider svg { width: 2.4rem; height: 2.4rem; }

  .figures { grid-template-columns: 1fr; gap: 2rem; }
  .band__facts { grid-template-columns: 1fr; }

  .tl { grid-template-columns: 1fr; gap: .5rem; }
  .tl--live::before { left: -.75rem; }

  .audience { grid-template-columns: 1fr; gap: .75rem; }

  .partners { grid-template-columns: 1fr; }

  .target { flex-direction: column; gap: 1rem; }

  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }

  .footer__inner { grid-template-columns: 1fr; }

  .sequence__item { padding: 1rem 1.1rem; gap: .9rem; }

  .link-arrow { font-size: .82rem; letter-spacing: .08em; }
  .contact__addr { overflow-wrap: anywhere; }
}

/* Wide screens — keep the measure honest */
@media (min-width: 100rem) {
  :root { --wrap: 82rem; }
}

/* Print — a clean, ink-light reading copy */
@media print {
  .masthead, .hero__field, .hero__scroll, .nav-toggle, .method__rail { display: none !important; }
  body { background: #fff; color: #000; }
  .band { background: #fff; color: #000; }
  .band__compass { display: none; }
  .figure-block__n, .band__statement, .display--invert { color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section, .band { padding-block: 1.5rem; break-inside: avoid; }
  a { text-decoration: underline; }
}