:root{--paper:#FFFBEA;--ink:#0C0C0E;--spot:#1B3FC9;--half:#6E6857;--chipbg:#F2ECD6;--line:#DED6BC;--card:#FFFFFF;--head:#0C0C0E;--signal:#F5F07A;--sky:#1B3FC9;--night:#04103F;--magenta:#B725C4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#04103F;--ink:#EDEAE2;--spot:#5877F0;--half:#93A0CE;--chipbg:#0B1C56;--line:#17286E;--card:#08174A;--head:#000000;--signal:#F5F07A;--sky:#1B3FC9;--night:#04103F;--magenta:#C33BD0}}
:root[data-theme="dark"]{--paper:#04103F;--ink:#EDEAE2;--spot:#5877F0;--half:#93A0CE;--chipbg:#0B1C56;--line:#17286E;--card:#08174A;--head:#000000;--signal:#F5F07A;--sky:#1B3FC9;--night:#04103F;--magenta:#C33BD0}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 Archivo,'Helvetica Neue',Arial,sans-serif}
a{color:inherit}img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
/* ---------- masthead ---------- */
.announce{background:var(--spot);color:#fff;text-align:center;font:600 11.5px Archivo,sans-serif;
letter-spacing:.09em;text-transform:uppercase;padding:8px 16px}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:2px}
header{background:var(--head);color:#F7F6F1;padding:12px 0}
.mast{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.logo{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:23px;margin:0;line-height:1;white-space:nowrap}
.logo a{text-decoration:none;color:#F7F6F1}.logo .red{color:var(--spot)}
form.find{flex:1 1 380px;display:flex;min-width:240px}
form.find input{flex:1;border:0;padding:11px 14px;font:15px Archivo,sans-serif;background:#fff;color:#1B1A17;min-width:0}
form.find button{border:0;background:var(--spot);color:#fff;font:700 12px Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:0 20px;cursor:pointer}
#cartbtn{color:#F7F6F1;text-decoration:none;font:600 12px Archivo,sans-serif;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;border:1px solid rgba(247,246,241,.35);padding:9px 13px}
#cartbtn:hover{border-color:var(--spot)}
/* ---------- top nav ----------
   TWENTY-FIVE LINKS IN ONE STRIP IS NOT A MENU (owner, 2026-09-30: "the top scroll
   bar drives me crazy, I hate that I have to keep swiping to the left"). The old rule
   kept one row on a phone and let it swipe: four links were visible, the cart button
   sat on top of the fifth, and the other twenty were off-screen to the right with
   nothing to say so. On a desktop the same links wrapped to three uppercase rows and
   pushed the hero down the page.
   The destinations are unchanged -- they are REGROUPED into eight top-level items,
   three of which open a panel. Built from a checkbox and <details>, so the whole menu
   works with no JavaScript at all; the script only closes one panel when another
   opens. */
nav.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9}
nav.top .wrap{display:flex;align-items:center;gap:22px;position:relative;
  font:600 11.5px Archivo,sans-serif;letter-spacing:.09em;text-transform:uppercase}
nav.top a{text-decoration:none;color:var(--ink)}
.navtoggle,.burger{display:none}
/* The cart sits BEFORE the list in the markup so that on a phone it lands in the top
   row next to the Menu button. On a desktop that would put it at the far left, so the
   row is ordered here rather than in the HTML: links first, cart pushed to the right. */
.navlist{display:flex;align-items:center;gap:22px;flex-wrap:wrap;order:2}
.navlist>a{padding:11px 0;border-bottom:2px solid transparent}
.navlist>a:hover{border-bottom-color:var(--spot);color:var(--spot)}
.burger{order:1}
nav.top #cartbtn{order:3;white-space:nowrap}

/* a group: summary in the bar, panel beneath it */
.grp{position:relative}
.grp>summary{list-style:none;cursor:pointer;padding:11px 0;display:inline-flex;align-items:center;
  gap:7px;border-bottom:2px solid transparent}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary::after{content:"";width:5px;height:5px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
.grp>summary:hover,.grp[open]>summary{border-bottom-color:var(--spot);color:var(--spot)}
.grp[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.grp>.sub{position:absolute;top:100%;left:-16px;min-width:224px;z-index:20;
  display:flex;flex-direction:column;padding:6px 0;background:var(--card);
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.20)}
.grp>.sub a{padding:11px 18px;white-space:nowrap}
.grp>.sub a:hover{background:var(--spot);color:#fff}

/* ---------- phone: one Menu button, everything stacked behind it ---------- */
@media(max-width:760px){
  nav.top .wrap{flex-wrap:wrap;gap:0}
  .burger{display:inline-flex;align-items:center;gap:10px;padding:14px 0;cursor:pointer;
    user-select:none;color:var(--ink)}
  .burger .bars{display:block;width:18px;height:2px;background:currentColor;position:relative;
    box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
  .navtoggle:checked~.burger{color:var(--spot)}
  .navtoggle:checked~.burger .bars{background:transparent;box-shadow:none}
  .navtoggle:checked~.burger .bars::before,
  .navtoggle:checked~.burger .bars::after{content:"";position:absolute;left:0;top:0;
    width:18px;height:2px;background:currentColor}
  .navtoggle:checked~.burger .bars::before{transform:rotate(45deg)}
  .navtoggle:checked~.burger .bars::after{transform:rotate(-45deg)}
  .navtoggle:not(:checked)~.navlist{display:none}
  /* flex-wrap:nowrap is LOad-BEARING. The base rule sets flex-wrap:wrap for the
     desktop row; left on, a COLUMN flex container with a max-height wraps into
     extra COLUMNS as soon as the content outgrows it -- opening Genres turned the
     menu into three ragged columns reading "All comics / Genres / Sell to us". */
  .navlist{flex-basis:100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    border-top:1px solid var(--line);max-height:72vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:6px}
  .navlist>a,.grp{flex:0 0 auto}
  /* tap targets, not text links */
  .navlist>a,.grp>summary{padding:15px 2px;border-bottom:1px solid var(--line);
    border-bottom-color:var(--line)}
  .navlist>a:hover,.grp>summary:hover,.grp[open]>summary{border-bottom-color:var(--line)}
  .grp{position:static}
  .grp>summary{display:flex;justify-content:space-between;width:100%}
  .grp>.sub{position:static;min-width:0;padding:0;background:transparent;border:0;box-shadow:none}
  .grp>.sub a{padding:13px 2px 13px 22px;white-space:normal;border-bottom:1px solid var(--line);
    text-transform:none;letter-spacing:.02em;font-size:13px}
  .grp>.sub a:hover{background:transparent;color:var(--spot)}
}
main{padding:0 0 60px}
main>.wrap>h2.sec:first-child{margin-top:26px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--spot);outline-offset:2px}
/* ---------- headings ---------- */
h2.sec{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:19px;margin:34px 0 14px;padding-bottom:6px;border-bottom:2px solid var(--ink);display:flex;align-items:baseline;gap:10px}
h2.sec:first-child{margin-top:0}
h2.sec small{font-family:Archivo,sans-serif;font-size:11.5px;color:var(--half);font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-left:auto}
.crumbs{font-size:12px;color:var(--half);margin-bottom:12px}.crumbs a{color:var(--half)}
/* ---------- home ---------- */
/* the cover wall: full-bleed band of real stock, the first thing anyone sees */
/* Fixed tile HEIGHT rather than aspect-ratio, so the band clips to exactly two
   rows at any window width instead of leaving a ragged half-row of orphans. */
.coverwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
gap:2px;margin:0 0 26px;background:var(--line);border-bottom:4px solid var(--spot);
max-height:162px;overflow:hidden}
.coverwall a{display:block;position:relative;overflow:hidden;background:var(--chipbg)}
.coverwall img{width:100%;height:160px;object-fit:cover;display:block;
transition:transform .4s ease,filter .3s ease;filter:saturate(.92)}
@media(max-width:700px){.coverwall{max-height:122px}.coverwall img{height:120px}}
.coverwall a:hover img{transform:scale(1.08);filter:saturate(1.15)}
/* THE SERIES SHELF. A vertical list of one tall row per issue showed four
   books on a screen for a series holding 86, with the cover shrunk to a
   thumbnail. A comic shop is browsable because you can SEE the covers, so the
   covers are the page and the issue number and price ride underneath. */
.vol{margin:0 0 30px}
.volh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px;
padding-bottom:6px;border-bottom:2px solid var(--ink)}
.volh b{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;font-size:16px}
.volh span{font-size:12px;color:var(--half);letter-spacing:.06em;text-transform:uppercase}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.itile{display:block;text-decoration:none;color:inherit;position:relative}
.itile .shot{display:block;background:var(--chipbg);border:1px solid var(--line);
aspect-ratio:2/3;overflow:hidden}
.itile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.itile:hover img{transform:scale(1.06)}
.itile:hover .shot{border-color:var(--ink)}
.itile b{display:block;font-size:13.5px;margin:5px 0 1px}
.itile em{display:block;font-style:normal;font-size:13px;color:var(--spot);font-weight:700}
.itile i{display:block;font-style:normal;font-size:11px;color:var(--half);margin-top:1px}
/* The cover feature on an anthology tile: what this issue actually is, when the
   issue number alone cannot say. Sits under the number, quieter than the price. */
.itile u{display:block;text-decoration:none;font-size:11px;line-height:1.25;
color:var(--half);margin:0 0 2px;overflow:hidden;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical}
.itile .kf{position:absolute;top:0;left:0;background:var(--spot);color:#fff;
font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:2px 5px}
@media(max-width:640px){.shelf{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}}
/* THE FIRST SCREEN. A stranger who typed the domain off a business card has to
   learn what this place is and what they can do here, in one glance. The wall
   below is texture -- 24 unlabelled thumbnails carry no title, no price and no
   reason to click -- so the sentence and the search box do the work. The field
   is deliberately large: search-field size is itself the signal that a site
   expects to be searched.

   NO PROSE HERE (owner, 2026-08-30). A value-proposition paragraph shipped and
   came straight back out: "just the shipping rate/promo is all that's needed
   there." The announcement bar already carries the flat rate, the free-over-$50
   threshold and the bargain-bin offer, so a paragraph repeating it is a wall of
   text between a visitor and the search box. Headline, field, doors. */
.hero{padding:26px 0 20px;border-bottom:1px solid var(--line);margin:0 0 22px}
.hero h1{font-family:"Alfa Slab One",Georgia,serif;font-size:clamp(26px,4.4vw,40px);
line-height:1.08;margin:0 0 16px;color:var(--ink)}
.hero form{display:flex;gap:8px;max-width:620px;margin:0 0 14px}
.hero input{flex:1;min-width:0;padding:15px 16px;font-size:17px;font-family:inherit;
border:2px solid var(--ink);border-radius:2px;background:var(--card);color:var(--ink)}
.hero button{padding:15px 22px;font-size:15px;font-weight:800;font-family:inherit;
letter-spacing:.04em;text-transform:uppercase;border:2px solid var(--ink);
background:var(--spot);color:#fff;cursor:pointer;border-radius:2px}
.hero .quick{display:flex;flex-wrap:wrap;gap:7px}
.hero .quick a{font-size:13px;font-weight:600;padding:6px 12px;border:1px solid var(--line);
background:var(--chipbg);color:var(--ink);text-decoration:none;border-radius:999px}
.hero .quick a:hover{border-color:var(--ink)}
@media(max-width:640px){.hero form{flex-direction:column}.hero button{padding:13px}}
@media(max-width:640px){.coverwall{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}}
.bigshots{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line)}
.bigshots img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:var(--chipbg);
transition:transform .35s ease}
.big:hover .bigshots img{transform:scale(1.04)}
.bigtwo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 26px}
@media(max-width:700px){.bigtwo{grid-template-columns:1fr}}
.big{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--spot);display:flex;flex-direction:column}
.big:nth-child(2){border-top-color:var(--ink)}
.bighead{display:block;padding:26px 24px 18px;text-decoration:none}
.bighead b{display:block;font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:clamp(30px,4.6vw,46px);line-height:1;letter-spacing:-.01em}
.bighead span{display:block;color:var(--half);font-size:12.5px;margin-top:9px}
.bighead em{display:inline-block;font-style:normal;margin-top:14px;font:700 11.5px Archivo,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--spot);border-bottom:2px solid transparent}
.big:hover .bighead em{border-bottom-color:var(--spot)}
.bigser{display:flex;flex-wrap:wrap;gap:6px;padding:0 24px 22px;margin-top:auto}
.bigser a{text-decoration:none;font-size:12px;border:1px solid var(--line);padding:5px 9px;color:var(--half)}
.bigser a:hover{border-color:var(--ink);color:var(--ink)}
.eras{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.era{display:flex;flex-direction:column;text-decoration:none;background:var(--card);
border:1px solid var(--line);overflow:hidden;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.era:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.erashots{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
border-bottom:3px solid var(--spot)}
.erashots img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;
background:var(--chipbg);transition:transform .35s ease}
.era:hover .erashots img{transform:scale(1.05)}
.erabody{display:block;padding:13px 15px 15px}
.era b{display:block;font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:17px}
.era .erabody span{display:block;color:var(--half);font-size:12px;margin-top:3px}
.era em{display:block;font-style:normal;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--spot);font-weight:600;margin-top:7px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{text-decoration:none;background:var(--card);border:1px solid var(--line);padding:8px 12px;font-size:13px}
.chips a:hover{border-color:var(--ink)}
.chips a b{font-weight:600}.chips a span{color:var(--half);font-size:11.5px}
/* series tiles: each run wearing its own best cover */
.seriesgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
@media(max-width:560px){.seriesgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}}
.stile{display:flex;flex-direction:column;gap:7px;text-decoration:none;
transition:transform .18s ease}
.stile:hover{transform:translateY(-3px)}
.stile img,.stile .noface{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;
background:var(--chipbg);border:1px solid var(--line)}
.stile:hover img{border-color:var(--spot)}
.sname{font-weight:600;font-size:13px;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scount{font-size:11.5px;color:var(--half)}
/* the A-Z directory: a face beside every name */
.serieslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 18px}
.serieslist a{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;
text-decoration:none;padding:5px 6px;border-radius:3px}
.serieslist a:hover{background:var(--card)}
.serieslist img,.serieslist .noface.sm{width:30px;aspect-ratio:2/3;object-fit:cover;
background:var(--chipbg);border:1px solid var(--line);display:block}
.serieslist a span{font-size:13.5px;line-height:1.25}
.serieslist a b{font-size:11.5px;color:var(--half);font-weight:600}
.azbar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}
/* ANCHOR JUMPS LANDED BEHIND THE STICKY NAV. `nav.top` is position:sticky;top:0,
   so every #F jump on the series index has been hiding its own heading under the
   bar since the bar was made sticky. The owner's letter-jump feature is the whole
   point of the browse doors, so it has to actually land. 72px = nav + breathing. */
