/* ============================================================
   SUM — shared stylesheet
   System and rationale: DESIGN.md. Layered on tokens.css.

   Surface rhythm per page: bone carries it, one crimson drench
   takes the conversion moment, ink takes at most one section.
   Brass is a hairline material, never a fill.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  color-scheme: light;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Scrollbar ----------
   Native shape, house colours: crimson thumb on the parchment track.
   scrollbar-color keeps the platform's own thumb geometry and
   overlay behaviour everywhere it is supported; a flame-shaped
   custom thumb was built and removed (owner's call, Aug 2026), so
   do not reintroduce ::-webkit-scrollbar styling here. */
html { scrollbar-color: var(--crimson) var(--paper-deep); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 { margin: 0 0 0.5em; }
p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { margin: 0 0 1em; padding-left: 1.1em; }
a { color: inherit; }
strong, b { font-weight: 600; }

::selection { background: var(--crimson); color: var(--paper); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 2px;
}
.on-dark :focus-visible, .drench :focus-visible { box-shadow: var(--focus-dark); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
}
.skip-link:focus { left: 0; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

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

.section { padding-block: var(--section-y); position: relative; }

/* Surface themes. `.on-dark` and `.drench` flip the text tokens
   rather than restating colors on every child. */
.s-paper { background: var(--paper); }
.s-deep  { background: var(--paper-deep); }

.s-ink, .on-dark {
  background: var(--ink);
  color: var(--on-dark);
  --ink-2: var(--on-dark-2);
  --ink-3: var(--on-dark-2);
  --rule: var(--rule-dark);
  --brass: var(--gold);
  --paper-edge: oklch(100% 0 0 / 0.07);
}

.s-crimson, .drench {
  background: linear-gradient(168deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  color: var(--on-crimson);
  --ink: var(--on-crimson);
  --ink-2: var(--on-crimson-2);
  --ink-3: var(--on-crimson-2);
  --rule: var(--rule-dark);
  --brass: var(--gold);
  --paper-edge: oklch(0% 0 0 / 0.22);
  line-height: 1.68;          /* light on dark needs air */
}

/* 12-column bed. Most content sits 1/8 or 2/9 and leaves the
   rest deliberately empty. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}
.col-main  { grid-column: 1 / span 8; }
.col-inset { grid-column: 2 / span 7; }
.col-half  { grid-column: 1 / span 6; }
.col-right { grid-column: 7 / span 6; }
.col-full  { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .col-main, .col-inset, .col-half, .col-right { grid-column: 1 / -1; }
}

.stack > * + * { margin-top: var(--s-4); }
/* Separates successive grids inside one section. Applied to the grid
   itself, never to grid children — margins between grid items do
   nothing useful. */
.grid12 + .grid12 { margin-top: var(--s-7); }

/* ---------- Type ---------- */
.d {
  font-family: var(--font-display);
  font-stretch: var(--wide);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.021em;
  text-wrap: balance;
  overflow-wrap: break-word;   /* last resort: never scroll the page sideways */
  margin: 0 0 0.32em;
}
.d-hero { font-size: var(--t-hero); font-weight: 800; letter-spacing: -0.032em; }
.d-1    { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.028em; }
.d-2    { font-size: var(--t-2xl); }
.d-3    { font-size: var(--t-xl); line-height: 1.14; letter-spacing: -0.014em; }
.d-4 {
  font-family: var(--font-display);
  font-stretch: 105%;
  font-weight: 650;
  font-size: var(--t-lg);
  line-height: 1.25;
  letter-spacing: -0.006em;
  margin: 0 0 0.4em;
}

/* The one permitted label form. DESIGN.md caps it at two per
   page; it names a real thing or it does not appear. */
.label {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-4);
}

.lead {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.note { font-size: var(--t-sm); color: var(--ink-3); }
.em { font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.9rem 1.9rem;
  font-family: var(--font-display);
  font-stretch: 104%;
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

/* Gold is "the action" everywhere on the site, on every surface. */
.btn-go {
  background: var(--gold);
  color: var(--cta-fg);
  border-color: var(--gold);
}
.btn-go:hover, .btn-go:focus-visible {
  background: oklch(88% 0.145 80);
  border-color: oklch(88% 0.145 80);
  color: var(--cta-fg);
}

/* Floating apply pill (phones only). The header CTA lives behind the
   hamburger under 900px, so once the hero button scrolls away the page
   has no visible ask. The pill floats bottom-center and yields (via
   .float-cta--hidden, toggled in main.js) whenever a real gold CTA or
   the footer is on screen, so it never doubles an ask or covers legal
   links. Ink border instead of a shadow: shadows stay banned. */
.float-cta {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 0);
  z-index: 350;
  border: 1px solid var(--cta-fg);
  white-space: nowrap;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
@media (max-width: 900px) {
  .float-cta { display: inline-flex; }
}
.float-cta--hidden {
  opacity: 0;
  transform: translate(-50%, 0.6rem);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .float-cta { transition: none; }
}

.btn-line {
  background: transparent;
  color: currentColor;
  border-color: var(--rule);
}
.btn-line:hover, .btn-line:focus-visible {
  border-color: currentColor;
  background: oklch(50% 0.02 40 / 0.06);
}

.btn-sm { min-height: 40px; padding: 0.6rem 1.2rem; font-size: var(--t-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Inline links in running copy. Every component link carries a class
   (.btn, .tlink, .store-link), so an unclassed anchor inside <main> is
   by definition prose and needs a real affordance. Underline rather
   than colour alone: WCAG 1.4.1, and colour alone reads as noise on
   bone. --brass flips to gold on dark and drench surfaces by itself.

   Scoped to unclassed paragraphs (plus .lead and .prose) rather than
   all of <main>: a classed wrapper like .jump or .members-back is a
   component with its own link treatment, and a broader selector
   outranks it. */
main p:not([class]) a:not([class]),
main .lead a:not([class]),
main .prose a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color var(--fast) var(--ease);
}
main p:not([class]) a:not([class]):hover,
main p:not([class]) a:not([class]):focus-visible,
main .lead a:not([class]):hover,
main .prose a:not([class]):hover { text-decoration-color: currentColor; }

/* Text link with a rule that thickens rather than a colour change */
.tlink {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--brass);
  transition: border-color var(--fast), border-width var(--fast);
}
/* A scent link standing alone in its paragraph (the FAQ links on
   home/about, the full-answer pointers) is a primary tap target,
   not an inline word: pad it to thumb size. Links inside running
   sentences keep the inline exception. */
p > .tlink:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.tlink:hover, .tlink:focus-visible { border-bottom-color: currentColor; }

/* ---------- Marks ----------
   Masks, not inline SVG: the official artwork stays one cached
   file and still inherits `color`. Never redraw these. */
.mark-phoenix, .mark-word {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  flex: none;
}
.mark-phoenix {
  -webkit-mask-image: url('/assets/img/phoenix.svg');
  mask-image: url('/assets/img/phoenix.svg');
  aspect-ratio: 1359 / 1170;
}
.mark-word {
  -webkit-mask-image: url('/assets/img/wordmark.svg');
  mask-image: url('/assets/img/wordmark.svg');
  aspect-ratio: 523 / 183;
}

/* The seal: the crest at architectural scale, blind-embossed
   behind the hero. The site's only ornament. */
.seal {
  position: absolute;
  pointer-events: none;
  color: var(--brass);
  /* Deliberately dominant on the hero (owner's call, Aug 2026): the
     crest is how a visitor knows whose house this is. Brass on paper
     behind ink type keeps AA contrast even at this opacity; re-check
     before raising further. */
  opacity: 0.20;
  width: min(96vh, 76vw);
  right: calc(var(--gutter) * -0.5);
  top: 50%;
  transform: translateY(-48%);
  z-index: 0;
}
.on-dark .seal, .drench .seal { opacity: 0.10; }
@media (max-width: 900px) {
  /* Phones: anchored to the hero's vertical middle, not its bottom
     edge, so the crest actually shares the first screen with the
     headline instead of hiding below the fold. */
  .seal { width: 150vw; right: -46vw; top: 52%; bottom: auto; transform: translateY(-50%); opacity: 0.16; }
}

/* ---------- The marks (device #3) ----------
   One Greek element per banner, drawn the way the SEAL is drawn: a
   FILLED silhouette at architectural scale, watermark opacity,
   cropped by the edge — tone in the surface, not an object on it.
   The collage happens across the site, not within a surface:

     drench (the asks) -> the fret: a carved meander tablet, hung
                          from the band's head corner
     cream bands       -> the volute: a filled spiral band, the
                          capital scroll hung at the seam
     footer            -> the wave: a repeating crest frieze along
                          the bottom edge — the horizon under the
                          page's foundation

   Material follows the seal exactly: painted var(--brass), which
   the surface scopes remap themselves — brass on cream, gold on
   the drench and the footer, the same remap the seal rides
   (.drench .seal). One declaration, correct metal everywhere.

   Form history, kept so it stays learned: a 0.9rem floating
   hairline read as a rendering bug; solid plinth bands read as
   stale straight borders; a tiled field read as chaos; LINE-DRAWN
   marks at seal scale read as logos, crossed ledger rows and
   headlines, and ghosted through translucent panels. Filled mass
   at watermark opacity is the fifth form — the material the seal
   proved all along. Because the marks are tone, they may sit
   behind copy the way the seal sits behind the hero; the opacity
   values here are the legibility contract, so raise them only with
   a contrast check.

   Mechanics learned the hard way: the mark is absolutely
   positioned, and positioned boxes paint above static content, so
   z-index: -1 puts it under the copy while isolation: isolate on
   the host keeps -1 from falling behind the section's own
   background (the .plate trick). overflow: clip crops edge-hung
   marks without minting a scroll container. Panels that sit ON a
   marked surface must be OPAQUE (see .quiz) — translucency lets
   the mark ghost through. */
@supports (mask-repeat: repeat-x) or (-webkit-mask-repeat: repeat-x) {
  .section.s-crimson,
  .section.s-deep:not(.no-key),
  .ftr {
    isolation: isolate;
    overflow: clip;
  }

  .section.s-crimson::before,
  .section.s-deep:not(.no-key)::before,
  .ftr::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background: var(--brass);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
  /* Flush with the seam and bled off the RIGHT edge only: cropping
     the top instead severs the tablet's outer frame bar and leaves
     its left bar reading as a detached strip. Sized to the volute's
     scale so the foot clears the first ledger row on the semester
     drench. */
  .section.s-crimson::before {
    width: min(42vh, 31vw);
    aspect-ratio: 1;
    top: 0;
    right: calc(var(--gutter) * -1.4);
    opacity: 0.14;
    -webkit-mask-image: var(--mark-fret);
    mask-image: var(--mark-fret);
  }
  .section.s-deep:not(.no-key)::before {
    width: min(42vh, 31vw);
    aspect-ratio: 1;
    top: -2.5rem;
    right: calc(var(--gutter) * -0.5);
    opacity: 0.15;
    -webkit-mask-image: var(--mark-volute);
    mask-image: var(--mark-volute);
  }
  /* The frieze: full-width strip on the footer's own floor. The tile
     is 2:1, so mask-size auto 100% repeats it at twice the strip
     height — the only sanctioned repeat among the marks. */
  .ftr::before {
    inset: auto 0 0 0;
    height: clamp(2.75rem, 6vh, 4rem);
    opacity: 0.16;
    -webkit-mask-image: var(--mark-wave);
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
    mask-image: var(--mark-wave);
    mask-repeat: repeat-x;
    mask-size: auto 100%;
  }
}

/* Micro-use: one small crisp band where the key is a frame, not a
   ground — the 404. (The exit-intent ask carried the other; the
   overlay is removed, owner's call Aug 2026.) */
@supports (mask-repeat: repeat-x) or (-webkit-mask-repeat: repeat-x) {
  /* 404: the key runs, stops mid-tile, and one last tile stands
     beyond the gap. The break IS the message on the one page where
     the path leads nowhere; everywhere else the pattern holds. */
  .key-break {
    position: relative;
    width: min(58%, 15rem);
    height: 1.3rem;
    margin-block: var(--s-5) var(--s-2);
    background: var(--brass);
    -webkit-mask-image: var(--orn-key);
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
    mask-image: var(--orn-key);
    mask-repeat: repeat-x;
    mask-size: auto 100%;
  }
  .key-break::after {
    content: "";
    position: absolute;
    top: 0; left: calc(100% + 1.5rem);
    width: 1.5rem;
    height: 100%;
    background: var(--brass);
    -webkit-mask-image: var(--orn-key);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: auto 100%;
    mask-image: var(--orn-key);
    mask-repeat: no-repeat;
    mask-size: auto 100%;
  }
}

@media print {
  .section.s-crimson::before, .section.s-deep::before,
  .ftr::before,
  .key-break { display: none; }
}

/* ---------- Header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--base) var(--ease);
}
.hdr.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 10px 30px oklch(20% 0.02 30 / 0.06); }
.hdr__in {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  /* Hit-area extension, no visual change: the drawn mark is ~26px
     tall, well under the 44px thumb target. */
  padding-block: 0.6rem;
  margin-block: -0.6rem;
}
.brand .mark-phoenix { width: 30px; }
.brand .mark-word { width: 74px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  margin-left: auto;
}
.nav a:not(.btn) {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-size: var(--t-sm);
  font-weight: 550;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.35rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--fast), border-color var(--fast);
}
.nav a:not(.btn):hover, .nav a:not(.btn):focus-visible { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--crimson); }

.nav-btn {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  background: none;
  border: 0;
  padding: 12px;
  cursor: pointer;
  color: var(--ink);
}
.nav-btn span {
  display: block;
  height: 1.5px;
  background: currentColor;
  margin: 5px 0;
  transition: transform var(--fast) var(--ease), opacity var(--fast);
}
.nav-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-btn { display: block; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-5);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    /* Clear the panel's own height AND the header it hangs from, or the
       last item in the closed menu peeks over the header bar. */
    transform: translateY(calc(-100% - var(--header-h)));
    transition: transform var(--base) var(--ease);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a:not(.btn) {
    font-size: var(--t-lg);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav .btn { margin-top: var(--s-4); }
}

/* ---------- The record ----------
   A ledger row: figure, entry, status. Used only where content
   genuinely is a sequence or a roll. This is the named system
   that earns its repetition — see DESIGN.md. */
.record { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.record > li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: clamp(1.1rem, 2vw, 1.9rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--fast);
}
.record--tight > li { padding: 0.85rem 0; }
.record__fig {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 600;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  letter-spacing: 0.02em;
}

/* ---------- The date plate ----------
   The old site's scannable date blocks, redrawn in the ledger's
   draughting: a small engraved block, day numeral over month. Lives
   in the events ledger's figure column and the home next-event
   strip. On cream bands the plate inverts to paper, the same law
   as the chapter hall's plates. */
.figplate {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  padding: 0.5rem 0.4rem 0.45rem;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  text-align: center;
}
.figplate__day {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 760;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.figplate__mon {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.25rem;
  white-space: nowrap;
}
.figplate--tbd .figplate__day {
  font-size: 0.8rem;
  font-stretch: 105%;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  padding-block: 0.3rem 0.1rem;
}
.s-deep .figplate { background: var(--paper); }

/* ---------- Next-event strip (home): the public docket ----------
   The members docket dialect on the public site: one slim CRIMSON
   band under the hero photograph putting the next dated public
   event a glance away. Crimson because it asks (RSVP), the same law
   as every drench; a paper version of this strip was rejected on
   render as unable to carry the weight. Gold stays the action
   metal: the date plate and the RSVP button, both with ink text.
   Filled by main.js from events-data.js; stays [hidden] without JS
   or when nothing dated is upcoming. */
.next-ev {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: linear-gradient(168deg, var(--crimson), var(--crimson-deep));
  color: var(--on-crimson);
  /* One padding for all four sides: the docket breathes on the s-4
     grid like the calendar's docket row (14px vertical read
     compressed against the 24px inset, measured on render). */
  padding: var(--s-4);
  margin-top: var(--s-4);
}
.next-ev__body { min-width: 0; }
.next-ev__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-crimson-2);
  margin: 0 0 0.15rem;
}
.next-ev__title {
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 650;
  color: var(--on-crimson);
  margin: 0;
}
.next-ev__where { font-size: var(--t-sm); color: var(--on-crimson-2); margin: 0.1rem 0 0; }
.next-ev .figplate { background: var(--gold); border-color: transparent; }
.next-ev .figplate__day { color: var(--ink); }
.next-ev .figplate__mon { color: var(--ink-2); }
.next-ev__go { margin-left: auto; white-space: nowrap; }
@media (max-width: 700px) {
  .next-ev { flex-wrap: wrap; gap: var(--s-3); }
  .next-ev__go { margin-left: 0; }
}
.record__body > :last-child { margin-bottom: 0; }
.record__body p { color: var(--ink-2); margin-bottom: 0; }
.record__meta {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--t-xs);
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .record > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .record__meta { grid-column: 2; text-align: left; margin-top: 0.35rem; }
}

