/* ══════════════════════════════════════════════════════════════════════════
   Brainzzz Hood — COMIC INK PANELS · INK STRIP / COOL PRESS
   Chosen: https://comps-pearl-phi.vercel.app/comp-c-cool.html
   Grounded in measured art facts (40-token PIL probe):
     lime 78.6% of pixels  → lime is the STAGE, never the page surface
     dense black 21.1%     → ink rule is 3–6px, NEVER hairline
     high-chroma 60%       → loud accents belong, institutional greys don't
     median run-length 1   → vector art, so NO pixel typeface
   BANNED: serif · Archivo · Silkscreen · pixel font · 1px hairline language ·
           <table> rarity · PL./roman notation · lime page surface · CREAM ·
           dark-void abstract glow · Inter · gradient hero
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800&family=Barrio&family=Bungee&family=Anton&display=swap');

:root{
  --ink:#12100e;
  --page:#e4e7ea;          /* Cool Press — cold pressroom paper, NOT cream */
  --panel:#f4f6f7;
  --panel-2:#dde2e6;
  --lime:#c9f712;          /* ART STAGE only */
  --chase:#fe365f;
  --cool:#67d5d0;
  --gold:#fee442;
  --violet:#ab3cfe;
  --dim:#4a4f55;
  --gutter:14px;
  --rule:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--page);color:var(--ink);
  font-family:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.5;padding:22px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:var(--ink)}

/* ── ink language ──────────────────────────────────────────────────────── */
.panel{border:var(--rule) solid var(--ink);background:var(--panel);position:relative;overflow:hidden}
.panel--stage{background:var(--lime)}
.panel--splash{border-width:6px}

.benday{background-image:radial-gradient(rgba(18,16,14,.22) 1.4px,transparent 1.5px);
  background-size:7px 7px}
.dots{height:30px;margin-top:auto}
.d1{background-image:radial-gradient(rgba(18,16,14,.30) 1.1px,transparent 1.2px);background-size:5px 5px}
.d2{background-image:radial-gradient(rgba(18,16,14,.42) 1.7px,transparent 1.8px);background-size:8px 8px}
.d3{background-image:radial-gradient(rgba(18,16,14,.55) 2.6px,transparent 2.7px);background-size:12px 12px}

.balloon{background:#fff;color:var(--ink);border:var(--rule) solid var(--ink);border-radius:26px;
  padding:16px 20px;position:relative}
.balloon:after{content:'';position:absolute;left:38px;bottom:-19px;width:0;height:0;
  border:16px solid transparent;border-top-color:var(--ink);border-bottom:0}
.balloon:before{content:'';position:absolute;left:43px;bottom:-12px;z-index:2;width:0;height:0;
  border:11px solid transparent;border-top-color:#fff;border-bottom:0}

.caption{background:var(--gold);color:var(--ink);border:var(--rule) solid var(--ink);
  padding:7px 12px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.num{font-family:'Bungee',sans-serif;font-size:13px;letter-spacing:.1em;color:var(--chase)}
.tag{display:inline-block;background:var(--ink);color:var(--page);
  font-weight:800;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;padding:6px 11px}
.tag--chase{background:var(--chase);color:var(--ink)}
.tag--lime{background:var(--lime);color:var(--ink)}

/* ── masthead: solid ink bar (Ink Strip signature) ─────────────────────── */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--ink);color:var(--page);padding:12px 18px;margin-bottom:var(--gutter);
}
.logo{font-family:'Barrio',cursive;font-size:clamp(30px,4.2vw,44px);line-height:.9;color:var(--lime)}
.mast-r{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.nav{display:flex;gap:9px;flex-wrap:wrap}
.nav a{font-family:'Bungee',sans-serif;font-size:11.5px;letter-spacing:.08em;
  color:var(--page);text-decoration:none;border-bottom:3px solid transparent;padding-bottom:2px}
.nav a:hover,.nav a:focus-visible{color:var(--lime);border-bottom-color:var(--lime)}
.masthead .tag{background:var(--page);color:var(--ink)}
.masthead .tag--chase{background:var(--chase);color:var(--ink)}
.tag--os{background:var(--lime);color:var(--ink);text-decoration:none}
.masthead .tag--os{background:var(--lime);color:var(--ink)}
.tag--os:hover,.tag--os:focus-visible{background:var(--gold);outline:0}
.tag--x{background:var(--ink);color:var(--page);text-decoration:none;
  border:2px solid var(--page)}
.masthead .tag--x{background:var(--ink);color:var(--page)}
.tag--x:hover,.tag--x:focus-visible{background:var(--chase);color:var(--ink);
  border-color:var(--chase);outline:0}

/* ══ INK STRIP: hero column left, story column right ═══════════════════ */
.strip{display:grid;grid-template-columns:420px 1fr;gap:var(--gutter)}
.hero-tall{position:relative;min-height:600px;display:flex;align-items:flex-end;justify-content:center}
.hero-tall .art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  cursor:pointer;background:var(--lime)}
.hero-tall .caption{position:relative;z-index:3;margin-bottom:18px}

