:root{
  --accent:#00d9e0; --accent-dim:#00787f; --ground:#0a0d12; --paper:#f5f7fa;
  --muted:#7c8794; --line:16px; --gap:22px; --bar:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground)}
body{
  background:var(--ground); color:var(--paper);
  font-family:"Segoe UI",system-ui,sans-serif; line-height:1.5;
  padding:0; min-height:100vh; position:relative;
}
/* The brand bar. In normal flow, so it scrolls with the page rather than pinning
   itself to the window. It lives on ::before because a pseudo-element has to come
   BEFORE the content to sit above it; ::after would have put the bar at the bottom.
   Full bleed, which is why the body carries no padding. Thickness: --bar. */
body::before{
  content:""; display:block; height:var(--bar);
  background:var(--accent);
}
/* Halftone texture, Snap's comic-print grain, very low so text stays readable. */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.28;
  background-image:radial-gradient(var(--accent-dim) 1px, transparent 1px);
  background-size:5px 5px;
}
main,header,footer{position:relative; z-index:1}
.wrap{max-width:1500px;margin:0 auto;padding:26px 20px 60px}

h1,h2,h3,.display{
  font-family:Impact,"Haettenschweiler","Arial Black",sans-serif;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.05; font-weight:400;
}
a{color:inherit;text-decoration:none}

/* A panel is the basic Snap unit: hard corners, thick keyline, slight tilt. */
.panel{
  background:#11151c; border:3px solid #000; box-shadow:0 0 0 2px var(--accent-dim);
  position:relative;
}
.panel:hover{box-shadow:0 0 0 3px var(--accent); z-index:2}
.tilt{transform:rotate(-.7deg)}
.tilt:nth-child(even){transform:rotate(.7deg)}