.sec[id]{scroll-margin-top:72px}
.doorall{margin:14px 0}
.doorall .buy.alt{display:inline-block}
.azbar a{text-decoration:none;border:1px solid var(--line);background:var(--card);width:29px;height:29px;display:grid;place-items:center;font:600 12px Archivo,sans-serif}
.azbar a:hover{background:var(--ink);color:var(--paper)}
.cols{columns:3;font-size:14px}@media(max-width:800px){.cols{columns:2}}@media(max-width:520px){.cols{columns:1}}
.cols a{display:block;break-inside:avoid;padding:2.5px 0;text-decoration:none}
.cols a:hover{color:var(--spot)}
.cols span{color:var(--half);font-size:12px}
/* ---------- shop: rail + rows ---------- */
.shop{display:grid;grid-template-columns:212px 1fr;gap:28px;align-items:start}
@media(max-width:860px){.shop{grid-template-columns:1fr}}
.side{position:sticky;top:52px;display:flex;flex-direction:column;gap:8px}
@media(max-width:860px){.side{position:static}}
.side h3{font:600 10.5px Archivo,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--half);margin:12px 0 -1px}
.side input,.side select,.side button{width:100%;font:400 13px Archivo,sans-serif;background:var(--card);color:var(--ink);border:1px solid var(--line);padding:8px 10px}
.side select,.side button{font-weight:600}
.side button{cursor:pointer;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.sidelink{font-size:11.5px;color:var(--half);text-decoration:none;margin-top:-2px}
.sidelink:hover{color:var(--spot)}
/* CHIPS SIT AT THEIR OWN WIDTH, WITH ROOM FOR THEIR SHADOW. `flex:1 1 auto`
   stretched whatever landed on a row, so "Keys" filled a line by itself and
   "Underground comix" filled another; and the 4px hard shadow on the selected
   chip fell into a 5px gap, touching its neighbour (owner, 2026-09-08, with a
   screenshot). Content width, a gap wider than the shadow, and the shadow drawn
   inward on the chip that is on. */
.fchips{display:flex;flex-wrap:wrap;gap:8px 7px}
.fchips button{width:auto;flex:0 0 auto;padding:6px 10px}
.fchips.band button{flex:1 1 100%}
.fchips button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.prices{display:flex;gap:6px}
.tbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:2px}
#count{color:var(--half);font-size:12.5px;margin:0}
#pos{color:var(--half);font-size:12.5px;margin:0;opacity:.75}
.viewtog{margin-left:auto;display:flex;gap:0}
.viewtog button{border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 10.5px Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;cursor:pointer}
.viewtog button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rows{display:block}
.r{display:grid;grid-template-columns:68px 1fr auto;gap:15px;align-items:center;padding:11px 6px;border-bottom:1px solid var(--line)}
.r a{text-decoration:none}
.r .t{display:block}
.r:hover{background:var(--card)}
.r img,.r .collage{width:68px;aspect-ratio:2/3;background:var(--chipbg)}
.r img{object-fit:cover}
.r .collage img{width:100%;aspect-ratio:auto}
.collage{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:1px;overflow:hidden;position:relative}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage.one{grid-template-columns:1fr}
.collage .n{position:absolute;right:0;bottom:0;background:var(--ink);color:var(--paper);font:800 8.5px Archivo,sans-serif;letter-spacing:.04em;padding:1px 3px}
/* The count is CSS-generated from data-n so it is never DOM text: extractors read
   "Mixed Reader Pack — 15 comics", not "15Mixed Reader Pack..." (review, 2026-09-05). */
