:root{--accent:#2f6fd0;--ink:#10151c;--bg:#f7f9fc;--line:#d7dfea;--rule:#10151c;--radius:4px;--tile-min:175px;--tile-ratio:16/10;--rule-weight:2px;--head:"Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,sans-serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--muted:#787c81;--caps:uppercase}@media(prefers-color-scheme:dark){:root{--ink:#f2f0f5;--bg:#101014;--line:#2a2830;--rule:#f2f0f5;--muted:#8c8b90;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--body)}
a{color:inherit}
img{max-width:100%;height:auto}
main{max-width:1300px;margin:0 auto;padding:0 16px 64px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- masthead: white, hairline rule, black wordmark ---- */
/* The masthead and footer are full-bleed bars, but their CONTENT sits on the same
   measure as the body, so nothing lines up against the page edge while the article
   below it is inset. */
/* The masthead must never be wider than the screen. On a phone the brand sits alone
   with a burger beside it and everything else collapses into a panel; from 760px up the
   panel is simply the row it always was and the burger disappears. */
.site-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:12px 16px;background:var(--bg);border-bottom:var(--rule-weight) solid var(--rule);
  position:sticky;top:0;z-index:30;max-width:1300px;margin:0 auto;
  /* min-width:0 on the children is what actually stops a long nav pushing the header
     past the viewport - a flex item defaults to min-content width, not zero. */
  overflow:visible}
.site-head > *{min-width:0}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{margin-left:auto;display:inline-flex;flex-direction:column;justify-content:center;
  gap:5px;width:42px;height:38px;padding:8px;cursor:pointer;flex:0 0 auto}
.burger span{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
.burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.head-panel{display:none;width:100%;flex-basis:100%;gap:14px;
  flex-direction:column;padding:6px 0 4px}
.nav-toggle:checked ~ .head-panel{display:flex}
@media(prefers-reduced-motion:reduce){.burger span{transition:none}}

@media(min-width:760px){
  .site-head{flex-wrap:nowrap}
  .burger{display:none}
  /* The panel stops being a panel and becomes the row: no toggle, nothing hidden. */
  .head-panel{display:flex !important;flex-direction:row;align-items:center;
    width:auto;flex-basis:auto;flex:1 1 auto;min-width:0;padding:0;gap:18px}
}
body[data-masthead="solid"] .site-head{background:var(--accent);border-bottom:0}
body[data-masthead="solid"] .site-head,
body[data-masthead="solid"] .site-head a{color:#fff}
body[data-masthead="solid"] .brand{color:#fff}
body[data-masthead="tint"] .site-head{background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
body[data-masthead="centred"] .site-head{flex-direction:column;gap:10px;text-align:center}
body[data-masthead="centred"] .brand{font-size:1.9rem}
.brand{font-weight:900;text-decoration:none;font-size:1.4rem;letter-spacing:-.045em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.site-head nav{display:flex;gap:20px;min-width:0;flex-wrap:wrap}
@media(min-width:760px){
  /* Only the desktop row scrolls; on a phone the panel wraps instead, because a
     horizontal scroller inside a dropdown is a trap. */
  .site-head nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
}
.site-head nav::-webkit-scrollbar{display:none}
.site-head nav a{text-decoration:none;white-space:nowrap;font-weight:700;font-size:.95rem}
.site-head nav a:hover{color:var(--accent)}
.search{display:flex;gap:6px;min-width:0}
@media(min-width:760px){.search{margin-left:auto}}
.search input{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);
  flex:1 1 auto;width:100%;background:var(--bg);color:var(--ink);min-width:0}
.search button{padding:7px 13px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);cursor:pointer;font-weight:700;white-space:nowrap}
@media(min-width:760px){.search input{flex:0 0 auto;width:150px}}
@media(min-width:1060px){.search input{width:190px}}

/* ---- topic strip: plain links divided by rules ---- */
.trending{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;
  padding:16px 0;font-size:1rem;white-space:nowrap;border-bottom:1px solid var(--line)}
.trending::-webkit-scrollbar{display:none}
.trending a{text-decoration:none;padding:0 18px;border-right:1px solid var(--line)}
.trending a:first-child{padding-left:0}
.trending a:last-child{border-right:0}
.trending a:hover{color:var(--accent);text-decoration:underline}

/* ---- the page label ---- */
/* This is the H1. It names what the site is for, which is the one thing the front page
   cannot say any other way, and it stays deliberately quieter than the lead headline
   below it - a masthead label, not a second headline competing with the first. */
.page-head{padding:18px 0 0}
.page-title{font-family:var(--head);font-size:1.15rem;font-weight:800;margin:0;
  letter-spacing:-.01em;color:var(--ink)}
.page-sub{margin:.25em 0 0;color:var(--muted);font-size:.82rem}
@media(min-width:760px){.page-title{font-size:1.3rem}}

/* ---- three columns ---- */
/* The lead is FIRST in the markup so the headings descend properly - it carries the h2
   and the rails carry h3s. Its visual position is set here instead, because reading
   order and column order are different questions. */
.frontpage{display:grid;grid-template-columns:1fr;gap:30px;padding:22px 0 8px}
@media(min-width:760px){
  .frontpage{grid-template-columns:1fr 1fr;gap:30px}
  .fp-lead{grid-column:1 / -1}
}
@media(min-width:1080px){
  .frontpage{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,300px);gap:0}
  .fp-lead{grid-column:2;grid-row:1;padding:0 32px}
  .fp-left{grid-column:1;grid-row:1;border-right:1px solid var(--line);padding-right:32px}
  .fp-right{grid-column:3;grid-row:1;border-left:1px solid var(--line);padding-left:32px}
}

/* ---- the lead: headline, then artwork, then the supporting line ---- */
.lead-title{font-family:var(--head);font-size:2rem;line-height:1.08;letter-spacing:-.025em;font-weight:800;
  margin:0 0 16px;text-align:center}
@media(min-width:760px){.lead-title{font-size:2.6rem}}
@media(min-width:1080px){.lead-title{font-size:2.9rem}}
.lead-title a{text-decoration:none}
.lead-title a:hover{text-decoration:underline}
.lead-art{display:block;position:relative}
.lead-art img{width:100%;display:block;background:var(--line)}
.lead-badge{position:absolute;top:0;left:0;background:var(--bg);color:var(--ink);
  font-size:.8rem;font-weight:800;padding:8px 14px;z-index:2}
.lead-sub{font-size:1.15rem;line-height:1.25;font-weight:700;letter-spacing:-.012em;
  margin:16px 0 8px}
@media(min-width:760px){.lead-sub{font-size:1.5rem}}
.lead-sub a{text-decoration:none}
.lead-sub a:hover{text-decoration:underline}
.lead-meta,.byline{color:var(--muted);font-size:.88rem;margin:6px 0 0;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- artwork with the chapter count laid over it ---- */
.art{display:block;position:relative;line-height:0}
.art img{display:block;width:100%}
.art.wide img{aspect-ratio:16/10;object-fit:cover}
.ch-badge{position:absolute;right:0;bottom:0;z-index:2;
  background:rgba(0,0,0,.78);color:#fff;font-size:.74rem;font-weight:800;
  letter-spacing:.02em;padding:5px 9px;line-height:1;text-transform:uppercase}
@media(min-width:760px){.ch-badge{font-size:.78rem;padding:6px 10px}}

/* ---- completed / ongoing, as a mark ---- */
/* A full circle is a finished story; a half-filled one is still being drawn. Drawn in
   CSS rather than set as a glyph: the partial circle characters render at wildly
   different weights across fonts and one of them is simply missing on Android. */
.status{display:inline-block;width:.62em;height:.62em;margin-right:.45em;border-radius:50%;
  vertical-align:baseline;border:.14em solid currentColor;box-sizing:border-box}
.status.is-done{color:var(--accent);background:currentColor}
.status.is-live{color:var(--muted);
  background:linear-gradient(to right,currentColor 0 50%,transparent 50% 100%)}

.byline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kicker{color:var(--accent);font-weight:700;text-decoration:none}

/* ---- side columns: artwork on top, headline beneath ---- */
.li-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.li{margin:0}
.li-art{display:block}
.li-art{display:block}
.li h3{font-family:var(--head);font-size:1.28rem;line-height:1.2;letter-spacing:-.015em;margin:12px 0 0;
  font-weight:800;text-transform:none;color:var(--ink)}
.li h3 a{text-decoration:none}
.li h3 a:hover{text-decoration:underline}

/* ---- shelves below ---- */
.shelf{margin-top:38px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:var(--rule-weight) solid var(--rule);padding-top:10px;margin-bottom:16px}
.shelf-head h2{text-transform:var(--caps);font-size:1.05rem;letter-spacing:-.01em;margin:0;font-weight:800}
.row-more{color:var(--accent);text-decoration:none;font-size:.85rem;font-weight:700;white-space:nowrap}
/* auto-FIT, not auto-fill: empty tracks collapse, so a shelf of six stretches across
   the row instead of leaving two blank columns at the end. A short section then reads
   as a short section rather than as something that failed to load. */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr))}
@media(min-width:760px){.grid{grid-template-columns:repeat(auto-fit,minmax(166px,1fr))}}
/* Except when a handful of items would each become enormous. */
.grid{--max-tile:230px}
.grid > li{max-width:var(--max-tile);justify-self:stretch;width:100%}
.card a{display:block;text-decoration:none;height:100%}
.card img,.card .noart{display:block;width:100%;aspect-ratio:var(--tile-ratio);object-fit:cover;background:var(--line)}
/* A missing cover still reserves its box, so a shelf holding one does not
   reflow around the gap or collapse the row it sits in. */
.noart{display:block;width:100%;aspect-ratio:var(--tile-ratio);background:var(--line)}
.card strong{display:block;padding:10px 0 3px;font-family:var(--head);font-size:1rem;line-height:1.22;font-weight:800;
  letter-spacing:-.012em}
.card span{display:block;color:var(--muted);font-size:.8rem}

/* ---- interior pages ---- */
h1{font-family:var(--head);font-size:1.8rem;line-height:1.12;margin:.15em 0 .4em;letter-spacing:-.025em;font-weight:800}
h2{font-family:var(--head);font-size:1.12rem;margin:1.7em 0 .6em;font-weight:800;letter-spacing:-.012em}
h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 6px;font-weight:800}
@media(min-width:760px){h1{font-size:2.4rem}}
.lede{color:var(--muted);max-width:64ch}
.crumbs{color:var(--muted);font-size:.83rem;margin:16px 0 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline;color:var(--accent)}
.series-head{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media(min-width:720px){.series-head{grid-template-columns:290px 1fr;gap:32px}}
.series-art img{width:100%;max-width:290px;display:block;background:var(--line)}
.alt{color:var(--muted);margin:.2em 0 0;font-size:.9rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px;margin:18px 0;
  padding:15px 0;border-top:var(--rule-weight) solid var(--rule);border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.facts dd{margin:3px 0 0;font-weight:800;font-size:.96rem}
.more{display:inline-block;padding:13px 24px;border-radius:var(--radius);
  background:var(--accent);color:#fff;text-decoration:none;font-weight:800}
.summary p{max-width:70ch}
.terms{margin:0 0 14px}
.terms ul,.terms-index{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.terms a,.terms-index a{display:inline-flex;gap:6px;padding:7px 13px;border:1px solid var(--line);
  text-decoration:none;font-size:.86rem;font-weight:600}
.terms a:hover,.terms-index a:hover{border-color:var(--accent);color:var(--accent)}
.terms-index span{color:var(--muted);font-size:.78rem;font-weight:400}
.chapter-list{list-style:none;margin:0;padding:0}
.chapter-list a{display:flex;justify-content:space-between;gap:12px;padding:14px 2px;
  border-bottom:1px solid var(--line);text-decoration:none;font-weight:700}
.chapter-list span{color:var(--muted);font-size:.82rem;font-weight:400}
.chapter-list a:hover{color:var(--accent)}

/* ---- reader ---- */
.reader-sub{color:var(--muted);font-size:.87rem;margin:.1em 0 14px}
.reader-sub a{color:var(--accent)}
.reader{margin:0 -16px;background:#000;font-size:0}
@media(min-width:820px){.reader{margin:0 auto;max-width:880px}}
.reader img{display:block;width:100%;margin:0;background:#111}
.reader-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:15px 0;font-size:.9rem}
.reader-nav a{text-decoration:none;color:var(--accent);font-weight:800}
.reader-nav .nav-prev{text-align:left}.reader-nav .nav-next{text-align:right}
.reader-nav .nav-index{color:var(--muted);font-weight:700;white-space:nowrap}
.reader-nav .is-off{color:var(--muted);opacity:.45}
.reader-nav.bottom{border-top:1px solid var(--line)}
.chapter-strip{margin-top:26px}
.chapter-strip ol{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chapter-strip ol::-webkit-scrollbar{display:none}
.chapter-strip a{display:block;padding:9px 15px;border:1px solid var(--line);
  text-decoration:none;white-space:nowrap;font-size:.87rem;font-weight:600}
.chapter-strip .is-current a{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---- fixed reader bar: phone and tablet ---- */
.reader-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:58px 1fr 58px;align-items:center;
  background:var(--bg);border-top:var(--rule-weight) solid var(--rule);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.reader-bar a,.reader-bar span{text-decoration:none;color:var(--ink)}
.reader-bar .rb-prev,.reader-bar .rb-next{font-size:1.4rem;text-align:center;padding:8px 0;
  font-weight:800;color:var(--accent)}
.reader-bar .is-off{opacity:.28;color:var(--muted)}
.reader-bar .rb-index{text-align:center;overflow:hidden;line-height:1.2}
.reader-bar .rb-index strong{display:block;font-size:.9rem;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-bar .rb-index span{display:block;font-size:.75rem;color:var(--muted)}
body:has(.reader-bar){padding-bottom:78px}
@media(min-width:1080px){.reader-bar{display:none}body:has(.reader-bar){padding-bottom:0}}

/* ---- pagination, footer ---- */
/* ---- share ---- */
.share{margin-top:34px;padding-top:16px;border-top:var(--rule-weight) solid var(--rule)}
.share h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;margin:0 0 12px;font-weight:800}
.share-links{display:flex;flex-wrap:wrap;gap:8px}
.share-links a{padding:9px 15px;border:1px solid var(--line);text-decoration:none;
  font-weight:700;font-size:.87rem;color:var(--ink)}
.share-links a:hover{border-color:var(--accent);color:var(--accent)}
.share-copy{display:flex;gap:8px;margin-top:12px;max-width:560px}
.share-copy input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:.87rem;font-family:inherit}
.share-copy button{padding:10px 18px;border:1px solid var(--rule);background:var(--ink);
  color:var(--bg);font-weight:800;cursor:pointer;white-space:nowrap}
.share-copy button.is-done{background:var(--accent);border-color:var(--accent)}

.pagination{display:flex;gap:7px;flex-wrap:wrap;margin:30px 0}
.pagination a{padding:9px 14px;border:1px solid var(--line);text-decoration:none;font-weight:600}
.pagination a[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hub-intro{max-width:70ch;margin:0 0 22px;color:var(--muted)}
.hub-intro p{margin:0 0 .6em}
.hub-intro strong,.hub-intro a{color:var(--ink)}
.hub-intro a{color:var(--accent)}
.prose{max-width:72ch;padding-bottom:20px}
.prose h2{margin:1.8em 0 .5em}
.prose div{margin:0 0 1em}
.prose ul{margin:0 0 1em;padding-left:1.2em}
.prose li{margin:.35em 0}
.prose a{color:var(--accent)}
.empty,.listing-empty{color:var(--muted);padding:22px 0}
.site-foot{border-top:var(--rule-weight) solid var(--rule);padding:26px 16px 44px;color:var(--muted);
  font-size:.87rem;max-width:1300px;margin:0 auto}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.site-foot a{text-decoration:none;font-weight:600}
.site-foot a:hover{text-decoration:underline;color:var(--accent)}