/* ==========================================================================
   How it evolved — process story on case pages (story.js renders it).
   Uses the Liquid Case tokens so it reads as part of the same glass system.
   ========================================================================== */
.story{--st-gap:clamp(40px,5vw,72px);--st-line:rgba(11,11,11,.12);--st-found:#c2410c;--st-changed:#3f6212;--st-tried:#5f5f5c;--st-frame:#ecebe7}
.story>p:not(.eyebrow){max-width:60ch}

/* shared glass material (mirrors liquid-case.css) */
.lq :is(.story-journey,.story-insight,.story-loop>div,.story-stats li,.story-gate,.story-shift-why,.story-timeline){
 background-color:var(--lq-glass,rgba(255,255,255,.46));
 background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.18));
 -webkit-backdrop-filter:var(--lq-blur,blur(22px) saturate(1.7));backdrop-filter:var(--lq-blur,blur(22px) saturate(1.7));
 box-shadow:var(--lq-rim),var(--lq-shadow);border:0;
}

/* ---------- why: journey curve ---------- */
.story-journey{margin:36px 0 18px;border-radius:calc(var(--lq-r,30px) + 6px);padding:clamp(20px,2.6vw,34px) clamp(20px,2.6vw,34px) 24px}
.story-journey-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.story-journey-head .eyebrow{margin:0!important}
.story-journey-head>span{font-size:10px;letter-spacing:.16em;color:var(--lq-faint,#8c8c88)}
.story-curve{display:block;width:100%;height:clamp(80px,9vw,130px);margin:14px 0 4px;overflow:visible}
.story-curve .area{fill:rgba(194,65,12,.07)}
.story-curve .line{fill:none;stroke:rgba(11,11,11,.55);stroke-width:2;vector-effect:non-scaling-stroke}
.story-curve circle{fill:#fff;stroke:rgba(11,11,11,.55);stroke-width:1.5;vector-effect:non-scaling-stroke}
.story-curve circle.peak{fill:var(--st-found);stroke:#fff;stroke-width:2}
.story-journey-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px}
.story-journey-steps li{padding-top:12px;border-top:1px solid var(--st-line)}
.story-journey-steps .num{font-size:11px;color:var(--lq-faint,#8c8c88);font-variant-numeric:tabular-nums}
.story-journey-steps h4{margin:6px 0 8px;font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--lq-ink,#0b0b0b)}
.story-journey-steps q{display:block;font-size:13px;line-height:1.55;color:var(--lq-muted,#5f5f5c);font-style:italic}
.story-journey-steps q::before{content:"“"}.story-journey-steps q::after{content:"”"}
.story-journey-steps li.is-peak{border-top-color:var(--st-found)}
.story-journey-steps li.is-peak h4{color:var(--st-found)}
.story-source{margin:18px 0 0!important;font-size:11.5px!important;line-height:1.6!important;color:var(--lq-faint,#8c8c88)!important;max-width:80ch}

.story-insight{margin:14px 0 0;border-radius:var(--lq-r-sm,20px);padding:22px 26px}
.story-insight>span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lq-faint,#8c8c88);margin-bottom:8px}
.story-insight p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#262624;letter-spacing:-.01em;max-width:62ch}
.story-insight em{font-style:normal;color:var(--lq-ink,#0b0b0b);box-shadow:inset 0 -.38em rgba(213,237,98,.55)}

/* ---------- timeline ---------- */
.story-timeline{list-style:none;margin:28px 0 0;padding:16px 20px;border-radius:999px;display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.story-timeline::-webkit-scrollbar{display:none}
.story-timeline li{flex:1 0 auto;min-width:128px;position:relative;padding:0 18px 0 22px;font-size:12px;line-height:1.35;color:var(--lq-muted,#5f5f5c)}
.story-timeline li::before{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(11,11,11,.45)}
.story-timeline li+li{border-left:1px solid var(--st-line)}
.story-timeline li+li::before{left:6px}
.story-timeline time{display:block;color:var(--lq-ink,#0b0b0b);font-weight:500;font-variant-numeric:tabular-nums;margin-bottom:2px}

/* ---------- the rail of chapters ---------- */
.story-rail{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;position:relative}
.story-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:clamp(18px,2.4vw,30px);padding-bottom:var(--st-gap)}
.story-step:last-child{padding-bottom:0}
.story-step::before{content:"";position:absolute;left:21.5px;top:48px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--st-line),rgba(11,11,11,.04))}
.story-step:last-child::before{display:none}
.story-marker span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--lq-ink,#0b0b0b);background:radial-gradient(circle at 35% 30%,#fff 0 30%,rgba(255,255,255,.55) 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 6px 16px -8px rgba(0,0,0,.28)}
.story-body{min-width:0}
.story-phase{margin:9px 0 0!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--lq-faint,#8c8c88)!important}
.lq .story-body h3,.story-body h3{margin:10px 0 14px!important;font-size:clamp(22px,2.3vw,32px)!important;line-height:1.12!important;letter-spacing:-.035em!important;font-weight:450!important;color:var(--lq-ink,#0b0b0b);max-width:26ch}
.story-text{margin:0 0 4px!important;font-size:15.5px!important;line-height:1.72!important;color:var(--lq-muted,#5f5f5c)!important;max-width:64ch}
.story-text code{font-size:.9em;padding:1px 5px;border-radius:6px;background:rgba(11,11,11,.06);color:#2b2b29}

/* pass gate */
.story-gate{margin:18px 0 0!important;padding:12px 16px 12px 16px;border-radius:16px;font-size:13px!important;line-height:1.6!important;color:#33332f!important;max-width:72ch}
.story-gate b{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:999px;background:rgba(11,11,11,.86);color:#fff;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;vertical-align:1px}

/* tried / found / changed */
.story-loop{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:22px 0 0;padding:0}
.story-loop>div{border-radius:var(--lq-r-sm,20px);padding:18px 18px 20px;margin:0}
.story-loop dt{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lq-ink,#0b0b0b);margin-bottom:10px}
.story-loop dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--st-tried)}
.story-loop .tone-found dt::before{background:var(--st-found)}
.story-loop .tone-changed dt::before{background:var(--st-changed)}
.story-loop dd{margin:0;font-size:13.5px;line-height:1.65;color:var(--lq-muted,#5f5f5c)}

/* numbers & chips */
.story-stats{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.story-stats li{border-radius:18px;padding:12px 16px 13px;min-width:150px}
.story-stats span{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lq-faint,#8c8c88);margin-bottom:4px}
.story-stats b{font-size:clamp(18px,1.8vw,24px);font-weight:450;letter-spacing:-.03em;color:var(--lq-ink,#0b0b0b);font-variant-numeric:tabular-nums}
.story-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.story-chips li{padding:7px 13px;border-radius:999px;font-size:12px;color:#33332f;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(11,11,11,.08)}
.story-hmw{margin:20px 0 0;padding:4px 0 4px 20px;border-left:2px solid rgba(11,11,11,.7);font-size:clamp(18px,1.7vw,23px);line-height:1.45;letter-spacing:-.015em;color:var(--lq-ink,#0b0b0b);max-width:44ch}
.story-hmw span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lq-faint,#8c8c88);margin-bottom:6px}

/* ---------- figures ---------- */
.story-media{display:grid;gap:14px;margin-top:24px;align-items:start}
.story-media.count-1{grid-template-columns:minmax(0,1fr)}
.story-media.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.story-media.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.story-media.count-4{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.story-figure{margin:0;min-width:0}
.lq .story-figure .asset-enlarge,.story-figure .asset-enlarge{display:block;width:100%;padding:0;border:0;cursor:zoom-in;position:relative;overflow:hidden;background:var(--st-frame)!important;border-radius:calc(var(--lq-r,30px) - 8px)!important;aspect-ratio:4/3;box-shadow:var(--lq-shadow);transition:box-shadow .5s var(--lq-ease,ease),transform .6s var(--lq-ease,ease)}
.story-figure .asset-enlarge img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .9s var(--lq-ease,ease)}
.story-figure .asset-enlarge:hover{box-shadow:var(--lq-shadow-lift)}
.story-figure .asset-enlarge:hover img{transform:scale(1.025)}
.story-figure .asset-enlarge:focus-visible{outline:2px solid var(--lq-ink,#0b0b0b);outline-offset:3px}
.story-figure figcaption{margin:10px 4px 0;font-size:11.5px!important;line-height:1.5!important;color:var(--lq-faint,#8c8c88)!important}
/* a single picture keeps its own proportions instead of a frame */
.story-media.count-1 .asset-enlarge{aspect-ratio:auto;width:fit-content;max-width:100%}
.story-media.count-1 .asset-enlarge img{width:auto;max-width:100%;height:auto;max-height:min(56vh,520px)}
.story-media.count-1 .tall .asset-enlarge img{max-height:min(52vh,460px)}
/* rows of several share one frame shape; photos fill it, cut-outs float in it */
.story-media.row-tall .asset-enlarge{aspect-ratio:4/5}
.story-figure.photo .asset-enlarge img{object-fit:cover}
.story-figure.cutout .asset-enlarge img,.story-figure.pano .asset-enlarge img{object-fit:contain;padding:5%}
.story-media.count-1 .story-figure .asset-enlarge img{padding:0}
.story-media.count-1 .cutout .asset-enlarge{padding:clamp(12px,2vw,28px)}
/* panoramic fields (CFD contours) stack full-width at their own ratio */
.story-media.row-pano{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media(max-width:700px){.story-media.row-pano{grid-template-columns:minmax(0,1fr)!important}}
.story-media.row-pano .asset-enlarge{aspect-ratio:auto}
.story-media.row-pano .asset-enlarge img{height:auto;padding:0}

/* ---------- before → after ---------- */
.story-shift{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;gap:10px;margin-top:24px}
.story-shift .asset-enlarge{aspect-ratio:4/3}
.story-shift .story-figure .asset-enlarge img{object-fit:contain}
.story-shift-arrow{display:grid;place-items:center}
.story-shift-arrow span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(11,11,11,.86);color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.story-shift-arrow svg{width:18px;height:18px}
.story-shift .story-figure.from figcaption::before{content:"Before · ";color:var(--st-found)}
.story-shift .story-figure.to figcaption::before{content:"After · ";color:var(--st-changed)}
.story-shift-why{grid-column:1/-1;margin:6px 0 0!important;padding:14px 18px;border-radius:16px;font-size:13.5px!important;line-height:1.65!important;color:#33332f!important}
.story-shift-why b{display:block;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--lq-ink,#0b0b0b);margin-bottom:4px}

/* ---------- responsive ---------- */
@media(max-width:860px){
 .story-media.count-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .story-media.count-3 .story-figure:first-child{grid-column:1/-1}
}
@media(max-width:700px){
 .story-journey-steps{grid-template-columns:1fr;gap:0}
 .story-journey-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding:12px 0;position:relative}
 .story-journey-steps li .num{grid-row:1/3}
 .story-journey-steps h4{margin:0 0 4px}
 .story-journey-steps li::after{content:"";position:absolute;left:38px;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--st-found) calc(var(--s)*100%),transparent 0);opacity:.55}
 .story-curve{display:none}
 .story-step{grid-template-columns:34px minmax(0,1fr);gap:14px}
 .story-marker span{width:34px;height:34px;font-size:11px}
 .story-step::before{left:16.5px;top:40px}
 .story-shift{grid-template-columns:1fr}
 .story-shift-arrow{transform:rotate(90deg);margin:-2px 0}
 .story-shift-arrow span{width:38px;height:38px}
 .story-timeline{border-radius:22px;flex-direction:column;gap:12px;padding:16px 18px}
 .story-timeline li+li{border-left:0}
 .story-timeline li,.story-timeline li+li::before{min-width:0}
 .story-timeline li+li::before{left:4px}
}
@media(max-width:520px){
 .story-media.count-2,.story-media.count-3,.story-media.count-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .story-media.count-2 .story-figure.wide,.story-media.count-3 .story-figure:first-child{grid-column:1/-1}
 .story-stats li{flex:1 1 140px;min-width:0}
 .story-loop{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 .story-figure .asset-enlarge,.story-figure .asset-enlarge img{transition:none}
 .story-figure .asset-enlarge:hover img{transform:none}
}
@media(prefers-reduced-transparency:reduce){
 .lq :is(.story-journey,.story-insight,.story-loop>div,.story-stats li,.story-gate,.story-shift-why,.story-timeline){background-color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}