/* ============================================================================
   COPPER PLATE — the design system for “Fiat Money Inflation in France”
   ----------------------------------------------------------------------------
   Approved at stage 2 (dark-design-judge PASS, round 2). The token block below
   is promoted verbatim from specs/design.md; that file is the record and this
   is the implementation. Drift between them is drift nobody approved.

   The argument: the assignat was an engraved object. Its plates were copper,
   and the first issue printed, in the margin, the interest each note earned per
   day. So the site is a plate impression on laid paper — and the margin rail
   carries what the note carried there, the printed page of every figure.

   Three accents, one per substance, never spent decoratively:
     --seal      vermilion  paper money and its collapse
     --assignat  blue-grey  the state's promise; all provenance and nomenclature
     --louis     brass      specie — gold and silver
   ==========================================================================*/

:root {
  /* --- ground & ink: laid paper, iron-gall ------------------------------- */
  --paper:        #F2EAD8;   /* laid cream — never white */
  --paper-raised: #FBF6EA;   /* card / plate impression */
  --paper-sunk:   #E8DEC7;   /* table stripe, inset wells */
  --ink:          #241E17;   /* warm iron-gall black */
  --ink-soft:     #5C5245;   /* secondary prose, captions */
  --ink-faint:    #6E6455;   /* labels, meta — 4.85:1 on --paper, AA at 0.66rem */
  --rule:         #C9BCA1;   /* hairline: plate marks, table rules */
  --rule-strong:  #A2937A;
  /* The dotted underline that teaches which words are glossed. Its own token, not
     --rule-strong: a hairline may sit at 2.5:1, a teaching device may not. 3.49:1. */
  --term-rule:    #8A7A5C;

  /* --- the three substances ---------------------------------------------- */
  --seal:         #B23A22;
  --seal-wash:    #B23A2214;
  --assignat:     #3A5A73;
  --assignat-wash:#3A5A7314;
  --louis:        #8A6A2F;
  --louis-wash:   #8A6A2F14;

  /* --- type ------------------------------------------------------------- */
  --display: "Bodoni Moda", "Times New Roman", serif;
  --read:    "Spectral", Georgia, serif;
  --data:    "IBM Plex Mono", ui-monospace, monospace;

  --measure: 34rem;
  --rail:    17rem;
  --gap:     2.75rem;
  --page:    72rem;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.048'/%3E%3C/svg%3E");
  --guilloche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cg fill='none' stroke='%23A2937A' stroke-width='0.7' opacity='0.85'%3E%3Cpath d='M0 6 C15 0 15 12 30 6 S45 0 60 6 75 12 90 6 105 0 120 6'/%3E%3Cpath d='M0 6 C15 12 15 0 30 6 S45 12 60 6 75 0 90 6 105 12 120 6'/%3E%3C/g%3E%3C/svg%3E");

  --shadow-plate: 0 1px 0 #FBF6EA, 0 0 0 1px var(--rule), 0 14px 34px -26px #241E1755;
  color-scheme: light;
}

html.dark {
  /* Not an inversion — the same press room, lit by one lamp at night. */
  --paper:        #171310;
  --paper-raised: #201A15;
  --paper-sunk:   #12100D;
  --ink:          #E9E0CD;
  --ink-soft:     #AC9E87;
  --ink-faint:    #8C8065;   /* 4.74:1 on the night ground */
  --rule:         #3D3327;
  --rule-strong:  #574733;
  --term-rule:    #7D6B4C;   /* 3.59:1 — the gloss cue must teach in both themes */

  --seal:         #DA6E4C;
  --seal-wash:    #DA6E4C1F;
  --assignat:     #86ADC8;
  --assignat-wash:#86ADC81A;
  --louis:        #C9A45E;
  --louis-wash:   #C9A45E1A;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
  --guilloche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cg fill='none' stroke='%23574733' stroke-width='0.7'%3E%3Cpath d='M0 6 C15 0 15 12 30 6 S45 0 60 6 75 12 90 6 105 0 120 6'/%3E%3Cpath d='M0 6 C15 12 15 0 30 6 S45 12 60 6 75 0 90 6 105 12 120 6'/%3E%3C/g%3E%3C/svg%3E");

  --shadow-plate: 0 0 0 1px var(--rule), 0 18px 40px -30px #000;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base -- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);   /* tiled, opacity baked in — never fixed */
  color: var(--ink);
  font-family: var(--read);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

a { color: var(--assignat); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--seal); }

