/* PK2 Finance & Strategy · foundation (v2)
   Fonts, type scale, grid, rules, and the shared components: wordmark, CTAs,
   nav, footer, grid texture, instrument card. Reads tokens.css for every
   colour; this file declares no hex values of its own. */

/* ---------------------------------------------------------------- fonts -- */

/* Fraunces: variable (wght 100..900, opsz, SOFT, WONK), roman only. The
   italic cut is not part of the system: nothing sets font-style: italic, so it
   is not declared here. The woff2 files remain on disk, unreferenced. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-var-latin.woff2") format("woff2");
  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: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Satoshi: 400 / 500 / 700. */
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/satoshi-400.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/satoshi-500.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/satoshi-700.woff2") format("woff2");
}

/* IBM Plex Mono: 400 / 500. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  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";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  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";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

/* One focus treatment, everywhere, in three grounds. On paper the ring takes
   the dark gold, because full gold reads 2.47:1 there and the ring is the only
   indicator a keyboard user gets. On ink the full gold is the legible one. And
   where the element is itself gold, the ring goes to ink: a gold ring on a gold
   fill reads as nothing. The gold-fill rule is written last so it also wins on
   a primary CTA that sits inside an ink section. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ground-ink :focus-visible {
  outline-color: var(--focus-ring-ink);
}
.btn-primary:focus-visible,
.on-gold:focus-visible {
  outline-color: var(--focus-ring-inv);
}

@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;
  }
}

/* ------------------------------------------------------------ skip link -- */

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--text-inv);
  font-family: var(--font-body);
  font-size: var(--size-small);
  line-height: 1;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------- reveal -- */

/* Section entry. A wrapper rises 16px into place on the site's single curve,
   once, and stays. Gated on html.js so a page served without script renders
   fully visible, and switched off under reduced motion. Nothing on this site
   is ever left sitting at partial opacity. */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms var(--ease-resolve), transform 650ms var(--ease-resolve);
}
html.js .reveal-group.is-in .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------------------- type -- */

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

.display-xl, .display-lg, .h2, .h3,
h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  text-wrap: balance;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.display-xl {
  font-weight: 600;
  font-size: var(--size-display-xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.display-lg {
  font-weight: 580;
  font-size: var(--size-display-lg);
  line-height: 1.08;
  letter-spacing: -0.016em;
}

.h2 {
  font-weight: 560;
  font-size: var(--size-h2);
  line-height: 1.12;
}

.h3 {
  font-weight: 560;
  font-size: var(--size-h3);
  line-height: 1.2;
}

.h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-h4);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

.quote {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: var(--size-quote);
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

.body-lg { font-size: var(--size-body-lg); line-height: 1.6; }
.body    { font-size: var(--size-body); line-height: 1.6; }
.small   { font-size: var(--size-small); line-height: 1.55; }

.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.num-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-num-display);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.num-data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* Reading column. Body copy is never allowed to run wider than this. */
.measure { max-width: var(--measure); }

.muted { color: var(--text-muted); }

/* Two-tone headline. The second clause drops to fog. The sentence keeps its
   grammar but loses half its weight, which is the whole argument of the brand. */
.fog { color: var(--fog); }
.ground-ink .fog, .on-ink .fog { color: var(--fog-inv); }

/* Reserved voice. Roman Fraunces at quote scale, one step heavier than .quote,
   with a short gold rule above it: the same 2px gold the SignalField resolves
   to. It is for questions, conclusions and decision statements only, never for
   emphasis or flavour. The rule is the marker, so no italic is needed. */
.voice-decision {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 580;
  font-size: var(--size-quote);
  line-height: 1.35;
  color: var(--text);
}
.voice-decision::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--gold);
}

/* --------------------------------------------------------------- ground -- */

.ground-paper   { background: var(--paper); color: var(--text); }
.ground-paper-2 { background: var(--paper-2); color: var(--text); }
.ground-ink     { background: var(--ink); color: var(--text-inv); }

.ground-ink h1, .ground-ink h2, .ground-ink h3,
.ground-ink .display-xl, .ground-ink .display-lg,
.ground-ink .h2, .ground-ink .h3, .ground-ink .h4,
.ground-ink .quote, .ground-ink .num-display,
.ground-ink .voice-decision { color: var(--text-inv); }
.ground-ink .label, .ground-ink .muted { color: var(--muted-inv); }

/* ------------------------------------------------------- grid + spacing -- */

