@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;1,300;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* tokens/fonts.css */
/* Webfonts. Served from Google Fonts — no binaries are vendored in this
   project (see readme.md → FONT SUBSTITUTION NOTE). Spectral and IBM Plex
   are both open-licence, so the CDN reference is the canonical source.
   To self-host, drop woff2 files in assets/fonts/ and replace the @import
   with @font-face rules pointing at them. */


/* tokens/colors.css */
:root {
  /* ── Pine (the dark ground) ─────────────────────────────────── */
  --pine-900: #0A1B12; /* deepest — footer rule ink, scrim base */
  --pine-800: #0E2318; /* base dark. header, hero, perspective, footer */
  --pine-700: #143020; /* band dark. one step up, used for Glimpses */
  --pine-600: #1F4530; /* rules and borders on dark; link ink on light */
  --pine-500: #2C5B40; /* hover fill on dark surfaces */

  /* ── Cream / sage (ink on dark) ─────────────────────────────── */
  --cream-100: #F7F6EE; /* headline cream, brightest */
  --cream-200: #F2F1E6; /* body cream — the default ink on pine */
  --sage-300: #A9B8AC; /* secondary ink on pine */
  --sage-400: #7F8F83; /* tertiary ink on pine (copyright line) */

  /* ── Yellow / olive (the accent pair) ──────────────────────── */
  --yellow-400: #E9BE4A; /* accent on dark only */
  --yellow-500: #D9AC35; /* pressed / hover state of the above */
  --olive-600: #7E6413; /* accent on light only — eyebrows, numerals */
  --olive-700: #6A5410; /* pressed / hover state of the above */
  --yellow-ink: #17210F; /* ink used on a yellow fill */
  --gold-500: #C9A227; /* the mark's centre disc on a light ground */
  --moss-600: #4A5A32; /* the ring around the mark's centre, on dark */

  /* ── Light ground ───────────────────────────────────────────── */
  --paper-100: #FFFFFF; /* white surface band, card face */
  --paper-200: #F3F5F1; /* light ground — the default light band */
  --paper-300: #EAEEE8; /* pressed / hover on light surfaces */
  --linen-200: #FBF4E9; /* warm cream band — origin/closing sections */
  --ink-900: #131A15; /* headline ink on light */
  --ink-600: #454F48; /* body ink on light */
  --ink-400: #7A857D; /* tertiary ink on light — timeline kickers */
  --rule-200: #DCE2DC; /* hairline rule and card border on light */
  --rule-300: #C9D2C9; /* the heavier rule that opens a ruled block on light */

  /* ── Semantic aliases ───────────────────────────────────────── */
  --surface-dark: var(--pine-800);
  --surface-dark-band: var(--pine-700);
  --surface-light: var(--paper-200);
  --surface-card: var(--paper-100);
  --surface-warm: var(--linen-200);

  --text-display: var(--ink-900);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-400);
  --text-display-on-dark: var(--cream-100);
  --text-body-on-dark: var(--cream-200);
  --text-muted-on-dark: var(--sage-300);
  --text-faint-on-dark: var(--sage-400);

  --accent-on-dark: var(--yellow-400);
  --accent-on-light: var(--olive-600);

  --border-rule: var(--rule-200);
  --border-rule-strong: var(--rule-300);
  --border-rule-on-dark: var(--pine-600);
  --border-card: var(--rule-200);

  --link-on-light: var(--pine-600);
  --link-on-light-hover: var(--pine-800);
  --link-on-dark: var(--yellow-400);
  --link-on-dark-hover: var(--cream-100);

  --focus-ring-on-light: var(--olive-600);
  --focus-ring-on-dark: var(--yellow-400);

  /* Photograph overlay — caption protection on image tiles */
  --scrim-photo: linear-gradient(transparent, rgba(8, 20, 13, 0.88)); /* @kind color */
  --scrim-photo-tint: rgba(14, 35, 24, 0.18);
}

/* tokens/typography.css */
:root {
  /* ── Families ───────────────────────────────────────────────── */
  --font-serif: Spectral, "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Semantic */
  --font-display: var(--font-serif); /* every headline and card title */
  --font-body: var(--font-sans); /* every paragraph, list item, link */
  --font-label: var(--font-mono); /* uppercase eyebrows, years, indices */

  /* ── Weights ────────────────────────────────────────────────── */
  --weight-hero: 300; /* hero headline only — Spectral Light */
  --weight-heading: 400; /* section headings */
  --weight-heading-strong: 500; /* card titles, list terms */
  --weight-body: 400;
  --weight-body-strong: 500;
  --weight-label: 400;
  --weight-label-strong: 500;

  /* ── Sizes (literal values from the source design) ──────────── */
  --size-hero: 58px;
  --size-page-title: 44px; /* interior page headers */
  --size-section: 35px;
  --size-card-title: 21px;
  --size-list-term: 20px;
  --size-subhead: 19px;
  --size-discipline: 18px;
  --size-lede: 17px;
  --size-body: 16.5px;
  --size-body-sm: 15.5px;
  --size-body-xs: 15px;
  --size-nav: 13.5px;
  --size-meta: 12.5px;
  --size-caption: 12px;
  --size-label: 10.5px; /* the canonical mono eyebrow */
  --size-label-sm: 9.5px; /* role-strip and footer labels */
  --size-year: 12px;

  /* ── Line heights ───────────────────────────────────────────── */
  --leading-hero: 1.06;
  --leading-display: 1.18;
  --leading-title: 1.3;
  --leading-discipline: 1.44;
  --leading-prose: 1.62;
  --leading-tight: 1.4;

  /* ── Tracking ───────────────────────────────────────────────── */
  --tracking-hero: -0.012em;
  --tracking-label: 0.18em; /* the signature mono eyebrow tracking */
  --tracking-label-sm: 0.16em;
  --tracking-label-tight: 0.15em;
  --tracking-year: 0.09em;

  /* ── Measure ────────────────────────────────────────────────── */
  --measure-hero: 17ch;
  --measure-heading: 26ch;
  --measure-prose: 68ch;
  --measure-prose-narrow: 56ch;
  --measure-list: 46ch;
}

