/*
 * Segreant site: security print.
 *
 * The world is a banknote. The dark theme (the main one) is the note under UV
 * light: sable paper, gold engraving, fluorescent teal and violet guilloche. The
 * light theme is the same note in daylight: cotton paper and green-grey cheque
 * stock, bottle green engraving. Ornament lives at the edges of a frame; the
 * reading area inside stays quiet. Every engraved image is an alpha mask painted
 * in a theme token, so no picture carries its own colour.
 *
 * Motion is "the print run": text is ink already on the page, and only the
 * press moves. Every animated element's resting state is its finished, printed
 * state; the pre-print states below apply only under html.motion (set before
 * first paint when the visitor has not asked for reduced motion), and
 * html.settled forces everything printed if the script never runs.
 *
 * No third-party files: the four typefaces are OFL fonts subset into
 * assets/fonts (licence in assets/fonts/OFL.txt).
 */

@font-face { font-family: "Castoro"; src: url("fonts/castoro-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Castoro"; src: url("fonts/castoro-italic-var.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Castoro Titling"; src: url("fonts/castoro-titling.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-var.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url("fonts/spline-sans-mono-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

/* The engraver's burin: how far along the plate the cut has travelled, 0 to 1. */
@property --burin { syntax: "<number>"; inherits: false; initial-value: 1; }

:root {
  --paper: #0b0d14;
  --paper-2: #10131c;
  --paper-3: #161a25;
  --paper-tex: url("print/paper-uv.webp");
  --tex-opacity: 0.55;
  --sheet: #0d1017;
  --sheet-blend: soft-light;
  --core: #2b3141;
  --shadow: rgba(0, 0, 0, 0.7);
  --cert: #10131c;
  --ink: #ebe7dc;
  --ink-soft: #aeb0b8;
  --rule: #2a2f3d;
  --rule-strong: #4a5063;
  --or: #e8b33c;
  --on-or: #0b0d14;
  --engrave: #d9aa45;
  --vignette: #c7b68c;
  --vignette-opacity: 0.72;
  --kept: #82d4ab;
  --notkept: #f08a74;
  --stamp: #b8a2f2;
  --guil-a: rgba(94, 214, 196, 0.22);
  --guil-b: rgba(179, 156, 240, 0.2);
  --card: #121621; --card-blend: soft-light; --plate-ink: #e2b04a; --plate-dark: 1;
  --note-paper: #0f131c; --note-ink: #c9a24e; --note-red: #ee6a50; --note-blend: screen; --vig-body: #cdb58a; --vig-ink: #0d1017;
  --display: "Castoro", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --caps: "Castoro Titling", "Castoro", Georgia, serif;
  --body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --figs: "Spline Sans Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  --step-3: clamp(2.6rem, 1.4rem + 4.2vw, 4.6rem);
  --step-4: clamp(3rem, 1.2rem + 5.6vw, 6.4rem);
  --wrap: 1180px;
  --ease-press: cubic-bezier(0.2, 0.75, 0.15, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --paper: #f3eee0; --paper-2: #fbf8ef; --paper-3: #ebe5d3; --paper-tex: url("print/paper-light.webp"); --tex-opacity: 0.6;
    --sheet: #fbf7ea; --sheet-blend: multiply; --core: #fdfcf7; --shadow: rgba(48, 40, 22, 0.28); --cert: #f7f3e7;
    --ink: #16211d; --ink-soft: #3d4943; --rule: #d3ccb8; --rule-strong: #a69d86;
    --or: #8a5d0f; --on-or: #f7f8f4; --engrave: #1f4d3f; --vignette: #1f4d3f; --vignette-opacity: 0.85; --kept: #17603f; --notkept: #a8321f; --stamp: #5b3db3;
    --guil-a: rgba(31, 90, 74, 0.34); --guil-b: rgba(31, 90, 74, 0.2); --foil-1: #8a6420; --foil-2: #e9cf8a;
    --card: #fffdf6; --card-blend: multiply; --plate-ink: #1d4a3c; --plate-dark: 0;
    --note-paper: #fbf7ec; --note-ink: #1f5242; --note-red: #b3261e; --note-blend: multiply; --vig-body: transparent; --vig-ink: var(--vignette);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --paper: #f3eee0; --paper-2: #fbf8ef; --paper-3: #ebe5d3; --paper-tex: url("print/paper-light.webp"); --tex-opacity: 0.6;
  --sheet: #fbf7ea; --sheet-blend: multiply; --core: #fdfcf7; --shadow: rgba(48, 40, 22, 0.28); --cert: #f7f3e7;
  --ink: #16211d; --ink-soft: #3d4943; --rule: #d3ccb8; --rule-strong: #a69d86;
  --or: #8a5d0f; --on-or: #f7f8f4; --engrave: #1f4d3f; --vignette: #1f4d3f; --vignette-opacity: 0.85; --kept: #17603f; --notkept: #a8321f; --stamp: #5b3db3;
  --guil-a: rgba(31, 90, 74, 0.34); --guil-b: rgba(31, 90, 74, 0.2); --foil-1: #8a6420; --foil-2: #e9cf8a;
  --card: #fffdf6; --card-blend: multiply; --plate-ink: #1d4a3c; --plate-dark: 0;
  --note-paper: #fbf7ec; --note-ink: #1f5242; --note-red: #b3261e; --note-blend: multiply; --vig-body: transparent; --vig-ink: var(--vignette);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  background: var(--paper-tex) 0 0 / 640px repeat, var(--sheet); background-blend-mode: var(--sheet-blend);
  font: 400 var(--step-0)/1.62 var(--body); font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
/* The paper: the scanned stock is the page itself, from top to bottom. */
html, body { overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:not(.btn):not(.skip):hover { color: var(--or); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
code, kbd, .figs { font-family: var(--figs); font-variant-numeric: tabular-nums slashed-zero; }
code { font-size: 0.9em; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--step-3); line-height: 1; }
h2 { font-size: var(--step-2); line-height: 1.1; }
h3 { font-size: var(--step-1); line-height: 1.25; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--or); color: var(--on-or); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 16px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; position: relative; z-index: 1; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 31em; }
.prose { max-width: 58ch; display: grid; gap: 14px; }
.prose p { color: var(--ink-soft); }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.soft { color: var(--ink-soft); }
.kept { color: var(--kept); } .notkept { color: var(--notkept); }
.sample {
  display: inline-block; border: 1px solid var(--rule-strong); border-radius: 3px; padding: 1px 8px;
  font: 500 13px/1.5 var(--figs); letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap;
}

/* Header bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark { width: 34px; height: 34px; flex: none; background: var(--or); -webkit-mask: url("print/mark-ink.svg") center / contain no-repeat; mask: url("print/mark-ink.svg") center / contain no-repeat; }
.brand .word { font-family: var(--caps); font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase; }
.top nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; font-size: 15.5px; }
.top nav a { text-decoration: none; color: var(--ink-soft); padding-block: 6px; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.theme {
  font: 500 14px var(--body); color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 6px 14px; min-height: 36px;
}
.theme:hover { border-color: var(--or); }

/* Buttons */
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  font: 600 15.5px var(--body); text-decoration: none; border-radius: 3px; border: 1px solid var(--or);
}
.btn.primary { background: var(--or); color: var(--on-or); }
.btn.primary:hover { color: var(--on-or); filter: brightness(1.08); }
.btn.ghost { color: var(--ink); border-color: var(--rule-strong); background: transparent; cursor: pointer; }
.btn.ghost:hover { border-color: var(--or); color: var(--ink); }

/* ---------- The sheet: the hero is one torn sheet of paper ---------- */
.sheet {
  position: relative; z-index: 3; isolation: isolate; padding-bottom: 96px;
  transform: translateY(calc(var(--lift, 0) * -36px)) rotate(calc(var(--lift, 0) * -0.5deg));
  transform-origin: 30% 0;
}
/* The paper itself, cut to the tear, on its own layer: the drop shadow follows the
   torn edge and never falls under the text printed on the sheet. */
.sheet-paper { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 14px 18px var(--shadow)); }
.sheet-paper::before {
  content: ""; position: absolute; inset: 0;
  background: var(--paper-tex) 0 0 / 640px repeat, var(--sheet);
  background-blend-mode: var(--sheet-blend);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 90px) no-repeat, url("print/tear.svg") bottom / 100% 90px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 90px) no-repeat, url("print/tear.svg") bottom / 100% 90px no-repeat;
}
/* Where the paper tore, its lighter core shows in a thin fibrous band. */
.sheet-paper .tear-core {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: -1; background: var(--core);
  -webkit-mask: url("print/tear-core.svg") center / 100% 100% no-repeat; mask: url("print/tear-core.svg") center / 100% 100% no-repeat;
}
.sheet .top { border-bottom-color: color-mix(in srgb, var(--rule) 70%, transparent); }
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 48px; align-items: center; padding-block: 56px 40px; min-height: min(calc(100svh - 160px), 760px); }
.hero h1 { font-size: var(--step-4); line-height: 0.96; letter-spacing: -0.02em; }
.hero h1 .w { display: inline-block; }
.hero h1 em { font-style: italic; font-weight: 540; color: var(--or); }
.hero .dream { margin-top: 28px; max-width: 24em; font: italic 400 clamp(1.35rem, 1.05rem + 0.9vw, 1.75rem)/1.3 var(--display); color: var(--ink); }
.hero .lede { margin-top: 16px; }
.hero .cta { margin-top: 34px; }
.hero .note { margin-top: 22px; font-size: 15.5px; color: var(--ink-soft); max-width: 34em; }

/* ====== 2026-10-06: the plate, the bill, the reverse ====== */
/* The hero: the plate is the focus. It is sized to the screen's height as well
   as its width, so the whole griffin is in the first view on any display. */
.hero { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 24px 40px; min-height: min(calc(100svh - 96px), 900px); padding-block: 24px 72px; }
.hero-plate { position: relative; margin: 0 0 34px; aspect-ratio: 1; width: min(100%, calc(100svh - 230px), 800px); min-width: min(100%, 300px);
  justify-self: end; align-self: center; translate: 0 calc(var(--lift, 0) * 30px); }
/* The canvas edge is feathered, so the plate never shows a rectangle. */
.hero-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect; }
/* The CSS print: the finished plate without WebGL, and the first frame before it. */
.hero-plate .print { position: absolute; inset: 5%; background: var(--plate-ink);
  -webkit-mask: url("print/plate-griffin-900.webp") center / contain no-repeat; mask: url("print/plate-griffin-900.webp") center / contain no-repeat; }
