/* ============================================================
   STORY PAGE (/story)  — all rules scoped with .page-story or .st-*
   New assets (hash -> readable name):
     c0360047 -> story-hero.png        4925cde8 -> story-bg-desktop.svg
     83aeae98 -> story-bg-mobile.svg   15bba834 -> founder.png
     a6ee86b6 -> journey-1994.png      8ddee42a -> journey-2010.png (tint)
     320f2ab3 -> journey-2013.png      efd07707 -> journey-2017.png (tint)
     e2d09fc8 -> journey-2019.png      7c847ac7 -> journey-2023.png
     c53b8b15 -> journey-2025.png      9d5f7eb7 -> principle-1.png
     1d56fcb2 -> principle-2.png       6076675c -> principle-3.png

   Breakpoints: desktop base = >=900, tablet = 700-899 (own shorter design
   frame, fixed 620px content column, mostly reuses mobile typography),
   mobile = <=699 (390 baseline, fluid up to 699).
   ============================================================ */
.page-story { gap: 55px; }
.page-story .ornament { display: none; }   /* story ships its own full-page backdrop */
.page-story .hero-frame { width: min(900px, 100%); }   /* story nav frame is narrower than home */
.page-story .footer-main { padding: 50px 100px; }       /* story footer content is 1240px (home is wider) */
@media (min-width: 700px) {
  .page-story .footer-col-support { gap: 19px; }        /* story desktop/tablet support column sits 6px tighter than home */
}

/* grayscale-AA parity: text on composited layers, like the published site */
.hero-story-title, .st-phil-quote, .st-quote, .st-quote-attr, .st-phil-body,
.st-founder-text, .st-journey-head, .st-tcell, .st-text-m, .st-prin-text,
.st-principles-title { transform: translate(0, 0); }

/* ---- full-page ornament backdrop ----
   No z-index anywhere in this chain: the backdrop must paint above .page's
   background (it does, as a positioned first child in DOM order) and the
   content wrappers must NOT create stacking contexts — a z-index on them
   would isolate the timeline's mix-blend-mode:overlay tints from the
   backdrop and change the blend result on the 0.9-opacity images.
   width:100% keeps the wrapper from collapsing to 0 (its only children are
   position:absolute, so without an explicit width it contributes nothing
   to layout and any centering that depends on it breaks in tablet). */
.st-bg { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.st-bg img { position: absolute; }
.st-bg .d-only { left: -1295px; top: -271px; width: 4031px; height: 12833px; }
.st-bg .m-only { left: -635px; top: 1275px; width: 1662px; height: 7906px; }

/* ---- hero: brown difference tint + centred title ---- */
.page-story .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgb(123, 109, 88); mix-blend-mode: difference;
}
.page-story .hero-copy {
  position: absolute; left: 0; top: 461px; transform: translateY(-50%);
  width: 900px; max-width: 100%;
  gap: 0; padding: 0; align-items: center;
}
.hero-story-title { font-family: var(--serif-regular); font-size: 48px; line-height: 57.6px; text-align: center; }

/* ---- tag pills (auto width, unlike the fixed home .tag-pill) ---- */
.st-pill { display: inline-flex; justify-content: center; align-items: center; background: var(--pill-bg); padding: 2px 8px; overflow: hidden; }
.st-pill p { font-family: var(--sans-bold); font-size: 12px; line-height: 16.8px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pill-fg); white-space: nowrap; }

/* ---- content wrapper: philosophy + founder + journey ---- */
.st-content { position: relative; width: 1280px; max-width: 100%; display: flex; flex-direction: column; gap: 50px; align-items: center; padding-top: 100px; }

/* philosophy */
.st-philosophy { width: 100%; display: flex; flex-direction: column; gap: 64px; align-items: center; padding: 0 75px 75px; }
.st-phil-quote { width: 1000px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.st-quote { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; text-align: center; width: 100%; }
.st-quote-attr { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; text-align: right; width: 100%; }
.st-phil-body { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; text-align: center; width: 1000px; max-width: 100%; }

/* founder */
.st-founder { width: 100%; display: flex; gap: 50px; align-items: center; padding: 0 50px; }
.st-founder-text { width: 565px; display: flex; flex-direction: column; gap: 48px; justify-content: center; align-items: flex-start; }
.st-founder-name { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; }
.st-founder-body { display: flex; flex-direction: column; }
.st-founder-body p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; }
.st-founder-img { width: 565px; height: 653px; overflow: hidden; }
.st-founder-img img { width: 100%; height: 100%; object-fit: cover; }