.container {
  width: min(var(--container), 100% - (var(--margin-outer) * 2));
  margin-inline: auto;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

/* Sections carry more air below than above (~15%), so a section reads as
   belonging to the heading that opens it. */
.section {
  position: relative;
  padding-top: var(--section-top);
  padding-bottom: var(--section-bottom);
}
.section-tight { padding-top: calc(var(--section-top) * 0.5); padding-bottom: calc(var(--section-bottom) * 0.5); }

/* A · Essay. Text sits in 7 columns starting at column 2. */
.layout-essay > * { grid-column: 2 / span 7; }

/* B · Split. Two ratios, no others. */
.layout-split-7-5 > :first-child { grid-column: 1 / span 7; }
.layout-split-7-5 > :last-child  { grid-column: 9 / span 4; }
.layout-split-5-7 > :first-child { grid-column: 1 / span 4; }
.layout-split-5-7 > :last-child  { grid-column: 6 / span 7; }

/* C · Statement. Full-bleed ink. Text sits on the same left rail as every
   paper section; the display line runs wider than the copy it opens, whether
   it is a direct child or wrapped (.statement-wide). Where a statement carries
   secondary content, the page composes the right half of the band itself. */
.layout-statement > * { grid-column: 1 / span 8; }
.layout-statement > .display-lg,
.layout-statement > .statement-wide { grid-column: 1 / span 10; }

@media (max-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(8, 1fr); }
  .layout-essay > * { grid-column: 1 / span 8; }
  .layout-split-7-5 > :first-child,
  .layout-split-7-5 > :last-child,
  .layout-split-5-7 > :first-child,
  .layout-split-5-7 > :last-child { grid-column: 1 / span 8; }
  .layout-split-7-5 > :last-child,
  .layout-split-5-7 > :last-child { margin-top: 40px; }
  .layout-statement > *,
  .layout-statement > .display-lg,
  .layout-statement > .statement-wide { grid-column: 1 / span 8; }
}

@media (max-width: 640px) {
  .grid-12 { grid-template-columns: 1fr; }
  .grid-12 > * { grid-column: 1 !important; }
}

/* Quadrant. Four statements as one object, structured by internal hairlines
   only: no cards, no boxes, no fills. Used by the home page's "what remains"
   and the About page's principles, so it lives here rather than in either. */
.quad {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 42px;
}
.quad-cell .h4 { margin-top: 14px; }
.quad-cell .body { margin-top: 10px; font-size: var(--size-small); color: var(--text-muted); max-width: 420px; }
.quad-cell:nth-child(-n+2) { padding-bottom: 32px; border-bottom: 1px solid var(--hairline); }
.quad-cell:nth-child(n+3) { padding-top: 32px; }
.quad-cell:nth-child(odd)  { padding-right: 56px; border-right: 1px solid var(--hairline); }
.quad-cell:nth-child(even) { padding-left: 56px; }

@media (max-width: 1024px) {
  .quad { grid-column: 1 / span 8; }
  .quad-cell:nth-child(odd) { padding-right: 32px; }
  .quad-cell:nth-child(even) { padding-left: 32px; }
}

@media (max-width: 640px) {
  .quad { grid-template-columns: 1fr; margin-top: 38px; }
  .quad-cell { padding: 0 !important; border: 0 !important; }
  .quad-cell + .quad-cell { margin-top: 30px; padding-top: 30px !important; border-top: 1px solid var(--hairline) !important; }
}

/* The edge band belongs to the ink section below it but is drawn on the ground
   above it, so the section it introduces is pulled up by a pixel to close the
   seam. Every page that joins paper to ink this way needs it. */
.signal-edge + .section { margin-top: -1px; }

/* ------------------------------------------------------------ hairlines -- */

.hairline-top    { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }
.hairline-left   { border-left: 1px solid var(--hairline); }

.ground-ink .hairline-top,
.hairline-inv-top    { border-top: 1px solid var(--hairline-inv); }
.ground-ink .hairline-bottom,
.hairline-inv-bottom { border-bottom: 1px solid var(--hairline-inv); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--hairline);
}
.ground-ink .rule { background: var(--hairline-inv); }

/* ------------------------------------------------------------- wordmark -- */

