:root{--paper:#f5f2ec;--ink:#18263a;--navy:#101d32;--gold:#b7975e;--line:#d9d1c3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.8 "BIZ UDGothic",sans-serif}
a{color:inherit;text-underline-offset:4px}
a:focus-visible{outline:3px solid #ae596a;outline-offset:4px}
.wrap{width:min(1060px,calc(100% - 40px));margin-inline:auto}
.comic-site-nav{background:var(--navy);color:#f5f2ec}
.comic-site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.comic-site-nav a{min-height:44px;display:inline-flex;align-items:center}
.comic-site-nav nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:0.8125rem}
.comic-brand{font:1.25rem/1.4 serif;letter-spacing:.1em;text-decoration:none}
.comic-hero{background:#16263d;color:#f5f2ec;padding:55px 0}
.comic-hero-inner{display:grid;grid-template-columns:1fr minmax(220px,340px);gap:55px;align-items:center}
.comic-kicker{margin:0 0 15px;color:#dcc493;font-size:0.75rem;letter-spacing:.16em}
h1{font:clamp(2rem,4vw,3.0625rem)/1.45 serif;letter-spacing:.06em;margin:0 0 18px}
.comic-hero p{max-width:62ch}
.comic-cover{display:block;overflow:hidden;box-shadow:0 20px 50px #0006}
.comic-cover img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;object-position:top}
.comic-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.comic-button{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:10px 18px;background:#d2b77f;color:#102034;text-decoration:none;font-weight:700}
.comic-button:hover{background:#ead29f}
.comic-button.secondary{background:transparent;color:#f5f2ec;border:1px solid #a3acb9}
.comic-list{padding-block:50px 80px}
.comic-list h2{font:1.875rem/1.5 serif;margin:0 0 8px}
.comic-list>p{color:#536073;margin:0 0 24px}
.comic-list ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:12px}
.comic-list li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:14px 18px;border:1px solid var(--line);background:#fff;text-decoration:none}
.comic-list li a:hover{border-color:var(--gold);background:#f8f2e7}
.comic-list li a::after{content:"→";color:#8e6b33;flex:none}
.comic-footer{border-top:1px solid var(--line);padding-block:22px;font-size:0.8125rem}
@media(max-width:700px){.comic-site-nav .wrap{align-items:flex-start;flex-direction:column;padding-block:12px;gap:0}.comic-hero{padding:35px 0}.comic-hero-inner{grid-template-columns:1fr;gap:25px}.comic-cover{max-width:300px}.comic-list ol{grid-template-columns:1fr}.comic-list{padding-block:38px 55px}}