/* site stylesheet. Home = body.front (always dark, panels flip back in light mode), wiki pages = body.wiki */

@font-face { font-family: 'Dico'; src: url('../img/fonts/Dico.ttf') format('truetype'); }
@font-face { font-family: 'Alagard'; src: url('../img/fonts/Alagard.ttf') format('truetype'); }
@font-face { font-family: 'HydratingLip'; src: url('../img/fonts/HydratingLip.ttf') format('truetype'); }
@font-face { font-family: 'CelticBit'; src: url('../img/fonts/celtic-bit.ttf') format('truetype'); }
@font-face { font-family: 'NeonPixel7'; src: url('../img/fonts/neon_pixel-7.ttf') format('truetype'); }

/* colour scheme: the page follows the OS; these elements are always dark unless flipped below */
:root {
  --font-body: 'Dico', serif;
  --font-title: 'Alagard', serif;
  --font-deco: 'HydratingLip', serif;
}
:root,
body.front,
#topbar,
#sidebar-container,
#burger > summary,
#burger-menu {
  --color: #fff;
  --pagebg: #000;
  --broider: url("../img/broider-white.png");
}
@media (prefers-color-scheme: light) {
  :root,
  body.front section.full,
  body:not(.front) #topbar [aria-current],
  #burger-menu {
    --color: #000;
    --pagebg: #fff;
    --broider: url("../img/broider-black.png");
  }
}
html, body { background: var(--pagebg); }
body {
  min-height: 100vh;
  color: var(--color);
  font-family: var(--font-body);
  line-height: 1.5;
}
section.full, #topbar, #sidebar-container, #burger > summary { background: var(--pagebg); color: var(--color); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: var(--color); text-decoration: underline; }
a:hover { text-decoration-style: dotted; }
p { margin: .5em 0; }
hr { width: 25%; margin: 0 auto 3.5rem; border: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skip:focus { position: fixed; left: 0; top: 0; z-index: 1000000; width: auto; height: auto; padding: .3em .6em; background: var(--pagebg); }

/* ---------- shared pixel-art pieces ---------- */

/* framed boxes */
section.full, .dropcap, .infotable, .toc, .navbox, .catlinks, #burger-menu {
  border: 14px solid;
  border-image: var(--broider) 28 / 14px / 0 round;
  image-rendering: pixelated;
}
/* bar borders on the dark chrome */
#topbar, #burger > summary { border-bottom: 14px solid; border-image: var(--broider) 28 / 0 0 14px 0 round; image-rendering: pixelated; }
#sidebar-container { border-right: 14px solid; border-image: var(--broider) 28 / 0 14px 0 0 round; image-rendering: pixelated; }

/* skull bullets */
.nav-label::before,
section.full li::before,
body.wiki main ul > li::before {
  content: "";
  position: absolute;
  top: .35em;
  width: 16px;
  height: 16px;
  background: url("../img/Icons/DWTDICON-Skullbullet.png") 0 0 / 16px 16px no-repeat;
  image-rendering: pixelated;
}
/* ghost bar down the left of quotes */
.tagline::before,
body.wiki main blockquote::before,
.quotebox::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 11px;
  background: url("../img/Icons/Blockghost.png") repeat-y 0 0 / 11px 53px;
  image-rendering: pixelated;
}
/* divider under headings */
section.full > h2::after,
body.wiki main h2::after { content: url("../img/DWTD2026-Divider.png"); display: block; margin-top: -.9em; }
#site-logo::after,
.nav-section + .nav-section::before,
body.wiki main h3::after { content: url("../img/DWTD2026-Divider2.png"); display: block; }
/* outlined buttons */
.archive-nav-pagination a,
.archive-nav-downloads a {
  display: block;
  border: 1px solid var(--color);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
}
.archive-nav-pagination a:hover,
.archive-nav-downloads a:hover { border-style: dashed; }

/* cursor creature toggle + sprites (desktop pointer devices only) */
#coffinWrap { display: none; position: fixed; top: 10px; right: 10px; z-index: 999999; line-height: 0; }
#coffinBtn { background: none; border: none; cursor: pointer; display: block; }
#coffinBtn img { display: block; width: 100%; height: auto; }
#hypnoPointer { visibility: hidden; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  #coffinWrap { display: block; }
  #hypnoPointer { visibility: visible; }
}

