:root{--accent:#e08600;--ink:#1a1408;--bg:#fffdf6;--line:#eee2c8;--rule:#1a1408;--radius:14px;--tile-min:160px;--tile-ratio:3/4;--rule-weight:1px;--head:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;--body:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;--muted:#817d73;--caps:none}@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}

/* ---- three columns ---- */
.frontpage{display:grid;grid-template-columns:1fr;gap:30px;padding:22px 0 8px}
.fp-lead{order:-1}
@media(min-width:760px){
  .frontpage{grid-template-columns:1fr 1fr;gap:30px}
  .fp-lead{grid-column:1 / -1;order:-1}
}
@media(min-width:1080px){
  .frontpage{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,300px);gap:0}
  .fp-lead{grid-column:auto;order:0;padding:0 32px}
  .fp-left{border-right:1px solid var(--line);padding-right:32px}
  .fp-right{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)}