.collage .n::after{content:attr(data-n)}
.card .collage{width:100%;aspect-ratio:2/3;gap:2px}
.card .collage.one{display:block}.card .collage.one img{width:100%;height:100%;object-fit:contain}.card .collage img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.card .collage .n{font-size:11px;padding:2px 5px}
.r .t{font-weight:600;font-size:14px;line-height:1.35}
.r .m{color:var(--half);font-size:11.5px;margin-top:2px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.r .end{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.r .p{font-weight:800;color:var(--spot);font-size:15.5px;font-variant-numeric:tabular-nums}
.tag{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px;background:var(--chipbg);color:var(--half)}
.tag.key{background:var(--spot);color:#fff}
.tag.bo{color:var(--spot)}
.addc{border:1px solid var(--ink);background:var(--card);color:var(--ink);font:700 10px Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;cursor:pointer;white-space:nowrap}
.addc:hover{background:var(--ink);color:var(--paper)}
a.addc{text-decoration:none;display:inline-block}
span.addc{opacity:.75;cursor:default;text-align:center}
span.addc:hover{background:var(--card);color:var(--ink)}
/* the other copies of one comic: choices, never a count */
.copies{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:6px 0 4px}
.copies .copy{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  border:2px solid var(--ink);background:var(--card);padding:8px;transition:transform .13s,box-shadow .13s}
.copies .copy:hover,.copies .copy:focus-visible{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.copies .copy img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line);background:var(--chipbg)}
.copies .copy b{font:800 14px Archivo,sans-serif;color:var(--spot);display:block}
.copies .copy i{font-style:normal;font-size:11px;color:var(--half);display:block;margin-top:2px}
/* story arcs (2026-10-13): the arc line under a product's "Story arc" heading, and the
   issue-by-issue list on /arc/<slug> -- a held issue carries its .rows, a missing one says so */
.arcline{font-size:13.5px;margin:0 0 10px}.arcline a{font-weight:700}
.arcline span{color:var(--half);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-left:8px}
.arcsrc{font-size:12.5px;color:var(--half);margin:-6px 0 14px;max-width:62ch}
.arch{font-weight:700;font-size:13.5px;margin:16px 0 2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.arch.miss{color:var(--half);font-weight:400;margin:8px 0 0;padding:4px 6px;border-bottom:1px dashed var(--line)}
.arch i{font-style:normal;font-size:10.5px;color:var(--half);letter-spacing:.08em;text-transform:uppercase}
/* the arc page's collapsed sections (2026-10-13): Expanded reading order and Related reading sit
   under the main story as <details>, styled as the h2.sec they stand in for */
.arcx{margin:34px 0 14px}.arcx>summary{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:19px;
  padding-bottom:6px;border-bottom:2px solid var(--ink);display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none}
.arcx>summary::-webkit-details-marker{display:none}
.arcx>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);margin-right:4px;flex:none;transition:transform .15s}
.arcx[open]>summary::before{transform:rotate(45deg)}
.arcx>summary small{font-family:Archivo,sans-serif;font-size:11.5px;color:var(--half);font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-left:auto}
.cond{font-size:12.5px;color:var(--half);line-height:1.55;margin:14px 0 0;max-width:62ch}
.cond b{color:var(--ink)}
.direct{font-size:12.5px;color:var(--half);line-height:1.5;margin:12px 0 0;
padding-left:11px;border-left:3px solid var(--spot);max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:22px}
@media(max-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.r{grid-template-columns:56px 1fr;gap:12px}
.r img,.r .collage{width:56px}
.r .end{grid-column:2;flex-direction:row;align-items:center;gap:12px;justify-content:flex-start}}
.card{display:flex;flex-direction:column;gap:9px;text-decoration:none;background:var(--card);
border:1px solid var(--line);padding:11px;position:relative;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
/* the cover sits in a fixed frame so a shelf of inconsistently-shot photos
   still reads as one grid */
.shotframe{position:relative;overflow:hidden;background:
  linear-gradient(135deg,var(--chipbg) 0%,var(--line) 50%,var(--chipbg) 100%);
  aspect-ratio:2/3;display:block}
.card img,.card .collage{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;display:block;
  transition:transform .35s ease}
.card:hover img{transform:scale(1.04)}
.cardadd{width:100%;margin-top:2px;padding:7px 8px;font-size:10.5px}
.ct{font-weight:600;font-size:13.5px;line-height:1.32;min-height:2.64em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto}
.pr{margin-left:auto;color:var(--spot);font-size:17.5px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.keyflag{position:absolute;top:11px;left:11px;z-index:2;background:var(--spot);color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;padding:3px 5px;text-transform:uppercase}
#more{display:block;margin:22px auto 0;padding:11px 28px;font:700 12px Archivo,sans-serif;text-transform:uppercase;letter-spacing:.08em;background:var(--card);color:var(--ink);border:1px solid var(--ink);cursor:pointer}
.empty{padding:40px 0;color:var(--half);text-align:center}
/* ---------- product ---------- */
.product{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:32px}
@media(max-width:720px){.product{grid-template-columns:1fr}}
.product img{width:100%;border:1px solid var(--line);display:block}
.zoom{position:relative;display:block;text-decoration:none}
.zoomhint{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.72);color:#fff;
  font:600 10px Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 8px;opacity:0;transition:opacity .18s ease;pointer-events:none}
.zoom:hover .zoomhint{opacity:1}
.zoom:hover img{border-color:var(--ink)}
.onlyone{font-size:12.5px;color:var(--half);margin:0 0 14px;padding-left:11px;
  border-left:3px solid var(--spot)}
.onlyone b{color:var(--ink)}
.product h1{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:25px;margin:0 0 6px;text-wrap:balance}
.price{font-size:29px;font-weight:800;color:var(--spot);font-variant-numeric:tabular-nums;margin:10px 0}
table.specs{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px}
table.specs th{text-align:left;color:var(--half);font-weight:600;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;width:38%;padding:7px 10px 7px 0;vertical-align:top;border-bottom:1px solid var(--line)}
table.specs td{padding:7px 0;border-bottom:1px solid var(--line)}
ul.contents{columns:2;font-size:14px;padding-left:18px}ul.contents li{break-inside:avoid}
.lotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:12px;margin:6px 0 4px}
.shot{display:flex;flex-direction:column;gap:5px;text-decoration:none}
.shot img{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--chipbg);border:1px solid var(--line)}
.shot:hover img{border-color:var(--spot)}
.shot .cap{font-size:11.5px;line-height:1.3;color:var(--half);display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
@media(max-width:600px){ul.contents{columns:1}}
.buy{display:inline-block;background:var(--spot);color:#fff;padding:.8rem 1.7rem;text-decoration:none;font:700 13px Archivo,sans-serif;letter-spacing:.06em;text-transform:uppercase;border:0;cursor:pointer}
.buy.alt{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.ship{color:var(--half);font-size:12.5px;margin-top:14px}
.runbar{display:flex;flex-wrap:wrap;gap:3px;margin:8px 0 18px}
.runbar span{font-size:10.5px;font-variant-numeric:tabular-nums;padding:3px 6px;background:var(--chipbg);color:var(--half)}
.runbar span.have{background:var(--ink);color:var(--paper);font-weight:700}
.prose{max-width:68ch;font-size:15.5px}
.prose h2{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:18px;margin-top:26px}
footer{border-top:1px solid var(--line);color:var(--half);font-size:12.5px;padding:34px 0 0;margin-top:52px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:30px;align-items:start}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:460px){.foot{grid-template-columns:1fr}}
.foot b{display:block;color:var(--ink);font:600 10.5px Archivo,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:9px}
.foot a{display:block;color:var(--half);text-decoration:none;padding:2.5px 0}
.foot a:hover{color:var(--spot)}
.foot p{margin:0;line-height:1.5}
.footline{text-align:center;border-top:1px solid var(--line);margin:26px 0 0;padding:16px 22px;font-size:11.5px}
/* ---------- cart drawer ---------- */
#cartwrap{position:fixed;inset:0;z-index:40}
#cartbg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
#cart{position:absolute;top:0;right:0;height:100%;width:min(390px,100%);background:var(--paper);border-left:3px solid var(--ink);padding:22px;overflow:auto;display:flex;flex-direction:column;gap:10px}
#cart h2{font-family:'Alfa Slab One',Georgia,serif;font-weight:400;font-size:20px;margin:0}
.ci{display:flex;gap:11px;align-items:flex-start;border-bottom:1px solid var(--line);padding:10px 0}
.ci img{width:42px;aspect-ratio:2/3;object-fit:cover;background:var(--chipbg)}
.ci .cin{flex:1;font-size:13px;line-height:1.35}
.ci .cip{font-weight:800;color:var(--spot);font-variant-numeric:tabular-nums;font-size:13.5px}
.ci button{background:none;border:0;color:var(--half);cursor:pointer;font:600 11px Archivo,sans-serif;text-transform:uppercase;padding:2px 0}
.ci button:hover{color:var(--spot)}
#carttot{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:13px;font-variant-numeric:tabular-nums;border-top:2px solid var(--ink);padding-top:11px;margin:0}
#carttot b{font-weight:700;text-align:right}
#carttot .lt{color:var(--half)}
#carttot .disc{color:var(--spot)}
#carttot .tt{font-size:16px;font-weight:800;color:var(--ink);padding-top:5px;border-top:1px solid var(--line)}
#carttot b.tt{color:var(--spot)}
.cm{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--half);margin:2px 0 0;line-height:1.45}
.cm b{color:var(--ink)}
.fh{font:600 10.5px Archivo,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--half);margin:6px 0 4px}
#fulfil label{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:5px 0;cursor:pointer}
#fulfil input{margin-top:3px}
.pn{font-size:11.5px;color:var(--ink);background:var(--chipbg);padding:9px 11px;margin:6px 0 0;line-height:1.45}
#cartx{background:var(--card);color:var(--ink);border:1px solid var(--ink);padding:9px;font:600 11.5px Archivo,sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;margin-top:auto}

