/* The story page (night.html). Everything else comes from site.css. */

/* how long each part of the night lasts on the scroll */
.ch--street { --h: 240svh; }
.ch--doors { --h: 170svh; }
.ch--build { --h: 220svh; }
.ch--drop { --h: 300svh; }
.ch--front { --h: 200svh; }
.ch--up { --h: 160svh; }
.ch--home { --h: 420svh; }

.night .beat .kicker time {
  color: var(--ink);
}

/* the drop's line sits up top, so the sound button has the bottom to itself */
.ch--drop .beat {
  bottom: auto;
  top: calc(18svh + env(safe-area-inset-top));
}

.beat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* lights up: the room is pale grey, so the copy needs a heavier shade behind it */
.is-lit-room .veil::before {
  background:
    linear-gradient(to top, rgba(4, 3, 8, 0.86), rgba(4, 3, 8, 0.55) 38%, transparent 66%),
    linear-gradient(to right, rgba(4, 3, 8, 0.6), transparent 55%);
}