.hero-plate.gl .print { opacity: 0; }
html.motion .hero-plate:not(.gl):not(.no-gl) .print { opacity: 0; }
html.motion.settled .hero-plate:not(.gl) .print { opacity: 1; transition: opacity 0.6s; }
.hero-plate .cap { position: absolute; left: 5%; right: 5%; bottom: -26px; display: flex; justify-content: space-between; gap: 12px;
  font: italic 15px var(--display); color: var(--ink-soft); }
.hero-plate .cap .no { font: 500 14px var(--figs); font-style: normal; letter-spacing: 0.08em; color: var(--ink-soft); white-space: nowrap; transition: color 0.4s; }
.hero-plate.numbered .cap .no { color: var(--note-red); }


/* Cards are paper on paper: a whiter cotton, never a flat fill. */
.frame, .slip, .loop { background: var(--paper-tex) 0 0 / 640px repeat, var(--card); background-blend-mode: var(--card-blend); }
.term, .eq { background: var(--paper-tex) 0 0 / 640px repeat, var(--paper-3); background-blend-mode: var(--card-blend); }
.slip::after { background: radial-gradient(circle at 6px 0, transparent 5px, var(--card) 5.5px) 0 0 / 12px 9px repeat-x; }

/* ---------- The bill: a specimen note ----------
   Built like a real note: a text-free engraved frame (a generated plate, shipped
   as an ink mask), the griffin in the oval window, the figure in the value
   panel, red serials, and a SAMPLE overprint where a specimen note says
   SPECIMEN. Every position below is measured from the frame artwork, in % of
   the note; type is in container units, so the note scales as one object. */
