:root { color-scheme:dark; background:#282725; }
#download-pdf { position:fixed; right:max(62px,calc(env(safe-area-inset-right) + 50px)); bottom:max(4px,env(safe-area-inset-bottom)); width:44px; height:44px; display:grid; place-items:center; padding:11px; color:#dcd8ce; z-index:10; border-radius:50%; }
#download-pdf svg { width:22px; height:22px; }
#download-pdf:focus-visible { outline:1px solid currentColor; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { overflow-x:hidden; }
main { min-height:100svh; display:grid; place-items:center; padding:clamp(10px,3vw,48px); }
#book { width:min(100%,calc((100svh - 64px)*2)); aspect-ratio:2; position:relative; isolation:isolate; }
#pages { position:absolute; inset:0; perspective:2400px; }
.opening { position:absolute; inset:0; transform-style:preserve-3d; }
.leaf { position:absolute; top:0; width:50%; height:100%; overflow:hidden; backface-visibility:hidden; flex:none; }
.leaf img { position:absolute; width:200%; height:100%; max-width:none; display:block; user-select:none; -webkit-user-drag:none; }
.leaf[data-half="left"] img { left:0; }.leaf[data-half="right"] img { right:0; }
.nav { position:absolute; z-index:5; top:0; bottom:0; width:50%; border:0; padding:0; background:transparent; cursor:pointer; touch-action:pan-y pinch-zoom; -webkit-tap-highlight-color:transparent; }
.previous { left:0; }.next { right:0; }
#book[data-single="true"] .previous { left:25%; width:25%; }#book[data-single="true"] .next { right:25%; width:25%; }
.nav:disabled { cursor:default; }
.nav:focus-visible,#listen:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
#listen { position:absolute; z-index:6; left:25%; top:1%; width:50%; height:16%; cursor:pointer; }
#listen[hidden] { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#rotate { display:none; }
@media (max-height:600px) and (orientation:landscape) { main { padding:12px; } #book { width:min(100%,calc((100svh - 24px)*2)); } }
@media (max-width:600px) and (orientation:portrait), (pointer:coarse) and (orientation:portrait) {
 main { display:none; }
 #rotate { min-height:100svh; display:flex; flex-direction:column; gap:24px; align-items:center; justify-content:center; padding:32px; text-align:center; color:#dcd8ce; font:400 16px/1.5 system-ui,sans-serif; }
 #rotate svg { width:48px; height:48px; }
}

.sheet { position:absolute; top:0; width:50%; height:100%; transform-style:preserve-3d; z-index:3; }
.sheet .face { inset:0; width:100%; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.sheet .front { transform:rotateY(0deg); }
.sheet .back { transform:rotateY(180deg); }
.turning { pointer-events:none; }

/* Keep the sound control outside the artwork. */
main { padding-bottom:56px; }
#book { width:min(100%,calc((100svh - 104px)*2)); }
#sound-toggle { position:fixed; right:max(12px,env(safe-area-inset-right)); bottom:max(4px,env(safe-area-inset-bottom)); width:44px; height:44px; display:grid; place-items:center; padding:11px; border:0; border-radius:50%; background:transparent; color:#dcd8ce; cursor:pointer; z-index:10; -webkit-tap-highlight-color:transparent; }
#sound-toggle svg { width:22px; height:22px; fill:currentColor; }
#sound-toggle .pause-icon, #sound-toggle[data-playing="true"] .play-icon { display:none; }
#sound-toggle[data-playing="true"] .pause-icon { display:block; }
#sound-toggle:focus-visible { outline:1px solid currentColor; outline-offset:0; }
@media (max-height:600px) and (orientation:landscape) { #book { width:min(100%,calc((100svh - 68px)*2)); } }

.encarte-links { position:fixed; left:max(16px,env(safe-area-inset-left)); bottom:max(8px,env(safe-area-inset-bottom)); z-index:10; display:flex; align-items:center; gap:clamp(12px,3vw,36px); }
.encarte-links > * { min-height:36px; display:inline-flex; align-items:center; padding:4px 0; border:0; border-bottom:1px solid currentColor; background:transparent; color:#dcd8ce; font:500 12px/1.2 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.encarte-links > :hover { color:#fff; }
.encarte-links > :focus-visible { outline:1px solid currentColor; outline-offset:4px; }
@media (max-width:700px) and (orientation:landscape) { .encarte-links { gap:12px; } .encarte-links > * { font-size:10px; letter-spacing:.03em; } }