/* ============================================================================
   JALOCIN — tokens + base styles
   Nicolaj's personal design system. v3 "Stamped", August 2026.

   Where it came from:
     v1  warm cream ground, rust accent      — read as Claude's palette
     v2  grey board, signal-yellow highlight — the yellow was the office default
     v3  ghost white ground, PETROL STAMP    — the mark inverts

   The change in v3 is not a new colour, it is a new object. The mark used to
   be a light highlight with ink sitting on top of it. Now it is a dark petrol
   block with the words KNOCKED OUT of it — a stamp rather than a highlighter.
   It is heavier, quieter and more permanent: something applied to a page
   rather than something scribbled on one.

   Paste this whole file into the <style> block of any single-file HTML page,
   or @import it. Never redefine a token below it — if a value is missing,
   add it HERE first, then use it.

   The three signatures are structural, not decorative:
     1. The masthead   — 2px ink rule with a solid petrol tab on its left end
     2. The margin column   — asymmetric grid; numbers and notes live left
     3. The source apparatus — every figure carries a marker and a source line

   The colour rules:
     - There is no coloured text. Emphasis is a STAMP: petrol ground, paper
       words. Links are ink with a rule under them, and stamp on hover.
     - The only coloured text in the system is an error (--flag), because an
       error has to be visible before it is read.
     - ONE STAMPED EMPHASIS PER ZONE. The stamp also does structural work —
       the masthead tab, the identity mark, the primary action, the active
       nav item, the key chart series, the marked table row. That is chrome
       and does not count. What counts is emphasis: a stamped phrase or a
       stamped figure. Two of those in one zone fight.

   Other restraints, as binding as the tokens:
     - Six type sizes. Three weights. No others.
     - Radius 0. (One exception: --r-control, 2px, on inputs and buttons.)
     - No shadows. No gradients. No glows. Ever.
   ========================================================================= */

/* The skill's tokens.css @imports the fonts from Google here. This copy does not:
   the faces are self-hosted in fonts.css so no request leaves the page for a third
   party. Keep the rest of this file identical to ~/.claude/skills/jalocin/tokens.css. */

