/* ============================================================
   reader.css — the reading rooms.
   The reader (ui/reader.js), the six room environments and the
   Outfit controls (ui/rooms.js), and the Athanasius podium
   (ui/athanasius.js).

   A room is set by rooms.applyRoom(): data-room / data-tone and the
   --rm-* custom properties (paper, ink, accent, frame, type, lamp,
   textures). Everything below reads those, so one set of rules
   dresses all six rooms.

   Layers inside .rd (back to front):
     .rs-under   the room: wall, stars, decoration, glow, vignette
     .rd-stage   the page (EPUB sheet, PDF column, audio panel, iframe)
     .rs-over    light over the page: leaf shadow, window shaft, lamp
     chrome      bar, foot, margin, panels, drawer
   ============================================================ */

/* ---------------- the reader root ---------------- */
#reader { pointer-events: auto; }
.rd {
  --bar-h: 58px;
  --foot-h: 54px;
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  background: var(--rm-frame, #1A120A);
  color: var(--rm-ink); font-family: var(--rm-font, var(--body));
  -webkit-font-smoothing: antialiased;
  outline: none;
  animation: rd-in .5s var(--ease-out) both;
}
.rd--frame { --bar-h: 52px; --foot-h: 40px; border-radius: 2px; }
.rd--frame .rd-bar { padding-top: 8px; }
.rd.is-closing { animation: rd-out .28s var(--ease) both; pointer-events: none; }
@keyframes rd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-out { to { opacity: 0; } }

/* ---------------- the room scene ---------------- */
.rs { position: absolute; inset: 0; pointer-events: none; }
.rs > * { position: absolute; inset: 0; }
.rs-under { z-index: 0; }
.rs-over { z-index: 3; }
.rs-stars { width: 100%; height: 100%; display: none; }
.rs-leaves, .rs-shaft { display: none; }
.rs-base { background: var(--rs-wall, var(--rm-frame)); }
.rs-glow { opacity: var(--rm-lamp); }
.rs-vignette { background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 50%, rgba(0, 0, 0, .5) 100%); }
.rs-warm { opacity: calc(var(--rm-lamp) * .9); }
.rs-dim {
  background: radial-gradient(ellipse 80% 75% at 45% 40%, rgba(8, 5, 2, .15), rgba(8, 5, 2, .78) 100%);
  opacity: calc((1 - var(--rm-lamp)) * .85);
  transition: opacity .4s var(--ease);
}

