@font-face{font-family:NotoSansTC;src:url('assets/fonts/NotoSansTC-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:NotoSansTC;src:url('assets/fonts/NotoSansTC-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--ink:#1f2428;--ink-soft:#566066;--paper:#f1ecdf;--paper-light:#faf7ef;--line:#b9b1a1;--blue:#5da9e9;--red:#e54b4b;--olive:#6f7a70;--spring:#a8c686;--warm:#d9a85a;--max:1180px;--serif:Georgia,'Times New Roman',serif;--sans:NotoSansTC,'Noto Sans TC',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.75;overflow-x:hidden}
body:has(dialog[open]){overflow:hidden}
.skip-link{position:absolute;left:1rem;top:-5rem;background:var(--blue);color:var(--ink);padding:.5rem 1rem;z-index:20}.skip-link:focus{top:1rem}
.reading-progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:30}.reading-progress span{display:block;width:0;height:100%;background:var(--red);transition:width .1s linear}
.section-shell{width:min(calc(100% - 3rem),var(--max));margin:0 auto}
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:0 max(1.5rem,calc((100vw - var(--max))/2));background:rgba(31,36,40,.97);color:var(--paper-light);border-bottom:1px solid rgba(250,247,239,.2)}
.brand{display:flex;align-items:center;gap:.65rem;color:inherit;text-decoration:none;letter-spacing:.14em;font-size:.72rem;font-weight:700}.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;font-size:.7rem;letter-spacing:0}
.main-nav{display:flex;gap:2rem;font-size:.83rem}.main-nav a,.mobile-nav a{color:inherit;text-decoration:none;opacity:.8}.main-nav a:hover,.main-nav a:focus,.mobile-nav a:hover,.mobile-nav a:focus{opacity:1;color:var(--blue)}.menu-button,.mobile-nav{display:none}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding-top:clamp(4rem,9vw,8.5rem);padding-bottom:clamp(4rem,9vw,8.5rem)}
.eyebrow{margin:0 0 1rem;color:var(--red);font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.hero h1,.story-intro h2{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:1.1}.hero h1{font-size:clamp(3rem,5.8vw,6rem);max-width:680px}.hero h1 em,.story-intro h2 em{font-style:normal;color:var(--blue)}
.hero-lede{max-width:510px;margin:2rem 0 1.8rem;font-size:1.08rem;color:var(--ink-soft)}.button{display:inline-flex;align-items:center;gap:1.2rem;padding:.7rem 1.1rem;text-decoration:none;font-size:.86rem;font-weight:700;border:1px solid var(--ink)}.button-primary{background:var(--ink);color:var(--paper-light)}.button-primary:hover,.button-primary:focus{background:var(--blue);color:var(--ink)}.credit-line{margin-top:2.5rem;font-size:.78rem;color:var(--ink-soft)}
.hero-art{margin:0;transform:rotate(1deg)}.hero-art img{display:block;width:100%;height:auto;background:var(--ink);border:8px solid var(--ink);box-shadow:18px 18px 0 var(--warm)}.hero-art figcaption{margin-top:1rem;font-size:.7rem;letter-spacing:.16em;color:var(--ink-soft)}
.story{padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(5rem,9vw,8rem)}.story-intro{max-width:800px;margin-bottom:4rem}.source-intro{margin:0;color:var(--ink-soft);font-size:1.1rem}.story-flow{border-top:1px solid var(--line)}
.chapter{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;padding:clamp(3.5rem,8vw,7rem) 0;border-bottom:1px solid var(--line)}.chapter--reverse .chapter-image-button{order:2}.chapter--reverse .chapter-copy{order:1}.chapter-image-button{display:block;width:100%;padding:0;border:0;background:var(--ink);cursor:zoom-in;text-align:left}.chapter-image-button img{display:block;width:100%;height:auto;transition:transform .25s ease,filter .25s ease}.chapter-image-button:hover img,.chapter-image-button:focus-visible img{transform:scale(1.015);filter:brightness(1.08)}.chapter-copy{max-width:520px}.story-kicker{margin:0 0 .7rem;color:var(--red);font-size:.7rem;font-weight:700;letter-spacing:.16em}.chapter h3{margin:0 0 1.3rem;font-family:var(--serif);font-size:clamp(2rem,3.6vw,3.7rem);font-weight:400;line-height:1.15}.chapter p:not(.story-kicker){margin:.85rem 0;color:var(--ink-soft);font-size:1.02rem}
.chapter--dark,.chapter--night,.chapter--end{margin-left:0;margin-right:0;padding-left:2.5rem;padding-right:2.5rem;background:var(--ink);color:var(--paper-light)}.chapter--dark .chapter-copy,.chapter--night .chapter-copy,.chapter--end .chapter-copy{max-width:520px}.chapter--dark p:not(.story-kicker),.chapter--night p:not(.story-kicker),.chapter--end p:not(.story-kicker){color:#d2d7d1}.chapter--olive{background:var(--olive);color:var(--paper-light);padding-left:2.5rem;padding-right:2.5rem}.chapter--olive p:not(.story-kicker){color:#edf0e8}.chapter--spring{background:var(--spring);padding-left:2.5rem;padding-right:2.5rem}.chapter--warm{background:var(--warm);padding-left:2.5rem;padding-right:2.5rem}.chapter--end .chapter-image-button{box-shadow:8px 8px 0 var(--red)}
.note-section{padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(4rem,8vw,7rem)}.note-card{max-width:850px;padding:3rem;border:1px solid var(--ink);background:var(--paper-light);box-shadow:14px 14px 0 var(--warm)}.note-card h2{margin:0 0 1.3rem;font-family:var(--serif);font-size:clamp(2rem,4vw,3.8rem);font-weight:400;line-height:1.15}.note-card p{max-width:720px;color:var(--ink-soft)}
.site-footer{display:flex;justify-content:space-between;gap:2rem;padding-top:2rem;padding-bottom:3rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-soft)}.site-footer .brand-mark{width:25px;height:25px;font-size:.56rem;color:var(--ink)}.site-footer p{margin:0;text-align:right}
.lightbox{width:min(96vw,1280px);max-width:none;padding:0;border:1px solid rgba(250,247,239,.45);background:var(--ink);color:var(--paper-light)}.lightbox::backdrop{background:rgba(10,14,16,.88)}.lightbox-bar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem}.lightbox-bar p{margin:0;color:#dce1d9;font-size:.85rem}.lightbox-bar p span:first-child{color:var(--blue);font-family:var(--serif);font-size:1.4rem}.close-button{border:0;background:none;color:var(--paper-light);font-size:2rem;line-height:1;cursor:pointer}.lightbox-body{display:grid;grid-template-columns:70px 1fr 70px;align-items:center;gap:1rem;padding:0 1.2rem 1.2rem}.lightbox-body img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain}.lightbox-arrow{width:48px;height:48px;border:1px solid rgba(250,247,239,.4);background:transparent;color:var(--paper-light);font-size:1.4rem;cursor:pointer}.lightbox-arrow:hover,.lightbox-arrow:focus{background:var(--blue);color:var(--ink)}
@media(max-width:800px){.site-header{min-height:62px}.main-nav{display:none}.menu-button{display:block;padding:.4rem .7rem;border:1px solid rgba(250,247,239,.5);background:none;color:inherit;font:inherit;font-size:.75rem}.mobile-nav{position:absolute;top:62px;left:0;right:0;display:none;flex-direction:column;padding:1rem 1.5rem;background:var(--ink);border-bottom:1px solid rgba(250,247,239,.2)}.mobile-nav.is-open{display:flex}.hero{grid-template-columns:1fr;gap:3rem;padding-top:4.5rem}.hero h1{font-size:clamp(2.75rem,12vw,5rem)}.hero-art{max-width:720px;margin:0 auto}.chapter,.chapter--reverse{grid-template-columns:1fr;gap:2rem;padding:3.5rem 0}.chapter--reverse .chapter-image-button,.chapter--reverse .chapter-copy{order:initial}.chapter--dark,.chapter--night,.chapter--end{margin-left:0;margin-right:0;padding-left:1rem;padding-right:1rem}.chapter--olive,.chapter--spring,.chapter--warm{padding-left:1rem;padding-right:1rem}.chapter-copy{max-width:none}.chapter p:not(.story-kicker){font-size:.96rem}.note-card{padding:2rem 1.25rem}.site-footer{display:block}.site-footer p{text-align:left;margin-top:1rem}.lightbox-body{grid-template-columns:1fr;position:relative;padding:0 .7rem .7rem}.lightbox-body img{grid-row:1;max-height:70vh}.lightbox-arrow{position:absolute;top:50%;z-index:1;background:rgba(31,36,40,.7)}#prevComic{left:1rem}#nextComic{right:1rem}}
@media(max-width:520px){.section-shell{width:min(calc(100% - 2rem),var(--max))}.hero-lede{font-size:1rem}.chapter h3{font-size:2.25rem}.chapter-image-button img{width:100%;height:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.chapter-image-button img{transition:none}}