/* =========================================================================
   THE SIGNAL THEME — We Sell Comics DE
   Everything above is the store's existing component layer, re-tokenised.
   Everything below is the identity, and it is only four devices:

     1. INK OUTLINES + HARD OFFSET SHADOWS, no radius. A printed panel, not
        a web card. Nothing here uses border-radius or a blurred shadow.
     2. THE CORNER BOX. A flag sits in a yellow block on a cover's top-left,
        the way a Silver Age cover carries its issue and price.
     3. SIGNAL YELLOW MEANS "ACT". Buy, add to cart, submit, the chosen
        filter. Nothing decorative may take it, or it stops meaning anything.
     4. THE DRAWING supplies the masthead lockup and the footer skyline. No
        generated buildings; every line is from assets/src/logo-signal.jpg.
   ========================================================================= */

/* --- 4. the lockup, in place of the old text wordmark --- */
.logo{line-height:0}
.logo a{display:inline-block;text-decoration:none}
/* The wordmark is two stacked lines inside the drawing, so it needs real
   height to stay legible -- at 40px each line was 18px tall and read as a
   yellow smudge. 56px gives ~112px of width, which the masthead has room for
   at every width the nav does. */
.logo img{display:block;height:clamp(42px,5.6vw,58px);width:auto;
  border:2px solid var(--signal)}