.note-cert { margin: 0; position: relative; container-type: inline-size; perspective: 1600px; }
.nf { position: relative; aspect-ratio: 2.2243; border-radius: 4px; overflow: hidden; isolation: isolate;
  background: var(--paper-tex) 0 0 / 420px repeat, var(--note-paper); background-blend-mode: var(--card-blend);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rule-strong) 55%, transparent), 0 26px 50px -28px var(--shadow);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.7s var(--ease-press); }
.note-cert.tilting .nf { transition: transform 0.1s linear; }
.nf > * { position: absolute; margin: 0; }
.nf-frame { inset: 0; background: var(--note-ink);
  -webkit-mask: url("print/note-frame.webp") center / 100% 100% no-repeat; mask: url("print/note-frame.webp") center / 100% 100% no-repeat; }
.nf-oval { left: 12.65%; top: 15.21%; width: 25.64%; height: 69.71%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, transparent 50%, color-mix(in srgb, var(--note-ink) 16%, transparent) 100%); }
.nf-griffin, .nf-under { left: 14.6%; width: 21.7%; aspect-ratio: 1; top: 50%; translate: 0 -50%; background: var(--note-ink); }
.nf-griffin { -webkit-mask: url("print/plate-griffin-900.webp") center / contain no-repeat; mask: url("print/plate-griffin-900.webp") center / contain no-repeat; }
.nf-under { opacity: var(--under, 0); -webkit-mask: url("print/plate-griffin-body-900.webp") center / contain no-repeat; mask: url("print/plate-griffin-body-900.webp") center / contain no-repeat; }
.nf-corner { width: 3.4%; aspect-ratio: 1; translate: -50% -50%; background: var(--note-ink); opacity: 0.85;
  -webkit-mask: url("print/mark-ink.svg") center / contain no-repeat; mask: url("print/mark-ink.svg") center / contain no-repeat; }
.nf-corner.tl { left: 4.36%; top: 9.26%; } .nf-corner.tr { left: 95.67%; top: 9.26%; }
.nf-corner.bl { left: 4.36%; top: 90.88%; } .nf-corner.br { left: 95.67%; top: 90.88%; }
.nf-issuer { left: 46%; width: 42%; top: 15.5%; display: grid; justify-items: center; gap: 0.7cqw; text-align: center; }
.nf-issuer b { font: 400 3.3cqw/1 var(--caps); letter-spacing: 0.34em; margin-right: -0.34em; text-transform: uppercase; color: var(--note-ink); }
.nf-issuer span { font: 1.22cqw/1.2 var(--caps); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.nf-panel { left: 49.17%; top: 36.63%; width: 35.62%; height: 26.61%; display: grid; place-content: center; justify-items: center; gap: 0.5cqw; text-align: center; }
.nf-panel .what { font: 1.3cqw/1 var(--caps); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.nf-panel .amount { font: 400 6.3cqw/1.05 var(--caps); font-variant-numeric: lining-nums proportional-nums; color: var(--ink); white-space: nowrap; }
.nf-of { left: 49.17%; width: 35.62%; top: 66.5%; text-align: center; font: italic 1.75cqw/1.2 var(--display); color: var(--ink-soft); }
.nf-serial { font: 600 1.5cqw/1 var(--figs); letter-spacing: 0.12em; color: var(--note-red); }
.nf-serial.s2 { left: 41.5%; bottom: 13.2%; }
.nf-glare { inset: 0; pointer-events: none; opacity: var(--glare, 0); transition: opacity 0.5s;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.32), transparent 42%); mix-blend-mode: soft-light; }
/* SAMPLE, overprinted the way a specimen note is: red, struck at an angle, outside the figure. */
.note-cert .nf .sample { left: 71%; top: 80.5%; translate: -50% -50%; rotate: -7deg; padding: 0.5cqw 1.4cqw 0.35cqw 1.9cqw;
  border: 0.32cqw double var(--note-red); border-radius: 0.5cqw; background: none; color: var(--note-red);
  font: 400 3cqw/1 var(--caps); letter-spacing: 0.42em; text-transform: uppercase; white-space: nowrap; opacity: 0.8; mix-blend-mode: var(--note-blend); }
