.night-finale{position:relative;min-height:740px;height:100svh;background:#071014;overflow:hidden;color:#e8eee6}.night-finale>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.night-shade{position:absolute;inset:0;background:linear-gradient(0deg,#061010bb,transparent 24%),linear-gradient(90deg,#07111799,transparent 70%);pointer-events:none}.night-copy{position:absolute;left:8%;top:22%}.night-copy h2{font-size:clamp(60px,7vw,100px);letter-spacing:-4px;line-height:1.04}.night-copy>p:not(.chapter-kicker){color:#b2c7be;font-size:14px;line-height:1.8;margin-top:26px}.night-copy .text-link{margin-top:8px}.night-bottom{position:absolute;left:5%;right:5%;bottom:35px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#a5bcb1;font-size:10px}.night-bottom>span{font-size:8px;letter-spacing:2px}.night-controls{display:flex;gap:25px}.night-controls button{background:none;border:0;color:#c5d9ca;font-size:11px;padding:12px 0}.night-copy .chapter-kicker{color:#9cc39b}.motion-paused .night-finale{height:100svh}@media(max-width:700px){.night-finale{height:100svh;min-height:650px}.night-finale>video{object-position:70% center}.night-copy{left:7%;right:7%;top:15%}.night-copy h2{font-size:60px;letter-spacing:-2px}.night-copy>p:not(.chapter-kicker){font-size:13px}.night-bottom{left:7%;right:7%;bottom:25px;flex-wrap:wrap}.night-bottom>span{width:100%}.night-controls{width:100%;justify-content:space-between}}

.night-copy{transition:opacity 200ms var(--ease-out)}.view-only .night-copy{opacity:0;pointer-events:none}.view-only .night-shade{opacity:.25}@media(prefers-reduced-motion:reduce){.night-copy{transition:none}}@media(max-width:700px){.night-controls{gap:16px;flex-wrap:wrap}.night-controls button{font-size:10px}}

/* Night settles within the existing pinned journey. */
.film-stage>.night-pinned{position:absolute;inset:0;height:100%;min-height:0;z-index:6;opacity:0}
.night-pinned.view-only .night-copy{opacity:0!important}
@media(max-width:700px){.night-pinned>video{inset:auto 0 6%;height:62%;object-position:70% center}.night-pinned .night-copy{top:8%}.night-pinned .night-copy h2{font-size:44px}.night-pinned .night-shade{background:linear-gradient(0deg,#070e0e 2%,transparent 16%,transparent 57%,#070e0e 73%)}.night-pinned .night-copy>p:not(.chapter-kicker){margin-top:14px}.night-pinned .night-copy .text-link{font-size:12px}}

/* Shared footer metrics keep the label anchored when the night loop takes over. */
.realm-bottom,.night-bottom{bottom:32px;left:5%;right:5%;min-height:40px;gap:18px;flex-wrap:nowrap;align-items:center;font-family:'Space Grotesk',sans-serif;color:#a9baa5}
.realm-bottom>span:first-child,.night-bottom>span:first-child{font-family:inherit;font-size:9px;font-weight:400;line-height:16px;letter-spacing:1.2px;width:auto}
.realm-motion,.night-controls button{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:400;line-height:16px;letter-spacing:normal;color:#c6d6be;padding:12px 0 12px 12px}
.night-controls{width:auto;flex-wrap:nowrap;gap:25px}
@media(max-width:700px){
.realm-bottom,.night-bottom{bottom:max(18px,env(safe-area-inset-bottom));left:7%;right:7%;gap:12px}
.realm-bottom>span:first-child,.night-bottom>span:first-child{font-size:7px;letter-spacing:.8px;line-height:1.8;max-width:150px;width:auto}
.night-controls{width:auto;gap:12px;flex-wrap:nowrap}.night-controls button{font-size:11px;white-space:nowrap}
}

/* Anchor changing hints independently of the label and control widths. */
.realm-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;text-align:center}

/* Use the same typography for the footer label and motion control. */
.realm-motion,.night-controls button{font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:400;line-height:16px;letter-spacing:1.2px;text-transform:uppercase;color:#a9baa5}
@media(max-width:700px){.realm-motion,.night-controls button{font-size:7px;line-height:1.8;letter-spacing:.8px}}

/* One footer system for the opening, chapters, and resting scene. */
.film-bottom,.realm-bottom,.night-bottom{position:absolute;left:5%;right:5%;bottom:32px;height:40px;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:nowrap;font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:400;line-height:16px;letter-spacing:1.2px;text-transform:uppercase;color:#a9baa5}
.film-bottom .scroll-cue,.film-bottom .film-note,.realm-bottom .realm-hint,.film-bottom #motion,.realm-motion,.night-controls button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.film-bottom #motion,.realm-motion,.night-controls button{height:40px;display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;white-space:nowrap}
.film-bottom #motion span{margin:0}
.film-bottom .scroll-cue{gap:8px}.film-bottom .scroll-icon{width:auto;height:auto;border:0;border-radius:0;font:inherit;line-height:inherit}
.film-bottom .film-note,.realm-bottom .realm-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
@media(max-width:700px){
.film-bottom,.realm-bottom,.night-bottom{left:7%;right:7%;bottom:max(18px,env(safe-area-inset-bottom));gap:12px;font-size:7px;line-height:1.8;letter-spacing:.8px}
.film-bottom .film-note,.realm-bottom .realm-hint{display:none}
}

/* Keep the same left note / centered guidance / right control order. */
.film-bottom .film-note{position:static;transform:none;text-align:left;order:0}
.film-bottom .scroll-cue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
.film-bottom #motion{margin-left:auto}
@media(max-width:700px){.film-bottom .film-note{display:block;max-width:55%;white-space:normal}.film-bottom .scroll-cue{display:none}}

.chapter-detail-link{display:inline-block;margin-top:22px;padding:10px 0;border-bottom:1px solid #b4d89c66;font-size:13px;color:#dce8d2;line-height:1.4}.chapter-detail-link:hover{color:var(--green)}@media(max-width:700px){.chapter-detail-link{margin-top:10px;font-size:11px;padding:6px 0}}

/* Align homepage navigation with the hero copy column. */
.nav{padding-left:8%;padding-right:8%}
@media(max-width:700px){.nav{padding-left:7%;padding-right:7%}}

@media(max-width:700px){
.film-bottom #motion.motion-icon,.realm-bottom .motion-icon,.night-controls .motion-icon{width:44px;height:44px;flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid #c5dbbd55;border-radius:50%;background:#08110e40;color:#dce8d2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.motion-icon svg{width:18px;height:18px;display:block}.motion-icon:active{background:#b4d89c26}
}