/* room.css -- layout for the home page (index.html), the study.
   Loaded after style.css, so the typography, palette and card systems are
   the site's own; this file only lays the HTML over the canvas and adapts
   the reading panel. The panel keeps the classic pages' 1080px container,
   so lines break exactly as they do on the classic pages.               */

html, body { height: 100%; overflow: hidden; }
body {
  display: block;
  text-align: left;
  background: var(--ink);
  min-height: 0;
}

#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
#scene:active { cursor: grabbing; }
body.touch #scene { cursor: default; }

.hidden { opacity: 0 !important; pointer-events: none !important; visibility: hidden; }

/* ═══ Loader ═══ */
#loader {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bone);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
#loader.hidden { transition: opacity 0.9s ease, visibility 0s linear 0.9s; }
.loader-inner { text-align: center; }
.loader-inner .brand-mark svg { width: 54px; height: 40px; margin: 0 auto 18px; }
.loader-name {
  font-family: var(--serif-display); font-style: italic; font-size: 1.6rem; color: var(--ink); margin: 0 0 22px;
}
.loader-status {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 0;
}
.loader-status::after { content: ''; display: block; width: 56px; height: 1px; margin: 16px auto 0; background: var(--rule-bronze); animation: loaderpulse 1.4s ease-in-out infinite; }
@keyframes loaderpulse { 0%, 100% { transform: scaleX(0.3); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } }

/* ═══ Masthead over the room ═══ */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 20px 28px 16px;
  background: linear-gradient(to bottom, rgba(251, 245, 232, 0.92), rgba(251, 245, 232, 0.72) 70%, rgba(251, 245, 232, 0));
  pointer-events: none;
}
#topbar .brand, #topbar nav { pointer-events: auto; }
#topbar nav.primary a { cursor: pointer; }
#topbar nav.primary a.active::after { bottom: -4px; }

/* ═══ Hero (home) ═══ */
#hero {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 20;
  width: min(640px, 92vw);
  display: flex; align-items: center;
  padding: 100px 28px 120px 40px;
  pointer-events: none;
  transition: opacity 0.7s ease, visibility 0s linear 0s;
}
#hero.hidden { transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.hero-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 30% 50%, rgba(251, 245, 232, 0.86), rgba(251, 245, 232, 0.55) 45%, rgba(251, 245, 232, 0) 75%);
}
.hero-inner { position: relative; pointer-events: auto; max-width: 560px; }
#hero h1 {
  font-family: var(--serif-display); font-weight: 500;
  font-size: clamp(2.5rem, 5.4vw, 4.4rem); letter-spacing: -0.022em; line-height: 1; color: var(--ink); margin: 0 0 12px;
}
#hero .post-nominals {
  margin: 0 0 40px 0.04em;
  font-family: var(--sans); font-size: clamp(0.86rem, 1.35vw, 1.02rem); font-weight: 500; letter-spacing: 0.06em; color: var(--ink-soft);
}
#hero .post-nominals .pn-place { font-family: var(--serif-body); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--ink-mute); margin: 0 0.05em; }
/* wide screens: the name at the left of the doorway and, where there is a
   second column (the 404 page's note, the notes' lede), that at the right,
   each over its own soft glow, so the room stays visible between; the
   study's hero is the name alone (#hero.alone) over the left glow only */
@media (min-width: 1000px) and (min-height: 560px) {
  #hero { width: 100%; padding: 100px 64px 110px 56px; }
  .hero-scrim {
    background:
      radial-gradient(ellipse 34% 52% at 20% 52%, rgba(251, 245, 232, 0.9), rgba(251, 245, 232, 0.55) 55%, rgba(251, 245, 232, 0) 100%),
      radial-gradient(ellipse 36% 56% at 79% 52%, rgba(251, 245, 232, 0.9), rgba(251, 245, 232, 0.55) 55%, rgba(251, 245, 232, 0) 100%);
  }
  #hero.alone .hero-scrim {
    background: radial-gradient(ellipse 34% 52% at 20% 52%, rgba(251, 245, 232, 0.9), rgba(251, 245, 232, 0.55) 55%, rgba(251, 245, 232, 0) 100%);
  }
  .hero-inner { max-width: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
  .hero-name { flex: 0 1 40%; }
  #hero .post-nominals { margin-bottom: 0; }
}

