/* Viewport-sized chapters using the existing Elevated Seating controls and shell. */
.story-page{--story-ink:#1d292e;--story-light:#f9f9f8;--story-stage:clamp(300px,calc(100svh - 368px),660px);font-family:"Homepage Nunito","Nunito Sans",sans-serif;background:#1b2024;color:var(--story-ink)}
.story-page,.story-page *{box-sizing:border-box}
.story-page>section.story-chapter{min-height:100svh;display:flex;align-items:center;padding:96px 0 calc(96px + var(--chapter-radius));overflow:visible;scroll-margin-top:0}
.story-page .story-wrap{width:88%;max-width:1440px;margin-inline:auto}
.story-page h1,.story-page h2,.story-page h3{font-family:inherit;font-weight:600;letter-spacing:-.04em;text-wrap:balance;margin:0}
.story-page h1{font-size:clamp(48px,5.6vw,86px);line-height:1.04}
.story-page h2{font-size:clamp(32px,3.35vw,54px);line-height:1.1;max-width:15ch}
.story-page p{margin:0}
.story-page .story-eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;line-height:1.5}
.story-page .story-chapter-head{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:64px;margin-bottom:24px}
.story-page .story-year-block{text-align:right;min-width:0;position:relative;padding:0 18px 0 0}
.story-page .story-year{display:block;font-size:clamp(64px,7vw,100px);font-weight:600;letter-spacing:-.065em;line-height:.9;color:currentColor;opacity:.3;white-space:nowrap;will-change:transform}
.story-page .story-year--range{font-size:clamp(48px,5.4vw,80px)}
.story-page .story-year-note{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;margin-top:9px;opacity:.68}
.story-page .story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(38px,6vw,100px);align-items:center;min-width:0}
.story-page .story-grid>*{min-width:0}
.story-page .story-copy{max-width:510px}
.story-page .story-copy p{font-size:clamp(16px,1.12vw,18px);font-weight:400;line-height:1.6;margin-top:18px;text-wrap:pretty;max-width:43ch}
.story-page .story-copy h2+p,.story-page .story-copy h1+p{margin-top:24px}
.story-page .story-copy .text-link{display:inline-flex;margin-top:26px;font-size:14px;font-weight:500;color:inherit}
.story-page .story-main-action{margin-top:28px}
.story-page .story-figure{margin:0;min-width:0}
.story-page .story-figure img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
.story-page .story-visual{height:var(--story-stage);display:flex;flex-direction:column;justify-content:center}
.story-page .story-visual>a{display:block;min-height:0;height:calc(100% - 28px)}
.story-page .story-visual>img{min-height:0;height:calc(100% - 28px)}
.story-page figcaption{display:flex;justify-content:space-between;gap:12px;font-size:10px;line-height:1.5;letter-spacing:.07em;text-transform:uppercase;margin-top:12px;opacity:.68;flex:none}
.story-page .story-quote{font-size:clamp(19px,1.65vw,25px);font-weight:400;line-height:1.45;letter-spacing:-.015em;margin:26px 0 0;max-width:33ch}
.story-page cite{display:block;font-style:normal;font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;margin-top:14px;opacity:.7}
.story-page>section.story-hero{background:#18252a;color:#f6f7f6;border-radius:var(--chapter-radius) var(--chapter-radius) 0 0}
.story-page .story-hero__comparison img{border-radius:16px}
.story-page .story-maker{background:#ecebe7}
.story-page .story-question{background:#f9f9f8}
.story-page .story-prototypes{background:#18252a;color:#f6f7f6}
.story-page .story-resistance{background:#e8e7e3}
.story-page .story-mechanism{background:#10191e;color:#f6f7f6}
.story-page .story-company{background:#e4e6e5}
.story-page #journal-image{scroll-margin-top:100px}
.story-page .story-sources{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:8px}
.story-page .story-sources .text-link{font-size:12px;margin-top:14px}
.story-page .story-gallery{height:var(--story-stage);display:flex;flex-direction:column;gap:12px}
.story-page .story-gallery__stage{height:calc(100% - 56px);min-height:0}
.story-page .story-gallery__stage .story-figure{height:100%;display:flex;flex-direction:column}
.story-page .story-gallery__stage img{height:calc(100% - 28px);min-height:0}
.story-page [data-gallery-slide][hidden]{display:none!important}
.story-page .story-gallery__controls{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px}
.story-page .story-gallery__controls>div{display:flex;gap:8px}
.story-page [data-gallery-count]{font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums;opacity:.7}
.story-page button.story-gallery__arrow{width:44px;height:44px;min-height:44px;min-width:44px;padding:0;justify-content:center;gap:0;border-radius:50%}
.story-page .story-gallery__arrow .pill__icons{margin:0}
.story-page .story-prototype-film__frame{position:relative;height:calc(100% - 28px);min-height:0;display:flex;align-items:center;justify-content:center;background:#10191e;border-radius:14px;overflow:hidden}
.story-page .story-prototype-film video{display:block;width:100%;height:100%;object-fit:contain}
.story-page .story-film-toggle{position:absolute;right:14px;bottom:14px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;background:#10191e80;color:#fff;cursor:pointer}
.story-page .story-film-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.story-page .story-film-toggle svg[hidden]{display:none}
.story-page .story-caption-note{font-size:13px!important;opacity:.65;margin-top:22px!important}
.story-page .story-workshop{min-width:0}
.story-page #thinking-behind-vision{margin:0;padding:0;border-radius:14px;clip-path:none;overflow:hidden}
.story-page #thinking-behind-vision .workshop-film__stage{padding:0;aspect-ratio:auto}
.story-page #thinking-behind-vision .workshop-film__picture{aspect-ratio:16/9}
.story-page #thinking-behind-vision .workshop-film__video{top:0;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain}
.story-page #thinking-behind-vision .workshop-film__overlay{top:10%;left:5%;right:auto;width:44%;max-width:260px}
.story-page #thinking-behind-vision .workshop-film__eyebrow{font-size:9px;margin-bottom:10px}
.story-page #thinking-behind-vision h2{font-size:clamp(24px,2.3vw,36px);line-height:1.05}
.story-page #thinking-behind-vision .workshop-film__intro{display:none}
.story-page #thinking-behind-vision .workshop-film__actions{margin-top:18px}
.story-page #thinking-behind-vision .workshop-film__story{font-size:13px}
.story-page #thinking-behind-vision .workshop-film__controls{left:3%;bottom:8px;top:auto}
.story-page .story-final-actions{display:flex;align-items:flex-start;flex-direction:column;gap:18px;margin-top:28px}
.story-page .story-final-actions .text-link{margin-top:0}
.story-page :is(a,button):focus-visible{outline:2px solid #e8713a;outline-offset:6px}
@media(min-width:761px) and (max-height:760px){
 .story-page{--story-stage:clamp(275px,calc(100svh - 310px),470px)}
 .story-page>section.story-chapter{padding-top:88px;padding-bottom:calc(78px + var(--chapter-radius))}
 .story-page .story-chapter-head{margin-bottom:20px;min-height:58px}
 .story-page .story-year{font-size:72px}.story-page .story-year--range{font-size:60px}
 .story-page h1{font-size:clamp(46px,5vw,72px)}.story-page h2{font-size:clamp(32px,3vw,46px)}
 .story-page .story-copy p{font-size:16px;line-height:1.5;margin-top:15px}
 .story-page .story-copy h2+p,.story-page .story-copy h1+p{margin-top:20px}
 .story-page .story-quote{font-size:20px;margin-top:20px}
}
@media(max-width:1000px) and (min-width:761px){
 .story-page .story-grid{grid-template-columns:1fr 1fr;gap:32px}
 .story-page .story-copy p{font-size:16px}.story-page h2{font-size:34px}
 .story-page #thinking-behind-vision .workshop-film__overlay{width:55%}.story-page #thinking-behind-vision h2{font-size:25px}
}
@media(max-width:760px){
 .story-page{--story-stage:clamp(220px,29svh,300px)}
 .story-page>section.story-chapter{padding:82px 0 calc(60px + var(--chapter-radius));min-height:100svh;align-items:flex-start}
 .story-page .story-wrap{width:88%}
 .story-page .story-chapter-head{min-height:46px;margin-bottom:18px;gap:16px}
 .story-page .story-eyebrow{font-size:9px;letter-spacing:.1em;max-width:15em}
 .story-page .story-year{font-size:48px}.story-page .story-year--range{font-size:34px}
 .story-page .story-year-block{padding-right:8px}.story-page .story-year-note{font-size:8px;letter-spacing:.04em;max-width:18em;margin-top:7px}
 .story-page .story-grid{grid-template-columns:1fr;gap:22px}
 .story-page .story-copy{max-width:34em}.story-page h1{font-size:clamp(42px,11vw,64px)}.story-page h2{font-size:clamp(30px,7.4vw,43px);max-width:19ch}
 .story-page .story-copy p{font-size:16px;line-height:1.55;margin-top:14px;max-width:43ch}
 .story-page .story-copy h2+p,.story-page .story-copy h1+p{margin-top:18px}
 .story-page .story-copy .text-link{font-size:13px;margin-top:20px}
 .story-page .story-main-action{margin-top:22px}
 .story-page .story-hero__comparison{height:clamp(260px,36svh,360px)}
 .story-page figcaption{font-size:9px;gap:10px;margin-top:10px;line-height:1.4}
 .story-page .story-visual>a,.story-page .story-visual>img{height:calc(100% - 30px)}
 .story-page .story-gallery__stage img{height:calc(100% - 30px)}
 .story-page .story-quote{font-size:20px;margin-top:20px;max-width:34ch}
 .story-page .story-sources{gap:6px 20px;margin-top:4px}.story-page .story-sources .text-link{font-size:11px;margin-top:12px}
 .story-page #thinking-behind-vision .workshop-film__stage{padding-top:0}
 .story-page #thinking-behind-vision .workshop-film__overlay{top:8%;left:5%;right:auto;width:48%}
 .story-page #thinking-behind-vision .workshop-film__eyebrow{display:none}
 .story-page #thinking-behind-vision h2{font-size:clamp(24px,6vw,36px)}
 .story-page #thinking-behind-vision .workshop-film__actions{margin-top:12px}.story-page #thinking-behind-vision .workshop-film__story{font-size:12px}
 .story-page #thinking-behind-vision .workshop-film__shade{background:linear-gradient(90deg,#10191ed6,#10191e60 45%,transparent 75%)}
 .story-page #thinking-behind-vision .workshop-film__controls{top:auto;left:2%;bottom:0}
 .story-page .story-final-actions{margin-top:22px;gap:18px}.story-page .story-final-actions .text-link{margin:0}
}
@media(prefers-reduced-motion:reduce){.story-page .story-year{will-change:auto}}

/* Captions track the displayed media rather than empty column space. */
.story-page .story-visual{align-items:center}
.story-page .story-visual>a{width:100%}
.story-page .story-visual>figcaption{width:100%;justify-content:center;text-align:center}
.story-page .story-hero__comparison>figcaption{width:min(100%,calc(var(--story-stage) - 28px));justify-content:space-between;text-align:left}
.story-page .story-gallery__stage figcaption{justify-content:center;text-align:center}

/* Keep the shared button animation; center the icon on icon-only gallery controls. */
html:root body .story-page button.story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button]{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;padding:0!important;justify-content:center!important;gap:0!important}
.story-page .story-gallery__controls{min-height:48px}
.story-page .story-gallery__stage{height:calc(100% - 60px)}

/* Immersive photographic chapters: original subject, soft extended scenery. */
.story-page>section.story-scene{position:relative;isolation:isolate;background:#10191e;color:#f6f7f6}
.story-scene__backdrop,.story-scene__veil{position:absolute;inset:0;pointer-events:none;border-radius:var(--chapter-radius) var(--chapter-radius) 0 0;overflow:hidden}
.story-scene__backdrop{z-index:0;background:#172126}
.story-scene__backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:blur(32px);transform:scale(1.12);opacity:.86}
.story-scene__veil{z-index:1;background:linear-gradient(90deg,rgba(11,20,24,.94) 0%,rgba(11,20,24,.86) 32%,rgba(11,20,24,.53) 53%,rgba(11,20,24,.12) 76%,rgba(11,20,24,.22)),radial-gradient(ellipse at 72% 48%,transparent 24%,rgba(5,12,16,.3) 100%)}
.story-page .story-scene>.story-wrap{position:static;min-height:calc(100svh - 224px);display:flex;flex-direction:column}
.story-page .story-scene .story-chapter-head{position:relative;z-index:3}
.story-page .story-scene .story-grid{flex:1;grid-template-columns:.92fr 1.08fr;align-items:center}
.story-page .story-scene .story-copy{position:relative;z-index:3;max-width:510px;padding-block:12px}
.story-page .story-scene .story-copy p{color:#f0f2f1}
.story-page .story-scene .story-year-block{color:#fff}
.story-page .story-scene .story-year-note{opacity:.75}
.story-page .story-scene :is(.story-visual,.story-gallery){position:absolute;z-index:2;top:220px;bottom:40px;right:4%;width:51%;height:auto}
.story-page .story-scene .story-visual>a,.story-page .story-scene .story-visual>img{height:calc(100% - 28px)}
.story-page .story-scene .story-figure img{object-position:right center;border-radius:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7% 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7% 97%,transparent)}
.story-page .story-scene .story-hero__comparison{top:220px;bottom:48px}
.story-page .story-scene .story-hero__comparison>figcaption{width:100%;max-width:calc(100svh - 204px);margin-left:auto}
.story-page .story-scene figcaption{color:#f0f2f1;opacity:.78;justify-content:flex-end;text-align:right}
.story-page .story-scene .story-gallery__controls{position:relative;z-index:4;color:#fff}
.story-page .story-scene .story-gallery__stage img{object-position:right center}
.story-page .story-scene .story-gallery__stage figcaption{justify-content:flex-end;text-align:right}
.story-page .story-scene .story-workshop{position:absolute;z-index:2;right:4%;top:50%;width:51%;transform:translateY(-35%)}
.story-page .story-scene .story-prototype-film__frame{width:100%;background:transparent;border-radius:0}
.story-page .story-scene .story-prototype-film video{object-position:right center}
.story-page .story-scene .story-sources .text-link{color:#fff}
/* Gallery arrows keep a quiet neutral hover and a visible keyboard focus. */
html:root body .story-page .story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button]{border-color:#ffffff70!important;box-shadow:none!important;animation:none!important}
html:root body .story-page .story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button]>.ui-button-orbit{display:none!important}
html:root body .story-page .story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button]:is(:hover,:active,:focus){border-color:#ffffffa0!important;box-shadow:none!important;animation:none!important}
html:root body .story-page .story-gallery__arrow:focus:not(:focus-visible){outline:none!important}
html:root body .story-page .story-gallery__arrow:focus-visible{outline:2px solid #fff!important;outline-offset:4px!important}
@media(min-width:761px) and (max-height:760px){
 .story-page .story-scene>.story-wrap{min-height:calc(100svh - 198px)}
 .story-page .story-scene :is(.story-visual,.story-gallery){top:190px;bottom:30px}
 .story-page .story-scene .story-hero__comparison{top:190px;bottom:42px}
}
@media(max-width:760px){
 .story-page .story-scene>.story-wrap{display:block;min-height:0}
 .story-page .story-scene .story-grid{grid-template-columns:1fr}
 .story-page .story-scene .story-copy{padding:0}
 .story-page .story-scene :is(.story-visual,.story-gallery,.story-workshop){position:relative;inset:auto;width:100%;transform:none}
 .story-page .story-scene :is(.story-visual,.story-gallery){height:var(--story-stage)}
 .story-page .story-scene .story-hero__comparison{height:clamp(260px,36svh,360px)}
 .story-page .story-scene .story-figure img{object-position:center;-webkit-mask-image:none;mask-image:none}
 .story-page .story-scene figcaption,.story-page .story-scene .story-gallery__stage figcaption{justify-content:center;text-align:center}
 .story-page .story-scene .story-hero__comparison>figcaption{max-width:none;justify-content:space-between;text-align:left}
 .story-scene__backdrop img{filter:blur(25px);object-position:70% center;opacity:.75}
 .story-scene__veil{background:linear-gradient(180deg,rgba(11,20,24,.91),rgba(11,20,24,.85) 48%,rgba(11,20,24,.38) 78%,rgba(11,20,24,.6)),radial-gradient(ellipse at 70% 60%,transparent,rgba(5,12,16,.24))}
}
/* Blend the original photo itself, rather than its transparent layout box. */
@media(min-width:761px){
 .story-page .story-scene .story-visual{align-items:flex-end}
 .story-page .story-scene .story-visual>a{width:100%;display:flex;justify-content:flex-end}
 .story-page .story-scene .story-gallery__stage .story-figure{align-items:flex-end}
 .story-page .story-scene .story-figure img{width:auto;max-width:100%;margin-left:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10% 96%,transparent),linear-gradient(180deg,transparent,#000 6% 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10% 96%,transparent),linear-gradient(180deg,transparent,#000 6% 94%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
 .story-page .story-scene .story-visual>a img{height:100%}
}

/* The persistence film fills the chapter, including its rounded top corners. */
.story-page #the-prototypes .story-prototype-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:var(--chapter-radius) var(--chapter-radius) 0 0;background:#18252a;pointer-events:none}
.story-page #the-prototypes .story-prototype-backdrop video{display:block;width:100%;height:100%;object-fit:cover;object-position:65% center}
.story-page #the-prototypes>.story-scene__veil{background:linear-gradient(90deg,rgba(10,19,23,.92),rgba(10,19,23,.78) 34%,rgba(10,19,23,.26) 64%,rgba(10,19,23,.2)),linear-gradient(180deg,rgba(10,19,23,.3),transparent 28%,rgba(10,19,23,.2))}
.story-page #the-prototypes .story-prototype-toggle{z-index:4;right:6%;bottom:calc(32px + var(--chapter-radius));width:48px;height:48px;background:#fff;color:var(--story-ink);border-color:#ffffff80;transition:background .2s ease,transform .2s ease}
.story-page #the-prototypes .story-prototype-toggle:hover{background:#e7ecee;transform:translateY(-2px)}
.story-page #the-prototypes .story-prototype-toggle:focus-visible{outline:2px solid #fff;outline-offset:5px}

/* A compact white archive interlude; cards retain the complete studio photograph. */
.story-page>section.prototype-strip{position:relative;isolation:isolate;min-height:0;padding:68px 0 calc(38px + var(--chapter-radius));background:#fff;color:var(--story-ink);overflow:hidden;border-radius:var(--chapter-radius) var(--chapter-radius) 0 0;scroll-margin-top:80px}
.story-page .prototype-strip__heading{width:88%;margin:0 auto 44px;text-align:center}
.story-page .prototype-strip__heading h2{max-width:none;font-size:clamp(28px,3.25vw,48px);line-height:1.14}
.story-page .prototype-strip__viewport{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;outline-offset:-3px}
.story-page .prototype-strip__viewport::-webkit-scrollbar{display:none}
.story-page .prototype-strip__viewport:focus-visible{outline:2px solid #647b86}
.story-page .prototype-strip__track{display:flex;width:max-content;padding-inline:clamp(20px,4vw,64px)}
.story-page .prototype-strip__group{display:flex;flex:none;gap:22px;list-style:none;margin:0;padding:0 22px 0 0}
.story-page .prototype-strip__card{width:160px;height:285px;flex:none;border:1px solid #e7e9e9;border-radius:13px;overflow:hidden;background:#fff}
.story-page .prototype-strip__card img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.story-page .prototype-strip__controls{width:88%;display:flex;justify-content:flex-end;margin:22px auto 0}
.story-page .prototype-strip__toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #cbd0d2;border-radius:50%;background:#fff;color:var(--story-ink);cursor:pointer;transition:background .2s ease}
.story-page .prototype-strip__toggle:hover{background:#edf1f2}
.story-page .prototype-strip__toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.story-page .prototype-strip__toggle svg[hidden]{display:none}
.story-page .prototype-strip__toggle:focus-visible{outline:2px solid #1d292e;outline-offset:4px}
html:root body .story-page :is(.prototype-strip__toggle,.story-prototype-toggle)[data-ui-button][data-ui-button][data-ui-button][data-ui-button]{box-shadow:none!important;animation:none!important;border-color:#cbd0d2!important}
html:root body .story-page :is(.prototype-strip__toggle,.story-prototype-toggle)[data-ui-button][data-ui-button][data-ui-button][data-ui-button]>.ui-button-orbit{display:none!important}
html:root body .story-page :is(.prototype-strip__toggle,.story-prototype-toggle)[data-ui-button][data-ui-button][data-ui-button][data-ui-button]:is(:hover,:active,:focus){box-shadow:none!important;animation:none!important;border-color:#a8b2b7!important}
html:root body .story-page :is(.prototype-strip__toggle,.story-prototype-toggle):focus:not(:focus-visible){outline:none!important}
@media(max-width:760px){
 .story-page #the-prototypes .story-wrap{display:flex;flex-direction:column;min-height:calc(100svh - 166px)}
 .story-page #the-prototypes .story-grid{display:flex;flex:1;align-items:center;padding:4px 0 30px}
 .story-page #the-prototypes .story-prototype-backdrop video{object-position:63% center}
 .story-page #the-prototypes>.story-scene__veil{background:linear-gradient(180deg,rgba(10,19,23,.68),rgba(10,19,23,.81) 34%,rgba(10,19,23,.76) 72%,rgba(10,19,23,.3)),linear-gradient(90deg,rgba(10,19,23,.35),transparent)}
 .story-page #the-prototypes .story-prototype-toggle{width:44px;height:44px;bottom:calc(22px + var(--chapter-radius))}
 .story-page>section.prototype-strip{padding:42px 0 calc(26px + var(--chapter-radius))}
 .story-page .prototype-strip__heading{margin-bottom:30px}
 .story-page .prototype-strip__heading h2{font-size:clamp(25px,6.8vw,34px);max-width:20ch;margin-inline:auto}
 .story-page .prototype-strip__group{gap:14px;padding-right:14px}
 .story-page .prototype-strip__card{width:110px;height:195px;border-radius:10px}
 .story-page .prototype-strip__controls{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.story-page .prototype-strip__controls{display:none}}

/* Two reading beats share the existing full-screen workshop film. */
.story-page>section#the-prototypes{display:block;padding:0}
.story-page #the-prototypes .story-persistence-stage{position:relative;isolation:isolate;min-height:100svh;padding:96px 0 72px}
.story-page #the-prototypes .story-persistence-stage>.story-wrap{position:relative;min-height:calc(100svh - 168px);display:flex;flex-direction:column}
.story-page #the-prototypes .story-persistence-stage .story-grid{flex:1;display:flex;align-items:center}
.story-page #the-prototypes .story-persistence-phases{position:relative;z-index:3;width:100%;max-width:530px;display:grid;gap:48px}
.story-page #the-prototypes .story-persistence-stage>.story-scene__veil{background:linear-gradient(90deg,rgba(10,19,23,.92),rgba(10,19,23,.78) 34%,rgba(10,19,23,.26) 64%,rgba(10,19,23,.2)),linear-gradient(180deg,rgba(10,19,23,.3),transparent 28%,rgba(10,19,23,.2))}
.story-page #the-prototypes.persistence-ready{height:260svh}
.story-page #the-prototypes.persistence-ready .story-persistence-stage{position:sticky;top:0;height:100svh}
.story-page #the-prototypes.persistence-ready .story-persistence-phases{gap:0}
.story-page #the-prototypes.persistence-ready [data-persistence-phase]{grid-area:1 / 1;align-self:center;will-change:opacity,transform}
.story-page #the-prototypes.persistence-ready [data-persistence-phase="0"]{opacity:var(--persistence-phase-0,1);transform:translateY(calc((1 - var(--persistence-phase-0,1)) * -16px))}
.story-page #the-prototypes.persistence-ready [data-persistence-phase="1"]{opacity:var(--persistence-phase-1,0);transform:translateY(calc((1 - var(--persistence-phase-1,0)) * 16px))}
.story-page #the-prototypes [data-persistence-phase="1"] h2{max-width:19ch}
@media(min-width:761px) and (max-height:760px){
 .story-page #the-prototypes .story-persistence-stage{padding:88px 0 44px}
 .story-page #the-prototypes .story-persistence-stage>.story-wrap{min-height:calc(100svh - 132px)}
 .story-page #the-prototypes .story-copy h2{font-size:clamp(32px,3vw,42px)}
 .story-page #the-prototypes .story-quote{font-size:18px;margin-top:18px}
}
@media(max-width:760px){
 .story-page #the-prototypes .story-persistence-stage{padding:82px 0 64px}
 .story-page #the-prototypes .story-persistence-stage>.story-wrap{min-height:calc(100svh - 146px)}
 .story-page #the-prototypes .story-persistence-stage>.story-scene__veil{background:linear-gradient(180deg,rgba(10,19,23,.68),rgba(10,19,23,.81) 34%,rgba(10,19,23,.76) 72%,rgba(10,19,23,.3)),linear-gradient(90deg,rgba(10,19,23,.35),transparent)}
 .story-page #the-prototypes .story-persistence-stage .story-grid{padding:4px 0 18px}
 .story-page #the-prototypes .story-quote{font-size:18px;line-height:1.45;margin-top:20px}
 .story-page #the-prototypes .story-prototype-toggle{bottom:18px}
}
@media(max-width:760px) and (max-height:700px){
 .story-page #the-prototypes .story-copy h2{font-size:30px}
 .story-page #the-prototypes .story-copy p{font-size:15px;line-height:1.5}
 .story-page #the-prototypes .story-quote{font-size:16px;margin-top:14px}
 .story-page #the-prototypes .story-chapter-head{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
 .story-page #the-prototypes.persistence-ready{height:auto}
 .story-page #the-prototypes.persistence-ready .story-persistence-stage{position:relative;height:auto}
 .story-page #the-prototypes.persistence-ready .story-persistence-phases{display:grid;gap:48px}
 .story-page #the-prototypes.persistence-ready [data-persistence-phase]{grid-area:auto;opacity:1;transform:none;will-change:auto}
}

/* November review: keep every subject inside the same readable two-column frame. */
@media(min-width:761px){
 .story-page>section.story-scene:not(#the-prototypes){padding:96px 0 calc(42px + var(--chapter-radius));display:block}
 .story-page .story-scene>.story-wrap{width:76%;max-width:1440px;min-height:calc(100svh - 170px)}
 .story-page .story-scene .story-chapter-head{min-height:78px;margin-bottom:20px;align-items:center}
 .story-page .story-scene .story-grid{grid-template-columns:39% 55%;gap:6%}
 .story-page .story-scene .story-year-block{padding-right:0}
 .story-page .story-scene :is(.story-visual,.story-gallery,.story-workshop){position:relative;inset:auto;width:100%;transform:none}
 .story-page .story-scene :is(.story-visual,.story-gallery){height:clamp(300px,calc(100svh - 302px),700px)}
 .story-page .story-scene .story-visual,.story-page .story-scene .story-gallery__stage .story-figure{align-items:center}
 .story-page .story-scene .story-visual>a{justify-content:center}
 .story-page .story-scene .story-figure img{width:100%;margin:0;object-position:center}
 .story-page .story-scene .story-hero__comparison>figcaption{max-width:none;margin-left:0;justify-content:center;flex-wrap:wrap}
 .story-page .story-scene figcaption,.story-page .story-scene .story-gallery__stage figcaption{justify-content:center;text-align:center}
 .story-page .story-scene .story-copy{max-width:470px;padding-block:0}
 .story-page .story-company .story-gallery__stage{height:100%}
 .story-page .story-scene .story-workshop{width:100%;align-self:center}
 .story-page .story-question .story-research-archive{height:clamp(340px,calc(100svh - 235px),560px);z-index:2}
}
.story-page .story-company .story-gallery__controls{justify-content:flex-start;gap:18px;flex-direction:row-reverse;width:max-content;max-width:100%;margin-top:2px}
.story-page .story-company .story-final-actions{gap:16px}
.story-page .story-company .story-gallery__stage{height:100%}
/* Readable journal atmosphere, with the saddle left visible beneath the archive. */
.story-page .story-question>.story-scene__backdrop img{filter:none;transform:none;opacity:.3;object-position:center 38%}
.story-page .story-question>.story-scene__veil{background:linear-gradient(90deg,rgba(11,20,24,.52),rgba(11,20,24,.38) 36%,rgba(11,20,24,.08) 70%,rgba(11,20,24,.12))}
.story-page .story-question .story-research-archive{z-index:2}
/* The entire film, including its embedded subtitles, sits above the controls. */
.story-page #thinking-behind-vision{background:#0b1216;border-radius:14px}
.story-page #thinking-behind-vision .workshop-film__stage{height:auto;min-height:0;padding:0 0 54px;aspect-ratio:auto}
.story-page #thinking-behind-vision .workshop-film__picture{height:auto;width:100%;aspect-ratio:16/9;overflow:hidden;position:relative}
.story-page #thinking-behind-vision .workshop-film__video{inset:0;display:block;position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;transform:none}
.story-page #thinking-behind-vision .workshop-film__controls{left:12px;bottom:6px;top:auto;gap:8px}
.story-page #thinking-behind-vision .workshop-film__overlay{top:7%;left:5%;width:46%}
.story-page #thinking-behind-vision .workshop-film__overlay h2{font-size:clamp(22px,2vw,32px)}
.story-page #thinking-behind-vision.is-listening .workshop-film__overlay{opacity:0;pointer-events:none}
/* The second persistence beat returns to Klaus's original presentation photograph. */
.story-page .story-resistance-media{position:absolute;inset:0;z-index:2;opacity:1;pointer-events:none}
.story-page #the-prototypes.persistence-ready .story-resistance-media{opacity:var(--persistence-phase-1,0)}
.story-page #the-prototypes .story-persistence-stage>.story-wrap{z-index:3;pointer-events:none;width:76%;max-width:1440px}
.story-page #the-prototypes .story-copy{pointer-events:auto}
.story-page #the-prototypes .story-resistance-media .story-visual{position:absolute;left:46%;right:12%;top:198px;bottom:46px;width:auto;height:auto}
.story-page #the-prototypes .story-resistance-media .story-figure img{object-position:center;margin:0;width:100%}
.story-page #the-prototypes .story-persistence-phases{max-width:39%}
.story-page #the-prototypes .story-persistence-stage .story-grid{gap:0}
.story-page #the-prototypes[data-active-phase="1"] .story-prototype-toggle{visibility:hidden}
.story-page #the-prototypes[data-persistence-linear] .story-resistance-media{position:relative;height:480px;z-index:2}
.story-page #the-prototypes[data-persistence-linear] .story-resistance-media .story-visual{position:relative;inset:auto;margin:0 auto;width:70%;height:100%}
.story-page #the-prototypes[data-persistence-linear] .story-persistence-phases{max-width:510px}
@media(min-width:761px) and (max-width:1100px){
 .story-page .story-scene>.story-wrap,.story-page #the-prototypes .story-persistence-stage>.story-wrap{width:84%}
 .story-page .story-scene .story-grid{grid-template-columns:43% 51%;gap:6%}
 .story-page #the-prototypes .story-persistence-phases{max-width:43%}
 .story-page #the-prototypes .story-resistance-media .story-visual{left:52%;right:8%}
}
@media(min-width:761px) and (max-height:700px){
 .story-page>section.story-scene:not(#the-prototypes){padding-top:84px;padding-bottom:36px}
 .story-page .story-scene>.story-wrap{min-height:calc(100svh - 120px)}
 .story-page .story-scene .story-chapter-head{min-height:55px;margin-bottom:14px}
 .story-page .story-scene :is(.story-visual,.story-gallery){height:calc(100svh - 200px)}
 .story-page .story-question .story-research-archive{height:calc(100svh - 200px)}
 .story-page #the-prototypes .story-resistance-media .story-visual{top:160px;bottom:36px}
 .story-page .story-copy p{margin-top:14px}
}
@media(max-width:760px){
 .story-page .story-company .story-gallery__controls{margin-top:0}
 .story-page .story-question>.story-scene__backdrop img{object-position:36% center}
 .story-page #thinking-behind-vision .workshop-film__stage{padding-bottom:52px}
 .story-page #thinking-behind-vision .workshop-film__overlay h2{font-size:22px}
 .story-page #thinking-behind-vision .workshop-film__actions{margin-top:10px}
 .story-page #the-prototypes .story-persistence-stage>.story-wrap{width:88%}
 .story-page #the-prototypes .story-persistence-phases{max-width:100%}
 .story-page #the-prototypes .story-resistance-media .story-visual{top:auto;left:6%;right:6%;bottom:42px;height:30svh}
 .story-page #the-prototypes[data-active-phase="1"] .story-persistence-stage .story-grid{align-items:flex-start;padding-top:10px}
 .story-page #the-prototypes [data-persistence-phase="1"]{align-self:start}
 .story-page #the-prototypes [data-persistence-phase="1"] h2{font-size:30px}
 .story-page #the-prototypes [data-persistence-phase="1"] p{font-size:15px;line-height:1.5;margin-top:12px}
 .story-page #the-prototypes [data-persistence-phase="1"] .text-link{margin-top:16px}
 .story-page #the-prototypes[data-persistence-linear] .story-resistance-media{height:320px}
}

@media(max-width:760px) and (max-height:780px){
 .story-page #the-prototypes .story-resistance-media .story-visual{height:27svh;bottom:36px}
}

/* Original portraits form the hero scenery, with no framed comparison card. */
.story-page #story-opening{overflow:hidden;min-height:100svh}
.story-hero-portraits{position:absolute;inset:0;z-index:0;background:#f2f3f3;overflow:hidden;border-radius:inherit}
.story-hero-portraits img{position:absolute;bottom:5%;height:78%;width:auto;max-width:none;object-fit:contain;border-radius:0;mask-image:linear-gradient(90deg,transparent,#000 8% 94%,transparent)}
.story-hero-portraits__young{left:40%;z-index:1}
.story-hero-portraits__today{left:62%;z-index:2}
.story-page #story-opening>.story-scene__veil{background:linear-gradient(90deg,#10191e 0%,rgba(16,25,30,.96) 25%,rgba(16,25,30,.72) 37%,rgba(16,25,30,.06) 51%,transparent 65%),linear-gradient(0deg,rgba(16,25,30,.65),transparent 15% 87%,rgba(16,25,30,.32));z-index:1}
.story-page #story-opening .story-chapter-head{position:static}
.story-page #story-opening .story-eyebrow{position:relative;z-index:3}
.story-page #story-opening .story-year-block{position:absolute;left:42%;top:11%;text-align:left;color:#1d292e;z-index:3}
.story-page #story-opening .story-year-note{max-width:20em}
.story-page #story-opening .story-hero__grid{grid-template-columns:36% 1fr;gap:0}
.story-page #story-opening .story-copy{max-width:450px}
.story-page #story-opening .story-hero-portrait-caption{position:absolute;bottom:3.5%;left:43%;right:7%;z-index:3;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
@media(min-width:761px) and (max-width:1100px){
 .story-hero-portraits img{height:66%}
 .story-hero-portraits__young{left:37%}.story-hero-portraits__today{left:58%}
 .story-page #story-opening .story-hero__grid{grid-template-columns:38% 1fr}
}
@media(max-width:760px){
 .story-page #story-opening{padding:94px 0 360px;min-height:100svh}
 .story-page #story-opening>.story-wrap{min-height:0}
 .story-page #story-opening .story-hero__grid{display:block}
 .story-page #story-opening .story-copy{padding:0;max-width:100%}
 .story-page #story-opening .story-copy h1{font-size:46px}
 .story-page #story-opening .story-copy p{font-size:15px;max-width:32ch;margin-top:16px}
 .story-page #story-opening .story-chapter-head{min-height:18px;margin-bottom:22px}
 .story-page #story-opening .story-year-block{top:auto;bottom:292px;left:7%;color:#1d292e}
 .story-page #story-opening .story-year{font-size:48px}
 .story-page #story-opening .story-year-note{display:none}
 .story-hero-portraits{background:#f2f3f3}
 .story-hero-portraits img{height:290px;bottom:32px}
 .story-hero-portraits__young{left:4%}.story-hero-portraits__today{left:43%}
 .story-page #story-opening>.story-scene__veil{background:linear-gradient(180deg,#10191e 0%,#10191e calc(100% - 360px),rgba(16,25,30,.85) calc(100% - 330px),transparent calc(100% - 290px)),linear-gradient(0deg,rgba(16,25,30,.5),transparent 55px)}
 .story-page #story-opening .story-hero-portrait-caption{left:6%;right:6%;bottom:14px;font-size:8px;gap:12px}
}
.story-hero-portraits img{mask-image:linear-gradient(90deg,transparent,#000 8% 94%,transparent),linear-gradient(180deg,transparent,#000 9% 98%,transparent);mask-composite:intersect}
@media(max-width:760px){
 .story-hero-portraits img{height:260px}
 .story-hero-portraits__young{left:1%}.story-hero-portraits__today{left:32%}
 .story-page #story-opening .story-year-block{bottom:268px}
}

/* v19 — a continuous studio floor, square hero corners and portrait-side dates. */
.story-page>section#story-opening{border-radius:0;clip-path:none}
.story-page #story-opening .story-hero-portraits{border-radius:0;background:linear-gradient(90deg,#f2f3f4 40%,#f7f8f9 75%,#f5f6f7)}
.story-page #story-opening .story-hero-portraits__young{z-index:3;mask-image:none;filter:none}
.story-page #story-opening .story-portrait-date{position:absolute;top:31%;z-index:3;color:#1d292e;text-align:left;width:13%;pointer-events:none}
.story-page #story-opening .story-portrait-date--young{left:54%}
.story-page #story-opening .story-portrait-date--later{left:86%;width:11.5%}
.story-page #story-opening .story-portrait-date .story-year{font-size:clamp(32px,2.65vw,52px);line-height:1.05;letter-spacing:-.05em;opacity:.3}
.story-page #story-opening .story-portrait-date .story-year-note{display:block;font-size:clamp(9px,.66vw,13px);line-height:1.5;letter-spacing:.08em;max-width:22ch;margin-top:9px;opacity:.82}
@media(min-width:761px) and (max-width:1100px){
 .story-page #story-opening .story-portrait-date{top:28%;width:15%}
 .story-page #story-opening .story-portrait-date--young{left:49%}
 .story-page #story-opening .story-portrait-date--later{left:81%;width:17%}
}
@media(max-width:760px){
 .story-page #story-opening{padding-bottom:405px}
 .story-page #story-opening .story-hero-portraits img{height:275px;bottom:88px}
 .story-page #story-opening .story-hero-portraits__young{left:2%;z-index:3}
 .story-page #story-opening .story-hero-portraits__today{left:37%}
 .story-page #story-opening .story-portrait-date{top:auto;bottom:20px;width:42%;color:#1d292e}
 .story-page #story-opening .story-portrait-date--young{left:7%}
 .story-page #story-opening .story-portrait-date--later{left:55%;width:40%}
 .story-page #story-opening .story-portrait-date .story-year{font-size:30px}
 .story-page #story-opening .story-portrait-date .story-year-note{font-size:9px;line-height:1.4;max-width:22ch;margin-top:5px}
 .story-page #story-opening>.story-scene__veil{background:linear-gradient(180deg,#10191e 0%,#10191e calc(100% - 405px),rgba(16,25,30,.85) calc(100% - 385px),transparent calc(100% - 350px))}
}
.story-page #story-opening>.story-scene__veil{border-radius:0}
@media(min-width:1101px){.story-page #story-opening .story-portrait-date--later{left:88%;top:29%;width:10%}}
@media(max-width:760px){
 .story-page #story-opening .story-hero-portraits img{height:245px;bottom:145px}
 .story-page #story-opening .story-portrait-date{bottom:70px}
}
@media(min-width:761px) and (max-width:1100px){.story-page #story-opening .story-portrait-date--later{left:86%;width:12%}}