@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400&display=swap');
:root { --ink:#352e26; --paper:#f5eedf; --gold:#bfa56e; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; min-height:100%; }
body { color:var(--ink); font-family:Inter,sans-serif; background:#302820; }
button { font:inherit; }
.room { position:relative; isolation:isolate; min-height:100svh; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 12%,#85735a 0,#5b4c3b 35%,#3b3128 76%,#2a231d 100%); }
.light { position:absolute;z-index:-2;top:-25%;left:17%;width:66%;height:95%;background:radial-gradient(ellipse,rgba(255,242,202,.3),transparent 68%);filter:blur(12px); }
.table { position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-8%;height:54%;transform:perspective(650px) rotateX(57deg);transform-origin:bottom;background:repeating-linear-gradient(93deg,rgba(255,255,255,.025) 0 2px,transparent 2px 120px),linear-gradient(90deg,#403126,#674d37 24%,#503b2d 55%,#6a5039 80%,#3d3026);box-shadow:inset 0 40px 80px rgba(12,8,5,.25),0 -1px rgba(255,255,255,.1); }
.book-stage { width:min(92vw,850px);min-height:650px;display:grid;place-items:center;perspective:1500px; }

.closed-book { position:relative;width:min(390px,72vw);aspect-ratio:.72;padding:21px;border:0;color:#ddc99d;cursor:pointer;background-color:#4a4136;background-image:linear-gradient(105deg,rgba(255,255,255,.08),transparent 16%,transparent 78%,rgba(0,0,0,.14)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.025) 1px 3px),repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px);box-shadow:-10px 11px 0 #ded3bb,-14px 15px 0 #9b8d75,0 38px 68px rgba(0,0,0,.48),inset 0 0 50px rgba(0,0,0,.3);transform:rotateX(8deg) rotateZ(-2deg);transition:transform .65s cubic-bezier(.2,.75,.2,1),box-shadow .65s ease,filter .65s ease; }
.closed-book::before { content:"";position:absolute;inset:0 auto 0 23px;width:3px;background:linear-gradient(90deg,rgba(0,0,0,.33),rgba(209,181,121,.34),rgba(0,0,0,.2));box-shadow:5px 0 9px rgba(0,0,0,.22); }
.closed-book::after { content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 26%,rgba(255,244,210,0) 42%,rgba(255,244,210,.16) 49%,rgba(255,244,210,0) 57%,transparent 100%);opacity:0;transform:translateX(-35%);transition:opacity .5s,transform .8s;pointer-events:none; }
.closed-book:hover { transform:rotateX(4deg) rotateZ(-.5deg) translateY(-10px);box-shadow:-10px 11px 0 #ded3bb,-14px 15px 0 #9b8d75,0 52px 76px rgba(0,0,0,.5),inset 0 0 50px rgba(0,0,0,.28);filter:brightness(1.04); }
.closed-book:hover::after { opacity:1;transform:translateX(35%); }
.book-pages { position:absolute;z-index:-1;left:-9px;right:8px;bottom:-12px;height:18px;background:repeating-linear-gradient(0deg,#e9dfca 0 2px,#cfc3ac 2px 3px);transform:skewX(-24deg);box-shadow:0 4px 7px rgba(0,0,0,.26); }
.ribbon { position:absolute;z-index:3;right:58px;bottom:-38px;width:18px;height:78px;background:linear-gradient(90deg,#71362d,#a84e42 50%,#71362d);filter:drop-shadow(2px 4px 2px rgba(0,0,0,.35));clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); }
.cover-frame { height:100%;border:1px solid rgba(207,176,111,.66);box-shadow:inset 0 0 0 4px rgba(60,43,24,.12),0 1px rgba(255,240,197,.09);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-shadow:0 1px 0 rgba(255,250,226,.16),0 -1px 1px rgba(0,0,0,.7); }
.cover-small { font:italic 400 1.25rem "Cormorant Garamond",serif;letter-spacing:.16em; }
.cover-title { font:500 clamp(2.15rem,5vw,3rem)/1 "Cormorant Garamond",serif;margin:12px 0 34px;letter-spacing:.035em;white-space:nowrap; }
.cover-mark,.ornament { color:var(--gold);font-size:.75rem; }

.open-book { position:relative;width:min(680px,88vw);min-height:520px;animation:openBook .9s cubic-bezier(.2,.75,.2,1) both;transform-style:preserve-3d; }
.open-cover { position:absolute;z-index:-2;inset:-10px -13px -16px;background-color:#443b32;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,rgba(0,0,0,.025) 1px 3px);box-shadow:0 38px 68px rgba(0,0,0,.5);transform:rotateZ(-.35deg); }
.open-cover::before { content:"";position:absolute;left:20px;top:3%;bottom:3%;width:3px;background:rgba(197,168,108,.25);box-shadow:5px 0 8px rgba(0,0,0,.18); }
.open-ribbon { position:absolute;z-index:0;left:50%;bottom:-50px;width:15px;height:92px;background:linear-gradient(90deg,#73382f,#a95145 50%,#73382f);transform:rotate(4deg);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);filter:drop-shadow(2px 4px 2px rgba(0,0,0,.3)); }
.paper { position:relative;z-index:1;min-height:520px;padding:clamp(54px,8vw,88px);display:flex;flex-direction:column;justify-content:center;background-color:var(--paper);background-image:linear-gradient(90deg,rgba(90,70,45,.11),transparent 5%,transparent 95%,rgba(90,70,45,.1)),repeating-linear-gradient(8deg,rgba(99,72,36,.013) 0 1px,transparent 1px 5px),radial-gradient(circle at 30% 20%,rgba(255,255,255,.65),transparent 45%);box-shadow:0 4px 0 #d8cdb7,0 7px 0 #eee5d3,0 10px 0 #c9bda8,inset 0 0 58px rgba(97,73,40,.09);transform-origin:left center;backface-visibility:hidden; }
.paper::after { content:"";position:absolute;inset:9px;border:1px solid rgba(116,91,51,.11);pointer-events:none; }
.paper h2 { font:500 clamp(2.2rem,6vw,4rem)/1.06 "Cormorant Garamond",serif;margin:0 0 34px;text-wrap:balance; }
.paper p { max-width:440px;font:400 clamp(1.1rem,2vw,1.3rem)/1.65 "Cormorant Garamond",serif;margin:0 0 22px; }
.paper .emphasis { margin:12px 0 30px;padding-left:24px;border-left:1px solid rgba(155,126,79,.38);font-style:italic;color:#5e5244; }
.page-one { text-align:center;display:flex;flex-direction:column;align-items:center; }.page-one p{max-width:500px;margin-left:auto;margin-right:auto}.page-one .core-sentence{font-size:clamp(3rem,7vw,4.8rem);margin:16px 0 28px;line-height:.98}.page-one .page-aside{max-width:430px;font-size:clamp(1rem,1.8vw,1.15rem);font-style:italic;color:#65594b}
.page-number { position:absolute;top:32px;right:44px;font:300 .62rem Inter,sans-serif!important;color:#91836f; }
.paper ul { list-style:none;padding:0;margin:0 0 32px;font:500 clamp(1.5rem,3.5vw,2rem)/1.7 "Cormorant Garamond",serif; }.paper li{border-bottom:1px solid rgba(53,46,38,.11)}.paper li span{font:300 .55rem Inter,sans-serif;letter-spacing:.12em;color:#9a8768;margin-right:22px}
.paper .small-note { font:300 .68rem/1.8 Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#7c6e5d; }
.page-four { text-align:center;align-items:center; }.page-four p{margin-left:auto;margin-right:auto}.page-four blockquote{margin:8px auto 25px;font:italic 400 clamp(2.5rem,7vw,4.2rem) "Cormorant Garamond",serif}.page-four .ornament{margin-bottom:40px}.page-four .fin{margin-top:32px;font:300 .58rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.3em}
.page-zone { position:absolute;z-index:5;top:0;bottom:0;width:36%;border:0;background:transparent;cursor:pointer;opacity:0; }.zone-left{left:0;cursor:w-resize}.zone-right{right:0;cursor:e-resize}.page-zone:disabled{cursor:default}.page-zone:focus-visible{opacity:1;outline:1px solid rgba(138,110,68,.35);outline-offset:-12px}
.progress { display:flex;justify-content:center;gap:10px;margin-top:30px}.progress span{width:3px;height:3px;border-radius:50%;background:#ddd0b8;opacity:.32}.progress .active{opacity:.85}
footer { position:absolute;bottom:20px; }.room footer a{color:rgba(240,226,201,.38);font:300 .52rem Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:color .3s}.room footer a:hover{color:rgba(240,226,201,.7)}
button:focus-visible { outline:2px solid #ead8b1;outline-offset:6px; }
.turn-next { animation:turnNext .68s cubic-bezier(.35,.04,.2,1) both; }.turn-previous { animation:turnPrevious .68s cubic-bezier(.35,.04,.2,1) both; }
@keyframes openBook{0%{opacity:.4;transform:scale(.64) rotateX(13deg) rotateZ(-2deg)}55%{opacity:1;transform:scale(.94) rotateX(4deg) rotateZ(-.5deg)}100%{transform:scale(1) rotateX(0) rotateZ(0)}}
@keyframes turnNext{0%{opacity:.25;transform:perspective(1200px) rotateY(-82deg);filter:brightness(.76)}55%{opacity:.85;filter:brightness(.94)}100%{opacity:1;transform:perspective(1200px) rotateY(0);filter:none}}
@keyframes turnPrevious{0%{opacity:.25;transform:perspective(1200px) rotateY(82deg);transform-origin:right center;filter:brightness(.78)}55%{opacity:.85;filter:brightness(.95)}100%{opacity:1;transform:perspective(1200px) rotateY(0);transform-origin:right center;filter:none}}
@media(max-width:760px){.book-stage{min-height:600px}.open-book,.paper{min-height:500px}.paper{padding:52px 42px 72px}.page-zone{width:42%}.progress{margin-top:24px}}
@media(max-width:520px){.room{align-items:start;padding-top:4vh}.book-stage{width:94vw;min-height:600px}.closed-book{width:73vw}.open-book{width:90vw}.paper{min-height:540px;padding:44px 30px 62px}.paper h2{font-size:2.35rem}.paper p{font-size:1.02rem;line-height:1.5;margin-bottom:16px}.page-one .core-sentence{font-size:2.75rem}.page-one .page-aside{font-size:.96rem}.page-number{right:28px}.open-cover{inset:-7px -8px -12px}footer{bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}