/* journey */
.st-journey { width: 100%; display: flex; flex-direction: column; gap: 150px; align-items: center; padding: 154px 50px; }
.st-journey-head { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.st-journey-title { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; text-align: center; }

.st-rows { position: relative; width: 1180px; max-width: 100%; display: flex; flex-direction: column; gap: 180px; align-items: center; }
/* animated centre line (desktop timeline only): geometry copied from the
   published code component — 12px left of centre, width from aspect-ratio */
.st-line {
  position: absolute; left: calc(50% - 12px); top: 0; bottom: 0;
  aspect-ratio: 18.6170196533203 / 2305;
  transform: translateX(-50%);
  overflow: clip;
  pointer-events: none;
}
.st-line svg { display: block; width: 100%; height: 100%; }
/* row height is NOT fixed: it's driven by its tallest child (almost always
   the square/tall image) so the whole timeline reflows fluidly between
   1180px and ~870px container width (900-1024). Only .st-row-6 (the 2023
   row, tall image) keeps an explicit fixed height — the tall image is
   intentionally allowed to overflow it, matching the mirror. */
.st-row { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.st-row-6 { height: 350px; }
.st-tcell { width: 435px; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; }
.st-tcell.pr { padding-right: 50px; }
.st-tcell.pl { padding-left: 50px; }
.st-year { font-family: var(--sans-bold); font-size: 10px; line-height: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--cream); text-align: center; }
.st-card-title { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; text-align: center; width: 100%; }
.st-card-body, .st-card-body p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; text-align: center; }
/* the published body paragraphs are pre-wrap: double spaces inside the copy
   are significant and move line breaks (e.g. the 2019 card) */