:root {
  /* --- Grounds --------------------------------------------------------
     Ghost white carries the faintest blue-violet cast. You read it as clean
     rather than as a colour, and it is light enough that the stamp lands
     hard on it — 9:1, against 1.41 for the highlighter it replaced. */
  --paper:      #F8F8FF;  /* the ground */
  --sheet:      #FFFFFF;  /* raised surfaces. On a ground this light they
                             separate by RULE, not by tone. */
  --field:      #E1E1E8;  /* the quiet band — the only tonal device left, so it is
                             one notch deeper than it looks like it needs to be:
                             at 1.16 against the paper it was invisible on a slide */
  --white:      #FFFFFF;
  --ink:        #14161C;  /* text, and dark grounds */
  --ink-2:      #2B2D33;  /* the second dark, beside an ink panel */

  /* --- Text on light — all pass AA on paper, sheet AND field ---------- */
  --ink-soft:   #5D5E65;  /* secondary text                6.1:1 on paper */
  --ink-mute:   #606167;  /* captions, sources, furniture  5.8:1 on paper,
                             solved against --field, the darkest light ground */

  /* --- Text on dark ---------------------------------------------------
     --paper-soft is solved against the STAMP, not against ink: petrol is the
     lighter of the two dark grounds, so it is the binding constraint. */
  --paper-ink:  #FAFAFF;  /* 17.4:1 on ink · 9.2:1 on the stamp */
  --paper-soft: #A7BDC6;  /*  9.3:1 on ink · 4.9:1 on the stamp */

  /* --- Rules ----------------------------------------------------------- */
  --rule:       #CACBD2;
  --rule-faint: #E3E4EB;
  --rule-dark:  #383A40;  /* hairline on ink or on the stamp */

  /* --- THE STAMP -------------------------------------------------------
     Petrol. The mark, and the only strong colour in the system. It is a
     GROUND, never a text colour on light — words are knocked out of it in
     --paper-ink. 9:1 against the paper, so it reads at any size, in
     greyscale, and in print. */
  --stamp:      #0E4C5C;
  --stamp-deep: #0B3B48;  /* pressed / hover on a stamp fill */
  --stamp-wash: #E2EAEB;  /* the quiet version — a marked table row */

  /* --- The flag --------------------------------------------------------
     The only coloured text in the system: errors and destructive actions. */
  --flag:       #A31D22;  /* 7.2:1 on paper */
  --flag-deep:  #7F171B;
  --flag-wash:  #F6E8E9;
  --flag-dark:  #FF9C93;  /* on ink AND on the stamp — 9.0:1 / 4.7:1 */

  /* --- Data — charts and status only, ordered by luminance ------------ */
  --pine:       #1F5140;  /* text-safe, 8.6:1 — also "ok"   */
  --pine-wash:  #E9EEEC;
  --olive:      #6B5410;  /* text-safe, 6.9:1 — also "warn" */
  --olive-wash: #F0EEE7;
  --brass:      #A98729;  /* fill only, 3.2:1 */
  --stone:      #888D95;  /* fill only, 3.2:1 */
  --ghost:      #DADBE1;  /* the "everything else" bar — 1.3:1, and only ever
                             legible by its direct label */

  /* --- Semantic --------------------------------------------------------- */
  --ok:        var(--pine);     --ok-wash:   var(--pine-wash);
  --warn:      var(--olive);    --warn-wash: var(--olive-wash);
  --stop:      var(--flag);     --stop-wash: var(--flag-wash);

  /* --- Chart series, in order ------------------------------------------
     The stamp leads, because the key series should be the heaviest thing on
     the chart and petrol is 6.9:1 against a ghost bar — it survives
     greyscale. A seventh series means the chart is saying two things. */
  --series-1: var(--stamp);
  --series-2: var(--ink);
  --series-3: var(--flag);
  --series-4: var(--pine);
  --series-5: var(--olive);
  --series-6: var(--stone);

  /* --- Type ------------------------------------------------------------ */
  --font:        "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-narrow: "Archivo Narrow", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
  --font-read:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-hand:   "Caveat", cursive;

  --t-display: 44px;   --lh-display: 1.04;  --tr-display: -0.021em;
  --t-head:    27px;   --lh-head:    1.18;  --tr-head:    -0.012em;
  --t-sub:     19px;   --lh-sub:     1.32;
  --t-lede:    17px;   --lh-lede:    1.55;
  --t-body:  15.5px;   --lh-body:    1.6;
  --t-note:  12.5px;   --lh-note:    1.45;

  --w-normal: 400;  --w-medium: 500;  --w-bold: 700;

  /* --- Measure ---------------------------------------------------------- */
  --measure:       33em;   /* ~66 characters. Not a suggestion. */
  --measure-wide:  46em;
  --margin-col:    128px;

  /* --- Space (8px base) ------------------------------------------------
     The gap under a heading is always one step smaller than the gap above. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* --- Shape ------------------------------------------------------------ */
  --r: 0;
  --r-control: 2px;

  /* The stamp's edge. A rubber stamp never prints a perfect rectangle, and a
     perfect rectangle is exactly what makes a mark look like a software
     feature. Applied with clip-path so it degrades to a clean rectangle
     wherever clip-path is unsupported — the background colour is unaffected. */
  --stamp-clip: polygon(
    0.6% 7%, 3% 0.5%, 21% 4%, 47% 1%, 73% 5%, 96% 1%, 99.6% 9%,
    99.2% 91%, 96% 99.5%, 75% 96%, 49% 99.5%, 23% 95%, 4% 99%, 0.4% 90%);

  /* --- Elevation -------------------------------------------------------
     No shadows. An overlay lifts by printing offset — a flat ink block
     behind it, like bad registration on a press. Overlays only. */
  --offset: 4px 4px 0 var(--ink);

  /* --- Motion ----------------------------------------------------------- */
  --fast: 90ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- Standard aliases -------------------------------------------------
     Two vocabularies, one set of values. Code that reaches for conventional
     names lands on-brand without knowing the system exists. Never give an
     alias its own value. */
  --color-bg:        var(--paper);
  --color-surface:   var(--sheet);
  --color-muted:     var(--field);
  --color-text:      var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-text-mute: var(--ink-mute);
  --color-border:    var(--rule);
  --color-accent:    var(--stamp);   /* a GROUND. Words go on it in --paper-ink. */
  --color-danger:    var(--flag);
  --color-success:   var(--pine);
  --color-warning:   var(--olive);
  --font-heading:    var(--font);
  --font-body:       var(--font);
  --font-serif:      var(--font-read);
  --radius-md:       var(--r-control);
  --shadow-md:       none;            /* there are no shadows in this system */
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-normal);
  font-variant-numeric: tabular-nums;   /* every figure, everywhere */
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;            /* a long token never widens the page */
}

