/* ===================================================================
   Fine-Notebook Design System
   A shared stylesheet for reports rendered as pages from a quality
   notebook — warm paper, faint dot-grid, deep fountain-pen inks.
   Light + warm-dark variants. Link this one file from every report.

   Design system version: ds-1
   Changelog:
     ds-1 — initial fine-notebook design system (ic4lg).
   =================================================================== */

/* --- Web fonts -----------------------------------------------------
   Spectral  — editorial serif with penned warmth (display, headings)
   Inter     — clean, highly readable face (body)
   JetBrains Mono — monospace (code)
   Caveat    — handwriting; marginalia ONLY, never body
   The @import keeps the stylesheet self-contained; HTML files may also
   add a <link rel="preconnect"> for faster first paint.            */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@500;600&display=swap');

/* ===================================================================
   1. TOKENS — light "cream notebook"
   Two registers are kept strictly apart:
     · "stationery"  — faint, structural, no per-instance meaning
                       (dot-grid, margin rule, hairline dividers)
     · "ink"         — saturated, semantic (the four pen colours)
   =================================================================== */
:root {
  /* paper — warm, soft, never pure white */
  --paper:          #f4ede0;   /* base cream */
  --paper-deep:     #ece2d0;   /* recessed panels, code wells */
  --paper-raised:   #fbf6ec;   /* pasted-note / card surface     */

  /* body ink — warm soft-black, 11.3:1 on paper (never #000) */
  --ink-body:       #33302b;
  --ink-soft:       #5b554c;   /* secondary text, captions       */
  --ink-faint:      #8a8275;   /* timestamps, the very quiet bits */

  /* --- THE FOUR FOUNTAIN-PEN INKS — each carries a fixed meaning ---
     all clear WCAG AA 4.5:1 as text on --paper                    */
  --ink-red:        #8e2f2a;   /* caution / risk / decided-against — 6.96:1 */
  --ink-blue:       #1f4a6d;   /* note / context / reference       — 7.99:1 */
  --ink-orange:     #9a4a1c;   /* open question / decision point   — 5.35:1 */
  --ink-green:      #2f6149;   /* affirmed / chosen                — 6.16:1 */

  /* tinted "pasted note" fills — the faint stationery register of
     each ink. Meaningful by hue, faint by saturation.             */
  --tint-red:       #efdcd6;
  --tint-blue:      #dde6ed;
  --tint-orange:    #f0e0cf;
  --tint-green:     #dce8df;

  /* stationery lines — faint, structural */
  --rule-hair:      #d8cdb8;   /* hairline dividers                */
  --rule-margin:    #d39b8f;   /* the red margin rule (faint ink)  */
  --dot-grid:       #d7cbb4;   /* Leuchtturm dot-grid              */

  /* paper-tooth noise opacity (kept very faint) */
  --tooth-opacity:  0.045;

  /* --- spacing scale — a small, regular set (1 unit = 0.25rem) --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* layout metrics */
  --margin-col:     15rem;     /* notebook margin column width     */
  --page-max:       72rem;     /* a wide page — uses screen width  */
  --radius:         3px;       /* slim, paper-edge corners         */
  --hair:           1px;

  /* type families */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-hand:    'Caveat', 'Segoe Script', cursive;

  --shadow-card:  0 1px 2px rgba(54,46,33,0.10), 0 6px 16px -10px rgba(54,46,33,0.22);
}

/* ===================================================================
   2. TOKENS — warm dark "charcoal / leather notebook"
   Warm dark, never cool black. Inks lighten but keep their meaning;
   all four still clear AA on the charcoal paper.
   =================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #26211c;
    --paper-deep:   #1f1b16;
    --paper-raised: #302a23;

    --ink-body:     #e6ddcd;   /* 11.8:1 on charcoal */
    --ink-soft:     #b3a991;
    --ink-faint:    #857c69;

    --ink-red:      #e08d83;   /* 6.31:1 */
    --ink-blue:     #86b6d6;   /* 7.35:1 */
    --ink-orange:   #dba06a;   /* 7.02:1 */
    --ink-green:    #7fc0a0;   /* 7.56:1 */

    --tint-red:     #3b2925;
    --tint-blue:    #243440;
    --tint-orange:  #3b2f20;
    --tint-green:   #233a30;

    --rule-hair:    #3f382e;
    --rule-margin:  #7d4a42;
    --dot-grid:     #3a342b;

    --tooth-opacity: 0.06;

    --shadow-card:  0 1px 2px rgba(0,0,0,0.4), 0 8px 20px -12px rgba(0,0,0,0.6);
  }
}

