: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)}
nav.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9}
nav.top .wrap{display:flex;gap:22px;flex-wrap:wrap;font:600 11.5px Archivo,sans-serif;letter-spacing:.09em;text-transform:uppercase}
/* On a phone ten links wrap to five rows and eat a third of the screen before
   any comics appear. Keep one row and let it swipe. */
@media(max-width:760px){
  nav.top .wrap{flex-wrap:nowrap;overflow-x:auto;gap:18px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:0}
  nav.top .wrap::-webkit-scrollbar{display:none}
  nav.top a{white-space:nowrap;padding:10px 0}
}
nav.top a{text-decoration:none;padding:11px 0;border-bottom:2px solid transparent;color:var(--ink)}
nav.top a:hover{border-bottom-color:var(--spot);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}
.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}
.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)}
.fchips{display:flex;flex-wrap:wrap;gap:5px}
.fchips button{width:auto;flex:1 1 auto;padding:6px 9px}
.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)}
.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}
.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)}
/* On a phone the nav is a swipe row, and a cart button at its far end would
   need a swipe to find. Pin it to the right edge of the (sticky, positioned)
   nav instead: it escapes the scroller's clipping because its containing block
   is nav.top, and the links scroll underneath it behind a fade. */
@media (max-width:760px){
  nav.top #cartbtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);
    margin-left:0;background:var(--card);z-index:2}
  nav.top .wrap{padding-right:104px}
  nav.top::after{content:"";position:absolute;right:0;top:0;bottom:0;width:120px;
    pointer-events:none;
    background:linear-gradient(to right,transparent,var(--card) 55%)}
  nav.top #cartbtn{z-index:3}
}