.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}
}

/* A single mobile canvas and control rail across moving and still scenes. */
@media(max-width:700px){
.film-stage,.realm-stage,.night-finale{height:100svh;min-height:0}
.film-stage{--mobile-picture-top:32%;--mobile-picture-bottom:76px}
.film-stage>.hero-film,.film-stage>.intro-film,.film-stage>.next-film,.film-stage>.intro-reset-poster,
#forge>.realm-stage>video,.realm-stage>video,.night-finale>video{
 inset:auto 0 var(--mobile-picture-bottom,76px);top:var(--mobile-picture-top,32%);width:100%;height:calc(68% - var(--mobile-picture-bottom,76px));object-fit:cover!important;background:#070e0e;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
.film-shade,.realm-shade,#forge .realm-shade,#forge.sequence-research-active .realm-shade,#forge.sequence-feed-active .realm-shade,.night-finale .night-shade{
 background:linear-gradient(0deg,#070e0e 0,transparent 16%,transparent 59%,#070e0e 72%)}
.film-bottom,.realm-bottom,.night-bottom{height:44px;min-height:44px;bottom:max(16px,env(safe-area-inset-bottom));left:7%;right:7%}
.film-bottom #motion.motion-icon,.realm-bottom .motion-icon,.night-controls .motion-icon{position:absolute;right:0;top:0;margin:0}
.night-controls{position:static}.film-bottom .film-note,.realm-bottom>span:first-child,.night-bottom>span:first-child{max-width:calc(100% - 64px);padding-right:0}
.hero-copy{top:100px;left:7%;right:7%}.hero-copy h1{font-size:56px}.hero-copy .eyebrow{margin-bottom:16px}.hero-description{margin-top:18px;font-size:12px}
.film-caption{top:12%}.film-caption p{font-size:38px}.next-film-heading{top:12%}
.realm-copy,.realm-right .realm-copy,.night-finale .night-copy{top:8%}
}

/* Optional guided playback, using the existing motion controls once started. */
.watch-journey{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 12px;margin-top:12px;border:1px solid #c5dbbd55;border-radius:30px;background:#08110e70;color:#dce8d2;font-size:12px;backdrop-filter:blur(8px)}
.watch-journey svg{width:17px;height:17px}.watch-journey:hover{border-color:#b6f17f;color:#b6f17f}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media(max-width:700px){.watch-journey{margin-top:4px;font-size:11px;min-height:44px}}

.journey-reading{margin:20px auto 0;width:130px;color:#a9baa5;font-size:10px;letter-spacing:.5px;text-align:center}.journey-reading[hidden]{display:none}.journey-reading progress{display:block;width:100%;height:2px;margin-top:10px;border:0;border-radius:2px;appearance:none;background:#c5dbbd26}.journey-reading progress::-webkit-progress-bar{background:#c5dbbd26}.journey-reading progress::-webkit-progress-value{background:#b4cf9e}.journey-reading progress::-moz-progress-bar{background:#b4cf9e}

.path-panel>.journey-reading{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);margin:0}.realm-copy>.journey-reading{margin:18px 0 0}.journey-reading{height:2px}.journey-reading progress{margin:0}
.path-panel>.journey-reading{position:static;grid-column:1/-1;transform:none;margin:12px auto 0;align-self:center}

/* One play/pause control in the same corner on every screen size. */
.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}