/* ===================================================================
   3. PAPER — texture, dot-grid, the page
   The background is layered:
     · turbulence-noise SVG (paper "tooth")  — fixed, very faint
     · dot-grid (radial-gradient)            — the printed stationery
     · flat paper colour                     — the base
   =================================================================== */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-body);
  background-color: var(--paper);
  /* dot-grid — 22px Leuchtturm pitch, faint */
  background-image:
    radial-gradient(var(--dot-grid) 1.05px, transparent 1.15px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper tooth — a fixed, full-viewport turbulence layer behind content.
   Inline-SVG data URI: self-contained, cheap, resolution-independent.
   Opacity is deliberately tiny so body text never loses contrast.   */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--tooth-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23t)'/></svg>");
}
@media (prefers-color-scheme: dark) {
  /* invert the tooth so the grain reads on dark paper too */
  body::before { filter: invert(1); }
}

/* ===================================================================
   4. PAGE LAYOUT — a wide notebook page
   Two columns: a real margin column (kickers, marginalia) on the left
   with a margin rule, and a wide main column that uses screen width.
   =================================================================== */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-8) var(--sp-12);
}

.sheet {
  display: grid;
  grid-template-columns: var(--margin-col) 1fr;
  column-gap: var(--sp-8);
  position: relative;
}

/* the margin rule — a faint pen line down the page, the way a college
   block is pre-ruled. Sits on the boundary of margin + main column.  */
.sheet::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: calc(var(--margin-col) + var(--sp-8) / 2);
  width: 1.5px;
  background: var(--rule-margin);
  opacity: 0.65;
}

/* the margin column — quiet, right-aligned, where kickers + notes live */
.margin {
  grid-column: 1;
  text-align: right;
  padding-top: 0.2rem;
}
.main {
  grid-column: 2;
  min-width: 0;        /* let code blocks shrink instead of overflow */
}

/* a margin block pairs with a main-column section: same grid row */
.row {
  display: grid;
  grid-template-columns: var(--margin-col) 1fr;
  column-gap: var(--sp-8);
  align-items: start;
  margin-bottom: var(--sp-12);
}
.row > .margin { grid-column: 1; }
.row > .body   { grid-column: 2; min-width: 0; }

/* on narrow screens the notebook folds to a single column; the margin
   content reflows above its section and the rule retreats.           */
@media (max-width: 860px) {
  .page { padding: var(--sp-8) var(--sp-4) var(--sp-8); }
  .sheet, .row { grid-template-columns: 1fr; }
  .sheet::before { display: none; }
  .margin {
    text-align: left;
    border-left: 2px solid var(--rule-margin);
    padding-left: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .main, .row > .body { grid-column: 1; }
}

/* ===================================================================
   5. TYPOGRAPHY
   =================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-body);
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 var(--sp-3);
}

.masthead-title {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  margin-bottom: var(--sp-2);
}
.masthead-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0;
}

h2 { font-size: 1.72rem; letter-spacing: -0.006em; }
h3 { font-size: 1.26rem; }
h4 { font-size: 1.04rem; font-weight: 600; }

p { margin: 0 0 var(--sp-4); }
a { color: var(--ink-blue); text-decoration-thickness: 1px;
    text-underline-offset: 2px; }

/* section kicker — small caps label, lives in the margin column */
.kicker {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-2);
}
.kicker-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink-faint);
  display: block;
  line-height: 1;
  margin-bottom: var(--sp-1);
}

/* a hairline divider — pure stationery, no meaning */
.rule {
  border: 0;
  border-top: var(--hair) solid var(--rule-hair);
  margin: var(--sp-8) 0;
}
.rule-soft { margin: var(--sp-6) 0; opacity: 0.6; }