@media (max-width:560px){.logo img{height:38px}}

/* --- display type: Bevan carries the headings, Archivo does the work --- */
h2.sec,.product h1,.hero h1,.bighead b,.era b,.bigser a,.volh b{
  font-family:Bevan,Georgia,serif;font-weight:400;letter-spacing:0}
.hero h1{font-size:clamp(28px,4.4vw,46px);line-height:1.02}

/* --- 1. ink outlines and hard shadows --- */
.card,.stile,.itile,.shot,.shotframe,.product img,.big,.era,.coverwall a,
.serieslist a,.side,.ci img{border-radius:0}
/* At rest a tile is a printed panel sitting FLAT on the page: ink border, no
   shadow. The offset shadow is the hover state -- the panel lifts toward the
   cursor -- and only the hover state. Owner, 2026-09-05: with the shadow on
   every tile all the time "it looks a little too sloppy, like the borders are
   out of whack". Same language for the shop cards and era doors, which used to
   lift on a soft blurred shadow that did not belong to this drawing. */
.itile,.stile,.big,.era,.side{border:3px solid var(--ink);background:var(--card);
  box-shadow:none}
.itile,.stile,.big,.era,.card{transition:transform .13s,box-shadow .13s}
.itile:hover,.stile:hover,.big:hover,.era:hover,.card:hover,
.itile:focus-visible,.stile:focus-visible,.big:focus-visible,.era:focus-visible,
.card:focus-visible{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.shot,.card,.product img{border:3px solid var(--ink)}
@media (prefers-reduced-motion:reduce){
  .itile,.stile,.big,.era,.card{transition:none}
  .itile:hover,.stile:hover,.big:hover,.era:hover,.card:hover{transform:none;
    box-shadow:6px 6px 0 var(--ink)}
}

/* A LOT IS A STACK. Owner, 2026-09-05, on the X-Force shelf: "the same comic
   thumbnail three times in a row with different pricing" -- two singles and a
   six-comic lot were indistinguishable. A lot tile draws two frames behind its
   cover, wears a LOT corner box (ink on paper, opposite corner from KEY) and
   prints "lot" after the price. The stack lives inside the cover area so the
   tile itself still sits flat at rest (the 2026-09-05 no-offset-at-rest rule). */
.itile.lot .shot{margin:0 9px 9px 0;box-shadow:4px 4px 0 var(--card),5px 5px 0 var(--ink),
  8px 8px 0 var(--card),9px 9px 0 var(--ink)}
.itile .lf{position:absolute;top:0;right:0;z-index:1;background:var(--ink);color:var(--paper);
  border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);
  font:900 10px/1.1 Archivo,sans-serif;letter-spacing:.06em;padding:3px 6px 2px}
