/*
 * be.Bold — What Sets Us Apart
 * ============================
 * Extracted with tools/extract-page-css.py; the .story layer arrived with the Founder's Story port
 * and the .why band went to shell.css after checking it against homepage.html.
 *
 * What stayed here: the Oleatex band (.oband*), its bullet list (.olist-b), the .why--intro
 * variant, the .cp-feature and .artisan-row tuning, .why-item h3's max-width (which the homepage
 * does not set), and this page's object-position on the mirrored row.
 */

/* Were style="background:var(--sand-hi)" on eight sections in the design file. */
.wsua-band{background:var(--sand-hi)}
/* Were style="justify-content:flex-start" on the two .link-row divs. */
.oband-copy .link-row,.wrap.artisan-row .link-row{justify-content:flex-start}

.uspx .wrap[id]{scroll-margin-top:calc(var(--hdr-h) + 18px)}
.why-item h3{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--green);font-weight:400;margin:0 0 13px;position:relative;display:inline-block;max-width:22ch;margin-left:auto;margin-right:auto}
.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%)}
}
.sect{padding-top:clamp(20px,2.4vw,34px);padding-bottom:clamp(20px,2.4vw,34px)}
/*
 * .uspx and .sg-tight are repeated here, after the .sect override above, purely to restore the
 * design's declaration order: .sect, then .uspx, then .sg-tight. All three are single-class
 * selectors, so nothing but source order separates them — and shell.css loads BEFORE this file, so
 * without these two lines the .sect override above would beat both. Symptom when it did: the three
 * band headings were 20px too tall, and the one carrying .sg-tight another 2px, on a page that was
 * otherwise pixel-perfect.
 *
 * shell.css keeps the same two rules for the pages that have no .sect override of their own.
 */
.uspx{text-align:center;padding-bottom:clamp(6px,1vw,14px)}
.sg-tight{padding-top:clamp(12px,1.6vw,24px);padding-bottom:clamp(12px,1.6vw,24px)}

.why--intro .why-head{max-width:1240px;margin-left:auto;margin-right:auto;margin-bottom:clamp(34px,4vw,58px)}
.why--intro .why-head .dsp{margin:0 auto;max-width:960px}
.why--intro .why-head .rule{margin:22px auto 0}
.why--intro .why-lede-p{max-width:none;text-wrap:pretty;margin:clamp(20px,2.4vw,30px) auto 0}
/*
 * `.wrap.memrow .story__media img{object-position:92% 50%}` is deliberately NOT reproduced here.
 *
 * The design declares it, but then declares `.wrap.alt-culture .story__media img{…object-position:
 * center}` afterwards at the same specificity, and this page's mirrored row carries both classes —
 * so the 92% never applies. Verified by measuring the design in a browser: computed
 * object-position is 50% 50%.
 *
 * Keeping it would have revived a dead rule, because the shared `.alt-culture` rule lives in
 * shell.css and page CSS loads later. That showed up as the In Her Memory engraving cropped to a
 * different part of the drawing.
 */
/*
 * ⚑ 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)}
}

.wrap.artisan-row .story__media{aspect-ratio:4/5;max-width:82%;margin-inline:auto}
.wrap.artisan-row .story__copy .inner .link-row{margin-top:clamp(24px,2.8vw,34px)}
@media(max-width:900px){
  .wrap.artisan-row .story__media{aspect-ratio:3/2;max-width:100%}
}
/*
 * ⚑ THE SHARED COLUMNS, not a bespoke grid - 20 Sep 2026, on the instruction that this row match
 * the one above it.
 *
 * It was `grid-template-columns:0.82fr 1.18fr`, which made the band a one-off on a page where
 * every other .story row splits in half. Measured at 1440 before the change: this row's copy ran
 * 510px against In Her Memory's 622px, and its image sat 46px further left. Removing the
 * declaration falls through to `.story{grid-template-columns:1fr 1fr}` in shell.css - and to its
 * `1fr` inside the max-width:900px query, which is why the mobile override that used to sit here
 * went too. It only restated what shell.css already does.
 */
