/* Night: a framed print on paper that opens into the road; kinetic type at the car's speed. */
.night_wrap {
  --ni-paper: #f1f0ec; --ni-ink: #f1efea; --ni-dim: rgba(241, 239, 234, .6); --ni-orange: #e2621c;
  --ni-gut: clamp(16px, 2.6vw, 44px); --ni-serif: 'BX Corporate', 'Times New Roman', serif; --ni-wide: 'BX Wide', Arial, sans-serif;
  position: relative; z-index: 3; margin-top: -100vh; height: 460vh; color: var(--ni-ink);
}
.night_wrap .night_contain { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; opacity: var(--arrive, 0); transform: translate3d(0, var(--hold, 0px), 0); }
.night_wrap .night_paper { position: absolute; inset: 0; background: var(--ni-paper); }
/* the picture: the canvas fills the screen, the frame is a window cut into the paper */
.night_wrap .night_stage { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--open, 0)) * 22vh) calc((1 - var(--open, 0)) * 27vw) calc((1 - var(--open, 0)) * 26vh) calc((1 - var(--open, 0)) * 27vw)); background: #000; }
.night_wrap .night_stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.night_wrap .night_mat {
  position: absolute; pointer-events: none; opacity: calc(1 - var(--open, 0) * 1.4);
  top: calc(22vh - 14px); bottom: calc(26vh - 14px); left: calc(27vw - 14px); right: calc(27vw - 14px); border: 1px solid rgba(13, 13, 14, .7); box-shadow: inset 0 0 0 13px var(--ni-paper);
}
.night_wrap .night_cap { position: absolute; left: 27vw; top: calc(74vh + 14px); margin: 0; font: 400 14px/1.3 var(--ni-serif); color: #0d0d0e; opacity: calc(1 - var(--open, 0) * 2); }
/* kinetic type: three rows at the car's speed, skewed by the scroll's */
.night_wrap .night_kin { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12vh 0 22vh; gap: 1vh; pointer-events: none; opacity: var(--kin, 0); }
.night_wrap .night_row { margin: 0; white-space: nowrap; font: 400 clamp(54px, 9vw, 170px)/.92 var(--ni-serif); letter-spacing: -.035em; transform: translate3d(var(--x, 0px), 0, 0) skewX(var(--sk, 0deg)); will-change: transform; }
.night_wrap .night_row.is-a { color: transparent; -webkit-text-stroke: 1px rgba(241, 239, 234, .75); }
.night_wrap .night_row.is-b { color: rgba(241, 239, 234, .16); -webkit-text-stroke: 1px rgba(241, 239, 234, .9); }
.night_wrap .night_row.is-c { color: transparent; -webkit-text-stroke: 1px var(--ni-orange); }
.night_wrap .night_copy { position: absolute; left: var(--ni-gut); bottom: var(--ni-gut); width: min(36ch, 40vw); opacity: var(--copy, 0); }
.night_wrap .night_label { margin: 0 0 14px; display: flex; gap: 12px; align-items: baseline; font: 400 15px/1 var(--ni-serif); color: var(--ni-dim); }
.night_wrap .night_label b { font: 500 11px/1 var(--ni-wide); color: var(--ni-orange); }
.night_wrap .night_body { margin: 0; font: 400 clamp(15px, 1.15vw, 19px)/1.45 var(--ni-serif); }
.night_wrap .night_hud { position: absolute; right: var(--ni-gut); bottom: var(--ni-gut); text-align: right; opacity: var(--copy, 0); }
.night_wrap .night_hud b { display: block; font: 400 clamp(56px, 7vw, 120px)/.9 var(--ni-serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.night_wrap .night_hud span { display: block; margin-top: 10px; font: 400 14px/1 var(--ni-serif); color: var(--ni-dim); }
@media (max-width: 767px) {
  .night_wrap .night_stage { clip-path: inset(calc((1 - var(--open, 0)) * 26vh) calc((1 - var(--open, 0)) * 10vw) calc((1 - var(--open, 0)) * 34vh) calc((1 - var(--open, 0)) * 10vw)); }
  .night_wrap .night_mat { top: calc(26vh - 10px); bottom: calc(34vh - 10px); left: calc(10vw - 10px); right: calc(10vw - 10px); box-shadow: inset 0 0 0 9px var(--ni-paper); }
  .night_wrap .night_cap { left: 10vw; top: calc(66vh + 12px); }
  .night_wrap .night_copy { width: auto; right: var(--ni-gut); bottom: calc(var(--ni-gut) + 92px); }
  .night_wrap .night_row { font-size: 17vw; }
  /* the rows keep to the top two thirds: the words sit below them, never under the outlines */
  .night_wrap .night_kin { padding: 9vh 0 0; justify-content: flex-start; gap: 4.5vh; }   /* stacked over the road, above the car */
}