/* ---------- Ledger sheet, rebuilt on the Industry design system ----------
 * The ledger class vocabulary (masthead, bands, lrow, interludes, loop,
 * verticals, CTA, trace footer) is unchanged so every page in the repo keeps
 * working untouched. What changed is what those classes are made OF: the
 * twelve ledger tokens below are now derived from css/industry.css rather
 * than declared as warm-paper hexes, so one sheet retints the whole site and
 * the dark variant flows through for free.
 *
 * Link order matters: css/industry.css FIRST, then this file. Industry owns
 * the tokens and the .btn/.card/.tag/.input/.seg/.table/.dialog components;
 * this file owns the editorial page furniture and the shape overrides at the
 * bottom that square off the ledger's pills and rounded corners.
 *
 * The old Fraunces / Space Grotesk / JetBrains Mono @font-face blocks are
 * gone: nothing references them any more, so keeping them cost a fetch for
 * fonts no rule uses. The files stay in fonts/ for the archived explorations.
 */

/* ---------- Tokens: the ledger names, Industry values ---------- */
:root{
  --paper:var(--color-bg);
  --paper-deep:var(--color-surface);
  --ink:var(--color-text);
  --ink-soft:color-mix(in srgb,var(--color-text) 64%,transparent);
  --signal:var(--color-accent);           /* large/bold display use */
  --signal-ink:var(--color-accent-700);   /* AA-safe accent for small text */
  --pine:var(--color-accent-700);
  --rule:var(--color-divider);
  --rule-strong:color-mix(in srgb,var(--color-text) 45%,transparent);
  /* Industry pairs Barlow Condensed headings over Barlow body. The ledger's
     three roles collapse onto that pair: display and the tabular log rows both
     take Condensed (the artboards set log timestamps in Condensed with
     tabular-nums), body text takes Barlow. */
  --serif:var(--font-heading);
  --grot:var(--font-body);
  --mono:var(--font-heading);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--grot);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--pine);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--signal-ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* ---------- Masthead ---------- */
.masthead{
  border-bottom:3px solid var(--ink);
  padding-top:clamp(24px,4vw,48px);
  position:relative;
}
.mast-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:10px;border-bottom:1px solid var(--rule-strong);
}
.lang-switch{white-space:nowrap}
.lang-switch a{color:var(--pine);font-weight:600}
.lang-switch .current{color:var(--ink);font-weight:700}
.mast-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(220px,3fr);
  gap:clamp(16px,3vw,48px);
  align-items:end;
  padding:clamp(24px,4vw,52px) 0 clamp(28px,4vw,56px);
}
.issue-no{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:900;
  font-variation-settings:"opsz" 144;
  font-size:clamp(5.2rem,15vw,13rem);
  line-height:.82;
  letter-spacing:-.03em;
  color:var(--ink);
}
.issue-no em{font-style:normal;color:var(--signal)}
.mast-title{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(.85rem,1.6vw,1.05rem);
  letter-spacing:.34em;text-transform:uppercase;
  margin-top:clamp(10px,1.5vw,20px);
}
.mast-title .dash{color:var(--signal)}
.mast-meta{
  font-family:var(--mono);font-size:.78rem;line-height:1.75;
  color:var(--ink-soft);
  border-left:2px solid var(--signal);
  padding-left:16px;
  transform:translateY(-6px);
}
.mast-meta strong{color:var(--ink);font-weight:600}
.mast-meta dt{float:left;clear:left;width:7.5em}
.mast-meta dd{margin:0 0 0 8em}
.sim{color:var(--signal-ink);font-size:.92em;border-bottom:1px dotted currentColor}

