/* ============================================================================
   TORAD WORLD — "The Plate"
   A design world set in the engraved treatise: the Encyclopédie plate.
   Intaglio on warm rag paper · the two-zone plate (vignette + keyed schematic) ·
   vermilion rubric · Prussian-blue instrument · ormolu caught by light ·
   the rolling-press strike + the burin line.

   Grounded historically in /preview/world-research/. Documented in
   /preview/design-system/. Distinct namespace (pl-) from the live .t- framework
   so the two never collide. Fluid by law: the canvas takes width when it has it
   and reflows down (container queries) when it doesn't.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · TOKENS — the pigments of 18th-c. France, the type, the fluid measures
   ------------------------------------------------------------------------- */
:root{
  /* — daylight register: the salon, the leaf held in window-light — */
  --pl-paper:#efe6d2;        /* warm rag stock */
  --pl-paper-sunk:#e7dcc2;   /* the pressed/inset area, a shade deeper */
  --pl-paper-edge:#e3d7bb;   /* the desk the leaf rests on */
  --pl-ink:#241d14;          /* iron-gall — warm near-black */
  --pl-ink-soft:#5d5240;
  --pl-ink-faint:#8c8068;
  --pl-vermilion:#c5331d;    /* cinnabar — the rubric, the strike */
  --pl-vermilion-lit:#e0402a;
  --pl-prussian:#1c3c5c;     /* the first synthetic blue (1704) — the instrument */
  --pl-verdigris:#2f6c5b;    /* copper green — the live / offline mark */
  --pl-ormolu:#a8802f;       /* gilt bronze */
  --pl-ormolu-lit:#e7c069;   /* the same, where candlelight catches it */
  --pl-line:rgba(36,29,20,.20);
  --pl-line-firm:rgba(36,29,20,.42);
  --pl-line-strong:rgba(36,29,20,.66);
  --pl-window:rgba(255,247,228,.55);   /* the directional window wash */

  /* — the three voices — */
  --pl-display:'Fraunces',Georgia,'Times New Roman',serif;  /* grid-built Roman (Romain-du-Roi / Fournier); italic = the engraved Coulée hand */
  --pl-body:'Source Serif 4',Georgia,serif;                  /* the old-style body (Caslon / Baskerville) */
  --pl-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace; /* the press, the instrument, the CLI */

  /* — fluid type scale — */
  --pl-text-0:.72rem;
  --pl-text-1:.8rem;
  --pl-text-2:.9rem;
  --pl-text-3:1rem;
  --pl-text-4:clamp(1.04rem,.55rem + .9vw,1.22rem);
  --pl-text-5:clamp(1.2rem,.7rem + 1.2vw,1.5rem);
  --pl-text-6:clamp(1.4rem,.8rem + 1.8vw,1.95rem);
  --pl-text-7:clamp(1.7rem,1rem + 2.6vw,2.5rem);
  --pl-text-8:clamp(2.1rem,1.2rem + 3.6vw,3.35rem);
  --pl-text-9:clamp(2.5rem,1.3rem + 5vw,4.4rem);
  --pl-text-10:clamp(2.9rem,1.3rem + 6.6vw,5.6rem);

  /* — fluid space scale — */
  --pl-s1:.35rem;
  --pl-s2:.6rem;
  --pl-s3:.9rem;
  --pl-s4:1.25rem;
  --pl-s5:clamp(1.4rem,1rem + 1.6vw,2.1rem);
  --pl-s6:clamp(1.8rem,1.2rem + 2.6vw,3rem);
  --pl-s7:clamp(2.4rem,1.4rem + 4vw,4.2rem);
  --pl-s8:clamp(3.2rem,1.8rem + 6vw,6rem);

  /* — the responsive canvas + the reading measure (the law) — */
  --pl-gutter:clamp(1rem,4vw,3.5rem);
  --pl-canvas-max:100rem;                          /* ~1600px — takes width when it has it */
  --pl-canvas:min(100%, var(--pl-canvas-max));
  --pl-measure:66ch;                               /* prose stays at the manuscript measure */
  --pl-measure-tight:54ch;

  --pl-radius:2px;
  --pl-hair:1px;

  /* — the burin weight ladder: TONE IS CUT-DEPTH, never opacity.
       a shallow graver line (bw-1) reads light because it is thin, not faded;
       a deep one (bw-6) reads heavy because the burin bit harder. — */
  --bw-1:.34; --bw-2:.55; --bw-3:.8; --bw-4:1.15; --bw-5:1.7; --bw-6:2.6;

  /* — motion — */
  --pl-ease:cubic-bezier(.2,.7,.2,1);
  --pl-ease-press:cubic-bezier(.3,1.4,.5,1);
  --pl-dur:.6s;
  --pl-dur-slow:1s;
}

/* — candlelight register: the académie / the copper plate at night — */
[data-leaf="candlelight"]{
  --pl-paper:#1c1610;
  --pl-paper-sunk:#171109;
  --pl-paper-edge:#120d07;
  --pl-ink:#efe2c6;
  --pl-ink-soft:#b6a888;
  --pl-ink-faint:#8a7d62;
  --pl-vermilion:#e2563b;
  --pl-vermilion-lit:#f06a4c;
  --pl-prussian:#6fa8cf;
  --pl-verdigris:#5bb59c;
  --pl-ormolu:#caa24a;
  --pl-ormolu-lit:#f0d27e;
  --pl-line:rgba(239,226,198,.16);
  --pl-line-firm:rgba(239,226,198,.30);
  --pl-line-strong:rgba(239,226,198,.46);
  --pl-window:rgba(255,238,205,.10);
}

/* ---------------------------------------------------------------------------
   2 · BASE
   ------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body.pl{
  margin:0;
  padding:var(--pl-gutter);
  font-family:var(--pl-body);
  font-size:var(--pl-text-3);
  line-height:1.62;
  letter-spacing:.002em;
  color:var(--pl-ink);
  background-color:var(--pl-paper-edge);
  /* the workshop light: a warm wash from the upper-left window, the way
     Diderot's vignettes are "flooded with directional light" */
  background-image:radial-gradient(120% 90% at 18% 3%, var(--pl-window), transparent 46%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .5s var(--pl-ease);
  min-height:100vh;
}

::selection{background:var(--pl-vermilion);color:var(--pl-paper)}

:where(a){color:var(--pl-ink);text-decoration-color:var(--pl-line-strong);text-underline-offset:.18em}
:where(a:hover){text-decoration-color:var(--pl-vermilion)}

:where(button,a,[tabindex]):focus-visible{
  outline:2px solid var(--pl-vermilion);
  outline-offset:3px;border-radius:1px;
}

/* ---------------------------------------------------------------------------
   3 · THE CANVAS — fluid leaf, container-scoped so internals reflow
   ------------------------------------------------------------------------- */
.pl-leaf{
  position:relative;
  inline-size:var(--pl-canvas);
  max-inline-size:var(--pl-canvas-max);
  margin-inline:auto;
}
/* laid + chain lines of the rag */
.pl-leaf::before{
  content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;border-radius:3px;
  background:
    repeating-linear-gradient(0deg, var(--pl-line) 0 .5px, transparent .5px 4px),
    repeating-linear-gradient(90deg, rgba(36,29,20,.05) 0 .5px, transparent .5px 26px);
  opacity:.5;mix-blend-mode:multiply;
}
[data-leaf="candlelight"] .pl-leaf::before{mix-blend-mode:screen;opacity:.30}

/* a plain content column for the book/research bodies, capped at measure */
.pl-column{max-inline-size:var(--pl-measure);margin-inline:auto}
.pl-wide{max-inline-size:none}

/* ---------------------------------------------------------------------------
   4 · THE PLATE — a struck leaf RESTING on the desk (the canonical panel depth)
   ----------------------------------------------------------------------------
   THE LAW, learned the hard way on the apex over many hours, codified here so it is
   never relearned. (The book's own Tenet + Conduct prose said "pressed into the rag";
   that was imprecise and led us astray — both are corrected to match this.)

   - A panel is a struck copper plate LIFTING a hair off the leaf: a crisp warm rim
     catches the light on the near edge (inset 2px 2px 0 cream), the far edge sinks
     soft, and ONE tight, warm, low-spread drop hugs underneath (0 22px 50px -34px).
     That tight warm drop reads as a real plate RESTING on a real surface: a material
     fact, not decoration. This is --pl-plate / .pl-fig; on the apex it is --plate-leaf.
   - FORBIDDEN: the generic floating card — a big, neutral, decorative blur with no rim
     (0 14px 30px, black, positive spread). Same medium, opposite meaning: tight + warm
     + contact = the world; big + neutral + float = slop.
   - AVOID on content panels: the pressed-IN intaglio deboss (inset DARK on the near
     edge). It reads "odd / sunk" and was rejected by the founder. Press IN only for a
     TRUE recessed instrument face (a gauge dial), never as a default panel.

   PROPAGATION RULES (the other lessons from the same hours):
   - Rebuild, do not recolor: recompose into real engraved figures, never tint old boxes.
   - One figure, not many plates: a proof is ONE instrument (gauge + readings + stats +
     caption, like .pl-fig / the Instruments leaf), never a stack of equal plates.
   - Use the width, cap the prose: a content leaf takes the canvas when it has it; running
     prose self-caps at a readable measure so it neither strands in the middle nor over-runs.
   - Figures need substance: an engraved figure is a struck plate (body, weight, a recessed
     well where the rubric lands), not a thin wireframe, so it survives candlelight.
   - Glossary terms flow inline; clip the root (overflow-x: clip) so an off-screen tooltip
     near the edge never adds horizontal page-scroll.
   ------------------------------------------------------------------------- */
.pl-plate{
  container:plate / inline-size;          /* internals reflow on the PLATE's width, not the viewport */
  position:relative;z-index:1;
  background:var(--pl-paper);
  padding:clamp(1.5rem,1rem + 3vw,3.5rem) clamp(1.4rem,.8rem + 3.2vw,4rem);
  border:var(--pl-hair) solid var(--pl-line-firm);
  border-radius:var(--pl-radius);
  box-shadow:
    inset 2px 2px 0 rgba(255,250,235,.7),     /* the rim the light catches */
    inset -2px -3px 7px rgba(36,29,20,.16),    /* the sunk far edge */
    0 1px 0 rgba(255,250,235,.6),
    0 22px 50px -34px rgba(36,29,20,.5);       /* the leaf lifting off the desk */
  transform-origin:50% 30%;
}
.pl-plate + .pl-plate{margin-top:var(--pl-s6)}
[data-leaf="candlelight"] .pl-plate{
  box-shadow:
    inset 2px 2px 0 rgba(239,226,198,.10),
    inset -2px -3px 8px rgba(0,0,0,.42),
    0 22px 60px -34px rgba(0,0,0,.7);
}
.pl-plate--flush{padding:0;background:none;border:none;box-shadow:none;container:plate / inline-size}

/* the engraver's plate-number furniture — the apparatus of a printed volume */
.pl-furniture{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem 1rem;
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.3em;text-transform:uppercase;
  color:var(--pl-ink-faint);
  padding-bottom:1.1rem;margin-bottom:var(--pl-s6);
  border-bottom:var(--pl-hair) solid var(--pl-line);
}
.pl-furniture b{color:var(--pl-vermilion);font-weight:400}

/* ---------------------------------------------------------------------------
   5 · ZONE ONE — THE VIGNETTE (the thing in use)
   ------------------------------------------------------------------------- */
.pl-vignette{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(13rem,26%,26rem);
  gap:clamp(1.5rem,1rem + 3vw,4rem);
  align-items:center;
}
@container plate (max-width:680px){
  .pl-vignette{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   6 · ZONE TWO — THE SCHEMATIC (the parts, taken apart, keyed)
   ------------------------------------------------------------------------- */
.pl-schematic{margin-top:var(--pl-s6)}
.pl-fig-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;
  margin-bottom:var(--pl-s5);padding-bottom:.7rem;border-bottom:var(--pl-hair) solid var(--pl-line);
}
.pl-fig-head__n{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.24em;text-transform:uppercase;color:var(--pl-ink-faint)}

.pl-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.pl-part{
  padding:var(--pl-s5) var(--pl-s4);
  border-inline-start:var(--pl-hair) dashed var(--pl-line-firm);
  display:flex;flex-direction:column;gap:1rem;
}
.pl-part:first-child{border-inline-start:none}
@container plate (max-width:680px){
  .pl-part{border-inline-start:none;border-top:var(--pl-hair) dashed var(--pl-line-firm);padding-inline:0}
  .pl-part:first-child{border-top:none}
}
.pl-key{
  inline-size:2rem;block-size:2rem;flex:none;border-radius:50%;
  border:1.5px solid var(--pl-vermilion);color:var(--pl-vermilion);
  display:grid;place-items:center;
  font-family:var(--pl-display);font-weight:600;font-size:1.05rem;font-style:italic;
}
.pl-part__fig{block-size:5.5rem;display:flex;align-items:center;justify-content:flex-start}
.pl-part__fig svg{block-size:100%;inline-size:auto}

/* ---------------------------------------------------------------------------
   7 · TYPOGRAPHY COMPONENTS
   ------------------------------------------------------------------------- */
.pl-kicker{
  font-family:var(--pl-mono);font-size:var(--pl-text-1);letter-spacing:.3em;text-transform:uppercase;
  color:var(--pl-ink-soft);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.pl-kicker::before{content:"";inline-size:1.6rem;block-size:1px;background:var(--pl-vermilion);flex:none}
.pl-kicker--plain::before{display:none}

.pl-display{
  font-family:var(--pl-display);font-weight:600;line-height:1.02;letter-spacing:-.018em;
  font-size:var(--pl-text-9);color:var(--pl-ink);margin:0 0 var(--pl-s4);
}
.pl-title{
  font-family:var(--pl-display);font-weight:600;line-height:1.06;letter-spacing:-.015em;
  font-size:var(--pl-text-7);color:var(--pl-ink);margin:0 0 var(--pl-s3);
}
.pl-h3{font-family:var(--pl-display);font-weight:600;font-size:var(--pl-text-5);letter-spacing:-.01em;color:var(--pl-ink);margin:0}

/* the rubricated word — struck in vermilion, with the engraver's underline */
.pl-rubric{position:relative;color:var(--pl-vermilion);font-style:italic;white-space:nowrap}
.pl-rubric svg{position:absolute;left:-1%;inline-size:102%;bottom:-.14em;block-size:.4em;overflow:visible}
.pl-rubric path{fill:none;stroke:var(--pl-vermilion);stroke-width:3;stroke-linecap:round}

.pl-deck{font-family:var(--pl-body);font-size:var(--pl-text-5);color:var(--pl-ink-soft);max-inline-size:38ch;margin:0}
.pl-deck b,.pl-lede b{color:var(--pl-ink);font-weight:600}
.pl-lede{font-size:var(--pl-text-4);color:var(--pl-ink-soft);max-inline-size:var(--pl-measure);margin:0 0 var(--pl-s4)}

.pl-prose{max-inline-size:var(--pl-measure)}
.pl-prose>*+*{margin-top:1.05em}
.pl-prose p{margin:0}
.pl-prose b,.pl-prose strong{color:var(--pl-ink);font-weight:600}
.pl-prose em{font-style:italic}
.pl-prose a{color:var(--pl-ink);text-decoration:underline;text-decoration-color:var(--pl-vermilion)}
/* a rubricated drop-letter to open a body of prose */
.pl-prose--initial>p:first-of-type::first-letter{
  font-family:var(--pl-display);font-weight:600;font-style:italic;
  font-size:3.1em;line-height:.8;float:left;margin:.06em .12em 0 0;color:var(--pl-vermilion);
}

/* the gloss / marginalia — the peer annotation of the Republic of Letters */
.pl-gloss{
  font-family:var(--pl-body);font-size:var(--pl-text-2);font-style:italic;color:var(--pl-ink-soft);
  padding-inline-start:1rem;border-inline-start:2px solid var(--pl-line-firm);
}
.pl-gloss__src{display:block;margin-top:.4rem;font-family:var(--pl-mono);font-style:normal;
  font-size:var(--pl-text-0);letter-spacing:.1em;text-transform:uppercase;color:var(--pl-ink-faint)}

/* ---------------------------------------------------------------------------
   8 · THE INSTRUMENT LEDGER — Prussian-blue, the measured reading
   ------------------------------------------------------------------------- */
.pl-ledger{
  margin:var(--pl-s6) 0;border-block:var(--pl-hair) solid var(--pl-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
}
.pl-ledger__cell{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.25rem;border-inline-start:var(--pl-hair) solid var(--pl-line)}
.pl-ledger__cell:first-child{border-inline-start:none}
.pl-ledger__n{font-family:var(--pl-mono);font-size:var(--pl-text-6);color:var(--pl-prussian);font-weight:500;letter-spacing:-.01em;line-height:1.1}
.pl-ledger__l{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.16em;text-transform:uppercase;color:var(--pl-ink-faint)}

/* a single statistic, same instrument ink */
.pl-stat__n{font-family:var(--pl-mono);font-size:var(--pl-text-8);color:var(--pl-prussian);font-weight:500;line-height:1;letter-spacing:-.02em;display:block}
.pl-stat__l{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.16em;text-transform:uppercase;color:var(--pl-ink-faint);margin-top:.4rem;display:block}

/* ---------------------------------------------------------------------------
   9 · ENGRAVED FIGURE HELPERS — copperplate line-art
   ------------------------------------------------------------------------- */
.pl-figure{display:flex;align-items:center;justify-content:center}
.pl-figure svg{inline-size:100%;block-size:auto;max-inline-size:18rem}
/* the burin grammar — modifiers are self-sufficient (carry fill:none/stroke)
   so a figure can hatch with .pl-eng--fine alone without a black-blob fallback */
.pl-eng,.pl-eng--fine,.pl-eng--heavy{fill:none;stroke:var(--pl-ink);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pl-eng{stroke-width:var(--bw-4)}
.pl-eng--fine{stroke-width:var(--bw-2)}
.pl-eng--heavy{stroke-width:var(--bw-5)}
/* hatch tone is a SHALLOW cut — thin and full-ink, not a faded line */
.pl-eng-hatch{fill:none;stroke:var(--pl-ink);stroke-width:var(--bw-1);stroke-linecap:round;vector-effect:non-scaling-stroke}
.pl-eng-rubric{fill:none;stroke:var(--pl-vermilion);stroke-width:var(--bw-4);vector-effect:non-scaling-stroke}
.pl-eng-rubric--heavy{stroke:var(--pl-vermilion);stroke-width:var(--bw-5);fill:none;vector-effect:non-scaling-stroke}
.pl-eng-live{fill:var(--pl-vermilion)}
.pl-caption{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.16em;text-transform:uppercase;color:var(--pl-ink-faint);text-align:center;margin-top:.7rem}
.pl-caption em{color:var(--pl-vermilion);font-style:normal}

/* ---------------------------------------------------------------------------
   10 · THE COLOPHON / THE PRESS-STRIP (the world reaching the CLI)
   ------------------------------------------------------------------------- */
.pl-colophon{
  margin-top:var(--pl-s7);padding-top:var(--pl-s5);border-top:var(--pl-hair) solid var(--pl-line-firm);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center;
}
.pl-press{
  font-family:var(--pl-mono);font-size:var(--pl-text-2);line-height:1.95;
  background:var(--pl-paper-sunk);border:var(--pl-hair) solid var(--pl-line);border-radius:var(--pl-radius);
  padding:1rem 1.2rem;
  box-shadow:inset 1px 1px 0 rgba(255,250,235,.5), inset -1px -2px 5px rgba(36,29,20,.08);
  overflow-x:auto;
}
[data-leaf="candlelight"] .pl-press{box-shadow:inset 1px 1px 0 rgba(239,226,198,.06), inset -1px -2px 6px rgba(0,0,0,.3)}
.pl-press .pr{color:var(--pl-ink-faint)}
.pl-press .cm{color:var(--pl-ink)}
.pl-press .ok{color:var(--pl-verdigris)}
.pl-press .ok::before{content:"✓ "}
.pl-press .no{color:var(--pl-vermilion)}

.pl-maker .mark{
  font-family:var(--pl-display);font-style:italic;font-weight:600;font-size:var(--pl-text-6);
  color:var(--pl-ink);line-height:1.2;margin:0;
  background:linear-gradient(100deg,var(--pl-ink) 0 38%,var(--pl-ormolu-lit) 50%,var(--pl-ink) 62% 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.pl-maker .sig{display:block;margin-top:.6rem;font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.2em;text-transform:uppercase;color:var(--pl-ink-faint)}
.pl-maker .sig b{color:var(--pl-vermilion);font-weight:400}

/* ---------------------------------------------------------------------------
   11 · ATOMS — buttons, badges, chips, rules, the live dot
   ------------------------------------------------------------------------- */
/* buttons are struck stamps: raised off the paper, pressed down when used */
.pl-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--pl-mono);font-size:var(--pl-text-1);letter-spacing:.14em;text-transform:uppercase;
  padding:.74rem 1.3rem;border-radius:var(--pl-radius);border:var(--pl-hair) solid var(--pl-ink);
  color:var(--pl-ink);background:var(--pl-paper);cursor:pointer;text-decoration:none;
  box-shadow:0 2px 0 var(--pl-line-strong);
  transition:background-color .18s var(--pl-ease),color .18s var(--pl-ease),border-color .18s,transform .07s,box-shadow .1s;
}
.pl-btn:hover{background:var(--pl-ink);color:var(--pl-paper)}
.pl-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--pl-line-strong),inset 0 2px 5px rgba(36,29,20,.3)}
/* the primary — a struck vermilion seal, raised on its own ink-shadow */
.pl-btn--strike{border-color:var(--pl-vermilion);background:var(--pl-vermilion);color:var(--pl-paper);box-shadow:0 2px 0 #7c1f11,0 10px 18px -10px rgba(197,51,29,.6)}
.pl-btn--strike:hover{background:var(--pl-vermilion-lit);border-color:var(--pl-vermilion-lit);color:var(--pl-paper)}
.pl-btn--strike:active{transform:translateY(2px);box-shadow:0 0 0 #7c1f11,inset 0 2px 6px rgba(0,0,0,.35)}
.pl-btn--quiet{border-color:var(--pl-line-firm);color:var(--pl-ink-soft);background:transparent;box-shadow:none}
.pl-btn--quiet:hover{background:transparent;border-color:var(--pl-ink);color:var(--pl-ink)}

.pl-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.18em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:var(--pl-radius);border:var(--pl-hair) solid var(--pl-line-firm);color:var(--pl-ink-soft);
}
.pl-badge--rubric{border-color:var(--pl-vermilion);color:var(--pl-vermilion)}
.pl-badge--instrument{border-color:var(--pl-prussian);color:var(--pl-prussian)}

/* the honesty chip — validated vs asserted */
.pl-chip{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.12em;text-transform:uppercase;padding:.16rem .5rem;border-radius:1px;display:inline-flex;gap:.35rem;align-items:center}
.pl-chip--validated{background:color-mix(in oklab,var(--pl-verdigris) 18%,transparent);color:var(--pl-verdigris)}
.pl-chip--asserted{background:color-mix(in oklab,var(--pl-ink-faint) 18%,transparent);color:var(--pl-ink-soft)}
.pl-chip--new{background:color-mix(in oklab,var(--pl-vermilion) 16%,transparent);color:var(--pl-vermilion)}

.pl-live-dot{display:inline-block;inline-size:.55rem;block-size:.55rem;border-radius:50%;background:var(--pl-verdigris);box-shadow:0 0 0 0 color-mix(in oklab,var(--pl-verdigris) 60%,transparent)}

.pl-rule{border:none;border-top:var(--pl-hair) solid var(--pl-line);margin:var(--pl-s6) 0}
.pl-rule--firm{border-top-color:var(--pl-line-firm)}

/* ---------------------------------------------------------------------------
   12 · SURFACES — plate panel, framed figure, swatch
   ------------------------------------------------------------------------- */
.pl-panel{
  background:var(--pl-paper-sunk);border:var(--pl-hair) solid var(--pl-line-firm);border-radius:var(--pl-radius);
  padding:var(--pl-s5);
  box-shadow:inset 2px 2px 0 rgba(255,250,235,.55), inset -2px -3px 6px rgba(36,29,20,.12);
}
[data-leaf="candlelight"] .pl-panel{box-shadow:inset 2px 2px 0 rgba(239,226,198,.07), inset -2px -3px 7px rgba(0,0,0,.35)}
.pl-frame{border:var(--pl-hair) solid var(--pl-line-firm);border-radius:var(--pl-radius);padding:var(--pl-s5)}

.pl-swatch{display:flex;flex-direction:column;gap:.5rem}
.pl-swatch__chip{block-size:4.5rem;border-radius:var(--pl-radius);border:var(--pl-hair) solid var(--pl-line-firm)}
.pl-swatch__name{font-family:var(--pl-display);font-weight:600;font-size:var(--pl-text-3)}
.pl-swatch__meta{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.08em;color:var(--pl-ink-faint)}

/* ---------------------------------------------------------------------------
   13 · THE KEYED PLATE — the interactive teaching figure
   ------------------------------------------------------------------------- */
.pl-keyed{border:var(--pl-hair) solid var(--pl-line-firm);border-radius:var(--pl-radius);overflow:hidden}
.pl-keyed__keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));border-bottom:var(--pl-hair) solid var(--pl-line-firm)}
.pl-keyed__key{
  appearance:none;background:transparent;border:none;cursor:pointer;
  padding:var(--pl-s5) var(--pl-s4);text-align:center;border-inline-start:var(--pl-hair) dashed var(--pl-line);
  font-family:inherit;color:var(--pl-ink);transition:background-color .2s var(--pl-ease);
}
.pl-keyed__key:first-child{border-inline-start:none}
.pl-keyed__key:hover{background:var(--pl-paper-sunk)}
.pl-keyed__key[aria-selected="true"]{background:var(--pl-paper-sunk)}
.pl-keyed__key .ltr{font-family:var(--pl-display);font-style:italic;font-weight:600;font-size:var(--pl-text-6);color:var(--pl-vermilion);display:block}
.pl-keyed__key .lbl{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.14em;text-transform:uppercase;color:var(--pl-ink-soft);display:block;margin-top:.3rem}
.pl-keyed__body{padding:var(--pl-s5);min-block-size:5.5rem}
.pl-keyed__part{display:none}
.pl-keyed__part[data-active="true"]{display:block;animation:pl-ink-in .4s var(--pl-ease)}