/* ═══ The 404 page: the study at night (body.nightmare, 404.html) ═══ */
body.nightmare { background: #07050a; }
body.nightmare #loader { background: #07050a; }
body.nightmare .loader-name { color: var(--bone); }
body.nightmare .loader-status { color: #8a7d84; }
body.nightmare #topbar { background: linear-gradient(to bottom, rgba(7, 5, 10, 0.92), rgba(7, 5, 10, 0.66) 70%, rgba(7, 5, 10, 0)); }
body.nightmare #topbar .brand-name, body.nightmare #topbar nav.primary a { color: #cfc4b6; }
body.nightmare #topbar nav.primary a:hover { color: var(--bone); }
body.nightmare #topbar nav.primary a.active { color: var(--bone); }
body.nightmare #topbar nav.primary .nav-num { color: #8a7d84; }
body.nightmare .hero-scrim { background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(7, 5, 10, 0.86), rgba(7, 5, 10, 0.5) 45%, rgba(7, 5, 10, 0) 75%); }
body.nightmare #hero h1 { color: var(--bone); font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 500; }
body.nightmare #hero .post-nominals { color: #b9aa9c; }
.nightmare-note { max-width: 420px; }
.nightmare-note p { font-family: var(--serif-display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.4; color: var(--bone); margin: 0 0 14px; }
.nightmare-note a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #e9c9a6; border-bottom: 1px solid rgba(233, 201, 166, 0.5); padding-bottom: 2px; }
.nightmare-note a:hover { color: var(--bone); border-color: var(--bone); }
@media (min-width: 1000px) and (min-height: 560px) {
  body.nightmare .hero-scrim {
    background:
      radial-gradient(ellipse 34% 52% at 20% 52%, rgba(7, 5, 10, 0.9), rgba(7, 5, 10, 0.5) 55%, rgba(7, 5, 10, 0) 100%),
      radial-gradient(ellipse 36% 56% at 79% 52%, rgba(7, 5, 10, 0.9), rgba(7, 5, 10, 0.5) 55%, rgba(7, 5, 10, 0) 100%);
  }
  .nightmare-note { flex: 0 1 min(540px, 44%); max-width: none; }
}

/* ═══ The notes' room: the study at night (body.gothic, notes/<token>/index.html) ═══ */
/* The room is dark, so the masthead is too; the hero and the panel are
   parchment (gothic.css gives the panel's text its sepia and rubrics). */
body.gothic { background: #0b0a12; }
body.gothic #loader { background: #0b0a12; }
body.gothic .loader-name { color: #e9dcc0; }
body.gothic .loader-status { color: #8a7d6e; }
/* (the masthead over a dark room: the notes' room, and the study after
   dark in Ankara, body.night) */
body.gothic #topbar, body.night #topbar { background: linear-gradient(to bottom, rgba(11, 10, 18, 0.92), rgba(11, 10, 18, 0.66) 70%, rgba(11, 10, 18, 0)); }
body.gothic #topbar .brand-name, body.gothic #topbar nav.primary a, body.night #topbar .brand-name, body.night #topbar nav.primary a { color: #d9ccb2; }
body.gothic #topbar nav.primary a:hover, body.gothic #topbar nav.primary a.active, body.night #topbar nav.primary a:hover, body.night #topbar nav.primary a.active { color: #f3e9d4; }
body.gothic #topbar nav.primary a.active::after, body.night #topbar nav.primary a.active::after { background: #c9a24d; }
body.gothic #topbar nav.primary .nav-num, body.night #topbar nav.primary .nav-num { color: #8a7d6e; }
body.gothic .hero-scrim { background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(233, 220, 192, 0.92), rgba(233, 220, 192, 0.6) 45%, rgba(233, 220, 192, 0) 75%); }
body.gothic .hero-kicker { margin: 0 0 14px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: #7a2432; }
body.gothic #hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 500; letter-spacing: -0.012em; line-height: 1.12; color: #2b1d12; margin: 0 0 18px; }
body.gothic #hero h1 em { color: #7a2432; }
body.gothic .hero-lede { margin: 0; max-width: 480px; font-family: var(--serif-body); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.5; color: #5a4028; text-align: left; }
body.gothic #hint, body.gothic #caption, body.gothic #tooltip, body.gothic #colophon-card, body.gothic #stationbar, body.gothic #contents { background: rgba(243, 233, 212, 0.96); }
body.gothic #caption { border-left-color: #a0783a; }
body.gothic .caption-label, body.gothic #bar-current .bar-label { color: #7a2432; }
body.gothic #tooltip { border-bottom-color: #a0783a; }
body.gothic #panel { background: #e9dcc0; background-image: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(211, 191, 152, 0) 55%, rgba(120, 85, 35, 0.22) 100%); border-left-color: rgba(122, 90, 45, 0.4); }
body.gothic #panel-close { background: rgba(243, 233, 212, 0.9); border-color: rgba(122, 90, 45, 0.32); color: #2b1d12; }
body.gothic #panel-close:hover { background: #2b1d12; color: #f3e9d4; }
body.gothic #panel .panel-num { color: #7a2432; }
body.gothic #panel .is-target { background: rgba(160, 120, 58, 0.16); box-shadow: 0 0 0 12px rgba(160, 120, 58, 0.16); }
body.gothic .panel-foot { border-top-color: rgba(122, 90, 45, 0.32); }
body.gothic .panel-foot h6, body.gothic .panel-foot .footer-copy { color: #8a7355; }
body.gothic .panel-foot p, body.gothic .panel-foot li, body.gothic .panel-foot a { color: #5a4028; }
body.gothic .panel-foot .colophon-updated { color: #2b1d12; }
body.gothic #corner a, body.gothic #corner button { background: rgba(243, 233, 212, 0.85); }
@media (min-width: 1000px) and (min-height: 560px) {
  body.gothic .hero-scrim { background: radial-gradient(ellipse 38% 56% at 22% 52%, rgba(233, 220, 192, 0.92), rgba(233, 220, 192, 0.6) 55%, rgba(233, 220, 192, 0) 100%); }
  body.gothic .hero-name { flex: 0 1 min(560px, 46%); }
}
@media (max-width: 720px), (max-height: 480px) {
  body.gothic .hero-scrim { background: linear-gradient(to bottom, rgba(233, 220, 192, 0.94) 40%, rgba(233, 220, 192, 0)); }
  body.gothic #hero h1 { font-size: 1.6rem; }
  body.gothic .hero-lede { font-size: 0.96rem; }
}

/* ═══ Station caption ═══ */
#caption {
  position: fixed; left: 28px; bottom: 28px; z-index: 22;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 16px 12px 18px;
  background: rgba(251, 245, 232, 0.94);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--lu-bronze);
  backdrop-filter: blur(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
}
#caption.hidden { transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.caption-head { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.caption-num { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-mute); letter-spacing: 0.06em; }
.caption-label { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lu-blue); font-weight: 500; }
.caption-read, .quote-actions button {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 14px; background: transparent; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.caption-read:hover, .quote-actions button:hover { background: var(--ink); color: var(--bone); }
.quote-actions button.quiet { border-color: var(--rule-soft); color: var(--ink-mute); }
.quote-actions button.quiet:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ═══ Tooltip ═══ */
#tooltip {
  position: fixed; left: 0; top: 0; z-index: 40;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink);
  background: rgba(251, 245, 232, 0.96); border: 1px solid var(--rule-soft); border-bottom: 2px solid var(--lu-bronze);
  padding: 6px 10px; pointer-events: none; white-space: nowrap;
  transition: opacity 0.15s ease;
}
#tooltip em { display: block; margin-top: 2px; font-family: var(--serif-body); font-style: italic; font-size: 0.86rem; letter-spacing: 0; color: var(--ink-soft); }

/* ═══ Quote card (the book on the desk) ═══ */
#quote-card {
  position: fixed; left: 28px; top: 50%; transform: translateY(-50%); z-index: 24;
  width: min(520px, calc(100vw - 56px));
  padding: 28px 30px 22px;
  background: rgba(251, 245, 232, 0.96);
  border: 1px solid var(--rule-soft);
  backdrop-filter: blur(8px);
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
#quote-card.hidden { transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
#quote-card .hero-quote { max-width: none; }
#quote-card .hero-quote::before { font-size: 3.6rem; margin-bottom: 0; }
#quote-card .hero-quote .quote-english { font-size: 1.3rem; line-height: 1.4; margin-bottom: 10px; }
#quote-card .hero-quote .quote-german { font-size: 1.1rem; margin-bottom: 18px; }
#quote-card .hero-quote .cite-author { font-size: 0.78rem; }
#quote-card .hero-quote .cite-source { font-size: 0.7rem; }
/* the row of buttons at the foot of a card */
.quote-actions { display: flex; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }

/* while a page behind the door is still locked (lock.js), the room's
   own furniture stays out of the way of the card */
body.locked #corner, body.locked #hint, body.locked #stationbar { display: none; }
body.locked #loader { display: none; }   /* the loader would otherwise fade over the card */

/* ═══ The key card (the locked door) and the fade of the walk out ═══ */
#key-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 24;
  width: min(380px, calc(100vw - 40px));
  padding: 26px 28px 20px;
  background: rgba(251, 245, 232, 0.97);
  border: 1px solid var(--rule-soft);
  backdrop-filter: blur(8px);
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
#key-card.hidden { transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
#key-card .key-head { font-family: var(--serif-display); font-size: 1.35rem; color: var(--ink); margin: 0 0 18px; }
#key-card label { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
#key-card input {
  width: 100%; box-sizing: border-box; font-family: var(--serif-body); font-size: 1.1rem; color: var(--ink);
  padding: 10px 12px; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 0; outline: none;
}
#key-card input:focus { border-color: var(--lu-blue); }
#key-msg { min-height: 1.2em; margin: 10px 0 0; font-family: var(--serif-body); font-style: italic; font-size: 0.95rem; color: var(--ink-mute); }
#key-card .quote-actions { margin-top: 14px; }
#fade { position: fixed; inset: 0; z-index: 80; background: #0d0a10; opacity: 0; pointer-events: none; transition: opacity 1.6s ease; }
body.exiting #fade { opacity: 1; }

/* ═══ Hint and corner link ═══ */
#hint {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 21;
  margin: 0; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute); background: rgba(251, 245, 232, 0.88); padding: 8px 18px; border: 1px solid var(--rule-soft);
  white-space: pre-line; text-align: center; line-height: 1.9; pointer-events: none;   /* one instruction per line (ui.js), at every width */
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
#corner {
  position: fixed; right: 28px; bottom: 28px; z-index: 21; margin: 0;
  display: flex; gap: 6px;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
#corner a, #corner button {
  color: var(--ink-mute); background: rgba(251, 245, 232, 0.8); padding: 6px 10px; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: 1.4;
}
#corner a:hover, #corner button:hover { color: var(--lu-blue); }

/* ═══ Colophon card ═══ */
#colophon-card {
  position: fixed; right: 28px; bottom: 72px; z-index: 24;
  width: min(560px, calc(100vw - 56px));
  padding: 26px 30px 20px;
  background: rgba(251, 245, 232, 0.97);
  border: 1px solid var(--rule-soft);
  backdrop-filter: blur(8px);
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
#colophon-card.hidden { transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
#colophon-card .container, .panel-foot .container { max-width: none; padding: 0; }
#colophon-card .footer-grid, .panel-foot .footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 48px; flex-wrap: wrap; }
#colophon-card .footer-col-colophon, .panel-foot .footer-col-colophon { max-width: 360px; }
#colophon-card h6, .panel-foot h6 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; font-weight: 500; }
#colophon-card .footer-row, .panel-foot .footer-row { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
#colophon-card .footer-row li, .panel-foot .footer-row li { display: inline; }
#colophon-card p, #colophon-card li, #colophon-card a, .panel-foot p, .panel-foot li, .panel-foot a { font-family: var(--sans); font-size: 0.84rem; color: var(--ink-soft); line-height: 1.6; }
#colophon-card .colophon-line, .panel-foot .colophon-line { margin: 0; text-align: justify; hyphens: manual; }
#colophon-card .colophon-updated, .panel-foot .colophon-updated { margin: 12px 0 0; color: var(--ink); }
#colophon-card .colophon-updated strong, .panel-foot .colophon-updated strong { font-weight: 600; }
#colophon-card .footer-copy, .panel-foot .footer-copy { margin: 22px 0 0; text-align: center; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.04em; }
#colophon-card .quote-actions { margin-top: 18px; padding-top: 14px; align-items: center; }
#colophon-card .quote-actions a { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-left: auto; }
#colophon-card .quote-actions a:hover { color: var(--lu-blue); }

/* ═══ Reading panel ═══ */
#panel-backdrop { position: fixed; inset: 0; z-index: 48; display: none; }
body.panel-open #panel-backdrop { display: block; right: min(1180px, 100%); }
#panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(1180px, 100%);
  background: rgba(251, 245, 232, 0.97);
  border-left: 1px solid var(--rule-soft);
  box-shadow: -24px 0 60px rgba(26, 19, 32, 0.18);
  transform: translateX(0);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0s;
}
#panel.hidden { transform: translateX(40px); transition: transform 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s; }
#panel-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#panel-close {
  position: absolute; top: 68px; right: 22px; z-index: 2;
  width: 44px; height: 44px; border: 1px solid var(--rule-soft); background: rgba(251, 245, 232, 0.9);
  font-family: var(--serif-display); font-size: 1.6rem; line-height: 1; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: background 0.15s, color 0.15s;
}
#panel-close span { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; color: var(--ink-mute); }
#panel-close:hover { background: var(--ink); color: var(--bone); }
body.touch #panel-close span { display: none; }
#panel-close:hover span { color: var(--bone); }

#panel .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
#panel .panel-page-header { padding: 104px 0 26px; }
#panel details, #panel .cv-entry, #panel section[id], #panel .cv-section-head { scroll-margin-top: 84px; }
#panel .panel-page-header h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); margin-bottom: 14px; }
#panel .panel-page-header .lede { font-size: 1.08rem; }
#panel .panel-num { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--ink-mute); margin: 0 0 18px; }
#panel .diadem-row { padding: 4px 0 20px; }
#panel section.body { padding: 34px 0; }
#panel section.body:first-of-type { padding-top: 26px; }
#panel .section-head { margin-bottom: 22px; }
#panel .is-target { background: rgba(212, 155, 59, 0.14); box-shadow: 0 0 0 12px rgba(212, 155, 59, 0.14); transition: background 1.2s ease, box-shadow 1.2s ease; }
#panel .sent-notice { max-width: 640px; padding: 14px 18px; margin: 0 0 22px; border-left: 3px solid var(--lu-bronze); background: var(--pastel-warm); font-family: var(--serif-body); }
#panel a.room-link::after { content: ' ↗'; font-family: var(--sans); font-size: 0.75em; color: var(--ink-mute); }
.panel-foot { padding: 34px 0 56px; border-top: 1px solid var(--rule-soft); margin-top: 12px; }
.panel-foot .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* ═══ No WebGL / no JS ═══ */
body.no-webgl #scene { display: none; }
body.no-webgl { background: var(--bone); }
body.no-webgl #hint, body.no-webgl #caption { display: none; }
body.no-webgl #hero .hero-scrim { display: none; }
#noscript { position: fixed; inset: 0; z-index: 100; background: var(--bone); display: flex; align-items: center; justify-content: center; padding: 40px; }

/* ═══ The station bar and the contents sheet (narrow screens) ═══ */
/* ui.js shows the bar and moves the masthead nav into the sheet when the
   screen is narrower than 720px (body.narrow); the rules below are inert
   otherwise. Every control is at least 48px tall: the bar is meant for
   thumbs. */
#stationbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
  display: flex; align-items: stretch;
  height: calc(56px + env(safe-area-inset-bottom));
  padding: 0 0 env(safe-area-inset-bottom);
  background: rgba(251, 245, 232, 0.96);
  border-top: 1px solid var(--rule-soft);
  backdrop-filter: blur(8px);
  transition: opacity 0.4s ease, visibility 0s linear 0s;
  touch-action: manipulation;
}
#stationbar.hidden { transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
#stationbar button {
  font: inherit; background: transparent; border: 0; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#stationbar button:active { background: rgba(26, 19, 32, 0.06); }
