/* Perspective, spine and page thickness are all photographed into the asset. */
.photographic-book{--tilt-x:0deg;--tilt-y:0deg;position:absolute;left:31%;top:33%;width:44%;height:52%;padding:0;aspect-ratio:auto;border:0;border-radius:0;background:none;box-shadow:none;animation:none;transform:perspective(1600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-origin:center;filter:drop-shadow(2px 9px 5px #0008);transition:transform .6s ease,filter .6s ease;isolation:isolate}
.photographic-book:hover,.photographic-book:focus-visible{animation:none;transform:perspective(1600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));filter:drop-shadow(2px 9px 5px #0008) brightness(1.025)}
.photographic-book:before,.photographic-book:after{content:none}
.book-photo,.living-border{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Retain the original cutout silhouette when compositing the corrected artwork. */
.book-photo,.carried-book,.photographic-cover img{mask-image:url('assets/book-silhouette.png');mask-size:contain;mask-position:center;mask-repeat:no-repeat}
.living-border{mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-size:100% 100%,66% 45%;mask-position:center,55% 40%;mask-repeat:no-repeat;mask-composite:exclude;filter:url(#embroider-flow);opacity:.12;transition:opacity .7s}
.border-glint{position:absolute;inset:0;pointer-events:none;background:url('assets/photographic-volume.png') center/contain no-repeat;mask-image:linear-gradient(120deg,transparent 37%,#fff 49%,transparent 62%);mask-size:300% 300%;mix-blend-mode:screen;opacity:.015;animation:quiet-gold 12s ease-in-out infinite;transition:opacity .7s}
.photographic-book:is(:hover,:focus-visible,:active) .living-border{opacity:.85;filter:url(#gold-awake) brightness(1.2) saturate(1.35)}
.photographic-book:is(:hover,:focus-visible,:active) .border-glint{animation:awake-gold 7s ease-in-out infinite}
.effect-definitions{position:absolute;pointer-events:none}
.photographic-cover{width:min(510px,78vw);padding:0;border:0;background:none;box-shadow:none;margin-bottom:18px}.photographic-cover img{display:block;width:100%;max-height:65dvh;object-fit:contain;filter:drop-shadow(3px 8px 4px #0005)}
@keyframes quiet-gold{0%,100%{mask-position:100% 0;opacity:.01}50%{mask-position:0 100%;opacity:.025}}
@keyframes awake-gold{0%{mask-position:100% 0;opacity:.025}45%{opacity:.28}100%{mask-position:0 100%;opacity:.025}}
@media(max-width:650px){.photographic-book{left:31%;top:33%;width:44%;height:52%}}
@media(prefers-reduced-motion:reduce){.photographic-book,.photographic-book:hover,.photographic-book:focus-visible{transform:none;transition:none}.living-border,.border-glint,.photographic-book:is(:hover,:focus-visible,:active) .border-glint{animation:none}.living-border{filter:none;opacity:0}.border-glint{opacity:0}}
/* Gold effects follow the photographic cover, leaving lettering and pages still. */
.living-border{mask-image:none;clip-path:polygon(evenodd,52% 2%,91% 25%,59% 84%,14% 55%,52% 2%,52% 8%,21% 54%,58% 77%,85% 27%,52% 8%);}
.photographic-book:is(:hover,:focus-visible,:active) .living-border{animation:living-gold 5s ease-in-out infinite}
.photographic-book .border-glint{clip-path:polygon(52% 2%,91% 25%,59% 84%,14% 55%)}
@keyframes living-gold{0%,100%{filter:url(#gold-awake) brightness(1.12) saturate(1.2)}50%{filter:url(#gold-awake) brightness(1.38) saturate(1.5)}}
@media(prefers-reduced-motion:reduce){.photographic-book:is(:hover,:focus-visible,:active) .living-border{animation:none;filter:brightness(1.12);opacity:.2}}/* Keep the complete domain the clearest and largest name on the page. */
header{height:auto;min-height:142px;padding-top:22px;padding-bottom:22px;gap:24px}
.wordmark{font-size:clamp(42px,5.5vw,80px);line-height:1;white-space:nowrap;letter-spacing:-2px}
.wordmark .domain-suffix{display:inline;font:inherit;letter-spacing:inherit;color:#d5b77e;margin:0}
.wordmark .brand-caption{display:block;font:8px Inter,Arial,sans-serif;letter-spacing:3px;color:#b6ac97;margin-top:12px}
.intro h1{font-size:clamp(21px,2.25vw,32px);line-height:1.25;margin:16px 0}
@media(max-width:650px){header{min-height:150px;flex-wrap:wrap;gap:14px;padding-top:22px;padding-bottom:18px}.wordmark{font-size:clamp(36px,10vw,60px);letter-spacing:-1.5px}header button{margin-left:auto}.intro h1{font-size:23px;line-height:1.3}.intro{padding-top:25px;padding-bottom:24px}}
/* Picked-up quill and responsive flame. */
.quill-cursor{position:fixed;width:96px;height:144px;object-fit:contain;pointer-events:none;z-index:50;transform:translate(-9px,-141px);filter:drop-shadow(3px 4px 2px #0005);display:none}
.quill-held .scene,.quill-held .scene button,.quill-held #drawing.inked{cursor:none}
.quill-lifted-plate{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;clip-path:polygon(89% 15%,100% 15%,100% 40%,89% 40%);opacity:0}
.quill-held .quill-lifted-plate{opacity:1}
.ink-hot[aria-pressed=true]{box-shadow:0 0 18px #dab77d33}
.flame{--lean:0deg;--stretch:1;animation:flame-dance 1.2s ease-in-out infinite alternate;transform-origin:50% 100%;transition:filter .2s;box-shadow:0 0 10px 4px #ffbe5570,0 0 35px 12px #e5933025}
.candle.breezy .flame{animation-duration:.16s;filter:brightness(1.2);box-shadow:0 0 15px 6px #ffd57b80,0 0 45px 15px #e5933030}
@keyframes flame-dance{0%{transform:rotate(calc(var(--lean) - 5deg)) scale(.9,var(--stretch))}50%{transform:rotate(calc(var(--lean) + 3deg)) scale(1.05,calc(var(--stretch) * .9))}100%{transform:rotate(calc(var(--lean) + 7deg)) scale(.85,calc(var(--stretch) * 1.08))}}
@media(prefers-reduced-motion:reduce){.flame{animation:none;transition:none}.candle.breezy .flame{animation:none;filter:brightness(1.08)}}
.ink-hot{z-index:6}
/* Center the domain independently of the desk help control. */
header{position:relative;justify-content:center}
.wordmark{text-align:center}
header>button{position:absolute;right:5%;top:50%;transform:translateY(-50%)}
@media(max-width:900px){header{padding-bottom:45px}header>button{top:auto;bottom:13px;right:50%;transform:translateX(50%);white-space:nowrap;margin:0}}
footer{gap:28px}footer>span{max-width:900px;line-height:1.8}footer>button{flex-shrink:0}@media(max-width:650px){footer>span{max-width:none;flex:1}}
.paper-under{position:absolute;left:70%;top:38%;width:23%;height:27%;background:linear-gradient(110deg,#c7b38d,#e3d0a9 35%,#d0bb93);border:1px solid #a88a5e;box-shadow:2px 3px 5px #0005;pointer-events:none;z-index:2;transform:translate(6px,9px) rotate(-8deg)}
.paper-under.second{transform:translate(12px,16px) rotate(-13deg);z-index:1}
.paper-tools{position:absolute;left:72%;top:74%;z-index:7;display:flex;gap:8px}.paper-tools button{border:1px solid #bba575;background:#211b13df;color:#e6d3af;padding:9px 12px;font-size:10px}.paper-tools button:hover{background:#4d3a22}
#drawing:not(.inked){cursor:cell;touch-action:none}
#art-studio{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:22px;background:#1c1913;color:#eee3ca}
.studio-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-right:35px}.studio-bar h2{font-size:28px;margin:0 auto 0 0}.studio-bar button{padding:10px 15px;border:1px solid #9b8155;background:#332a1c;color:#eee3ca;font-size:12px}.studio-bar button[aria-pressed=true]{background:#78603b}.studio-hint{font-size:11px!important;color:#c4b99f;margin:12px 0}
.studio-paper{height:calc(100% - 105px);display:flex;align-items:center;justify-content:center;overflow:hidden}
#art-studio #drawing{position:static;left:auto;top:auto;transform:none;width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:7/6;background:radial-gradient(ellipse at 40% 30%,#efe0bf,#d5bf94);box-shadow:0 5px 35px #0007;border:1px solid #9c845b;object-fit:contain;touch-action:none}
#art-studio.quill-active #drawing{cursor:none}
body:has(#art-studio[open]) .quill-cursor{display:none!important}
#art-studio .studio-quill{position:fixed;pointer-events:none;z-index:4;width:96px;height:144px;transform:translate(-9px,-141px);object-fit:contain}
@media(max-width:650px){.paper-tools{left:71%;top:75%}#art-studio{padding:16px}.studio-bar{gap:7px}.studio-bar h2{font-size:23px;width:100%}.studio-bar button{font-size:10px;padding:8px}.studio-paper{height:calc(100% - 155px)}}
#living{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:22px 4vw;background:radial-gradient(ellipse at center,#3a3023,#15130f 75%);border:0;color:#eadfc8;overflow:hidden}
#living .book-exit{z-index:20;color:#e9d9b7;right:22px;top:14px}.full-cover{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.full-cover[hidden],.reading-book[hidden]{display:none}.front-cover{height:calc(100% - 105px);max-width:88vw;object-fit:contain;filter:drop-shadow(10px 15px 18px #0008);will-change:transform}.open-volume{padding:12px 30px;border:1px solid #bca16c;color:#e9d9b7;background:#302619;font-size:13px}.full-cover>p{font:italic 13px Georgia;margin:0;color:#b9a88a}
.reading-book{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-top:18px}.book-spread{position:relative;display:flex;width:min(1200px,92vw);height:min(760px,calc(100dvh - 145px));perspective:2200px;background:#704c2b;border:8px solid #4a2f19;border-radius:8px;box-shadow:0 20px 55px #0009,0 4px 0 #8d7147,0 8px 0 #c7b28a,0 12px 0 #53351e;isolation:isolate}.leaf{position:relative;width:50%;height:100%;min-width:0;padding:24px 30px 40px;color:#3f3021;background:radial-gradient(ellipse at 30% 20%,#f2e7cd,#d8c298);overflow:hidden}.left-leaf{background:linear-gradient(90deg,#dfcfaa,#f0e4c6 15%,#eee1c1 87%,#c0a87d 99%,#8b704d);border-radius:2px 0 0 2px}.right-leaf{background:linear-gradient(90deg,#aa8f62,#e5d4ae 5%,#f2e6c8 15%,#e5d3ac);border-radius:0 2px 2px 0}.running-title{font:8px Inter,Arial;letter-spacing:2px;color:#927952;padding-bottom:16px;border-bottom:1px solid #aa8b5433}.leaf-content{height:calc(100% - 28px);overflow-y:auto;padding-top:25px;scrollbar-width:thin}.leaf h2{font:500 clamp(26px,3.1vw,48px)/1.1 'Cormorant Garamond',Georgia;margin:0 0 15px}.leaf-subtitle{font-size:9px!important;letter-spacing:1.5px;color:#8c704a;line-height:1.8!important}.leaf-body{font:clamp(16px,1.6vw,23px)/1.7 'Cormorant Garamond',Georgia;white-space:pre-line}.leaf-content.title,.leaf-content.chapter{display:flex;flex-direction:column;justify-content:center;text-align:center;padding-bottom:30px}.title .leaf-body{font-style:italic;font-size:18px;margin-top:30px}.chapter .leaf-body{font-style:italic;font-size:26px;margin-top:25px}.folio{position:absolute;bottom:16px;left:0;width:100%;text-align:center;font:13px Georgia;color:#806b48}.contents-entry{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:0;border-bottom:1px dotted #9f835d;padding:23px 0;color:#4b3823;font:clamp(18px,2vw,28px) 'Cormorant Garamond',Georgia;text-align:left;gap:10px}.contents-entry:hover{color:#94652b}.contents small{display:block;margin-top:25px;font-size:9px;color:#90774f;line-height:1.7}.book-navigation{display:flex;align-items:center;justify-content:space-between;width:min(1200px,92vw);margin-top:22px}.book-navigation button{background:none;border:1px solid #a58b5d;color:#e5d3ab;font-size:27px;width:54px;height:40px;line-height:1}.book-navigation button:disabled{opacity:.25;cursor:default}.page-announcement{font:11px Georgia;color:#b7a17c}.return-contents{border:0;background:none;color:#baa37c;font-size:10px;margin-top:8px}.hinged-cover{position:absolute;inset:0 0 0 50%;transform-origin:left center;transform-style:preserve-3d;z-index:5;backface-visibility:hidden;background:#3c2919;border:2px solid #a98a51}.hinged-cover img{width:100%;height:100%;object-fit:fill}.turn-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:8}.turn-leaf.forward{left:50%;transform-origin:left center}.turn-leaf.backward{left:0;transform-origin:right center}.turn-face{position:absolute;inset:0;backface-visibility:hidden;box-shadow:0 0 18px #543b2040}.turn-back{transform:rotateY(180deg)}.turn-face>.leaf{width:100%;height:100%;pointer-events:none}
@media(max-width:650px){#living{padding:28px 2vw 14px}.book-spread{width:96vw;border-width:4px;height:calc(100dvh - 160px)}.leaf{padding:14px 12px 35px}.running-title{font-size:5px;letter-spacing:1px;padding-bottom:10px}.leaf-content{padding-top:18px}.leaf h2{font-size:26px}.leaf-body{font-size:16px;line-height:1.55}.title .leaf-body{font-size:14px}.chapter .leaf-body{font-size:20px}.leaf-subtitle{font-size:7px!important;letter-spacing:.5px}.contents-entry{font-size:19px;padding:18px 0}.book-navigation{width:94vw}.front-cover{height:calc(100% - 100px);max-width:96vw}}
@media(prefers-reduced-motion:reduce){.front-cover{will-change:auto}}
#living{position:fixed;inset:0}body:has(#living[open]){overflow:hidden}
/* Three off-white sheets, parallel and offset along the same desk angle. */
.paper-under{background:radial-gradient(ellipse at 35% 30%,#f3f1e8,#e8e5db 80%,#dedbd0);border-color:#c2bdb0;transform:translate(5px,7px) rotate(-11deg);box-shadow:1px 2px 3px #0004}
.paper-under.second{transform:translate(10px,14px) rotate(-11deg)}
#scene #drawing{background:radial-gradient(ellipse at 30% 25%,#f8f6ee,#eeece2 75%,#e4e0d4);border:1px solid #c7c1b3;box-shadow:1px 2px 4px #0003}
#art-studio #drawing{background:radial-gradient(ellipse at 30% 25%,#f8f6ee,#eeece2 75%,#e4e0d4);border-color:#c7c1b3}
.drawing-menu-actions{flex-wrap:wrap;justify-content:flex-start;padding-top:16px;border-top:1px solid #c6b594;margin-top:24px}
#scene #drawing{background:transparent;border:0;box-shadow:none}
.quill-cursor,#art-studio .studio-quill{width:var(--quill-width);height:var(--quill-height);transform:translate(-15%,-97%) rotate(-12deg);transform-origin:15% 97%;filter:drop-shadow(2px 3px 2px #0004)}
#living.levitating{background:transparent}#living.levitating::backdrop{background:transparent;backdrop-filter:none}.levitating .open-volume,.levitating .full-cover>p{visibility:hidden}
.flying-volume{position:fixed;z-index:12;pointer-events:none;transform-origin:center;will-change:transform}.flying-volume img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.flight-dimmer{position:fixed;inset:0;background:radial-gradient(ellipse at center,#3a3023,#15130f 75%);z-index:0;pointer-events:none}.lift-shadow{position:fixed;z-index:1;pointer-events:none;background:radial-gradient(ellipse,#000b,transparent 65%);border-radius:50%}.full-cover{position:relative;z-index:2}
#writing .actions{flex-wrap:wrap}#publishPoem{background:#4c3b22;color:#eee0c0}
#publish-poem label{display:block;font-size:12px;margin:16px 0;color:#635036}#publish-poem input:not([type=checkbox]),#publish-poem select{display:block;width:100%;margin-top:7px;padding:10px;background:#f8f2e4;border:1px solid #b9a47c;color:#30251b;font:14px Georgia}.poem-preview{padding:18px;border:1px solid #c7b894;max-height:180px;overflow:auto;white-space:pre-wrap;font:18px/1.6 Georgia;background:#f4ecd8}.rights-check{display:flex!important;gap:10px;align-items:flex-start;line-height:1.6}.rights-check input{margin-top:4px}.publish-feedback{font-size:12px!important;line-height:1.6}.publish-feedback a{color:#684a1f}.view-poems{background:#4c3b22;border:1px solid #967b4e;padding:12px;color:#eee0c0}.poetry-note{font:italic 16px/1.6 Georgia!important;color:#806a49}.poem-entry{display:block;text-align:left;width:100%;padding:16px 0;background:none;border:0;border-bottom:1px dotted #aa9064;color:#45321f}.poem-entry strong{display:block;font:23px 'Cormorant Garamond',Georgia}.poem-entry small{display:block;font-size:10px;margin-top:7px;color:#8a7049}.shelf-refresh,.remove-poem{background:none;border:1px solid #b39c72;padding:7px 10px;color:#705634;font-size:10px;margin:8px 0 14px}.remove-poem{margin-top:25px}.shelf-error{color:#84442c}
.living-cover-frame{position:relative;height:calc(100% - 105px);aspect-ratio:2/3;max-width:88vw;min-height:0;flex-shrink:1;perspective:1500px;filter:drop-shadow(10px 15px 18px #0008)}
.living-cover-frame .front-cover{display:block;width:100%;height:100%;max-width:none;object-fit:fill;filter:none}
.cover-gold-flow,.cover-gold-sheen{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.cover-gold-flow{mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-size:100% 100%,64% 68%;mask-position:center,58% 48%;mask-repeat:no-repeat;mask-composite:exclude;opacity:.55;filter:url(#gold-awake);animation:cover-gold-life 7s ease-in-out infinite}
.cover-gold-sheen{mix-blend-mode:screen;mask-image:linear-gradient(115deg,transparent 35%,#fff 50%,transparent 65%);mask-size:300% 300%;animation:cover-gold-travel 9s ease-in-out infinite}
.levitating .cover-gold-flow,.levitating .cover-gold-sheen{visibility:hidden}
@keyframes cover-gold-life{0%,100%{filter:url(#gold-awake) brightness(1.08) saturate(1.1)}50%{filter:url(#gold-awake) brightness(1.35) saturate(1.4)}}
@keyframes cover-gold-travel{0%{mask-position:100% 0;opacity:.03}50%{opacity:.16}100%{mask-position:0 100%;opacity:.03}}
@media(max-width:650px){.living-cover-frame{max-width:96vw;height:calc(100% - 100px)}}
@media(prefers-reduced-motion:reduce){.cover-gold-flow,.cover-gold-sheen{animation:none}.cover-gold-flow{filter:brightness(1.08)}.cover-gold-sheen{opacity:.04}}

/* Pickup keeps the photographed book's proportions; the cover changes perspective. */
.carried-book{position:fixed;z-index:12;object-fit:contain;pointer-events:none;filter:drop-shadow(8px 22px 16px #0007)}
.projected-cover{position:fixed;left:0;top:0;z-index:13;max-width:none;object-fit:fill;transform-origin:0 0;pointer-events:none;filter:drop-shadow(6px 12px 12px #0006)}
.book-spread{transform-origin:0 0}
.opening-volume .book-spread{background:transparent;border-color:transparent;box-shadow:none;perspective-origin:50% 50%}
.opening-volume .book-spread>.left-leaf{visibility:hidden}
.opening-volume .book-navigation,.opening-volume .return-contents{visibility:hidden}
.opening-volume .right-leaf{box-shadow:4px 5px 0 #b39a6d,7px 9px 0 #4a2f19,10px 16px 28px #0006}
.physical-cover{position:absolute;inset:0 0 0 50%;z-index:9;transform-origin:left center;transform-style:preserve-3d}
.physical-cover-front,.physical-cover-back{position:absolute;inset:0;backface-visibility:hidden;background:#3c2919;box-shadow:0 2px 3px #0006}
.physical-cover-front img{display:block;width:100%;height:100%;object-fit:fill}
.physical-cover-back{transform:rotateY(180deg)}
.physical-cover-back>.leaf{width:100%;height:100%;pointer-events:none}

/* A bound volume: leather boards, unequal layered stacks and bowed top sheets.
   Surface geometry is decorative; the reading text stays live and undistorted. */
.living-cover-frame,.projected-cover{isolation:isolate}
.living-cover-frame::before,.projected-cover::before{content:'';position:absolute;inset:5% 3% 3% 5%;z-index:-1;transform:translate(7px,11px);border:2px solid #6a492b;border-radius:10px 14px 12px 8px;background:repeating-linear-gradient(0deg,#b49b70 0 1px,#e0cba0 1px 3px,#c5ae80 3px 4px);box-shadow:3px 5px 0 #392516,5px 9px 0 #76512f,10px 18px 22px #0008}
.projected-cover .volume-jacket{display:block;width:100%;height:100%;object-fit:fill;max-width:none}
.book-spread{border:9px solid #50341f;border-radius:15px 12px 17px 12px;background:linear-gradient(90deg,#67472c,#302013 49.5%,#1e160e 50%,#735034);box-shadow:0 7px 0 #2d1d12,0 10px 0 #765334,0 13px 2px #28190f,0 28px 30px -7px #000b,0 42px 65px -22px #000b;margin-bottom:19px}
.page-stack{position:absolute;top:5px;bottom:-17px;width:50%;z-index:0;pointer-events:none;border:1px solid #af9568;background:repeating-linear-gradient(0deg,#b99f72 0 1px,#e3cda0 1px 2px,#c6ac7c 2px 3px,#ebd8af 3px 5px,#9d8056 5px 6px);box-shadow:0 3px 2px #20150b80}
.page-stack-left{left:-2px;clip-path:polygon(0 1%,20% 0,65% .5%,100% 3%,100% 97%,90% 97.7%,80% 98.2%,70% 98.5%,60% 98.7%,50% 99%,40% 99.1%,30% 99.4%,20% 99.3%,10% 99.2%,0 98.8%);border-radius:10px 0 2px 8px}
.page-stack-right{right:-2px;bottom:-12px;clip-path:polygon(0 3%,34% .5%,78% 0,100% 1.5%,100% 98.4%,90% 99%,80% 99.1%,70% 99%,60% 98.7%,50% 98.5%,40% 98.2%,30% 97.9%,20% 97.5%,10% 97.2%,0 97%);border-radius:0 8px 9px 1px}
.book-spread>.leaf{z-index:1}
.left-leaf{clip-path:polygon(0 1%,10% .4%,20% 0,30% .05%,40% .15%,50% .35%,60% .65%,70% 1.1%,80% 1.7%,90% 2.3%,100% 3%,100% 97%,90% 97.3%,80% 97.7%,70% 98.1%,60% 98.7%,50% 99.1%,40% 99.5%,30% 99.8%,20% 99.95%,10% 100%,0 99%);background:linear-gradient(90deg,#c5ac7b 0%,#ead8ae 3%,#f4e8c8 18%,#f0e1bc 62%,#e0cda4 84%,#b59a6e 96%,#705333 100%);border-radius:10px 0 0 8px}
.right-leaf{clip-path:polygon(0 3%,10% 2.2%,20% 1.5%,30% .9%,40% .5%,50% .2%,60% .05%,70% 0,80% .15%,90% .6%,100% 1.5%,100% 98%,90% 99%,80% 99.5%,70% 99.4%,60% 99.1%,50% 98.8%,40% 98.4%,30% 98%,20% 97.6%,10% 97.2%,0 97%);background:linear-gradient(90deg,#6b4d2f 0%,#b2986c 3%,#e4d1a6 12%,#f5e8c6 35%,#f1e1ba 79%,#d1b887 97%,#b79c70 100%);border-radius:0 8px 9px 0}
.leaf::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 45% 12%,#fff8df40,transparent 55%),repeating-linear-gradient(5deg,#80643e04 0 1px,transparent 1px 4px);box-shadow:inset 0 1px 1px #fff8df99,inset 0 -2px 2px #8b704555}
.leaf-content,.running-title,.folio{position:relative;z-index:1}
.folio{position:absolute;bottom:24px}
.leaf-content{padding-top:30px;padding-bottom:13px}
.leaf::after{content:'';position:absolute;bottom:1%;width:26px;height:24px;pointer-events:none;background:linear-gradient(135deg,#f6e8c3 20%,#cab080 70%,#8b704b 72%,transparent 75%);opacity:.65}
.left-leaf::after{left:0;transform:rotate(90deg)}
.right-leaf::after{right:0}
.opening-volume .page-stack-left{visibility:hidden}
.opening-volume .page-stack-right{bottom:-12px}
.opening-volume .book-spread{margin-bottom:19px}
.physical-cover-back>.leaf{clip-path:polygon(0 1%,10% .4%,20% 0,30% .05%,40% .15%,50% .35%,60% .65%,70% 1.1%,80% 1.7%,90% 2.3%,100% 3%,100% 97%,90% 97.3%,80% 97.7%,70% 98.1%,60% 98.7%,50% 99.1%,40% 99.5%,30% 99.8%,20% 99.95%,10% 100%,0 99%)}
@media(max-width:650px){.book-spread{border-width:6px;margin-bottom:14px}.page-stack-left{bottom:-12px}.page-stack-right{bottom:-9px}.leaf-content{padding-top:24px}.folio{bottom:20px}.leaf::after{width:16px;height:15px}.living-cover-frame::before,.projected-cover::before{transform:translate(4px,7px)}}

.paper-open{left:70%;top:38%;width:23%;height:27%;min-width:44px;min-height:44px;transform:rotate(-11deg);z-index:4}
.quill-held .paper-open{display:none}
/* Touch screens cannot hover: let the resting gold quietly invite a tap. */
@media(hover:none),(pointer:coarse){
 .photographic-book .living-border{opacity:.36;animation:living-gold 9s ease-in-out infinite}
 .photographic-book .border-glint{animation:awake-gold 11s ease-in-out infinite}
 body:has(#living[open]) .photographic-book .living-border,
 body:has(#living[open]) .photographic-book .border-glint{animation:none;filter:none;opacity:0}
}
@media(prefers-reduced-motion:reduce) and (hover:none),(prefers-reduced-motion:reduce) and (pointer:coarse){
 .photographic-book .living-border{animation:none;filter:brightness(1.12);opacity:.2}
 .photographic-book .border-glint{animation:none;opacity:0}
 body:has(#living[open]) .photographic-book .living-border{opacity:0;filter:none}
}
@media(max-width:650px){
 .viewport{overflow:hidden}
 .scene{width:100%;max-width:100%;margin:0;aspect-ratio:1672/941}
 header{min-height:0;gap:2px;padding:18px 5% 8px;flex-direction:column}
 header .wordmark{font-size:clamp(32px,9.4vw,60px);letter-spacing:-1px}
 header>button{position:static;transform:none;margin:0;min-height:44px;padding:8px 0}
 .intro{padding:14px 14px 18px}
 .intro h1{font-size:clamp(20px,5.5vw,29px);line-height:1.2;margin:12px 0}
 .intro p{line-height:1.7}
 #typed{font-size:clamp(3px,1vw,6px)}
 .candle{min-width:44px;min-height:44px;left:30%}
 .flame{left:45%;width:4px;height:11px;box-shadow:0 0 9px 3px #ffbe5560}
 .ink-hot{min-height:44px;min-width:44px;left:auto;right:2%}
 footer{padding:16px 5% 24px;gap:12px}
 footer button{min-height:44px;flex-shrink:0}
 footer>span{max-width:55%}
 .close{min-width:44px;min-height:44px}
}