@font-face {
  font-family: PT Serif;
  src: url("../public/fonts/pt-serif-400.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: Playfair;
  src: url("../public/fonts/playfair-display-700.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: IBM Plex Mono;
  src: url("../public/fonts/ibm-plex-mono-400.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --paper: #efe1c5;
  --ink: #301e19;
  --muted: #d6b998;
  --gold: #efbd78;
  --rule: #e8bd8b42;
  --mono: "IBM Plex Mono", monospace;
  --serif: "PT Serif", Georgia, serif;
  --display: Playfair, Georgia, serif;
  font-family: var(--serif);
  color: var(--paper);
  background: #37221d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 300px;
  min-height: 100vh;
  background: radial-gradient(ellipse at 45% 0%, #533627, #211511 75%);
}
a, button { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: 2px solid #ffd088; outline-offset: 4px; }
.sr-only { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.shell { width: min(100% - 56px, 1470px); margin-inline: auto; }
.masthead, .foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.masthead { min-height: 67px; }
.brand { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; font: 700 clamp(1.24rem, 2.4vw, 1.86rem)/1 var(--display); }
.brand em { color: var(--gold); font-style: normal; }
.brand-mark { width: 30px; height: 20px; border: 1px solid #c78d57; border-radius: 3px; display: inline-grid; place-items: center; }
.brand-mark::before { content: ""; width: 16px; height: 7px; border: 1px solid #c78d57; border-radius: 9px; background: radial-gradient(circle at 24% 50%, var(--gold) 1.5px, transparent 2px), radial-gradient(circle at 76% 50%, var(--gold) 1.5px, transparent 2px); }
.masthead-right { display: flex; align-items: center; gap: 20px; font: .72rem var(--mono); }
.issue { color: var(--muted); }
.quiet-link { padding-block: 11px; white-space: nowrap; text-underline-offset: 4px; text-decoration-color: #e4b78166; }
.quiet-link:hover { color: var(--gold); }

.tabletop {
  position: relative;
  isolation: isolate;
  width: min(100% - 22px, 1536px);
  margin: 0 auto 14px;
  overflow: clip;
  border: 1px solid #a66d4369;
  border-radius: 12px 12px 8px 8px;
  border-bottom: 12px solid #3b2319;
  background: #65422e;
  box-shadow: 0 20px 30px #0d0806bc, inset 0 2px #e8ac7061, inset 0 -4px #b37d4b54;
}
.tabletop::before, .tabletop::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.tabletop::before {
  inset: -30% -24% -10%;
  transform: perspective(950px) rotateX(29deg);
  transform-origin: 50% 90%;
  background:
    repeating-linear-gradient(89deg, #371c151f 0 1px, transparent 2px 6px, #d1a06a16 7px 8px, transparent 9px 14px),
    repeating-linear-gradient(90deg, transparent 0 155px, #28140f65 156px 158px, #c9905f60 159px, transparent 161px 295px),
    linear-gradient(105deg, #634128, #815637 48%, #3a2217);
}
.tabletop::after {
  inset: 0;
  background: radial-gradient(ellipse at 32% 5%, #ffd59131, transparent 61%), linear-gradient(108deg, #22131163, transparent 29%, transparent 72%, #24130c8c);
}
.desk {
  display: grid;
  grid-template-columns: minmax(155px, .8fr) minmax(0, 4.15fr) minmax(205px, 1.08fr);
  grid-template-areas: "chapters journal objects";
  align-items: start;
  gap: clamp(16px, 2vw, 30px);
  width: min(100% - 32px, 1470px);
  padding-block: 22px 20px;
}
.journal { grid-area: journal; min-width: 0; container-type: inline-size; }
.journal-top { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.label, .desk-label { font: .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.journal-top h1 { margin: 3px 0 0; font: 700 clamp(1.7rem, 3vw, 2.6rem)/1.04 var(--display); letter-spacing: -.04em; }
.flat-button, .control, .dialog-close { min-height: 44px; border: 1px solid #bf92655e; background: #2b1916bd; border-radius: 3px; font: .75rem var(--mono); }
.flat-button { padding-inline: 12px; }
.flat-button:hover, .control:not(:disabled):hover, .dialog-close:hover { background: #5e3d2f; border-color: #bf9265; }
.book-frame { position: relative; min-width: 0; }
.book-frame::before {
  content: ""; position: absolute; inset: 3% 2% 0; pointer-events: none;
  background: #28160d85; border-radius: 4px;
  filter: blur(17px); transform: translate(5px, 12px) rotate(-.8deg);
}
#book {
  position: relative;
  height: clamp(500px, 76cqw, 705px);
  width: 100%;
  min-width: 0 !important;
  isolation: isolate;
  filter: drop-shadow(0 2px 0 #d0af7a) drop-shadow(0 3px 0 #72452d) drop-shadow(7px 13px 11px #180d0abf);
}
#book .stf__wrapper { width: 100%; height: 100%; position: relative; }
#book:not(.stf__parent) .page:not(.cover) { display: none; }
#book:not(.stf__parent) .cover { max-width: 470px; height: 100%; margin: auto; }
.page { color-scheme: light; position: relative; overflow: hidden; color: var(--ink); background: #f1e4ca; }
.page:not(.cover):not(.back-cover)::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .36; }
.page.--left::before { background: linear-gradient(270deg, #6c3925a6, transparent 13px); }
.page.--right::before { background: linear-gradient(90deg, #6c39258a, transparent 13px); }
.reading-page {
  background: radial-gradient(ellipse at 24% 20%, #fff8e9, transparent 85%), #efe0c3;
}
.reading-flow {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .44em;
  padding: clamp(15px, 2.6cqw, 24px) clamp(15px, 2.8cqw, 28px) 32px;
  font: clamp(.94rem, 1.9cqw, 1.065rem)/1.45 var(--serif);
  overflow-wrap: anywhere;
}
.reading-probe { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.reading-flow > * { flex: none; }
.reading-flow p { margin: 0; }
.reading-flow .reading-divider { padding-block: .4em; text-align: center; letter-spacing: .2em; color: #8b4b32; }
.reading-flow .reading-verse { white-space: pre-wrap; padding: .2em 0 .25em .8em; border-left: 1px solid #a66b46; color: #653b2a; font-style: italic; }
.reading-flow .reading-end { margin-top: .75em; text-align: center; font-style: italic; }
.reading-flow .reading-colophon { margin-top: .85em; border-top: 1px solid #a47a5559; padding-top: .55em; color: #644532; font-size: .85em; }
.reading-art { --panel-height: var(--art-limit, 410px); position: relative; margin: 0 0 12px; }
.reading-flow p + .reading-art { margin-top: 11px; }
.reading-art img {
  display: block; width: min(100%, calc(var(--panel-height) * var(--art-ratio))); height: auto; aspect-ratio: var(--art-ratio);
  margin-inline: auto; object-fit: contain; outline: 1px solid #69483785;
}
.folio { position: absolute; right: 15px; bottom: 8px; color: #815642; font: .67rem var(--mono); }
.reading-opening::first-letter { color: #8b4b32; }
.art-zoom {
  position: absolute; z-index: 2; top: 7px; right: 7px; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid #f0dbc383; border-radius: 3px;
  background: #33241ee8; color: #fff0d1; font: 1.2rem/1 system-ui;
}
.art-zoom:hover { background: #5a3a29; }
.art-plate { background: #38271f; }
.art-plate .reading-flow { position: relative; padding: 0; container-type: size; }
.art-plate .reading-art, .chapter-front .reading-art { position: absolute; inset: 0; margin: 0; }
.art-plate .reading-art img, .chapter-front .reading-art img {
  width: 100%; height: 100%; aspect-ratio: auto; outline: 0;
}
.art-plate .reading-art img { object-fit: contain; }
.art-plate .art-caption {
  --caption-inset: max(7%, calc((100cqh - 100cqw / var(--plate-ratio)) / 2 + 12px));
  position: absolute; z-index: 1; left: 5%; bottom: var(--caption-inset); width: max-content; max-width: 72%;
  margin: 0; padding: .58em .8em; border-left: 2px solid #a47349; background: #f9eddaee;
  color: #39251c; box-shadow: 0 3px 10px #20140b66; font-size: .93em;
}
.art-plate .art-caption-top { top: var(--caption-inset); bottom: auto; }
.art-plate .folio { z-index: 1; right: 10px; padding: 3px 5px; border-radius: 2px; color: #fff0d1; background: #33241ee0; }
.cover, .back-cover { color: #ffe4b5; background: #512b23; }
.chapter-front, .back-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; padding: clamp(18px,3.2cqw,35px); }
.chapter-front { position: relative; isolation: isolate; justify-content: end; }
.chapter-front .reading-art { z-index: -2; }
.chapter-front .reading-art img { object-fit: cover; object-position: 50% 44%; }
.chapter-front::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(0deg, #23140ff5, #23140fc9 19%, #23140f2b 47%, transparent 67%);
  box-shadow: inset 0 0 0 8px #35241d29;
}
.chapter-front h2, .back-inner h2 { font: 700 clamp(1.8rem, 4.6cqw, 3.1rem)/1.02 var(--display); letter-spacing: -.048em; margin: 6px 0 12px; }
.cover-copy { width: 100%; color: #fff0d7; }
.chapter-front h2 { font-size: clamp(2rem, 5.1cqw, 3.4rem); max-width: 11ch; text-wrap: balance; }
.chapter-front .label, .back-inner .label { margin: 0; color: #ffdb9f; }
.cover-open {
  min-height: 44px; padding: 8px 13px; border: 1px solid #ead0a0; border-radius: 3px;
  background: #f1dbb4; color: #38241a; font: .76rem var(--mono);
}
.cover-open:hover { background: #fff0d4; }
.back-inner { justify-content: center; background: repeating-linear-gradient(0deg, #f6bb6426 0 1px, transparent 2px 8px), #773b2a; }
.back-inner button { padding-inline: 11px; }

.reader-controls { display: grid; grid-template-columns: 1fr minmax(85px, 175px) 1fr; align-items: center; gap: 11px; margin-top: 14px; }
.control { padding: 8px 15px; }
.control:first-child { justify-self: start; }
.control:last-child { justify-self: end; }
.page-meter { display: grid; gap: 8px; }
.page-count { text-align: center; font: .73rem var(--mono); color: #f7dab0; }
.meter-line { height: 2px; background: #efbc7d4d; }
.meter-line i { display: block; height: 100%; width: var(--progress, 0%); background: var(--gold); transition: width 200ms ease; }
.reader-note { margin: 11px 0 0; color: var(--muted); font: .66rem/1.4 var(--mono); text-align: center; }

.chapters { grid-area: chapters; }
.objects { grid-area: objects; }
.chapters, .objects { padding-top: 14px; }
.desk-label { margin: 0 0 14px; }
.chapter-stack {
  --cover-strip: 60px;
  --cover-overlap: 24px;
  display: grid; grid-auto-rows: var(--cover-strip); isolation: isolate;
  margin: 0; padding: 5px 12px var(--cover-overlap) 3px; list-style: none;
}
.chapter-stack li { min-width: 0; }
.chapter-stack li:nth-child(3n + 1) { --angle: -3deg; }
.chapter-stack li:nth-child(3n + 2) { --angle: 1.4deg; }
.chapter-stack li:nth-child(3n) { --angle: -1deg; }
.chapter-stack li:nth-child(2) { --image-position: 50% 68%; }
.chapter-stack li:nth-child(3) { --image-position: 50% 58%; }
.chapter-stack li:nth-child(7) { --image-position: 50% 58%; }
.chapter-tab {
  position: relative; display: flex; align-items: flex-start; isolation: isolate; overflow: hidden;
  width: 100%; height: calc(var(--cover-strip) + var(--cover-overlap)); padding: 0;
  border: 1px solid #b18461; border-left: 4px solid #674734; border-radius: 2px 3px 2px 0;
  background: #493127; color: #fff0d3; text-align: left;
  box-shadow: 0 2px #bf9a74, 0 4px #674734, 3px 5px 7px #1d110ee0;
  transform: translateX(var(--pull, 0px)) rotate(var(--angle, 0deg));
  transform-origin: 20% 0; transition: transform .2s ease, border-color .2s ease;
}
.chapter-tab img {
  position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--image-position, 50% 38%); pointer-events: none;
}
.chapter-tab::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, #261914f5 3%, #2a1b15df 33%, #2a1b155e 75%, #2a1b151a 100%);
  box-shadow: inset 0 1px #f4d9ae55; pointer-events: none;
}
.chapter-tab span {
  display: grid; align-content: center; min-height: calc(var(--cover-strip) - 5px); max-width: 85%;
  padding: 3px 0 3px 8px; font: 700 .86rem/1.1 var(--display);
  text-shadow: 0 1px 3px #24140b; text-wrap: pretty;
}
.chapter-tab[aria-current] { --pull: 8px; border-color: #f0c182; border-left-color: #f0c182; color: #ffdfac; }
.chapter-tab:hover, .chapter-tab:focus-visible { --pull: 11px; border-color: #f0c182; }
.chapter-tab:focus-visible { outline-offset: -3px; }
.desk-paper { display: grid; justify-items: center; gap: 15px; margin-top: 27px; padding-inline: 5px; }
.ticket { width: min(100%, 166px); height: 68px; padding: 0; border: 0; background: none; perspective: 420px; transform: rotate(-8deg); }
.ticket-turn { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s ease; }
.ticket[aria-pressed="true"] .ticket-turn { transform: rotateY(180deg); }
.ticket-face { position: absolute; inset: 0; display: flex; align-items: center; padding: 8px; color: #633920; background: #c8965e; border: 3px double #83472c; box-shadow: 3px 5px 8px #23110d91; backface-visibility: hidden; }
.ticket:hover .ticket-face { background-color: #dfac72; }
.ticket-front { justify-content: space-between; gap: 4px; text-align: left; font: .52rem/1.2 var(--mono); }
.ticket-back { display: block; align-content: center; text-align: left; transform: rotateY(180deg); font: italic .76rem/1.34 var(--serif); }
.ticket-text, .ticket strong { display: grid; }
.ticket-text b { margin-block: 3px; font-size: 1rem; }
.ticket strong { text-align: center; font: 700 1.45rem/.88 var(--display); }
.ticket strong span { font: .54rem var(--mono); }
.folded-map {
  position: relative; isolation: isolate; display: grid; justify-items: start; align-content: center;
  width: min(95%, 159px); min-height: 79px; padding: 10px; color: #432921; text-align: left;
  border: 1px solid #8c6446; border-radius: 2px; transform: rotate(5deg);
  background: linear-gradient(90deg, transparent 48.5%, #4938253d 49.5%, #fff9db85 51%, transparent 53%),
    url("./assets/arbat-map.png") 50% 50% / cover, #e5c89d;
  box-shadow: 2px 3px 0 #b29167, 4px 7px 8px #27150db0;
}
.folded-map:hover { transform: rotate(2deg); }
.map-cover-label { display: grid; padding: 4px 7px 6px; background: #f6e6c9f5; box-shadow: 1px 2px 3px #3b2a2357; }
.folded-map strong { font: 700 1.25rem/1.1 var(--display); }
.folded-map small { margin-top: 6px; font: .55rem/1.25 var(--mono); }

.radio-section { margin-bottom: 18px; }
.radio {
  position: relative; border: 1px solid #211713; padding: 9px 10px 10px; border-radius: 11px 11px 9px 9px;
  transform: perspective(850px) rotateX(8deg) rotateY(-8deg) rotateZ(1.6deg);
  background: linear-gradient(95deg, #211b18, #514034 11%, #352a24 84%, #221916);
  box-shadow: 2px 4px 0 #221714, 5px 8px 0 #291c17, 11px 15px 12px #22130fbd, inset 0 1px #ad9074a6, inset 0 -4px #221713;
}
.antenna { position: absolute; right: 15px; top: -6px; width: 56%; height: 4px; background: linear-gradient(90deg,#78736b 0 4%,transparent 4% 82%,#645a51 83% 86%,transparent 87%), linear-gradient(#e0d8c4,#8c8174 60%,#4c3e35); border-radius: 3px; transform: rotate(3deg); transform-origin: right center; box-shadow: 0 2px 2px #21140cbb; pointer-events: none; }
.radio-top, .radio-bottom, .frequency, .radio-scale { display: flex; align-items: center; justify-content: space-between; }
.radio-top { color: #ead7b8; margin: 0 2px 5px; font: .60rem var(--mono); letter-spacing: .09em; }
.radio-led { width: 8px; height: 8px; border-radius: 50%; background: #3a2721; border: 1px solid #8b6954; }
.radio[data-playing="true"] .radio-led { background: #e9a45f; box-shadow: 0 0 7px #ffaa5d; }
.radio[data-signal="true"] .radio-led { background: #d0df93; box-shadow: 0 0 7px #d8eb88; }
.radio-glass { padding: 6px 7px 4px; color: #f7d491; background: linear-gradient(158deg, #ffffff12 0 18%, transparent 18.5% 100%), linear-gradient(168deg, #312c24, #1a1917); border: 1px solid #181310; border-radius: 3px; box-shadow: inset 0 1px 7px #120e0a, 0 1px #bca48884; }
.frequency output { font: 1.38rem/1.1 var(--mono); }
.frequency > span { font: .63rem var(--mono); }
.radio-scale { display: grid; grid-template-columns: repeat(10, 1fr); margin-top: 3px; font: .57rem var(--mono); text-align: center; }
.radio-scale span { display: grid; justify-items: center; gap: 2px; color: #d3aa72; }
.radio-scale span::before { content: ""; width: 1px; height: 5px; background: currentColor; }
.radio-scale .selected { color: #ffedb7; font-weight: bold; }
.radio-scale .selected::before { width: 2px; box-shadow: 0 0 4px #eec57e; }
.radio-bottom { gap: 6px; margin-top: 7px; padding: 5px; border: 1px solid #a28a6e; border-radius: 4px; background: repeating-linear-gradient(0deg, #f6dfb517 0 1px, transparent 1px 3px), linear-gradient(150deg, #c1aa86, #8b7157); box-shadow: inset 0 1px #ffedc3a6, 0 2px #231713; }
.speaker { min-width: 0; height: 55px; flex: 1; border-radius: 3px; border: 1px solid #564439; background: radial-gradient(circle at 2px 2px, #261c18 0 1.2px, transparent 1.5px) 0 0 / 4px 4px, linear-gradient(#8d745a,#574738); box-shadow: inset 0 2px 4px #2e221eab, 0 1px #e0bd90; }
.radio-tuner, .radio-power { display: grid; place-items: center; gap: 4px; color: #39281e; font: .49rem/1 var(--mono); }
.radio-dial { position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px #3b2c24, 1px 2px 3px #33261e; }
.dial-face { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #29201b; background: repeating-conic-gradient(#705c4c 0 4deg,#3e302a 4deg 8deg); box-shadow: inset 0 1px #c3a885; transform: rotate(var(--dial-angle, -135deg)); transition: transform .16s ease-out; }
.dial-face::before { content: ""; position: absolute; inset: 4px; border: 1px solid #26201d; border-radius: 50%; background: radial-gradient(circle, #b4a389, #716357 55%, #413731 85%); box-shadow: inset 0 0 0 1px #af997761; }
.dial-face::after { content: ""; position: absolute; top: 6px; left: calc(50% - 1px); width: 2px; height: 9px; border-radius: 1px; background: #f2d6a5; }
#tuning { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: grab; touch-action: none; }
#tuning:active { cursor: grabbing; }
.radio-dial:has(#tuning:focus-visible) { outline: 2px solid #ffd088; outline-offset: 4px; border-radius: 50%; }
.radio-power { flex: 0 0 44px; min-height: 55px; padding: 0; border: 0; background: none; }
.power-switch { position: relative; display: block; width: 22px; height: 29px; border: 1px solid #2a211b; border-radius: 3px; background: linear-gradient(#382e29 0 43%, #867160 48%, #524339 100%); box-shadow: 0 1px 2px #211b17; }
.power-switch::after { content: ""; position: absolute; inset: 4px 8px auto; height: 4px; border-top: 1px solid #e1cab0; }
.radio-power[aria-pressed="true"] .power-switch { background: linear-gradient(#8c7866, #5b4c41 50%, #2d2521 54%); }
.radio-power:hover .power-switch { border-color: #e3c098; }
.object-status { margin: 13px 0 0; min-height: 2.7em; color: #efd7b5; font: .69rem/1.4 var(--mono); }
.tape-object { width: min(100%, 248px); margin: -8px auto 0; container-type: inline-size; }
.spin-tape { position: relative; display: block; width: 100%; height: clamp(120px, 72cqw, 176px); border: 0; padding: 0; background: none; perspective: 600px; }
.tape-plane { --axis-x: 55%; --axis-y: 57%; position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(29deg) rotateZ(-9deg); }
.tape {
  --tape-width: 70cqw;
  --tape-height: calc(var(--tape-width) * .62);
  position: absolute; display: block;
  width: var(--tape-width); height: var(--tape-height);
  left: calc(var(--axis-x) - var(--tape-width) * .72); top: calc(var(--axis-y) - var(--tape-height) * .62);
  border: 1px solid #211817; border-radius: 8px;
  background: linear-gradient(155deg, #52453e, #292426 82%);
  box-shadow: 0 4px 0 #2d2423, 1px 6px 0 #1d1618, 7px 12px 10px #21120eb3, inset 0 1px #a18170;
  color: #3a241c;
  transform-origin: 72% 62%;
  transform: rotateZ(var(--spin, 0deg)) rotateX(var(--wobble, 0deg));
}
.spin-tape:hover .tape { border-color: #c79971; }
.tape-label { position: absolute; inset: 11% 8% auto; display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 25%; padding: 2px 5px; background: #e8ca8b; border-bottom: 3px solid #ae4e36; font: clamp(.58rem, 4.9cqw, .72rem)/1.05 var(--serif); text-align: right; }
.spin-tape[data-side="b"] .tape-label { border-bottom-color: #526a50; }
.tape-window { position: absolute; inset: 44% 8% 16%; border: 1px solid #755d52; border-radius: 6px; background: linear-gradient(159deg, #a7906a24 0 24%, transparent 25%), #221a1b; box-shadow: inset 0 2px 4px #0d0a09; }
.spool { position: absolute; top: 62%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#191212 0 25%,transparent 28% 52%,#231a18 61%), repeating-conic-gradient(#d8c5a7 0 39deg,#91765f 40deg 60deg); box-shadow: 0 0 0 1px #755c4b, 0 1px 4px #0d0a0a; transform: translate(-50%, -50%); }
.spool-left { left: 28%; }
.spool-right { left: 72%; }
.pencil {
  position: absolute; left: var(--axis-x); top: var(--axis-y); width: clamp(61px, 38cqw, 99px); height: clamp(7px, 3.8cqw, 10px);
  transform-origin: 0 50%;
  transform: translateY(-50%) translateZ(2px) rotateZ(-62deg) rotateY(-44deg);
  filter: drop-shadow(1px 2px 1px #120c08af);
  pointer-events: none;
}
.pencil::before { content: ""; position: absolute; inset: 0; border-radius: 1px 3px 3px 1px; clip-path: polygon(0 43%, 12% 0, 100% 0, 100% 100%, 12% 100%, 0 57%); background:
  linear-gradient(0deg, #39241050 0 27%, transparent 28% 62%, #fff0b965 63% 82%, transparent 84%),
  linear-gradient(90deg, #28201d 0 4%, #d9ab78 4% 12%, #bc7b34 12% 83%, #73645c 83% 85%, #c3b3a1 85% 91%, #716960 91% 93%, #a46b65 93% 100%); }
.tape-controls { display: flex; align-items: start; flex-wrap: wrap; gap: 5px 9px; }
.tape-controls .object-status { margin-top: 3px; }
.flip-tape { padding: 5px 8px; min-height: 34px; border: 1px solid #d6a87969; border-radius: 3px; background: #42291e; color: var(--paper); font: .68rem var(--mono); }
.flip-tape:hover { background: #624332; }
.note { display: grid; width: min(93%, 190px); margin: 18px auto 0; padding: 13px 10px 13px 14px; color: #633a2b; transform: rotate(6deg); background: repeating-linear-gradient(0deg, #dfc195 0 16px, #8c6a5b62 17px, #dfc195 18px); box-shadow: 2px 4px 8px #21130ea6; font: italic .85rem/1.5 var(--serif); }
.foot { padding-block: 11px 16px; border-top: 1px solid var(--rule); font: .65rem/1.45 var(--mono); color: var(--muted); }

dialog { max-width: min(540px, 100% - 26px); max-height: 86vh; padding: 24px; color: var(--ink); background: var(--paper); border: 1px solid #a86f49; border-radius: 4px; box-shadow: 0 20px 65px #0d0805cf; }
dialog::backdrop { background: #180e0bce; }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dialog-top .label { color: #944c34; }
.dialog-close { width: 44px; background: #663a2a; color: var(--paper); font-size: 1.35rem; }
dialog h2 { margin: 4px 0 13px; font: 700 2rem/1.1 var(--display); letter-spacing: -.04em; }
dialog p { font: 1.05rem/1.5 var(--serif); }

#map-dialog {
  width: min(755px, 100% - 28px); max-width: none; max-height: 89vh; padding: clamp(12px, 3.5vw, 20px);
  background: #ead6af;
}
#art-dialog {
  width: 100%; height: 100%; max-width: none; max-height: none;
  inset: 0; margin: 0; padding: 12px; border: 0; border-radius: 0; background: #201714;
}
#art-dialog[open] { display: grid; place-items: center; }
#art-dialog img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
#art-dialog form { position: absolute; z-index: 1; top: 12px; right: 12px; }
#map-dialog .dialog-top { align-items: start; }
.map-sheet { margin: 0; }
.map-image { position: relative; isolation: isolate; }
.map-sheet img { display: block; width: 100%; height: auto; border: 1px solid #987653; box-shadow: 0 3px 6px #5e3b2533; }
.map-sheet figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1px 10px; margin-top: 5px; color: #654736; font: .65rem/1.2 var(--mono); }
.map-sheet a { display: inline-flex; align-items: center; min-height: 28px; text-underline-offset: 2px; }
.map-pin {
  position: absolute; z-index: 1; left: var(--x); top: var(--y);
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none;
  transform: translate(-50%, -50%);
}
.map-pin::before {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 15px; height: 15px; border: 2px solid #fff3d5; border-radius: 50%;
  background: #754432; box-shadow: 0 1px 4px #3c201be0; transform: translate(-50%,-50%);
}
.map-pin span {
  position: absolute; left: 50%; bottom: 33px; width: max-content; max-width: clamp(80px, 13vw, 136px);
  padding: 4px 6px; border: 1px solid #8e6043; border-radius: 3px; color: #42281d;
  background: #fff2d5; box-shadow: 0 1px 3px #3c201b80;
  transform: translateX(-50%); font: .72rem/1.1 var(--serif);
}
.map-pin.pin-below span { top: 33px; bottom: auto; }
.map-pin[aria-pressed="true"], .map-pin:hover, .map-pin:focus-visible { z-index: 2; }
.map-pin[aria-pressed="true"]::before { background: #aa3929; box-shadow: 0 0 0 2px #a6372b, 0 1px 5px #3c201be0; }
.map-pin[aria-pressed="true"] span { color: #fff2d5; background: #693725; border-color: #fff2d5; }
.map-pin:focus-visible { outline-color: #613428; }
#map-dialog[open] .map-sheet { animation: unfold-map .42s ease-out both; }
@keyframes unfold-map {
  from { transform: perspective(670px) rotateX(22deg) scale(.86,.72); opacity: .6; }
  to { transform: perspective(670px) rotateX(0) scale(1); opacity: 1; }
}
.map-scenes .label { color: #734a36; margin: 3px 0 7px; font: .68rem/1.2 var(--mono); }
.map-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.map-stop {
  min-height: 44px; padding: 3px 5px; border: 1px solid #9f7b547a; border-radius: 2px;
  color: #45271c; background: #f5e4c1; font: .8rem/1.13 var(--serif);
}
.map-stop:hover { border-color: #794b39; }
.map-stop[aria-pressed="true"] { color: #fff0d1; background: #75432f; }
.map-stop:focus-visible { outline-color: #613428; outline-offset: 2px; }
.map-excerpt { min-height: 98px; margin-top: 8px; padding: 10px 13px; border-left: 2px solid #996145; background: #f8e8c5; }
.map-excerpt h3 { margin: 0 0 6px; font: 700 1.08rem/1.1 var(--display); }
.map-excerpt blockquote { margin: 0; font: .95rem/1.42 var(--serif); white-space: pre-line; }

.notebook-object {
  position: relative; display: grid; grid-template-rows: 1fr auto 1fr;
  width: min(94%, 115px); aspect-ratio: .79; padding: 10px 9px 8px 14px; color: #254473;
  border: 1px solid #667459; border-radius: 1px 2px 4px 1px; transform: rotate(-8deg);
  background: linear-gradient(90deg,#6c7a5b8a 0 6%,#b4bf976e 6.5%,transparent 12%),
    repeating-linear-gradient(25deg,#6a805214 0 1px,transparent 1px 3px), #b8c6a0;
  box-shadow: 1px 2px #e9dec0, 2px 3px #788269, 5px 7px 9px #27150db0;
}
.notebook-object[hidden] { display: none; }
.notebook-object:hover { transform: rotate(-2deg); }
.notebook-object::after { content: ""; position: absolute; top: 0; right: 0; width: 17px; height: 17px; clip-path: polygon(0 0,100% 100%,0 100%); transform: rotate(-90deg); background: linear-gradient(150deg,#d9dfc2,#a0af88); box-shadow: 1px 1px #7b8b69; }
.notebook-label, .notebook-verse, .notebook-song { font-family: "Segoe Print", "Comic Sans MS", cursive; }
.notebook-label { grid-row: 2; padding: 8px 3px; text-align: center; font-size: .74rem; background: #dbe1bc6b; border: 1px solid #7582639c; transform: rotate(1.5deg); }
.notebook-count { grid-row: 3; align-self: end; color: #465743; justify-self: end; font: .52rem var(--mono); }
.paper-control { min-height: 44px; padding: 6px 12px; border: 1px solid #74634e; border-radius: 3px; background: #f2e8c7; color: #422d20; font: .74rem var(--mono); }
.paper-control:not(:disabled):hover { background: #e9dab3; }
#notebook-dialog { width: min(694px, 100% - 24px); max-width: none; max-height: 95vh; padding: 6px 9px 11px; border: 0; background: transparent; box-shadow: none; }
.notebook-top { display: flex; justify-content: end; margin-bottom: 7px; }
.notebook-binding {
  --square: clamp(15px,2.1vw,20px);
  --grid: repeating-linear-gradient(0deg, transparent 0 calc(var(--square) - 1px), #688cad42 calc(var(--square) - 1px) var(--square)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--square) - 1px), #688cad42 calc(var(--square) - 1px) var(--square));
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start;
  padding: 2px 3px 4px; border: 1px solid #677357; border-radius: 3px;
  background: #9da982; box-shadow: 0 3px #738062, 5px 10px 23px #130c08d9;
}
.notebook-binding::before, .notebook-sheet { aspect-ratio: .79; min-width: 0; border: 1px solid #ada38b; }
.notebook-binding::before {
  content: ""; background: linear-gradient(270deg,#4e372536,transparent 8%), var(--grid), linear-gradient(94deg,#faf4e4,#eee5ce);
  border-right: 0; border-radius: 3px 0 0 2px; box-shadow: 0 2px #ece1c6;
}
.notebook-binding::after {
  content: ""; position: absolute; z-index: 1; inset: 0 auto 0 calc(50% - 3px); width: 6px; pointer-events: none;
  background: linear-gradient(90deg,#514944,#afa59a,#514944) 50% 24% / 6px 2px no-repeat,
    linear-gradient(90deg,#514944,#afa59a,#514944) 50% 76% / 6px 2px no-repeat;
}
.notebook-sheet {
  position: relative; display: grid; grid-template: minmax(0,1fr) / minmax(0,1fr);
  padding: clamp(16px,3vw,26px) clamp(14px,2.6vw,22px) 14px clamp(21px,3.6vw,30px);
  color: #254778; border-radius: 0 3px 3px 0;
  background:
    linear-gradient(90deg,#4e37252b,transparent 6%),
    linear-gradient(90deg,transparent 16px,#b65f6875 16px 17px,transparent 17px),
    var(--grid), linear-gradient(100deg,#f0e7d0,#fbf6e7 17% 84%,#eee4cd);
  box-shadow: 0 2px #ede0bd, 0 3px #9d9c7c;
}
.notebook-sheet.turning { animation: notebook-turn .3s ease-out both; transform-origin: 0 50%; }
@keyframes notebook-turn { from { transform: perspective(800px) rotateY(-14deg); opacity: .7; } to { transform: none; opacity: 1; } }
.notebook-verse, .notebook-song { font-size: clamp(.83rem,3.5vw,1rem); line-height: 1.48; }
.notebook-verse del { text-decoration-color: #3c5786c4; text-decoration-thickness: 1.5px; }
.notebook-margin { display: block; margin: 9px 4px 0 0; text-align: right; transform: rotate(-7deg); }
.notebook-song { position: relative; isolation: isolate; }
.tea-ring { position: absolute; z-index: -1; left: 4%; bottom: 11%; width: clamp(54px,16vw,88px); aspect-ratio: 1.1; border: 3px solid #9e653c49; border-top-color: #9e653c21; border-radius: 50%; transform: rotate(-17deg); box-shadow: 0 0 4px #a46d3b35, inset 0 0 4px #ad733c33; }
.folded-drawing {
  position: absolute; right: 0; bottom: 5%; display: block; min-height: 46px; padding: 6px 10px; border: 1px solid #9c825b;
  color: #4d3d31; background: linear-gradient(90deg, transparent 49%,#735f3d4a 50%,#fff5d596 51%,transparent 52%), linear-gradient(0deg,transparent 48%,#735f3d38 50%,transparent 52%), #efddad;
  box-shadow: 2px 4px 5px #60492459; transform: rotate(-5deg); font: .68rem var(--mono);
}
.folded-drawing[hidden] { display: none; }
.notebook-drawing { position: absolute; inset: auto 0 0; margin: 0; padding: 6px; text-align: right; border: 1px solid #b79d70; background: #f4e5bf; box-shadow: 0 5px 9px #6b51284d; animation: unfold-map .4s ease-out both; }
.notebook-drawing canvas { display: block; width: 100%; height: auto; margin-bottom: 7px; background: linear-gradient(90deg,transparent 49.5%,#b4946544 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#b4946544 50%,transparent 51%); }
.notebook-nav { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 13px; color: #f2e8c7; font: .67rem var(--mono); }
.notebook-nav .paper-control { padding-inline: 7px; }

@media (max-width: 620px) {
  #notebook-dialog { width: min(370px, 100% - 24px); }
  .notebook-binding { grid-template-columns: minmax(0,1fr); }
  .notebook-binding::before, .notebook-binding::after { display: none; }
}

@container (max-width: 739px) {
  #book { height: clamp(520px, 178cqw, 705px); }
  .reading-flow { font-size: clamp(.94rem, 3.75cqw, 1.01rem); }
  .chapter-front h2 { font-size: clamp(2.05rem, 7.5cqw, 3rem); }
}
@container (max-width: 334px) {
  #book { height: clamp(570px, 198cqw, 680px); }
}
@media (max-width: 1130px) {
  .desk { grid-template-columns: minmax(140px, .77fr) minmax(0, 3.2fr); grid-template-areas: "chapters journal" "chapters objects"; gap: 20px; }
  .objects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .radio-section { margin-bottom: 0; }
  .note { display: none; }
}
@media (max-width: 780px) {
  .shell { width: calc(100% - 28px); }
  .tabletop { width: calc(100% - 8px); }
  .tabletop::before { inset: -15% -24% -8%; transform: none; }
  .masthead { min-height: 58px; }
  .masthead-right { gap: 12px; }
  .issue { display: none; }
  .desk { width: calc(100% - 18px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "journal" "objects" "chapters"; gap: 20px; padding-top: 15px; }
  .journal { width: min(100%, 650px); justify-self: center; }
  .objects, .chapters { width: min(100%, 560px); justify-self: center; padding-top: 6px; }
  .chapter-stack { --cover-strip: 58px; --cover-overlap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .desk-paper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .notebook-object { grid-column: 1 / -1; margin-top: 5px; }
  .foot { margin-top: 12px; }
}
@media (max-width: 410px) {
  .map-pin span { padding: 3px 4px; font-size: .63rem; }
  .map-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand { gap: 7px; font-size: 1.2rem; }
  .brand-mark { width: 23px; }
  .masthead-right { gap: 9px; font-size: .66rem; }
  .reader-controls { grid-template-columns: auto minmax(75px, 1fr) auto; }
  .control { padding-inline: 9px; white-space: nowrap; }
}
@media (max-width: 345px) {
  .notebook-drawing canvas { max-height: 88px; object-fit: contain; margin-bottom: 3px; }
  .objects { gap: 12px; }
  .radio { padding-inline: 7px; }
  .radio-bottom { gap: 4px; }
  .radio-power { flex-basis: 32px; }
  .radio-scale { font-size: .48rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  #map-dialog[open] .map-sheet { animation: none; }
  .notebook-sheet.turning, .notebook-drawing { animation: none; }
}