.comic-page { margin:0; min-height:100svh; background:#edf1e8; color:#103f2c; }
.comic-page [hidden] { display:none !important; }
.comic-page :is(a,button):focus-visible { outline:3px solid #387329; outline-offset:4px; }
.story-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:min(1080px,92vw); height:4.7rem; margin:auto; }
.story-header img { display:block; width:9.5rem; height:auto; }
.story-home { font-size:.85rem; font-weight:600; }
.story-home:hover { text-decoration:underline; text-underline-offset:.25rem; }
.story-main { width:min(980px,94vw); margin:0 auto; }
.story-intro { text-align:center; padding:.6rem 0 1.25rem; }
.story-intro h1 { margin:0 0 .35rem; font:400 clamp(1.8rem,3.2vw,2.65rem)/1.1 var(--serif); letter-spacing:-.025em; }
.story-intro p { margin:0; color:#536059; font-size:.92rem; }
.story-reader { overflow:hidden; border-radius:1.2rem; background:#fafbf7; box-shadow:0 .7rem 3rem #103f2c0b; }
.story-title { margin:0; padding:.85rem 1.4rem; font:650 1rem/1.4 var(--sans); border-bottom:1px solid #103f2c16; }
.story-title > span { font-variant-numeric:tabular-nums; }
.story-art { width:min(100%,max(17rem,calc(100svh - 24rem)),46rem); aspect-ratio:1; margin:auto; touch-action:pan-y pinch-zoom; }
.story-art img { display:block; width:100%; height:100%; object-fit:contain; }
.story-caption { margin:0; padding:.85rem 1.4rem 1rem; font-size:.96rem; line-height:1.55; }
.story-controls { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:.8rem 1.4rem; border-top:1px solid #103f2c16; }
.story-nav { display:inline-flex; align-items:center; justify-content:center; justify-self:start; min-height:2.8rem; padding:.5rem .9rem; border:1px solid #103f2c33; border-radius:.45rem; font-size:.88rem; font-weight:650; cursor:pointer; transition:background 150ms ease; }
.story-nav:last-child { justify-self:end; }
.story-nav:hover { background:#eaf0e5; }
.story-nav[aria-disabled="true"] { opacity:.3; cursor:default; pointer-events:none; }
.story-count { font-size:.85rem; font-variant-numeric:tabular-nums; }
.story-under { position:relative; display:flex; justify-content:center; padding:.55rem 0 .25rem; }
.story-copy { border:0; padding:.45rem .75rem; background:transparent; color:#376344; font:500 .8rem/1.4 var(--sans); cursor:pointer; }
.story-copy:hover { text-decoration:underline; text-underline-offset:.25rem; }
.story-copy > span { margin-left:.4rem; }
.story-status { position:absolute; bottom:2.6rem; left:50%; transform:translateX(-50%); margin:0; max-width:90vw; width:max-content; border-radius:.45rem; background:#103f2c; color:#fff; padding:.6rem .9rem; font-size:.85rem; }
.story-status:empty { display:none; }
.story-footer { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.6rem 1.3rem; padding:.75rem 1rem 1.3rem; color:#536059; font-size:.72rem; }
.story-footer a:hover { color:#103f2c; text-decoration:underline; }
@media (min-width:1250px) and (min-height:1000px) { .story-main { width:min(1100px,94vw); } }
@media (max-width:600px) { .story-header { height:4rem; } .story-header img { width:8rem; } .story-home { font-size:.78rem; } .story-intro { padding:.6rem .5rem 1rem; } .story-intro h1 { font-size:1.85rem; } .story-intro p { font-size:.8rem; } .story-reader { border-radius:.8rem; } .story-title { padding:.8rem 1rem; font-size:.9rem; } .story-art { width:100%; } .story-caption { padding:.8rem 1rem 1rem; font-size:.9rem; } .story-controls { padding:.7rem 1rem; gap:.6rem; } .story-nav { padding:.5rem .8rem; font-size:.82rem; } .story-footer { font-size:.68rem; } }
@media (prefers-reduced-motion:reduce) { .story-nav { transition:none; } }