/* tokens/spacing.css */
:root {
  /* Layout frame */
  --container-max: 1160px;
  --gutter: 40px;
  --gutter-mobile: 22px;
  --header-height: 70px;

  /* Section rhythm — the source uses one section padding everywhere */
  --section-pad: 62px;
  --section-pad-mobile: 44px;
  --hero-pad-top: 74px;
  --page-header-pad: 56px;

  /* Step scale, used inside sections */
  --space-1: 3px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 18px;
  --space-7: 22px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 38px;
  --space-11: 56px;

  /* Grid gaps */
  --gap-card: 20px;
  --gap-card-tight: 18px;
  --gap-photo: 12px;
  --gap-column: 52px;
  --gap-hero: 60px;
  --gap-timeline: 62px;

  /* Timeline rail geometry (literal from source) */
  --rail-label-width: 150px;
  --rail-line-offset: 172px;
  --rail-dot-offset: 167px;
  --rail-dot-size: 11px;
}

/* tokens/radii.css */
:root {
  --radius-card: 3px; /* cards, photo tiles, image frames */
  --radius-button: 2px; /* buttons — deliberately tighter than cards */
  --radius-tag: 16px; /* subject tags — the only round shape */
  --radius-dot: 50%; /* timeline dots, logo centre */
  --border-hairline: 1px;
  --accent-tick: 2px; /* the yellow/olive corner tick under images */
  --accent-tick-length: 56px;
}

/* tokens/elevation.css */
:root {
  /* One card shadow, used everywhere. A tight contact shadow plus a long,
     heavily-negative-spread diffuse shadow — the card appears to sit on
     paper rather than float above it. */
  --shadow-card: 0 1px 2px rgba(19, 26, 21, 0.05),
    0 16px 36px -26px rgba(19, 26, 21, 0.45);
  /* Hover: the diffuse layer deepens and travels slightly further. */
  --shadow-card-hover: 0 1px 2px rgba(19, 26, 21, 0.06),
    0 22px 44px -26px rgba(19, 26, 21, 0.55);
  /* Cards sitting on the dark ground get no shadow — a rule instead. */
  --shadow-none: none;
}

/* tokens/motion.css */
:root {
  /* Motion is minimal by design: colour and border transitions only.
     No entrance animations, no parallax, no scroll reveals, no bounce. */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
  --transition-ink: color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
  --transition-surface: background-color var(--duration-fast)
      var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

/* tokens/base.css */
/* Minimal element defaults. Components carry their own styling; this file
   only sets what the UA would otherwise get wrong. */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-prose);
  color: var(--text-body);
  background: var(--surface-light);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--link-on-light);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: var(--transition-ink);
}
a:hover {
  color: var(--link-on-light-hover);
}
:where([data-ground="dark"]) a {
  color: var(--link-on-dark);
}
:where([data-ground="dark"]) a:hover {
  color: var(--link-on-dark-hover);
}
:focus-visible {
  outline: 2px solid var(--focus-ring-on-light);
  outline-offset: 2px;
}
:where([data-ground="dark"]) :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  color: var(--text-display);
  margin: 0;
}
p {
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: var(--yellow-400);
  color: var(--yellow-ink);
}

/* Static-site additions: link colours (the design system defines none) and
   the reflow rules the fixed 1160px grid needs on a phone. */
a { color: var(--accent-on-light); }
a:hover { color: var(--pine-800); }
[data-ground="dark"] a { color: var(--accent-on-dark); }
[data-ground="dark"] a:hover { color: var(--cream-100); }
img, video { max-width: 100%; }
@media (max-width: 860px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="text-align: right"] { text-align: left !important; }
  [style*="position: sticky"] { position: static !important; }
  h1 { font-size: 34px !important; }
  h2 { font-size: 25px !important; }
}

/* base.css gives every link a hairline underline, which is right for prose
   links and wrong for navigation. Nav, footer and button links opt out. */
nav a, [data-ground="dark"] a[style*="padding:3px 0"], a[style*="inline-flex"], a[style*="text-decoration:none"] { border-bottom: 0; }
nav a[style*="var(--accent-on-dark)"] { border-bottom-width: 1px; }

/* --- fixes --------------------------------------------------------------- */

/* The logo mark is an oversized video cropped by a 27px wrapper. The global
   `img, video { max-width: 100% }` above shrank it to the wrapper width, which
   pushed the mark outside the crop and made the logo look empty. */
video[src*="logo-animation"]{ max-width:none; }

/* The role line carries a hard-coded 563px width from the design canvas, which
   forced the whole page to scroll sideways on a phone. */
@media (max-width: 860px){
  div[style*="width: 563px"]{ width:auto !important; height:auto !important; }
}