/* =============================================================================
   cover.css — the book's one visual system, derived from the cover
   (knowledge: book/cover/generate_cover.py) and the print generator.
   The landing (/), /explore and /reference all link it; it is the only
   stylesheet in book/ that declares :root or a colour value.

   Colour: five cover values, plus a text grey and a prose ink. No dark
   theme: paper has none. Two washes are *derived* from the cover values
   (color-mix), not new colours.
   Type:   Special Elite for display (lowercase, as on the cover);
           Source Serif 4 as the reading face for prose;
           Shantell Sans for the subtitle register only: captions, eyebrows,
           the tagline;
           IBM Plex Mono only where a number must be read as data.
   Contrast (WCAG 2.x, computed — scripts/book contrast check in the BK
   report, not eyeballed):
           ink   on ground 16.10, on paper 15.24
           teal  on ground  8.94, on paper  8.46   (ground on teal 8.94)
           muted on ground  5.07, on paper  4.80
           coral on ground  3.67, on paper  3.47 — display (>=24px) and
           non-text marks only; never body-size text.
   ============================================================================= */

/* ---- faces: self-hosted, latin subset, only the weights used ------------ */
@font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/special-elite-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/shantell-sans-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); }

:root {
  /* ---- colour, from the cover ------------------------------------------ */
  --bk-ground:   #FBF7F2;   /* GROUND: the page */
  --bk-paper:    #F5F1E8;   /* PAPER: a figure's field */
  --bk-teal:     #0A4D54;   /* TEAL: the data; display text, rules that matter, the one button */
  --bk-coral:    #E8472A;   /* CORAL: the bubble; one accent per screen; display or marks, never small text */
  --bk-ring:     #B9C0CC;   /* RING: texture, hairlines, disabled, ghost data */
  --bk-muted:    #686A70;   /* MUTED: tagline, captions, secondary text (cover's #6E7076 is 4.39:1 on paper) */
  --bk-ink:      #1E1B15;   /* prose */

  /* derived washes for filled areas behind data; mixes of the above, not new colours */
  --bk-teal-wash:  color-mix(in srgb, var(--bk-teal) 10%, var(--bk-ground));
  --bk-coral-wash: color-mix(in srgb, var(--bk-coral) 12%, var(--bk-ground));

  /* ---- type ------------------------------------------------------------ */
  --bk-display:  'Special Elite', 'Courier New', monospace;
  --bk-serif:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --bk-hand:     'Shantell Sans', 'Comic Sans MS', cursive;
  --bk-mono:     'IBM Plex Mono', ui-monospace, monospace;

  /* six sizes, nothing else */
  --bk-text-xs:   0.8125rem;  /* 13px  data labels, footnotes */
  --bk-text-sm:   0.9375rem;  /* 15px  captions (hand), eyebrows, UI */
  --bk-text-base: 1.125rem;   /* 18px  prose */
  --bk-text-lg:   1.375rem;   /* 22px  h3 display */
  --bk-text-xl:   2rem;       /* 32px  h2 display; h1 under 600px */
  --bk-text-2xl:  3rem;       /* 48px  h1 display */

  --bk-leading:       1.62;
  --bk-leading-tight: 1.15;

  --bk-measure: 64ch;
  --bk-space:   1.5rem;       /* one unit; multiples of it, nothing else */
  --bk-radius:  2px;          /* rectangles; no pills on paper */

  /* ---- motion: the four rules as tokens -------------------------------- */
  --bk-dur:   1100ms;                          /* the one duration a reveal takes: long enough to watch */
  --bk-ease:  cubic-bezier(0.33, 1, 0.68, 1);   /* ease-out: visibly travels, then settles */
}

html { background: var(--bk-ground); color: var(--bk-ink); }
body {
  margin: 0;
  background: var(--bk-ground);
  font-family: var(--bk-serif);
  font-size: var(--bk-text-base);
  line-height: var(--bk-leading);
  -webkit-font-smoothing: antialiased;
}

