/* Look and feel modelled on the original WordPress site:
   grey wallpaper, a centred white column, red/yellow banner, white menu bar, colour-coded text. */
/* Lato, served from this site (assets/fonts, SIL Open Font License) */
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lato-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lato-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/lato-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/lato-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  --red: #e42525;
  --yellow: #febd11;
  --marvel: #e42525;
  --dc: #0066aa;
  --other: #333333;
  --total: #00ac08;
  --limited: #008000;
  --oneshot: #ff0000;
  --comment: #0000ff;
  --ink: #2b2b2b;
  --muted: #6a6a6a;
  --line: #e2e2e2;
  --accent: var(--ink);
  --link: var(--red);       /* links and highlights; DC blue on DC pages */
  --bg-image: none;
  --font-body: Lato, "Helvetica Neue", Arial, sans-serif;
  --font-comic: Bangers, Impact, "Arial Narrow Bold", sans-serif;
}
body.pub-marvel, .pub-marvel { --accent: var(--marvel); }
body.pub-dc, .pub-dc { --accent: var(--dc); }
body.pub-dc { --link: var(--dc); }
body.pub-other, .pub-other { --accent: var(--other); }
body.pub-other { --check: var(--yellow); --tick: #111; }   /* ticked boxes: publisher colour, yellow on Other */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 1rem/1.7 var(--font-body);
  word-spacing: 0.05em;   /* Lato's own word space is narrow */
  background-color: #c2c2c2;
  background-image: var(--bg-image);
  background-size: cover; background-position: center top; background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }   /* no underlined links anywhere */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Colour-coded text */
a.pub-marvel, .pub-marvel > a { color: var(--marvel); }
a.pub-dc, .pub-dc > a { color: var(--dc); }
a.pub-other { color: var(--other); }
.k-limited { color: var(--limited); }
.k-oneshot { color: var(--oneshot); }
.k-comment { color: var(--comment); }

