@font-face{font-family:BookGaramond;src:url('assets/garamond.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BookGaramond;src:url('assets/garamond-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
:root{color-scheme:light;--canvas:#eeeae2;--paper:#fffdf8;--ink:#2d2924;--muted:#61584b;--rule:#c3b9a8;--accent:#2e4651;--page-width:min(720px,calc(100vw - 32px),calc((100svh - 142px)*.8))}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.5 system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;min-height:44px;cursor:pointer;color:inherit;background:transparent;border:1px solid transparent;padding:9px 16px}button:hover:not(:disabled){background:#e1dbcf}button:disabled{opacity:.36;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #28678c;outline-offset:3px}a{color:var(--accent);text-underline-offset:3px}[hidden]{display:none!important}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip:focus{position:fixed;z-index:9;padding:12px;background:var(--paper)}
.reader-header{max-width:1160px;min-height:64px;margin:auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.reader-header p{margin:0;font:21px/1.2 BookGaramond,Georgia,serif}.reader-header button{font-size:13px;text-decoration:underline;text-underline-offset:4px}.reader{display:flex;flex-direction:column;align-items:center;padding:8px 16px 30px}.book-slot{width:var(--page-width);min-width:280px;container-type:inline-size}.book-page{position:relative;aspect-ratio:4/5;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 2px 6px #30241818,0 12px 28px #3024180b}.illustration{position:absolute;width:77.78%;height:77.78%;left:11.11%;top:3.3%;object-fit:contain;display:block}.narration{position:absolute;top:84.1%;left:6.5%;width:87%;margin:0;font:400 4.4cqw/1.18 BookGaramond,Georgia,serif;text-align:center;text-wrap:pretty}.cover .illustration{width:72%;height:72%;left:14%;top:2.7%}.cover-title{position:absolute;top:76.5%;left:5%;width:90%;margin:0;color:var(--accent);font:400 7.9cqw/.96 BookGaramond,Georgia,serif;letter-spacing:-.025em;text-align:center}.cover-title span{display:block}.cover-subtitle{position:absolute;top:89.8%;left:5%;width:90%;margin:0;text-align:center;font:400 2.95cqw/1.2 BookGaramond,Georgia,serif;color:var(--muted)}.dedication{position:absolute;top:94.1%;left:5%;width:90%;margin:0;text-align:center;font:italic 3.65cqw/1.1 BookGaramond,Georgia,serif}
.reader-nav{width:var(--page-width);min-width:280px;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin-top:14px;border-top:1px solid var(--rule);padding-top:5px}.reader-nav button{font-size:14px;display:flex;align-items:center;gap:10px}.reader-nav #previous{justify-self:start}.reader-nav #next{justify-self:end}.reader-nav p{font-size:13px;text-align:center;margin:0;color:var(--muted);font-variant-numeric:tabular-nums}.reader-nav span{font-size:18px;line-height:1}.afterword{max-width:580px;width:100%;padding:28px 8px 0;margin-top:18px;border-top:1px solid var(--rule)}.afterword h2{font:30px/1.1 BookGaramond,Georgia,serif;margin:0 0 12px}.afterword p{font-size:14px;margin:0 0 16px;line-height:1.55;color:var(--muted)}.afterword summary{min-height:44px;cursor:pointer;font-size:14px;padding:10px 0}.afterword #read-again{padding-left:0;text-decoration:underline;text-underline-offset:4px;font-size:14px}
dialog{max-width:1080px;width:calc(100vw - 32px);max-height:90svh;border:0;padding:24px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#24201ac9}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.dialog-header h2{font:30px BookGaramond,Georgia,serif;margin:0}.dialog-header button{border-color:var(--rule);font-size:14px}.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 16px}.overview-page{padding:0;text-align:left}.overview-page img{width:100%;height:auto;display:block}.overview-page span{display:block;margin-top:8px;font-size:13px}.overview-page[aria-current=true]{outline:2px solid var(--accent);outline-offset:5px}.noscript{text-align:center;font-size:14px}
@media(max-width:600px){:root{--page-width:calc(100vw - 24px)}.reader-header{padding:8px 12px;min-height:56px}.reader-header p{font-size:19px}.reader{padding:4px 12px 24px}.reader-nav{margin-top:12px}.narration{font-size:4.65cqw}.overview-grid{grid-template-columns:repeat(2,1fr)}dialog{padding:18px}.afterword{padding-top:24px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.export body{background:var(--paper)}.export .reader-header,.export .reader-nav,.export .afterword,.export .skip,.export dialog{display:none!important}.export .reader{padding:0;display:block}.export .book-slot{width:1080px;min-width:1080px}.export .book-page{box-shadow:none;width:1080px;height:1350px;aspect-ratio:auto}.export .narration{font-size:4.4cqw}
@media print{body{background:white}.reader-header,.reader-nav,.afterword,dialog{display:none!important}.reader{display:block;padding:0}.book-slot{width:100%}.book-page,.book-page[hidden]{display:block!important;break-after:page;box-shadow:none}.book-page:last-child{break-after:auto}}

/* Ornate binding and illuminated borders, requested for the finished edition. */
:root{--canvas:#e7dfd0;--paper:#faf3e3;--ink:#332b24;--muted:#625444;--accent:#5b202c}
.book-page{background:var(--paper);box-shadow:0 2px 5px #30241828,0 16px 36px #3024181a}
.ornament{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:#a2813e}
.cover{background:#542431;color:#f6e8c9}
.cover .ornament{color:#cfac65}
.illustration{outline:1px solid #a2813e;outline-offset:5px}
.cover .illustration{outline-color:#cfac65;outline-offset:6px}
.cover-title{color:#f2d99e;font-variant-caps:small-caps;letter-spacing:-.015em}
.cover-subtitle{color:#f5e7ca}
.dedication{color:#f5e7ca}
.narration{left:8%;width:84%}
.reader-header p{color:#542431}.reader-nav{border-top-color:#a2813e}

.narration{top:83%}.dedication{top:93%}

/* Keep the reader title centered independently of the All pages control. */
.reader-header{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}
.reader-header p{grid-column:2;text-align:center}
.reader-header button{grid-column:3;justify-self:end}
@media(max-width:600px){.reader-header{grid-template-columns:1fr;gap:0;padding-top:12px}.reader-header p{grid-column:1}.reader-header button{grid-column:1;justify-self:center}}

/* Thumb-friendly controls stay beside the middle of the book. */
:root{--page-width:min(720px,calc(100vw - 160px),calc((100svh - 142px)*.8))}
.book-stage{position:relative;width:var(--page-width)}
.book-slot{width:100%;min-width:0}
.reader-nav{position:absolute;left:-64px;top:50%;transform:translateY(-50%);width:48px;min-width:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0}
.reader-nav button{width:48px;height:48px;min-height:48px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid #a2813e;border-radius:50%;background:#faf3e3;color:#542431;box-shadow:0 2px 5px #30241818;touch-action:manipulation}
.reader-nav button:hover:not(:disabled){background:#f2e5c8}
.reader-nav button:disabled{opacity:.4}
.reader-nav span[aria-hidden]{font-size:24px}
.reader-nav p{font-size:12px;line-height:20px}
@media(max-width:600px){
 :root{--page-width:calc(100vw - 80px)}
 .book-stage{margin-left:56px}
 .reader-nav{left:-56px}
 .book-page{aspect-ratio:auto;padding:4% 11.11% 8%;min-height:0}
 .illustration,.cover .illustration{position:relative;left:auto;top:auto;width:100%;height:auto;outline-offset:3px}
 .narration{position:relative;left:auto;top:auto;width:auto;margin:18px -10px 0;font-size:18px;line-height:1.3;text-wrap:pretty}
 .cover-title{position:relative;left:auto;top:auto;width:auto;margin:20px -12px 0;font-size:clamp(29px,8cqw,40px);line-height:1.05}
 .cover-subtitle{position:relative;left:auto;top:auto;width:auto;margin:12px -10px 0;font-size:15px;line-height:1.3}
 .dedication{position:relative;left:auto;top:auto;width:auto;margin:14px -10px 0;font-size:18px;line-height:1.3}
 .afterword{padding-left:56px}
}
.export .book-stage{width:1080px;margin:0}
@media print{.book-stage{width:100%;margin:0}}
@media(min-width:601px) and (max-height:500px){:root{--page-width:min(560px,calc(100vw - 120px))}}

/* A separate title page leaves every selected illustration in the story. */
.text-cover{display:flex;align-items:center;justify-content:center;padding:12%;aspect-ratio:4/5}
.cover-words{position:relative;width:100%;text-align:center}
.text-cover .cover-title{position:static;width:100%;margin:0;font-size:10cqw;line-height:1.05}
.text-cover .cover-subtitle{position:static;width:100%;margin:7cqw 0 0;font-size:3.5cqw;line-height:1.4}
.text-cover .dedication{position:static;width:100%;margin:13cqw 0 0;font-size:4.2cqw;line-height:1.3}
.cover-thumbnail{aspect-ratio:4/5;display:flex!important;align-items:center;justify-content:center;margin:0!important;background:#542431;color:#f2d99e;border:5px double #cfac65;font:24px/1.2 BookGaramond,Georgia,serif!important;text-align:center}
@media(max-width:600px){.text-cover{min-height:390px;padding:14% 12%}.text-cover .cover-title{font-size:clamp(30px,10cqw,42px)}.text-cover .cover-subtitle{font-size:16px;margin-top:28px}.text-cover .dedication{font-size:19px;margin-top:42px}}

/* The dream's flying swan is the central cover emblem. */
.text-cover{display:block;padding:0}
.text-cover .cover-words{position:absolute;inset:0;width:100%;height:100%}
.text-cover .cover-title{position:absolute;top:12%;left:12%;width:76%;margin:0;font-size:9cqw}
.cover-swan{position:absolute;top:34%;left:14%;width:72%;height:36%;overflow:visible}
.text-cover .cover-subtitle{position:absolute;top:73%;left:12%;width:76%;margin:0}
.text-cover .dedication{position:absolute;top:84%;left:12%;width:76%;margin:0}
@media(max-width:600px){.text-cover{min-height:420px}.text-cover .cover-title{font-size:clamp(30px,9cqw,42px)}.text-cover .cover-subtitle{font-size:15px}.text-cover .dedication{top:88%;font-size:19px}}

/* Previous and Next flank the book at its midpoint. */
.book-page{width:100%}
.reader{padding-bottom:60px}
.reader-nav{left:-64px;right:-64px;top:50%;width:auto;height:48px;display:flex;flex-direction:row;justify-content:space-between;gap:0;pointer-events:none}
.reader-nav button{pointer-events:auto}
#page-counter{position:absolute;top:100%;left:0;width:100%;margin:12px 0 0;text-align:center;font-size:12px;line-height:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.afterword{margin-top:58px}
@media(max-width:600px){
 :root{--page-width:calc(100vw - 48px)}
 .book-stage{margin-left:0}
 .reader-nav{left:-16px;right:-16px}
 .text-cover{height:420px;min-height:420px;aspect-ratio:auto}
 .text-cover .cover-title{font-size:clamp(26px,9cqw,42px)}
 .afterword{padding-left:8px}
}
.export #page-counter{display:none}
@media print{#page-counter{display:none}}
@media(max-width:600px){:root{--page-width:calc(100vw - 64px)}.reader-nav{left:-24px;right:-24px}}

/* Restore the original below-book navigation; no overview control. */
.reader-header{display:flex;justify-content:center;min-height:64px}
.reader-header p{margin:0;text-align:center}
.reader-nav{position:static;transform:none;width:100%;height:auto;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:0;margin:14px 0 0;padding:5px 0 0;border-top:1px solid #a2813e;pointer-events:auto}
.reader-nav button{width:auto;height:48px;padding:9px 12px;gap:10px;border:0;border-radius:0;box-shadow:none;background:transparent;font-size:14px}
.reader-nav button:hover:not(:disabled){background:#e1dbcf}
.reader-nav button span{font-size:14px}
.reader-nav button span[aria-hidden]{font-size:22px}
#page-counter{position:static;width:auto;margin:0;font-size:13px;line-height:20px;text-align:center}
.afterword{margin-top:18px}
@media(max-width:600px){:root{--page-width:calc(100vw - 24px)}.reader-header{min-height:56px;padding:8px 12px}.book-stage{margin-left:0}.reader-nav{margin-top:12px}}
/* Strengthen cover lettering at phone sizes. */
.text-cover .cover-title{font-size:10cqw}
@media(max-width:600px){.text-cover .cover-title{font-size:32px}.text-cover .cover-subtitle{font-size:16px}.text-cover .dedication{font-size:22px}}