.nf-caption { display: none; margin-top: 12px; font-size: 15px; color: var(--ink-soft); }
:root { --under: 0.12; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --under: 0; } }
:root[data-theme="light"] { --under: 0; }
/* On a phone the note is small: it keeps the figure and the overprint, and the
   sentence moves under it. */
@container (max-width: 560px) {
  .nf-issuer span, .nf-panel .what, .nf-of, .nf-serial.s2 { display: none; }
  .nf-panel .amount { font-size: 7.4cqw; }
  .nf-serial { font-size: 2.2cqw; }
  .note-cert .nf .sample { font-size: 3.6cqw; }
  .nf-caption { display: block; }
}
html.motion .note-cert:not(.inked) .nf-griffin, html.motion .note-cert:not(.inked) .nf-under { opacity: 0; }
html.motion .note-cert .nf-griffin { transition: opacity 0.9s 0.25s; }
html.motion .note-cert:not(.inked) .nf .sample { opacity: 0; }
html.motion .note-cert.inked .nf .sample { animation: thunk 0.45s 1.5s cubic-bezier(0.3, 0.6, 0.3, 1.2) both; }
html.settled .note-cert .nf-griffin, html.settled .note-cert .nf .sample { opacity: 0.8 !important; }
html.settled .note-cert .nf-griffin { opacity: 1 !important; }

/* ---------- The reverse of the note: three engraved scenes, one per job ---------- */
.reverse { padding-block: 88px 72px; }
.reverse h2 { max-width: 20em; }
.reverse ol { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.reverse li { display: grid; gap: 14px; align-content: start; }
.reverse .scene, .method-plate { position: relative; aspect-ratio: 3 / 2; }
.reverse .scene::before, .method-plate::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--rule-strong); box-shadow: inset 0 0 0 5px var(--rule); }
/* On the dark stock a vignette prints as a positive: a pale gold oval with the
   engraving cut into it. The oval is analytic, so no extra image ships. */
.reverse .scene::after, .method-plate::after { content: ""; position: absolute; inset: 1.5%; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at 50% 42%, var(--vig-body), color-mix(in srgb, var(--vig-body) 70%, #6b5524)); }
.reverse .vignette, .method-plate .vignette { display: block; position: absolute; inset: 0; width: auto; aspect-ratio: auto; opacity: 1; z-index: 1; background: var(--vig-ink); }
.reverse h3 { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.reverse h3 .n { font: 500 14px var(--figs); color: var(--or); }
.reverse p { color: var(--ink-soft); font-size: 15.5px; max-width: 34ch; }
.reverse a { font-size: 15px; }
#caps .head, #method .head { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-plate { order: -1; justify-self: center; width: min(100%, 520px); margin-bottom: 40px; }
  .reverse ol { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .reverse .scene { max-width: 520px; }
}
@media (max-width: 620px) {
  .hero-plate { width: min(100%, 340px); }
  .hero-plate .cap { font-size: 13px; }
  .hero-plate .cap .no { font-size: 12px; }
}

/* ---------- Sections ---------- */
section.band { padding-block: 88px; border-top: 1px solid var(--rule); }
section.band.first { border-top: 0; padding-top: 72px; }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 32px 56px; align-items: end; margin-bottom: 40px; }
.head.note-head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.head .prose { margin-top: 18px; }
.vignette { width: 100%; aspect-ratio: 3 / 2; background: var(--vignette); opacity: var(--vignette-opacity);
  -webkit-mask: linear-gradient(62deg, #000 calc(var(--burin) * 140% - 40%), transparent calc(var(--burin) * 140% - 22%)), var(--src) center / contain no-repeat;
  -webkit-mask-composite: source-in;
  mask: linear-gradient(62deg, #000 calc(var(--burin) * 140% - 40%), transparent calc(var(--burin) * 140% - 22%)), var(--src) center / contain no-repeat;
  mask-composite: intersect; }
.vignette.ledger { --src: url("print/vignette-ledger.webp"); }
.vignette.gate { --src: url("print/vignette-gate.webp"); }
.vignette.workshop { --src: url("print/vignette-workshop.webp"); }
.why-side { display: grid; align-content: start; }

/* A rope border printed between movements of the page. */
.rope-rule { height: 18px; background: var(--guil-a); -webkit-mask: url("print/guilloche-border.svg") 0 0 / 600px 100% repeat-x; mask: url("print/guilloche-border.svg") 0 0 / 600px 100% repeat-x; clip-path: inset(0 0 0 0); }

/* ---------- The statement ---------- */
.frame { border: 1px solid var(--rule-strong); padding: 7px; position: relative; background: var(--paper-2); }
.frame::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--rule); pointer-events: none; }
.statement { position: relative; padding: 30px clamp(18px, 3vw, 40px) 34px; }
.st-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 20px; padding-bottom: 14px; }
.st-top h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); }
.st-top .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); }
.lines { border-top: 2px solid var(--ink); }
.line { position: relative; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 0 16px; align-items: baseline; padding: 13px 0 4px; border-bottom: 1px solid var(--rule); }
.line .no { font: 500 13px var(--figs); color: var(--ink-soft); }
.line .label { font-size: 17px; }
.line .val { font: 500 19px var(--figs); font-variant-numeric: tabular-nums; text-align: right; }
.line .val.none { font: 400 15.5px var(--body); color: var(--ink-soft); text-align: right; }
.line details { grid-column: 2 / -1; }
.line summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--ink-soft); text-decoration: underline dotted; text-underline-offset: 0.2em; list-style: none; }
.line summary::-webkit-details-marker { display: none; }
.line details[open] summary { color: var(--ink); }
.line details p { font-size: 15.5px; color: var(--ink-soft); padding-bottom: 10px; max-width: 64ch; }
.line.total { border-bottom: 3px double var(--ink); padding-bottom: 13px; }
.line.total .label { font-weight: 600; }
.line.group { padding-block: 16px 6px; border-bottom: 0; }
.line.group .label { font-family: var(--caps); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
/* The stamp belongs to Line 6, struck across it at an angle. */
.stamp {
  position: absolute; right: 8.5rem; top: 10px; transform: rotate(-5deg); pointer-events: none;
  border: 2px solid var(--stamp); color: var(--stamp); border-radius: 4px; padding: 5px 11px;
  font: 600 14px var(--figs); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.88;
}
.tablewrap { margin-top: 28px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
caption { text-align: left; font-family: var(--caps); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 8px; }
th { text-align: left; font: 600 13px var(--body); color: var(--ink-soft); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ink); }
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td.n, th.n { text-align: right; font-family: var(--figs); font-variant-numeric: tabular-nums; padding-right: 0; }
.st-foot { margin-top: 22px; font-size: 14px; color: var(--ink-soft); display: grid; gap: 6px; max-width: 60ch; }

/* Rolling figures: each digit is a numbering wheel. */
.dg { display: inline-block; width: var(--dw, auto); height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom; }
.dg > span > span { text-align: center; }
.dg > span { display: block; transform: translateY(calc(var(--n) * -1.2em)); }
.dg > span > span { display: block; height: 1.2em; }

/* Four kinds of number */
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: 48px; }
.kinds > div { padding: 20px 20px 4px 0; display: grid; gap: 8px; align-content: start; }
.kinds > div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.kinds h3 { font-size: 1.15rem; }
.kinds p { font-size: 15.5px; color: var(--ink-soft); }
.kinds .src { font: 500 13px var(--figs); color: var(--or); }

