/* The film journey. The book's existing reading content stays in book.css. */
:root{--cinema:#171713;--cinema-ink:#f5eedf;--gold:#d9bd8c}
html{scroll-behavior:auto}
.site-header{position:fixed;color:var(--cinema-ink);height:84px;transition:background .2s,color .2s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(23,23,19,.9);border-color:#ffffff20;backdrop-filter:blur(12px)}
.site-header.over-reading{color:var(--ink);background:rgba(244,243,238,.97);border-color:var(--rule)}
.site-header nav{margin-right:10px;gap:27px}.site-header nav a:hover{color:var(--gold)}
.site-header .header-cta{background:#a92a1f;border:1px solid #eacda426;color:#fff}
.motion-toggle{border:1px solid currentColor;background:transparent;padding:8px 11px;font:500 12px/1.5 var(--sans);color:inherit;min-height:40px;white-space:nowrap}
.cinema{position:relative;background:var(--cinema);color:var(--cinema-ink)}
.chapter-scene{position:relative;isolation:isolate;min-height:850px;height:100svh;overflow:hidden;background:var(--cinema);scroll-margin-top:0}
.film-art,.film-shade{position:absolute;inset:0;pointer-events:none}
.film-art{z-index:-2;background:var(--cinema)}
.film-art img,.film-art video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:57% 50%;display:block;inset:0}
.film-art video{opacity:0}.chapter-scene.has-frame .film-art video{opacity:1}
.film-shade{z-index:-1;background:linear-gradient(90deg,rgba(12,15,13,.86) 0,rgba(12,15,13,.57) 24%,transparent 58%),linear-gradient(0deg,rgba(12,15,13,.9),transparent 24%,transparent 75%,rgba(12,15,13,.62))}
.film-copy{position:absolute;left:var(--gutter);top:24%;width:35%;max-width:470px;will-change:opacity;opacity:var(--copy-opacity,1)}
.film-copy .eyebrow{color:var(--gold);font-size:12px;letter-spacing:.18em;margin-bottom:25px}
.film-copy h1{font-size:clamp(66px,7.7vw,122px);letter-spacing:-.04em;line-height:.87;text-transform:uppercase;margin-bottom:25px}
.film-copy h2{font-size:clamp(48px,5.7vw,88px);line-height:.98;margin-bottom:28px;letter-spacing:-.045em}
.film-copy p:not(.eyebrow){font-size:19px;line-height:1.48;max-width:330px;text-wrap:pretty}
.film-copy p+p{margin-top:20px}.film-copy .film-subtitle{font-size:clamp(22px,2.1vw,33px)!important;line-height:1.2!important;max-width:470px!important}
.film-copy .film-intro{font-size:17px!important;margin-top:24px}.film-copy .text-link{margin-top:23px;color:var(--cinema-ink)}
.opening-title{top:20%;width:44%;max-width:650px}
.film-caption{position:absolute;bottom:112px;left:var(--gutter);right:var(--gutter);text-align:right;font:400 14px/1.5 var(--sans);color:var(--cinema-ink);opacity:var(--caption-opacity,1);text-shadow:0 2px 15px #000}
.cinema-controls{display:none}.cinema-status{position:absolute;bottom:125px;left:var(--gutter);font:400 12px/1.5 var(--sans);color:var(--gold)}
.has-cinema .cinema{height:1040svh}
.has-cinema .cinema-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.has-cinema .chapter-scene{position:absolute;inset:0;min-height:0;height:100%;visibility:hidden;pointer-events:none}
.has-cinema .chapter-scene.is-current{visibility:visible;pointer-events:auto}
.has-cinema .cinema-controls{position:absolute;display:flex;align-items:end;gap:30px;left:var(--gutter);right:var(--gutter);bottom:30px;z-index:5}
.cinema-count{font:400 12px/1.5 var(--sans);white-space:nowrap;color:#ddd5c7;padding-bottom:2px}.cinema-count b{font-weight:600;color:white;margin-right:10px}
.cinema-controls nav{display:flex;gap:15px;flex:1;max-width:690px}
.cinema-controls nav a{display:flex;flex-direction:column;gap:12px;min-height:45px;justify-content:end;text-decoration:none;font:400 14px/1.5 var(--sans);width:25%;color:#d8d1c3}
.cinema-controls nav i{position:relative;height:2px;background:#ffffff45;width:100%;overflow:hidden}
.cinema-controls nav i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(var(--progress,0));transform-origin:left}
.cinema-controls nav a[aria-current]{color:#fff}.cinema-controls nav a:hover{color:var(--gold)}
.cinema-instruction{font:400 12px/1.5 var(--sans);margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:15px}.cinema-instruction span{font-size:22px}
.art-note{padding-top:24px;padding-bottom:24px;font:400 12px/1.6 var(--sans);color:var(--muted);border-bottom:1px solid var(--rule)}
.research-link{margin-left:0;display:table!important}.reading-intro .text-link{font-size:14px}
.cinema a:focus-visible,.motion-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.cinema .film-copy:has(:focus-visible){opacity:1!important}.cinema .film-shade:has(+.film-copy :focus-visible){opacity:1!important}
@media(min-width:1700px){.film-copy{left:max(var(--gutter),calc((100vw - 1500px)/2))}.film-copy h1{font-size:140px}}
@media(max-height:800px) and (min-width:1101px) and (min-aspect-ratio:1/1){
 .opening-title{top:18%}.film-copy h1{font-size:clamp(60px,7vw,94px)}
 .film-copy .film-subtitle{font-size:25px!important}.film-intro{display:none}
 .film-copy h2{font-size:clamp(43px,5vw,68px)}.film-copy{top:21%}
 .film-copy .eyebrow{margin-bottom:18px}.film-copy .text-link{margin-top:20px}
}
html:not(.has-cinema) .film-copy{opacity:1!important}
html:not(.has-cinema) .film-caption{bottom:30px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film-copy{will-change:auto}}
@media print{.cinema,.site-header,.art-note{display:none!important}}
