/* ---------- our story page ---------- */

/* hero */
.story-hero{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate;background:var(--brown)}
.story-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);animation:story-hero-zoom 16s ease-in-out infinite alternate;z-index:-2}
@keyframes story-hero-zoom{to{transform:scale(1)}}
.story-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(36,19,7,.55) 0%,rgba(36,19,7,.72) 55%,var(--brown) 100%)}
.story-hero-content{max-width:820px;padding:clamp(3.5rem,10vw,5rem) clamp(1.25rem,5vw,3rem) clamp(2rem,5vw,3rem)}
.story-hero-label{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:var(--orange)}
.story-hero-label::before,.story-hero-label::after{content:"";display:block;width:26px;height:2px;background:var(--orange);border-radius:2px}
.story-hero-h1{font-family:'Fraunces',serif;font-size:clamp(2.6rem,6.5vw,5rem);line-height:1.03;color:#fff;margin:1.1rem 0 1rem;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.story-hero-h1 .accent{color:var(--orange);font-style:italic}
.story-hero-sub{max-width:44ch;margin:0 auto;font-size:clamp(1rem,1.6vw,1.15rem);font-weight:500;color:var(--tan-light);line-height:1.65}
.story-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;text-decoration:none;display:grid;place-items:center;font-size:1.1rem;animation:story-bob 2.6s ease-in-out infinite;transition:background .25s var(--ease-out)}
.story-scroll:hover{background:rgba(255,255,255,.28)}
@keyframes story-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* lede pull-quote */
.story-lede{background:var(--cream);padding:clamp(3.5rem,9vw,6rem) clamp(1.25rem,6vw,3rem)}
.story-lede p{max-width:920px;margin:0 auto;text-align:center;font-family:'Fraunces',serif;font-size:clamp(1.4rem,3.4vw,2.3rem);line-height:1.35;color:var(--brown);font-weight:700}
.story-lede em{color:var(--orange-deep);font-style:italic}

/* alternating chapters */
.story-chapter{background:#fff;padding:clamp(3rem,7vw,5.5rem) clamp(1.25rem,5vw,3rem)}
.story-chapter-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.story-chapter.reverse .story-chapter-grid{grid-template-columns:1fr 1.05fr}
.story-chapter.reverse .story-chapter-media{order:2}
.story-chapter.reverse .story-chapter-body{order:1}
.story-chapter-media{border-radius:22px;overflow:hidden;box-shadow:0 20px 46px rgba(42,19,5,.16);min-height:320px;isolation:isolate}
.story-chapter-media img{width:100%;height:100%;object-fit:cover;min-height:320px;transition:transform .7s var(--ease-smooth)}
.story-chapter-media:hover img{transform:scale(1.05)}
.story-chapter-num{display:block;font-family:'Fraunces',serif;font-size:3.2rem;font-weight:900;color:var(--tan-light);line-height:1;margin-bottom:.2rem}
.story-chapter-body h2{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.12;margin:.4rem 0 1.1rem;color:var(--brown)}
.story-chapter-body p{font-size:1.02rem;font-weight:500;color:#5C4632;line-height:1.75;margin-bottom:1rem}
.story-chapter-body p:last-child{margin-bottom:0}
@media (max-width:880px){
  .story-chapter-grid,.story-chapter.reverse .story-chapter-grid{grid-template-columns:1fr}
  .story-chapter.reverse .story-chapter-media,.story-chapter.reverse .story-chapter-body{order:initial}
  .story-chapter-media{min-height:260px}
  .story-chapter-media img{min-height:260px}
}

/* closing statement */
.story-statement{background:var(--brown);color:#fff;text-align:center;padding:clamp(4rem,9vw,6.5rem) clamp(1.25rem,5vw,3rem);position:relative;isolation:isolate;overflow:hidden}
.story-statement::before{content:"";position:absolute;inset:-40%;z-index:-1;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.05) 0deg 7deg,rgba(255,255,255,0) 7deg 14deg);animation:spin 100s linear infinite}
.story-statement-inner{max-width:840px;margin:0 auto}
.story-statement-inner > p{font-family:'Fraunces',serif;font-size:clamp(1.3rem,3vw,1.85rem);line-height:1.45;color:var(--tan-light);margin-bottom:1.6rem}
.story-statement-inner .accent{color:var(--orange);font-style:italic}
.story-statement-inner h2{font-size:clamp(2.2rem,5.5vw,3.4rem);color:#fff;margin-bottom:2.2rem}
.story-statement-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .story-hero-bg,.story-scroll,.story-statement::before{animation:none!important}
}