/* Hallmark · genre: editorial · macrostructure: 15 Split Studio · theme: Studio · enrichment: E5 (Tier B) + E8 (landing, below fold) · nav: N6 (issue line sticks) · footer: Ft1 · pre-emit critique: P4 H4 E4 S4 R4 V4 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · previous build on this domain: dark #070b16 paper / Inter / purple #7c5cff + teal #23d5ab / sticky pill nav / inline footer · owner override: pointer lean on the hero figure only, translate ≤ 10 px, rotate ≤ 1°, one rAF loop, fine-pointer + reduced-motion + 60 rem gated (motion.md bans layered mouse parallax; this is a documented owner request) */

/* Single theme: light paper only. No dark counterpart by decision. resume.html and 404.html keep the legacy styles.css. */

/* ---- Self-hosted faces (build A). Delete these three blocks in build B. ---- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-400-600.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/geist-mono-400-500.woff2") format("woff2");
}

/* ---- Fallback faces with metric overrides (both builds). Tune the four numbers against the real files once loaded. ---- */
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Iowan Old Style"), local("Palatino Linotype"), local("Georgia");
  size-adjust: 92%;
  ascent-override: 88%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 100.5%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Cascadia Mono"), local("SF Mono"), local("Menlo");
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* ---- Paper and ink (hue 90, warm; chroma 0.010–0.014, never zero) ---- */
  --color-paper:        oklch(96.5% 0.010 90);
  --color-paper-2:      oklch(93.5% 0.012 90);   /* bands: Who this is for, final CTA; figure plate fills */
  --color-paper-3:      oklch(90%   0.014 90);   /* pressed state, disabled fill, portrait placeholder */
  --color-ink:          oklch(19%   0.012 90);   /* headings, masthead, rules */
  --color-ink-2:        oklch(26%   0.012 90);   /* body copy */
  --color-ink-mute:     oklch(44%   0.012 90);   /* captions, colophon, ledger labels: ~7:1 on paper */
  --color-line:         oklch(80%   0.012 90);   /* hairlines */
  --color-line-2:       oklch(86%   0.010 90);   /* inner table rules, figure connectors */
  --color-line-strong:  oklch(58%   0.012 90);   /* input borders: ≥ 3:1 on paper */

  /* ---- One accent: forest green ---- */
  --color-accent:       oklch(44% 0.120 150);    /* CTA fill, link underline, active masthead link, one square per page, one mark per figure */
  --color-accent-ink:   var(--color-paper);      /* accent L < 50 → paper text on accent fills (~7:1) */
  --color-accent-hover: oklch(39% 0.125 150);
  --color-focus:        oklch(50% 0.190 150);

  /* ---- Type ---- */
  --font-display: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Geist", "Geist Fallback", "Segoe UI", ui-sans-serif, sans-serif;
  --font-mono:    "Geist Mono", "Geist Mono Fallback", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;

  --weight-display: 400;
  --weight-body:    400;
  --weight-strong:  500;
  --weight-button:  600;

  --text-xs:   0.8rem;      /* 12.8 px: colophon, figure captions, ledger labels */
  --text-sm:   0.875rem;    /* 14 px: mono lines, spec cells, masthead issue line */
  --text-base: 1.0625rem;   /* 17 px: body */
  --text-md:   1.25rem;     /* 20 px: lede, row problems */
  --text-lg:   1.5625rem;   /* 25 px: h3, row titles, footer wordmark */
  --text-xl:   1.9531rem;   /* 31 px: h2 < 40 rem, masthead wordmark < 40 rem */
  --text-2xl:  2.4414rem;   /* 39 px: h2, masthead wordmark, final CTA head */
  --text-display-s: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);   /* h1, cap 84 px */

  --leading-display: 1.0;
  --leading-tight:   1.15;
  --leading-body:    1.6;
  --tracking-display: -0.02em;
  --tracking-label:   0.10em;
  --measure:          65ch;

  /* ---- Space: 4 pt scale, named by role ---- */
  --space-3xs: 0.125rem;  /*   2 */
  --space-2xs: 0.25rem;   /*   4 */
  --space-xs:  0.5rem;    /*   8 */
  --space-sm:  0.75rem;   /*  12 */
  --space-md:  1rem;      /*  16 */
  --space-lg:  1.5rem;    /*  24 */
  --space-xl:  2.5rem;    /*  40 */
  --space-2xl: 4rem;      /*  64 */
  --space-3xl: 6rem;      /*  96 */
  --space-4xl: 9rem;      /* 144 */

  --container-max: 76rem;
  --container-pad: clamp(1rem, 4vw, 4rem);

  /* ---- Rules and radii (editorial: square) ---- */
  --rule-hair:   1px;
  --rule-heavy:  3px;
  --rule-gap:    3px;
  --radius-none: 0;
  --radius-xs:   2px;     /* buttons, inputs */
  --radius-sm:   4px;     /* figure plates */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---- Pointer lean (owner-requested; read by site.js via getComputedStyle) ---- */
  --tilt-max-px:  10;     /* translate ceiling of the depth-1 layer, px (hard cap 12) */
  --tilt-max-deg: 1;      /* rotate ceiling, applied only to [data-rotate] layers, degrees (hard cap 7) */
  --tilt-lerp:    0.08;   /* per-frame ease toward target */

  /* ---- Depth: one shadow, hairline only ---- */
  --shadow-hairline: 0 0 0 1px oklch(30% 0.010 90 / 0.06);

  /* ---- Layout ---- */
  --masthead-bar-height: 3.25rem;   /* the sticky issue line incl. double rule */
  --banner-height: 0px;

  /* ---- Z scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---- Sizing ---- */
  --hit: 44px;

  /* ---- Figure labels (SVG user units, viewBox 640 wide) ---- */
  --figure-label: 12px;
  --figure-col:   11px;
}

@media (pointer: coarse) {
  :root { --hit: 48px; --masthead-bar-height: 3.5rem; }
}

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}
h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); line-height: var(--leading-tight); }
@media (min-width: 40rem) { h2 { font-size: var(--text-2xl); } }

.ledger, .spec__tools, .figure__caption, .masthead__line, .colophon { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-mute); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-property: none !important;
  }
  .btn { transition-property: background-color !important; transition-duration: 150ms !important; }
  [data-enter] { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { from { opacity: 0; } to { opacity: 1; transform: none; } }
  [data-tilt] [data-depth] { transform: none !important; will-change: auto !important; }
}