/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LUMINORY — the federal effective-date record.
   Design brief: this is a REGISTER, not a marketing site. It should read like a document of
   record that someone maintains, because that is exactly what it is.

   ⛔ FOUR HORSEMEN CHECK (ENTERPRISE-MODULE-CATALOG B2), each avoided on purpose:
     1. wide letter-spacing on display type ...... display tracking is NEGATIVE (-0.022em)
     2. gradient on a light background ........... zero gradients anywhere in this file
     3. "that green" (emerald/teal ~145-175deg) .. accent is oxide red 12deg, a records stamp
     4. gradients on cards ....................... there are no cards; hairlines divide instead

   MODULES (catalog): 2.1 muted-lead headline pair · 2.2 italic-accent display serif ·
   2.4 statement band · 2.6 hairline numbered rail · 2.7 inset page canvas · 3.1 provenance rail.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Warm paper, deep ink. A register is printed, so the ground is never pure white. */
  --ground:#20211e;          /* the desk the document sits on (module 2.7) */
  --paper:#f5f2eb;
  --paper-2:#ebe6db;
  --ink:#16171a;
  --ink-2:#4a4c50;
  --ink-3:#7d7f84;
  --rule:rgba(22,23,26,.15);
  --rule-2:rgba(22,23,26,.08);
  /* One signal colour, used only for "this binds soon". Oxide red: a stamp, not a brand. */
  --signal:#a4331b;
  --signal-soft:rgba(164,51,27,.09);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --measure:74ch;
  --pad:clamp(20px,4vw,56px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── MODULE 2.7 · INSET PAGE CANVAS ────────────────────────────────────────────────────────
   The content is a document laid on a desk. This solves the hardest problem in long-page
   design cheaply: what the space between sections is made of. */
.canvas{
  background:var(--paper);
  max-width:1240px;
  margin:0 auto;
  min-height:100vh;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 24px 70px rgba(0,0,0,.34);
}
@media(min-width:900px){ .canvas{margin:28px auto;border-radius:3px} }

/* ── MASTHEAD ───────────────────────────────────────────────────────────────────────────── */
.rec-head{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px var(--pad);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
}
.rec-brand{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--serif);font-size:19px;font-weight:500;
  letter-spacing:-.01em;text-transform:none;color:var(--ink);text-decoration:none;
}
.rec-mark{width:9px;height:9px;background:var(--signal);border-radius:50%;flex:none}
.rec-kind{margin-left:auto}
.rec-sourced{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.rec-dot{width:7px;height:7px;background:var(--ink);flex:none}

.rec-nav{
  display:flex;gap:26px;flex-wrap:wrap;
  padding:11px var(--pad);
  border-bottom:1px solid var(--rule);
  font-size:13px;
}
.rec-nav a{color:var(--ink-2);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent}
.rec-nav a:hover,.rec-nav a:focus-visible{color:var(--ink);border-bottom-color:var(--signal)}

/* ── HERO · MODULES 2.1 + 2.2 ───────────────────────────────────────────────────────────────
   2.1 muted-lead pair: the lead and the headline are the SAME size and weight. Only colour
   separates them. That is the whole mechanic, and it replaces a tracked all-caps eyebrow,
   which is one decision away from horseman 1. */
.hero{padding:clamp(46px,7vw,88px) var(--pad) clamp(30px,4vw,46px);border-bottom:1px solid var(--rule)}
.hero-lead,.hero-h{
  font-family:var(--serif);
  font-size:clamp(30px,5.1vw,54px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.022em;   /* NEGATIVE. Horseman 1 is positive tracking as fake elegance. */
  margin:0;
  max-width:19ch;
}
.hero-lead{color:var(--ink-3)}
.hero-h{color:var(--ink)}
/* 2.2 italic-accent: emphasis is the true italic of the same family. Never colour, weight or size. */
.hero-h em{font-style:italic;font-weight:400}
.hero-sub{
  margin:22px 0 0;max-width:60ch;
  font-size:16.5px;line-height:1.62;color:var(--ink-2);
}
.hero.is-sub{padding-bottom:clamp(24px,3vw,34px)}
.hero.is-sub .hero-lead,.hero.is-sub .hero-h{font-size:clamp(26px,3.9vw,40px);max-width:24ch}

/* ── THE TOOL (above the fold, §A3) ─────────────────────────────────────────────────────── */
.tool{margin-top:34px;max-width:720px}
.tool-lab{
  display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3);margin-bottom:8px;
}
.tool-in{
  width:100%;padding:14px 16px;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:2px;
  transition:border-color .15s ease;
}
.tool-in::placeholder{color:var(--ink-3)}
.tool-in:focus{outline:none;border-color:var(--ink)}
.tool-filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;align-items:center}
.tool-sel{
  padding:9px 12px;font-family:var(--sans);font-size:13.5px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:2px;
}
.tool-sel:focus{outline:none;border-color:var(--ink)}
.tool-clear{
  padding:9px 14px;font-family:var(--sans);font-size:13.5px;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.tool-clear:hover{color:var(--ink);border-color:var(--ink)}
.tool-status{margin:12px 0 0;font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* ── MODULE 2.4 · STATEMENT BAND ──────────────────────────────────────────────────────────
   ⛔⛔ RENAMED FROM .band 2026-09-03: IT COLLIDED WITH _visual.mjs's TEXTURE BANDS.
   Both files legitimately owned a class called `band`. Mine painted a solid dark statement
   section; the visual layer's is a transparent texture stratum applied as `band band-a`.
   The moment the homepage used `class="hero band band-a"` the hero took a near-black ground,
   the dark-ink headline went invisible on it, and the tile numerals inherited paper-on-paper.
   ⭐ The page rendered, every build check passed, and the headline could not be seen.
   This is the skill's own hard rule 3 (one device per job) failing as a NAME collision rather
   than a behaviour one, which is the harder version to spot. Namespaced. */
.statement{
  background:var(--ink);color:var(--paper);
  padding:clamp(44px,6vw,72px) var(--pad);
  text-align:center;
}
.statement-h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3.6vw,38px);line-height:1.22;letter-spacing:-.02em;
  margin:0;color:var(--paper);
}
.statement-h em{font-style:italic}
.statement-sub{
  margin:16px auto 0;max-width:56ch;
  font-size:15px;line-height:1.6;color:rgba(245,242,235,.62);
}

