/* ===========================================================================
   ledger.css — the P&L as design language
   ===========================================================================

   Loaded AFTER style.css, and only by the pages that have opted in. That is
   deliberate: 88% of this site's CSS lives in page <style> blocks (236 KB
   inline against 31 KB in style.css), so rewriting style.css would have
   changed almost nothing on the pages that matter while silently restyling
   the 36 pages that do depend on it. This file is additive instead, and a
   page joins the new language by linking it and dropping its inline block.

   Two rules this file obeys, both load-bearing:

   1. It restyles the nav's APPEARANCE only. The layout and visibility
      mechanics live in style.css:897+ and encode seven separately-diagnosed
      mobile defects (a closed panel must not take keyboard focus; a submenu
      must push rather than overlay; the hamburger must not be display:none).
      Nothing here touches position, visibility, right or display on nav
      elements. See tools/README.md lines 39-52.

   2. All nav CSS lives HERE, never in a page <style> block.
      tools/fix_mobile_nav_css.py inspects page-local CSS for three
      signatures and appends its own 1024px override when it finds one. A
      page with no <style> block matches none of them and is skipped, which
      is how the new breakpoints survive CI.

   Colour pairings below were measured, not assumed — ratios are recorded
   inline. tools/README.md records a button that scored accessibility 100 at
   2.03:1 because axe cannot resolve a background-image ancestor.
   =========================================================================== */


/* --- Typefaces -------------------------------------------------------------

   Self-hosted, same-origin, two files. Both are single variable fonts, so
   Archivo carries weight 400-800 AND width 62-125% in 88 KB, and Inter
   carries weight 400-700 in 47 KB. The width axis is what gives the display
   face its condensed, operating-statement set without a second download.

   This replaces a third-party chain — two preconnects, a CSS request, then
   two font fetches from fonts.gstatic.com — with two local files, so it
   should help LCP rather than cost it.

   @font-face, never @import: check_site.py's `stale` check errors on
   `@import url(...fonts.googleapis`.
   Both families are OFL-1.1; see fonts/LICENSE.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var-latin.woff2') format('woff2-variations'),
       url('fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var-latin.woff2') format('woff2-variations'),
       url('fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* --- Tokens ----------------------------------------------------------------

   Additive. --accent-gold and --accent-gold-text are NOT redefined here:
   48 pages still use them, and tools/fix_contrast.py rewrites any paired
   gold into var(--accent-gold-text), so removing that token would produce an
   undefined colour sitewide.
   -------------------------------------------------------------------------- */

:root {
  /* Ground and ink. Measured against --paper:
     --ink 16.83:1 · --ink-soft 7.47:1 · --loss 7.56:1 — all AA for body text. */
  --paper:        #FBFAF7;   /* warm off-white, the page ground */
  --paper-sunk:   #F4F1EA;   /* recessed band; --ink 15.57:1, --ink-soft 6.91:1 */
  --ink:          #1A1917;   /* near-black body text */
  --ink-soft:     #55524B;   /* secondary text, notes, attribution */

  /* Two rule weights, because that is how an operating statement reads: a
     hairline between line items, a heavy rule under a total. */
  --rule:         #A39A86;   /* row separators — 2.67:1 on paper */
  --rule-strong:  #1A1917;   /* totals and section boundaries — 16.83:1 */

  /* The loss signal. Used ONLY where something is being lost or flagged:
     a leak figure, a negative delta, a not-a-fit column. Never a CTA, never
     a heading colour, never a background for body text. The metaphor is
     bleeding profit; if red is everywhere the metaphor dies. */
  --loss:         #A3121D;   /* 7.56:1 on paper, 6.99:1 on sunk */

  --lg-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --lg-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Measured in characters so the measure holds as type scales. */
  --lg-measure:  68ch;
  --lg-gutter:   clamp(1.25rem, 5vw, 4rem);
}


/* --- Dark ------------------------------------------------------------------
   The site previously had no dark theme at all, so a browser set to auto-dark
   inverted it algorithmically and produced a muddy approximation nobody chose.
   This is the same ledger, printed on dark stock: the metaphor is unchanged,
   only the stock and the ink.

   Every pairing measured against the new ground, same thresholds as light:
     --ink 16.18:1 · --ink-soft 7.33:1 · --loss 5.14:1 (4.71:1 on sunk)
   --rule is 2.58:1, deliberately matching the light theme's 2.67:1: it is a
   separator between line items, not a control, and a hairline that outweighs
   the type it divides is louder than a ledger should be.

   The attribute selector lets a page force a theme later without a rewrite;
   with no attribute set the system preference decides.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #14130F;
    --paper-sunk:   #1E1C17;
    --ink:          #F2EFE7;
    --ink-soft:     #A8A298;
    --rule:         #5C5747;
    --rule-strong:  #F2EFE7;
    --loss:         #E4584F;
  }
}

:root[data-theme="dark"] {
  --paper:        #14130F;
  --paper-sunk:   #1E1C17;
  --ink:          #F2EFE7;
  --ink-soft:     #A8A298;
  --rule:         #5C5747;
  --rule-strong:  #F2EFE7;
  --loss:         #E4584F;
}



/* --- style.css's hardcoded whites -----------------------------------------
   style.css paints eight things a literal `white` or `#f8f9fa`. Under the
   light theme those sit within a point or two of --paper, so nobody noticed;
   under the dark theme they stayed white while the ink above them went light,
   and a measured sweep found 236 failures at 1.15:1 across thirteen pages.
   The worst is structural rather than cosmetic: section:nth-child(even)
   repaints every other section on every page.

   These are the same tokens either way, so the override is not a dark-mode
   patch -- it also removes the light theme's white-vs-paper mismatch.
   -------------------------------------------------------------------------- */