/* ---------- Logo wall ----------
   Placements and ventures as a hairline grid of company tiles.
   Tiles hold a typeset wordmark until real logo files exist; a
   tile swaps to <img>/inline SVG with no other change.

   Three layered reactions to the pointer:
   1. the hovered tile inverts to crimson,
   2. its neighbours drop to --ink-3 so the wall "focuses",
   3. a warm spotlight tracks the cursor across the whole grid
      (main.js sets --mx/--my; multiply blend, so it tints).
   All three are hover-only and are disabled on touch and under
   reduced motion. Nothing essential is revealed by hovering. */
.wall {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wall__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 8.5rem;
  padding: var(--s-4) var(--s-3);
  text-align: center;
  background: var(--paper);
  color: var(--ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.s-deep .wall__tile { background: var(--paper-deep); }

.wall__name {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 650;
  font-size: var(--t-base);
  line-height: 1.15;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.wall__field {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--t-xs);
  font-weight: 550;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--fast) var(--ease);
}
/* A real logo drops straight in here and keeps the grade of the page. */
.wall__tile img {
  max-height: 2.6rem;
  width: auto;
  filter: grayscale(1);
  transition: filter var(--fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  /* :not(:hover) is load-bearing. `.wall:hover .wall__tile` scores
     (0,3,0) and would otherwise outrank `.wall__tile:hover` (0,2,0),
     dimming the very tile being pointed at. */
  .wall:hover .wall__tile:not(:hover) { color: var(--ink-3); }
  .wall:hover .wall__tile:not(:hover) .wall__field { color: var(--ink-3); }
  .wall__tile:hover {
    background: var(--crimson);
    color: var(--on-crimson);
  }
  .wall__tile:hover .wall__field { color: var(--on-crimson-2); }
  .wall__tile:hover img { filter: none; }

  .wall__spot {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--base) var(--ease);
    background: radial-gradient(circle 15rem at var(--mx, 50%) var(--my, 50%),
      oklch(64% 0.098 76 / 0.22), transparent 68%);
    mix-blend-mode: multiply;
  }
  .wall:hover .wall__spot { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wall__spot { display: none; }
}

/* Index: a typeset roll. Not a marquee, not logo chips. */
/* column-width, not a column count: the roll fits itself to the
   container instead of guessing at the viewport. */
.index {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 15rem;
  column-gap: var(--s-5);
  border-top: 1px solid var(--rule);
}
.index li {
  break-inside: avoid;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* ---------- Pillars (A.B.L.E.) ----------
   Typographic set, not four identical cards: the letter is the
   structure and the rows alternate emphasis. */
.pillars { border-top: 1px solid var(--rule); }
.pillar {
  display: grid;
  grid-template-columns: minmax(3.5rem, 7vw) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.6rem, 3.2vw, 3rem) 0;
  border-bottom: 1px solid var(--rule);
}
.pillar__ltr {
  font-family: var(--font-display);
  font-stretch: var(--wider);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.8;
  color: var(--brass);
  letter-spacing: -0.04em;
}
.pillar__name {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 650;
  font-size: var(--t-xl);
  letter-spacing: -0.012em;
  margin: 0 0 0.25em;
  line-height: 1.1;
}
.pillar__say { font-style: italic; color: var(--ink-2); margin: 0; }
.pillar p:last-child { margin-bottom: 0; }
@media (max-width: 780px) {
  .pillar { grid-template-columns: minmax(2.6rem, 3.4rem) minmax(0, 1fr); }
  .pillar > :last-child { grid-column: 2; }
}

/* ---------- A.B.L.E. columns ----------
   Four Doric columns standing in a row, drawn as a line elevation
   rather than an illustration: the Greek reference reads as
   draughting, not costume.

   Wide enough for it, this is a HORIZONTAL ACCORDION. Four panels
   tile the container, each owning one column and its copy. Selecting
   a pillar widens its panel to 52% and settles the other three at 16%
   each. The total is always exactly 100%, so the component's outer
   box never changes and nothing outside it moves; the panels share
   edges, so what the eye tracks is one region redistributing rather
   than four objects crossing gaps.

   That distinction is the whole point, and it is the third attempt.
   The version before this inserted a ~570px track between the
   columns, which grew the total and threw the remaining pillars 500
   to 700px sideways. Same interaction, read as chaos. Material's
   choreography guidance names the failure directly: avoid scenes
   without a focal point, and do not let elements cross paths during
   a transition.

   Every number below is taken from measurement, not taste:

   - 52 / 16 rather than the 5:1 ratio common in image accordions.
     The collapsed panels here are not rails hiding content; they
     still have to hold a legible Doric column and its name, and a
     gentler ratio also cuts the peak edge travel roughly in half.
   - 320ms sits between Carbon's moderate-02 (240ms, "expansion") and
     slow-01 (400ms, "large expansion"), which matches the distance
     actually travelled. osi.swiss, the one real shipping example of
     this pattern found in the wild, uses 400ms for roughly three
     times the travel.
   - cubic-bezier(0.2, 0, 0.38, 0.9) is Carbon's productive standard,
     peaking at 1.75x average velocity. The site's usual ease-out-quart
     peaks at 4.54x on the very first frame: it covers 40% of the
     distance in the first 10% of the duration, which is a snap, not a
     glide, and four of them at once was a large part of the problem.
     An expand-and-contract also runs both directions at once, and CSS
     replays the curve forward on the reverse, so a symmetric curve is
     right where an ease-out is not.
   - Percentages, not fr. Both interpolate, but an fr track's width is
     a hyperbola in its grow factor, so the authored easing is not the
     easing the eye sees. Percentages map 1:1.

   Interaction is single-open, and hover only opens after an intent
   delay (see initAble). Both real implementations measured are click
   only; the delay is the compromise that keeps the requested hover
   without the row flickering as the cursor crosses it. */

/* Without JS every panel is simply a block and all four cards are
   readable, so the copy is never trapped behind an interaction. */
.able__panel + .able__panel { margin-top: var(--s-5); }

.able__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  min-width: 0;                     /* so the name can clip, not spill */
  padding: 0 0 var(--s-4);
  margin-bottom: -1px;              /* the button sits on the row rule */
  font-family: inherit;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.able__col:hover, .able__col:focus-visible { color: var(--ink-2); }
.able__col[aria-expanded="true"] {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
}

.able__ltr {
  font-family: var(--font-display);
  font-stretch: var(--wider);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Sized by height as well as width. Width alone let the shafts run
   to 285px on a 390px screen: four thin marks filling most of the
   fold. preserveAspectRatio is xMidYMid meet by default, so giving
   both axes letterboxes rather than distorts, and the smaller
   constraint wins. */
.able__shaft {
  width: 100%;
  max-width: 5.25rem;
  height: clamp(9rem, 22vw, 18rem);
  color: inherit;
}
.able__name {
  font-family: var(--font-display);
  font-stretch: 102%;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  /* ENTREPRENEURSHIP is one unbreakable 16-character word and the
     cells get narrow once a panel collapses to a rail. Left
     unguarded it spilled out and collided with the card copy. It
     should clip, never overlap. */
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 1.2rem;
}
@media (max-width: 560px) { .able__name { display: none; } }

.able__inner { padding: var(--s-5) 0 var(--s-3); max-width: 62ch; }
.able__inner > :last-child { margin-bottom: 0; }
.able__title {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 650;
  font-size: var(--t-xl);
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0 0 0.2em;
}
.able__say { font-style: italic; color: var(--ink-2); margin: 0 0 0.7em; }

/* ---- With JS, narrow: the colonnade with the card underneath ----
   The panels dissolve so the four buttons can sit in one row and the
   cards share a single cell beneath them. */
.able[data-able-ready] {
  --able-dur: 320ms;
  --able-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 1.6vw, 1.5rem);
  align-items: end;
  border-bottom: 1px solid var(--rule);
}
.able[data-able-ready] .able__panel { display: contents; }
.able[data-able-ready] .able__col { grid-row: 1; }
.able[data-able-ready] .able__panel:nth-child(1) .able__col { grid-column: 1; }
.able[data-able-ready] .able__panel:nth-child(2) .able__col { grid-column: 2; }
.able[data-able-ready] .able__panel:nth-child(3) .able__col { grid-column: 3; }
.able[data-able-ready] .able__panel:nth-child(4) .able__col { grid-column: 4; }

.able[data-able-ready] .able__card {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  /* grid-template-rows, never height: no layout thrash, and it works
     with content of unknown length. */
  transition: grid-template-rows var(--able-dur) var(--able-ease),
              opacity var(--fast) var(--ease);
}
/* The clip wrapper carries NO padding. Two traps here, both of which
   leave a phantom gap under a "collapsed" card: a grid item defaults
   to min-height auto and refuses to shrink below its content, and 0fr
   sizes the content box only, so padding on the item itself still
   renders. Padding lives on .able__inner, one level in. */
.able[data-able-ready] .able__clip { overflow: hidden; min-height: 0; }
.able[data-able-ready] .able__card[data-open] {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* ---- Wide: the horizontal accordion ---- */
@media (min-width: 1200px) {
  .able[data-able-ready] {
    grid-template-columns: 25% 25% 25% 25%;
    column-gap: 0;
    align-items: stretch;
    transition: grid-template-columns var(--able-dur) var(--able-ease);
  }
  .able[data-able-ready][data-open-index="0"] { grid-template-columns: 52% 16% 16% 16%; }
  .able[data-able-ready][data-open-index="1"] { grid-template-columns: 16% 52% 16% 16%; }
  .able[data-able-ready][data-open-index="2"] { grid-template-columns: 16% 16% 52% 16%; }
  .able[data-able-ready][data-open-index="3"] { grid-template-columns: 16% 16% 16% 52%; }

  /* Each panel is a real box again: its column pinned to the leading
     edge, its copy alongside. Anchoring the column to the edge rather
     than centring it is what keeps the pillar you clicked from moving
     while its own panel grows. */
  .able[data-able-ready] .able__panel {
    display: flex;
    align-items: flex-end;
    grid-row: 1;
    min-width: 0;
  }
  .able[data-able-ready] .able__col {
    grid-column: auto;
    grid-row: auto;
    flex: none;
    width: var(--able-cell);
  }
  .able[data-able-ready] {
    --able-cell: clamp(8.75rem, 11vw, 10.5rem);
  }

  .able[data-able-ready] .able__card {
    grid-row: auto;
    grid-column: auto;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    /* The clip belongs to the card, not the panel: the button's focus
       ring sits outside its box and a panel-level clip would cut it. */
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fast) var(--ease),
                visibility 0s linear var(--fast);
  }
  .able[data-able-ready] .able__card[data-open] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--base) var(--ease) 120ms, visibility 0s;
  }
  .able[data-able-ready] .able__clip { overflow: visible; }
  .able[data-able-ready] .able__inner {
    /* A FIXED width, deliberately not a percentage. Sized off the
       panel, the copy would re-wrap on every frame of the resize:
       expensive, and the text visibly reflowing is its own kind of
       hectic. Clipped by the card instead. The vw term stops below
       --page, where .wrap stops growing. */
    width: clamp(20rem, 34vw, 30rem);
    max-width: none;
    padding: 0 var(--s-5) var(--s-4);
  }

  /* Rails are narrower than a quarter of the row, so the names come
     down to suit. They are secondary to the letter above them. */
  .able[data-able-ready] .able__name {
    font-size: clamp(0.625rem, 0.75vw, 0.75rem);
    letter-spacing: 0.05em;
  }
}