/* ----- The Scriptorium: a lamp-lit desk in a dark room ----- */
[data-room="scriptorium"] {
  --rs-wall:
    linear-gradient(to bottom, transparent 85.6%, rgba(255, 196, 120, .22) 85.8%, rgba(40, 22, 10, .9) 86.3%, #120904 100%),
    radial-gradient(ellipse 55% 60% at 12% 80%, rgba(170, 100, 40, .5), transparent 70%),
    var(--rm-tex-wall),
    linear-gradient(to bottom, #2A180B 0%, #1C1008 62%, #140B05 100%);
  --rd-sheet-shadow: 0 30px 60px -18px rgba(0, 0, 0, .75), 0 8px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(60, 36, 12, .45);
}
[data-room="scriptorium"] .rs-glow {
  background:
    radial-gradient(circle at 11.5% 79%, rgba(255, 222, 150, .6) 0, rgba(255, 170, 80, .26) 9%, transparent 34%),
    radial-gradient(ellipse 90% 80% at 20% 70%, rgba(255, 170, 80, .16), transparent 70%);
  animation: rs-flicker 5.3s ease-in-out infinite;
}
/* the lamp itself: a bronze lucerna on the desk, far left */
[data-room="scriptorium"] .rs-deco::before {
  content: ''; position: absolute; left: max(18px, calc(50% - var(--sheet-half, 570px) - 214px)); bottom: 12.4%; width: 190px; height: 107px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Cdefs%3E%3CradialGradient id='f' cx='.5' cy='.75' r='.7'%3E%3Cstop offset='0' stop-color='%23FFFBEA'/%3E%3Cstop offset='.35' stop-color='%23FFE3A0'/%3E%3Cstop offset='.8' stop-color='%23F29A3A'/%3E%3Cstop offset='1' stop-color='%23C0501A' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238A6230'/%3E%3Cstop offset='.35' stop-color='%234A3016'/%3E%3Cstop offset='1' stop-color='%231A0E05'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23FFD890' stop-opacity='.9'/%3E%3Cstop offset='.6' stop-color='%23C08A40' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='%23C08A40' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='72' cy='84' rx='30' ry='3.6' fill='%23000' opacity='.45'/%3E%3Cpath d='M44 80h56l-6-7H50Z' fill='url(%23b)'/%3E%3Cpath d='M20 58c0-13 22-21 50-21s46 6 58 1c7-3 13-2 14 3 1 6-5 9-12 10-9 2-15 6-20 12-8 9-26 15-42 15-28 0-48-7-48-20Z' fill='url(%23b)'/%3E%3Cpath d='M22 56c3-10 22-17 48-17s44 5 56 0c6-3 12-2 14 2' fill='none' stroke='url(%23r)' stroke-width='1.6'/%3E%3Cellipse cx='64' cy='48' rx='22' ry='5' fill='%23140A04' opacity='.7'/%3E%3Ccircle cx='64' cy='48' r='2.2' fill='%23050201'/%3E%3Cpath d='M22 52c-8-2-14 2-14 8s7 9 13 6' fill='none' stroke='%235A3C1C' stroke-width='3.4'/%3E%3Cpath d='M141 38c-6-9-5-20 1-33 7 13 8 24 1 33Z' fill='url(%23f)'/%3E%3Cpath d='M141.6 37c-2.6-4-2.2-9 .4-14 2.6 5 3 10 .4 14Z' fill='%23FFFFF4' opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: calc(.5 + var(--rm-lamp) * .5);
}
[data-room="scriptorium"] .rs-deco::after {
  /* the flame's own halo, breathing */
  content: ''; position: absolute; left: max(18px, calc(50% - var(--sheet-half, 570px) - 214px)); bottom: 12.4%; width: 190px; height: 107px;
  background: radial-gradient(circle at 88% 22%, rgba(255, 236, 180, .75) 0, rgba(255, 190, 90, .3) 7%, transparent 22%);
  opacity: var(--rm-lamp); animation: rs-flame 2.7s ease-in-out infinite; transform-origin: 88% 30%;
}
[data-room="scriptorium"] .rs-warm {
  background: radial-gradient(ellipse 95% 100% at 10% 80%, rgba(255, 196, 120, .24), rgba(150, 80, 20, .14) 70%, rgba(60, 30, 5, .28) 100%);
  mix-blend-mode: multiply;
}
[data-room="scriptorium"] .rs-vignette { background: radial-gradient(ellipse 70% 72% at 42% 42%, transparent 40%, rgba(0, 0, 0, .66) 100%); }
@keyframes rs-flicker { 0%, 100% { opacity: var(--rm-lamp); } 23% { opacity: calc(var(--rm-lamp) * .9); } 41% { opacity: calc(var(--rm-lamp) * 1.04); } 67% { opacity: calc(var(--rm-lamp) * .93); } }
@keyframes rs-flame { 0%, 100% { transform: scale(1); opacity: var(--rm-lamp); } 30% { transform: scale(1.06, .96); opacity: calc(var(--rm-lamp) * .85); } 60% { transform: scale(.96, 1.05); opacity: calc(var(--rm-lamp) * 1.05); } }

/* ----- Desert Night: a slow wheel of stars over the dunes ----- */
[data-room="desertnight"] {
  --rs-wall:
    radial-gradient(ellipse 50% 40% at 86% 8%, rgba(120, 150, 170, .16), transparent 70%),
    linear-gradient(to bottom, #010407 0%, #03090C 45%, #071310 78%, #0B1A13 100%);
  --rd-sheet-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(201, 174, 124, .16), 0 0 60px rgba(201, 174, 124, .05);
}
[data-room="desertnight"] .rs-stars { display: block; }
[data-room="desertnight"] .rs-deco {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 260' preserveAspectRatio='none'%3E%3Cpath d='M0 150C170 102 330 118 520 146S880 96 1090 128 1420 104 1600 132V260H0Z' fill='%23040B09'/%3E%3Cpath d='M0 150C170 102 330 118 520 146S880 96 1090 128 1420 104 1600 132' fill='none' stroke='%23C9AE7C' stroke-opacity='.22' stroke-width='1.4'/%3E%3Cpath d='M0 206C240 168 470 190 720 204S1180 170 1600 196V260H0Z' fill='%23020605'/%3E%3C/svg%3E") bottom / 100% 26% no-repeat;
}
[data-room="desertnight"] .rs-glow { background: radial-gradient(circle at 88% 9%, rgba(236, 232, 214, .28) 0, rgba(200, 210, 220, .07) 9%, transparent 30%); opacity: 1; }
[data-room="desertnight"] .rs-vignette { background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
[data-room="desertnight"] .rs-dim { opacity: calc((1 - var(--rm-lamp)) * .35); }

/* ----- The Peristyle Garden: noon, a colonnade, leaf shadow ----- */
[data-room="peristyle"] {
  --rs-wall:
    radial-gradient(ellipse 70% 60% at 62% 30%, rgba(255, 250, 232, .7), transparent 70%),
    repeating-linear-gradient(101deg, transparent 0 7.5%, rgba(92, 70, 38, .16) 8.4% 12.5%, transparent 13.4% 21%),
    var(--rm-tex-wall),
    linear-gradient(to bottom, #EADFC4 0%, #E0D1AE 70%, #CDBB92 100%);
  --rd-sheet-shadow: 22px 28px 46px -14px rgba(70, 48, 16, .38), 0 4px 10px rgba(70, 48, 16, .16), 0 0 0 1px rgba(90, 70, 30, .12);
}
[data-room="peristyle"] .rs-leaves { display: block; background-size: cover; background-position: 70% 20%; mix-blend-mode: multiply; }
[data-room="peristyle"] .rs-leaves-a { opacity: .2; inset: -6%; animation: rs-sway-a 11s ease-in-out infinite alternate; }
[data-room="peristyle"] .rs-leaves-b { opacity: .13; inset: -4%; animation: rs-sway-b 7.5s ease-in-out infinite alternate; }
[data-room="peristyle"] .rs-warm { background: radial-gradient(ellipse at 70% 10%, rgba(255, 244, 200, .25), transparent 60%); mix-blend-mode: screen; }
[data-room="peristyle"] .rs-vignette { background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 60%, rgba(80, 60, 20, .22) 100%); }
@keyframes rs-sway-a { from { transform: translate(-.6%, 0) rotate(-.5deg); } to { transform: translate(.8%, .6%) rotate(.6deg); } }
@keyframes rs-sway-b { from { transform: translate(.5%, -.3%) rotate(.4deg); } to { transform: translate(-.7%, .4%) rotate(-.5deg); } }

/* ----- The Pharos: clear light off the sea ----- */
[data-room="pharos"] {
  --rs-wall:
    linear-gradient(to bottom, rgba(255, 255, 255, .7), transparent 40%),
    linear-gradient(to bottom, transparent 71.8%, rgba(31, 95, 139, .16) 72%, transparent 72.4%),
    var(--rm-tex-wall),
    linear-gradient(to bottom, #F5F8FA 0%, #EAF0F4 70%, #DCE5EC 100%);
  --rd-sheet-shadow: 0 18px 44px -16px rgba(20, 40, 60, .28), 0 2px 6px rgba(20, 40, 60, .1), 0 0 0 1px rgba(20, 40, 60, .07);
}
[data-room="pharos"] .rs-deco { overflow: hidden; }
[data-room="pharos"] .rs-deco::before {
  content: ''; position: absolute; left: -60%; top: -120%; width: 220%; height: 220%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 60deg, rgba(255, 255, 255, .55) 66deg, transparent 74deg, transparent 240deg, rgba(255, 255, 255, .4) 246deg, transparent 254deg);
  animation: rs-beam 38s linear infinite;
}
[data-room="pharos"] .rs-glow { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 255, 255, .6), transparent 70%); }
[data-room="pharos"] .rs-vignette { background: radial-gradient(ellipse 85% 85% at 50% 45%, transparent 65%, rgba(40, 60, 80, .1) 100%); }
[data-room="pharos"] .rs-dim { background: rgba(10, 20, 30, .6); opacity: calc((1 - var(--rm-lamp)) * .5); }
@keyframes rs-beam { to { transform: rotate(360deg); } }

/* ----- The Serapeum Stacks: porphyry and gilt ----- */
[data-room="serapeum"] {
  --rs-wall:
    radial-gradient(ellipse 70% 55% at 50% 12%, rgba(212, 166, 80, .14), transparent 70%),
    var(--rm-tex-wall),
    radial-gradient(ellipse at 50% 40%, #4A1519 0%, #2C0A0E 60%, #180507 100%);
  --rd-sheet-shadow: 0 30px 70px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(212, 166, 80, .35), 0 0 0 5px #1A0607, 0 0 0 6px rgba(212, 166, 80, .28);
}
[data-room="serapeum"] .rs-deco::before, [data-room="serapeum"] .rs-deco::after {
  content: ''; position: absolute; pointer-events: none;
  border: 1px solid rgba(212, 166, 80, .42);
}
[data-room="serapeum"] .rs-deco::before { inset: 14px; }
[data-room="serapeum"] .rs-deco::after { inset: 20px; border-color: rgba(212, 166, 80, .22); }
[data-room="serapeum"] .rs-glow { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 200, 120, .18), transparent 70%); }
[data-room="serapeum"] .rs-warm { background: radial-gradient(ellipse at 50% 20%, rgba(255, 190, 110, .1), transparent 70%); mix-blend-mode: screen; }

/* ----- The Desert Cell: whitewash and one small window ----- */
[data-room="cell"] {
  --rs-wall:
    radial-gradient(ellipse 45% 40% at 82% 10%, rgba(255, 250, 236, .75), transparent 70%),
    var(--rm-tex-wall),
    linear-gradient(to bottom, #EDE9E0 0%, #E3DED2 65%, #D6CFC0 100%);
  --rd-sheet-shadow: -14px 24px 44px -16px rgba(60, 50, 30, .3), 0 3px 8px rgba(60, 50, 30, .12), 0 0 0 1px rgba(60, 50, 30, .08);
}
[data-room="cell"] .rs-deco::before {
  /* the window: a deep reveal in thick whitewash, blazing sky beyond */
  content: ''; position: absolute; right: max(40px, calc(50% - var(--sheet-half, 570px) - 150px)); top: 15%; width: 64px; height: 98px;
  border-radius: 32px 32px 2px 2px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(120, 104, 80, .35) 47% 53%, transparent 53%),
    linear-gradient(to bottom, #FFFFFF 0%, #FFF8E4 60%, #F7E7C0 100%);
  box-shadow:
    0 0 0 9px #D8D1C1, 0 0 0 10px rgba(90, 80, 60, .18),
    inset 0 0 12px rgba(255, 240, 200, .9),
    0 0 90px 40px rgba(255, 248, 225, .55);
}
[data-room="cell"] .rs-shaft {
  /* colour-dodge brightens the whitewash and the paper but leaves black ink black */
  display: block;
  background: linear-gradient(62deg, transparent 30%, rgba(255, 226, 170, .2) 40%, rgba(255, 232, 186, .17) 55%, transparent 66%);
  mix-blend-mode: color-dodge; filter: blur(12px);
}
[data-room="cell"] .rs-vignette { background: radial-gradient(ellipse 80% 80% at 60% 35%, transparent 55%, rgba(70, 60, 40, .22) 100%); }

/* ---------------- the stage and the page ---------------- */
.rd-stage { position: absolute; inset: 0; z-index: 2; }
.rd-sheet {
  position: absolute; left: 50%; top: var(--sheet-top, 80px);
  width: var(--sheet-w, 900px); height: var(--sheet-h, 700px);
  transform: translateX(-50%);
  transition: width .35s var(--ease), height .35s var(--ease), top .35s var(--ease);
}
.rd-paper {
  position: absolute; inset: 0; border-radius: 3px;
  background-color: var(--rm-paper);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 252, 240, .22), transparent 75%),
    var(--rm-tex-paper);
  box-shadow: var(--rd-sheet-shadow, 0 24px 60px -18px rgba(0, 0, 0, .6));
}
[data-tone="dark"] .rd-paper { background-image: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 240, 210, .04), transparent 75%), var(--rm-tex-paper); }
/* the page block's edge: a few leaves under the top one */
.rd-paper::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 1px 1px 0 var(--rm-paper-edge), 2px 2px 0 var(--rm-paper-2), 3px 3px 0 var(--rm-paper-edge), 4px 4px 0 var(--rm-paper-2), 5px 5px 0 var(--rm-paper-edge);
}
.rd-sheet[data-spread="1"] .rd-paper::before {
  box-shadow: -1px 1px 0 var(--rm-paper-edge), -2px 2px 0 var(--rm-paper-2), -3px 3px 0 var(--rm-paper-edge), -4px 4px 0 var(--rm-paper-2),
              1px 1px 0 var(--rm-paper-edge), 2px 2px 0 var(--rm-paper-2), 3px 3px 0 var(--rm-paper-edge), 4px 4px 0 var(--rm-paper-2);
}
/* the gutter of an open codex */
.rd-sheet[data-spread="1"] .rd-paper::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 15%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(60, 36, 10, .05) 30%, rgba(60, 36, 10, .16) 47%, rgba(40, 20, 5, .3) 50%, rgba(60, 36, 10, .16) 53%, rgba(60, 36, 10, .05) 70%, transparent);
}
[data-tone="dark"] .rd-sheet[data-spread="1"] .rd-paper::after {
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .35) 48%, rgba(255, 230, 180, .06) 50.4%, rgba(0, 0, 0, .3) 52%, rgba(0, 0, 0, .1) 70%, transparent);
}
/* the Desert Night page lets the stars show faintly through */
[data-room="desertnight"] .rd-paper { background-color: color-mix(in srgb, var(--rm-paper) 84%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* gilt double rules on the Serapeum page */
[data-room="serapeum"] .rd-frame-rules { position: absolute; inset: 12px; border: 1px solid rgba(212, 166, 80, .5); pointer-events: none; }
[data-room="serapeum"] .rd-frame-rules::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(212, 166, 80, .26); }
[data-room="serapeum"] .rd-sheet[data-spread="1"] .rd-frame-rules { background: linear-gradient(rgba(212, 166, 80, .3), rgba(212, 166, 80, .3)) 50% 0 / 1px 100% no-repeat; }
/* the Pharos page: one clean line of the sea's blue across the top */
[data-room="pharos"] .rd-paper { border-top: 2px solid var(--rm-accent); }

.rd-view {
  position: absolute; left: 0; right: 0; top: var(--view-top, 46px); height: var(--view-h, 600px);
  will-change: transform, opacity;
}
.rd-view iframe { background: transparent !important; }
.rd-sheet[data-flow="scrolled"] .rd-view { top: 0; height: 100%; }
.rd-sheet[data-flow="scrolled"] .rd-view .epub-container { scrollbar-width: thin; scrollbar-color: var(--rm-accent-soft) transparent; }

/* running heads and folios */
.rd-head, .rd-folio { position: absolute; left: 0; right: 0; display: flex; pointer-events: none; color: var(--rm-ink-3); }
.rd-head { top: calc(var(--view-top, 46px) * .44); }
.rd-folio { bottom: calc(var(--view-bottom, 46px) * .36); }
.rd-head > span, .rd-folio > span { flex: 1 1 0; text-align: center; padding: 0 calc(var(--page-margin, 60px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-head > span {
  font-family: 'Cinzel', var(--display); font-size: 11px; letter-spacing: .16em; line-height: 1.4;
  transition: opacity .3s var(--ease);
}
.rd-head .rd-head-l { font-style: normal; }
.rd-folio > span { font-family: var(--body); font-style: normal; font-size: 16px; font-variant-numeric: lining-nums; letter-spacing: .08em; color: var(--rm-ink-3); }
.rd-sheet[data-spread="0"] .rd-head-r, .rd-sheet[data-spread="0"] .rd-folio-r { display: none; }
.rd-sheet[data-flow="scrolled"] .rd-head, .rd-sheet[data-flow="scrolled"] .rd-folio { display: none; }
.rd-head.is-opening > span { opacity: 0; }

/* page edges: click to turn */
.rd-edge {
  position: absolute; top: 0; bottom: 0; width: var(--edge-w, 70px); z-index: 4;
  border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; color: var(--rm-ink-2);
  display: grid; place-items: center; opacity: 0; transition: opacity .25s var(--ease);
}
.rd-edge.prev { left: calc(var(--edge-w, 70px) * -.35); }
.rd-edge.next { right: calc(var(--edge-w, 70px) * -.35); }
.rd-edge:hover, .rd-edge:focus-visible { opacity: 1; }
.rd-edge svg { width: 26px; height: 26px; stroke-width: 1.2; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)); }
.rd-edge.prev:hover { background: linear-gradient(to right, rgba(0, 0, 0, .06), transparent); }
.rd-edge.next:hover { background: linear-gradient(to left, rgba(0, 0, 0, .06), transparent); }
.rd-edge[disabled] { visibility: hidden; }
.rd-sheet[data-flow="scrolled"] .rd-edge { display: none; }
/* a soft shade sweeps the page as it turns */
.rd-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; border-radius: 3px; }
.rd-sweep.go-next { animation: rd-sweep-next .52s var(--ease) both; background: linear-gradient(to left, transparent 0%, rgba(40, 24, 8, .1) 46%, rgba(255, 250, 235, .12) 50%, transparent 60%); background-size: 260% 100%; }
.rd-sweep.go-prev { animation: rd-sweep-prev .52s var(--ease) both; background: linear-gradient(to right, transparent 0%, rgba(40, 24, 8, .1) 46%, rgba(255, 250, 235, .12) 50%, transparent 60%); background-size: 260% 100%; }
@keyframes rd-sweep-next { 0% { opacity: 1; background-position: 0% 0; } 100% { opacity: 0; background-position: 100% 0; } }
@keyframes rd-sweep-prev { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 0; background-position: 0% 0; } }

