:root{--blue:#0878b9;--blue2:#26a9e0;--ink:#101820;--paper:#f8f5eb;--yellow:#ffd447;--red:#ef4b3f;--line:#d6d0bf}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;background-image:radial-gradient(#ddd7c5 0.7px,transparent 0.7px);background-size:8px 8px}
.masthead{min-height:290px;background:var(--blue);color:white;display:grid;grid-template-columns:1fr minmax(280px,800px) 1fr;align-items:center;overflow:hidden;border-bottom:8px solid var(--ink);position:relative}
.masthead:after{content:"";position:absolute;inset:auto 0 0;height:14px;background:var(--yellow);border-top:4px solid var(--ink)}
.brand{text-align:center;padding:44px 22px 54px;position:relative;z-index:1}
.eyebrow{margin:0 0 12px;font-size:.84rem;font-weight:900;text-transform:uppercase;letter-spacing:.22em;color:var(--yellow)}
h1{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;font-style:italic;font-size:clamp(3.5rem,9vw,7.6rem);line-height:.82;letter-spacing:.02em;margin:0;text-shadow:5px 6px 0 var(--ink);transform:skew(-4deg)}
.deck{font-size:clamp(1rem,2.4vw,1.35rem);font-weight:800;letter-spacing:.06em;margin:26px 0 0}
.speed{height:100px;opacity:.85;background:repeating-linear-gradient(0deg,transparent 0 11px,white 12px 16px,transparent 17px 25px);transform:skew(-18deg)}
.speed-left{margin-right:30px}.speed-right{margin-left:30px}
main{width:min(1500px,94vw);margin:0 auto;padding:28px 0 72px}
.issue-bar{display:flex;align-items:center;gap:16px;text-transform:uppercase;font-weight:900;letter-spacing:.12em;font-size:.78rem;margin:0 0 38px}
.dash{height:3px;flex:1;background:var(--ink)}
.comic-list{display:grid;gap:56px}
.comic{scroll-margin-top:20px}
.comic-meta{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.number{display:grid;place-items:center;background:var(--yellow);border:3px solid var(--ink);width:46px;height:38px;font-weight:950;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg)}
h2{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;font-size:clamp(1.45rem,3vw,2rem);letter-spacing:.04em;margin:0}
.comic-frame{display:block;width:100%;padding:0;border:5px solid var(--ink);background:white;box-shadow:9px 10px 0 rgba(16,24,32,.22);cursor:zoom-in;transition:transform .16s ease,box-shadow .16s ease}
.comic-frame:hover,.comic-frame:focus-visible{transform:translate(-2px,-3px);box-shadow:12px 14px 0 rgba(16,24,32,.25);outline:4px solid var(--yellow);outline-offset:4px}
.comic-frame img{width:100%;height:auto;display:block}
footer{background:var(--ink);color:white;min-height:110px;display:flex;justify-content:space-between;align-items:center;padding:24px max(3vw,24px);font-weight:900;letter-spacing:.1em;font-size:.82rem}
footer span:first-child{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:1.65rem;color:var(--yellow);transform:skew(-5deg)}
dialog{width:min(96vw,1900px);max-width:none;border:5px solid var(--ink);padding:0;background:white;box-shadow:14px 16px 0 rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(4,11,18,.84);backdrop-filter:blur(3px)}
.dialog-top{height:58px;display:flex;align-items:center;justify-content:space-between;padding-left:18px;border-bottom:4px solid var(--ink);font-size:1.1rem;text-transform:uppercase;letter-spacing:.08em}
#close{align-self:stretch;width:58px;border:0;border-left:4px solid var(--ink);background:var(--yellow);font-size:2.2rem;font-weight:900;cursor:pointer}
.image-scroll{overflow:auto;max-height:calc(100vh - 110px)}
#viewer-image{display:block;width:max(100%,1200px);height:auto}
@media(max-width:700px){.masthead{min-height:220px;grid-template-columns:1fr}.speed{display:none}.brand{padding:38px 15px 48px}h1{text-shadow:3px 4px 0 var(--ink)}main{width:92vw;padding-top:22px}.comic-list{gap:38px}.comic-meta{flex-wrap:wrap}.comic-frame{border-width:3px;box-shadow:6px 7px 0 rgba(16,24,32,.22)}footer{align-items:flex-start;gap:12px;flex-direction:column}.issue-bar{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.comic-frame{transition:none}}