@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
@font-face{font-family:'Bangers';src:url('assets/fonts/bangers.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--bg:#111312;--surface:#191c19;--ink:#eee9df;--muted:#a8aaa0;--gold:#d2b176;--line:#ffffff1c;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:5px}img{display:block;width:100%}.skip{position:fixed;top:-100px;z-index:100;background:var(--gold);color:#111;padding:15px}.skip:focus{top:0}.nav{height:88px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#111312;gap:30px}.brand{font:600 26px var(--serif);letter-spacing:.16em;white-space:nowrap}.brand-mark{color:var(--gold);font-size:36px;vertical-align:middle;margin-right:10px}.nav nav{display:flex;gap:28px;align-items:center}.nav nav a{font-size:14px;color:#b8bab1;padding:30px 0;position:relative}.nav nav a:hover,.nav nav a[aria-current]{color:var(--gold)}.nav nav a[aria-current]:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold)}.nav-read{font-size:14px;border-bottom:1px solid var(--gold);padding:5px 0}.nav-read span{display:none}.hero{min-height:660px;position:relative;display:flex;align-items:center;isolation:isolate;border-bottom:1px solid var(--line)}.hero-art{position:absolute;inset:0;z-index:-2;height:100%;object-fit:cover;object-position:65% 50%}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#101210fa 0%,#101210d9 30%,#10121052 66%,#10121010),linear-gradient(0deg,#111312,transparent 30%)}.hero-copy{padding:70px 7%;width:62%;max-width:830px}.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;display:flex;align-items:center;gap:15px}.eyebrow:before{content:'';width:28px;height:1px;background:var(--gold)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);font-weight:500}h1{font-size:clamp(54px,5.5vw,88px);line-height:1.02;letter-spacing:-.025em;margin:23px 0}h1 em{color:var(--gold);font-weight:400}h2{font-size:46px;line-height:1.1;margin-bottom:14px}h3{font-size:28px;line-height:1.15}.hero-copy>p{font-size:17px;color:#c3c1b8;max-width:450px;margin:26px 0 32px}.actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #bca174;background:var(--gold);color:#171914;padding:12px 23px;font-size:14px;font-weight:600;min-height:48px}.button.secondary{background:#11131280;color:var(--ink);border-color:#ffffff45}.button:hover{filter:brightness(1.15)}.hero-meta{font-size:12px;color:#a9a99f;margin-top:35px;letter-spacing:.08em}.container{max-width:1240px;margin:auto;padding:65px 5%}.section-top{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.text-link{color:var(--gold);font-size:14px;border-bottom:1px solid #d2b17650;padding-bottom:4px}.lead{color:var(--muted);max-width:620px}.chapter-strip{display:grid;grid-template-columns:130px 1fr auto;gap:35px;align-items:center;border:1px solid var(--line);background:var(--surface);padding:25px}.chapter-strip img{height:125px;object-fit:cover}.chapter-strip h3{font-size:32px;margin:6px 0}.label{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}.chapter-strip p{color:var(--muted);margin:0;font-size:14px}.quote{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:50px 20px;text-align:center;font:italic 30px/1.3 var(--serif);color:#c3c4b8;margin:0}.preview-grid,.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.portrait{aspect-ratio:3/4;object-fit:cover;object-position:top}.preview-card{position:relative;overflow:hidden}.preview-card img{transition:transform .4s}.preview-card:hover img{transform:scale(1.025)}.preview-card .overlay{position:absolute;bottom:0;left:0;right:0;padding:65px 22px 22px;background:linear-gradient(transparent,#070907ee)}.overlay h3{margin:4px 0}.overlay p{margin:0;color:#c1c3b7;font-size:14px}.page-head{padding-top:65px;padding-bottom:30px}.page-head h1{font-size:64px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}a.filter{display:inline-block;text-decoration:none}.filter{border:1px solid var(--line);background:transparent;color:var(--muted);padding:10px 18px;font-size:14px}a.filter[aria-current=page],.filter[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#d2b17610}.card{background:var(--surface);border:1px solid var(--line)}.card-body{padding:24px}.card h3{margin:5px 0 14px}.card p{color:var(--muted);font-size:15px}.card details{border-top:1px solid var(--line);padding-top:14px}.card summary{color:var(--gold);font-size:14px;cursor:pointer}.card details p{padding-top:15px;margin-bottom:0}.ref-art{position:relative;aspect-ratio:3/4;overflow:hidden}.ref-art img{position:absolute;width:100%;height:144.63%;top:-22.26%;object-fit:fill}.cleric-art{aspect-ratio:3/4;background:#1d1825;display:flex;align-items:center;justify-content:center;font:italic 27px var(--serif);color:#c7b7d0;padding:25px;text-align:center}.reader-bar{border-bottom:1px solid var(--line);padding:14px 5%;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:14px}.reader-controls{display:flex;gap:8px}.reader-controls button{color:var(--ink);background:transparent;border:1px solid var(--line);padding:5px 13px;min-height:40px}.reader-area{--reading-size:20px;background:#ebe5d9;color:#302c25;padding:65px 22px 90px}.reader-area.dark{background:#171a17;color:#dfdbd2}.reader{max-width:720px;margin:auto}.reader h1{font-size:58px;text-align:center}.reader .cap{text-align:center;letter-spacing:.2em;font-size:12px;color:#8a693d}.reader .subtitle{text-align:center;font:italic 23px/1.4 var(--serif);margin:0 auto 55px;max-width:500px}.prose{font:var(--reading-size)/1.85 Georgia,serif}.prose p{margin:0 0 1.1em}.prose .scene{text-align:center;color:#97794b;margin:3em 0}.editor-note{padding:18px 22px;border:1px solid #8f78563a;font-size:14px;margin-bottom:40px}.reader-end{text-align:center;margin-top:50px}.comic-head{text-align:center;padding:65px 20px 40px;background:#000}.comic-head .eyebrow{justify-content:center}.comic-head h1{font-size:54px}.comic-head p{color:#aaa}.comic{background:#000;padding:50px 0 100px}.comic-inner{width:min(100%,760px);margin:auto}.panel{position:relative;width:85%;margin:0 auto 150px;border:8px solid #080808}.panel.wide{width:94%}.panel.narrow{width:72%}.panel img{width:100%}.sprite{aspect-ratio:1.5;overflow:hidden;position:relative;background:#101010}.sprite img{position:absolute;width:200%;height:200%;max-width:none;object-fit:fill}.sprite.tr img{left:-100%;top:0}.sprite.tl img{left:0;top:0}.sprite.bl img{left:0;top:-100%}.sprite.br img{left:-100%;top:-100%}.bubble{position:relative;background:#fff;color:#171717;border:3px solid #090909;border-radius:50%;font-size:clamp(18px,2.5vw,27px);font-weight:600;line-height:1.35;padding:22px 27px;max-width:80%;width:fit-content;margin:-25px -12px -45px auto;z-index:2;text-align:center;box-shadow:0 2px 0 #000}.bubble.top{margin:-40px auto -30px -15px}.narration{background:#f0e9dc;color:#222;padding:15px 20px;position:relative;width:fit-content;max-width:90%;margin:-28px auto -22px -14px;font:19px/1.5 Georgia,serif;border:3px solid #000;z-index:2}.comic-divider{text-align:center;font:30px var(--serif);letter-spacing:.15em;color:var(--gold);padding:20px 20px 130px}.comic-end{text-align:center;color:#aaa;max-width:600px;padding:0 25px;margin:auto}.comic-end h2{color:var(--gold)}.wiki-layout{display:grid;grid-template-columns:220px 1fr;gap:45px}.wiki-nav{display:flex;flex-direction:column;align-items:stretch;gap:8px}.wiki-nav a.filter{display:inline-block;text-decoration:none}.filter{text-align:left}.wiki-entries{display:grid;gap:15px}.entry{padding:25px;border:1px solid var(--line);background:var(--surface)}.entry h3{margin:4px 0 12px}.entry p{color:var(--muted);margin-bottom:0}.gallery-grid{columns:3;column-gap:24px}.gallery-item{break-inside:avoid;margin-bottom:24px;display:block;width:100%;padding:0;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-align:left}.gallery-item span{display:block;padding:13px 17px;font-size:14px}.gallery-item:hover{border-color:var(--gold)}dialog{width:min(900px,95vw);max-height:95vh;background:#141714;border:1px solid #7b704f;color:var(--ink);padding:45px 20px 20px}dialog::backdrop{background:#000d}dialog img{width:auto;max-width:100%;max-height:78vh;margin:auto;object-fit:contain}.close{position:absolute;right:10px;top:3px;border:0;background:none;color:white;font-size:32px;min-width:44px}.dialog-caption{text-align:center;padding-top:15px}.empty{padding:50px;border:1px solid var(--line);color:var(--muted)}footer{padding:45px 5%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px}footer p,footer span{font-size:12px;color:#a3a598;margin:0}footer p{font-family:var(--serif);font-size:18px;max-width:320px}.progress{height:3px;background:var(--gold);position:fixed;top:0;left:0;z-index:50;width:0;pointer-events:none}@media(min-width:1500px){.hero{min-height:740px}}@media(max-width:1000px){.nav{gap:20px;padding:0 4%;flex-wrap:wrap;height:auto;min-height:80px}.nav-read{display:none}.nav nav{gap:20px}.hero-copy{width:75%}.cards{grid-template-columns:repeat(2,1fr)}footer{flex-wrap:wrap}.gallery-grid{columns:2}}@media(max-width:650px){.nav{padding:20px 20px 0;gap:10px;display:block}.brand{font-size:24px}.nav nav{overflow-x:auto;gap:25px;scrollbar-width:none}.nav nav a{white-space:nowrap;padding:15px 0;font-size:14px}.hero{min-height:660px;align-items:end}.hero-art{object-position:60% 50%}.hero:after{background:linear-gradient(0deg,#111312 0%,#111312d9 30%,#1113123d 80%,#11131225)}.hero-copy{width:100%;padding:230px 24px 40px}.hero h1{font-size:57px;max-width:370px}.hero-copy>p{font-size:16px}.hero-meta{margin-top:24px}.container{padding:45px 22px}.section-top{align-items:start;flex-direction:column;gap:10px}h2{font-size:37px}.chapter-strip{grid-template-columns:76px 1fr;gap:18px;padding:18px}.chapter-strip img{height:110px}.chapter-strip h3{font-size:25px}.chapter-strip>.button{grid-column:1/-1}.preview-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:10px}.preview-card .overlay{position:static;padding:13px 0;background:none}.preview-card .overlay h3{font-size:21px}.preview-card .overlay p{font-size:12px}.preview-card .label{font-size:12px}.quote{font-size:26px;padding:40px 25px}.page-head{padding-top:40px;padding-bottom:5px}.page-head h1{font-size:49px}.cards{grid-template-columns:1fr;gap:25px}.card .portrait{aspect-ratio:4/3;object-position:50% 25%}.card .ref-art{aspect-ratio:3/4}.wiki-layout{grid-template-columns:1fr;gap:25px}.wiki-nav{flex-direction:row;flex-wrap:wrap}.reader-bar{flex-wrap:wrap;gap:10px}.reader-area{padding-top:40px}.reader h1{font-size:46px}.reader .subtitle{font-size:22px}.reader-area{--reading-size:19px}.comic-head h1{font-size:42px}.panel{margin-bottom:135px;border-width:5px}.bubble{font-size:18px;padding:18px 22px;max-width:95%}.narration{font-size:17px}.comic-divider{font-size:24px}.gallery-grid{column-gap:14px}.gallery-item{margin-bottom:14px}.gallery-item span{font-size:12px;padding:10px}footer{display:block}footer p{margin:20px 0}dialog .ref-art{max-height:78vh;width:min(100%,480px);margin:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.panel.reveal{margin-top:200px;margin-bottom:180px}.reveal .sprite{aspect-ratio:3/4}.reveal .sprite img{width:400%;height:200%;left:-250%;top:-100%}
/* Episode 1: dialogue remains outside the image crop, readable on mobile. */
.reader .prose{margin-top:55px}.episode-panel{margin-bottom:165px}.episode-caption{position:relative;z-index:2;background:#f5eddf;color:#211d19;border:3px solid #000;padding:18px 22px;font:20px/1.5 Georgia,serif;margin:0 12% -23px -14px}.speech-flow{position:relative;z-index:2;margin-top:-24px}.speech-flow:empty{display:none}.speech-flow .bubble{margin:0 -14px 26px auto;max-width:86%;font-size:clamp(18px,2.6vw,26px);border-radius:45%;padding:22px 30px}.speech-flow .bubble.left{margin-left:-14px;margin-right:auto}.speaker{display:block;font:600 12px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#62584e;margin-bottom:7px}.after-narration{font:21px/1.7 var(--serif);text-align:center;color:#ddd6ca;margin:55px 8% 0}.child-reveal{margin-top:200px}.child-reveal .sprite{aspect-ratio:3/4}.child-reveal .sprite img{width:400%;height:200%;left:-50%;top:-100%}.character-sprite .sprite{aspect-ratio:3/4}.character-sprite .sprite img{width:400%;height:200%}.character-sprite .sprite.tr img{left:-250%;top:0}.character-sprite .sprite.bl img{left:-50%;top:-100%}.character-sprite .sprite.br img{left:-250%;top:-100%}.child-form .sprite{margin-top:20px}.card .child-form p{font-size:15px}.gallery-item .character-sprite .sprite{aspect-ratio:3/4}dialog .character-sprite{max-width:480px;margin:auto}dialog .sprite img{max-height:none;max-width:none;margin:0;object-fit:fill}.comic-divider{max-width:580px;line-height:1.6;margin:auto;letter-spacing:.06em}@media(max-width:650px){.episode-caption{font-size:17px;padding:15px;margin-right:5%;margin-left:-8px}.speech-flow .bubble{font-size:18px;max-width:95%;padding:20px 24px}.after-narration{font-size:21px}.episode-panel{margin-bottom:150px}.card .character-sprite .sprite{aspect-ratio:3/4}}

.character-sprite .sprite.tl img{left:-50%;top:0}

.episode-cover{overflow:hidden}.episode-cover>img{position:absolute;top:0;left:0;width:200%;height:200%;max-width:none;object-fit:cover;object-position:25% 0}.chapter-strip>.sprite{height:125px;aspect-ratio:auto}.chapter-strip>.sprite img{height:200%;width:200%;object-fit:fill}
/* Story title and chapter navigation. */
.brand-title{display:block;font:500 18px/1.3 var(--serif);letter-spacing:0;white-space:normal;max-width:340px}.footer-title{font:500 22px/1.3 var(--serif);letter-spacing:0;white-space:normal;max-width:330px}.hero h1.story-title{font-size:clamp(40px,4.25vw,64px);line-height:1.08}.episode-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.episode-link{display:block;padding:25px;border:1px solid var(--line);background:var(--surface)}.episode-link h3{margin-top:14px}.episode-nav-wrap{padding:24px max(22px,5vw);border-bottom:1px solid var(--line)}.episode-navigation{display:flex;align-items:end;justify-content:center;gap:22px;max-width:920px;margin:auto}.episode-navigation label{flex:1;max-width:380px;font-size:14px;color:var(--muted)}.episode-select{display:block;width:100%;margin-top:7px;padding:12px 15px;min-height:48px;color:var(--ink);background:var(--surface);border:1px solid #706a5a;cursor:pointer}.episode-navigation button:disabled{opacity:.4;cursor:default}.novel-title{text-align:center;font:500 21px/1.4 var(--serif);margin:0 auto 36px;max-width:500px}.reader-area.dark .novel-title{color:var(--muted)}
/* No text overlays the illustration: all balloons and captions occupy the black gutters. */
.episode-panel .episode-caption{margin:0 0 34px;max-width:100%;width:100%}.episode-panel .speech-flow{margin:72px 0 0;display:flex;flex-direction:column;gap:72px}.episode-panel .speech-flow:empty{display:none}.episode-panel .speech-flow .bubble{margin:0 0 0 auto;max-width:90%;position:relative}.episode-panel .speech-flow .bubble.left{margin:0 auto 0 0}.episode-panel .bubble::after{display:none}.episode-panel .after-narration{margin-top:45px}.episode-panel{border-color:#000}.episode-panel>.sprite{outline:5px solid #080808;outline-offset:0}.episode-panel .speaker{font-size:12px}
@media(max-width:650px){.brand-title{font-size:20px;max-width:350px}.hero h1.story-title{font-size:42px}.hero-copy{padding-top:210px}.episode-list{grid-template-columns:1fr}.episode-navigation{display:grid;grid-template-columns:1fr 1fr;gap:12px}.episode-navigation label{grid-column:1/-1;grid-row:1;max-width:none}.episode-navigation .button{padding:10px 12px;font-size:14px}.episode-panel .speech-flow .bubble{max-width:96%}.episode-panel .episode-caption{margin-bottom:30px}.novel-title{font-size:20px}.nav nav{margin-top:8px}}

/* Version 4: named balloons without tails, separated from artwork. */
.episode-panel .bubble::before,.episode-panel .bubble::after{display:none!important}.episode-panel .speech-flow{gap:28px;margin-top:34px}.episode-panel .speaker{font-size:14px}.comic>.comic-inner{padding-top:60px}

/* Reading rhythm: image and dialogue form one scene; DOM order is reading order. */
.episode-panel{margin-bottom:58px}.episode-panel.child-reveal{margin-top:64px}
.episode-panel .episode-caption{margin-bottom:16px;padding:14px 18px;font-size:18px}
.episode-panel .speech-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 12px;margin:16px 0 0}
.episode-panel .speech-flow .bubble{grid-column:1/-1;width:100%;max-width:100%;min-width:0;margin:0;padding:15px 20px;border-radius:30px;font-size:20px;line-height:1.45}
.episode-panel .speech-flow .bubble.compact{grid-column:auto}
.episode-panel .speaker{font-size:13px;line-height:1.3;letter-spacing:.045em;margin-bottom:5px}
.episode-panel .after-narration{margin:18px 3% 0;font-size:20px;line-height:1.5}
.episode-panel .tone-shout .dialogue-text{font-family:'Bangers','Impact',sans-serif;font-size:1.4em;letter-spacing:.055em;line-height:1.25}
.episode-panel .tone-shout{border-width:3px;box-shadow:3px 3px 0 #a5a097}
.episode-panel .tone-soft .dialogue-text{font-family:Georgia,serif;font-style:italic}
.episode-panel .tone-thought .dialogue-text{font-family:Georgia,serif;font-style:italic}
.episode-panel .tone-thought{background:#eee9f8}
.episode-panel .tone-otherworldly{background:#e9e0f7;border-color:#937aae}
.episode-panel .tone-otherworldly .dialogue-text{font-family:Georgia,serif;font-weight:700;letter-spacing:.025em}
.comic-divider{padding:36px 18px!important;margin:0 auto 48px!important;font-size:23px;line-height:1.5}
@media(min-width:700px){.episode-panel .speech-flow .bubble.medium{grid-column:auto}}
@media(max-width:650px){.episode-panel{margin-bottom:44px}.episode-panel .speech-flow{gap:10px;margin-top:14px}.episode-panel .speech-flow .bubble{font-size:18px;padding:14px 16px;border-radius:25px}.episode-panel .episode-caption{margin-bottom:14px;font-size:17px}.episode-panel .after-narration{font-size:19px}.episode-panel .tone-shout .dialogue-text{font-size:1.25em}.episode-panel .speaker{font-size:12px}.comic-divider{font-size:21px}}
@media(max-width:350px){.episode-panel .speech-flow .bubble.compact{grid-column:1/-1}}
/* The authoritative Pomeko portrait must show her face and complete costume. */
.card#pomeko .portrait{aspect-ratio:2/3;object-fit:contain;object-position:center;background:#09090f}

/* Dedicated age references remain fully visible in the character archive. */
.character-versions{margin-top:16px}.character-versions figure{margin:24px 0 0}.character-versions img{aspect-ratio:2/3;object-fit:contain;background:#111}.character-versions h4{color:var(--gold);margin:14px 0 0;font-size:16px}.character-versions figcaption p{padding-top:8px}
/* Persistent navigation and site-wide color palettes. */
:root{color-scheme:dark;--header-height:88px}
html{scroll-padding-top:calc(var(--header-height) + 20px)}
[id],.episode-caption{scroll-margin-top:calc(var(--header-height) + 20px)}
header.nav{position:sticky;top:0;z-index:60;background:var(--bg);height:var(--header-height);gap:20px;box-shadow:0 4px 18px #0002}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.theme-toggle,.menu-toggle{color:var(--ink);background:var(--surface);border:1px solid var(--line);min-width:44px;min-height:44px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px}
.theme-toggle:hover,.menu-toggle:hover{border-color:var(--gold)}
.theme-symbol{font-size:23px;line-height:1}
.theme-label{font-size:13px;white-space:nowrap}
.menu-toggle{display:none}
header.nav .nav-read{display:none}
header.nav nav{gap:22px}
:root[data-theme=light]{color-scheme:light;--bg:#f5f0e6;--surface:#fffaf2;--ink:#272c26;--muted:#596052;--gold:#806022;--line:#313b302b}
[data-theme=light] .nav nav a{color:var(--muted)}
[data-theme=light] .nav nav a:hover,[data-theme=light] .nav nav a[aria-current]{color:var(--gold)}
[data-theme=light] .button{background:#806022;border-color:#806022;color:#fffaf2}
[data-theme=light] .button.secondary{background:var(--surface);border-color:#8e947d;color:var(--ink)}
[data-theme=light] .quote{color:#505748}
[data-theme=light] .hero:after{background:linear-gradient(90deg,#f5f0e6fa 0%,#f5f0e6e8 32%,#f5f0e677 67%,#f5f0e620),linear-gradient(0deg,#f5f0e6,transparent 35%)}
[data-theme=light] .hero-copy>p,[data-theme=light] .hero-meta{color:#414a3c}
[data-theme=light] .preview-card .overlay{color:#eee9df}
[data-theme=light] .preview-card .label{color:#e4c18a}
[data-theme=light] .reader-area{background:#fffaf2;color:#302c25}
[data-theme=light] .reader .cap{color:#806022}
[data-theme=light] .comic,[data-theme=light] .comic-head{background:#f5f0e6}
[data-theme=light] .episode-panel{border-color:#f5f0e6}
[data-theme=light] .episode-panel>.sprite{outline-color:#d4cbbb}
[data-theme=light] .episode-panel .episode-caption{background:#e7decc;color:#302c25;border-color:#c3b79e}
[data-theme=light] .episode-panel .after-narration,[data-theme=light] .comic-end,[data-theme=light] .comic-head p{color:#505748}
[data-theme=light] footer p,[data-theme=light] footer span{color:var(--muted)}
[data-theme=light] dialog{background:var(--surface);color:var(--ink);border-color:#9e916e}
[data-theme=light] .close{color:var(--ink)}
@media(max-width:1100px){
  :root{--header-height:96px}
  header.nav{display:flex;flex-wrap:nowrap;padding:12px 20px;gap:12px;min-height:0}
  header.nav>.brand{min-width:0;flex:1}
  header.nav .brand-title{font-size:19px;line-height:1.2;max-width:340px}
  .menu-toggle{display:flex;flex-direction:column;gap:5px;padding:10px}
  .menu-toggle span{display:block;width:21px;height:2px;background:currentColor;transition:transform .15s,opacity .15s}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){opacity:0}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.nav nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:12px 20px 20px;max-height:calc(100dvh - var(--header-height));overflow:auto;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 10px 18px #0003}
  header.nav.menu-open nav{display:flex;flex-direction:column;align-items:stretch;gap:2px}
  header.nav nav a{padding:13px 16px;min-height:48px;border-radius:4px}
  header.nav nav a[aria-current]{background:var(--surface)}
  header.nav nav a[aria-current]:after{display:none}
}
@media(max-width:650px){
  header.nav{padding:10px 14px;gap:8px}
  header.nav .brand-title{font-size:17px;max-width:250px}
  .header-actions{gap:6px}
  .theme-label{display:none}
  .theme-toggle{padding:8px}
  [data-theme=light] .hero:after{background:linear-gradient(0deg,#f5f0e6 0%,#f5f0e6ef 35%,#f5f0e647 82%)}
  [data-theme=light] .preview-card .overlay{color:var(--ink)}
  [data-theme=light] .preview-card .overlay p,[data-theme=light] .preview-card .label{color:var(--muted)}
}

.ficha-call{border:1px solid var(--line);background:#161814;padding:8px 8px 28px;margin-top:28px}.ficha-call .lead{max-width:38rem}

.nav-ficha{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 12px;background:var(--gold);color:#171914;font-size:13px;font-weight:600;white-space:nowrap}
.ficha-popup{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:#0c0d0acc}
.ficha-popup[hidden]{display:none}
.ficha-card{width:min(440px,100%);background:#171914;border:1px solid #bca174;padding:28px 24px;color:var(--ink)}
.ficha-card h2{font:500 32px/1.15 var(--serif);margin:12px 0}
.ficha-card p{color:#c3c4b8}
.ficha-card .actions{margin-top:22px}
@media(max-width:720px){.nav-ficha{font-size:12px;padding:6px 8px}}

.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}@media(min-width:900px){.work-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}}
.work-card{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);background:var(--surface);color:inherit}
.work-card a{display:block;height:100%;color:inherit}
.work-card img,.work-fallback{width:100%;height:100%;object-fit:cover;display:block}
.work-copy{position:absolute;left:0;right:0;bottom:0;padding:8px 8px 10px;background:linear-gradient(transparent,rgba(8,9,8,.92) 42%)}
.work-card .label{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-card h3{margin:3px 0 0;font-size:12px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.work-blurb{margin:4px 28px 0 0;font-size:10px;line-height:1.3;color:#c3c4b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-more{position:absolute;right:6px;bottom:6px;z-index:2;border:0;background:transparent;color:#e2c482;font-size:9px;padding:2px}
.work-card.is-open{aspect-ratio:auto;overflow:visible}
.work-card.is-open a{height:auto}
.work-card.is-open img,.work-card.is-open .work-fallback{height:auto;aspect-ratio:1}
.work-card.is-open .work-copy{position:static;background:var(--surface)}
.work-card.is-open .work-blurb{white-space:normal;overflow:visible;margin-right:0}
.work-card.is-open .work-more{position:static;display:block;margin:0 8px 8px auto}

.home-intro{padding-bottom:8px}
.home-intro .story-title{max-width:16ch}
.work-fallback{display:block;width:100%;aspect-ratio:1;background:linear-gradient(160deg,#1b1d18,#2a2418 70%,#3a3120)}

.hq-page{display:block;width:min(860px,100%);margin:0 auto 14px;background:#111}

.hq-nav{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:18px auto;width:min(860px,100%)}
.hq-nav label{display:flex;align-items:center;gap:8px;font-size:14px}
.hq-select{background:#111312;color:var(--ink);border:1px solid var(--line);min-height:44px;padding:6px 10px}
/* Authored on-art dialogue, currently used only by episode 1. */
.episode-panel.overlay-panel{width:94%;max-width:560px;container-type:inline-size}
.art-frame{position:relative;isolation:isolate;outline:3px solid #080808}
.art-frame>.sprite{aspect-ratio:2/3}
.art-frame .sprite img{object-fit:fill}
.balloon-layer{position:absolute;inset:0}
.episode-panel .art-balloon{position:absolute;box-sizing:border-box;max-width:none;margin:0;padding:10px 13px;border:2px solid #242020;border-radius:48% / 36%;background:#fffdf5;color:#201e1b;font-family:Arial,sans-serif;font-size:clamp(18px,4.9cqw,26px);line-height:1.22;text-align:center;box-shadow:1px 3px 0 #0004;z-index:2}
.art-balloon .dialogue-text{display:block}
.art-balloon .dialogue-text+.dialogue-text{margin-top:.35em}
.episode-panel .art-balloon::after{display:block!important;content:'';position:absolute;width:10px;height:14px;left:calc(50% - 5px);bottom:-12px;top:auto;background:#fffdf5;clip-path:polygon(0 0,100% 0,25% 100%);border:0;transform:none}
.episode-panel .art-balloon.tail-up::after{top:-12px;bottom:auto;clip-path:polygon(25% 0,100% 100%,0 100%)}
.episode-panel .art-balloon::after{left:var(--tail-x,50%)}
.episode-panel .art-balloon.tone-shout{border-radius:20px;border-width:3px}
.episode-panel .art-balloon.tone-shout .dialogue-text{font-size:1.14em;line-height:1.12}
.episode-panel .art-balloon.tone-soft{background:#fffdf5}
@media(max-width:380px){.episode-panel .art-balloon{padding:8px 10px}}

/* Vozes sem origem visível no sonho e pensamentos. */
.episode-panel .art-balloon.voice-unplaced::after{display:none!important}

/* Pensamentos extensos do episódio 4 preservam área de leitura nos cantos. */
.episode-panel:is([data-scene="ep04-q001"],[data-scene="ep04-q023"]) .art-balloon{border-radius:26px}
.episode-panel[data-scene^="ep05-"] .art-balloon{border-radius:26px}

/* Match standalone table portraits without stretching their source sheets. */
@media(max-width:650px){.card .mesa-portrait .sprite{aspect-ratio:4/3}.card .mesa-portrait .sprite img{width:225%}.card .mesa-portrait .sprite:is(.tl,.bl) img{left:-6.25%}.card .mesa-portrait .sprite:is(.tr,.br) img{left:-118.75%}}

/* Preserve standalone HQ portrait proportions at every viewport. */
.card.hq-character .portrait{aspect-ratio:3/4;object-fit:cover;object-position:center;}
.episode-panel[data-scene^="ep06-"] .art-balloon{border-radius:26px}
.episode-panel[data-scene^="ep07-"] .art-balloon{border-radius:26px}
.episode-panel[data-scene^="ep08-"] .art-balloon{border-radius:26px}

.episode-panel[data-scene^="ep09-"] .art-balloon{border-radius:26px}
.episode-panel[data-scene^="ep10-"] .art-balloon{border-radius:26px}
.episode-panel[data-scene^="ep11-"] .art-balloon{border-radius:26px}

/* Episode 12 and origins */
[data-scene^="ep12-"] .art-balloon{border-radius:26px}
.character-origin{color:var(--gold);font-size:14px;margin:8px 0 0}.character-location{font-size:14px;color:var(--muted);margin-top:4px}.origin-jumps{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 40px}.origin-section{scroll-margin-top:140px;margin:0 0 64px}.origin-section h2{margin-bottom:26px}

.card.portrait-full .portrait{aspect-ratio:2/3;object-fit:contain;object-position:center;background:var(--surface)}

/* Episode 13: selectable dialogue over the art. */
[data-scene^="ep13-"] .art-balloon{border-radius:26px}

/* Home character thumbnail: original portraits in one continuous row. */
.work-montage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;aspect-ratio:1;overflow:hidden}
.work-montage>span{min-width:0;overflow:hidden}
.work-card .work-montage img,.work-card.is-open .work-montage img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 20%}