/* ---------- Live trace strip (hero) ---------- */
.trace-strip{
  border-top:1px solid var(--rule-strong);
  background:var(--paper-deep);
}
.trace-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 0;border-bottom:1px dashed var(--rule-strong);
}
.trace-head .live-dot{
  display:inline-block;width:.55em;height:.55em;border-radius:0;
  background:var(--pine);vertical-align:baseline;margin-right:.5em;
}
.trace-list{
  list-style:none;
  font-family:var(--mono);font-size:.8rem;line-height:1.9;
  max-height:15em;overflow:hidden;
  padding:8px 0;
}
.trace-list li{
  display:flex;gap:1.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink);
}
.trace-list .ts{color:var(--ink-soft);flex:none}
.trace-list .ag{color:var(--pine);font-weight:600;flex:none;width:7.5ch}
.trace-list .ms{overflow:hidden;text-overflow:ellipsis}
.trace-list li.fresh{animation:tracein .9s ease both}
/* Slide-in only: no opacity leg. A fading row drops text contrast below AA at
   mid-animation and makes automated a11y audits non-deterministic (sprint 78);
   opacity animation adds nothing the slide doesn't already deliver. */
@keyframes tracein{from{transform:translateY(-6px)}to{transform:none}}

/* ---------- Generic band rhythm ---------- */
.band{padding:clamp(48px,7vw,104px) 0;position:relative}
.band-rule{border-top:3px solid var(--ink)}

/* ---------- Ledger bands ---------- */
.ledger-band{background:var(--paper)}
.ledger-kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,2.5vw,30px);
}
.ledger-kicker::after{content:"";flex:1;height:1px;background:var(--rule-strong)}
.ledger-table{list-style:none;border-top:2px solid var(--ink)}
.lrow{
  display:grid;
  grid-template-columns:9ch minmax(64px,10ch) minmax(0,1fr) auto;
  gap:0 clamp(10px,2vw,26px);
  align-items:baseline;
  font-family:var(--mono);font-size:.82rem;line-height:1.5;
  padding:11px 0;
  border-bottom:1px solid var(--rule);
}
.lrow:nth-child(even){background:color-mix(in srgb,var(--color-text) 2.8%,transparent)}
.lrow .l-ts{color:var(--ink-soft)}
.lrow .l-ag{color:var(--pine);font-weight:600;text-transform:uppercase;font-size:.68rem;letter-spacing:.08em}
.lrow .l-ms{color:var(--ink);min-width:0}
.lrow.reply{padding-left:calc(9ch + clamp(10px,2vw,26px))}
.lrow.reply .l-ms::before{content:"↳ ";color:var(--ink-soft)}
.badge{
  justify-self:end;align-self:center;
  font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:0;
  padding:2px 10px;white-space:nowrap;
}
.badge.ok{color:var(--pine)}
.badge.hold{color:var(--signal-ink);border-style:dashed}
@media (max-width:720px){
  .lrow{grid-template-columns:8ch minmax(0,1fr) auto}
  .lrow .l-ag{display:none}
  .badge{grid-column:2 / -1;justify-self:start}
}