#bar-prev, #bar-next {
  flex: 0 0 52px;
  font-family: var(--serif-display); font-size: 2rem; line-height: 1; padding-bottom: 6px;
  color: var(--ink-soft);
}
#bar-prev { border-right: 1px solid var(--rule-soft); }
#bar-next { border-left: 1px solid var(--rule-soft); }
#bar-current {
  flex: 1 1 auto; min-width: 0;
  justify-content: flex-start; gap: 10px; padding: 0 12px 0 14px; text-align: left;
}
#bar-current .nav-num { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-mute); letter-spacing: 0.06em; flex: 0 0 auto; }
#bar-current .bar-label {
  font-family: var(--sans); font-size: clamp(0.62rem, 2.9vw, 0.74rem); letter-spacing: 0.11em; text-transform: uppercase; font-weight: 500; color: var(--lu-blue);
  line-height: 1.15; min-width: 0;
}
#bar-current .bar-caret {
  flex: 0 0 auto; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute);
  transform: translateY(2px) rotate(-135deg); transition: transform 0.25s ease;
}
body.contents-open #bar-current .bar-caret { transform: translateY(-2px) rotate(45deg); }
body.away #bar-current .bar-label { color: var(--ink-mute); }
body.travelling #bar-current .bar-label { color: var(--ink-soft); }
#bar-read {
  flex: 0 0 auto; align-self: center; margin-right: 6px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  padding: 0 14px; height: 40px; border: 1px solid var(--ink) !important; color: var(--ink);
}
#bar-read:active { background: var(--ink); color: var(--bone); }
#bar-read.hidden { display: none; }

