/* Tokens and base only. See docs/DESIGN.md before adding to this file.

   A theme is the role tokens below and nothing else. Light is paper, dark is
   graphite; each is set by hand, neither is the other inverted. Components
   use roles (--page, --text, --rule ...), never a core colour that a theme
   changes. Small coral type on paper is --accent (coral deep); coral itself
   is for fills and marks. */

@font-face { font-family: Plex; src: url("/assets/ibm-plex-sans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url("/assets/ibm-plex-sans-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: PlexMono; src: url("/assets/ibm-plex-mono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Matched fallbacks, the house values, so nothing jumps when Plex lands. */
@font-face { font-family: PlexFallback; src: local("Arial"); font-weight: 400; size-adjust: 99.5073%; ascent-override: 103.0075%; descent-override: 27.6362%; line-gap-override: 0%; }
@font-face { font-family: PlexFallback; src: local("Arial Bold"); font-weight: 600; size-adjust: 100.6644%; ascent-override: 101.8235%; descent-override: 27.3185%; line-gap-override: 0%; }
@font-face { font-family: PlexLinux; src: local("Liberation Sans"); font-weight: 400; size-adjust: 97.668%; ascent-override: 104.9473%; descent-override: 28.1566%; line-gap-override: 0%; }
@font-face { font-family: PlexLinux; src: local("Liberation Sans Bold"); font-weight: 600; size-adjust: 98.8037%; ascent-override: 103.7411%; descent-override: 27.833%; line-gap-override: 0%; }
@font-face { font-family: PlexMonoFallback; src: local("Courier New"); size-adjust: 99.9837%; ascent-override: 102.5167%; descent-override: 27.5045%; line-gap-override: 0%; }
@font-face { font-family: PlexMonoLinux; src: local("DejaVu Sans Mono"); size-adjust: 99.6594%; ascent-override: 102.8503%; descent-override: 27.594%; line-gap-override: 0%; }

:root {
  /* The house palette, exactly. */
  --paper: #f4f2ed;
  --stone: #e6e3dc;
  --ink: #1b1d1e;
  --graphite: #17191b;
  --coral: #ee6845;
  /* Coral's legible twins: deep for small type on paper, light on graphite. */
  --coral-deep: #a03920;
  --coral-light: #ff9475;

  /* Roles: light. */
  --page: var(--paper);
  --band: var(--stone);
  --text: var(--ink);
  --text-2: #555954;
  --rule: #babbb3;
  --rule-strong: var(--ink);
  --accent: var(--coral-deep);
  --mark: var(--coral);
  --focus: var(--coral-deep);
  /* The second voice: readable, never as dark as the person's own words. */
  --pencil: #62655f;
  /* The lines a map is drawn with: quieter than ink, 3:1 against the page. */
  --wire: #7f817a;
  --field: #faf9f6;
  --hover: rgba(27, 29, 30, .045);
  /* The map's own surface: a step below paper, ruled in squares. */
  --map: #ebe8e1;
  --grid: rgba(27, 29, 30, .055);
  --grid-major: rgba(27, 29, 30, .1);

  --sans: Plex, PlexFallback, PlexLinux, Arial, sans-serif;
  --mono: PlexMono, PlexMonoFallback, PlexMonoLinux, ui-monospace, monospace;
  --gutter: clamp(16px, 3.4vw, 56px);

  /* Motion: one system (docs/DESIGN.md, "Motion"). Four durations, three
     easings, used everywhere; the script reads the same values. Movement is
     transform and opacity only. */
  --instant: 90ms;   /* a press, a hover, a colour that answers */
  --quick: 160ms;    /* leaving, small arrivals, wires */
  --settle: 260ms;   /* a card finding its place, a panel arriving */
  --slow: 420ms;     /* the report building, the theme turning */
  --enter: cubic-bezier(.16, 1, .3, 1);   /* arrives fast, settles slowly */
  --exit: cubic-bezier(.5, 0, .75, 0);    /* leaves without lingering */
  --move: cubic-bezier(.65, 0, .35, 1);   /* from one place to another */

  font-family: var(--sans);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  background: var(--page);
  color: var(--text);
  color-scheme: light;
}

/* Roles: dark. Graphite is the page; stone becomes a step lighter, not paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: var(--graphite);
    --band: #24272a;
    --text: var(--paper);
    --text-2: #bcbbb3;
    --rule: #4c4f52;
    --rule-strong: rgba(244, 242, 237, .62);
    --accent: var(--coral-light);
    --mark: var(--coral);
    --focus: var(--coral);
    --pencil: #a9a8a0;
    --wire: #6f7275;
    --field: #101214;
    --hover: rgba(244, 242, 237, .05);
    --map: #111315;
    --grid: rgba(244, 242, 237, .04);
    --grid-major: rgba(244, 242, 237, .08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: var(--graphite);
  --band: #24272a;
  --text: var(--paper);
  --text-2: #bcbbb3;
  --rule: #4c4f52;
  --rule-strong: rgba(244, 242, 237, .62);
  --accent: var(--coral-light);
  --mark: var(--coral);
  --focus: var(--coral);
  --pencil: #a9a8a0;
  --wire: #6f7275;
  --field: #101214;
  --hover: rgba(244, 242, 237, .05);
  --map: #111315;
  --grid: rgba(244, 242, 237, .04);
  --grid-major: rgba(244, 242, 237, .08);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; font-size: 16px; line-height: 1.55; background: var(--page); color: var(--text); }
h1, h2, h3, p, ol, ul, figure, fieldset, blockquote { margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: 600; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
b, strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
::selection { background: var(--text); color: var(--page); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
kbd { font: 400 11px/1 var(--mono); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--gutter); top: -60px; z-index: 40; background: var(--text); color: var(--page); padding: 8px 12px; font-size: 13px; }
.skip-link:focus { top: 8px; }

/* Reduced motion: nothing moves; things may still fade, briefly, so a change
   is seen. The script keeps to the same rule (see `motion` in punctum.js). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity !important; transition-duration: var(--quick) !important; animation: none !important; }
}

/* Page to page: the masthead and the page colour hold still; what is new on
   the page fades in beneath them. (Cross-document view transitions were tried
   again and still abort on arrival at the map; see D26.) */
main { animation: page-in var(--settle) var(--enter); }
@keyframes page-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* The scaffold's placeholder page. */
.wrap { max-width: 1320px; margin: auto; padding: 96px 48px; }
.eyebrow, .status { font: 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.eyebrow { border-block: 1px solid var(--rule); padding: 12px 0; margin: 0 0 72px; }
.wrap h1 { font-size: clamp(40px, 7vw, 88px); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; margin: 0 0 24px; }
.lede { max-width: 34em; font-size: 20px; margin: 0 0 72px; }
@media (max-width: 640px) { .wrap { padding: 48px 16px; } }
/* Switching the theme: the whole page crossfades at once, masthead included. */
.is-theming::view-transition-old(root) { animation: var(--slow) var(--move) both fade-out; }
.is-theming::view-transition-new(root) { animation: none; }