/* ---------- Editorial interludes ---------- */
.interlude{
  background:var(--paper);
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(24px,4vw,72px);
  align-items:start;
}
.interlude.push-right{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.interlude.push-right .int-body{order:2}
.interlude.push-right .int-side{order:1}
.int-side{position:relative;padding-top:clamp(6px,1vw,14px)}
.int-no{
  font-family:var(--serif);font-variation-settings:"opsz" 144;font-weight:900;
  font-size:clamp(3.4rem,6vw,5.4rem);line-height:.9;color:var(--signal);
}
.int-label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:8px;
}
.int-body h2,.int-body h3{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:640;
  font-variation-settings:"opsz" 60;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.12;letter-spacing:-.01em;
  max-width:22ch;
}
.int-body h3{font-size:clamp(1.35rem,2.4vw,1.9rem)}
.int-body p{margin-top:1em;color:var(--ink);max-width:58ch}
.int-body p.lede{font-size:1.12rem;color:var(--ink)}
.pullquote{
  margin-top:clamp(22px,3vw,36px);
  border-left:3px solid var(--signal);
  padding-left:clamp(14px,2vw,26px);
  font-family:var(--serif);font-style:italic;font-weight:480;
  font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.35;
  max-width:34ch;color:var(--ink);
}
.pullquote cite{
  display:block;margin-top:.7em;font-family:var(--mono);font-style:normal;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- Loop (how it works) ---------- */
.loop-index{list-style:none;counter-reset:l;border-top:2px solid var(--ink)}
.loop-row{
  counter-increment:l;
  display:grid;
  grid-template-columns:minmax(56px,7ch) minmax(140px,3fr) minmax(0,8fr);
  gap:clamp(12px,2.5vw,40px);
  align-items:baseline;
  padding:clamp(16px,2.4vw,26px) 0;
  border-bottom:1px solid var(--rule);
}
.loop-row:nth-child(even){transform:translateX(clamp(0px,2vw,28px))}
.loop-row::before{
  content:counter(l,decimal-leading-zero);
  font-family:var(--serif);font-weight:900;font-variation-settings:"opsz" 144;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1;color:var(--signal);
}
.loop-row h3{font-family:var(--serif);font-weight:640;font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:-.01em}
.loop-row p{font-size:.98rem;color:var(--ink);max-width:52ch}
@media (max-width:720px){
  .loop-row{grid-template-columns:minmax(44px,5ch) minmax(0,1fr)}
  .loop-row p{grid-column:2}
  .loop-row:nth-child(even){transform:none}
}

/* ---------- Verticals ledger index ---------- */
.vert-index{list-style:none;counter-reset:v;border-top:2px solid var(--ink)}
.vrow{
  counter-increment:v;
  display:flex;align-items:baseline;gap:clamp(10px,2vw,24px);
  padding:clamp(14px,2vw,22px) 0;
  border-bottom:1px solid var(--rule);
}
.vrow:nth-child(odd){transform:translateX(clamp(0px,3vw,44px))}
.vrow::before{
  content:counter(v,decimal-leading-zero);
  font-family:var(--serif);font-weight:900;font-variation-settings:"opsz" 144;
  font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;color:var(--ink);
}
.vname{font-family:var(--serif);font-weight:640;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.01em;flex:none}
.vname a{color:var(--ink);text-decoration:none}
.vname a:hover{color:var(--signal-ink);text-decoration:underline}
.vdots{flex:1;border-bottom:2px dotted var(--rule-strong);transform:translateY(-6px);min-width:24px}
.vdesc{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);max-width:34ch;text-align:right}
@media (max-width:720px){
  .vrow{flex-wrap:wrap}
  .vrow:nth-child(odd){transform:none}
  .vdesc{text-align:left}
}

/* ---------- Dark proof band ---------- */
.darkband{background:var(--ink);color:var(--paper)}
.darkband .ledger-kicker{color:color-mix(in srgb,var(--color-bg) 62%,transparent)}
.darkband .ledger-kicker::after{background:color-mix(in srgb,var(--color-bg) 40%,transparent)}
.statgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(28px,4vw,64px);
}
.stat .n{
  font-family:var(--serif);font-variation-settings:"opsz" 144;font-weight:900;
  font-size:clamp(3.6rem,8vw,6.8rem);line-height:.9;color:var(--signal);
  letter-spacing:-.02em;
}
.stat .cap{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-bg) 75%,transparent);margin-top:12px;max-width:26ch;
}
.stat .cap .sim{color:var(--color-accent-300);border-bottom-color:var(--color-accent-300)}
.darkband .simtag{
  display:inline-block;margin-top:clamp(24px,3vw,40px);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-bg) 85%,transparent);border:1px dashed color-mix(in srgb,var(--color-bg) 45%,transparent);
  border-radius:0;padding:4px 14px;
}