#sheet-backdrop { position: fixed; inset: 0; z-index: 54; display: none; background: rgba(26, 19, 32, 0.28); }
body.contents-open #sheet-backdrop { display: block; }
#contents {
  position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 57;
  max-height: calc(100% - 120px); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(251, 245, 232, 0.98);
  border-top: 1px solid var(--rule-soft);
  box-shadow: 0 -18px 40px rgba(26, 19, 32, 0.16);
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, visibility 0s linear 0s;
}
#contents.hidden { transform: translateY(16px); transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s; }
.contents-head {
  margin: 0; padding: 14px 20px 8px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
}
#contents nav.primary { display: block; }
#contents nav.primary a {
  display: flex; align-items: center; gap: 16px;
  min-height: 48px; padding: 0 20px; margin: 0;
  font-size: 0.78rem; letter-spacing: 0.1em;
  border-top: 1px solid var(--rule-soft); border-left: 3px solid transparent;
}
#contents nav.primary a .nav-num { font-size: 0.62rem; }
#contents nav.primary a.active { border-left-color: var(--lu-bronze); color: var(--lu-blue); }
#contents nav.primary a.active::after { display: none; }
#contents #corner {
  position: static; display: flex; justify-content: space-between; gap: 0;
  border-top: 1px solid var(--rule-soft); background: var(--bone-warm);
}
#contents #corner a, #contents #corner button { flex: 1 1 50%; min-height: 48px; display: flex; align-items: center; justify-content: center; background: transparent; }
#contents #corner a { border-left: 1px solid var(--rule-soft); }
#contents #corner #classic-link { display: flex; }
/* (the notes' room has three links in the corner: a little tighter) */
body.gothic #contents #corner a, body.gothic #contents #corner button { flex: 1 1 33%; font-size: 0.62rem; letter-spacing: 0.06em; padding: 0 4px; white-space: nowrap; }