/* ---------- page frame ---------- */
.page { max-width: 960px; margin: 0 auto; background: #fff; box-shadow: 0 0 22px rgba(0, 0, 0, 0.35); min-height: 100vh; }
.inner { padding: 0 2.8rem; }

.topbar { background: #1d1d1d; color: #fff; padding: 0.3rem 1rem; display: flex; justify-content: flex-end; font-size: 0.8rem; min-height: 2.2rem; align-items: center; }
.account { display: flex; align-items: center; gap: 0.6rem; }
.account .who { opacity: 0.85; }
.topbar .login { background: var(--yellow); color: #111; border-color: var(--yellow); padding: 0.15rem 0.7rem; font-size: 0.8rem; }
.topbar .login:hover { background: #fff; color: #111; }
.topbar button { background: transparent; color: #fff; border-color: #888; padding: 0.15rem 0.7rem; font-size: 0.8rem; }
.topbar button:hover { background: #fff; color: #111; }

.banner { background: var(--red); text-align: center; padding: 0.6rem 1rem 0.9rem; }
.banner a { display: inline-block; text-decoration: none; }
.banner img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.logo-text { display: block; font: 400 clamp(2.8rem, 10vw, 5.6rem)/0.95 var(--font-comic); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--yellow); -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: 4px 4px 0 #111; padding: 1rem 0 0.6rem; }
.logo-text span { display: block; }

/* ---------- menu ---------- */
.nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
html { scroll-padding-top: 4.5rem; }   /* anchors and "jump to" land below the stuck menu */
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 1.85rem; }
.nav li { position: relative; }
.nav > ul > li > a { display: block; padding: 1.05rem 0; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; color: var(--ink); }
.nav > ul > li > a:hover { color: var(--red); }
.nav .has-menu { display: flex; align-items: center; }
.nav .menu-toggle { background: none; border: 0; padding: 0.3rem 0 0.3rem 0.25rem; margin: 0; color: var(--ink); cursor: pointer; line-height: 0; }
.nav .has-menu:hover > a, .nav .has-menu:hover > .menu-toggle, .nav .menu-toggle[aria-expanded="true"] { color: var(--red); }
.nav .menu { display: none; position: absolute; left: -0.8rem; top: 100%; z-index: 20; min-width: 12rem; list-style: none; margin: 0; padding: 0.4rem 0;
  background: #fff; border-top: 3px solid var(--red); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }
.nav .has-menu:hover > .menu, .nav .has-menu:focus-within > .menu, .nav .has-menu.open > .menu { display: block; }
.nav .has-menu.closed > .menu { display: none; }
.nav .menu-dc > .menu { border-top-color: var(--dc); }
.nav .menu-dc:hover > a, .nav .menu-dc:hover > .menu-toggle, .nav .menu-dc > .menu-toggle[aria-expanded="true"], .nav .menu-dc .menu a:hover { color: var(--dc); }
.nav .menu a { display: block; padding: 0.4rem 1.1rem; text-decoration: none; color: var(--ink); font-size: 0.95rem; white-space: nowrap; }
.nav .menu a:hover { background: #f3f3f3; color: var(--red); }
.nav .search-link { display: block; padding: 1.05rem 0; color: var(--ink); }

/* ---------- breadcrumb strip ---------- */
.crumb { background: #f6f6f6; border-bottom: 1px solid #ececec; padding: 0.4rem 1.6rem; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #444; line-height: 1.6; }
.crumb a { color: #444; text-decoration: none; }
.crumb .sep { margin: 0 0.4rem; font-weight: 700; }
.crumb-home { display: inline-block; vertical-align: -1px; }

/* ---------- headings ---------- */
h1, h2, h3 { line-height: 1.25; }
.title-lines { display: flex; align-items: center; gap: 1.1rem; margin: 1.5rem 0 1rem; font-size: 2rem; font-weight: 700; text-align: center; }
.title-lines::before, .title-lines::after { content: ""; flex: 1; border-top: 4px double var(--red); }
.title-lines span { flex: 0 1 auto; }
.home-title { text-align: center; font-size: 2rem; margin: 1.2rem 0 0.7rem; }
.lead { color: var(--muted); text-align: center; }
.intro-text { text-align: justify; margin: 0 0 1rem; }
.intro-text a { font-weight: 700; text-decoration: none; }

/* ---------- controls ---------- */
button, .button {
  font: inherit; font-size: 0.85rem; padding: 0.35rem 0.85rem; cursor: pointer;
  background: #fff; color: var(--ink); border: 1.5px solid #555; border-radius: 3px; display: inline-block;
}
button:hover, .button:hover { background: #222; color: #fff; }
.login { display: inline-block; text-decoration: none; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: 3px; background: var(--link); color: #fff; border: 1.5px solid var(--link); font-size: 0.85rem; }
.login:hover { background: #fff; color: var(--link); }
.filter { width: 100%; font: inherit; padding: 0.55rem 0.8rem; margin: 0.4rem 0 0.9rem; background: #fff; color: var(--ink); border: 1px solid #bbb; border-radius: 3px; }
progress { width: 100%; height: 0.5rem; accent-color: var(--accent); }

/* ---------- home ---------- */
.stats { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 0.5rem; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-label, .stat-unit { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; }
.stat strong { font-size: 3rem; line-height: 1.15; font-weight: 700; }
.stat-marvel { color: var(--marvel); }
.stat-dc { color: var(--dc); }
.stat-other { color: var(--other); }
.stat-total { color: var(--total); }

.news { margin: 1.4rem 0; padding: 1.1rem 1.4rem 1.2rem; border: 1px solid var(--red); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--red); text-align: center; }
.news h2 { margin: 0.2rem 0 0.8rem; font-size: 1.15rem; }
.news p { margin: 0.7rem 0; }
.news-list a, .patreon-list a { font-weight: 400; text-decoration: none; }
.news-list { font-size: 1rem; }
.news-list a { font-weight: 700; }
.news-date { text-transform: uppercase; font-size: 1rem; }
.news-date a { color: var(--red); text-decoration: none; font-weight: 700; }
.patreon-list { text-align: left; font-size: 0.95rem; line-height: 1.8; }
.patreon-list a { color: var(--ink); }   /* plain dark names, not publisher colours */
.news-text { text-align: justify; font-size: 1rem; line-height: 1.7; }
@media (max-width: 700px) { .news-text { text-align: left; } }
.news-text a { color: var(--red); font-weight: 700; }   /* links in announcements: Marvel red */
.news-text a.pub-dc { color: var(--dc); }   /* ...but DC blue for links to DC pages */
.news-feedback a { color: var(--red); }
.status-bars { margin: 1.6rem 0 1.4rem; text-align: left; }
.status-bar + .status-bar { margin-top: 0.75rem; }
.news .status-label { margin: 0 0 0.25rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; }
.status-track { display: flex; justify-content: flex-end; align-items: center; height: 1.6rem; padding: 0 0.25rem; border-radius: 3px; background: var(--red); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15); }
.status-track.bar-dc { background: var(--dc); }
.status-track span { padding: 0.05rem 0.35rem; border-radius: 2px; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 0.75rem; line-height: 1.4; }
.patreon-banner { display: block; margin: 1rem 0; text-decoration: none; }
.patreon-banner img { display: block; width: 100%; height: auto; }
.patreon-banner span { display: block; padding: 1.1rem 1rem; text-align: center; color: var(--yellow); font: 400 2rem/1 var(--font-comic); letter-spacing: 0.03em; text-transform: uppercase;
  background: linear-gradient(135deg, #2b6f8f, #d9622b); -webkit-text-stroke: 1.5px #111; paint-order: stroke fill; text-shadow: 3px 3px 0 #111; }
.browse { margin: 1.6rem 0 0.4rem; }
.browse h2 { margin: 0 0 0.5rem; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.browse h2 a { color: inherit; text-decoration: none; }
.see-all { margin: 0.5rem 0 0; font-weight: 700; }
.see-all a { color: var(--accent); text-decoration: none; }
.chips { list-style: none; padding: 0; margin: 0.6rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips a { display: inline-block; text-decoration: none; font-size: 0.85rem; font-weight: 700; padding: 0.2rem 0.7rem; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); background: #fff; }
.chips a:hover { background: var(--accent); color: #fff; }

/* ---------- order lists on publisher / category / search pages ---------- */
.order-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.order-card { display: grid; grid-template-columns: 1fr 7rem auto; gap: 0.1rem 0.8rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid #efefef; }
.order-card[hidden] { display: none; }
.order-title { color: var(--accent); font-weight: 700; text-decoration: none; }
.order-card .count, .order-card .meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; min-width: 5.5rem; }
.order-card .badge { justify-self: end; grid-column: 2; }
.order-card.is-locked { grid-template-columns: 1fr auto auto; }
.badge { font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.55rem; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.search-desc { grid-column: 1 / -1; color: var(--muted); font-size: 0.85rem; }
/* comics found by search, each with the reading orders it is in */
.comic-hits { list-style: none; padding: 0; margin: 0 0 2rem; }
.comic-hit { padding: 0.4rem 0; border-bottom: 1px solid #efefef; }
.comic-title { display: block; font-weight: 700; }
.comic-title .year { font-weight: 400; color: var(--muted); }
.comic-orders { display: block; font-size: 0.85rem; color: var(--muted); }
.comic-orders a { font-weight: 700; text-decoration: none; color: var(--accent); }
/* My Progress: a Continue link after the counter */
.order-card.has-next { grid-template-columns: 1fr 7rem auto 5.5rem; }
.next-link { justify-self: end; font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--accent); }
.next-link.done { color: var(--total); }

/* ---------- a reading order ---------- */
.info { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 0 0 0.6rem; font-size: 1rem; }
.info.info-wide { grid-template-columns: 3fr 1fr; }   /* master orders and their parts: 75/25 */
.about p { margin: 0; text-align: justify; }
.facts { margin: 0; }
.facts div { margin: 0; }
.facts dt { display: inline; font-weight: 700; }
.facts dd { display: inline; margin: 0; }

[hidden] { display: none !important; }
.count-block { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 1.1rem 0 0.6rem; line-height: 1.1; }
.count-block strong { order: 1; font-size: 3.6rem; font-weight: 700; color: var(--accent); }
.count-title, .count-note { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; }
.count-title { order: 2; }
.count-note { order: 3; color: var(--link); margin-top: 0.15rem; }
.count-block.count-side { margin: 0; justify-content: flex-start; padding-top: 0.2rem; color: var(--link); }
.count-side strong { font-size: 3.2rem; }
.count-side .count-title { order: 0; margin-bottom: 0.1rem; }
.part-nav { margin: 0.9rem 0 0.4rem; text-align: center; }
.part-nav p { margin: 0; font-size: 1.2rem; line-height: 1.75; font-weight: 700; }
.part-nav a { color: var(--link); text-decoration: none; }
.part-nav [aria-current] { color: var(--ink); }
.part-nav .bar { margin: 0 0.15rem; font-weight: 400; }
.facts a { color: var(--link); font-weight: 700; text-decoration: none; }
.legend { list-style: none; margin: 1.2rem 0 1.3rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 0.9rem; }

.tabbar { border-top: 2px solid var(--link); border-bottom: 1px solid #9a9a9a; text-align: center; }
.tabbar span { display: block; padding: 0.7rem 1rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; }
.order-body { padding-top: 1.2rem; padding-bottom: 1.5rem; }

.order-head { margin-bottom: 1.9rem; }   /* a blank line between the tracker and the first issue */
.order-head[data-locked] progress, .order-head[data-locked] .head-row { display: none; }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.3rem; flex-wrap: wrap; }
.head-row button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }   /* Marvel red, DC blue */
.count { color: var(--muted); font-size: 0.8rem; }
.is-complete .count { color: var(--total); font-weight: 700; }
.range-tip { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.75rem; }
.order-head[data-locked] .range-tip { display: none; }
@media (hover: none) { .range-tip { display: none; } }   /* phones and tablets have no Shift key */

.issues { list-style: none; padding: 0; margin: 0; }
.issue { display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: baseline; gap: 0.2rem; padding: 0.02rem 0; line-height: 1.45; }
.issue.gap { margin-top: 0.9rem; }   /* new series, or a jump in issue numbers */
.issue-main { min-width: 0; }
.issue-title { font-weight: 400; }
.year { color: var(--muted); font-size: 0.85em; margin-left: 0.25rem; }
.note { color: var(--comment); }
.is-read .issue-title { color: #9a9a9a; text-decoration: line-through; }
.is-read .note, .is-read .year { opacity: 0.55; }

.aside p { margin: 0.7rem 0; }
.note-row p { color: var(--comment); }
.link-row p { color: var(--comment); font-weight: 700; }   /* "Read X here." in comment blue, the link in the page colour */
.link-row a { color: var(--link); }
.pub-dc .link-row p { color: var(--red); }   /* on DC pages the line is Marvel red, the link DC blue */
.section { margin: 1.3rem 0 0.2rem; }
.section.spaced { margin-bottom: 1.1rem; }
.section h2 { margin: 0; font-size: 1.05rem; color: var(--comment); }

/* tick box */
.check { position: relative; display: grid; place-items: center; width: 1.7rem; height: 1.35rem; cursor: pointer; align-self: center; }
.check input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.box { width: 0.85rem; height: 0.85rem; border: 1.5px solid #999; border-radius: 2px; background: #fff; display: grid; place-items: center; }
.check input:checked + .box { background: var(--check, var(--accent)); border-color: var(--check, var(--accent)); }
.check input:checked + .box::after { content: ""; width: 0.22rem; height: 0.45rem; border: solid var(--tick, #fff); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.check input:focus-visible + .box { outline: 3px solid var(--check, var(--accent)); outline-offset: 2px; }

.read-link { text-decoration: none; font-weight: 700; font-size: 0.78rem; line-height: 1.35; padding: 0 0.6rem; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 3px; align-self: center; }
.read-link:hover { background: var(--accent); color: #fff; }

.locked { margin: 1rem 0; padding: 1.4rem 1.2rem; text-align: center; background: #fafafa; border: 2px dashed var(--link); border-radius: 4px; }
.locked[hidden], .issues[hidden] { display: none; }
.locked p { margin: 0 0 0.75rem; }
.locked.admin-view { padding: 0.9rem 1.2rem; }
.locked.admin-view p { margin: 0; font-weight: 700; }
.locked p[data-locked-text] { max-width: 36rem; margin-left: auto; margin-right: auto; }
.locked-actions { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; }
.login.join { background: var(--yellow); border-color: var(--yellow); color: #111; }
.login.join:hover { background: #fff; color: #111; }

/* ---------- updates, FAQ ---------- */
.update-day h2 { font-size: 1.1rem; margin: 1.4rem 0 0.3rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--line); }
.update-day ul { list-style: none; padding: 0; margin: 0; }
.update-day a { text-decoration: none; font-weight: 700; }
.update-day ul.update-changes { list-style: disc; margin: 0.15rem 0 0.5rem 1.4rem; padding: 0; font-size: 0.92rem; color: var(--muted); }
.update-day ul.update-changes li { margin: 0.1rem 0; }
.update-kind { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.prose h2 { font-size: 1.1rem; margin: 1.6rem 0 0.2rem; }
.prose p { margin: 0.3rem 0; }
.home-faq a { color: var(--red); font-weight: 700; }   /* FAQ links stand out in Marvel red */
.home-faq a.pub-dc { color: var(--dc); }
.home-faq .tag-essential { margin: 0 0.1rem; vertical-align: 1px; }   /* the {essential} tag inside FAQ text */
.prose h2.title-lines { font-size: 2rem; margin: 1.8rem 0 0.6rem; }   /* the FAQ heading on the home page */
@media (max-width: 700px) { .prose h2.title-lines { font-size: 1.5rem; } }
code { background: #f2f2f2; padding: 0 0.3rem; border-radius: 3px; font-size: 0.9em; }

/* ---------- footer ---------- */
.site-footer { margin-top: 2rem; padding: 1.2rem 2.8rem 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; text-align: center; }
.site-footer p { margin: 0.3rem 0; }
.tools { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin: 0.8rem 0; }
.small { font-size: 0.75rem; }

/* ---------- mid-size screens: keep the menu on one line ---------- */
@media (max-width: 900px) {
  .nav > ul { gap: 0 1.2rem; }
  .nav > ul > li > a { font-size: 1.2rem; }
}

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  .part-nav p { font-size: 1rem; }
  .count-block.count-side { margin-top: 0.5rem; }
  .inner, .site-footer { padding-left: 1.1rem; padding-right: 1.1rem; }
  .nav > ul { gap: 0 0.5rem; padding: 0 0.25rem; }
  .nav > ul > li > a { font-size: clamp(0.72rem, 3.2vw, 0.95rem); padding: 0.75rem 0; }   /* one line on most phones */
  .nav .search-link { padding: 0.75rem 0; }
  .nav .search-link svg { width: 18px; height: 18px; }
  .nav .menu-toggle { padding: 0.6rem 0.3rem 0.6rem 0.2rem; margin-right: -0.3rem; }    /* bigger tap target */
  .nav .menu-toggle svg { width: 14px; height: 14px; }
  .nav .has-menu:hover > .menu, .nav .has-menu:focus-within > .menu { display: none; }   /* phones open it by tapping the arrows */
  .nav .has-menu { position: static; }   /* so the open menu sits under the whole bar */
  .nav .has-menu.open > .menu { display: block; left: 0.75rem; right: 0.75rem; top: 100%; min-width: 0; }
  .nav .menu a { font-size: 1.05rem; padding: 0.6rem 1.1rem; white-space: normal; }
  .title-lines, .home-title { font-size: 1.5rem; }
  .info, .info.info-wide { grid-template-columns: 1fr; gap: 0.6rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .legend { grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
  .order-card { grid-template-columns: 1fr auto; }
  .order-card progress { display: none; }
  .order-card.has-next { grid-template-columns: 1fr auto auto; }
  .crumb { padding: 0.4rem 1rem; }
}

/* Tabs (Reading Order / Notes) */
.tabbar.tabs { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 0; border-bottom: 1px solid #9a9a9a; }
.tabs button { font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.8rem 1rem;
  background: #ececec; color: var(--muted); border: 0; border-top: 2px solid #ececec; border-radius: 0; cursor: pointer; }
.tabs button:hover { background: #e2e2e2; color: var(--ink); }
.tabs button[aria-selected="true"] { background: #fff; color: #111; border-top-color: var(--link); }
.tabs button:focus-visible { outline-offset: -3px; }

/* Notes tab */
.notes { padding-top: 1.4rem; }
.notes h3 { text-align: center; text-decoration: underline; font-size: 1.15rem; font-weight: 400; margin: 0.6rem 0 1rem; }
.notes p, .notes li { line-height: 1.7; }
.notes ul, .notes ol { padding-left: 1.3rem; }
.notes li { margin: 0.6rem 0; }
.notes a { color: var(--link); font-weight: 700; text-decoration: none; }

/* Essential issues */
.essential-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer; }
.essential-toggle input { width: 1rem; height: 1rem; accent-color: var(--link); }
.tag-essential { margin-left: 0.5rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--link); border: 1.5px solid var(--link); border-radius: 999px; padding: 0 0.45rem; white-space: nowrap; }

.part-nav .part { white-space: nowrap; }

/* Current page in the menu */
.nav > ul > li.current > a { color: var(--red); }
.nav > ul > li.current::before { content: ""; position: absolute; top: 0; left: -0.6rem; right: -0.6rem; height: 3px; background: var(--red); }

/* Static pages use yellow rules beside the title */
.title-lines.is-yellow::before, .title-lines.is-yellow::after { border-top-color: var(--yellow); }

/* Contact form */
.contact-intro { margin: 0 0 1.4rem; }
.contact-form label { display: block; margin: 1.1rem 0 0.35rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  display: block; width: 100%; font: inherit; padding: 0.45rem 0.6rem; color: var(--ink); background: #fff; border: 1px solid #d6d6d6; border-radius: 3px; }
.contact-form textarea { resize: vertical; min-height: 11rem; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { text-align: center; margin: 1rem 0 2rem; }
.send-btn { background: var(--red); color: #fff; border: 1px solid #b81c20; border-radius: 3px; padding: 0.45rem 1.1rem; font-size: 0.85rem; cursor: pointer; }
.send-btn:hover { background: var(--yellow); border-color: var(--yellow); color: #111; }
.send-btn:disabled { opacity: 0.6; cursor: wait; }
.form-status { min-height: 1.4rem; margin: 1rem 0 0; text-align: center; }
.form-status.ok { color: var(--total); font-weight: 700; }
.form-status.bad { color: var(--oneshot); font-weight: 700; }

/* Footer: social icons and fine print */
.site-footer .social { display: flex; gap: 1rem; justify-content: center; margin: 0.2rem 0 1rem; }
.site-footer .social a { color: var(--red); display: inline-block; }
.site-footer .social a:hover { color: #111; }
.fine-print { font-size: 0.62rem; letter-spacing: 0.12em; line-height: 1.7; color: #777; max-width: 44rem; margin: 0 auto 1.2rem; }

/* Admin inbox */
.admin-link { color: var(--yellow); font-weight: 700; text-decoration: none; }
.msg { border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 3px; padding: 0.7rem 1rem; margin: 0 0 0.9rem; }
.msg.is-read-msg { border-left-color: #bbb; opacity: 0.7; }
.msg-meta { color: var(--muted); font-size: 0.8rem; }
.msg-from { margin: 0.2rem 0; font-size: 0.9rem; }
.msg-body { white-space: pre-wrap; margin: 0.4rem 0; }
.msg-actions { display: flex; gap: 0.5rem; margin: 0.4rem 0 0; }

/* Title rules follow the publisher: red for Marvel, blue for DC */
body.pub-dc .title-lines::before, body.pub-dc .title-lines::after { border-top-color: var(--dc); }
body.pub-other .title-lines::before, body.pub-other .title-lines::after { border-top-color: var(--yellow); }

/* Introductory text copied from the old pages */
.intro-html p { margin: 0 0 1rem; text-align: justify; }
.intro-html a { color: var(--accent); font-weight: 700; text-decoration: none; }
.note-box { margin: 1.2rem 0; padding: 0.8rem 1rem; background: #d9edf7; border: 1px solid #bce8f1; border-radius: 4px; color: #31708f; font-size: 0.85rem; line-height: 1.6; }

/* Characters: names in columns, A to Z down each column */
.char-grid { list-style: none; margin: 2rem 0 2.5rem; padding: 0; column-count: 4; column-gap: 0; column-rule: 1px solid #e3e3e3; }
.char-grid li { break-inside: avoid; text-align: center; padding: 0.62rem 0.4rem; line-height: 1.4; }
.char-grid a { color: var(--accent); text-decoration: none; }
.char-grid a.featured { font-weight: 700; }

/* Events: A-Z index, then centred titles with the year and who is involved */
.alphabet { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; margin: 1.4rem 0 0.4rem; font-size: 1.5rem; font-weight: 700; line-height: 1.7; }
.alphabet a { color: var(--accent); text-decoration: none; }
.alphabet .none { color: #b5b5b5; font-weight: 400; }
.alphabet .bar { margin: 0 0.3rem; color: #222; font-weight: 400; }
.title-lines.letter { font-size: 1.5rem; font-weight: 400; margin: 1.6rem 0 1rem; }
.event-list { list-style: none; margin: 0 0 1rem; padding: 0; text-align: center; }
.event-list li { margin: 0 0 1.5rem; line-height: 1.35; }
.event-title { display: block; color: var(--accent); font-size: 1.55rem; font-weight: 700; text-decoration: none; }
.featuring { display: block; font-size: 1rem; color: var(--ink); }

/* Timelines */
.tl-heading { text-align: center; font-size: 1.5rem; font-weight: 400; margin: 1.6rem 0 0.8rem; }
.timeline .tl-entry { padding: 0.55rem 0; line-height: 1.5; align-items: start; }
.timeline .check { align-self: start; margin-top: 0.1rem; }
.tl-title { color: var(--ink); }
a.tl-title { text-decoration: none; }
.tl-entry.is-event .tl-title { color: var(--accent); font-weight: 700; }
.tl-title.k-limited { color: var(--limited); }
.tl-title.k-oneshot { color: var(--oneshot); }
.tl-ref { color: var(--comment); text-decoration: none; }
.tl-entry.is-read .tl-title { color: #9a9a9a; text-decoration: line-through; }
.entry-count { margin-left: 0.6rem; }

@media (max-width: 700px) {
  .char-grid { column-count: 2; }
  .event-title { font-size: 1.3rem; }
  .alphabet { font-size: 1.15rem; }
}

/* Publisher landing pages (Marvel, DC): counters, headed sections, Starting Points tabs, globe link lists */
.stats-two { grid-template-columns: repeat(2, 1fr); color: var(--accent); margin: 0.4rem 0 1.4rem; }
.title-lines.sub { font-size: 1.35rem; font-weight: 400; margin: 1.6rem 0 0.9rem; }
.hub-tabs { border: 1px solid #ddd; margin: 0.4rem 0 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.hub-tablist { display: flex; background: #f5f5f5; border-bottom: 1px solid #ddd; }
.hub-tablist button { flex: 1 1 0; font: inherit; font-size: 0.8rem; padding: 0.65rem 0.4rem; background: none; border: 0; border-right: 1px solid #ddd;
  border-top: 3px solid transparent; color: #aaa; cursor: pointer; }
.hub-tablist button:last-child { border-right: 0; }
.hub-tablist button:hover { color: var(--ink); }
.hub-tablist button[aria-selected="true"] { background: #fff; color: #111; font-weight: 700; border-top-color: var(--accent); margin-bottom: -1px; }
.hub-panel { padding: 1.6rem 1.7rem 0.6rem; }
.hub-links { list-style: none; margin: 0 0 1.5rem; padding: 0; text-align: center; line-height: 1.75; }
.hub-links a { color: var(--accent); font-weight: 700; text-decoration: none; }
.hub-links svg { vertical-align: -2px; margin-right: 0.3rem; }
.stats-one { grid-template-columns: 1fr; color: var(--accent); margin: 0.4rem 0 1.4rem; }
/* Plain link lists (Other page): red names one per line, bold labels between them */
.hub-links.plain { line-height: 1.6; font-size: 0.95rem; }
.hub-links.plain li { margin: 0.55rem 0; }
.hub-links.plain a { color: var(--red); }
.hub-links .hub-label { font-weight: 700; color: var(--ink); margin-top: 1.1rem; }
.hub-links .big { text-transform: uppercase; margin-bottom: 1.1rem; }
@media (max-width: 700px) {
  .stats-two { grid-template-columns: repeat(2, 1fr); }
  .hub-tablist { flex-wrap: wrap; }
  .hub-tablist button { flex: 1 1 45%; border-bottom: 1px solid #ddd; }
  .hub-panel { padding: 1.1rem 1rem 0.3rem; }
}

/* Back-to-top button: bottom-right corner of the white column, shown after scrolling 15% of the page */
.to-top { position: fixed; bottom: 1.2rem; right: max(0.4rem, calc((100% - 960px) / 2 + 0.45rem)); z-index: 40;   /* sits in the column's right margin */
  background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; line-height: 0; opacity: 0.9; }
.to-top:hover { opacity: 1; transform: translateY(-2px); background: none; color: var(--yellow); }   /* Other yellow, not the black button hover */
.to-top[hidden] { display: none; }

/* Menus above master orders: a second menu (e.g. Marvel NOW! Part 1 | Part 2) sits under the main one */
.part-nav .part-menu + .part-menu { margin-top: 1.1rem; }

/* Summary pages, e.g. the Marvel Master Reading Order */
.summary-page .about p + p { margin-top: 0.8rem; }
.summary-part { margin: 2rem 0 0; }
.summary-heading { font-size: 1.6rem; margin: 0 0 1rem; }
.summary-heading a { color: var(--link); text-decoration: none; }
.summary-fact { margin: 0 0 0.7rem; font-size: 1rem; }
.summary-fact a { color: var(--link); text-decoration: none; font-weight: 700; }
.summary-text { margin: 0 0 0.7rem; font-size: 1rem; text-align: justify; }
.summary-text a { color: var(--link); text-decoration: none; font-weight: 700; }
@media (max-width: 700px) { .summary-heading { font-size: 1.25rem; } }

/* Red (Marvel), blue (DC) and dark (Other) links turn Other yellow on hover */
a.pub-marvel:hover, a.pub-dc:hover, a.pub-other:hover, .pub-marvel > a:hover, .pub-dc > a:hover, .pub-other > a:hover,
.intro-text a:hover, .intro-html a:hover, .facts a:hover, .notes a:hover, .link-row a:hover,
.part-nav a:hover, .summary-heading a:hover, .summary-fact a:hover, .summary-text a:hover,
.browse h2 a:hover, .see-all a:hover, .chips a:hover, .news-date a:hover,
.char-grid a:hover, .event-title:hover, .alphabet a:hover, .hub-links a:hover,
.tl-entry.is-event a.tl-title:hover, .site-footer .social a:hover, .news-text a:hover,
.news-list a:hover, .patreon-list a:hover { color: var(--yellow); }   /* home page order links, Other ones included */

/* Master order menus: the longest line fills about 90% of the content width */
.part-nav { container-type: inline-size; }
.part-nav p { font-size: clamp(1rem, 2.43cqi, 1.6rem); }
/* The DC menu's longest line is shorter, so its text is a little larger to reach the same width */
.pub-dc .part-nav p { font-size: clamp(1rem, 2.66cqi, 1.75rem); }

/* ---------- Dark mode: the toggle in the top bar sets <html data-theme="dark"> ---------- */
.topbar { justify-content: space-between; }
.theme-toggle { display: inline-flex; align-items: center; gap: 0.35rem; }
.theme-toggle svg { flex: none; }
.theme-toggle .when-dark, [data-theme="dark"] .theme-toggle .when-light { display: none; }
[data-theme="dark"] .theme-toggle .when-dark { display: inline; }

[data-theme="dark"] {
  color-scheme: dark;
  --page: #1c1c1f;          /* the centre column */
  --raised: #26262a;        /* menus, tabs, inputs, boxes */
  --raised-2: #303035;      /* hover on those */
  --ink: #e6e6e6;
  --muted: #a8a8ad;
  --line: #3a3a40;
  --red: #ff5f57;           /* Marvel red, lifted so it reads on dark grey */
  --marvel: #ff5f57;
  --dc: #5aaeea;
  --other: #d4d4d4;
  --total: #3fd24f;
  --limited: #4fc95c;
  --oneshot: #ff6b6b;
  --comment: #8fb2ff;
}
[data-theme="dark"] body { background-color: #111113; background-image: var(--bg-image-dark, linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62)), var(--bg-image)); }   /* background-dark.svg, or the light wallpaper dimmed */
[data-theme="dark"] .page { background: var(--page); box-shadow: 0 0 22px rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .topbar { background: #0c0c0d; }
[data-theme="dark"] .banner { background: #e42525; }   /* the banner keeps the logo's red */
[data-theme="dark"] .nav { background: var(--page); }
[data-theme="dark"] .nav .menu { background: var(--raised); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .nav .menu a:hover { background: var(--raised-2); }
[data-theme="dark"] .crumb { background: #161618; border-bottom-color: var(--line); color: #b9b9be; }
[data-theme="dark"] .crumb a { color: #b9b9be; }
[data-theme="dark"] button, [data-theme="dark"] .button { background: var(--raised); color: var(--ink); border-color: #6a6a70; }
[data-theme="dark"] button:hover, [data-theme="dark"] .button:hover { background: var(--ink); color: #111; }
[data-theme="dark"] .topbar button { background: transparent; color: #fff; border-color: #777; }
[data-theme="dark"] .topbar button:hover { background: #fff; color: #111; }
[data-theme="dark"] .login { color: #111; }   /* dark text: white on the lifted red/blue is too faint */
[data-theme="dark"] .login:hover { background: var(--page); color: var(--link); }
[data-theme="dark"] .topbar .login:hover, [data-theme="dark"] .login.join:hover { background: #fff; color: #111; }
[data-theme="dark"] .filter, [data-theme="dark"] .contact-form input[type="text"], [data-theme="dark"] .contact-form input[type="email"],
[data-theme="dark"] .contact-form textarea { background: var(--raised); color: var(--ink); border-color: #55555b; }
[data-theme="dark"] .news { box-shadow: inset 0 0 0 3px var(--page), inset 0 0 0 4px var(--red); }
[data-theme="dark"] .status-track { background: #c42020; }
[data-theme="dark"] .status-track.bar-dc { background: #0b5f99; }
[data-theme="dark"] .chips a { background: transparent; }
[data-theme="dark"] .chips a:hover, [data-theme="dark"] .read-link:hover,
[data-theme="dark"] .head-row button:hover { color: #111; }
[data-theme="dark"] .order-card { border-bottom-color: var(--line); }
[data-theme="dark"] .comic-hit { border-bottom-color: var(--line); }
[data-theme="dark"] .tabbar { border-bottom-color: #55555b; }
[data-theme="dark"] .tabs button { background: var(--raised); border-top-color: var(--raised); }
[data-theme="dark"] .tabs button:hover { background: var(--raised-2); }
[data-theme="dark"] .tabs button[aria-selected="true"] { background: var(--page); color: #fff; border-top-color: var(--link); }
[data-theme="dark"] .box { background: var(--raised); border-color: #8a8a90; }
[data-theme="dark"] .is-read .issue-title, [data-theme="dark"] .tl-entry.is-read .tl-title { color: #85858b; }
[data-theme="dark"] .locked { background: #222226; }
[data-theme="dark"] code { background: var(--raised); }
[data-theme="dark"] .site-footer .social a:hover { color: #fff; }
[data-theme="dark"] .fine-print { color: #9d9da3; }
[data-theme="dark"] .note-box { background: #132b38; border-color: #23506a; color: #a9d4ee; }
[data-theme="dark"] .char-grid { column-rule-color: var(--line); }
[data-theme="dark"] .alphabet .none { color: #727278; }
[data-theme="dark"] .alphabet .bar { color: #8a8a90; }
[data-theme="dark"] .hub-tabs { border-color: var(--line); box-shadow: none; }
[data-theme="dark"] .hub-tablist { background: var(--raised); border-bottom-color: var(--line); }
[data-theme="dark"] .hub-tablist button { color: #a3a3a9; border-right-color: var(--line); }
[data-theme="dark"] .hub-tablist button:hover { color: var(--ink); }
[data-theme="dark"] .hub-tablist button[aria-selected="true"] { background: var(--page); color: #fff; }
@media (max-width: 700px) { [data-theme="dark"] .hub-tablist button { border-bottom-color: var(--line); } }
[data-theme="dark"] .msg.is-read-msg { border-left-color: #66666c; }
[data-theme="dark"] .send-btn { background: #c42020; border-color: #c42020; }
[data-theme="dark"] .to-top circle { fill: var(--page); }

/* buttons that are just icons or tabs keep their own look in dark mode */
[data-theme="dark"] .nav .menu-toggle, [data-theme="dark"] .nav .menu-toggle:hover,
[data-theme="dark"] .to-top, [data-theme="dark"] .to-top:hover { background: none; }
[data-theme="dark"] .hub-tablist button, [data-theme="dark"] .hub-tablist button:hover { background: none; border-top-color: transparent; }
[data-theme="dark"] .hub-tablist button[aria-selected="true"] { background: var(--page); border-top-color: var(--accent); }
[data-theme="dark"] .head-row button:hover { background: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .send-btn:hover { background: var(--yellow); border-color: var(--yellow); color: #111; }

/* The white column fills the screen below 960px, so the wallpaper would never be seen: don't download it */
@media (max-width: 960px) { body, [data-theme="dark"] body { background-image: none; } }

/* Guides page (data/guides.yaml) */
.guide-section { margin: 1.6rem 0; }
.guide-list { list-style: none; padding: 0; margin: 0.8rem 0; }
.guide-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.guide-list li:last-child { border-bottom: 0; }
.guide-list a { font-weight: 700; }
.guide-text { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 0.15rem; }
.guide-page h2 { margin-top: 1.6rem; }