/* ---------- Plates (duotone imagery) ----------
   Every photograph is graded to one palette so a sourced set
   reads as one campaign. Consistency is what buys the class. */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(1.02);
}
/* ONE grade for every photograph on the site. A second treatment
   splits the system and the set stops reading as one campaign.
   Verified against all five sourced images. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--crimson);
  mix-blend-mode: color;
  /* 0.36, not 0.7: tested across all five photographs. Heavier and
     the highlights blow out to neon pink and faces stop reading as
     people. This keeps tonal detail and still unifies the set. */
  opacity: 0.36;
}
/* REAL chapter photography runs unedited (owner's rule, Aug 2026):
   no grayscale, no crimson wash. The duotone exists to unify
   placeholder stock; documentary photos ARE the record, and the
   record is not colour-corrected. Mark their plates .plate--real. */
.plate--real img { filter: none; }
.plate--real::after { content: none; }
.plate--portrait { aspect-ratio: 4 / 5; }
.plate--wide { aspect-ratio: 16 / 9; }
.plate--tall { aspect-ratio: 3 / 4; }

figure { margin: 0; }
figcaption {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.7rem;
}

/* ---------- People ---------- */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4) var(--s-4);
  list-style: none; margin: 0; padding: 0;
}
/* Phones: auto-fill collapses to one ~340px column, which turns each
   monogram plate into a ~425px placeholder billboard (mobile audit).
   Two-up halves the roster's scroll cost at 390px. */
