/* ═══════════════════════════════════════════════════════════════════════
   HOME HERO — grid-canvas variant ("rosa")   ·  added 2026-08-20
   Ported from new-heros experiment (index-hero-grid-rosa.html).
   Scoped to body.home so it never touches the heroes on about/work/
   contact/how-i-build. Paired with js/hero-fx.js (animated grid canvas,
   data-hero-fx="rosa") and the hero markup in index.html.

   To undo: remove the <link> to this file + the <script src="js/hero-fx.js">
   from index.html, restore the old hero markup, and delete this file.
   The site-wide study-row ink-wipe lives separately in pages.css (.study).
   ═══════════════════════════════════════════════════════════════════════ */

body.home .hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--paper);
}

/* animated grid lattice canvas — sits behind the content, never interactive */
body.home .hero-fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}

body.home .hero-inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}

body.home .hero-eyebrow { justify-content: center; }
body.home .hero-eyebrow span {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.26em;
  white-space: nowrap;
}

body.home .hero h1 {
  font-size: var(--fs-d5);
  line-height: 0.95;
  max-width: 13ch;
}

body.home .hero-sub { margin-left: auto; margin-right: auto; }
body.home .hero-sub.lede { font-size: clamp(21px, 2vw, 30px); }

/* Visual chrome comes from the shared .cta rule in pages.css; the hero only
   adds its centered placement below the standfirst. */
body.home .hero .cta { margin-top: 44px; margin-inline: auto; }