/* Shared editorial rhythm for stories, explanation, offers and footer. */
:root{--page-width:1240px;--page-gutter:clamp(24px,4vw,56px);--section-space:64px;--type-display:clamp(40px,4vw,56px);--type-section:clamp(34px,3.3vw,46px);--type-story:clamp(30px,2.8vw,40px);--type-body:18px;--type-meta:14px}
html{scroll-padding-top:24px}
body{font-size:var(--type-body);line-height:1.7}
.wrap,.navigation{width:calc(100% - var(--page-gutter)*2);max-width:var(--page-width)}
.navigation{height:80px}
.opening-stage,.case-stage{width:100%;max-width:calc(var(--page-width) + var(--page-gutter)*2);height:auto;min-height:0;max-height:none;margin-inline:auto;padding:28px var(--page-gutter);gap:24px;justify-content:flex-start}
.story-topline{justify-content:flex-end}
.intro-choices button,.case-choices button{font-size:var(--type-meta);padding:9px 13px}
.scene-layout,.case-layout{flex:none;max-height:none;gap:6%;align-items:center}
.scene-layout{grid-template-columns:.85fr 1.15fr}
.case-layout{grid-template-columns:1.08fr .92fr}
.film{width:100%;border-radius:20px}
.scene-kind,.eyebrow,.case-kind,.offer-status{font-size:var(--type-meta);line-height:1.5}
.scene-kind{margin-bottom:16px}
.eyebrow{margin-bottom:12px}
.narrative h1{font-size:var(--type-display);font-weight:400;line-height:1.12;letter-spacing:-.05em;margin-bottom:24px}
.case-layout .narrative h3{font-size:var(--type-story);font-weight:400;line-height:1.18;letter-spacing:-.045em;margin-bottom:20px}
.bridge h2,.case-heading h2,.individual h2,.offer-intro h2{font-size:var(--type-section);font-weight:400;line-height:1.18;letter-spacing:-.045em}
.narrative-text,.case-layout .narrative-text,.bridge-copy,.individual-copy p,.offer-intro p,.offers article>p:not(.offer-status){font-size:var(--type-body);line-height:1.7}
.narrative-text{margin-bottom:20px}
.beat-nav,.case-layout .beat-nav{margin:24px 0 20px}
.beat-nav button{font-size:var(--type-meta);min-height:44px;padding-block:10px}
.inline-link,.narrative>.inline-link{font-size:16px;font-weight:500;line-height:1.6;display:inline-block;margin-top:4px}
.stage-bottom{flex-shrink:0;font-size:13px;padding-top:16px;margin-top:0}
.bridge{display:grid;grid-template-columns:1.05fr .95fr;gap:16px 7%;text-align:left;max-width:var(--page-width);padding-block:var(--section-space)}
.bridge-question{grid-column:1;font-size:var(--type-meta);line-height:1.5;margin:0}
.bridge-question br,.bridge h2 br{display:none}
.bridge h2{grid-column:1;margin:0}
.bridge-copy{grid-column:2;grid-row:1 / span 2;align-self:center;max-width:none;margin:0}
.cases{border-radius:24px 24px 0 0}
.case-stage{gap:20px;padding-block:32px}
.case-heading{align-items:center;gap:24px}
.case-heading h2{margin:0}
.case-choices{gap:8px;padding:0}
.case-choices button{line-height:1.4}
.clues{margin-top:20px;gap:8px}
.clues span{font-size:var(--type-meta);line-height:1.5;padding:5px 10px}
.case-role{font-size:15px;margin-bottom:16px}
.individual{grid-template-columns:1.05fr .95fr;gap:7%;padding-block:var(--section-space)}
.individual-copy p{margin-bottom:20px}
.individual-copy p:last-child{margin-bottom:0}
.offer-section{padding-block:56px;border-radius:24px 24px 0 0}
.offer-intro{grid-template-columns:1.05fr .95fr;gap:7%;margin-bottom:36px}
.offers article{padding:28px 32px 0 0}
.offers article+article{padding-left:32px}
.offers h3{font-size:30px;line-height:1.25;margin-bottom:18px}
.offers article>p:not(.offer-status){margin-bottom:20px}
.primary{font-size:16px;line-height:1.5;padding:14px 18px;margin-top:8px}
.site-footer{display:block;padding:0;font-size:16px;border-top:1px solid var(--line);color:var(--muted)}
.footer-main{display:grid;grid-template-columns:1fr auto;gap:64px;padding-block:40px 32px}
.footer-brand .brand{display:inline-block;margin-bottom:16px}
.footer-brand p{max-width:440px;margin:0;line-height:1.7;font-size:16px}
.footer-main nav{display:flex;flex-direction:column;gap:10px;min-width:210px}
.footer-main h4{font-size:14px;font-weight:500;color:var(--ink);margin:0 0 4px}
.footer-main nav a:hover{text-decoration:underline;text-underline-offset:5px}
.footer-bottom{padding-block:20px 24px;border-top:1px solid var(--line);font-size:13px;line-height:1.7}
/* Fit the visible frame to its content; keep reading distance separately. */
@media(prefers-reduced-motion:no-preference){.chapter[data-sc-act]{height:calc(var(--story-height,800px) + var(--story-travel,300vh))!important}.chapter .sc-stage{top:var(--story-top,0px);height:auto;overflow:visible}}
@media(max-width:1100px) and (min-width:761px){
 :root{--page-gutter:32px;--type-display:42px;--type-section:36px;--type-story:32px;--type-body:17px}
 .scene-layout,.case-layout{grid-template-columns:1fr 1fr;gap:5%}
 .case-choices button{font-size:13px;padding:8px 11px}
}
@media(max-width:760px){
 :root{--page-gutter:20px;--section-space:40px;--type-display:34px;--type-section:30px;--type-story:28px;--type-body:16px;--type-meta:13px}
 .navigation{height:68px}
 .opening-stage,.case-stage{padding-block:20px;gap:18px}
 .scene-layout,.case-layout{flex:none;gap:18px}
 .opening .film,.case-film{aspect-ratio:16/9;max-height:210px;width:100%;max-width:570px}
 .film{border-radius:14px}
 .intro-choices{gap:4px}
 .intro-choices button{font-size:12px;padding:8px 10px}
 .scene-kind{font-size:14px;margin-bottom:12px}
 .narrative h1{font-size:var(--type-display);line-height:1.14;margin-bottom:18px}
 .case-layout .narrative h3{font-size:var(--type-story);line-height:1.18;margin-bottom:16px}
 .narrative-text,.case-layout .narrative-text{font-size:var(--type-body);line-height:1.7;margin-bottom:16px}
 .beat-nav,.case-layout .beat-nav{margin:16px 0}
 .beat-nav button{font-size:12px;min-height:44px}
 .inline-link,.narrative>.inline-link{font-size:15px;margin-top:0}
 .stage-bottom{font-size:12px;padding-top:14px}
 .bridge{grid-template-columns:1fr;gap:14px;padding-block:var(--section-space)}
 .bridge-question,.bridge h2,.bridge-copy{grid-column:1;grid-row:auto}
 .bridge-copy{margin-top:4px}
 .case-heading{align-items:start;gap:16px}
 .case-heading .eyebrow{display:none}
 .case-kind{font-size:12px;max-width:95px;text-align:right;white-space:normal}
 .case-heading h2{font-size:var(--type-section)}
 .mobile-choice{font-size:13px}
 .mobile-choice select{font-size:14px;min-height:44px}
 .clues{margin-top:14px;gap:6px}
 .clues span{font-size:12px;line-height:1.5;padding:4px 8px}
 .case-role{font-size:14px;margin-bottom:14px}
 .individual{grid-template-columns:1fr;gap:24px;padding-block:var(--section-space)}
 .individual h2,.offer-intro h2{font-size:var(--type-section)}
 .individual-copy p{font-size:var(--type-body);line-height:1.7;margin-bottom:18px}
 .offer-section{padding-block:40px}
 .offer-intro{grid-template-columns:1fr;gap:20px;margin-bottom:28px}
 .offers article,.offers article+article{padding:24px 0}
 .offers article:last-child{padding-bottom:0}
 .offers h3{font-size:26px}
 .offers article>p:not(.offer-status),.offer-intro p{font-size:var(--type-body);line-height:1.7}
 .primary{font-size:15px;gap:16px}
 .footer-main{grid-template-columns:1fr;gap:28px;padding-block:32px 28px}
 .footer-brand p{font-size:15px}
 .footer-bottom{font-size:12px;padding-block:18px 22px}
}
@media(max-width:380px){:root{--type-display:30px;--type-section:28px;--type-story:26px}.stage-bottom{display:flex}}
@media(prefers-reduced-motion:reduce){.opening-stage,.case-stage{height:auto!important;min-height:0;top:auto!important;padding-block:28px}.chapter[data-sc-act]{height:auto!important}}