/* ---------------------------------------------------------------------------
   14 · LONGFORM PRIMITIVES — lineage, steps, quote, code, spec/dl
   ------------------------------------------------------------------------- */
.pl-lineage{display:flex;flex-wrap:wrap;align-items:stretch;border:var(--pl-hair) solid var(--pl-line-firm);border-radius:var(--pl-radius)}
.pl-lineage__step{
  flex:1 1 8rem;padding:var(--pl-s4) var(--pl-s4);position:relative;
  border-inline-start:var(--pl-hair) solid var(--pl-line);
  font-family:var(--pl-display);font-size:var(--pl-text-4);color:var(--pl-ink-soft);
}
.pl-lineage__step:first-child{border-inline-start:none}
.pl-lineage__step:last-child{color:var(--pl-vermilion);font-style:italic}

.pl-steps{list-style:none;margin:0;padding:0;counter-reset:pl-step}
.pl-steps li{position:relative;padding:0 0 var(--pl-s4) 2.8rem;counter-increment:pl-step}
.pl-steps li::before{
  content:counter(pl-step);position:absolute;left:0;top:-.1rem;
  inline-size:1.9rem;block-size:1.9rem;border-radius:50%;border:1.5px solid var(--pl-vermilion);color:var(--pl-vermilion);
  display:grid;place-items:center;font-family:var(--pl-display);font-style:italic;font-weight:600;font-size:.95rem;
}
.pl-steps li:not(:last-child)::after{content:"";position:absolute;left:.92rem;top:1.9rem;bottom:.2rem;border-inline-start:var(--pl-hair) dashed var(--pl-line-firm)}

.pl-quote{border:none;margin:0;padding:0}
.pl-quote blockquote{font-family:var(--pl-display);font-style:italic;font-size:var(--pl-text-6);line-height:1.28;color:var(--pl-ink);margin:0;max-inline-size:30ch;text-wrap:balance}
.pl-quote cite{display:block;margin-top:var(--pl-s3);font-family:var(--pl-mono);font-style:normal;font-size:var(--pl-text-0);letter-spacing:.18em;text-transform:uppercase;color:var(--pl-ink-faint)}

.pl-code{font-family:var(--pl-mono);font-size:var(--pl-text-2);background:var(--pl-paper-sunk);border:var(--pl-hair) solid var(--pl-line);border-radius:var(--pl-radius);padding:.12rem .4rem;color:var(--pl-ink)}
pre.pl-code{padding:1rem 1.2rem;overflow-x:auto;line-height:1.7}

/* the spec reads as an engraved register: a heavy head-rule, ruled rows, tabular figures */
.pl-spec{inline-size:100%;border-collapse:collapse;font-size:var(--pl-text-2);font-variant-numeric:tabular-nums oldstyle-nums}
.pl-spec th,.pl-spec td{text-align:left;padding:.7rem .9rem;border-bottom:var(--pl-hair) solid var(--pl-line);vertical-align:top}
.pl-spec thead th{border-bottom:2px solid var(--pl-ink);color:var(--pl-vermilion)}
.pl-spec th{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.15em;text-transform:uppercase;color:var(--pl-ink-faint);font-weight:400}
.pl-spec td:first-child{font-family:var(--pl-display);font-weight:600;color:var(--pl-ink)}
.pl-spec tbody tr{transition:background-color .15s var(--pl-ease)}
.pl-spec tbody tr:hover{background:color-mix(in oklab,var(--pl-prussian) 6%,transparent)}

/* ---------------------------------------------------------------------------
   15 · DISCLOSURE, WAYFINDING, FEEDBACK
   ------------------------------------------------------------------------- */
