/* =====================================================================
   Circul8r · site chrome (loaded last, every issue)
   1. The logo lockup: fixed for every issue, in The 808's press-kit colours
      (ink #12141c, paper #efebe2, signal #ff5a2e, steel #8890a0). Flat, no drop shadow.
   2. Header menu, ticker and footer take the SAME colours as the issue's page banners,
      so the whole page reads as one issue. Each issue only sets the four --ch-* values.
   ===================================================================== */
:root{
  --808-ink:#12141c; --808-paper:#efebe2; --808-signal:#ff5a2e; --808-steel:#8890a0;
  /* Issue #1 · October · Halloween: banner blue, navy, yellow, red */
  --ch-bg:#274490; --ch-deep:#0b1533; --ch-acc:#f5c542; --ch-line:#e31b23;
}
body[data-theme="fall"]{   /* Issue #2 · November · maple fall: plum, dusk, gold, maple orange */
  --ch-bg:#4a2340; --ch-deep:#2a1640; --ch-acc:#fcbf49; --ch-line:#f77f00}
body[data-theme="winter"]{ /* Issue #3 · December · winter: night blue, deep navy, mint, snow */
  --ch-bg:#123a6b; --ch-deep:#0a1838; --ch-acc:#2fe0a0; --ch-line:#eef5ff}

/* ---------- 1. THE LOGO (never changes) ---------- */
.logo{display:inline-flex!important;align-items:stretch;gap:0!important;padding:0;background:var(--808-ink);border:2px solid var(--808-ink);
  box-shadow:3px 3px 0 var(--808-signal);text-decoration:none;flex:none}
.logo .mark{width:40px;height:40px;display:block;flex:none;image-rendering:pixelated}
.logo span{display:flex;align-items:center;padding:0 10px 0 10px;font:400 30px/1 var(--font-display)!important;letter-spacing:.05em;
  color:var(--808-paper)!important;text-shadow:none!important}
.logo span b{font-weight:400;color:var(--808-signal)}
.logo .b8{display:inline-block;width:.9em;height:.9em;margin:0 .04em;vertical-align:-.1em;line-height:0}
.logo .b8 .ball8{display:block;width:100%;height:100%;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.logo:hover .b8 .ball8{transform:rotate(360deg)}
.logo small{display:flex!important;align-items:center;margin:0;padding:0 10px!important;border:0!important;border-left:2px solid #2c303c!important;
  background:transparent!important;color:var(--808-steel)!important;font:400 8px/1.4 var(--font-px)!important;letter-spacing:.02em!important;text-shadow:none!important}
.logo:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--808-signal)}
@media (max-width:1380px){.logo small{display:none!important}}
@media (max-width:380px){.logo span{font-size:24px!important;padding:0 8px}.logo .mark{width:34px;height:34px}}

/* splash wordmark follows the same rules: paper letters, ink shadow, signal 8 */
.sp-word .sp-l{color:var(--808-paper)!important;text-shadow:.05em .05em 0 var(--808-ink)!important}
/* the 8 is an eight ball with a sideways 8 (infinity) on it */
.sp-8{background:none!important;box-shadow:none!important;border-radius:50%!important;width:.86em!important;height:.86em!important;filter:drop-shadow(.05em .05em 0 var(--808-ink))}
.sp-8 .ball8{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){.sp-8{animation:spDrop .6s calc(.35s + var(--i) * .08s) cubic-bezier(.2,1.4,.4,1) both,c8roll .9s 1.25s cubic-bezier(.3,1.2,.5,1) both!important}}
@keyframes c8roll{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ---------- 2. header menu = banner colours ---------- */
.site-top{background:var(--ch-bg)!important;border-bottom:4px solid var(--808-ink)!important;box-shadow:0 4px 0 var(--ch-line)!important}
nav.links::before{background:rgba(255,255,255,.28)!important;height:4px!important;margin-top:-2px!important;border-radius:0!important}
.line-tag{background:var(--808-ink)!important;color:var(--ch-acc)!important;border-radius:0!important}
nav.links a{color:#fff!important;background:transparent!important}
nav.links a i{background:var(--ch-bg)!important;border-color:#fff!important;border-radius:0!important}
nav.links a:hover{color:var(--ch-acc)!important}
nav.links a:hover i{background:var(--ch-acc)!important}
nav.links a[aria-current]{color:var(--ch-acc)!important}
nav.links a[aria-current] i{background:var(--ch-acc)!important;border-color:var(--ch-acc)!important;box-shadow:0 0 0 2px var(--ch-bg),0 0 0 4px var(--ch-acc)!important}
.nav-toggle{background:var(--ch-bg)!important;border:2px solid #fff!important;border-radius:0!important}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{background:#fff!important;border-radius:0!important}
.nav-toggle[aria-expanded="true"]{background:var(--ch-acc)!important}
.nav-toggle[aria-expanded="true"] span,.nav-toggle[aria-expanded="true"] span::before,.nav-toggle[aria-expanded="true"] span::after{background:var(--808-ink)!important}
@media (max-width:900px){nav.links{background:var(--ch-bg)!important;border-bottom:4px solid var(--ch-line)!important}}
.mb-btn{background:var(--ch-acc)!important;color:var(--808-ink)!important;border:2px solid var(--808-ink)!important;box-shadow:3px 3px 0 var(--808-ink)!important}
.mb-btn::before{background:var(--ch-line)!important}
.mb-btn:hover{background:#fff!important}

/* ticker + footer: the issue's deep tone, accent labels */
.tick{background:var(--ch-deep)!important;border-bottom:4px solid var(--ch-line)!important}
.tick li::after{background:var(--ch-acc)!important}
.tick a:hover{color:var(--ch-acc)!important}
footer{background:var(--ch-deep)!important}
footer h2.fh,footer h4{color:var(--ch-acc)!important}
footer a:hover{color:var(--ch-acc)!important}
.pv-ribbon{background:var(--ch-acc)!important;color:var(--808-ink)!important}
.tick__tag{background:var(--ch-line)!important;color:var(--808-ink)!important}
.tick__tag i{background:var(--808-ink)!important}
body[data-theme="winter"] .tick__tag{background:var(--ch-acc)!important}
.sp-line{background:var(--ch-deep)!important}
/* nine sections: keep the desktop menu on one line down to the mobile breakpoint */
nav.links a{white-space:nowrap}
@media (max-width:1140px) and (min-width:901px){nav.links a{font-size:14px!important;padding:6px 5px!important;margin:0 2px!important;gap:5px!important}nav.links a i{width:10px!important;height:10px!important;border-width:2px!important}.mb-btn{padding:6px 9px!important}}
@media (max-width:1020px) and (min-width:901px){nav.links a i{display:none!important}nav.links::before{display:none}.logo span{font-size:24px!important}}

/* ---------- 8-bit cameos on the homepage boxes (What's hot, The line at a glance) ---------- */
.ic8{display:block;width:100%;height:100%;image-rendering:pixelated}
.gl{grid-template-columns:auto 1fr!important}
.gl-ic{grid-row:1/3;width:60px;height:60px;padding:6px;background:var(--ch-bg);border:3px solid var(--808-ink);box-shadow:3px 3px 0 var(--c,var(--ch-line));box-sizing:border-box}
.gl:hover .gl-ic .ic8{animation:ic8hop .5s steps(2) 2}
.gl-cam{grid-column:1/-1;font:12px/1.45 var(--font-mono);color:var(--steel,#5d6473);border-top:2px dashed rgba(18,20,28,.2);padding-top:6px;margin-top:2px}
.gl-cam b{display:inline-block;margin-right:6px;padding:1px 5px;font:400 8px/1.6 var(--font-px);background:var(--ch-bg);color:#fff;vertical-align:1px}
.hot{position:relative}
.hot-ic{position:absolute;right:10px;bottom:10px;width:40px;height:40px;padding:4px;background:var(--ch-bg);border:2px solid var(--808-ink);box-sizing:border-box}
.hot .hot-body{padding-right:44px}
.hot:hover .hot-ic .ic8{animation:ic8hop .5s steps(2) 2}
@keyframes ic8hop{50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.gl:hover .gl-ic .ic8,.hot:hover .hot-ic .ic8{animation:none}}
/* the #1 hot card is the featured one: keep it dark in the issue's colour (the comic panel layer had turned it white, hiding the white text) */
.hot:first-child{background:var(--ch-deep)!important;background-image:radial-gradient(circle,rgba(255,255,255,.08) 1.1px,transparent 1.6px)!important;background-size:7px 7px!important;color:#fff}
.hot:first-child .hot-n{color:var(--ch-acc)!important;-webkit-text-stroke:0}
.hot:first-child .hot-ic{width:64px;height:64px;padding:6px;border-color:#fff}
.hot:first-child .hot-body{padding-right:72px}