/* Shared edge alignment for the home header, title, scene labels and controls. */
.cinema-home{--hero-gutter:clamp(22px,3.35vw,64px)}
.cinema-home .site-header.floating-header{padding-inline:var(--hero-gutter)}
/* Static overview windows; full-size scenes dissolve above them. */
.cinema-home .window-hero{height:100svh;min-height:540px;background:#667269;color:#f3f0e6;overflow:clip;isolation:isolate}
.cinema-home .window-hero .window-stage{position:relative;height:100svh;min-height:540px;overflow:clip;isolation:isolate;touch-action:pan-y}
.window-hero .window-panels,.window-hero .window-slides{position:absolute;inset:0}
.window-hero .window-panel{position:absolute;top:0;bottom:0;left:var(--left);width:var(--width);overflow:hidden;background:#667269;border-right:1px solid rgba(243,240,230,.35)}
.window-hero .window-slides{z-index:2;pointer-events:none}
.window-hero .window-slide{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none}
.window-hero .window-slide.is-current,.window-hero .window-slide.is-outgoing{opacity:1;visibility:visible;z-index:1}
.window-hero .window-slide.is-incoming{opacity:1;visibility:visible;z-index:2}
.window-hero .window-media{position:absolute;inset:0;overflow:hidden}
.window-hero .window-media img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,center);filter:saturate(.95);position:absolute;inset:0;transform:scale(1.035);transform-origin:var(--focus,center);backface-visibility:hidden;user-select:none;-webkit-user-drag:none}
.window-hero .window-panel::after,.window-hero .window-slide::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(24,39,32,.68),rgba(24,39,32,.05) 65%),linear-gradient(180deg,rgba(24,39,32,.16),transparent 30%)}
.window-hero .window-trigger{position:absolute;inset:0;z-index:2;border:0;background:transparent;color:inherit;cursor:pointer;padding:0;text-align:left;font:inherit}
.window-hero .window-caption{position:absolute;inset:0;z-index:2}
.window-hero .window-label{position:absolute;left:var(--hero-gutter);right:12px;bottom:175px;white-space:normal;pointer-events:none}
.window-hero .window-number{display:block;font:500 11px/1.6 var(--sans);letter-spacing:.14em;margin-bottom:20px;opacity:.85}
.window-hero .window-name{display:block;font:400 clamp(28px,2.4vw,40px)/1.08 var(--editorial,Georgia,serif);letter-spacing:-.025em}
.window-hero .window-slide .window-label{left:var(--hero-gutter)}
.window-hero .window-slide .window-name{font-size:clamp(28px,2.4vw,40px)}
.window-hero .window-note{position:absolute;right:var(--hero-gutter);bottom:130px;z-index:3;font:400 11px/1.5 var(--sans);opacity:.8;max-width:210px;text-align:right;pointer-events:none}
.window-hero .window-footer{position:absolute;z-index:5;bottom:32px;left:var(--hero-gutter);right:var(--hero-gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(243,240,230,.35);padding-top:18px;opacity:var(--hero-cue,1)}
.window-hero .window-footer[inert],.window-hero .window-footer[inert] *{pointer-events:none!important}
.window-hero .window-headline{position:absolute;z-index:4;left:var(--hero-gutter);right:var(--hero-gutter);bottom:290px;margin:0;color:inherit;font:400 clamp(48px,5vw,88px)/1.05 var(--editorial,Georgia,serif);letter-spacing:-.025em;pointer-events:none;opacity:var(--hero-cue,1)}
.window-hero .window-signature{font:400 12px/1.5 var(--sans);letter-spacing:.11em;margin:0}
.window-hero .window-controls,.window-hero .window-indices{display:flex;align-items:center;gap:16px}
.window-hero .window-index,.window-hero .window-overview{min-height:44px;border:0;background:transparent;color:inherit;font:400 12px/1.5 var(--sans);cursor:pointer;padding:6px 10px}
.window-hero .window-index{position:relative;opacity:.65}
.window-hero .window-index[aria-pressed=true]{opacity:1}
.window-hero .window-index[aria-pressed=true]::after{content:'';position:absolute;bottom:3px;left:10px;right:10px;height:1px;background:currentColor}
.window-hero .window-overview{margin-right:12px;opacity:0;pointer-events:none;transition:opacity .3s}
.window-hero[data-mode=expanded] .window-overview{opacity:1;pointer-events:auto}
.window-hero .window-step{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid rgba(243,240,230,.45);border-radius:50%;padding:0;background:transparent;color:inherit;cursor:pointer;transition:background-color .2s}
.window-hero .window-step:hover{background:rgba(243,240,230,.12)}
.window-hero .overview-short{display:none}
.cinema-home .window-hero .cinema-skip{position:static;transform:none;flex-shrink:0;width:40px;height:40px;margin-left:18px;background:transparent;backdrop-filter:none;box-shadow:none;color:inherit}
.window-hero button:focus-visible{outline:2px solid #f3f0e6;outline-offset:-5px}
.window-hero .window-trigger:focus-visible{outline-offset:-8px}
/* The overlapping chapter must not intercept controls while the hero is still visible. */
.window-hero.hero-controls-in-view + .brand-film,
.window-hero.hero-controls-in-view + .brand-film > :first-child,
.window-hero.hero-controls-in-view + .brand-film > :first-child *{pointer-events:none!important}
@media(max-width:760px){
 .cinema-home{--hero-gutter:20px}
 .window-hero .window-headline{bottom:290px;max-width:12ch;font-size:clamp(44px,12vw,64px)}
 .window-hero .window-label{left:var(--hero-gutter);right:8px;bottom:175px}
 .window-hero .window-name{font-size:clamp(18px,5vw,30px)}
 .window-hero .window-number{font-size:9px;letter-spacing:.06em;margin-bottom:14px}
 .window-hero .window-slide .window-label{left:var(--hero-gutter);right:var(--hero-gutter);bottom:175px}
 .window-hero .window-slide .window-name{font-size:30px}
 .window-hero .window-note{bottom:120px;left:var(--hero-gutter);right:auto;text-align:left;font-size:10px;max-width:none}
 .window-hero .window-footer{left:var(--hero-gutter);right:var(--hero-gutter);bottom:18px;flex-wrap:wrap;gap:6px;padding-top:10px}
 .window-hero .window-signature{font-size:10px;width:100%}
 .window-hero .window-controls{display:grid;width:100%;grid-template-columns:44px 40px minmax(0,1fr) 40px 34px;gap:4px}
 .window-hero .window-indices{gap:0;min-width:0;justify-content:space-evenly}
 .window-hero .window-step{width:40px;height:44px;border-radius:0;border:0}
 .window-hero .window-index{padding:6px 0;flex:1;min-width:24px}
 .window-hero .window-index[aria-pressed=true]::after{left:6px;right:6px}
 .window-hero .window-overview{padding:0;margin:0;font-size:10px;text-align:left}
 .window-hero .overview-wide{display:none}.window-hero .overview-short{display:inline}
 .cinema-home .window-hero .cinema-skip{margin:0;width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){.window-hero *{transition:none!important;animation:none!important}}

@media(max-width:360px){.cinema-home{--hero-gutter:15px}}