@import url("style/book-style.css");:root{--page-ratio:.8;--paper:#f3eee3;--ink:#26342b;color:var(--ink);font-family:var(--book-serif)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{overflow:hidden;background:radial-gradient(circle,#fafaf7,#dfe2dc)}.room{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;padding:20px 24px}.book-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(100%,1100px);margin:auto}.book-header h1{font-size:16px;font-weight:400}.book-header span{font:10px var(--book-sans);letter-spacing:.1em;color:#667267}.book-header span:last-child{text-align:right}.stage{display:grid;place-items:center;min-height:0}.book-rig{width:min(100%,calc((100dvh - 130px)*.8*2),1024px);height:min(calc(100dvh - 130px),640px)}.book{filter:drop-shadow(0 16px 20px #26342b30)}.book-page{position:relative;overflow:hidden;background:var(--paper)}.book-page.--left::before,.book-page.--right::before{content:"";position:absolute;z-index:3;inset-block:0;width:24px}.book-page.--left::before{right:0;background:linear-gradient(to left,#26342b22,transparent)}.book-page.--right::before{left:0;background:linear-gradient(to right,#26342b22,transparent)}.cloth{background:#263c31 url("style/cloth-weave.svg") repeat!important;color:#f7f1e5;padding:44px}.cloth h2{font-size:42px;line-height:1.1;font-weight:400;margin:90px 0 18px}.cloth p{font:10px var(--book-sans);letter-spacing:.1em;color:#d7c86a}.back{position:absolute;left:34px;bottom:35px;font-size:14px;line-height:1.6}.back small{color:#d7c86a}.endpaper{background:#dce2d9 url("style/paper-grain.svg") repeat}.paper{padding:28px;background:var(--paper) url("style/paper-grain.svg") repeat}.intro,.outro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:44px}.intro small,.outro small{font:10px var(--book-sans);letter-spacing:.12em;color:#577060}.intro h2,.outro h2{font-size:32px;font-weight:400;margin:18px 0}.intro p,.outro p{line-height:2;color:#5d685f}.photo,.zine{position:absolute;inset:28px;width:calc(100% - 56px);height:calc(100% - 56px);object-fit:cover}.photo{box-shadow:0 9px 18px #26342b22}.portrait{object-position:center}.landscape{object-position:center}.zine{object-fit:cover}.tag{position:absolute;bottom:12px;left:30px;font:10px var(--book-sans);letter-spacing:.08em;color:#5d6d60}.controls{display:grid;grid-template-columns:38px 1fr 38px;gap:20px;align-items:center;width:280px;margin:auto}.controls button{border:1px solid #cdd4ca;border-radius:50%;width:36px;height:36px;background:#f7f8f4;cursor:pointer}.status{text-align:center;display:grid;gap:3px}.status span{font:10px var(--book-sans);color:#59695d}.status small{font:9px var(--book-sans);color:#8b948c}@media(max-width:700px){.room{padding:14px 8px}.book-header{grid-template-columns:1fr auto}.book-header h1{font-size:13px}.book-header #orientation{display:none}}
/* Immersive continuous-spread treatment */
.paper{padding:0!important;background:var(--paper) url("style/paper-grain.svg") repeat!important}
.paper::after{content:"";position:absolute;z-index:2;left:-8%;right:-8%;bottom:7%;height:15px;background:#2f72c9;opacity:.52;transform:rotate(-7deg);mix-blend-mode:multiply;pointer-events:none}
.paper:nth-of-type(4n)::after{bottom:auto;top:13%;transform:rotate(6deg);opacity:.42}
.paper:nth-of-type(4n+1)::after{background:#d8c44e;opacity:.38}
.paper:nth-of-type(4n+3)::after{background:#d95645;opacity:.36}
.photo,.zine{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:saturate(.98) contrast(1.01)}
.photo{transform:scale(1.015);box-shadow:none!important}.tag{z-index:4;padding:5px 9px!important;bottom:18px!important;left:24px!important;background:#f3eee3b8;backdrop-filter:blur(3px)}
.cover-generated{padding:0!important}.cover-generated img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cover-generated::after{display:none}
.book[data-layout="landscape"]::after{content:"";position:absolute;z-index:20;left:50%;top:0;bottom:0;width:12px;transform:translateX(-50%);background:linear-gradient(to right,transparent 0%,#1d2b2222 34%,#1d2b223d 50%,#fff5e51c 68%,transparent 100%);pointer-events:none}
.book[data-layout="portrait"]::after{display:none}
.book-page.--left::after,.book-page.--right::after{content:"";position:absolute;z-index:6;top:31%;width:3px;height:38%;background:#2f72c9aa;box-shadow:0 0 0 1px #f3eee333;pointer-events:none}
.book-page.--left::after{right:6px;transform:rotate(-7deg)}.book-page.--right::after{left:6px;transform:rotate(-7deg)}
.photo{filter:saturate(.91) contrast(.97) sepia(.025)!important}.zine{filter:saturate(.88) contrast(.96) sepia(.035)!important}
/* Remove the over-explicit blue route; keep only a quiet paper seam. */
.paper::after{display:none!important}
.book-page.--left::after,.book-page.--right::after{width:2px;height:32%;top:34%;background:#756d5d4d;box-shadow:none;transform:rotate(-4deg)}
.book-page.--left::after{right:5px}.book-page.--right::after{left:5px}
.book[data-layout="landscape"]::after{width:10px;background:linear-gradient(to right,transparent 0%,#403b3220 42%,#403b322b 50%,#fff7e51a 62%,transparent 100%)}
.book-page.--left::after,.book-page.--right::after{display:none}
.opening-page{padding:0!important;background:#dce6ea!important}.opening-page::after{display:none!important}.opening-art{position:absolute;top:0;width:200%!important;max-width:none!important;height:100%!important;object-fit:cover!important;filter:saturate(.86) contrast(.95)!important}.opening-left{left:0}.opening-right{left:-100%}.opening-copy{position:absolute;z-index:4;left:9%;top:10%;color:#f7f1e5;text-shadow:0 1px 10px rgb(22 42 55 / 35%)}.opening-copy h2{margin:0;font:400 clamp(28px,5.4cqw,46px)/1.1 var(--book-serif);letter-spacing:.02em}.opening-copy p{margin:12px 0 0;font:400 10px/1.4 var(--book-sans);letter-spacing:.12em}
.fusion-page{padding:0!important;background:#e8e4d8!important}.fusion-page::after{display:none!important}.fusion-art{position:absolute;top:0;width:200%!important;max-width:none!important;height:100%!important;object-fit:cover!important;filter:saturate(.9) contrast(.96)!important}.fusion-left{left:0}.fusion-right{left:-100%}
.art-page img[data-src]{background:linear-gradient(110deg,#e9e3d6 20%,#f8f5ed 42%,#e9e3d6 64%);background-size:220% 100%;animation:page-placeholder 1.45s ease-in-out infinite}
@keyframes page-placeholder{to{background-position:-220% 0}}
.rotate-hint{display:none;margin:0;text-align:center;font:10px/1.4 var(--book-sans);letter-spacing:.06em;color:#5d685f}.rotate-hint span{display:inline-block;margin-right:5px;font-size:15px;vertical-align:-1px}

@media (max-width:700px) and (pointer:coarse) and (orientation:portrait){
  html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
  body{overscroll-behavior:none}
  .room{height:100dvh;padding:calc(12px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
  .book-rig{width:min(calc(100vw - 20px),calc((100dvh - 152px)*.8));height:min(calc(100dvh - 152px),calc((100vw - 20px)/.8))}
  .controls{width:min(280px,calc(100vw - 32px));padding-bottom:env(safe-area-inset-bottom,0px)}
  .controls button{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .controls button:active{transform:scale(.94);background:#e8e4d8}
  .mobile-spread-page{background:var(--paper)!important}
  .mobile-spread-page .fusion-art,.mobile-spread-page .opening-art{top:50%;left:0!important;width:100%!important;height:auto!important;aspect-ratio:2/1;object-fit:contain!important;transform:translateY(-50%)}
  .mobile-spread-page .opening-copy{left:8%;top:calc(50% - min(25vw,124px))}
  .mobile-spread-page .opening-copy h2{font-size:clamp(22px,7vw,32px)}
  .rotate-hint:not([hidden]){display:block;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}

@media (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .room{height:100dvh;padding:calc(7px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));grid-template-rows:22px minmax(0,1fr) 42px}
  .book-header{width:min(100%,760px)}
  .book-header h1{font-size:13px}
  .book-header span{font-size:9px}
  .stage{width:100%;height:100%}
  .book-rig{width:min(calc(100vw - 32px),calc((100dvh - 78px)*1.6));height:min(calc(100dvh - 78px),calc((100vw - 32px)/1.6));margin:auto}
  .controls{margin:auto;width:230px;gap:14px}
  .controls button{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .opening-art,.fusion-art{object-fit:contain!important;background:var(--paper)}
}