img { max-width: 100%; height: auto; }

code, pre, .data {
  font-family: var(--data); font-size: 0.9em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--seal); color: var(--paper); padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; z-index: 30; }

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

/* Letterspaced mono caps stand in for a UI grotesk: on an engraved note, the
   labels were lettering too. */
.kicker, .label {
  font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}

/* -------------------------------------------------------------- masthead -- */

.masthead { border-bottom: 1px solid var(--rule); }

.masthead__inner {
  max-width: var(--page); margin: 0 auto; padding: 0.95rem 1.5rem 0.85rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}

.brand { text-decoration: none; color: var(--ink); }
.brand__title {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.02em;
}
.brand__title span { color: var(--seal); }

.masthead__links { display: flex; align-items: center; gap: 1.05rem; flex-wrap: wrap; }
.masthead__controls { display: flex; align-items: center; gap: 0.6rem; order: 3; }

.navlink {
  font-family: var(--data); font-size: 0.735rem; letter-spacing: 0.075em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.navlink:hover { color: var(--seal); border-bottom-color: var(--rule-strong); }
.navlink[aria-current] { color: var(--ink); border-bottom-color: var(--seal); }

.masthead__burger { display: none; }

/* Visually hidden, still announced. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.theme-toggle {
  background: none; border: 1px solid var(--rule);
  display: inline-flex; align-items: center; padding: 0.36rem 0.5rem;
  cursor: pointer; color: var(--ink-soft);
  font-family: var(--data); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; line-height: 1;
}
.theme-toggle:hover { color: var(--seal); border-color: var(--seal); }
.theme-toggle__icon { width: 0.95rem; height: 0.95rem; flex: none; }
/* Size lives on the icon class, not on a descendant `svg` selector — the generic
   rule out-specifying a state class is what leaked the moon into light mode once. */
.theme-toggle__face { align-items: center; gap: 0.42rem; }
/* Show the state on offer, never the state you are in: in light you are handed the
   night press. The html.dark pair out-specifies the base pair, which is the swap. */
.theme-toggle__face--night, html.dark .theme-toggle__face--day { display: inline-flex; }
.theme-toggle__face--day, html.dark .theme-toggle__face--night { display: none; }

@media (max-width: 46rem) {
  .masthead__inner { position: relative; }
  /* At 390px the brand already fills the row, so the visible label goes — but it is
     clipped, not display:none, or the button would lose its accessible name entirely
     and a screen reader would meet an unnamed control. */
  .theme-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .theme-toggle { padding: 0.4rem; }
  .masthead__burger {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; padding: 0.4rem; cursor: pointer;
  }
  .masthead__burger span { width: 20px; height: 2px; background: var(--ink); }
  .masthead__links {
    display: none; position: absolute; right: 1.25rem; top: 3.4rem;
    flex-direction: column; align-items: flex-end; gap: 0.85rem;
    background: var(--paper-raised); border: 1px solid var(--rule);
    padding: 1rem 1.2rem; z-index: 20; box-shadow: var(--shadow-plate);
  }
  .masthead__links.is-open { display: flex; }
}

/* ---------------------------------------------------------- plate frames -- */
/* Paper that has been through a press: one hairline for the plate edge, and
   the guilloche only where a note would carry it. */

.plate { background: var(--paper-raised); box-shadow: var(--shadow-plate); position: relative; }
.plate--noted::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 12px;
  background-image: var(--guilloche); background-repeat: repeat-x;
}
.plate__inner { border: 1px solid var(--rule); margin: 10px; }

