/* ===========================================================================
   INTELPLEXIS / SR2026 — IMPLEMENTATION CONTROL ROOM
   Single stylesheet for /sr2026/. Concatenated in cascade order:

     PART 1   base component sheet (original sr2026.css)
     PART 2   v4 layout — built to the blueprint of
              swift.com/standards/iso-20022, plus the architectural wall
     PART 3   dark chapters — reconciliation, surface and provenance taken
              to the depth of the header wall

   Parts 2 and 3 override Part 1 rather than replacing it, so the order here
   is load-bearing: do not reorder or hoist rules between parts. Part 1 also
   contains rules for the previous layout that no longer match anything; they
   are inert and were left in place rather than pruned by guesswork.

   The page renders from data/sr2026.data.js through sr2026.js. index.html is
   scaffolding and mount points — adding a source, front or surface is a data
   edit, never a markup one.
=========================================================================== */


/* ======================= PART 1 · BASE ======================= */

/* ---------------------------------------------------------------------------
   INTELPLEXIS / SR2026 — IMPLEMENTATION CONTROL ROOM
   Layered on top of assets/site.css. Inherits the Intelplexis tokens
   (--wine, --ink, --mineral, --line, --mono) and adds a control-room surface.
--------------------------------------------------------------------------- */

.sr {
  /* The SR2026 surface now draws directly from the homepage palette: paper,
     cool mineral, ink, muted grey and the single Intelplexis burgundy. */
  --sr-bg: var(--white);
  --sr-panel: var(--mineral);
  --sr-panel-2: var(--mineral-2);
  --sr-rule: var(--line);
  --sr-rule-strong: #aeb7b1;
  --sr-text: var(--ink);
  --sr-text-2: var(--ink-2);
  --sr-text-3: var(--muted);
  --sr-wine: var(--wine);
  --sr-wine-lift: var(--wine);

  /* Accents. Each carries a text, a line and a wash value, so the light and
     dark treatments stay in step and nothing is a bare literal. */
  --sr-amber: #7a5c17;
  --sr-amber-line: #cbb078;
  --sr-amber-wash: rgba(176,139,62,.13);
  --sr-green: #2f5a41;
  --sr-green-line: #a9c8b6;
  --sr-green-wash: rgba(47,90,65,.09);
  --sr-gutter: clamp(20px, 4vw, 56px);
  background: var(--sr-bg);
  color: var(--sr-text);
}

.sr ::selection { background: var(--sr-wine); color: #fff; }
.sr-in { max-width: 1320px; margin: 0 auto; padding: 0 var(--sr-gutter); }
.sr a { color: var(--sr-wine-lift); }
.sr a:hover { color: var(--sr-text); }
/* Buttons are their own object: .sr a would otherwise repaint their label,
   which on the burgundy fill leaves dark text on a dark ground. */
.sr .btn-primary, .sr .btn-primary:hover { color: var(--white); }
.sr .op-page-hero .btn-secondary { color: var(--sr-wine); }
.sr .op-page-hero .btn-secondary:hover { color: #fff; }
.sr hr.sr-hair { border: 0; border-top: 1px solid var(--sr-rule); margin: 0; }

.sr-mono {
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* -- Focus ----------------------------------------------------------------
   assets/site.css sets a --wine-soft focus ring, tuned for the light site and
   hard to see on this dark ground. Overridden inside .sr only.
------------------------------------------------------------------------- */

.sr a:focus-visible,
.sr button:focus-visible {
  outline: 3px solid var(--sr-wine);
  outline-offset: 3px;
}
.sr .sr-node-btn:focus-visible { outline-offset: -3px; }


/* -- Header --------------------------------------------------------------- */

/* The photograph now sits in the full-bleed hero above, so the header block
   is plain page. It carries the working method and the current-status strip. */
.sr-head {
  border-bottom: 1px solid var(--sr-rule);
  padding: clamp(26px, 3vw, 44px) 0 clamp(28px, 3vw, 44px);
}
.sr-head-top {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: baseline;
  padding-bottom: 26px;
}
.sr-head-ref { font: 600 11px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--sr-wine-lift); }
.sr-head h1 {
  font-size: clamp(38px, 6.4vw, 88px);
  font-weight: 500; letter-spacing: -.035em; line-height: 1.02;
  margin: 0 0 26px;
}
.sr-head h1 strong { font-weight: 800; display: block; }
.sr-head-sub {
  display: grid; gap: 26px 54px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
  padding-bottom: 34px; align-items: start;
}
.sr-head .sr-q-k { font-size: 11px; }
.sr-head .sr-method-note { font-size: 14.5px; line-height: 1.55; }
.sr-head .sr-method-step { font-size: 10.5px; padding: 8px 11px; }
.sr-head .sr-method-arrow { font-size: 12px; }
.sr-head-live { font-size: clamp(16px, 1.6vw, 20px); color: var(--sr-text-2); max-width: 42ch; }
.sr-head h1 { max-width: 15ch; }
.sr-head-live b { color: var(--sr-text); font-weight: 700; }

/* Countdown / status strip */
.sr-strip {
  border-top: 1px solid var(--sr-rule);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sr-strip-cell {
  padding: 18px 22px 20px; border-right: 1px solid var(--sr-rule);
  min-width: 0;
}
.sr-strip-cell:last-child { border-right: 0; }
.sr-strip-k { font: 600 9.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sr-text-3); }
.sr-strip-v { margin-top: 9px; font-size: 15px; color: var(--sr-text); }

/* Current status. Rendered first and loudest: this is what is true now. */
.sr-strip-cell.is-current { padding-bottom: 24px; }
.sr-strip-state {
  display: block; font-size: clamp(19px, 1.9vw, 25px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.12; color: var(--sr-wine);
}
.sr-strip-detail { display: block; margin-top: 10px; font-size: 13px; color: var(--sr-text-2); }

/* Earlier timetable. Historical provenance only — visibly subordinate to the
   current status above it, and never presentable as the current position. */
.sr-earlier {
  border-top: 1px solid var(--sr-rule);
  padding: 20px 22px 22px;
  background: var(--sr-panel);
}
.sr-earlier-k {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font: 600 9.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sr-text-3);
}
.sr-earlier-state { margin-top: 12px; font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-text-3); }
.sr-earlier p { margin-top: 12px; font-size: 13.5px; color: var(--sr-text-2); max-width: 104ch; }
.sr-earlier .sr-strip-src { margin-top: 12px; }

/* Independence notice — must never read as decoration */
.sr-authority {
  border-top: 1px solid var(--sr-rule);
  background: var(--sr-panel);
}
.sr-authority-in {
  max-width: 1320px; margin: 0 auto;
  padding: 20px var(--sr-gutter);
  display: flex; gap: 18px; align-items: flex-start;
  border-left: 3px solid var(--sr-wine);
}
.sr-authority p { font-size: 14px; color: var(--sr-text-2); max-width: 96ch; }
.sr-authority b { color: var(--sr-text); font-weight: 600; }

/* -- Method rail ---------------------------------------------------------- */

.sr-method { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; }
.sr-method-step {
  font: 600 10px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--sr-text-2); border: 1px solid var(--sr-rule);
  padding: 7px 10px;
}
.sr-method-step.pending { color: var(--sr-text-3); border-style: dashed; }
.sr-method-arrow { color: var(--sr-text-3); font: 500 11px/1 var(--mono); }
.sr-method-note { margin-top: 14px; font-size: 12.5px; color: var(--sr-text-3); max-width: 60ch; }

/* -- Sections ------------------------------------------------------------- */

.sr-section { border-top: 1px solid var(--sr-rule); padding: clamp(52px, 6vw, 92px) 0; }

/* Match the homepage's paper/mineral section rhythm. Components sitting on
   mineral bands use paper cards so their boundaries remain deliberate. */
#front-001,
#surface,
.sr-foot {
  --sr-panel: var(--white);
  --sr-panel-2: var(--mineral-2);
  background: var(--mineral);
}

#reconciliation,
#ledger,
#modules {
  background: var(--white);
}
.sr-section-head {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 30px;
  align-items: start; margin-bottom: 40px;
}
.sr-section-no { font: 600 10.5px/1.6 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sr-wine-lift); padding-top: 9px; }
.sr-section h2 { font-size: clamp(27px, 3.5vw, 42px); font-weight: 600; letter-spacing: -.03em; max-width: 22ch; }
.sr-section-intro { margin-top: 16px; color: var(--sr-text-2); font-size: 16.5px; max-width: 68ch; }

/* -- Provenance chips ----------------------------------------------------- */

.pv {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 9px 5px; white-space: nowrap; vertical-align: middle;
  border: 1px solid transparent;
}
.pv::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; }

/* PUBLISHED FACT — solid light, filled marker. Highest visual certainty. */
.pv-FACT { background: var(--sr-text); color: #fff; border-color: var(--sr-text); }
.pv-FACT::before { background: #fff; }

/* INTELPLEXIS ANALYSIS — burgundy, hollow marker. Ours, not authoritative. */
.pv-ANALYSIS { background: var(--sr-wine); color: #fff; border-color: var(--sr-wine); }
.pv-ANALYSIS::before { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }

/* SYNTHETIC CASE — hatched, dashed. Must never be mistaken for evidence. */
.pv-SYNTHETIC {
  color: var(--sr-amber); border: 1px dashed var(--sr-amber-line);
  background: repeating-linear-gradient(-45deg, var(--sr-amber-wash) 0 5px, transparent 5px 10px);
}
.pv-SYNTHETIC::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sr-amber-line); transform: rotate(45deg); }

/* OBSERVED FINDING — outline only, dimmed. Reserved, unused. */
.pv-OBSERVED { color: var(--sr-text-3); border: 1px solid var(--sr-rule-strong); background: transparent; }
.pv-OBSERVED::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sr-rule-strong); border-radius: 50%; }

.pv-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--sr-rule); border-left: 1px solid var(--sr-rule); }
.pv-legend-cell { padding: 24px 22px 26px; border-right: 1px solid var(--sr-rule); border-bottom: 1px solid var(--sr-rule); background: var(--sr-panel); }
.pv-legend-cell p { margin-top: 15px; font-size: 13.5px; color: var(--sr-text-2); }
.pv-legend-cell .pv-count { margin-top: 14px; font: 600 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sr-text-3); }

/* -- Front 001 ------------------------------------------------------------ */

.sr-front { border: 1px solid var(--sr-rule); background: var(--sr-panel); }
.sr-front-head {
  padding: 26px 26px 24px; border-bottom: 1px solid var(--sr-rule);
  display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: flex-start;
}
.sr-front-head h3 { font-size: clamp(23px, 2.7vw, 33px); font-weight: 600; letter-spacing: -.025em; margin-top: 12px; }
.sr-front-state {
  font: 700 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--sr-wine); color: var(--sr-wine-lift); padding: 7px 10px 6px;
}
.sr-front-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.sr-front-changes { border-right: 1px solid var(--sr-rule); padding: 6px 0; }
.sr-claim { padding: 20px 26px; border-bottom: 1px solid var(--sr-rule); }
.sr-claim:last-child { border-bottom: 0; }
.sr-claim p { margin-top: 12px; font-size: 15.5px; color: var(--sr-text); max-width: 60ch; line-height: 1.5; }
/* Citation caption. Scoped to no single block so the reconciliation panel,
   the front and any later section render it identically. */
.sr-cite { margin-top: 10px; font: 500 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-text-3); }
.sr-cite a { color: var(--sr-text-2); border-bottom: 1px solid var(--sr-rule-strong); }
.sr-cite a:hover { color: var(--sr-text); }
.sr-front-aside { padding: 26px; }
.sr-front-aside .sr-claim { padding: 0 0 20px; border: 0; }
.sr-counters { border-top: 1px solid var(--sr-rule); margin-top: 4px; }
.sr-counter { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--sr-rule); font-size: 13.5px; color: var(--sr-text-2); }
.sr-counter b { font: 600 15px/1 var(--mono); color: var(--sr-text); }
.sr-counter.zero b { color: var(--sr-text-3); }

/* -- Source ledger -------------------------------------------------------- */