/* ---- display ------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--bk-display);
  font-weight: normal;
  text-transform: lowercase;      /* as on the cover and in the generator */
  color: var(--bk-teal);
  line-height: var(--bk-leading-tight);
  margin: calc(var(--bk-space) * 2) 0 var(--bk-space);
}
h1 { font-size: var(--bk-text-2xl); }
h2 { font-size: var(--bk-text-xl); }
h3 { font-size: var(--bk-text-lg); }
h1 em, h2 em { font-style: normal; color: var(--bk-coral); }   /* "the data <em>bubble</em>" */
@media (max-width: 600px) { h1 { font-size: var(--bk-text-xl); } }

/* ---- the subtitle register ----------------------------------------------- */
.bk-eyebrow, .bk-tagline, figcaption, .bk-caption {
  font-family: var(--bk-hand);
  font-size: var(--bk-text-sm);
  color: var(--bk-muted);
  letter-spacing: 0.01em;
}
.bk-tagline { font-size: var(--bk-text-base); letter-spacing: 0.055em; }

/* ---- prose --------------------------------------------------------------- */
p, li { max-width: var(--bk-measure); }
p { margin: 0 0 var(--bk-space); }
a { color: var(--bk-teal); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
hr { border: 0; border-top: 1px solid var(--bk-ring); margin: calc(var(--bk-space) * 2) 0; }
:focus-visible { outline: 2px solid var(--bk-coral); outline-offset: 3px; }

/* ---- data ---------------------------------------------------------------- */
.bk-num, .tnum { font-family: var(--bk-mono); font-variant-numeric: tabular-nums; }

/* ---- the one button ------------------------------------------------------ */
.bk-button {
  display: inline-block;
  font-family: var(--bk-display);
  text-transform: lowercase;
  font-size: var(--bk-text-base);
  color: var(--bk-ground);
  background: var(--bk-teal);
  padding: 0.6em 1.4em;
  border: 0; border-radius: var(--bk-radius);
  text-decoration: none;
  cursor: pointer;
}
/* hover darkens the teal toward ink (ground on it >= 8.94:1) and underlines;
   coral is not used: ground on coral is 3.67:1 */
.bk-button:hover { background: color-mix(in srgb, var(--bk-teal) 70%, var(--bk-ink)); text-decoration: underline; text-underline-offset: 0.2em; }
.bk-button:focus-visible { outline: 2px solid var(--bk-coral); outline-offset: 3px; }

/* ---- a figure ------------------------------------------------------------ */
figure.bk-figure {
  margin: calc(var(--bk-space) * 2) 0;
  padding: var(--bk-space);
  background: var(--bk-paper);
  border: 0;
  border-radius: var(--bk-radius);
}
figure.bk-figure svg { display: block; width: 100%; height: auto; }
figure.bk-figure figcaption { margin-top: var(--bk-space); max-width: var(--bk-measure); }
figure.bk-figure .bk-control {           /* at most one per figure */
  margin-top: var(--bk-space);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem;
}
figure.bk-figure .bk-control button {
  font-family: var(--bk-display); text-transform: lowercase; font-size: var(--bk-text-sm);
  color: var(--bk-teal); background: none; border: 1px solid var(--bk-teal); border-radius: var(--bk-radius);
  padding: 0.5em 1em; min-height: 44px; cursor: pointer;
}
figure.bk-figure .bk-control button:hover { text-decoration: underline; text-underline-offset: 0.2em; }
figure.bk-figure .bk-control button[aria-pressed="true"] { background: var(--bk-teal); color: var(--bk-ground); }

/* ---- motion: a reveal is a class, not a timeline ------------------------- */
.bk-reveal          { transition: opacity var(--bk-dur) var(--bk-ease), transform var(--bk-dur) var(--bk-ease); }
.bk-reveal[data-state="before"] { opacity: 0; }
.bk-reveal[data-state="after"]  { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  /* no stepper: every reveal is simply shown in its after state */
  .bk-reveal { transition: none; }
  .bk-reveal[data-state="before"] { opacity: 1; transform: none; }
}

/* ---- things the old site had that this one does not -------------------- */
/* no dark-scheme media query; no ghost buttons, segmented
   pills, badges, section indices, scroll cue or floating figure; no
   box-shadow tokens. */