/* Overview: native scrolling continuously drives the pinned presentation; navigation links land on complete steps. */
html.paged{scroll-snap-type:none;scroll-padding-top:0;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html.paged{scroll-behavior:auto}}
.paged [data-step]{scroll-snap-align:none}

/* Short scroll tracks drive the pinned frame. The last screen keeps enough space for the final pose before Results. */
.story{display:grid;padding:0}
.story>.st-pin,.story>.st-steps{grid-area:1/1}
.st-pin{position:sticky;top:0;z-index:1;align-self:start;height:100vh;height:100svh;padding:86px 0 14px}
.st-pin>.wrap{max-width:1640px;height:100%;display:flex;align-items:center}
#deck{width:100%;height:100%;max-height:940px}
.st-steps .step{height:clamp(160px,24vh,240px);height:clamp(160px,24svh,240px)}
.st-steps .step:last-child{height:100vh;height:100svh}
@media(max-width:560px){.st-pin{padding:84px 0 10px}.st-pin>.wrap{padding:0 12px}}

/* result slides, the limitations and the Explorer: one screen each */
.slide{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:92px 0 20px}
.rs .wrap{max-width:1640px;width:100%}
.rs-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 56px;align-items:end;margin-bottom:22px}
.rs-head .eyebrow{margin-bottom:14px}
.slide .h2{font-size:clamp(28px,3vw,44px)}
#effect .h2{text-wrap:balance}
@media(min-width:1200px) and (min-aspect-ratio:5/4){
  #effect .rs-in{grid-template-columns:clamp(280px,25vw,380px) minmax(0,1fr);gap:28px}
  #effect .h2{font-size:clamp(27px,2.1vw,35px);line-height:1.16}
}
.rs-head .stat b{font-size:clamp(34px,3vw,50px)}
.rs-head .stat span{margin-top:10px;font-size:14px}
@media(max-width:860px){.rs-head{grid-template-columns:1fr}.rs-head .stat{text-align:left}.rs-head .stat span{margin-left:0}}
@media(max-height:800px){.rs-head{margin-bottom:14px}.rs-head .eyebrow{margin-bottom:10px}.slide{padding-bottom:14px}}
/* charts size themselves to the screen where it can hold them (--fit, read by js/charts.js); on phones a slide may grow */
@media(min-width:761px){.rs{--fit:1}}
@media(min-width:701px){.rs .sheet{padding:24px 28px 18px}.rs .sheet-bar{margin-bottom:16px}.rs .foot{margin-top:10px}.rs .fx-chips{margin-bottom:16px}.rs .fx-body>.fx-leg{margin-bottom:14px}}
/* wide screens: the headline beside the chart (--side), so the chart gets the full height */
@media(min-width:1200px) and (min-aspect-ratio:5/4){
  .rs{--side:1}
  .rs-in{display:grid;grid-template-columns:clamp(240px,21vw,330px) minmax(0,1fr);gap:clamp(28px,3vw,52px);align-items:center}
  .rs-head{display:block;margin:0}
  .rs .h2{font-size:clamp(28px,2.3vw,40px)}
  .rs-head .stat{text-align:left;margin-top:34px;padding:26px 0 0;border-top:1px solid var(--line-2);max-width:280px}
  .rs-head .stat b{font-size:clamp(44px,3.5vw,60px)}
  .rs-head .stat span{max-width:26ch}
  .rs-head .stat span{margin-left:0}
}