/* ---------- Pointer band (pricing) ---------- */
.pointer-band{background:var(--paper-deep)}
.pointer-inner{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 40px;justify-content:space-between;
}
.pointer-copy{max-width:46ch}
.pointer-copy h2{
  font-family:var(--serif);font-weight:640;font-variation-settings:"opsz" 60;
  font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.15;letter-spacing:-.01em;
}
.pointer-links{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pill{
  display:inline-block;font-family:var(--mono);font-weight:600;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border:2px solid var(--ink);border-radius:0;padding:11px 22px;color:var(--ink);
  transition:transform .18s ease,box-shadow .18s ease;
}
.pill:hover,.pill:focus-visible{transform:translateY(-3px);box-shadow:0 6px 0 color-mix(in srgb,var(--color-text) 25%,transparent)}

/* ---------- Trust ledger ---------- */
.trust-table{list-style:none;border-top:2px solid var(--ink)}
.trow{
  display:grid;grid-template-columns:minmax(160px,4fr) minmax(0,8fr);
  gap:clamp(12px,3vw,56px);
  padding:clamp(16px,2.4vw,28px) 0;border-bottom:1px solid var(--rule);
}
.trow:nth-child(even){padding-left:clamp(0px,3vw,48px)}
.trow h3{font-family:var(--serif);font-weight:640;font-size:clamp(1.1rem,1.9vw,1.45rem);letter-spacing:-.01em}
.trow p{color:var(--ink);max-width:62ch;font-size:.99rem}
@media (max-width:720px){
  .trow{grid-template-columns:1fr}
  .trow:nth-child(even){padding-left:0}
}

/* ---------- Offset signal CTA ---------- */
.cta-band{
  margin-top:clamp(-30px,-2vw,-12px);
  background:var(--signal);
  color:var(--color-bg); /* AA on signal: var(--ink) measures 4.46 < 4.5 (sprint 78) */
  position:relative;z-index:2;
}
.cta-inner{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
  padding:clamp(48px,7vw,96px) 0;
}
.cta-mark{
  font-family:var(--serif);font-weight:900;font-variation-settings:"opsz" 144;
  font-size:clamp(6rem,14vw,12rem);line-height:.7;
  transform:rotate(-8deg) translateY(-6%);
  user-select:none;
}
.cta-copy h2{
  font-family:var(--serif);font-weight:640;font-variation-settings:"opsz" 60;
  font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.01em;
  max-width:20ch;
}
.cta-copy p{margin-top:1em;max-width:46ch;font-weight:500}
.cta-actions{margin-top:clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-weight:600;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 30px;border-radius:0;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:hover,.btn:focus-visible{color:var(--paper);transform:translateY(-3px);box-shadow:0 8px 0 color-mix(in srgb,var(--color-text) 35%,transparent)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--ink);box-shadow:0 8px 0 color-mix(in srgb,var(--color-text) 25%,transparent)}
.cta-note{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;margin-top:14px;color:color-mix(in srgb,var(--color-text) 80%,transparent)}
/* Signal-band AA overrides (sprint 78): every text inside .cta-band must hold
   >=4.5:1 on var(--color-accent). Scoped variant arms re-style their own band downstream.
   scripts/contrast_gate.py enforces the audited pairs on every smoke run. */
.cta-band a:not(.btn){color:var(--color-bg);text-decoration-thickness:1.5px}
.cta-band a:not(.btn):hover{color:var(--color-bg);text-decoration-thickness:2.5px}
.cta-band .btn.ghost{color:var(--color-bg);border-color:var(--color-bg)}
.cta-band .cta-note{color:var(--color-bg)}
@media (max-width:820px){
  .cta-inner{grid-template-columns:1fr}
  .cta-mark{transform:rotate(-8deg)}
}

/* ---------- Footer as activity trace ---------- */
.trace-footer{border-top:3px solid var(--ink);background:var(--paper-deep)}
.tf-strip{
  font-family:var(--mono);font-size:.76rem;line-height:2.05;
  padding:18px 0;border-bottom:1px solid var(--rule-strong);
  overflow:hidden;
}
.tf-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft)}
.tf-line b{color:var(--pine);font-weight:600}
.tf-line .ok{color:var(--pine)}
.tf-line .hl{color:var(--signal-ink)}
.tf-bottom{
  display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:baseline;
  padding:22px 0 30px;
  font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);
}
.tf-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.tf-nav a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}
.tf-colophon{max-width:52ch}