/* ---------- layout ---------- */
main { min-width: 0; padding: .1em 1.5em 1.5em; }
#site-footer { padding: 0 1.5em 1.5em; }
@media (min-width: 901px) {
  /* sidebar runs the full height of the page, with the tab bar beside it */
  body { display: grid; grid-template-columns: 10em 1fr; grid-template-rows: auto 1fr auto; align-items: start; }
  #sidebar-container { grid-area: 1 / 1 / -1 / 2; align-self: stretch; }
  #topbar { grid-area: 1 / 2; }
  main { grid-area: 2 / 2; }
  #site-footer { grid-area: 3 / 2; }
}

/* top tab bar (desktop) */
#topbar { display: flex; align-items: flex-end; margin-left: -1px; padding: .15em 1em 0 0; }
#page-tabs, #page-tabs-tools { display: flex; list-style: none; gap: .15em; }
#page-tabs-tools { margin-left: 1em; }
#topbar a,
#topbar button {
  display: inline-block;
  padding: .35em .75em;
  border: 14px solid transparent;
  border-bottom: none;
  background: none;
  color: var(--color);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  cursor: pointer;
}
#topbar a:hover,
#topbar button:hover { text-decoration: underline dotted; text-underline-offset: .3em; }
#topbar [aria-current] {
  border-image: var(--broider) 28 / 0 14px 0 0 round;
  image-rendering: pixelated;
  background: var(--pagebg);
  margin-bottom: -14px;
  padding-bottom: calc(.35em + 14px);
  font-weight: bold;
}

/* sidebar */
#sidebar { position: sticky; top: 6px; max-height: calc(100vh - 20px); overflow-y: auto; padding: .1em .5em .5em; text-align: left; }
#sidebar ul, #burger-menu ul { list-style: none; }
#sidebar li { margin: .2em 0; }
#site-logo { display: block; margin: 0 0 .5em; font-family: var(--font-deco); font-size: 2.8rem; line-height: 1; text-align: center; text-decoration: none; }
#site-logo::after { margin-top: .6rem; font-size: 1rem; line-height: 0; text-align: left; }
.nav-section { margin-bottom: 1em; text-align: left; }
.nav-section + .nav-section { position: relative; margin-top: 1.5rem; padding-top: 1.5rem; }
.nav-section + .nav-section::before { position: absolute; top: -.5rem; left: 0; }
.nav-heading { font-family: 'CelticBit', var(--font-title); font-weight: normal; font-size: 1.4em; letter-spacing: .03em; text-transform: uppercase; margin: 0 0 .3em; }
.nav-label { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.nav-label::before { position: static; flex-shrink: 0; }
.nav-label:hover { text-decoration: underline; }

/* burger menu (mobile) */
#burger { display: none; width: 100%; position: fixed; top: 0; z-index: 999998; }
#burger[open] { inset: 0; background: #000; }
#burger > summary {
  list-style-type: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.05rem 1rem;
  font-family: var(--font-title);
  font-size: 1.1rem;
  letter-spacing: .05em;
}
#burger > summary::-webkit-details-marker { display: none; }
#burger > summary::before {
  content: "";
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: url("../img/Icons/1.png") no-repeat center / 32px 32px;
  image-rendering: pixelated;
}
#burger[open] > summary::before { background-image: url("../img/Icons/2.png"); }
#burger-menu { width: calc(100% - 2rem); max-height: calc(100vh - 6.5rem); margin: 1rem auto; overflow: auto; background: var(--pagebg); color: var(--color); }
#burger-menu ul { background: var(--pagebg); }
#burger-menu .nav-section { margin: 0; padding: .5rem 0; }
#burger-menu .nav-section + .nav-section { margin-top: .5rem; padding-top: 1.5rem; }
#burger-menu .nav-section + .nav-section::before { top: -.25rem; left: .8rem; }
#burger-menu .nav-heading { margin: .25rem .8rem; font-size: 1.4rem; }
#burger-menu .nav-label { width: 100%; padding: 1.1rem .8rem; font-family: var(--font-title); font-size: 1.4rem; letter-spacing: .05em; }
#burger-menu .nav-label:hover { background: color-mix(in srgb, var(--color) 12%, transparent); text-decoration: none; }