.wordmark {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.wordmark-mark {
  display: block;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: inherit;
}
.wordmark-sub {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
}
.wordmark-lg .wordmark-mark { font-size: 44px; }
.wordmark-lg .wordmark-sub  { font-size: 12px; margin-top: 8px; }

.wordmark-inv { color: var(--text-inv); }
.wordmark-inv .wordmark-sub { color: var(--muted-inv); }

/* ------------------------------------------------------------------ CTA -- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 12px 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-ui) ease, transform 120ms ease;
}
.btn-primary .btn-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: var(--radius-pill);
  background: var(--arrow-well);
  transition: transform var(--dur-ui) var(--ease-resolve);
}
.btn-primary:hover { background: var(--gold-hover); }
.btn-primary:hover .btn-arrow { transform: translateX(2px); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-ui) ease, transform 120ms ease;
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-secondary:active { transform: scale(0.98); }
.ground-ink .btn-secondary { border-color: var(--hairline-inv); color: var(--text-inv); }
.ground-ink .btn-secondary:hover { border-color: var(--text-inv); }

.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-ui) ease;
}
.btn-tertiary:hover { color: var(--gold-hover); }
.btn-tertiary .btn-arrow-glyph { transition: transform var(--dur-ui) var(--ease-resolve); }
.btn-tertiary:hover .btn-arrow-glyph { transform: translateX(3px); }
.ground-ink .btn-tertiary { color: var(--text-inv); }

/* Touch target. The mono label is 13px on a single line, so on the widths
   where the site is tapped rather than clicked the link carries the padding
   that takes the target past 24px. The rule stays inside the same 860px
   breakpoint the nav uses to switch to its touch layout. */
@media (max-width: 860px) {
  .btn-tertiary { padding-block: 6px; }
}

/* Availability. A live dot, present tense, a real number. */
.availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
}
.availability::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--live);
  flex: 0 0 7px;
}
.ground-ink .availability { color: var(--muted-inv); }

/* Status, in an instrument's label row. A live dot for what is running; the
   hollow ring for what is being built stays with the page that draws it. */
.status-live { display: inline-flex; align-items: center; gap: 7px; }
.status-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--live);
}

/* ------------------------------------------------------------------ nav -- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom-color: var(--hairline);
}
.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 76px;
}
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav-links a {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  font-size: 15px;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-ui) ease;
}
.site-nav-links a:hover { color: var(--ink); }
.site-nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
/* The active underline is a SignalField 'underline' instance, mounted here. */
.nav-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
}
.site-nav-cta { display: flex; align-items: center; gap: 20px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bars { position: relative; display: block; width: 22px; height: 12px; margin: 0 auto; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-ui) var(--ease-resolve), top var(--dur-ui) var(--ease-resolve);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after  { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 5px; transform: rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--margin-outer);
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-ui) ease, visibility 0s linear var(--dur-ui);
}
.nav-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-ui) ease, visibility 0s;
}
.nav-overlay a {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: var(--size-h2);
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
/* Staggered mask reveal: each link rises out of its own clipped box. */
.nav-overlay a > span {
  display: block;
  transform: translateY(110%);
  transition: transform 520ms var(--ease-resolve);
}
.nav-overlay.is-open a > span { transform: translateY(0); }
.nav-overlay.is-open a:nth-child(1) > span { transition-delay: 60ms; }
.nav-overlay.is-open a:nth-child(2) > span { transition-delay: 120ms; }
.nav-overlay.is-open a:nth-child(3) > span { transition-delay: 180ms; }
.nav-overlay.is-open a:nth-child(4) > span { transition-delay: 240ms; }

/* The booking action closes the stack. It is the same pill the desktop bar
   carries, not a fifth menu line, so it opts out of the overlay's link type
   and out of the mask reveal its inner span would otherwise inherit. */
.nav-overlay .nav-overlay-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  overflow: visible;
  margin-top: 34px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.nav-overlay .nav-overlay-cta > span {
  transform: none;
  transition: transform var(--dur-ui) var(--ease-resolve);
}

@media (max-width: 860px) {
  .site-nav-links, .site-nav-cta .btn-primary { display: none; }
  .nav-toggle { display: block; }
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--text-inv);
  padding-top: 64px;
  padding-bottom: 44px;
}
/* A resolved gold line, held at 40%: the signal at rest. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 40%, transparent);
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--muted-inv);
}
.footer-links a {
  color: var(--text-inv);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-inv);
  padding-bottom: 3px;
  transition: border-color var(--dur-ui) ease;
}
.footer-links a:hover { border-bottom-color: var(--gold); }
/* The same touch target the tertiary link takes. The padding is added above
   the text so the gold hairline stays where it sits under the word. */
@media (max-width: 860px) {
  .footer-links a { padding-top: 8px; }
}
.footer-legal {
  margin-top: 36px;
  font-size: 13px;
  color: var(--fog-inv);
}

/* --------------------------------------------------------- grid texture -- */

/* Absolute, decorative, never on ink. 120px field lines; a 7px "+" at every
   third intersection; the whole field fades out 200px before the section
   ends so it never collides with the next ground. */