.rule-guilloche {
  height: 12px; background-image: var(--guilloche); background-repeat: repeat-x;
  margin: 1.9rem 0 1.7rem; border: 0;
}

/* ------------------------------------------------------------------ hero -- */

.hero { max-width: var(--page); margin: 0 auto; padding: clamp(2rem, 5vw, 4.25rem) 1.5rem 2.5rem; }
.hero__kicker { display: block; margin-bottom: 1.4rem; }
.hero__title { font-size: clamp(2.6rem, 1.3rem + 5.6vw, 5.2rem); font-weight: 700; margin: 0; }
.hero__title em { font-style: italic; font-weight: 400; }
.hero__dek {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  color: var(--ink-soft); margin: 0.85rem 0 0;
}
.hero__stand { max-width: 40rem; font-size: 1.1rem; }

/* Drop cap: vermilion, on the opening paragraph of a narrative page. */
.lede::first-letter {
  font-family: var(--display); color: var(--seal); float: left;
  font-size: 3.4em; line-height: 0.84; padding: 0.05em 0.09em 0 0; font-weight: 700;
}

/* --------------------------------------------------------- denominations -- */
/* A figure stated the way a note states its value. The digit count is the
   argument, so an eleven-digit numeral gets its line to itself. */

/* Cards carry their own hairline rather than sitting on a 1px-gap background:
   a row that does not divide evenly would otherwise expose the background as a
   solid block where the missing cards would be. */
.denoms {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin: 2.5rem 0 0;
}
.denom {
  background: var(--paper-raised); border: 1px solid var(--rule);
  padding: 1.35rem 1.4rem 1.2rem;
}
.denom__label {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 0.55rem;
}
.denom__fig {
  font-family: var(--display); font-size: clamp(1.5rem, 1.05rem + 1.35vw, 2.15rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; display: block; white-space: nowrap;
}
.denom__unit {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 0.3rem;
}
.denom__note { font-size: 0.86rem; color: var(--ink-soft); margin: 0.5rem 0 0; }
.denom--paper   .denom__fig { color: var(--seal); }
.denom--promise .denom__fig { color: var(--assignat); }
.denom--gold    .denom__fig { color: var(--louis); }

/* ----------------------------------------------------- provenance marks -- */
/* Where the note printed its interest, the site prints its source. */

.src { font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--assignat); white-space: nowrap; }
.src::before { content: "⌐ "; color: var(--rule-strong); }
a.src { text-decoration: none; border-bottom: 1px dotted var(--assignat); }

.railnote {
  font-family: var(--data); font-size: 0.72rem; line-height: 1.5; color: var(--ink-soft);
  border-left: 2px solid var(--assignat); padding-left: 0.7rem; margin: 0;
}
.railnote b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------- reading layout -- */

.prose { max-width: var(--measure); margin: 2.4rem auto 3rem; padding: 0 1.5rem; }

/* Reference pages (cast, timeline, numbers, glossary) need width for their cards
   and tables, but prose is still only readable at a measure. So the container
   goes wide and the running text stays narrow — the wide blocks break out. */
.prose--wide { max-width: var(--page); }
.prose--wide > p,
.prose--wide > h1,
.prose--wide > h2,
.prose--wide > h3,
.prose--wide > ul,
.prose--wide > ol,
.prose--wide > blockquote,
.prose--wide > .gloss { max-width: var(--measure); }
.prose h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); margin: 2.6rem 0 0.6rem; }
.prose h3 {
  font-family: var(--data); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 2.4rem 0 0.7rem;
}
.prose p { margin: 1.05rem 0; }

/* The reading page and its margin. The rail is reserved by the grid's second
   column; marginal notes float into it from the flow, so each source sits beside
   the passage it belongs to rather than in a stack at the top. Below 62rem the
   notes become blue-ruled blocks in the flow — the apparatus survives rather than
   merely shrinking. */
