/* ============================================================
   AVIAURUM TECHNOLOGIES
   Design tokens. Every component styles through these.
   Concept: assay plate — engraved rules, struck marks, no cards.
   ============================================================ */

:root {
  /* --- brand constants (never re-themed) --- */
  --navy-900: #0B1733;   /* Assay Navy   */
  --navy-800: #101E42;   /* Plate Navy   */
  --aurum:    #C9941A;   /* Aurum        */
  --aurum-hi: #E4B84F;   /* Struck Gold  */
  --aurum-dk: #8A6410;   /* Assay Bronze */
  --plate:    #E8EBF1;   /* Cool Plate   */

  /* --- themed tokens: LIGHT is the default --- */
  --bg:          var(--plate);
  --surface:     #F3F5F9;
  --text:        var(--navy-900);
  --muted:       #4C5771;
  --rule:        #C3CAD8;
  --rule-strong: #A9B2C4;
  --accent:      var(--aurum-dk);
  --accent-line: var(--aurum);
  --accent-soft: #C9941A26;
  --focus:       #7A5608;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          var(--navy-900);
    --surface:     var(--navy-800);
    --text:        #DCE2EE;
    --muted:       #97A3BF;
    --rule:        #24325A;
    --rule-strong: #33436F;
    --accent:      var(--aurum-hi);
    --accent-line: var(--aurum);
    --accent-soft: #E4B84F1F;
    --focus:       var(--aurum-hi);
  }
}

/* Viewer toggle must win over the media query in both directions. */
:root[data-theme="dark"] {
  --bg:          var(--navy-900);
  --surface:     var(--navy-800);
  --text:        #DCE2EE;
  --muted:       #97A3BF;
  --rule:        #24325A;
  --rule-strong: #33436F;
  --accent:      var(--aurum-hi);
  --accent-line: var(--aurum);
  --accent-soft: #E4B84F1F;
  --focus:       var(--aurum-hi);
}

:root[data-theme="light"] {
  --bg:          var(--plate);
  --surface:     #F3F5F9;
  --text:        var(--navy-900);
  --muted:       #4C5771;
  --rule:        #C3CAD8;
  --rule-strong: #A9B2C4;
  --accent:      var(--aurum-dk);
  --accent-line: var(--aurum);
  --accent-soft: #C9941A26;
  --focus:       #7A5608;
}

/* ============================================================
   Typefaces
   ============================================================
   Served from our own origin — the CSP sets font-src 'self', and a
   font CDN would be blocked. /assets/* is cached immutably for a
   year, so these are downloaded once.

   Bodoni Moda is a Didone: hairline serifs, extreme thick/thin
   contrast. It is the letterform family engraved on share
   certificates and banknotes, which is the whole premise of the
   design. Reserved for display sizes, where that contrast reads —
   Didones get spindly when set small.

   Archivo carries the body: a grotesque with enough width to hold
   its own under the Bodoni without competing.

   IBM Plex Mono sets every struck label and eyebrow.

   The old stack relied on fonts being installed on the visitor's
   machine. "Baskerville Old Face" ships with Microsoft Office, so
   roughly everyone else got Georgia, and "Avenir Next" is macOS-only
   so Windows got Segoe UI. The site rendered differently for nearly
   every visitor. These three files end that.
   ============================================================ */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni.woff2") format("woff2");
  font-weight: 400 700;      /* variable axis */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 400 700;      /* variable axis */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plexmono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- type --- */