.right{display:grid;gap:var(--gutter);grid-template-rows:auto auto auto;align-content:start}
.headline{padding:24px}
.headline h1{font-family:'Anton',sans-serif;font-size:clamp(32px,4.6vw,60px);line-height:.93;
  text-transform:uppercase;letter-spacing:-.015em}
.headline h1 em{font-style:normal;background:var(--lime);padding:0 8px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.headline p{margin-top:13px;font-size:15.5px;line-height:1.42;font-weight:500;max-width:660px}

/* 3 rarity beats — dot density rises with scarcity */
.beats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--gutter)}
.beat{padding:16px;display:flex;flex-direction:column;gap:8px;min-height:250px}
.beat b{font-family:'Bungee',sans-serif;font-size:18px;line-height:1.12}
.beat p{font-size:12.8px;line-height:1.4;font-weight:500;color:var(--dim)}
.beat .b-count{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.b-list{list-style:none;display:grid;gap:5px}
.b-list li{display:flex;justify-content:space-between;gap:9px;font-size:12.5px;font-weight:600;
  border-bottom:2px solid rgba(18,16,14,.16);padding-bottom:3px}
.b-list i{font-style:normal;font-weight:800}
.beat--chase{background:var(--lime)}
.beat--chase .b-count{color:var(--ink)}
.beat--chase p{color:#2c2f24}
.beat--short{background:var(--panel-2)}
.beat--common{background:var(--panel)}

/* CTA strip */
.cta{display:flex;gap:var(--gutter);align-items:stretch;flex-wrap:wrap}
.cta .btn{flex:1;min-width:230px;justify-content:center}
.cta .side{min-width:190px;padding:14px 17px;display:flex;flex-direction:column;justify-content:center}
.cta .side b{display:block;font-family:'Bungee',sans-serif;font-size:23px;line-height:1}
.cta .side span{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--chase);color:var(--ink);
  border:var(--rule) solid var(--ink);padding:15px 22px;
  font-family:'Bungee',sans-serif;font-size:16px;text-transform:uppercase}
.btn:hover,.btn:focus-visible{background:var(--gold);outline:0}
.btn[disabled]{cursor:not-allowed}

.stat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:var(--gutter)}
.stat>div{padding:14px;text-align:center}
.stat b{display:block;font-family:'Bungee',sans-serif;font-size:clamp(20px,2.4vw,28px);line-height:1}
.stat span{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.stat .lit{background:var(--lime)}
.stat .lit span{color:#2c2f24}

/* ── section heads ─────────────────────────────────────────────────────── */
section{margin-top:34px}
.sec-h{display:flex;align-items:center;gap:12px;margin-bottom:var(--gutter);flex-wrap:wrap}
.sec-h h2{font-family:'Anton',sans-serif;font-size:clamp(23px,3vw,34px);
  text-transform:uppercase;letter-spacing:-.005em}
.sec-h p{font-size:14px;color:var(--dim);font-weight:500;flex:1;min-width:220px}

/* ── #02 issue: 7 layers ───────────────────────────────────────────────── */
.layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--gutter)}
.layer{padding:14px;display:flex;flex-direction:column;gap:5px}
.layer b{font-family:'Bungee',sans-serif;font-size:17px}
.layer .l-c{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--chase)}
.layer .l-r{font-size:12.5px;color:var(--dim);font-weight:500;line-height:1.35}