.article {
  display: grid; gap: var(--gap); max-width: var(--page);
  margin: 0 auto; padding: 2.4rem 1.5rem 3rem;
}
@media (min-width: 62rem) {
  .article { grid-template-columns: var(--measure) var(--rail); justify-content: center; }
  .article__body { grid-column: 1; min-width: 0; }
}
.article__body > :first-child { margin-top: 0; }

.marginnote {
  font-family: var(--data); font-size: 0.72rem; line-height: 1.5; color: var(--ink-soft);
  border-left: 2px solid var(--assignat); padding-left: 0.7rem; margin: 1.6rem 0;
}
.marginnote b { color: var(--ink); font-weight: 600; }
@media (min-width: 62rem) {
  .marginnote {
    float: right; width: var(--rail); clear: right;
    /* Pushed wholly outside the reading column, into the grid's reserved second
       column, so the prose measure is never eaten by a note. */
    margin: 0.35rem calc(-1 * (var(--rail) + var(--gap))) 1.5rem var(--gap);
  }
  /* A structural block must not start alongside a note it does not belong to. */
  .article__body h2, .article__body h3, .article__body figure,
  .article__body .pager { clear: right; }
}

/* Upright, not italic: Bodoni's italic capital I is a bare slanted stem, so
   "II" reads as "//" and "III" as "///". The roman I carries serifs. */
.sec__no {
  font-family: var(--display); font-size: 3.4rem; font-weight: 400;
  color: var(--ink-faint); line-height: 0.85; display: block; margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}

.pull { margin: 2rem 0; padding: 0 0 0 1.35rem; border-left: 3px solid var(--seal); }
.pull p {
  font-family: var(--display); font-style: italic; font-size: 1.22rem;
  line-height: 1.42; margin: 0;
}
.pull cite {
  display: block; margin-top: 0.7rem; font-family: var(--data); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-faint);
}
.pull cite b { color: var(--ink-soft); font-weight: 600; }

/* The site speaking ABOUT the book rather than inside it. Blue, because it is
   the documentary register — a reader must never mistake it for White. */
.gloss {
  margin: 1.9rem 0; padding: 1rem 1.15rem; background: var(--assignat-wash);
  border-left: 2px solid var(--assignat); font-size: 0.95rem;
}
.gloss__label {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--assignat); display: block;
  margin-bottom: 0.4rem; font-weight: 600;
}
.gloss > p { margin: 0; }
.gloss > p + p { margin-top: 0.7rem; }

.term { border-bottom: 1px dotted var(--term-rule); cursor: help; text-decoration: none;
  color: inherit; }

/* ------------------------------------------------- figures, tables, data -- */

figure { margin: 2.2rem 0; }
figcaption {
  font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.7rem;
  padding-left: 0.9rem; border-left: 2px solid var(--rule);
}
figcaption .src { display: inline-block; margin-left: 0.35rem; }

/* Wide content scrolls inside its own box; the body never scrolls sideways. */
.scroller { overflow-x: auto; }

table.ledger {
  width: 100%; border-collapse: collapse; font-size: 0.88rem;
  font-family: var(--data); font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.scroller table.ledger { min-width: 21rem; }
.ledger caption {
  text-align: left; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: 0.6rem;
}
.ledger th, .ledger td { padding: 0.42rem 0.6rem; text-align: right; vertical-align: baseline; }
.ledger th:first-child, .ledger td:first-child { text-align: left; font-family: var(--read); }
.ledger thead th {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--rule-strong); font-weight: 500;
}
.ledger tbody tr + tr td { border-top: 1px solid var(--rule); }
.ledger tbody tr:nth-child(even) td { background: var(--paper-sunk); }
/* A prose cell in a figures table: left-aligned, in the reading face, and given
   room rather than squeezed into the width of a number. */
/* Prose cells only: the header keeps the mono/size/colour of every other header,
   and takes just the alignment so it sits over its own column. */