/* ===================================================================
   6. MARGINALIA — the handwriting register
   Caveat is used ONLY here. Never for body or headings.
   =================================================================== */
.margin-note {
  font-family: var(--font-hand);
  font-size: 1.18rem;
  line-height: 1.4;
  color: var(--ink-blue);          /* blue = a note / aside by default */
  margin: var(--sp-3) 0 0;
}
.margin-note::before {
  content: "↳ ";
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.margin-note.is-question { color: var(--ink-orange); }
.margin-note.is-caution  { color: var(--ink-red); }
.margin-note.is-affirmed { color: var(--ink-green); }

/* a marginalia note placed inline within main column flow */
.aside-hand {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-soft);
}

/* ===================================================================
   7. THE SQUIGGLY-UNDERLINE MARK — "key claim, read this"
   A hand-drawn wavy underline in an ink colour. Used SPARINGLY —
   about one per section. The colour follows the ink's meaning.
   Implemented as a repeating inline-SVG wave under the text baseline.
   =================================================================== */
.mark {
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 14px 6px;
  padding-bottom: 3px;
  font-weight: 500;
}
/* default mark — green (an affirmed key claim) */
.mark, .mark-green {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6'><path d='M0 4 Q3.5 0.5 7 4 T14 4' fill='none' stroke='%232f6149' stroke-width='1.7'/></svg>");
}
.mark-blue {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6'><path d='M0 4 Q3.5 0.5 7 4 T14 4' fill='none' stroke='%231f4a6d' stroke-width='1.7'/></svg>");
}
.mark-red {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6'><path d='M0 4 Q3.5 0.5 7 4 T14 4' fill='none' stroke='%238e2f2a' stroke-width='1.7'/></svg>");
}
.mark-orange {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6'><path d='M0 4 Q3.5 0.5 7 4 T14 4' fill='none' stroke='%239a4a1c' stroke-width='1.7'/></svg>");
}
@media (prefers-color-scheme: dark) {
  /* re-stroke the waves in the lighter dark-mode inks */
  .mark, .mark-green {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6'><path d='M0 4 Q3.5 0.5 7 4 T14 4' fill='none' stroke='%237fc0a0' stroke-width='1.7'/></svg>");
  }
  .mark-blue {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6'><path d='M0 4 Q3.5 0.5 7 4 T14 4' fill='none' stroke='%2386b6d6' stroke-width='1.7'/></svg>");
  }
  .mark-red {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6'><path d='M0 4 Q3.5 0.5 7 4 T14 4' fill='none' stroke='%23e08d83' stroke-width='1.7'/></svg>");
  }
  .mark-orange {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6'><path d='M0 4 Q3.5 0.5 7 4 T14 4' fill='none' stroke='%23dba06a' stroke-width='1.7'/></svg>");
  }
}

/* ===================================================================
   8. CALLOUT / COLOUR BLOCKS — a pasted, tinted note
   The colour IS the category. Subtly textured tint, slim ink border on
   the leading edge, a small ink label.
   =================================================================== */
.callout {
  position: relative;
  background-color: var(--tint-blue);
  border: var(--hair) solid var(--rule-hair);
  border-left: 3px solid var(--ink-blue);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-4) 0;
  /* faint paper tooth on the tint, so it reads as a pasted slip */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.5'/></svg>");
  background-blend-mode: multiply;
}
.callout-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-blue);
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.callout-label::before {
  content: "";
  width: 0.62rem; height: 0.62rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.callout > :last-child { margin-bottom: 0; }
.callout p, .callout li { font-size: 0.97rem; }

.callout.is-risk     { background-color: var(--tint-red);
                       border-left-color: var(--ink-red); }
.callout.is-risk .callout-label    { color: var(--ink-red); }
.callout.is-note     { background-color: var(--tint-blue);
                       border-left-color: var(--ink-blue); }
.callout.is-note .callout-label    { color: var(--ink-blue); }
.callout.is-question { background-color: var(--tint-orange);
                       border-left-color: var(--ink-orange); }
.callout.is-question .callout-label{ color: var(--ink-orange); }
.callout.is-affirmed { background-color: var(--tint-green);
                       border-left-color: var(--ink-green); }
.callout.is-affirmed .callout-label{ color: var(--ink-green); }

/* ===================================================================
   9. STRATEGY POINT — a scannable, penned bullet
   For the strategy/summary that must be read first. Each point has an
   ink-coloured pen-tick and a tight one-line claim.
   =================================================================== */
.points { list-style: none; margin: var(--sp-4) 0; padding: 0; }
.point {
  position: relative;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-8);
  border-bottom: var(--hair) solid var(--rule-hair);
}
.point:last-child { border-bottom: 0; }
.point::before {
  content: "✓";
  position: absolute;
  left: 0; top: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-green);
  width: 1.5rem; height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border: 1.4px solid var(--ink-green);
  border-radius: 50%;
}
.point.is-question::before { content: "?"; color: var(--ink-orange);
                             border-color: var(--ink-orange); }
