:root{--ink:#1d2924;--paper:#f5f0e6;--line:#c9c0af;--green:#17392f}*{box-sizing:border-box}body{margin:0;background:#ded7ca;color:var(--ink);font:14px Arial,sans-serif}header{height:50px;display:flex;align-items:center;gap:18px;padding:0 3vw;background:var(--green);color:#fff}header a{color:#fff;text-decoration:none;font:18px Georgia,serif}select{margin-left:auto;padding:8px;background:#f5f0e6;border:0;font:12px Arial}main{min-height:calc(100vh - 76px);display:grid;grid-template-columns:42px minmax(0,1320px) 42px;justify-content:center;align-items:center;gap:14px;padding:14px}button{width:42px;height:42px;border:1px solid #a99f91;border-radius:50%;background:#f5f0e6;font-size:21px;cursor:pointer}.spread{width:min(100%,1320px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;filter:drop-shadow(0 8px 20px #352a1d33)}.page{aspect-ratio:1;background:var(--paper);border:1px solid var(--line);padding:7%;position:relative;overflow:hidden}.page img{width:100%;height:100%;object-fit:cover;display:block}.page.cover,.page.section{background:var(--green);color:#f7f1e7;display:flex;flex-direction:column;justify-content:flex-end}.page.text{display:flex;align-items:center}.page h1{margin:0 0 .2em;font:clamp(31px,4.1vw,66px)/.9 Georgia,serif;letter-spacing:-.055em}.page.cover h1{font-size:clamp(30px,3.8vw,60px)}.page h2{font:clamp(25px,3vw,46px)/.96 Georgia,serif;margin:0}.page p{white-space:pre-line;margin:.6em 0 0;font:clamp(14px,1.42vw,22px)/1.3 Georgia,serif}.page.medium p{font-size:clamp(13px,1.24vw,19px);line-height:1.3}.page.dense p{font-size:clamp(12px,1.06vw,16px);line-height:1.32}.page.cover p{font-size:clamp(13px,1.25vw,19px);line-height:1.28}.page small{position:absolute;left:7%;bottom:4.5%;max-width:75%;font:11px/1.25 Georgia,serif}.num{position:absolute;right:7%;bottom:4.5%;font-size:10px;letter-spacing:.1em}footer{text-align:center;padding:8px;background:#eee8de;color:#696258;font-size:10px}@media(max-width:700px){header{height:48px;gap:7px;padding:0 10px}header a{font-size:14px}header span{display:none}select{max-width:45%;font-size:10px}main{min-height:calc(100vh - 70px);grid-template-columns:1fr;padding:6px;gap:4px}.spread{gap:3px}main>button{position:fixed;z-index:2;bottom:24px}.spread+button{right:10px}main>button:first-child{left:10px}.page{padding:6%}.page h1{font-size:clamp(18px,6vw,38px)}.page p,.page.medium p,.page.dense p,.page.cover p{font-size:clamp(8px,2.4vw,15px)}.page small{font-size:7px}.num{font-size:7px}}