@media (max-width: 700px) {
  .people { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-3); }
}
.person__name {
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 620;
  font-size: var(--t-base);
  margin: 0.85rem 0 0.1rem;
}
.person__role { font-size: var(--t-sm); color: var(--ink-3); margin: 0; }
/* No portrait yet: a brass monogram plate, not a circular avatar. */
.person__plate {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  overflow: hidden;
}
/* Real headshots (supplied, NEVER generated) drop into the plate as
   plain <img>; the cover-crop makes any sourced shot 4:5. Portraits
   run in full colour (owner's call, Aug 2026): the warm-monochrome
   grade tried here flattened real people into decor. */
.person__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.on-dark .person__plate { background: oklch(100% 0 0 / 0.05); }
.person__mono {
  font-family: var(--font-display);
  font-stretch: var(--wider);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  color: var(--brass);
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: -0.008em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  background: var(--brass);
  transition: transform var(--fast) var(--ease), opacity var(--fast);
}
.faq summary::before { width: 15px; height: 1.5px; transform: translateY(-50%); }
.faq summary::after { width: 1.5px; height: 15px; right: 11.15px; transform: translateY(-50%); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq details > div { padding: 0 3rem 1.5rem 0; }
.faq details > div > :last-child { margin-bottom: 0; }
.faq details > div p { color: var(--ink-2); }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--s-3); }
.field label {
  display: block;
  font-family: var(--font-display);
  font-stretch: 102%;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color var(--fast), background var(--fast);
}
.drench .field input, .on-dark .field input,
.drench .field textarea, .on-dark .field textarea { color: var(--on-dark); }
.field input::placeholder { color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--brass);
  box-shadow: var(--focus);
  outline: none;
}
.drench .field input:focus-visible, .on-dark .field input:focus-visible { box-shadow: var(--focus-dark); }
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-3); }
.form-note { font-size: var(--t-xs); color: var(--ink-3); }
.form-error { color: oklch(62% 0.19 25); font-size: var(--t-sm); margin-top: 0.4rem; }
.drench .form-error, .on-dark .form-error { color: oklch(84% 0.11 45); }

