/* One topic at a time; the next card remains gently visible. */
.home-about.story-cards{min-height:calc(100svh - 88px);padding-top:48px;padding-bottom:48px;align-items:center;gap:4vw}
.story-cards .story-reading{align-self:start;max-width:700px;padding-left:1vw;overflow:hidden}
.story-cards .story-chapters{justify-content:flex-start;gap:32px;margin-bottom:28px}
.story-cards .story-chapter{max-width:none;padding:0;border:0;animation:story-card-enter .55s ease both}
.story-cards .story-chapter[hidden]{display:none}
.story-cards .story-chapter h2{font-size:clamp(23px,2.4vw,34px);line-height:1.6;margin:18px 0 28px}
.story-cards .story-section-label{margin-bottom:18px}
.story-cards .story-visual{height:calc(100svh - 184px);min-height:480px;position:relative;top:auto;align-self:start}
.story-cards .skyflora-stage{height:min(58svh,570px)}
.story-cards .story-flower-caption{margin:20px 0 0}
.story-cards .story-card-track{display:flex;position:relative;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 0 18px;margin:0;list-style:none;overscroll-behavior-x:contain;cursor:grab;touch-action:pan-x pan-y pinch-zoom}
.story-card-track::-webkit-scrollbar{display:none}
.story-cards .story-card-track::after{content:'';flex:0 0 calc(8% - 22px)}
.story-cards .story-card-track>li,.story-cards .story-card-track>div{box-sizing:border-box;flex:0 0 92%;min-width:0;scroll-snap-align:start;display:block;padding:28px 30px 32px;margin:0;border:1px solid #e4e5dc;border-radius:24px;background:#faf9f5;box-shadow:0 8px 12px -12px #43533b55;opacity:.35;transition:opacity .45s ease;min-height:250px}
.story-cards .story-card-track>.is-current{opacity:1}
.story-cards .story-why-list>li{min-height:305px}
.story-cards .story-card-track .story-number,.story-cards .story-elements>li>span{display:block;font:500 13px/1.6 var(--sans);color:#89947e;margin-bottom:22px;padding:0}
.story-cards .story-card-track h3{margin:0 0 16px}
.story-cards .story-why-list p.story-lead{margin-bottom:16px}
.story-cards .story-strength-list dt{display:block}.story-cards .story-strength-list dt span{display:block;margin-top:8px}
.story-cards .story-strength-list dd{margin:20px 0 0}
.story-cards .story-equation{padding:15px 0 18px;margin-bottom:18px}
.story-cards .equation-approx{display:inline-block;font-size:25px;margin:8px 10px 0 0;vertical-align:middle}
.story-cards .story-equation strong{display:inline-flex;font-size:28px;vertical-align:middle}
.story-cards .story-feedback{margin-top:22px}
.story-cards .story-actions{margin-top:26px}
.story-card-controls{display:flex;align-items:center;gap:10px;margin-top:14px;padding-right:8%}
.story-card-controls button{width:40px;height:40px;border:1px solid #d9ded1;border-radius:50%;font-size:20px;color:#38543a;transition:background .2s,transform .2s}
.story-card-controls button:hover:not(:disabled){background:#e8eddf;transform:translateY(-2px)}
.story-card-controls button:disabled{opacity:.3;cursor:default}
.story-card-count{font-size:13px;color:#607056;margin-left:12px;font-variant-numeric:tabular-nums}
.story-card-help{margin-left:auto;font-size:12px;color:#7d8876}
.story-card-track:focus-visible,.story-card-controls button:focus-visible{outline:2px solid #b46e59;outline-offset:3px}
.story-card-track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
@keyframes story-card-enter{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:760px){
 .home-about.story-cards{padding:18px 22px 40px;gap:24px;min-height:0}
 .story-cards .story-visual{position:relative;top:auto;order:0;height:auto;min-height:0;margin:0;width:100%;padding:0;background:none;overflow:hidden}
 .story-cards .skyflora-stage{height:145px;width:185px;flex-shrink:0}
 .story-cards .story-flower-caption{font-size:18px;line-height:1.5;margin:4px 0 0}
 .story-cards .story-reading{order:1;padding:0;width:100%;max-width:none}
 .story-cards .story-chapters{gap:20px;margin-bottom:24px}
 .story-cards .story-chapter h2{font-size:clamp(21px,6.15vw,25px);margin:16px 0 24px}
 .story-cards .story-card-track{gap:14px}
 .story-cards .story-card-track>li,.story-cards .story-card-track>div{flex-basis:92%;padding:24px 22px;min-height:225px;border-radius:20px}
 .story-cards .story-why-list>li{min-height:350px}
 .story-cards .story-card-track::after{flex-basis:calc(8% - 14px)}
 .story-cards .story-equation strong{font-size:24px;gap:8px}
 .story-cards .story-card-track .story-number,.story-cards .story-elements>li>span{margin-bottom:16px}
 .story-card-help{font-size:11px}.story-card-count{margin-left:4px}
 .story-cards .story-actions{gap:18px}
}
@media(prefers-reduced-motion:reduce){.story-cards .story-chapter{animation:none}.story-cards .story-card-track>*{transition:none}}

/* Preserve readable phrases on narrow screens without changing type size. */
.story-cards .story-card-track p,.story-cards .story-card-track dd{ text-wrap:pretty; }
.story-keep-phrase{white-space:nowrap}
.story-cards .story-card-track h3,.story-cards .story-card-track p.story-lead,.story-cards .story-elements p{text-wrap:balance}
/* Short element captions read as whole phrases; do not stretch their characters. */
.story-cards .story-elements p{text-align:left;text-align-last:left}

@media(min-width:761px){
 .story-cards .story-visual .story-chapters{justify-content:center;gap:24px;margin:22px 0 0;flex-shrink:0}
}

/* Desktop: shared card/flower centre and a shared controls baseline. */
@media(min-width:761px){
 .story-cards{--intro-card-height:360px;--intro-head-height:260px}
 .story-cards .story-reading{container-type:inline-size}
 .story-cards #strengths-title,.story-cards #elements-title{white-space:nowrap;font-size:clamp(16px,4cqw,28px)}
 .story-cards #strengths-title>span,.story-cards #elements-title>span{display:inline}
 .story-cards .story-chapter{display:grid;grid-template-rows:24px 124px 112px auto auto auto}
 .story-cards .story-chapter>.section-number{grid-row:1}
 .story-cards .story-chapter>h2{grid-row:2;margin:12px 0 0}
 .story-cards .story-section-label,.story-cards .story-equation{grid-row:3;align-self:end;margin:0 0 18px}
 .story-cards .story-equation{padding:8px 0 10px}
 .story-cards .story-card-track{grid-row:4}
 .story-cards .story-card-track>li,.story-cards .story-card-track>div{min-height:var(--intro-card-height)}
 .story-cards .story-card-controls{grid-row:5;margin-top:62px}
 .story-cards .story-feedback,.story-cards .story-actions{grid-row:6}
 .story-cards .story-visual{display:flex;justify-content:flex-start;height:auto;min-height:0;padding-top:calc(var(--intro-head-height) + 8px);overflow:visible}
 .story-cards .skyflora-stage{height:var(--intro-card-height);flex-shrink:0}
 .story-cards .story-flower-caption{margin:20px 0 0}
 .story-cards .story-visual .story-chapters{margin-top:22px}
}

/* Raise the bouquet; size the short strength cards to their content. */
@media(min-width:761px){
 .story-cards .story-visual{padding-top:calc(var(--intro-head-height) - 48px)}
 .story-cards #story-strengths .story-card-track>div{min-height:250px;padding:30px 32px}
 .story-cards #story-strengths .story-strength-list dt{font-size:28px;line-height:1.5}
 .story-cards #story-strengths .story-strength-list dt>span{font-size:16px;margin-top:10px}
 .story-cards #story-strengths .story-strength-list dd{font-size:18px;line-height:1.9;margin-top:22px;text-align:left;text-wrap:pretty}
 .story-cards #story-strengths .story-card-controls{margin-top:24px}
}
@media(max-width:760px){
 .story-cards #story-strengths .story-card-track>div{min-height:215px}
 .story-cards #story-strengths .story-strength-list dt{font-size:24px}
 .story-cards #story-strengths .story-strength-list dd{font-size:16px;line-height:1.9;text-align:left;text-wrap:pretty}
}

/* The equation needs no rules; five short elements share one reading card. */
.story-cards .story-equation{border:0}
.story-cards .story-elements-summary{display:block;width:92%;box-sizing:border-box;padding:14px 28px;margin:8px 0 0;border:1px solid #e4e5dc;border-radius:24px;background:#faf9f5;box-shadow:0 8px 12px -12px #43533b55;overflow:visible}
.story-cards .story-elements-summary>li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;padding:17px 0;margin:0;border:0}
.story-cards .story-elements-summary>li>span{font:500 13px/2 var(--sans);color:#89947e;padding:2px 0 0}
.story-cards .story-elements-summary>li>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:baseline}
.story-cards .story-elements-summary h3{font-size:20px;line-height:1.6;letter-spacing:0;margin:0}
.story-cards .story-elements-summary p{font-size:16px;line-height:1.9;margin:0;text-align:left;text-wrap:pretty}
@media(min-width:761px){
 .story-cards .story-elements-summary{grid-row:4}
 .story-cards #story-elements .story-actions{grid-row:5;margin-top:26px}
}
@media(max-width:1100px){
 .story-cards .story-elements-summary>li>div{display:block}
 .story-cards .story-elements-summary h3{margin-bottom:5px}
}
@media(max-width:760px){
 .story-cards .story-elements-summary{width:100%;padding:8px 22px;border-radius:20px}
 .story-cards .story-elements-summary>li{grid-template-columns:20px minmax(0,1fr);gap:12px;padding:17px 0}
 .story-cards .story-elements-summary h3{font-size:19px}
 .story-cards .story-elements-summary p{font-size:15px;line-height:1.9}
}

/* All topics share title, content and bouquet anchors. */
@media(min-width:761px){
 .story-cards{--intro-head-height:200px;overflow-anchor:none}
 .story-cards .story-reading{position:relative;min-height:var(--story-reserved-height,0px)}
 .story-cards .story-chapter,.story-cards #story-elements{grid-template-columns:minmax(0,1fr);grid-template-rows:24px 124px 52px auto auto auto}
 .story-cards .story-chapter>*{grid-column:1}
 .story-cards .story-equation{grid-row:2 / 4;padding:0;margin-bottom:18px;align-self:end}
 .story-cards #story-elements .story-elements-summary{grid-row:4}
 .story-cards #story-elements .story-actions{grid-row:5}
 .story-cards .story-visual{padding-top:152px}
 .story-cards.story-measuring .story-chapter[hidden]{display:grid!important;position:absolute;top:0;left:0;width:var(--story-measure-width);visibility:hidden;pointer-events:none;animation:none}
}

/* Five elements have no formula or section label; close that empty space. */
@media(min-width:761px){.story-cards #story-elements{grid-template-rows:24px 88px 12px auto auto auto}}

/* A complete card per stop, without a clipped preview of its neighbour. */
.story-cards .story-card-track>li,.story-cards .story-card-track>div{flex-basis:100%;scroll-snap-stop:always}
.story-cards .story-card-track::after{display:none}
.story-cards .story-card-controls{padding-right:0}
.story-cards .story-elements-summary{width:100%}
@media(min-width:761px){.story-cards .story-visual{padding-top:72px}}
.story-cards .story-card-track>li,.story-cards .story-card-track>div{opacity:1;transition:none}