/* ---------- headings ---------- */
main::after { content: ""; display: table; clear: both; }
main h1 { font-family: var(--font-title); font-weight: normal; font-size: 3.2em; line-height: 1.2; padding-bottom: .2em; margin: 0 0 .4em; }
main h1::after,
.chapter-head::after { content: ""; display: block; height: 7px; margin-top: .1em; background: url("../img/DWTD2026-Divider3.png") repeat-x left center; }
section.full > h2 { font-family: var(--font-title); font-weight: normal; font-size: 2.3em; line-height: 1.2; margin: .5rem 0 .3rem; }
section h3 { font-family: 'CelticBit', var(--font-title); font-weight: normal; font-size: 1.7em; line-height: 1.2; margin: 1rem 0 .3rem; }
section.full > h3::after { content: url("../img/DWTD2026-Divider2.png"); display: block; margin-top: -.3em; }

/* ---------- home panels ---------- */
section.full { margin-bottom: 1em; padding: 0 .75em .75em; }
section.full ul { list-style: none; margin: .5em 0; }
section.full li { position: relative; padding-left: 1.4em; }
section.full li::before { left: 0; }
.news-updated { font-style: italic; opacity: .7; font-size: .9rem; margin-bottom: 1.5rem; }
.dropcap {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 4px 14px 4px 0;
  font-family: var(--font-deco);
  font-size: 2.6em;
  line-height: 1;
}
.full p:has(.dropcap) { display: flow-root; }

#intro { padding-top: .75em; text-align: center; }
.masthead { padding: 1.8rem 1rem 1.4rem; margin: 0 0 .5em; }
.masthead a { display: block; text-decoration: none; }
.masthead a img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.tagline { position: relative; margin: 0; padding: .5rem 1.2rem .5rem 2rem; font-size: 1.5em; font-style: italic; line-height: 1.6; }

@media (min-width: 1100px) {
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1em; align-items: start; }
  #about, #news { align-self: stretch; }
  #news { height: 0; min-height: calc(100% - 1em); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color) var(--pagebg); }
  #news > :last-child { margin-bottom: 0; }
}

/* archive */
.three { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.three > div { overflow: hidden; }
.three > div > a, .archive-ep > a { display: block; line-height: 0; }
.three img { display: block; width: 100%; max-width: 100%; height: auto; }
.archive-ep { display: none; }
.archive-ep:target,
.archive-widget .archive-ep:first-of-type { display: block; }
.archive-ep:target ~ .archive-ep:first-of-type,
.archive-widget:has(.archive-ep:target) .archive-ep:first-of-type:not(:target) { display: none; }
.archive-ep-title { display: block; margin: .6rem 0 0; padding: .4rem 0 .3rem; text-align: center; }
.archive-nav-pagination, .archive-nav-downloads { margin-top: .4rem; }
.archive-nav-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.archive-nav-downloads { display: flex; flex-direction: column; gap: .4rem; }
.archive-nav-pagination a, .archive-nav-downloads a { padding: .7rem .4rem; }
.archive-nav-pagination a:only-child { grid-column: 2; }

/* cast */
.cast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; justify-items: center; text-align: center; }
.cast-member h3 { font-family: 'NeonPixel7', var(--font-title); font-size: 4rem; line-height: 1; margin: .75rem 0 .25rem; }
.bust-wrap { display: block; position: relative; line-height: 0; width: fit-content; margin: 0 auto; image-rendering: pixelated; }
.bust-wrap img { display: block; max-width: 100%; }
.bust-wrap img.bust-hover,
.bust-wrap:hover img.bust-default { display: none; }
.bust-wrap:hover img.bust-hover { display: block; }

/* footer */
#site-footer { margin-top: 1.5em; font-size: .8em; }
#site-footer ul { list-style: none; margin: .2em 0; }
#site-footer li { display: inline; margin-right: 1em; }

