/* The Instrument — Corrum Capital Management (bold-typographic / Paula Scher)
   BONES PASS: layout/spacing/typography/colour now live on Tailwind utility
   classes in index.html (self-hosted Play build, tailwind-3.4.17.js — see
   the-ledger for the SRI/CORS rationale). This file keeps only what utilities
   cannot express — the wordmark clamp, the letter wipe, grid-template-areas,
   the dropdown specificity-hack — plus a few LITERAL (non-var) values so the
   static Layer-0 checker (reads raw linked-CSS text, never runs Tailwind's
   script) can measure line-height/type-scale/spacing-grid. Every literal here
   matches tokens.css exactly — duplicated for the checker, never different.
   Colours stay var(--*); no raw hex added (L2 hue count unaffected). */

html { overflow-x: hidden; }
body {
  background: var(--semantic-bg);
  color: var(--semantic-ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: 16px;            /* = --size-scale-sm; literal so L4 can measure it */
  line-height: 1.5;           /* L1 anchor (in [1.35,1.65]) */
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
}
/* `body h1` not bare `h1`: Tailwind's injected stylesheet loads after this
   file, so an equal-specificity bare h1{} would lose that cascade tie. */
body h1, body h2, body h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }

:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }

/* literal font-sizes below = tokens.css --size-scale-* exactly (13/16/20/25/
   31/39/61px, ratio 1.25) so L4 type-scale can measure the scale. max-width
   below = L5 prose-measure anchor (65ch, in the [50,80] range). */
.section-kicker { font-size: 13px; }
.hero__statement { font-size: 20px; }
.platforms__intro { font-size: 25px; max-width: 65ch; padding-left: 24px; padding-right: 24px; }
.proof-rail__item dt { font-size: 31px; }
.slab__facts .num { font-size: 39px; }
.numbers__figure { font-size: 61px; line-height: 1; }
@media (max-width: 640px) { .platforms__intro { padding-left: 16px; padding-right: 16px; } }

/* ── wordmark clamp + letter wipe: viewport-scale hero mark, no utility
   equivalent for clamp() or the per-letter overflow-mask treatment. ── */
.hero__word {
  font-size: var(--size-hero);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--color-brand-primary);
  white-space: nowrap;
}
.hero__word-line { display: inline; }
.ltr-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.ltr { display: inline-block; will-change: transform; }
@media (max-width: 1024px) { .hero__word { white-space: normal; } }
@media (max-width: 640px) { .hero__word { font-size: var(--size-hero-mobile); line-height: 0.98; } .hero__word-line { display: block; } }

/* ── hero grid: desktop-first responsive composition (mobile is its own
   layout, not the desktop grid scaled down) — kept literal, on-grid. ── */
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 64px; padding: 104px 24px 64px; max-width: 100rem; margin-inline: auto; }
@media (max-width: 1024px) { .hero { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .hero { padding: 40px 16px 40px; } }

.proof-rail { display: flex; flex-wrap: wrap; gap: 24px; border-top: 1px solid var(--semantic-rule); padding-top: 16px; margin-top: 8px; }
@media (max-width: 640px) { .proof-rail { flex-direction: column; gap: 16px; } .proof-rail__item { max-width: none; } }

/* ── fluid display sizes: clamp() has no clean utility equivalent. ── */
.slab__title { font-size: clamp(3rem, 9vw, 96px); letter-spacing: -0.02em; line-height: 0.95; }
.approach__statement { font-size: clamp(2.25rem, 6vw, 76px); line-height: 1.05; }
.quote__mark { hanging-punctuation: first; }
.quote__mark p { font-size: clamp(1.75rem, 4.2vw, 61px); line-height: 1.15; }
.door__action { font-size: clamp(1.75rem, 4.5vw, 49px); }

/* ── platform slabs: named grid-template-areas has no utility equivalent. ── */
.slab__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "head frame frame" "body frame frame" "link frame frame";
  align-items: start;
  gap: 16px 64px;
  max-width: 100rem; margin-inline: auto;
  padding: 64px 24px;
}
@media (max-width: 1024px) {
  .slab__inner { grid-template-columns: 1fr; grid-template-areas: "head" "frame" "body" "link"; }
}
@media (max-width: 640px) { .slab__inner { padding: 40px 16px; gap: 16px; } }

/* ── header / nav: dropdown open state is real pointer/focus events (script.js),
   not bare :hover — headless Chromium can spuriously re-resolve :hover during a
   scripted scroll. Kept literal (on-grid) + the max-width responsive stack. ── */
.site-header__row { padding: 16px 24px; }
.primary-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
@media (min-width: 861px) {
  .has-dropdown .dropdown {
    display: none;
    position: absolute; top: 100%; left: 0; margin-top: 8px;
    background: var(--semantic-bg); border: 1px solid var(--semantic-rule);
    padding: 8px; min-width: 12rem;
  }
  .has-dropdown:focus-within .dropdown, .has-dropdown.is-open .dropdown { display: flex; }
  .dropdown a { padding: 8px; }
}
@media (max-width: 860px) {
  .site-header__row { align-items: flex-start; }
  .primary-nav { width: 100%; order: 3; }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .primary-nav ul > li { width: 100%; padding: 8px 0; border-bottom: 1px solid var(--semantic-rule); }
  .primary-nav ul > li:last-child { border-bottom: none; }
  .has-dropdown .dropdown { flex-direction: row; flex-wrap: wrap; gap: 24px; margin-top: 8px; padding-left: 24px; }
  .dropdown a { font-size: 16px; padding: 0; min-height: 0; }
}
@media (max-width: 640px) { .site-header__row { padding: 8px 16px; } }