body.ledger section:nth-child(even) { background-color: var(--paper); }
body.ledger .proof-strip,
body.ledger .testimonials .pillar { background: var(--paper-sunk); }
body.ledger .dropdown-menu a:hover { background: var(--paper-sunk); }
body.ledger a.button.secondary,
body.ledger .button.secondary,
body.ledger .hero .cta-buttons a.secondary {
  background-color: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
body.ledger .mobile-menu-toggle span {
  background-color: var(--ink);
  box-shadow: none;          /* style.css:199 drop shadow; no shadows in this language */
}
/* style.css:757 paints every bare <label> with --dark-text (#2c2c2c). The quiz
   pages use bare labels for their question text, so on dark stock thirteen
   questions per page sat at 1.33:1. */
body.ledger label { color: var(--ink); }

/* The quiz pages wrap their content in .content-container, which carries no
   padding of its own, so the questions ran flush to the viewport edge. This
   predates the dark theme -- it was just as wrong in light. */
body.ledger .content-container { padding-left: var(--lg-gutter); padding-right: var(--lg-gutter); }
body.ledger .content-container .section { padding-left: 0; padding-right: 0; }
body.ledger input[type="text"],
body.ledger input[type="email"],
body.ledger input[name="name"],
body.ledger input[name="company"],
body.ledger input[name="phone"],
body.ledger input[name="location"],
body.ledger select,
body.ledger textarea {
  background-color: transparent;
  color: var(--ink);
}


/* --- Progress --------------------------------------------------------------
   A count and a line, which is how a statement reports completion: the figure
   carries the information and the rule is the ledger line being drawn. Not a
   percentage inside a bar -- "3 / 4" tells a student what is left, "75%" does
   not, and the denominator is the useful half.
   -------------------------------------------------------------------------- */

body.ledger .lg-progress { margin: 0 0 2rem; }

body.ledger .lg-progress__figure {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
body.ledger .lg-progress__done {
  font-family: var(--lg-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.ledger .lg-progress__of {
  font-family: var(--lg-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
body.ledger .lg-progress__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-left: 0.5rem;
}

body.ledger .lg-progress__track {
  height: 2px;
  background: var(--rule);
}
body.ledger .lg-progress__fill {
  height: 2px;
  background: var(--rule-strong);
  /* style.css carries a prefers-reduced-motion block, but the course pages
     are ledger-only and never link style.css, so it cannot cover this. The
     block at the end of this file does. Measured, after a test showed the
     transition still running at 240ms under reduce. */
  transition: width 240ms ease-out;
}

/* The tick is a quiet control, not a call to action: finishing a lesson is
   the student's own bookkeeping. body.ledger button (0,0,1,1) paints every
   button ink-on-paper, so this has to be scoped past it. */
body.ledger button.lg-tick {
  display: inline-block;
  width: auto;
  margin-top: 0.875rem;
  font-family: var(--lg-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
}
body.ledger button.lg-tick:hover {
  background: none;
  color: var(--ink);
  border-color: var(--rule-strong);
}
body.ledger button.lg-tick.is-done {
  color: var(--ink);
  border-color: var(--rule-strong);
}
body.ledger button.lg-tick.is-done::before {
  content: "\2713";          /* U+2713 CHECK MARK, the brief's own mark */
  margin-right: 0.4375em;
  font-weight: 700;
}
body.ledger button.lg-tick[disabled] { opacity: 0.6; cursor: default; }

/* A completed lesson in the module's own contents list. */
body.ledger .lessons-list li.is-done > a { color: var(--ink-soft); }
body.ledger .lessons-list li.is-done > a::after {
  content: "\2713";
  margin-left: 0.5em;
  font-weight: 700;
  color: var(--ink);
}

body.ledger .lg-module-count {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  margin-top: 0.375rem;
}
body.ledger .lg-module-count .lg-progress__done { font-size: 1.125rem; }
body.ledger .lg-module-count .lg-progress__of { font-size: 0.9375rem; }
body.ledger .lg-module-count .lg-progress__label { margin-left: 0.375rem; }


/* --- Direct answer ---------------------------------------------------------
   A 40-60 word answer to the page's question, set before the deep content so
   a reader (or a model deciding whether to quote the page) gets the claim
   without scrolling. Marked with a rule, not a box: it is the lead paragraph,
   not a callout bolted to the side.
   -------------------------------------------------------------------------- */
body.ledger .lg-answer {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--lg-measure);
  margin: 1.25rem 0 1.75rem;
  padding-left: clamp(0.875rem, 2vw, 1.25rem);
  border-left: 2px solid var(--rule-strong);
}

/* --- Markers ---------------------------------------------------------------
   Replaces the emoji the brief rules out, without reaching for an icon
   library it also rules out. An operating statement does not draw pictures of
   its line items: it uses an account code, a field label, and a status word.

   .lg-code   a two-letter category code in a hairline box
   .lg-field  a small-caps field label standing where a pictogram stood
   .lg-flag   a status word; --loss only where something is actually wrong
   -------------------------------------------------------------------------- */

.lg-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  padding: 0.2em 0.4em;
  font-family: var(--lg-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  white-space: nowrap;
}

.lg-field {
  display: inline-block;
  min-width: 4.5em;
  font-family: var(--lg-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lg-flag {
  display: inline-block;
  padding: 0.2em 0.5em;
  font-family: var(--lg-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}

.lg-flag--loss { color: var(--loss); border-color: var(--loss); }

/* A contact the visitor asks for, rather than one sitting in the markup for
   anything that crawls the page. Styled as a quiet control, not a CTA. */
body.ledger button.lg-reveal {
  justify-self: start;
  width: auto;
  font-family: var(--lg-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.15em 0.6em;
  cursor: pointer;
}

body.ledger button.lg-reveal:hover { border-color: var(--rule-strong); background: none; color: var(--ink); }


/* --- Base ------------------------------------------------------------------
   Overrides style.css's generic element rules. style.css loads first, so
   plain element selectors at equal specificity win by source order.
   -------------------------------------------------------------------------- */

body.ledger {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--lg-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.ledger h1,
body.ledger h2,
body.ledger h3,
body.ledger h4 {
  font-family: var(--lg-display);
  color: var(--ink);
  font-weight: 800;
  font-stretch: 85%;              /* the condensed set — the width axis at work */
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-wrap: balance;
}

body.ledger h1 { font-size: clamp(2.5rem, 7vw, 4.75rem); }
body.ledger h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 1.5rem; }
body.ledger h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 700; letter-spacing: -0.01em; }

/* style.css:118 sets `p { color: var(--medium-text) }` as a direct rule, and a
   direct rule beats an inherited colour however specific the ancestor. So the
   paper bands need this, and the ink band needs the qualified override below —
   without it, inheriting --paper silently loses and the text stays dark. */
body.ledger p { max-width: var(--lg-measure); color: var(--ink); }
body.ledger .lg-hero__sub,
body.ledger .lg-row__note,
body.ledger .lg-figure__note,
body.ledger .lg-stack__item p { color: var(--ink-soft); }

/* The skip link carries its own navy background from style.css:1250 and is
   only visible on focus. body.ledger a was repainting its text --ink over
   that navy at 1.94:1 — a keyboard-only regression no visual check would
   have surfaced, since the element sits at left: -9999px until focused. */
/* style.css:1250 parks the skip link off-screen, but the course pages,
   thank-you.html and the directory do not link style.css, so without this it
   renders as a visible "Skip to content" line above the masthead. Positioning
   belongs with the component, not with whichever stylesheet happens to load. */
body.ledger a.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  color: var(--white);
}
body.ledger a.skip-link:focus { left: 0; }
body.ledger a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Images must never be wider than their column. The pages that carried this
   rule in their own inline CSS lost it when the block was removed, and
   services.html then pushed a 1024px asset through a 375px viewport. Found by
   measuring scrollWidth, not by eye — the overflow is off-screen to the
   right. */
body.ledger img { max-width: 100%; height: auto; }
body.ledger a:hover { color: var(--loss); }

/* Every figure on the page is tabular, so columns of dollars align. */
body.ledger .lg-num,
body.ledger .lg-row__figure,
body.ledger .lg-figure__value,
body.ledger .lg-spec__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}


/* --- Section bands --------------------------------------------------------- */

.lg-band {
  padding: clamp(3rem, 8vw, 6.5rem) var(--lg-gutter);
  background: var(--paper);
}
.lg-band--sunk { background: var(--paper-sunk); }
.lg-band--ink  { background: var(--ink); color: var(--paper); }

/* Specificity note: body.ledger h2 is (0,0,1,2) and would otherwise beat a
   plain .lg-band--ink h2 at (0,0,1,1), painting near-black on near-black.
   Caught by looking at a screenshot, not by any check — nothing in CI
   evaluates text against an ancestor's background colour. */
body.ledger .lg-band--ink h1,
body.ledger .lg-band--ink h2,
body.ledger .lg-band--ink h3 { color: var(--paper); }
body.ledger .lg-band--ink a { color: var(--paper); }
body.ledger .lg-band--ink .lg-eyebrow { color: var(--paper); border-bottom-color: rgba(251, 250, 247, 0.35); }
body.ledger .lg-band--ink .lg-eyebrow__index { color: var(--paper); }
body.ledger .lg-band--ink p,
body.ledger .lg-band--ink li,
body.ledger .lg-band--ink .lg-statement { color: var(--paper); }
body.ledger .lg-band--ink .lg-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
body.ledger .lg-band--ink .lg-cta:hover { background: transparent; color: var(--paper); }

/* The same trap as the headings above, one component along: .lg-spec__key is
   --ink-soft, which on the inverted band measured 2.25:1. The override list
   has to name every component placed inside this band, so the band's own
   rules are the thing to check when something is dropped into it -- found by
   measuring the new course block, not by any CI check. */
body.ledger .lg-band--ink .lg-spec { border-top-color: var(--paper); }
body.ledger .lg-band--ink .lg-spec__row { border-bottom-color: rgba(251, 250, 247, 0.35); }
body.ledger .lg-band--ink .lg-spec__key { color: var(--paper); opacity: 0.85; }
body.ledger .lg-band--ink .lg-spec__value { color: var(--paper); }

.lg-wrap { max-width: 1120px; margin: 0 auto; }

/* The step number from the financial argument — 01 THE PROBLEM, 02 THE
   EVIDENCE. Sets the page up as a sequence rather than a stack of sections. */
.lg-eyebrow {
  font-family: var(--lg-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule);
}
.lg-eyebrow__index {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 700;
}


/* --- The ledger ------------------------------------------------------------

   The site's visual signature. A line item, its amount, and a note beneath —
   which is also why the amount may repeat inside the note: that is how an
   operating statement reads, and it means no body copy had to be trimmed to
   pull the figure into its own column.
   -------------------------------------------------------------------------- */

.lg-ledger {
  border-top: 2px solid var(--rule-strong);
  margin: 0;
}

.lg-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  grid-template-areas:
    'index label figure'
    '.     note  note';
  column-gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}

.lg-row__index {
  grid-area: index;
  font-family: var(--lg-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.lg-row__label { grid-area: label; margin: 0; }

/* Qualified for the same reason as .lg-cta: body.ledger p is (0,0,1,2) and
   an unqualified .lg-row__figure is (0,0,1,0). Leaving it unqualified painted
   the leak figures near-black — the one place in the whole design where red
   carries the meaning, silently drained by the paragraph-colour fix. */
body.ledger p.lg-row__figure,
.lg-row__figure {
  grid-area: figure;
  font-family: var(--lg-display);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--loss);          /* money leaving: the one place red belongs */
  white-space: nowrap;
  text-align: right;
}

.lg-row__note {
  grid-area: note;
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* A total line closes the ledger — heavy rule above, as on a statement. */
.lg-ledger__total {
  border-top: 2px solid var(--rule-strong);
  border-bottom: none;
}


/* The unit rides with the amount but must not compete with it. */
.lg-row__unit {
  font-size: 0.45em;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}


/* --- Large numeric callouts (proof anchors) -------------------------------- */

.lg-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 2px solid var(--rule-strong);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.lg-figure__value {
  display: block;
  font-family: var(--lg-display);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--ink);           /* a gain is ink, not red */
}
.lg-figure__label {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lg-figure__note { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); }


/* --- Spec rows (the Snapshot's four facts) --------------------------------- */

.lg-spec {
  border-top: 2px solid var(--rule-strong);
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.lg-spec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--rule);
}
.lg-spec__key {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lg-spec__value {
  font-family: var(--lg-display);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 800;
  font-stretch: 82%;
  line-height: 1;
  text-align: right;
}


/* The guarantee is a sentence, not a figure, so it drops to reading size
   while keeping the spec row's prominence. */
.lg-spec__value--prose {
  font-family: var(--lg-body);
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.4;
  max-width: 34ch;
}

/* One case study: category label, its anchors, then the prose beneath. */
.lg-case { padding: clamp(2rem, 5vw, 3.25rem) 0; border-bottom: 1px solid var(--rule); }
.lg-case:last-child { border-bottom: none; }
.lg-case .lg-figures { border-top: none; padding-top: 0.75rem; margin-bottom: 1.5rem; }
.lg-case .lg-figures::before { content: none; }
.lg-case .lg-figure__note { max-width: 70ch; }


/* --- Full-width statements and pull quotes --------------------------------- */

.lg-statement {
  font-family: var(--lg-display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 34ch;
  margin: 0;
}

.lg-quote {
  margin: 0;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 2px solid var(--rule-strong);
  border-bottom: 2px solid var(--rule-strong);
}
.lg-quote blockquote {
  margin: 0;
  font-family: var(--lg-display);
  font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 44ch;
}
.lg-quote figcaption {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* --- Statement lists (included / not included, fit / not a fit) ------------ */

.lg-list { list-style: none; margin: 0; padding: 0; }
.lg-list li {
  padding: 0.875rem 0 0.875rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  max-width: 62ch;
}
.lg-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ink-soft);
}
/* The only other sanctioned use of red: an explicit exclusion. */
.lg-list--out li::before { content: '\00D7'; color: var(--loss); }

.lg-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 5vw, 3.5rem);
}


/* --- Resource index -------------------------------------------------------- */

.lg-index { border-top: 2px solid var(--rule-strong); }
.lg-index a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.0625rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-weight: 600;
}
.lg-index a::after { content: '\2192'; color: var(--ink-soft); }
.lg-index a:hover { color: var(--loss); }
.lg-index a:hover::after { color: var(--loss); }


/* --- Subordinate stack (Diagnose -> Fix -> Advise) ------------------------- */

.lg-stack { border-top: 1px solid var(--rule); }
.lg-stack__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.lg-stack__item h3 { margin: 0; }
.lg-stack__meta {
  font-family: var(--lg-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-stretch: 85%;
  white-space: nowrap;
  text-align: right;
}
.lg-stack__item p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); }


/* --- FAQ ------------------------------------------------------------------- */

.lg-faq { border-top: 2px solid var(--rule-strong); }
.lg-faq details { border-bottom: 1px solid var(--rule); }
.lg-faq summary {
  cursor: pointer;
  padding: 1.25rem 2rem 1.25rem 0;
  position: relative;
  list-style: none;
}
.lg-faq summary::-webkit-details-marker { display: none; }
.lg-faq summary h3 { margin: 0; display: inline; }
.lg-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 1.0625rem;
  font-family: var(--lg-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-soft);
}
.lg-faq details[open] summary::after { content: '\2013'; }
.lg-faq details > p { margin: 0 0 1.5rem; color: var(--ink-soft); }
.lg-faq summary:focus-visible { outline: 2px solid var(--loss); outline-offset: 2px; }


/* --- Hero and credibility line --------------------------------------------- */

.lg-hero {
  padding: clamp(3.5rem, 10vw, 8rem) var(--lg-gutter) clamp(2.5rem, 6vw, 4rem);
  background: var(--paper);   /* style.css:556 styles bare `section`; without this it wins */
}
.lg-hero h1 { margin: 0 0 1.5rem; max-width: 22ch; }
.lg-hero__sub { font-size: clamp(1.0625rem, 1.8vw, 1.25rem); color: var(--ink-soft); margin: 0 0 2rem; }
.lg-hero__note { margin-top: 1.25rem; font-size: 0.875rem; color: var(--ink-soft); }

/* One restrained line, not a résumé strip. */
.lg-credit {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 1.125rem var(--lg-gutter);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* body.ledger a sets colour at (0,0,1,2); an unqualified .lg-cta is (0,0,1,0)
   and loses, which rendered the primary CTA ink-on-ink — invisible. The
   qualified selector is not decoration, it is the fix. */
body.ledger a.lg-cta,
body.ledger button.lg-cta,
.lg-cta {
  display: inline-block;
  font-family: var(--lg-display);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  font-weight: 700;
  font-stretch: 88%;
  background: var(--ink);
  color: var(--paper);
  padding: 1.0625rem 1.875rem;
  border: 2px solid var(--ink);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
body.ledger a.lg-cta:hover,
body.ledger button.lg-cta:hover { background: var(--paper); color: var(--ink); }
body.ledger button.lg-cta { cursor: pointer; width: auto; }

/* Any button on a converted page that is not an .lg-cta — the newsletter
   subscribe, for one — still has to be legible. style.css paints buttons for
   the old palette, so without this they inherit a colour that matches the new
   ground. A baseline is more durable than chasing each button. */
body.ledger button,
body.ledger input[type="submit"] {
  font-family: var(--lg-display);
  font-weight: 700;
  font-stretch: 88%;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  padding: 0.875rem 1.5rem;
  cursor: pointer;
}
body.ledger button:hover,
body.ledger input[type="submit"]:hover { background: var(--paper); color: var(--ink); }

/* The menu toggle is an icon, not a filled control, and it is the one button
   the baseline above must not touch.

   It is a <button> holding three <span> bars, so it collected
   background: var(--ink) from that rule -- while line 168 paints the bars
   var(--ink) as well, on the assumption the button is transparent and they sit
   on the header's paper. Together those gave ink bars on an ink ground:
   measured 1.00:1 in BOTH themes, the icon invisible, with only the bars'
   box-shadow tracing a ghost of it. The padding and border inflated a
   deliberate 44x44 target (style.css:175, sized for WCAG 2.5.8 and Apple's
   and Google's 44px guidance) into a 77x49 filled slab -- the only solid
   block on a page built from hairlines and type.

   This resets rather than narrowing the baseline's selector on purpose:
   adding :not(.mobile-menu-toggle) there would raise it to (0,0,2,1), which
   -- being later in the file -- would then beat button.lg-tick and
   button.lg-reveal at the same specificity and repaint both.

   Three audits missed this. The contrast sweeps filtered on offsetParent, so
   they never measured the navigation; the hardcoded-white sweep was
   case-sensitive. Neither would have caught it anyway: the bars are not text
   but spans with a background-color, which a foreground-vs-background text
   audit does not look at. tools/check_nav_contrast.js now measures them. */
body.ledger button.mobile-menu-toggle {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  /* style.css:191 gives the toggle z-index 1001 -- the same as the nav panel
     at style.css:930 -- but on a static element, where z-index does nothing.
     So the panel, later in the DOM, painted over the close X: the icon
     animated to an X and was immediately covered, and elementFromPoint at the
     button's own centre returned the panel. The panel's padding-top: 5rem
     reserves 80px of empty space exactly where the toggle sits, so showing
     the X above it is what the original design intended.

     Tapping the overlay still closes the menu, so this was never a trap --
     just the close affordance being invisible while it was the obvious thing
     to reach for. position: relative is what makes the z-index apply at all. */
  position: relative;
  z-index: 1002;
}
/* (0,0,3,1), to clear body.ledger button:hover at (0,0,2,1) above. */
body.ledger button.mobile-menu-toggle:hover,
body.ledger button.mobile-menu-toggle:focus-visible { background: none; }
.lg-cta:focus-visible { outline: 3px solid var(--loss); outline-offset: 3px; }


/* The quieter second action beside a primary CTA: a rule, not a box, so it
   cannot compete with the thing it sits next to. */
body.ledger a.lg-cta-secondary {
  display: inline-block;
  font-family: var(--lg-body);
  font-weight: 600;
  color: var(--ink);
  padding: 1.0625rem 0;
  margin-left: 1.5rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
body.ledger a.lg-cta-secondary:hover { color: var(--loss); }
body.ledger .lg-band--ink a.lg-cta-secondary { color: var(--paper); }
body.ledger .lg-band--ink a.lg-cta-secondary:hover { color: var(--paper); text-decoration-thickness: 2px; }

.cta-buttons { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
@media screen and (max-width: 640px) {
  .cta-buttons { display: block; }
  body.ledger a.lg-cta-secondary { margin-left: 0; display: block; padding-top: 0.75rem; }
}


/* --- Modules, notes and forms ----------------------------------------------

   The course modules and the advisory inclusions are the two places on this
   site where containment genuinely helps: each is a discrete unit you scan
   and compare. They get a rule and space, not a rounded shadowed card.
   -------------------------------------------------------------------------- */

.lg-module { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--rule); }
.lg-module:last-child { border-bottom: none; }
.lg-module h3 { margin: 0 0 0.75rem; }

.lg-note {
  border-left: 2px solid var(--rule-strong);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.lg-note p:last-child { margin-bottom: 0; }

.lg-cta-block {
  border-top: 2px solid var(--rule-strong);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* The contact form is the only form in this phase. Fields read as ledger
   rows: a label, a rule beneath, nothing boxed. */
/* style.css gives forms a white rounded card with a shadow. The brief rules
   out exactly that, and it also made the form the only centred, boxed thing
   on an otherwise left-aligned paper page. */
body.ledger .lg-contact form {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  max-width: 42rem;
  background: transparent;
  border: none;
  border-top: 2px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.lg-contact label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.5rem 0 0.375rem;
}
body.ledger .lg-contact input,
body.ledger .lg-contact select,
body.ledger .lg-contact textarea {
  width: 100%;
  font-family: var(--lg-body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.625rem 0;
  box-shadow: none;
}
body.ledger .lg-contact textarea { border: 1px solid var(--rule); padding: 0.75rem; min-height: 8rem; }
body.ledger .lg-contact input:focus,
body.ledger .lg-contact select:focus,
body.ledger .lg-contact textarea:focus {
  outline: none;
  border-color: var(--rule-strong);
  border-bottom-width: 2px;
}
body.ledger .lg-contact input:focus-visible,
body.ledger .lg-contact select:focus-visible,
body.ledger .lg-contact textarea:focus-visible { outline: 2px solid var(--loss); outline-offset: 2px; }
body.ledger .lg-contact button[type="submit"] { margin-top: 2rem; }


/* --- Numbered process steps ------------------------------------------------
   A counter rather than a graphic: the number is the only ornament. */

.lg-steps { counter-reset: lg-step; border-top: 2px solid var(--rule-strong); }
.lg-steps__item {
  counter-increment: lg-step;
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2.25rem) 3.5rem;
  border-bottom: 1px solid var(--rule);
}
.lg-steps__item::before {
  content: counter(lg-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--lg-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.lg-steps__item h3 { margin: 0 0 0.5rem; }
.lg-steps__item p:last-child { margin-bottom: 0; }

.lg-divider { height: 0; border-top: 1px solid var(--rule); margin: clamp(2rem, 5vw, 3.5rem) 0; }

/* Blog category filters: rules, not pills. */
.lg-chips { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
body.ledger .lg-chips a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
}
body.ledger .lg-chips a:hover,
body.ledger .lg-chips a.active { color: var(--ink); border-bottom-color: var(--rule-strong); }

/* The blog index as a ledger of posts. */
.lg-row--post {
  display: block;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}
.lg-row--post h2, .lg-row--post h3 { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
body.ledger .lg-row--post .post-meta { margin: 0 0 0.75rem; }
body.ledger .lg-row--post .read-more { font-weight: 600; text-decoration: none; }
body.ledger .lg-row--post .read-more::after { content: " \2192"; color: var(--ink-soft); }


/* --- Article layout --------------------------------------------------------

   Shared by the 12 posts under blog/, unreasonably-optimistic.html and the
   blog index. These class names are contractual: tools/build_articles.py
   emits .back-link, .post-header, .post-meta, .post-content, .cta-section and
   .breadcrumbs verbatim, and tools/add_related_reading.py owns
   .related-reading. Renaming any of them means editing the generator.
   -------------------------------------------------------------------------- */

body.ledger article { max-width: 46rem; margin: 0 auto; padding: 0 var(--lg-gutter); }
body.ledger .back-link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 2rem;
}
body.ledger .back-link:hover { color: var(--loss); }

.post-header { border-bottom: 2px solid var(--rule-strong); padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
.post-header h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 1rem; }
body.ledger .post-meta {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.post-content > p { margin-bottom: 1.5rem; }
.post-content h2 { margin: 2.75rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.post-content h3 { margin: 2rem 0 0.75rem; }
.post-content ul, .post-content ol { margin: 0 0 1.5rem 1.25rem; }
.post-content li { margin-bottom: 0.625rem; }
.post-content blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--rule-strong);
  font-family: var(--lg-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.3;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-variant-numeric: tabular-nums; }
.post-content th, .post-content td { text-align: left; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--rule); }
.post-content th { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-bottom-color: var(--rule-strong); }

body.ledger .related-reading {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--rule-strong);
  background: none;
}
body.ledger .related-reading h2 { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.75rem; }
body.ledger .related-reading ul { list-style: none; margin: 0; padding: 0; }
body.ledger .related-reading li { border-bottom: 1px solid var(--rule); }
body.ledger .related-reading a { display: block; padding: 0.875rem 0; font-weight: 600; text-decoration: none; }
body.ledger .related-reading a:hover { color: var(--loss); }

/* build_articles.py hardcodes .cta-section on every article. */
body.ledger article .cta-section,
body.ledger .lg-cta-block {
  background: none;
  border: none;
  border-top: 2px solid var(--rule-strong);
  border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: left;
}
body.ledger article .cta-section h2,
body.ledger article .cta-section h3 { margin-top: 0; }


/* --- The course area -------------------------------------------------------

   These pages carry no sitewide nav or footer and never linked style.css, so
   ledger.css is the whole stylesheet here. Class names are styled rather than
   renamed on purpose: `dl-btn` is asserted by check_site.py's course-gate
   check and bound by course/downloads.js, and the auth pages wire
   error-message / success-message from their own inline scripts. Renaming
   would be a silent functional break for a cosmetic gain.
   -------------------------------------------------------------------------- */

body.ledger .module-header,
body.ledger .dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem var(--lg-gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
body.ledger .header-content { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; max-width: 1120px; margin: 0 auto; }
body.ledger .back-btn,
body.ledger .logout-btn {
  font-family: var(--lg-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0.5rem 0;
  text-decoration: none;
  cursor: pointer;
}
body.ledger .back-btn:hover, body.ledger .logout-btn:hover { color: var(--loss); }

body.ledger .module-hero,
body.ledger .welcome-section {
  background: var(--paper);
  padding: clamp(2.5rem, 7vw, 5rem) var(--lg-gutter) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 2px solid var(--rule-strong);
}
body.ledger .module-hero-content { max-width: 1120px; margin: 0 auto; }
body.ledger .module-number {
  display: block;
  font-family: var(--lg-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
  background: none;
  padding: 0;
}

body.ledger .container { max-width: 1120px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--lg-gutter); }
body.ledger .main-content,
body.ledger .sidebar-card,
body.ledger .module-card,
body.ledger .lesson-content {
  background: none;
  border-radius: 0;
  box-shadow: none;
}
body.ledger .sidebar-card,
body.ledger .module-card { border-top: 1px solid var(--rule); padding: 1.5rem 0; }
body.ledger .module-card:first-child { border-top: 2px solid var(--rule-strong); }

/* A placeholder is a placeholder: a ruled box, not a shaded panel. */
body.ledger .video-container { margin-bottom: 2rem; }
body.ledger .welcome-video { margin: 1.5rem 0; }
body.ledger .welcome-video h3 { margin: 0 0 1rem; }
body.ledger .lesson-video { margin-bottom: 2.25rem; }
body.ledger .lesson-video > h2 {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
body.ledger .video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border: 1px solid var(--rule);
}
body.ledger .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* The teaser facade. The poster is a button, so it is keyboard reachable and
   announces the video's title; the cue line keeps it from reading as a plain
   image that happens to be clickable. No gradient play badge -- a ruled frame
   and a labelled control is what the rest of the page does. */
body.ledger .lg-video { margin: clamp(1.5rem, 4vw, 2.25rem) 0; }
body.ledger button.lg-video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: block;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
}
body.ledger button.lg-video__play:hover { background: none; }
/* The poster is set type, not a picture of type. Archivo is already loaded,
   so this is sharper than any raster at any density, weighs nothing, and
   inherits the theme tokens -- which is what makes it correct in dark mode
   without a second asset. */
body.ledger .lg-video__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  text-align: left;
}
body.ledger .lg-video__kicker {
  font-family: var(--lg-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.75;
}
body.ledger .lg-video__headline {
  font-family: var(--lg-display);
  font-weight: 800;
  font-stretch: 86%;
  font-size: clamp(1.375rem, 4vw, 2.75rem);
  line-height: 1.05;
  color: var(--paper);
}
body.ledger .lg-video__sub {
  font-family: var(--lg-body);
  font-size: clamp(0.8125rem, 1.4vw, 1rem);
  color: var(--paper);
  opacity: 0.8;
  max-width: 34ch;
}
body.ledger .lg-video__cue {
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: var(--lg-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: 0.5rem 0.875rem;
}
body.ledger .lg-video__play:hover .lg-video__cue,
body.ledger .lg-video__play:focus-visible .lg-video__cue {
  color: var(--paper);
  background: var(--loss);
}
/* The band repaints its components; the frame has to come with it. */
body.ledger .lg-band--ink .video-embed { border-color: var(--paper); }

body.ledger .video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 14rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 2rem;
}
body.ledger .video-placeholder h2 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); margin: 0 0 0.5rem; }
body.ledger .video-placeholder h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); margin: 0 0 0.5rem; }
body.ledger .video-placeholder p { color: var(--ink-soft); margin: 0; }

body.ledger .coming-soon-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.25rem 0.5rem;
}

body.ledger .download-list,
body.ledger .module-deliverables { list-style: none; margin: 0; padding: 0; }
body.ledger .download-list li,
body.ledger .module-deliverables li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rule);
}
body.ledger a.dl-btn,
body.ledger a.view-btn,
body.ledger button.dl-btn,
body.ledger button.view-btn {
  flex: none;
  font-family: var(--lg-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  padding: 0.5rem 0.875rem;
  text-decoration: none;
  cursor: pointer;
}
body.ledger a.dl-btn:hover, body.ledger a.view-btn:hover,
body.ledger button.dl-btn:hover, body.ledger button.view-btn:hover { background: var(--ink); color: var(--paper); }

body.ledger .nav-buttons { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--rule-strong); }
body.ledger a.nav-btn {
  font-family: var(--lg-display);
  font-weight: 700;
  font-stretch: 88%;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0.5rem 0;
  text-decoration: none;
}
body.ledger a.nav-btn:hover { color: var(--loss); }

body.ledger .launch-notice,
body.ledger .lg-note { border-left: 2px solid var(--rule-strong); background: none; border-radius: 0; padding: 0.25rem 0 0.25rem 1.5rem; }
body.ledger .loading { padding: 3rem var(--lg-gutter); color: var(--ink-soft); }
body.ledger .dashboard-footer { padding: 2rem var(--lg-gutter); border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.875rem; }
body.ledger .week { font-weight: 700; color: var(--ink); }


/* --- Auth pages ------------------------------------------------------------ */

body.ledger .auth-container { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 4rem) var(--lg-gutter); }
body.ledger .auth-card {
  width: 100%;
  max-width: 26rem;
  background: none;
  border: none;
  border-top: 2px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  padding: 2rem 0 0;
}
body.ledger .auth-card h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 0.5rem; }
body.ledger .auth-card .subtitle { color: var(--ink-soft); margin: 0 0 1.5rem; }
body.ledger .auth-form { display: block; background: none; border: none; box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
body.ledger .auth-form label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.25rem 0 0.375rem;
}
body.ledger .auth-form input {
  width: 100%;
  font-family: var(--lg-body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.625rem 0;
  box-shadow: none;
}
body.ledger .auth-form input:focus { outline: none; border-bottom: 2px solid var(--rule-strong); }
body.ledger .auth-form input:focus-visible { outline: 2px solid var(--loss); outline-offset: 2px; }
body.ledger .auth-form button { width: 100%; margin-top: 1.75rem; }
body.ledger .auth-links { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; }

/* A failed login is the other sanctioned use of red: something went wrong. */
body.ledger .error-message,
body.ledger .success-message {
  border-radius: 0;
  border: none;
  border-left: 2px solid var(--rule-strong);
  background: none;
  padding: 0.75rem 0 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.9375rem;
}
body.ledger .error-message { border-left-color: var(--loss); color: var(--loss); }
/* Both message divs ship empty and are filled by the page's own script. The
   border and padding made an empty one render as a bare stub above the form. */
body.ledger .error-message:empty,
body.ledger .success-message:empty { display: none; }

body.ledger .password-requirements { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.5rem; }


/* --- Post-purchase --------------------------------------------------------- */

body.ledger .checkmark { display: none; }   /* the rule above the heading does this job */
body.ledger .launch-date { border-left: 2px solid var(--rule-strong); background: none; border-radius: 0; padding: 0.25rem 0 0.25rem 1.5rem; margin: 1.5rem 0; }
body.ledger .contact { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.9375rem; }
body.ledger .home-link { font-weight: 600; }


/* --- Directory, quizzes and the remaining utility pages --------------------

   virginia-neighbors.html builds its listing cards in JavaScript, so these
   class names come from template strings as well as markup; they are styled,
   never renamed. The audit quizzes do the same with their question steps.
   -------------------------------------------------------------------------- */

body.ledger .hdr-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1120px; margin: 0 auto; }
body.ledger .hero { background: var(--paper); padding: clamp(2.5rem, 7vw, 5rem) var(--lg-gutter); }
body.ledger .hero-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.75rem;
}
body.ledger .hero-sub { color: var(--ink-soft); font-size: clamp(1rem, 1.8vw, 1.1875rem); }
body.ledger .section { padding: clamp(2rem, 5vw, 3.5rem) var(--lg-gutter); }