.sr-ledger-wrap { overflow-x: auto; border: 1px solid var(--sr-rule); }
.sr-ledger-scrollnote { margin-bottom: 10px; font: 500 9.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sr-text-3); }
.sr-ledger { width: 100%; border-collapse: collapse; min-width: 940px; background: var(--sr-panel); }
.sr-ledger th {
  text-align: left; font: 600 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sr-text-3); padding: 15px 13px; border-bottom: 1px solid var(--sr-rule-strong);
  background: var(--sr-panel-2); white-space: nowrap; vertical-align: bottom;
}
.sr-ledger td { padding: 17px 13px; border-bottom: 1px solid var(--sr-rule); vertical-align: top; font-size: 14px; color: var(--sr-text-2); }
.sr-ledger tr:last-child td { border-bottom: 0; }
.sr-ledger tr:hover td { background: var(--sr-panel-2); }
.sr-ledger .c-id { font: 600 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--sr-text-3); white-space: nowrap; }
.sr-ledger .c-org { color: var(--sr-text); font-weight: 600; white-space: nowrap; }
.sr-ledger .c-doc { color: var(--sr-text); min-width: 152px; }
.sr-ledger .c-date { font: 500 11.5px/1.5 var(--mono); letter-spacing: 0; white-space: nowrap; color: var(--sr-text-2); }
.sr-ledger .c-assertion { min-width: 300px; color: var(--sr-text); line-height: 1.5; }
.sr-ledger .c-link { min-width: 118px; }
.sr-ledger .c-link a { font: 500 11px/1.5 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.sr-ledger .link-kind { display: block; margin-top: 5px; font: 500 9px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--sr-text-3); }

.st { font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 8px 5px; border: 1px solid; white-space: nowrap; display: inline-block; }
.st-CURRENT { color: var(--sr-green); border-color: var(--sr-green-line); background: var(--sr-green-wash); }
.st-SUPERSEDED { color: var(--sr-text-3); border-color: var(--sr-rule-strong); background: transparent; text-decoration: line-through; }
.st-CLARIFIED { color: var(--sr-amber); border-color: var(--sr-amber-line); background: var(--sr-amber-wash); }

.sr-ledger-note { margin-top: 16px; font-size: 13px; color: var(--sr-text-3); max-width: 78ch; }

/* -- Reconciliation -------------------------------------------------------
   Rendered between the header and the front. Two official positions moved;
   the page states the movement before it states anything else.
------------------------------------------------------------------------- */

.sr-recon { border: 1px solid var(--sr-rule-strong); background: var(--sr-panel); }
.sr-recon-head { padding: 24px 26px 22px; border-bottom: 1px solid var(--sr-rule); }
.sr-recon-head h3 { font-size: clamp(21px, 2.5vw, 30px); font-weight: 600; letter-spacing: -.025em; margin-top: 12px; }
.sr-recon-flag {
  font: 700 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sr-amber); border: 1px solid var(--sr-amber-line); background: var(--sr-amber-wash);
  padding: 7px 10px 6px; display: inline-block;
}
.sr-recon-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-recon-step { padding: 22px 24px 24px; border-right: 1px solid var(--sr-rule); position: relative; }
.sr-recon-step:last-child { border-right: 0; }
.sr-recon-stage { font: 600 9.5px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--sr-text-3); margin-bottom: 14px; }
.sr-recon-step p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--sr-text); }
.sr-recon-reading { border-top: 1px solid var(--sr-rule); padding: 22px 26px 24px; background: var(--sr-panel-2); }
.sr-recon-reading p { margin-top: 13px; font-size: 15px; line-height: 1.55; color: var(--sr-text); max-width: 88ch; }
.sr-recon-caution {
  border-top: 1px solid var(--sr-rule); padding: 18px 26px 20px;
  border-left: 3px solid var(--sr-wine);
  font-size: 13.5px; color: var(--sr-text-2); max-width: 92ch;
}

/* -- Currency treatment ---------------------------------------------------
   Currency is a separate axis from provenance. A superseded published fact is
   still a published fact, so the provenance chip is never restyled; the claim
   around it is. Strikethrough is applied to the assertion text only, never to
   the chip, so the class stays legible.
------------------------------------------------------------------------- */

.cur {
  font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 8px 5px; border: 1px solid; white-space: nowrap;
  display: inline-block; vertical-align: middle; margin-left: 8px;
}
.cur-SUPERSEDED { color: var(--sr-text-3); border-color: var(--sr-rule-strong); background: transparent; }
.cur-CLARIFIED { color: var(--sr-amber); border-color: var(--sr-amber-line); background: var(--sr-amber-wash); }

.sr-claim.is-superseded { background: var(--sr-bg); }
.sr-claim.is-superseded .sr-claim-text { color: var(--sr-text-3); text-decoration: line-through; text-decoration-color: var(--sr-rule-strong); }
.sr-claim.is-superseded .sr-currency-note,
.sr-claim.is-superseded .sr-cite { text-decoration: none; }
.sr-currency-note {
  margin-top: 12px; padding-left: 13px; border-left: 2px solid var(--sr-rule-strong);
  font-size: 13px; color: var(--sr-text-2); max-width: 62ch;
}

.sr-ledger tr.row-superseded td { background: transparent; }
/* Strike the superseded claim only. The field label and the note explaining
   the supersession are metadata about the row, not part of the claim — and
   text-decoration propagates into in-flow descendants, so the strike has to
   be scoped to the claim span rather than cancelled further down. */
.sr-ledger tr.row-superseded .c-assertion { color: var(--sr-text-3); }
.sr-ledger tr.row-superseded .c-assertion-text {
  text-decoration: line-through;
  text-decoration-color: var(--sr-rule-strong);
}
/* Marker on the first cell only — on every cell it reads as column stripes. */
.sr-ledger tr.row-controlling td:first-child { box-shadow: inset 3px 0 var(--sr-wine); }
.sr-ledger .c-note { display: block; margin-top: 10px; padding-left: 11px; border-left: 2px solid var(--sr-rule-strong); font-size: 12.5px; color: var(--sr-text-2); text-decoration: none; }
.sr-ledger .c-controlling { display: block; width: -moz-fit-content; width: fit-content; margin-bottom: 10px; font: 700 8.5px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--sr-wine-lift); border: 1px solid var(--sr-wine); padding: 5px 7px 4px; }

/* -- Timetable strip ------------------------------------------------------
   Replaces the countdown. States what each timetable is, and cites the source
   that says so. No computed date arithmetic anywhere on this page.
------------------------------------------------------------------------- */

.sr-strip-src { display: block; margin-top: 8px; font: 500 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-text-3); }
.sr-strip-src a { color: var(--sr-text-3); border-bottom: 1px solid var(--sr-rule-strong); }
.sr-strip-src a:hover { color: var(--sr-text); }
.sr-strip-cell.is-extended .sr-strip-state { color: var(--sr-wine); }

/* -- Corroborating references --------------------------------------------
   Held apart from the ledger, and visibly subordinate to it.
------------------------------------------------------------------------- */

.sr-corrob { margin-top: 34px; border: 1px dashed var(--sr-rule-strong); background: transparent; }
.sr-corrob-head { padding: 18px 22px 16px; border-bottom: 1px dashed var(--sr-rule-strong); }
.sr-corrob-head h3 { font: 600 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sr-text-3); }
.sr-corrob-head p { margin-top: 12px; font-size: 13px; color: var(--sr-text-3); max-width: 88ch; }
.sr-corrob-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 150px; gap: 18px; padding: 15px 22px; border-bottom: 1px dashed var(--sr-rule); align-items: baseline; }
.sr-corrob-row:last-child { border-bottom: 0; }
.sr-corrob-row .r-id { font: 600 10.5px/1.5 var(--mono); letter-spacing: .08em; color: var(--sr-text-3); }
.sr-corrob-row .r-doc { font-size: 13.5px; color: var(--sr-text-2); }
.sr-corrob-row .r-doc b { color: var(--sr-text-2); font-weight: 600; }
.sr-corrob-row .r-date { font: 500 11px/1.5 var(--mono); color: var(--sr-text-3); }

/* -- Implementation surface ----------------------------------------------- */

.sr-surface { border-top: 1px solid var(--sr-rule); border-left: 1px solid var(--sr-rule); }
.sr-node { border-right: 1px solid var(--sr-rule); border-bottom: 1px solid var(--sr-rule); }
.sr-node-btn {
  width: 100%; text-align: left; background: var(--sr-panel); border: 0; cursor: pointer;
  color: inherit; font: inherit; padding: 20px 22px 22px;
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 18px; align-items: start;
  transition: background .15s ease;
}
.sr-node-btn:hover { background: var(--sr-panel-2); }
.sr-node-id { font: 600 10.5px/1.6 var(--mono); letter-spacing: .12em; color: var(--sr-text-3); padding-top: 3px; }
.sr-node-name { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--sr-text); }
.sr-node-summary { display: block; margin-top: 8px; font-size: 13.5px; color: var(--sr-text-2); max-width: 78ch; }
.sr-node-flag { font: 600 9px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; padding-top: 5px; white-space: nowrap; }
.sr-node-flag.drafted { color: var(--sr-wine-lift); }
.sr-node-flag.empty { color: var(--sr-text-3); }
.sr-node-btn::after { display: none; }
.sr-node-panel { display: none; border-top: 1px solid var(--sr-rule); background: var(--sr-bg); }
.sr-node.open .sr-node-panel { display: block; }
.sr-node.open .sr-node-btn { background: var(--sr-panel-2); }
.sr-q { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-q-cell { padding: 22px; border-right: 1px solid var(--sr-rule); }
.sr-q-cell:last-child { border-right: 0; }
.sr-q-k { font: 600 9.5px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--sr-text-3); }
.sr-q-cell p { margin-top: 12px; font-size: 14px; color: var(--sr-text); line-height: 1.55; }
.sr-q-prov { padding: 16px 22px; border-top: 1px solid var(--sr-rule); }
.sr-empty { padding: 24px 22px; }
.sr-empty-k { font: 700 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sr-text-3); border: 1px dashed var(--sr-rule-strong); padding: 8px 11px; display: inline-block; }
.sr-empty p { margin-top: 14px; font-size: 13.5px; color: var(--sr-text-3); max-width: 70ch; }

.sr-surface-note {
  margin-top: 26px; border-left: 3px solid var(--sr-wine); background: var(--sr-panel);
  padding: 20px 22px; font-size: 14px; color: var(--sr-text-2); max-width: 92ch;
}

/* -- Future modules ------------------------------------------------------- */

.sr-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--sr-rule); border-left: 1px solid var(--sr-rule); }
.sr-module {
  padding: 22px 20px 24px; border-right: 1px solid var(--sr-rule); border-bottom: 1px solid var(--sr-rule);
  background: var(--mineral);
  box-shadow: inset 0 3px var(--sr-wine);
  min-height: 168px; display: flex; flex-direction: column;
}
.sr-module-id { font: 600 9.5px/1.4 var(--mono); letter-spacing: .13em; color: var(--sr-text-3); }
.sr-module h3 { margin-top: 16px; font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--sr-text); }
.sr-module p { margin-top: 10px; font-size: 13px; color: var(--sr-text-2); }
.sr-module-state { margin-top: auto; padding-top: 16px; font: 700 9px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sr-wine); }
.sr-module-state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border: 1px solid var(--sr-wine); background: var(--sr-wine); vertical-align: 1px; }

/* -- Footer note ---------------------------------------------------------- */