.thumb{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.kicker{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  font-weight:700;
}
.muted{color:var(--muted)}
.tag{
  display:inline-block;padding:3px 9px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;border:2px solid var(--accent);
  color:var(--accent);margin:0 6px 6px 0;
}
.btn{
  display:inline-block;padding:12px 22px;border:3px solid var(--accent);
  color:var(--ground);background:var(--accent);font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;font-size:13px;
}
.btn.ghost{background:transparent;color:var(--accent)}
.tag.active{background:var(--accent);color:var(--ground)}
.lede{font-size:clamp(22px,2.6vw,34px);margin-top:16px;font-weight:600;line-height:1.25}
.lede em{color:var(--accent);font-style:normal}
.sub{font-size:17px;color:#b9c3cf;margin-top:14px;line-height:1.6}
.benefits{list-style:none;margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px 34px}
.benefits li{padding:9px 0;border-bottom:1px solid #1c222b;font-size:14px;color:#c9d2dc}
/* A real bullet, written as a CSS escape so no encoding round-trip can touch it.
   This rule previously held a stray control byte plus the text "B8" instead of
   the escape, so browsers dropped the byte and printed literal letters. */
.benefits li::before{content:"\2022";color:var(--accent);margin-right:10px;font-weight:700}
.benefits b{color:var(--paper);font-weight:700}
.sitefoot{margin-top:48px;padding-top:24px;border-top:3px solid var(--accent);display:grid;
  grid-template-columns:2fr 1fr 1fr;gap:30px;font-size:13px;color:var(--muted);line-height:1.7}
.sitefoot h4{font-family:Impact,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-size:15px;color:var(--accent);margin-bottom:8px;font-weight:400}
.sitefoot a{display:block;padding:2px 0}
.sitefoot a:hover{color:var(--accent)}
.legal{grid-column:1/-1;border-top:1px solid #1c222b;margin-top:20px;padding-top:14px;font-size:11.5px;color:#5f6b78}
@media(max-width:980px){.sitefoot{grid-template-columns:1fr}}
.rule{height:4px;background:var(--accent);margin:26px 0}
.back{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}

/* ---- index 1: two-up card grid ---- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}

/* ---- index 2: hero + rail ---- */
.hero-split{display:grid;grid-template-columns:2fr 1fr;gap:26px;align-items:start}
.rail{display:flex;flex-direction:column;gap:10px;max-height:78vh;overflow:auto}
.rail .panel{display:grid;grid-template-columns:110px 1fr;gap:10px}
.rail .thumb{height:64px;aspect-ratio:auto}

/* ---- index 3: stacked comic pages ---- */
.stack{display:flex;flex-direction:column;gap:0}
.stack .panel{display:grid;grid-template-columns:1fr 1fr;min-height:230px}
.stack .panel:nth-child(even){grid-template-columns:1fr 1fr}

/* ---- index 4: dense mosaic ---- */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mosaic .panel:nth-child(1),.mosaic .panel:nth-child(8){grid-column:span 2}

/* ---- index 5: feed ---- */
.feed .panel{display:grid;grid-template-columns:420px 1fr;gap:24px;margin-bottom:26px;padding:0}
.feed .body{padding:24px 24px 24px 0}

/* ---- detail ---- */
.detail-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:start}
.detail-body{display:grid;grid-template-columns:2fr 1fr;gap:26px;margin-top:26px}
.card-strip{display:flex;gap:8px;flex-wrap:wrap}
.card-strip img{width:132px;border:2px solid #000;box-shadow:0 0 0 1px var(--accent-dim);display:block}
.song{border-left:4px solid var(--accent);padding:12px 0 12px 16px;margin-bottom:18px}
.song audio{width:100%;margin-top:10px;filter:invert(.9) hue-rotate(150deg)}
.lyrics{white-space:pre-wrap;font-size:14px;color:#c9d2dc;font-family:ui-monospace,Consolas,monospace;
  max-height:220px;overflow:auto;border-top:1px solid #232a34;padding-top:10px;margin-top:10px}
.chapters{columns:2;column-gap:26px;font-family:ui-monospace,Consolas,monospace;font-size:14px}
.chapters div{break-inside:avoid;padding:3px 0;border-bottom:1px solid #1c222b}
.statline{display:flex;gap:34px;flex-wrap:wrap;margin:18px 0}
.statline .n{font-family:Impact,sans-serif;font-size:44px;line-height:1;color:var(--accent)}
.statline .l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

footer{margin-top:40px;padding-top:20px;border-top:2px solid #1c222b;font-size:12px;color:var(--muted)}

@media(max-width:980px){
  .grid2,.grid3,.grid5,.mosaic,.hero-split,.detail-hero,.detail-body,.stack .panel,.feed .panel{grid-template-columns:1fr}
  .chapters{columns:1}
}
/* ---- inline links ----------------------------------------------------------
   The reset at the top makes every <a> look like plain text, which is right for
   nav items and card images and wrong for a link inside a sentence. */
p a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px}
p a:hover{color:var(--paper)}

/* ---- the run ---------------------------------------------------------------
   commentary is one text node with newlines; the build wraps it in <p>. */
.prose{font-size:15px;line-height:1.65;color:#c9d2dc;margin-top:10px}
.prose p{margin:0 0 1em}
.prose p:last-child{margin-bottom:0}

/* ---- lyrics ----------------------------------------------------------------
   Collapsed by default. <details> needs no JavaScript, and the text stays in the
   document so it is still indexable. */
.lyric-wrap{margin-top:12px;border-top:1px solid #1c222b;padding-top:10px}
.lyric-wrap>summary{cursor:pointer;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);list-style:none;padding:4px 0}
.lyric-wrap>summary::-webkit-details-marker{display:none}
.lyric-wrap>summary::before{content:"+ ";font-weight:700}
.lyric-wrap[open]>summary::before{content:"- "}
.lyric-wrap[open]>summary{margin-bottom:8px}
.lyric-wrap .lyrics{max-height:420px;overflow:auto}

/* ---- card hover preview ----------------------------------------------------
   The larger art is the SAME 1024x1024 webp already loaded for the strip, so
   nothing extra is downloaded. Two classes on the art rule are REQUIRED: the tip
   lives inside .card-strip, so ".card-strip img" (0,1,1) would otherwise win and
   force 132px and a border back onto the popup. */
.card-link{position:relative;display:block}
.card-tip{display:none}
@media (hover:hover) and (pointer:fine){
  .card-link:hover .card-tip,
  .card-link:focus-visible .card-tip{display:block}
  .card-strip .card-link:hover{z-index:40}
  .card-tip{
    position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
    z-index:40; width:min(360px,88vw); padding:12px; background:var(--ground);
    border:2px solid var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.75);
    pointer-events:none; text-align:left;
  }
  .card-strip .card-tip-art{width:100%;height:auto;display:block;
    border:0;box-shadow:none}
  .card-tip-body{display:block;padding-top:8px}
  .card-tip-body b{display:block;font-size:15px;color:var(--paper)}
  .card-tip-stats{display:block;font-size:12px;color:var(--accent);
    letter-spacing:.04em;text-transform:uppercase;margin:2px 0 6px}
  .card-tip-text{display:block;font-size:13px;line-height:1.5;color:#c9d2dc}
}
/* A card link is a block so wrapping the image does not change the flex layout. */
.card-strip a.card-link{display:block}
.card-strip a.card-link:hover img{box-shadow:0 0 0 2px var(--accent)}

/* ---- deck page panels ------------------------------------------------------ */
.deck-panel>.body{padding:22px 26px}

/* ---- the session date ------------------------------------------------------
   A win rate belongs to a version of the game, and Snap patches move cards. */
.played{margin-top:14px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted)}
.played::before{content:"• ";color:var(--accent)}
.played-index{margin-top:6px;font-size:12px;color:var(--muted);letter-spacing:.03em}

/* ---- the site-wide header -------------------------------------------------- */
.site-head{margin-bottom:8px}
/* The wordmark links home but must not LOOK like a link. The global a reset
   already does this; stating it here means a future change to that reset
   cannot quietly turn the channel name into clickable-looking text. */
.site-head a{color:inherit;text-decoration:none}
.site-head h1{font-size:clamp(56px,7.5vw,96px);line-height:.88;margin:0}
.site-head .lede{margin-top:10px}

/* The marker on an off-site link. Small and quiet: it is a warning, not a
   decoration, and the same warning is in the link's aria-label for anyone who
   cannot see it. */
.ext{font-size:.8em;line-height:1;opacity:.75;text-decoration:none;
  display:inline-block;transform:translateY(-.12em)}
a:hover .ext{opacity:1}