/* ===== OUR STORY PAGE (uses tokens from style.css) ===== */
.story{--orchid:#6d3b80;--water:#2f8aa0}
.story h2,.story h3{font-family:var(--font-serif);color:var(--green-dark);line-height:1.2}
.story h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:.6rem}
.story h3{font-size:1.25rem;margin-bottom:.4rem}
.story .kicker{display:block;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--orchid);margin-bottom:.6rem}
.story .lede{font-size:1.1rem;color:var(--text-mid);max-width:680px}
.story p{color:var(--text-mid)}
.story .split p+p{margin-top:1em}

.story .st-stats{background:var(--green-dark);padding:44px 0;color:#fff}
.story .st-stats .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;text-align:center}
.story .st-stats b{display:block;font-family:var(--font-serif);font-size:2.5rem;color:var(--amber);line-height:1.1}
.story .st-stats span{font-size:.88rem;opacity:.88}

.story section.ch{padding:80px 0;position:relative}
.story section.ch.alt{background:var(--bg-light)}
.story .ch-num{position:absolute;right:20px;top:26px;font-family:var(--font-serif);font-size:6.5rem;line-height:1;font-weight:700;color:var(--green-dark);opacity:.07;pointer-events:none}
.story .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:34px}
.story .split.rev>:first-child{order:2}
.story figure{margin:0}
.story figure img{width:100%;border-radius:var(--radius);object-fit:cover;box-shadow:var(--shadow-lg);cursor:zoom-in;display:block}
.story figcaption{font-size:.82rem;color:var(--text-light);margin-top:8px}
.story .st-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:34px}
.story .st-gallery img{aspect-ratio:4/3}
.story .pull{border-left:4px solid var(--amber);padding:6px 0 6px 20px;margin:36px 0;font-family:var(--font-serif);font-size:1.4rem;color:var(--green-dark);max-width:760px;line-height:1.4}
.story .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.story .chip{background:var(--green-pale);color:var(--green-dark);border-radius:999px;padding:5px 14px;font-size:.88rem;font-weight:600}
.story .chip.p{background:rgba(109,59,128,.12);color:var(--orchid)}
.story .focus{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:30px;list-style:none;padding:0}
.story .focus li{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 16px;font-size:.93rem;color:var(--text-mid);display:flex;gap:10px}
.story .focus li::before{content:"✿";color:var(--orchid)}

.story .tbl-title{margin-top:42px;font-family:var(--font-serif);font-size:1.25rem;color:var(--green-dark)}
.story .tbl{overflow-x:auto;margin-top:16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--white)}
.story table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
.story th{background:var(--green-dark);color:#fff;text-align:left;padding:11px 16px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.story td{padding:11px 16px;border-top:1px solid var(--border);vertical-align:top;color:var(--text-mid)}
.story tr:nth-child(even) td{background:var(--bg-light)}
.story td:first-child{font-weight:700;color:var(--orchid);white-space:nowrap}

.story .water{background:var(--green-pale)}
.story .cycle{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:36px;text-align:center}
.story .cycle div{padding:16px 8px;position:relative}
.story .cycle div:not(:last-child)::after{content:"→";position:absolute;right:-8px;top:30px;color:var(--amber);font-size:1.5rem}
.story .cycle svg{width:54px;height:54px;margin:0 auto 8px;display:block}
.story .cycle strong{display:block;color:var(--green-dark);font-family:var(--font-serif)}
.story .cycle small{color:var(--text-light);font-size:.84rem}
.story .drops{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:34px}
.story .drop{background:var(--white);border-radius:16px;padding:22px 18px;text-align:center;box-shadow:var(--shadow);border-top:4px solid var(--water)}
.story .drop svg{width:40px;height:40px;margin:0 auto 6px;display:block}
.story .drop b{display:block;font-family:var(--font-serif);font-size:2.2rem;color:var(--water);line-height:1.1}
.story .drop span{font-size:.88rem;color:var(--text-light)}

.story .band{background:var(--orchid);padding:76px 0;text-align:center}
.story .band h2,.story .band .kicker{color:#fff}
.story .band .kicker{color:var(--amber)}
.story .band p{color:rgba(255,255,255,.92);max-width:640px;margin:0 auto;font-size:1.1rem}
.story .two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;text-align:left}
.story .two div{background:rgba(255,255,255,.12);border-radius:16px;padding:24px}
.story .two h3{color:var(--amber)}
.story .two p{font-size:1rem}

.story .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.story .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.story .reveal{opacity:1;transform:none;transition:none}}

#st-lb{position:fixed;inset:0;background:rgba(10,20,14,.92);display:none;align-items:center;justify-content:center;z-index:1000;padding:24px;cursor:zoom-out}
#st-lb.on{display:flex}
#st-lb img{max-height:88vh;max-width:100%;border-radius:10px}

/* responsive overrides come after base rules (see CSS order note) */
@media(max-width:820px){
  .story .split{grid-template-columns:1fr;gap:24px}
  .story .split.rev>:first-child{order:0}
  .story .ch-num{font-size:4rem}
}
@media(max-width:700px){
  .story .two{grid-template-columns:1fr}
  .story .cycle div::after{display:none}
}