/* Two-column feature bands */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.facts { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: 28px; }
.facts > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt, .facts .k { font: 600 14px var(--body); color: var(--ink); }
.facts dd, .facts .v { margin: 0; font-size: 15.5px; color: var(--ink-soft); max-width: 58ch; }
/* A limit reads like a clause in a statement: ruled above, lead phrase in full ink. */
.limit { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-soft); }
.limit b { font-weight: 600; color: var(--ink); }
.limit:first-child { margin-top: 0; }

/* Terminal: set as printed matter, not a glowing window. */
.term { margin: 0; background: var(--paper-3); border: 1px solid var(--rule); padding: 18px 20px; overflow-x: auto; font: 14px/1.7 var(--figs); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.term .c { color: var(--ink-soft); }
.term .p { color: var(--or); user-select: none; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.step { display: grid; gap: 12px; align-content: start; }
.step h3 { display: flex; gap: 12px; align-items: baseline; }
.step h3 .n { font: 500 14px var(--figs); color: var(--or); }
.step p { color: var(--ink-soft); font-size: 15.5px; }

/* Receipt */
.receipt { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: start; }
.slip { position: relative; background: var(--paper-2); border: 1px solid var(--rule-strong); padding: 22px 22px 18px; font: 14px/1.75 var(--figs); }
.slip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; background: radial-gradient(circle at 6px 0, transparent 5px, var(--paper-2) 5.5px) 0 0 / 12px 9px repeat-x; }
.slip .row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; }
.slip .row span:first-child { color: var(--ink-soft); }
.slip .hdr { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--caps); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--rule-strong); }
/* The signing mark, struck in foil at the foot of the slip. */
.slip .seal { position: absolute; right: 18px; bottom: 16px; width: 64px; height: 64px; background: var(--or); opacity: 0.9;
  -webkit-mask: url("print/mark-ink.svg") center / contain no-repeat; mask: url("print/mark-ink.svg") center / contain no-repeat; }

/* Source notes */
.sources { font-size: 14px; color: var(--ink-soft); margin-top: 18px; display: grid; gap: 4px; }
.sources a { color: var(--ink-soft); }