body.ledger .listing-card,
body.ledger .quiz-card,
body.ledger .question-card,
body.ledger .result-card {
  background: none; border: none; border-top: 1px solid var(--rule);
  border-radius: 0; box-shadow: none; padding: 1.5rem 0;
}
/* .listings-section and .filters-bar are this page's own wrappers and are not
   .section, so they inherited no page gutter and the register ran flush to the
   viewport edge. */
body.ledger .listings-section,
body.ledger .filters-bar { padding-left: var(--lg-gutter); padding-right: var(--lg-gutter); }
body.ledger .filters-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
body.ledger .filter-label,
body.ledger .results-count {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
body.ledger .filter-clear { font-size: 0.8125rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; }

body.ledger .listings-grid { display: block; }
body.ledger .listing-card:last-child { border-bottom: 1px solid var(--rule); }

body.ledger .listing-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.625rem;
}
body.ledger .listing-name {
  font-family: var(--lg-display); font-weight: 700; line-height: 1.15;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem); color: var(--ink);
}
body.ledger .listing-biz { font-size: 0.9375rem; color: var(--ink-soft); margin-bottom: 0.625rem; }
body.ledger .listing-desc {
  color: var(--ink); max-width: var(--lg-measure); margin-bottom: 1rem;
}

/* Label column, value column: the fields line up down the page the way a
   statement's figures do, which is the whole point of the metaphor. */
