/* Scroll view after the Posen dossier: text column, sticky full page, phrase highlights synced to the voice. */
.passage-page{font-family:var(--serif);color:var(--ink)}
.passage-intro{max-width:44rem;margin:0 auto;padding:2.5rem 1rem 1rem}
.passage-intro h1{font-size:2rem;line-height:1.2;font-weight:600;margin:0 0 1rem}
.standfirst{font-size:1.15rem;line-height:1.6;color:var(--ink-2);margin:0 0 1.5rem}
.passage-hero{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2.5rem;align-items:center;max-width:52rem}
.hero-photo{margin:0}
.hero-photo img{display:block;width:100%;height:auto}
.hero-photo figcaption{margin-top:.6rem;font:400 14px/1.45 var(--sans);color:var(--ink-2)}
.hero-text .standfirst{margin-bottom:0}
@media (max-width:640px){.passage-hero{grid-template-columns:minmax(0,1fr);gap:1.5rem}.hero-photo{max-width:16rem}}
.jumps h2{font:500 1rem/1.4 var(--sans);margin:0 0 .5rem}
.jumps ol{margin:0;padding-left:1.4rem;font:400 .98rem/1.5 var(--sans)}
.jumps li{margin:.3rem 0}
.passage-routes{display:flex;flex-wrap:wrap;gap:12px 24px;margin:1rem 0 2rem;padding-top:1.25rem;border-top:1px solid var(--rule);font:400 15px/1.5 var(--sans)}
.passage-page a{color:var(--slate,#3d4a57)}
.passage-page a:focus-visible,.passage-page button:focus-visible{outline:3px solid var(--slate,#3d4a57);outline-offset:3px}
.listen-wrap{display:grid;grid-template-columns:minmax(0,34rem) minmax(0,1fr);gap:2.5rem;max-width:84rem;margin:0 auto;padding:0 1rem}
.steps{grid-column:1;grid-row:1}
.stage{grid-column:2;grid-row:1;position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.step{min-height:85vh;padding:2.5rem 0;scroll-margin-top:1rem;font-size:18px;line-height:1.6}
.listen-wrap .step:only-child{min-height:0}
.step h2{font-size:1.3rem;line-height:1.3;font-weight:600;margin:0 0 1rem}
.step p{margin:0 0 1rem}
.listen{margin:0 0 1.25rem;font:400 .95rem/1.5 var(--sans)}
.listen-label{margin:0 0 .3rem!important;color:var(--ink-2)}
.listen audio{width:100%;max-width:26rem}
.words{margin:0 0 1.25rem;padding:0 0 0 1rem;border-left:3px solid var(--slate,#3d4a57)}
.words p{font-style:italic;color:var(--ink-2)}
.cue{text-decoration:underline 3px transparent;text-underline-offset:4px;transition:text-decoration-color .3s}
.cue.now{color:var(--ink);text-decoration-color:#d9b44a}
.note,.source{font:400 .95rem/1.5 var(--sans);color:var(--ink-3)}
.sheet{margin:0;width:min(100%,calc((100vh - 5rem)*var(--ar)))}
.sheet[hidden]{display:none}
.sheet.in{animation:sheet-fade .45s ease-out}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}
.enlarge{all:unset;display:block;position:relative;cursor:zoom-in;border:1px solid var(--rule);background:var(--scan-paper,#fffefa)}
.enlarge img{display:block;width:100%;height:auto}
.enlarge svg{position:absolute;inset:0;width:100%;height:100%}
.hl{opacity:0;mix-blend-mode:multiply}
.hl.lift{fill:#333;mix-blend-mode:color-dodge}
.hl.tint{fill:#ffee82}
.sheet figcaption{font:400 .88rem/1.4 var(--sans);color:var(--ink-2);margin-top:.5rem}
#sheet-dialog{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:var(--paper)}
#sheet-dialog::backdrop{background:rgba(34,26,20,.6)}
.dlg-bar{position:sticky;top:0;display:flex;justify-content:flex-end;padding:.5rem 1rem;background:var(--paper);border-bottom:1px solid var(--rule)}
.dlg-bar button{font:400 1rem/1.4 var(--sans);padding:.4rem 1rem;border:1px solid var(--ink-3);background:var(--paper);color:var(--ink);cursor:pointer}
.dlg-body{overflow:auto;height:calc(100vh - 3.2rem)}
.dlg-body img{display:block;margin:0 auto;max-width:none}
.passage-site-header{border-bottom:1px solid var(--rule);font:400 15px/1.4 var(--sans)}
.passage-site-header>div{max-width:84rem;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.passage-site-header nav{display:flex;flex-wrap:wrap;gap:20px}
.passage-site-header a{color:var(--ink);text-underline-offset:4px}
.passage-site-header .passage-brand{font-weight:600;text-decoration:none}
@media (max-width:900px){
 .listen-wrap{grid-template-columns:minmax(0,1fr);gap:0}
 .stage{grid-column:1;grid-row:1;height:auto;z-index:2;background:var(--paper);padding:.5rem 0;border-bottom:1px solid var(--rule)}
 .steps{grid-column:1;grid-row:2}
 .sheet{width:min(100%,calc(46vh*var(--ar)));margin:0 auto}
 .sheet figcaption{font-size:.8rem}
 .step{min-height:auto;padding:2rem 0;scroll-margin-top:calc(46vh + 5rem);font-size:17px}
 .passage-intro h1{font-size:1.6rem}
 .passage-site-header>div{padding:14px 16px;gap:12px}
 .passage-site-header nav{gap:16px}
}
@media (prefers-reduced-motion:reduce){
 .sheet.in{animation:none}
 .cue{transition:none}
}