:root{--brand:#2b5ce2;--enhance:brightness(1.08) contrast(1.06) saturate(1.12);--paper:#faf7f1;--paper-2:#f1ece2;--ink:#1b1a20;--ink-soft:#4a4954;--ink-faint:#8b8893;--stage:#e6e1d6;--line:#dcd5c7;--shadow:rgba(20,15,5,.22);--motif:.05;--serif:'Newsreader',Georgia,'Times New Roman',serif;--sans:'Archivo',system-ui,-apple-system,sans-serif;--ui-h:56px;color-scheme:light}
[data-theme="dark"]{--brand:#7d9cf5;--paper:#1f1e23;--paper-2:#18171c;--ink:#f1eee8;--ink-soft:#c3bfb8;--ink-faint:#85818a;--stage:#0e0e11;--line:#2d2c33;--shadow:rgba(0,0,0,.7);--motif:.08;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body{background:var(--stage);color:var(--ink);font-family:var(--sans);font-size:14px;display:grid;grid-template-rows:var(--ui-h) minmax(0,1fr) var(--ui-h);-webkit-tap-highlight-color:transparent;transition:background .4s}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.ui{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(14px,3vw,32px);color:var(--ink-soft);z-index:3}
.ui .mark{height:22px;width:auto;display:block}
.ui .group{display:flex;align-items:center;gap:6px}
.ibtn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink-soft);transition:background .2s,color .2s}
.ibtn:hover{background:color-mix(in oklab,var(--ink) 8%,transparent);color:var(--ink)}
.ibtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ibtn[disabled]{opacity:.3;pointer-events:none}
.indicator{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:13px;min-width:7ch;text-align:center;color:var(--ink-soft)}
.sym{position:absolute;width:62%;aspect-ratio:1;bottom:-14%;right:-16%;background:var(--ink);-webkit-mask:var(--sym) center/contain no-repeat;mask:var(--sym) center/contain no-repeat;opacity:var(--motif,.045);pointer-events:none;z-index:0}
.base.left .sym,.leaf .back .sym{right:auto;left:-16%}
.art>*:not(.sym){position:relative;z-index:1}
.stage{position:relative;display:grid;place-items:center;padding:clamp(8px,2vh,24px) clamp(10px,3vw,40px);perspective:2600px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.book{z-index:1;position:relative;transform-style:preserve-3d;width:min(100%,calc((100dvh - var(--ui-h)*2 - 48px)*1.5));aspect-ratio:3/2;max-height:100%;filter:drop-shadow(0 30px 40px var(--shadow))}
.book[data-mode="single"]{width:min(100%,calc((100dvh - var(--ui-h)*2 - 40px)*.72));aspect-ratio:3/4}
.page{position:absolute;top:0;bottom:0;background:var(--paper);overflow:hidden;color:var(--ink)}
.base.left{left:0;right:50%}.base.right{left:50%;right:0}
.book[data-mode="single"] .base.left{display:none}.book[data-mode="single"] .base.right{left:0}
.book.closed .base.left{visibility:hidden}.book.closed .base.right::after{display:none}.book.closed .base.right{cursor:pointer}.book.closed .hit.prev{display:none}
.book.closed .base.right .cover::after{content:"Open \2192";position:absolute;right:clamp(18px,6%,56px);bottom:clamp(18px,6%,56px);font-size:clamp(9px,1.2vmin,11px);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.book[data-mode="spread"] .base.left::after{content:"";position:absolute;inset:0 0 0 auto;width:9%;background:linear-gradient(to left,rgba(0,0,0,.14),rgba(0,0,0,.03) 40%,transparent);pointer-events:none}
.book[data-mode="spread"] .base.right::after{content:"";position:absolute;inset:0 auto 0 0;width:9%;background:linear-gradient(to right,rgba(0,0,0,.18),rgba(0,0,0,.04) 40%,transparent);pointer-events:none}
.base.right::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.45),transparent 60%);opacity:var(--cast,0);pointer-events:none;z-index:2}
.leaf{position:absolute;top:0;bottom:0;left:50%;right:0;transform-origin:left center;transform-style:preserve-3d;display:none;z-index:5;will-change:transform}
.book[data-mode="single"] .leaf{left:0}
.leaf.on{display:block}
.leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf .face.back{transform:rotateY(180deg)}
.leaf .face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:var(--sh,0)}
.leaf .face.front::after{background:linear-gradient(to right,rgba(0,0,0,.05),rgba(0,0,0,.28) 70%,rgba(0,0,0,.42))}
.leaf .face.back::after{background:linear-gradient(to left,rgba(0,0,0,.05),rgba(0,0,0,.28) 70%,rgba(0,0,0,.42))}
.leaf .face.front::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(to right,transparent 60%,rgba(255,255,255,.35));opacity:var(--gl,0)}
.art{height:100%;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.6vmin,16px);padding:clamp(14px,4.5%,48px) clamp(14px,4.5%,48px) clamp(26px,7%,60px)}
.art .run{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:clamp(6px,1.2vmin,12px);border-bottom:1px solid var(--line)}
.art .run img{height:clamp(14px,2.2vmin,24px);width:auto;display:block;order:2}
.art .run span{font-size:clamp(9px,1.2vmin,11px);letter-spacing:.2em;text-transform:uppercase;color:var(--brand);font-weight:500;order:1}
.art figure{margin:0;position:relative;min-height:0;overflow:hidden}
.art figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .5s ease;filter:var(--enhance) drop-shadow(0 6px 14px rgba(0,0,0,.14))}
.art figure img.loaded{opacity:1}
.art figure::before{content:"Loading";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);opacity:1;transition:opacity .3s}
.art figure.ready::before{opacity:0}
.art figure.failed::before{content:"Image unavailable";opacity:1}
.cap{font-family:var(--sans);line-height:1.45;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(10px,2vmin,20px)}.cap .txt{min-width:0;flex:1}
.cap .qr{flex:none;width:clamp(64px,13vmin,140px);height:auto;aspect-ratio:1;display:block;border-radius:4px;background:#fff;padding:3px;box-shadow:0 0 0 1px var(--line)}
.art.sold figure img{filter:grayscale(1) opacity(.45)}.art.sold .cap .t,.art.sold .cap .a{color:var(--ink-faint)}
.cap .tag{display:inline-block;margin-top:8px;font-size:clamp(9px,1.2vmin,11px);letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--ink-faint);border:1px solid var(--ink-faint);border-radius:2px;padding:4px 8px}
.art.sold figure::after{content:"Sold";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);font-family:var(--sans);font-size:clamp(14px,3vmin,30px);letter-spacing:.35em;text-transform:uppercase;font-weight:500;color:var(--ink);border:2px solid var(--ink);padding:.3em .6em .3em .95em;opacity:.55;z-index:2}
.cap .t{font-family:var(--serif);font-size:clamp(18px,3.2vmin,32px);line-height:1.2;color:var(--ink)}
.cap .a{font-size:clamp(16px,2.6vmin,24px);color:var(--brand);font-weight:500;margin-top:3px}
.cap .m{font-size:clamp(13px,1.9vmin,17px);color:var(--ink-soft);margin-top:4px;letter-spacing:.02em}
.cap .n{font-size:clamp(11px,1.4vmin,13px);color:var(--ink-soft);margin-top:6px;max-width:48ch;text-wrap:pretty}
.art .num{position:absolute;bottom:clamp(8px,2.5%,18px);font-size:10px;letter-spacing:.14em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.base.left .num,.leaf .back .num{left:clamp(14px,4.5%,48px)}.base.right .num,.leaf .front .num{right:clamp(14px,4.5%,48px)}
.cover,.closing{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,2vmin,20px);padding:clamp(18px,6%,56px);text-align:center;background:var(--paper-2)}
.cover{position:relative;background:var(--brand);color:#fff;text-align:left;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(12px,3vmin,32px)}
.cover .mark{height:clamp(22px,4.2vmin,46px);justify-self:end;width:auto;order:2}
.cover figure{margin:0;position:relative;min-height:0;overflow:hidden}
.cover figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:var(--enhance) drop-shadow(0 18px 40px rgba(0,0,0,.4))}
.cover h1{font-family:var(--serif);font-weight:400;font-size:clamp(24px,5vmin,56px);margin:0;line-height:1.02;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.cover h1 em{font-style:italic;color:#fff}
.cover .sub{font-size:clamp(10px,1.4vmin,13px);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:clamp(8px,1.6vmin,14px)}
.cover .year{font-size:clamp(10px,1.4vmin,13px);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.75);align-self:center}
.cover .top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.closing{align-content:center;grid-template-rows:auto auto auto;position:relative}
.closing .mark{position:absolute;top:clamp(14px,4.5%,48px);right:clamp(14px,4.5%,48px);height:clamp(14px,2.2vmin,24px);margin:0;justify-self:auto}
.closing h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,3.6vmin,38px);margin:0 0 clamp(10px,2vmin,20px);color:var(--ink)}
.closing .lines{display:grid;gap:6px;font-size:clamp(13px,1.8vmin,17px);color:var(--ink-soft)}
.closing .credit{font-size:clamp(10px,1.3vmin,12px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:clamp(14px,3vmin,28px)}
.hit{position:absolute;top:0;bottom:0;width:18%;z-index:6;cursor:pointer;opacity:0;transition:opacity .25s;display:grid;align-items:center;color:var(--ink-soft);outline:none}
.hit.prev{left:0}.hit.next{right:0}
.hit:hover,.hit:focus-visible{opacity:1}
.hit svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin:0 10px}
.hit.next svg{justify-self:end}
.book[data-mode="single"] .hit{width:22%}
.leaf.on ~ .hit{pointer-events:none}
.book.dragging .leaf{cursor:grabbing}
.corner{position:absolute;bottom:0;right:0;width:clamp(44px,10%,80px);height:clamp(44px,10%,80px);z-index:7;cursor:grab;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.05) 50%);opacity:0;transition:opacity .3s}
.book:hover .corner{opacity:1}
.overview{position:fixed;inset:0;z-index:20;background:color-mix(in oklab,var(--stage) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;grid-template-rows:var(--ui-h) minmax(0,1fr);opacity:0;pointer-events:none;transition:opacity .25s}
.overview.open{opacity:1;pointer-events:auto}
.overview .ui{justify-content:space-between}
.overview .ui h3{margin:0;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink)}
.grid{overflow:auto;padding:clamp(14px,3vw,36px);display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:clamp(12px,2vw,24px);align-content:start}
.thumb{display:grid;gap:8px;text-align:left;border-radius:4px;padding:6px}
.thumb .ph{aspect-ratio:1;position:relative;overflow:hidden;background:var(--paper);display:grid;place-items:center;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.thumb img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;display:block;filter:var(--enhance)}
.thumb .ph.text{font-family:var(--serif);font-size:13px;color:var(--ink-soft);text-align:center;line-height:1.3}
.thumb .l{font-size:12px;color:var(--ink-soft);line-height:1.3}
.thumb .l b{display:block;font-weight:500;color:var(--ink);font-family:var(--serif);font-size:13px}
.thumb.cur .ph{outline:2px solid var(--brand);outline-offset:2px}
.thumb:hover .ph{transform:translateY(-2px);transition:transform .2s}
.fade .base{transition:opacity .25s}
.fade.out .base{opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){.indicator{font-size:12px}.ui .mark{height:18px}:root{--ui-h:48px}.ibtn{width:40px;height:40px}}
@media (max-height:480px) and (orientation:landscape){:root{--ui-h:40px}.stage{padding:4px clamp(10px,3vw,40px)}}
@media (min-width:2200px){body{font-size:16px}:root{--ui-h:72px}.ui .mark{height:28px}}
@media (prefers-reduced-motion:reduce){.art figure img,.hit,.book,.overview{transition:none}}