body.ledger .listing-meta { display: block; }
body.ledger .listing-meta-item {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 0.875rem;
  align-items: baseline; color: var(--ink-soft); font-size: 0.875rem;
  padding: 0.1875rem 0;
}
body.ledger .listing-socials { margin-top: 0.75rem; display: flex; gap: 1rem; }
body.ledger .social-link { font-size: 0.8125rem; }

/* The category chooser is a filter, not a set of tiles. */
body.ledger .categories-grid {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;
}
body.ledger .cat-card {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  padding: 0.5rem 0.75rem; cursor: pointer;
  background: none; border: 1px solid var(--rule); border-radius: 0;
}
body.ledger .cat-card:hover { border-color: var(--rule-strong); }
body.ledger .cat-card.active { border-color: var(--rule-strong); background: var(--paper-sunk); }
body.ledger .cat-label { font-size: 0.875rem; color: var(--ink); }
body.ledger .cat-count { font-size: 0.75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

body.ledger .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.5rem; }
body.ledger .form-group { margin-bottom: 1.25rem; }
body.ledger .form-label {
  display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.375rem;
}
body.ledger .form-input,
body.ledger .hero-search input {
  width: 100%; font-family: var(--lg-body); font-size: 1rem; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--rule);
  border-radius: 0; padding: 0.625rem 0; box-shadow: none;
}
body.ledger .form-input:focus,
body.ledger .hero-search input:focus { outline: none; border-bottom: 2px solid var(--rule-strong); }
body.ledger textarea.form-input { border: 1px solid var(--rule); padding: 0.75rem; }

