
:root{--desk:#2b2a27;--paper:#ddd6c1;--paper2:#d2cab2;--ink:#17150f;--soft:#4b463a;--spot:#7a2a1e;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--desk:#161513}}
:root[data-theme="dark"]{--desk:#161513}
*{box-sizing:border-box;margin:0}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;overscroll-behavior-x:none;background:var(--desk);overflow:hidden;font-family:'Old Standard TT',Georgia,'Times New Roman',serif;color:var(--ink)}
#stage{position:absolute;inset:0 0 44px 0;perspective:2400px;overflow:hidden}
#book{position:absolute;left:50%;top:50%;width:1760px;height:1180px;transform-origin:center}
.page{position:absolute;inset:0;padding:34px 40px;background:
 radial-gradient(ellipse at 0 0,rgba(90,70,30,.18),transparent 55%),
 radial-gradient(ellipse at 100% 100%,rgba(90,70,30,.2),transparent 50%),
 repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0 1px,transparent 1px 3px),var(--paper);
 transform-origin:left center;transition:transform 1s cubic-bezier(.6,.05,.25,1),opacity .35s .55s;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden;font-size:14.5px;line-height:1.42}
.page.turned{transform:rotateY(-105deg);opacity:0;pointer-events:none;box-shadow:none}
.folio{display:flex;justify-content:space-between;font-size:12.5px;font-style:italic;border-bottom:1px solid var(--ink);padding-bottom:4px;margin-bottom:14px;color:var(--soft)}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;line-height:1.02;font-weight:900}
.mast{font-family:'UnifrakturMaguntia','Old English Text MT',serif;font-size:96px;text-align:center;line-height:1;font-weight:400;letter-spacing:.5px}
.dateline{display:flex;justify-content:space-between;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:4px 2px;margin:8px 0 16px;font-size:13px}
.ear{border:1px solid var(--ink);padding:3px 8px;font-size:11.5px;text-align:center;line-height:1.2;width:132px}
.mastrow{display:flex;justify-content:space-between;align-items:center}
.grid{display:grid;gap:0 22px}
.col+.col,.rule{border-left:1px solid var(--ink);padding-left:22px}
p{text-align:justify;hyphens:auto;margin-bottom:8px}
p+p{text-indent:1.4em}
.cols2{column-count:2;column-gap:22px;column-rule:1px solid var(--ink)}
.cols3{column-count:3;column-gap:20px;column-rule:1px solid var(--ink)}
.drop::first-letter{float:left;font:900 62px/.8 'Playfair Display',serif;padding:5px 7px 0 0}
.kicker{font-style:italic;color:var(--spot);font-size:15px;margin-bottom:4px}
.head1{font-size:60px;letter-spacing:-1px;margin-bottom:8px}
.head2{font-size:34px;margin-bottom:6px;letter-spacing:-.4px}
.head3{font-size:21px;margin-bottom:4px}
.deck{font-style:italic;font-size:17px;line-height:1.25;margin-bottom:10px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:5px 0}
.by{font-size:12px;font-style:italic;margin-bottom:8px;color:var(--soft)}
figure{margin-bottom:12px;break-inside:avoid}
figcaption{font-size:12px;font-style:italic;line-height:1.3;border-top:1px solid var(--ink);margin-top:4px;padding-top:3px;color:var(--soft)}
.ph{position:relative;overflow:hidden;background:
 radial-gradient(circle,rgba(0,0,0,.55) 1.1px,transparent 1.5px) 0 0/5px 5px,
 linear-gradient(135deg,#8c8672,#3b382f 70%,#a9a38e);border:1px solid var(--ink);display:grid;place-items:center;color:#e9e3cf;font-style:italic;font-size:13px;text-align:center}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.35) contrast(1.15)}
.pull{font:700 italic 25px/1.15 'Playfair Display',serif;text-align:center;border-top:4px solid var(--ink);border-bottom:1px solid var(--ink);padding:10px 4px;margin:6px 0 14px;break-inside:avoid}
.box{border:2px solid var(--ink);padding:10px 12px;margin-bottom:12px;break-inside:avoid}
.box h3{border-bottom:1px solid var(--ink);padding-bottom:3px;margin-bottom:6px}
.box ul{list-style:none;padding:0;font-size:13.5px}
.box li{padding:3px 0;border-bottom:1px dotted var(--soft)}
a{color:inherit}
.jump{cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;background:none;border:0;font:inherit;color:inherit;padding:0;text-align:left}
.jump:hover,.jump:focus-visible{color:var(--spot)}
.ad{border:3px double var(--ink);padding:12px;text-align:center;margin-bottom:12px;break-inside:avoid}
.ad b{display:block;font:900 24px/1 'Playfair Display',serif;margin-bottom:4px}
.cont{font-style:italic;text-align:right;font-size:12.5px}
#nav{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;justify-content:center;align-items:center;gap:18px;color:#cfc8b2;font-style:italic;font-size:14px;padding-bottom:env(safe-area-inset-bottom,0px)}
#nav button{background:none;border:1px solid #6d6857;color:#e4ddc6;font:inherit;padding:3px 14px;cursor:pointer;border-radius:0}
#nav button:disabled{opacity:.3;cursor:default}
#nav button:focus-visible,.jump:focus-visible{outline:2px solid #e4a04a;outline-offset:2px}
.nt,.nt .page{transition:none!important}
@media (min-width:761px){
 #book{transition:transform .9s cubic-bezier(.6,.05,.25,1)}
 .page{inset:0 auto auto 0;width:880px;height:1180px;opacity:1;transition:transform .5s ease-in,visibility 0s .5s}
 .page.R{left:880px;transform-origin:left center}
 .page.L{left:0;transform-origin:right center}
 .page.R.gone{transform:perspective(2600px) rotateY(-90deg);visibility:hidden}
 .page.L.gone{transform:perspective(2600px) rotateY(90deg);visibility:hidden}
 .page:not(.gone){transform:perspective(2600px) rotateY(0);transition:transform .5s .5s ease-out,visibility 0s .5s}
 .page.R::after,.page.L::after{content:"";position:absolute;inset:0;pointer-events:none}
 .page.R::after{background:linear-gradient(90deg,rgba(40,30,10,.32),transparent 6%)}
 .page.L::after{background:linear-gradient(270deg,rgba(40,30,10,.32),transparent 6%)}
}
@media (prefers-reduced-motion:reduce){.page{transition:opacity .2s}.page,#book{transition:none!important}}
@media (max-width:760px){
 #stage{perspective:none}
 #book{width:100%;height:100%;left:0;top:0;transform:none!important}
 .page{padding:18px 16px;overflow-y:auto;font-size:15px}
 .page.turned{transform:translateX(-30px)}
 .mast{font-size:48px}.head1{font-size:36px}.head2{font-size:27px}.ear{display:none}
 .grid{display:block}.col+.col,.rule{border-left:0;padding-left:0}
 .cols2,.cols3{column-count:1}
 .ph{height:auto!important;aspect-ratio:4/3}
}