/* ── GRID: record + provenance rail ─────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1040px){ .grid{grid-template-columns:minmax(0,1fr) 300px} }
.grid-main{padding:clamp(34px,4.4vw,56px) var(--pad);min-width:0}

.sec-h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,3vw,31px);line-height:1.16;letter-spacing:-.02em;
  margin:0 0 12px;color:var(--ink);
}
.sec-lead{display:block;color:var(--ink-3)}   /* module 2.1 again, at section scale */
.sec-note{margin:0 0 30px;max-width:var(--measure);font-size:14.5px;color:var(--ink-2)}

/* ── MODULE 2.6 · HAIRLINE NUMBERED RAIL ────────────────────────────────────────────────────
   No card fills, no borders, no shadows. Rules divide. Horseman 4 is exactly what this avoids. */
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rule{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;
  padding:20px 0 20px 0;
  border-bottom:1px solid var(--rule-2);
  position:relative;
}
@media(min-width:760px){ .rule{grid-template-columns:44px minmax(0,1fr) 190px} }
.rule.is-soon{ box-shadow:inset 2px 0 0 rgba(164,51,27,.45); padding-left:16px }
/* ⛔ EYES-ON FIX: 26 rules bind on the record date, so a single "within 30 days" state painted a
   red rule down almost the entire page. TODAY is the rare, loud state; SOON is quiet. */
/* ⛔ SECOND EYES-ON PASS: the tint was correct per row and wrong per PAGE. Rows are sorted by
   date, so all 36 rules binding today are consecutive and the tint covered the entire first
   screen, which is signal inflation one level up from the bug it replaced. The margin rule alone
   carries it; the ground stays paper. */
.rule.is-today{ box-shadow:inset 3px 0 0 var(--signal); padding-left:16px }
.rule-n{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  padding-top:4px;font-variant-numeric:tabular-nums;
}
.rule-body{min-width:0}
.rule-title{
  margin:0;font-family:var(--serif);font-size:18.5px;line-height:1.32;
  letter-spacing:-.011em;color:var(--ink);
}
/* ⛔ EYES-ON FIX: this was uppercase with positive tracking. On a 60-character agency name that
   is a shout, it is materially harder to read, and it is horseman 1 wearing a mono font. The
   catalog's own §5 anti-module table names it. Sentence case, no added tracking. */