/* Display sizes step down on small screens. A 44px headline on a phone wraps
   to six lines and stops being a headline. Part of the scale, not a patch. */
@media (max-width: 600px) {
  :root { --t-display: 31px; --t-head: 22px; --t-sub: 17px; --t-lede: 16px; }
}

h1, h2, h3 {
  font-family: var(--font);
  font-weight: var(--w-normal);         /* display sizes stay regular */
  margin: 0 0 var(--s3);
  text-wrap: pretty;
}
h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); max-width: 18ch; }
h2 { font-size: var(--t-head);    line-height: var(--lh-head);    letter-spacing: var(--tr-head);    max-width: 28ch; margin-top: var(--s7); }
h3 { font-size: var(--t-sub);     line-height: var(--lh-sub);     font-weight: var(--w-bold);        margin-top: var(--s5); }

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p.lede { font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--ink-soft); max-width: 40ch; }

.read { font-family: var(--font-read); font-size: 17px; line-height: 1.62; }
.read p { max-width: 34em; }

strong, b { font-weight: var(--w-bold); }

/* ==========================================================================
   THE STAMP — the system's one strong colour
   Petrol ground, words knocked out. Put it on the phrase that matters, not
   the sentence. One stamped EMPHASIS per zone — the structural uses of petrol
   (masthead tab, mark, primary button, active nav item, key bar, marked row)
   are chrome and do not count against that budget.
   ========================================================================== */

mark, .hl {
  background: var(--stamp);
  color: var(--paper-ink);
  padding: 1px 6px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The ragged stamp edge — but ONLY on something that cannot wrap.
   clip-path applies to the whole inline element, not to each line fragment,
   so on a phrase that breaks across two lines it clips the second line away
   completely and the words silently disappear. Found the hard way in
   examples/app.html. Use it on a short phrase you have checked, or on the
   block-level stamps (.stat--key .v, .mk-badge) where it is always safe. */
.hl--edge { display: inline-block; clip-path: var(--stamp-clip); padding: 1px 8px 3px; }
/* The quiet version: a tint, with ink text. For a passage too long to stamp. */
.hl--quiet { background: var(--stamp-wash); color: var(--ink); clip-path: none; padding: 0 4px; }

/* Links are ink with a rule under them, and stamp when you touch them. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
a:hover { background: var(--stamp); color: var(--paper-ink); text-decoration-color: var(--paper-soft); }
.panel a { color: var(--paper-ink); }
.panel a:hover { background: var(--paper-ink); color: var(--ink); }

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

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: var(--s2); }
li::marker { color: var(--ink-mute); }

code, kbd { font-family: var(--font-narrow); font-size: 0.94em; background: var(--field); padding: 1px 5px; overflow-wrap: anywhere; }

/* ==========================================================================
   SIGNATURE 1 — THE MASTHEAD
   A 2px ink rule with a solid petrol tab on its left end, like the colour tab
   on a file. Opens every surface, in every medium.
   ========================================================================== */

.masthead {
  position: relative;
  border-top: 2px solid var(--ink);
  padding-top: var(--s2);
  margin-bottom: var(--s5);
}
.masthead::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 44px; height: 6px;
  background: var(--stamp);
}
.masthead--dark { border-top-color: var(--paper-ink); }
.masthead--dark::before { background: var(--paper-ink); }

/* ==========================================================================
   SIGNATURE 2 — THE MARGIN COLUMN
   ========================================================================== */