@media (max-width: 900px) {
  #topbar, #sidebar-container { display: none; }
  #burger { display: block; }
  main { margin-top: 4.75rem; padding: .1em 1em 1em; }
  #site-footer { padding: 0 1em 1em; }
  section.full { border: none; padding: 0; }
  .tagline { font-size: 1.15em; }
  body.front main { padding-inline: 0; }
  body.front main h1 { padding-inline: 1rem; }
  body.front section.full { border: solid; border-width: 14px 0; border-image: var(--broider) 28 / 14px 0 / 0 round; padding: 0 1rem .75em; }
}
@media (max-width: 600px) { .three, .cast-grid { grid-template-columns: 1fr; } }

/* ---------- wiki pages ---------- */
body.wiki footer { text-align: center; }
body.wiki main { background: var(--pagebg); }
body.wiki main img { max-width: 100%; }
body.wiki main :is(h2, h3) { overflow: hidden; margin: 1rem 0 .3rem; font-family: var(--font-title); font-weight: normal; }
body.wiki main h2 { font-size: 2.3rem; }
body.wiki main h3 { font-size: 1.6rem; }
body.wiki main h3::after { margin-top: -.3em; }
body.wiki main :is(p, ul) { margin: .5em 0; line-height: 1.5; }
body.wiki main ul { list-style: none; padding-left: 1.25rem; }
body.wiki main li { position: relative; padding-left: .25rem; margin-bottom: .4em; }
body.wiki main ul > li::before { left: -1.25rem; top: .15em; }
body.wiki main blockquote { position: relative; margin: .5rem 0 2.25rem; padding: 13px 15px 13px 26px; font-style: italic; line-height: 1.6; }
body.wiki main blockquote p { margin: 0; }
.quotebox { position: relative; width: 30%; padding: 13px 13px 13px 26px; font-style: italic; background: var(--pagebg); }
.lede { font-size: 1.3rem; }

/* infobox */
.infotable {
  float: right;
  width: 28%;
  margin: 0 0 1em 1em;
  position: relative;
  z-index: 1;
  background: var(--pagebg);
  border-collapse: separate;
  border-spacing: 0;
}
.infotable img { max-width: 100%; margin: auto; }
.infotable th { padding: .4rem .7rem; text-align: left; font-family: var(--font-title); }
.infotable td { padding: .4rem .7rem; }
.infotable th[colspan] { text-align: center; }
.centertext { text-align: center; background: var(--pagebg); }
main:is(.bio, .blackdog) .infotable th { font-size: 1.2rem; }
main:is(.bio, .blackdog) .infotable tr:is(:nth-child(1), :nth-child(3)) th.centertext { font-size: 1.3rem; text-align: center; }
main:is(.bio, .blackdog) .infotable tr:nth-child(1) th.centertext { font-size: 2.3rem; }
@media (max-width: 1250px) { .infotable { width: 40%; } }
@media (max-width: 900px) { .infotable { width: 36%; margin: 0 auto 1em; } }
@media (orientation: portrait) {
  .quotebox { width: 90%; margin: 10px auto 0; padding: 15px; }
  .infotable { float: none; width: 100%; }
}