.rule-meta{
  margin:7px 0 0;display:flex;flex-wrap:wrap;gap:5px 14px;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-3);letter-spacing:0;
}
.rule-cfr,.rule-rin{font-family:var(--mono);font-size:11.5px}
.rule-cfr,.rule-rin{color:var(--ink-2)}
.rule-prior{
  margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);
  max-width:66ch;
}
.rule-prior.is-absent{color:var(--ink-3);font-style:italic}
.rule-priorlab{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin-right:9px;font-style:normal;
}
.rule-when{
  grid-column:2;margin-top:12px;
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
}
@media(min-width:760px){ .rule-when{grid-column:3;margin-top:2px;align-items:flex-end;text-align:right} }
.rule-date{
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.rule.is-soon .rule-date{color:var(--ink)}
.rule.is-today .rule-date{color:var(--signal)}
.rule.is-today .rule-days{color:var(--signal)}
.rule-days{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.rule-src{
  font-size:12px;color:var(--ink-2);text-decoration:none;margin-top:5px;
  border-bottom:1px solid var(--rule);transition:color .15s ease,border-color .15s ease;
}
.rule-src:hover{color:var(--signal);border-bottom-color:var(--signal)}
.rule[hidden]{display:none}
.rules-empty{padding:36px 0;color:var(--ink-2);font-size:15px}

/* ── MODULE 3.1 · PROVENANCE MARGIN RAIL (forked whole) ─────────────────────────────────────
   Every figure on the page, its source, and the day it was read. The weak ones flag themselves,
   which is the part that cannot be faked cheaply. */
.prov{
  padding:clamp(34px,4.4vw,56px) var(--pad);
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  font-size:13px;
}
/* ⛔ EYES-ON FIX: the rail rendered once at the top of a 282-row grid, leaving several thousand
   pixels of empty beige column. A provenance rail that scrolls away is not a rail. */
@media(min-width:1040px){
  .prov{
    border-top:0;border-left:1px solid var(--rule);
    position:sticky;top:0;align-self:start;
    max-height:100vh;overflow-y:auto;
  }
}
.prov-h{
  margin:0 0 18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);
}
.prov-n{color:var(--ink-3)}
.prov-list{list-style:none;margin:0;padding:0}
.prov-item{
  display:grid;grid-template-columns:auto 1fr;gap:2px 12px;
  padding:13px 0;border-top:1px solid var(--rule-2);
}
.prov-fig{
  grid-row:1/3;font-family:var(--mono);font-size:17px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;padding-top:1px;
}
.prov-lab{font-size:13px;line-height:1.4;color:var(--ink)}
.prov-src{font-size:11.5px;color:var(--ink-2);line-height:1.45}
.prov-src a{color:var(--ink-2)}
.prov-when{
  grid-column:2;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
}
.prov-flag{
  grid-column:2;margin-top:4px;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--signal);
}
.prov-item.is-weak .prov-fig{color:var(--signal)}
.prov-note{
  margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:12px;line-height:1.55;color:var(--ink-3);
}