/* ---------------- chrome: the top bar ---------------- */
.rd-bar {
  position: absolute; left: 0; right: 0; top: 0; height: var(--bar-h); z-index: 10;
  display: flex; align-items: center; gap: 18px; padding: 0 16px 0 20px;
  color: var(--rm-ch-fg); font-family: var(--util);
  background: linear-gradient(to bottom, var(--rm-ch-bg), color-mix(in srgb, var(--rm-ch-bg) 70%, transparent));
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--rm-ch-line);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rd.idle .rd-bar { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.rd.idle .rd-bar:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.rd-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.rd-mark { width: 28px; height: 28px; flex: none; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.rd-thumb { width: 24px; height: 34px; flex: none; object-fit: cover; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.rd-titles { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rd-title {
  font-family: 'Cinzel', var(--display); font-size: 16px; font-weight: 400; letter-spacing: .07em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; line-height: 1.2; color: var(--rm-ch-fg);
}
.rd-author { font-family: var(--body); font-style: italic; font-size: 17px; color: var(--rm-ch-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd--frame .rd-title { font-size: 14px; }
.rd--frame .rd-author { font-size: 15px; }

/* the room switcher: six swatches of paper and ink */
.rd-rooms { display: flex; align-items: center; gap: 7px; flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rm-ch-line); }
.rd-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative;
  background: linear-gradient(135deg, var(--sw-paper) 0 52%, var(--sw-ink) 52% 58%, var(--sw-frame) 58%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), inset 0 1px 1px rgba(255, 255, 255, .25);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease);
}
.rd-swatch:hover { transform: scale(1.18); }
.rd-swatch[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 3px var(--rm-ch-bg), 0 0 0 4.5px var(--rm-accent); }
.rd-swatch::after {
  content: attr(data-name); position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px);
  font-family: var(--util); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; background: rgba(8, 10, 8, .86); color: #F1E6CC; opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.rd-swatch:hover::after { opacity: 1; transform: translate(-50%, 0); }

.rd-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.rd-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rm-ch-line); background: transparent; color: var(--rm-ch-fg);
  font-family: var(--util); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.rd-btn:hover, .rd-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--rm-ch-fg) 10%, transparent); border-color: color-mix(in srgb, var(--rm-ch-fg) 40%, transparent); }
