/* =====================================================================
   GENERATED FILE -- DO NOT EDIT.

   Built from _source/assets/components/hero.css by _dev/generate/theme-assets.mjs. Edit the
   snapshot and regenerate; a hand edit here fails the gate at commit
   rather than surviving to contradict its source. The snapshot is frozen:
   it has been the design of record since 2026-10-08 (frozenOn in its
   source.json), so it is edited in place and never re-synced.

     node _dev/generate/theme-assets.mjs redfish   rebuild this file

   The file below is the static site's stylesheet verbatim, comments and
   all, and unchanged: the hero component, every selector
   under .c-hero.

   NOTHING WORDPRESS-SPECIFIC GOES IN THIS FILE. Adapter rules that map
   block markup onto these components live in native-adapters.css, which
   is hand-written and loads after this one. Keeping them apart is what
   lets this copy stay diffable against the original.
   ===================================================================== */

/* hero: the photographic opening band of the home page.
   Root: <section class="hero c-hero">. */
.c-hero { position: relative; padding-block: clamp(24px, 4vw, 40px) clamp(40px, 6vw, 72px); }
.c-hero .hero-stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: clamp(320px, 44vh, 470px);
  display: flex; align-items: flex-end;
  color: #fff;
  background:
    radial-gradient(120% 130% at 75% 0%, #333333 0%, var(--ink-2) 45%, var(--ink) 100%);
}
.c-hero .hero-stage::before { /* waterline grid motif */
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,.05) 58px 59px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255,255,255,.05) 58px 59px);
  mask-image: radial-gradient(130% 110% at 70% 20%, #000 30%, transparent 80%);
}
.c-hero .hero-stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.44) 46%, rgba(0,0,0,.04) 78%),
    linear-gradient(to right, rgba(0,0,0,.52) 0%, rgba(0,0,0,.16) 46%, transparent 72%);
}
.c-hero .hero-inner { position: relative; z-index: 4; padding: clamp(20px, 3.4vw, 40px); width: 100%; }
.c-hero h1 {
  font-size: clamp(32px, 4.2vw, 52px); font-weight: 700; max-width: 34ch; color: #fff;
  margin-top: 10px;
}
.c-hero h1 em { font-style: normal; color: var(--accent-light); }
.c-hero .lede { font-size: clamp(16px, 1.4vw, 18px); color: rgba(255,255,255,.82); max-width: 68ch; margin-top: 14px; }
.c-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.c-hero .hero-meta {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 38px); margin-top: 20px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16);
}
.c-hero .hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.c-hero .hero-meta b { font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 25px); font-weight: 700; letter-spacing: -.02em; }
.c-hero .hero-meta span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ── cinematic hero photo + gentle parallax ── */
.c-hero .hero-stage.has-photo { background: var(--ink); }
.c-hero .hero-stage.has-photo::before { display: none; }
.c-hero .hero-photo { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; z-index: 1; will-change: transform; }
.c-hero .hero-stage::after { z-index: 2; }
.c-hero .hero-inner { z-index: 4; }