.wrap.cp-feature{max-width:1300px}
/*
 * ⚑ NO FRAME ON THIS ROW - 20 Sep 2026. The image sets its own shape, as In Her Memory does.
 *
 * HISTORY, because the shape of this row has now changed three times. The design had it 3:2
 * landscape. On 15 Sep the client replaced the photograph with their own product staging shot,
 * which is 3:4 portrait, and shell.css's shared `.story--photo .story__media{aspect-ratio:3/2}`
 * cropped it to its middle 56% - losing the top of the braided strap, which is exactly what the
 * copy beside it describes ("Braided straps mimic ... echoing its pleated edges"). That was fixed
 * by borrowing .artisan-row's 4:5, which cut the loss to 6.7%.
 *
 * ⚑ BUT 6.7% IS NOT NOTHING, AND IT CAME OFF THE TOP. The note here used to say 4:5 trimmed
 * "about 6% off the sides", which is backwards - a 0.747 image in a 0.800 box overflows
 * vertically, not horizontally. So 3.35% was still being taken off the strap end of the frame,
 * quietly, while the note said otherwise. Measured, which is the only reason it was caught.
 *
 * So: no ratio. 1400x1875 renders whole at 622x833 on a 1440 desktop, and the strap question
 * stops depending on anyone picking the right box.
 *
 * ⚑ BOTH DECLARATIONS ARE LOAD-BEARING. Deleting the aspect-ratio alone puts shell.css's 3/2
 * straight back - the original bug. It has to be overridden with `auto`, not omitted. The img
 * line lifts the other half: `.story--photo .story__media img` sets height:100% with
 * object-fit:cover at (0,2,1), and this selector is (0,3,1). Verified against In Her Memory,
 * where exactly this trap was hit and measured first.
 *
 * Consequence to know about: the What Sets Us Apart pixel diff against design/what-sets-us-apart.html
 * will not close on this band any more. See tools/README.md.
 */
.wrap.cp-feature .story__media{aspect-ratio:auto;margin-inline:auto}
.wrap.cp-feature .story__media img{height:auto;object-fit:contain}
.cp-feature .btn{margin-top:clamp(24px,2.6vw,34px)}
.compare-lead{color:var(--green);font-weight:400;margin-top:0}
.olist-b{list-style:none;margin:20px auto 0;padding:0;max-width:60ch}
.olist-b li{position:relative;padding-left:26px;margin:0 0 12px;font-size:clamp(.88rem,1.1vw,1rem);line-height:1.7;color:var(--muted)}
.olist-b li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg)}
.oband{position:relative;background:var(--sand-hi)}
.oband-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,64px);align-items:stretch}
.oband-left{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(38px,4.4vw,70px) 0}
.oband-head{padding:0 0 clamp(20px,2.4vw,32px)}
.oband-head .subhead{margin-top:9px}
.oband-head .rule{margin-top:16px}
.oband-bg{display:block;width:100%;height:auto;flex:1 1 auto;min-height:0;align-self:stretch;object-fit:cover;object-position:50% 50%}
.oband-copy{position:static;width:auto;min-width:0;padding:clamp(38px,4.4vw,70px) var(--pad) clamp(38px,4.4vw,70px) 0}
.oband-copy .rule{margin-top:13px}
.oband-copy .body-sm{margin-top:18px;max-width:none}
.oband-copy .compare-lead{margin-top:24px}
.oband-copy .olist-b{margin:14px 0 0;max-width:none}
.oband-copy .olist-b li{margin-bottom:9px}
.oband-copy .body-sm:first-child{margin-top:0}
.oband-copy .link-row{margin-top:clamp(24px,2.8vw,34px)}
@media(max-width:1024px){
  .oband-inner{grid-template-columns:1fr;gap:0}
  .oband-head{padding:clamp(30px,6vw,46px) var(--pad) clamp(18px,3vw,26px)}
  .oband-left{padding:0}
  .oband-bg{height:clamp(260px,54vw,420px);flex:0 0 auto;min-height:0}
  .oband-copy{padding:clamp(26px,5vw,38px) var(--pad) clamp(34px,6vw,50px)}
}