/* ═══ Narrow screens: phones upright, and any phone on its side ═══ */
/* (the same test as ui.js's narrowMq: keep the two in step) */
@media (max-width: 720px), (max-height: 480px) {
  html, body { overscroll-behavior: none; }
  #topbar { padding: 14px 16px 10px; flex-wrap: wrap; }
  #caption { display: none; }
  #hero { width: 100%; align-items: flex-start; padding: 84px 20px 120px; }
  .hero-scrim { background: linear-gradient(to bottom, rgba(251, 245, 232, 0.9) 40%, rgba(251, 245, 232, 0)); }
  #hero.alone .hero-scrim { background: linear-gradient(to bottom, rgba(251, 245, 232, 0.9) 24%, rgba(251, 245, 232, 0) 60%); }   /* the name alone needs less of the room veiled */
  #hero .post-nominals { margin-bottom: 22px; }
  #hint { bottom: calc(68px + env(safe-area-inset-bottom)); font-size: 0.6rem; max-width: 80vw; }
  #colophon-card p, #colophon-card li, #colophon-card a, .panel-foot p, .panel-foot li, .panel-foot a { font-size: 0.76rem; }
  #colophon-card .footer-row, .panel-foot .footer-row { gap: 6px 16px; }
  #colophon-card { right: 12px; left: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); width: auto; padding: 18px; }
  .panel-foot { padding: 28px 0 40px; }
  #quote-card { left: 12px; width: calc(100vw - 24px); padding: 20px; }
  #panel { width: 100%; }
  #panel .container, .panel-foot .container { padding: 0 20px; }
  #panel .panel-page-header { padding: 60px 0 20px; }
  #panel-close { top: 12px; right: 12px; }
  #panel-scroll { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  #panel .cv-entry { grid-template-columns: 1fr; }
}
/* a phone held sideways: little height, so the hero scrolls if it must
   and the fixed furniture shrinks */
@media (max-height: 480px) {
  #topbar { padding: 10px 16px 6px; }
  #hero { padding: 52px 20px calc(72px + env(safe-area-inset-bottom)); align-items: flex-start; overflow-y: auto; }
  #hero h1 { font-size: 2rem; margin-bottom: 8px; }
  #hero .post-nominals { margin-bottom: 14px; font-size: 0.8rem; }
  #hint { display: none; }
  #contents { max-height: calc(100% - 108px - env(safe-area-inset-bottom)); }
}