:root {
  --f-display: "Bodoni Moda", "Baskerville Old Face", "Hoefler Text",
               "Palatino Linotype", Georgia, serif;
  --f-body:    "Archivo", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace,
               Menlo, "Courier New", monospace;

  --t-mark: 0.7rem;
  --t-sm:   0.875rem;
  --t-base: 1.0rem;
  --t-lede: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --t-h3:   clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --t-h2:   clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --t-h1:   clamp(2.5rem, 1.6rem + 5.2vw, 5rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 66ch;
  --bleed: 1180px;
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

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

::selection { background: var(--accent-soft); }

.prose { max-width: var(--measure); }

/* Struck mark: the mono utility label used throughout */
.mark {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.mark--gold { color: var(--accent); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 1rem;
  z-index: 99;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ============================================================
   Layout: the plate
   ============================================================ */

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

.band { border-top: 1px solid var(--rule); }

.sec {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 940px) {
  .sec { grid-template-columns: 13rem minmax(0, 1fr); gap: 3.5rem; }
  .sec > .rail { position: sticky; top: 6.5rem; align-self: start; }
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.35rem;
}
.rail::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--accent-line);
  margin-bottom: 0.6rem;
}

.col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
}

.col--tight { gap: 0.9rem; }

.lede {
  font-size: var(--t-lede);
  color: var(--muted);
  max-width: 60ch;
}

.h-lg { font-size: var(--t-h2); }
.sec-label { padding-block: 2.25rem 0; }

/* ============================================================
   Header
   ============================================================ */

.head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.lockup {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 0.7rem;
  text-decoration: none;
  min-width: 0;
}
/* The company mark. A background-image rather than an <img> so the browser
   fetches only the variant the current theme needs — and because the adjacent
   wordmark already supplies the accessible name, making the glyph decorative.
   mark-dark.webp lifts the navy strokes to pale steel; on the navy header in
   dark mode the original would otherwise disappear into the background. */
/* Sized from a legibility test, not from taste: the globe is drawn as a dotted
   world map, and below about 76px wide it collapses into noise around the A.
   Rendered at 59, 74, 88, 104 and 120px against both grounds, 88px+ is where
   the continents and the sphere read as intended. Do not shrink this. */
.lockup__glyph {
  width: 76px;
  height: 49px;
  flex: none;
  background: url("/assets/brand/mark.webp") left center / contain no-repeat;
}
@media (min-width: 760px) {
  .lockup__glyph { width: 96px; height: 62px; }
}
@media (prefers-color-scheme: dark) {
  .lockup__glyph { background-image: url("/assets/brand/mark-dark.webp"); }
}
:root[data-theme="dark"]  .lockup__glyph { background-image: url("/assets/brand/mark-dark.webp"); }
:root[data-theme="light"] .lockup__glyph { background-image: url("/assets/brand/mark.webp"); }

/* The pagehead and cta bands are permanently dark in both themes, so a mark
   sitting inside one always needs the light variant. */
.pagehead .lockup__glyph,
.cta .lockup__glyph { background-image: url("/assets/brand/mark-dark.webp"); }
.lockup__type { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.wordmark {
  font-family: var(--f-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark i { font-style: normal; color: var(--accent); }

.subword {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-mono);
  font-size: 0.55rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.subword::before,
.subword::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent-line);
  opacity: 0.65;
  min-width: 8px;
}

.nav { display: flex; align-items: center; gap: clamp(0.85rem, 2vw, 1.9rem); }

.nav__link {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.nav__link:hover { color: var(--text); border-bottom-color: var(--accent-line); }

/* Active page. Put aria-current="page" on the link; the rule keys off that
   so the state is announced as well as drawn. */
.nav__link[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent-line);
}

/* Header nav collapses into the drawer under 760px. */
.nav__group {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.9rem);
}
@media (max-width: 760px) { .nav__group { display: none; } }

/* ============================================================
   Buttons: theme toggle & hamburger
   ============================================================ */

.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.toggle:hover { color: var(--text); border-color: var(--accent-line); }
.toggle svg { width: 13px; height: 13px; flex: none; }

/* Hamburger: three struck rules, not an icon font. */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 46px;
  height: 46px;
  flex: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  padding: 0;
}
.burger:hover { border-color: var(--accent-line); }
.burger span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--text);
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) { .burger { display: inline-flex; } }

/* ============================================================
   Mobile drawer
   Slide-in plate: hairline-ruled register of links, mono face,
   56px rows. No radius, no shadow — it is a plate, not a card.
   ============================================================ */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
.drawer[data-open="true"] { display: block; }
@media (min-width: 761px) { .drawer { display: none !important; } }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 23, 51, 0.72);
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
  animation: fade 0.2s ease;
}

.drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(88vw, 22rem);
  background: var(--bg);
  border-left: 2px solid var(--accent-line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slide-in 0.24s cubic-bezier(.2, .7, .3, 1);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  min-height: 64px;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.drawer__close:hover { border-color: var(--accent-line); }

.drawer__nav { display: flex; flex-direction: column; }

.drawer__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  transition: background 0.18s ease, border-left-color 0.18s ease;
}
.drawer__link:hover,
.drawer__link:focus-visible { background: var(--accent-soft); border-left-color: var(--accent-line); }
.drawer__link[aria-current="page"] {
  color: var(--accent);
  border-left-color: var(--accent-line);
}

