@font-face{font-family:Yomogi;src:url('./assets/yomogi-book.woff?v=5') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;--paper:#fbf8f0;--ink:#66574a;--blue:#698b9a;--rose:#a6797b}
*{box-sizing:border-box}body{margin:0;background:#f7f2e9;color:var(--ink);font:14px/1.85 Yomogi,serif}a{color:inherit;text-underline-offset:5px}button,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.32}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #7797a5;outline-offset:5px}button{min-height:44px;border:0;background:transparent}button:hover:enabled{color:var(--blue)}.masthead{height:68px;display:flex;align-items:center;justify-content:space-between;max-width:1340px;margin:auto;padding:0 5%}.brand{text-decoration:none;font-size:19px}.brand span{font-size:12px;letter-spacing:.12em;color:#947f6d}.home-link{text-decoration:none;font-size:12px}.home-link span{padding-left:6px}.book-label{display:flex;justify-content:center;align-items:center;gap:22px;min-height:35px;margin:0 20px;color:#8b7867}.book-label h1{font-size:14px;font-weight:400;margin:0}.book-label>span{font-size:11px;color:#9b8b7a}.stage{height:calc(100dvh - 234px);min-height:370px;max-height:770px;max-width:1400px;margin:12px auto 0;position:relative;display:flex;justify-content:center;align-items:center;padding:8px 24px 18px}.book-host{position:relative;filter:drop-shadow(1px 12px 12px #6c594a20);transition:transform .5s ease}.book-host.front.landscape{transform:translateX(calc(var(--pw)/-2))}.book-host.back.landscape{transform:translateX(calc(var(--pw)/2))}.book{position:relative}.page{background:var(--paper);overflow:hidden}.canvas{position:absolute;top:0;left:0;width:200%;height:100%;container-type:inline-size;color:var(--ink);background:var(--paper)}.page.right .canvas{left:-100%}.canvas>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}.copy{position:absolute;margin:0;font-size:2.05cqw;line-height:1.95;letter-spacing:.025em;font-weight:400;white-space:pre;z-index:1}.folio{position:absolute;bottom:2.5%;font-size:1.05cqw;color:#a2907e}.folio.left-num{left:6%}.folio.right-num{right:6%}.page::after{content:'';pointer-events:none;position:absolute;inset:0}.page.--left::after{background:linear-gradient(90deg,transparent 95%,#6e4d2409)}.page.--right::after{background:linear-gradient(90deg,#6e4d240b,transparent 5%)}.cover .canvas,.endpaper .canvas{width:100%;container-type:inline-size}.cover-title{position:absolute;top:10%;width:100%;text-align:center;font:400 7.5cqw/1.9 Yomogi,serif;letter-spacing:.04em;margin:0;color:#688b9b}.cover-sub{position:absolute;top:31%;width:100%;text-align:center;font-size:2.7cqw;letter-spacing:.12em;color:#957c66;margin:0}.cover-credit{position:absolute;bottom:3%;width:100%;text-align:center;font-size:3cqw;letter-spacing:.08em;color:#876e5e}.endpaper .canvas{background:#f5eddf;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.endpaper p{font-size:5cqw;line-height:2.3}.endpaper small{font-size:2.8cqw;color:#9a8069}.endpaper .seed{width:7px;height:7px;background:#b4997c;border-radius:50%;margin:20px}.loading{position:absolute;top:45%;text-align:center;color:#927e6b;pointer-events:none}.loading[hidden]{display:none}.controls{display:flex;justify-content:center;align-items:center;gap:35px;margin:0 15px}.controls>button{padding:0 15px;min-width:105px;font-size:15px}.position{min-width:220px;text-align:center;display:flex;flex-direction:column;line-height:1.6}.position output{font-size:12px;color:#9d8b77}.position>span{font-size:14px}.extras{display:flex;justify-content:center;align-items:center;gap:20px;margin:5px 20px 0;color:#94816e;font-size:11px}.extras select{border:0;background:transparent;max-width:150px;min-height:44px;padding-right:4px;cursor:pointer}.extras button{text-decoration:underline;text-underline-offset:5px;padding:0 4px}.hint{color:#a18e7b}.afterword{max-width:720px;margin:72px auto 0;border-top:1px solid #d9caba90;border-bottom:1px solid #d9caba90;padding:22px 20px}.afterword-title{text-align:center;font:400 20px/1.9 Yomogi,serif;margin:0}.afterword-title span{font-size:12px;color:#a08a78}.letter{max-width:560px;margin:52px auto 20px;font:14px/2.2 Yomogi,serif}.letter h2{font-size:19px;font-weight:400;color:var(--blue);margin:38px 0 14px}.letter p{margin:18px 0}.letter .letter-intro{font-size:25px;line-height:2.1;margin-bottom:40px}.letter .signature{text-align:right;font-size:19px;margin-top:40px}.signature span{font-size:12px}footer{text-align:center;padding:36px 20px 50px;color:#9a8977;font-size:13px}footer a{font-size:11px;text-decoration:none;display:inline-block;margin-top:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{width:calc(100% - 40px);max-width:1500px;height:calc(100dvh - 40px);max-height:none;margin:auto;border:0;background:#f7f2e9;color:var(--ink);padding:0;box-shadow:0 10px 50px #47342626}dialog::backdrop{background:#51433599;backdrop-filter:blur(5px)}dialog[open]{display:flex;flex-direction:column}.zoom-toolbar{display:flex;align-items:center;gap:25px;padding:8px 24px;border-bottom:1px solid #d9caba}.zoom-toolbar>span{flex:1}#zoom-size{font-size:12px}.zoom-scroll{overflow:auto;flex:1;padding:24px;overscroll-behavior:contain}#zoom-content{position:relative;width:100%;aspect-ratio:1.6;margin:auto}#zoom-content.is-cover{width:min(100%,500px);aspect-ratio:.8}#zoom-content .canvas{width:100%;height:100%}#zoom-content.big{width:max(100%,1400px)}#zoom-content.is-cover.big{width:800px}.zoom-nav{display:flex;justify-content:center;gap:60px;padding:5px}.noscript{text-align:center}.fallback .page{display:none;position:absolute;width:50%;height:100%;left:0;top:0}.fallback .page.visible{display:block}.fallback .page.right,.fallback .cover{left:50%}.fallback.portrait .page{width:100%;left:0}
@media(max-width:700px){.masthead{height:59px;padding:0 20px}.brand{font-size:16px}.brand span{font-size:10px}.home-link{font-size:10px}.book-label{min-height:28px}.book-label h1{font-size:12px}.book-label>span{display:none}.stage{height:calc(100dvh - 232px);min-height:380px;max-height:750px;padding:8px 16px 18px;margin-top:6px}.controls{gap:4px}.controls>button{min-width:70px;padding:0 9px;font-size:13px}.position{min-width:0;flex:1;max-width:230px}.position output{font-size:10px}.position>span{font-size:12px}.extras{gap:17px;margin-top:3px;flex-wrap:wrap}.hint{display:none}.extras select{max-width:170px}.afterword{margin:55px 24px 0;padding:22px 0}.afterword-title{text-align:center;font:400 20px/1.9 Yomogi,serif;margin:0}.afterword-title span{display:block;font-size:11px}.letter{font-size:14px}.letter .letter-intro{font-size:22px}.copy{line-height:1.95}dialog{width:100%;height:100dvh}.zoom-toolbar{gap:13px;padding:8px 14px}.zoom-toolbar>span{font-size:12px}.zoom-scroll{padding:12px}.zoom-nav{gap:30px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Quiet reader: a complete spread on every screen. */
.stage{height:calc(100dvh - 155px);min-height:360px;max-height:780px;padding:13px 16px;margin-top:12px}
.book-tools{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:5}
.book-tools button{position:absolute;pointer-events:auto;color:#8b7a66;min-height:44px;padding:8px;border:0;background:transparent}
.book-tools button[hidden]{display:none}
.book-tools svg,.rotate-hint svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.corner-next{bottom:0;right:1%;font-size:clamp(9px,1vw,12px);letter-spacing:.035em}
.corner-next span{padding-left:4px}.corner-prev{bottom:0;left:1%;width:44px}.corner-prev svg{width:15px;height:15px}
.zoom-open{right:1%;top:0;width:44px;opacity:.6}.zoom-open svg{width:18px;height:18px}.book-tools.turning{visibility:hidden}
.canvas>img.cover-icon{inset:auto;top:3%;left:44.5%;width:11%;height:auto;object-fit:contain;z-index:2}
.cover-title{top:12%;font-size:7.2cqw;line-height:1.75}.cover-sub{top:33%;font-size:2.65cqw}.cover-credit{bottom:5%;font-size:2.8cqw}
.copy.dedication{color:#a17f7c;letter-spacing:.12em}.folio{display:none}.rotate-hint{display:none}
.afterword{margin-top:52px}.book-host{transition:transform .5s ease}
.book-home-return{text-align:center;margin:28px 20px 0;font-size:13px;color:#7b8c8e}
.book-home-return a{display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:7px 2px;border-bottom:1px solid #b9beb280;text-decoration:none}
.book-home-return a:hover{color:var(--blue);border-color:var(--blue)}
@media(max-width:700px) and (orientation:portrait){
 .masthead{height:59px}.stage{height:calc((100vw - 32px)/1.6 + 32px);min-height:0;max-height:none;margin-top:10px;padding:13px 16px}
 .rotate-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;line-height:1.7;color:#9b8876;margin:22px 12px 0}.rotate-hint svg{width:19px;height:19px;flex-shrink:0}
 .corner-next{font-size:9px;padding:8px 5px}.corner-prev{left:0}.zoom-open{right:0;top:0}.zoom-open svg{width:15px;height:15px}
 .afterword{margin:46px 24px 0}.cover-credit{bottom:8%}.book-home-return{margin-top:30px;font-size:12px}
}
@media(max-height:600px) and (orientation:landscape){
 .masthead{height:40px;padding:0 22px}.brand{font-size:14px}.brand span,.home-link{font-size:10px}.book-label,.rotate-hint{display:none}
 .stage{height:calc(100dvh - 46px);min-height:0;max-height:none;margin:0 auto;padding:8px 16px}
 .afterword{margin-top:60px}.corner-next{font-size:10px}
}

/* The afterword follows the book as an open letter. */
section.afterword{border-bottom:0;padding-top:38px}
.afterword-title span{display:block;margin-top:5px;letter-spacing:.05em}
.letter-closing{margin-top:38px;padding-top:22px;border-top:1px solid #d9caba80}
.letter-closing p{margin:25px 0}
.letter .closing-wish{font-size:25px;line-height:2.1;color:var(--blue);margin:40px 0 30px}
@media(max-width:700px){.afterword-title{font-size:19px}.letter .closing-wish{font-size:22px}.letter-closing{margin-top:32px}}