.doc {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr);
  gap: 0 var(--s6);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s9);
}
/* min-width: 0 on every cell. Without it a long path, URL or wide table sets
   the track width and pushes the whole page past the viewport. */
.doc > .margin { grid-column: 1;      min-width: 0; }
.doc > .main   { grid-column: 2;      min-width: 0; }
.doc > .full   { grid-column: 1 / -1; min-width: 0; }

.margin {
  font-family: var(--font-narrow);
  font-size: var(--t-note);
  line-height: var(--lh-note);
  color: var(--ink-mute);
}
.margin > * + * { margin-top: var(--s3); }
.margin--h2 { padding-top: var(--s7); }

/* A margin note: the pointed remark. It carries a petrol tick so it reads as
   something a person added, without becoming coloured text. */
.mnote { color: var(--ink-soft); position: relative; padding-left: var(--s3); }
.mnote::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 6px; height: 6px;
  background: var(--stamp);
}

@media (max-width: 720px) {
  .doc { grid-template-columns: minmax(0, 1fr); padding: var(--s5) var(--s4) var(--s8); }
  .doc > .margin, .doc > .main, .doc > .full { grid-column: 1; }
  .margin--h2 { padding-top: 0; }
  .margin {
    display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
    margin-bottom: var(--s3); padding-bottom: var(--s2);
    border-bottom: 1px solid var(--rule-faint);
  }
  .margin > * + * { margin-top: 0; }
}

/* ==========================================================================
   SIGNATURE 3 — THE SOURCE APPARATUS
   No figure ships without a source. If there is no source, the figure does
   not go on the page.
   ========================================================================== */

.src {
  font-family: var(--font-narrow);
  font-size: var(--t-note);
  line-height: var(--lh-note);
  color: var(--ink-mute);
  border-top: 1px solid var(--rule-faint);
  padding-top: var(--s2);
  margin-top: var(--s4);
  max-width: var(--measure-wide);
}
.src p { margin: 0 0 var(--s1); max-width: none; }
.src--dark { color: var(--paper-soft); border-top-color: var(--rule-dark); }

.ref {
  font-family: var(--font-narrow);
  font-size: 0.68em;
  vertical-align: super;
  line-height: 0;
  color: var(--ink);
  margin-left: 1px;
}

/* Confidence tag. Always lowercase — the one break from sentence case, so it
   reads as a stamp. Told apart by its underline, not by coloured text. */
.tag {
  font-family: var(--font-narrow);
  font-size: var(--t-note);
  text-transform: lowercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule);
}
.tag--measured  { border-bottom-color: var(--pine); }
.tag--estimated { border-bottom-color: var(--olive); }
.tag--assumed   { border-bottom-color: var(--flag); color: var(--flag); }

/* The slug line — replaces the uppercase tracked eyebrow. */
.slug {
  font-family: var(--font-narrow);
  font-size: var(--t-note);
  color: var(--ink-mute);
  display: flex; gap: var(--s2); align-items: baseline;
  margin: 0 0 var(--s3);
}
.slug .n { color: var(--ink); }
.slug--dark { color: var(--paper-soft); }
.slug--dark .n { color: var(--paper-ink); }

/* ==========================================================================
   SURFACES
   On a ground this light, .sheet separates by its ink rule rather than by
   tone — the tonal work is done by .field and by the stamp.
   ========================================================================== */

.sheet { background: var(--sheet); border-top: 1px solid var(--ink); padding: var(--s5); }
.panel { background: var(--ink); color: var(--paper-ink); padding: var(--s5); }
.panel h2, .panel h3 { color: var(--paper-ink); }
.band  { background: var(--field); padding: var(--s7) var(--s5); }

.callout {
  border-left: 4px solid var(--stamp);
  padding: var(--s1) 0 var(--s1) var(--s4);
  margin: var(--s5) 0;
  max-width: var(--measure);
}
.callout > :last-child { margin-bottom: 0; }

/* ==========================================================================
   FIGURES AND STATS
   ========================================================================== */

