/* ==========================================================================
   Espruve — shared stylesheet
   One column of set text. Engineering letterhead, not a landing page.

   Each HTML file overrides the font tokens (--font-*, and the small set of
   typographic knobs below) in a <style> block in its own <head>.
   ========================================================================== */

:root {
  /* ---- Brand color system (teal → sand → rust) — active tokens ---------- */
  --paper:      #FAF6EA; /* page ground: E9D8A6 lightened to warm paper */
  --ink:        #001219; /* teal-black ink — body text and headings */
  --accent:     #BB3E03; /* rust — links, wordmark accent, rules (AA on paper) */
  --accent-hot: #CA6702; /* hover/active only — never resting body-size text */
  --tech:       #005F73; /* deep teal — the monospace / machine voice */

  /* ---- Documented brand reserve — defined, deliberately unused ----------
     (--sand may be used sparingly as a surface tint; nothing else ships.) */
  --sand:     #E9D8A6;
  --amber:    #EE9B00;
  --mint:     #94D2BD;
  --teal-mid: #0A9396;
  --rufous:   #AE2012;
  --auburn:   #9B2226;

  /* ---- Derived neutrals (ink mixed over paper; precomputed) ------------- */
  --ink-muted: #374447; /* ~78% ink on paper — sublines, legal, asides */
  --rule:      #CDCDC4; /* ~18% ink on paper — hairline rules */

  /* ---- Typographic tokens: defaults; every page overrides these --------- */
  --font-display: Georgia, "Times New Roman", serif;
  --font-text:    Georgia, "Times New Roman", serif;
  --font-mono:    Menlo, Consolas, monospace;
  /* --font-mark: optional sans for the wordmark only; when a page does not
     define it, the wordmark falls back to --font-display. */
  /* --display-variation: optional font-variation-settings applied to the h1
     only (e.g. Fraunces' wonk axis at display sizes); defaults to normal. */

  --text-size: 1.0625rem;
  --leading:   1.65;

  --display-weight:   600;
  --display-tracking: 0;
  --h1-max:           2.25rem;

  --h2-size:      1.1875rem;
  --h2-weight:    600;
  --h2-tracking:  0;
  --h2-transform: none;

  --subline-style: normal;

  --wordmark-size:      1.375rem;
  --wordmark-weight:    600;
  --wordmark-tracking:  0;
  --wordmark-transform: none;
}

/* ---- Ground ------------------------------------------------------------- */

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

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

body {
  margin: 0 auto;
  max-width: 42rem;
  padding: clamp(2.5rem, 7vh, 4.25rem) clamp(1.375rem, 5vw, 2rem) clamp(3rem, 8vh, 5rem);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-size);
  font-weight: 400;
  line-height: var(--leading);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--sand); /* the one sanctioned reserve use: a surface tint */
  color: var(--ink);
}

/* ---- Masthead ----------------------------------------------------------- */

.masthead {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2.75rem, 8vh, 4.25rem);
}

.wordmark {
  margin: 0;
  font-family: var(--font-mark, var(--font-display));
  font-size: var(--wordmark-size);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-tracking);
  text-transform: var(--wordmark-transform);
  line-height: 1;
}

.wordmark-initial { color: var(--accent); }

/* ---- The fold ----------------------------------------------------------- */

h1 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.625rem, 1.05rem + 2.4vw, var(--h1-max));
  line-height: 1.18;
  font-variation-settings: var(--display-variation, normal);
}

.subline {
  margin: 0;
  color: var(--ink-muted);
  font-style: var(--subline-style);
}

/* ---- Sections ----------------------------------------------------------- */

main > section + section { margin-top: clamp(2.75rem, 6vh, 3.75rem); }

h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  text-transform: var(--h2-transform);
  line-height: 1.3;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

/* Who it's for: one rust hairline of quiet weight. */
.whofor {
  margin-top: 1.5rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
}

/* ---- Links -------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: #DDA382; /* accent at ~45% over paper */
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
  color: var(--accent-hot);
  text-decoration-color: var(--accent-hot);
}

a:focus-visible {
  outline: 2px solid var(--tech);
  outline-offset: 2px;
}

/* The machine voice: monospace set in deep teal. */
code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.93em;
  color: var(--tech);
}

a.tech {
  font-family: var(--font-mono);
  font-size: 0.93em;
  color: var(--tech);
  text-decoration-color: #8AB2B4; /* tech at ~45% over paper */
  text-decoration-color: color-mix(in srgb, var(--tech) 45%, transparent);
}

a.tech:hover {
  color: var(--tech);
  text-decoration-color: var(--tech);
}

/* ---- Public work -------------------------------------------------------- */

.worklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.worklist li + li { margin-top: 0.8rem; }

cite { font-style: italic; }

/* ---- Report specimen (typography-variant pages only) --------------------
   A decision aid: an excerpt-styled finding showing how notation renders.
   Not used by index.html. */

.specimen-caption {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

h2.finding {
  font-size: calc(var(--h2-size) * 0.88);
  line-height: 1.4;
}

.severity {
  display: inline-block;
  font-family: var(--font-mark, var(--font-display));
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--amber); /* sanctioned reserve use: severity labels */
  padding: 0.18em 0.5em 0.14em;
  border-radius: 3px;
  vertical-align: 0.18em;
}

/* Mathematical variables and functions: italic serif, journal convention. */
var {
  font-family: inherit;
  font-style: italic;
}

.display-math {
  margin: 1.5rem 0;
  text-align: center;
  font-size: 1.08em;
  line-height: 1.7;
}

.display-math sub {
  font-size: 0.68em;
  line-height: 1;
}

/* Keep logical groups intact so display lines break at connectives. */
.display-math .nb { white-space: nowrap; }

/* ---- Principal ---------------------------------------------------------- */

.aside {
  margin-top: 0.4rem;
  font-size: 0.88em;
  color: var(--ink-muted);
}

/* ---- Closing ------------------------------------------------------------ */

.closing {
  margin-top: clamp(3.25rem, 7vh, 4.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.contact {
  margin: 0.2rem 0 1.6rem;
  font-size: 1.05em;
}

.legal {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* ---- Print -------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  a { color: inherit; text-decoration-color: inherit; }
  a.tech, code, .mono { color: #000; }
}