.grid-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 120px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - 200px), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - 200px), rgba(0,0,0,0) 100%);
}
/* Horizontal arm of the cross: 7px wide, 1px tall, every 360px. */
.grid-texture::before,
.grid-texture::after {
  content: "";
  position: absolute;
  inset: 0;
}
.grid-texture::before {
  background-image: repeating-linear-gradient(to right, var(--grid-cross) 0 7px, transparent 7px 360px);
  background-position: -3px 0;
  -webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0 1px, rgba(0,0,0,0) 1px 360px);
  mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0 1px, rgba(0,0,0,0) 1px 360px);
}
/* Vertical arm: 1px wide, 7px tall, on the same intersections. */
.grid-texture::after {
  background-image: repeating-linear-gradient(to right, var(--grid-cross) 0 1px, transparent 1px 360px);
  background-position: 0 -3px;
  -webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0 7px, rgba(0,0,0,0) 7px 360px);
  mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0 7px, rgba(0,0,0,0) 7px 360px);
}
.ground-ink .grid-texture { display: none; }

/* Anything that must sit above the texture. */
.above-texture { position: relative; z-index: 1; }

/* ------------------------------------------------- instrument card shell -- */

/* The one object on the site with depth. A dial: dark bezel, lit core, mono
   labels, tabular figures. Used for measured outcomes only. */
.instrument {
  border-radius: var(--radius-instr);
  background: var(--ink);
  padding: 10px;
  box-shadow: var(--shadow-instr);
}
.instrument-core {
  border-radius: var(--radius-instr-inner);
  background: var(--instr-core);
  padding: 24px 24px 20px;
}
.instrument-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.instrument-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 18px 0 20px;
}
.instrument-figure { display: flex; flex-direction: column; gap: 6px; }
.instrument-figure .num-data { font-size: 24px; color: var(--ink); }
.instrument-chart { border-radius: 0; background: var(--ink-2); padding: 14px; }
.instrument-chart svg { width: 100%; height: auto; }
.instrument-chart .chart-grid { stroke: var(--hairline-inv); }
.instrument-chart .chart-series { fill: none; stroke: var(--gold); stroke-linejoin: round; stroke-linecap: round; }
.instrument-chart .chart-dot { fill: var(--gold); }
.instrument-chart .chart-label {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  fill: var(--muted-inv);
}
.instrument-foot {
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  color: var(--text-muted);
}

/* -------------------------------------------------------- signal fields -- */

/* Every colour and face the SignalField draws with lives here, so the same
   generated markup inverts correctly when it sits on an ink ground. */
.signal-field { display: block; width: 100%; }
.signal-field .sf-svg { display: block; width: 100%; height: auto; overflow: visible; }

.sf-tick { stroke: var(--ink); }
.sf-tick-solid { stroke: var(--ink); stroke-linecap: butt; }
.sf-track { stroke: var(--hairline); }
.sf-signal, .sf-marker { stroke: var(--gold); stroke-linecap: round; }
.sf-signal-fill { fill: var(--gold); }
.sf-dot { fill: var(--gold); }
.sf-zone-rule { stroke: var(--hairline); }

.sf-frag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  fill: var(--text-muted);
}
.sf-frag-live { fill: var(--ink); }
/* The decision the field resolves to. Same reserved voice as .voice-decision:
   roman Fraunces at 580. The gold signal line above it does the marking here,
   so it needs no rule of its own. */
.sf-statement {
  font-family: var(--font-display);
  font-weight: 580;
  fill: var(--ink);
}
.sf-zone, .sf-marker-label {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  fill: var(--text-muted);
}
.sf-marker-label { fill: var(--ink); letter-spacing: 0.08em; }

.ground-ink .sf-tick, .ground-ink .sf-tick-solid { stroke: var(--text-inv); }
.ground-ink .sf-track, .ground-ink .sf-zone-rule { stroke: var(--hairline-inv); }
.ground-ink .sf-frag, .ground-ink .sf-zone { fill: var(--muted-inv); }
.ground-ink .sf-frag-live, .ground-ink .sf-statement,
.ground-ink .sf-marker-label { fill: var(--text-inv); }

/* The edge band is ink dissolving upward into paper; it hangs off the top of
   the ink section it belongs to. */
.signal-edge {
  display: block;
  width: 100%;
  line-height: 0;
}
.signal-edge .sf-svg { height: 90px; }

.signal-field.is-underline { height: 2px; }
.signal-field.is-underline .sf-svg { height: 2px; }
.signal-field.is-progress { width: 240px; }
.signal-field.is-progress .sf-svg { height: 14px; }