/* The overlay's display toggle is BEHAVIOUR, not presentation: the page's
   script adds .open to show it. Removing the page's <style> block took the
   `display: none` default with it and left the submit-listing modal
   permanently open over the page. Caught by chasing an accessibility score
   that merely dipped to 0.96 and still passed its threshold. */
body.ledger .modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 25, 23, 0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
body.ledger .modal-overlay.open { display: flex; }
body.ledger .modal {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  max-width: 36rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
body.ledger .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--rule-strong); }
body.ledger .modal-title { font-family: var(--lg-display); font-weight: 800; font-stretch: 85%; font-size: 1.375rem; margin: 0; }
body.ledger button.modal-close { background: none; border: none; color: var(--ink-soft); font-size: 1.5rem; line-height: 1; padding: 0.25rem; cursor: pointer; }
body.ledger button.modal-close:hover { color: var(--loss); }
body.ledger .modal-content { background: var(--paper); border-radius: 0; box-shadow: none; border: 1px solid var(--rule-strong); }
body.ledger .social-link { color: var(--ink); }


/* --- Restored display defaults ---------------------------------------------

   These are behaviour, not presentation. Each page's own script reveals the
   element by adding .show; the hidden default lived in the <style> block the
   conversion removed, so without these the quiz results render as empty
   panels before the quiz is taken and the directory's success message is in
   the DOM flow from load. Found by auditing every removed block for a
   `display: none` paired with a state class, after the modal taught me that
   stripping a stylesheet can delete logic.
   -------------------------------------------------------------------------- */