/* Priority order */
.order { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); counter-reset: o; }
.order li { counter-increment: o; padding: 16px 18px 0 0; font-size: 15.5px; display: grid; gap: 4px; }
.order li + li { padding-left: 18px; border-left: 1px solid var(--rule); }
.order li::before { content: counter(o); font: 500 14px var(--figs); color: var(--or); }
.note-line { margin-top: 36px; max-width: 58ch; color: var(--ink-soft); }
/* 2026-10-19 rebalance: no section leaves a column standing empty. */
.why-side { position: sticky; top: 32px; }
.pair { margin-top: 40px; display: flex; gap: 40px; flex-wrap: wrap; }
.pair span { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.pair b { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.prose.cols { max-width: none; margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.prose.cols p { margin: 0; }
.facts.flush { margin-top: 0; }
.split h2 + .prose { margin-top: 18px; }
.order.stacked { grid-template-columns: minmax(0, 1fr); border-top-color: var(--rule); margin-top: 20px; }
.order.stacked li, .order.stacked li + li { grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
.facts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
@media (max-width: 960px) { .why-side { position: static; } .prose.cols, .facts.two { grid-template-columns: minmax(0, 1fr); } .prose.cols p + p { margin-top: 16px; } }

/* Start */
.agent-title { margin-top: 40px; font-size: var(--step-1, 1.35rem); }
.agent-note { margin-top: 8px; color: var(--ink-soft); }
.term.agent { margin-top: 14px; white-space: pre-wrap; }
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: start; }

/* Footer */
footer.site { border-top: 1px solid var(--rule); padding-block: 36px 56px; font-size: 14px; color: var(--ink-soft); display: grid; gap: 18px; }
footer.site > p { max-width: 60ch; }
footer.site .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; align-items: center; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer.site a { color: var(--ink-soft); }

/* ---------- The loop guard, run as a simulation ---------- */
.loop { position: relative; margin: 0 0 18px; border: 1px solid var(--rule-strong); background: var(--paper-2); padding: 16px 18px 18px; overflow: hidden; }
.loop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 13px var(--figs); color: var(--ink-soft); }
.tape { list-style: none; margin: 12px 0 14px; padding: 0; height: 200px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  font: 13px/1.7 var(--figs); -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%); }
.tape li { display: grid; grid-template-columns: 7.2rem 4.4rem minmax(0, 1fr); gap: 10px; color: var(--ink-soft); white-space: nowrap; }
.tape li .c { color: var(--ink); text-align: right; }
.tape li.blocked { color: var(--notkept); white-space: normal; }
.tape li.blocked .c { color: var(--notkept); }
.meter-label, .meter-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.meter-val { color: var(--ink); }
.meter { position: relative; height: 10px; margin: 6px 0; background: var(--paper-3); border: 1px solid var(--rule); }
.meter i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(min(1, var(--w, 0))); background: var(--or); transition: transform 0.12s linear; }
.loop.blocked .meter i { background: var(--notkept); }
.meter b { position: absolute; top: -4px; bottom: -4px; width: 2px; translate: -2px 0; background: var(--notkept); }
.loop-verdict { margin-top: 14px; font-size: 14px; color: var(--notkept); }
.loop-verdict .figs { font-weight: 600; margin-right: 6px; }
.loop-stamp { top: 52px; right: 22px; border-color: var(--notkept); color: var(--notkept); }
.loop-replay { margin-top: 14px; min-height: 40px; padding: 8px 16px; }
html.motion .loop:not(.blocked) .loop-verdict { opacity: 0; }
html.motion .loop:not(.blocked) .loop-stamp { opacity: 0; }
html.motion .loop.blocked .loop-stamp { animation: thunk 0.45s 0.15s cubic-bezier(0.3, 0.6, 0.3, 1.2) both; }
html.motion .loop.blocked .loop-verdict { animation: surface 0.4s ease-out both; }
html.motion .loop.blocked { animation: jolt 0.25s 0.45s ease-out; }

