:root{--ink:#2c2b28;--paper:#e3dfd5;--yellow:#f4f343}*{box-sizing:border-box}body{margin:0;background:#22221f;color:var(--paper);font:11px monospace;height:100dvh;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;background:none;border:0;cursor:pointer;font:inherit;letter-spacing:.08em;padding:12px}button:hover{color:var(--yellow)}button:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}button:disabled{opacity:.2;cursor:default}header,footer{height:54px;padding:0 30px;display:flex;align-items:center;justify-content:space-between}header{border-bottom:1px solid #ffffff16}.brand{font-weight:bold;letter-spacing:.12em;color:var(--paper);text-decoration:none}.brand span{font-weight:normal;opacity:.5}main{height:calc(100dvh - 108px);display:flex;align-items:center;justify-content:center;gap:28px;perspective:2000px}#stage{height:calc(100% - 24px);aspect-ratio:11/17;max-width:calc(100vw - 140px);position:relative;perspective:1700px}#page{position:absolute;width:100%;height:100%;background:var(--paper);box-shadow:0 15px 40px #0008;transform-style:preserve-3d;touch-action:pan-y;user-select:none}#page>img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}#page .hotspot{position:absolute;background:transparent;padding:0;border:0;z-index:3;cursor:pointer}#page .hotspot:hover{box-shadow:inset 0 0 0 2px var(--yellow);background:#f4f3430a}.arrow{font-size:25px;width:40px}footer{border-top:1px solid #ffffff16}.hint{opacity:.45;font-size:9px;letter-spacing:.1em}nav{display:flex;align-items:center;gap:10px}#counter{min-width:60px;text-align:center}dialog{background:var(--ink);color:var(--paper);border:1px solid #7776;padding:0;width:min(1100px,95vw);max-width:95vw;max-height:94dvh}dialog::backdrop{background:#111e;backdrop-filter:blur(6px)}.dialogbar{padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff24;position:sticky;top:0;background:var(--ink);z-index:4}h2{font:16px monospace}#thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:22px}#thumbs button{padding:0;text-align:left}#thumbs img{width:100%;display:block;margin-bottom:8px}#media-body{display:flex;align-items:center;justify-content:center;min-height:200px}#media-body iframe{width:100%;aspect-ratio:16/9;border:0}#media-body img{max-width:100%;max-height:76dvh;object-fit:contain}#gallery-nav{text-align:center;padding:8px}.turn-sheet{position:absolute;inset:0;z-index:9;transform-origin:left center;backface-visibility:hidden;background:var(--paper);pointer-events:none;box-shadow:8px 0 28px #0005}.turn-sheet img{width:100%;height:100%}.turn-sheet:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0002,transparent 30%,#fff2);opacity:.5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:650px){header,footer{padding:0 12px;height:48px}.brand span,.hint{display:none}main{height:calc(100dvh - 96px);gap:0}#stage{height:auto;width:calc(100vw - 16px);max-width:calc((100dvh - 116px)*11/17);aspect-ratio:11/17}.arrow{display:none}#thumbs{grid-template-columns:repeat(2,1fr)}footer{justify-content:center;gap:25px}}@media(prefers-reduced-motion:reduce){*{animation-duration:0s!important}}

#page{display:flex;background:transparent;box-shadow:none;transform-style:flat}
.leaf{position:relative;flex:0 0 100%;height:100%;background:var(--paper);box-shadow:0 10px 28px #0005;overflow:hidden}
.leaf:empty{background:none;box-shadow:none}
.leaf>img{display:block;width:100%;height:100%;pointer-events:none}
#stage.spread{aspect-ratio:22/17;width:min(calc(100vw - 160px),calc((100dvh - 132px)*22/17));height:auto;max-width:none;perspective:2400px}
.spread .leaf{flex-basis:50%}
.spread #page:after{content:'';position:absolute;left:calc(50% - 12px);top:0;bottom:0;width:24px;background:linear-gradient(90deg,transparent,#0002 48%,#0003 50%,transparent);pointer-events:none;z-index:4}
.spread.cover #page:after{display:none}
.book-sheet{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:10;pointer-events:none}
.book-sheet.forward{left:50%;transform-origin:left center}.book-sheet.reverse{left:0;transform-origin:right center}
.sheet-face{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper);overflow:hidden;box-shadow:0 4px 12px #0002}
.sheet-face img{width:100%;height:100%;display:block}.sheet-face.verso{transform:rotateY(180deg)}
.sheet-face:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0001,transparent 12%,transparent 94%,#fff1);pointer-events:none}
.resting{position:absolute;top:0;width:50%;height:100%;z-index:5;pointer-events:none}.resting.left{left:0}.resting.right{right:0}

.leaf.blank-paper{background:var(--paper);box-shadow:0 10px 28px #0005}

.resting:empty{background:#22221f;box-shadow:none}
.sheet-face{-webkit-backface-visibility:hidden;backface-visibility:hidden}

.inline-film{position:absolute;z-index:8;background:transparent;overflow:hidden}.inline-film iframe{width:100%;height:100%;border:0;opacity:0;transition:opacity .55s ease}.inline-film iframe.ready{opacity:1}.inline-film>button{position:absolute;top:3px;right:3px;padding:3px 8px;background:#2c2b28;color:#e3dfd5;font-size:18px;z-index:2}

#index{width:min(760px,94vw)}#sections{display:block;padding:8px 26px 22px}.section-link{display:grid;grid-template-columns:28px 1fr auto;gap:18px;width:100%;padding:25px 0;text-align:left;align-items:start;border-bottom:1px solid #e3dfd538;letter-spacing:0}.section-link:last-child{border-bottom:0}.section-number{color:var(--yellow);padding-top:6px;font-size:11px}.section-copy strong{display:block;font-family:Georgia,serif;font-size:30px;font-weight:normal;line-height:1.1}.section-copy>span{display:block;max-width:430px;font-size:12px;line-height:1.6;opacity:.7;margin-top:8px}.section-pages{padding-top:7px;white-space:nowrap;font-size:11px}.section-pages span{margin-left:10px;color:var(--yellow)}@media(max-width:500px){#sections{padding:0 18px 12px}.section-link{gap:10px;grid-template-columns:22px 1fr;padding:20px 0}.section-copy strong{font-size:26px}.section-pages{grid-column:2;padding:0}.section-copy>span{font-size:11px}}

.inline-film{background:#000;isolation:isolate}.inline-film iframe{position:absolute;left:0;top:0;max-width:none;max-height:none;transform-origin:top left;display:block}.inline-film>button{border:1px solid #e3dfd566;line-height:1;min-width:26px;min-height:26px}

.spread #page:after{left:50%;width:1px;background:#2c2b281a}.zine-binding{position:absolute;left:50%;top:0;height:100%;width:0;z-index:4;pointer-events:none}.zine-binding i{position:absolute;left:-1px;top:25%;width:2px;height:11px;background:#77766f;border-left:1px solid #e3dfd5;box-shadow:1px 0 1px #2c2b2855;border-radius:1px;transform:rotate(-3deg)}.zine-binding i+i{top:75%;transform:rotate(2deg)}.leaf{box-shadow:0 5px 16px #0003}

/* Clinched staple legs appear only on the physical center spread. */
.zine-binding i{left:-2px;width:4px;height:18px;background:transparent;border:0;box-shadow:none;transform:rotate(-3deg)}
.zine-binding i:before,.zine-binding i:after{content:"";position:absolute;left:0;width:3px;height:8px;border-left:1.3px solid #77766f;border-bottom:1.3px solid #77766f;border-radius:0 0 0 2px;box-shadow:-.5px 0 #e3dfd5,1px 1px 1px #2c2b2833}
.zine-binding i:before{top:0;transform:rotate(-8deg)}
.zine-binding i:after{bottom:0;transform:rotate(172deg)}

.gallery-page{position:relative;width:min(100%,calc(76dvh * 11 / 17));margin:auto;touch-action:pan-y}
#media-body .gallery-page>img{display:block;width:100%;height:auto;max-height:none}
.gallery-hotspot{position:absolute;top:89.87%;height:3.3%;padding:0;background:transparent;border:0}
.gallery-hotspot:hover{background:#2c2b2814;box-shadow:inset 0 0 0 1px var(--ink)}
.gallery-hotspot:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}