.itile em small{font:900 9.5px/1 Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--half);margin-left:4px;vertical-align:1px}

/* --- 2. the corner box --- */
.itile .kf,.keyflag,.tag.key{background:var(--signal);color:#000;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  border-radius:0;font:900 10px/1.1 Archivo,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 7px}

/* --- 3. signal yellow means act --- */
.buy,form.find button,.hero button,.ci button,#cartgo,.viewtog button.on,
.fchips button.on{background:var(--signal);color:#000;
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  border-radius:0;font-weight:800}
/* a filter chip is small; a 4px shadow on it reads as a printing error */
.fchips button.on{border-width:2px;box-shadow:3px 3px 0 var(--ink)}
/* THE BUY PAIR. Two buttons, one row, a gap wider than the shadow they cast,
   and the same height whatever the label wraps to. */
.buyrow{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin:14px 0 4px}
.buyrow .buy{display:inline-flex;align-items:center;justify-content:center;margin:0}
.buy,form.find button{transition:transform .12s,box-shadow .12s}
.buy:hover,form.find button:hover,.hero button:hover{
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.buy:active,form.find button:active{transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink)}
.buy.alt{background:transparent;color:var(--ink)}
.addc,.cardadd,span.addc,a.addc{border:2px solid var(--ink);border-radius:0;
  background:var(--signal);color:#000;font-weight:800}
.addc:hover{background:#FBF8B8}
:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}

/* --- the announcement bar is the one place magenta appears --- */
.announce{background:var(--magenta);color:#fff}
.announce a{color:var(--signal)}

/* --- chrome --- */
header{background:var(--head);border-bottom:4px solid var(--signal)}
nav.top{border-bottom:3px solid var(--ink)}
nav.top a:hover{border-bottom-color:var(--signal);color:var(--signal)}
h2.sec{border-bottom:3px solid var(--ink)}
form.find input,.side input,.side select,.hero input{
  border:2px solid var(--ink);border-radius:0}

/* --- the footer carries the drawing's own skyline --- */
footer{position:relative;border-top:3px solid var(--ink);
  padding-bottom:clamp(96px,12vw,150px);overflow:hidden}
footer .city{position:absolute;left:0;right:0;bottom:0;
  height:clamp(90px,11vw,140px);
  background:var(--city) bottom center/auto 100% repeat-x;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 40%);
  pointer-events:none}
footer .wrap{position:relative;z-index:2}

@media (max-width:560px){
  .itile:hover,.stile:hover,.big:hover,.era:hover,.card:hover{
    transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
}

/* --- 5. the drawing is the home page's first screen --- */
/* Full bleed, uncropped, the copy set on its night sky. The colours here are
   literal, not tokens: the artwork does not change with the theme, so the ink
   on it must stay black and the paper on it must stay paper in dark mode too.
   The gradient does the legibility work; nothing is boxed or blurred. */
.hero{position:relative;color:#FFFBEA;margin:0 0 26px;border-bottom:4px solid #000;
  background:#04103F var(--backdrop) center top/cover no-repeat;
  min-height:min(82vh,860px);display:flex;align-items:flex-end;
  padding:clamp(180px,26vw,320px) 0 clamp(24px,3vw,40px)}
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(to top,#04103F 6%,rgba(4,16,63,.86) 40%,transparent 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:var(--signal);font-size:clamp(34px,5vw,60px);line-height:.98;
  margin:0 0 18px;max-width:640px;text-wrap:balance;
  -webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:6px 6px 0 rgba(0,0,0,.9)}
.hero form{max-width:640px;margin:0 0 14px}
.hero input{border:3px solid #000;background:#FFFBEA;color:#0C0C0E;box-shadow:4px 4px 0 #000}
.hero input::placeholder{color:#6E6857}
.hero .quick a{border:2px solid var(--signal);color:var(--signal);
  background:rgba(4,16,63,.55);border-radius:0;font-weight:700}
.hero .quick a:hover,.hero .quick a:focus-visible{background:var(--signal);color:#000}
@media (max-width:820px){
  .hero{background-image:var(--artwork);background-size:100% auto;
    min-height:78vh;padding-top:clamp(240px,70vw,420px)}
}
/* --- 6. browse by character: longbox divider tabs --- */
/* In the shop the long boxes are cut into runs by divider cards with a name
   written on the tab; the staggered rows here are those tabs seen from above.
   Fourteen names in a 5-4-5 brick, the middle row inset half a tab. Half the
   height of the first version (owner, 2026-09-05: "shrink the tabs to 50%,
   keep the offset"): name and count share one line, 2px ink, 4px lift. The
   name is marker-on-card, Archivo black caps; the count is real. */
.tabs{display:grid;grid-template-columns:repeat(10,1fr);gap:8px 10px;margin:0 0 30px}
.tabs a{grid-column:span 2;display:flex;align-items:baseline;gap:8px;text-decoration:none;
  color:var(--ink);border:2px solid var(--ink);background:var(--card);padding:5px 10px 4px;
  min-height:0;transition:transform .13s,box-shadow .13s}
.tabs a:nth-child(6){grid-column:2/span 2}
/* A long name wraps to a second line rather than truncating: "LEGION OF SUP..."
   is not a name anyone can click on with confidence. Most tabs stay one line. */
.tabs a b{font:900 clamp(11px,.95vw,13px)/1.15 Archivo,sans-serif;letter-spacing:.03em;
  text-transform:uppercase;text-wrap:balance}
.tabs a span{margin-left:auto;font:600 9.5px/1.15 Archivo,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--half);white-space:nowrap;flex:none}
.tabs a:hover,.tabs a:focus-visible{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.tabs a:hover span{color:var(--ink)}
@media (max-width:820px){.tabs{grid-template-columns:repeat(6,1fr);gap:6px 8px}
  .tabs a:nth-child(6){grid-column:span 2}.tabs a b{font-size:11px}}
@media (max-width:480px){.tabs{grid-template-columns:repeat(4,1fr)}
  .tabs a{flex-wrap:wrap;gap:2px 8px}.tabs a span{margin-left:0}}
@media (prefers-reduced-motion:reduce){.tabs a{transition:none}
  .tabs a:hover{transform:none}}

/* the artist's credit: same size as the colophon, a shade quieter */
.footline .credit{opacity:.8;white-space:nowrap}

/* home page: no masthead over the drawing, so the cart rides the nav row */
nav.top #cartbtn{margin-left:auto;align-self:center;color:var(--ink);
  border:2px solid var(--ink);padding:6px 12px;font:700 11.5px Archivo,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
nav.top #cartbtn:hover{background:var(--signal);color:#000;border-color:var(--ink)}
/* RETIRED WITH THE SWIPE ROW (2026-09-30). All three rules here existed to serve a
   horizontally scrolling nav: the cart was pinned absolutely to the right edge so a
   swipe could not carry it off-screen, `.wrap` carried a 104px right padding to keep
   the links clear of it, and a gradient faded the links out underneath it.
   With a Menu button there is no scroller, and each rule had become a bug:
     * `top:50%` centres on the WHOLE nav, so once the menu opened the cart drifted
       down the panel and landed on top of the Genres row;
     * the 104px padding squeezed the open panel to 249px of a 375px screen;
     * the fade drew a gradient over the menu.
   The cart now simply sits in the top row beside the Menu button. */
@media (max-width:760px){
  /* top row is Menu then cart; the panel is the whole next line */
  nav.top #cartbtn{position:static;margin-left:auto;align-self:center;transform:none;order:2}
  nav.top .navlist{order:3}
}