/* ──────────────────────────────────────────────────────────────
   Cohort — landing layer (loads after styles.css).
   Slimmed 2026-07 for "The Filed Record" redesign: only the four
   blocks the marketing page still uses survive — on-plate button
   variants, the hero top-nav, and the final-CTA panel. The retired
   showcase / marquee / bento / stats worlds are gone.
   ────────────────────────────────────────────────────────────── */

/* ─── Button variants for ink plates ──────────────────────────
   Primary on a plate inverts: paper fill, ink text (a stamp). */
.btn--on-dark {
  background: var(--clr-paper);
  color: var(--clr-ink);
}
.btn--on-dark:hover {
  background: var(--clr-white);
  color: var(--clr-ink);
}
.btn--ghost-light {
  background: transparent;
  color: rgba(251, 247, 239, 0.92);
  border: 1px solid rgba(251, 247, 239, 0.45);
}
.btn--ghost-light:hover {
  background: rgba(251, 247, 239, 0.08);
  border-color: var(--clr-paper);
  color: var(--clr-paper);
}

/* ─── Top nav over the paper cover ────────────────────────────
   The cover is warm paper, so the resting nav is transparent with
   ink text. Once scrolled (.is-stuck via main.js at 40px,
   .is-scrolled via the inline script at 12px) it solidifies to
   94% paper + blur with a warm hairline underneath. */
.topnav--hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.topnav--hero .logo__brand { color: var(--clr-ink-warm); }
.topnav--hero .logo__sub { color: var(--clr-ink-warm-2); }
.topnav--hero .topnav__links a:not(.btn) { color: var(--clr-ink-warm); }
.topnav--hero .topnav__links a:not(.btn):hover { background: rgba(0, 26, 45, 0.06); }
.topnav--hero .menu-toggle { color: var(--clr-ink-warm); }
/* Nav CTA: the ink stamp, in both nav states (no mid-blue button survives). */
.topnav--hero .btn--primary,
.topnav--hero.is-stuck .btn--primary,
.topnav--hero.is-scrolled .btn--primary {
  background: var(--clr-ink);
  color: var(--clr-paper);
}
.topnav--hero .btn--primary:hover,
.topnav--hero.is-stuck .btn--primary:hover,
.topnav--hero.is-scrolled .btn--primary:hover {
  background: var(--clr-ink-2);
  color: var(--clr-paper);
}
.topnav--hero.is-stuck,
.topnav--hero.is-scrolled {
  background: color-mix(in srgb, var(--clr-paper) 94%, transparent);
  backdrop-filter: saturate(1.05) blur(10px);
  -webkit-backdrop-filter: saturate(1.05) blur(10px);
  border-bottom: 1px solid var(--clr-hair-warm);
}
.topnav--hero.is-stuck .logo__brand,
.topnav--hero.is-scrolled .logo__brand { color: var(--clr-ink-warm); }
.topnav--hero.is-stuck .logo__sub,
.topnav--hero.is-scrolled .logo__sub { color: var(--clr-ink-warm-2); }
.topnav--hero.is-stuck .topnav__links a:not(.btn),
.topnav--hero.is-scrolled .topnav__links a:not(.btn) { color: var(--clr-ink-warm); }
.topnav--hero.is-stuck .menu-toggle,
.topnav--hero.is-scrolled .menu-toggle { color: var(--clr-ink-warm); }
@media (max-width: 820px) {
  .topnav--hero .topnav__links.is-open {
    background: var(--clr-paper);
    border-bottom: 1px solid var(--clr-hair-warm);
  }
  .topnav--hero .topnav__links.is-open a:not(.btn) { color: var(--clr-ink-warm); }
}

/* ─── Closing CTA (the back cover) ────────────────────────────
   The section itself is the full-bleed ink plate (marketing.css);
   .lcta is just the content frame — no panel, no glow. */
.lcta {
  position: relative;
  background: transparent;
}
.lcta__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.lcta h2 { color: var(--clr-paper); margin: 0; max-width: 22ch; }
.lcta p { color: rgba(251, 247, 239, 0.92); margin: 0.5rem 0 0; max-width: 48ch; }