.stat { display: block; }
.stat .v {
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--ink);
  display: block;
}
.stat .v .unit { font-size: 0.44em; letter-spacing: 0; margin-left: 2px; color: var(--ink-soft); }
/* The stamped figure — the one number the surface exists to deliver. */
.stat--key .v {
  background: var(--stamp);
  color: var(--paper-ink);
  display: inline-block;
  padding: 2px 10px 4px;
  clip-path: var(--stamp-clip);
}
.stat--key .v .unit { color: var(--paper-soft); }
.stat .k { display: block; margin-top: var(--s2); max-width: 24ch; }
.stat .k + .tag { display: inline-block; margin-top: var(--s2); }
.panel .stat .v { color: var(--paper-ink); }

figure { margin: var(--s6) 0; max-width: var(--measure-wide); }
figure img, figure svg { display: block; width: 100%; height: auto; }
figcaption {
  font-family: var(--font-narrow);
  font-size: var(--t-note);
  line-height: var(--lh-note);
  color: var(--ink-mute);
  margin-top: var(--s2);
}

/* ==========================================================================
   PHOTOGRAPHY — the grade
   Real photographs of real things, pulled toward the system rather than
   stripped of colour. For anything leaving the browser run
   tools/grade_image.py — CSS filters do not survive a PDF or an email.
   ========================================================================== */

.photo { position: relative; background: var(--sheet); display: block; }
.photo > img { display: block; width: 100%; height: auto; filter: saturate(0.28) contrast(1.06) brightness(1.01); }
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--stamp);
  mix-blend-mode: color;
  opacity: 0.16;   /* keep in step with WASH in tools/grade_image.py */
  pointer-events: none;
}
.photo--colour > img { filter: saturate(0.55) contrast(1.04); }  /* when colour IS the fact */
.photo--colour::after { opacity: 0.07; }

/* ==========================================================================
   THE MARKUP KIT
   For pointing at things inside an image. Ink marks drawn ON TOP of the
   picture, never baked into the pixels.
   ========================================================================== */

.mk { position: relative; display: block; }
.mk > img, .mk > .photo { display: block; width: 100%; }

.mk-frame {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  pointer-events: none;
}
.mk-frame i {
  position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--ink);
}
.mk-frame i:nth-child(1) { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.mk-frame i:nth-child(2) { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.mk-frame i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.mk-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* The numbered badge — a small stamp pinned to a detail. */
.mk-badge {
  position: absolute;
  left: var(--x); top: var(--y);
  min-width: 22px; height: 22px;
  background: var(--stamp);
  color: var(--paper-ink);
  font-family: var(--font-narrow);
  font-size: var(--t-note);
  display: grid; place-items: center;
  padding: 0 5px;
}

/* The paw — Ted's print, used as a pointer instead of an arrow. */
.mk-paw { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; }
.mk-paw svg { display: block; width: 100%; height: 100%; }

/* The caption strip — ink ground on the image. Never a gradient scrim. */
.mk-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ink);
  color: var(--paper-ink);
  font-family: var(--font-narrow);
  font-size: var(--t-note);
  padding: var(--s2) var(--s3);
}

/* ==========================================================================
   CHARTS
   The key series is the STAMP — 6.9:1 against a ghost bar, so it stays the
   key series in greyscale and in print.
   ========================================================================== */

.bar-row { display: grid; grid-template-columns: 11ch 1fr 5ch; gap: var(--s3); align-items: center; margin-bottom: var(--s2); }
.bar-label { font-family: var(--font-narrow); font-size: var(--t-note); color: var(--ink-soft); }
.bar-track { height: 14px; border-bottom: 1px solid var(--rule-faint); }
.bar { height: 14px; background: var(--ghost); }
.bar.is-key { background: var(--stamp); }
.bar-value { font-size: var(--t-note); text-align: right; color: var(--ink); }
.bar-row.is-key .bar-value { font-weight: var(--w-bold); }

