/* ==========================================================================
   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; the display face 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);
}

/* The Geumsan line art closes the band: the right column of the button's
   row, sitting on the band's bottom edge. The button keeps the left column
   and the top of the row, so nothing is drawn behind text. */
.mission:has(.mission__art) {
  padding-bottom: 0;
  overflow-x: clip;
}

.mission__grid:has(.mission__art) > .btn {
  grid-column: 1;
  align-self: start;
}

.mission__art {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-6);
  min-width: 0;
}

.mission__art .geu {
  width: min(100%, 34rem);
}

@media (max-width: 860px) {
  .mission__grid:has(.mission__art) > .btn,
  .mission__art {
    grid-column: 1;
  }

  .mission__art .geu {
    width: calc(100% + var(--gutter));
  }
}

/* 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);
  }
}