/* The journey as a room of its own (js/journey-room.js; the user, 2026-11-02). .jr-room: the flight out of the scroll;
   .jr-open: the room, the flight alone, the menu swapped for the sound switch and Close. */
.jr-room:not(.jr-open) .flight { display: none; }
.jr-open .page:not(.flight-leg), .jr-open:not(.st-opening) .site-menu, .jr-open #squiggles { display: none !important; }   /* the menu stays while the story's door fades (css/story.css) */
.jr-bar {
  position: fixed; top: 0; right: 0; z-index: 55;
  display: none; align-items: center; gap: 22px;
  padding: 14px clamp(16px, 3vw, 36px);
  font: 500 12px/1 var(--label-face, var(--display, serif)); letter-spacing: 0.14em; text-transform: uppercase; color: #f0ece4;
}
.jr-open .jr-bar { display: flex; }
.jr-bar button { border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 6px 0; }
.jr-close { display: flex; align-items: center; gap: 10px; }
.jr-x { font-size: 22px; line-height: 0.6; letter-spacing: 0; margin-top: -2px; }
.jr-close:hover .jr-close-label, .jr-close:focus-visible .jr-close-label { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 640px) {
  .jr-bar { padding: 10px 16px; gap: 16px; }
}

/* Phones: the notice before the live aqueduct, and the line while it loads (js/journey-room.js notice, loadLive) */
.jr-notice { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(10, 13, 20, 0.72); }
.jr-notice-box { max-width: 420px; padding: 24px 22px 22px; border: 1px solid rgba(144, 181, 239, 0.6); background: rgba(10, 13, 20, 0.95);
  color: #f0ece4; font: 16px/1.5 'Alegreya Sans', var(--mono); }
.jr-notice-box p { margin: 0 0 14px; opacity: 0.88; }
.jr-notice-box .jr-notice-title { font: 500 15px/1.3 'Alegreya Sans SC', var(--mono); letter-spacing: 0.12em; opacity: 1; }
.jr-notice-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.jr-notice-row .sd-btn { min-width: 0; flex: 1 1 140px; }
.jr-notice-no { border-color: rgba(240, 236, 228, 0.3) !important; background: none !important; }
.jr-loading { position: fixed; left: 50%; bottom: 12vh; z-index: 56; translate: -50% 0; margin: 0; padding: 10px 16px;
  background: rgba(10, 13, 20, 0.85); color: #f0ece4; font: 500 13px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.14em; }