:root{--navy:#0f2a3a;--gold:#e8ae4a;--paper:#f7f6f2;--ink:#122b3a;--radius:8px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:#061722;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden}
button,a,input{font:inherit}
button{color:inherit}
a{color:inherit}
.shell{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:radial-gradient(circle at 50% 35%,#183f54 0,#0b2635 46%,#05151f 100%)}
header,.controls{display:flex;align-items:center;gap:12px;padding:12px clamp(12px,3vw,42px);background:rgba(5,20,29,.96);z-index:20}
header{border-bottom:1px solid rgba(232,174,74,.5);justify-content:space-between;padding-top:max(12px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:13px;min-width:0;text-decoration:none}
.monogram{font:700 30px Georgia,serif;color:var(--gold);letter-spacing:-3px;flex:none}
.brand-copy{min-width:0}
.brand-name,.project-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-name{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.project-name{font-size:13px;color:#d7e0e5;margin-top:3px}
.header-actions{display:flex;align-items:center;gap:8px;flex:none}
.btn{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.07);border-radius:999px;min-height:44px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:rgba(232,174,74,.16);border-color:var(--gold)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700}
.btn[aria-pressed=true]#reader-toggle{border-color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.icon{width:20px;height:20px;display:block;flex:none}
.label{font-size:12px;white-space:nowrap}
main{min-width:0;min-height:0;overflow:hidden}
.viewer{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
.book-space{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;padding:18px 32px;perspective:2400px}
.stage{position:relative;width:min(100%,1440px);aspect-ratio:2.828/1;filter:drop-shadow(0 20px 24px rgba(0,0,0,.42));touch-action:pan-y pinch-zoom;transform-style:preserve-3d}
.spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;transform-style:preserve-3d}
.page{position:relative;background:var(--paper);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.page.left{border-radius:var(--radius) 0 0 var(--radius)}
.page.right{border-radius:0 var(--radius) var(--radius) 0}
.page img,.face img{width:100%;height:100%;display:block;object-fit:contain;background:var(--paper);user-select:none;-webkit-user-drag:none}
.blank,.page-error{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#f7f6f2,#e8e4dc);color:#52616a;text-align:center;padding:24px;font:italic 16px Georgia,serif}
.page-error{font:14px/1.5 Arial,sans-serif}
.turning{position:absolute;top:0;width:50%;height:100%;z-index:12;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.turning.forward{left:50%;transform-origin:left center;animation:turnForward .72s cubic-bezier(.32,.02,.14,1) forwards}
.turning.backward{left:0;transform-origin:right center;animation:turnBack .72s cubic-bezier(.32,.02,.14,1) forwards}
.face{position:absolute;inset:0;background:var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.back{transform:rotateY(180deg)}
.face:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.4) 46%,rgba(0,0,0,.16));animation:paperLight .72s ease}
@keyframes turnForward{0%{transform:rotateY(0)}48%{filter:brightness(.86);transform:rotateY(-88deg)}100%{transform:rotateY(-180deg)}}
@keyframes turnBack{0%{transform:rotateY(0)}48%{filter:brightness(.86);transform:rotateY(88deg)}100%{transform:rotateY(180deg)}}
@keyframes paperLight{0%,100%{opacity:0}46%,60%{opacity:.52}}
.edge-shadow{pointer-events:none;position:absolute;z-index:4;inset:0 auto 0 50%;width:2.5%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.13),transparent)}
.hint{text-align:center;margin:0;padding:8px 16px 14px;font-size:12px;line-height:1.5;color:#c1cdd3}
.controls{border-top:1px solid rgba(232,174,74,.35);justify-content:center;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.control-inner{width:min(820px,100%);min-width:0;display:flex;align-items:center;gap:16px}
.range{flex:1;min-width:40px;height:36px;accent-color:var(--gold);cursor:pointer}
.counter{font-variant-numeric:tabular-nums;min-width:120px;text-align:center;font-size:14px;color:#e0e7ea}
.nav{width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.35);background:rgba(5,20,29,.62);border-radius:9px;display:grid;place-items:center;cursor:pointer}
.nav:hover{background:var(--gold);color:var(--navy)}
.nav:disabled{opacity:.35;cursor:default;background:rgba(5,20,29,.35);color:#fff}
.loading{position:absolute;inset:0;z-index:16;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:var(--navy);font-size:14px}
.loading.done{display:none}
.loading-mark{font:700 56px Georgia,serif;color:var(--gold)}
.reader{height:100%;overflow:auto;padding:clamp(22px,4vw,52px);background:var(--paper);color:var(--ink);scroll-behavior:smooth}
.reader-page{max-width:1040px;margin:0 auto 48px;padding-bottom:40px;border-bottom:1px solid #c9c5b9;scroll-margin-top:24px}
.reader-page:last-child{border:0;margin-bottom:0}
.reader-page .eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#80500a}
.reader h1,.reader h2{line-height:1.2;margin:14px 0 22px;font-size:clamp(26px,4vw,40px)}
.reader p{font-size:17px;line-height:1.75;max-width:760px}
.reader-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.reader-images.single{grid-template-columns:1fr}
.reader figure{margin:0;min-width:0}
.reader figcaption{font-size:13px;line-height:1.5;margin-top:10px;color:#536572}
.reader img{display:block;width:100%;height:auto;max-height:680px;object-fit:contain;background:#ebe9e2}
.reader .reader-links{display:flex;flex-wrap:wrap;gap:20px}
.reader a{color:var(--navy);text-underline-offset:4px;font-weight:700}
.reader-note{max-width:1040px;margin:0 auto 30px}
.skip-link{position:fixed;top:8px;left:12px;transform:translateY(-180%);z-index:100;background:var(--gold);color:var(--navy);padding:12px;font-weight:700}
.skip-link:focus{transform:none}
.no-js .js-tool{display:none}
.no-js .shell{grid-template-rows:auto minmax(0,1fr)}
@media(max-width:1100px){.header-actions .label{display:none}.btn{width:44px;padding:0}.brand-name{font-size:10px}}
@media(max-width:800px){.stage{aspect-ratio:1.414/1}.book-space{padding:14px 12px}.spread{display:block}.page{position:absolute;inset:0;border-radius:7px!important}.page.left{display:none}.turning{width:100%;left:0!important}.turning.forward{transform-origin:left center}.turning.backward{transform-origin:right center}.edge-shadow{display:none}.desktop-only{display:none}.hint{font-size:11px;padding-bottom:10px}.controls{gap:10px;padding:10px 12px max(10px,env(safe-area-inset-bottom))}.control-inner{gap:8px}.counter{min-width:100px;font-size:12px}}
@media(max-width:540px){header{flex-wrap:wrap;gap:10px;padding:10px 12px}.brand{width:100%}.brand-copy{flex:1}.brand-name{font-size:10px}.project-name{font-size:12px}.header-actions{width:100%;justify-content:space-between;gap:8px}.header-actions .btn{flex:1;border-radius:9px;max-width:96px}.reader-images{grid-template-columns:1fr}.reader p{font-size:16px}.reader-page{padding-bottom:28px;margin-bottom:32px}}
@media(max-height:500px) and (min-width:541px){header{padding-block:6px}.btn,.nav{min-height:36px;height:36px;width:40px}.controls{padding-block:6px}.hint{display:none}.book-space{padding-block:8px}.monogram{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}