/* ==========================================================================
   Story — "Our story: Geumsan, and the age of burnout".
   Sits on the default dark ground. Typography, ink, band grounds and section
   padding all come from the shared token classes (`.container`, `.section`,
   `.band-dark`, `.band-accent`, `.band-sunken`, `.title-*`, `.eyebrow`,
   `.muted`, `.prose`, `.label`, `.plx-frame`, `.btn`). This file carries only
   the per-section layout ported from the source's own design system: the narrow
   hero measure, the fixed parallax band, the two-column media/copy splits, the
   numbered belief rows and the mission grid.
   ========================================================================== */

/* Story hero — left-aligned eyebrow + serif display + rose sub-headline ------
   A narrower measure than the page container (1100px). Padding-inline tracks
   the global gutter (via `.container`); the display and sub-headline are held to
   a ch-measure so each wraps to two lines exactly as the source does. */
.story-hero {
  max-width: 1100px;
  padding-block: clamp(4rem, 10vw, 8rem) clamp(2rem, 5vw, 3.5rem);
}

.story-hero__h {
  margin-block: var(--sp-4) var(--sp-4);
  max-width: 14ch;
}

.story-hero__sub {
  max-width: 20ch;
  color: var(--accent-text);
}

/* Story parallax — full-bleed, image-only fixed band ------------------------
   Same fixed-media trick as the home `.plx` sachets band: `clip-path: inset(0)`
   makes the figure the containing block for its own `position: fixed` image, so
   the runner photo holds still while the band travels over it (works on iOS,
   unlike background-attachment: fixed). Reduced motion drops the image back to
   an absolutely-positioned static frame. */
.story-band {
  height: clamp(340px, 58vh, 620px);
  margin: 0;
  background: var(--ground-sunken);
}

.plx-fixed {
  position: relative;
  clip-path: inset(0);
}

.plx-fixed img {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Safari never clips this image to the band, so the runner photo stuck to the
   viewport and painted across the whole page (QA R2-07). The fallback lives
   with the shared .plx-fixed definition in components.css, which every page
   loads — see the note there. These rules duplicate that definition and should
   fold into it the next time this file is opened for real work. */

.story-band img {
  object-position: center 62%;
}

@media (prefers-reduced-motion: reduce) {
  .plx-fixed img {
    position: absolute;
  }
}

/* Story intro — centred container, narrow prose column ---------------------- */
.story-intro__lead {
  margin-bottom: var(--sp-5);
}

.story-intro .muted + .muted {
  margin-top: var(--sp-4);
}

/* Origin split — dark full-bleed band, framed media + copy ------------------
   The media fills its grid track and the image is over-scaled inside a clipping
   frame (shared `.plx-frame`), matched here to a 4/5 ratio. */
.origin-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.origin-split__media {
  min-height: 520px;
  overflow: hidden;
}

.origin-split__media.plx-frame {
  aspect-ratio: 4 / 5;
}

.origin-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.origin-split__media.plx-frame img,
.founder__media.plx-frame img {
  position: absolute;
  top: -14%;
  left: 0;
  width: 100%;
  height: 128%;
  aspect-ratio: auto;
  object-fit: cover;
}

.origin-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-9) clamp(1.5rem, 5vw, 4.5rem);
}

.origin-split__copy .title-xl {
  margin-bottom: var(--sp-2);
}

/* Beliefs — eyebrow + three numbered rows divided by hairline rules --------- */
.beliefs__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-6);
}

.belief {
  display: grid;
  grid-template-columns: 90px minmax(200px, 1fr) 1.3fr;
  gap: var(--sp-6);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--rule);
}

.belief__n {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent-text);
}

/* Each child is pinned to its column (QA-23). The numeral is an empty <p>
   whose "01" comes from a CSS counter, and Shopline's base sheet hides
   `p:empty` — the numeral vanished, the title auto-placed into the 90px
   numeral column and broke letter by letter. `.beliefs .belief__n:empty`
   outranks the base rule, and the explicit columns stop any future shift. */
.beliefs .belief__n:empty {
  display: block;
}

.belief > .belief__n { grid-column: 1; }
.belief > .title { grid-column: 2; }
.belief > .muted { grid-column: 3; }

/* Founder — sunken band, framed portrait + serif-sized pull-quote ----------- */
.founder__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--sp-8);
  align-items: center;
}

.founder__media.plx-frame {
  aspect-ratio: 4 / 5;
}

.founder__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.founder__quote {
  margin: 0;
}

.founder__quote .title-lg {
  text-wrap: balance;
}

.founder__by {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.founder__by .label {
  color: var(--accent-text);
}

/* Mission — oxblood accent band, two statements + a single ghost CTA -------- */
.mission__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

/* One step down from title-lg (46px → 32px max) and in the display face
   (QA-24). At the old size, five lines of body-face sans on each side read as
   a wall; Marcellus matches the page's other large statements. */
.mission__t {
  margin-top: var(--sp-4);
  max-width: 34ch;
  font-family: var(--font-display);
  line-height: 1.25;
}

/* The button is a block sitting straight in the grid (the prototype's
   .mission__cta wrapper didn't survive the block conversion). Full row under
   both statements, natural width, not stretched (QA-24). Colours come from
   the global `.band-accent .btn--ghost` rule in base.css. */
.mission__grid > .btn {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--sp-6);
}

/* Responsive — stack the two-column bands and the belief rows --------------- */
@media (max-width: 860px) {
  .origin-split,
  .founder__grid,
  .mission__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .origin-split__media {
    min-height: 300px;
  }

  .origin-split__copy {
    padding-block: var(--sp-7);
  }

  .belief {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
}