/* ── CROSS SECTIONS ─────────────────────────────────────────────────────────────────────── */
.cuts{padding:clamp(34px,4.4vw,56px) var(--pad);border-top:1px solid var(--rule)}
.cut-grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:26px}
.cut h3{
  margin:0 0 12px;font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
}
.cut ul{list-style:none;margin:0;padding:0}
.cut li{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:14px;
}
.cut li a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.cut li a:hover{border-bottom-color:var(--signal)}
.cut li span{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.idx{padding:clamp(34px,4.4vw,56px) var(--pad)}
.idx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.idx-list li{
  display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule-2);
}
.idx-n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.idx-list a{font-family:var(--serif);font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.idx-list a:hover{color:var(--signal)}
.idx-count{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

.backlink{padding:0 var(--pad) 40px;font-size:14px}
.backlink a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.backlink a:hover{color:var(--ink)}

/* ── FOOTER ─────────────────────────────────────────────────────────────────────────────────
   §13.3: heroes 1152 : footers 65. The sparse surface. This one is budgeted like it. */
.rec-foot{background:var(--ink);color:rgba(245,242,235,.72);padding:clamp(44px,5.5vw,72px) var(--pad) 40px}
.foot-claim{
  margin:0 0 34px;font-family:var(--serif);font-size:clamp(19px,2.3vw,25px);
  line-height:1.35;letter-spacing:-.015em;color:var(--paper);max-width:44ch;
}
.foot-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding-bottom:30px;border-bottom:1px solid rgba(245,242,235,.15)}
.foot-grid h3{
  margin:0 0 9px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:rgba(245,242,235,.45);
}
.foot-grid p{margin:0;font-size:13.5px;line-height:1.6}
.foot-grid code{font-family:var(--mono);font-size:12.5px;color:var(--paper)}
.foot-legal{margin:28px 0 0;font-size:13px;line-height:1.6;max-width:78ch;color:rgba(245,242,235,.62)}
.foot-legal strong{color:var(--paper)}
.foot-meta{margin:22px 0 0;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:rgba(245,242,235,.4)}
.foot-meta a{color:rgba(245,242,235,.62)}

/* ── B3: states nobody screenshots ──────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }
@media print{
  body{background:#fff}
  .canvas{box-shadow:none;margin:0;max-width:none}
  .rec-nav,.tool{display:none}
  .rule{break-inside:avoid}
  .rule-src::after{content:" (" attr(href) ")";font-family:var(--mono);font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   REBUILD LAYER — added 2026-09-03 after the operator rejected v1 as "not enterprise grade"
   and, more usefully, as a failure of CATEGORISATION rather than of paint.
   Tokens below are the contract _visual.mjs reads. Every colour in that file is a var(),
   which is what makes it portable across properties without an edit.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --accent:#a4331b;
  --text:#16171a;
  --muted-ink:#6d6f74;
  --line:rgba(22,23,26,.14);
  --line-strong:rgba(22,23,26,.30);
  --display:'Newsreader',Georgia,serif;
  --hue-money:#7b5e2a;
  --hue-operate:#3f5a63;
}

/* ── TRADE-PRESS DECK (visual-design skill §2.6) ────────────────────────────────────────────
   Replaces v1's banned "STATEMENT. *twist.*" hero. Kicker, one-clause headline carrying a hard
   number, then a standfirst holding the nuance. The number headline is also the OLV-liftable
   form: it answers a question on its own, which "They take effect when they bind" does not. */
.kicker{
  display:flex;align-items:center;gap:9px;
  margin:0 0 14px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted-ink);
}
.kicker .ic{color:var(--accent)}
.hero-h,.sect-h{
  font-family:var(--display);font-weight:400;letter-spacing:-.022em;
  color:var(--ink);margin:0;
}
.hero-h{font-size:clamp(31px,4.6vw,52px);line-height:1.08;max-width:20ch}
.sect-h{font-size:clamp(24px,3vw,34px);line-height:1.14;max-width:24ch}
.minih{
  margin:0 0 16px;font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted-ink);
}
.deck{margin:18px 0 0;max-width:64ch;font-size:17px;line-height:1.6;color:var(--ink-2)}
.deck-s{font-size:15.5px;max-width:70ch;margin-top:14px}
.figcap{
  margin:16px 0 0;max-width:72ch;font-size:12.5px;line-height:1.55;color:var(--ink-3);
}
.figcap a{color:var(--ink-2)}

/* ── SECTION RHYTHM + TEXTURE BANDS ─────────────────────────────────────────────────────────
   ⚠️ Opacities measured against this property's actual paper (#f5f2eb), not guessed. A ground
   layer that is invisible at 100% zoom is the documented failure here. */
.sect{padding:clamp(48px,6vw,86px) var(--pad);border-top:1px solid var(--rule);position:relative}
.hero{padding:clamp(52px,7vw,96px) var(--pad) clamp(40px,5vw,60px);border-bottom:1px solid var(--rule);position:relative}
/* ⛔ THE TEXTURE BANDS ARE NOT REDEFINED HERE. _visual.mjs owns .band / .band-a|b|c and its
   sheet loads after this one. A second definition of the same selector in a second file is
   precisely the collision the estate's css-collision-audit exists to catch, and "mine happens
   to load first" is not a design. If a band's opacity is wrong, change it AT ITS DEFINITION in
   _visual.mjs, never with an override here. */

/* ── THE DATE CLUSTERS — the answer to "not a cunning categorisational module" ───────────────
   The dataset's key is the DATE, so the primary cut is by date. Each card answers when, how
   many, and who, without a scroll. */
/* ⛔ EYES-ON: auto-fit gave four columns for six cards, so two cells rendered as bare grey
   grid background. An empty cell showing the gap colour reads as a broken layout, not as
   whitespace. Fixed column counts that divide six exactly, at every breakpoint. */
