@font-face{font-family:"NCL Gasdrifo";src:url(fonts/NCLGasdrifo.otf) format("opentype");font-display:swap}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#efeeea radial-gradient(ellipse 90% 70% at 50% 46%,#f8f7f5 0%,#efeeea 55%,#e6e4df 100%);color:#333;font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;display:flex;flex-direction:column;overflow:hidden}
header{padding:calc(26px + env(safe-area-inset-top)) 16px 0;text-align:center}
h1{margin:0;font-family:"NCL Gasdrifo",Georgia,serif;font-size:clamp(24px,2.6vw,34px);font-weight:400;line-height:1;letter-spacing:.02em;color:#2b2a28}
main{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:28px 20px}
body.spread main{padding:clamp(28px,5vh,56px) clamp(84px,10vw,170px)}
#stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#book{transition:transform .5s ease;flex:none;filter:drop-shadow(0 1px 1px rgba(40,34,24,.10)) drop-shadow(0 6px 10px rgba(40,34,24,.07)) drop-shadow(0 22px 38px rgba(40,34,24,.13))}
.page{background:#fff}
.page img{width:100%;height:100%;display:block;object-fit:contain;-webkit-user-drag:none;user-select:none}
/* soft gutter shading where the pages meet the spine */
.spread .page:not(.cover)::after{content:"";position:absolute;top:0;bottom:0;width:9%;pointer-events:none}
.spread .page.\--left::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.13),rgba(0,0,0,.04) 30%,transparent)}
.spread .page.\--right::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.13),rgba(0,0,0,.04) 30%,transparent)}
footer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 16px calc(22px + env(safe-area-inset-bottom));font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#77746e}
.pager{display:flex;align-items:center;gap:6px}
.nav{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:#5a5852;cursor:pointer;display:grid;place-items:center;transition:color .2s,background .2s,opacity .2s,transform .2s}
.nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.nav:hover{color:#111;background:rgba(0,0,0,.05)}}
.nav:disabled{opacity:.22;cursor:default;background:none}
.nav:focus-visible{outline:1.5px solid #77746e;outline-offset:3px}
body.spread .nav{position:fixed;top:50%;margin-top:-28px;width:56px;height:56px}
body.spread .nav svg{width:30px;height:30px;stroke-width:1}
body.spread #prev{left:clamp(14px,3vw,56px)}
body.spread #next{right:clamp(14px,3vw,56px)}
@media(hover:hover){body.spread #prev:not(:disabled):hover{transform:translateX(-3px)}}
@media(hover:hover){body.spread #next:not(:disabled):hover{transform:translateX(3px)}}
#indicator{min-width:104px;text-align:center;font-variant-numeric:tabular-nums}
#indicator b{font-weight:500;color:#2b2a28}
#indicator i{font-style:normal;margin:0 .5em;opacity:.55}
#progress{width:min(220px,50vw);height:1px;background:rgba(0,0,0,.14)}
#progress span{display:block;height:100%;width:0;background:#2b2a28;transition:width .6s ease}
/* tabs */
.tabs{display:flex;justify-content:center;gap:28px;margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.tabs a{color:#77746e;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
@media(hover:hover){.tabs a:hover{color:#2b2a28}}
.tabs a[aria-current]{color:#2b2a28;border-bottom-color:#2b2a28}
.tabs a:focus-visible{outline:1.5px solid #77746e;outline-offset:4px}
/* views: the book stays laid out while hidden so PageFlip keeps its size */
#stage,footer{transition:opacity .35s ease,visibility .35s}
#contact{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:28px 20px;overflow:auto;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
body.contact #stage,body.contact footer{opacity:0;visibility:hidden}
body.contact #contact{opacity:1;visibility:visible}
.card{width:min(440px,100%);margin:auto;text-align:center}
.card h2{margin:0 0 18px;font-family:"NCL Gasdrifo",Georgia,serif;font-size:clamp(30px,4vw,44px);font-weight:400;line-height:1.05;color:#2b2a28}
.lede{margin:0 auto 32px;max-width:34ch;font-size:15px;line-height:1.6;color:#5a5852}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:14px 24px;margin:0 0 36px;text-align:left;font-size:15px}
.card dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#77746e;padding-top:3px}
.card dd{margin:0;color:#2b2a28}
.card a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.2);transition:border-color .2s}
@media(hover:hover){.card a:hover{border-bottom-color:#2b2a28}}
.card .pdf{display:inline-block;padding:12px 22px;border:1px solid #2b2a28;border-radius:999px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#2b2a28;transition:background .2s,color .2s}
@media(hover:hover){.card .pdf:hover{background:#2b2a28;color:#f8f7f5}}