/* Our story (templates/our_story.html). Loaded after home.css and borrows its hero, labels, note band and button.
   One 1180px frame for every section, so the hero, the photo, the letter and the note all share the same left edge.
   On wide screens the page is two columns: the photo on the left (5 parts), the letter on the right (7 parts);
   the note band and the second half of the letter sit in the same right column. Colour comes from tokens.css. */
.s-page .h-top,.s-page .h-hero-body,.s-page .h-wrap,.s-page .h-note .h-wrap,.s-page footer .wrap{box-sizing:border-box;width:100%;max-width:calc(1180px + 2 * clamp(18px,5vw,56px));margin-left:auto;margin-right:auto;padding-left:clamp(18px,5vw,56px);padding-right:clamp(18px,5vw,56px)}
.s-page .h-hero{align-items:stretch}
.s-page .h-top{padding-top:18px;padding-bottom:18px}

.s-hero{min-height:auto}
.s-hero .h-hero-body{flex:none;padding-top:clamp(48px,10vh,104px);padding-bottom:clamp(56px,10vh,104px);gap:18px;pointer-events:auto}
.s-hero .h-label{color:#E0A3B2}
.s-hero h1{font-size:clamp(48px,7.5vw,96px)}
.s-hero .h-story{max-width:32ch;margin:0}

.s-col{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
.s-body{padding:clamp(56px,10vh,104px) 0}
.s-body + .h-note,.h-note + .s-body{margin-top:0}

.s-photo{margin:0;max-width:480px}
.s-photo img{display:block;width:100%;height:auto;aspect-ratio:960/999;object-fit:cover;border-radius:16px;background:var(--tint)}
.s-photo figcaption{margin-top:12px;font-size:15px;line-height:1.4;color:var(--ink-2)}

.s-text{display:grid;gap:24px;max-width:62ch}
.s-text p{font:300 clamp(19px,1.8vw,21px)/1.7 var(--font-display);color:var(--ink);margin:0;text-wrap:pretty}
.s-text p:first-child::first-line{font-weight:400}
.s-text .s-last{font-weight:400;color:var(--rose-deep)}
:root[data-theme="dark"] .s-text .s-last{color:var(--rose-300)}

.s-page .h-note{padding:clamp(72px,12vh,128px) 0}
.s-page .h-note .h-wrap{display:grid;gap:20px}
.s-page .h-note .s-col{display:grid;gap:clamp(32px,5vw,72px)}
.s-page .h-note .both{margin:0;padding:0;border:0;font-size:clamp(30px,4vw,48px);line-height:1.2;max-width:22ch}
.h-note .s-after{margin:0;font:300 clamp(20px,2.2vw,25px)/1.55 var(--font-display);color:#C3AEB2;max-width:44ch}

.s-end{margin-top:44px;padding-top:28px;border-top:1px solid var(--rule);max-width:62ch}
.s-end .s-sign{font:italic 400 19px/1.4 var(--font-display);color:var(--ink-2)}

@media (min-width:60rem){
  .s-col,.s-page .h-note .s-col{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .s-col > .s-right{grid-column:2}
  .s-photo{position:sticky;top:32px;max-width:none}
  .s-page .h-note .s-col > div{grid-column:2;display:grid;gap:20px}
}
@media (max-width:47.99rem){
  .s-page .h-nav a:not(.cta){display:none}
  .s-photo{max-width:none}
}