.point.is-risk::before     { content: "!"; color: var(--ink-red);
                             border-color: var(--ink-red); }
.point.is-note::before     { content: "·"; color: var(--ink-blue);
                             border-color: var(--ink-blue);
                             font-size: 1.6rem; }
.point-claim {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--sp-1);
}
.point-detail { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ===================================================================
   10. DECISION CARD — a chosen / rejected ledger entry
   A pasted index card. The verdict lozenge says what was decided.
   =================================================================== */
.decision {
  background: var(--paper-raised);
  border: var(--hair) solid var(--rule-hair);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-4) 0;
  box-shadow: var(--shadow-card);
}
.decision-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.decision-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0;
}
.decision-body { font-size: 0.97rem; margin: 0; }
.decision-body + .decision-body { margin-top: var(--sp-2); }
.decision .rejected {
  color: var(--ink-red);
  font-style: italic;
}
.decision .rejected::before {
  content: "Rejected — ";
  font-style: normal;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* verdict lozenge — small ink-stamped tag */
.lozenge {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  border: 1.2px solid currentColor;
  white-space: nowrap;
  flex: none;
}
.lozenge.is-chosen   { color: var(--ink-green);  background: var(--tint-green); }
.lozenge.is-risk     { color: var(--ink-red);    background: var(--tint-red); }
.lozenge.is-open     { color: var(--ink-orange); background: var(--tint-orange); }
.lozenge.is-note     { color: var(--ink-blue);   background: var(--tint-blue); }

/* ===================================================================
   11. TASK-FLOW DIAGRAM — a compact penned process sketch
   Numbered nodes connected by a dependency arrow. Wraps gracefully.
   =================================================================== */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.flow-node {
  flex: 1 1 8.5rem;
  min-width: 8rem;
  background: var(--paper-raised);
  border: var(--hair) solid var(--rule-hair);
  border-top: 2.5px solid var(--ink-blue);
  border-radius: var(--radius);
  padding: var(--sp-3);
  position: relative;
}
.flow-node .n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.flow-node .t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  display: block;
  margin-top: 1px;
}
.flow-node .d {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: var(--sp-1);
}
/* the connector arrow between nodes */
.flow-node:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: calc(-1 * var(--sp-2) - 0.1rem);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 0.95rem;
  z-index: 1;
}
.flow-node.is-foundation { border-top-color: var(--ink-green); }
.flow-node.is-key        { border-top-color: var(--ink-orange); }
@media (max-width: 600px) {
  .flow-node:not(:last-child)::after {
    content: "↓";
    right: 50%;
    top: auto;
    bottom: calc(-1 * var(--sp-2) - 0.05rem);
    transform: translateX(50%);
  }
}

/* ===================================================================
   12. STAT BAR — a small set of penned figures
   =================================================================== */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: var(--hair) solid var(--rule-hair);
  border-radius: var(--radius);
  background: var(--paper-raised);
  overflow: hidden;
  margin: var(--sp-4) 0;
}
.stat {
  flex: 1 1 7rem;
  padding: var(--sp-4) var(--sp-4);
  border-right: var(--hair) solid var(--rule-hair);
  text-align: center;
}
.stat:last-child { border-right: 0; }
.stat-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-blue);
}
.stat-num.is-green  { color: var(--ink-green); }
.stat-num.is-orange { color: var(--ink-orange); }
.stat-num.is-red    { color: var(--ink-red); }
.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}

