/* Separate photo and story panels, with content-led height at every screen size. */
.about-page .site-header{background:var(--sage);border-bottom:0}
.about-page .header-call{border-radius:999px;background:#b5e696!important;color:#263e29!important;box-shadow:none!important;min-height:38px;padding:0 16px}
.story-board{overflow:hidden;background:#eef1e9;color:#30332f;padding:64px clamp(20px,5vw,80px) 72px}
.story-head{display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;align-items:end;max-width:1160px;margin:0 auto 38px}
.story-head .eyebrow{color:#5f7158;font-size:12px;line-height:1.5}
.story-head h1{margin:0;font:600 clamp(38px,4.5vw,64px)/1.05 'Playfair Display',serif;letter-spacing:-.04em}
.story-head h1 em{color:#5f7158}
.story-head>p{max-width:380px;margin:0;color:#62675f;font-size:16px;line-height:1.7}
.story-cards{display:grid;position:relative;width:100%;max-width:1300px;margin:auto;padding:12px 0 24px;perspective:1500px;touch-action:pan-y;user-select:none;outline:0}
.story-cards:focus-visible{outline:3px solid #718269;outline-offset:5px}
.story-card{grid-area:1/1;position:relative;justify-self:center;display:grid;grid-template-columns:43% 57%;grid-template-rows:auto 1fr;width:76%;min-width:0;min-height:420px;padding:0;border:1px solid #c8d1c1;border-radius:22px;background:#fffdf7;color:#30332f;font:inherit;text-align:left;cursor:pointer;overflow:hidden;backface-visibility:hidden;transform-origin:center;opacity:0;transition:transform .8s cubic-bezier(.18,.82,.22,1),opacity .5s ease,filter .5s ease;box-shadow:0 16px 38px #30332f14}
.story-card.is-active{z-index:5;opacity:1;transform:translate3d(0,0,0)}
.story-card.is-previous{z-index:3;opacity:.68;filter:saturate(.65);transform:translate3d(-65%,0,-220px) rotateY(60deg) scale(.8)}
.story-card.is-next{z-index:3;opacity:.68;filter:saturate(.65);transform:translate3d(65%,0,-220px) rotateY(-60deg) scale(.8)}
.story-card.is-far-previous{z-index:1;opacity:.3;transform:translate3d(-86%,0,-420px) rotateY(70deg) scale(.65)}
.story-card.is-far-next{z-index:1;opacity:.3;transform:translate3d(86%,0,-420px) rotateY(-70deg) scale(.65)}
.story-card:focus-visible{outline:3px solid #5f7158;outline-offset:4px}
.story-card-index{grid-area:1/1;padding:22px 0 18px 24px;color:#5f7158;font:500 12px/1.5 'DM Mono',monospace;letter-spacing:.04em}
.story-card-prompt{grid-area:1/2;justify-self:end;align-self:center;display:flex;align-items:center;gap:8px;margin:14px 20px 12px 0;padding:8px 12px;border-radius:999px;background:#e9f1e2;color:#3f5739;font-size:12px;line-height:1.5}
.story-card-prompt i{font-style:normal}
.story-card-photo{grid-area:2/1;display:block;position:relative;margin:0 0 22px 22px;min-height:310px;overflow:hidden;border-radius:12px;background:#e1e6dc}
.story-card-photo img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;display:block}
.story-card-copy{grid-area:2/2;display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:0;margin:0 0 22px 22px;padding:22px 28px;border-left:1px solid #d5dece;background:#fffdf7;color:#30332f}
.story-card-copy small{color:#5f7158;font:500 12px/1.5 'DM Mono',monospace;letter-spacing:.1em}
.story-card-copy strong{font:600 clamp(26px,2.6vw,38px)/1.12 'Playfair Display',serif;letter-spacing:-.035em}
.story-card-copy em{color:#62675f;font:normal 16px/1.7 'Plus Jakarta Sans',sans-serif}
.story-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:8px}
.story-controls>span{min-width:74px;color:#52624c;font:500 14px 'DM Mono',monospace;text-align:center}
.story-controls>div{display:contents}
.story-controls button{width:46px;height:46px;border:1px solid #aebda5;border-radius:50%;background:#fffdf7;color:#30332f;font-size:20px;cursor:pointer;transition:background .2s,color .2s}
.story-controls button:hover,.story-controls button:focus-visible{outline:2px solid #5f7158;outline-offset:3px;background:#5f7158;color:#fff}
.story-hint{margin:18px 0 0;color:#62675f;font-size:13px;line-height:1.6;text-align:center}
@media(max-width:1240px){
 .about-page .site-header .desktop-nav,.about-page .site-header .header-call{display:none!important}
 .about-page .site-header .mobile-menu{display:block}
}
@media(max-width:800px){
 .story-head{grid-template-columns:1fr;gap:20px;margin-bottom:24px}
 .story-head>p{max-width:560px}
 .story-card{width:84%;grid-template-columns:1fr 1fr;min-height:0}
 .story-card-photo{grid-area:2/1/3/3;height:190px;min-height:0;margin:0 18px;border-radius:12px}
 .story-card-copy{grid-area:3/1/4/3;margin:20px 18px 0;padding:22px 4px 28px;border-left:0;border-top:1px solid #d5dece;gap:14px}
 .story-card-copy strong{font-size:30px}
 .story-card-index{padding:18px 0 16px 18px}
 .story-card-prompt{margin-right:18px}
}
@media(max-width:450px){
 .story-board{padding:38px 16px 52px}
 .story-card{width:94%}
 .story-card-photo{height:155px}
 .story-card-copy strong{font-size:28px}
 .story-card-index,.story-card-prompt{font-size:12px}
 .story-card-prompt{padding:6px 8px;margin-right:12px}
}
@media(prefers-reduced-motion:reduce){.story-card,.story-controls button{transition:none}}