/* ==========================================================================
   TABLES
   ========================================================================== */

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th {
  font-family: var(--font-narrow);
  font-weight: var(--w-bold);
  font-size: var(--t-note);
  text-align: left;
  color: var(--ink);
  padding: 0 var(--s3) var(--s2) 0;
  border-bottom: 2px solid var(--ink);
}
.table td { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--rule-faint); vertical-align: top; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.is-key td { background: var(--stamp-wash); }
.table tr.is-key td:first-child { box-shadow: inset 4px 0 0 var(--stamp); }
.table caption { caption-side: top; text-align: left; font-family: var(--font-narrow); font-size: var(--t-note); color: var(--ink-mute); padding-bottom: var(--s2); }
.table-scroll { overflow-x: auto; }

/* Status chip — always carries a word. Never a bare colour. */
.chip {
  display: inline-block;
  font-family: var(--font-narrow);
  font-size: var(--t-note);
  padding: 1px var(--s2);
  background: var(--field);
  color: var(--ink);
  border-bottom: 2px solid var(--rule);
}
.chip--ok   { background: var(--ok-wash);   border-bottom-color: var(--ok); }
.chip--warn { background: var(--warn-wash); border-bottom-color: var(--warn); }
.chip--stop { background: var(--stop-wash); border-bottom-color: var(--stop); color: var(--flag); }

/* ==========================================================================
   CONTROLS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: var(--w-medium);
  line-height: 1;
  padding: 11px var(--s4);
  border: 1px solid var(--ink);
  border-radius: var(--r-control);
  background: var(--sheet);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;   /* a button label that wraps has stopped being a button */
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { background: var(--stamp-wash); }
.btn--primary { background: var(--stamp); color: var(--paper-ink); border-color: var(--stamp); }
.btn--primary:hover { background: var(--stamp-deep); border-color: var(--stamp-deep); color: var(--paper-ink); }
.btn--quiet { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; padding-left: var(--s2); padding-right: var(--s2); }
.btn--danger { color: var(--flag); border-color: var(--flag); }
.btn--danger:hover { background: var(--flag-wash); border-color: var(--flag-deep); color: var(--flag-deep); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn:active { transform: translateY(1px); }

label { display: block; font-size: 13px; font-weight: var(--w-medium); margin-bottom: var(--s1); }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], textarea, select {
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-bottom-color: var(--ink-soft);
  border-radius: var(--r-control);
  padding: 9px var(--s3);
  width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--stamp); outline-offset: 1px; border-color: var(--stamp); }
input::placeholder, textarea::placeholder { color: var(--ink-mute); }
.field-error { font-size: 13px; color: var(--flag); margin-top: var(--s1); }
input[aria-invalid="true"] { border-color: var(--flag); border-bottom-color: var(--flag); }

.overlay-surface { background: var(--sheet); border: 1px solid var(--ink); box-shadow: var(--offset); }

/* ==========================================================================
   THE MARK
   Ted's head in paper-coloured lines inside a petrol square. Square, never
   rounded. The stamp is dark, so the drawing is knocked out of it — the same
   inversion the whole system runs on.
   ========================================================================== */

.mark-sq { display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--stamp); flex: none; }
.mark-sq svg { width: 74%; height: 74%; }
.wordmark { font-size: var(--t-sub); font-weight: var(--w-medium); letter-spacing: -0.015em; }

/* A handwritten note. Only ever beside Ted. */
.hand { font-family: var(--font-hand); font-size: 19px; color: var(--ink); }

/* ==========================================================================
   MOTION AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .btn:active { transform: none; }
}

@page { size: A4; margin: 18mm 16mm 20mm; }

@media print {
  body { background: var(--white); font-size: 10.5pt; }
  .doc { max-width: none; padding: 0; gap: 0 10mm; grid-template-columns: 26mm minmax(0, 1fr); }
  .band { background: transparent; }
  .no-print { display: none !important; }
  h1, h2, h3 { break-after: avoid; }
  figure, table, .callout, .bar-row, .stat, .src { break-inside: avoid; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--font-narrow); font-size: 8pt; color: var(--ink-mute); word-break: break-all; }
  /* The stamp must survive printing — browsers drop backgrounds by default,
     and without this the knocked-out words print white on white. */
  mark, .hl, .hl--quiet, .mark-sq, .masthead::before, .mk-badge, .mk-strip,
  .table tr.is-key td, .stat--key .v, .bar.is-key, .panel, .btn--primary {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}