.sr-foot { border-top: 1px solid var(--sr-rule); padding: 44px 0 56px; }
.sr-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 34px 54px; }
.sr-foot h4 { font: 600 9.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sr-wine-lift); margin-bottom: 14px; }
.sr-foot p { font-size: 13.5px; color: var(--sr-text-2); max-width: 74ch; }
.sr-foot p + p { margin-top: 12px; }
.sr-foot a.sr-back { display: inline-block; margin-top: 20px; font: 600 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* -- Motion ---------------------------------------------------------------
   Intentionally absent. assets/site.css defines the base [data-rev] rules and
   assets/site.js runs the global IntersectionObserver. This module reuses both
   rather than duplicating them.
------------------------------------------------------------------------- */

/* -- Responsive ----------------------------------------------------------- */

@media (max-width: 1020px) {
  .sr-head-sub { grid-template-columns: 1fr; }
  .sr-strip { grid-template-columns: 1fr; }
  .sr-strip-cell { border-right: 0; border-bottom: 1px solid var(--sr-rule); }
  .sr-strip-cell:last-child { border-bottom: 0; }
  .pv-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-front-body { grid-template-columns: 1fr; }
  .sr-front-changes { border-right: 0; border-bottom: 1px solid var(--sr-rule); }
  .sr-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-foot-grid { grid-template-columns: 1fr; }
  .sr-recon-steps { grid-template-columns: 1fr; }
  .sr-recon-step { border-right: 0; border-bottom: 1px solid var(--sr-rule); }
  .sr-recon-step:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
  .sr-section-head { grid-template-columns: 1fr; gap: 10px; }
  .sr-section-no { padding-top: 0; }
  .sr-strip { grid-template-columns: 1fr; }
  .sr-strip-cell { border-right: 0; border-bottom: 1px solid var(--sr-rule); }
  .sr-strip-cell:last-child { border-bottom: 0; }
  .pv-legend { grid-template-columns: 1fr; }
  .sr-q { grid-template-columns: 1fr; }
  .sr-q-cell { border-right: 0; border-bottom: 1px solid var(--sr-rule); }
  .sr-q-cell:last-child { border-bottom: 0; }
  .sr-node-btn { grid-template-columns: 42px minmax(0, 1fr); }
  .sr-node-flag { grid-column: 2; }
  .sr-modules { grid-template-columns: 1fr; }
  .sr-authority-in { flex-direction: column; gap: 10px; }
  .sr-corrob-row { grid-template-columns: 1fr; gap: 6px; }
}

/* -- Source ledger — stacked cards below 1300px ----------------------------
   The table only fits without horizontal scrolling once the viewport is wide
   enough for the sum of its column minimums. Measured against this ledger:

     1240px → table 1179px in a 1139px well  (40px short)
     1280px → table 1179px in a 1176px well   (3px short)
     1285px → table 1180px in a 1180px well   (fits)
     1366px → fits · 1440px → fits

   So 1285px is the first width where every column fits with nothing clipped.
   The switch is set at 1300px rather than 1285px to leave ~15px of slack for
   a visible scrollbar and sub-pixel rounding, since a media query that fires
   a few pixels early would reintroduce the scroll it exists to prevent.

   Below that, each row becomes a labelled card: the same cells, reordered
   with flex, each announced by its own data-label since the column headers
   are no longer on screen. Tablets and smaller laptops therefore read cards
   rather than scrolling a table sideways.

   Nothing here changes the data or the wide-desktop table. Currency
   treatments (CURRENT / SUPERSEDED / CLARIFIED / CONTROLLING) are
   re-expressed for the card form, and provenance stays a separate axis — a
   superseded row still carries its full status chip, not a downgraded one.

   Placed last in the file so it wins over the earlier 720px block.
------------------------------------------------------------------------- */

@media (max-width: 1299px) {
  .sr-ledger-wrap { overflow-x: visible; border: 0; }
  .sr-ledger { min-width: 0; width: 100%; display: block; background: transparent; }
  .sr-ledger thead { display: none; }
  .sr-ledger tbody { display: block; }

  .sr-ledger tr {
    display: flex; flex-wrap: wrap;
    border: 1px solid var(--sr-rule);
    background: var(--sr-panel);
    margin-bottom: 14px;
  }
  .sr-ledger tr:last-child { margin-bottom: 0; }
  .sr-ledger tr:hover td { background: transparent; }

  .sr-ledger td {
    display: block; width: 100%; min-width: 0;
    padding: 14px 16px; border-bottom: 1px solid var(--sr-rule);
  }
  .sr-ledger td::before {
    content: attr(data-label);
    display: block; margin-bottom: 7px;
    font: 600 9px/1.4 var(--mono); letter-spacing: .15em;
    text-transform: uppercase; color: var(--sr-text-3);
  }

  /* Reference and status lead the card; then the complete assertion; then
     provenance detail, dates and the source link. */
  .sr-ledger .c-id        { order: 1; width: 50%; border-right: 1px solid var(--sr-rule); }
  .sr-ledger .c-status    { order: 2; width: 50%; }
  .sr-ledger .c-assertion { order: 3; font-size: 14.5px; line-height: 1.55; padding-bottom: 16px; }
  .sr-ledger .c-org       { order: 4; width: 40%; border-right: 1px solid var(--sr-rule); }
  .sr-ledger .c-doc       { order: 5; width: 60%; }
  .sr-ledger .c-pub       { order: 6; width: 50%; border-right: 1px solid var(--sr-rule); }
  .sr-ledger .c-check     { order: 7; width: 50%; }
  .sr-ledger .c-link      { order: 8; border-bottom: 0; }
  .sr-ledger .c-link a    { white-space: normal; }

  .sr-ledger .c-controlling { margin-bottom: 12px; }
  .sr-ledger .c-note { font-size: 12.5px; }
  .sr-ledger .c-doc, .sr-ledger .c-assertion { overflow-wrap: anywhere; }

  /* Currency treatments, re-expressed for the card. */
  .sr-ledger tr.row-superseded {
    background: var(--sr-bg);
  }
  .sr-ledger tr.row-superseded td { background: transparent; }
  .sr-ledger tr.row-controlling { border-left: 3px solid var(--sr-wine); }
  .sr-ledger tr.row-controlling td:first-child { box-shadow: none; }
}

/* -- Ledger cards at tablet and small-laptop widths ------------------------
   Between 721px and 1299px the cards have room to spare, and the phone
   proportions leave half-empty rows. Reference and status still lead, the
   complete assertion still follows, and the dates and source link still sit
   beneath it — only the metadata row tightens to four across.
------------------------------------------------------------------------- */

@media (min-width: 721px) and (max-width: 1299px) {
  .sr-ledger tr { margin-bottom: 18px; }
  .sr-ledger td { padding: 15px 18px; }

  .sr-ledger .c-id     { width: 25%; }
  .sr-ledger .c-status { width: 75%; border-right: 0; }

  /* Keep the assertion to a readable measure rather than one long line. */
  .sr-ledger .c-assertion { font-size: 15px; padding-bottom: 18px; }
  .sr-ledger .c-assertion,
  .sr-ledger .c-assertion .c-note { max-width: 92ch; }

  /* Metadata, four across, beneath the assertion. */
  .sr-ledger .c-org   { width: 25%; }
  .sr-ledger .c-doc   { width: 25%; border-right: 1px solid var(--sr-rule); }
  .sr-ledger .c-pub   { width: 25%; }
  .sr-ledger .c-check { width: 25%; border-right: 0; }
  .sr-ledger .c-link  { width: 100%; }
}

/* -- SR2026 hero -----------------------------------------------------------
   The control-room photograph is a full-bleed surface at desktop and tablet
   widths. Its architectural wall supplies a naturally quiet left-hand field
   for copy while the implementation activity remains visible on the right.

   The copy sits directly on the photograph with no white contrast layer.
   On phones the image becomes a separate band above the copy, so no operator,
   screen or other important content can ever sit behind the text.
------------------------------------------------------------------------- */

.precedent-subpage .sr2026-hero {
  position: relative;
  display: block;
  height: clamp(520px, 48vw, 700px);
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: var(--sr-bg);
  color: var(--sr-text);
  border-bottom: 1px solid var(--sr-rule);
}
.precedent-subpage .sr2026-hero::before { content: none; }
.precedent-subpage .sr2026-hero::after { content: none; }

.precedent-subpage .sr2026-hero-media {
  position: absolute;
  z-index: -1;
  inset: 0;
}
.precedent-subpage .sr2026-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: none;
}

.precedent-subpage .sr2026-hero .op-page-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  height: 100%;
  margin: 0;
  padding: 38px var(--sr-gutter);
}
.precedent-subpage .sr2026-hero .op-page-hero-copy {
  width: min(47%, 610px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
}
.precedent-subpage .sr2026-hero .eyebrow {
  color: var(--sr-wine);
  font-weight: 700;
}
.precedent-subpage .sr2026-hero h1 {
  max-width: 12ch;
  margin-top: 12px;
  margin-left: -8px;
  color: var(--sr-text);
  font-size: clamp(42px, 4.25vw, 66px);
  line-height: .98;
  letter-spacing: -.05em;
  text-shadow: none;
}
.precedent-subpage .sr2026-hero p {
  max-width: 42ch;
  margin-top: 18px;
  color: #353533;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.52;
  text-shadow: none;
}
.precedent-subpage .sr2026-hero p b { color: var(--sr-text); font-weight: 700; }
.precedent-subpage .sr2026-hero .btn-row { margin-top: 24px; }
.precedent-subpage .sr2026-hero .btn-secondary {
  border-color: var(--sr-wine);
  color: var(--sr-wine);
  background: rgba(255,255,255,.56);
}
.precedent-subpage .sr2026-hero .btn-secondary:hover {
  border-color: var(--sr-wine);
  color: #fff;
  background: var(--sr-wine);
}

/* Tablet: retain the left-copy/right-activity composition, with a slightly
   tighter measure and an image anchor biased toward the control surface. */
@media (min-width: 761px) and (max-width: 1100px) {
  .precedent-subpage .sr2026-hero {
    height: clamp(540px, 64vw, 660px);
    min-height: 540px;
  }
  .precedent-subpage .sr2026-hero-media img { object-position: 57% 50%; }
  .precedent-subpage .sr2026-hero .op-page-hero-copy { width: 52%; }
  .precedent-subpage .sr2026-hero h1 { font-size: clamp(40px, 5.6vw, 56px); }
  .precedent-subpage .sr2026-hero p { max-width: 38ch; font-size: 15.5px; }
}

/* Mobile: image band first, then untouched page-white copy. */
@media (max-width: 760px) {
  .precedent-subpage .sr2026-hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .precedent-subpage .sr2026-hero::after { content: none; }
  .precedent-subpage .sr2026-hero-media {
    position: relative;
    z-index: 0;
    order: 1;
    width: 100%;
    height: clamp(230px, 62vw, 360px);
    overflow: hidden;
  }
  .precedent-subpage .sr2026-hero-media img {
    object-position: 68% 50%;
  }
  .precedent-subpage .sr2026-hero .op-page-hero-inner {
    order: 2;
    display: block;
    height: auto;
    padding: 30px 20px 38px;
  }
  .precedent-subpage .sr2026-hero .op-page-hero-copy { width: 100%; }
  .precedent-subpage .sr2026-hero h1 {
    max-width: 13ch;
    margin-top: 10px;
    color: var(--sr-text);
    font-size: clamp(36px, 11vw, 50px);
    text-shadow: none;
  }
  .precedent-subpage .sr2026-hero p {
    max-width: 44ch;
    margin-top: 16px;
    color: var(--sr-text-2);
    font-size: 15.5px;
    text-shadow: none;
  }
  .precedent-subpage .sr2026-hero p b { color: var(--sr-text); }
  .precedent-subpage .sr2026-hero .btn-row { margin-top: 22px; }
  .precedent-subpage .sr2026-hero .btn-secondary { background: transparent; }
}

@media (prefers-reduced-motion: no-preference) {
  .sr-head::before { transition: opacity .4s ease; }
}

/* -- Dark surfaces ---------------------------------------------------------
   Two things on this page read as "not the current position": the status
   band, and every block carrying the superseded/historical hatch. Both are
   now black.

   They are inverted by re-scoping the token set rather than by restyling each
   element. Everything inside already draws its colour from these tokens, so
   the provenance chips, status chips, hatches, rules and strikethroughs all
   follow automatically and stay in step with the light palette above.
------------------------------------------------------------------------- */

.sr-claim.is-superseded,
.sr-ledger tr.row-superseded {
  --sr-bg: var(--wine-deep);
  --sr-panel: var(--wine-deep);
  --sr-panel-2: var(--wine);
  --sr-rule: rgba(255,255,255,.24);
  --sr-rule-strong: rgba(255,255,255,.48);
  --sr-text: var(--white);
  --sr-text-2: var(--mineral-2);
  --sr-text-3: #efcbd4;
  --sr-wine: var(--white);
  --sr-wine-lift: #efcbd4;
  --sr-amber: #e6c98d;
  --sr-amber-line: #7d6222;
  --sr-amber-wash: rgba(230,201,141,.14);
  --sr-green: #9fd2b0;
  --sr-green-line: #35634a;
  --sr-green-wash: rgba(47,90,65,.30);
  background: var(--sr-bg);
  color: var(--sr-text);
}

/* Provenance is the page's governance surface, so it takes the same dark
   treatment as the homepage's authority section. Semantic chips retain their
   original dark burgundy/ink fills for accessible contrast. */
#provenance {
  --sr-bg: var(--ink);
  --sr-panel: #1b1b1b;
  --sr-panel-2: #242424;
  --sr-rule: #343434;
  --sr-rule-strong: #5c625e;
  --sr-text: var(--white);
  --sr-text-2: var(--mineral-2);
  --sr-text-3: #aeb5b0;
  --sr-wine: #d998aa;
  --sr-wine-lift: #efcbd4;
  background: var(--sr-bg);
  color: var(--sr-text);
}
#provenance .pv-FACT { color: var(--ink); }
#provenance .pv-FACT::before { background: var(--ink); }
#provenance .pv-ANALYSIS {
  background: var(--wine);
  border-color: var(--wine);
}

