/* A full-size reading edition, with complete leaves and a tabletop view. */
:root { --popup-height: calc(var(--ph) * .29); --stand-angle: -60deg; --ball-angle: 60deg; }
.stage { padding: 76px 0 80px; }
body.open .stage, body.opening .stage { padding: 76px 0 80px; }
.scene { perspective: 2400px; perspective-origin: 50% 40%; }
body.open .tilt, body.opening .tilt { transform: rotateX(5deg) rotateY(calc(var(--hand-x) * 1deg)); }
.book.at-start { scale: .83 .83 .83; }
.book.open, .book.at-end { scale: 1; }
.face.has-popup .paper {
  top: var(--popup-height); padding: 18px calc(var(--pw) * .065) 28px;
  font-size: var(--fs); line-height: 1.78; overflow: hidden;
}
.face.has-popup .paper .title { font-size: 1.55em; line-height: 1.3; margin-bottom: .55em; }
.face.has-popup .paper .kicker { font-size: .75em; margin-bottom: .4em; letter-spacing: .05em; }
.face.has-popup .body p { margin-bottom: .7em; text-align: left; }
.face.has-popup .body p:last-child { margin-bottom: 0; }
.face.has-popup .paper.t-dedication { padding-top: 24px; justify-content: flex-start; }
.face.has-popup .paper.t-dedication .body p { font-size: 1em; margin-bottom: .8em; }
.face.has-popup .paper.t-dedication .body p:first-child { font-size: 1.2em; }
.face.has-popup .paper.t-quote { padding-top: 24px; justify-content: flex-start; }
.face.has-popup .paper.t-quote .quote { font-size: 1.15em; line-height: 1.9; }
.face.has-popup .paper.t-page.light .kicker { margin-top: 0; }
.face.has-popup .paper.light .wash-cap { font-size: .68em; line-height: 1.4; margin: 0 0 8px; }
.continued { margin-left: 7px; color: #888368; font-size: .9em; }
.face.has-popup .sign { margin: .7em 0 0; padding: 0; font-size: .87em; }
.face .prints { gap: 16px; margin-top: 18px; align-items: flex-start; }
.face .prints .print, .face .prints.two .print, .face .prints.two .print.portrait { width: 46%; max-width: 240px; padding: 4px 4px 6px; }
.face .prints.one .print { width: 62%; }
.face .prints .print .ph, .face .prints .print.portrait .ph {
  height: clamp(58px, calc(var(--ph) * .18), 142px); width: 100%; aspect-ratio: auto; object-fit: contain; background: #e9e1cf;
}
.face .prints .print figcaption { font-size: 12px; line-height: 1.4; margin-top: 5px; }
.face .print::before, .face .print::after { height: 12px; top: -6px; min-width: 25px; }
.face .print .play { opacity: .8; width: 28px; height: 28px; font-size: 12px; }
.face.scrolly::after, .scroll-cue { display: none; }
.layout-probe { position: fixed; left: -10000px; top: 0; width: var(--pw); height: var(--ph); font-size: var(--fs); visibility: hidden; transform: none; }
.pop-stage { bottom: 40px; }
.popup-region.is-up { --pop-angle: var(--stand-angle); }
.popup-replay { bottom: 0; font-size: 11px; min-height: 28px; background: #fff9e8c9; }
.pop-front svg { filter: drop-shadow(.6px 1px .4px #58482977); }
.pop-front, .pop-back { backface-visibility: hidden; }
.pop-back { transform: rotateY(180deg); }
.pop-wall { background-color: var(--side); box-shadow: inset 2px 0 4px #352c2344; }
.pop-shadow { filter: blur(9px); }
.pop-ground { box-shadow: 0 2px 0 #bcaa82, 0 4px 0 #eee3c7, 4px 10px 14px #4c3b2e36; }
.cathedral-nave .pop-wall { height: 74%; background-color: #aa9d81; }
.cathedral-door .pop-tab { display: none; }
.tower-cylinder { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-18deg); }
.tower-panel {
  position: absolute; height: 218px; width: 10.96px; left: 50%; top: 0;
  transform: translateX(-50%) rotateY(var(--azimuth)) translateZ(41px); transform-style: preserve-3d;
  background: repeating-linear-gradient(0deg,transparent 0 2px,#5e3d273b 2px 2.6px),
    repeating-linear-gradient(90deg,#b9794e 0 4px,#966442 4px 4.6px,#be8051 4.6px 9px);
  filter: brightness(var(--panel-light));
  backface-visibility: hidden;
}
.tower-window { position: absolute; display: block; width: 5.2px; height: 6.6px; left: 3px; border: .5px solid #b7b6a1; background: linear-gradient(135deg,#bbc7b7,var(--lit) 35%,#486267 80%); box-shadow: inset 1px 0 1px #182f2d; }
.tower-window::after { content: ''; position: absolute; left: 45%; top: 0; bottom: 0; width: .45px; background: #c9cfb8; }
.tower-window.balcony { width: 8.5px; left: 1.2px; background: #233c3e; border-color: #8d9b91; }
.tower-window.balcony::before { content: ''; position: absolute; left: -1px; right: -1px; bottom: -.6px; height: 2.8px; background: #8faba788; border: .5px solid #c1c0a6; box-shadow: 0 1px 0 #423c2f; }
.tower-band { position: absolute; left: -.5px; width: 12px; height: 3px; background: #e0cfaa; border-bottom: .7px solid #6d604b; transform: translateZ(1.4px); }
.tower-roof, .tower-plinth { position: absolute; left: 3px; top: -43px; width: 86px; height: 86px; border-radius: 50%; background: #77796a; border: 4px solid #d4c29d; transform: rotateX(90deg); transform-style: preserve-3d; }
.tower-roof { box-shadow: inset 0 0 0 4px #a7aa90; }
.tower-roof i { position: absolute; inset: 14px; border: 1px solid #6b745d; border-radius: 50%; background: repeating-linear-gradient(0deg,#879076 0 4px,#79866b 4px 5px); }
.tower-plinth { top: 174px; border-width: 3px; background: #b6a47e; }
.tower-door { position: absolute; bottom: 4px; left: 36px; width: 19px; height: 20px; background: linear-gradient(90deg,#1d3534 0 45%,#9b9c7b 45% 50%,#1e3635 50%); border: 1px solid #9d8e6f; transform: translateZ(41.5px); }
.candle-tower .pop-tab { left: 39%; width: 22%; }
.popup-region[data-scene="candle-house"] .pop-stage { bottom: 42px; --candle-scale: calc(var(--pop-scale) * .73); transform: translateX(-50%) scale3d(var(--candle-scale),var(--candle-scale),var(--candle-scale)) rotateY(calc(var(--hand-x) * 7deg)); }
.ground-canal { width: 302px; height: 119px; left: 8px; bottom: -30px; overflow: hidden; border-radius: 10px 10px 28% 28%; background: #607d73; border: 3px solid #b2a279; }
.canal-quay { position: absolute; inset: 0 0 50%; background: repeating-linear-gradient(0deg,#c0b596 0 12px,#958e7166 12px 13px),#c0b596; border-bottom: 7px solid #817858; }
.canal-ripples { position: absolute; inset: 60% 0 0; background: repeating-linear-gradient(174deg,transparent 0 7px,#d1d9bd44 7px 8px,transparent 8px 11px,#2f574754 11px 12px); }
.canal-boat .pop-wall { height: 30%; background: #244b4e; }
.canal-arches .pop-wall { height: 75%; }

/* The page lies on the table; all objects hinge to 90 degrees above it. */
body.tabletop { --stand-angle: -90deg; --ball-angle: 90deg; }
body.tabletop .book.open, body.tabletop .book.at-end { scale: .86 .86 .86; }
body.tabletop.open .tilt { transform: translateY(48px) rotateX(54deg) rotateZ(-3deg); }
body.tabletop .scene { perspective: 2400px; perspective-origin: 50% 20%; }
body.tabletop .pop-stage { transform: translateX(-50%) scale3d(var(--pop-scale),var(--pop-scale),var(--pop-scale)) rotateY(calc(var(--hand-x) * 9deg)); }
body.tabletop .popup-region[data-scene="candle-house"] .pop-stage { --candle-scale: calc(var(--pop-scale) * .88); transform: translateX(-50%) scale3d(var(--candle-scale),var(--candle-scale),var(--candle-scale)) rotateY(calc(var(--hand-x) * 9deg)); }
body.tabletop .book-shadow { filter: blur(20px); transform: translate3d(12px,30px,-28px); }
body.tabletop .pop-shadow { transform: translateZ(1px) skewX(-30deg) scaleY(1.5); opacity: .6; }
body.tabletop .popup-region.is-up { --table-rise: 112px; }
body.tabletop .is-up .candle-piece, body.tabletop .is-up .glass-piece { bottom: 0 !important; }
.ball-shell { transform: translateZ(22px) rotateX(var(--ball-angle)); }
@keyframes ball-roll {
  from { transform: translate3d(-24px,24px,22px) rotateX(var(--ball-angle)) rotateZ(-120deg); }
  to { transform: translate3d(95px,-32px,22px) rotateX(var(--ball-angle)) rotateZ(170deg); }
}
.view-toggle {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 17px; min-height: 40px;
  background: #f5ecd8; color: #444c37; border: 1px solid #e8d6ae;
  border-radius: 24px; box-shadow: 0 3px 10px #33251833;
  font: 13px var(--font-zh); cursor: pointer; pointer-events: auto;
}
.view-toggle small { font: 11px var(--font-ui); color: #73795e; }
.view-toggle[aria-pressed="true"] { background: #48533b; color: #fff0cf; border-color: #a4aa89; }
.view-toggle[aria-pressed="true"] small { color: #dbdec5; }
.view-toggle:focus-visible { outline: 2px solid #fff2c9; outline-offset: 4px; }
.reading-caption { display: none; }
.masthead { top: 19px; left: 26px; font-size: 13px; }
.masthead-mark { width: 30px; height: 34px; font-size: 23px; }
.masthead small { font-size: 10px; }
.music { top: 18px; right: 25px; min-height: 38px; }
.motion-toggle { top: auto; bottom: 10px; right: 25px; min-height: 40px; }
.pager { bottom: 14px; gap: 15px; }
.pager button { min-height: 38px; }
.places { left: 25px; bottom: 17px; gap: 8px; }
.places-caption, .family-note { display: none; }
.places button { font-size: 10px; }
.place-thread { width: 10px; }
.ribbon { height: 10%; }
.welcome { left: 7%; width: 270px; }
.welcome h2 { font-size: 82px; }
body:not(.open) .stage { padding-left: 29vw; }
.book.at-start .paper.t-cover { padding-top: 10%; }
.cover-portrait {
  width: min(51%, calc(var(--ph) * .27)); aspect-ratio: 1; flex: 0 0 auto;
  margin: 3% auto; padding: 4px;
  border: 1px solid #d6c29199; border-radius: 48% 48% 5px 5px;
  background: #eee7d4; box-shadow: 0 4px 12px #16251859;
}
.cover-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.paper.t-cover:has(.cover-portrait) .cover-name { font-size: 4.3em; margin-bottom: .18em; }

@media (max-width: 1150px) {
  body.open .places { display: none; }
  .motion-toggle span { display: none; }
}
@media (max-width: 900px) {
  body:not(.open) .stage { padding-left: 0; }
  .book.at-start { scale: .85 .85 .85; }
  .welcome .btn-open { bottom: 25px; }
  .welcome .hint, .places { display: none; }
  .view-toggle { top: 17px; padding: 9px 12px; font-size: 12px; }
  .view-toggle small { display: none; }
  .masthead { left: 17px; }
  .masthead small { display: none; }
  .masthead > span:last-child { max-width: 90px; font-size: 11px; }
  .music { right: 16px; width: 36px; padding: 8px; }
  .music .lbl-on, .music .lbl-off { display: none !important; }
  .motion-toggle { bottom: 10px; right: 13px; font-size: 10px; min-height: 38px; }
  .motion-toggle::before { display: none; }
  .pager { gap: 12px; }
  .pager button { min-width: 36px; min-height: 36px; }
  .pager button span { display: none; }
  .progress { width: 80px; }
  .face.has-popup .paper { padding: 14px calc(var(--pw) * .065) 22px; }
  .face.has-popup .paper .title { font-size: 1.4em; }
  .popup-replay { font-size: 10px; min-height: 27px; }
  body.tabletop.open .tilt { transform: translateY(20px) rotateX(48deg); }
  body.tabletop .scene { perspective-origin: 50% 10%; }
}
@media (max-width: 380px) {
  .masthead > span:last-child { display: none; }
  .masthead { gap: 0; }
  .motion-toggle { font-size: 9px; right: 8px; }
  .pager { left: 44%; }
}
@media (max-width: 900px) and (min-height: 560px) and (max-height: 680px) {
  body:not(.tabletop) .popup-region[data-scene="candle-house"] .pop-stage { --candle-scale: calc(var(--pop-scale) * .6); }
}
@media (max-height: 559px) {
  :root { --popup-height: calc(var(--ph) * .29); }
  .popup-region { width: 36%; height: var(--ph); }
  .pop-stage { bottom: 70px; }
  .popup-region[data-scene="candle-house"] .pop-stage { bottom: 56px; }
  .popup-replay { bottom: 13px; min-height: 23px; font-size: 9px; padding: 2px 8px; }
  .face.has-popup .paper { top: 0; left: 36%; padding: 14px 22px 22px; }
  .face.has-popup .paper.t-dedication, .face.has-popup .paper.t-quote { padding-top: 16px; }
  .face.has-popup .paper .title { font-size: 1.2em; margin-bottom: .35em; }
  .face.has-popup .paper .kicker { font-size: .68em; }
  .face .prints { margin-top: 12px; }
  .face .prints .print .ph, .face .prints .print.portrait .ph { height: 70px; }
  .face .prints .print figcaption { font-size: 10px; }
  .view-toggle { top: 13px; }
  .stage, body.open .stage, body.opening .stage { padding-top: 76px; padding-bottom: 80px; }
  .paper.t-cover, .book.at-start .paper.t-cover { padding: 19px 12% 18px 42%; font-size: 11px; }
  .paper.t-cover .cover-portrait { position: absolute; left: 13%; top: 50%; width: min(25%, 125px); margin: 0; transform: translateY(-50%); }
  .paper.t-cover .cover-name { font-size: 4.7em; margin: 5px 0 8px; }
  .paper.t-cover .cover-edition { margin: 0; }
  .paper.t-cover .cover-foot { margin-top: 12px; padding-bottom: 0; }
  .paper.t-back, .face.back .paper.t-back { padding: 18px; }
  .paper.t-back .sun.small { width: 44px; margin: auto auto 16px; }
}