/* ---------------------------------------------------------------------------
   base.css — palette, type, reset.

   Clinical editorial: navy and paper, teal and gold, cut on the diagonal. The
   through-line is the ECG trace — the one graphic that belongs to a nurse and
   to nobody else, and the one that can carry his motto without a caption:
   Somahe Kaikehage, the bigger the wave the more spirited we become, rendered
   as a pulse that quickens when you scroll.
--------------------------------------------------------------------------- */

/* Fraunces, self-hosted. Fetched once at build time under the SIL Open Font
   Licence (see fonts/OFL-Fraunces.txt) and served from our own folder, so the
   page still makes no third-party request at runtime.

   The reason it's this face and not a prettier-sounding one: Fraunces carries a
   real optical-size axis (9–144). A heading and a small card title get genuinely
   different letterforms — thinner hairlines and tighter spacing as it grows,
   sturdier strokes as it shrinks — instead of one being a scaled photocopy of
   the other. That is most of what separates a serif that looks considered from
   one that looks cheap. `font-optical-sizing: auto` drives it from font-size. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/fraunces.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;
}

:root {
  /* --- Ground and structure --- */
  --navy:      #0F1E33;   /* dark panels, display type */
  --navy-2:    #17263F;   /* raised dark surfaces */
  --navy-3:    #1F3350;   /* hairlines on dark */
  --paper:     #F4F4F2;   /* page ground */
  --white:     #FFFFFF;   /* cards */

  /* --- Accents ---
     Two rules learned the hard way from measuring these:
       teal on paper is 4.51:1 — passes AA for body, with no margin to spare
       gold on paper is 1.94:1 — never, ever text. Ornament and glow only. */
  --teal:      #1B7A85;
  --teal-lt:   #2E9AA6;   /* teal on navy */
  --teal-dk:   #145C64;
  /* Over scrimmed video even --teal-lt only reaches ~2.9:1. This is the lifted
     variant the hero roles line uses, and it is the only place it appears. */
  --teal-video: #5CC5D0;
  --gold:      #E8A317;   /* glow, rules, icons, and text on navy (7.7:1) */
  --gold-lt:   #F5C24C;
  --gold-ink:  #8A5D06;   /* the ONLY gold allowed to carry text on paper (5.1:1) */

  /* --- Semantic --- */
  --ground:    var(--paper);
  --surface:   var(--white);
  --ink:       var(--navy);
  --ink-2:     #46586F;
  /* Measured at 4.91:1 on paper. The obvious slate (#64748B) comes in at 4.32
     and fails AA on every label, caption and eyebrow on the page. */
  --ink-3:     #5B6B82;
  --accent:    var(--teal);
  --accent-2:  var(--gold-ink);
  --rule:      color-mix(in srgb, var(--navy) 14%, transparent);
  --rule-2:    color-mix(in srgb, var(--navy) 8%, transparent);

  /* On dark panels */
  --on-dark:      #EAF0F7;
  --on-dark-2:    #9FB0C6;
  --on-dark-rule: color-mix(in srgb, #EAF0F7 16%, transparent);

  /* His lattice, read live by pattern.js. It survives here only as texture
     inside the navy wedges, where the mockup has faint contour lines. */
  --field-line: rgba(46, 154, 166, 0.16);
  --field-glow: rgba(232, 163, 23, 0.55);
  --tile-line:  rgba(46, 154, 166, 0.10);

  --chrome-bg: rgba(244, 244, 242, 0.86);

  /* --- Type --------------------------------------------------------------
     Fraunces carries the name, the headings and the figures. Everything meant
     for reading stays on the platform's own UI sans — the contrast between an
     elegant serif and a plain, highly legible sans is what makes the serif read
     as a deliberate choice rather than decoration. Script moments are drawn as
     SVG paths, not set in a font. */
  --display-face: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas,
          "Liberation Mono", monospace;

  /* Fluid scale, all in rem so the browser's text-size setting scales layout
     with the type instead of breaking it. */
  --step--2: clamp(0.68rem, 0.66rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.90rem);
  --step-0:  clamp(0.97rem, 0.94rem + 0.18vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.07rem + 0.42vw, 1.42rem);
  --step-2:  clamp(1.45rem, 1.26rem + 0.92vw, 2.05rem);
  --step-3:  clamp(1.85rem, 1.48rem + 1.85vw, 2.95rem);
  --step-4:  clamp(2.40rem, 1.70rem + 3.50vw, 4.40rem);
  /* Anton ran to 11.5rem because a condensed poster face averages about 0.32em
     per character. Measured, Fraunces comes out at roughly 0.42em — wider, but
     not the 0.55em a Didone would need. This ceiling is set so "Clausewitz"
     fills about 90% of its column at every breakpoint: measured, not guessed. */
  --display: clamp(3.30rem, 1.05rem + 8.00vw, 7.80rem);

  --gutter: clamp(1.15rem, 0.8rem + 1.8vw, 2.75rem);
  --measure: 34rem;
  --page: 84rem;

  /* Distance from a .wrap content edge out to the viewport edge — the amount a
     full-bleed panel has to reach. Must be computed from the page width, not
     from a percentage: inside a grid cell, 100% is the cell, so a percentage
     here silently runs the panel hundreds of pixels off screen. */
  --bleed: calc((100vw - min(100vw, var(--page))) / 2 + var(--gutter));

  --radius: 2px;
  --radius-lg: 4px;

  /* The angle every wedge on the page is cut at. One value so nothing drifts. */
  --shear: 4.2deg;

  color-scheme: light dark;
}