/* ---------- Reveal-on-scroll (motion-safe only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}

@media (max-width:820px){
  .mast-grid,.interlude,.interlude.push-right{grid-template-columns:1fr}
  .interlude.push-right .int-body{order:1}
  .interlude.push-right .int-side{order:2}
}

/* ==========================================================================
   Industry shape layer.
   The rules above still carry the ledger's newspaper geometry: pill buttons,
   999px badges, offset drop shadows, an ink-inverted proof band and a solid
   signal CTA field. Industry is a wireframe system — square corners, hairline
   borders, states from the accent ramp, one solid accent object per board —
   so this block squares them off. It is deliberately at the end of the file:
   everything here is an override of a rule declared earlier.
   ========================================================================== */

/* — buttons: square, hairline, no offset shadow.
     Industry's .btn in industry.css is the reference; the ledger's own .btn
     is the one it has to defeat, so the properties are repeated rather than
     inherited. — */
.btn,.pill{
  border-radius:0;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  letter-spacing:.06em;
  transition:background .12s linear,color .12s linear;
}
.btn:hover,.btn:focus-visible,.pill:hover,.pill:focus-visible{
  transform:none;box-shadow:none;
}
.btn{
  background:var(--color-accent);color:var(--color-bg);
  border:1px solid var(--color-accent);padding:13px 26px;
}
.btn:hover,.btn:focus-visible{background:var(--color-accent-600);color:var(--color-bg)}
.btn:active{background:var(--color-accent-700)}
.btn.ghost,.pill{
  background:transparent;color:var(--color-text);
  border:1px solid var(--color-divider);
}
.btn.ghost:hover,.btn.ghost:focus-visible,.pill:hover,.pill:focus-visible{
  background:color-mix(in srgb,var(--color-text) 7%,transparent);color:var(--color-text);
}

/* — badges: the artboard's three guardrail outcomes. Passed is a hairline
     outline, held is a dashed accent tint, escalated is a solid accent field
     with the type reversed to the ground. — */
.badge{
  border-radius:0;font-family:var(--font-heading);
  border:1px solid var(--color-divider);
  color:color-mix(in srgb,var(--color-text) 82%,transparent);
  padding:2px 9px;
}
.badge.ok{color:color-mix(in srgb,var(--color-text) 82%,transparent);border-color:var(--color-divider)}
.badge.hold{
  background:var(--color-accent-100);color:var(--color-accent-900);
  border:1px dashed var(--color-accent-700);
}
.badge.esc,.badge.escalated{
  background:var(--color-accent-800);color:var(--color-bg);border-color:var(--color-accent-800);
}

/* — the live dot is a square registration mark, not a circle — */
.trace-head .live-dot{border-radius:0;background:var(--color-accent-700)}

/* — display numerals: Barlow Condensed has no optical-size axis, so the
     ledger's "opsz" variation settings are inert here. Drop them rather than
     leave dead declarations, and let the weight land on the 700 face. — */
.issue-no,.int-no,.loop-row::before,.vrow::before,.stat .n,.cta-mark{
  font-variation-settings:normal;font-weight:700;
}

/* — zebra striping reads as noise against a wireframe grid — */
.lrow:nth-child(even){background:transparent}
.lrow:hover{background:color-mix(in srgb,var(--color-accent) 6%,transparent)}

/* — the proof band and the CTA band were the ledger's two reversed fields.
     Industry allows exactly one: the accent's deep step carrying paper type.
     Both now use it, so they stay legible when the dark variant flips the
     ground underneath them. — */
.darkband{background:var(--color-accent-900);color:var(--color-bg)}
.darkband .ledger-kicker{color:color-mix(in srgb,var(--color-bg) 70%,transparent)}
.darkband .ledger-kicker::after{background:color-mix(in srgb,var(--color-bg) 40%,transparent)}
.stat .n{color:var(--color-bg)}
.stat .cap{color:color-mix(in srgb,var(--color-bg) 78%,transparent)}
.stat .cap .sim{color:var(--color-bg);border-bottom-color:var(--color-bg)}
.darkband .simtag{
  border-radius:0;color:color-mix(in srgb,var(--color-bg) 88%,transparent);
  border:1px dashed color-mix(in srgb,var(--color-bg) 45%,transparent);
}

