/* IGW hero grammar 0.1.3
   Copyright © 2026 Interstellar Gateway. All rights reserved.

   One hero grammar for the content routes. Kicker, H1 and lede on the left at
   the same top offset on every route (150 px at desktop, 120 on tablets, 110
   on phones — the paddings the Designer classes already carry); on the right,
   the instrument the page owns or an IGW frame; never an empty wash. The
   design audit of 2026-09-04 (§4.3, §7(c)2) measured the fold of the content
   routes at 65–95 % black ground with text and 0–2 % imagery, on a site whose
   company films rocket launches. This sheet lays the cinema layer onto the
   instrument the site already has, without redesigning it.

   How it attaches. A hero that carries a frame — a figure with
   data-igw-hero-frame appended as its last child — becomes a two-column grid
   from 768 px: copy in column one, the frame in column two, stretched to the
   copy's height and never shorter than a 4:5 object. Where the page owns an
   instrument (the NEXT FLIGHT panel on /starship, the next-launch card on
   /launches) that panel sits inside the frame, over the photograph's foot,
   at every width. Below 768 px the copy wrapper is flattened and the order
   becomes kicker, H1, frame, lede, so the frame is in the first screen on a
   phone too. A hero without a frame is left exactly as the Designer built it:
   every layout rule is gated on :has(> [data-igw-hero-frame]).

   Tokens are docs/design/SPEC.md: ground #050505, card fill #0b0d0f, edges
   rgba(255,255,255,.14), 4 px on framed images, 2 px on panels, credits at
   11 / 600 / .08em. No accent anywhere in this sheet. Photograph credits are
   IGW's own attribution (docs/media/PHOTO-LIBRARY.md), not source citations.

   0.1.1 — THE PHONE OFFSET WAS STILL SIZED FOR THE OLD NAVIGATION. 0.1.0
   padded the framed hero 110 px at <=767 and 96 at <=479, which is the
   dead band the design review of 2026-09-05 measured on eight routes: 121 px
   of empty ground between a 71 px nav and the kicker, the first fifth of
   every phone screen. Those values were written when the fixed nav was
   187 px and never revisited when it went to 71. Now 56 and 48. The page
   wrapper (.igw2-page) carried the same stale 96 and was corrected in the
   Designer the same day.

   0.1.2 — THE ABOUT FAMILY JOINS THE GUTTER. 0.1.1 centred a 1,180 px content
   box on /about-us, /contact, /media-licensing and /store (padding
   max(6vw, (100% − 1180px) / 2)), which put their H1 at x = 130 at 1440 while
   every other route opens at the 6 vw gutter, x = 86: two grids on one site,
   44 px apart, on pages that sit next to each other in the footer (design
   review 2026-09-05 §3.3). The hero now pads 6 vw like its neighbours and the
   about blocks fill the content box; the Designer classes igw2-about-inner
   and igw2-about-grid were widened to 100 % the same day so the sections
   below the hero align with it. Nothing else changed.

   0.1.3 (2026-09-08, design review §3.4) - THE ABOUT FAMILY OPENS AT THE SAME
   OFFSET AS EVERY OTHER CONTENT ROUTE. /about-us, /contact, /media-licensing
   and /store now carry a kicker above the H1, inside the first
   .igw2-about-inner like the rest of their copy. That block is a flex column
   with a 24 px gap, so the kicker takes a -24 px bottom margin here to land
   the H1 at 189 px (150 + 11 + 28), where /launches, /starship, /news and
   /notices open; on phones, where the wrapper dissolves into the hero's grid,
   the kicker orders first (the 0.1.1 order rule only reached kickers that
   were direct children of the hero) and keeps the 10 px the other routes
   have below theirs. The two heroes that are the page's own <main> (/contact,
   /media-licensing) clear the 71 px navigation on phones from this sheet now
   - 127 px at <=767, 119 at <=479 - so the block each page head carried for
   it is retired.

   Hosted as a versioned asset and pinned with SHA-384 from each page head
   that uses it; source of truth runtimes/igwhero-0.1.3.css. */