/* ── #04 cast gallery ──────────────────────────────────────────────────── */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gutter)}
.ix{padding:0;position:relative;display:block;width:100%}
.ix img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--lime)}
.ix .lab{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--page);
  font-weight:800;font-size:11.5px;letter-spacing:.08em;padding:5px 9px}
.ix:hover,.ix:focus-visible{outline:0;border-color:var(--chase)}

/* ── #05 newsstand ─────────────────────────────────────────────────────── */
.stand{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gutter)}
.stand-in{padding:24px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.stand-in h3{font-family:'Anton',sans-serif;font-size:clamp(24px,3.2vw,36px);
  text-transform:uppercase;line-height:1}
.stand-in p{font-size:14.5px;color:var(--dim);font-weight:500;line-height:1.45}
.balloon p{color:var(--ink)}
.facts{display:grid;gap:9px}
.facts div{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;
  border-bottom:2px solid rgba(18,16,14,.18);padding-bottom:5px}
.facts i{font-style:normal;color:var(--chase)}
.err{padding:16px;color:var(--ink);background:var(--gold);font-weight:700}

/* ── record dialog ─────────────────────────────────────────────────────── */
.rec{position:fixed;inset:0;background:rgba(18,16,14,.80);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:22px}
.rec[hidden]{display:none}
.rec-in{background:var(--panel);border:6px solid var(--ink);max-width:760px;width:100%;
  max-height:90vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr}
.rec-art{background:var(--lime);display:flex;align-items:center}
.rec-art img{width:100%;aspect-ratio:1/1;object-fit:contain}
.rec-b{padding:18px;display:flex;flex-direction:column;gap:11px}
.rec-b h3{font-family:'Bungee',sans-serif;font-size:26px}
.rec-b .rno{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--chase)}
#recRows{list-style:none;display:grid;gap:6px}
#recRows li{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:baseline;
  font-size:13px;border-bottom:2px solid rgba(18,16,14,.16);padding-bottom:4px}
#recRows .r-c{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
#recRows .r-v{font-weight:700}
#recRows i{font-style:normal;font-weight:800}
#recRows li.chase i{color:var(--chase)}
#recRows li.short i{color:#8a6a00}
#recRows li.common i{color:#1d6f6a}
#recRows .ld{grid-template-columns:1fr;color:var(--dim)}
.rec-x{align-self:flex-start;background:var(--ink);color:var(--page);
  border:3px solid var(--ink);padding:7px 13px;font-weight:800;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase}
.rec-x:hover,.rec-x:focus-visible{background:var(--chase);color:var(--ink);outline:0}

footer{margin-top:38px;border-top:6px solid var(--ink);padding-top:14px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--dim);font-weight:600}
footer a{color:var(--ink);font-weight:800;text-decoration:none;
  border-bottom:3px solid var(--lime);padding-bottom:1px}
footer a:hover,footer a:focus-visible{border-bottom-color:var(--chase);outline:0}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .strip{grid-template-columns:340px 1fr}
}
@media (max-width:900px){
  .strip{grid-template-columns:1fr}
  .hero-tall{min-height:440px}
  .stand{grid-template-columns:1fr}
  .stat{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{padding:14px}
  :root{--gutter:11px}
  .hero-tall{min-height:360px}
  .headline{padding:17px}
  .rec-in{grid-template-columns:1fr}
  .cast{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
  .cta .btn{min-width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}