.ledger td.ledger__pledge {
  text-align: left; font-family: var(--read); font-size: 0.86rem;
  line-height: 1.45; min-width: 16rem; color: var(--ink-soft);
}
.ledger th.ledger__pledge { text-align: left; }
.ledger .then    { color: var(--louis); }                  /* before: metal */
.ledger .after   { color: var(--seal); font-weight: 500; }  /* after: paper's collapse */
.ledger .promise { color: var(--assignat); font-weight: 500; } /* an issue: the state's promise */
.ledger tfoot td {
  border-top: 1px solid var(--rule-strong); font-family: var(--read); font-size: 0.78rem;
  color: var(--ink-soft); text-align: left; padding-top: 0.7rem;
}
@media (max-width: 30rem) {
  /* The "after" column is the punchline: it must be on screen at rest. */
  table.ledger { font-size: 0.8rem; }
  .ledger th, .ledger td { padding: 0.4rem 0.35rem; }
}

/* Inline SVG figures only — every stroke a token, so both themes are free. */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart .tick { fill: var(--ink-faint); font-family: var(--data); font-size: 11px; }
/* Second tick line: which of two readings in the same month this point is. */
.chart .tick__qual { font-size: 9px; letter-spacing: 0.02em; font-style: italic; }
.chart .line { fill: none; stroke: var(--seal); stroke-width: 2.4; stroke-linejoin: round; }
.chart .step { fill: none; stroke: var(--assignat); stroke-width: 2; stroke-linejoin: round; }
.chart .dot  { fill: var(--seal); }
.chart .val  { fill: var(--ink); font-family: var(--data); font-size: 11.5px; font-weight: 500; }
.chart .gold { fill: var(--louis); stroke: var(--louis); }
.chart .bar-then  { fill: var(--louis); }
.chart .bar-after { fill: var(--seal); }

/* The scale declaration lives in HTML, outside the scroller, so it always
   wraps and can never be clipped (design-judge observation 1). */
.chart-scale {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.5rem;
}
/* Charts ship in two variants: a wide one and a portrait one that fits 390px
   at rest. A six-point series must never need a horizontal swipe. */
.chart--wide { display: block; }
.chart--narrow { display: none; }
@media (max-width: 34rem) {
  .chart--wide { display: none; }
  .chart--narrow { display: block; }
}

/* -------------------------------------------------------------- cards ---- */

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem; margin: 1.4rem 0;
}
.card {
  background: var(--paper-raised); border: 1px solid var(--rule);
  padding: 1.15rem 1.2rem;
}
.card h3, .card h4 {
  font-family: var(--display); font-size: 1.22rem; margin: 0; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.card .role {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0.3rem 0 0.7rem;
}
.card blockquote {
  margin: 0; font-family: var(--display); font-style: italic; font-size: 0.98rem;
  line-height: 1.45; color: var(--ink);
}
.card .stance { margin: 0.75rem 0 0; font-size: 0.8rem; }
.stance b {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.1rem 0.4rem;
}
.stance--for b     { background: var(--seal-wash); color: var(--seal); }
.stance--against b { background: var(--assignat-wash); color: var(--assignat); }

/* Timeline / glossary rows share the ledger's ruled logic. */
.rows { border-top: 1px solid var(--rule); }
.row { border-bottom: 1px solid var(--rule); padding: 0.95rem 0; display: grid; gap: 0.35rem; }
@media (min-width: 44rem) {
  .row { grid-template-columns: 9rem 1fr auto; align-items: baseline; gap: 1.2rem; }
}
.row__when {
  font-family: var(--data); font-size: 0.74rem; letter-spacing: 0.05em; color: var(--ink);
  font-weight: 500;
}
.row__what { margin: 0; }
.row__what b { font-weight: 600; }
/* Timeline kinds. An accent marks a SUBSTANCE and nothing else — /about/ teaches the
   reader exactly that, so brass on "law or decree" contradicted the site in writing.
   An issue of paper is the state's promise (blue); a price is the collapse
   (vermilion); brass is spent here only where specie is the subject. Laws, penalties
   and events are not substances, so they take a neutral weight ramp instead. */
.row--issue   { border-left: 3px solid var(--assignat); padding-left: 0.9rem; }
.row--price   { border-left: 3px solid var(--seal);     padding-left: 0.9rem; }
.row--law     { border-left: 3px solid var(--ink-soft); padding-left: 0.9rem; }
.row--penalty { border-left: 3px solid var(--ink);      padding-left: 0.9rem; }
.row--issue .row__when   { color: var(--assignat); }
.row--price .row__when   { color: var(--seal); }
.row--law .row__when     { color: var(--ink-soft); }
.row--penalty .row__when { color: var(--ink); }
.tl-key { margin-right: 0.9rem; padding-left: 0.45rem; border-left: 3px solid var(--rule); }
.tl-key--issue   { border-left-color: var(--assignat); }
.tl-key--price   { border-left-color: var(--seal); }
.tl-key--law     { border-left-color: var(--ink-soft); }
.tl-key--penalty { border-left-color: var(--ink); }
.tl-key--event   { border-left-color: var(--rule-strong); }
.term-row dt { font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
.term-row dd { margin: 0.25rem 0 0; }
.term-row__say {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--ink-faint); text-transform: uppercase;
}
.term-row__bites { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--ink-soft); }

