/* pages.css: hero and page-specific compositions */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  border-bottom: 1px solid var(--hairline);
}
.hero > * { grid-area: 1 / 1; }
.hero__media { width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%; /* keep the quiet upper region behind the copy */
}
.hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(7, 8, 18, 0.55) 0%,
    rgba(7, 8, 18, 0.35) 40%,
    rgba(7, 8, 18, 0.82) 78%,
    var(--bg) 100%
  );
}
.hero__content {
  position: relative;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 7rem) var(--gutter) clamp(3rem, 8vh, 6rem);
  align-self: end;
}
/* Width matched to the "Science-fiction grand strategy" eyebrow below
   (289px of ink): the mark carries ~4px of transparent margin per side, so
   the box goes 8px wider and shifts 4px left to put both edges on the text
   grid. Smaller than the pre-v2 size, with extra air below; no centred
   scale, which moved the left edge off the grid. */
.hero__logo { width: min(297px, 70vw); height: auto; margin: 0 0 2.25rem -4px; }
.hero__headline { max-width: 18ch; color: var(--text); }
.hero__copy {
  max-width: 46ch;
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 2rem 0 1.25rem;
}
.release-line {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--teal);
  margin: 0;
}

/* Quiet hero reveal: opacity only, never delays or hides the Steam action. */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    animation: hero-rise 700ms ease-out both;
  }
  .hero__content > *:nth-child(2) { animation-delay: 60ms; }
  .hero__content > *:nth-child(3) { animation-delay: 120ms; }
  .hero__content > *:nth-child(4) { animation-delay: 180ms; }
  .hero__content > *:nth-child(5) { animation-delay: 240ms; }
  .hero__content > *:nth-child(6) { animation-delay: 300ms; }
}
@keyframes hero-rise {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* ---------- Overview / editorial sections ---------- */
.lead { font-size: var(--step-1); color: var(--text); }
.section-copy { color: var(--text-secondary); }

/* Columns start together at the top. Vertical centring floated the shorter
   column and opened dead bands above and below the figure. */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split figure { margin: 0; }
.split img {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.split figcaption {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  color: var(--text-secondary);
  text-align: right;
}
/* Statement variant: heading held in the left column against the body copy.
   Used once on the page, on the overview, so it stays a moment of emphasis
   rather than a template applied to every section. */
.split--statement h2 { margin-bottom: 0; }
.split--statement .lead { max-width: var(--measure); }
.split--statement > div > p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split figure { order: 2; } /* copy before decorative art on mobile */
  .split--statement { gap: 1rem; }
  .split--statement h2 { margin-bottom: 0.6em; }
}

/* ---------- Simple interior pages (privacy, legal, thanks, 404) ---------- */
.page-main { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
/* Document pages are a single reading column. At the full 1200px the section
   rules ran three times the width of the text they belonged to. */
.page-main > .container { max-width: 44rem; }
.page-main h1 { font-size: var(--step-3); margin-bottom: 1.25rem; }
.page-main h2 {
  font-size: var(--step-2);
  margin-top: 2.75rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.75rem;
}
.page-main section > p,
.page-main li { color: var(--text-secondary); }
.page-main ul { padding-left: 1.25rem; }
.page-main li { margin-bottom: 0.4rem; }

.doc-date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}