/* rooms.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 p { text-align: center; }   /* (p is justified sitewide in style.css) */
.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;
}
/* (a room behind the study's door: its place and the years it is set in, close under its name) */
.loader-place {
  font-family: var(--serif-display); font-size: 1.05rem; letter-spacing: 0.02em; color: var(--ink-soft); margin: -18px 0 22px;
}
/* the water: the kilim's running water under the name (under the mark alone, on a sealed page before its data is opened): a chain of
   lozenges, two zigzags crossing in the site's teal with a saffron core in each, woven in weft blocks of 2 px as the kilim is (ui.js,
   water, which fills the shells' empty svg), each fold laid cell by cell at the real steps of the loading (main.js, step; ui.js,
   waterFill) and still once laid, never animated of itself; gone with the loader. On the night pages (the chamber, the 404 page, and
   the sealed pages in their own sheet) the zigzags in pale ink, the cores saffron still */
.loader-water { display: block; width: 12rem; max-width: calc(100vw - 48px); height: 1.375rem; margin: 4px auto 0; overflow: visible; }
.loader-water rect { opacity: 0; transition: opacity 0.12s linear; shape-rendering: crispEdges; }
.loader-water .w.on rect { opacity: 1; }
.loader-water.still rect { transition: none; }
.loader-water rect.a { fill: var(--lu-blue); }
.loader-water rect.b { fill: #1a6e82; }   /* (the weft's other row, a shade lighter) */
.loader-water rect.c { fill: var(--lu-bronze-tint); }
body.chamber .loader-water rect.a, body.nightmare .loader-water rect.a, body.survey .loader-water rect.a { fill: #e6dbc2; }
body.chamber .loader-water rect.b, body.nightmare .loader-water rect.b, body.survey .loader-water rect.b { fill: #d6c9ad; }
/* (a message in the loader's place: the content missing, the room not built) */
.loader-status {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 14px 0 0;
}
.loader-status:empty { display: none; }
/* The offer of the text version, six seconds after the loader first shows,
   if the room has not started by then. It comes by an animation of its
   opacity and position alone, which the browser runs even while the page's
   script is busy building the room; it takes clicks once it is shown. It
   stands clear of the centred block, low on the page, so that the loader is
   unchanged until the wait runs long. (p is justified sitewide in
   style.css; centred here.) */
.loader-alt {
  position: absolute; left: 50%; bottom: max(64px, 12vh);
  width: min(32rem, calc(100% - 48px)); margin: 0; text-align: center;
  font-family: var(--serif-body); font-size: 0.94rem; line-height: 1.5; color: var(--ink-soft);
  opacity: 0; transform: translateX(-50%) translateY(6px); pointer-events: none;
  animation: loaderoffer 0.8s ease 6s forwards;
}
@keyframes loaderoffer { to { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } }
@keyframes loaderofferstill { to { opacity: 1; pointer-events: auto; } }
/* each sentence in its own inline block: when the line must wrap, it
   wraps between the sentences and never inside one */
.loader-alt span { display: inline-block; }
.loader-alt a { color: var(--lu-blue); border-bottom: 1px solid var(--rule-bronze); padding-bottom: 1px; }
.loader-alt a:hover { border-bottom-color: var(--lu-blue); }
@media (prefers-reduced-motion: reduce) { .loader-alt { transform: translateX(-50%); animation-name: loaderofferstill; } }
@media (max-width: 360px) { .loader-alt { font-size: 0.86rem; } }   /* so that neither sentence wraps on the narrowest phones */

/* ═══ 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; }
/* the study's welcome: on a day with a greeting, the greeting (the day's language, then the English) over a short rule; the line of
   welcome and a word on the site; where the window looks (left out on a day the window shows another view: main.js); at the right of
   the name over its own glow, beneath it on a narrow screen */
#hero .hero-welcome { position: relative; pointer-events: none; margin-top: 4px; max-width: 370px; text-align: left; hyphens: manual; }
#hero .hero-welcome p { margin: 0; text-align: left; }
#hero .hero-welcome .hw-day::after { content: ''; display: block; width: 38px; height: 1px; background: var(--ink-mute); opacity: 0.55; margin: 18px 0 20px; }
#hero .hero-welcome .hw-greet { font-family: var(--serif-display); font-style: normal; font-weight: 600; font-size: clamp(1.12rem, 1.6vw, 1.36rem); line-height: 1.32; color: var(--ink); }
#hero .hero-welcome .hw-greet-en { font-family: var(--serif-body); font-style: italic; font-size: clamp(0.9rem, 1.05vw, 0.98rem); line-height: 1.45; color: var(--ink-soft); margin-top: 9px; }
#hero .hero-welcome .hw-greet, #hero .hero-welcome .hw-greet-en { white-space: pre-line; text-wrap: balance; }
#hero .hero-welcome .hw-text { text-wrap: balance; }
#hero .hero-welcome .hw-welcome { font-family: var(--serif-display); font-style: italic; font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.25; color: var(--ink); margin-bottom: 10px; }
#hero .hero-welcome .hw-text { font-family: var(--serif-body); font-size: clamp(0.98rem, 1.25vw, 1.08rem); line-height: 1.5; color: var(--ink-soft); margin-bottom: 26px; }
#hero .hero-welcome .hw-place { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lu-blue); margin-bottom: 5px; }
#hero .hero-welcome .hw-line { font-family: var(--mono); font-size: 0.72rem; line-height: 1.6; letter-spacing: 0.05em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* wide screens: the name at the left of the doorway and the second column
   (the study's welcome, the 404 page's note, the notes' lede) at the right,
   each over its own soft glow, so the room stays visible between */
@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% 60% at 79% 50%, rgba(251, 245, 232, 0.94), rgba(251, 245, 232, 0.7) 55%, rgba(251, 245, 232, 0) 100%);   /* (taller and firmer: a day's greeting stands over the welcome) */
  }
  .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 .hero-welcome { margin-top: 0; flex: 0 1 30%; }
  #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 undercroft and the Survey (body.survey, survey/index.html): a dark page, its loader and masthead the chamber's ═══ */
body.survey { background: #050507; }
body.survey #loader { background: #0b0a12; }
body.survey .loader-name { color: #e9dcc0; }
body.survey .loader-status { color: #8a7d6e; }
body.survey #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.survey #topbar .brand-name, body.survey #topbar nav.primary a { color: #d9ccb2; }
body.survey #topbar nav.primary a:hover, body.survey #topbar nav.primary a.active { color: #f3e9d4; }
body.survey #topbar nav.primary .nav-num { color: #8a7d6e; }

/* ═══ The notes' room: the study at night (body.chamber, notes/<token>/index.html) ═══ */
/* The room is dark, so the masthead is too; the hero and the panel are
   parchment (chamber.css gives the panel's text its sepia and rubrics). */
body.chamber { background: #0b0a12; }
body.chamber #loader { background: #0b0a12; }
body.chamber .loader-name { color: #e9dcc0; }
body.chamber .loader-status { color: #8a7d6e; }
/* (the masthead over a dark room: the notes' room, and the study after
   dark in Ankara, body.night) */
body.chamber #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.chamber #topbar .brand-name, body.chamber #topbar nav.primary a, body.night #topbar .brand-name, body.night #topbar nav.primary a { color: #d9ccb2; }
body.chamber #topbar nav.primary a:hover, body.chamber #topbar nav.primary a.active, body.night #topbar nav.primary a:hover, body.night #topbar nav.primary a.active { color: #f3e9d4; }
body.chamber #topbar nav.primary a.active::after, body.night #topbar nav.primary a.active::after { background: #c9a24d; }
body.chamber #topbar nav.primary .nav-num, body.night #topbar nav.primary .nav-num { color: #8a7d6e; }
body.chamber .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.chamber .hero-kicker { margin: 0 0 14px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: #7a2432; }
body.chamber #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.chamber #hero h1 em { color: #7a2432; }
body.chamber .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.chamber #hint, body.chamber #caption, body.chamber #tooltip, body.chamber #colophon-card, body.chamber #stationbar, body.chamber #contents { background: rgba(243, 233, 212, 0.96); }
body.chamber #caption { border-left-color: #a0783a; }
body.chamber .caption-label, body.chamber #bar-current .bar-label { color: #7a2432; }
body.chamber #tooltip { border-bottom-color: #a0783a; }
body.chamber #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.chamber #panel-close { background: rgba(243, 233, 212, 0.9); border-color: rgba(122, 90, 45, 0.32); color: #2b1d12; }
body.chamber #panel-close:hover { background: #2b1d12; color: #f3e9d4; }
body.chamber #panel .panel-num { color: #7a2432; }
body.chamber #panel .is-target { background: rgba(160, 120, 58, 0.16); box-shadow: 0 0 0 12px rgba(160, 120, 58, 0.16); }
body.chamber .panel-foot { border-top-color: rgba(122, 90, 45, 0.32); }
body.chamber .panel-foot h6, body.chamber .panel-foot .footer-copy { color: #8a7355; }
body.chamber .panel-foot p, body.chamber .panel-foot li, body.chamber .panel-foot a { color: #5a4028; }
body.chamber .panel-foot .colophon-updated { color: #2b1d12; }
body.chamber #corner a, body.chamber #corner button { background: rgba(243, 233, 212, 0.85); }
@media (min-width: 1000px) and (min-height: 560px) {
  body.chamber .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.chamber .hero-name { flex: 0 1 min(560px, 46%); }
}
@media (max-width: 720px), (max-height: 480px) {
  body.chamber .hero-scrim { background: linear-gradient(to bottom, rgba(233, 220, 192, 0.94) 40%, rgba(233, 220, 192, 0)); }
  body.chamber #hero h1 { font-size: 1.6rem; }
  body.chamber .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); }
#tooltip .by { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--ink-mute); }

/* ═══ 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; }
/* the greeting (ui.js, greet): a line over the room as the way opens,
   set as the key card is, and covered by the darkening */
#greeting {
  position: fixed; left: 50%; top: 20%; transform: translateX(-50%); z-index: 24; margin: 0;
  font-family: var(--serif-display); font-size: 1.5rem; color: var(--ink); white-space: nowrap;
  background: rgba(251, 245, 232, 0.94); border: 1px solid var(--rule-soft); padding: 14px 32px;
  opacity: 0; pointer-events: none; transition: opacity 0.9s ease;
}
#greeting.shown { 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); }
/* the Light button: a small round lamp before the word, lit when the light is up */
#light-toggle::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px;
  border: 1px solid currentColor; border-radius: 50%; transition: background 0.4s ease, box-shadow 0.4s ease;
}
#light-toggle.on { color: var(--lu-bronze); }
#light-toggle.on::before { background: #e9b54a; border-color: #c9922e; box-shadow: 0 0 6px rgba(233, 181, 74, 0.85); }

/* the note in the other corner: the music (music.js), as faint as it can be,
   struck through while it is silent; it steps up over the station caption */
#music-note {
  position: fixed; left: 28px; bottom: 28px; z-index: 21; margin: 0;
  width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251, 245, 232, 0.8); color: var(--ink-mute); opacity: 0.85;
  transition: opacity 0.3s ease, color 0.4s ease, bottom 0.3s ease;
}
#music-note svg { display: block; }
#music-note:hover { opacity: 1; color: var(--lu-blue); }
body.caption-on #music-note { bottom: 96px; }
body.chamber #music-note { background: rgba(243, 233, 212, 0.85); }
/* in a room with sound of its own the same note is the room's sound (ui.js, bindSound), struck through while it is silenced; in the
   study the gramophone's, struck through while the music is stopped (showMusic) */
#music-note .strike { display: none; }
#music-note.muted .strike { display: inline; }

/* the cat's line, when it is clicked: a card beside her head as wide as its text, a longer line broken into lines of nearly equal
   length; gone after a moment (ui.js, showCatLine) */
#catline {
  position: fixed; left: 0; top: 0; z-index: 40; width: max-content; max-width: min(22rem, 80vw);
  font-family: var(--serif-body); font-style: italic; font-size: 0.9rem; line-height: 1.35; color: var(--ink-soft);
  text-align: left; text-wrap: balance; hyphens: none; overflow-wrap: normal;
  background: var(--bone); border: 1px solid rgba(26, 19, 32, 0.16); border-radius: 0; box-shadow: 0 2px 10px rgba(26, 19, 32, 0.08);
  padding: 0.55em 0.9em; cursor: pointer;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
#catline.hidden { transition: opacity 0.6s ease, visibility 0s linear 0.6s; }

/* ═══ 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. The bar is meant for thumbs, every control in it at least 44px
   tall, and kept light: thin rules, small capitals, the action's button a
   quiet outline. (The arrows' and the button's rules name the bar as well,
   so that they are not overridden by its rule for all its buttons.) */
#stationbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
  display: flex; align-items: stretch;
  height: calc(46px + 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); }
#stationbar #bar-prev, #stationbar #bar-next {
  flex: 0 0 44px;
  font-family: var(--serif-display); font-size: 1.45rem; line-height: 1; padding-bottom: 4px;
  color: var(--ink-mute);
}
#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.58rem, 2.6vw, 0.68rem); 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); }
#stationbar #bar-read {
  flex: 0 0 auto; align-self: center; margin-right: 8px;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  padding: 0 10px; height: 28px; border: 1px solid var(--rule-bronze) !important; color: var(--ink-soft);
}
#stationbar #bar-read:active { background: var(--ink-soft); 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(46px + 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; }
/* (in the sheet the corner's links sit two to a row, the last alone across
   the row when their number is odd: two in the study by day and three at
   night, with the Light button; three in the notes' room) */
#contents #corner {
  position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--rule-soft); background: var(--bone-warm);
}
#contents #corner a, #contents #corner button { min-height: 48px; display: flex; align-items: center; justify-content: center; background: transparent; white-space: nowrap; }
#contents #corner > :nth-child(even) { border-left: 1px solid var(--rule-soft); }
#contents #corner > :nth-child(n + 3) { border-top: 1px solid var(--rule-soft); }
#contents #corner > :last-child:nth-child(odd) { grid-column: 1 / -1; }
#contents #corner #classic-link { display: flex; }

/* ═══ Between a phone and a wide screen (721 to 1119 px): the masthead in two rows ═══ */
/* At full size the name and the seven stations need about 1110 px on one
   line; below that the stations used to wrap under the name, at the right,
   across the cornice. Here the name takes the first row and the stations
   the second, left-aligned, always on ONE line, at the largest size that
   fits the width: 0.7rem from 900 px, 0.64rem from 800 px, 0.6rem from
   721 px (measured; a ragged wrap is never allowed). The phone layout
   begins at 720 px. */
@media (min-width: 721px) and (max-width: 1119px) and (min-height: 481px) {
  #topbar { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 28px 12px; }
  #topbar nav.primary { justify-content: flex-start; flex-wrap: nowrap; gap: 18px; }
  #topbar nav.primary a { font-size: 0.7rem; letter-spacing: 0.07em; white-space: nowrap; }
}
@media (min-width: 721px) and (max-width: 899px) and (min-height: 481px) {
  #topbar nav.primary { gap: 14px; }
  #topbar nav.primary a { font-size: 0.64rem; letter-spacing: 0.06em; }
}
@media (min-width: 721px) and (max-width: 799px) and (min-height: 481px) {
  #topbar nav.primary { gap: 12px; }
  #topbar nav.primary a { font-size: 0.6rem; letter-spacing: 0.05em; }
}

/* ═══ 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: stretch; padding: 84px 22px 172px; }
  .hero-scrim { background: linear-gradient(to bottom, rgba(251, 245, 232, 0.9) 0%, rgba(251, 245, 232, 0.72) 24%, rgba(251, 245, 232, 0) 40%, rgba(251, 245, 232, 0.64) 49%, rgba(251, 245, 232, 0.9) 58%, rgba(251, 245, 232, 0.94) 100%); }   /* (the welcome and the day's greeting at the foot held on the bone) */
  #hero .hero-inner { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
  #hero .post-nominals { margin-bottom: 22px; }
  #hero .hero-welcome { margin-top: 0; max-width: 30rem; }
  #hero .hero-welcome .hw-day::after { margin: 14px 0 16px; }
  #hero .hero-welcome .hw-text { margin-bottom: 18px; }
  #hint { bottom: calc(58px + env(safe-area-inset-bottom)); font-size: 0.6rem; max-width: 80vw; }
  #music-note { left: 12px; bottom: calc(56px + env(safe-area-inset-bottom)); width: 34px; height: 34px; }
  body.caption-on #music-note { bottom: calc(56px + env(safe-area-inset-bottom)); }
  #catline { font-size: 0.82rem; }
  #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(58px + 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(62px + 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(62px + 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; }
  #hero .hero-inner { display: block; }
  #hero .hero-welcome { margin-top: 20px; }
  #hint { display: none; }
  #contents { max-height: calc(100% - 98px - env(safe-area-inset-bottom)); }
}

/* the books' reader (engine/reader.js): the book open over the room, two pages to the spread (one on a narrow screen), on the
   colour of its binding; set in the site's Garamond, the margins in a book's proportions (the inner narrowest, the outer and the
   foot widest), the running title centred in spaced small capitals with the number at the outer corner, a page of verse set as one
   block centred by its longest line, the notes at the page's foot */
#reader { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(20, 15, 12, 0.6); opacity: 0; transition: opacity 0.35s ease; --rd-cover: #5a3a26; --rd-ink: #2b2119; --rd-quiet: #6c5a47; }
#reader.hidden { display: none; }
#reader.rd-on { opacity: 1; }
#reader.rd-linnaeus { --rd-cover: #7a2a22; }
#reader.rd-lenngren { --rd-cover: #4a3828; }
#reader.rd-bellman { --rd-cover: #2f4a3a; }
#reader.rd-goldsmith { --rd-cover: #4e2e1c; }
#reader.rd-yeats { --rd-cover: #2a3d64; }
#reader.rd-edgeworth { --rd-cover: #5c3420; }
#reader.rd-soylev { --rd-cover: #2a3a30; }
#reader.rd-nutuk { --rd-cover: #5a1a1c; }
#reader.rd-kemal { --rd-cover: #2c4a36; }
#reader.rd-fikret { --rd-cover: #2a3a5a; }
#reader.rd-hasim { --rd-cover: #6a4a30; }
body.reading #tooltip, body.reading #catline, body.reading #hint { visibility: hidden; }
.rd-book { position: relative; padding: 13px 15px 15px; border-radius: 5px; background-color: var(--rd-cover);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 240, 220, 0.1), rgba(0, 0, 0, 0) 60%), radial-gradient(ellipse at 70% 90%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 70%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.35); }
.rd-spread { display: flex; position: relative; box-shadow: 0 1px 0 #e2d6bc, 0 2px 0 #cfc2a6, 0 3px 0 #e2d6bc, 0 4px 0 #c8bb9f, 0 5px 2px rgba(0, 0, 0, 0.3); }
.rd-page { position: relative; box-sizing: border-box; width: var(--rd-w); height: var(--rd-h); display: flex; flex-direction: column;
  padding: calc(var(--rd-h) * 0.078) calc(var(--rd-w) * 0.135) calc(var(--rd-h) * 0.105) calc(var(--rd-w) * 0.095);
  background-color: #f4ecd9;
  background-image: radial-gradient(ellipse at 50% 40%, rgba(255, 252, 244, 0.42), rgba(255, 252, 244, 0) 78%);
  color: var(--rd-ink); font-family: var(--serif-body); font-size: var(--rd-fs); line-height: 1.42; font-kerning: normal; font-variant-ligatures: common-ligatures; }
.rd-left { padding-left: calc(var(--rd-w) * 0.135); padding-right: calc(var(--rd-w) * 0.095); border-radius: 3px 0 0 3px; box-shadow: inset -26px 0 30px -20px rgba(70, 46, 24, 0.42); }
.rd-right { padding-left: calc(var(--rd-w) * 0.095); padding-right: calc(var(--rd-w) * 0.135); border-radius: 0 3px 3px 0; box-shadow: inset 26px 0 30px -20px rgba(70, 46, 24, 0.42); }
.rd-one .rd-page { padding-left: calc(var(--rd-w) * 0.11); padding-right: calc(var(--rd-w) * 0.11); border-radius: 3px; box-shadow: inset 18px 0 24px -20px rgba(70, 46, 24, 0.4); }
.rd-blank.rd-left { background-color: #e7dac0; }
.rd-runhead { position: relative; display: flex; justify-content: center; align-items: baseline; min-height: 1.5em; margin: 0 0 1.6em; padding: 0;
  font-size: 0.76em; color: var(--rd-quiet); }
.rd-run { max-width: 76%; font-variant-caps: all-small-caps; letter-spacing: 0.17em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.rd-num { position: absolute; top: 0; font-size: 1.1em; font-variant-numeric: oldstyle-nums; letter-spacing: 0.04em; }
.rd-left .rd-num { left: 0; }
.rd-right .rd-num { right: 0; }
.rd-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rd-tall .rd-body { overflow-y: auto; }
.rd-text { flex: 0 0 auto; }
.rd-text:has(> .rd-s):not(:has(> .rd-p)) { align-self: center; width: fit-content; max-width: 100%; }
.rd-notes { margin-top: auto; font-size: 0.8em; line-height: 1.34; }
.rd-notes:not(:empty)::before { content: ''; display: block; width: 28%; margin: 0.6em 0 0.35em; border-top: 0.5px solid rgba(90, 68, 46, 0.45); }
.rd-note { margin: 0.15em 0 0; text-align: justify; hyphens: auto; }
.rd-mark { padding-right: 0.15em; }
.rd-ref { font-size: 0.68em; line-height: 0; vertical-align: 0.55em; padding-left: 0.05em; }
.rd-p { margin: 0; text-indent: 1.3em; text-align: justify; hyphens: auto; text-wrap: pretty; }
.rd-p.rd-cut { text-align-last: justify; }
.rd-ph { display: inline-block; max-width: 100%; }
.rd-sc { font-variant-caps: small-caps; letter-spacing: 0.04em; }
.rd-title, .rd-head, .rd-sub, .rd-tp > span { text-wrap: balance; }
.rd-text > .rd-p:first-child, .rd-title + .rd-p { text-indent: 0; }
.rd-head { margin: 0.95em 0 0.45em; text-align: center; }
.rd-text > .rd-head:first-child { margin-top: 0; }
.rd-sub { margin: -0.25em 0 0.6em; text-align: center; font-style: italic; font-size: 0.86em; color: var(--rd-quiet); }
.rd-title { margin: 0.4em 0 1.25em; text-align: center; font-weight: 400; font-size: 1.08em; font-variant-caps: all-small-caps; letter-spacing: 0.14em; line-height: 1.3; }
.rd-title::after { content: ''; display: block; width: 2.2em; margin: 0.55em auto 0; border-top: 0.5px solid rgba(90, 68, 46, 0.55); }
.rd-v { margin: 0.55em 0; text-align: center; }
.rd-v .rd-l { display: block; }
.rd-s { margin: 0 0 0.8em 0.3em; }
.rd-p + .rd-s { margin-top: 0.8em; }
.rd-s .rd-l { display: block; padding-left: 1.5em; text-indent: -1.5em; }
.rd-s .rd-l.rd-turn { text-align-last: right; }
.rd-s .rd-i1 { margin-left: 1.1em; }
.rd-s .rd-i2 { margin-left: 2.2em; }
.rd-s .rd-i3 { margin-left: 3.3em; }
.rd-stars { margin: 0.5em 0 0.6em; text-align: center; color: var(--rd-quiet); }
.rd-titlepage { justify-content: center; align-items: center; text-align: center; }
.rd-tp { display: flex; flex-direction: column; align-items: center; gap: 0.3em; max-width: 100%; }
.rd-tp-big { font-size: 2.05em; line-height: 1.05; letter-spacing: 0.1em; text-transform: uppercase; }
.rd-tp-small { font-style: italic; font-size: 1em; }
.rd-tp-name { font-size: 1.2em; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; }
.rd-tp-line { font-style: italic; font-size: 0.92em; line-height: 1.35; }
.rd-tp-rule { display: block; width: 3.2em; margin: 0.8em 0; border-top: 0.5px solid rgba(90, 68, 46, 0.6); }
.rd-tp-gap { display: block; height: 1.1em; }
.rd-tp-imprint { margin-top: 0.7em; font-variant-caps: all-small-caps; letter-spacing: 0.16em; font-size: 0.92em; color: var(--rd-quiet); }
/* a book set in blackletter (reader.js, face: 'blackletter'): UnifrakturMaguntia, a size larger, its heads, numbers and title page in
   the same face, no capitals spaced, no small capitals; the first letter of each piece's first paragraph in pomegranate; a drawn leaf */
#reader.rd-salem { --rd-cover: #3a2a1e; }
#reader.rd-black .rd-page { font-family: 'UnifrakturMaguntia', var(--serif-body); font-size: calc(var(--rd-fs) * 1.14); line-height: 1.38; }
#reader.rd-black .rd-run { font-variant-caps: normal; letter-spacing: 0.02em; white-space: normal; text-wrap: balance; text-align: center; }
#reader.rd-black .rd-num { font-variant-numeric: normal; }
#reader.rd-black .rd-title { font-family: 'UnifrakturMaguntia', var(--serif-body); font-variant-caps: normal; letter-spacing: 0.02em; font-size: 1.24em; }
#reader.rd-black .rd-title + .rd-p::first-letter { color: var(--lu-bronze); font-size: 1.45em; }
#reader.rd-black .rd-tp-big { text-transform: none; letter-spacing: 0.02em; font-size: 1.9em; line-height: 1.15; }
#reader.rd-black .rd-tp-line { font-style: normal; }
#reader.rd-black .rd-tp-imprint { font-variant-caps: normal; letter-spacing: 0.04em; }
#reader.rd-black .rd-v { font-style: normal; }
/* a book set by hand (reader.js, hand): the type sized to the measure its lines were set to; each line of a paragraph a block of its
   own, justified to the measure, the last flush left (justified too where the paragraph runs on to the next page); the first letter
   of a piece a red initial two lines deep, the first two lines beside it; a title in the lines it was set in; a line of verse turned
   for the measure set in a box as wide as the whole line would be (.rd-pw, unseen), centred, its turned end at the box's right */
#reader.rd-black.rd-hand .rd-page { font-size: var(--rd-hfs); }
.rd-hp { position: relative; margin: 0; }
.rd-hl { display: block; white-space: pre; text-align: justify; text-align-last: justify; word-spacing: -0.093em; }
.rd-hl.rd-end { text-align-last: left; }
.rd-hp.rd-cont > .rd-hl.rd-end { text-align-last: justify; }
.rd-hl.rd-ind { text-indent: 1.3em; }
.rd-hl.rd-beside { padding-left: var(--di); }
.rd-drop { position: absolute; left: -0.02em; top: 0.036em; font-size: 2.91em; line-height: 1; color: var(--lu-bronze); }
.rd-title .rd-tl { display: block; }
.rd-hp + .rd-hp { margin-top: 0; }
.rd-v .rd-pair { display: table; margin: 0 auto; }
.rd-pair .rd-pw { display: block; height: 0; overflow: hidden; visibility: hidden; }
.rd-pair .rd-la { display: block; text-align: left; }
.rd-pair .rd-lb { display: block; text-align: right; }
.rd-drawn { display: block; width: 100%; height: auto; margin: 0.6em 0 1.2em; }
.rd-probe { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }
.rd-bar { display: flex; gap: 10px; margin: 18px 0 0; }
.rd-bar button { font-family: var(--serif-body); font-size: 0.9rem; letter-spacing: 0.03em; color: #efe6d2; background: rgba(20, 15, 12, 0.25);
  border: 1px solid rgba(239, 230, 210, 0.3); padding: 5px 16px 6px; cursor: pointer; min-width: 44px; }
.rd-bar button:hover:not(:disabled) { background: rgba(239, 230, 210, 0.16); color: #fff8ea; }
.rd-bar button:disabled { opacity: 0.35; cursor: default; }
.rd-bar .rd-prev, .rd-bar .rd-next { font-family: var(--serif-body); font-size: 1.05rem; line-height: 1; padding: 4px 14px 6px; }
/* the choice of language for a book in two: Türkçe | English, the one read marked */
.rd-langs { display: inline-flex; }
.rd-langs[hidden] { display: none; }
.rd-langs .rd-lang { color: rgba(239, 230, 210, 0.6); }
.rd-langs .rd-lang + .rd-lang { border-left: none; }
.rd-langs .rd-lang[aria-pressed="true"] { color: #fff8ea; background: rgba(239, 230, 210, 0.18); }
#reader.rd-one .rd-langs .rd-lang { padding: 5px 10px 6px; }
.rd-spread.rd-fwd .rd-page { animation: rdFwd 0.28s ease; }
.rd-spread.rd-back .rd-page { animation: rdBack 0.28s ease; }
@keyframes rdFwd { from { opacity: 0.3; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes rdBack { from { opacity: 0.3; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #reader { transition: none; } .rd-spread.rd-fwd .rd-page, .rd-spread.rd-back .rd-page { animation: none; } }
#reader.rd-one .rd-book { padding: 8px 9px 10px; }
#reader.rd-one .rd-bar { margin-top: 12px; }

/* the tavla in Yenişehir (yenisehir_tavla.js): the game's card at the board, in the caption's make, above the caption (on a phone above
   the station bar); its rows of choices, its line and its buttons; the throw's call beside the dice, in the cat's line box */
#tavla {
  position: fixed; left: 28px; bottom: 96px; z-index: 23; width: 340px; box-sizing: border-box;
  padding: 12px 16px 14px 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.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}
#tavla.hidden { transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
#tavla [hidden] { display: none !important; }
#tavla .tv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; }
#tavla .tv-title { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lu-blue); font-weight: 500; }
#tavla .tv-score { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; }
#tavla .tv-msg { margin: 0 0 10px; font-family: var(--serif-body); font-size: 0.98rem; line-height: 1.35; color: var(--ink); }
#tavla .tv-setup { margin: 0 0 4px; }
#tavla .tv-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
#tavla .tv-key { width: 76px; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
#tavla button {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  padding: 7px 10px; background: transparent; color: var(--ink); border: 1px solid var(--rule-soft); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s; touch-action: manipulation;
}
#tavla .tv-row button:hover { border-color: var(--ink); }
#tavla .tv-row button.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
#tavla .tv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#tavla .tv-actions button { border-color: var(--ink); }
#tavla .tv-actions button:hover { background: var(--ink); color: var(--bone); }
#tavla .tv-actions button.quiet { border-color: var(--rule-soft); color: var(--ink-mute); }
#tavla .tv-actions button.quiet:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
#tavla-call {
  position: fixed; left: 0; top: 0; z-index: 40; max-width: 260px; pointer-events: none;
  font-family: var(--serif-body); font-style: italic; font-size: 0.95rem; line-height: 1.35; color: var(--ink-soft);
  background: rgba(251, 245, 232, 0.96); border: 1px solid var(--rule-soft); border-bottom: 2px solid var(--lu-bronze);
  padding: 7px 12px; white-space: nowrap;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
#tavla-call.hidden { transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
@media (max-width: 720px), (max-height: 480px) {
  #tavla { left: 12px; right: 12px; width: auto; bottom: calc(56px + env(safe-area-inset-bottom)); padding: 10px 12px 12px 14px; }
  #tavla .tv-msg { font-size: 0.9rem; margin-bottom: 8px; }
  #tavla .tv-key { width: 66px; }
  #tavla button { padding: 8px 9px; }
  #tavla-call { font-size: 0.86rem; }
}
@media (max-height: 480px) {
  #tavla { left: auto; right: 12px; width: 300px; bottom: calc(52px + env(safe-area-inset-bottom)); }
  #tavla .tv-row { margin-bottom: 5px; }
}