.dates{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:1px;
  grid-template-columns:1fr;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:620px){ .dates{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .dates{grid-template-columns:repeat(3,1fr)} }
.dcard{background:var(--paper);padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px}
.dcard.is-now{background:#faf7f1;box-shadow:inset 0 3px 0 var(--accent)}
.dcard-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dcard-n{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.dcard-date{font-family:var(--display);font-size:20px;letter-spacing:-.014em;color:var(--ink)}
.dcard-rel{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.dcard.is-now .dcard-rel{color:var(--accent)}
.dcard-body{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dcard-count{font-family:var(--display);font-size:44px;line-height:.9;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.dcard.is-now .dcard-count{color:var(--accent)}
.dcard-unit{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.dcard-ags{flex:1 0 100%;margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.dcard-link{margin-top:auto;font-size:13px;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--rule);align-self:flex-start;transition:color .15s ease,border-color .15s ease}
.dcard-link:hover{color:var(--accent);border-bottom-color:var(--accent)}

.two{display:grid;gap:44px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:900px){ .two{grid-template-columns:1fr 1fr;gap:56px} }

.bigcta{margin:24px 0 34px}
.bigcta a{
  display:inline-block;padding:14px 22px;background:var(--ink);color:var(--paper);
  font-size:15px;text-decoration:none;border-radius:2px;transition:background .15s ease;
}
.bigcta a:hover{background:var(--accent)}

@media (prefers-reduced-motion:reduce){ .band::before{display:none} }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LAUNCH LAYER — the authority organs and the cite block.
   ⭐ These are the productised surfaces (§A0: this property's output is citation and earned
   links, not conversion), so they get real typographic treatment rather than being treated as
   legal boilerplate nobody reads. A methodology page that looks like a footer is a methodology
   page nobody trusts.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.doc{padding:clamp(46px,6vw,84px) var(--pad) clamp(40px,5vw,64px);max-width:none}
.doc .hero-h{max-width:22ch}
.doc .deck{max-width:66ch}
.doc-h{
  margin:44px 0 12px;font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2.2vw,25px);line-height:1.2;letter-spacing:-.018em;color:var(--ink);
  max-width:34ch;
}
.doc p{max-width:70ch;font-size:15.5px;line-height:1.66;color:var(--ink-2);margin:0 0 14px}
.doc p strong{color:var(--ink)}
.doc code{font-family:var(--mono);font-size:13px;color:var(--ink);
  background:rgba(22,23,26,.05);padding:1px 5px;border-radius:2px}
.doc-l{margin:0 0 16px;padding-left:20px;max-width:70ch}
.doc-l li{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin-bottom:9px}
.doc-l li strong{color:var(--ink)}
.doc-note{
  margin:26px 0 0;padding:16px 18px;border-left:3px solid var(--accent);
  background:rgba(164,51,27,.05);font-size:14.5px;max-width:70ch;
}
.doc-back{margin-top:38px;padding-top:20px;border-top:1px solid var(--rule)}
.doc-back a,.doc-t a{color:var(--ink)}

.doc-t{border-collapse:collapse;margin:0 0 18px;width:100%;max-width:70ch;font-size:14px}
.doc-t th,.doc-t td{text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid var(--rule-2)}
.doc-t th{
  font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.07em;border-bottom-color:var(--rule);
}
.doc-t td{color:var(--ink-2)}
.doc-t td:first-child{color:var(--ink)}

/* ── COPYABLE CITATION ──────────────────────────────────────────────────────────────────────
   ⭐ The point of this component is that the text can be SELECTED cleanly. So: no line-height
   games, generous padding, and the label sits outside the code rather than inside it, where a
   triple-click would drag it into the clipboard along with the citation. */
.cite{
  display:grid;grid-template-columns:70px 1fr;gap:0 16px;align-items:start;
  margin:0 0 12px;padding:14px 16px;background:#fffdf9;border:1px solid var(--rule);border-radius:2px;
  max-width:78ch;
}
.cite-k{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);padding-top:3px;user-select:none;
}
.cite code{
  font-family:var(--mono);font-size:12.5px;line-height:1.62;color:var(--ink);
  background:none;padding:0;word-break:break-word;
}
.cite code em{font-style:italic}

.citeblk{
  padding:clamp(32px,4vw,52px) var(--pad);
  border-top:1px solid var(--rule);background:var(--paper-2);
}
.citeblk-h{
  display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);
}
.citeblk-h .ic{color:var(--accent)}
.citeblk-p{margin:0 0 18px;max-width:74ch;font-size:14px;color:var(--ink-2)}
.citeblk-f{margin:14px 0 0;font-size:13px;color:var(--ink-3)}
.citeblk-f a{color:var(--ink-2)}

.crumbs{
  display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);
}
.crumbs a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:var(--accent)}
.crumbs span[aria-hidden]{color:var(--rule-2);color:rgba(22,23,26,.28)}

.badge-row{margin:0 0 14px}
.embed-prev{border:1px solid var(--rule);border-radius:3px;margin:8px 0 14px;max-width:640px;display:block}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE REGISTER LEAF — hero, third version.
   ⛔ v2 was an oversized headline, a deck and a four-up card row. That is entry 1 on the
   lattice-visual-design §2 banned list, and the operator called it as "too typical AI website
   style" on sight. Recognising the pattern in a catalog and then shipping it anyway is the
   documented failure of a design brain that is not binding at build time.
   ⭐ This version is the opening leaf of a bound register: a ledger line of record metadata, an
   oversized count set as a figure rather than a headline, and a full-bleed daily spine drawn
   from the data. No cards.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.leaf{padding:clamp(30px,4vw,52px) var(--pad) clamp(26px,3vw,38px)}

/* The ledger line: what a register prints at the head of a leaf, and it is all real metadata. */
.ledger{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:9px 0;margin:0 0 clamp(32px,4.5vw,58px);
}
.ledger-i{
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);display:block;
}
.ledger-v{
  font-family:var(--mono);font-size:12px;color:var(--ink);display:block;margin-top:2px;
  padding-right:18px;
}

.leaf-body{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px);align-items:start}
@media(min-width:900px){ .leaf-body{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(36px,5vw,72px)} }