body.ledger .results { display: none; }
body.ledger .results.show { display: block; }
body.ledger .success-msg { display: none; text-align: center; padding: 1.25rem; }
body.ledger .success-msg.show { display: block; }

/* The audit's pre-results email capture. Its gradient is gone with the rest. */
body.ledger .email-section {
  background: var(--paper-sunk);
  border: none;
  border-top: 2px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  margin-top: 2rem;
}
body.ledger .email-section h2,
body.ledger .email-section h3,
body.ledger .email-section p { color: var(--ink); }


/* --- Nav and footer: appearance only ---------------------------------------

   style.css:256-271 sets .nav-cta with 17 !important declarations, so these
   overrides need !important to land. The mechanics (position, visibility,
   right, display) are deliberately untouched — see the header of this file.
   -------------------------------------------------------------------------- */

body.ledger header { background: var(--paper) !important; border-bottom: 1px solid var(--rule); box-shadow: none !important; }
body.ledger .logo { font-family: var(--lg-display); font-weight: 800; font-stretch: 85%; letter-spacing: -0.02em; color: var(--ink) !important; }
body.ledger #mainNav a { font-family: var(--lg-body); font-size: 0.9375rem; font-weight: 600; color: var(--ink) !important; }
body.ledger #mainNav a:hover { color: var(--loss) !important; }