.st-card-body p, .st-founder-body p, .st-prin-body p { white-space: pre-wrap; }
.st-icell { width: 435px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.st-icell.end { align-items: flex-end; padding-left: 50px; }
.st-icell.start { align-items: flex-start; padding-right: 50px; }
/* image fills its icell's content box and shrinks with it (icell is a fixed
   435px flex-basis down to container ~870px, then flex-shrinks below that —
   min-width:0 above is what allows the shrink). aspect-ratio keeps it square
   without needing a fixed height, so .st-row above can size to it. */
.st-img { width: 100%; aspect-ratio: 1 / 1; height: auto; max-width: 385px; overflow: hidden; position: relative; flex-shrink: 0; }
.st-img img { width: 100%; height: 100%; object-fit: cover; }
.st-img-tall { aspect-ratio: 385 / 413; max-width: 385px; }
.st-img.o97 img, .st-img-m.o97 img { opacity: 0.97; }
.st-img.o90 img, .st-img-m.o90 img { opacity: 0.9; }
.st-img.o98 img, .st-img-m.o98 img { opacity: 0.98; }
.st-img.o80 img, .st-img-m.o80 img { opacity: 0.8; }
.st-img.tint::after, .st-img-m.tint::after {
  content: ""; position: absolute; inset: 0;
  background: rgb(77, 66, 51); mix-blend-mode: overlay;
}
/* live update 19 Jul 2026: the 2025 row tightened — row 645px -> 435px, image
   645x645 -> 435x435 centred in its former 645px slot (page total -210px).
   Between 900 and ~1070px viewport the slot itself is fluid (clamp), matching
   the mirror's measured a6ee86b6-style linear growth capped at 435px. */
.st-row-last { width: min(1075px, 100%); align-self: flex-start; display: flex; gap: 0; align-items: center; justify-content: space-between; }
.st-row-last .st-tcell { width: clamp(350px, calc(50vw - 100px), 435px); padding-right: 0; }
.st-img-lg { width: clamp(350px, calc(50vw - 100px), 435px); aspect-ratio: 1 / 1; margin-left: 0; overflow: hidden; }
.st-img-lg img { width: 100%; height: 100%; object-fit: cover; }

/* guiding principles — desktop: three equal fluid-flex columns */
.st-principles { position: relative; width: 1280px; max-width: 100%; display: flex; flex-direction: column; gap: 72px; align-items: center; padding: 0 50px 100px; }
.st-principles-title { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; text-align: center; width: 100%; }
.st-prin-row { width: 1180px; max-width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.st-prin-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; padding: 0 8px; }
.st-prin-img { width: 100%; overflow: hidden; position: relative; }
.st-prin-img img { width: 100%; height: 100%; object-fit: cover; }
.st-prin-img.o85 img { opacity: 0.85; }
.st-prin-col1 .st-prin-img { aspect-ratio: 1 / 1; } /* live update 19 Jul 2026: was 250x250, now maxes at 377x377 */
.st-prin-col2 .st-prin-img, .st-prin-col3 .st-prin-img { aspect-ratio: 377 / 369; }
.st-prin-text { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.st-prin-col1 .st-prin-text { align-items: center; }
.st-prin-col2 .st-prin-text, .st-prin-col3 .st-prin-text { align-items: flex-end; }
.st-prin-name { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; text-align: center; width: 100%; min-height: 57.6px; }
.st-prin-body, .st-prin-body p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; text-align: center; }

/* mobile card timeline (hidden >=700). Fluid base (100% of the padded
   .st-content column), capped per-card group — the mirror does NOT use one
   shared token: cards 1-4 (1994/2010/2013/2017) cap at 620px, cards 5-7
   (2019/2023/2025) cap at 435px, measured off the mirror DOM at 600. */
.st-rows-m { width: 100%; display: flex; flex-direction: column; gap: 96px; align-items: center; }
.st-card-m { width: 100%; display: flex; flex-direction: column; gap: 35px; align-items: center; }
.st-img-m { width: 100%; aspect-ratio: 1 / 1; height: auto; overflow: hidden; position: relative; }
.st-img-m img { width: 100%; height: 100%; object-fit: cover; }
.st-img-m.tall { aspect-ratio: 85 / 91; }
.st-card-m:nth-child(-n+4) .st-img-m { max-width: 620px; }
.st-card-m:nth-child(n+5) .st-img-m { max-width: 435px; }
.st-text-m { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; }
/* the text column's cap does NOT track its own card's image cap group —
   each was measured independently off the mirror DOM at 600/699:
   card 1 (1994) text caps at 375px (image caps at 620), cards 4 (2017) and
   5/6/7 (the 435-image-cap cards) also cap text at 435, while cards 2/3/6
   text caps at the full 620 (same as the .st-content wrapper, i.e. no
   override needed for them). */
.st-card-m:nth-child(1) .st-text-m { max-width: 375px; }
.st-card-m:nth-child(4) .st-text-m,
.st-card-m:nth-child(n+5) .st-text-m { max-width: 435px; }

/* ============================================================
   TABLET (700-899): own shorter design frame, NOT a continuation of the
   desktop fluid formulas above (image/column sizes are constant across the
   whole 700-899 range, only re-centred as the viewport widens). Vertical
   spacing/gaps/typography mostly match the mobile values below; only the
   column widths and the founder/journey layouts (side-by-side, like
   desktop) differ. All numbers measured off the mirror DOM at 700/820/899.
   ============================================================ */
@media (min-width: 700px) and (max-width: 899px) {
  /* .page-story keeps the desktop 55px section gap in tablet (measured:
     hero 852 + gap 55 = content top 907 at 820) — NOT the mobile 15px. */
  .page-story .hero { height: 852px; }
  .page-story .hero-copy { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 620px; max-width: 100%; }
  .hero-story-title { font-size: 36px; line-height: 43.2px; }

  .st-content { width: 620px; max-width: 100%; gap: 125px; padding: 75px 0; }

  .st-philosophy { padding: 0 0 75px; gap: 64px; }
  .st-phil-quote { width: 100%; }
  .st-phil-body { width: 100%; }

  .st-founder { flex-direction: row; gap: 45px; padding: 0; align-items: center; }
  .st-founder-text { width: 285px; gap: 48px; align-items: flex-start; }
  .st-founder-name { font-size: 24px; line-height: 28.8px; }
  .st-founder-body p { font-size: 14px; line-height: 16.8px; }
  .st-founder-img { width: 290px; height: 501px; }

  .st-journey { padding: 15px 0; gap: 150px; }
  .st-journey-head { padding: 60px 0; }
  .st-journey-title { font-size: 24px; line-height: 28.8px; }

  /* fixed total height (constant across the whole 700-899 range, measured
     off the mirror at both 768 and 820): the last row's content is shorter
     than its own image, so it overflows below the box just like .st-row-6
     does on desktop — same trick, applied to the whole rows stack here. */
  .st-rows { width: 620px; max-width: 100%; gap: 96px; height: 2471px; }
  /* per-row cell widths are NOT uniform — measured individually off the
     mirror DOM at both 768 and 820 (identical at both widths; tablet is
     fixed, not fluid, here). .st-line is child 1, so the 6 .st-row
     siblings are nth-child(2)..(7); row-last is handled separately below. */
  /* mirror top-aligns icell/tcell within the row instead of centering —
     invisible on symmetric rows (icell/tcell same height) but the 2010 row
     (icell 250 vs its 278-tall row) proves it's flex-start, not center. */
  .st-row { align-items: flex-start; }
  .st-tcell, .st-icell { width: 275px; }                /* default: rows 1994/2013/2017 */
  .st-row:nth-child(3) .st-icell { width: 250px; }       /* 2010: image is 250, text stays 275 */
  .st-row:nth-child(6) .st-tcell,                        /* 2019 */
  .st-row:nth-child(6) .st-icell,
  .st-row-6 .st-tcell, .st-row-6 .st-icell { width: 273px; }  /* 2023 */
  .st-tcell.pr, .st-tcell.pl { padding: 0; }
  .st-icell.end, .st-icell.start { padding: 0; }
  .st-img, .st-img-lg { max-width: 275px; }
  .st-row:nth-child(6) .st-img, .st-row-6 .st-img { max-width: 273px; }
  .st-img-tall { aspect-ratio: 1 / 1; } /* mirror reverts the 2023 image to square in tablet */
  .st-row-6 { height: 275px; } /* mirror: row is 275 even though the (now square) image is 273 */

  .st-card-title { font-size: 20px; line-height: 24px; }
  .st-card-body, .st-card-body p { font-size: 14px; line-height: 16.8px; }

  .st-row-last { width: 620px; gap: 0; height: auto; justify-content: space-between; }
  .st-row-last .st-tcell { width: 273px; padding-right: 0; }
  .st-img-lg { width: 273px; height: 273px; margin-left: 0; }

  .page-story .footer-main { padding: 50px 50px; }
  .page-story .hero-content { padding-top: 30px; padding-left: 30px; padding-right: 30px; }

  .st-principles { width: 620px; max-width: 100%; gap: 72px; padding: 50px 0 100px; }
  .st-principles-title { font-size: 24px; line-height: 28.8px; }
  .st-prin-row { width: 620px; gap: 0; }
  .st-prin-col { flex: 0 0 auto; width: 207px; padding: 0; }
  .st-prin-col1 .st-prin-img { aspect-ratio: 1 / 1; }
  .st-prin-col2 .st-prin-img { aspect-ratio: 207 / 213; }
  .st-prin-col3 .st-prin-img { aspect-ratio: 1 / 1; }
  .st-prin-name { font-size: 20px; line-height: 24px; min-height: 0; }
  .st-prin-body, .st-prin-body p { font-size: 14px; line-height: 16.8px; }
}

/* tablet has its own hidden inner breakpoint at 800px: below it the
   philosophy quote/attribution drop to the mobile type scale (confirmed via
   mirror DOM text at 768 vs 820 — everything else in the 700-899 band is
   unchanged across this line, only these two elements). */
@media (min-width: 700px) and (max-width: 799px) {
  .st-quote { font-size: 24px; line-height: 28.8px; }
  .st-quote-attr { font-size: 18px; line-height: 21.6px; }
}

/* ---------- story mobile (<=699) ---------- */
@media (max-width: 699px) {
  .page-story { gap: 15px; }
  .page-story .hero { height: 852px; }
  .page-story .hero-copy { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 375px; }
  .hero-story-title { font-size: 36px; line-height: 43.2px; }

  /* content column is fluid (100vw - 50px) up to a 620px cap, i.e. the
     wrapper itself caps at 670px (620 content + 25px*2 padding) so every
     100%-width child (quote/body/founder text+img/cards 1-4) caps with it. */
  .st-content { width: 100%; max-width: 670px; gap: 125px; padding: 75px 25px; }

  .st-philosophy { padding: 0 0 75px; gap: 64px; }
  .st-phil-quote { width: 100%; }
  .st-quote { font-size: 24px; line-height: 28.8px; }
  .st-quote-attr { font-size: 18px; line-height: 21.6px; }
  .st-phil-body { width: 100%; font-size: 24px; line-height: 28.8px; }

  .st-founder { flex-direction: column; gap: 50px; padding: 0; align-items: center; }
  .st-founder-text { width: 100%; gap: 48px; align-items: center; }
  .st-founder-name { font-size: 24px; line-height: 28.8px; }
  .st-founder-body p { font-size: 14px; line-height: 16.8px; }
  .st-founder-img { width: 100%; height: 653px; }

  .st-journey { padding: 15px 0; gap: 150px; }
  .st-journey-head { padding: 60px 0; }
  .st-journey-title { font-size: 24px; line-height: 28.8px; }

  .st-card-title { font-size: 20px; line-height: 24px; }
  .st-card-body, .st-card-body p { font-size: 14px; line-height: 16.8px; }
  .st-card-m-2025 { gap: 50px; }
  .st-card-m-2025 .st-card-title { font-size: 24px; line-height: 28.8px; }
  .st-card-m-2025 .st-card-body, .st-card-m-2025 .st-card-body p { font-size: 20px; line-height: 24px; }

  .page-story .footer-main { padding: 50px 50px; }   /* story mobile footer inset (content 290px) */
  /* live 19 Jul: story mobile nav is inset 30px and sits 10px higher than home */
  .page-story .hero-content { padding-top: 30px; padding-left: 30px; padding-right: 30px; }
  .page-story .news-input { width: 154px; }          /* story mobile form: input 154 + gap 15 + Subscribe 121 = 290 */

  /* principles wrapper caps at 620px (520 content + 50px*2 padding) so
     100%-width columns cap with it, matching the smaller 435-cap group. */
  /* fixed total height (constant across the whole 390-699 range, measured
     off the mirror at 390/500/699): the columns' real content overflows it,
     same overflow-allowed trick used elsewhere on this page. */
  .st-principles { width: 100%; max-width: 620px; height: 1643px; gap: 72px; padding: 50px 50px 100px; }
  .st-principles-title { font-size: 24px; line-height: 28.8px; }
  /* the mirror's column gap is fluid too: 29px at 390, collapsing to 0 by
     ~410px viewport (text height overtakes the fixed gap) and staying 0
     through 699 — measured off the mirror DOM. */
  .st-prin-row { flex-direction: column; gap: clamp(0px, calc(29px - (100vw - 390px) * 1.45), 29px); width: 100%; align-items: center; }
  .st-prin-col { width: 100%; gap: 20px; padding: 0; align-items: center; }
  .st-prin-text { width: 100%; align-items: center; }
  .st-prin-col1 .st-prin-img, .st-prin-col3 .st-prin-img { aspect-ratio: 1 / 1; }
  .st-prin-col2 .st-prin-img { aspect-ratio: 145 / 149; }
  .st-prin-name { font-size: 20px; line-height: 24px; min-height: 0; }
  .st-prin-body, .st-prin-body p { font-size: 14px; line-height: 16.8px; }
}