/* contents box, navbox, category links */
.toc, .navbox, .catlinks { padding: .25em .75em; background: var(--pagebg); }
.toc { display: inline-block; max-width: 100%; margin: .75em 0; }
.toc summary { font-family: var(--font-title); font-size: 1.4em; text-align: center; cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before { content: "[hide]"; float: right; margin-left: 1em; font-family: var(--font-body); font-size: 1rem; text-decoration: underline; }
.toc:not([open]) summary::before { content: "[show]"; }
.toc ul { margin: .5em 0 .5em .5em; padding: 0; }
.toc ul ul { margin-top: .2em; }
.toc .toc-sub { margin-left: 1.25em; }
body main .toc li { margin: .3em 0 .4em; padding-left: 0; line-height: 1.3; }
body main .toc li::before { display: none; }
.navbox { display: table; max-width: 100%; margin: 0 auto 1em; text-align: center; }
.navbox-title { font-family: var(--font-title); font-size: 1.4em; }
.navbox table { border-collapse: collapse; margin: .3em auto; }
.navbox :is(th, td) { padding: .25em .75em; border-top: 1px dotted var(--color); }
.navbox th { width: 1%; white-space: nowrap; font-family: 'CelticBit', var(--font-title); font-weight: normal; text-align: right; border-right: 1px dotted var(--color); }
.navbox ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.navbox li { margin: 0; padding: 0; }
.navbox li + li::before { content: "·"; margin: 0 .6em; }
.catlinks { padding-block: .3em; margin: 0 0 1em; text-align: left; }
.catlinks a + a::before { content: "|"; display: inline-block; margin: 0 .5em; text-decoration: none; }
.category-pages { columns: 3 14em; column-gap: 2em; }
.category-group { break-inside: avoid; }

/* character bios and black dog pages: icon before each heading */
:is(.bio, .blackdog) :is(h1, h2) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
:is(.bio, .blackdog) h3 { display: flex; align-items: center; gap: 10px; }
:is(.bio, .blackdog) :is(h1, h2)::after { flex: 0 0 100%; }
:is(.bio, .blackdog) :is(h1, h2, h3)::before { content: ""; flex-shrink: 0; width: 32px; height: 32px; background: no-repeat center; image-rendering: pixelated; }
.blackdog :is(h1, h2, h3)::before { background-size: contain; }
body.wiki main.blackdog ul > li::before { background-image: url("../img/Icons/DWTDICON-Dogskullbullet1.png"); }

/* person icons: --icon is set once per page (from its portrait) or per relationship heading */
.bio:has(img.edgar),    .rel-edgar    { --icon: url("../img/Icons/DWTDICON-Edgar.png");    --icon-hover: url("../img/Icons/DWTDICON-Edgar2.png"); }
.bio:has(img.crystin),  .rel-crystin  { --icon: url("../img/Icons/DWTDICON-Crystin.png");  --icon-hover: url("../img/Icons/DWTDICON-Crystin2.png"); }
.bio:has(img.clifford), .rel-clifford { --icon: url("../img/Icons/DWTDICON-Clifford.png"); --icon-hover: url("../img/Icons/DWTDICON-Clifford2.png"); }
.bio:has(img.august),   .rel-august   { --icon: url("../img/Icons/DWTDICON-August.png");   --icon-hover: url("../img/Icons/DWTDICON-August2.png"); }
.bio:has(img.rozzlyn),  .rel-rozzlyn  { --icon: url("../img/Icons/DWTDICON-Rozzlyn.png");  --icon-hover: url("../img/Icons/DWTDICON-Rozzlyn2.png"); }
.bio h1::before, .bio h3.rel-name::before { background-image: var(--icon); }
.bio h3.rel-name { flex-wrap: wrap; gap: 8px; margin: 1em 0 .2em; font-size: 1.3em; font-weight: normal; overflow: visible; }
.bio h3.rel-name::after { flex: 0 0 100%; }
.bio h3.rel-name:hover::before { background-image: var(--icon-hover); }
.bio h2:is(#appearance, #history, #personality, #relationships, #trivia, #authors-notes)::before { background-image: var(--h2-icon); }
.bio h2#appearance    { --h2-icon: url("../img/Icons/DWTDICON-Appearance.png"); }
.bio h2#history       { --h2-icon: url("../img/Icons/DWTDICON-History.png"); }
.bio h2#personality   { --h2-icon: url("../img/Icons/DWTDICON-Personality.png"); }
.bio h2#relationships { --h2-icon: url("../img/Icons/DWTDICON-Relationships.png"); }
.bio h2:is(#trivia, #authors-notes) { --h2-icon: url("../img/Icons/DWTDICON-Trivia.png"); }
.blackdog h1::before { background-image: url("../img/Icons/DWTDICON-BlackDog.png"); }
.almanac h2:nth-of-type(1)::before { background-image: url("../img/Icons/DWTDICON-Basics.png"); }
.almanac h2:nth-of-type(2)::before { background-image: url("../img/Icons/DWTDICON-Personality.png"); }
.almanac h2:nth-of-type(3)::before { background-image: url("../img/Icons/DWTDICON-Gallery.png"); }
.almanac :is(em, i, .quotebox) { font-style: normal; }
#cover-image { float: right; width: 30%; }
.blackdog h3 { display: block; }
.blackdog h3::before { display: none; }
.creature h2:nth-of-type(1)::before { background-image: url("../img/Icons/DWTDICON-Appearance.png"); }
.creature h2:nth-of-type(2)::before { background-image: url("../img/Icons/DWTDICON-Relationships2.png"); }
.creature h2:nth-of-type(3)::before { background-image: url("../img/Icons/DWTDICON-Notables.png"); }

/* portrait swap on hover */
img.august:hover   { content: url("../img/Busts/DWTD2026-Cast-August2.png"); }
img.clifford:hover { content: url("../img/Busts/DWTD2026-Cast-Clifford2.png"); }
img.crystin:hover  { content: url("../img/Busts/DWTD2026-Cast-Crystin2.png"); }
img.edgar:hover    { content: url("../img/Busts/DWTD2026-Cast-Edgar2.png"); }
img.rozzlyn:hover  { content: url("../img/Busts/DWTD2026-Cast-Rozzlyn2.png"); }

/* gallery thumbnails inside wiki pages */
.gallery { float: left; width: 250px; margin: 5px; }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption { padding: 15px; text-align: center; }
@media (max-width: 768px) { .gallery { float: none; width: 90%; margin: 10px auto; } }

/* gallery page */
body.wiki main .exhibit-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 400px)); gap: 34px 28px; margin: 1rem 0 0; padding: 0; }
body.wiki main .exhibit-gallery > li { min-width: 0; margin: 0; padding: 0; overflow: hidden; }
body.wiki main .exhibit-gallery > li::before { display: none; }
.exhibit-gallery > li > a > img { float: left; margin: 0 12px 6px 0; max-width: 11.25rem; max-height: 11.25rem; height: auto; }
.exhibit-gallery .exhibit-title { margin: 0 0 7px; overflow-wrap: anywhere; }
.exhibit-info { display: block; margin: 3px 0; text-align: right; font-size: .75rem; opacity: .65; overflow-wrap: anywhere; }
@media (max-width: 1200px) { body.wiki main .exhibit-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; } }
@media (max-width: 820px) {
  body.wiki main .exhibit-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .exhibit-gallery > li > a > img { max-width: 9.3125rem; max-height: 9.3125rem; }
}
@media (max-width: 560px) { body.wiki main .exhibit-gallery { grid-template-columns: 1fr; gap: 24px; } }