.cta-band{background:var(--color-accent-900);color:var(--color-bg);margin-top:0}
.cta-band a:not(.btn),.cta-band .cta-note{color:var(--color-bg)}
.cta-band a:not(.btn):hover{color:var(--color-bg)}
.cta-band .btn{background:var(--color-bg);color:var(--color-accent-900);border-color:var(--color-bg)}
.cta-band .btn:hover,.cta-band .btn:focus-visible{
  background:color-mix(in srgb,var(--color-bg) 85%,transparent);color:var(--color-accent-900);
}
.cta-band .btn.ghost{
  background:transparent;color:var(--color-bg);
  border-color:color-mix(in srgb,var(--color-bg) 55%,transparent);
}
.cta-band .btn.ghost:hover,.cta-band .btn.ghost:focus-visible{
  background:color-mix(in srgb,var(--color-bg) 14%,transparent);color:var(--color-bg);
}
/* The rotated mark is a Fraunces flourish; on a condensed grotesk it reads as
   a slipped glyph rather than a device. Set it upright. */
.cta-mark{transform:none;opacity:.35}

/* — rules: the ledger drew 2-3px ink rules everywhere. Industry is hairline;
     keep the heavy rule only where it separates whole bands. — */
.ledger-table,.loop-index,.vert-index,.trust-table{border-top:1px solid var(--color-text)}
.masthead{border-bottom:1px solid var(--color-text)}
.band-rule{border-top:1px solid var(--color-text)}
.trace-footer{border-top:1px solid var(--color-text)}
.mast-meta{border-left:1px solid var(--color-accent-700)}
.pullquote{border-left:2px solid var(--color-accent-300)}

/* — the ledger nudged alternating rows sideways for a hand-set look. A
     modular grid wants equal cells and a straight left edge. — */
.loop-row:nth-child(even),.vrow:nth-child(odd){transform:none}
.trow:nth-child(even){padding-left:0}

/* — blueprint cards on the home page.
     Three lists that were ruled rows (the loop, the house rules) are cards on
     a modular grid in the Industry direction, so .nx-cards re-lays the same
     markup rather than a second set of elements being introduced for it. — */
.nx-cards{
  display:grid;gap:18px;border-top:0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(18px,2.5vw,28px);
}
.nx-cards>li{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(16px,2vw,22px);border-bottom:0;
  grid-template-columns:none;transform:none;
}
.nx-cards .loop-row::before,.nx-cards .vrow::before{
  font-size:clamp(1.6rem,3vw,2.4rem);color:var(--color-accent-700);
}
.nx-cards>li h3{font-size:clamp(1.1rem,1.8vw,1.4rem);max-width:none}
.nx-cards>li p{max-width:none;font-size:.95rem}
.trust-table.nx-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* — the hero trace is a framed figure, not a bleeding strip — */
.trace-strip{background:transparent;border-top:0;padding-bottom:clamp(18px,3vw,30px)}
.trace-figure{padding:2px 14px 10px;margin-top:clamp(14px,2vw,22px)}
.trace-figure .trace-head{border-bottom:1px dashed var(--color-divider)}

/* — the closing CTA panel: a drawn object reversed out of the accent field,
     so its hairlines and registration marks are paper on steel — */
.cta-band .cta-inner{
  padding:clamp(28px,4vw,56px);
  border-color:color-mix(in srgb,var(--color-bg) 45%,transparent);
}
.cta-band .blueprint>.corner{color:color-mix(in srgb,var(--color-bg) 70%,transparent)}

/* — the editorial interludes are their own band, so they carried no gutter
     and sat flush against the viewport edge. Industry's modular grid wants
     every cell on the same left edge as the ruled tables above and below it,
     which is .wrap's gutter. — */
