/* Replaceable CSS book: optional assets are loaded by book-assets.js. */
:root{--chapter-width:min(88vw,calc((100dvh - 124px)*.825));--chapter-height:calc(100dvh - 124px)}
.book-presentation[hidden],.town-opening[hidden],.chapter-stage[hidden]{display:none}
.book-presentation{position:absolute;inset:0;padding:76px 0 48px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;perspective:1800px;background:transparent;overflow:hidden}
.book-object{position:relative;width:calc(var(--chapter-width)*2);height:var(--chapter-height);transform-style:preserve-3d;filter:drop-shadow(0 25px 40px #0007)}
.story-active[data-story-view="chapter"] .book-object{cursor:pointer;touch-action:pinch-zoom}
.book-paper{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#e6d3aa,#fff9e6 12%,#f6eacd 85%,#dcc594);border:4px solid #987038;border-radius:5px;box-shadow:inset 0 0 40px #9e744325,4px 7px 0 #e3cfa8,6px 10px 0 #77512e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;padding:7%;text-align:center;color:#45633f;font:italic clamp(14px,2.3vw,30px)/1.3 Georgia,serif}
.book-paper--left{left:0}
/* Horizontal bounds follow the illustrated sheet, offset toward the spine.
   Vertical insets cover the ornaments while retaining roughly 5% paper margins. */
.book-paper--right{right:0;--page-content-left:4.1%;--page-content-right:11.1%;--page-content-top:3.5%;--page-content-bottom:7.5%}.book-page-intro>strong{font:700 clamp(20px,3vw,42px)/1.2 "Roboto Slab",Georgia,serif;color:#233d32}.book-paper>span:last-child,.book-page-intro>span:last-child{font-size:14px}
.book-spine{position:absolute;top:0;bottom:0;left:49%;width:2%;background:linear-gradient(90deg,#47331d44,#5f452e66,#f4e5c0);z-index:2}
.book-cover{position:absolute;right:0;top:-1%;bottom:-1%;width:51%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:16px;padding:7%;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;z-index:4;background:var(--book-cover-art,none) center/100% 100%,radial-gradient(ellipse at 50% 25%,#49724c,#214a35 70%);border:7px solid #173826;border-radius:5px 12px 12px 5px;color:#efd69b;text-align:center;box-shadow:inset 0 0 0 2px #b79b5f,7px 9px 0 #e0c697,10px 12px 0 #59401f}
.book-cover strong{font:700 clamp(22px,3.2vw,46px)/1.15 "Roboto Slab",Georgia,serif;letter-spacing:-.02em}.book-cover>span:not(.book-leaf):not(.cover-border){font:italic clamp(11px,1.3vw,18px)/1.3 Georgia,serif}.book-cover .cover-caption{margin-top:20px}.cover-border{position:absolute;inset:15px;border:1px solid #c5a76b88;border-radius:3px;pointer-events:none}.book-leaf{font-size:42px;color:#b3985e}
.book-opening-caption{position:absolute;bottom:9%;color:#fff1d0;font:italic 18px Georgia,serif;text-shadow:0 2px 8px #000}
.town-dimmer{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}.town-dimmer[hidden]{display:none}
.story-active .chapter-stage{position:absolute;inset:-4px;border-radius:3px;isolation:isolate;background:transparent;overflow:hidden;text-align:left;font:400 16px/1.5 "Nunito",sans-serif;color:var(--ink,#24312c)}
/* Each complete sheet owns its paper artwork; only the content is inset. */
.story-active .book-sheet{position:absolute;inset:0;visibility:hidden;isolation:isolate;overflow:hidden;background:transparent}
.story-active .book-sheet.is-active,.story-active .book-sheet.is-turning{visibility:visible}
.story-active .book-sheet .story-page{inset:calc(var(--page-content-top) + 4px) calc(var(--page-content-right) + 4px) calc(var(--page-content-bottom) + 4px) calc(var(--page-content-left) + 4px);height:auto;border-radius:5px;container-type:size;container-name:chapter}
/* A projective image mesh follows the paper curve without bending the UI. */
.story-active .book-sheet .story-page{background:transparent;-webkit-mask-image:var(--page-artwork-mask,none);mask-image:var(--page-artwork-mask,none);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.story-active .book-sheet .story-page:after{content:"";position:absolute;inset:0;z-index:20;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#49321d25,transparent 16px);box-shadow:inset 0 -2px 5px #49321d18}
.curved-page-artwork .page-artwork-strip:not(:first-child){display:none}
.story-active .curved-page-artwork{background:transparent}
.story-active .curved-page-artwork .page-artwork-strip{display:block;position:absolute;top:0;overflow:hidden;transform-origin:0 0}
.story-active .page-artwork-strip:after{content:"";position:absolute;inset:0 0 auto;height:6px;z-index:2;pointer-events:none;background:linear-gradient(#49321d24,transparent)}
.story-active .page-artwork-strip>.scene-camera,.story-active :is(#welcome,[data-chapter-id="welcome"]) .page-artwork-strip>.scene-sketch{position:absolute;max-width:none;right:auto;bottom:auto;top:0}
/* The ordinary document uses the single original scene without its mesh. */
html:not(.story-active) .curved-page-artwork .page-artwork-strip{position:static!important;transform:none!important;width:auto!important;height:auto!important}
html:not(.story-active) .page-artwork-strip>.scene-camera{position:static!important;width:100%!important;height:100%!important;left:auto!important}
@media print{.curved-page-artwork .page-artwork-strip:not(:first-child){display:none!important}.curved-page-artwork .page-artwork-strip{position:static!important;transform:none!important;width:auto!important;height:100%!important}.page-artwork-strip>.scene-camera{position:static!important;width:100%!important;height:100%!important;left:auto!important}}
@media print{.story-active .book-sheet .story-page{clip-path:none;-webkit-mask-image:none;mask-image:none}.story-active .book-sheet .story-page:after{display:none}}
html:not(.story-active) .book-sheet{display:contents}
.story-active .page-corner{position:absolute;right:0;bottom:0;width:88px;height:88px;padding:0;color:#665033}
.story-active .page-corner:before{background:linear-gradient(135deg,#c4ad82 0%,#fffdf3 54%,#f1e2bf 100%);clip-path:polygon(100% 0,100% 100%,0 100%);filter:drop-shadow(-2px -2px 3px #30200f40)}
.story-active .page-corner span{left:68%;top:68%;right:auto;bottom:auto;width:max-content;font:800 11px/1.2 "Nunito",sans-serif;letter-spacing:.02em;white-space:nowrap;transform:translate(-50%,-50%) rotate(-45deg);text-shadow:0 1px 0 #fff9e8}
.story-active .page-corner:hover:before{background:linear-gradient(135deg,#b69a6a,#fffef8 54%,#f7e9c8)}
.story-active .page-corner:active{cursor:grabbing}
.story-active .page-corner:focus-visible{outline:none}
.story-active .page-corner:focus-visible span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* Chapters receive programmatic focus for accessible navigation, but their
   illustration should not inherit the global green interactive focus ring. */
.story-active .book-sheet .story-page:focus{outline:none}
.story-active .story-controls{left:20px;right:20px;bottom:3px;gap:16px;color:#fff5db}.story-active .story-controls:before{display:none}.story-controls [data-next],.story-controls [data-town]{white-space:nowrap}.story-active .story-cue{margin-left:auto}.story-active .story-controls [data-reading]{margin-left:0}
.story-reading [data-next],.story-reading [data-town]{display:none}
.story-active .starter-chapter{--scene-shade:linear-gradient(0deg,#142b20ed,#142b2099 65%,transparent)}
.story-active .starter-chapter .story-dialogue{left:12%;top:26%;width:70%}
.story-active .starter-chapter .story-headline{left:8%;top:36%;width:84%}
.story-active .starter-chapter .story-narration{left:8%;top:56%;width:84%}
.story-active .starter-chapter .story-detail{left:8%;top:80%;width:84%}
.story-active .starter-chapter .scene-message{left:8%;top:45%;width:84%;font-size:34px}
.story-active .starter-chapter .story-actions{left:8%;top:71%}
/* A page is narrower than its viewport. Adapt overlays to the page's actual container. */
@container chapter (max-width:900px){
 .storybook .story-headline{font-size:clamp(27px,5.8cqw,44px);max-width:88%}
 .story-narration{font-size:clamp(15px,2.5cqw,20px);line-height:1.5;max-width:88%}
 .story-detail{font-size:clamp(11px,1.7cqw,14px);max-width:88%}
 .story-active .eyebrow{top:12%;left:6%;font-size:10px}
 .story-active .story-dialogue{padding:18px;max-width:78%}.story-dialogue p{font-size:clamp(17px,2.8cqw,23px)}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-dialogue{left:7%;right:auto;top:24%;width:68%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .scene-character{right:4%;width:48%;height:56%;bottom:7%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-dialogue,.story-active :is(#stories,[data-chapter-id="stories"]) .story-dialogue,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-dialogue{left:10%;top:25%;width:74%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-headline{left:6%;top:29%;width:88%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-narration{left:6%;top:53%;width:88%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-detail{left:6%;top:65%;width:88%}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .scene-message{left:6%;top:73%;width:88%;font-size:clamp(19px,3cqw,24px)}
 .story-active :is(#welcome,[data-chapter-id="welcome"]) .story-actions{left:6%;bottom:8%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-headline,.story-active :is(#stories,[data-chapter-id="stories"]) .story-headline,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-headline{left:6%;right:auto;top:38%;width:88%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-narration,.story-active :is(#stories,[data-chapter-id="stories"]) .story-narration,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-narration{left:6%;right:auto;top:59%;width:88%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-detail,.story-active :is(#stories,[data-chapter-id="stories"]) .story-detail,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-detail{left:6%;right:auto;top:81%;width:88%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-demo,.story-active :is(#stories,[data-chapter-id="stories"]) .story-demo,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-demo{left:6%;right:auto;bottom:13%;width:88%}
 .story-active :is(#shops,[data-chapter-id="shops"]) .scene-message,.story-active :is(#stories,[data-chapter-id="stories"]) .scene-message,.story-active :is(#post-office,[data-chapter-id="post-office"]) .scene-message{left:8%;right:auto;top:42%;width:84%;font-size:clamp(29px,5cqw,40px)}
 .story-active :is(#shops,[data-chapter-id="shops"]) .story-actions,.story-active :is(#stories,[data-chapter-id="stories"]) .story-actions,.story-active :is(#post-office,[data-chapter-id="post-office"]) .story-actions{left:8%;right:auto;top:71%}
 .story-active :is(#finale,[data-chapter-id="finale"]) .story-headline{left:6%;top:23%;width:88%}.story-active :is(#finale,[data-chapter-id="finale"]) .story-narration{left:7%;top:48%;width:86%}.story-active :is(#finale,[data-chapter-id="finale"]) .scene-message{left:7%;top:69%;width:86%;font-size:20px}.story-active :is(#finale,[data-chapter-id="finale"]) .story-actions{left:6%;bottom:15%;width:88%}.story-active :is(#finale,[data-chapter-id="finale"]) .story-detail{left:6%;bottom:6%;width:88%}
 .art-request{top:14px;right:12px;max-width:60%;font-size:8px}.art-request span{display:none}
}
@media(max-width:600px){:root{--chapter-width:92vw;--chapter-height:calc(100dvh - 120px)}.story-active .book-presentation{padding-top:68px;padding-bottom:52px}.story-active .page-corner{bottom:0;width:72px;height:72px}.story-active .page-corner span{font-size:10px}.story-active .story-controls{left:12px;right:12px;gap:12px}.story-active .story-cue{display:none}.story-active .story-controls [data-reading]{margin-left:auto}.story-controls button{font-size:10px}.book-cover strong{font-size:23px}.book-cover .cover-caption{display:none}.book-paper{gap:16px}.book-page-intro>strong{font-size:24px}.book-paper>span:last-child,.book-page-intro>span:last-child{font-size:11px}}
@media print{.book-presentation,.book-object,.book-paper--right{display:contents!important}.book-paper--left,.book-cover,.book-spine,.book-opening-caption,.book-page-intro{display:none!important}.story-active .chapter-stage{position:static;transform:none;width:auto;height:auto;overflow:visible;box-shadow:none;container-type:normal}.chapter-stage:after{display:none}}

.book-object{transform-origin:75% 50%}.book-paper{background-size:200% 100%,100% 100%}.book-paper--left{background-position:left center,center}.book-paper--right{background-position:right center,center}

/* Chapters live inside the physical right page throughout the opened-book experience. */
.book-page-intro{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}
.story-active[data-story-view="chapter"] .book-opening-caption{display:none}
.story-active .book-paper--right{padding:0}
html:not(.story-active) .book-presentation,html:not(.story-active) .book-object,html:not(.story-active) .book-paper--right{display:contents}
html:not(.story-active) .book-paper--left,html:not(.story-active) .book-cover,html:not(.story-active) .book-spine,html:not(.story-active) .book-opening-caption,html:not(.story-active) .book-page-intro{display:none}

html:not(.story-active) .book-paper--right{font:inherit;color:inherit;text-align:inherit}

/* Separate artwork layers let the complete open spread dissolve in under its content. */
.book-art{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--book-open-art,none) center/200% 100%;border-radius:inherit}
.book-art--left{background-position:left center}.book-art--right{background-position:right center}
.book-paper--left>span,.book-page-intro{position:relative;z-index:1}
.story-active .chapter-stage{z-index:2}
html:not(.story-active) .book-art{display:none}
@media print{.book-art{display:none!important}}

.story-active[data-story-view="book"] .town-hotspots,.story-active[data-story-view="chapter"] .town-hotspots,
.story-active[data-story-view="book"] .town-invitation,.story-active[data-story-view="chapter"] .town-invitation,
.story-active[data-story-view="book"] .town-directory,.story-active[data-story-view="chapter"] .town-directory{visibility:hidden}
html:not(.story-active) .town-dimmer{display:none}
@media print{.town-dimmer{display:none!important}}

/* Loaded artwork supplies its own cover, paper edges, ornament and lettering.
   Keep the layout boxes and animation hooks, but remove placeholder decoration. */
.has-book-cover-art .book-cover{background:var(--book-cover-art) center/100% 100% no-repeat;background-origin:border-box;border-color:transparent;border-radius:0;box-shadow:none}
.has-book-cover-art .book-cover>*{visibility:hidden}
.has-book-open-art .book-paper{background:transparent;border-color:transparent;border-radius:0;box-shadow:none}
.has-book-open-art .book-spine,.has-book-open-art .book-paper--left>span,.has-book-open-art .book-page-intro>*{visibility:hidden}
.has-book-open-art .book-art{inset:-4px}
.has-book-open-art.story-active .chapter-stage{border-radius:0}

/* The blur belongs to the viewport layer, outside the zoomed camera transform. */
.story-active .town-opening{z-index:0}
.story-active .town-dimmer{z-index:1}
.story-active .book-presentation{z-index:2;background:none}

@media print{.story-active .book-sheet{display:contents}.story-active .book-sheet .story-page{position:relative;inset:auto;container-type:normal}}

.story-active .turn-flap{background:var(--book-page-art,none) center/cover,linear-gradient(135deg,#b8a17c,#fff8e7 48%,#dfc99e 65%,#fffdf5)}

.story-active .book-sheet.is-turning .story-page{visibility:visible}

/* The live stage contains both physical faces of the continuous spread. */
.story-active .book-object>.chapter-stage{inset:-4px;overflow:visible;pointer-events:none}
.story-active .book-object>.chapter-stage>.book-sheet{width:50%;right:auto;--page-content-left:4.1%;--page-content-right:11.1%;--page-content-top:3.5%;--page-content-bottom:7.5%;pointer-events:auto}
.story-active .book-object>.chapter-stage>.book-sheet[data-side="left"]{left:0;--page-content-left:11.1%;--page-content-right:4.1%}
.story-active .book-object>.chapter-stage>.book-sheet[data-side="right"]{left:50%}
.story-active .turn-sheet-hinge>.book-sheet{inset:0;width:100%;--page-content-left:4.1%;--page-content-right:11.1%;--page-content-top:3.5%;--page-content-bottom:7.5%}
.story-active .book-folio{position:absolute;bottom:1.5%;left:0;right:0;text-align:center;font:italic 10px Georgia,serif;color:#8b683c;z-index:21;pointer-events:none}

/* A physical leaf crosses the gutter and rests on the left page, outside the
   clipped chapter stage. Its back uses the left half of the spread artwork. */
.turn-sheet-hinge{position:absolute;left:50%;top:0;width:50%;height:100%;z-index:12;transform-origin:left center;transform-style:preserve-3d;font:400 16px/1.5 "Nunito",sans-serif;text-align:left;color:#24312c;will-change:transform}
.turn-sheet-hinge>.book-sheet{backface-visibility:hidden}
.turn-paper-back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;background:var(--book-page-art,none) center/100% 100%,linear-gradient(90deg,#eee1bc,#fff5db 15%,#f4e7c7);clip-path:inset(2.5% 0 5.5% 8%);pointer-events:none}

/* The stationary spread owns the cover, spine and page stack. Rotating leaves
   contain only paper, clipped to the measured paper face inside that spread. */
/* At rest, show the spread's original paper. Add a separate face only while
   the live sheet is lifted into the turning hinge. */
.story-active .turn-sheet-hinge>.book-sheet:before{content:"";position:absolute;inset:2.5% 8% 5.5% 0;z-index:-1;background:var(--book-page-art,none) center/100% 100%,linear-gradient(90deg,#eee1bc,#fff5db 15%,#f4e7c7)}
.turn-sheet-hinge>.book-sheet{clip-path:inset(2.5% 8% 5.5% 0)}
/* Each paper face occupies 92% of its box: 4.6% is 5% of the visible
   sheet. Mask the back's opposite edge because that face is rotated 180deg. */
.turn-sheet-hinge>.book-sheet{-webkit-mask-image:linear-gradient(to right,transparent,#000 4.6%);mask-image:linear-gradient(to right,transparent,#000 4.6%)}
.turn-paper-back{-webkit-mask-image:linear-gradient(to left,transparent,#000 4.6%);mask-image:linear-gradient(to left,transparent,#000 4.6%)}
.book-cover-hinge{position:absolute;left:50%;top:0;width:50%;height:100%;z-index:4;transform-origin:left center;transform-style:preserve-3d}
.book-cover-hinge>.book-cover{inset:0;width:100%;height:100%;transform:none;backface-visibility:hidden}
/* Keep the illustrated reverse face for opening, but leave its transparent
   edges clear: a paper-colored fallback here protrudes behind the artwork. */
.book-cover-back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;background:var(--book-open-art,none) left center/200% 100%}
/* Retire the opening cover after the stationary spread takes over. Its back
   otherwise protrudes beneath the left page through transparent artwork edges. */
.story-active[data-story-view="chapter"] .book-cover-hinge{visibility:hidden}
html:not(.story-active) .book-cover-hinge{display:none}
@media print{.book-cover-hinge{display:none!important}}

.story-active .turn-paper-back>.book-sheet{inset:0;width:100%;visibility:visible;--page-content-left:11.1%;--page-content-right:4.1%;--page-content-top:3.5%;--page-content-bottom:7.5%}