/* chapter heading row: Previous / title / Next, divider underneath */
.chapter-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1rem; margin: 0 0 .4em; }
.chapter-head h1 { grid-column: 2; margin: 0; padding: 0; }
.chapter-head h1::after { display: none; }
.chapter-head::after { grid-column: 1 / -1; }
.chapter-head a { font-family: var(--font-title); font-size: 1.3rem; }
.chapter-head .prev { grid-column: 1; justify-self: start; }
.chapter-head .next { grid-column: 3; justify-self: end; }
@media (max-width: 700px) {
  .chapter-head { grid-template-columns: 1fr 1fr; row-gap: .3rem; }
  .chapter-head h1 { grid-column: 1 / -1; grid-row: 1; }
  .chapter-head .prev { grid-column: 1; grid-row: 2; }
  .chapter-head .next { grid-column: 2; grid-row: 2; }
  .chapter-head::after { grid-row: 3; }
}

/* comic reader: one page shown at a time, chosen by the #page-N target */
.page-view { display: none; }
.comic-reader .page-view:first-of-type,
.page-view:target { display: block; }
.comic-reader:has(.page-view:target) .page-view:first-of-type:not(:target) { display: none; }
.comic-nav { display: flex; justify-content: center; gap: 1rem; padding: .5rem 0; }
.comic-nav a { line-height: 0; }
.arrow { display: block; border: 14px solid; border-image: var(--broider) 28 / 14px round; image-rendering: pixelated; padding: 8px; }
.page-view > a { display: block; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; }
.page-view img.page { display: block; margin: 0 auto; max-width: 100%; }

/* pages with no sidebar or tab bar (404) */
@media (min-width: 901px) { body.bare { display: block; } }