/* The count is set as a FIGURE, not as a headline. Tabular numerals, optical alignment, and a
   unit stacked beside it the way a register prints a total. */
.leaf-count{display:flex;align-items:flex-start;gap:14px;margin:0}
.leaf-n{
  font-family:var(--display);font-weight:400;
  font-size:clamp(84px,13vw,168px);line-height:.78;letter-spacing:-.05em;
  color:var(--ink);font-variant-numeric:tabular-nums;
  margin-left:-.055em;   /* optical: pull the numeral to the true left edge */
}
.leaf-u{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);line-height:1.7;padding-top:.7em;
}
.leaf-h{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(23px,2.9vw,34px);line-height:1.16;letter-spacing:-.02em;
  color:var(--ink);max-width:26ch;
}
.leaf-say .deck{margin-top:16px;max-width:58ch;font-size:16px}
/* ⛔ Not an italic accent (§2.6). A ruled underline is a register's own emphasis mark. */
.uline{border-bottom:1.5px solid var(--accent);padding-bottom:1px}
.leaf-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin:22px 0 0;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);
}
.leaf-meta a{
  color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:2px;
}
.leaf-meta a:hover{color:var(--accent)}

/* ── THE BINDING SPINE ────────────────────────────────────────────────────────────────────
   Full-bleed, edge to edge, because a spine that stops at a content margin reads as a chart in
   a box and this is meant to read as the ruled edge of the page. */
.spine{margin:0;padding:0 0 clamp(26px,3vw,40px);border-bottom:1px solid var(--rule)}
.spine svg{display:block;width:100%;height:clamp(96px,11vw,150px)}
.sp-base{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.sp-m{stroke:rgba(22,23,26,.13);stroke-width:1;vector-effect:non-scaling-stroke}
.sp-on{stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke}
.sp-now{stroke:var(--accent);stroke-width:2.4;vector-effect:non-scaling-stroke}
/* Empty days are DRAWN, at a hairline. An axis that omits its empty stretches misstates the
   data exactly the way the month curve did before it was zero-filled. */
.sp-off{stroke:rgba(22,23,26,.20);stroke-width:1;vector-effect:non-scaling-stroke}
.sp-l{font-family:var(--mono);font-size:9px;fill:var(--ink-3);letter-spacing:.08em}
.spine-cap{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px var(--pad) 0;
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);
}
.spine-peak{color:var(--accent)}
.ledger-c{padding-right:20px}