/* --- Dark ----------------------------------------------------------------
   Not an inversion: the navy panels take over the whole page and the paper
   cards become the raised dark surfaces. Teal and gold lift slightly to hold
   their contrast.                                                          */

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0B1626;
    --surface: var(--navy-2);
    --ink:     var(--on-dark);
    --ink-2:   #A9B9CD;
    --ink-3:   #7D8FA6;
    --accent:  var(--teal-lt);
    --accent-2: var(--gold);
    --rule:    color-mix(in srgb, #EAF0F7 15%, transparent);
    --rule-2:  color-mix(in srgb, #EAF0F7 8%, transparent);
    --gold-ink: var(--gold-lt);   /* on a dark ground the bright gold is safe */

    --field-line: rgba(46, 154, 166, 0.20);
    --field-glow: rgba(245, 194, 76, 0.62);
    --tile-line:  rgba(46, 154, 166, 0.12);

    --chrome-bg: rgba(11, 22, 38, 0.86);
  }
}

/* Manual override, so the toggle beats the OS in both directions. */
:root[data-theme="light"] {
  --ground: var(--paper); --surface: var(--white);
  --ink: var(--navy); --ink-2: #46586F; --ink-3: #5B6B82;
  --accent: var(--teal); --accent-2: #8A5D06;
  --gold-ink: #8A5D06;
  --rule: color-mix(in srgb, var(--navy) 14%, transparent);
  --rule-2: color-mix(in srgb, var(--navy) 8%, transparent);
  --field-line: rgba(46, 154, 166, 0.16);
  --field-glow: rgba(232, 163, 23, 0.55);
  --tile-line: rgba(46, 154, 166, 0.10);
  --chrome-bg: rgba(244, 244, 242, 0.86);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #0B1626; --surface: var(--navy-2);
  --ink: var(--on-dark); --ink-2: #A9B9CD; --ink-3: #7D8FA6;
  --accent: var(--teal-lt); --accent-2: var(--gold);
  --gold-ink: var(--gold-lt);
  --rule: color-mix(in srgb, #EAF0F7 15%, transparent);
  --rule-2: color-mix(in srgb, #EAF0F7 8%, transparent);
  --field-line: rgba(46, 154, 166, 0.20);
  --field-glow: rgba(245, 194, 76, 0.62);
  --tile-line: rgba(46, 154, 166, 0.12);
  --chrome-bg: rgba(11, 22, 38, 0.86);
  color-scheme: dark;
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 400ms ease, color 400ms ease;
}

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* --- Typography ---------------------------------------------------------- */

/* Optical sizing does the heavy lifting on all three of these, so the tracking
   below is a correction on top of it rather than a substitute for it. */

.display {
  font-family: var(--display-face);
  font-size: var(--display);
  line-height: 1.0;
  /* Letters read further apart as they grow, so display size wants negative
     tracking. A serif also needs more leading than a condensed grotesque did. */
  letter-spacing: -0.022em;
  font-weight: 600;
  font-optical-sizing: auto;
  text-transform: none;
}

.h1 {
  font-family: var(--display-face);
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -0.016em;
  font-weight: 600;
  font-optical-sizing: auto;
}

/* Sentence case, deliberately. Fraunces keeps its character in the lowercase —
   set in capitals it loses the elegance entirely and just reads heavy, which is
   the exact problem this pass exists to fix. Uppercase survives only on the
   small letterspaced labels below, which stay in the sans. */
.h2 {
  font-family: var(--display-face);
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -0.012em;
  font-weight: 600;
  font-optical-sizing: auto;
}

.h3 {
  font-family: var(--sans);
  font-size: var(--step-1);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 650;
}

.lede { font-size: var(--step-1); line-height: 1.52; color: var(--ink-2); }

.prose { max-width: var(--measure); line-height: 1.68; color: var(--ink-2); }
.prose + .prose { margin-top: 1em; }
.prose strong { color: var(--ink); font-weight: 650; }

/* Letterspaced caps — the register the whole mockup runs its small text in. */
.label {
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.label--teal { color: var(--accent); }

.mono {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.tabular { font-variant-numeric: tabular-nums; }

/* --- Focus --------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: color-mix(in srgb, var(--teal) 30%, transparent); color: var(--ink); }

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

.skip-link {
  position: absolute; top: 0; left: 0;
  padding: 0.75rem 1.25rem;
  background: var(--navy); color: var(--on-dark);
  transform: translateY(-120%);
  z-index: 200;
}
.skip-link:focus { transform: translateY(0); }