/* Inside .drawer__foot the rules would fight the list rhythm, so drop them. */
.drawer__link--plain {
  padding-inline: 0;
  border-bottom: 0;
  min-height: 44px;
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.drawer__foot {
  margin-top: auto;
  padding: var(--gutter);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}

@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

body.is-locked { overflow: hidden; }

/* ============================================================
   Hero — deliberately always dark. It is the struck plate.
   ============================================================ */

.hero {
  position: relative;
  background: var(--navy-900);
  color: #E6EBF6;
  overflow: hidden;
  isolation: isolate;
}
/* Keeps the type side of the plate clean; the engraving lives on the right. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    98deg,
    #0B1733 0%,
    #0B1733 30%,
    rgba(11, 23, 51, 0.80) 48%,
    rgba(11, 23, 51, 0.10) 74%,
    rgba(11, 23, 51, 0.62) 100%
  );
  z-index: 1;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 820px) { .hero__canvas { opacity: 0.55; } }

.hero__in {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 12vw, 9.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: flex-start;
  max-width: 46rem;
}

.hero .mark { color: #9FB0D4; }

.hero h1 {
  font-size: var(--t-h1);
  letter-spacing: -0.01em;
  color: #F2F5FB;
  max-width: 15ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--aurum-hi);
}

.tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aurum-hi);
}
.tagline::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--aurum);
}

.hero__body {
  font-size: var(--t-lede);
  color: #B9C5DE;
  max-width: 52ch;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--aurum);
  color: var(--navy-900);
  background: var(--aurum-hi);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: #F0CC72; transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: #E6EBF6;
  border-color: #3A4C7C;
}
.btn--ghost:hover { background: #16264F; border-color: var(--aurum); transform: translateY(-1px); }

.btn--ink {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.btn--ink:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

/* hero entrance */
.rise { opacity: 0; transform: translateY(14px); }
.lit .rise { animation: rise 0.85s cubic-bezier(.2,.7,.3,1) forwards; }
.lit .rise:nth-child(1) { animation-delay: 0.05s; }
.lit .rise:nth-child(2) { animation-delay: 0.14s; }
.lit .rise:nth-child(3) { animation-delay: 0.23s; }
.lit .rise:nth-child(4) { animation-delay: 0.32s; }
.lit .rise:nth-child(5) { animation-delay: 0.41s; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* ============================================================
   Etymology plate — the brand thesis, stated once
   ============================================================ */

.etym {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 820px) {
  .etym { grid-template-columns: 1fr 1fr; }
  .etym__half + .etym__half { border-top: 0; border-left: 1px solid var(--rule); }
}

.etym__half {
  padding: clamp(2rem, 5vw, 3.25rem) 0;
  padding-inline: clamp(0rem, 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.etym__half + .etym__half { border-top: 1px solid var(--rule); }
.etym__half:first-child { padding-left: 0; }

.etym__word {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 9vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: 0.06em;
}
.etym__word--gold { color: var(--accent); }

.etym__gloss { color: var(--muted); max-width: 40ch; }
.etym__gloss b { color: var(--text); font-weight: 600; }

.etym__sum {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  padding-block: 1.5rem;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.35;
  max-width: 46ch;
}

/* ============================================================
   Services — a ruled schedule, not cards
   ============================================================ */

.svc { display: flex; flex-direction: column; }

.svc__i {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  padding-left: 0;
  border-top: 1px solid var(--rule);
  border-left: 2px solid transparent;
  transition: border-left-color 0.22s ease, padding-left 0.22s ease,
              background 0.22s ease;
}
.svc__i:last-child { border-bottom: 1px solid var(--rule); }
.svc__i:hover,
.svc__i:focus-within {
  border-left-color: var(--accent-line);
  padding-left: 1rem;
  background: var(--accent-soft);
}

.svc__i h3 { font-size: var(--t-h3); }
.svc__i p { color: var(--muted); max-width: 62ch; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.chip {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
}

/* ============================================================
   Stages — genuinely sequential, so genuinely numbered
   ============================================================ */

.stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: stage;
}
@media (min-width: 700px) {
  .stages {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

.stage {
  counter-increment: stage;
  border-top: 1px solid var(--rule);
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stage::before {
  content: counter(stage, upper-roman);
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.2em;
  color: var(--accent);
}
.stage h3 { font-size: 1.3rem; }
.stage p { color: var(--muted); max-width: 46ch; }

/* ============================================================
   Commitments table
   ============================================================ */

.tablewrap {
  overflow-x: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
table { border-collapse: collapse; width: 100%; min-width: 640px; }
caption {
  text-align: left;
  padding-bottom: 0.85rem;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
th, td {
  text-align: left;
  padding: 0.95rem 1.25rem 0.95rem 0;
  vertical-align: top;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}
thead th {
  border-top: 0;
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
td { color: var(--muted); }

/* ============================================================
   Philosophy pull
   ============================================================ */

.pull {
  border-left: 2px solid var(--accent-line);
  padding: 0.3rem 0 0.3rem 1.5rem;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.35;
  max-width: 42ch;
  margin: 0;
}
.pull cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts { display: flex; flex-direction: column; gap: 1.5rem; }
.fact { display: flex; flex-direction: column; gap: 0.35rem; }
.fact h3 { font-size: 1.2rem; font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
.fact p { color: var(--muted); max-width: 58ch; }

/* ============================================================
   Contact band — the second deliberate dark plate
   ============================================================ */

.cta {
  background: var(--navy-800);
  color: #E6EBF6;
  border-top: 2px solid var(--aurum);
}
.cta__in {
  padding-block: clamp(3.25rem, 8vw, 5.5rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.cta h2 { font-size: var(--t-h2); color: #F2F5FB; max-width: 18ch; }
.cta__lede { color: #B9C5DE; max-width: 54ch; font-size: var(--t-lede); }
.cta .mark { color: #9FB0D4; }

.contacts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  border-top: 1px solid #24325A;
  padding-top: 1.75rem;
}
@media (min-width: 760px) { .contacts { grid-template-columns: repeat(3, 1fr); } }

.contact { display: flex; flex-direction: column; gap: 0.3rem; }
.contact a {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  color: var(--aurum-hi);
  text-decoration: none;
  border-bottom: 1px solid #3A4C7C;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: border-color 0.18s ease;
  overflow-wrap: anywhere;
}
.contact a:hover { border-bottom-color: var(--aurum-hi); }
.contact span { color: #8FA0C4; font-size: var(--t-sm); }

/* ============================================================
   Footer — the hallmark row
   ============================================================ */

.foot { background: var(--bg); }
.foot__in {
  padding-block: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.hallmark {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border: 1px solid var(--rule-strong);
  max-width: 100%;
}
.hallmark li {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.16em;
  color: var(--muted);
  padding: 0.4rem 0.7rem;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.hallmark li + li { border-left: 1px solid var(--rule-strong); }
.hallmark li:first-child {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.foot__legal {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.1em;
  color: var(--muted);
}

.foot__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 620px) { .foot__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .foot__cols { grid-template-columns: 1.4fr repeat(3, 1fr); } }

.foot__col { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.foot__blurb { color: var(--muted); font-size: var(--t-sm); max-width: 34ch; }

.foot__link {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.foot__link:hover { color: var(--text); border-bottom-color: var(--accent-line); }

/* ============================================================
   Interior pages: header band
   The plate equivalent of the homepage hero — always dark, ruled,
   no engraving. Use on every page that is not the homepage.
   ============================================================ */

.pagehead {
  background: var(--navy-900);
  color: #E6EBF6;
  border-bottom: 2px solid var(--aurum);
}
.pagehead__in {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}
.pagehead h1 {
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.75rem);
  color: #F2F5FB;
  max-width: 18ch;
}
.pagehead__lede { color: #B9C5DE; font-size: var(--t-lede); max-width: 54ch; }
.pagehead .mark { color: #9FB0D4; }

/* Breadcrumb — sits inside .pagehead__in, above the h1. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before {
  content: "/";
  color: #5E7099;
  font-family: var(--f-mono);
  font-size: var(--t-mark);
}
.crumbs a,
.crumbs span {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* 44px floor matches every other tap target on the site. WCAG 2.2 AA only asks
   for 24x24, but a breadcrumb is a thumb target on a phone — hold the line.
   The negative block margin cancels the added height so the row still measures
   32px and nothing shifts: this is hit-area only. flex-start keeps the label
   flush with the h1's left edge; centring would nudge it off the grid. */
.crumbs a {
  color: #9FB0D4;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  min-width: 44px;
  margin-block: -6px;
}
.crumbs a:hover { color: #E6EBF6; border-bottom-color: var(--aurum); }
.crumbs [aria-current="page"] { color: var(--aurum-hi); }

/* ============================================================
   Form controls
   Ruled fields on the plate. Square, hairline, no fill.
   ============================================================ */

.form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 34rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field > label {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  min-height: 48px;
  width: 100%;
  transition: border-color 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--accent-line); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent-line); }

.field__hint { font-size: var(--t-sm); color: var(--muted); }
.field__error { font-size: var(--t-sm); color: #C0392B; }
:root[data-theme="dark"] .field__error { color: #F1948A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field__error { color: #F1948A; }
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #C0392B; }

/* Submit uses .btn.btn--ink; this only normalises the button element. */
button.btn { border-radius: 0; cursor: pointer; font: inherit; }
button.btn {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================================
   Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .rise, .lit .rise { opacity: 1; transform: none; animation: none; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 5.5rem; }

/* ============================================================
   Long-form legal document — /privacy and /terms
   ============================================================
   Shared by both legal pages. It lived inline on each until the
   two copies were confirmed byte-identical; duplicated CSS is
   how two documents quietly drift apart.

   Adds: .note (the draft notice), .docmeta (front matter),
   .toc (table of contents), .doc / .doc__s (the numbered body).

   Body copy here runs at var(--text), not var(--muted) as it does
   in the marketing components. These are documents people have to
   read end to end; the muted tone is kept for labels and rails.
   No cards, no radius, no shadow — hairline rules only.
   ============================================================ */

/* --- the draft notice ---
   No bottom rule: the first .docmeta row that follows it supplies one, and
   two rules a column-gap apart read as a mistake. */
.note {
  max-width: var(--measure);
  border-top: 2px solid var(--accent-line);
  padding-block: 1.15rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.note p { color: var(--text); }
.note strong { font-weight: 600; }

/* --- front matter --- */
.docmeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2.5rem;
  max-width: var(--measure);
  margin: 0;
}
@media (min-width: 620px) {
  .docmeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.docmeta > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--rule);
}
.docmeta dt {
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.docmeta dd {
  margin: 0;
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}

/* --- table of contents --- */
.toc { max-width: 46rem; }
.toc__list { counter-reset: toc; margin-top: 0.6rem; }
@media (min-width: 760px) {
  .toc__list { columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); }
}
.toc__list li { break-inside: avoid; }

.toc__link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  padding-block: 0.55rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.toc__link::before {
  counter-increment: toc;
  content: counter(toc) ".";
  flex: none;
  min-width: 1.6rem;
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.toc__link:hover { color: var(--text); border-top-color: var(--accent-line); }

/* --- the document body --- */
.doc {
  counter-reset: docsec;
  display: flex;
  flex-direction: column;
}
.doc__s {
  counter-increment: docsec;
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.doc__s:last-child { border-bottom: 1px solid var(--rule); }

.doc__s > h3 {
  font-size: var(--t-h3);
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  max-width: 32ch;
}
.doc__s > h3::before {
  content: counter(docsec) ".";
  flex: none;
  min-width: 1.6rem;
  font-family: var(--f-mono);
  font-size: var(--t-mark);
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.doc__s h4 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
  margin: 0.55rem 0 0;
}
.doc__s p { max-width: var(--measure); }
.doc__s strong { font-weight: 600; }
.doc__s code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  border-bottom: 1px solid var(--rule);
}

.doc__ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: var(--measure);
}
.doc__ul li { position: relative; padding-left: 1.35rem; }
.doc__ul li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--accent-line);
}

/* Inline links in running prose. The negative margin keeps the line box exactly
   where it was while the padding grows the hit target past 44px — an inline
   link cannot be a 44px block without wrecking the measure.

   The padding is load-bearing and font-dependent. An inline box is sized by the
   font's em box, NOT by line-height, so switching body faces changes the height
   even though nothing here changed: at 0.75rem this measured 45px under the old
   fallback serif and silently dropped to 41px under Archivo. 0.95rem gives 47px
   with headroom. Re-measure at 375px if the body face ever changes again. */
.doc a,
.note a,
.docmeta a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  padding-block: 0.95rem;
  margin-block: -0.95rem;
  overflow-wrap: anywhere;
}
.doc a:hover,
.note a:hover,
.docmeta a:hover { color: var(--text); }

/* In the front matter the link is the whole value, so it can be a real
   44px target instead of an inflated inline box. */
.docmeta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
  margin-block: 0;
}