/* The mobile slide-out panel. style.css:924 paints it a hardcoded light
   gradient (#FAFAF8 -> #F5F5F3) with #eee dividers, from before this site had
   a dark theme. ledger.css paints the links var(--ink), which under dark is
   near-white -- so the whole menu rendered near-white on near-white and only
   Snapshot stayed readable, because .nav-cta carries its own background.

   Two blind spots let this ship. The hardcoded-white sweep used a
   case-sensitive pattern and never matched #FAFAF8 or #F5F5F3, and the
   contrast audit skips elements with no offsetParent -- which this panel has
   none of until the menu is opened. Measured now with the menu open. */
@media screen and (max-width: 1024px) {
  body.ledger nav,
  body.ledger #mainNav {
    background: var(--paper);
    border-left: 1px solid var(--rule);
    /* style.css:931 reserves 5rem (80px) at the top of the panel for the
       close button. The button runs y 52..96, so the last 16px of it sat over
       the first nav item -- the inverted "Snapshot" chip -- and the X's
       lower-left stroke, being --ink, vanished into the chip's --ink ground.
       7rem clears the button with room to spare. This only began to matter
       once the X was drawn above the panel at all. */
    padding-top: 7rem;
  }
  body.ledger nav ul li,
  body.ledger #mainNav li { border-bottom-color: var(--rule); }
}