/* Honeypot: off-canvas, never display:none (AT + autofill) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Quiz ---------- */
.quiz {
  max-width: 40rem;
  /* Opaque on purpose: the drench carries the fret mark behind this
     card, and a translucent scrim lets it ghost through the panel.
     The color-mix line reproduces the old 18%-black-over-crimson
     tone; the flat line above it is the no-color-mix fallback. */
  background: var(--crimson-deep);
  background: color-mix(in oklab, var(--crimson) 55%, var(--crimson-deep));
  border: 1px solid var(--rule-dark);
  padding: clamp(1.4rem, 3vw, 2.6rem);
}
.s-paper .quiz, .s-deep .quiz {
  background: var(--paper);
  border-color: var(--rule);
}
.quiz__bar {
  height: 2px;
  background: var(--rule-dark);
  margin-bottom: var(--s-4);
  overflow: hidden;
}
.s-paper .quiz__bar, .s-deep .quiz__bar { background: var(--rule); }
.quiz__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width var(--base) var(--ease);
}
.s-paper .quiz__bar-fill, .s-deep .quiz__bar-fill { background: var(--crimson); }
.quiz__step {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}
.quiz__q {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 var(--s-4);
}
.quiz__opts { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.quiz__opt {
  text-align: left;
  width: 100%;
  min-height: 48px;
  padding: 1rem 2.2rem 1rem 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.4;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  position: relative;
  transition: padding-left var(--fast) var(--ease), color var(--fast);
}
.quiz__opt::after {
  content: "";
  position: absolute;
  right: 0.4rem; top: 50%;
  width: 14px; height: 1.5px;
  background: var(--brass);
  transform: translateY(-50%) scaleX(0);
  transform-origin: right;
  transition: transform var(--fast) var(--ease);
}
.quiz__opt:hover, .quiz__opt:focus-visible { padding-left: 0.7rem; }
.quiz__opt:hover::after, .quiz__opt:focus-visible::after { transform: translateY(-50%) scaleX(1); }
.quiz__opt.is-on { padding-left: 0.7rem; color: var(--gold); }
.s-paper .quiz__opt.is-on, .s-deep .quiz__opt.is-on { color: var(--crimson); }
.quiz__back {
  margin-top: var(--s-3);
  background: none; border: 0; padding: 0.4rem 0;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--ink-3);
  cursor: pointer;
}
.quiz__back:hover { color: var(--ink); }
.quiz__pillar {
  font-family: var(--font-display);
  font-stretch: var(--wider);
  font-weight: 800;
  font-size: var(--t-2xl);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
  margin: 0 0 0.3em;
}
.s-paper .quiz__pillar, .s-deep .quiz__pillar { color: var(--crimson); }
.quiz__foot {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.quiz__skip { margin-top: var(--s-6); }

/* ---------- Loader ----------
   Two beats: the three Greek letters fill the screen, then they
   give way to the phoenix, which docks into the header (PRD 4.3).
   Both children share one grid cell so they cross over in place
   rather than pushing each other around. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  grid-template-areas: "stack";
  background: var(--paper);
  cursor: pointer;
  transition: opacity 420ms var(--ease);
}
.loader.is-done { opacity: 0; pointer-events: none; }
.loader__word, .loader__mark { grid-area: stack; }

/* Beat one: ΣΥΜ, edge to edge. The official wordmark artwork, not
   type: neither shipped face carries Greek glyphs. */
.loader__word {
  width: min(86vw, 1120px);
  color: var(--crimson);
  animation: word-in 500ms var(--ease) both,
             word-out 340ms var(--ease) 900ms both;
}
/* Beat two: the phoenix, arriving as the letters leave. */
.loader__mark {
  width: clamp(110px, 19vw, 190px);
  color: var(--crimson);
  animation: mark-in 480ms var(--ease) 1040ms both;
}
.loader.is-docking .loader__mark {
  transition: transform 640ms var(--ease), color 640ms;
  color: var(--ink);
}
@keyframes word-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes word-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(1.06); }
}
@keyframes mark-in {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
.loader__hint {
  position: absolute;
  bottom: 2.2rem;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(4rem, 8vw, 8rem);
  overflow: hidden;
}
.hero__in { position: relative; z-index: 1; }
.hero .d-hero { max-width: 15ch; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  align-items: baseline;
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--t-xs);
  font-weight: 550;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Separator trails the preceding item so a wrap never starts a line
   with a floating dot. */
.hero__meta span:not(:last-child)::after {
  content: "·";
  margin: 0 0.7rem;
  color: var(--brass);
}

/* ---------- Reveal ----------
   Class added by JS only, so no-JS and reduced-motion always
   see content. Never applied to the page h1 (LCP). */
.rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--rv-d, 0ms);
}
.rv.is-in { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.ftr {
  position: relative;    /* containing block for the key stylobate */
  /* The footer falls toward its deep shade the way the drench falls
     toward crimson-deep: same 168deg, same grammar. Flat ink was the
     one large surface with no depth at all. */
  background: linear-gradient(168deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--on-dark);
  --ink-2: var(--on-dark-2);
  --ink-3: var(--on-dark-2);
  --rule: var(--rule-dark);
  --brass: var(--gold);
  padding-block: var(--s-7) var(--s-5);
}
.ftr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  padding-bottom: var(--s-6);
}
@media (max-width: 780px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
.ftr .brand { color: var(--on-dark); }
.ftr__motto {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
  margin: var(--s-4) 0 0.2rem;
}
.ftr h2 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-3);
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
/* Padded to a ~40px row so footer links are real thumb targets;
   the grid gap shrinks so the visual rhythm stays what it was. */
.ftr ul a { display: inline-flex; align-items: center; padding-block: 0.55rem; }
.ftr a { color: var(--on-dark-2); text-decoration: none; font-size: var(--t-sm); }
.ftr a:hover { color: var(--on-dark); }
.ftr__legal {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--ink-3);
}
/* Legal links sit in the legal row, never in the ftr__grid columns.
   Own flex context so they wrap as a unit at 390px, and a 48px target
   height without adding vertical bulk to the rest of the row. */
.ftr__legal nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.ftr__legal nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: var(--t-xs);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: from-font;
}

/* ---------- Print / motion ---------- */
@media print { .rv { opacity: 1 !important; transform: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv { opacity: 1; transform: none; }
}