@font-face{font-family:Barlow;src:url('assets/BarlowCondensed-Bold.ttf');font-weight:700;font-display:swap}
@font-face{font-family:Source;src:url('assets/SourceSans3-Variable.ttf');font-weight:200 900;font-display:swap}
:root{color-scheme:dark;--ink:#101b2c;--gold:#f3c675;--paper:#f7ebd4}*{box-sizing:border-box}html{scroll-padding-top:90px}body{margin:0;background:#080f1b;color:var(--paper);font:18px/1.6 Source,system-ui,sans-serif}a{color:var(--gold)}button,select{font:inherit;background:var(--ink);border:1px solid #71849b;color:var(--paper);padding:.5rem .8rem;border-radius:6px;cursor:pointer}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.skip{position:absolute;left:1rem;top:-100px;z-index:9}.skip:focus{top:1rem;background:var(--ink)}.top{display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,4rem);gap:1rem}.top img{width:145px;max-height:48px}.top a{font-size:.9rem;text-decoration:none}.cover{position:relative;isolation:isolate;min-height:min(820px,85svh);display:grid;place-items:center;text-align:center;padding:4rem 1rem;background:var(--ink);overflow:hidden}.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.cover:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#101b2c55,#101b2c44 30%,#080f1be6 100%)}.cover-copy{max-width:800px;text-shadow:0 3px 20px #000}.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;font-weight:600;color:var(--gold)}h1,h2{font-family:Barlow,sans-serif;line-height:1}h1{font-size:clamp(5rem,13vw,10rem);text-transform:uppercase;margin:.2em 0}h2{font-size:clamp(2.4rem,6vw,4rem)}.cover-copy>p:not(.eyebrow){max-width:430px;margin:1.4rem auto}.button{display:inline-block;border-radius:5px;background:var(--gold);color:var(--ink);padding:.7rem 1.4rem;text-decoration:none;font-weight:700;text-shadow:none}.intro,.ending{max-width:720px;margin:3rem auto;padding:0 1.2rem}.controls{position:sticky;top:0;z-index:3;background:#101b2cf5;border-block:1px solid #33465b;display:flex;align-items:center;justify-content:center;gap:.65rem;flex-wrap:wrap;padding:.65rem .8rem;font-size:1rem}.controls label{display:flex;align-items:center;gap:.5rem}.controls output{font-variant-numeric:tabular-nums;min-width:5rem}.controls [aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}.comic{max-width:880px;margin:2rem auto;padding:0 14px}.comic-panel{margin:0 0 2.6rem;scroll-margin-top:105px}.art{display:block;width:100%;padding:0;border:0;background:none;border-radius:0;cursor:zoom-in}.art svg{display:block;width:100%;height:auto}.panel-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#a8b7c8;font-size:.8rem;margin:.5rem 0}.panel-meta a{color:inherit}details{border:1px solid #33465b;border-radius:6px;padding:.65rem 1rem}summary{cursor:pointer}details p{margin:.7rem 0}.description{color:#b9c6d6}.pages{display:none}.pages figure{margin:0 0 2rem;scroll-margin-top:105px}.pages img{display:block;width:100%;height:auto}.pages figcaption{padding:.5rem 0}.page-mode .comic-panel{display:none}.page-mode .pages{display:block}.quiet{margin-bottom:5rem}.ending{border-top:1px solid #33465b;padding-top:2rem}.credits{font-size:.95rem;color:#b9c6d6;margin-top:3rem}.credits h2{font-size:2rem}.links{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}footer{padding:2rem;text-align:center;color:#a8b7c8;font-size:.85rem}dialog{width:min(96vw,1200px);max-width:96vw;height:94svh;max-height:94svh;padding:0;background:#080f1b;color:var(--paper);border:1px solid #71849b}dialog::backdrop{background:#000c}.zoom-toolbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem;background:var(--ink);z-index:2}.zoom-scroll{overflow:auto;max-height:calc(94svh - 80px)}.zoom-scroll svg{display:block;min-width:800px;width:100%;height:auto}.zoom-scroll p{padding:1rem;max-width:780px}.no-js{padding:1rem;text-align:center}.js-only{display:none}.ready .js-only{display:flex}@media(max-width:550px){body{font-size:17px}.top{padding:.8rem 1rem}.cover{min-height:660px;max-height:90svh}.controls{gap:.4rem;font-size:.86rem}.controls button,.controls select{padding:.45rem .55rem}.comic{padding:0 8px}.intro{margin:2rem auto}.panel-meta{padding:0 .3rem}.comic-panel{margin-bottom:2rem}.quiet{margin-bottom:4rem}}@media print{.top,.controls,.intro,.comic-panel,.ending,.zoom-toolbar{display:none!important}.pages{display:block!important}.pages figure{break-after:page}.comic{padding:0;max-width:none}.cover{break-after:page}}
/* Reading edition 2: artwork first, one page or panel at a time. */
/* Reading stages: cover, artwork and credits occupy separate views. */
.ready .cover{min-height:calc(100svh - 180px);max-height:none}
.ready .ending{margin-top:1rem}
[hidden]{display:none!important}
.ready .comic{max-width:1120px;margin:1.2rem auto;scroll-margin-top:10px;outline:none}
.ready .comic-panel{margin:0 auto;max-width:1000px}
.ready .comic-panel .panel-meta,.ready .comic-panel>details{display:none}
.ready .comic-panel .art svg{width:100%;max-height:calc(100svh - 200px);min-height:200px;object-fit:contain}
.ready .pages figure{margin:0}
.page-art{position:relative;max-width:100%;margin:0 auto}
.ready .page-art{width:min(100%,calc((100svh - 200px) * 2 / 3))}
.page-art img{display:block;width:100%;height:auto}
.ready .page-art{touch-action:pan-y;box-shadow:0 12px 35px #0008,0 0 0 1px #f7ebd430;cursor:grab}
.ready .page-art.dragging{cursor:grabbing;user-select:none}
.page-edge{position:absolute;top:0;bottom:0;width:28px;z-index:2;border:0;border-radius:0;padding:0;font-size:2rem;color:#fff;background:transparent;opacity:0;transition:opacity .15s;cursor:pointer}
.edge-back{left:0;background:linear-gradient(90deg,#080f1ba8,transparent)}
.edge-next{right:0;background:linear-gradient(270deg,#080f1ba8,transparent)}
.page-art:hover .page-edge,.page-edge:focus-visible{opacity:1}
.turning-leaf{position:fixed;z-index:20;pointer-events:none;transform-origin:left center;backface-visibility:hidden;background:#f7ebd4;box-shadow:12px 5px 28px #0008;overflow:hidden}
.turning-leaf img{display:block;width:100%;height:100%;object-fit:cover}
.turning-leaf:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0006,transparent 12%,transparent 80%,#fff2)}
@media(hover:none){.page-edge{opacity:.75;font-size:1.6rem;width:24px}}
@media(prefers-reduced-motion:reduce){.page-edge{transition:none}}
@media print{.page-edge,.turning-leaf{display:none!important}}
.panel-hotspot{position:absolute;border:0;background:transparent;padding:0;border-radius:0;cursor:zoom-in}
.panel-hotspot:hover{background:#f3c67510;box-shadow:inset 0 0 0 2px #f3c67580}
.panel-hotspot:focus-visible{outline:3px solid var(--gold);outline-offset:-4px;background:#f3c67518}
.pages figcaption{text-align:center;color:#a8b7c8;font-size:.85rem}
.page-turn{justify-content:space-between;align-items:center;gap:1rem;max-width:800px;margin:1rem auto}
.page-turn button{min-width:100px;min-height:44px}
.page-turn span{font-size:.85rem;text-align:center;color:#a8b7c8}
button:disabled{opacity:.4;cursor:default}
.transcript{max-width:760px;margin:1.5rem auto}.transcript details{margin-bottom:.7rem}
.ready .comic.spread-mode{max-width:1500px}
.ready .spread-mode .pages{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:4px;width:min(100%,calc((100svh - 230px)*4/3));margin:auto}
.ready .spread-mode .pages figure{grid-row:1;min-width:0}
.ready .spread-mode .page-art{width:100%}
.ready .spread-mode .spread-cover{grid-column:1;grid-row:1}
.spread-cover-art{aspect-ratio:2/3;position:relative;overflow:hidden;container-type:inline-size;background:#101b2c}
.spread-cover-art>img{width:100%;height:100%;object-fit:cover}
.spread-cover-art .cover-copy{position:absolute;inset:4% 5% auto;text-align:center;z-index:1}
.spread-cover-art.harbor-cover .cover-copy{top:25%}
.spread-cover-art h2{font-size:13cqw;text-transform:uppercase;margin:.1em 0}
.spread-cover-art .eyebrow{font-size:3cqw;letter-spacing:.15em}
.spread-cover-art .cover-copy>p:not(.eyebrow){font-size:4cqw;margin:.6em auto}
.spread-cover-art:before{content:'';position:absolute;inset:0;background:linear-gradient(#080f1b66,transparent 60%)}
@media print{.spread-cover{display:none!important}}
.ready .spread-mode .page-art:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 6px 0 12px -10px #000,inset -6px 0 12px -10px #000}
@media print{.ready .spread-mode .pages{display:block!important;width:100%}}
@media(max-width:550px){.ready .comic{scroll-margin-top:35px}.ready .page-art{width:100%}.controls{font-size:.8rem}.controls button,.controls select{min-height:44px}.controls output{min-width:6rem}.page-turn{gap:.4rem}.page-turn span{max-width:120px;font-size:.75rem}.ready .comic-panel .art svg{max-height:none;min-height:0}}
@media print{[hidden],.ready .pages figure[hidden]{display:block!important}.ready .comic-panel,.page-turn,.transcript,.panel-hotspot{display:none!important}.page-art,.ready .page-art{width:100%}}

.embedded .top, .embedded body > footer { display: none; }
.embedded body { min-height: 0; }
.embedded .controls { top: 0; }


/* A Little Light cover: keep the illustrated composition intact at every width. */
.little-light-cover,.ready .little-light-cover{width:min(100%,calc((100svh - 180px)*2/3));aspect-ratio:2/3;min-height:0;max-height:none;margin:0 auto;padding:0;display:block;container-type:inline-size}
.little-light-cover>img{object-fit:contain}.little-light-cover:after{background:linear-gradient(180deg,#080f1b88,transparent 44%)}
.little-light-cover .cover-copy{position:absolute;top:4%;left:5%;right:5%;text-align:center}
.little-light-cover h1{font-size:clamp(2rem,10cqw,5.8rem);margin:.08em 0 .12em}.little-light-cover .eyebrow{margin:.2rem 0}
.little-light-cover .cover-copy>p:not(.eyebrow){margin:.4rem auto;font-size:clamp(.9rem,2.5vw,1.2rem)}
.little-light-cover .button{font-size:1rem;padding:.5rem 1rem;margin-top:.6rem}
@media(max-width:550px){.little-light-cover .eyebrow{font-size:.65rem;letter-spacing:.15em}.little-light-cover .cover-copy>p:not(.eyebrow){display:none}.little-light-cover .button{font-size:.85rem;padding:.45rem .8rem}}

/* Owner-approved series identity: preserve artwork, separate franchise/series/story. */
.series-cover,.ready .series-cover{width:min(100%,calc((100svh - 140px)*2/3));aspect-ratio:2/3;min-height:0;max-height:none;margin:0 auto;padding:0;display:block;container-type:inline-size}
.series-cover>img{object-fit:cover;object-position:58% center}.series-cover.little-light-cover>img{object-fit:contain}
.series-cover:after,.series-spread:before{background:linear-gradient(180deg,#080f23ed 0%,#0d1731d9 23%,#0d173161 44%,transparent 64%,#080f2377 85%,#080f23d9 100%)}
.pals-series-cover:after,.series-spread.pals-series-cover:before{background:linear-gradient(180deg,#080f23dc 0%,#0d173183 23%,transparent 47%,transparent 78%,#080f2388 100%)}
.series-cover .cover-copy,.series-spread .cover-copy,.series-spread.harbor-cover .cover-copy{position:absolute;inset:0;text-align:center;padding:7cqw 6cqw 0;max-width:none}
.series-cover .series-brand,.series-spread .series-brand{position:static;display:block;width:43%;height:auto;object-fit:contain;margin:0 auto 5cqw}
.series-cover .cover-copy>.series-name,.series-spread .cover-copy>.series-name{font:700 10.3cqw/1 Barlow,sans-serif;letter-spacing:.012em;text-transform:uppercase;margin:0;max-width:none;color:var(--paper);white-space:nowrap}
.series-cover .series-divider,.series-spread .series-divider{display:block;width:15cqw;height:1px;background:var(--gold);margin:4cqw auto}
.series-cover .cover-copy>.eyebrow,.series-spread .cover-copy>.eyebrow{font:600 3cqw/1.2 Source,sans-serif;letter-spacing:.22em;text-transform:uppercase;margin:0 0 2cqw;color:var(--gold)}
.series-cover h1,.series-spread h2{font:700 11.5cqw/.98 Barlow,sans-serif;text-transform:uppercase;color:var(--paper);margin:0;text-shadow:0 2px 18px #0009}
.pals-series-cover .cover-copy>.series-name{color:#f8d68d;font-size:12cqw}.pals-series-cover h1,.pals-series-cover h2{font-size:10.5cqw}
.series-cover .cover-copy>.cover-tagline,.series-spread .cover-copy>.cover-tagline{display:block;position:absolute;bottom:17cqw;left:6cqw;right:6cqw;max-width:none;margin:0;font:400 3.6cqw/1.4 Source,sans-serif}
.series-cover .button{position:absolute;bottom:5cqw;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(.8rem,3.5cqw,1rem);padding:.55rem 1.1rem;margin:0}
.series-spread .cover-copy>.cover-tagline{bottom:6cqw}.series-spread>img{object-position:58% center}
/* Reading supplement 2: opening and closing leaves share the comic page canvas. */
.book-leaf .page-art{background:#f7ebd4}
.book-next-hotspot{position:absolute;display:block;border:2px solid transparent;border-radius:0}
.book-next-hotspot:hover,.book-next-hotspot:focus-visible{border-color:#8c652d;background:#8c652d12;outline-offset:2px}
.pages .book-leaf figcaption{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}
.enlarge-book-page{font-size:.8rem;min-height:44px;align-items:center}
.zoom-scroll img{display:block;max-width:none}
.ready .book-leaf[hidden]{display:none!important}
.ready .spread-mode .pages{align-items:start}
html:not(.ready) .pages{display:block}
html:not(.ready) .comic-panel .art{display:none}
.ready .fallback-heading{display:none}
@media(max-width:767px){.book-leaf .enlarge-book-page{font-size:.85rem}.book-leaf figcaption{font-size:.8rem}}
@media print{.book-leaf,.ready .book-leaf[hidden]{display:block!important;break-after:page}.book-leaf figcaption,.book-next-hotspot{display:none!important}.pages .book-leaf .page-art{box-shadow:none}.ending{display:block!important;break-before:page}}