/* A paraphrase is not a quotation and must never look like one: no quote marks,
   a label instead of a rule. */
.card__para { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.card__paralabel {
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule);
  padding: 0.05rem 0.3rem; margin-right: 0.45rem;
}

/* ---------------------------------------------------------------- pager -- */

/* A missing prev must collapse, not leave an empty box beside the next link. */
.pager {
  display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin: 3rem 0 0;
}
@media (min-width: 34rem) {
  .pager { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.pager__link {
  background: var(--paper-raised); padding: 0.95rem 1.15rem; text-decoration: none;
  display: block; color: var(--ink);
}
.pager__link:hover { background: var(--paper-sunk); }
.pager__link--next { text-align: right; }
.pager__dir {
  display: block; font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--seal); margin-bottom: 0.3rem;
}
.pager__title { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }

/* ------------------------------------------------------- generated plate -- */
/* Aquatint illustration. The caption disclosing AI generation is part of the
   component, not an optional extra. */
.plateimg { margin: 2.2rem 0; }
.plateimg img {
  display: block; width: 100%; aspect-ratio: 2/1; height: auto; object-fit: cover;
  border: 1px solid var(--rule); background: var(--paper-sunk);
}
.plateimg figcaption { color: var(--ink-faint); }

/* ------------------------------------------------------------- colophon -- */

.colophon { border-top: 1px solid var(--rule); margin-top: 3rem; }
.colophon__inner {
  max-width: var(--page); margin: 0 auto; padding: 1.8rem 1.5rem 2.6rem;
  font-size: 0.85rem; color: var(--ink-soft);
}
.colophon__title { font-family: var(--display); color: var(--ink); margin: 0 0 0.5rem;
  font-size: 1rem; }
.colophon__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.colophon__links a {
  font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
.colophon__links a:hover { color: var(--seal); }
.colophon__foot { margin-top: 1.25rem; }

/* The AI-authorship disclosure. Non-negotiable, on every page. */
/* --ink-faint at 0.7rem on the dark ground was the dimmest text in the build and
   likely under AA; the disclosure is the last thing that should be hard to read. */
.disclose {
  font-family: var(--data); font-size: 0.72rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 46rem; margin-top: 1.25rem;
  border-top: 1px solid var(--rule); padding-top: 1rem;
}
.disclose b { color: var(--ink-soft); font-weight: 600; }

/* ------------------------------------- motion & print floor (mandatory) -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .masthead, .colophon__links, .theme-toggle, .skip-link { display: none; }
  body { background: #fff; background-image: none; color: #000; }
  .article { display: block; }
  .src, .railnote { color: #444; }
  a { color: #000; }
}

/* The one table too wide to fit a phone at rest gets a hint, so hidden columns
   are a choice the reader knows about rather than content they never see. */
.scroll-hint {
  display: none; font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.4rem;
}
@media (max-width: 44rem) { .scroll-hint { display: block; } }