/* The paper is the composition. Insets are fractions of the physical leaf,
   measured against storybook-open.webp (1448 × 1086), not the viewport. */
:root{
 --storybook-page-inset-top:11%;--storybook-page-inset-bottom:11%;
 --storybook-page-inset-outer:32%;--storybook-page-inset-inner:10%;
 --story-display:"Berkshire Swash","Palatino Linotype",Georgia,serif;
 --story-body:"Fondamento",Georgia,"Times New Roman",serif;
 --story-ink:#364431;--story-gold:#79603a;
}
.story-active .book-sheet{
 --story-safe-left:var(--storybook-page-inset-inner);
 --story-safe-right:var(--storybook-page-inset-outer);
 --story-text-align:left;--story-art-position:left center;--story-prop-align:flex-start;
}
.story-active .book-sheet[data-side="left"]{
 --story-safe-left:var(--storybook-page-inset-outer);
 --story-safe-right:var(--storybook-page-inset-inner);
 --story-text-align:right;--story-art-position:right center;--story-prop-align:flex-end;
}
.story-active .book-sheet .story-page{
 inset:var(--storybook-page-inset-top) var(--story-safe-right) var(--storybook-page-inset-bottom) var(--story-safe-left);
 background:transparent;overflow:visible;container-type:size;
}
.story-active .book-sheet .story-page:after{display:none}
.story-active .book-sheet .guide-chapter .guide-beat{
 inset:0;padding:0;gap:clamp(9px,2.4cqw,16px);background:none;border:0;border-radius:0;
 box-shadow:none;color:var(--story-ink);text-shadow:none;justify-content:center;overflow:hidden;
 font-family:var(--story-body);font-weight:400;text-align:var(--story-text-align);
}
.story-active .book-sheet .guide-chapter .guide-title{
 font:400 clamp(32px,9.2cqw,48px)/1.22 var(--story-display);letter-spacing:0;
 color:#344b32;margin:0;text-wrap:balance;flex-shrink:0;
}
.story-active .book-sheet .guide-chapter .guide-kicker{
 font:italic 13px/1.25 var(--story-body);text-transform:none;letter-spacing:.025em;
 color:var(--story-gold);flex-shrink:0;
}
.story-active .book-sheet .guide-chapter .guide-body{
 font:400 clamp(16px,4.35cqw,19px)/1.48 var(--story-body);text-wrap:pretty;flex-shrink:0;overflow-wrap:anywhere;
}
.story-active .book-sheet .guide-body p{margin:0 0 .45em}
.story-active .book-sheet .guide-body p:last-child{margin-bottom:0}
.story-active .book-sheet .guide-prop{
 font:400 clamp(14px,3.9cqw,17px)/1.35 var(--story-body);max-width:100%;min-width:0;overflow-wrap:anywhere;
 border:0;padding:0;margin:0;
}
.story-active .book-sheet .page-narrative .guide-body>p:first-child:first-letter{
 float:left;font:400 2.9em/.84 var(--story-display);margin:.08em .12em 0 0;color:#6b713b;
}
.story-active .book-sheet .page-quiet .guide-title{font-size:clamp(34px,9.5cqw,50px)}
.story-active .book-sheet .page-quiet .guide-body{font-style:italic}
.story-active .book-sheet .guide-prop:has(>.storybook-art),
.story-active .book-sheet .guide-prop:has(>.book-art-slot){height:28cqh;flex-shrink:1;min-height:55px;max-height:38%}
.story-active .book-sheet .page-guidebook .guide-prop:has(>.storybook-art){height:24cqh}
.story-active .book-sheet .page-narrative .guide-prop{order:initial;margin-bottom:0}
.story-active .book-sheet .page-quiet .guide-prop:has(>.storybook-art),
.story-active .book-sheet .page-quiet .guide-prop:has(>.book-art-slot){order:-1;height:38cqh}
/* Every layer shares identical geometry. Filtered ink is explicitly temporary. */
.storybook-art{position:relative;display:inline-block;height:180px;max-width:calc(100% - 10px);margin:5px;isolation:isolate;vertical-align:middle;
 outline:1px solid #987749;outline-offset:3px;border-radius:2px;box-shadow:0 0 0 2px #f8edcf;
}
.storybook-art:after{content:"";position:absolute;inset:-5px;pointer-events:none;z-index:2;
 border:1px solid #98774965;border-radius:4px;
}
.story-active .book-sheet .guide-prop .storybook-art{height:100%;max-height:calc(100% - 10px);width:auto}
.storybook-art img,
.story-active .book-sheet .guide-chapter .guide-prop .storybook-art img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 max-width:100%!important;max-height:100%!important;object-fit:var(--art-fit,contain)!important;
 object-position:var(--story-art-position,var(--art-position,center))!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;margin:0!important;
 mask-image:none;-webkit-mask-image:none;
}
.storybook-art img[data-story],
.story-active .book-sheet .guide-chapter .guide-prop .storybook-art img[data-story]{position:relative!important;inset:auto!important;width:auto!important;object-fit:contain!important}
.storybook-art__drawn{z-index:0}
.storybook-art img[data-story]{z-index:1}
.storybook-art[data-illustrated-source="PLACEHOLDER"] .storybook-art__drawn{
 filter:grayscale(1) sepia(.65) contrast(1.12);opacity:.75;mix-blend-mode:multiply;
}
.book-art-slot{height:100%}
.story-active .book-sheet .parcel-story .storybook-art{height:60px}
.story-active .book-sheet .parcel-story__finds .book-prop{width:34px;height:34px;border-radius:0}
.story-active .book-sheet .family-journey .book-prop{width:40px;height:40px;border-radius:0}
.story-active .book-sheet .points-letter{padding:6px 10px;font:italic 16px/1.25 var(--story-body)}
.story-active .book-sheet .family-journey figcaption,
.story-active .book-sheet .parcel-story figcaption{font:italic 12px/1.35 var(--story-body);margin-top:6px}
.story-active .book-sheet .guide-prop .neighbor-dialogue{display:flex;gap:12px;align-items:center;min-width:0}
.story-active .book-sheet .neighbor-dialogue .storybook-art{width:auto;max-width:30%;height:130px;flex:none}
.story-active .book-sheet .neighbor-dialogue .storybook-art{--story-art-position:center}
.story-active .book-sheet .neighbor-dialogue figcaption{
 padding:10px 0 10px 14px;border:0;border-left:1px solid #9e85578c;border-radius:0;
 background:none;box-shadow:none;color:var(--story-ink);max-width:none;min-width:0;
}
.story-active .book-sheet .neighbor-dialogue strong{font:italic 14px var(--story-body);text-transform:none;letter-spacing:0;color:var(--story-gold)}
.story-active .book-sheet .neighbor-dialogue p{font:italic clamp(16px,4.4cqw,21px)/1.4 var(--story-body)}
.story-active .book-sheet .guide-prop .storybook-route{display:block;padding-left:0;border-left:1px dashed #9e85578c}
.story-active .book-sheet .storybook-route li{display:flex;align-items:baseline;gap:12px;min-width:0;
 padding:5px 0 5px 14px;margin:0; border:0;border-radius:0;background:none;
 font:400 15px/1.25 var(--story-body);color:var(--story-ink);
}
.story-active .book-sheet .storybook-route li:before{display:inline;font:italic 16px var(--story-body);margin:0;color:var(--story-gold)}
.story-active .book-sheet .page-process .storybook-route{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;border:0}
.story-active .book-sheet .page-process .storybook-route li{padding:4px 0;border-bottom:1px dashed #9e85574d}
.story-active .book-sheet .guide-note{padding:4px 0 4px 13px;background:none;border-radius:0;border-left:1px solid #a88b54;box-shadow:none}
.story-active .book-sheet .guide-tiles{display:block}
.story-active .book-sheet .guide-tiles li{padding:3px 0;border:0}
.story-active .book-sheet .guide-tiles strong{color:#344b32;font:400 24px/1.3 var(--story-display)}
.story-active .book-sheet .guide-tiles span{font:15px/1.4 var(--story-body)}
.story-active .book-sheet .points-cycle{display:flex;flex-wrap:wrap;justify-content:var(--story-prop-align);gap:8px}
.story-active .book-sheet .points-cycle li{background:none;border:0;border-radius:0;padding:6px;font:italic 16px var(--story-body)}
.story-active .book-sheet .guide-prop .btn{display:inline;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
 font:italic 16px/1.6 var(--story-body);color:#395c3d;text-decoration:underline;text-underline-offset:4px;min-height:44px;
}
.story-active .book-sheet .guide-topics{display:block}
.story-active .book-sheet .guide-topics a{display:inline-block;border:0;border-radius:0;padding:5px 10px 5px 0;font:italic 15px var(--story-body)}
/* Folios belong to the physical leaf, in the blank paper below its border.
   The shared rule positions the right page. The left leaf is mirrored. */
.story-active .book-sheet .book-folio{font:italic 12px/1 var(--story-body);color:#665033;bottom:8%;left:-13.5%;text-align:center}
.story-active .book-sheet[data-side="left"] .book-folio{left:12%;bottom:8%}
.story-active .book-sheet[data-side="left"] .neighbor-dialogue{flex-direction:row-reverse}
.story-active .book-sheet[data-side="left"] .neighbor-dialogue figcaption,
.story-active .book-sheet[data-side="left"] .guide-note{border-left:0;border-right:1px solid #a88b54;padding-left:0;padding-right:13px}
.story-active .book-sheet[data-side="left"] .storybook-route li{flex-direction:row-reverse}
.story-active .book-sheet[data-side="left"] .storybook-route{border-left:0;border-right:1px dashed #9e85578c}
.story-active .book-sheet[data-side="left"] .page-process .storybook-route{border-right:0}
.story-active .book-sheet[data-side="left"] .page-narrative .guide-body>p:first-child:first-letter{float:none;font:inherit;margin:0;color:inherit}
.story-active .book-sheet .family-journey figcaption,
.story-active .book-sheet .parcel-story figcaption{text-align:var(--story-text-align)}
/* Dense explanations sacrifice illustration size before text size. */
@container chapter (max-width:260px){
 .story-active .book-sheet .guide-chapter .guide-title{font-size:30px}
 .story-active .book-sheet .guide-chapter .guide-body{font-size:16px;line-height:1.35}
 .story-active .book-sheet .guide-prop:has(>.storybook-art){height:22cqh;min-height:40px}
 .story-active .book-sheet .neighbor-dialogue .storybook-art{height:95px}
 .story-active .book-sheet .neighbor-dialogue p{font-size:16px}
 .story-active .book-sheet .address-pair{display:block}
}
@container chapter (max-height:470px){
 .story-active .book-sheet .guide-chapter .guide-beat{gap:7px}
 .story-active .book-sheet .guide-prop:has(>.storybook-art){height:18cqh;min-height:32px}
 .story-active .book-sheet .guide-chapter .guide-title{font-size:30px}
 .story-active .book-sheet .guide-chapter .guide-body{font-size:16px;line-height:1.35}
 .story-active .book-sheet .neighbor-dialogue .storybook-art{width:auto;max-width:22%;height:80px}
 .story-active .book-sheet .neighbor-dialogue figcaption{padding:4px 0 4px 10px}
 .story-active .book-sheet .neighbor-dialogue p{font-size:16px;line-height:1.3}
 .story-active .book-sheet .storybook-route li{padding-block:3px;font-size:14px}
 .story-active .book-sheet .guide-chapter .page-dense{gap:5px}
 .story-active .book-sheet .guide-chapter .page-dense .guide-title{font-size:28px}
 .story-active .book-sheet .guide-chapter .page-dense .guide-body{line-height:1.3}
 .story-active .book-sheet .page-dense .guide-note{padding-block:2px}
}
html:not(.story-active) .guide-chapter{font-family:var(--story-body)}
html:not(.story-active) .guide-title{font-family:var(--story-display);font-weight:400;font-size:clamp(32px,3.8vw,48px)}
.book-cover strong,.book-page-intro>strong,.home-page.storybook .town-hero-title{
 font-family:var(--story-display);font-weight:400;line-height:1.25;letter-spacing:0;
}
.book-cover strong{font-size:clamp(26px,3.7vw,53px)}
.book-page-intro>strong{font-size:clamp(23px,3.5vw,48px)}
.home-page.storybook .town-hero-title{font-size:clamp(26px,3.2vw,46px)}
.book-cover>span:not(.book-leaf):not(.cover-border){font-family:var(--story-body)}
html:not(.story-active) .guide-body{font:17px/1.6 var(--story-body)}
html:not(.story-active) .guide-kicker{font:italic 13px/1.4 var(--story-body);text-transform:none;letter-spacing:0;color:var(--story-gold)}
html:not(.story-active) .guide-note,
html:not(.story-active) .neighbor-dialogue figcaption{background:none;box-shadow:none;border:0;border-left:1px solid #a88b54;border-radius:0;font-family:var(--story-body)}
html:not(.story-active) .storybook-route{display:block}
html:not(.story-active) .storybook-route li{display:flex;gap:14px;background:none;border:0;border-radius:0;font:16px/1.5 var(--story-body);padding:6px 0}
html:not(.story-active) .storybook-route li:before{margin:0}
html:not(.story-active) .points-cycle li{background:none;border:0;font:italic 16px/1.5 var(--story-body)}
html:not(.story-active) .storybook-art{max-width:460px;height:230px;margin:20px auto}
html:not(.story-active) .storybook-art__drawn{display:none}
.story-active .guide-beat a:focus-visible .story-ink-fragment{opacity:1!important;filter:none!important}
@media(prefers-reduced-motion:reduce){.storybook-art__drawn{display:none}.story-active [data-story]{clip-path:none!important}}
@media print{.storybook-art__drawn{display:none}.storybook-art img[data-story]{opacity:1!important}.guide-title,.guide-body{clip-path:none!important}}