/* Limitations: one worked failure drawn like chapter 04, three numbered limits under it, and the evidence scope as chips. */
.lim .wrap{width:100%;max-width:1320px}
.lim .rs-head{margin-bottom:22px}
.lim-case{margin:0;text-align:right;font:400 11.5px/1.6 var(--num);color:var(--mut)}
.lim .h2{max-width:none}
.lim-strip{margin:0}
.lim-strip svg{display:block;width:100%;height:auto}
.lim-strip .narrow{display:none}
.study-limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:22px}
.study-limit{border-top:1px solid var(--line);padding-top:18px;min-width:0}
.study-limit h3{display:flex;align-items:center;gap:10px;font:700 20px/1.2 var(--display);margin:0}
.lim-n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#B3401F;color:#fff;font:600 11.5px/1 var(--num)}
.study-limit p{font:400 14px/1.6 var(--sans);color:var(--body);margin:10px 0 0;text-wrap:pretty}
.study-limit p b{font:500 13.5px/1 var(--num);color:#B2182B;white-space:nowrap}
.lim-oracle{display:block;width:100%;max-width:400px;height:auto;margin:12px 0 0}
.lim-scope{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.lim-scope b{font:500 11px/1 var(--num);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin-right:6px}
.lim-scope span{font:400 12px/1 var(--sans);color:var(--body);padding:6px 11px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
@media(max-width:860px){.lim-case{text-align:left}}
@media(max-width:800px){.lim-strip .wide{display:none}.lim-strip .narrow{display:block;max-width:420px}.study-limits{grid-template-columns:1fr;gap:24px}.study-limit h3{font-size:21px}.lim .h2{font-size:clamp(27px,7.7vw,32px)}.study-limit p{max-width:60ch}}
@media(min-width:801px) and (max-width:1000px){.study-limit h3{font-size:18px}.study-limits{gap:22px}}
@media(min-width:801px) and (max-height:820px){.lim .rs-head{margin-bottom:16px}.lim-strip{max-width:min(100%,calc((100vh - 450px) * 5.9))}.study-limits{margin-top:16px}.study-limit{padding-top:13px}.study-limit p{font-size:13px;margin-top:7px}.lim-oracle{margin-top:8px}.lim-scope{margin-top:14px;padding-top:12px}}
@media(min-width:801px) and (max-height:700px){.lim .h2{font-size:30px}.lim-strip{max-width:min(100%,calc((100vh - 480px) * 5.9))}.lim-oracle{max-width:320px}}

/* the Explorer, with the references at the foot of the last screen */
.xp-end{padding-bottom:0}
.xp-end>.inspect-row{margin-block:auto}
.inspect-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.xp-end .h2{font-size:clamp(40px,5.6vw,72px)}
.xp-end .site-foot{padding:36px 0 40px}
.pill.lg{height:58px;padding:0 30px;font-size:18px}

/* room for the rail on the right */
@media(min-width:761px) and (max-width:1768px){.st-pin>.wrap,.rs .wrap{padding-right:64px}}
@media(min-width:761px) and (max-width:1312px){.lim .wrap,.xp-end .wrap{padding-right:64px}}

/* the rail: one mark per act; the current one is a bar that fills with its steps; names on hover and focus */
.rail{position:fixed;right:16px;top:50%;z-index:60;transform:translateY(-50%);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rail.away{opacity:0;pointer-events:none;transform:translate(10px,-50%)}
.rail ol{position:relative;list-style:none;margin:0;padding:8px 0;display:grid;gap:2px}
/* on hover and focus a panel opens to the left of the marks and names every act */
.rail ol::before{content:"";position:absolute;right:-8px;top:-4px;bottom:-4px;width:150px;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 0 0 1px var(--hair),0 18px 40px -20px rgba(26,34,48,.45);opacity:0;transform:translateX(8px);transition:opacity .25s,transform .3s var(--ease);pointer-events:none}
.rail:hover ol::before,.rail:focus-within ol::before{opacity:1;transform:none}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:22px;padding:3px 6px;border-radius:999px;text-decoration:none;color:var(--mut)}
.rail a span{position:absolute;right:calc(100% + 2px);font:500 12.5px/1 var(--sans);white-space:nowrap;padding:5px 6px;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .3s var(--ease);pointer-events:none}
.rail a.on span{color:var(--ink);font-weight:600}
.rail a:hover span{color:var(--ink)}
.rail:hover a span,.rail:focus-within a span{opacity:1;transform:none}
.rail a i{position:relative;display:block;width:8px;height:8px;border-radius:4px;background:var(--line-2);overflow:hidden;transition:height .5s var(--ease),background .3s}
.rail a.done i{background:var(--teal)}
.rail a.on i{height:30px;background:var(--teal-l)}
.rail a i b{position:absolute;left:0;right:0;top:0;height:0;border-radius:4px;background:var(--teal);transition:height .5s var(--ease)}
.rail a.on i b{height:calc(var(--p,0) * 100%)}
.rail a:hover i{background:var(--ink)}
.rail a:focus-visible{outline-offset:1px}
/* phones: a segmented bar under the header */
@media(max-width:760px){
  .rail{left:0;right:0;top:72px;transform:none}
  .rail.away{transform:translateY(-4px)}
  .rail ol{display:flex;gap:3px;padding:0 12px}
  .rail ol::before{display:none}
  .rail li{flex:1 1 0}
  .rail a{padding:0;min-height:0;border-radius:0}
  .rail a span{display:none}
  .rail a i,.rail a.on i{width:100%;height:3px;border-radius:2px}
  .rail a.on i b{height:100%;width:calc(var(--p,0) * 100%);transition:width .5s var(--ease)}
}

/* hero: the only hint the page needs, gone after the first step */
.hero .cue{position:absolute;left:50%;bottom:22px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;transform:translateX(-50%);color:rgba(255,255,255,.8);text-decoration:none;font:500 11px/1 var(--num);letter-spacing:.2em;text-transform:uppercase;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hero .cue i{position:relative;width:22px;height:34px;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62)}
.hero .cue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.9s var(--ease-io) infinite}
.hero .cue:hover{color:#fff}
.hero .cue.gone{opacity:0;transform:translate(-50%,8px);pointer-events:none}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}80%,100%{opacity:0;transform:translateY(11px)}}
@media(hover:none){.hero .cue i{width:18px;height:28px}.hero .cue i::after{top:6px;height:7px}}
/* the hero fits one screen: on short desktop screens the headline follows the height */
@media(min-width:901px) and (max-height:820px){
  .hero .wrap{padding-top:92px;padding-bottom:64px}
  .hero .h1{font-size:min(clamp(44px,6vw,84px),10.4vh)}
  .hero .deck{margin-top:18px}.hero .doors{margin-top:26px}.hero .facts{margin-top:30px}
}
/* tablets and phones: the layers take what the text leaves; a swipe needs no hint */
@media(max-width:900px){.hero .cue{display:none}.hero-visual{height:clamp(160px,calc(100svh - 640px),540px);margin:0 0 44px}}
@media(max-width:560px){.hero .door .d{display:none}.hero .door{padding:14px 18px}.hero .doors{grid-template-columns:1fr 1fr;gap:10px}.hero .door .t{font-size:16px}.hero-visual{height:clamp(150px,calc(100svh - 580px),420px)}}
@media(max-width:560px){.hero .h1{font-size:clamp(36px,10vw,44px);max-width:none;text-wrap:balance}}