/* Tonight. The night track is sticky: the words stand on the ground, low in the frame, the sky keeps the rest. */
.night { position: relative; height: calc((var(--chapters, 5) * 150 + 120) * 1svh); }
.night-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.lead, .chapter { position: absolute; left: var(--edge); right: var(--edge); bottom: calc(var(--tabs-h) + clamp(28px, 8svh, 84px)); transform-origin: left bottom; }
.sentence { font-size: var(--sentence, min(5.4vw, 12svh)); font-weight: 440; font-stretch: var(--wide); line-height: var(--lh-tight); letter-spacing: -.016em; }
.sentence .line { display: block; width: fit-content; }
@media (min-width: 821px) { .sentence .line { white-space: nowrap; } }
@media (max-width: 820px) { .sentence { font-size: clamp(34px, 9.8vw, 56px); } .sentence .line { display: inline; } }
.js .sentence:not(.is-set) { visibility: hidden; }
.from { margin-top: var(--sp-4); font-size: var(--fs-lead); line-height: 1.3; color: var(--ink-soft); }
.from button { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ink-faint); }
.from button:hover { text-decoration-color: var(--accent); }
.chapter { font-size: var(--fs-2); line-height: 1.1; font-stretch: var(--wide); font-weight: 440; letter-spacing: -.012em; opacity: 0; visibility: hidden; }
.chapter p { max-width: 24ch; }
.chapter .act { margin-top: var(--sp-5); font-size: var(--fs-body); font-stretch: 100%; letter-spacing: 0; }
.clock { position: absolute; right: var(--edge); bottom: calc(var(--tabs-h) + clamp(28px, 8svh, 84px)); font-size: var(--fs-3); font-variant-numeric: tabular-nums; font-stretch: 112%; color: var(--ink-soft); }

.handover { position: relative; background: var(--ground); padding: var(--sp-10) var(--edge) var(--sp-9); }
.routes { margin-top: var(--sp-7); }
.route { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-5); align-items: baseline; padding: var(--sp-5) 0; text-decoration: none; }
.route b { font-size: var(--fs-2); font-weight: 440; font-stretch: var(--wide); line-height: 1.08; letter-spacing: -.012em; transform-origin: left; transition: transform var(--sheet) var(--shutter), color var(--touch) var(--shutter); color: var(--ink-soft); }
.route span { color: var(--ink-soft); max-width: 34ch; }
.route:hover b, .route:focus-visible b { color: var(--ink); transform: scaleX(1.035); }

@media (max-width: 820px) {
  .clock { bottom: auto; top: calc(var(--bar-h) + var(--sp-2)); }
  .route { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* no travel, or no WebGL: the same night as a plain page */
.is-still .night { height: auto; }
.is-still .night-stage { position: static; height: auto; overflow: visible; padding: calc(var(--bar-h) + 30svh) var(--edge) var(--sp-8); }
.is-still .lead, .is-still .chapter, .is-still .clock { position: static; opacity: 1; visibility: visible; transform: none; }
.is-still .chapter { margin-top: var(--sp-7); }
.is-still .chapters { background: var(--ground); }