.rd-btn svg { width: 17px; height: 17px; flex: none; }
.rd-btn.icon { width: 34px; padding: 0; justify-content: center; }
.rd-btn .aa { font-family: var(--body); font-size: 19px; letter-spacing: 0; text-transform: none; line-height: 1; margin-top: -2px; }
.rd-dl {
  border-color: transparent; color: #2A1A06;
  background: linear-gradient(180deg, #F2DDA4, #D8B366 55%, #B98F42);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .7), 0 1px 3px rgba(0, 0, 0, .3);
}
.rd-dl:hover { background: linear-gradient(180deg, #F8E7B8, #E2C076 55%, #C39A4C); border-color: transparent; }
.rd-dl.owned { background: transparent; color: var(--rm-ch-fg); border-color: var(--rm-ch-line); box-shadow: none; }
.rd-dl .price { font-family: var(--body); font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.rd-actions .gold-plus { --s: 32px; }
:where(.rd, .ath) .gold-plus .gp-face { display: grid; place-items: center; width: 100%; height: 100%; }
:where(.rd, .ath) .gp-g { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:where(.rd, .ath) .gp-g--check { display: none; }
:where(.rd, .ath) .gold-plus.added .gp-g--plus { display: none; }
:where(.rd, .ath) .gold-plus.added .gp-g--check { display: block; }
:where(.rd, .ath) .gp-price {
  position: absolute; top: -7px; right: -11px; font-family: var(--util); font-size: 9.5px; letter-spacing: .06em; line-height: 1;
  padding: 3px 5px; border-radius: 999px; background: var(--green-deep); color: var(--sand-lt); border: 1px solid rgba(201, 174, 124, .5);
}
.rd-sep { width: 1px; height: 22px; background: var(--rm-ch-line); flex: none; }

/* ---------------- chrome: the foot ---------------- */
.rd-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--foot-h); z-index: 9;
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  color: var(--rm-ch-fg-2); font-family: var(--util); font-size: 11.5px; letter-spacing: .12em;
  pointer-events: none;
}
.rd-foot > * { pointer-events: auto; }
.rd[data-kind="pdf"] .rd-foot { background: linear-gradient(to top, color-mix(in srgb, var(--rm-frame) 94%, transparent) 30%, transparent); }
/* scanned, pre-paginated books show their own heads and folios */
.rd-sheet[data-fixed="1"] .rd-head, .rd-sheet[data-fixed="1"] .rd-folio { display: none; }
/* a framed page keeps its own place: no progress rail over its toolbar */
.rd[data-kind="embed"] .rd-foot, .rd[data-kind="html"] .rd-foot { display: none; }
.rd-foot-l, .rd-foot-r { flex: 0 0 auto; min-width: 150px; white-space: nowrap; transition: opacity .5s var(--ease); }
.rd-foot-r { text-align: right; font-variant-numeric: tabular-nums; }
.rd-chapter { font-family: 'Cinzel', var(--display); font-size: 11.5px; letter-spacing: .12em; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; display: block; }
.rd.idle .rd-foot-l, .rd.idle .rd-foot-r { opacity: 0; }
.rd-track { position: relative; flex: 1 1 auto; height: 22px; cursor: pointer; }
.rd-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rm-ch-line); }
.rd-track-fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -.5px; width: var(--p, 0%); background: var(--rm-accent); border-radius: 2px; transition: width .4s var(--ease); }
.rd-track-knob {
  position: absolute; top: 50%; left: var(--p, 0%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; transform: rotate(45deg);
  background: var(--rm-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rm-paper) 50%, transparent); transition: left .4s var(--ease);
}
.rd-track-tip {
  position: absolute; bottom: 100%; transform: translateX(-50%); margin-bottom: 4px; padding: 4px 8px; border-radius: 6px;
  background: rgba(8, 10, 8, .86); color: #F1E6CC; font-size: 10.5px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.rd-track:hover .rd-track-tip { opacity: 1; }
.rd.idle .rd-track { opacity: .55; }
.rd-track[data-busy="1"] { cursor: progress; }

/* ---------------- the right margin: sample ratings ---------------- */
.rd-margin {
  position: absolute; right: 26px; top: 50%; width: var(--margin-w, 190px); transform: translateY(-50%); z-index: 6;
  color: var(--rm-ch-fg); opacity: .5; transition: opacity .35s var(--ease);
}
.rd-margin:hover { opacity: .96; }
.rd-margin[hidden] { display: none; }
.rd-margin .rt-aside { font-family: var(--body); font-size: 15px; line-height: 1.4; }
.rd-margin .rt-aside-sec { margin: 0 0 14px; }
.rd-margin .rt-aside-k { font-family: 'Cinzel', var(--display); font-size: 11px; letter-spacing: .18em; margin-bottom: 5px; opacity: .8; }
.rd-margin .rt-aside-stars { display: flex; align-items: center; gap: 8px; }
.rd-margin .rt-stars { position: relative; display: inline-block; font-size: 14px; letter-spacing: 2px; line-height: 1; }
.rd-margin .rt-stars-base { opacity: .28; }
.rd-margin .rt-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--star, #E6B653); }
.rd-margin .rt-aside-num { font-family: var(--util); font-size: 11px; letter-spacing: .08em; opacity: .7; }
.rd-margin .rt-rec { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-family: var(--util); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rm-accent); }
.rd-margin .rt-seal svg { width: 16px; height: 16px; }
.rd-margin .rt-aside-blurb { margin: 6px 0 0; font-style: italic; }
.rd-margin .rt-aside-rule { width: 36px; height: 1px; background: currentColor; opacity: .3; margin: 12px 0 14px; }
.rd-margin .rt-aside-age { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rd-margin .rt-age { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 5px; border: 1px solid currentColor; font-family: var(--util); font-size: 11px; letter-spacing: .04em; }
.rd-margin .rt-aside-notes { margin: 8px 0 0; padding: 0 0 0 14px; font-size: 14px; }
.rd-margin .rt-aside-notes li { margin: 2px 0; }
.rd-margin .rt-aside-themes { margin-top: 6px; font-family: var(--body); font-size: 14px; font-style: italic; letter-spacing: 0; text-transform: none; opacity: .85; }
.rd-margin .rt-aside-foot { font-family: var(--util); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin-top: 10px; }
.rd-margin aside:not(.rt-aside) { font-family: var(--util); font-size: 12px; letter-spacing: .06em; line-height: 1.8; }
/* live ratings: DeLibris.org, or "Test data" from the SYNTHETIC fixture. Same quiet voice. */
.rd-margin .rt-aside-scales { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; font-family: var(--util); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.rd-margin .rt-aside-moral { margin: 7px 0 0; font-style: italic; font-size: 13.5px; line-height: 1.35; }
.rd-margin .rt-aside-mk { margin-right: 2px; font-style: normal; font-family: var(--util); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.rd-margin .rt-aside-content { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 3px; }
.rd-margin .rt-aside-content li { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; align-items: center; gap: 7px; font-size: 13px; line-height: 1.2; }
.rd-margin .rt-aside-cv { font-family: var(--util); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.rd-margin .rt-meter { display: inline-flex; gap: 2px; }
.rd-margin .rt-meter i { width: 7px; height: 4px; border-radius: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
.rd-margin .rt-meter i.on { background: color-mix(in srgb, currentColor 70%, transparent); }
.rd-margin .rt-meter[data-level="2"] i.on, .rd-margin .rt-meter[data-level="3"] i.on { background: var(--rm-accent); }
.rd-margin .rt-age--text { min-width: 0; padding: 0 6px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
/* a long audience wraps inside the margin, and the type drops below it */
.rd-margin .rt-aside--live .rt-aside-age { flex-wrap: wrap; row-gap: 4px; }
.rd-margin .rt-aside--live .rt-age--text { max-width: 100%; height: auto; min-height: 22px; padding: 3px 6px; white-space: normal; line-height: 1.25; text-align: center; }
.rd-margin .rt-aside-link { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.rd-margin .rt-aside-link:hover, .rd-margin .rt-aside-link:focus-visible { border-bottom-color: currentColor; }
.rd-margin .rt-aside.is-test .rt-aside-foot { border-top-style: dotted; }

/* ---------------- panels: Outfit and Contents ---------------- */
.rd-panel {
  position: absolute; z-index: 12; top: calc(var(--bar-h) + 10px); right: 14px; width: 372px; max-height: calc(100% - var(--bar-h) - 28px);
  overflow: auto; scrollbar-width: thin; padding: 20px 20px 16px; border-radius: 14px;
  color: var(--rm-ch-fg); background: color-mix(in srgb, var(--rm-ch-bg) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--rm-ch-line); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .5);
  transform-origin: 90% 0; animation: rd-pop .22s var(--ease-out) both;
  --of-fg: var(--rm-ch-fg); --of-fg-2: var(--rm-ch-fg-2); --of-line: var(--rm-ch-line); --of-accent: var(--rm-accent);
  --of-sunk: color-mix(in srgb, var(--rm-ch-fg) 7%, transparent); --of-on-bg: var(--rm-ch-fg); --of-on-fg: var(--rm-ch-bg);
}
.rd--frame .rd-panel { width: 340px; padding: 16px 16px 12px; }
.rd-panel-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
.rd-panel-h h3 { margin: 0; font-family: 'Cinzel', var(--display); font-weight: 400; font-size: 15px; letter-spacing: .12em; }
.rd-panel-h span { font-family: var(--body); font-style: italic; font-size: 15px; color: var(--rm-ch-fg-2); }
@keyframes rd-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.rd-toc {
  position: absolute; z-index: 12; left: 0; top: var(--bar-h); bottom: 0; width: 360px; max-width: 86%;
  display: flex; flex-direction: column;
  color: var(--rm-ch-fg); background: color-mix(in srgb, var(--rm-ch-bg) 94%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--rm-ch-line); box-shadow: 20px 0 50px -20px rgba(0, 0, 0, .45);
  animation: rd-drawer .3s var(--ease-out) both;
}
@keyframes rd-drawer { from { transform: translateX(-100%); } to { transform: none; } }
.rd-toc-h { padding: 22px 24px 10px; }
.rd-toc-h h3 { margin: 0; font-family: 'Cinzel', var(--display); font-weight: 400; font-size: 15px; letter-spacing: .16em; }
.rd-toc-h p { margin: 4px 0 0; font-style: italic; font-size: 16px; color: var(--rm-ch-fg-2); }
.rd-toc-list { list-style: none; margin: 0; padding: 6px 12px 24px; overflow: auto; flex: 1 1 auto; scrollbar-width: thin; }
.rd-toc-list ol { list-style: none; margin: 0; padding: 0 0 0 16px; }
.rd-toc-list a {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 8px; text-decoration: none; cursor: pointer;
  font-family: var(--body); font-size: 17.5px; line-height: 1.3; color: var(--rm-ch-fg);
}
.rd-toc-list a:hover { background: color-mix(in srgb, var(--rm-ch-fg) 8%, transparent); }
.rd-toc-list a.current { background: color-mix(in srgb, var(--rm-accent) 18%, transparent); }
.rd-toc-list a.current::before { content: ''; flex: none; width: 6px; height: 6px; transform: rotate(45deg) translateY(-2px); background: var(--rm-accent); }
.rd-toc-list ol a { font-size: 16px; color: var(--rm-ch-fg-2); }

/* ---------------- loading and trouble ---------------- */
.rd-loading {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.rd-loading.done { opacity: 0; }
.rd-loading-in { text-align: center; color: var(--rm-ch-fg); }
.rd-loading-orn {
  width: 180px; height: 16px; margin: 0 auto 18px; background: var(--rm-ornament) center / contain no-repeat;
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100%; mask: linear-gradient(90deg, #000 40%, transparent 60%) 0 0 / 250% 100%;
  animation: rd-draw 1.6s var(--ease) infinite alternate;
}
@keyframes rd-draw { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.rd-loading-t { font-family: 'Cinzel', var(--display); font-size: 20px; letter-spacing: .08em; }
.rd-loading-s { margin-top: 6px; font-family: var(--body); font-style: italic; font-size: 17px; opacity: .7; }
.rd-loading-bar { width: 160px; height: 1px; margin: 16px auto 0; background: color-mix(in srgb, currentColor 22%, transparent); position: relative; overflow: hidden; }
.rd-loading-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--rm-accent); transition: width .2s linear; }

.rd-trouble {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; width: min(520px, 86%);
  padding: 34px 36px 30px; text-align: center; border-radius: 4px;
  background: var(--rm-paper); color: var(--rm-ink); box-shadow: var(--rd-sheet-shadow);
  background-image: var(--rm-tex-paper);
}
.rd-trouble-orn { width: 140px; height: 14px; margin: 0 auto 16px; background: var(--rm-ornament) center / contain no-repeat; }
.rd-trouble h3 { margin: 0 0 10px; font-family: 'Cinzel', var(--display); font-weight: 400; font-size: 20px; letter-spacing: .06em; color: var(--rm-accent); }
.rd-trouble p { margin: 0 0 18px; font-size: 19px; line-height: 1.5; color: var(--rm-ink-2); }
.rd-trouble .rd-btn { color: var(--rm-ink); border-color: color-mix(in srgb, var(--rm-ink) 30%, transparent); margin: 0 4px; }

/* ---------------- PDF ---------------- */
.rd-pdf {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; z-index: 2;
  padding: calc(var(--bar-h) + 26px) 0 calc(var(--foot-h) + 30px);
  scrollbar-width: thin; scrollbar-color: var(--rm-accent-soft) transparent;
}
.rd-pdf-col { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.rd-pdf-page {
  position: relative; flex: none; width: var(--pw); height: calc(var(--pw) * var(--ar, 1.414));
  background: var(--rm-paper); background-image: var(--rm-tex-paper); box-shadow: var(--rd-sheet-shadow); border-radius: 2px;
}
.rd-pdf-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px; }
.rd-pdf-page::after {
  content: attr(data-n); position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%);
  font-family: var(--body); font-style: italic; font-size: 14px; font-variant-numeric: oldstyle-nums; color: var(--rm-ch-fg-2);
}
.rd-pdf-page .rd-pdf-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--rm-ink-3); font-style: italic; font-size: 15px; }
.rd-pdf[data-tone="room"] canvas { mix-blend-mode: multiply; }
.rd-pdf[data-tone="room"][data-dark="1"] canvas { filter: invert(1) hue-rotate(180deg) brightness(.92); mix-blend-mode: screen; }
.rd-pdf[data-tone="sepia"] .rd-pdf-page { background: #F1E3C4; }
.rd-pdf[data-tone="sepia"] canvas { filter: sepia(.4) contrast(1.02); mix-blend-mode: multiply; }
.rd-pdf[data-tone="dark"] .rd-pdf-page { background: #111512; }
.rd-pdf[data-tone="dark"] canvas { filter: invert(.9) hue-rotate(180deg) sepia(.2); }
.rd-pdf[data-tone="original"] .rd-pdf-page { background: #fff; }
.rd-zoom { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--rm-ch-line); border-radius: 999px; padding: 2px; pointer-events: auto; }
.rd-zoom button { width: 28px; height: 26px; border: 0; background: transparent; color: var(--rm-ch-fg); cursor: pointer; border-radius: 999px; font-size: 16px; line-height: 1; }
.rd-zoom button:hover { background: color-mix(in srgb, var(--rm-ch-fg) 10%, transparent); }
.rd-zoom output { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.rd-pageinput { width: 46px; height: 24px; border-radius: 6px; border: 1px solid var(--rm-ch-line); background: transparent; color: var(--rm-ch-fg); text-align: center; font: inherit; letter-spacing: 0; }

/* ---------------- the audiobook: a bronze lyre ---------------- */
.rd-audio {
  position: absolute; inset: calc(var(--bar-h) + 18px) 24px calc(var(--foot-h) - 6px); z-index: 2;
  display: grid; overflow: auto; scrollbar-width: thin;
}
.au-panel {
  --bz-1: color-mix(in srgb, var(--rm-accent) 38%, #5A3A18);
  --bz-2: color-mix(in srgb, var(--rm-accent) 20%, #24160A);
  --bz-line: rgba(242, 214, 150, .34);
  --au-fg: #F4E6C6; --au-fg-2: rgba(244, 230, 198, .66);
  position: relative; margin: auto; width: min(1040px, 100%); display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 34px;
  padding: 34px 38px 30px; border-radius: 18px; color: var(--au-fg);
  background:
    radial-gradient(ellipse 60% 50% at 30% 0%, rgba(255, 226, 160, .2), transparent 70%),
    radial-gradient(ellipse 80% 60% at 85% 110%, rgba(0, 0, 0, .28), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 240, 205, .022) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .025) 3px 4px),
    linear-gradient(170deg, var(--bz-1), var(--bz-2) 70%);
  box-shadow: 0 0 0 1px rgba(20, 10, 2, .8), 0 0 0 3px var(--bz-2), 0 0 0 4px var(--bz-line), 0 40px 80px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 236, 190, .25);
}
.au-panel::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--bz-line); border-radius: 12px; pointer-events: none; }
.au-boss { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF2C8, #D9AE5A 40%, #6E4710 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.au-boss--tl { left: 4px; top: 4px; } .au-boss--tr { right: 4px; top: 4px; } .au-boss--bl { left: 4px; bottom: 4px; } .au-boss--br { right: 4px; bottom: 4px; }
.au-cover { position: relative; align-self: start; }
.au-cover-img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 6px; background: #1A1008;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 5px var(--bz-2), 0 0 0 6px var(--bz-line), 0 24px 40px -14px rgba(0, 0, 0, .7);
}
.au-cover-fallback { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: var(--rm-paper); color: var(--rm-ink); text-align: center; padding: 20px; font-family: 'Cinzel', var(--display); font-size: 22px; }
.au-credit { margin-top: 18px; text-align: center; font-style: italic; font-size: 16px; color: var(--au-fg-2); line-height: 1.4; }
.au-credit b { font-style: normal; font-family: var(--util); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; display: block; margin-bottom: 3px; color: var(--au-fg); }
.au-main { min-width: 0; display: flex; flex-direction: column; }
.au-runtime { margin-top: 10px; text-align: center; font-family: var(--util); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--au-fg-2); font-variant-numeric: tabular-nums; }
.au-kicker { font-family: var(--util); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--au-fg-2); }
.au-title { margin: 6px 0 2px; font-family: 'Cinzel', var(--display); font-weight: 400; font-size: 30px; letter-spacing: .03em; line-height: 1.15; text-wrap: balance; }
.au-author { font-style: italic; font-size: 21px; color: var(--au-fg-2); }
/* the lyre: seven strings between the arms, trembling while it plays */
.au-lyre { position: relative; height: 74px; margin: 16px 0 6px; }
.au-lyre svg.au-arms { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.au-strings { position: absolute; left: 50%; top: 13px; bottom: 7px; width: 132px; transform: translateX(-50%); display: flex; justify-content: space-between; }
.au-strings i { width: 1px; background: linear-gradient(to bottom, rgba(255, 238, 190, .9), rgba(255, 238, 190, .55)); transform-origin: 50% 50%; }
.au-panel.playing .au-strings i { animation: au-string .11s linear infinite alternate; }
.au-panel.playing .au-strings i:nth-child(2n) { animation-duration: .09s; }
.au-panel.playing .au-strings i:nth-child(3n) { animation-duration: .13s; }
@keyframes au-string { from { transform: translateX(-.6px) scaleX(1); } to { transform: translateX(.6px) scaleX(1.4); } }
.au-now { font-size: 19px; line-height: 1.3; min-height: 1.3em; text-align: center; }
.au-now small { display: block; font-family: var(--util); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--au-fg-2); margin-bottom: 4px; }
.au-scrub { display: grid; grid-template-columns: 58px 1fr 58px; gap: 12px; align-items: center; margin: 16px 0 8px; font-family: var(--util); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--au-fg-2); }
.au-scrub span:last-child { text-align: right; }
.au-range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
.au-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, #F1D48A var(--p, 0%), rgba(255, 236, 190, .18) var(--p, 0%)); }
.au-range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4D0, #E0B65C 50%, #8A5E1C); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.au-transport { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 6px 0 14px; }
.au-skip { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--bz-line); background: rgba(0, 0, 0, .12); color: var(--au-fg); cursor: pointer; display: grid; place-items: center; }
.au-skip svg { width: 26px; height: 26px; }
.au-skip b { position: absolute; font-family: var(--util); font-weight: 400; font-size: 9.5px; letter-spacing: .02em; top: 51%; left: 50%; transform: translate(-50%, -50%); }
.au-skip:hover { background: rgba(255, 236, 190, .1); }
.au-trk { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--au-fg-2); cursor: pointer; display: grid; place-items: center; }
.au-trk:hover { color: var(--au-fg); }
.au-trk svg { width: 20px; height: 20px; }
.au-play {
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #3A2408;
  background: radial-gradient(circle at 36% 28%, #FFF6D8 0 8%, transparent 26%), radial-gradient(circle at 50% 55%, #F2D48A, #D2A24A 60%, #8C5E1C 100%);
  box-shadow: 0 0 0 1px rgba(60, 36, 6, .8), 0 0 0 5px rgba(0, 0, 0, .18), 0 0 0 6px var(--bz-line), 0 10px 22px rgba(0, 0, 0, .45), inset 0 -3px 8px rgba(110, 71, 16, .5), 0 0 30px rgba(255, 210, 120, .25);
  transition: transform .15s var(--ease-out);
}
.au-play:active { transform: scale(.96); }
.au-play svg { width: 30px; height: 30px; }
.au-opts { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; font-family: var(--util); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--au-fg-2); }
.au-opt { display: flex; align-items: center; gap: 8px; }
.au-seg { display: inline-flex; border: 1px solid var(--bz-line); border-radius: 999px; padding: 2px; }
.au-seg button { border: 0; background: transparent; color: var(--au-fg-2); font: inherit; letter-spacing: .04em; text-transform: none; font-size: 12px; padding: 4px 8px; border-radius: 999px; cursor: pointer; }
.au-seg button[aria-pressed="true"] { background: rgba(255, 236, 190, .9); color: #3A2408; }
.au-seg button:hover:not([aria-pressed="true"]) { color: var(--au-fg); }
.au-sleep-left { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: #F1D48A; }
.au-list { margin-top: 16px; border-top: 1px solid var(--bz-line); max-height: 220px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 18px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 236, 190, .3) transparent; padding-top: 6px; }
.au-list ol { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.au-list li button {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: baseline; text-align: left;
  border: 0; background: transparent; color: var(--au-fg); padding: 7px 10px; border-radius: 8px; cursor: pointer; font-family: var(--body); font-size: 17px;
}
.au-list li button:hover { background: rgba(255, 236, 190, .08); }
.au-list li button .n { font-family: var(--util); font-size: 11px; letter-spacing: .06em; color: var(--au-fg-2); font-variant-numeric: tabular-nums; }
.au-list li button .d { font-family: var(--util); font-size: 11.5px; color: var(--au-fg-2); font-variant-numeric: tabular-nums; }
.au-list li button .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-list li.current button { background: rgba(255, 236, 190, .14); }
.au-list li.current .n { color: #F1D48A; }
.au-list li.done .t { color: var(--au-fg-2); }

/* In the podium's frame there is no room to scroll down to the chapters:
   the player becomes three columns (cover, instrument, chapters) that fill
   the page, and only the chapter list scrolls */
@media (min-width: 1101px) {
  .rd--frame .rd-audio { display: block; inset: calc(var(--bar-h) + 12px) 20px calc(var(--foot-h) - 2px); }
  .rd--frame .au-panel {
    width: 100%; height: 100%; min-height: 0; margin: 0; padding: 24px 28px 20px; column-gap: 30px; row-gap: 0;
    grid-template-columns: minmax(150px, 210px) minmax(300px, 1fr) minmax(220px, 320px);
    grid-template-rows: repeat(8, auto) minmax(0, 1fr); align-content: start;
  }
  .rd--frame .au-main { display: contents; }
  .rd--frame .au-cover { grid-column: 1; grid-row: 1 / -1; }
  .rd--frame .au-main > * { grid-column: 2; }
  .rd--frame .au-credit { font-size: 15px; }
  .rd--frame .au-title { font-size: 25px; }
  .rd--frame .au-author { font-size: 19px; }
  .rd--frame .au-lyre { height: 58px; margin: 10px 0 4px; }
  .rd--frame .au-scrub { margin: 12px 0 4px; }
  .rd--frame .au-transport { gap: 18px; margin: 4px 0 12px; }
  .rd--frame .au-play { width: 68px; height: 68px; }
  .rd--frame .au-skip { width: 44px; height: 44px; }
  .rd--frame .au-opts { gap: 10px 18px; }
  .rd--frame .au-list {
    grid-column: 3; grid-row: 1 / -1; align-self: stretch; min-height: 0; max-height: none; margin: 0;
    padding: 2px 0 18px 16px; border-top: 0; border-left: 1px solid var(--bz-line);
  }
  .rd--frame .au-list li button { font-size: 16px; padding: 6px 8px; grid-template-columns: 28px 1fr auto; gap: 8px; }
}

/* ---------------- HTML / embed ---------------- */
.rd-embed { position: absolute; left: 24px; right: 24px; top: calc(var(--bar-h) + 14px); bottom: 18px; z-index: 2; display: flex; flex-direction: column; }
.rd-embed-note {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-radius: 10px 10px 0 0;
  background: var(--rm-ch-bg); color: var(--rm-ch-fg-2); font-style: italic; font-size: 15.5px; border: 1px solid var(--rm-ch-line); border-bottom: 0;
  backdrop-filter: blur(10px);
}
.rd-embed-note a { color: var(--rm-ch-fg); font-family: var(--util); font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.rd-embed-note a:hover { text-decoration: underline; }
.rd-embed iframe { flex: 1 1 auto; width: 100%; border: 1px solid var(--rm-ch-line); border-radius: 0 0 10px 10px; background: #fff; box-shadow: var(--rd-sheet-shadow); }

/* ============================================================
   Room cards (rooms.roomCard / roomPicker)
   ============================================================ */
.rm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.rm-card {
  position: relative; display: flex; flex-direction: column; padding: 0; border: 0; cursor: pointer; text-align: left;
  background: transparent; color: inherit; font: inherit; border-radius: 10px;
  transition: transform .35s var(--ease-out), filter .35s var(--ease);
}
.rm-scene {
  position: relative; height: 128px; overflow: hidden; border-radius: 8px;
  background: var(--rs-wall, var(--rm-frame));
  box-shadow: 0 0 0 1px rgba(60, 40, 14, .35), 0 10px 22px -12px rgba(40, 24, 6, .55);
  transition: box-shadow .35s var(--ease);
}
.rm-scene-fx, .rm-scene-over { position: absolute; inset: 0; pointer-events: none; }
.rm-scene-over { z-index: 3; }
.rm-scene::after { z-index: 1; }
.rm-card[data-room="desertnight"] .rm-scene-fx { background-size: 400px 300px; animation: rm-twinkle 5s ease-in-out infinite alternate; }
@keyframes rm-twinkle { from { opacity: .7; } to { opacity: 1; } }
.rm-card[data-room="desertnight"] .rm-scene::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 24%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C60 16 110 20 170 30S300 12 400 24V60H0Z' fill='%23030807'/%3E%3Cpath d='M0 30C60 16 110 20 170 30S300 12 400 24' fill='none' stroke='%23C9AE7C' stroke-opacity='.3'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.rm-card[data-room="peristyle"] .rm-scene-over { background-size: cover; mix-blend-mode: multiply; opacity: .24; inset: -8%; transition: transform 2.4s var(--ease); }
.rm-card[data-room="peristyle"]:hover .rm-scene-over { transform: translate(2%, 1%) rotate(1deg); }
.rm-card[data-room="scriptorium"] .rm-scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 9% 18%, rgba(255, 214, 140, .55), rgba(255, 170, 80, .15) 18%, transparent 45%);
  animation: rs-flicker 5.3s ease-in-out infinite;
}
.rm-card[data-room="cell"] .rm-scene::after {
  content: ''; position: absolute; right: 7%; top: 9%; width: 20px; height: 30px; border-radius: 10px 10px 1px 1px;
  background: linear-gradient(#FFFFFF, #F7E9C4); box-shadow: 0 0 0 4px #D8D1C1, 0 0 30px 12px rgba(255, 248, 225, .6);
}
.rm-card[data-room="serapeum"] .rm-scene::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(212, 166, 80, .45); border-radius: 4px; pointer-events: none; }
.rm-card[data-room="pharos"] .rm-scene::after { content: ''; position: absolute; left: 0; right: 0; top: 72%; height: 1px; background: rgba(31, 95, 139, .2); }
.rm-page {
  position: absolute; z-index: 2; left: 14%; right: 14%; top: 14px; bottom: -18px; padding: 14px 18px 0; overflow: hidden;
  background-color: var(--rm-paper); background-image: var(--rm-tex-paper); color: var(--rm-ink);
  box-shadow: var(--rd-sheet-shadow); border-radius: 2px 2px 0 0;
  transition: transform .45s var(--ease-out);
}
[data-room="desertnight"] .rm-page { background-color: color-mix(in srgb, var(--rm-paper) 86%, transparent); }
[data-room="pharos"] .rm-page { border-top: 2px solid var(--rm-accent); }
.rm-kicker {
  text-align: center; font-family: 'Cinzel', var(--display); font-size: 8.5px; letter-spacing: .3em; color: var(--rm-accent);
  padding-bottom: 12px; margin-bottom: 8px; background: var(--rm-ornament) center bottom / 64px 7px no-repeat;
}
.rm-text {
  margin: 0; font-family: var(--rm-font); font-size: 12.5px; line-height: 1.5; text-align: justify; hyphens: auto; color: var(--rm-ink);
  -webkit-mask-image: linear-gradient(#000 40px, transparent 76px); mask-image: linear-gradient(#000 40px, transparent 76px);
}
[data-room="pharos"] .rm-text { font-size: 11px; line-height: 1.6; text-align: left; }
.rm-drop { float: left; font-family: 'Cinzel', var(--display); font-size: 36px; line-height: .8; margin: 3px 2px 0 -1px; color: var(--rm-accent); }
[data-room="pharos"] .rm-drop { font-family: var(--util); font-weight: 300; }
.rm-seal {
  position: absolute; right: 10px; top: 10px; z-index: 2; padding: 4px 9px 4px 22px; border-radius: 999px;
  font-family: var(--util); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #2A1A06;
  background: linear-gradient(180deg, #F6E2AA, #D6AF5E); box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.rm-seal::before { content: ''; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; transform: rotate(45deg); background: #6E4710; }
.rm-card[aria-pressed="true"] .rm-seal { opacity: 1; transform: none; }
.rm-label { display: flex; flex-direction: column; gap: 0; padding: 8px 4px 0; }
.rm-name { font-family: 'Cinzel', var(--display); font-size: 15px; letter-spacing: .06em; color: #2A1C10; }
.rm-line { font-family: var(--body); font-style: italic; font-size: 15px; line-height: 1.25; color: #6A5238; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-card:hover { transform: translateY(-3px); }
.rm-card:hover .rm-scene { box-shadow: 0 0 0 1px rgba(140, 100, 40, .55), 0 18px 32px -14px rgba(40, 24, 6, .6), 0 0 0 4px rgba(214, 175, 94, .18); }
.rm-card:hover .rm-page { transform: translateY(-3px); }
.rm-card[aria-pressed="true"] .rm-scene { box-shadow: 0 0 0 2px #B98F42, 0 0 0 5px rgba(214, 175, 94, .28), 0 14px 30px -12px rgba(40, 24, 6, .55); }
.rm-card:focus-visible { outline: none; }
.rm-card:focus-visible .rm-scene { box-shadow: 0 0 0 2px #B98F42, 0 0 0 5px rgba(214, 175, 94, .4); }

/* ============================================================
   Outfit controls (rooms.outfitControls). Colours come from --of-*:
   the reader's panel sets chrome colours, the podium sets parchment.
   ============================================================ */
.of { --of-fg: #2A1C10; --of-fg-2: #6A5238; --of-line: rgba(90, 60, 24, .25); --of-accent: #8C5A2B; --of-sunk: rgba(90, 60, 24, .07); --of-on-bg: #3A2616; --of-on-fg: #F6ECD6;
  display: flex; flex-direction: column; gap: 14px; color: var(--of-fg); font-family: var(--util); }
.of-row { display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: center; }
.of-label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--of-fg-2); }
.of-ctl { min-width: 0; }
.of-faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.of-face {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; cursor: pointer;
  border: 1px solid var(--of-line); border-radius: 8px; background: transparent; color: var(--of-fg);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.of-face:hover { background: var(--of-sunk); }
.of-face[aria-pressed="true"] { background: var(--of-on-bg); color: var(--of-on-fg); border-color: transparent; }
.of-face-aa { font-size: 23px; line-height: 1.1; }
.of-face-n { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.of-size { display: flex; align-items: center; gap: 8px; }
.of-step { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--of-line); background: transparent; color: var(--of-fg); cursor: pointer; font-family: var(--body); font-size: 13px; line-height: 1; }
.of-step-l { font-size: 20px; }
.of-step:hover { background: var(--of-sunk); }
.of-slide { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.of-range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; height: 20px; background: transparent; cursor: pointer; margin: 0; }
.of-range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--of-accent) var(--p, 50%), var(--of-line) var(--p, 50%)); }
.of-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--of-on-bg); border: 2px solid var(--of-on-fg); box-shadow: 0 0 0 1px var(--of-accent), 0 1px 3px rgba(0, 0, 0, .3); }
.of-range::-moz-range-track { height: 2px; background: var(--of-line); }
.of-val { flex: none; min-width: 44px; text-align: right; font-size: 11.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--of-fg-2); }
.of-seg { display: flex; border: 1px solid var(--of-line); border-radius: 999px; padding: 2px; gap: 2px; }
.of-seg-b {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 999px;
  background: transparent; color: var(--of-fg); cursor: pointer; font-family: var(--util); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.of-seg-b:hover { background: var(--of-sunk); }
.of-seg-b[aria-pressed="true"] { background: var(--of-on-bg); color: var(--of-on-fg); }
.of-measure-g { display: inline-block; height: 8px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; opacity: .8; }
.of-amb { display: flex; gap: 8px; align-items: center; }
.of-select-w { position: relative; flex: 1 1 auto; min-width: 0; }
.of-select-w::after { content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1px solid var(--of-fg-2); border-bottom: 1px solid var(--of-fg-2); transform: rotate(45deg); pointer-events: none; }
.of-select {
  -webkit-appearance: none; appearance: none; width: 100%; height: 32px; padding: 0 28px 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--of-line); background: var(--of-sunk); color: var(--of-fg); font-family: var(--body); font-size: 16px;
}
.of-select option { color: #1A1A1A; background: #F6F1E6; }
.of-play {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--of-line); background: transparent; color: var(--of-fg); font-family: var(--util); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.of-play-i { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.of-play[aria-pressed="true"] { background: var(--of-on-bg); color: var(--of-on-fg); border-color: transparent; }
.of-play[aria-pressed="true"] .of-play-i { width: 9px; height: 9px; border: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); animation: of-pulse 1.4s ease-in-out infinite; }
@keyframes of-pulse { 50% { opacity: .5; } }
.of-foot { display: flex; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--of-line); }
.of-reset { border: 0; background: transparent; color: var(--of-fg-2); cursor: pointer; font-family: var(--body); font-style: italic; font-size: 15px; padding: 6px 0 0; }
.of-reset:hover { color: var(--of-fg); text-decoration: underline; text-underline-offset: 3px; }
.of-select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* The reader's own panel is narrow: the faces sit two by two, and nothing
   may push the controls past the panel's edge */
.of--compact { gap: 12px; }
.of--compact .of-row { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
.of--compact .of-label { font-size: 10px; letter-spacing: .14em; }
.of--compact .of-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.of--compact .of-face { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 5px 7px; min-width: 0; }
.of--compact .of-face-aa { font-size: 19px; }
.of--compact .of-face-n { overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
.of--compact .of-val { min-width: 36px; }
.of--compact .of-seg-b { min-width: 0; padding: 0 6px; letter-spacing: .07em; }
.of--compact .of-measure-g { display: none; }

/* ============================================================
   The Athanasius podium (ui/athanasius.js), on the parchment
   ============================================================ */
.ath {
  --ath-ink: #2A1C10; --ath-ink-2: #6A5238; --ath-ink-3: #8C7250; --ath-line: rgba(120, 84, 34, .32); --ath-gold: #A9721C;
  position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--ath-ink); font-family: var(--body);
}
.ath-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 12px; border-bottom: 1px solid var(--ath-line); }
.ath-crumbs { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ath-crumbs li { display: flex; align-items: center; gap: 4px; }
.ath-crumbs li + li::before { content: ''; width: 18px; height: 1px; background: var(--ath-line); margin: 0 6px; }
.ath-crumb {
  display: inline-flex; align-items: baseline; gap: 8px; border: 0; background: transparent; cursor: pointer; padding: 5px 8px; border-radius: 6px;
  font-family: var(--util); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ath-ink-3);
}
.ath-crumb i { font-style: normal; font-family: 'Cinzel', var(--display); font-size: 13px; letter-spacing: .06em; color: var(--ath-gold); }
.ath-crumb:hover:not([disabled]) { color: var(--ath-ink); background: rgba(120, 84, 34, .07); }
.ath-crumb[aria-current="step"] { color: var(--ath-ink); }
.ath-crumb[aria-current="step"] i { color: var(--ath-ink); }
.ath-crumb[disabled] { cursor: default; opacity: .5; }
.ath-roomchip { display: flex; align-items: center; gap: 10px; font-size: 16px; font-style: italic; color: var(--ath-ink-2); white-space: nowrap; }
.ath-roomchip .sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); background: radial-gradient(circle, var(--sw-ink) 0 3px, transparent 3.5px), var(--sw-paper); }
.ath-link { border: 0; background: transparent; cursor: pointer; padding: 0; font-family: var(--util); font-style: normal; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ath-gold); }
.ath-link:hover { color: var(--ath-ink); text-decoration: underline; text-underline-offset: 3px; }
.ath-step { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(120, 84, 34, .45) transparent; padding: 14px 4px 6px; animation: ath-in .45s var(--ease-out) both; }
@keyframes ath-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ath-h { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0 0 12px; }
.ath-h h3 { margin: 0; font-family: 'Cinzel', var(--display); font-weight: 400; font-size: 24px; letter-spacing: .05em; line-height: 1.15; color: var(--ath-ink); }
.ath-h p { margin: 0; font-style: italic; font-size: 17px; color: var(--ath-ink-2); text-align: right; }
.ath-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--util); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--ath-line); background: transparent; color: var(--ath-ink);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.ath-btn:hover { background: rgba(120, 84, 34, .08); }
.ath-btn.solid { border-color: transparent; color: #F6ECD6; background: linear-gradient(180deg, #2E4A34, #0A2416); box-shadow: inset 0 1px 0 rgba(232, 211, 160, .25), 0 3px 10px rgba(10, 36, 22, .3); }
.ath-btn.solid:hover { background: linear-gradient(180deg, #37563D, #10301D); transform: translateY(-1px); }
.ath-btn svg { width: 16px; height: 16px; }

/* step 2: outfit it */
.ath-outfit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 26px; align-items: stretch; min-height: 100%; }
.ath-preview { position: relative; min-height: 330px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgba(60, 40, 14, .35), 0 14px 30px -14px rgba(40, 24, 6, .5); background: var(--rs-wall, var(--rm-frame)); }
.ath-preview .rs { border-radius: inherit; overflow: hidden; }
.ath-preview .rs-leaves-a { inset: -10%; }
.ath-pv-page {
  position: absolute; left: 0; right: 0; margin: 0 auto; top: 26px; bottom: 26px; width: var(--pv-w, 72%); z-index: 2;
  background-color: var(--rm-paper); background-image: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 252, 240, .22), transparent 75%), var(--rm-tex-paper);
  box-shadow: var(--rd-sheet-shadow); border-radius: 2px; overflow: hidden; transition: width .35s var(--ease);
}
[data-room="desertnight"] .ath-pv-page { background-color: color-mix(in srgb, var(--rm-paper) 84%, transparent); backdrop-filter: blur(3px); }
[data-room="pharos"] .ath-pv-page { border-top: 2px solid var(--rm-accent); }
[data-room="serapeum"] .ath-pv-page::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(212, 166, 80, .45); pointer-events: none; }
.ath-pv-in { position: absolute; inset: 0; padding: 26px 30px; overflow: hidden; }
.ath-pv-in::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--rm-paper)); }
.ath-pv-rh { text-align: center; font-family: 'Cinzel', var(--display); font-size: 10px; letter-spacing: .18em; color: var(--rm-ink-3); margin-bottom: 4px; }
.ath-pv-cite { margin-top: 1.1em; font-family: var(--util); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--rm-ink-3); text-align: right; }
.ath-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ath-controls .of { flex: 1 1 auto; }
.ath-controls .of-foot { border-top-color: var(--ath-line); }
.ath-next { display: flex; gap: 10px; align-items: center; flex: none; }
.ath-h-line { margin: 2px 0 0 !important; text-align: left !important; }
.ath-controls .of { gap: 11px; }