.pl-disclosure{border-block:var(--pl-hair) solid var(--pl-line)}
.pl-disclosure summary{cursor:pointer;padding:1rem 0;font-family:var(--pl-display);font-weight:600;font-size:var(--pl-text-4);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.pl-disclosure summary::-webkit-details-marker{display:none}
.pl-disclosure summary::after{content:"+";color:var(--pl-vermilion);font-family:var(--pl-mono);transition:transform .2s var(--pl-ease)}
.pl-disclosure[open] summary::after{content:"–"}
.pl-disclosure__body{padding:0 0 1.1rem}

/* the term / tooltip — first-use gloss inline */
.pl-term{border-bottom:1px dotted var(--pl-vermilion);cursor:help;color:inherit}

/* the chapter rail — sticky index */
.pl-rail{position:sticky;top:var(--pl-gutter);align-self:start;font-family:var(--pl-mono);font-size:var(--pl-text-1)}
.pl-rail a{display:block;padding:.32rem 0;color:var(--pl-ink-faint);text-decoration:none;letter-spacing:.04em;border-inline-start:2px solid transparent;padding-inline-start:.7rem}
.pl-rail a:hover,.pl-rail a[aria-current="true"]{color:var(--pl-ink);border-inline-start-color:var(--pl-vermilion)}
.pl-rail__sec{display:block;margin:1rem 0 .3rem;color:var(--pl-vermilion);letter-spacing:.22em;text-transform:uppercase;font-size:var(--pl-text-0)}

.pl-alert{border:var(--pl-hair) solid var(--pl-line-firm);border-inline-start:3px solid var(--pl-vermilion);border-radius:var(--pl-radius);padding:var(--pl-s4) var(--pl-s5);background:var(--pl-paper-sunk)}
.pl-alert--instrument{border-inline-start-color:var(--pl-prussian)}
.pl-alert__t{font-family:var(--pl-display);font-weight:600;margin:0 0 .3rem}

/* ---------------------------------------------------------------------------
   16 · LAYOUT UTILITIES (used by the book + research bodies)
   ------------------------------------------------------------------------- */
.pl-grid{display:grid;gap:clamp(1.25rem,1rem + 2vw,2.5rem)}
.pl-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.pl-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.pl-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
/* the spread: a reading column against a living margin (rail | body | gloss) */
.pl-spread{
  display:grid;align-items:start;
  grid-template-columns:[rail] minmax(0,9rem) [body] minmax(0,var(--pl-measure)) [gloss] minmax(13rem,1fr);
  gap:clamp(1.25rem,1rem + 2vw,3rem);
}
@container plate (max-width:900px){
  .pl-spread{grid-template-columns:[body] minmax(0,var(--pl-measure)) [gloss] minmax(0,1fr)}
  .pl-spread__rail{display:none}
}
@container plate (max-width:620px){
  .pl-spread{grid-template-columns:1fr}
}
.pl-spread__rail{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.14em;text-transform:uppercase;color:var(--pl-ink-faint);line-height:2}
.pl-spread__rail b{color:var(--pl-vermilion);font-weight:400}

.pl-section{padding-block:var(--pl-s7)}
.pl-section + .pl-section{border-top:var(--pl-hair) solid var(--pl-line)}

/* ---------------------------------------------------------------------------
   16b · TREATISE APPARATUS — so a documentation page can *be* a bound volume
   ------------------------------------------------------------------------- */
/* a document-width leaf: a treatise page, not a full-bleed product hero */
.pl-leaf.pl-doc{--pl-canvas-max:78rem}

/* the running head of a leaf (quieter than .pl-furniture) */
.pl-runhead{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.26em;text-transform:uppercase;
  color:var(--pl-ink-faint);padding-bottom:.8rem;margin-bottom:var(--pl-s5);
  border-bottom:var(--pl-hair) solid var(--pl-line);
}
.pl-runhead b{color:var(--pl-vermilion);font-weight:400}

/* "Plate V" — the engraved plate number that opens a leaf */
.pl-platenum{font-family:var(--pl-display);font-style:italic;font-weight:600;font-size:var(--pl-text-4);color:var(--pl-vermilion);margin:0 0 .3rem}

/* the discourse title — the treatise heading */
.pl-discourse{font-family:var(--pl-display);font-weight:600;line-height:1.04;letter-spacing:-.016em;font-size:var(--pl-text-8);color:var(--pl-ink);margin:0 0 var(--pl-s5);text-wrap:balance}

/* the reading body of a discourse: a column at measure against a living margin */
.pl-discourse-grid{display:grid;align-items:start;grid-template-columns:minmax(0,var(--pl-measure)) minmax(13rem,1fr);gap:clamp(1.5rem,1rem + 3vw,3.5rem)}
@container plate (max-width:680px){.pl-discourse-grid{grid-template-columns:1fr}}

/* a FIGURE — the live demonstration, a struck plate RESTING on the leaf (see THE LAW, §4) */
.pl-fig{margin:var(--pl-s5) 0 0;border:var(--pl-hair) solid var(--pl-line-firm);border-radius:var(--pl-radius);background:var(--pl-paper);padding:clamp(1.2rem,.8rem + 1.6vw,2.2rem);
  box-shadow:inset 2px 2px 0 rgba(255,250,235,.6), inset -2px -3px 8px rgba(36,29,20,.14), 0 18px 40px -30px rgba(36,29,20,.5)}
[data-leaf="candlelight"] .pl-fig{box-shadow:inset 2px 2px 0 rgba(239,226,198,.07), inset -2px -3px 9px rgba(0,0,0,.4), 0 18px 46px -32px rgba(0,0,0,.75)}

/* the motion playground — a stage the reader strikes, draws, inks, and gilds */
.pl-stage{display:grid;place-items:center;gap:1rem;min-block-size:12rem;padding:var(--pl-s5);background:var(--pl-paper-sunk);border:var(--pl-hair) solid var(--pl-line);border-radius:var(--pl-radius);box-shadow:inset 2px 2px 0 rgba(255,250,235,.5),inset -2px -3px 7px rgba(36,29,20,.1)}
[data-leaf="candlelight"] .pl-stage{box-shadow:inset 2px 2px 0 rgba(239,226,198,.06),inset -2px -3px 8px rgba(0,0,0,.35)}
.pl-stage__plate{inline-size:min(22rem,80%);aspect-ratio:3/2;background:var(--pl-paper);border:var(--pl-hair) solid var(--pl-line-firm);border-radius:var(--pl-radius);display:grid;place-items:center;box-shadow:inset 2px 2px 0 rgba(255,250,235,.6),inset -2px -3px 8px rgba(36,29,20,.14);position:relative;overflow:hidden}
.pl-stage__plate svg{inline-size:80%;height:auto}
.pl-stage__plate .pl-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,var(--pl-ormolu-lit) 50%,transparent 58%);opacity:0;transform:translateX(-130%);pointer-events:none;mix-blend-mode:screen}
.pl-demos{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pl-demos .pl-btn{box-shadow:0 2px 0 var(--pl-line-strong)}
.pl-figcaption{margin-top:var(--pl-s4);padding-top:.7rem;border-top:var(--pl-hair) solid var(--pl-line);font-family:var(--pl-body);font-style:italic;font-size:var(--pl-text-2);color:var(--pl-ink-soft);text-align:center;text-wrap:balance}
.pl-figcaption b{font-family:var(--pl-mono);font-style:normal;font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:var(--pl-text-0);color:var(--pl-vermilion);margin-right:.5rem}
.pl-figcaption code{font-family:var(--pl-mono);font-style:normal;font-size:var(--pl-text-0);color:var(--pl-ink-faint)}

/* the Table of the Plates — the volume's own index (replaces a docs sidebar) */
.pl-toc{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(2rem,4vw,4.5rem)}
@container plate (max-width:640px){.pl-toc{columns:1}}
.pl-toc li{break-inside:avoid}
.pl-toc a{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;color:var(--pl-ink);padding:.5rem 0;border-bottom:var(--pl-hair) dotted var(--pl-line-firm)}
.pl-toc a:hover{color:var(--pl-vermilion)}
.pl-toc a:hover .pl-toc__f{color:var(--pl-vermilion)}
.pl-toc__n{font-family:var(--pl-display);font-style:italic;color:var(--pl-vermilion);min-inline-size:2.6rem;font-size:var(--pl-text-3)}
.pl-toc__t{font-family:var(--pl-display);font-size:var(--pl-text-4);flex:1}
.pl-toc__f{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.1em;text-transform:uppercase;color:var(--pl-ink-faint)}

/* a printer's device / decorative rule between movements */
.pl-device{display:flex;align-items:center;justify-content:center;gap:1rem;margin:var(--pl-s6) auto;max-inline-size:24rem;color:var(--pl-vermilion)}
.pl-device::before,.pl-device::after{content:"";block-size:1px;background:var(--pl-line-firm);flex:1}
.pl-device span{font-size:.9rem;letter-spacing:.5em;color:var(--pl-vermilion)}

/* ---------------------------------------------------------------------------
   17 · MOTION — keyframes; the JS adds the press strike + burin draw
   ------------------------------------------------------------------------- */
@keyframes pl-ink-in{from{opacity:0;transform:translateY(6px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes pl-breathe{0%,100%{opacity:1}50%{opacity:.35}}
.pl-breathe{animation:pl-breathe 2.4s var(--pl-ease) infinite}

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


/* ===========================================================================
   THE PLATE-WORLD COMPONENT LIBRARY  ·  folded from preview/_wb/ (Eli builders)
   Sections 18-23. The new fill-based texture grammar (swelling line + tone +
   filter rack) and the components cut on it. Additive: the existing stroke
   grammar (.pl-eng, sec 9) and leaves I-XIII are untouched. The SVG <defs>
   (#pl-tone-*, #pl-rag, #pl-burin-hand, #pl-ink-spread, #pl-plate-bite) are
   inlined once in each page shell that uses these components.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   18 · THE TEXTURE FOUNDATION · swelling line, tone library, filter rack
   (folded from _wb/00-foundation.css)
   ------------------------------------------------------------------------- */
/* ============================================================================
   00 · FOUNDATION — THE INTAGLIO TEXTURE GRAMMAR
   The shared cut-grammar of "The Plate." Three things the book specified and
   never built, built here as the DEFINITIVE reference the five component
   builders consume verbatim:

     1. THE SWELLING LINE  (.pl-swell)        — the burin's filled-lens contour
     2. THE TONE LIBRARY   (#pl-tone-1..4, #pl-stipple) — grey = density, not opacity
     3. THE FILTER RACK    (#pl-rag / #pl-burin-hand / #pl-ink-spread / #pl-plate-bite)

   THE LAW THIS OBEYS (from torad-world.css §4 and the Tenets):
   · Tone is CUT-DEPTH, never opacity — a mark is dark because the burin bit
     harder (a heavier rung on --bw-1..--bw-6) or because parallel cuts pack
     closer. No opacity on engraved marks. Ever.
   · Filters live on the leaf's ONE paper surface + its one-or-two hero figures
     only (the [data-pl-engrave] hook), NEVER on buttons/cells/atoms. Perf is a
     named number: LCP <= 2s; the rag filter is bakeable to a static data-URI.
   · Reduced-motion yields the FINISHED print: the global *{animation:none} does
     NOT kill `filter`, so every filter here ships its own explicit kill below,
     and the static render is itself a composed, finished plate.

   Namespace: pl- only. Tokens: the existing --pl-* / --bw-* + the few new ones
   declared here. NO apex t- classes. Light azimuth ~118° (the upper-left window
   wash that body.pl already paints).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   NEW TOKENS — declared once, here, for the whole world to share
   ------------------------------------------------------------------------- */
:root{
  /* DOCUMENTATION ANCHORS, not live drivers. SVG filter-primitive attributes
     (baseFrequency, surfaceScale, scale, stdDeviation) are plain XML attributes,
     NOT CSS properties — a var() there does not resolve. So these record what
     the baked numbers MEAN; the registers are swapped by pointing `filter:` at a
     register-tuned id (see --pl-rag swap below), never by re-driving a number. */
  --pl-rag-relief:1.05;  /* #pl-rag surfaceScale — the rag tooth's relief        */
  --pl-tremor:1.1;       /* #pl-burin-hand scale — the graver's hand-wander (px) */
  --pl-bite:0.7;         /* #pl-ink-spread stdDeviation — iron-gall pool radius  */
}

/* ===========================================================================
   1 · THE SWELLING LINE  —  .pl-swell
   ---------------------------------------------------------------------------
   The burin's signature. NOT a variable stroke-width: a FILLED, CLOSED LENS
   that tapers -> swells -> tapers, fattest on the LOWER-RIGHT where the
   upper-left (~118°) window light would carve the deepest shadow. This is what
   replaces uniform stroke-width for any PRIMARY contour meant to carry weight.

   GENERATOR (the recipe every builder follows to author a swell <path>):
   ----------------------------------------------------------------------------
   Given a baseline from A(x0,y0) to B(x1,y1) and a belly half-height `b`
   (in user units, the max half-thickness at the fat point):
     1. axis        L = B - A ;  n_hat = unit normal of L, oriented toward
                    LOWER-RIGHT  (i.e. choose the normal whose (x+y) is larger),
                    so the bulge falls on the shadow flank.
     2. fat point   t* = 0.62 along L  (golden-ish, never dead-centre — the
                    burin accelerates out of the entry nick, so the belly sits
                    past midpoint toward the exit).
     3. one rim     C+(t) = A + t·L + b·shape(t)·n_hat
        other rim   C-(t) = A + t·L - b·k·shape(t)·n_hat   (k≈0.45: the line
                    is asymmetric — it carries more meat on the shadow side)
        where shape(t) = sin(π·t)^1.35  → 0 at both ends, 1 at the belly,
        skewed fat toward t*.
     4. emit a closed path: M at A, the C+ rim out to B as a smooth curve,
        the C- rim back to A, Z.  Fill it; do NOT stroke it.
   For a plain straight swell, A and B are horizontal and n_hat points down-right;
   for a curved contour, sample the curve and offset each sample by the rim eqn.
   See the worked specimens in 00-foundation.demo.html (a straight rule, an arc,
   and the carved-sphere terminator are all generated this way).
   ------------------------------------------------------------------------- */
.pl-swell{
  fill:var(--pl-ink);
  stroke:none;
  /* a swelling line is a SOLID body; if a builder needs it to read heavier in
     candlelight the answer is a fatter lens (more `b`), never opacity. */
}
.pl-swell--rubric{fill:var(--pl-vermilion)}      /* the one struck contour */
.pl-swell--instrument{fill:var(--pl-prussian)}   /* a counted/measured edge */
.pl-swell--live{fill:var(--pl-verdigris)}        /* the offline mark        */
/* a hairline swell (a secondary contour that still wants the organic taper) */
.pl-swell--fine{fill:var(--pl-ink-soft)}

/* ===========================================================================
   2 · THE TONE LIBRARY  —  #pl-tone-1..4  +  #pl-stipple
   ---------------------------------------------------------------------------
   Engraved greys as SVG <pattern> FILLS. Tone is DENSITY, never opacity:
     #pl-tone-1  fine parallel hatch        — the lightest grey
     #pl-tone-2  denser parallel hatch      — a mid grey
     #pl-tone-3  cross-hatch (two passes)   — a firm grey
     #pl-tone-4  Goltzius dot-and-lozenge   — the deepest dark (engraver's
                 trick: a lozenge mesh with a dot dropped in each diamond, the
                 way Goltzius packs the blackest passages of a copperplate)
     #pl-stipple soft random-ish dots       — for cheeks, clouds, soft passages
   Apply by filling a shape:  fill="url(#pl-tone-2)".  A CARVED SPHERE is built
   by stacking shapes clipped to the disc, each filled with a denser tone toward
   the shadow, finished with a .pl-swell terminator — proof that tone=density.
   The <pattern> elements themselves live in the inline <defs> (see
   00-foundation.defs.html); these classes only tune ink colour + a perf note.
   ------------------------------------------------------------------------- */
/* The pattern strokes inherit `currentColor` so a builder can recolour a whole
   tone field by setting color on the filled element — e.g. a Prussian gauge
   shadow vs an iron-gall one — without authoring four more patterns. */
.pl-toned{color:var(--pl-ink)}                 /* default ink for tone fills  */
.pl-toned--instrument{color:var(--pl-prussian)}
.pl-toned--rubric{color:var(--pl-vermilion)}
.pl-toned--soft{color:var(--pl-ink-soft)}

/* ===========================================================================
   3 · THE FILTER RACK  —  the four named physical facts
   ---------------------------------------------------------------------------
   Each filter encodes ONE physical truth of intaglio-on-rag. They render
   NOTHING by themselves (the <defs> are invisible, CSP-clean). They attach via
   the [data-pl-engrave] hook ONLY — never to an atom.

     #pl-rag         the laid-paper felt: a directional tooth lit from ~118°
                     plus faint laid/chain ribbing. Goes on the LEAF paper.
                     BAKEABLE: this is a static, content-independent texture —
                     it can be rendered once to a data-URI / .png and set as a
                     background-image to drop the runtime filter cost to zero.
     #pl-burin-hand  a 1.1-scale micro-tremor displacement so cut lines are not
                     mechanically smooth. Goes on a WHOLE figure <svg>.
     #pl-ink-spread  the wet bite: a tight blur->threshold re-sharpen plus a
                     faint warm pooled halo. HEAVY / vermilion marks ONLY —
                     never fine hatch (it would clog the tone).
     #pl-plate-bite  a debossed bevel via specular lighting (~118° azimuth) —
                     for a figure FRAME, to read as a plate pressed into rag.
   ------------------------------------------------------------------------- */

/* the leaf's paper tooth — exactly ONE per leaf, on the paper surface only.
   Put data-pl-rag on the .pl-plate / leaf; nowhere else. The candlelight register
   swaps to the night-tuned filter id (a darker rag scatters less). This swap —
   pointing `filter:` at a second id — is how a register re-tunes a filter, since
   the primitive NUMBERS themselves cannot be driven by CSS vars. */
[data-pl-rag]{ filter:url(#pl-rag); }
[data-leaf="candlelight"] [data-pl-rag]{ filter:url(#pl-rag-night); }

/* the figure hook. A [data-pl-engrave] container's child <svg> gets the hand
   tremor so its cuts quiver like a real graver line. This is additive to the
   JS draw-on; it does not replace it. */
[data-pl-engrave] > svg{ filter:url(#pl-burin-hand); }

/* opt-in, per-figure, for the two heavier facts. A builder adds these as
   attributes on the SAME figure container when the figure warrants them. */
[data-pl-bite]  > svg{ filter:url(#pl-ink-spread); }   /* heavy/vermilion fig */
[data-pl-frame] > svg{ filter:url(#pl-plate-bite); }   /* a framed plate fig  */
/* a figure can want BOTH the hand AND the bite — chain them so neither is lost
   (the hand quivers the cut, then the bite pools ink past the heavy edges). */
[data-pl-engrave][data-pl-bite] > svg{ filter:url(#pl-burin-hand) url(#pl-ink-spread); }

/* ---------------------------------------------------------------------------
   REDUCED-MOTION KILL — MANDATORY.
   The world's global *{animation:none;transition:none} does NOT touch `filter`.
   So we kill every rack filter explicitly and let the FINISHED, composed plate
   stand. The swelling line + the tone patterns are already static art and need
   no kill — they are the finished print. Only the four filters drop out.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  [data-pl-rag],
  [data-pl-engrave] > svg,
  [data-pl-bite]  > svg,
  [data-pl-frame] > svg,
  [data-pl-engrave][data-pl-bite] > svg{ filter:none; }
}

/* ---------------------------------------------------------------------------
   THE CARVED SPHERE — the canonical proof, as reusable structure.
   A sphere reads round because tone DENSIFIES toward the lower-right shadow and
   the upper-left stays bare paper (the highlight is the absence of cuts). The
   geometry is authored in the figure's <svg> (clipped tone bands + a swelling
   terminator); these classes only carry the figure box + caption rhythm so a
   builder drops a sphere into any leaf with consistent sizing.
   ------------------------------------------------------------------------- */
.pl-specimen{display:flex;flex-direction:column;align-items:center;gap:var(--pl-s3)}
.pl-specimen svg{inline-size:100%;block-size:auto;max-inline-size:15rem}
.pl-specimen__cap{
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.16em;
  text-transform:uppercase;color:var(--pl-ink-faint);text-align:center;
}
.pl-specimen__cap em{color:var(--pl-vermilion);font-style:normal}

/* the tone-ramp strip — five swatches, light->dark, proving DENSITY not opacity.
   Each cell is a struck-plate well in the rag, the tone field carved inside. */
.pl-ramp{
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--pl-s2);
  align-items:end;
}
.pl-ramp__cell{display:flex;flex-direction:column;gap:.5rem}
.pl-ramp__well{
  aspect-ratio:1;border-radius:var(--pl-radius);overflow:hidden;
  border:var(--pl-hair) solid var(--pl-line-firm);
  box-shadow:inset 2px 2px 0 rgba(255,250,235,.55),inset -2px -3px 6px rgba(36,29,20,.12);
}
[data-leaf="candlelight"] .pl-ramp__well{box-shadow:inset 2px 2px 0 rgba(239,226,198,.07),inset -2px -3px 7px rgba(0,0,0,.35)}
.pl-ramp__well svg{display:block;inline-size:100%;block-size:100%}
.pl-ramp__lbl{
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.1em;
  text-transform:uppercase;color:var(--pl-ink-faint);text-align:center;line-height:1.3;
}
.pl-ramp__lbl b{display:block;color:var(--pl-prussian);font-weight:500;font-size:var(--pl-text-1)}

/* a labelled specimen row used by the demo to show the swell next to a plain
   stroke, so the difference (filled lens vs uniform width) is unmistakable. */
.pl-specrow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:var(--pl-s5);align-items:center;
}


/* ---------------------------------------------------------------------------
   19 · HERO FIGURES · the rolling press, the keyed planche, the counted gauge
   (folded from _wb/01-figures.css)
   ------------------------------------------------------------------------- */
/* ============================================================================
   01 · THE THREE HERO FIGURES — RE-CUT AS REAL STRUCK INTAGLIO
   ----------------------------------------------------------------------------
   The book named three signature figures and only ever wire-framed them. Here
   they are CARVED: copperplate volumes built from the foundation's swelling
   line (.pl-swell) + tone library (#pl-tone-1..4, #pl-stipple) + filter rack
   ([data-pl-engrave] tremor, [data-pl-bite] wet bite on the ONE rubric). The
   SVG geometry lives in the demo (and is reused verbatim by the apex); this
   partial carries ONLY the figure scaffolding, the keying apparatus, and the
   handful of marks that recolour a swell/tick to a pigment's fixed job.

     THE ROLLING PRESS  (.pl-rollpress)   — the world's keystone. Two stacked
       cylinders, a star-wheel, the bed; it strikes the model small enough to
       hold and the LIVE model sits glowing in its window. The hero; may break
       the measure. ONE vermilion strike = the star-wheel (the maker's turn).
     THE PLANCHE        (.pl-planche)  — the keyed exploded figure: QGRE engine
       -> TQ4 forme -> fp4 substrate, keyed A·B·C along the 118° axis. The burin
       re-cuts the CHOSEN subassembly in vermilion; the rest ghost to fine hatch.
     THE GAUGE          (.pl-gauge)    — the Prussian quarter/cosine instrument:
       an engraved tick-scale and a swelling needle settling on a counted tick.

   THE LAW THIS OBEYS (torad-world.css §4 + the Tenets):
   · Tone is CUT-DEPTH, never opacity. Volume = denser tone toward the lower-
     right shadow (light ~118°, the upper-left window). A highlight is bare paper.
   · ONE rubric to a view: exactly one vermilion strike carries voltage. Every
     other vermilion here is STRUCTURAL ink (a key letter, a tick), never a
     second strike — so each figure exposes a single .pl-…--strike element.
   · Engraved figures, not icons: every primary contour is a filled swelling lens.
   · Depth encodes a physical fact (a cylinder's round, a part lifted off the
     stack, a needle's cast shadow), never decoration.
   · Reduced-motion yields the finished print. The foundation already kills the
     four rack filters; the ONE new motion this file adds (the needle's settle +
     the press-window breath) ships its own explicit kill at the foot.
   · Perf is a named number: filters stay on the leaf paper + these hero figures
     only (the [data-pl-engrave] hook). No per-atom filters. The needle/window
     animations are transform/opacity only (compositor-cheap); LCP unaffected.

   Namespace: pl- only. New tokens declared at the top with a comment. Light
   azimuth ~118°. NO apex t- classes.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   NEW TOKENS — declared once, here. A page author may set --pl-fig-w to size a
   figure box; the rest are internal rhythm a builder rarely touches.
   ------------------------------------------------------------------------- */
:root{
  --pl-fig-w:min(100%, 34rem);   /* default carved-figure measure             */
  --pl-figkey-lead:var(--pl-line-strong); /* the keyed lead-line ink (iron-gall)  */
  --pl-needle-settle:1.6s;       /* the gauge needle's settle to its tick      */
  --pl-window-breath:7s;         /* the live model's slow verdigris breath     */
}

/* ===========================================================================
   SHARED FIGURE SCAFFOLD — the carved-figure stage every hero sits on
   ---------------------------------------------------------------------------
   A struck figure is a plate RESTING on the leaf: it reuses the foundation's
   .pl-specimen rhythm but gives the SVG room to be a real engraving (not a
   thumbnail). The caption uses the world's .pl-figcaption. The figure carries
   the [data-pl-engrave] hook on its container so the whole cut quivers once.
   ------------------------------------------------------------------------- */
.pl-cutfig{
  display:flex;flex-direction:column;align-items:center;gap:var(--pl-s3);
  inline-size:var(--pl-fig-w);margin-inline:auto;
}
.pl-cutfig svg{inline-size:100%;block-size:auto;display:block;overflow:visible}
/* the keystone (the press) is allowed to break the measure a hair, the way a
   foldout plate overruns the text block in the book. */
.pl-cutfig--keystone{--pl-fig-w:min(100%, 40rem)}

/* the engraver's key letter — a serifed capital at the head of a lead-line,
   the way Diderot keys an exploded part. Iron-gall by default; the CHOSEN part
   keys in vermilion (the one strike) via --strike. NOT an icon, a struck glyph. */
.pl-figkey{
  font-family:var(--pl-display);font-style:italic;font-weight:600;
  fill:var(--pl-ink);
}
.pl-figkey--instrument{fill:var(--pl-prussian)}
.pl-figkey--strike{fill:var(--pl-vermilion)}   /* reserved for the chosen part   */
/* the lead-line that ties a key letter to its part: a HAIRLINE swelling line,
   not a uniform rule — the burin drew it too. Authored as .pl-swell--fine in
   the markup; this only documents intent. The key's tick at the part end is a
   short structural vermilion stub (ink, not a strike) on the chosen lead only. */

/* a part's caption tag — the small mono label under a keyed subassembly. */
.pl-figtag{
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.16em;
  text-transform:uppercase;color:var(--pl-ink-faint);text-align:center;line-height:1.3;
}
.pl-figtag b{display:block;color:var(--pl-ink);font-weight:500;font-size:var(--pl-text-1);letter-spacing:.04em;text-transform:none}
.pl-figtag--instrument b{color:var(--pl-prussian)}
.pl-figtag--live b{color:var(--pl-verdigris)}
.pl-figtag--strike b{color:var(--pl-vermilion)}

/* ===========================================================================
   1 · THE ROLLING PRESS  —  .pl-rollpress   (the world's KEYSTONE)
   ---------------------------------------------------------------------------
   Re-cut so the press reads as a press BEFORE the caption: two round cylinders
   held in a timber body squeeze the copper plate on the bed; the spoked star-
   wheel on its axle drives it; the struck model emerges small-enough-to-hold.
   Pigment jobs on this figure:
   · iron-gall (.pl-swell / tone fills)  — the timber cheeks + head beam, the
     two round cylinders, the bed/plank, the plate, the emerging sheet.
   · ONE vermilion strike (.pl-rollpress__star) — the STAR-WHEEL (the rounce): a
     real 3/4 spoked capstan — a rim ellipse, five spokes cut as swelling lenses
     fat on the shadow flank, turned knobs at the ends, a hub the maker grips,
     mounted on a visible axle. It is the maker's turn, the single act that
     strikes the plate — the only thing that carries voltage. NOT an asterisk.
   · verdigris (.pl-rollpress__live)          — the LIVE MODEL in the press window:
     it ran, it is offline, nothing left the room. A slow breath (killed under
     reduced-motion to a steady-lit mark).
   The cylinders read ROUND by tone DENSIFYING down-right (bands authored in the
   markup, clipped to a capsule barrel + a left end-cap disc so the circular
   section shows); here we only colour the strike + the live window, drive the
   breath, and spin the wheel. Tone is density, never opacity.
   ------------------------------------------------------------------------- */
.pl-rollpress__star{                      /* the spoked star-wheel — THE strike    */
  fill:var(--pl-vermilion);           /* spokes/knobs/hub are filled vermilion  */
  transform-box:fill-box;transform-origin:center;  /* spin about its own hub    */
}
/* a slow continuous crank, as if the maker is turning it through the press.
   transform only = compositor-cheap; no layout, no filter re-run. The group is
   placed onto the lower journal in the markup (translate); transform-box:fill-box
   keeps this rotation about the wheel's OWN centre regardless of that translate.
   Killed below for reduced-motion (the wheel rests struck). */
@media (prefers-reduced-motion:no-preference){
  .pl-rollpress__star{animation:pl-star-turn 14s linear infinite}
}
@keyframes pl-star-turn{to{transform:rotate(360deg)}}

.pl-rollpress__live{                      /* the live model, breathing in the window */
  fill:var(--pl-verdigris);
  transform-box:fill-box;transform-origin:center;
}
.pl-rollpress__live-aura{fill:var(--pl-verdigris)}   /* the soft offline glow ring   */
@media (prefers-reduced-motion:no-preference){
  .pl-rollpress__live{animation:pl-window-breath var(--pl-window-breath) ease-in-out infinite}
  .pl-rollpress__live-aura{animation:pl-window-aura var(--pl-window-breath) ease-in-out infinite}
}
@keyframes pl-window-breath{0%,100%{transform:scale(.985)}50%{transform:scale(1.015)}}
/* the aura pulses by SCALE + a tone-density feel via a tiny transform, never by
   a filter; its faintness is carried by the markup using #pl-stipple, not opacity
   on an engraved mark. We do gently fade the AURA (it is a glow, light itself —
   not a burin cut — so opacity is physically honest here, unlike on a cut line). */
@keyframes pl-window-aura{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.12);opacity:.7}}
[data-leaf="candlelight"] .pl-rollpress__live{fill:var(--pl-verdigris)}  /* token reflows */

/* the emerging sheet — the model "struck small enough to hold". It is bare rag
   with a single carved fold-shadow; the held model is a verdigris speck on it.
   The class only tags it for the apex to target; geometry is in markup. */
.pl-rollpress__sheet{fill:var(--pl-paper)}
[data-leaf="candlelight"] .pl-rollpress__sheet{fill:var(--pl-paper-sunk)}

/* ===========================================================================
   2 · THE PLANCHE  —  .pl-planche  (the keyed exploded figure)
   ---------------------------------------------------------------------------
   Three subassemblies float apart along the 118° axis (up-left -> down-right),
   keyed A·B·C:
     A · QGRE engine     — the cut die (the thing that does the work)
     B · TQ4 forme       — the locked-up forme (4-bit type, locked in the chase)
     C · fp4 substrate   — the rag bed it all presses into
   The CHOSEN part is re-struck in vermilion (the burin came back to it); the
   OTHER two ghost to fine hatch (tone-1) so the eye reads "this one is live".
   Choice is a STATE, toggled by .is-chosen on a .pl-planche__part — exactly one
   part may carry it (the one-rubric law). Default chosen = A (the engine).
   ------------------------------------------------------------------------- */
.pl-planche__part{transition:none}    /* discrete state, not animated          */
/* the two un-chosen parts ghost: their tone fields stay (density!), but the part
   reads RECESSED via the foundation's --soft ink. We do NOT drop opacity on the
   cut lines; we recolour the swelling contour to the faint ink and let the tone
   stay fine. The chosen part keeps full iron-gall + gains the vermilion key. */
.pl-planche__part:not(.is-chosen) .pl-planche__contour{fill:var(--pl-ink-faint)}
.pl-planche__part:not(.is-chosen) .pl-planche__key{fill:var(--pl-ink-faint)}
.pl-planche__part:not(.is-chosen) .pl-planche__lead{fill:var(--pl-line-firm)}
.pl-planche__part:not(.is-chosen) .pl-figtag b{color:var(--pl-ink-faint)}
/* the chosen part: the burin returned. Its keyed letter + lead strike vermilion
   (this figure's ONE voltage), its contour stays full iron-gall, and the part
   may carry [data-pl-bite] on its <svg> so the rubric pools wet ink. */
.pl-planche__part.is-chosen .pl-planche__key{fill:var(--pl-vermilion)}
.pl-planche__part.is-chosen .pl-planche__lead{fill:var(--pl-vermilion)}
.pl-planche__part.is-chosen .pl-planche__contour{fill:var(--pl-ink)}
.pl-planche__part.is-chosen .pl-figtag b{color:var(--pl-vermilion)}

/* the exploded stack: the three parts laid on the 118° diagonal with air between
   them, the way a planche shows a mechanism pulled apart for the eye. A grid keeps
   them keyed in reading order; the offset gives the "exploded" cant. */
.pl-planche{
  display:grid;gap:var(--pl-s2);justify-items:center;
  grid-template-columns:1fr;
}
.pl-planche__part{display:flex;flex-direction:column;align-items:center;gap:.55rem}
/* the cant: each lower part steps right, so the column reads as a part-stack
   pulled along the light axis rather than a flat list. Kept subtle so it still
   stacks cleanly on narrow leaves. */
.pl-planche__part:nth-child(2){transform:translateX(clamp(0px,2vw,1.4rem))}
.pl-planche__part:nth-child(3){transform:translateX(clamp(0px,4vw,2.8rem))}
@media (max-width:30rem){
  .pl-planche__part:nth-child(2),
  .pl-planche__part:nth-child(3){transform:none}
}
/* the chooser strip — three seal-buttons that re-key the burin (demo wires the
   onclick). Reuses .pl-btn; the active one reads struck. */
.pl-planche__pick{display:flex;gap:var(--pl-s2);justify-content:center;flex-wrap:wrap;margin-top:var(--pl-s3)}
.pl-planche__pick .pl-btn[aria-pressed="true"]{
  border-color:var(--pl-vermilion);color:var(--pl-vermilion);
  box-shadow:inset 0 2px 5px rgba(36,29,20,.18);
}

/* ===========================================================================
   3 · THE INSTRUMENT GAUGE  —  .pl-gauge  (the Prussian quarter / cosine)
   ---------------------------------------------------------------------------
   A counted instrument: an engraved tick-scale on a quarter arc (the QGRE's
   cosine quadrant) with a real NEEDLE — a swelling pointer, fat at the hub
   shadow, hairline at the tip — settling on a value. The dial body is Prussian
   blue (the instrument pigment: what has been MEASURED). The needle settles
   once on load; the rest letter (the counted number) is engraved at the rim.
   Pigment: prussian = the scale + needle (counted). ZERO vermilion here unless
   a reading is OUT OF SPEC — then exactly one tick + the needle may strike red
   (an alarm rubric). Default reading is in-spec, so this view spends NO rubric;
   on a page that already spent its rubric elsewhere, the gauge stays Prussian.
   ------------------------------------------------------------------------- */
.pl-gauge__scale{stroke:var(--pl-prussian)}   /* tick marks — structural ink   */
.pl-gauge__face{fill:var(--pl-paper-sunk)}     /* a recessed instrument face: the
   ONE place the world presses IN, not out — a sunk dial behind glass. */
[data-leaf="candlelight"] .pl-gauge__face{fill:var(--pl-paper-sunk)}

/* the needle — a swelling line in Prussian, pivoting from the hub. transform-box
   on the fill-box so it spins about its own hub regardless of viewBox. */
.pl-gauge__needle{
  fill:var(--pl-prussian);
  transform-box:fill-box;transform-origin:8% 50%;  /* hub at the needle's tail  */
}
.pl-gauge__needle-shadow{fill:var(--pl-ink);opacity:.18}  /* a cast shadow is
   light-absence, not a burin cut — opacity is physically honest on a shadow. */

/* the settle: the needle swings up from rest and lands on its tick with a tiny
   overshoot, like a real galvanometer finding zero-error. transform only. The
   final resting angle is set inline per-reading via --pl-needle-to (a rotation),
   so the same figure can show any value. Killed under reduced-motion (lands set). */
@media (prefers-reduced-motion:no-preference){
  .pl-gauge__needle{animation:pl-needle-settle var(--pl-needle-settle) cubic-bezier(.2,1.3,.35,1) both}
}
@keyframes pl-needle-settle{
  0%  {transform:rotate(var(--pl-needle-from,-58deg))}
  70% {transform:rotate(calc(var(--pl-needle-to,0deg) + 4deg))}
  100%{transform:rotate(var(--pl-needle-to,0deg))}
}
/* the out-of-spec alarm: opt-in, adds the ONE vermilion strike to THIS view. A
   page sets .is-alarm on the .pl-gauge to recolour the needle + the breached tick.
   Use ONLY when the gauge is the rubric-bearer of its leaf. */
.pl-gauge.is-alarm .pl-gauge__needle{fill:var(--pl-vermilion)}
.pl-gauge.is-alarm .pl-gauge__tick--breach{stroke:var(--pl-vermilion);stroke-width:2.4}

/* the engraved readout — the counted number at the rim, in the instrument mono.
   Prussian, because it is a measured quantity. */
.pl-gauge__readout{
  font-family:var(--pl-mono);font-weight:500;
  fill:var(--pl-prussian);letter-spacing:.04em;
}
.pl-gauge__unit{font-family:var(--pl-mono);fill:var(--pl-ink-faint);letter-spacing:.12em}

/* ---------------------------------------------------------------------------
   REDUCED-MOTION KILL — MANDATORY for the NEW motion this file adds.
   The foundation already kills the four rack filters. The global
   *{animation:none} the world ships DOES kill these keyframe animations — but
   we make the intent explicit and, crucially, ensure the STATIC render is the
   finished plate: the star-wheel rests struck, the live window sits steady-lit,
   the needle lands ON its tick (the `both` fill + the inline --pl-needle-to hold
   it there even with the animation removed).
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pl-rollpress__star,
  .pl-rollpress__live,
  .pl-rollpress__live-aura,
  .pl-gauge__needle{animation:none}
  /* the aura, with motion removed, rests at its lit mid-glow (not its trough) */
  .pl-rollpress__live-aura{opacity:.6}
  /* the needle holds at its set reading: rotate(var(--pl-needle-to)) so a
     no-animation render still points at the counted tick, not at rest-zero. */
  .pl-gauge__needle{transform:rotate(var(--pl-needle-to,0deg))}
}


/* ---------------------------------------------------------------------------
   20 · THE RULED WRITING-BLANK · the form system (write on a rule)
   (folded from _wb/01-ruled-blank.css)
   ------------------------------------------------------------------------- */
/* ============================================================================
   01 · THE RULED WRITING-BLANK — the form system of "The Plate"
   ----------------------------------------------------------------------------
   The world has no native <input>. The web's default — a bordered, rounded box
   with a blue focus-glow, a green check, a red error string — is the single most
   homogeneous artifact on the internet (the strongest training pull there is).
   We reject the box entirely. The evidence is a ruled LEDGER BLANK: you do not
   type INTO a container, you WRITE ON A RULE. The page is the clerk's book.

   THE MAPPING — every state is a real clerk's / corrector's mark, not a UI idiom:
     · the field    = a baseline RULING (a ledger blank), with a mono small-caps
                      caption scratched ABOVE it (the column header), and a faint
                      vermilion nib waiting at the rule's start.
     · rest         = an iron-gall hairline rule. Empty = a writing-blank.
     · focus        = the rule THICKENS and turns vermilion under the nib — the
                      pen has met the line. NO glow. Attention is the nib on the
                      rule, not a halo around a box.
     · filled/valid = the rule SETTLES to Prussian (the instrument-blue of a
                      counted, accepted ledger entry). The entry is on the books.
     · invalid      = the proofreader's WAVY VERMILION UNDERLINE — the literal
                      mark a corrector drew beneath a word to be fixed — plus a
                      scratched margin note. (.pl-swell carries the wave.)
     · disabled     = struck out: a cross-hatch (#pl-tone-3) drawn over the blank,
                      the way a clerk voids a line he may not write on.
     · checkbox     = a REGISTRATION BOX you ink with an engraved X.
     · radio        = a STRUCK DOT seated in a ruled ring.
     · select       = the same ruled blank, a small engraved chevron filed at its
                      end; the menu is a struck plate resting on the leaf.
     · submit       = pairs with the existing seal-die .pl-btn--strike.

   THE LAW THIS OBEYS:
     · Tone is CUT-DEPTH / pigment, never opacity. The nib caret, the corrector's
       wave, the disabled hatch, the chevron are all DRAWN marks (.pl-swell fills
       + the tone library), never strokes faded with alpha.
     · A select menu is a struck plate RESTING on the leaf (a tight warm low-spread
       drop), never a generic floating dropdown card. The recessed ink-WELL of a
       textarea is the one licensed press-IN (a real ledger box is sunk into rag).
     · ONE rubric to a view: vermilion here is STRUCTURAL ink (the rule under the
       nib, the nib itself, the corrector's wave). A page still spends its single
       voltage rubric elsewhere — these marks are the pen's ink, not a second strike.
     · Engraved figures, not icons: the nib, the chevron, the check-X, the radio
       dot, the corrector's wave are cut with the swelling line, not glyphs/emoji.
     · Reduced-motion yields the finished print (the nib-gleam guard is below).
     · Perf: no per-atom filters. The marks are inline SVG/gradients; the optional
       nib-gleam is a single cheap @property sweep, killed under reduced-motion.

   Namespace: pl- only. New tokens declared at the top with comments. NO apex t-.
   Light azimuth ~118° (the upper-left window) — the rule's lit rim sits up-left,
   the sunk shadow down-right, matching every other struck mark in the world.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   NEW TOKENS — the writing-blank's own dimensions, declared once here.
   ------------------------------------------------------------------------- */
:root{
  --pl-rule-h:1.5px;            /* the rest weight of a ledger rule (iron-gall) */
  --pl-rule-h-ink:2.5px;        /* the rule once the nib presses (focus/filled) */
  --pl-blank-pad:.5rem;         /* breath between the writing line and the glyphs above it */
  --pl-blank-lead:.9rem;        /* the nib's gutter at the rule's start            */
  --pl-field-gap:var(--pl-s5);  /* vertical rhythm between blanks in a ledger      */
  /* the corrector's wave geometry (an SVG data-URI repeat — pigment, not opacity) */
  --pl-wave-amp:3px;
}

/* a stable place to read the rule's current pigment from, so every child mark
   (the nib, the caption tick) tracks the field's state from one variable. */
.pl-blank{ --pl-rule-ink:var(--pl-line-strong); }

/* ===========================================================================
   1 · THE BLANK  —  .pl-blank  (the field wrapper = one ruled line + its header)
   ---------------------------------------------------------------------------
   Structure a page author writes:
     <label class="pl-blank">
       <span class="pl-blank__cap">be first to know</span>
       <span class="pl-blank__line">
         <input class="pl-write" type="email" placeholder="name@workshop">
         <svg class="pl-nib" …>…</svg>           (the waiting nib, optional)
       </span>
       <span class="pl-blank__note">we keep this in the room</span>   (optional)
     </label>
   ------------------------------------------------------------------------- */
.pl-blank{
  display:flex;flex-direction:column;gap:var(--pl-blank-pad);
  inline-size:100%;
}
.pl-blank + .pl-blank{margin-top:var(--pl-field-gap)}

/* the column header — scratched mono small-caps, the ledger's hand-ruled label.
   A tiny vermilion tick sits before it, the way a column gets a rubric mark. */
.pl-blank__cap{
  font-family:var(--pl-mono);font-size:var(--pl-text-0);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--pl-ink-faint);
  display:inline-flex;align-items:center;gap:.55rem;line-height:1;
}
.pl-blank__cap::before{
  content:"";inline-size:.5rem;block-size:.5rem;flex:none;
  /* a struck vermilion lozenge tick — structural ink, drawn as a rotated square */
  background:var(--pl-vermilion);transform:rotate(45deg);
  box-shadow:0 1px 0 #7c1f11;
}
[data-leaf="candlelight"] .pl-blank__cap::before{box-shadow:0 1px 0 rgba(0,0,0,.5)}

/* the ruled line itself — the writing surface. Position-relative so the rule, the
   nib and the corrector's wave layer over the same baseline. */
.pl-blank__line{
  position:relative;
  display:flex;align-items:end;gap:.5rem;
  padding-inline-start:var(--pl-blank-lead);  /* the nib's gutter */
}

/* THE RULE — a single baseline, drawn as a ::after so it can carry the lit upper
   rim + sunk shadow of every struck mark, and thicken/recolour on state without
   touching the input box model. NO border on the input. */
.pl-blank__line::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  block-size:var(--pl-rule-h);
  background:var(--pl-rule-ink);
  /* lit up-left rim over a hair of sunk shadow down-right — a cut, not a line */
  box-shadow:0 -1px 0 var(--pl-window), 0 1px 1px rgba(36,29,20,.18);
  transition:block-size .14s var(--pl-ease),background-color .2s var(--pl-ease),box-shadow .2s var(--pl-ease);
}
[data-leaf="candlelight"] .pl-blank__line::after{box-shadow:0 -1px 0 var(--pl-window),0 1px 2px rgba(0,0,0,.45)}

/* the margin note / helper — scratched small italic at the corrector's margin */
.pl-blank__note{
  font-family:var(--pl-body);font-style:italic;font-size:var(--pl-text-1);
  color:var(--pl-ink-soft);line-height:1.3;
}
.pl-blank__note--err{
  color:var(--pl-vermilion);font-family:var(--pl-mono);font-style:normal;
  font-size:var(--pl-text-0);letter-spacing:.1em;text-transform:uppercase;
  display:none;                       /* shown only when the field is invalid */
}

/* ===========================================================================
   2 · THE PEN  —  .pl-write  (the input / textarea — writes ON the rule)
   ---------------------------------------------------------------------------
   The element is transparent: no border, no fill, no radius, no shadow. It is
   the INK laid on the .pl-blank__line rule. The clerk's hand is mono (the
   instrument), sitting just above the baseline.
   ------------------------------------------------------------------------- */
.pl-write{
  flex:1 1 auto;min-inline-size:0;
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;border-radius:0;box-shadow:none;outline:none;
  margin:0;padding:0 0 .42rem;            /* sit the ink a hair above the rule  */
  font-family:var(--pl-mono);font-size:var(--pl-text-2);
  letter-spacing:.01em;color:var(--pl-ink);line-height:1.4;
  caret-color:var(--pl-vermilion);        /* the nib's ink — a vermilion caret  */
}
.pl-write::placeholder{
  color:var(--pl-ink-faint);font-style:italic;font-family:var(--pl-body);
  letter-spacing:0;opacity:1;             /* faint is a PIGMENT (ink-faint), not opacity */
}
/* the browser autofill box would re-introduce the slop box — flatten it to paper */
.pl-write:-webkit-autofill,
.pl-write:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--pl-ink);
  -webkit-box-shadow:0 0 0 1000px var(--pl-paper) inset;
  caret-color:var(--pl-vermilion);
  transition:background-color 9999s;       /* hold the paper, kill the blue flash */
}

/* the textarea is the one licensed press-IN: a recessed ledger WELL sunk into the
   rag (a ruled book's boxed remarks column), the baseline rule still beneath. */
textarea.pl-write{
  min-block-size:5.5rem;resize:vertical;
  padding:.7rem .8rem .5rem;
  background:var(--pl-paper-sunk);
  box-shadow:inset 1px 2px 0 rgba(36,29,20,.12), inset 0 -1px 0 var(--pl-window);
  /* faint ledger feint-rules inside the well, so it reads as ruled paper */
  background-image:repeating-linear-gradient(0deg,transparent 0 1.55rem,var(--pl-line) 1.55rem calc(1.55rem + 1px));
  background-attachment:local;
}
[data-leaf="candlelight"] textarea.pl-write{box-shadow:inset 1px 2px 0 rgba(0,0,0,.4), inset 0 -1px 0 var(--pl-window)}

/* ----- STATE: FOCUS — the pen meets the rule (thicken + vermilion, NO glow) -- */
.pl-blank:focus-within{ --pl-rule-ink:var(--pl-vermilion); }
.pl-blank:focus-within .pl-blank__line::after{ block-size:var(--pl-rule-h-ink); }
.pl-blank:focus-within .pl-blank__cap{color:var(--pl-ink-soft)}    /* the column wakes */
/* the waiting nib wakes to full ink + (guarded) gleam when the pen is in hand */
.pl-blank:focus-within .pl-nib{color:var(--pl-vermilion)}

/* ----- STATE: VALID / FILLED — settles to Prussian (the entry is on the books) */
.pl-blank.is-valid{ --pl-rule-ink:var(--pl-prussian); }
.pl-blank.is-valid .pl-blank__line::after{block-size:var(--pl-rule-h-ink)}
.pl-blank.is-valid .pl-nib{color:var(--pl-prussian)}
.pl-blank.is-valid .pl-blank__note--err{display:none}
/* focus always re-asserts the live vermilion nib over a settled blue rule */
.pl-blank.is-valid:focus-within{ --pl-rule-ink:var(--pl-vermilion); }

/* ----- STATE: INVALID — the proofreader's wavy vermilion underline + note ---- */
.pl-blank.is-invalid .pl-blank__line::after{
  /* swap the flat rule for the corrector's WAVE — a drawn pigment mark (SVG
     data-URI of a swelling sine), tiled. Density/colour carry it, never opacity. */
  block-size:6px;background:transparent;box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 4.2 Q1.6 1 3 3.2 Q4.2 5 6 4.2 Q7.6 1 9 3.2 Q10.2 5 12 4.2 L12 5.4 Q10.2 6 9 4.6 Q7.6 2.6 6 5.4 Q4.2 6 3 4.6 Q1.6 2.6 0 5.4 Z' fill='%23c5331d'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:left bottom;
}
.pl-blank.is-invalid .pl-blank__cap{color:var(--pl-vermilion)}
.pl-blank.is-invalid .pl-blank__cap::before{background:var(--pl-vermilion)}
.pl-blank.is-invalid .pl-blank__note--err{display:block}
.pl-blank.is-invalid .pl-blank__note:not(.pl-blank__note--err){display:none}
.pl-blank.is-invalid .pl-nib{color:var(--pl-vermilion)}

/* ----- STATE: DISABLED — struck out, the voided ledger line ------------------ */
.pl-blank:has(.pl-write:disabled){cursor:not-allowed}
.pl-blank:has(.pl-write:disabled) .pl-write{color:var(--pl-ink-faint)}
.pl-blank:has(.pl-write:disabled) .pl-blank__cap{color:var(--pl-ink-faint)}
.pl-blank:has(.pl-write:disabled) .pl-blank__cap::before{background:var(--pl-ink-faint);box-shadow:none}
.pl-blank:has(.pl-write:disabled) .pl-blank__line::after{
  /* the void: a cross-hatch struck over the whole blank (the #pl-tone-3 idea as a
     CSS gradient pair, so no SVG ref is needed for the atom). DENSITY, not alpha. */
  block-size:1.1rem;background:transparent;box-shadow:none;bottom:-.15rem;
  background-image:
    repeating-linear-gradient( 24deg, var(--pl-line-firm) 0 .5px, transparent .5px 4px),
    repeating-linear-gradient(-66deg, var(--pl-line-firm) 0 .5px, transparent .5px 5px);
}

/* ===========================================================================
   3 · THE NIB  —  .pl-nib  (the waiting pen at the rule's start)
   ---------------------------------------------------------------------------
   An engraved nib (swelling-line body), seated in the lead gutter, pointing at
   the baseline. It is dormant ink-faint at rest, wakes vermilion on focus,
   settles Prussian when valid — it tracks the same pigment as the rule.
   Drawn with .pl-swell (filled lens), NOT an icon font. ~118° lit.
   ------------------------------------------------------------------------- */
.pl-nib{
  position:absolute;left:0;bottom:.05rem;
  inline-size:.78rem;block-size:auto;flex:none;
  color:var(--pl-ink-faint);                 /* pigment the inner fills inherit  */
  transition:color .18s var(--pl-ease);
  pointer-events:none;
}
.pl-nib .pl-swell{fill:currentColor}
.pl-nib__slit{fill:var(--pl-paper)}          /* the slit reads as bare rag       */

/* the optional nib-GLEAM: a single hairline of caught light sweeping the nib's
   shoulder when the pen is taken up. ONE cheap @property sweep, no per-atom
   filter. Guarded for reduced-motion below — the static nib is the finished mark. */
@property --pl-gleam{syntax:'<number>';inherits:false;initial-value:0}
.pl-nib__gleam{
  fill:var(--pl-ormolu-lit);
  opacity:0;                                  /* a SPECULAR glint may use light;
                                                 it is light caught, not ink faded */
}
.pl-blank:focus-within .pl-nib__gleam{
  animation:pl-nib-gleam .9s var(--pl-ease) 1;
}
@keyframes pl-nib-gleam{
  0%{opacity:0;--pl-gleam:0}
  35%{opacity:.85}
  100%{opacity:0;--pl-gleam:1}
}

/* ===========================================================================
   4 · THE REGISTRATION BOX  —  .pl-tick  (checkbox: ink an engraved X)
   ---------------------------------------------------------------------------
     <label class="pl-tick">
       <input type="checkbox">
       <span class="pl-tick__box"><svg class="pl-tick__x" …/></span>
       <span class="pl-tick__lbl">keep me on the list</span>
     </label>
   A real ledger registration box: a struck square well in the rag; checking it
   draws an inked X (swelling strokes). NOT a rounded fill-blue control.
   ------------------------------------------------------------------------- */
.pl-tick,.pl-pick{
  display:inline-flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  font-family:var(--pl-body);font-size:var(--pl-text-2);color:var(--pl-ink);
  line-height:1.4;
}
.pl-tick input,.pl-pick input{position:absolute;opacity:0;inline-size:0;block-size:0;pointer-events:none}

.pl-tick__box{
  flex:none;inline-size:1.15rem;block-size:1.15rem;margin-top:.12rem;
  position:relative;background:var(--pl-paper-sunk);
  border:1.5px solid var(--pl-line-strong);border-radius:1px;
  /* a struck-IN well — a registration box is pressed into the page */
  box-shadow:inset 1px 1px 0 rgba(36,29,20,.14), inset -1px -1px 0 var(--pl-window);
  transition:border-color .15s var(--pl-ease);
}
[data-leaf="candlelight"] .pl-tick__box{box-shadow:inset 1px 1px 0 rgba(0,0,0,.4),inset -1px -1px 0 var(--pl-window)}
/* the X is a <use href="#fig-x"> instance. <use> shadow content is unreachable
   by descendant selectors (.pl-tick__x .pl-swell never lands) AND fill/clip-path
   must ride the svg element itself: fill INHERITS into the use, clip-path clips
   the rendered instance. So pin both here. The X is drawn-on -- clipped away
   until checked, so it reads as ink applied to the registration box. */
.pl-tick__x{position:absolute;inset:8%;color:var(--pl-vermilion);fill:currentColor;
  clip-path:inset(0 100% 0 0);transition:clip-path .16s var(--pl-ease)}
.pl-tick input:checked ~ .pl-tick__box{border-color:var(--pl-ink)}
.pl-tick input:checked ~ .pl-tick__box .pl-tick__x{clip-path:inset(0 0 0 0)}
.pl-tick input:focus-visible ~ .pl-tick__box{border-color:var(--pl-vermilion);box-shadow:inset 1px 1px 0 rgba(36,29,20,.14),inset -1px -1px 0 var(--pl-window),0 0 0 2px var(--pl-vermilion)}
.pl-tick input:disabled ~ .pl-tick__box{opacity:1;border-color:var(--pl-line);background:
  repeating-linear-gradient(24deg,var(--pl-line) 0 .5px,transparent .5px 4px),var(--pl-paper-sunk)}

/* ===========================================================================
   5 · THE STRUCK DOT  —  .pl-pick  (radio: a dot seated in a ruled ring)
   ---------------------------------------------------------------------------
   A radio is a ring with a struck dot dropped in its centre when chosen — the
   engraver's filled-circle, not a blue fill. Ink, drawn-on.
   ------------------------------------------------------------------------- */
.pl-pick__ring{
  flex:none;inline-size:1.15rem;block-size:1.15rem;margin-top:.12rem;
  position:relative;border-radius:50%;background:var(--pl-paper-sunk);
  border:1.5px solid var(--pl-line-strong);
  box-shadow:inset 1px 1px 0 rgba(36,29,20,.14), inset -1px -1px 0 var(--pl-window);
  transition:border-color .15s var(--pl-ease);
}
[data-leaf="candlelight"] .pl-pick__ring{box-shadow:inset 1px 1px 0 rgba(0,0,0,.4),inset -1px -1px 0 var(--pl-window)}
.pl-pick__ring::after{
  content:"";position:absolute;inset:26%;border-radius:50%;
  background:var(--pl-vermilion);box-shadow:0 1px 0 #7c1f11;
  transform:scale(0);transition:transform .16s var(--pl-ease-press);  /* struck on */
}
[data-leaf="candlelight"] .pl-pick__ring::after{box-shadow:0 1px 0 rgba(0,0,0,.5)}
.pl-pick input:checked ~ .pl-pick__ring{border-color:var(--pl-ink)}
.pl-pick input:checked ~ .pl-pick__ring::after{transform:scale(1)}
.pl-pick input:focus-visible ~ .pl-pick__ring{border-color:var(--pl-vermilion);box-shadow:inset 1px 1px 0 rgba(36,29,20,.14),inset -1px -1px 0 var(--pl-window),0 0 0 2px var(--pl-vermilion)}
.pl-pick input:disabled ~ .pl-pick__ring{border-color:var(--pl-line);background:
  repeating-linear-gradient(24deg,var(--pl-line) 0 .5px,transparent .5px 4px),var(--pl-paper-sunk)}

/* a row of struck dots — the ledger's option column */
.pl-pickset{display:flex;flex-direction:column;gap:.55rem}
.pl-pickset--row{flex-direction:row;flex-wrap:wrap;gap:var(--pl-s4)}

/* ===========================================================================
   6 · THE FILED CHEVRON  —  .pl-select  (select: a ruled blank that opens a plate)
   ---------------------------------------------------------------------------
   Same ruled blank as a text field, with a small engraved chevron filed at its
   end. The native menu is what the OS draws (unstyleable), but the CLOSED control
   is a writing-blank, and an opened custom menu (.pl-menu) is a struck plate
   RESTING on the leaf — never a floating card.
   ------------------------------------------------------------------------- */
.pl-select{position:relative;display:flex;align-items:end}
.pl-select .pl-write{
  appearance:none;-webkit-appearance:none;
  padding-right:1.6rem;cursor:pointer;
  color:var(--pl-ink);
}
.pl-select .pl-write:invalid{color:var(--pl-ink-faint)}   /* placeholder option */
.pl-select__chev{
  position:absolute;right:0;bottom:.42rem;inline-size:.7rem;block-size:auto;
  color:var(--pl-ink-soft);pointer-events:none;transition:color .15s var(--pl-ease);
}
.pl-select__chev .pl-swell{fill:currentColor}
.pl-blank:focus-within .pl-select__chev{color:var(--pl-vermilion)}
.pl-blank.is-valid .pl-select__chev{color:var(--pl-prussian)}

/* the custom menu, if a page builds one: a struck plate resting on the leaf */
.pl-menu{
  margin:0;padding:.3rem 0;list-style:none;
  position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:30;
  background:var(--pl-paper);
  border:var(--pl-hair) solid var(--pl-line-firm);border-radius:var(--pl-radius);
  box-shadow:
    inset 2px 2px 0 rgba(255,250,235,.6),
    inset -2px -2px 5px rgba(36,29,20,.12),
    0 14px 30px -22px rgba(36,29,20,.5);          /* tight, warm, low-spread REST */
}
[data-leaf="candlelight"] .pl-menu{box-shadow:inset 2px 2px 0 rgba(239,226,198,.08),inset -2px -2px 6px rgba(0,0,0,.4),0 16px 34px -22px rgba(0,0,0,.7)}
.pl-menu li{
  padding:.42rem 1rem;font-family:var(--pl-mono);font-size:var(--pl-text-1);
  letter-spacing:.04em;color:var(--pl-ink);cursor:pointer;
}
.pl-menu li:hover,.pl-menu li[aria-selected="true"]{background:var(--pl-paper-sunk);color:var(--pl-vermilion)}

/* ===========================================================================
   7 · THE LEDGER  —  .pl-daybook  (a fieldset = a bound run of blanks)
   ---------------------------------------------------------------------------
   A contact form is a page of a ledger: a ruled run with a hand-set heading and
   a struck submit at its foot. Two columns where the leaf is wide enough.
   ------------------------------------------------------------------------- */
.pl-daybook{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--pl-field-gap)}
.pl-daybook__head{
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.3em;
  text-transform:uppercase;color:var(--pl-ink-faint);
  padding-bottom:.6rem;margin-bottom:var(--pl-s2);
  border-bottom:var(--pl-hair) solid var(--pl-line);
  display:flex;align-items:baseline;gap:.7rem;
}
.pl-daybook__head b{color:var(--pl-vermilion);font-weight:400}   /* the rubric mark */
.pl-daybook__row{display:grid;gap:var(--pl-field-gap)}
@container plate (min-width:34rem){
  .pl-daybook__row--2{grid-template-columns:1fr 1fr}
}
.pl-daybook__foot{
  display:flex;align-items:center;gap:var(--pl-s4);flex-wrap:wrap;
  margin-top:var(--pl-s3);padding-top:var(--pl-s4);
  border-top:var(--pl-hair) solid var(--pl-line);
}
.pl-daybook__foot .pl-blank__note{margin:0}

/* the "be first to know" capture blank — a single ruled line + a struck seal,
   sitting on one baseline when the leaf is wide enough. */
.pl-capture{display:flex;align-items:flex-end;gap:var(--pl-s4);flex-wrap:wrap}
.pl-capture .pl-blank{flex:1 1 16rem;min-inline-size:12rem}
.pl-capture .pl-btn{flex:none;margin-bottom:.1rem}   /* seat the seal on the rule */

/* ===========================================================================
   8 · REDUCED-MOTION KILL — the finished print stands.
   ---------------------------------------------------------------------------
   The global *{animation:none;transition:none} already freezes the rule-thicken,
   the X draw-on, the dot strike and the chevron tint to their FINISHED state.
   But it does NOT touch a running keyframe's compositing the way `filter` is
   exempt — so we kill the optional nib-gleam explicitly and leave the nib at its
   resting, finished mark. (No filter/@property is introduced beyond the gleam.)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pl-blank:focus-within .pl-nib__gleam{animation:none}
  .pl-nib__gleam{opacity:0}
}


/* ---------------------------------------------------------------------------
   21 · THE ENGRAVED REGISTER + THE WAX CACHET
   (folded from _wb/03-register-cachet.css)
   ------------------------------------------------------------------------- */
/* ============================================================================
   03 · THE ENGRAVED REGISTER + THE WAX CACHET
   Two facts the book named and never built, cut here against the foundation
   grammar (00-foundation.css) — high fascia: every mark reuses the swelling
   line, the tone library, the filter rack, the lift-off plate, the pigments.

     A. THE ENGRAVED REGISTER  (.pl-register)  — a ledger an accountant KEPT,
        not a spreadsheet a browser drew. Continuous column-ruling as ONE
        background layer; a trembling burin head-rule; tabular old-style
        figures; a Prussian double-rule totals row; hover = a vermilion
        reading-thread drawing down the left margin (never a box-fill).

     B. THE WAX CACHET  (.pl-cachet / .pl-seal)  — the honesty status
        (validated / asserted / new / live) as a struck blob of sealing wax:
        an irregular molten body, a cooled gloss meniscus, squeeze-out beads,
        a debossed device, a mono small-caps legend struck beside it. The wax
        CATCHES CANDLELIGHT — the gloss wakes brighter at night.

   THE LAW THIS OBEYS:
   · Tone is CUT-DEPTH (the tone patterns / --bw ladder), never opacity, on
     every ENGRAVED mark (rules, ticks, the debossed device's hatching).
   · The wax body is the one honest exception: wax is a MATERIAL with specular
     gloss, so it is built from layered gradients (molten + meniscus +
     squeeze-out), the way the leaf's window-wash and the plate's rim are —
     a physical surface, not a cut. The DEVICE pressed INTO it is engraved.
   · A panel is the lift-off plate (.pl-plate) — never a floating card. The
     cachet does the opposite on purpose: it PRESSES IN (a true debossed seal
     bitten into the leaf), the one sanctioned recessed face.
   · One rubric to a view: the register spends its single vermilion strike on
     the reading-thread; the wax "asserted/provisional" device is ORMOLU
     (gilt, candlelight-caught), not a second red. "Live" is verdigris.
   · Perf: no per-cell filters. The head-rule carries one [data-pl-engrave]
     hand-tremor; the wax gloss is pure CSS gradients (zero filter). The
     column-ruling is a single repeating-gradient, not N borders.
   · Reduced-motion: the thread, the seal-press settle, and the gloss shimmer
     all yield the finished print — explicit kills below.

   Namespace: pl- only. New --pl-* tokens declared at the top. NO apex t-.
   Light azimuth ~118° (the upper-left window) — every highlight sits upper-left,
   every shadow lower-right, matching the leaf body.pl already paints.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   NEW TOKENS — declared once, here. A page author may set these per-register.
   ------------------------------------------------------------------------- */
:root{
  /* THE REGISTER */
  --pl-reg-row:2.85rem;            /* the ruled writing-line height (ledger feint) */
  --pl-reg-rule:rgba(36,29,20,.16);/* the faint vertical column ruling (daylight) */
  --pl-reg-thread:.18rem;          /* the reading-thread's struck width           */
  --pl-reg-margin:1.15rem;         /* the left margin the thread is drawn into     */

  /* THE WAX CACHET */
  --pl-wax:#9a2b1c;                /* iron-rich sealing wax (a deep oxblood red)   */
  --pl-wax-hi:#d6694e;             /* where the meniscus cooled glossy, lit ~118°  */
  --pl-wax-lo:#5c160c;             /* the squeeze-out shadow at the lower-right rim */
  --pl-wax-live:#235f4f;           /* verdigris wax — the "live / running" seal    */
  --pl-wax-live-hi:#4f9d86;
  --pl-wax-live-lo:#11362b;
  --pl-seal-d:3.1rem;              /* the seal die's diameter                      */
}
[data-leaf="candlelight"]{
  /* the night register: the vertical ruling is the lighter chain-line tint, and
     the wax goes a touch deeper-bodied while its gloss wakes UP to catch flame. */
  --pl-reg-rule:rgba(239,226,198,.13);
  --pl-wax:#8a2417;
  --pl-wax-hi:#f0855f;             /* the flame catching the cooled meniscus — brighter than day */
  --pl-wax-lo:#3a0d06;
  --pl-wax-live:#1d5444;
  --pl-wax-live-hi:#6fc4a8;        /* verdigris gloss catching candlelight        */
  --pl-wax-live-lo:#0a261d;
}


/* ===========================================================================
   A · THE ENGRAVED REGISTER  —  .pl-register
   ---------------------------------------------------------------------------
   A hand-kept account. We do NOT style a <table>'s cell borders. Instead the
   COLUMN RULING is one continuous background layer ruled down the whole block,
   the HEAD-RULE is a real trembling burin line, the figures are tabular
   old-style, and the TOTALS row is the bookkeeper's Prussian double-rule.

   Markup contract (a real <table> for semantics; we suppress its native chrome):
     <table class="pl-register">
       <thead><tr><th>…</th>…</tr></thead>
       <tbody>
         <tr> … <td class="pl-reg-num">…</td> … </tr>
         <tr class="pl-reg-total"> … </tr>     ← the summed line
       </tbody>
     </table>
   Put numeric cells in .pl-reg-num (right-aligned, tabular figures). Mark the
   summed line .pl-reg-total. That's the whole vocabulary.
   ------------------------------------------------------------------------- */
.pl-register{
  position:relative;
  inline-size:100%;
  border-collapse:collapse;          /* we replace ALL its borders with our own ruling */
  border-spacing:0;
  font-family:var(--pl-body);
  font-size:var(--pl-text-2);
  color:var(--pl-ink);
  /* the page the ledger is ruled ON: the writing-blank feint (faint horizontal
     writing-lines) + the warm rag. Verticals are drawn per-row group below so
     they sit UNDER the head-rule but read continuous. */
  background:
    repeating-linear-gradient(0deg,
      transparent 0 calc(var(--pl-reg-row) - 1px),
      var(--pl-reg-rule) calc(var(--pl-reg-row) - 1px) var(--pl-reg-row));
  background-clip:padding-box;
}

/* THE CONTINUOUS COLUMN RULING — one layer, the whole height.
   A pseudo-element on the table draws the vertical hairlines as a single
   repeating gradient, so they are CONTINUOUS rules (a ruler dragged down the
   page), never a stack of cell borders. It sits behind the text (z under tbody)
   and is inset to start after the left reading-margin. The exact column stops
   are author-set via --pl-reg-cols (a gradient stop list); a sensible 4-column
   default is baked so the demo renders without ceremony. */
.pl-register::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:0 0 0 var(--pl-reg-margin);
  background:var(--pl-reg-cols,
    /* default: faint rules at 46%, 64%, 82% of the width — a ledger's money columns */
    linear-gradient(90deg, transparent 45.6%, var(--pl-reg-rule) 45.6% calc(45.6% + 1px), transparent calc(45.6% + 1px)),
    linear-gradient(90deg, transparent 63.6%, var(--pl-reg-rule) 63.6% calc(63.6% + 1px), transparent calc(63.6% + 1px)),
    linear-gradient(90deg, transparent 81.6%, var(--pl-reg-rule) 81.6% calc(81.6% + 1px), transparent calc(81.6% + 1px)));
}
.pl-register > *{position:relative;z-index:1}  /* text rides above the ruling */

/* THE HEAD — small-caps mono apparatus, the column headings of a kept book.
   Its bottom edge is NOT a border: the trembling burin head-rule (an inline
   SVG swell wrapped in [data-pl-engrave]) is dropped in by the page as the
   first tbody-adjacent element OR, for the no-SVG path, this firm fallback
   rule stands. The SVG, when present, overlays it exactly. */
.pl-register thead th{
  font-family:var(--pl-mono);font-weight:400;
  font-size:var(--pl-text-0);letter-spacing:.2em;text-transform:uppercase;
  color:var(--pl-ink-faint);
  text-align:left;
  padding:.5rem var(--pl-s3) .7rem;
  vertical-align:bottom;
  white-space:nowrap;
}
.pl-register thead th:first-child{padding-left:var(--pl-reg-margin)}
.pl-register thead th.pl-reg-num{text-align:right;font-variant-numeric:tabular-nums}
/* the firm fallback head-rule (a real burin would tremble; this holds when the
   SVG overlay is absent or in reduced-motion). It is a struck rule, --bw-4. */
.pl-register thead{
  border-bottom:max(1px, calc(var(--bw-4) * 1px)) solid var(--pl-line-strong);
}

/* THE BURIN HEAD-RULE overlay — a page drops this absolutely-positioned figure
   so the heading underline QUIVERS like a graver line. It pins to the thead's
   baseline. Reduced-motion drops the tremor (handled by 00-foundation.css's
   [data-pl-engrave] kill) and the firm fallback rule above stands. */
.pl-reg-headrule{
  position:absolute;left:0;right:0;z-index:2;pointer-events:none;
  height:.5rem;margin-top:-.34rem;       /* straddle the thead/tbody seam */
  color:var(--pl-ink);
}
.pl-reg-headrule svg{display:block;width:100%;height:100%}

/* THE BODY ROWS — each is a ruled writing-line. Cells sit on the feint. */
.pl-register tbody td{
  padding:0 var(--pl-s3);
  block-size:var(--pl-reg-row);
  vertical-align:middle;
  color:var(--pl-ink);
}
.pl-register tbody td:first-child{
  padding-left:var(--pl-reg-margin);
  position:relative;                      /* anchors the reading-thread */
}
/* the entry label column carries a little authority — old-style, slightly larger */
.pl-register tbody tr td:first-child{
  font-family:var(--pl-body);font-size:var(--pl-text-3);color:var(--pl-ink);
}

/* TABULAR FIGURES — money/counts align on the decimal, old-style tabular nums.
   The right-aligned numeric column reads as a column an accountant could sum. */
.pl-reg-num{
  text-align:right;
  font-variant-numeric:tabular-nums oldstyle-nums;
  font-feature-settings:"tnum" 1,"onum" 1;
  letter-spacing:.01em;
  white-space:nowrap;
}
/* an instrument figure — a count that came off a gauge (Prussian) */
.pl-reg-num.pl-reg-instrument{color:var(--pl-prussian);font-variant-numeric:tabular-nums lining-nums}
/* a unit/annotation after a figure, set quiet in mono so the number stays clean */
.pl-reg-num small,.pl-reg-unit{
  font-family:var(--pl-mono);font-size:var(--pl-text-0);
  color:var(--pl-ink-faint);letter-spacing:.06em;margin-left:.35rem;
}

/* THE READING-THREAD — the hover affordance. NOT a row-fill: a short vermilion
   rule is drawn DOWN the left reading-margin, the way a clerk runs a finger (or
   a ruled thread) beside the line being read. It grows from nothing to the
   row's height, hugging the margin. The single vermilion strike of this view. */
.pl-register tbody tr td:first-child::before{
  content:"";position:absolute;z-index:3;
  left:calc(var(--pl-reg-margin) * 0.34);
  top:50%;transform:translateY(-50%);
  width:var(--pl-reg-thread);
  height:0;                               /* drawn in on hover */
  background:var(--pl-vermilion);
  box-shadow:0 0 0 .5px rgba(124,31,17,.5);  /* the ink's faint bite, not a glow */
  transition:height .16s var(--pl-ease);
}
.pl-register tbody tr:hover td:first-child::before,
.pl-register tbody tr:focus-within td:first-child::before{
  height:calc(var(--pl-reg-row) - .7rem);
}
/* on hover the line's label leans into its thread — a hair of warmth, no fill */
.pl-register tbody tr:hover td:first-child{color:var(--pl-ink)}
.pl-register tbody tr:hover td{background:transparent} /* belt-and-braces: NEVER a box-fill */

/* THE TOTALS LINE — the bookkeeper's double-rule in Prussian (the summed,
   counted, instrument-blue line). A double-rule above; the figures go bold-ish
   and instrument-coloured to say "this was added up." */
.pl-register tbody tr.pl-reg-total td{
  /* the double-rule: two stacked Prussian hairlines (close + a hair apart) drawn
     as a top box-shadow so it overlays the column ruling cleanly. */
  box-shadow:
    inset 0 max(1px, calc(var(--bw-3) * 1px)) 0 var(--pl-prussian),
    inset 0 calc(max(1px, calc(var(--bw-3) * 1px)) + 3px) 0 var(--pl-prussian);
  padding-top:.55rem;
  block-size:calc(var(--pl-reg-row) + .55rem);
  vertical-align:middle;
  background:linear-gradient(0deg, rgba(28,60,92,.05), transparent 70%); /* a faint counted-blue wash, NOT a fill */
}
.pl-register tbody tr.pl-reg-total td:first-child{
  font-family:var(--pl-mono);font-size:var(--pl-text-1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--pl-prussian);
}
.pl-register tbody tr.pl-reg-total .pl-reg-num{
  color:var(--pl-prussian);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:var(--pl-text-3);
}
/* the totals line's own reading-thread, when hovered, is Prussian not vermilion
   (it is an instrument line — counted, not merely read) */
.pl-register tbody tr.pl-reg-total td:first-child::before{
  background:var(--pl-prussian);box-shadow:0 0 0 .5px rgba(28,60,92,.5);
}

/* a caption foot, when the register stands as its own figure */
.pl-register caption{
  caption-side:bottom;
  margin-top:var(--pl-s3);padding-top:.7rem;
  border-top:var(--pl-hair) solid var(--pl-line);
  font-family:var(--pl-body);font-style:italic;font-size:var(--pl-text-1);
  color:var(--pl-ink-soft);text-align:left;
}
.pl-register caption b{
  font-family:var(--pl-mono);font-style:normal;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;font-size:var(--pl-text-0);
  color:var(--pl-prussian);margin-right:.5rem;
}

/* candlelight: the ledger ink lifts to the paper-light ink token automatically
   (color:var(--pl-ink) re-resolves), the ruling token already swapped above. */


/* ===========================================================================
   B · THE WAX CACHET  —  .pl-cachet  +  .pl-seal
   ---------------------------------------------------------------------------
   A struck blob of sealing wax + a mono small-caps legend. The wax is a real
   material: a molten body, a cooled glossy meniscus lit ~118°, squeeze-out at
   the lower-right rim, and a DEVICE debossed into it (engraved, tone=density).

   Markup contract:
     <span class="pl-cachet pl-cachet--validated">      ← state modifier
       <span class="pl-seal">                            ← the wax blob
         <svg class="pl-seal__device" …>…device…</svg>   ← the debossed mark
       </span>
       <span class="pl-cachet__legend">
         <b>VALIDATED</b><i>measured · bit-exact</i>      ← struck legend
       </span>
     </span>

   States (each picks its wax colour + device):
     --validated  iron-gall-dark wax, a struck check-mark device   (the default red)
     --asserted   ORMOLU wax, a pointing-hand device               (gilt = provisional)
     --new        pale-wax (un-aged), a struck asterisk/star       (the just-cut mark)
     --live       VERDIGRIS wax, a running-arc device              (it runs; nothing left)
   ------------------------------------------------------------------------- */
.pl-cachet{
  display:inline-flex;align-items:center;gap:.7rem;
  vertical-align:middle;
}

/* THE SEAL — the wax blob. The honest material exception: built from layered
   radial gradients (a surface with gloss), NOT engraved tone. It PRESSES IN
   (the one sanctioned debossed face): a sunk well in the leaf the wax fills.
   Irregular border-radius (four asymmetric values) so it is NEVER a pill. */
.pl-seal{
  position:relative;flex:0 0 auto;
  inline-size:var(--pl-seal-d);block-size:var(--pl-seal-d);
  display:grid;place-items:center;
  /* the molten body: a deep oxblood pool, the centre proud, the rim sunk */
  background:
    radial-gradient(58% 54% at 38% 34%, var(--pl-wax-hi) 0%, transparent 42%),  /* the cooled gloss meniscus, upper-left */
    radial-gradient(120% 120% at 64% 74%, var(--pl-wax-lo) 0%, transparent 52%), /* the squeeze-out shadow, lower-right */
    radial-gradient(85% 85% at 50% 46%, var(--pl-wax) 0%, var(--pl-wax-lo) 96%); /* the body */
  /* the irregular molten edge — a blob, never a circle. Four corners, four radii. */
  border-radius:47% 53% 49% 51% / 52% 48% 53% 47%;
  /* the seal sits PRESSED INTO the leaf (sanctioned deboss): a dark inner rim
     lower-right where the wax was forced down, a warm catch upper-left, and a
     tight contact shadow in the paper around the squeeze-out. */
  box-shadow:
    inset 2px 2px 3px rgba(255,235,205,.30),   /* the meniscus catch, upper-left */
    inset -2px -3px 5px rgba(0,0,0,.45),        /* the sunk lower-right of the bead */
    0 1px 0 rgba(255,250,235,.4),               /* a hair of squeeze-out lip catching light */
    0 6px 12px -7px rgba(40,12,6,.6);           /* the bead's tight contact shadow in the rag */
  color:var(--pl-wax-lo);                       /* the device inherits the wax's deep tone */
}
/* the gloss highlight — a small bright meniscus crescent, the wettest point of
   the cooled wax. A separate layer so candlelight can wake it brighter (flame). */
.pl-seal::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  inline-size:38%;block-size:30%;
  left:20%;top:16%;
  border-radius:50% 50% 60% 40% / 60% 50% 50% 40%;
  background:radial-gradient(60% 60% at 40% 35%, var(--pl-wax-hi) 0%, transparent 72%);
  opacity:.6;
  mix-blend-mode:screen;
  transition:opacity .4s var(--pl-ease);
}
/* the squeeze-out beads — two tiny droplets at the lower-right rim where the
   die forced the molten wax past its edge. Drawn as a second pseudo, pinned LR. */
.pl-seal::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  right:-2px;bottom:1px;
  inline-size:.5rem;block-size:.42rem;
  border-radius:60% 40% 50% 50% / 60% 50% 50% 40%;
  background:radial-gradient(60% 60% at 38% 32%, var(--pl-wax-hi) 0%, var(--pl-wax) 45%, var(--pl-wax-lo) 100%);
  box-shadow:0 1px 2px -1px rgba(40,12,6,.7);
}

/* THE DEBOSSED DEVICE — the engraved mark pressed INTO the wax. SVG, tone =
   density (it carries the foundation tone fills + the swelling line), recoloured
   by the seal's `color`. It is sunk: a dark cut with a thin upper-left catch
   drawn into the figure itself. Sits dead-centre of the blob. */
.pl-seal__device{
  position:relative;z-index:3;
  inline-size:62%;block-size:62%;
  display:block;
  /* the device is bitten in — a faint drop INTO the wax, light from upper-left.
     A drop-shadow filter is the one filter we allow here: it is tiny, on a
     single figure, and reads as the deboss. Killed in reduced-motion below. */
  filter:drop-shadow(.6px .8px .3px rgba(0,0,0,.5)) drop-shadow(-.4px -.5px 0 rgba(255,235,205,.22));
}

/* THE LEGEND — struck small-caps mono, the seal's caption-of-record. A title
   line (the state) over a thin italic gloss (what the state MEANS). */
.pl-cachet__legend{display:flex;flex-direction:column;gap:.12rem;line-height:1.15}
.pl-cachet__legend b{
  font-family:var(--pl-mono);font-weight:500;
  font-size:var(--pl-text-1);letter-spacing:.18em;text-transform:uppercase;
  color:var(--pl-ink);
}
.pl-cachet__legend i{
  font-family:var(--pl-body);font-style:italic;
  font-size:var(--pl-text-1);color:var(--pl-ink-soft);letter-spacing:.005em;
}

/* ---- THE STATES — each swaps the wax pigment + tints the legend title ---- */

/* VALIDATED — the default red wax (iron-rich). Measured, bit-exact, counted. */
.pl-cachet--validated .pl-cachet__legend b{color:var(--pl-vermilion)}
/* (uses the base --pl-wax* tokens — no override needed) */

/* ASSERTED / PROVISIONAL — ORMOLU wax (gilt bronze): the maker's word, caught
   by candlelight, not yet a measured fact. NOT a second vermilion — gilt. */
.pl-cachet--asserted .pl-seal{
  background:
    radial-gradient(58% 54% at 38% 34%, var(--pl-ormolu-lit) 0%, transparent 44%),
    radial-gradient(120% 120% at 64% 74%, #4a360f 0%, transparent 52%),
    radial-gradient(85% 85% at 50% 46%, var(--pl-ormolu) 0%, #6a4e16 96%);
  color:#3a2a0c;
}
.pl-cachet--asserted .pl-seal::before{background:radial-gradient(60% 60% at 40% 35%, var(--pl-ormolu-lit) 0%, transparent 72%)}
.pl-cachet--asserted .pl-seal::after{background:radial-gradient(60% 60% at 38% 32%, var(--pl-ormolu-lit) 0%, var(--pl-ormolu) 45%, #4a360f 100%)}
.pl-cachet--asserted .pl-cachet__legend b{color:var(--pl-ormolu)}
[data-leaf="candlelight"] .pl-cachet--asserted .pl-cachet__legend b{color:var(--pl-ormolu-lit)} /* gilt wakes at night */

/* NEW — pale un-aged wax, freshly dripped. A struck asterisk/star device. The
   wax has not darkened; its body is the warm rag-cream tint going to a soft tan. */
.pl-cachet--new .pl-seal{
  background:
    radial-gradient(58% 54% at 38% 34%, #f3e6c8 0%, transparent 46%),
    radial-gradient(120% 120% at 64% 74%, #8a6f3e 0%, transparent 52%),
    radial-gradient(85% 85% at 50% 46%, #cbab74 0%, #7a5f30 96%);
  color:#4a3917;
}
.pl-cachet--new .pl-seal::before{background:radial-gradient(60% 60% at 40% 35%, #fbeccb 0%, transparent 72%)}
.pl-cachet--new .pl-seal::after{background:radial-gradient(60% 60% at 38% 32%, #f3e6c8 0%, #cbab74 45%, #7a5f30 100%)}
.pl-cachet--new .pl-cachet__legend b{color:var(--pl-ormolu)}

/* LIVE / RUNNING — VERDIGRIS wax: it runs, nothing left the room. The offline
   mark in seal form. Uses the verdigris wax tokens (also night-tuned above). */
.pl-cachet--live .pl-seal{
  background:
    radial-gradient(58% 54% at 38% 34%, var(--pl-wax-live-hi) 0%, transparent 44%),
    radial-gradient(120% 120% at 64% 74%, var(--pl-wax-live-lo) 0%, transparent 52%),
    radial-gradient(85% 85% at 50% 46%, var(--pl-wax-live) 0%, var(--pl-wax-live-lo) 96%);
  color:var(--pl-wax-live-lo);
}
.pl-cachet--live .pl-seal::before{background:radial-gradient(60% 60% at 40% 35%, var(--pl-wax-live-hi) 0%, transparent 72%)}
.pl-cachet--live .pl-seal::after{background:radial-gradient(60% 60% at 38% 32%, var(--pl-wax-live-hi) 0%, var(--pl-wax-live) 45%, var(--pl-wax-live-lo) 100%)}
.pl-cachet--live .pl-cachet__legend b{color:var(--pl-verdigris)}
/* the live seal has a slow breathing gloss — it is RUNNING. A gentle pulse on
   the meniscus only (never the body). Killed in reduced-motion below. */
.pl-cachet--live .pl-seal::before{animation:pl-wax-breathe 3.4s var(--pl-ease) infinite}
@keyframes pl-wax-breathe{
  0%,100%{opacity:.5}
  50%{opacity:.82}
}

/* ---- CANDLELIGHT: the wax CATCHES THE FLAME — gloss wakes brighter ----
   The meniscus highlight lifts in opacity at night (a flame throws a hotter,
   tighter specular than a window), and the token swaps above already deepened
   the body + brightened --pl-wax-hi. This is the "must catch candlelight" law. */
[data-leaf="candlelight"] .pl-seal::before{opacity:.82}
[data-leaf="candlelight"] .pl-cachet--live .pl-seal::before{animation-name:pl-wax-breathe-night}
@keyframes pl-wax-breathe-night{
  0%,100%{opacity:.66}
  50%{opacity:1}
}
/* at night the seal sits deeper in the dark leather desk — a longer contact shadow */
[data-leaf="candlelight"] .pl-seal{
  box-shadow:
    inset 2px 2px 3px rgba(255,230,195,.22),
    inset -2px -3px 6px rgba(0,0,0,.6),
    0 1px 0 rgba(255,240,210,.18),
    0 8px 16px -8px rgba(0,0,0,.75);
}

/* a stacked variant — the legend BELOW the seal (for a cell or a tight column) */
.pl-cachet--stack{flex-direction:column;gap:.45rem;text-align:center}
.pl-cachet--stack .pl-cachet__legend{align-items:center}

/* a bare seal (no legend), for use inside a register cell as a status glyph */
.pl-cachet--bare{gap:0}
.pl-cachet--bare .pl-cachet__legend{display:none}
.pl-cachet--bare .pl-seal{--pl-seal-d:1.9rem}


/* ===========================================================================
   REDUCED-MOTION — yield the finished print. Every motion here gets killed and
   the static render is a composed, finished plate.
   (00-foundation.css already kills the [data-pl-engrave] head-rule tremor.)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pl-register tbody tr td:first-child::before{transition:none}  /* the thread snaps, not draws */
  .pl-seal::before{transition:none;animation:none}               /* gloss holds at its lit value */
  .pl-cachet--live .pl-seal::before,
  [data-leaf="candlelight"] .pl-cachet--live .pl-seal::before{animation:none}
  .pl-seal__device{filter:none}                                  /* the deboss drop-shadow drops; the cut still reads via tone */
}

/* ===========================================================================
   PERF NOTE (the named numbers):
   · The register draws TWO repeating-gradient layers total (writing-feint +
     column ruling) regardless of row count — O(1), not O(cells). No filters.
   · The head-rule carries ONE [data-pl-engrave] tremor (one figure). The
     totals double-rule is box-shadow, not SVG.
   · Each cachet is pure CSS gradients + one tiny per-figure drop-shadow on the
     device only. No tone FILTER on the wax. LCP-safe: nothing here blocks paint.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   22 · THE PAGE APPARATUS · manicule, catchword, signature mark
   (folded from _wb/04-apparatus.css)
   ------------------------------------------------------------------------- */
/* ============================================================================
   04 · THE PAGE APPARATUS — manicule · catchword · signature mark
   ----------------------------------------------------------------------------
   The period furniture that makes a bound volume FEEL bound. Three marks an
   18th-c. compositor set without thinking, rebuilt as live page furniture:

     .pl-manicule   — the engraved printer's fist (☞ as a REAL drawn hand, the
                      swelling line + a hatched cuff). The current-section mark.
                      Rides a sticky rail (.pl-railway) and points at where the
                      reader is.
     .pl-catchword  — the foot-of-leaf cue that previews the next page's first
                      word. A foot rule + a quiet "the next leaf begins" label +
                      the catchword set in the engraved italic. The world-native
                      "continue / next leaf" link.
     .pl-signature  — the gathering/quire mark at the leaf foot ("C.iij"). The
                      compositor's binding signature: this leaf belongs to a bound
                      volume, gathering C, third leaf.

   THE LAW THIS OBEYS (torad-world.css §4 + 00-foundation):
   · Tone is CUT-DEPTH, never opacity — the cuff is hatched with #pl-tone-2 /
     #pl-stipple at currentColor density, the hand contour is a FILLED .pl-swell
     lens, not a stroke. No opacity on any engraved mark.
   · The active manicule's plaque is a struck plate RESTING on the rail (a tight,
     warm, low-spread lift), never a floating card; the signature tick is a
     STRUCTURAL vermilion rule, not a second rubric strike.
   · One rubric to a view: the manicule INK is iron-gall; only when a rail item is
     the live/current target does its index carry the single vermilion charge —
     and a page must spend that charge on ONE mark, so .pl-manicule--rubric is the
     opt-in the page author uses at most once.
   · Engraved figure, not an icon — the hand is drawn (see the <svg> in the demo),
     never the 👉 emoji nor a chevron.
   · Reduced-motion yields the finished print: the only motion here is the
     manicule's settle-nudge + the catchword's ink-rise; both are killed below and
     the static render is a composed, finished plate. (The foundation filters keep
     their own kill in 00-foundation.css; the ONE new @property + its animations
     introduced here carry their kill in this file.)
   · Perf is a named number: zero per-atom filters added. The hand figure may take
     the shared [data-pl-engrave] hook (one figure), nothing else. LCP unaffected.

   Namespace: pl- only. New tokens declared at the top with a comment. Light
   azimuth ~118° (the upper-left window wash body.pl already paints).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   NEW TOKENS — declared once, here.
   ------------------------------------------------------------------------- */
:root{
  --pl-manicule-size:1.5rem;     /* the printer's fist nominal cap-height       */
  --pl-rail-gap:var(--pl-s2);     /* gutter between the fist and the rail label  */
  --pl-catch-lead:.55rem;         /* the air under the foot-rule before the cue  */
  /* the candle-glint sweep position for the active rail mark's ormolu edge —
     animated via @property so it can interpolate; killed under reduced-motion. */
  --pl-glint:-30%;
}

/* a registered custom property so the active-rail ormolu glint can TWEEN its
   position (a bare CSS var cannot be animated; a typed @property can). This is
   the ONE new animatable primitive 04 introduces — its kill lives in this file. */
@property --pl-glint{
  syntax:'<percentage>';
  inherits:false;
  initial-value:-30%;
}

/* ===========================================================================
   1 · THE MANICULE  —  .pl-manicule  (the engraved printer's fist)
   ---------------------------------------------------------------------------
   A real little 18th-c. pointing hand: a filled-lens index finger + a curled
   fist + a ruffled cuff hatched with tone. The GLYPH is authored as an <svg>
   in the consuming markup (the demo carries the canonical drawing); these
   classes carry the box, the ink, the point-direction, and the rail behaviour.
   The hand POINTS — so it has a heading (default: inline-end / right, toward the
   text it indexes). A page may flip it to point down (a foot mark) or up.
   ------------------------------------------------------------------------- */
.pl-manicule{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:var(--pl-manicule-size);
  block-size:var(--pl-manicule-size);
  flex:none;
  color:var(--pl-ink);                 /* iron-gall body — the default fist ink */
  line-height:0;
  /* the cut quivers a hair on a real graver line; this is the only "motion" the
     resting fist has, and it is a settle, not a loop. Killed under r-m below. */
  transition:transform .22s cubic-bezier(.2,.7,.3,1), color .22s ease;
}
.pl-manicule svg{inline-size:100%;block-size:100%;display:block;overflow:visible}

/* the swelling-line contour of the hand fills with the fist's current ink, and
   the cuff hatch + nail stipple inherit it as DENSITY via currentColor — so
   recolouring the fist (instrument blue, live green, the one rubric) re-inks the
   whole hand at once, never by opacity. The demo's <svg> uses
   fill="currentColor" on the contour and url(#pl-tone-2)/url(#pl-stipple) on the
   cuff/cuticle, with the pattern colour bound here. */
.pl-manicule [data-pl-hand]{fill:currentColor}
.pl-manicule [data-pl-cuff]{color:currentColor}      /* tone field tints with the fist */

/* POINT HEADINGS — the hand is drawn pointing inline-end; rotate the box to aim
   it. (Rotating the whole figure keeps the swelling belly on the correct
   lower-right shadow flank relative to the finger, because the light azimuth is
   carried in the drawing, not re-derived here.) */
.pl-manicule--down{transform:rotate(90deg)}
.pl-manicule--up{transform:rotate(-90deg)}
.pl-manicule--back{transform:scaleX(-1)}            /* a left-pointing fist (rare) */

/* THE PIGMENT VARIANTS — re-ink the whole hand. Use sparingly; --rubric is the
   single struck charge and a page spends it AT MOST ONCE. */
.pl-manicule--instrument{color:var(--pl-prussian)}  /* indexes a counted thing   */
.pl-manicule--live{color:var(--pl-verdigris)}       /* indexes the offline mark   */
.pl-manicule--rubric{color:var(--pl-vermilion)}     /* THE current mark (one/view)*/

/* a hover/settle nudge ONLY when the fist is interactive (a rail link). The
   finger noses a hair toward what it points at — a settle, not a bounce. */
a:hover > .pl-manicule,
button:hover > .pl-manicule,
.pl-railway__item:hover .pl-manicule{transform:translateX(2px)}
.pl-railway__item:hover .pl-manicule.pl-manicule--down{transform:rotate(90deg) translateX(2px)}

/* ---- THE RAILWAY: the sticky index the manicule rides ------------------- */
/* A slim ruled rail (laid alongside the running text) whose CURRENT row carries
   the fist. The rail itself is a hairline rule — the compositor's marginal rule —
   not a box; only the ACTIVE row lifts as a small struck plaque resting on it. */
.pl-railway{
  position:sticky;top:var(--pl-s5);
  display:flex;flex-direction:column;gap:var(--pl-s1);
  padding-inline-start:var(--pl-s3);
  border-inline-start:var(--pl-hair) solid var(--pl-line-firm);  /* the marginal rule */
  font-family:var(--pl-mono);
}
.pl-railway__item{
  position:relative;
  display:grid;
  grid-template-columns:var(--pl-manicule-size) 1fr;
  align-items:center;gap:var(--pl-rail-gap);
  padding:.4rem .55rem .4rem .5rem;
  border-radius:var(--pl-radius);
  color:var(--pl-ink-faint);
  text-decoration:none;
  font-size:var(--pl-text-0);letter-spacing:.13em;text-transform:uppercase;
  transition:color .2s ease, background-color .2s ease;
}
/* a dormant row hides its fist — the rail reads as a quiet list of section
   numbers until the reader arrives at a section, then the fist appears and points. */
.pl-railway__item .pl-manicule{visibility:hidden}
.pl-railway__item:hover{color:var(--pl-ink-soft)}

/* THE CURRENT ROW — the fist points, the row lifts a hair off the rule as a
   struck plaque, and (only here) the index takes the single vermilion charge.
   This is the rail's ONE rubric. Set .is-current on the row the reader is in. */
.pl-railway__item.is-current{
  color:var(--pl-ink);
  background:var(--pl-paper);
  box-shadow:
    inset 1px 1px 0 rgba(255,250,235,.6),
    inset -1px -2px 4px rgba(36,29,20,.12),
    0 10px 22px -16px rgba(36,29,20,.45);     /* the plaque resting on the rail */
}
.pl-railway__item.is-current .pl-manicule{visibility:visible;color:var(--pl-vermilion)}
.pl-railway__item.is-current::before{
  /* the rule the current plaque sits proud of, struck through the marginal rule
     as a STRUCTURAL vermilion tick (not a second rubric word) */
  content:"";position:absolute;inset-inline-start:calc(-1 * var(--pl-s3) - var(--pl-hair));
  inset-block:0;inline-size:2px;background:var(--pl-vermilion);border-radius:1px;
}
[data-leaf="candlelight"] .pl-railway__item.is-current{
  box-shadow:
    inset 1px 1px 0 rgba(239,226,198,.06),
    inset -1px -2px 5px rgba(0,0,0,.4),
    0 12px 26px -16px rgba(0,0,0,.7);
}
/* the active row's ormolu glint — a thin gilt rim on the plaque's lit edge that,
   under candlelight, the flame walks across. Daylight keeps it a quiet gold rim. */
.pl-railway__item.is-current{
  background-image:linear-gradient(
    100deg,
    transparent calc(var(--pl-glint) - 8%),
    rgba(168,128,47,.0) var(--pl-glint),
    rgba(168,128,47,.18) calc(var(--pl-glint) + 5%),
    transparent calc(var(--pl-glint) + 14%));
}
[data-leaf="candlelight"] .pl-railway__item.is-current{
  background-image:linear-gradient(
    100deg,
    transparent calc(var(--pl-glint) - 8%),
    rgba(240,210,126,.0) var(--pl-glint),
    rgba(240,210,126,.42) calc(var(--pl-glint) + 5%),
    rgba(202,162,74,.12) calc(var(--pl-glint) + 9%),
    transparent calc(var(--pl-glint) + 16%));
  animation:pl-glint-walk 4.5s ease-in-out infinite;
}
@keyframes pl-glint-walk{
  0%,100%{--pl-glint:-20%}
  50%{--pl-glint:120%}
}

/* ===========================================================================
   2 · THE CATCHWORD  —  .pl-catchword  (the foot-of-leaf next-page cue)
   ---------------------------------------------------------------------------
   At the foot of a leaf, the printer set the FIRST WORD of the next leaf, so a
   reader (and the binder) could verify the gathering ran in order. We make it the
   world-native "continue / next leaf" link: a foot rule, a quiet
   "THE NEXT LEAF BEGINS" label, and the catchword in the engraved italic, with a
   small down/forward manicule. Wrap an <a> around it for real navigation.
   ------------------------------------------------------------------------- */
.pl-catchword{
  display:block;
  margin-top:var(--pl-s6);
  padding-top:var(--pl-catch-lead);
  /* the foot rule: a firm hairline the catchword hangs beneath, the way the
     printed catchword sits below the last line's baseline rule. */
  border-top:var(--pl-hair) solid var(--pl-line-firm);
  text-align:end;                          /* the catchword sits at the leaf's outer foot */
  text-decoration:none;color:inherit;
}
.pl-catchword__label{
  display:block;
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.28em;
  text-transform:uppercase;color:var(--pl-ink-faint);
  margin-bottom:.5rem;
}
/* the catchword itself — the engraved Coulée italic, the actual next word(s) */
.pl-catchword__word{
  display:inline-flex;align-items:baseline;gap:.5rem;
  font-family:var(--pl-display);font-style:italic;font-weight:600;
  font-size:var(--pl-text-5);line-height:1;color:var(--pl-ink);
  /* the wet bite of the press swells the word a hair toward the reader on hover —
     an ink-rise, not a glow. Killed under reduced-motion. */
  transition:color .2s ease,letter-spacing .25s cubic-bezier(.2,.7,.3,1);
}
.pl-catchword__word .pl-manicule{--pl-manicule-size:1.05rem;align-self:center;color:var(--pl-ink-faint)}
a.pl-catchword:hover .pl-catchword__word,
.pl-catchword:hover .pl-catchword__word{color:var(--pl-vermilion);letter-spacing:.01em}
a.pl-catchword:hover .pl-catchword__word .pl-manicule,
.pl-catchword:hover .pl-catchword__word .pl-manicule{color:var(--pl-vermilion)}
a.pl-catchword:focus-visible{outline:2px solid var(--pl-vermilion);outline-offset:4px;border-radius:var(--pl-radius)}

/* a previous-leaf variant: the cue points BACK (the rule sits above, the manicule
   reverses, the word hangs at the inner foot). A page may carry both feet. */
.pl-catchword--prev{text-align:start}
.pl-catchword--prev .pl-catchword__word{flex-direction:row-reverse}

/* ===========================================================================
   3 · THE SIGNATURE MARK  —  .pl-signature  (the gathering/quire letter)
   ---------------------------------------------------------------------------
   The compositor's binding mark at the leaf foot — gathering letter + leaf number
   in the old lower-case roman ("C.iij" = gathering C, third leaf). It says: this
   leaf belongs to a bound volume, in order. A quiet mono footer apparatus with a
   single STRUCTURAL vermilion tick (a centring rule, not a rubric word).
   ------------------------------------------------------------------------- */
.pl-signature{
  display:flex;align-items:center;justify-content:center;gap:var(--pl-s3);
  margin-top:var(--pl-s6);
  font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.22em;
  text-transform:uppercase;color:var(--pl-ink-faint);
}
/* the centring rules either side of the mark — the compositor's foot rule,
   broken to seat the signature. Hairline ink, NOT vermilion. */
.pl-signature::before,
.pl-signature::after{
  content:"";flex:1;max-inline-size:6rem;block-size:var(--pl-hair);
  background:var(--pl-line-firm);
}
/* the mark proper: gathering letter . leaf-roman, set tight. The gathering
   letter takes the engraved italic; the leaf-roman stays mono (the press number).*/
.pl-signature__mark{
  display:inline-flex;align-items:baseline;gap:.15em;
  color:var(--pl-ink-soft);letter-spacing:.1em;white-space:nowrap;
}
.pl-signature__gathering{
  font-family:var(--pl-display);font-style:italic;font-weight:600;
  font-size:var(--pl-text-3);letter-spacing:0;color:var(--pl-ink);
}
.pl-signature__leaf{font-feature-settings:"lnum" 0;text-transform:lowercase;letter-spacing:.06em}
/* the single structural vermilion tick — a centring dot the foot rule pivots on,
   the ONE drop of cinnabar a footer is allowed (a rule-mark, never a word). */
.pl-signature__pivot{
  inline-size:3px;block-size:3px;border-radius:50%;
  background:var(--pl-vermilion);flex:none;align-self:center;
}

/* ===========================================================================
   REDUCED-MOTION KILL — MANDATORY for the new motion 04 introduces.
   The world-global *{animation:none;transition:none} stops the keyframes and
   transitions, but NOT a @property tween mid-flight, so we pin --pl-glint to a
   resting position and explicitly drop the glint animation. The static render is
   then a FINISHED plate: the current plaque keeps its quiet gilt rim, the fist
   points, the catchword sits beneath its rule.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  :root{--pl-glint:50%}
  .pl-railway__item.is-current,
  [data-leaf="candlelight"] .pl-railway__item.is-current{animation:none}
  .pl-manicule,
  .pl-catchword__word{transition:none}
}

/* ===========================================================================
   DEMO SCAFFOLD — used only by 04-apparatus.demo.html to stage the three marks.
   (A page author needs none of these; they style the proof page's layout.)
   ------------------------------------------------------------------------- */
.pl-appdemo{display:grid;grid-template-columns:minmax(0,1fr) minmax(11rem,15rem);gap:var(--pl-s6);align-items:start}
@container plate (max-width:38rem){.pl-appdemo{grid-template-columns:1fr}.pl-appdemo .pl-railway{position:static;order:-1}}
.pl-appdemo__body > * + *{margin-top:var(--pl-s4)}
.pl-appdemo__sec{scroll-margin-top:var(--pl-s5)}
.pl-appdemo__rule{block-size:var(--pl-hair);background:var(--pl-line);border:0;margin:var(--pl-s5) 0}
.pl-appdemo__legend{font-family:var(--pl-mono);font-size:var(--pl-text-0);letter-spacing:.18em;text-transform:uppercase;color:var(--pl-ink-faint);margin:0 0 var(--pl-s3)}
.pl-appdemo__legend b{color:var(--pl-vermilion);font-weight:400}


/* ---------------------------------------------------------------------------
   23 · ERA ORNAMENT · deckle, watermark, printer's flower, registration cross
   (folded from _wb/05-era-ornament.css)
   ------------------------------------------------------------------------- */
/* ============================================================================
   05 · ERA ORNAMENT — DECKLE · WATERMARK · PRINTER'S FLOWER · REGISTRATION CROSS
   The four period flourishes of the bound volume, each cut to do a JOB — never
   decoration for its own sake (Tenet 5: depth/ornament encodes a physical fact).
   Built ON the foundation grammar (00-foundation.{css,defs.html}) and the world
   tokens (torad-world.css): the swelling line, the tone library, the pigments,
   both registers. Nothing here floats free of that grammar (high fascia).

     1. THE DECKLE EDGE      .pl-deckle      — the torn, untrimmed rag edge as a
                                               section/band terminator. The leaf
                                               ends on a REAL paper edge; the desk
                                               shows through the tear.
     2. THE WATERMARK        .pl-watermark   — a wire device held IN the paper,
                                               seen against the light. A ghost of
                                               LIGHTENED felt, never ink-over-paper;
                                               physically cannot dim the text.
     3. THE PRINTER'S FLOWER .pl-headpiece / .pl-tailpiece / .pl-flower
                                             — an engraved fleuron band opening or
                                               closing a chapter. Built from the
                                               burin (paired mirrored scrolls), not
                                               an <hr>, not an emoji.
     4. THE REGISTRATION CROSS .pl-reg-cross — the press alignment cross as the
                                               FOCUS-RING. Keyboard focus becomes a
                                               vermilion register mark at the trim
                                               corners — of the world, still plainly
                                               visible and accessible.

   THE LAW THIS OBEYS:
   · Tone is CUT-DEPTH / DENSITY, never opacity on an engraved mark (Law 1). The
     watermark is the ONE thing that legitimately varies the paper's own lightness
     (it is thinned felt seen by transmitted light, a paper fact, not an ink mark),
     so it tints with the PAPER tokens and sits strictly behind content — it can
     never reduce text contrast.
   · One rubric to a view (Law 3): the headpiece carries exactly ONE vermilion
     fleuron at its centre; the registration cross is vermilion because it is the
     press's own alignment ink. A page must not light both as primary at once.
   · Engraved figures, not icons (Law 4): the flower is drawn with .pl-swell +
     the tone patterns; the cross is a struck mark, not a glyph.
   · Reduced motion yields the finished print (Law 6): the global *{animation:none}
     does NOT kill `filter`/@property. This file adds ONE @property (the watermark
     candle-breath) and reuses the foundation's filter hooks — both get an explicit
     kill below, and every static render is itself a finished plate.
   · Perf is a named number (Law 7): no per-atom filters. The deckle fringe and the
     flower are static inline SVG (zero runtime filter). The watermark is a single
     fixed-size background device on a section, not a per-element texture.

   Namespace: pl- only. New tokens declared at the top, commented. NO apex t-.
   Light azimuth ~118° (the upper-left window), matching body.pl + the foundation.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   NEW TOKENS — declared once, here, for a page author to reach for
   ------------------------------------------------------------------------- */
:root{
  /* THE DECKLE — how far the torn fibres reach in from the trim, and the colour
     the tear reveals (the desk the leaf rests on). The notch depth is the only
     "size" a page author tunes; the raggedness is baked into the clip geometry. */
  --pl-deckle-depth:18px;                 /* how deep the tear bites into the leaf */
  --pl-deckle-reveal:var(--pl-paper-edge);/* what shows through the tear: the desk */
  --pl-deckle-fringe:var(--pl-paper-sunk);/* the thinned felt just behind the torn lip */

  /* THE WATERMARK — the wire device is felt made THINNER, read by transmitted
     light. In daylight the lightening is a whisper over warm rag; in candlelight
     the flame behind the sheet lifts it a touch more. These are PAPER lightnesses
     (never ink), so the device can never pull text contrast down. */
  --pl-wm-lift:rgba(255,250,235,.5);      /* daylight: the felt thinned to a glow */
  --pl-wm-shade:rgba(36,29,20,.045);      /* the wire's faint cast shadow in the rag */
  --pl-wm-size:min(42rem,86%);            /* the device sits large but never bleeds */

  /* THE PRINTER'S FLOWER — the fleuron band's height + the breathing room it
     reserves above/below a chapter. The vermilion centre is THE one charge. */
  --pl-flower-h:clamp(2.1rem,1.4rem + 2vw,3.4rem);

  /* THE REGISTRATION CROSS — the focus mark's arm length, its inset past the
     element's box (the printer pulls the cross a hair OUTSIDE the trim), and its
     stroke. Vermilion = the press's alignment ink. */
  --pl-reg-arm:9px;                       /* half-length of each crosshair arm */
  --pl-reg-inset:5px;                     /* how far the cross sits outside the box */
  --pl-reg-ink:var(--pl-vermilion);
  --pl-reg-w:1.5px;                       /* the struck line weight of the cross */
}
/* the candlelight register — a darker rag lets the backlit watermark read a touch
   MORE, and a torn edge reveals the near-black desk rather than the warm one. */
[data-leaf="candlelight"]{
  --pl-wm-lift:rgba(255,240,210,.085);    /* the flame behind the sheet, barely up */
  --pl-wm-shade:rgba(0,0,0,.16);          /* the wire casts a deeper night shadow  */
}

/* ===========================================================================
   1 · THE DECKLE EDGE  —  .pl-deckle
   ---------------------------------------------------------------------------
   The untrimmed rag edge. A machine-cut page has four straight sides; a real
   sheet, couched by hand from the mould, keeps a ragged, feathered DECKLE where
   the pulp thinned to nothing against the frame. We use it as a SECTION
   terminator: a band can end on a torn edge, revealing the desk beneath.

   THE CUT (why this is not a wavy CSS divider — the P_training default):
   · The torn line is IRREGULAR — an asymmetric run of notches of differing depth
     and width, authored by hand as a polygon, NEVER a smooth sin() wave (a sine
     reads "blob divider"; rag tears in fibres, not in waves).
   · clip-path removes the torn-away pulp, so the layer BEHIND (the desk,
     --pl-deckle-reveal) shows through the bays of the tear. The edge is a real
     hole in the paper, not a drawn squiggle on top of it.
   · A thin FIBRE FRINGE rides just inside the lip: a band of the thinned felt
     (--pl-deckle-fringe) so the paper grades to translucency at the tear instead
     of stopping at a crisp line. This is the "feathered" part of the deckle.
   ------------------------------------------------------------------------- */

/* the host element (a .pl-plate / section / band) tears along its BOTTOM edge.
   It must paint its own background (it does, as a plate/section) so the clip has
   something to remove. We pad the bottom by the tear depth so content never falls
   into the torn zone. */
.pl-deckle{
  position:relative;
  padding-bottom:calc(var(--pl-deckle-depth) + var(--pl-s4));
  /* the irregular torn lip — a hand-authored polygon. The top three corners stay
     square (this is a bottom deckle); the bottom run is a ragged sequence of
     notches at uneven x and depth. Percentages keep it fluid at any width.
     The bays cut UP into the page (toward 100% - depth); the points reach DOWN
     to the trim (100%). No two steps are equal — that asymmetry IS the deckle. */
  clip-path:polygon(
    0% 0%, 100% 0%,
    100% calc(100% - 6px),
    96.5% calc(100% - 2px),  93% calc(100% - 12px), 89% calc(100% - 4px),
    85% calc(100% - 15px),   81.5% calc(100% - 3px),78% calc(100% - 9px),
    73% calc(100% - 1px),    69% calc(100% - 13px), 65% calc(100% - 5px),
    61% calc(100% - 16px),   57% calc(100% - 2px),  53% calc(100% - 10px),
    48.5% calc(100% - 4px),  44% calc(100% - 14px), 40% calc(100% - 2px),
    36% calc(100% - 8px),    31% calc(100% - 1px),  27% calc(100% - 12px),
    23% calc(100% - 5px),    19% calc(100% - 15px), 15% calc(100% - 3px),
    11% calc(100% - 9px),    7% calc(100% - 1px),   3.5% calc(100% - 13px),
    0% calc(100% - 4px)
  );
}
/* the FRINGE — a thin band of thinned felt riding the torn lip, so the tear
   feathers instead of ending on a hard clip line. It sits at the very bottom,
   one notch-depth tall, in the sunk-paper tone; the same polygon clip on the
   parent crops it to the ragged shape, so it reads as the paper's last fibres. */
.pl-deckle::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  block-size:var(--pl-deckle-depth);
  background:linear-gradient(to bottom, transparent, var(--pl-deckle-fringe));
  opacity:.7;pointer-events:none;
  /* a faint laid-line ghost in the fringe so the torn felt still shows its grain */
  background-image:
    linear-gradient(to bottom, transparent, var(--pl-deckle-fringe)),
    repeating-linear-gradient(90deg, var(--pl-line) 0 .5px, transparent .5px 5px);
}
[data-leaf="candlelight"] .pl-deckle::after{opacity:.55}

/* the deckle as a free-standing BAND RULE between sections (not a plate edge):
   a short strip whose bottom is torn, used to close one movement before the
   next. Pairs with .pl-tailpiece for a chapter end that ends on real paper. */
.pl-deckle-band{
  block-size:calc(var(--pl-deckle-depth) + 10px);
  background:var(--pl-paper);
  border-top:var(--pl-hair) solid var(--pl-line);
  margin-block:var(--pl-s5) 0;
}

/* ===========================================================================
   2 · THE WATERMARK  —  .pl-watermark  (host) +  .pl-watermark__device (the wire)
   ---------------------------------------------------------------------------
   A device held IN the paper: where the mould's wire sits, the pulp lies thinner,
   so by transmitted light a faint brighter shape appears. The Torad press-mark,
   or the press itself, ghosted into a section background.

   THE CUT (why this is not an opacity:.05 logo — the P_training default):
   · A watermark is the PAPER, thinner — so it is a faint LIGHTENING (the felt
     glows where it is thin), tinted with --pl-wm-lift (a paper highlight), with a
     hairline --pl-wm-shade where the wire casts the faintest relief. It is never
     ink laid over paper, so Law 1 holds AND it cannot dim text.
   · It sits on a layer STRICTLY BEHIND content (z-index:0; the section's content
     rides z-index:1), pointer-events:none, aria-hidden — invisible to AT, inert
     to the cursor, and incapable of touching text contrast.
   · In daylight it is a whisper; in candlelight the flame behind the sheet lifts
     it a touch (the register raises --pl-wm-lift). One slow candle-breath
     (a custom @property easing the lift) makes the backlit felt seem to waver in
     the flame — killed under reduced-motion, leaving a finished, faint device.
   ------------------------------------------------------------------------- */

/* the host section establishes the stacking context + holds the device behind. */
.pl-watermark{position:relative;isolation:isolate;overflow:hidden}
.pl-watermark > *{position:relative;z-index:1}   /* real content rides above the wire */

/* the device layer: centred, large, faint, inert. The wire device is an inline
   SVG child given this class (so it scales + tints from one place). It draws in
   currentColor; we set color to the faint paper-lift so the whole device reads as
   thinned felt, and let a soft drop encode the wire's relief. */
.pl-watermark__device{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;place-items:center;
  color:var(--pl-wm-lift);                 /* the device = thinned, glowing felt   */
  --pl-wm-breath:1;                         /* the candle-breath multiplier (0..1)  */
}
/* the device draws with the foundation's .pl-swell (fill:var(--pl-ink)) and
   .pl-toned (color:var(--pl-ink)) -- both would force iron-gall BLACK and bury
   the prose behind a solid blot. Re-pin them to the device's own lift colour so
   the press reads as the PAPER thinned, never as ink. The tone PATTERN stays
   currentColor-driven, so the platen just goes faint with the rest. */
.pl-watermark__device :is(.pl-swell, .pl-swell--fine, .pl-swell--rubric){ fill: currentColor; }
.pl-watermark__device .pl-toned{ color: inherit; }
.pl-watermark__device svg{
  inline-size:var(--pl-wm-size);block-size:auto;
  /* the wire's faint relief: a hair of light up-left (118°), a hair of shade
     down-right — the same azimuth as every cut in this world. Scaled by the
     candle-breath so it stirs in the flame; bakes to a still device when calm. */
  filter:
    drop-shadow(-1px -1px 0 var(--pl-wm-lift))
    drop-shadow(1px 1.5px 1px var(--pl-wm-shade));
  opacity:calc(.55 + .45 * var(--pl-wm-breath));
}
/* daylight: the device is a true whisper. Candlelight: a touch more, and it
   breathes once on a slow cycle as the flame wavers behind the sheet. */
[data-leaf="candlelight"] .pl-watermark__device{
  animation:pl-wm-breathe 7s var(--pl-ease) infinite;
}

/* the candle-breath — a custom property animated so the device LIFT eases, not a
   crude opacity blink. Registered as <number> so it can be interpolated. */
@property --pl-wm-breath{
  syntax:'<number>'; inherits:true; initial-value:1;
}
@keyframes pl-wm-breathe{
  0%,100%{--pl-wm-breath:.78}
  50%{--pl-wm-breath:1}
}

/* ===========================================================================
   3 · THE PRINTER'S FLOWER  —  .pl-headpiece / .pl-tailpiece / .pl-flower
   ---------------------------------------------------------------------------
   The engraved band that opens (headpiece) or closes (tailpiece) a chapter, built
   from fleurons — the scrolling acanthus/pomegranate ornaments a compositor sets
   from the type-case, here CUT with the burin's swelling line. A head- and
   tail-piece is the period's chapter divider; it is NEVER a plain <hr>.

   THE CUT (why this is not <hr> / an emoji / a gradient line — P_training):
   · The band is paired MIRRORED scrolls flanking a centre device: author one half
     as a swelling-line scroll with tone-filled leaves, mirror it with
     transform:scale(-1,1). The symmetry is the compositor's mirror-set.
   · The CENTRE fleuron is the ONE vermilion strike (Law 3) — the single charge the
     band carries. Everything else is iron-gall body + Prussian/none.
   · Drawn art (Law 4): .pl-swell for the scroll spines, #pl-tone-2/3 for the leaf
     shadow, a .pl-swell--rubric pip at the heart.
   This file ships the LAYOUT (band height, centring, the mirror); the demo draws
   the actual fleuron <svg> with the grammar so a page author can lift it.
   ------------------------------------------------------------------------- */
.pl-headpiece,.pl-tailpiece{
  display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);
  block-size:var(--pl-flower-h);margin-inline:auto;max-inline-size:34rem;
  color:var(--pl-ink);                       /* the band's body ink */
}
.pl-headpiece{margin-block:0 var(--pl-s5)}
.pl-tailpiece{margin-block:var(--pl-s5) 0}
/* the two flanking wings + the centre. The wings are the SAME svg; the trailing
   one is mirrored so the pair reads as one symmetric compositor set. */
.pl-flower{block-size:100%;inline-size:auto;flex:0 1 auto}
.pl-flower--wing{max-inline-size:13rem}
.pl-flower--mirror{transform:scaleX(-1)}      /* the mirror-set right wing */
.pl-flower--centre{max-inline-size:3.2rem;flex:none} /* the heart: the one charge */

/* a hairline rule riding through the band, so the wings sit on a struck baseline
   (the compositor's lead) rather than floating. Drawn as a foundation swell in
   the demo; this is the fallback flat lead if a band wants no drawn rule. */
.pl-headpiece::before,.pl-headpiece::after,
.pl-tailpiece::before,.pl-tailpiece::after{
  content:"";flex:1 1 2rem;block-size:var(--pl-hair);
  background:linear-gradient(var(--dir,to right),transparent,var(--pl-line-firm) 60%,var(--pl-line-firm));
}
.pl-headpiece::before,.pl-tailpiece::before{--dir:to left}

/* ===========================================================================
   4 · THE REGISTRATION CROSS  —  .pl-reg-cross  (the focus-ring of the world)
   ---------------------------------------------------------------------------
   On a multi-plate print, the pressman strikes a small cross-in-circle at each
   trim corner; every colour plate is laid to those marks so the inks register.
   We make that the KEYBOARD FOCUS indicator: tab to an element and four vermilion
   registration crosses snap to its corners — "this is the mark we are aligned to."

   THE CUT (why this is not a neon box-shadow / blue outline — P_training):
   · Focus is shown by STRUCK MARKS of the world (vermilion crosses), not a glow.
     The crosses are drawn with the host's own pseudo-elements as crisp hairlines
     pulled a hair OUTSIDE the box (the printer registers past the trim).
   · It is genuinely accessible: the crosses are a high-contrast, clearly visible
     focus indicator that does not rely on colour alone (the cross SHAPE at the
     corners is the signal); it appears only on :focus-visible (keyboard), so a
     mouse press is undisturbed; and it replaces the default outline cleanly.
   · Reduced-motion safe: the crosses simply APPEAR (no draw-on), and the static
     state is the finished register mark.

   USAGE: put .pl-reg-cross on a focusable element (or a wrapper that contains the
   real control). It needs position; we set it. The element keeps its own look —
   this only adds the corner marks on focus.
   ------------------------------------------------------------------------- */
.pl-reg-cross{position:relative}

/* Each cross is a crosshair (a vertical bar + a horizontal bar of the press ink)
   inside a faint registration ring — built as layered background gradients + a
   round border, so it is one CSP-clean element, no SVG, no extra DOM. We strike
   TWO crosses, on the DIAGONAL: top-left on ::before, bottom-right on ::after.
   A diagonal pair reads unambiguously as "the sheet is registered to these marks"
   and stays robust at any box size — far steadier than forcing four corners out
   of two pseudo-elements. (The demo shows the full four-corner press set drawn as
   inline SVG, where four marks are trivially exact.) */
.pl-reg-cross::before,
.pl-reg-cross::after{
  content:"";position:absolute;pointer-events:none;
  inline-size:calc(var(--pl-reg-arm) * 2);
  block-size:calc(var(--pl-reg-arm) * 2);
  opacity:0;transform:scale(.7);
  transition:opacity .14s var(--pl-ease),transform .14s var(--pl-ease-press);
  /* the crosshair: a vertical bar + a horizontal bar of the press ink, centred */
  background:
    linear-gradient(var(--pl-reg-ink),var(--pl-reg-ink)) center / var(--pl-reg-w) 100% no-repeat,
    linear-gradient(var(--pl-reg-ink),var(--pl-reg-ink)) center / 100% var(--pl-reg-w) no-repeat;
  /* the faint registration ring around the crosshair */
  border:var(--pl-hair) solid color-mix(in oklab,var(--pl-reg-ink) 55%,transparent);
  border-radius:50%;
}
/* TOP-LEFT on ::before, pulled a hair outside the trim (the printer registers
   past the edge); BOTTOM-RIGHT on ::after. */
.pl-reg-cross::before{
  top:calc(-1 * var(--pl-reg-inset));
  left:calc(-1 * var(--pl-reg-inset));
}
.pl-reg-cross::after{
  bottom:calc(-1 * var(--pl-reg-inset));
  right:calc(-1 * var(--pl-reg-inset));
}

/* reveal on keyboard focus (focus-visible) — of the element OR anything it wraps.
   We remove the world's default vermilion outline here because the crosses ARE
   the (more specific, equally visible) focus indicator. */
.pl-reg-cross:focus-visible,
.pl-reg-cross:focus-within{outline:none}
.pl-reg-cross:focus-visible::before,
.pl-reg-cross:focus-visible::after,
.pl-reg-cross:focus-within::before,
.pl-reg-cross:focus-within::after{
  opacity:1;transform:scale(1);
}

/* ---------------------------------------------------------------------------
   REDUCED-MOTION KILL — MANDATORY for the NEW effects this file adds.
   The global *{animation:none;transition:none} (torad-world.css §17) handles the
   transitions and the keyframed candle-breath ANIMATION, but it does NOT touch:
     · the @property-driven LIFT (we pin it to its calm value), or
     · the watermark's drop-shadow filter (left as a finished still relief).
   We also make the registration crosses simply PRESENT-on-focus with no scale
   move (the global kill already drops the transition; we ensure the resting state
   is the finished mark).
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pl-watermark__device{--pl-wm-breath:1;animation:none}
  [data-leaf="candlelight"] .pl-watermark__device{animation:none}
  .pl-reg-cross::before,.pl-reg-cross::after{transform:none}
  .pl-reg-cross:focus-visible::before,.pl-reg-cross:focus-visible::after,
  .pl-reg-cross:focus-within::before,.pl-reg-cross:focus-within::after{transform:none}
}