:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; background: #fff; color: #111; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { width: min(100%, 76rem); margin-inline: auto; padding: 1rem; }
header { border-bottom: 1px solid #777; }
h1 { margin: 0; font-size: 1.5rem; }
.comic { display: none; }
.comic.default { display: block; }
.comic:target { display: block; }
.comic:target ~ .comic.default { display: none; }
.comic-nav { display: flex; justify-content: space-between; gap: 1rem; margin-block: 1rem; }
.comic-nav a, .comic-nav span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid #111; color: #111; text-decoration: underline; }
.comic-nav span { border-color: #aaa; color: #555; text-decoration: none; }
.artwork { display: block; width: auto; height: auto; max-width: 100%; margin-inline: auto; }
.full-size { display: block; width: fit-content; margin: .5rem auto 1rem; }
.meta { color: #444; }
details { margin-block: 1rem; }
details summary { cursor: pointer; min-height: 2.75rem; align-content: center; }
.transcript { white-space: pre-wrap; }
:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
@media (max-width: 36rem) { header, main, footer { padding: .75rem; } .comic-nav { gap: .5rem; } }