/* pages/home.css — composition specific to the home ledger: the masthead hero, the
   worked-example gutter, the sticky running total, and the centred close. */

/* =========================================================================
   00 HERO — masthead
   ========================================================================= */
.section--hero {
  /* laid-paper lines, hero only */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    color-mix(in srgb, var(--ink) 1.5%, transparent) 3px 4px
  );
}
.hero__rule { display: block; height: 1px; background: var(--rule-strong); }
.hero__rule--top { margin-bottom: 20px; }
.hero__rule--bottom { background: var(--rule); margin-top: var(--s-6); }
.hero__kicker { margin-bottom: var(--s-5); }
.hero__title {
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  /* the ONE wonky exception: hero H1 only */
  font-variation-settings: "wght" 370, "SOFT" 3, "WONK" 1;
  color: var(--ink);
}
/* Room for descenders (activity, dollars) inside the clip mask so overflow:hidden and the
   0.98 leading don't shave them. */
.hero__title .mask { padding-bottom: 0.14em; }
.hero__lead {
  margin-top: var(--s-5);
  max-width: 40ch;
  font-family: var(--font-serif);
  font-weight: 420;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
}
.hero__cta { margin-top: var(--s-6); }

/* Right-gutter running total (desktop) */
.hero__ledger { position: relative; }
@media (min-width: 1025px) {
  .hero__ledger { padding-top: 8px; }
}

/* B1 — the gutter running-total figure is sized to ALWAYS fit the 300px figure track.
   The base .running-total__figure rides --t-total (up to 8.5rem ≈ 136px); at that size
   "$19,900" in Spline Sans Mono tabular is ~560px and overran the fixed 300px gutter, so
   body{overflow-x:hidden} sliced the last digit ("$19,90") at ≥~1025px. Here the gutter
   instances get their own clamp — the big --t-total is kept only where the figure is genuinely
   full-width (the CTA close; the mobile total-strip uses its own .total-strip__figure size).
   Belt-and-braces: a container-query cap (21cqi of the ~300px track ≈ 63px) hard-limits the
   figure so it can never truncate even if the clamp is later changed — no ellipsis, ever. */
.ledger__gutter .running-total__figure {
  /* Primary (always valid): the clamp alone fits 300px at every width — measured "$19,900"
     spans 177px @1025 … 251px @1920, ≥49px clear. */
  font-size: clamp(2.25rem, 1.4rem + 2vw, 4.1rem);
  max-width: 100%;
}
/* Belt-and-braces cap, only where container queries exist (so an unsupporting browser keeps the
   plain clamp above rather than dropping the whole declaration back to --t-total): the figure can
   never exceed 21cqi of the ~300px track (~63px), so it cannot truncate even if the clamp grows. */
@supports (width: 1cqi) {
  .ledger__gutter .running-total { container-type: inline-size; }
  .ledger__gutter .running-total__figure { font-size: min(clamp(2.25rem, 1.4rem + 2vw, 4.1rem), 21cqi); }
}

/* =========================================================================
   01 PROBLEMS — the entries
   ========================================================================= */
.problems__header { max-width: 62ch; }
.problems__h2 { margin-top: var(--s-5); }
.entries { margin-top: var(--s-7); }
.subtotal-block__stamp { margin-top: var(--s-4); }
.problems__ledger-inner .caption-honesty { margin-top: var(--s-5); }

/* Sticky running total in the figure gutter (desktop) */
.problems__ledger { position: relative; }
@media (min-width: 1025px) {
  .problems__ledger-inner {
    position: sticky;
    top: calc(var(--header-scrolled) + 28px);
  }
}
.subtotal-block { margin-top: var(--s-6); }
.subtotal-block .stamp { margin-top: var(--s-5); }

/* Mobile / tablet: pinned bottom tally strip replaces the gutter total */
.total-strip {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: none;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--side-pad);
  background: color-mix(in srgb, var(--paper-raised) 95%, transparent);
  border-top: 1px solid var(--rule-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.total-strip__label {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.total-strip__figure {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--green);
  font-variant-numeric: tabular-nums lining-nums;
}
.total-strip__unit {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  align-self: center;
}
.total-strip.is-active { display: flex; }
@media (min-width: 1025px) { .total-strip { display: none !important; } }

/* The fixed tally strip must never cover the closing balance. At the ≤1024px widths where it
   can appear, pad the footer bottom by the strip's height (+ iOS safe-area) so the closing
   line clears it even before the park-on-CTA trigger (motion.js) slides the strip away. */
@media (max-width: 1024px) {
  .site-footer { padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); }

  /* At ≤1024px the figure gutter folds in-flow (layout.css) and the fixed .total-strip becomes
     the running-total surface — so the folded gutter total would show the same $19,900 twice.
     The strip 'replaces' it (see comment above), so suppress the in-flow gutter total here. The
     honesty caption stays, standing as an in-flow note after the entries. */
  .problems__ledger .running-total { display: none; }
  /* Same duplication, same fix, one section earlier: the hero gutter's own $19,900 would also
     fold in-flow above the strip's copy. Suppress it here too, so reduced-motion mobile never
     shows two running-total surfaces at once. */
  .hero__ledger .running-total { display: none; }
}

/* Equation term ↔ sentence-word link: a single .is-lit class carries the oxblood underline on
   BOTH sides (toggled together in motion.js) — no inline colour set from JS. Direct hover on a
   term still underlines it too, so non-linked terms keep their hover affordance. */
.eq__term { border-bottom: 1px solid transparent; transition: border-color var(--d-xs) var(--ease-settle); }
.eq__term:hover, .eq__term.is-lit { border-bottom-color: var(--oxblood); }
.sentence-factor { border-bottom: 1px solid transparent; transition: border-color var(--d-xs) var(--ease-settle); }
.sentence-factor.is-lit { border-bottom-color: var(--oxblood); }

/* =========================================================================
   02 METHOD / 03 SERVICES minor composition
   ========================================================================= */
.method__intro, .services__intro { max-width: 60ch; }

/* Section-intro beat: a short hairline draws under the kicker as the intro resolves (motion.js
   introRules, on the draw ease) — a ledger-native accent over the shared generic fade+rise.
   No-JS / reduced-motion show it fully drawn (rule-draw defaults to scaleX(1)). Inserting it
   after the kicker breaks the .kicker + h2 adjacency, so restore that heading gap here. */
.intro-rule {
  display: block;
  height: 1px;
  width: 52px;
  margin-top: var(--s-3);
  background: var(--margin-rule);
  transform-origin: left center;
}
.intro-rule + h2 { margin-top: var(--s-4); }

@media (max-width: 640px) {
  .hero__lead { max-width: none; }
}