body.ledger #mainNav a.nav-cta {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--lg-display) !important;
  font-weight: 700 !important;
  transform: none !important;
}
body.ledger #mainNav a.nav-cta:hover { background: var(--loss) !important; color: var(--paper) !important; }

body.ledger .dropdown-menu { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--rule) !important; background: var(--paper) !important; }

body.ledger footer { background: var(--ink) !important; color: var(--paper); border-top: none; }
body.ledger footer h2, body.ledger footer h3, body.ledger footer h4 { font-family: var(--lg-display); color: var(--paper) !important; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
/* Every text descendant on a dark surface, not just the ones I thought of.
   Enumerating elements one at a time found the CTA, then the ink band, then
   the footer — three rounds of the same mistake. */
body.ledger footer,
body.ledger footer p,
body.ledger footer li,
body.ledger footer span,
body.ledger footer div { color: var(--paper); }
body.ledger footer a { color: var(--paper) !important; }
body.ledger footer a:hover { color: var(--paper) !important; text-decoration-thickness: 2px; }


/* style.css paints breadcrumbs with --light-text (#718096), which is 3.85:1
   on paper. The separators are aria-hidden, but they are still visible text. */
body.ledger .breadcrumbs,
body.ledger .breadcrumbs span,
body.ledger .breadcrumbs a { color: var(--ink-soft); }


/* --- Motion ----------------------------------------------------------------

   A ledger line being revealed, and nothing else. No count-up on the
   figures: that is JavaScript against a 200 ms total-blocking-time budget
   with effectively no headroom (measured base ~0 ms, Lighthouse asserts 200
   as an error). The rule draw satisfies the brief without spending it.
   -------------------------------------------------------------------------- */

@keyframes lg-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lg-ledger,
.lg-figures,
.lg-spec,
.lg-index,
.lg-faq { position: relative; }

.lg-ledger::before,
.lg-figures::before,
.lg-spec::before,
.lg-index::before,
.lg-faq::before {
  content: '';
  position: absolute;
  inset: -2px 0 auto 0;
  height: 2px;
  background: var(--rule-strong);
  transform-origin: left;
  animation: lg-draw 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .lg-ledger::before,
  .lg-figures::before,
  .lg-spec::before,
  .lg-index::before,
  .lg-faq::before { animation: none; transform: none; }
  .lg-cta { transition: none; }
  body.ledger .lg-progress__fill { transition: none; }
}


/* --- Narrow viewports ------------------------------------------------------

   Designed, not stacked. The figure stays dominant and keeps its own line
   rather than being squeezed against the label; the ledger stays scannable.
   Tested at 375, 390, 768 and desktop.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 640px) {
  .lg-row {
    grid-template-columns: 2.25rem 1fr;
    grid-template-areas:
      'index  label'
      '.      figure'
      '.      note';
    row-gap: 0.5rem;
  }
  .lg-row__figure { text-align: left; font-size: clamp(1.75rem, 9vw, 2.25rem); }
  .lg-spec__row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .lg-spec__value { text-align: left; }
  .lg-stack__item { grid-template-columns: 1fr; }
  .lg-stack__meta { text-align: left; }
  .lg-statement, .lg-quote blockquote { max-width: none; }
  body.ledger .download-list li,
  body.ledger .module-deliverables li { flex-wrap: wrap; }
  body.ledger .download-list li > span,
  body.ledger .module-deliverables li > span { flex: 1 1 100%; }
  body.ledger a.dl-btn,
  body.ledger a.view-btn,
  body.ledger button.dl-btn,
  body.ledger button.view-btn { flex: 1 1 100%; text-align: center; }
}