.interlude{padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
.interlude>.int-side,.interlude>.int-body{min-width:0}

/* — the hero trace badges are drawn by an inline <script> in index.html that
     appends its own <style> to <head> at runtime, so it lands after this
     sheet and wins on source order. Editing that script is not an option:
     its sha256 is pinned in the CSP script-src allowlist in _headers, which
     is generated from another repo — changing a byte would get the whole
     inline block blocked in production. So the shape is corrected here with
     a more specific selector instead. The script reads --pine/--signal-ink
     at runtime, and those now resolve to Industry accents, so only the
     999px radius and the ring geometry need overriding. — */
.trace-strip .trace-list li::after{
  border-radius:0;
  font-family:var(--font-heading);
  padding:2px 9px;
}

/* — shared page chrome.
     The header/nav/footer rules lived only in ledger-support.css,
     ledger-landing.css and ledger-blog.css, so pricing.html and
     es/pricing.html — which load neither — rendered their nav as a bulleted
     list with no styling at all. (Pre-existing: it reproduces on the pages
     before this redesign.) The chrome belongs in the sheet every page
     loads, so it is defined here once, in the Industry direction. The three
     page-type sheets still declare their own copies; they say the same
     thing and simply win on order. — */
header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--color-bg) 92%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-divider);
}
header.nx-head{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent}
.container{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.container.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:58px}
/* The brand lockup on the .logo pages is the same lockup as .nx-brand in
   industry.css — condensed 700, uppercase at .08em, beside a flat solid accent
   square. It used to be mixed-case at .01em here and uppercase-in-mono in
   ledger-support.css, so the wordmark changed shape depending on which
   secondary sheet a page happened to load. Keep this in step with .nx-brand. */
.logo{
  font-family:var(--font-heading);font-weight:700;font-size:17px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text);text-decoration:none;
  display:flex;align-items:center;gap:10px;
}
.logo:hover{color:var(--color-text)}
.logo-mark{
  width:13px;height:13px;border-radius:0;flex:none;
  background:var(--color-accent-700);
}
header nav ul{list-style:none;display:flex;align-items:center;gap:22px;margin:0;padding:0}
header nav a{
  font-family:var(--font-heading);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  color:color-mix(in srgb,var(--color-text) 78%,transparent);
}
header nav a:hover,header nav a.active{color:var(--color-text)}
header nav a.active{box-shadow:0 2px 0 var(--color-accent)}
/* ui-auditor 9/4 (P1): the old rule deleted the header nav below 900px with
   no menu toggle — 5 of the top-6 pages had no visible site nav on mobile.
   The nav is now a wrapping row instead of display:none. */
@media (max-width:900px){
  header .container.nav{height:auto;min-height:58px;flex-wrap:wrap;padding:8px 0}
  header nav ul{display:flex;flex-wrap:wrap;gap:10px 16px}
}
footer{border-top:1px solid var(--color-divider);padding:clamp(24px,4vw,44px) 0}
footer .container{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--font-heading);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 70%,transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   HOME MASTHEAD — parity with the Industry "Home Page" artboard.

   The first pass retinted the existing ledger masthead; these rules replace
   its shape with the artboard's. Every value below is copied from that
   board's own inline styles rather than eyeballed, so the two stay in step.

   Scoped to .masthead-home and its descendants: pricing.html also carries
   .masthead and keeps its own hero.
   ══════════════════════════════════════════════════════════════════════ */

/* — The standing rule above the nav. Full-bleed now that it has been lifted
     out of .masthead > .wrap, so it reads as the paper's own top line. */
.mast-top{
  display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;
  padding:10px clamp(14px,4vw,40px);margin:0;
  border-bottom:1px solid var(--color-divider);
  font-family:var(--font-body);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 74%,transparent);
}
.mast-top > span:nth-child(2){margin-left:auto}

/* The nav pins under the strip — but only while it is a single row. Below the
   wrap threshold it becomes two or three rows and a pinned copy would eat a
   quarter of a small screen, so there it scrolls away. (Ported from the
   artboard, which carries the same guard for the same reason.) */
body:has(.masthead-home) .nx-head{position:sticky;top:0;z-index:50;
  background:var(--color-bg);border-bottom:1px solid var(--color-text)}
