/* A reading stack grounded by contact shadows within the book's environment.
   The full-screen scenery remains still while the reading surfaces move. */
:root {
  --back: #cbd2cf;
  --face: #e1e4e1;
  --ink: #29332f;
  --muted: #4d5c55;
  --rule: #8c795b45;
  --app-width: 760px;
  --header-height: 70px;
  --top-space: 28px;
  --bottom-space: 66px;
  --slate-pad-top: 42px;
  --slate-pad-side: 30px;
  --slate-pad-bottom: 30px;
  --side-space: 20px;
  --body-line: 1.5;
  --scene-horizon: calc(max(var(--top-space), env(safe-area-inset-top)) + var(--header-height));
}

body {
  background: #cbd2cf;
  color: var(--ink);
}

.reading-room {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 3% 0%, #f6faf8b0, transparent 62%),
    radial-gradient(ellipse at 95% 100%, #99805a33, transparent 70%),
    linear-gradient(180deg, #cad7d1, #c2cbc6 30%, #a4afa8);
}

.table-grain {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: .28;
}

.table-joint {
  position: absolute;
  top: var(--scene-horizon);
  height: 85%;
  width: 2px;
  background: #8e795322;
  box-shadow: 1px 0 1px #fff6dc70;
  transform: rotate(11deg);
  clip-path: polygon(0 0,100% 0,75% 22%,100% 37%,60% 58%,100% 72%,75% 100%,0 100%);
}
.table-joint-left { left: calc(50% - 540px); }
.table-joint-right { left: calc(50% + 510px); transform: rotate(-8deg); }

.daylight {
  position: absolute;
  inset: -25%;
  transform: rotate(-25deg);
  background: linear-gradient(90deg, transparent 13%, #fff9e53d 20%, #fffae92e 37%, transparent 46%, transparent 67%, #8d785418 76%, transparent 85%);
  filter: blur(18px);
}

.table-front {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 25px;
  border-top: 1px solid #f8ecd385;
  background: linear-gradient(#ae99763b, #9d88693b);
  box-shadow: 0 -1px 2px #927a4c12;
  clip-path: polygon(0 3%,17% 8%,38% 0,64% 8%,84% 2%,100% 6%,100% 100%,0 100%);
}

.reader-app {
  padding: max(var(--top-space), env(safe-area-inset-top)) var(--side-space) max(var(--bottom-space), env(safe-area-inset-bottom));
  z-index: 1;
  isolation: isolate;
}

.linen-underlay {
  position: absolute;
  z-index: -1;
  top: calc(max(var(--top-space), env(safe-area-inset-top)) + var(--header-height) + 18px);
  bottom: calc(max(var(--bottom-space), env(safe-area-inset-bottom)) - 20px);
  left: 18px;
  right: 20px;
  transform: rotate(-1.4deg);
  background:
    repeating-linear-gradient(0deg, #faf3df1c 0 1px, #99866a16 1px 2px, transparent 2px 3px),
    repeating-linear-gradient(90deg, #f9edcf2b 0 1px, #ae9b7c20 1px 2px, transparent 2px 3px),
    linear-gradient(115deg, #b7bcb0, #a6ad9f 58%, #929d8f);
  box-shadow: 1px 2px 2px #77604226, 4px 7px 12px #80674614;
}

.linen-underlay::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed #77644844;
  box-shadow: 0 0 0 2px #eddfbf22;
}

.linen-underlay span {
  position: absolute;
  bottom: -5px;
  left: 1px;
  right: 1px;
  height: 8px;
  background: repeating-linear-gradient(90deg, #b5a17a99 0 1px, transparent 1px 3px, #c6b48f99 3px 5px, transparent 5px 7px);
  clip-path: polygon(0 0,100% 0,100% 80%,86% 60%,75% 90%,56% 67%,34% 100%,15% 60%,0 80%);
}

.reader-header {
  color: #293e33;
  align-items: flex-start;
  z-index: 2;
}
.passage-control {
  min-height: 58px;
  gap: 5px;
  text-shadow: 0 1px 0 #fff5dc8c;
}
.reader-header .book-name {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.location-line {
  margin-top: 0;
  color: #40594b;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .025em;
}
.passage-control:hover .book-name { color: #29291f; }
.passage-control:focus-visible { outline-offset: 5px; }

.slate-stage {
  overflow: visible;
  filter: none;
}
.slate-stage::before { content: none; }
.stone-surface, .control-dialog { background: none; }
.slate {
  filter: drop-shadow(1px 2px 1px #5641254d) drop-shadow(3px 6px 4px #725a3729);
  gap: 24px;
  isolation: isolate;
}
.stone-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.stone-art svg { display: block; width: 100%; height: 100%; }
.scripture {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
.scripture .verse { grid-template-columns: var(--verse-gutter, 2.2ch) minmax(0, 1fr); column-gap: 9px; }
.scripture .verse + .verse { margin-top: .65em; }
.scripture .verse + .starts-paragraph { margin-top: 1.05em; }
.verse-number { color: #53665b; font-size: .48em; padding-top: .32em; white-space:nowrap; overflow-wrap:normal; word-break:normal; font-variant-numeric:tabular-nums; text-align:right; }
html[lang=zh-Hans] .scripture { letter-spacing: .025em; }
.slate-footer {
  position: relative;
  color: var(--muted);
  font-size: 13px;
  min-height: 26px;
  padding-top: 10px;
  border-top: 1px solid #8c795b30;
}
.source-control { min-width: 90px; }
.gesture-feedback { color: #544831; background: #e0d1b4; }
.loading-overlay { inset: 16px 14px; background: #e1e4e1; }

/* Base panel sizing; independent interface surfaces are defined below. */
.control-dialog {
  isolation: isolate;
  width: min(calc(100vw - 2 * var(--side-space)), calc(var(--app-width) - 2 * var(--side-space)));
  padding: 50px 30px 36px;
  color: var(--ink);
  filter: drop-shadow(1px 3px 1px #65503245) drop-shadow(5px 10px 8px #59462630);
}
.control-dialog::backdrop { background: #65543d5c; backdrop-filter: blur(3px); }
.navigation-dialog {
  top: calc(max(var(--top-space), env(safe-area-inset-top)) + var(--header-height));
  bottom: max(var(--bottom-space), env(safe-area-inset-bottom));
  padding: 38px 24px 32px;
}
.navigation-dialog::backdrop { background: #ad96720d; backdrop-filter: none; }
.close-dialog { top: 13px; right: 11px; color: #79674d; font-size: 28px; }
.passage-steps { padding: 5px 8px 13px; gap: 18px; }
.passage-steps button { min-height: 64px; font-size: 15px; color: var(--muted); }
.passage-steps button span+span { font-size: 28px; color: var(--ink); }
.passage-steps button[aria-pressed=true] span+span { border-color: #8b6942; }
.picker-section { margin-top: 14px; }
.number-grid { column-gap: 0; row-gap: 2px; }
.number-grid button { font-size: 20px; }
.number-grid button:hover { background: #8c795b18; }
.number-grid button[aria-pressed=true] {
  background: #425f51;
  color: #f7faf7;
  box-shadow: inset 0 1px 2px #392c1c5c, 0 1px 0 #fff4d5b3;
  border-radius: 2px;
}
.picker-help { margin: 14px 4px 18px; font-size: 14px; color: var(--muted); }
.navigation-reading { padding: 15px 4px 0; font-size: 16px; }
.language-options { margin: 0 0 17px; gap: 24px; }
.language-options button { font-size: 18px; }
.language-options button[aria-pressed=true]::after { background: #8b6942; height: 1px; }
.nav-size-section > label { margin-bottom: 11px; }
.nav-size-control { font-size: 13px; }
.slider-wrap output { font-size: 14px; }
input[type=range] { accent-color: #425f51; }
input[type=range]::-webkit-slider-runnable-track { background: #8b76574d; }
input[type=range]::-webkit-slider-thumb { background: #425f51; box-shadow: 0 1px 0 #fff5dc; }
input[type=range]::-moz-range-track { background: #8b76574d; }
input[type=range]::-moz-range-thumb { background: #425f51; }
.navigation-extra { margin: 25px 4px 0; font-size: 13px; }
.text-action { color: #365744; }
.dialog-heading h1 { font-size: 27px; }
.primary-button { background: #425f51; color: #f7faf7; border-radius: 2px; }
input[type=checkbox] { accent-color: #425f51; }
.toast { background: #5e4d36; color: #fff7e5; box-shadow: 1px 3px 10px #715c3933; }

@media (min-width: 700px) {
  :root {
    --top-space: 34px;
    --header-height: 82px;
    --bottom-space: 76px;
    --side-space: 32px;
    --slate-pad-top: 56px;
    --slate-pad-side: 52px;
    --slate-pad-bottom: 34px;
  }
  .reader-header .book-name { font-size: 30px; }
  .location-line { font-size: 16px; }
  .linen-underlay { left: 18px; right: 3px; bottom: calc(var(--bottom-space) - 22px); }
  .slate-footer { font-size: 14px; }
  .control-dialog { padding: 56px 52px 40px; }
  .navigation-dialog { padding: 43px 48px 38px; }
  .close-dialog { top: 16px; right: 19px; }
  .passage-steps { padding-bottom: 16px; }
  .passage-steps button { font-size: 18px; min-height: 68px; }
  .passage-steps button span+span { font-size: 32px; min-width: 60px; }
  .number-grid { row-gap: 6px; column-gap: 14px; }
  .number-grid button { width: 52px; min-width: 52px; height: 48px; font-size: 23px; }
  .picker-help { font-size: 16px; margin: 17px 4px 22px; }
  .navigation-reading { font-size: 18px; padding-top: 18px; }
  .language-options button { font-size: 20px; min-height: 46px; }
  .language-options { gap: 36px; margin-bottom: 20px; }
  .nav-size-section > label { margin-bottom: 13px; }
  .navigation-extra { margin-top: 28px; }
}

@media (max-width: 374px) {
  :root { --side-space: 14px; --slate-pad-side: 25px; }
  .linen-underlay { left: 12px; right: 14px; }
  .navigation-dialog { padding-left: 20px; padding-right: 20px; }
  .scripture .verse { grid-template-columns: var(--verse-gutter, 2.2ch) minmax(0, 1fr); column-gap: 7px; }
}
@media (max-width: 359px) { .number-grid { grid-template-columns: repeat(5, minmax(44px, 1fr)); } }

@media (max-height: 740px) {
  :root { --top-space: 18px; --header-height: 62px; --bottom-space: 48px; --slate-pad-top: 32px; --slate-pad-bottom: 25px; }
  .reader-header .book-name { font-size: 26px; }
  .slate { gap: 16px; }
  .navigation-dialog { padding-top: 34px; padding-bottom: 25px; }
  .passage-steps { padding-top: 2px; padding-bottom: 10px; }
  .passage-steps button { min-height: 58px; }
  .number-grid { row-gap: 0; }
  .picker-help { margin-top: 10px; margin-bottom: 14px; }
  .navigation-reading { padding-top: 12px; }
  .language-options { margin-bottom: 12px; }
  .navigation-extra { margin-top: 20px; }
}

@media (max-height: 480px) {
  :root { --top-space: 8px; --header-height: 48px; --bottom-space: 28px; --slate-pad-top: 22px; --slate-pad-bottom: 19px; }
  .reader-header .book-name { font-size: 22px; }
  .passage-control { min-height: 44px; gap: 1px; }
  .location-line { font-size: 13px; }
  .slate { gap: 9px; }
  .slate-footer { font-size: 12px; min-height: 20px; padding-top: 5px; }
  .scripture .verse + .verse { margin-top: .5em; }
  .scripture .verse + .starts-paragraph { margin-top: .75em; }
  .linen-underlay { bottom: 16px; transform: rotate(-.7deg); }
  .table-front { height: 10px; }
  .navigation-dialog { top: 10px; bottom: 14px; padding-top: 36px; }

}

@media (prefers-reduced-motion: reduce) {
  .daylight, .linen-underlay, .table-grain { animation: none; }
}

/* v10: explicit navigation, neutral limestone, and a visible chapter stack. */
/* Keep the authored motifs (above y=510 in the 600-unit scene) in the header. */
.distant-hills { position:absolute;inset:0 0 auto;height:calc(var(--scene-horizon) * 1.15);pointer-events:none; }
.distant-hills svg {display:block;width:100%;height:100%;}
.book-picker-row {display:flex;flex-direction:column;gap:7px;margin:10px 8px 16px;font:16px/1.4 var(--sans);}
.book-picker-row select {width:100%;min-height:48px;padding:8px 34px 8px 12px;border:1px solid #718579;border-radius:5px;color:var(--ink);background:#edf1eb;font:17px/1.4 var(--sans);}
.verse-prefix {display:block;font-size:.76em;line-height:1.5;color:var(--muted);margin-bottom:.6em;}
.reader-header .book-name {font-size:clamp(19px,4.7vw,30px);}
.reader-header .book-heading {min-width:0;}
.reader-header .passage-control {white-space:normal;max-width:46%;flex-shrink:0;}
.reading-room::after {content:'';position:absolute;inset:var(--scene-horizon) -10% 0;background:linear-gradient(150deg,#cbd0c7,#aeb9af);border-top:2px solid #e3e8de;box-shadow:0 -8px 28px #52695b20;}
.reader-header {display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;}
.book-heading {display:flex;flex-direction:column;gap:4px;text-align:left;}
.passage-control {display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:8px 14px;border:1px solid #647c6e;background:#edf2eb;box-shadow:0 2px 0 #7a8b7c40;border-radius:6px;font:16px/1.3 var(--sans);text-shadow:none;white-space:nowrap;color:#293e33;}
.passage-control:hover {background:#fafcf9;}
.slate-heading {flex-shrink:0;font:17px/1.4 var(--sans);color:#3f5448;border-bottom:1px solid #65796b35;padding-bottom:10px;}
.slate {gap:17px;filter:drop-shadow(1px 3px 1px #3d51414d) drop-shadow(4px 9px 6px #3d514129);}
.stone-stack {position:absolute;inset:0;z-index:0;pointer-events:none;}
.stack-layer {position:absolute;inset:0;isolation:isolate;filter:drop-shadow(0 2px 1px #34483d50);}
.reading-position {position:absolute;left:var(--side-space);right:var(--side-space);bottom:calc(var(--bottom-space) - 43px);display:flex;justify-content:space-between;gap:8px;color:#344c3f;font:13px/1.4 var(--sans);}

.slate-footer {border-color:#65796b35;}
@media (min-height:741px) {.slate {--slate-pad-top:30px;}}
@media (max-width:374px) {.reader-header .book-name{font-size:23px;}.passage-control{font-size:15px;padding:8px 10px;}.slate-heading{font-size:15px;}}
@media (max-height:480px) {.slate{gap:8px;--slate-pad-top:20px;}.slate-heading{font-size:14px;padding-bottom:5px;}.reading-position{bottom:calc(var(--bottom-space) - 33px);}.reader-header{padding-bottom:4px;}}

/* The scenery carries book identity; the reading surface stays quiet. */
.distant-hills{opacity:.7}.distant-hills svg{object-fit:cover}
.language-section{display:grid;gap:10px;margin-bottom:20px}
.language-section label{font:16px/1.4 var(--sans);color:var(--ink)}
#translation-select,#ui-language{font:17px/1.4 var(--sans);color:var(--ink);background:#edf1eb;border:1px solid #718579;border-radius:5px;padding:10px 34px 10px 12px;min-height:48px;width:100%;max-width:100%;touch-action:manipulation}
#translation-select:focus-visible,#ui-language:focus-visible{outline:3px solid #385b45;outline-offset:3px}

/* Interface panels are separate from the physical scripture surface. */
.control-dialog{background:#f6f8f3;border:1px solid #aab9ad;border-radius:12px;box-shadow:0 20px 70px #20362b40;filter:none;font:17px/1.5 var(--sans);width:min(calc(100vw - 32px),640px);padding:60px 24px 28px;max-height:90dvh}
.control-dialog::backdrop,.navigation-dialog::backdrop{background:#253d3559;backdrop-filter:blur(3px)}
.navigation-dialog{inset:0;margin:auto;height:min(84dvh,820px);max-height:84dvh;padding:0;overflow:hidden}
.navigation-dialog[open]{display:flex;flex-direction:column}
.navigation-title{flex:none;margin:0;padding:20px 72px 18px 24px;border-bottom:1px solid #c5d0c5;font:600 22px/1.4 var(--sans)}
.navigation-scroll{flex:1;min-height:0;height:auto;padding:20px 24px 28px;scrollbar-width:thin}
.navigation-scroll::-webkit-scrollbar{display:block;width:6px}.navigation-scroll::-webkit-scrollbar-thumb{background:#aab9ad;border-radius:3px}
.control-dialog .close-dialog{top:12px;right:12px;color:#354d3e;background:#e8eee6;border-radius:6px;min-width:44px;min-height:44px;font-size:28px}
.control-dialog .number-grid{grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:8px}
.control-dialog .number-grid button{width:100%;height:48px;min-width:44px;border:1px solid #b8c7ba;border-radius:6px;background:#fff;font:20px/1 var(--sans);color:#30493a}
.control-dialog .number-grid button[aria-pressed=true]{background:#304d3b;border-color:#304d3b;color:white;box-shadow:none}
.control-dialog .number-grid button:hover{background:#e2ebdf}.control-dialog .number-grid button[aria-pressed=true]:hover{background:#3e5c48}
.control-dialog .passage-steps{gap:12px;padding:0 0 16px;border-bottom:1px solid #c5d0c5}
.control-dialog .passage-steps button{flex-direction:row;justify-content:center;gap:12px;min-height:52px;padding:8px;border:1px solid #b8c7ba;border-radius:6px;background:#fff;font:17px/1.4 var(--sans)}
.control-dialog .passage-steps button[aria-pressed=true]{background:#e2ebdf;border-color:#56715e}
.control-dialog .passage-steps button span+span{font:600 22px/1.4 var(--sans);padding:0;border:0;min-width:0}
.control-dialog .book-picker-row{margin-bottom:20px}.control-dialog .text-action{font-family:var(--sans)}
@media(max-width:600px){.navigation-dialog{width:100%;max-width:100%;height:90dvh;max-height:90dvh;inset:auto 0 0;margin:0;border-radius:16px 16px 0 0;border-bottom:0}.navigation-scroll{padding:16px 20px max(24px,env(safe-area-inset-bottom))}.navigation-title{padding-left:20px;font-size:21px}}

/* Passage navigation has one purpose and one explicit commit action. */
.reader-app{grid-template-rows:auto minmax(0,1fr)}
.reader-header{min-height:var(--header-height);flex-wrap:wrap;text-align:left}
.reader-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reader-header .passage-control{max-width:none;min-width:0;font-size:1rem}
.reader-settings{min-height:48px;padding:8px 10px;font-size:1rem;border-radius:6px;text-decoration:underline;text-underline-offset:5px}
.navigation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:12px 24px;border-bottom:1px solid #c5d0c5}
.navigation-heading h1{margin:0;font:600 1.25rem/1.4 var(--sans)}
.navigation-heading button{min-width:44px;min-height:44px;padding:8px 12px;background:#e8eee6;border-radius:6px;font-size:1rem;flex-shrink:0}
.picker-context{flex:none;padding:12px 24px 8px}
.picker-book-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.picker-book-row h2{margin:0;font:600 1.35rem/1.4 var(--serif);flex:1 0 auto;max-width:100%;overflow-wrap:break-word}
.picker-context .text-action,.picker-actions .text-action{font:400 1rem/1.4 var(--sans);min-height:44px;text-decoration:underline;text-underline-offset:4px}
.picker-book-row .text-action{flex-shrink:0;margin-left:auto}
#picker-title{margin:6px 0 0;color:#4b6054;font:400 1rem/1.4 var(--sans)}
#picker-title:focus-visible{outline:2px solid #56715e;outline-offset:3px}
.navigation-scroll{padding:12px 24px 24px}
.picker-actions{flex:none;border-top:1px solid #c5d0c5;padding:8px 24px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background:#f6f8f3}
.picker-actions .text-action{align-self:flex-end;text-align:right}
.picker-actions .primary-button{border-radius:6px;min-height:52px;font:600 1.0625rem/1.4 var(--sans);color:white;background:#304d3b;overflow-wrap:anywhere}
.control-dialog .number-grid{grid-template-columns:repeat(auto-fit,minmax(max(48px,3.2rem),1fr))}
.control-dialog .number-grid button{height:auto;min-height:48px;padding:10px 2px;font-size:1.25rem;line-height:1.2}
.control-dialog .number-grid button[aria-pressed=true]{outline:2px solid #304d3b;outline-offset:2px;font-weight:700}
.book-group h3{font:600 1rem/1.4 var(--sans);color:#4b6054;margin:8px 0 12px}
.book-group+.book-group{margin-top:28px}
.book-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:8px}
.book-list button{min-height:48px;border:1px solid #b8c7ba;border-radius:6px;background:white;text-align:left;padding:12px;font:400 1.0625rem/1.4 var(--sans);overflow-wrap:anywhere}
.book-list button[aria-pressed=true]{background:#304d3b;color:white;font-weight:600}
.book-list button:hover{border-color:#304d3b}
.settings-dialog select{max-width:100%;font-size:1rem}
@media(max-width:600px){.navigation-dialog{height:96dvh;max-height:96dvh}.navigation-heading{padding:8px 20px}.picker-context{padding:8px 20px}.navigation-scroll{padding:12px 20px 20px}.picker-actions{padding-left:20px;padding-right:20px}.reader-header{gap:4px 10px}}
@media(max-height:480px){.navigation-dialog{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);inset:6px 0;margin:auto}.navigation-heading{padding-top:0;padding-bottom:0}.picker-context{padding-top:0;padding-bottom:0}.picker-book-row h2{font-size:1.1rem}.picker-actions{flex-direction:row;align-items:center;padding-top:6px;padding-bottom:6px}.picker-actions .primary-button{flex:1}.picker-actions .text-action{align-self:center}}

.testament-jumps{display:flex;gap:8px;margin-top:8px}.testament-jumps button{min-height:44px;padding:8px 16px;border:1px solid #b8c7ba;border-radius:6px;background:white;font-size:1rem}.book-group h3:focus-visible{outline:2px solid #56715e;outline-offset:3px}

/* On constrained screens, scroll the book heading instead of losing the actions. */
.navigation-scroll{padding:0 24px 24px;scroll-padding-top:var(--picker-context-height,0px)}
.picker-context{position:sticky;top:0;z-index:2;background:#f6f8f3;padding:12px 0 16px}
.navigation-dialog.scroll-picker-context .picker-context{position:static}
.navigation-dialog.scroll-picker-context .navigation-scroll{scroll-padding-top:12px}
@media(max-width:600px){.navigation-scroll{padding:0 20px 20px}.picker-context{padding:8px 0 16px}}
@media(max-height:480px){.picker-context{padding:4px 0 12px}}

/* The book's environment spans the viewport; only the reading stack moves. */
.reading-room{background:linear-gradient(155deg,var(--scene-sky,#e5eae1) 10%,var(--scene-ground,#bdc8bd) 100%)}
.reading-room::after{inset:0;border:0;box-shadow:none;background:linear-gradient(180deg,transparent 35%,var(--scene-ground,#bdc8bd) 100%);pointer-events:none}
.reading-room .distant-hills{inset:0;height:100%;opacity:1;mask-image:linear-gradient(90deg,transparent 5%,#000 42%)}
.reading-room .distant-hills svg{position:absolute;width:min(96vw,135vh);height:auto;aspect-ratio:650/600;right:-4vw;top:-5vh;opacity:.65;mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
.reading-room .distant-hills svg[data-kind=object]{width:min(70vw,92vh);right:0;top:-7vh;opacity:.52}
.reading-room .distant-hills svg[data-motif=MAT]{top:-15vh}
.reading-room .table-grain{opacity:.09}
.reading-room .daylight{inset:0;transform:none;filter:none;background:radial-gradient(ellipse at 35% 0%,#f6f7ef8c,transparent 65%)}
.slate{filter:drop-shadow(0 2px 1px #34483d40) drop-shadow(3px 9px 8px #34483d26)}
@media(max-width:600px){
 .reading-room .distant-hills{mask-image:linear-gradient(90deg,transparent,#000 30%)}
 .reading-room .distant-hills svg{width:130vw;right:-14vw;top:-4vw}
 .reading-room .distant-hills svg[data-kind=object]{width:115vw;right:-8vw;top:-13vw}
 .reading-room .distant-hills svg[data-motif=MAT]{top:-24vw}
 .reading-room .distant-hills svg[data-motif=LUK]{right:-40vw;top:-6vw}
}
@media(max-height:480px) and (min-width:601px){.reading-room .distant-hills svg{width:78vw;top:-12vh}.reading-room .distant-hills svg[data-kind=object]{width:60vw;top:-15vh}}