/* ---------------------------------------------------------------- ground */
/* No radial wash on a hero this sheet governs. The ground is the ground. */
.igw2-editorial-hero,
.igw2-explore-hero,
.igw2-starship-hero,
.igw2-launches-hero {
  background-image: none;
  background-color: #050505;
}

/* The hidden row that carries the IGW channel snapshot on /starship (the
   same clip the /about-us and /news heads use): laid out, never painted. */
[data-igw-channel-feed] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The LATEST IGW OBSERVATION row, once igwlatestfilm has written the latest
   film into it: the title is the link, the publication date sits under it. */
[data-igw-starship-status="igw-observation"] .igw2-status-value {
  max-width: 64%;
  line-height: 1.35;
}
[data-igw-starship-status="igw-observation"] .igw2-status-value a {
  color: #f5f5f5;
  text-decoration: underline;
  text-decoration-color: rgba(245, 245, 245, .4);
  text-underline-offset: 3px;
}
[data-igw-starship-status="igw-observation"] .igw2-status-value a:hover,
[data-igw-starship-status="igw-observation"] .igw2-status-value a:focus-visible {
  text-decoration-color: #f5f5f5;
}
[data-igw-starship-status="igw-observation"] .igw2-status-value a:focus-visible {
  outline: 2px solid #7DB8EA;
  outline-offset: 2px;
}
[data-igw-starship-status="igw-observation"] [data-igw-latest-film-date] {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #9fa7af;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- the frame */
[data-igw-hero-frame] {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}
[data-igw-hero-photo] {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: #0b0d0f;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
}
[data-igw-hero-photo] > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
[data-igw-frame-focus="top"] [data-igw-hero-photo] > img { object-position: 50% 8%; }
[data-igw-frame-focus="upper"] [data-igw-hero-photo] > img { object-position: 50% 30%; }
[data-igw-frame-focus="left"] [data-igw-hero-photo] > img { object-position: 38% 50%; }
[data-igw-frame-focus="right"] [data-igw-hero-photo] > img { object-position: 62% 50%; }

/* A named photographer's credit, under the frame, on the micro-label step. */
[data-igw-hero-credit] {
  margin: 0;
  padding: 10px 2px 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #767e87;
  text-align: right;
}

/* The instrument the page owns rides inside the frame, over the photograph's
   foot. Both panels keep their Designer fill, edge and blur; the fill is
   raised to .74 so 11 px labels hold 4.5:1 over any frame. */
[data-igw-hero-photo] > .igw2-starship-live,
[data-igw-hero-photo] > .igw2-launches-next {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: auto;
  margin: 0;
  transform: none;
  border-radius: 2px;
  background-color: rgba(5, 5, 5, .74);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
[data-igw-hero-photo] > .igw2-launches-next { padding: 24px; }
/* The card's title is a card title: heading-2, the body face at 28 / 500
   (SPEC.md §3, amendment 3), not a section h2. */
[data-igw-hero-photo] > .igw2-launches-next .igw2-h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  word-spacing: normal;
  margin: 10px 0 8px;
}

/* --------------------------------------------- two columns, from 768 px */
@media (min-width: 768px) {
  .igw2-editorial-hero:has(> [data-igw-hero-frame]),
  .igw2-explore-hero:has(> [data-igw-hero-frame]),
  .igw2-starship-hero:has(> [data-igw-hero-frame]),
  .igw2-launches-hero:has(> [data-igw-hero-frame]) {
    display: grid;
    grid-template-columns: minmax(auto, 1fr) minmax(0, 480px);
    grid-template-rows: none;
    grid-auto-rows: auto;
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
    align-content: start;
    min-height: 0;
    padding-top: 150px;
    padding-bottom: 96px;
    perspective: none;
  }
  /* Column one keeps its automatic minimum (min-width: auto), so a headline
     word that will not fit widens the column and the frame gives way, rather
     than the word running under the frame. */
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > :not([data-igw-hero-frame]),
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > :not([data-igw-hero-frame]),
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > :not([data-igw-hero-frame]),
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > :not([data-igw-hero-frame]) {
    grid-column: 1;
  }
  /* /about-us: "SPACEFLIGHT," is 815 px wide at 120 px and cannot share a
     1180 px box with a 480 px frame. Its H1 takes a gentler ramp with the
     same floor and ceiling as display-1 (SPEC.md §3, amendment 1), as the
     Explore H1 does beside the globe: 92 px at 1440, 120 from 1875. */
  .igw2-editorial-hero[data-igw-page="about"]:has(> [data-igw-hero-frame]) h1.igw2-display {
    font-size: clamp(68px, 6.4vw, 120px);
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame] {
    grid-column: 2;
    grid-row: 1 / span 12;
    align-self: stretch;
    min-height: 600px;
  }
  /* The copy wrappers carry a translateZ for the perspective the hero no
     longer has; with perspective gone the transform would do nothing, and
     it is dropped so the H1 measures at its stated size, as on /news. */
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > .igw2-starship-hero-copy,
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > .igw2-launches-hero-copy,
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > .igw2-explore-copy {
    transform: none;
  }

  /* The about family (/about-us, /contact, /media-licensing, /store) opens
     on the same 6 vw gutter as every other route (0.1.2; 0.1.1 centred a
     1,180 px box here). The first inner block is the copy column, and
     everything after the frame — cards, further blocks, plates, the form —
     spans both columns across the content box. */
  .igw2-editorial-hero:has(> .igw2-about-inner:first-child):has(> [data-igw-hero-frame]) {
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child {
    width: auto;
    max-width: none;
    margin: 0;
  }
  /* The about family's kicker (0.1.3): the copy block is a flex column with a
     24 px gap, so the kicker gives that gap back and the H1 lands at 189 px,
     the offset the other content routes open on. */
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child > .igw2-kicker {
    margin-bottom: -24px;
  }
  /* A spanning block with a fixed 1180 px width would push its width into
     the copy column's minimum and collapse the frame to nothing (measured:
     grid "1132px 0px"). They span the content box instead: 88 vw, 1,267 px
     at 1440. */
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child ~ :not([data-igw-hero-frame]) {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .igw2-editorial-hero:has(> [data-igw-hero-frame]),
  .igw2-explore-hero:has(> [data-igw-hero-frame]),
  .igw2-starship-hero:has(> [data-igw-hero-frame]),
  .igw2-launches-hero:has(> [data-igw-hero-frame]) {
    grid-template-columns: minmax(auto, 1fr) minmax(0, 40%);
    column-gap: 40px;
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame] {
    min-height: 520px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .igw2-editorial-hero[data-igw-page="about"]:has(> [data-igw-hero-frame]) h1.igw2-display {
    font-size: clamp(56px, 6.4vw, 96px);
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]),
  .igw2-explore-hero:has(> [data-igw-hero-frame]),
  .igw2-starship-hero:has(> [data-igw-hero-frame]),
  .igw2-launches-hero:has(> [data-igw-hero-frame]) {
    grid-template-columns: minmax(auto, 1fr) minmax(0, 40%);
    column-gap: 32px;
    padding-top: 120px;
    padding-bottom: 72px;
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame] {
    min-height: 440px;
  }
  [data-igw-hero-photo] > .igw2-starship-live,
  [data-igw-hero-photo] > .igw2-launches-next {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  [data-igw-hero-photo] > .igw2-launches-next { padding: 18px; }
  [data-igw-hero-photo] > .igw2-launches-next .igw2-h2 { font-size: 21px; }
}

/* ------------------------------------------------- one column, phones */
@media (max-width: 767px) {
  .igw2-editorial-hero:has(> [data-igw-hero-frame]),
  .igw2-explore-hero:has(> [data-igw-hero-frame]),
  .igw2-starship-hero:has(> [data-igw-hero-frame]),
  .igw2-launches-hero:has(> [data-igw-hero-frame]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 0;
    column-gap: 0;
    align-items: start;
    align-content: start;
    min-height: 0;
    padding-top: 56px;
    perspective: none;
  }
  /* The copy wrapper dissolves so its kicker, H1 and lede are grid items of
     the hero and the frame can sit between the H1 and the lede. */
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > .igw2-starship-hero-copy,
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > .igw2-launches-hero-copy,
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > .igw2-explore-copy,
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child {
    display: contents;
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > *,
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > *,
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > *,
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > *,
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > .igw2-starship-hero-copy > *,
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > .igw2-launches-hero-copy > *,
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > .igw2-explore-copy > *,
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child > * {
    grid-column: 1;
    min-width: 0;
    order: 5;
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-kicker,
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child > .igw2-kicker,
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > .igw2-explore-copy > .igw2-kicker,
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > .igw2-starship-hero-copy > .igw2-kicker,
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > .igw2-launches-hero-copy > .igw2-kicker {
    order: 1;
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > h1,
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child > h1,
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > .igw2-explore-copy > h1,
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > .igw2-starship-hero-copy > h1,
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > .igw2-launches-hero-copy > h1 {
    order: 2;
    margin-bottom: 24px;
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame],
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > [data-igw-hero-frame] {
    order: 3;
    grid-row: auto;
    align-self: start;
    min-height: 0;
    margin: 0 0 24px;
  }
  [data-igw-hero-photo] { aspect-ratio: 4 / 5; }
  /* 0.1.3: in the phone grid (row-gap 0) the about family's kicker keeps the
     10 px every other route has below its kicker, not the desktop -24. */
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child > .igw2-kicker {
    margin-bottom: 10px;
  }
  /* 0.1.3: where the hero is the page's own <main> (/contact,
     /media-licensing) there is no .igw2-page wrapper to clear the fixed 71 px
     navigation, so the hero clears it itself: 71 + 56 here, 71 + 48 below 480.
     The html prefix outranks the phone rule above, which weighs (0,4,0). */
  html main.igw2-editorial-hero.igw2-hero-plain:has(> [data-igw-hero-frame]) {
    padding-top: 127px;
  }
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > h1 + p,
  .igw2-editorial-hero:has(> [data-igw-hero-frame]) > .igw2-about-inner:first-child > h1 + p,
  .igw2-explore-hero:has(> [data-igw-hero-frame]) > .igw2-explore-copy > h1 + p,
  .igw2-starship-hero:has(> [data-igw-hero-frame]) > .igw2-starship-hero-copy > h1 + p,
  .igw2-launches-hero:has(> [data-igw-hero-frame]) > .igw2-launches-hero-copy > h1 + p {
    order: 4;
  }
  [data-igw-hero-photo] > .igw2-starship-live,
  [data-igw-hero-photo] > .igw2-launches-next {
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 2px;
  }
  [data-igw-hero-photo] > .igw2-launches-next { padding: 18px; }
  [data-igw-hero-photo] > .igw2-launches-next .igw2-h2 { font-size: 21px; }
}

/* Below 480 the hero templates open at 96 px, not 110 (the Designer's tiny
   breakpoint), and the frame follows the same step. */
@media (max-width: 479px) {
  .igw2-editorial-hero:has(> [data-igw-hero-frame]),
  .igw2-explore-hero:has(> [data-igw-hero-frame]),
  .igw2-starship-hero:has(> [data-igw-hero-frame]),
  .igw2-launches-hero:has(> [data-igw-hero-frame]) {
    padding-top: 48px;
  }
  html main.igw2-editorial-hero.igw2-hero-plain:has(> [data-igw-hero-frame]) {
    padding-top: 119px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-igw-hero-photo] > img { transition: none; }
}