@media (max-width:700px){
  body:has(.masthead-home) .nx-head{position:static}
}

.masthead-home{padding-top:0;border-bottom:1px solid var(--color-text)}
.masthead-home .wrap{max-width:1600px}
.masthead-home > .wrap{padding-top:clamp(28px,5vw,60px);padding-bottom:clamp(24px,4vw,44px)}

.mast-grid{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(24px,4vw,56px);padding:0;
}
.mast-grid > div:first-child{flex:1 1 min(100%,430px)}

/* № 001 is a kicker over the title, not the display object it used to be. */
.issue-no{
  font-family:var(--font-heading);font-weight:600;
  font-size:13px;line-height:1;letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-accent-700);margin:0;
}
.mast-title{
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(44px,8.5vw,116px);line-height:.93;
  letter-spacing:.005em;text-transform:uppercase;
  margin:8px 0 0;color:var(--color-text);
}

/* Spec table: hairline rows in two columns, not a bar-and-indent list. */
.mast-meta{
  flex:0 1 340px;min-width:0;margin:0;transform:none;padding-left:0;
  display:grid;grid-template-columns:auto 1fr;gap:0;
  border-left:0;border-top:1px solid var(--color-text);
  font-family:var(--font-body);font-size:13.5px;line-height:1.5;
  color:var(--color-text);
}
.mast-meta dt{
  float:none;width:auto;white-space:nowrap;
  padding:7px 14px 7px 0;border-bottom:1px solid var(--color-divider);
  font-family:var(--font-heading);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 74%,transparent);
}
.mast-meta dd{margin:0;padding:7px 0;border-bottom:1px solid var(--color-divider)}

/* — Hero trace. The rows are built by a CSP-hash-pinned inline script whose
     bytes cannot change, and that script appends its own <style> after the
     stylesheets; these selectors outrank it on specificity rather than order. */
.masthead-home .trace-figure{padding:0;margin-top:clamp(26px,4vw,46px)}
.masthead-home .trace-head{
  padding:10px 16px;border-bottom:1px solid var(--color-divider);
  font-size:11.5px;letter-spacing:.12em;
  color:color-mix(in srgb,var(--color-text) 74%,transparent);
}
.masthead-home .trace-list{
  max-height:none;overflow:visible;padding:0;
  font-family:var(--font-body);font-size:14px;line-height:1.5;
}
.masthead-home .trace-list li{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  white-space:normal;overflow:visible;
  padding:11px 2px;border-bottom:1px solid var(--color-divider);
}
.masthead-home .trace-list li:last-child{border-bottom:0}
.masthead-home .trace-list .ts{
  flex:0 0 74px;font-family:var(--font-heading);
  font-variant-numeric:tabular-nums;letter-spacing:.05em;
  color:color-mix(in srgb,var(--color-text) 74%,transparent);
}
.masthead-home .trace-list .ag{
  flex:0 0 62px;width:auto;font-family:var(--font-heading);font-weight:400;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-accent-700);
}
.masthead-home .trace-list .ms{flex:1 1 300px;min-width:220px;overflow:visible;text-overflow:clip}
.masthead-home .trace-list li::after{
  border-radius:0;padding:2px 9px;align-self:center;white-space:nowrap;
  font-family:var(--font-heading);font-size:11px;letter-spacing:.09em;
  border:1px solid var(--color-divider);
  color:color-mix(in srgb,var(--color-text) 82%,transparent);
}
/* Held work is the one tinted object in the strip — the artboard tints the
   whole row, not just its badge, so a hold is legible at a glance. */
.masthead-home .trace-list li[data-badge$='🛑'],
.masthead-home .trace-list li[data-badge='hold-as-draft']{
  background:color-mix(in srgb,var(--color-accent) 4%,transparent);
}
.masthead-home .trace-list li[data-badge$='🛑']::after,
.masthead-home .trace-list li[data-badge='hold-as-draft']::after{
  border:1px dashed var(--color-accent-700);
  color:var(--color-accent-900);
  background:var(--color-accent-100);
}