/* --- Status chapter ------------------------------------------------------
   The operational status is a light mineral chapter, matching the homepage's
   working sections rather than presenting the entire chapter as an alert. */

.sr-head {
  background: var(--mineral);
  color: var(--sr-text);
  border-bottom-color: var(--sr-rule);
}
.sr-head .sr-strip-state { color: var(--sr-wine); }

/* Historical timing is the alert inside the chapter. A plain burgundy field
   with white copy keeps the retained provenance visible without texture. */
.sr-head .sr-earlier {
  --sr-rule: rgba(255,255,255,.24);
  --sr-rule-strong: rgba(255,255,255,.48);
  --sr-text: var(--white);
  --sr-text-2: var(--mineral-2);
  --sr-text-3: #efcbd4;
  color: var(--sr-text);
  background: var(--wine-deep);
}
.sr-head .sr-earlier .st-CLARIFIED {
  color: var(--white);
  border-color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.10);
}

/* --- Superseded claim card, Front 001 ------------------------------------ */

.sr-claim.is-superseded {
  border-left: 3px solid var(--sr-rule-strong);
  padding-left: 23px;
}
.sr-claim.is-superseded .sr-claim-text { color: var(--sr-text-2); }
.sr-claim.is-superseded .sr-currency-note { color: var(--sr-text-2); }

/* --- Superseded row, source ledger ---------------------------------------
   The table cells carry their own background, so they have to be cleared for
   the row's black to show through. */
.sr-ledger tr.row-superseded td { background: transparent; }
.sr-ledger tr.row-superseded .c-org,
.sr-ledger tr.row-superseded .c-doc { color: var(--sr-text); }
.sr-ledger tr.row-superseded:hover td { background: transparent; }

/* On a black card the PUBLISHED FACT chip inverts with the token set: its
   fill is var(--sr-text), which is now light, and its label follows. */
.sr-claim.is-superseded .pv-FACT,
.sr-ledger tr.row-superseded .pv-FACT { color: #131314; }
.sr-claim.is-superseded .pv-FACT::before,
.sr-ledger tr.row-superseded .pv-FACT::before { background: #131314; }


/* ======================= PART 2 · V4 LAYOUT ======================= */

/* ===========================================================================
   INTELPLEXIS / SR2026 — v4
   Built to the blueprint of swift.com/standards/iso-20022, read off the live
   page rather than eyeballed. That page is a content page, not a homepage,
   and it is put together from six repeating parts:

     page-banner--no-img   breadcrumb, light h1, ONE sentence, one arrow link.
                           No photograph. No panel. Nothing else above the
                           first card row.
     card-grid             a row of 3-4 white cards: 26px/400 title, one line
                           of #698287 body, "Read more" with a growing arrow.
     grid-usp              a full-bleed #F8F8F8 band: one heading across the
                           top, then borderless blocks — h3 at weight 300,
                           one paragraph. No icons, no rules, no boxes.
     cta-paragraph         one wide statement, 70px of padding, on paper.
     insights-block        a dated list: date, title, two-line dek, arrow link.
     highlight-contact     a closing band.

   Measured constants carried over: body 16px/1.6 in a soft cool grey; display
   type at weight 300 with NORMAL tracking; card body padding 40px 30px 25px;
   section rhythm 70px top and bottom; card chrome absent — no border, no
   radius, no shadow anywhere.

   Not carried over: Swift's mint #ACF9E9, Aeonik Pro, their navy. This page
   says it is not affiliated with or endorsed by SWIFT, so it borrows the
   construction and keeps Intelplexis' own wine, ink and mineral.
=========================================================================== */

.sr.v4, body.v4 .sr, .v4 {
  --ink:        #1B2220;   /* their #333D3E, cast to the Intelplexis green   */
  --body:       #5E6D6B;   /* their #698287                                   */
  --quiet:      #8B9694;   /* their #6C757D                                   */
  --hair:       #E4E9E4;
  --band:       #F5F7F3;   /* their #F8F8F8                                   */
  --wine:       #762338;
  --wine-deep:  #5C1829;
  --wine-wash:  #F7F0F2;
  --amber:      #7A5C17;
  --amber-line: #D9C79B;
  --amber-wash: #FAF6EC;
  --green:      #2F5A41;
  --green-wash: #EFF4F0;
  --bay:        1240px;
  --gut:        clamp(20px, 4vw, 60px);
  --rhythm:     clamp(56px, 6.5vw, 84px);
}

body.v4 { background: #fff; color: var(--ink); }
.v4 .sr,
main.sr.v4 { background: #fff; color: var(--ink); }

.v4 .v4-in { max-width: var(--bay); margin: 0 auto; padding: 0 var(--gut); }
.v4 .v4-block { padding: var(--rhythm) 0; }
.v4 .v4-block.v4-tight { padding: 0 0 var(--rhythm); }
.v4 .v4-band { background: var(--band); }
.v4 .v4-close { background: var(--band); }

/* Their headings: weight 300, tracking normal, generous leading. The site's
   base sheet sets -.025em on every heading; that is the single change that
   makes a page read as "tight tech" instead of "institution". */
.v4 h1, .v4 h2, .v4 h3, .v4 h4 {
  font-weight: 300;
  letter-spacing: normal;
  color: var(--ink);
}
.v4 p { color: var(--body); }


/* ---------------------------------------------------------------------------
   THE ARROW LINK  (.btn-tertiary)
   Their signature: no button, no border. A label, then a 15px arrow. On hover
   a 1px rule grows to 1em behind the arrow and the whole thing slides 0.5em.
------------------------------------------------------------------------- */

.v4 .v4-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500; line-height: 1.2;
  color: var(--ink); text-decoration: none;
}
.v4 .v4-link .arrow {
  position: relative; display: block; width: 15px; height: 11px;
  transition: transform .3s ease;
}
.v4 .v4-link .arrow::before {
  content: ""; position: absolute; top: 50%; right: 2px;
  width: 0; height: 1px; background: var(--wine);
  transform: translateY(-50%); transition: width .3s ease;
}
.v4 .v4-link .arrow::after {
  content: ""; position: absolute; top: 50%; right: 0;
  width: 7px; height: 7px;
  border-top: 1px solid var(--wine); border-right: 1px solid var(--wine);
  transform: translateY(-50%) rotate(45deg);
}
.v4 .v4-link:hover { color: var(--wine); }
.v4 .v4-link:hover .arrow { transform: translateX(.5em); }
.v4 .v4-link:hover .arrow::before { width: 1em; }


/* ---------------------------------------------------------------------------
   1 · PAGE HEADER — no image
------------------------------------------------------------------------- */

.v4 .v4-header { padding: clamp(38px, 5vw, 62px) 0 clamp(30px, 4vw, 46px); }
.v4 .v4-crumb {
  display: flex; flex-wrap: wrap; gap: 9px;
  font-size: 14px; color: var(--quiet); margin-bottom: clamp(26px, 3.4vw, 44px);
}
.v4 .v4-crumb a { color: var(--body); text-decoration: none; }
.v4 .v4-crumb a:hover { color: var(--wine); text-decoration: underline; }
.v4 .v4-header h1 {
  max-width: 17ch;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.12;
  margin: 0;
}
.v4 .v4-lede {
  max-width: 68ch;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--body);
}
.v4 .v4-lede b { color: var(--ink); font-weight: 600; }
.v4 .v4-header .v4-link { margin-top: 28px; }


/* ---------------------------------------------------------------------------
   2 · CARD ROW — the status
   #sr-strip is display:contents so its three rendered cells and the earlier
   timetable become four items in one grid. No markup was moved to do it.
------------------------------------------------------------------------- */

.v4 .v4-cards-block { padding-top: 0; }
.v4 .v4-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.v4 #sr-strip { display: contents; }

.v4 .sr-strip,
.v4 .sr-strip-cell,
.v4 .sr-earlier {
  border: 0; background: transparent; padding: 0; display: block;
}
.v4 .sr-strip-cell,
.v4 .sr-earlier {
  background: var(--band);
  padding: 34px 30px 30px;
  min-width: 0;
}
.v4 .sr-strip-cell { border-top: 2px solid var(--wine); }
.v4 .sr-earlier { border-top: 2px solid var(--hair); }

.v4 .sr-strip-k,
.v4 .sr-earlier-k {
  display: block;
  font: 400 14px/1.5 var(--sans);
  letter-spacing: normal; text-transform: none;
  color: var(--body);
}
.v4 .sr-strip-state,
.v4 .sr-earlier-state {
  display: block;
  margin-top: 10px;
  font: 300 clamp(24px, 2.3vw, 30px)/1.2 var(--sans);
  letter-spacing: normal; text-transform: none;
  color: var(--ink);
}
.v4 .sr-strip-detail,
.v4 .sr-earlier p {
  display: block;
  margin-top: 14px;
  font-size: 15.5px; line-height: 1.6;
  color: var(--body);
  max-width: none;
}
.v4 .sr-strip-src {
  display: block; margin-top: 20px;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: normal; text-transform: none;
  color: var(--quiet);
}
.v4 .sr-strip-src a { color: var(--wine); border: 0; text-decoration: none; }
.v4 .sr-strip-src a:hover { text-decoration: underline; }
.v4 .sr-earlier-k .st { margin-left: 8px; }


/* ---------------------------------------------------------------------------
   3 · GREY GRID — their grid-usp
------------------------------------------------------------------------- */

.v4 .v4-grid-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 50px); }
.v4 .v4-grid-head--wide { max-width: 78ch; }
.v4 .v4-kicker {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 500;
  color: var(--wine);
}
.v4 .v4-grid-head h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.22;
}
.v4 .v4-grid-head--wide h2 { max-width: 26ch; }
.v4 .v4-intro {
  margin: 20px 0 0;
  max-width: 66ch;
  font-size: 16.5px; line-height: 1.62;
  color: var(--body);
}
.v4 .v4-note {
  margin-top: 26px; max-width: 78ch;
  font-size: 14.5px; line-height: 1.62; color: var(--quiet);
}
.v4 .v4-meta-line {
  margin: 0 0 22px;
  font-size: 14px; color: var(--quiet);
}

.v4 .v4-recon-title {
  max-width: 30ch;
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.35;
}
.v4 .v4-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px) clamp(28px, 3vw, 48px);
}
.v4 .sr-recon-step {
  border: 0; padding: 0; position: static;
}
.v4 .sr-recon-step::before, .v4 .sr-recon-step::after { content: none; }
.v4 .sr-recon-stage {
  margin: 0 0 12px;
  font: 400 14px/1.5 var(--sans);
  letter-spacing: normal; text-transform: none;
  color: var(--quiet);
}
.v4 .sr-recon-step p {
  margin-top: 14px;
  font-size: 16px; line-height: 1.62; color: var(--body);
}


/* ---------------------------------------------------------------------------
   4 · STATEMENT — their cta-paragraph
------------------------------------------------------------------------- */

.v4 .v4-statement {
  border-top: 2px solid var(--ink);
  padding-top: clamp(28px, 3.4vw, 44px);
  max-width: 82ch;
}
.v4 .sr-recon-reading {
  border: 0; background: transparent; padding: 0; margin: 0;
}
.v4 .sr-recon-reading p {
  margin-top: 18px;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 300; line-height: 1.5;
  color: var(--ink);
  max-width: none;
}
.v4 .v4-caution {
  margin-top: 26px;
  padding-left: 20px;
  border-left: 2px solid var(--wine);
  font-size: 14.5px; line-height: 1.62; color: var(--body);
}


/* ---------------------------------------------------------------------------
   5 · FRONT 001 — their card row
------------------------------------------------------------------------- */

