/* =====================================================================
   Circul8r · comic-book layer (every issue)
   Loaded after comic.css + member.css and before the month's theme file.
   Lettering, caption boxes, speech bubbles, ben-day shading and panel
   borders. Themes only change the colour variables below.
   THE LOGO NEVER CHANGES: it is locked in chrome.css, which loads last.
   ===================================================================== */
@font-face{font-family:"Comic Neue";src:url("../fonts/comic-neue-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("../fonts/comic-neue-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --font-letter:"Comic Neue","Comic Sans MS",ui-rounded,system-ui,sans-serif;  /* comic lettering for captions, bubbles and labels */
  --cap:#f5c542;          /* caption-box fill: yellow in Issue #1, theme files override it */
  --cap-ink:#0e1b3d;
  --bubble:#ffffff;
  --dots:rgba(14,27,61,.13);
  --brand-blue:#274490; --brand-red:#e31b23; --brand-navy:#0b1533;   /* logo colours, fixed for every issue */
}

/* ---------- lettering ---------- */
.kicker,.shead .note,.note,.cameo figcaption,.intro,.alb-meta,.wk-when,.cast-debut,.fig-note,.small{font-family:var(--font-letter)!important;font-weight:700;letter-spacing:.02em}
.intro{font-size:17px;line-height:1.5}

/* ---------- section titles become caption boxes ---------- */
.shead{border-bottom:0!important;padding-bottom:0;align-items:flex-end}
.shead h2{display:inline-flex!important;background:var(--cap);color:var(--cap-ink)!important;text-shadow:none!important;
  border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:.18em .5em .12em;transform:rotate(-1.2deg);transform-origin:left bottom}
.shead h2 .sq{display:none}
.shead .note{background:#fff;border:2px solid var(--ink);padding:3px 8px;text-transform:uppercase;font-size:12px!important}

/* ---------- page heads: big outlined lettering, lede in a narration box ---------- */
.phead h1,.sp-tag{text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink),6px 6px 0 rgba(0,0,0,.25)!important}
.phead .lede{display:inline-block;border:3px solid var(--ink)!important;border-left-width:3px!important;background:var(--cap);color:var(--cap-ink)!important;
  font-family:var(--font-letter)!important;font-style:normal!important;font-weight:700;padding:.55em .8em;box-shadow:5px 5px 0 var(--ink);line-height:1.45}
.phead .kicker{color:#fff}

/* ---------- panels: thick ink, hard shadow, ben-day dots in the corner ---------- */
.rv,.alb,.wk,.sv,.story,.card,.cast-card,.mb-card,.hot,.gl,.ls-card{
  border:3px solid var(--ink)!important;
  background-image:linear-gradient(135deg,#fff 0 74%,transparent 74%),radial-gradient(circle,var(--dots) 1.1px,transparent 1.6px)!important;
  background-size:auto,6px 6px!important;background-color:#fff!important}

/* ---------- 808 insight + pull quotes become speech bubbles ---------- */
.alb-why,.sv-why,.n-why,.why,.rv blockquote{position:relative;background:var(--bubble)!important;color:var(--ink);border:3px solid var(--ink)!important;border-radius:18px;
  padding:10px 14px!important;margin-bottom:14px!important;box-shadow:4px 4px 0 var(--ink);font-family:var(--font-letter);font-weight:700;font-style:normal!important;line-height:1.45}
.alb-why::after,.sv-why::after,.n-why::after,.why::after,.rv blockquote::after{content:"";position:absolute;left:26px;bottom:-14px;width:18px;height:14px;background:var(--bubble);
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);clip-path:polygon(0 0,100% 0,0 100%);transform:skewX(-25deg)}
.alb-why .n-k,.sv-why .n-k,.n-why .n-k,.why b{display:inline-block;background:var(--cap);color:var(--cap-ink)!important;border:2px solid var(--ink);padding:2px 6px;margin:0 0 6px;border-radius:0}

/* ---------- buttons: comic POW ---------- */
.btn,.alb-btn,.cm-btn{transition:transform .08s steps(2)}
.btn:hover,.alb-btn:hover,.cm-btn:hover{transform:translate(-2px,-2px) rotate(-1deg)}
.btn:active,.alb-btn:active{transform:translate(2px,2px)}

/* ---------- tags + rank chips: stamped ---------- */
.tag{border:2px solid var(--ink)!important;box-shadow:2px 2px 0 var(--ink);font-family:var(--font-letter)!important;font-weight:700;text-transform:uppercase}

@media (max-width:640px){.shead h2{transform:rotate(-.6deg)}.phead .lede{display:block}}

/* ---------- THE LOGO: locked in chrome.css (808 press-kit colours, same every issue) ---------- */