/* The landing page (docs/album/landing.md): the album at night, a window to each place, set unevenly along a dark wall
   as lit windows are across a night, each with its light spilling round it. On top of album.css. */
html, body { height: 100%; }
.night { min-height: 100%; box-sizing: border-box; display: grid; align-content: center; justify-items: center; gap: clamp(28px, 6vh, 64px);
  padding-block: clamp(24px, 6vh, 64px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.mark { display: grid; justify-items: center; gap: 4px; text-align: center; }
.mark h1 { margin: 0; font-size: var(--step-2); color: var(--bone); }

/* the windows: in a row when there is room, each at its own height, so the row reads as a night, not a shelf */
.windows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(10px, 2.2vw, 36px); width: min(1400px, 100%); }
.win { flex: 0 0 auto; min-width: 0; display: grid; justify-items: center; gap: 6px; }
.win[data-place="land"] { margin-top: 44px; }
.win[data-place="band"] { margin-top: 0; }
.win[data-place="kitchen"] { margin-top: 70px; }
.win[data-place="street"] { margin-top: 22px; }
.win[data-place="office"] { margin-top: 54px; }
.pane { display: block; line-height: 0; border-radius: 2px; }
.pane canvas { display: block; max-width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.label { font-size: var(--step-0); color: var(--muted); text-align: center; transition: color 0.4s ease; }

/* the one to go into */
.win:not(.coming) .label { color: var(--chalk); }
.win:not(.coming) .pane { cursor: pointer; }
.win.waiting .label { color: var(--ochre); animation: waiting 1.2s ease-in-out infinite alternate; }   /* pressed before its place's code is in */
@keyframes waiting { from { opacity: 1; } to { opacity: 0.45; } }
.win:not(.coming):hover .label, .win:not(.coming):focus-within .label { color: var(--ochre); }
/* the ones still to come: a little dimmer, their names quieter */
.win.coming .pane { filter: saturate(0.75) brightness(0.9); }
.win.coming .label { opacity: 0.7; }

/* a phone: two windows a row, still uneven */
@media (max-width: 640px) {
  .win[data-place="land"] { margin-top: 0; } .win[data-place="band"] { margin-top: 36px; }
  .win[data-place="kitchen"] { margin-top: 0; } .win[data-place="street"] { margin-top: 36px; } .win[data-place="office"] { margin-top: 0; }
  .label { font-size: 0.92rem; }
}

/* a click for sound: shown once a place's code is in, till the sound starts (album.js) */
.listen { margin: 0; font-size: 0.7rem; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.listen.on { opacity: 0.7; }

/* a place's room (album.js): its code loaded behind its window, the whole page while it is entered, opening from its
   window's picture and closing back into it */
.room { position: fixed; inset: 0; z-index: 10; visibility: hidden; transform-origin: 0 0; background: var(--ground); }
.room.open { visibility: visible; }
.room .back { position: absolute; z-index: 20; top: max(12px, env(safe-area-inset-top, 0px)); left: max(14px, env(safe-area-inset-left, 0px)); padding: 4px 11px 5px; border-radius: 3px;
  background: var(--panel); border: 1px solid var(--rule); backdrop-filter: blur(2px); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--bone); text-decoration: none; transition: color 0.3s ease, border-color 0.3s ease; }
.room .back:hover, .room .back:focus-visible { color: var(--ochre); border-color: var(--ochre-dim); }   /* the way back to the album: a button, plain to see */
@media (max-width: 480px) { .room .back .wide { display: none; } }   /* beside the film's own note, on a phone */
.night { transition: opacity 0.9s ease; }
.night.going { opacity: 0.3; }
.night.away { visibility: hidden; }

/* an early sketch (a place still being made: album.js, "pageRoom"): on the landing, a tag under its name (and its frame
   only chalked in, landing.js); gone into, a bar along its top that says so and takes the listener back */
.win.wip .label::after { content: "early sketch"; display: block; margin-top: 3px; font-family: var(--body); font-style: normal; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre-dim); }
.win.wip:hover .label::after, .win.wip:focus-within .label::after { color: var(--ochre); }
.room.sketch { display: grid; grid-template-rows: auto 1fr; }
.room.sketch .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(6px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px));
  background: var(--ground); border-bottom: 1px dashed var(--ochre-dim); }
.room.sketch .back { position: static; }
.room.sketch .wip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); white-space: nowrap; }
.room.sketch .wip .dot { width: 7px; height: 7px; border: 1px dashed var(--ochre); border-radius: 50%; }
.room.sketch iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ground); }
@media (max-width: 480px) { .room.sketch .wip .wide { display: none; } }