.v4 .sr-front { border: 0; background: transparent; }
.v4 .sr-front-head {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: baseline; justify-content: space-between;
  padding: 0 0 clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--hair);
  background: transparent;
}
.v4 .sr-head-ref {
  font: 400 14px/1.5 var(--sans);
  letter-spacing: normal; text-transform: none; color: var(--quiet);
}
.v4 .sr-front-head h3 {
  margin-top: 12px; max-width: 22ch;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.22;
  letter-spacing: normal;
}
.v4 .sr-front-state {
  font: 500 13px/1 var(--sans);
  letter-spacing: normal; text-transform: none;
  border: 0; border-radius: 100px;
  background: var(--wine-wash); color: var(--wine);
  padding: 8px 14px 9px;
}
.v4 .sr-front-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: clamp(26px, 3vw, 40px);
}
.v4 .sr-front-changes {
  display: contents;
  border: 0; padding: 0;
}
.v4 .sr-claim {
  background: var(--band);
  border: 0;
  padding: 34px 30px 30px;
  margin: 0;
}
.v4 .sr-claim p {
  margin-top: 16px;
  font-size: 16.5px; line-height: 1.58; color: var(--ink);
  max-width: none;
}
.v4 .sr-claim.is-superseded { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.v4 .sr-claim.is-superseded .sr-claim-text {
  color: var(--quiet);
  text-decoration-color: var(--quiet);
}
.v4 .sr-currency-note {
  margin-top: 14px; padding-left: 14px;
  border-left: 2px solid var(--hair);
  font-size: 14px; line-height: 1.6; color: var(--body);
}
.v4 .sr-cite {
  margin-top: 16px;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: normal; text-transform: none; color: var(--quiet);
}
.v4 .sr-cite a { color: var(--wine); border: 0; text-decoration: none; }
.v4 .sr-cite a:hover { text-decoration: underline; }

.v4 .sr-front-aside {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(26px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--hair);
  margin-top: 4px;
}
.v4 .sr-front-aside .sr-claim {
  background: transparent; padding: 0; box-shadow: none;
}
.v4 .sr-counters { border-top: 1px solid var(--hair); margin: 0; }
.v4 .sr-counter {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 15px; color: var(--body);
}
.v4 .sr-counter b {
  font: 300 26px/1 var(--sans); letter-spacing: normal; color: var(--ink);
}
.v4 .sr-counter.zero b { color: var(--quiet); }


/* ---------------------------------------------------------------------------
   6 · SURFACE — grid-usp again, twelve blocks, each one a disclosure
------------------------------------------------------------------------- */

.v4 #sr-surface {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px);
  border: 0;
  align-items: start;
}
.v4 .sr-node { border: 0; background: transparent; }
.v4 .sr-node-btn {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.v4 .sr-node-btn:hover { background: transparent; }
.v4 .sr-node-btn:hover .sr-node-name { color: var(--wine); }
.v4 .sr-node-id {
  display: block; padding: 0;
  font: 400 13px/1.5 var(--sans); letter-spacing: normal; color: var(--quiet);
}
.v4 .sr-node-name {
  display: block; margin-top: 8px;
  font-size: clamp(19px, 1.7vw, 22px); font-weight: 300; line-height: 1.32;
  letter-spacing: normal; color: var(--ink);
  transition: color .15s ease;
}
.v4 .sr-node-summary {
  display: block; margin-top: 12px; max-width: none;
  font-size: 15.5px; line-height: 1.6; color: var(--body);
}
.v4 .sr-node-flag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 0;
  font: 400 13.5px/1.4 var(--sans); letter-spacing: normal; text-transform: none;
}
.v4 .sr-node-flag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.v4 .sr-node-flag.drafted { color: var(--wine); }
.v4 .sr-node-flag.empty { color: var(--quiet); }
.v4 .sr-node-flag.empty::before { background: transparent; box-shadow: inset 0 0 0 1px var(--quiet); }

.v4 .sr-node-panel { border: 0; background: transparent; padding: 0; }
.v4 .sr-node.open .sr-node-panel { margin-top: 20px; }
.v4 .sr-q { display: block; }
.v4 .sr-q-cell { border: 0; padding: 16px 0 0; }
.v4 .sr-q-k {
  font: 500 13.5px/1.5 var(--sans);
  letter-spacing: normal; text-transform: none; color: var(--ink);
}
.v4 .sr-q-cell p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--body); }
.v4 .sr-q-prov { border: 0; padding: 18px 0 0; }
.v4 .sr-empty { padding: 16px 0 0; }
.v4 .sr-empty-k {
  border: 0; padding: 0;
  font: 500 13.5px/1.5 var(--sans); letter-spacing: normal; text-transform: none;
  color: var(--ink);
}
.v4 .sr-empty p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--body); max-width: none; }


/* ---------------------------------------------------------------------------
   7 · LEDGER — their insights-block
   The table becomes a dated list: published date and reference lead, the
   assertion is the headline, publisher and document are the dek. The table
   semantics stay in the markup; only the presentation changes.
------------------------------------------------------------------------- */

.v4 .v4-ledger { border-top: 2px solid var(--ink); }
.v4 .sr-ledger {
  display: block; width: 100%; min-width: 0;
  border: 0; background: transparent;
}
.v4 .sr-ledger thead { display: none; }
.v4 .sr-ledger tbody { display: block; }
.v4 .sr-ledger td::before { content: none; }

.v4 .sr-ledger tr {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 12px;
  padding: clamp(26px, 3vw, 36px) 0;
  border: 0; border-bottom: 1px solid var(--hair);
  background: transparent; margin: 0;
}
.v4 .sr-ledger tr:hover td { background: transparent; }
.v4 .sr-ledger td {
  display: block; width: auto; min-width: 0;
  padding: 0; border: 0;
  font-size: 15px; color: var(--body);
}

.v4 .sr-ledger .c-pub    { order: 1; font: 400 14px/1.5 var(--sans); letter-spacing: normal; color: var(--quiet); }
.v4 .sr-ledger .c-id     { order: 2; font: 400 14px/1.5 var(--mono); letter-spacing: .02em; color: var(--quiet); }
.v4 .sr-ledger .c-id::before { content: "·"; margin-right: 12px; color: var(--hair); }
.v4 .sr-ledger .c-status { order: 3; margin-left: auto; }
.v4 .sr-ledger .c-assertion {
  order: 4; flex: 0 0 100%; margin-top: 12px;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 300; line-height: 1.42;
  color: var(--ink); min-width: 0;
}
.v4 .sr-ledger .c-org    { order: 5; flex: 0 0 100%; margin-top: 14px; font-weight: 500; color: var(--ink); white-space: normal; }
.v4 .sr-ledger .c-doc    { order: 6; color: var(--body); }
.v4 .sr-ledger .c-doc::before { content: "—"; margin-right: 8px; color: var(--quiet); }
.v4 .sr-ledger .c-check  { order: 7; font: 400 14px/1.5 var(--sans); color: var(--quiet); }
.v4 .sr-ledger .c-check::before { content: "· last checked"; margin-right: 6px; color: var(--quiet); }
.v4 .sr-ledger .c-link   { order: 8; flex: 0 0 100%; margin-top: 16px; }
.v4 .sr-ledger .c-link a {
  font: 500 14.5px/1.2 var(--sans); letter-spacing: normal;
  color: var(--wine); text-decoration: none;
}
.v4 .sr-ledger .c-link a:hover { text-decoration: underline; }
.v4 .sr-ledger .link-kind {
  display: block; margin-top: 6px;
  font: 400 13px/1.5 var(--sans); letter-spacing: normal; text-transform: none;
  color: var(--quiet);
}
.v4 .sr-ledger .c-note {
  display: block; margin-top: 10px; padding-left: 14px;
  border-left: 2px solid var(--hair);
  font-size: 14px; line-height: 1.6; color: var(--body); text-decoration: none;
}
.v4 .sr-ledger .c-controlling {
  display: inline-block; width: fit-content; margin-bottom: 12px;
  font: 500 12.5px/1 var(--sans); letter-spacing: normal; text-transform: none;
  border: 0; border-radius: 100px;
  background: var(--wine-wash); color: var(--wine);
  padding: 7px 12px 8px;
}
.v4 .sr-ledger tr.row-controlling { border-left: 2px solid var(--wine); padding-left: 24px; }
.v4 .sr-ledger tr.row-controlling td:first-child { box-shadow: none; }
.v4 .sr-ledger tr.row-superseded .c-assertion { color: var(--quiet); }
.v4 .sr-ledger tr.row-superseded .c-assertion-text { text-decoration-color: var(--quiet); }

/* status + currency chips */
.v4 .st, .v4 .cur {
  font: 500 12.5px/1 var(--sans);
  letter-spacing: normal; text-transform: lowercase;
  border: 1px solid; border-radius: 100px;
  padding: 7px 12px 8px; white-space: nowrap; display: inline-block;
}
.v4 .st::first-letter, .v4 .cur::first-letter { text-transform: uppercase; }
.v4 .st-CURRENT    { color: var(--green); border-color: #DCE6DF; background: var(--green-wash); }
.v4 .st-SUPERSEDED { color: var(--quiet); border-color: var(--hair); background: transparent; text-decoration: none; }
.v4 .st-CLARIFIED  { color: var(--amber); border-color: var(--amber-line); background: var(--amber-wash); }
.v4 .cur-SUPERSEDED { color: var(--quiet); border-color: var(--hair); }
.v4 .cur-CLARIFIED  { color: var(--amber); border-color: var(--amber-line); background: var(--amber-wash); }

/* corroborating references */
.v4 .v4-corrob { margin-top: clamp(40px, 5vw, 64px); }
.v4 .v4-corrob h3 { font-size: 21px; line-height: 1.3; margin: 0; }
.v4 .v4-corrob > p { margin: 14px 0 22px; max-width: 78ch; font-size: 14.5px; line-height: 1.62; color: var(--body); }
.v4 .sr-corrob-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 16px 0; border: 0; border-bottom: 1px solid var(--hair);
}
.v4 .sr-corrob-row .r-id { font: 400 13.5px/1.5 var(--mono); letter-spacing: .02em; color: var(--quiet); min-width: 84px; }
.v4 .sr-corrob-row .r-doc { flex: 1 1 320px; font-size: 15px; color: var(--body); }
.v4 .sr-corrob-row .r-doc b { color: var(--ink); font-weight: 500; }
.v4 .sr-corrob-row .r-doc a { color: var(--wine); text-decoration: none; }
.v4 .sr-corrob-row .r-doc a:hover { text-decoration: underline; }
.v4 .sr-corrob-row .r-date { font: 400 14px/1.5 var(--sans); color: var(--quiet); }


/* ---------------------------------------------------------------------------
   8 · PROVENANCE — four blocks, no boxes
------------------------------------------------------------------------- */

.v4 .pv-legend {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
  border: 0;
}
.v4 .pv-legend-cell { border: 0; padding: 0; background: transparent; }
.v4 .pv-legend-cell p { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--body); }
.v4 .pv-count {
  margin-top: 16px;
  font: 400 13.5px/1.5 var(--sans); letter-spacing: normal; text-transform: none;
  color: var(--quiet);
}
.v4 .pv {
  font: 500 12.5px/1 var(--sans);
  letter-spacing: normal; text-transform: none;
  gap: 8px; padding: 7px 12px 8px;
  border: 1px solid transparent; border-radius: 100px;
}
.v4 .pv::before { width: 6px; height: 6px; flex-basis: 6px; border-radius: 50%; }
.v4 .pv-FACT      { background: var(--ink); border-color: var(--ink); color: #fff; }
.v4 .pv-FACT::before { background: #fff; }
.v4 .pv-ANALYSIS  { background: var(--wine-wash); border-color: #E5D2D7; color: var(--wine); }
.v4 .pv-ANALYSIS::before { background: var(--wine); box-shadow: none; }
.v4 .pv-SYNTHETIC { background: var(--amber-wash); border-color: var(--amber-line); color: var(--amber); }
.v4 .pv-SYNTHETIC::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--amber); transform: none; }
.v4 .pv-OBSERVED  { background: transparent; border-color: var(--hair); color: var(--quiet); }
.v4 .pv-OBSERVED::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--quiet); }
/* the base sheet flips these two inside superseded and #provenance blocks */
.v4 .sr-claim.is-superseded .pv-FACT,
.v4 #provenance .pv-FACT { background: var(--ink); border-color: var(--ink); color: #fff; }
.v4 .sr-claim.is-superseded .pv-FACT::before,
.v4 #provenance .pv-FACT::before { background: #fff; }
.v4 #provenance { color: var(--ink); }
.v4 #provenance .pv-ANALYSIS { background: var(--wine-wash); border-color: #E5D2D7; color: var(--wine); }
.v4 #provenance .pv-ANALYSIS::before { background: var(--wine); }


/* ---------------------------------------------------------------------------
   9 · DECLARED ARCHITECTURE
------------------------------------------------------------------------- */