/* step 3: the shelves */
.ath-shelves { display: flex; flex-direction: column; min-height: 100%; }
.ath-tools { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ath-search { position: relative; flex: 1 1 auto; max-width: 440px; }
.ath-search svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--ath-ink-3); }
.ath-search input {
  width: 100%; height: 40px; padding: 0 14px 0 40px; border-radius: 999px; border: 1px solid var(--ath-line);
  background: rgba(255, 252, 240, .55); color: var(--ath-ink); font-family: var(--body); font-size: 18px; outline: none;
  box-shadow: inset 0 1px 3px rgba(90, 60, 20, .12);
}
.ath-search input::placeholder { color: var(--ath-ink-3); font-style: italic; }
.ath-search input:focus { border-color: rgba(169, 114, 28, .7); background: rgba(255, 252, 240, .85); box-shadow: 0 0 0 3px rgba(214, 175, 94, .25); }
.ath-count { font-style: italic; font-size: 16px; color: var(--ath-ink-2); white-space: nowrap; }
.ath-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ath-line); flex: none;
  -webkit-mask: linear-gradient(90deg, #000 94%, transparent); mask: linear-gradient(90deg, #000 94%, transparent); }
.ath-tabs::-webkit-scrollbar { display: none; }
.ath-tab {
  flex: none; height: 30px; padding: 0 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--ath-line); background: transparent;
  font-family: var(--util); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ath-ink-2); white-space: nowrap;
}
.ath-tab:hover { color: var(--ath-ink); background: rgba(120, 84, 34, .07); }
.ath-tab[aria-selected="true"] { background: #2A1C10; color: #F1E6CC; border-color: transparent; }
.ath-tab small { font-size: 10px; opacity: .6; margin-left: 5px; letter-spacing: .04em; }
.ath-blurb { margin: 8px 0 12px; font-style: italic; font-size: 16.5px; color: var(--ath-ink-2); max-width: 70ch; }
.ath-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 24px 20px; padding: 14px 24px 24px 2px; }
.ath-book { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ath-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 0; cursor: pointer; border-radius: 2px 4px 4px 2px; overflow: hidden;
  background: #16321F; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 1px rgba(40, 24, 6, .35), 0 10px 18px -8px rgba(40, 24, 6, .6), 3px 3px 0 -1px #E6D4AE, 3px 3px 0 0 rgba(90, 60, 20, .35);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.ath-cover img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s var(--ease); }
.ath-cover img.loaded { opacity: 1; }
.ath-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .12) 4%, transparent 9%, transparent 94%, rgba(0, 0, 0, .12)); pointer-events: none; }
.ath-cover-t { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-family: 'Cinzel', var(--display); font-size: 13px; line-height: 1.3; color: #E8D3A0; }
.ath-book:hover .ath-cover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 1px rgba(40, 24, 6, .35), 0 18px 26px -10px rgba(40, 24, 6, .65), 3px 3px 0 -1px #E6D4AE, 3px 3px 0 0 rgba(90, 60, 20, .35); }
.ath-book .gold-plus { position: absolute; right: -9px; top: -9px; --s: 30px; z-index: 2; opacity: .96; }
.ath-bt { margin: 0; font-family: var(--body); font-weight: 600; font-size: 15.5px; line-height: 1.2; color: var(--ath-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.ath-ba { margin: -4px 0 0; font-style: italic; font-size: 14.5px; line-height: 1.2; color: var(--ath-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ath-more { display: flex; justify-content: center; padding: 6px 0 16px; }
.ath-empty { padding: 40px 0; text-align: center; font-style: italic; font-size: 19px; color: var(--ath-ink-2); }
.ath-sk { aspect-ratio: 2 / 3; border-radius: 3px; background: linear-gradient(100deg, rgba(120, 84, 34, .1) 30%, rgba(120, 84, 34, .18) 50%, rgba(120, 84, 34, .1) 70%) 0 0 / 300% 100%; animation: ath-sk 1.4s linear infinite; }
@keyframes ath-sk { to { background-position: -150% 0; } }

/* ---------------- narrow screens ---------------- */
@media (max-width: 1100px) {
  .rd-rooms { gap: 5px; padding: 3px 7px; }
  .rd-swatch { width: 17px; height: 17px; }
  .rd-btn .lbl { display: none; }
  .rd-btn:not(.rd-dl) { width: 34px; padding: 0; justify-content: center; }
  .rd-author { display: none; }
  .au-panel { grid-template-columns: 1fr; padding: 26px 22px; gap: 18px; }
  .au-cover { width: 220px; justify-self: center; }
  .au-kicker, .au-title, .au-author { text-align: center; }
  .rm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ath-outfit { grid-template-columns: 1fr; }
  .ath-preview { min-height: 280px; }
  .ath-h { flex-direction: column; gap: 4px; }
  .ath-h p { text-align: left; }
}
@media (max-width: 760px) {
  .rd-bar { gap: 10px; padding: 0 10px; }
  .rd-rooms { display: none; }
  .rd-dl .lbl-long { display: none; }
  .rd-foot-l { display: none; }
  .ath-crumb span { display: none; }
  .ath-roomchip span.nm { display: none; }
}
.rd--frame .rd-rooms { gap: 5px; padding: 3px 8px; }
.rd--frame .rd-swatch { width: 16px; height: 16px; }
.rd--frame .rd-btn { height: 30px; }
.rd--frame .rd-btn.icon { width: 30px; }
.rd--frame .rd-btn:not(.rd-dl) .lbl { display: none; }
.rd--frame .rd-btn:not(.rd-dl) { width: 30px; padding: 0; justify-content: center; }
.rd--frame .rd-foot { padding: 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .rs-glow, .rs-deco, .rs-leaves, .rs-deco::before, .au-strings i, .rm-scene-fx { animation: none !important; }
}