/* ---------- The statement prints line by line; the receipt feeds out of a slot ---------- */
@keyframes feed { from { clip-path: inset(0 0 100% 0); translate: 0 -28px; } to { clip-path: inset(0 0 -14px 0); translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .statement:not(.inked) .lines > .line { opacity: 0; }
  html.motion .statement.inked .lines > .line { animation: surface 0.45s calc(var(--k, 0) * 0.09s) ease-out both; }
  html.motion .slip.ink-on:not(.inked) { clip-path: inset(0 0 100% 0); }
  html.motion .slip.inked { animation: feed 1.3s cubic-bezier(0.55, 0.1, 0.35, 1) both; }
}
.lines > .line:nth-child(2) { --k: 1; } .lines > .line:nth-child(3) { --k: 2; } .lines > .line:nth-child(4) { --k: 3; }
.lines > .line:nth-child(5) { --k: 4; } .lines > .line:nth-child(6) { --k: 5; } .lines > .line:nth-child(7) { --k: 6; }
.lines > .line:nth-child(8) { --k: 7; } .lines > .line:nth-child(9) { --k: 8; } .lines > .line:nth-child(10) { --k: 9; }
html.settled .statement .lines > .line, html.settled .loop .loop-verdict, html.settled .loop .loop-stamp { opacity: 1 !important; }
html.settled .slip { clip-path: none !important; }

/* ---------- Method page ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15.5px; margin-top: 26px; }
.toc a { color: var(--ink-soft); }
.eq { font: 15.5px/1.6 var(--figs); background: var(--paper-3); border: 1px solid var(--rule); padding: 14px 18px; overflow-x: auto; white-space: nowrap; color: var(--ink); }
.measured { font: 500 14px/1.6 var(--figs); color: var(--kept); }
.status { display: inline-block; font: 600 13px var(--body); border: 1px solid currentColor; border-radius: 3px; padding: 1px 8px; }
.status.ships { color: var(--kept); } .status.lib { color: var(--or); } .status.none { color: var(--notkept); }
.funnel { display: grid; gap: 6px; margin-top: 18px; }
.frow { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 13rem; gap: 14px; align-items: center; font-size: 15.5px; }
.frow .g { text-align: right; color: var(--ink-soft); }
.frow .bar { height: 14px; background: var(--paper-3); border: 1px solid var(--rule); }
.frow .bar i { display: block; height: 100%; background: var(--engrave); }
.frow.kept .bar i { background: var(--kept); }
.frow .v { font: 14px var(--figs); color: var(--ink-soft); }
.method-grid { display: grid; gap: 56px; }
.method-item { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 16px 48px; padding-top: 28px; border-top: 1px solid var(--rule); }
.method-item .body { display: grid; gap: 14px; }
.method-item .body p { color: var(--ink-soft); max-width: 58ch; }
.method-item .body b { color: var(--ink); font-weight: 600; }
.method-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; padding-block: 56px 72px; }
.method-hero h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem); }
.method-hero .lede { margin-top: 22px; }
.method-hero .method-plate { position: relative; width: 100%; max-width: 440px; aspect-ratio: 3 / 2; justify-self: end; }

/* ---------- The print run (motion) ---------- */
@keyframes burin { from { --burin: 0; filter: blur(1.4px); } 70% { filter: blur(0.3px); } to { --burin: 1; filter: none; } }
@keyframes press-in { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } }
@keyframes strike { 0% { opacity: 0; transform: translateY(-0.1em) scale(1.08); filter: blur(4px); } 55% { opacity: 1; filter: blur(0); transform: translateY(0.01em) scale(0.995); } 100% { opacity: 1; transform: none; } }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes surface { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheen { from { --sheen: -100%; } to { --sheen: 100%; } }
@keyframes thunk { 0% { opacity: 0; transform: rotate(-14deg) scale(2.1); filter: blur(3px); } 62% { opacity: 1; transform: rotate(-4deg) scale(0.94); filter: blur(0); } 100% { opacity: 0.88; transform: rotate(-5deg) scale(1); } }
@keyframes jolt { 0%, 100% { translate: 0 0; } 30% { translate: 0 2px; } 60% { translate: 0 -1px; } }
@keyframes print-across { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* Opening: the plate is pulled. */
  html.motion.intro .hero h1 .w { animation: strike 0.7s calc(0.5s + var(--i, 0) * 0.09s) var(--ease-press) both; }
  html.motion.intro .hero h1 .w:nth-child(1) { --i: 0; } html.motion.intro .hero h1 .w:nth-child(2) { --i: 1; }
  html.motion.intro .hero h1 .w:nth-child(3) { --i: 2; } html.motion.intro .hero h1 .w:nth-child(4) { --i: 3; }
  html.motion.intro .hero h1 .w:nth-child(5) { --i: 4.6; }
  html.motion.intro .hero .dream, html.motion.intro .hero .lede, html.motion.intro .hero .cta, html.motion.intro .hero .note { animation: surface 0.6s 0.95s ease-out both; }

  /* As each plate reaches the reader: engravings are cut, the note is struck,
     figures roll on their wheels, the stamp comes down, rope borders print across. */
  html.motion .ink-on:not(.inked) .vignette { --burin: 0; }
  html.motion .ink-on .vignette { transition: --burin 1.7s cubic-bezier(0.5, 0.05, 0.3, 1); }
  html.motion .dg > span { transition: transform 1.3s var(--ease-press) var(--delay, 0s); }
  html.motion .ink-on:not(.inked) .dg > span { transform: translateY(0); }
  html.motion .statement:not(.inked) .stamp { opacity: 0; }
  html.motion .statement.inked .stamp { animation: thunk 0.45s 1.5s cubic-bezier(0.3, 0.6, 0.3, 1.2) both; }
  html.motion .statement.inked { animation: jolt 0.25s 1.78s ease-out; }
  html.motion .rope-rule:not(.inked) { clip-path: inset(0 100% 0 0); }
  html.motion .rope-rule.inked { animation: print-across 1.4s cubic-bezier(0.6, 0.1, 0.3, 1) both; }
  html.motion .slip:not(.inked) .seal { opacity: 0; }
  html.motion .slip.inked .seal { animation: thunk 0.45s 1.35s cubic-bezier(0.3, 0.6, 0.3, 1.2) both; }
}
@property --sheen { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

/* Failsafe: if the script never runs, or the animation timeline stalls (a frozen
   background tab, a power-saving mode), everything is printed: the intro included. */
html.settled .hero h1 .w, html.settled .hero .lede, html.settled .hero .cta, html.settled .hero .note { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
html.settled .ink-on .vignette { --burin: 1 !important; }
html.settled .statement .stamp, html.settled .slip .seal { opacity: 1 !important; }
html.settled .rope-rule { clip-path: none !important; }
html.settled .dg > span { transform: translateY(calc(var(--n) * -1.2em)) !important; }

@media (max-width: 960px) {
  .hero, .head, .head.note-head, .split, .receipt, .start, .method-hero { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: 32px 24px; gap: 32px; min-height: 0; }
  .head .vignette { max-width: 420px; }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kinds > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .order { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .order li:nth-child(3) { padding-left: 0; border-left: 0; }
  .method-item { grid-template-columns: minmax(0, 1fr); }
  .method-hero .method-plate { justify-self: start; max-width: 340px; }
  section.band { padding-block: 64px; }
}
@media (max-width: 620px) {
  .sheet { padding-bottom: 60px; }
  .sheet-paper::before { -webkit-mask-size: 100% calc(100% - 50px), 100% 50px; mask-size: 100% calc(100% - 50px), 100% 50px; }
  .sheet-paper .tear-core { height: 50px; }
  .hero { gap: 22px; padding-top: 22px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .kinds { grid-template-columns: minmax(0, 1fr); }
  .kinds > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .order { grid-template-columns: minmax(0, 1fr); }
  .order li + li { padding-left: 0; border-left: 0; }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
  .line { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .line .no { font-size: 13px; white-space: nowrap; }
  .line .val, .line .val.none { grid-column: 2; text-align: left; }
  .line .stamp { position: static; display: inline-block; grid-column: 2; justify-self: start; margin-top: 8px; }
  .top nav { gap: 4px 16px; font-size: 14px; }
  .frow { grid-template-columns: 5rem minmax(0, 1fr); }
  .frow .v { grid-column: 2; }
  .slip .row { grid-template-columns: 6rem minmax(0, 1fr); }
  .slip .seal { width: 44px; height: 44px; }
  .tape li { grid-template-columns: 5.6rem 3.8rem minmax(0, 1fr); font-size: 12px; }
  .loop-stamp { top: 46px; right: 12px; }
}
@media print {
  .theme, .hero-plate canvas, .nf-glare { display: none; }
  .sheet { transform: none; } .sheet-paper { filter: none; }
}

/* ====== 2026-10-19: separators between movements ======
   Each movement of the page is announced by the press: its number is stamped
   down, then a guilloche rope is engraved outward from it across the page. */
section.band { border-top: 0; }
.sep { position: relative; display: flex; align-items: center; justify-content: center; min-height: 72px; margin-top: 16px; }
.sep + section.band { padding-top: 64px; }
.sep-full { position: absolute; left: calc(50% - 50vw); width: 100vw; max-width: none; }
.sep-label { position: relative; display: flex; align-items: center; gap: 12px; font: 600 12px/1 var(--figs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.sep-label .no { color: var(--note-red); border: 1.5px solid currentColor; border-radius: 2px; padding: 6px 9px 5px; rotate: -3deg; opacity: 0.9; }
.sep-gap { -webkit-mask: linear-gradient(90deg, #000 calc(50% - 150px), transparent calc(50% - 124px), transparent calc(50% + 124px), #000 calc(50% + 150px));
  mask: linear-gradient(90deg, #000 calc(50% - 150px), transparent calc(50% - 124px), transparent calc(50% + 124px), #000 calc(50% + 150px)); }
/* Without the script, a plain printed rule runs behind the number. */
.sep::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--rule-strong);
  -webkit-mask: linear-gradient(90deg, #000 calc(50% - 150px), transparent calc(50% - 124px), transparent calc(50% + 124px), #000 calc(50% + 150px));
  mask: linear-gradient(90deg, #000 calc(50% - 150px), transparent calc(50% - 124px), transparent calc(50% + 124px), #000 calc(50% + 150px)); }
.sep.roped::before { display: none; }
.sep-rope { top: 0; height: 100%; overflow: visible; }
.sep-rope path { fill: none; stroke: var(--engrave); stroke-width: 0.7; opacity: 0.55; }
.sep-rope path:nth-child(3n) { stroke: var(--or); opacity: 0.6; }

@media (prefers-reduced-motion: no-preference) {
  /* The stamp comes down, the name is struck beside it, then the rope is cut outward. */
  html.motion .sep.roped:not(.inked) .sep-label .no, html.motion .sep.roped:not(.inked) .sep-label .name { opacity: 0; }
  html.motion .sep.inked .sep-label .no { animation: stamp-down 0.42s cubic-bezier(0.3, 0.6, 0.3, 1.2) both; }
  html.motion .sep.inked .sep-label .name { animation: strike 0.5s 0.28s var(--ease-press) both; }
  html.motion .sep.inked .sep-label { animation: jolt 0.25s 0.3s ease-out; }
  html.motion .sep:not(.inked) .sep-rope path { stroke-dashoffset: 1; }
  html.motion .sep.inked .sep-rope path { animation: trace 1.6s calc(0.38s + var(--i, 0) * 0.05s) cubic-bezier(0.4, 0, 0.2, 1) both; }
}
/* A separator scrolled past before it was seen is simply printed, finished. */
html.motion .sep.settle .sep-label, html.motion .sep.settle .sep-label > span, html.motion .sep.settle .sep-rope path { animation: none; }
@keyframes stamp-down { 0% { opacity: 0; transform: scale(2.1); filter: blur(3px); } 62% { opacity: 1; transform: scale(0.94); filter: blur(0); } 100% { opacity: 0.9; transform: none; } }
@media (max-width: 620px) { .sep-gap { -webkit-mask: linear-gradient(90deg, #000 calc(50% - 120px), transparent calc(50% - 100px), transparent calc(50% + 100px), #000 calc(50% + 120px)); mask: linear-gradient(90deg, #000 calc(50% - 120px), transparent calc(50% - 100px), transparent calc(50% + 100px), #000 calc(50% + 120px)); } }
@media print { .sep { display: none; } }