/*
 * be.Bold — Founder's Story
 * =========================
 * Extracted with tools/extract-page-css.py: 165 rules dead on this page, 126 already in shell.css.
 * The .story pattern went to shell.css after checking it byte-for-byte against
 * what-sets-us-apart.html, which shares it.
 *
 * What stayed here: the .fs-chapter and .fs-chapter--2 variants, the .fs-close and .fs-sign closing
 * copy, .story--ctr, the .page-hero tuning, the shop band's inner-page padding, .uspx's own
 * padding-top, and the object-position overrides that differ between this page and WSUA.
 *
 * The design set three section backgrounds inline; they are the first three rules below.
 */

/* Were style="background:#EAE2D8" on both chapter sections — #EAE2D8 is var(--cream). */
.fs-chapter{background:var(--cream)}
/* Were style="background:var(--sand-hi)" on the three Singapore-inspired sections. */
.sg-tight{background:var(--sand-hi)}

.shopband{padding:clamp(10px,1.4vw,18px) var(--pad);background:var(--sand-hi);padding-bottom:clamp(46px,6vw,92px)}
.page-hero{min-height:min(58vh,470px);padding-top:var(--hdr-h)}
.page-hero .hero-img{object-position:50% 52%}
.page-hero .hero-fade{background:linear-gradient(100deg,rgba(234,226,216,.93) 0%,rgba(234,226,216,.74) 26%,rgba(234,226,216,.34) 47%,rgba(234,226,216,0) 63%)}
.page-hero .hero-inner p{font-size:clamp(.88rem,1.1vw,1rem);line-height:1.85;max-width:53ch}
@media(max-width:900px){
  .page-hero .hero-fade{background:linear-gradient(180deg,rgba(234,226,216,.95) 0%,rgba(234,226,216,.84) 44%,rgba(234,226,216,.56) 70%,rgba(234,226,216,.10) 100%)}
}
.story--ctr .story__copy .inner{margin-left:auto;margin-right:auto}
.story .story__media img{max-height:none;width:min(100%,640px)}
.story.fs-chapter{max-width:1160px;margin:0 auto;gap:clamp(20px,2.6vw,44px);padding-top:0;padding-bottom:0}
.story.fs-chapter .story__media{padding:clamp(4px,.6vw,10px)}
.story.fs-chapter .story__copy{padding:clamp(10px,1.4vw,22px) clamp(8px,1.4vw,24px)}
.story.fs-chapter .dsp.h2{font-size:clamp(1.44rem,2.36vw,2.25rem)}
.story.fs-chapter .story__media img{width:min(100%,560px)}
.story.fs-chapter--2 .story__media{padding:0}
.story.fs-chapter--2 .story__media img{width:min(100%,485px)}
@media(max-width:900px){
  .story.fs-chapter{max-width:none;gap:0;padding-top:0;padding-bottom:0}
  .story.fs-chapter .story__media{padding:clamp(20px,6vw,38px) var(--pad) 0}
  .story.fs-chapter .story__copy{padding:clamp(22px,6vw,38px) var(--pad) clamp(34px,8vw,50px)}
  .story.fs-chapter .story__media img,.story.fs-chapter--2 .story__media img{width:min(100%,560px);margin:0 auto}
}
.fs-close{max-width:70ch;margin:clamp(24px,2.8vw,34px) auto 0;text-align:center}
.fs-sign{margin:clamp(20px,2.4vw,30px) 0 0;text-align:center;color:var(--green);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(.91rem,1.45vw,1.29rem);line-height:1.55;letter-spacing:-.005em}
/*
 * This page tightens the band above the Singapore-inspired heading; WSUA does not.
 *
 * Only the padding-top belongs here. shell.css declares the .uspx base and then .sg-tight, which
 * is the order this page's design block uses, so .sg-tight still wins the padding-bottom. Folding
 * the base in here would put padding-bottom:14px after .sg-tight and lose that.
 */
.uspx{padding-top:clamp(20px,2.4vw,34px)}
/*
 * ⚑ NO FIXED FRAME ON In Her Memory - the image sets its own shape. Changed 19 Sep 2026.
 *
 * This was `aspect-ratio:1120/1246`, chosen on 15 Sep to fit the tall drawing the row was built
 * around (1183x1329, ratio 0.890). The artwork has since been replaced FROM THE EDITOR with
 * in-her-memory-grey.jpg, which is 1448x1086 - LANDSCAPE, ratio 1.333. A 1.333 image in a 0.899
 * box with object-fit:cover lost 32.6% of its width, measured on both pages at 1440.
 *
 * A ratio picked to match one file is wrong the moment that file changes, and this one is an ACF
 * field the client can change whenever they like. So the ratio is cleared here: the media box
 * takes its height from the image, and whatever shape they upload shows whole.
 *
 * ⚑ BOTH LINES ARE LOAD-BEARING, and `aspect-ratio:auto` is NOT redundant. Deleting the old
 * declaration is not enough: `.story--photo .story__media` in shell.css then applies its own 3/2,
 * and the row went straight back to clipping - 11% off the bottom, measured, where it had been
 * 32.6% off the sides. The frame has to be overridden, not omitted.
 *
 * The img line lifts the other half. `.wrap.alt-culture .story__media img` and `.story--photo
 * .story__media img` in shell.css both set height:100% with object-fit:cover at (0,2,1); this
 * selector is (0,4,1), so it wins on both pages.
 *
 * ⚑ AND NO WIDTH CAP - 20 Sep 2026. This was max-width:72.5%, which was sized for the tall
 * drawing: a cap that stopped a portrait image towering over the copy beside it. Against a
 * landscape one it just made the image small - 451x338 where A Cultural Expression, the row
 * directly above on both pages, renders 622x415. The row now takes the full column like every
 * other .story--photo row, so the two read as a pair. The mobile cap below is untouched.
 *
 * object-fit:contain rather than the default: with height:auto the box already matches the image
 * and the two render identically, but if anything ever forces a height back on, contain letterboxes
 * where cover would silently cut. That is the failure worth having.
 */
.wrap.story.memrow .story__media{aspect-ratio:auto;margin-inline:auto}
.wrap.story.memrow .story__media img{height:auto;object-fit:contain}
@media(max-width:900px){
  .wrap.story.memrow .story__media{max-width:min(100%,460px)}
}
/*
 * ⚑ NO WIDTH CAP ON A Cultural Expression — removed 15 Sep 2026, on the client's instruction that
 * "the size of the image from founder's page A Cultural Expression section should be the same size
 * as the image from A Cultural Expression in what sets us apart page".
 *
 * This page had `max-width:70%` here where What Sets Us Apart has none, so the same drawing drew at
 * 435x290 on this page against 622x415 on that one, at a 1440 viewport. The cap came from the
 * design file; the client has overridden it.
 *
 * It was two rules: the 70% here, and a `max-width:100%` inside a max-width:900px query that undid
 * it on mobile. Both are gone — the mobile override existed only to cancel the cap, so keeping it
 * would have been a rule that now cancels nothing.
 *
 * The shared `.wrap.alt-culture .story__media` in shell.css (3:2, full column) is what applies now,
 * which is exactly what the other page uses. If a cap is ever wanted back, it belongs on BOTH pages
 * or the two sections diverge again.
 */