.v4 .sr-modules {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
  border: 0;
}
.v4 .sr-module {
  border: 0; box-shadow: none; background: transparent;
  padding: 20px 0 0; min-height: 0;
  border-top: 1px solid var(--hair);
}
.v4 .sr-module-id { font: 400 13px/1.5 var(--sans); letter-spacing: normal; color: var(--quiet); }
.v4 .sr-module h3 { margin-top: 12px; font-size: 19px; font-weight: 400; line-height: 1.32; letter-spacing: normal; color: var(--ink); }
.v4 .sr-module p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--body); }
.v4 .sr-module-state {
  margin-top: 20px; padding-top: 0;
  font: 400 13.5px/1.5 var(--sans); letter-spacing: normal; text-transform: none;
  color: var(--quiet);
}
.v4 .sr-module-state::before {
  width: 6px; height: 6px; border-radius: 50%;
  border: 0; background: var(--quiet); margin-right: 8px; vertical-align: 1px;
}


/* ---------------------------------------------------------------------------
   10 · CLOSING BAND
------------------------------------------------------------------------- */

.v4 .v4-close-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
}
.v4 .v4-close-grid h3 { margin: 0 0 16px; font-size: 21px; line-height: 1.3; }
.v4 .v4-close-grid p { font-size: 15.5px; line-height: 1.66; color: var(--body); }
.v4 .v4-close-grid p + p { margin-top: 14px; }
.v4 .v4-close-grid .v4-link { margin-top: 22px; }
.v4 .sr-method { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.v4 .sr-method-step {
  border: 0; padding: 0;
  font: 400 14.5px/1.5 var(--sans); letter-spacing: normal; text-transform: none;
  color: var(--body);
}
.v4 .sr-method-step.pending { color: var(--quiet); }
.v4 .sr-method-arrow { color: var(--quiet); font-size: 13px; }
.v4 .sr-method-note { margin-top: 16px; font-size: 14.5px; line-height: 1.62; color: var(--quiet); max-width: none; }


/* ---------------------------------------------------------------------------
   11 · RESPONSIVE — their breakpoints: 4→2→1, 3→1
------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .v4 .v4-cards,
  .v4 .pv-legend,
  .v4 .sr-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4 .v4-grid-3,
  .v4 #sr-surface,
  .v4 .sr-front-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4 .v4-close-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4 .sr-front-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .v4 .v4-cards,
  .v4 .pv-legend,
  .v4 .sr-modules,
  .v4 .v4-grid-3,
  .v4 #sr-surface,
  .v4 .sr-front-body,
  .v4 .v4-close-grid { grid-template-columns: minmax(0, 1fr); }
  .v4 .sr-ledger .c-status { margin-left: 0; flex: 0 0 100%; margin-top: 12px; order: 9; }
  .v4 .sr-ledger .c-link { margin-top: 14px; }
}


/* ===========================================================================
   12 · SECOND PASS
=========================================================================== */

/* 12.1  Band assignment.
   sr2026.css paints these sections by id, which outranks a class. The bands
   have to be claimed at the same weight or the grey never appears. */
.v4 #reconciliation,
.v4 #surface,
.v4 #provenance { background: var(--band); }
.v4 #front-001,
.v4 #ledger,
.v4 #modules { background: #fff; }

/* 12.2  Three status cards, not four.
   The earlier timetable carries a paragraph the three current facts do not,
   so as a fourth card it stretched the whole row and left the other three
   two-thirds empty. It is also not their peer — it is retained provenance,
   explicitly demoted. So it drops out of the row and becomes a quiet strip
   underneath it, which is both better composition and a truer hierarchy. */
.v4 .v4-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.v4 .sr-earlier {
  margin-top: 20px;
  padding: 24px 0 0;
  background: transparent;
  border-top: 1px solid var(--hair);
}
.v4 .sr-earlier-k {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  color: var(--quiet);
}
.v4 .sr-earlier-state {
  display: inline; margin: 0;
  font: 400 16px/1.6 var(--sans); color: var(--body);
}
.v4 .sr-earlier p {
  margin-top: 10px; max-width: 96ch;
  font-size: 15px; line-height: 1.62; color: var(--body);
}
.v4 .sr-earlier .sr-strip-src { margin-top: 12px; }


/* ===========================================================================
   13 · THIRD PASS — the ledger rows, and two blocks the base sheet builds dark
=========================================================================== */

/* 13.1  sr2026.css turns the ledger into stacked cards below 1299px, and that
   block does two things this layout has to undo: it gives every cell
   width:100% (so nothing can share a line), and it styles td::before as an
   uppercase mono field label. Setting content:none is not enough — the font,
   tracking and transform still land on the separators put in their place. */
.v4 .sr-ledger td::before {
  content: none;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  display: inline;
  margin: 0;
}
.v4 .sr-ledger .c-pub,
.v4 .sr-ledger .c-id,
.v4 .sr-ledger .c-doc,
.v4 .sr-ledger .c-check,
.v4 .sr-ledger .c-status { flex: 0 0 auto; width: auto; }

.v4 .sr-ledger .c-id::before {
  content: "·"; margin-right: 12px; color: var(--quiet);
  font: inherit; letter-spacing: normal; text-transform: none; display: inline;
}
.v4 .sr-ledger .c-doc::before {
  content: "—"; margin-right: 8px; color: var(--quiet);
  font: inherit; letter-spacing: normal; text-transform: none; display: inline;
}
.v4 .sr-ledger .c-check::before {
  content: "· last checked "; color: var(--quiet);
  font: inherit; letter-spacing: normal; text-transform: none; display: inline;
}

/* Organisation and document belong on one line, as publisher — title. */
.v4 .sr-ledger .c-org { flex: 0 0 auto; margin-top: 14px; }
.v4 .sr-ledger .c-doc { margin-top: 14px; }
.v4 .sr-ledger .c-check { margin-top: 14px; }

/* "Controlling" is a marker on the row, not the opening word of the
   assertion, so it takes its own line above it. */
.v4 .sr-ledger .c-controlling { display: block; }

/* 13.2  Superseded claims and rows.
   sr2026.css re-scopes the whole --sr-* token set to a dark palette inside
   these, for a burgundy ground it no longer has here. On paper that leaves
   the note explaining WHY something was superseded almost invisible — and
   that note is the most important line in the block. */
.v4 .sr-claim.is-superseded .sr-currency-note,
.v4 .sr-ledger tr.row-superseded .c-note { color: var(--body); border-left-color: var(--hair); }
.v4 .sr-claim.is-superseded .sr-cite { color: var(--quiet); }
.v4 .sr-claim.is-superseded .sr-cite a { color: var(--wine); }
.v4 .sr-ledger tr.row-superseded .c-org { color: var(--ink); }
.v4 .sr-ledger tr.row-superseded .c-doc,
.v4 .sr-ledger tr.row-superseded .c-check { color: var(--body); }


/* ===========================================================================
   14 · RESPONSIVE, RESTATED
   Section 11's media queries sit above the later passes, so the three-column
   card rule added in 12.2 was overriding them at every width. The breakpoints
   are restated here, at the end, where they win.
=========================================================================== */

@media (max-width: 1080px) {
  .v4 .v4-cards,
  .v4 .v4-grid-3,
  .v4 #sr-surface,
  .v4 .sr-front-body,
  .v4 .pv-legend,
  .v4 .sr-modules,
  .v4 .v4-close-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4 .sr-front-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .v4 .v4-cards,
  .v4 .v4-grid-3,
  .v4 #sr-surface,
  .v4 .sr-front-body,
  .v4 .pv-legend,
  .v4 .sr-modules,
  .v4 .v4-close-grid { grid-template-columns: minmax(0, 1fr); }
  .v4 .sr-strip-cell { padding: 26px 22px 24px; }
  .v4 .sr-ledger .c-status { order: 9; flex: 0 0 100%; margin: 12px 0 0; }
  .v4 .sr-ledger .c-link { margin-top: 14px; }
  .v4 .sr-ledger tr.row-controlling { padding-left: 16px; }
  .v4 .v4-header h1 { max-width: none; }
  .v4 .v4-grid-head h2,
  .v4 .v4-grid-head--wide h2 { max-width: none; }
}


/* ===========================================================================
   15 · SURFACE — the architectural reference
   ---------------------------------------------------------------------------
   A stepped burgundy wall: flat matte panels of unequal width, groups of fine
   near-black flutes between them, one raking light, and a staircase of panels
   catching it. All one hue, from near-black to a lit crimson.

   Everything here is background and type. No block moves, nothing is added to
   the page's sequence, and no image is loaded — it is built from gradients, a
   mask and a clip-path, so it costs nothing and stays sharp at any density.

   The rhythm is deliberately non-repeating: the seam layers run on co-prime
   periods (233px and 389px) so the wall never visibly tiles.
=========================================================================== */

.v4 {
  --arch-lit:   #7E2333;   /* panel face catching the rake  */
  --arch-mid:   #521523;   /* panel face in half light      */
  --arch-deep:  #300C15;   /* panel face in shadow          */
  --arch-black: #16060A;   /* the flutes                    */
}

/* --- the wall ----------------------------------------------------------- */

.v4 .v4-arch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #F3EDEE;
  background:
    /* panel seams, two periods that never line up */
    repeating-linear-gradient(90deg,
      transparent 0 232px,
      rgba(0,0,0,.34) 232px 233px),
    repeating-linear-gradient(90deg,
      transparent 0 388px,
      rgba(255,255,255,.035) 388px 389px),
    /* the rake */
    radial-gradient(140% 120% at 82% -20%, rgba(255,255,255,.13), transparent 58%),
    linear-gradient(158deg, var(--arch-mid) 0%, var(--arch-deep) 58%, var(--arch-black) 100%);
}

/* the staircase: panels stepping across the block, one tone up */
.v4 .v4-arch::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(158deg, var(--arch-lit), var(--arch-mid) 66%, var(--arch-deep));
  /* Each step's top edge catches the light. drop-shadow follows the clipped
     silhouette rather than the box, so one filter draws the whole staircase
     edge — the detail that makes the wall read as panels and not as a shape. */
  filter: drop-shadow(0 -1.5px 0 rgba(255,255,255,.22));
  /* Five wide steps, not eight narrow ones. The reference reads as large flat
     fields with occasional incident; more steps than this becomes pattern. */
  clip-path: polygon(
    0 62%, 19% 62%, 19% 46%, 38% 46%, 38% 70%, 57% 70%,
    57% 54%, 78% 54%, 78% 78%, 100% 78%, 100% 100%, 0 100%);
}

/* the flutes: a fine vertical texture, revealed only in bands, so the wall
   reads as flat panels divided by fluted columns rather than as corduroy */