/* ===================================================================
   13. COLLAPSIBLE DETAIL — progressive disclosure
   Strategy shows first; full detail hides in <details>.
   =================================================================== */
.detail {
  border: var(--hair) solid var(--rule-hair);
  border-radius: var(--radius);
  background: var(--paper-raised);
  margin: var(--sp-4) 0;
}
.detail > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  user-select: none;
}
.detail > summary::-webkit-details-marker { display: none; }
.detail > summary::before {
  content: "›";
  font-size: 1.3rem;
  color: var(--ink-blue);
  transition: transform 0.18s ease;
  display: inline-block;
}
.detail[open] > summary::before { transform: rotate(90deg); }
.detail > summary .summary-hint {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.detail-body {
  padding: 0 var(--sp-6) var(--sp-4);
  border-top: var(--hair) solid var(--rule-hair);
  margin-top: var(--sp-1);
  padding-top: var(--sp-4);
}

/* ===================================================================
   14. CODE — a recessed mono well
   =================================================================== */
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--paper-deep);
  border: var(--hair) solid var(--rule-hair);
  border-radius: 2px;
  padding: 0.08em 0.34em;
}
pre {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.55;
  background: var(--paper-deep);
  border: var(--hair) solid var(--rule-hair);
  border-left: 3px solid var(--rule-margin);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  overflow-x: auto;
  margin: var(--sp-4) 0;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* ===================================================================
   15. SMALL UTILITIES
   =================================================================== */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}
.swatch {
  border: var(--hair) solid var(--rule-hair);
  border-radius: var(--radius);
  background: var(--paper-raised);
  overflow: hidden;
}
.swatch-chip {
  height: 4.4rem;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-2) var(--sp-3);
}
.swatch-chip .hex {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--paper);
  background: rgba(0,0,0,0.28);
  padding: 0.1rem 0.34rem;
  border-radius: 2px;
}
.swatch-meta { padding: var(--sp-3); }
.swatch-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}
.swatch-meaning { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.swatch-wcag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-green);
  margin-top: var(--sp-1);
}

.specimen-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: var(--hair) solid var(--rule-hair);
  flex-wrap: wrap;
}
.specimen-row:last-child { border-bottom: 0; }
.specimen-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  flex: 0 0 6.5rem;
}

.scale-bar { display: flex; align-items: flex-end; gap: var(--sp-3);
             flex-wrap: wrap; margin: var(--sp-4) 0; }
.scale-unit { text-align: center; }
.scale-block {
  background: var(--ink-blue);
  opacity: 0.78;
  border-radius: 2px;
  width: 2rem;
}
.scale-cap {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-soft);
  margin-top: var(--sp-1);
}

.component-card {
  border: var(--hair) solid var(--rule-hair);
  border-radius: var(--radius);
  margin: var(--sp-6) 0;
  background: var(--paper);
}
.component-card > .demo {
  padding: var(--sp-6);
  border-bottom: var(--hair) dashed var(--rule-hair);
}
.component-card > .note {
  padding: var(--sp-3) var(--sp-6);
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border-radius: 0 0 var(--radius) var(--radius);
}
.component-card > .note strong {
  color: var(--ink-body);
  font-family: var(--font-display);
}

.footer {
  margin-top: var(--sp-16);
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--rule-hair);
  font-size: 0.78rem;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.footer code { background: none; border: 0; padding: 0;
                color: var(--ink-soft); }

.dot-grid-demo {
  height: 7rem;
  border: var(--hair) solid var(--rule-hair);
  border-radius: var(--radius);
  background-color: var(--paper);
  background-image:
    radial-gradient(var(--dot-grid) 1.05px, transparent 1.15px);
  background-size: 22px 22px;
  position: relative;
}
.dot-grid-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--tooth-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='t2'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23t2)'/></svg>");
}

/* a tidy two-column flow within the main column on wide screens */
.cols-2 {
  column-count: 2;
  column-gap: var(--sp-8);
  column-rule: var(--hair) solid var(--rule-hair);
}
.cols-2 > * { break-inside: avoid; }
@media (max-width: 720px) { .cols-2 { column-count: 1; } }

.lead {
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--ink-body);
}
.meta-line {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}