/* ─────────────────────────────────────────────────────────────────
   Pebble & Silver — v1.5 homepage hero
   Extracted from the homepage mock-up's inline <style>. Only the hero
   and Latest Launch rules the delivered page uses are carried here; the
   mock-up's .index-head / .feature / .forecast / .prop-grid / .about
   styles are for sections that are NOT built and are intentionally left
   out. Built strictly on tokens.css.
   ───────────────────────────────────────────────────────────────── */

:root { --accent: var(--color-ochre); }

/* ── Hero (night-sky star chart) ── */
.hero {
  background: var(--color-ink);
  color: var(--color-bone);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; color: var(--color-bone); }
/* The oversized top padding the sparse text-free shell needed is gone now
   that the hero carries copy — back to the mock-up's --space-9. */
.hero__inner {
  position: relative; z-index: 2;
  padding-top: var(--space-9);
  padding-bottom: 220px;
}
.hero__eyebrow { color: var(--color-bone); opacity: 0.7; }
.hero h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-4);
  max-width: 16ch;
}
.hero h1 .it { font-style: italic; }
.hero__lede {
  margin-top: var(--space-3);
  max-width: 52ch;
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--color-bone);
  opacity: 0.78;
}
.hero__lede p { margin: 0; }
.hero__lede p + p { margin-top: var(--space-5); }
.hero__actions { margin-top: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ── Latest launch block ──
   Sits inside .hero__inner, below the lede, separated by a hairline rule.
   Shares the lede's 52ch measure so the two stack on one left edge. ── */
.launch { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid rgba(255,255,255,0.16); max-width: 52ch; }
.launch__eyebrow { color: var(--color-ochre); opacity: 1; }
.launch__title { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.04; letter-spacing: var(--tracking-tight); margin-top: var(--space-2); }
.launch__title .it { font-style: italic; }
.launch__body { margin-top: var(--space-4); font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-bone); opacity: 0.78; }
.launch__actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ── Hero entrance: lines start bunched, settle into place over ~5s ──
   Base state is the visible/settled state; we animate FROM hidden via a
   one-shot keyframe, so text is never stuck invisible (print / reduced
   motion / capture all show the settled hero).

   --ty is a ramp: each line down the hero starts further above its resting
   place, so the block reads as settling open rather than sliding as one
   piece. The mock-up's ramp (-8/-20/-34/-50) was spaced for FOUR lines
   including an h1 between the eyebrow and the lede. This page has no h1
   (see Index.cshtml), and at -8px the eyebrow travelled so much less than
   its neighbours that it looked static. Re-spaced across the three lines
   that actually exist, in even ~16px steps. ── */
@media (prefers-reduced-motion: no-preference) {
  .hero.is-in .hero__inner > .hero__eyebrow { --ty: -18px; --op: 0.7;  animation: heroIn 5s var(--ease-standard) 0.5s  both; }
  .hero.is-in .hero__inner > h1             { --ty: -20px; --op: 1;    animation: heroIn 5s var(--ease-standard) 0.6s  both; }
  .hero.is-in .hero__inner > .hero__lede    { --ty: -34px; --op: 0.78; animation: heroIn 5s var(--ease-standard) 0.7s  both; }
  .hero.is-in .hero__inner > .hero__actions { --ty: -50px; --op: 1;    animation: heroIn 5s var(--ease-standard) 0.8s  both; }
  .hero.is-in .hero__inner > .launch        { --ty: -50px; --op: 1;    animation: heroIn 5s var(--ease-standard) 0.8s  both; }
}
@keyframes heroIn {
  0%   { opacity: 0; transform: translateY(var(--ty, -20px)); }
  35%  { opacity: var(--op, 1); }
  100% { opacity: var(--op, 1); transform: none; }
}
.hero__ridge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; width: 100%; height: auto; }
.hero__meta {
  position: relative; z-index: 2;
  display: flex; gap: var(--space-6); flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
}
.hero__meta div { display: flex; flex-direction: column; gap: 2px; }
.hero__meta .k { font-family: var(--font-mono); font-size: var(--text-mono-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; opacity: 0.55; }
.hero__meta .v { font-family: var(--font-serif); font-style: italic; font-size: var(--text-display-1); }