.v4 .v4-arch::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Recessed, not raised: the flutes are shadow with only a hairline of
     return light, so they read as carved into the panel rather than laid on
     top of it. */
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,.82) 0 1.5px,
    rgba(255,255,255,.035) 1.5px 2.5px,
    transparent 2.5px 6px);
  /* Two masks intersected: the vertical bands, and a fade that keeps the left
     of the wall clean for the headline. Where mask-composite is unsupported
     only the bands apply, which is the acceptable fallback. */
  -webkit-mask-image:
    repeating-linear-gradient(90deg, transparent 0 396px, #000 396px 440px),
    linear-gradient(90deg, transparent 0 9%, rgba(0,0,0,.30) 26%, #000 54%);
          mask-image:
    repeating-linear-gradient(90deg, transparent 0 396px, #000 396px 440px),
    linear-gradient(90deg, transparent 0 9%, rgba(0,0,0,.30) 26%, #000 54%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* --- the ghost wordmark -------------------------------------------------- */

.v4 .v4-ghost {
  position: absolute; right: -.06em; bottom: -.30em;
  z-index: -1; pointer-events: none; user-select: none;
  font: 300 clamp(140px, 24vw, 330px)/.8 var(--mono);
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.075);
  white-space: nowrap;
}
/* The closing band is three columns of running text, so its wordmark sits
   almost entirely below the block and only the shoulders of the letters
   show. It signs the page rather than competing with it. */
.v4 .v4-ghost--close {
  right: auto; left: -.03em; bottom: -.62em;
  font-size: clamp(88px, 13vw, 178px);
  letter-spacing: .02em;
  -webkit-text-stroke-color: rgba(255,255,255,.055);
}
@supports not (-webkit-text-stroke: 1px red) {
  .v4 .v4-ghost { color: rgba(255,255,255,.055); }
}

/* --- page header on the wall -------------------------------------------- */

.v4 .v4-header {
  padding: clamp(52px, 7vw, 96px) 0 clamp(52px, 7vw, 92px);
  border-bottom: 0;
}
.v4 .v4-header .v4-in { position: relative; z-index: 1; }
.v4 .v4-header h1 { color: #fff; }
.v4 .v4-header .v4-crumb { color: rgba(255,255,255,.52); }
.v4 .v4-header .v4-crumb a { color: rgba(255,255,255,.72); }
.v4 .v4-header .v4-crumb a:hover { color: #fff; }
.v4 .v4-header .v4-lede { color: rgba(255,255,255,.80); }
.v4 .v4-header .v4-lede b { color: #fff; }
.v4 .v4-header .v4-link { color: #fff; }
.v4 .v4-header .v4-link .arrow::before { background: #fff; }
.v4 .v4-header .v4-link .arrow::after { border-color: #fff; }
.v4 .v4-header .v4-link:hover { color: rgba(255,255,255,.78); }

/* --- closing band on the wall ------------------------------------------- */

.v4 .v4-close { background: transparent; }
.v4 .v4-close .v4-in { position: relative; z-index: 1; }
.v4 .v4-close h3 { color: #fff; }
.v4 .v4-close p,
.v4 .v4-close .sr-method-step { color: rgba(255,255,255,.76); }
.v4 .v4-close .sr-method-step.pending,
.v4 .v4-close .sr-method-arrow,
.v4 .v4-close .sr-method-note { color: rgba(255,255,255,.52); }
.v4 .v4-close .v4-link { color: #fff; }
.v4 .v4-close .v4-link .arrow::before { background: #fff; }
.v4 .v4-close .v4-link .arrow::after { border-color: #fff; }

/* The close band carries three columns of running text across its full width.
   Flutes and a staircase behind that put hard tonal steps mid-paragraph, so
   both are withdrawn: the wall is built once, at full strength, in the header
   where there is room for it, and the closing band echoes it in colour and
   wordmark only. One statement, not two competing ones. */
.v4 .v4-close::after,
.v4 .v4-close::before { display: none; }
.v4 .v4-close {
  background:
    radial-gradient(130% 130% at 88% -30%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(158deg, var(--arch-mid) 0%, var(--arch-deep) 62%, var(--arch-black) 100%);
}

/* --- the same wall, quieted, on the light bands -------------------------
   The grey bands take the panel rhythm at a fraction of its strength, so the
   page reads as one surface rather than as two dark blocks bolted to a white
   document. No flutes here and no staircase — only the seams.
---------------------------------------------------------------------- */

.v4 #reconciliation,
.v4 #surface,
.v4 #provenance {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 348px,
      rgba(27,34,32,.038) 348px 349px),
    repeating-linear-gradient(90deg,
      transparent 0 583px,
      rgba(255,255,255,.75) 583px 584px),
    linear-gradient(158deg, #F7F9F5, var(--band) 70%);
}

/* The status cards sit on those bands and would inherit the seam behind them,
   so they are given their own flat ground back. */
.v4 .sr-strip-cell { background: var(--band); }

@media (max-width: 700px) {
  .v4 .v4-arch::after {
    -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 172px, #000 172px 206px);
            mask-image: repeating-linear-gradient(90deg, transparent 0 172px, #000 172px 206px);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  .v4 .v4-arch { background-size: auto; }
  .v4 .v4-ghost { font-size: clamp(104px, 34vw, 170px); }
  .v4 .v4-ghost--close { font-size: clamp(64px, 21vw, 120px); }
}

/* Fine texture at this scale is where cheap screens show banding; the wall is
   built from large soft ramps for that reason, but honour the preference. */
@media (prefers-contrast: more) {
  .v4 .v4-arch::after { opacity: .5; }
  .v4 .v4-ghost { display: none; }
}


/* ===========================================================================
   16 · HEADLINE WEIGHT, WALL BALANCE, AND WINE IN THE CHAPTERS
=========================================================================== */

/* 16.1  The headline carries weight.
   The reference sets its h1 at 300; on this page the title is the one thing
   that has to land before anything else, so it goes to 700. Bold at this size
   needs the tracking pulled in — at 300 the letters need air, at 700 the same
   air reads as gaps. */
.v4 .v4-header h1 {
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.04;
  /* Bold sets wider than light, so the old measure let the title break as
     "Implementation Control / Room" and leave one word stranded. Pulled in so
     it breaks on the phrase instead. */
  max-width: 13ch;
}

/* 16.2  The second burgundy steps back.
   The wall carried two: a saturated upper tone that white sits well on, and a
   lighter stepped plane through the lower half, behind the 2026. Two lit
   fields competing left the white text sitting on the weaker of them. The
   lower plane is now taken down and desaturated so it reads as a plane in
   shadow, and the upper tone carries the type alone. */
.v4 { --arch-lit: #5A1826; }
.v4 .v4-arch::before {
  background: linear-gradient(158deg, var(--arch-lit) 0%, #3A1019 58%, var(--arch-black) 100%);
  opacity: .88;
  filter: drop-shadow(0 -1.5px 0 rgba(255,255,255,.15));
}
/* and the rake is pulled toward the headline, so the brightest part of the
   wall is the part with words on it */
.v4 .v4-arch {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 232px,
      rgba(0,0,0,.34) 232px 233px),
    repeating-linear-gradient(90deg,
      transparent 0 388px,
      rgba(255,255,255,.035) 388px 389px),
    radial-gradient(150% 135% at 34% -34%, rgba(255,255,255,.15), transparent 62%),
    linear-gradient(158deg, #5E1A28 0%, var(--arch-deep) 60%, var(--arch-black) 100%);
}

/* 16.3  The wine reaches the chapters.
   Carefully: the bands stop being neutral grey and take a trace of the wall's
   hue, with a single soft bloom in the corner the rake would fall on. Held at
   a few percent — enough that the page feels cut from one material, not
   enough to tint the type or fight the cards. */
.v4 #reconciliation,
.v4 #surface,
.v4 #provenance {
  position: relative;
  background:
    /* Two seams across the whole measure, not five. At document scale the
       panel rhythm only has to be sensed, not counted. */
    repeating-linear-gradient(90deg,
      transparent 0 462px,
      rgba(58,16,25,.028) 462px 463px),
    repeating-linear-gradient(90deg,
      transparent 0 761px,
      rgba(255,255,255,.55) 761px 762px),
    radial-gradient(90% 130% at 96% 0%, rgba(118,35,56,.055), transparent 62%),
    linear-gradient(158deg, #FAF7F7 0%, #F4EFF0 72%, #F1EBEC 100%);
}
.v4 .sr-strip-cell { background: #F4EFF0; }

/* Each chapter opens on a short wine rule — the same edge the staircase
   catches upstairs, at document scale. */
.v4 .v4-block > .v4-in > .v4-grid-head .v4-kicker::before {
  content: "";
  display: block;
  width: 26px; height: 2px;
  margin-bottom: 14px;
  background: var(--wine);
}

/* A hairline of wine along the top of every chapter, fading out across the
   measure so it reads as a seam rather than a border. */
.v4 .v4-block { position: relative; }
.v4 .v4-block::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(118,35,56,.34) 0%, rgba(118,35,56,.10) 34%, transparent 68%);
}
.v4 .v4-cards-block::before,
.v4 .v4-close::before,
.v4 .v4-block.v4-tight::before { content: none; }

/* The ledger's opening rule joins the same family. */
.v4 .v4-ledger {
  border-top: 0;
  background: linear-gradient(90deg, var(--wine) 0%, rgba(118,35,56,.22) 46%, transparent 88%)
              top left / 100% 2px no-repeat;
  padding-top: 2px;
}
.v4 .v4-statement {
  border-top: 0;
  background: linear-gradient(90deg, var(--wine) 0%, rgba(118,35,56,.22) 46%, transparent 88%)
              top left / 100% 2px no-repeat;
  padding-top: calc(2px + clamp(28px, 3.4vw, 44px));
}


/* ===========================================================================
   17 · CLEARANCE UNDER THE WALL
   The card row was set to padding-top:0 so it would read as attached to the
   header. Against a hard burgundy edge that reads as collision instead — the
   cards look pinned to the wall rather than placed below it. They get their
   own air back.
=========================================================================== */

.v4 .v4-cards-block { padding-top: clamp(40px, 5vw, 72px); }


/* ===========================================================================
   18 · TYPE SCALE, ONE STEP UP
   A uniform ~7% lift across the page. Applied at the end so it lands on every
   earlier declaration, and applied to the reading sizes only — the chips,
   labels and captions move with them so the relationships hold rather than
   the body text simply swelling away from its furniture.
=========================================================================== */

.v4 .v4-crumb { font-size: 15px; }
.v4 .v4-lede { font-size: clamp(18px, 1.5vw, 21.5px); }
.v4 .v4-link { font-size: 16px; }

.v4 .v4-kicker { font-size: 15px; }
.v4 .v4-grid-head h2 { font-size: clamp(30px, 3.4vw, 45px); }
.v4 .v4-intro { font-size: 18px; }
.v4 .v4-note { font-size: 15.5px; }
.v4 .v4-meta-line { font-size: 15px; }

.v4 .sr-strip-k, .v4 .sr-earlier-k { font-size: 15px; }
.v4 .sr-strip-state { font-size: clamp(26px, 2.5vw, 33px); }
.v4 .sr-strip-detail, .v4 .sr-earlier p { font-size: 16.5px; }
.v4 .sr-strip-src { font-size: 14px; }
.v4 .sr-earlier-state { font-size: 17px; }

.v4 .v4-recon-title { font-size: clamp(22px, 2.1vw, 29px); }
.v4 .sr-recon-stage { font-size: 15px; }
.v4 .sr-recon-step p { font-size: 17.5px; }
.v4 .sr-recon-reading p { font-size: clamp(19px, 1.8vw, 24.5px); }
.v4 .v4-caution { font-size: 15.5px; }

.v4 .sr-head-ref { font-size: 15px; }
.v4 .sr-front-head h3 { font-size: clamp(25px, 2.8vw, 36px); }
.v4 .sr-claim p { font-size: 17.5px; }
.v4 .sr-currency-note { font-size: 15px; }
.v4 .sr-cite { font-size: 14px; }
.v4 .sr-counter { font-size: 16px; }
.v4 .sr-counter b { font-size: 28px; }

.v4 .sr-node-id { font-size: 14px; }
.v4 .sr-node-name { font-size: clamp(20px, 1.8vw, 24px); }
.v4 .sr-node-summary { font-size: 16.5px; }
.v4 .sr-node-flag { font-size: 14.5px; }
.v4 .sr-q-k { font-size: 14.5px; }
.v4 .sr-q-cell p { font-size: 16.5px; }
.v4 .sr-empty-k { font-size: 14.5px; }
.v4 .sr-empty p { font-size: 16px; }

.v4 .sr-ledger td { font-size: 16px; }
.v4 .sr-ledger .c-pub, .v4 .sr-ledger .c-id { font-size: 15px; }
.v4 .sr-ledger .c-assertion { font-size: clamp(18px, 1.6vw, 21.5px); }
.v4 .sr-ledger .c-check { font-size: 15px; }
.v4 .sr-ledger .c-note { font-size: 15px; }
.v4 .sr-ledger .c-link a { font-size: 15.5px; }
.v4 .sr-ledger .link-kind { font-size: 14px; }
.v4 .v4-corrob h3 { font-size: 22px; }
.v4 .v4-corrob > p { font-size: 15.5px; }
.v4 .sr-corrob-row .r-id { font-size: 14.5px; }
.v4 .sr-corrob-row .r-doc { font-size: 16px; }
.v4 .sr-corrob-row .r-date { font-size: 15px; }

.v4 .pv-legend-cell p { font-size: 16.5px; }
.v4 .pv-count { font-size: 14.5px; }

.v4 .sr-module-id { font-size: 14px; }
.v4 .sr-module h3 { font-size: 20px; }
.v4 .sr-module p { font-size: 16px; }
.v4 .sr-module-state { font-size: 14.5px; }

.v4 .v4-close-grid h3 { font-size: 22px; }
.v4 .v4-close-grid p { font-size: 16.5px; }
.v4 .sr-method-step { font-size: 15.5px; }
.v4 .sr-method-note { font-size: 15.5px; }

/* the markers move with the text they sit beside */
.v4 .pv, .v4 .st, .v4 .cur,
.v4 .sr-front-state,
.v4 .sr-ledger .c-controlling { font-size: 13px; }


/* ======================= PART 3 · DARK CHAPTERS ======================= */

/* ===========================================================================
   INTELPLEXIS / SR2026 — v4 DARK CHAPTERS  (variant, for comparison only)
   ---------------------------------------------------------------------------
   Loads after sr2026.v4.css. Takes the three tinted chapters — reconciliation,
   implementation surface, provenance — from the pale burgundy wash up to the
   full depth of the hero wall, so the page alternates:

     wall · cards · WALL · statement · front · WALL · ledger · WALL · modules · wall

   Same material as the header: the seam pair on co-prime periods, the rake,
   and the same gradient ramp. What it does NOT take is the fluting and the
   staircase — those were withdrawn from the closing band for the same reason
   they stay out here: hard tonal steps behind running text are unreadable, and
   these chapters are mostly running text. The chapters get the hero's colour
   and depth; the header keeps the hero's relief.

   Everything below is a colour inversion. No block moves, and nothing in
   sr2026.v4.css is edited — delete this one link to go back.
=========================================================================== */

.v4 {
  --d-ink:   #F4EFF0;
  --d-body:  rgba(255, 255, 255, .78);
  --d-quiet: rgba(255, 255, 255, .52);
  --d-hair:  rgba(255, 255, 255, .15);
  --d-rose:  #E8A6B4;
  --d-amber: #E6C98D;
  --d-green: #9FD2B0;
}

/* --- the material ------------------------------------------------------- */

.v4 #reconciliation,
.v4 #surface,
.v4 #provenance {
  color: var(--d-ink);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 232px,
      rgba(0,0,0,.30) 232px 233px),
    repeating-linear-gradient(90deg,
      transparent 0 388px,
      rgba(255,255,255,.032) 388px 389px),
    radial-gradient(150% 135% at 34% -34%, rgba(255,255,255,.13), transparent 62%),
    linear-gradient(158deg, #5E1A28 0%, var(--arch-deep) 60%, var(--arch-black) 100%);
}
/* The rake alternates side so three dark chapters down one page do not read as
   the same slide three times. */
.v4 #surface {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 232px,
      rgba(0,0,0,.30) 232px 233px),
    repeating-linear-gradient(90deg,
      transparent 0 388px,
      rgba(255,255,255,.032) 388px 389px),
    radial-gradient(150% 135% at 76% -34%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(202deg, #5E1A28 0%, var(--arch-deep) 60%, var(--arch-black) 100%);
}

/* the chapter seam turns to light on a dark ground */
.v4 #reconciliation::before,
.v4 #surface::before,
.v4 #provenance::before {
  background: linear-gradient(90deg,
    rgba(255,255,255,.38) 0%, rgba(255,255,255,.12) 34%, transparent 68%);
}

/* --- type -------------------------------------------------------------- */

.v4 #reconciliation h2, .v4 #surface h2, .v4 #provenance h2,
.v4 #reconciliation h3, .v4 #surface h3, .v4 #provenance h3,
.v4 .v4-recon-title { color: #fff; }

.v4 #reconciliation .v4-intro, .v4 #surface .v4-intro, .v4 #provenance .v4-intro,
.v4 #reconciliation p, .v4 #surface p, .v4 #provenance p { color: var(--d-body); }

.v4 #reconciliation .v4-kicker,
.v4 #surface .v4-kicker,
.v4 #provenance .v4-kicker { color: var(--d-rose); }
.v4 #reconciliation .v4-kicker::before,
.v4 #surface .v4-kicker::before,
.v4 #provenance .v4-kicker::before { background: var(--d-rose); }

.v4 #reconciliation .v4-note,
.v4 #surface .v4-note,
.v4 #provenance .v4-note { color: var(--d-quiet); }

.v4 #reconciliation .sr-recon-stage { color: var(--d-quiet); }
.v4 #reconciliation .sr-recon-step p { color: var(--d-body); }

.v4 #reconciliation .sr-cite,
.v4 #surface .sr-cite { color: var(--d-quiet); }
.v4 #reconciliation .sr-cite a,
.v4 #surface .sr-cite a { color: var(--d-rose); }

/* --- surface chapter ---------------------------------------------------- */

.v4 #surface .sr-node-id { color: var(--d-quiet); }
.v4 #surface .sr-node-name { color: #fff; }
.v4 #surface .sr-node-btn:hover .sr-node-name { color: var(--d-rose); }
.v4 #surface .sr-node-summary { color: var(--d-body); }
.v4 #surface .sr-node-flag.drafted { color: var(--d-rose); }
.v4 #surface .sr-node-flag.empty { color: var(--d-quiet); }
.v4 #surface .sr-node-flag.empty::before { box-shadow: inset 0 0 0 1px var(--d-quiet); }
.v4 #surface .sr-q-cell { border-top-color: var(--d-hair); }
.v4 #surface .sr-q-k { color: #fff; }
.v4 #surface .sr-q-cell p { color: var(--d-body); }
.v4 #surface .sr-empty-k { color: #fff; }
.v4 #surface .sr-empty p { color: var(--d-body); }
.v4 #surface .sr-surface-note { color: var(--d-quiet); }
.v4 #surface .v4-link { color: #fff; }

/* --- provenance chapter ------------------------------------------------- */

.v4 #provenance .pv-legend-cell { border-top-color: var(--d-hair); }
.v4 #provenance .pv-legend-cell p { color: var(--d-body); }
.v4 #provenance .pv-count { color: var(--d-quiet); }

/* --- chips on a dark ground ---------------------------------------------
   The four provenance classes have to stay as distinguishable here as they
   are on paper — that distinction is the page's argument, not decoration.
   Solid white fill, rose outline, amber outline, faint white outline.
---------------------------------------------------------------------- */

.v4 #reconciliation .pv-FACT,
.v4 #surface .pv-FACT,
.v4 #provenance .pv-FACT {
  background: #fff; border-color: #fff; color: var(--arch-black);
}
.v4 #reconciliation .pv-FACT::before,
.v4 #surface .pv-FACT::before,
.v4 #provenance .pv-FACT::before { background: var(--arch-black); }

.v4 #reconciliation .pv-ANALYSIS,
.v4 #surface .pv-ANALYSIS,
.v4 #provenance .pv-ANALYSIS {
  background: rgba(255,255,255,.10); border-color: rgba(232,166,180,.55); color: var(--d-rose);
}
.v4 #reconciliation .pv-ANALYSIS::before,
.v4 #surface .pv-ANALYSIS::before,
.v4 #provenance .pv-ANALYSIS::before { background: var(--d-rose); box-shadow: none; }

.v4 #reconciliation .pv-SYNTHETIC,
.v4 #surface .pv-SYNTHETIC,
.v4 #provenance .pv-SYNTHETIC {
  background: rgba(230,201,141,.10); border-color: rgba(230,201,141,.45); color: var(--d-amber);
}
.v4 #reconciliation .pv-SYNTHETIC::before,
.v4 #surface .pv-SYNTHETIC::before,
.v4 #provenance .pv-SYNTHETIC::before { box-shadow: inset 0 0 0 1.5px var(--d-amber); background: transparent; }

.v4 #reconciliation .pv-OBSERVED,
.v4 #surface .pv-OBSERVED,
.v4 #provenance .pv-OBSERVED {
  background: transparent; border-color: rgba(255,255,255,.30); color: var(--d-quiet);
}
.v4 #reconciliation .pv-OBSERVED::before,
.v4 #surface .pv-OBSERVED::before,
.v4 #provenance .pv-OBSERVED::before { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); background: transparent; }

/* status and currency markers */
.v4 #reconciliation .st-CURRENT,
.v4 #surface .st-CURRENT {
  color: var(--d-green); border-color: rgba(159,210,176,.42); background: rgba(159,210,176,.10);
}
.v4 #reconciliation .st-SUPERSEDED,
.v4 #reconciliation .cur-SUPERSEDED,
.v4 #surface .st-SUPERSEDED {
  color: var(--d-quiet); border-color: rgba(255,255,255,.28); background: transparent;
}
.v4 #reconciliation .st-CLARIFIED,
.v4 #reconciliation .cur-CLARIFIED,
.v4 #surface .st-CLARIFIED {
  color: var(--d-amber); border-color: rgba(230,201,141,.45); background: rgba(230,201,141,.10);
}


/* ===========================================================================
   2 · SECOND PASS ON THE DARK CHAPTERS
   Two things only show up once there is real text on the wall: the seams were
   loud enough to compete with the copy, and body text at .78 white looks
   correct next to a heading but reads as dimmed once a whole chapter is set
   in it. The seams stay — they are what makes it a wall — but they drop to a
   trace, and the type goes properly bright.
=========================================================================== */

/* 2.1  The seams recede behind the words.
   Down from .30 / .032 to a fifth of that, and the panel periods widened so
   fewer land inside the measure. Still legible as panel joints when you look
   for them; no longer visible when you are reading. */
.v4 #reconciliation,
.v4 #provenance {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 344px,
      rgba(0,0,0,.11) 344px 345px),
    repeating-linear-gradient(90deg,
      transparent 0 571px,
      rgba(255,255,255,.020) 571px 572px),
    radial-gradient(150% 135% at 34% -34%, rgba(255,255,255,.13), transparent 62%),
    linear-gradient(158deg, #5E1A28 0%, var(--arch-deep) 60%, var(--arch-black) 100%);
}
.v4 #surface {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 344px,
      rgba(0,0,0,.11) 344px 345px),
    repeating-linear-gradient(90deg,
      transparent 0 571px,
      rgba(255,255,255,.020) 571px 572px),
    radial-gradient(150% 135% at 76% -34%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(202deg, #5E1A28 0%, var(--arch-deep) 60%, var(--arch-black) 100%);
}

/* 2.2  The words go bright.
   Running copy on a saturated ground needs more than it does on paper — the
   hue eats contrast that a neutral grey would not. */
.v4 {
  --d-body:  rgba(255, 255, 255, .93);
  --d-quiet: rgba(255, 255, 255, .70);
  --d-hair:  rgba(255, 255, 255, .20);
}
.v4 #reconciliation .v4-intro, .v4 #surface .v4-intro, .v4 #provenance .v4-intro,
.v4 #reconciliation .sr-recon-step p,
.v4 #surface .sr-node-summary,
.v4 #surface .sr-q-cell p,
.v4 #provenance .pv-legend-cell p { color: rgba(255,255,255,.94); }

.v4 #surface .sr-node-id,
.v4 #reconciliation .sr-recon-stage { color: rgba(255,255,255,.72); }

.v4 #reconciliation .sr-cite,
.v4 #surface .sr-cite,
.v4 #provenance .pv-count,
.v4 #surface .sr-node-flag.empty { color: rgba(255,255,255,.68); }

.v4 #reconciliation .v4-note,
.v4 #surface .v4-note,
.v4 #provenance .v4-note,
.v4 #surface .sr-surface-note { color: rgba(255,255,255,.74); }

.v4 #surface .sr-empty p { color: rgba(255,255,255,.80); }


/* 2.3  The signature reads.
   At -.62em with a 5.5% stroke the wordmark was a rumour rather than a mark.
   Raised so the letterforms clear the copy above them, and the stroke taken
   up to where it actually registers — still an outline, still behind
   everything, but now legible as INTELPLEXIS. */
.v4 .v4-ghost--close {
  bottom: -.34em;
  font-size: clamp(92px, 13.5vw, 190px);
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: rgba(255,255,255,.22);
}
@supports not (-webkit-text-stroke: 1px red) {
  .v4 .v4-ghost--close { color: rgba(255,255,255,.10); }
}


/* ===========================================================================
   PART 3 · ADDENDUM — the closing wordmark sits whole
   Half-clipping the letterforms was meant to read as a signature running off
   the edge. It does not: cut at that height an I reads as a T and an S breaks
   apart, so the word came out as TNTELPLEXTS. A mark that has to be decoded
   is not a mark. The band is given the room and the wordmark sits complete
   inside it, aligned to the same gutter as the columns above so it reads as
   placed rather than as overflow.
=========================================================================== */

.v4 .v4-close {
  padding-bottom: calc(var(--rhythm) + clamp(86px, 9.5vw, 160px));
}
.v4 .v4-ghost--close {
  left: var(--gut);
  right: auto;
  bottom: clamp(30px, 3.4vw, 54px);
  font-size: clamp(58px, 10.5vw, 146px);
  letter-spacing: .02em;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: rgba(255,255,255,.24);
}
@media (max-width: 700px) {
  .v4 .v4-close { padding-bottom: calc(var(--rhythm) + 64px); }
  .v4 .v4-ghost--close { font-size: clamp(34px, 10vw, 52px); bottom: 26px; }
}