/* The Ledger — Corrum Capital Management (editorial-typographic / Vignelli lens)
   BONES PASS: layout/spacing/flex/grid/type-sizing/colour live on Tailwind
   utility classes in index.html. This file keeps only what utilities cannot
   express (OpenType features, pseudo-element content, scroll-timeline reveal,
   capture-mode) plus literal type-scale/line-height values matching
   tokens.css, so the Layer-0 laws can measure this external stylesheet.
   Every colour stays var(--*). */

:root {
  --lh-numeral: 1;     /* tight leading for display numerals — decorative, not reading text */
  --lh-dropcap: 0.8;   /* drop-cap initial letter — decorative, not reading text */
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-paper);
  font-size: 18px;                 /* = --fs-body; literal so L4 type-scale can measure it */
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "onum" 1;
}
/* `body h1` not bare `h1`: Tailwind's injected stylesheet (incl. Preflight's
   h1..h6{font-size:inherit}) lands AFTER this file, so an equal-specificity
   bare h1{} loses that cascade tie. The extra ancestor wins on specificity
   alone, regardless of injection order. */
body h1, body h2, body h3, body h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 600;
  font-optical-sizing: auto;
  text-wrap: balance;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}
/* literal sizes below = --fs-1/2/3 exactly (24/32/43px, ratio 1.333) so L4 can measure the scale */
body h1 { font-size: 24px; }
body h2 { font-size: 43px; }
body h3 { font-size: 32px; }
body h4 { font-size: 24px; }
@media (min-width: 1024px) { body h1 { font-size: 32px; } }

/* numeral treatment (tabular/lining figures) — decorative, not reading prose,
   so leading is deliberately tight via var(), not the L1 ratio. */
.ledger__figure, .ledger__stat-value {
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.ledger__figure { line-height: var(--lh-numeral); }
.press__date { font-feature-settings: "tnum" 1; }

/* the three proof-rail cells render at one shared size/weight — no display jump */
.ledger__figure { font-size: 32px; }
/* grid-template-columns lives on Tailwind's lg:grid-cols-3 in index.html, not
   here — overriding a property Tailwind also sets unconditionally is a tied
   specificity Tailwind's later stylesheet always wins, media query or not. */
@media (min-width: 1024px) {
  .ledger__figure { font-size: 43px; }
  .ledger__cell:not(:nth-child(3n+1)) { border-left: 1px solid var(--color-tint); }
}

/* explicit prose measure (L5 law): literal ch, not a Tailwind class — the
   static checker fetches this file but never runs the Tailwind CDN script. */
.ledger__statement { max-width: 60ch; }

/* literal in-range line-heights (L1 law: 1.35–1.65) for the three elements
   the floor report measured out of range (was 1 / 1.3 / 1.7). */
.button { line-height: 1.35; }
.door-link { line-height: 1.35; }
.footer address { line-height: 1.6; }

/* door / closing-cta arrow — plain inline (not flex) so a wrapped label's
   arrow trails the last word (round-3 fix); pseudo-content with an nbsp+arrow
   isn't reliably expressible as a utility class. */
.door-link::after {
  content: "\00a0\2192";
  display: inline-block;
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}
.door-link:hover::after { transform: translateX(8px); }

/* nav dropdown disclosure marker — pseudo-element content */
.chrome__nav-group summary { list-style: none; }
.chrome__nav-group summary::-webkit-details-marker { display: none; }
.chrome__nav-group summary::after { content: "\25BE"; margin-left: 8px; font-size: 13px; }

/* drop-cap initial + hanging punctuation — no utility-class equivalent */
.quote__text { hanging-punctuation: first allow-end; }
.quote__text p::first-letter {
  float: left;
  color: var(--color-plum);
  font-weight: 700;
  font-size: 101px;
  line-height: var(--lh-dropcap);
  padding-right: 8px;
}

:focus-visible { outline: 1px solid var(--color-plum); outline-offset: 8px; }

/* SIGNATURE MOTION 1/2 — CSS scroll-timeline reveal (independent of the
   ledger-rule draw-in, which is GSAP + ScrollTrigger — see index.html).
   Resting state stays fully legible: opacity floors at 0.88, never 0. */
.reveal { opacity: 1; transform: none; }
@keyframes reveal-in {
  from { opacity: 0.88; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* CAPTURE MODE — ?capture=1: every animation forced to its settled end state
   (GSAP's own animations are skipped at creation time in index.html; this
   covers the CSS reveal + the ledger-rule's resting baseline). */
.capture-mode .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
.capture-mode .ledger__rule { transition: none !important; transform: scaleX(1) !important; }