/* SUMMIT COMICS — Design System
   Pulp/vintage DNA expressed through a clean technical sans system.
   Bright/punchy CMYK-derived palette (the Summit logo tee colors literally are CMYK).

   FONTS: Self-hosted .woff2 files are declared below via @font-face.
   Until those files are placed in assets/fonts/, the theme falls back to
   the Google Fonts import below. Run bin/download-fonts.sh to self-host.
*/

/* Runtime Google Fonts fallback — remove once fonts/ directory is populated */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;800;900&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Color: CMYK-derived comic-book palette ───────────────── */
  --ink:        #0a0a0d;     /* near-black ink */
  --ink-2:      #14141a;
  --paper:      #f6f1e6;     /* newsprint warm white */
  --paper-2:    #efe7d3;
  --pulp:       #e8dcc0;     /* aged paper */

  --cyan:       #00b3e3;
  --magenta:    #ec1c8c;
  --yellow:     #ffd400;
  --red:        #e21d2a;     /* spot red */
  --blue:       #2a3eb1;     /* deep flat blue */

  --rule:       rgba(10,10,13,.14);
  --rule-strong:rgba(10,10,13,.85);

  /* ── Type ─────────────────────────────────────────────────── */
  --f-display:  "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --f-text:     "Inter", "Helvetica Neue", system-ui, sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ── Geometry ─────────────────────────────────────────────── */
  --gutter:     24px;
  --maxw:       1320px;

  /* tweakable */
  --accent:     #00b3e3;     /* default accent: cyan */
  --badge-bg:   #00b3e3;       /* cart count badge — never overridden by dark sections */
  --badge-fg:   #0a0a0d;
  --bg:         var(--paper);
  --fg:         var(--ink);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Halftone & paper texture utilities ───────────────────── */
.halftone {
  background-image:
    radial-gradient(currentColor 22%, transparent 23%);
  background-size: 6px 6px;
  background-position: 0 0;
  opacity: .9;
}
.halftone-fine {
  background-image: radial-gradient(currentColor 18%, transparent 19%);
  background-size: 4px 4px;
}
.halftone-coarse {
  background-image: radial-gradient(currentColor 28%, transparent 29%);
  background-size: 10px 10px;
}
.paper-noise::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(0,0,0,.04) 1px, transparent 1.5px),
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1.5px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: .5;
}

/* CMYK registration mark — draws the classic print-shop crosshair  */
.regmark {
  width: 16px; height: 16px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.regmark::before, .regmark::after {
  content: ""; position: absolute; background: currentColor;
}
.regmark::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.regmark::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.regmark > span {
  position: absolute; inset: 4px;
  border: 1px solid currentColor; border-radius: 50%;
}

/* ── Typography ───────────────────────────────────────────── */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.display {
  font-family: var(--f-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: .92;
  text-transform: uppercase;
  font-stretch: 125%;
}
.h1 { font-size: clamp(56px, 7vw, 124px); }
.h2 { font-size: clamp(40px, 4.5vw, 72px); }
.h3 { font-size: clamp(28px, 2.6vw, 44px); }
.kicker {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-stretch: 110%;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform .12s ease, background .12s, color .12s, box-shadow .12s;
  position: relative;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(0,0); box-shadow: 0 0 0 var(--ink); }
.btn-paper {
  background: var(--paper);
  color: var(--ink);
}
.btn-paper:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn-accent {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-sm { padding: 8px 12px; font-size: 11px; }

/* ── Inputs ───────────────────────────────────────────────── */
.input {
  font-family: var(--f-mono);
  font-size: 13px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 12px;
  width: 100%;
  outline: none;
  transition: box-shadow .12s;
}
.input:focus { box-shadow: 3px 3px 0 var(--accent); }

/* ── Tag / chip ───────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.chip.is-active { background: var(--ink); color: var(--paper); }
.chip.is-cyan { background: var(--cyan); color: var(--ink); border-color: var(--ink); }
.chip.is-magenta { background: var(--magenta); color: var(--paper); border-color: var(--ink); }
.chip.is-yellow { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.chip.is-red { background: var(--red); color: var(--paper); border-color: var(--ink); }

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  position: relative;
}

/* ── Cover frame: the look of an actual comic in print ────── */
.cover-frame {
  background: var(--ink);
  border: 1.5px solid var(--ink);
  aspect-ratio: 660/1000;
  position: relative;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .18s, box-shadow .18s;
}
.cover-frame:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }

/* ── Page-level frame: thick rule like a comic page ──────── */
.bordered { border: 1.5px solid var(--ink); }
.bordered-2 { border: 2.5px solid var(--ink); }

/* ── Marquee ──────────────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover { animation-play-state: paused; }

/* ── Speech bubble (small accent) ─────────────────────────── */
.bubble {
  display: inline-block;
  padding: 8px 14px 9px;
  border: 1.5px solid var(--ink);
  background: var(--yellow);
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .04em;
  position: relative;
  transform: rotate(-3deg);
}
.bubble::after {
  content: "";
  position: absolute;
  left: 22px; bottom: -10px;
  width: 14px; height: 14px;
  background: var(--yellow);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
}

/* ── Burst (impact star) ──────────────────────────────────── */
.burst {
  width: 96px; height: 96px;
  background: var(--yellow);
  display: inline-flex;
  align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  clip-path: polygon(
    50% 0%,  61% 12%,  76% 5%,  78% 22%,
    95% 22%, 87% 38%,  100% 50%, 87% 62%,
    95% 78%, 78% 78%,  76% 95%,  61% 88%,
    50% 100%,39% 88%,  24% 95%,  22% 78%,
    5%  78%, 13% 62%,  0%  50%,  13% 38%,
    5%  22%, 22% 22%,  24% 5%,   39% 12%
  );
}

/* ── Header / Nav ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1.5px solid rgba(255,255,255,.12);
}
/* site-header halftone removed — plain black */
.site-header .strip {
  background: var(--accent);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 0;
  text-align: center;
  border-bottom: 1.5px solid var(--ink);
}
.site-header .nav {
  display: flex;
  align-items: stretch;
  height: 56px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  gap: 0;
}
.site-header .logo {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 24px;
  border-right: 1px solid rgba(255,255,255,.16);
  margin-right: 8px;
  cursor: pointer;
}
.site-header .nav-links {
  display: flex; gap: 0;
  flex: 1;
}
.site-header .nav-links a {
  display: flex; align-items: center;
  padding: 0 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  transition: color .12s, background .12s;
  cursor: pointer;
}
.site-header .nav-links a:hover { color: var(--paper); background: rgba(255,255,255,.05); }
.site-header .nav-links a.is-active { color: var(--paper); background: var(--accent); }
.site-header .nav-right { display: flex; align-items: center; gap: 4px; }
.site-header .icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--paper);
  cursor: pointer; border-radius: 0;
  position: relative;
  transition: background .12s;
}
.site-header .icon-btn:hover { background: rgba(255,255,255,.08); }
.cart-count {
  position: absolute; top: 6px; right: 4px;
  background: var(--badge-bg, #00b3e3);
  color: var(--badge-fg, #0a0a0d);
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer .footer-inner { max-width: var(--maxw); margin: 0 auto; }

/* ── Utility ─────────────────────────────────────────────── */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.uppercase { text-transform: uppercase; }
.mono { font-family: var(--f-mono); }
.disp { font-family: var(--f-display); }
.center { text-align: center; }

/* ── Layout primitives ───────────────────────────────────── */
.page-section { padding: 56px 0; border-bottom: 1.5px solid var(--ink); }
.page-section.tight { padding: 36px 0; }
.page-section.is-ink { background: var(--ink); color: var(--paper); }
.page-section.is-ink .bordered { border-color: var(--paper); }

/* ── CMYK Plates ──────────────────────────────────────────────────────────────
   Default (no data-theme): black & white base, cyan accent.
   C / M / Y plates swap only --accent. Base paper/ink stays unchanged.
   On dark sections (header, hero, footer) accent flips to paper for contrast.
*/

/* C plate — cyan accent */
[data-theme="cyan"] {
  --accent:    #00b3e3;
  --badge-bg:  #00b3e3;
  --badge-fg:  #0a0a0d;
}

/* M plate — magenta accent */
[data-theme="magenta"] {
  --accent:    #ec1c8c;
  --badge-bg:  #ec1c8c;
  --badge-fg:  #fff;
}

/* Y plate — yellow accent */
[data-theme="yellow"] {
  --accent:    #ffd400;
  --badge-bg:  #ffd400;
  --badge-fg:  #0a0a0d;
}

/* On dark sections (default plate): flip accent to paper so it reads on ink bg */
.is-ink,
.page-hero,
.site-header,
.site-footer,
[style*="background:var(--ink)"],
[style*="background: var(--ink)"] {
  --accent: var(--paper);
}

/* C/M/Y: keep their coloured accent on dark sections too */
[data-theme="cyan"]    .is-ink,
[data-theme="cyan"]    .page-hero,
[data-theme="cyan"]    .site-header,
[data-theme="cyan"]    .site-footer    { --accent: #00b3e3; }

[data-theme="magenta"] .is-ink,
[data-theme="magenta"] .page-hero,
[data-theme="magenta"] .site-header,
[data-theme="magenta"] .site-footer    { --accent: #ec1c8c; }

[data-theme="yellow"]  .is-ink,
[data-theme="yellow"]  .page-hero,
[data-theme="yellow"]  .site-header,
[data-theme="yellow"]  .site-footer    { --accent: #ffd400; }

/* Button colours per plate */
.btn-accent                            { background: var(--accent); color: var(--paper); }
[data-theme="cyan"]    .btn-accent     { color: var(--ink); }
[data-theme="magenta"] .btn-accent     { color: #fff; }
[data-theme="yellow"]  .btn-accent     { color: var(--ink); }

/* ── Yellow plate: ink treatment on ALL accent-coloured elements ──────────────
   Yellow (#ffd400) has very low contrast on paper (#f6f1e6).
   Every element using var(--accent) as a text colour gets an ink text-shadow.
   Every element using var(--accent) as a background gets an ink border.
*/

/* All accent-coloured text — covers kickers, eyebrows, breadcrumbs, labels,
   nav active states, inline style="color:var(--accent)" elements, etc. */
[data-theme="yellow"] .kicker,
[data-theme="yellow"] .eyebrow,
[data-theme="yellow"] .product-info__eyebrow,
[data-theme="yellow"] .section-head .kicker,
[data-theme="yellow"] .issue-card__meta .kicker,
[data-theme="yellow"] .news-card__kicker,
[data-theme="yellow"] .creator-card__role,
[data-theme="yellow"] .product-breadcrumb span:last-child,
[data-theme="yellow"] .page-hero .kicker,
[data-theme="yellow"] .site-nav .is-plus,
[data-theme="yellow"] [class*="kicker"],
[data-theme="yellow"] [style*="color:var(--accent)"],
[data-theme="yellow"] [style*="color: var(--accent)"] {
  text-shadow:
    1px  1px 0 rgba(10,10,13,.5),
   -1px -1px 0 rgba(10,10,13,.3),
    1px -1px 0 rgba(10,10,13,.3),
   -1px  1px 0 rgba(10,10,13,.3);
  -webkit-text-stroke: 0.6px rgba(10,10,13,.4);
}

/* Accent-background elements: ink border + offset shadow */
[data-theme="yellow"] .btn-accent,
[data-theme="yellow"] .site-header .nav-links a.is-active,
[data-theme="yellow"] .mobile-nav__list a.is-active,
[data-theme="yellow"] [class*="badge"],
[data-theme="yellow"] .plate-badge {
  border: 2px solid var(--ink) !important;
  box-shadow: 3px 3px 0 rgba(10,10,13,.7);
}

/* btn-accent text stays readable */
[data-theme="yellow"] .btn-accent {
  color: var(--ink);
  text-shadow: none;
  -webkit-text-stroke: 0;
}

/* Plate label badge */
.plate-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .18em;
  padding: 3px 8px;
  border: 1px solid currentColor;
}

/* Comic-panel grid ────────────────────────────────────── */
.panel-grid {
  display: grid;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  gap: 1.5px;
}
.panel-grid > * {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   SUMMIT COMICS — WordPress Theme Additions
   Extending design_source/styles/system.css with:
   · Responsive layout
   · Site header / footer
   · Issue cards, news cards, creator cards
   · Cart drawer
   · Plate picker
   · Store archive + sidebar
   · Single issue / product
   · Homepage sections
   · Reading order
   · Summit+ pages
   · Mobile nav
═══════════════════════════════════════════════════════════════ */

/* ── Font faces (self-hosted — add .woff2 files to assets/fonts/) ─── */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

/* ── CMYK strip (top decorative bar) ─────────────────────── */
.cmyk-strip {
  display: flex;
  height: 5px;
}
.cmyk-strip span {
  flex: 1;
}

/* ── Site header ──────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.site-header__meta {
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.site-header__main {
  display: flex;
  align-items: center;
  height: 60px;
  gap: 0;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 24px;
  margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,.12);
  color: var(--paper);
  text-decoration: none;
}
.site-logo__lockup {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.site-logo__top {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--paper);
}
.site-logo__bot {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-logo__lockup--mini .site-logo__bot { font-size: 14px; }
.site-logo__lockup--mini .site-logo__top { font-size: 7px; }

.site-nav { flex: 1; }
.site-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 60px;
}
/* Style both hard-coded (.site-nav__item) and WP assigned menu items (li.menu-item) */
.site-nav__item a,
.site-nav__list li a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  transition: color .12s, background .12s;
  text-decoration: none;
}
.site-nav__item a:hover,
.site-nav__list li a:hover,
.site-nav__item.current-menu-item > a,
.site-nav__list li.current-menu-item > a,
.site-nav__item.current-page-ancestor > a,
.site-nav__list li.current-page-ancestor > a,
.site-nav__list li.current_page_item > a,
.site-nav__list li.current_page_ancestor > a {
  color: var(--paper);
  background: rgba(255,255,255,.06);
}
.site-nav__item.is-plus a,
.site-nav__list li.is-plus a {
  color: var(--yellow);
}
/* Remove WP's default list styling on nav menu output */
.site-nav__list li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  position: relative;
}
/* ── Desktop dropdown ───────────────────────────────── */
.site-nav__list li ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.12);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  display: none;
  flex-direction: column;
  z-index: 200;
}
.site-nav__list li:hover > ul,
.site-nav__list li:focus-within > ul {
  display: flex;
}
.site-nav__list li ul li {
  display: block;
  position: static;
  width: 100%;
}
.site-nav__list li ul li a {
  height: auto;
  padding: 10px 16px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-nav__list li ul li:last-child a {
  border-bottom: none;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.site-header__discord {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  margin-right: 6px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--accent);
  color: var(--ink);
  border: 1.5px solid var(--accent);
  transition: opacity .12s, transform .12s;
  white-space: nowrap;
}
.site-header__discord:hover { opacity: .85; transform: translate(-1px,-1px); }
.site-header__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--paper);
  cursor: pointer;
  position: relative;
  transition: background .12s;
  text-decoration: none;
}
.site-header__icon:hover { background: rgba(255,255,255,.08); }
.site-header__cart { position: relative; }
.site-header__cart-count {
  position: absolute;
  top: 7px;
  right: 5px;
  background: var(--badge-bg, #00b3e3);
  color: var(--badge-fg, #0a0a0d);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0 3px;
}
.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.site-header__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--paper);
  transition: transform .2s, opacity .2s;
}

/* ── Mobile nav ─────────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--ink);
  color: var(--paper);
  padding: 80px var(--gutter) 40px;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav__list a {
  display: block;
  padding: 18px 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-decoration: none;
  transition: color .12s;
}
.mobile-nav__list a:hover { color: var(--accent); }
.mobile-nav__close {
  position: absolute;
  top: 18px;
  right: var(--gutter);
  background: transparent;
  border: none;
  color: var(--paper);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}
body.mobile-nav-open { overflow: hidden; }
body.mobile-nav-open .mobile-nav { display: flex; transform: translateX(0); }

/* ── Mobile nav sub-menu accordion ─────────────────── */
.mobile-nav__list .menu-item-has-children > a {
  flex: 1;
}
.mobile-nav__toggle {
  background: transparent;
  border: none;
  color: var(--paper);
  cursor: pointer;
  padding: 0 12px;
  font-size: 22px;
  line-height: 1;
  opacity: .6;
  flex-shrink: 0;
}
.mobile-nav__toggle:hover { opacity: 1; }
.mobile-nav__list .menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-nav__list .menu-item-has-children > a {
  border-bottom: none;
  flex: 1;
}
.mobile-nav__list .menu-item-has-children .sub-menu {
  display: none;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0 0 8px 16px;
}
.mobile-nav__list .menu-item-has-children.is-expanded .sub-menu {
  display: block;
}
.mobile-nav__list .sub-menu li a {
  font-size: 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 0 !important;
  margin: 0 !important;
}
.site-footer__newsletter {
  padding: 40px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
}
.site-footer__newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--accent) 22%, transparent 23%);
  background-size: 6px 6px;
  opacity: .08;
  pointer-events: none;
}
.site-footer__newsletter > * {
  position: relative;
  z-index: 1;
}
.site-footer__newsletter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.site-footer__newsletter-copy { min-width: 0; }
.site-footer__newsletter-embed {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.site-footer__newsletter-embed > div {
  width: 100%;
  max-width: 420px;
}
/* Prevent Supascribe script tag from adding block-level space */
.site-footer__newsletter-embed script {
  display: none;
}
.site-footer__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(20px, 2.5vw, 32px);
  letter-spacing: -.015em;
  margin: 8px 0 0;
  line-height: 1.1;
  max-width: 440px;
}
.site-footer__form {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  min-width: 300px;
}
.site-footer__form .input {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: var(--paper);
}
.site-footer__form .input::placeholder { color: rgba(255,255,255,.4); }
.site-footer__form .btn { white-space: nowrap; }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-footer__col .kicker {
  margin-bottom: 16px;
  color: rgba(255,255,255,.4);
  font-size: 10px;
  letter-spacing: .2em;
  display: block;
}
.site-footer__col ul,
.site-footer__col .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col ul li,
.site-footer__col .menu-item { list-style: none; }
.site-footer__col ul a,
.site-footer__col .menu-item a {
  font-family: var(--f-text);
  font-size: 14px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .12s;
  display: block;
}
.site-footer__col ul a:hover,
.site-footer__col .menu-item a:hover { color: var(--paper); }
/* Hide sub-menus in footer */
.site-footer__col .sub-menu { display: none; }
.site-footer__colophon {
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__colophon .mono {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.site-footer__cmyk {
  display: flex;
  gap: 4px;
}
.site-footer__cmyk span {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255,255,255,.15);
}

/* ── Cart drawer ─────────────────────────────────────────── */
.cart-drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(10,10,13,.5);
  opacity: 0;
  transition: opacity .22s;
}
.cart-drawer__backdrop.is-open { opacity: 1; }
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(400px, 100vw);
  background: var(--paper);
  border-left: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s ease;
  box-shadow: -8px 0 0 var(--ink);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1.5px solid var(--ink);
  flex-shrink: 0;
}
.cart-drawer__head .kicker { margin: 0; font-size: 13px; }
.cart-drawer__close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink);
  padding: 4px 8px;
  line-height: 1;
}
.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  text-align: center;
}
.cart-drawer__empty .kicker { font-size: 12px; opacity: .5; }
.cart-drawer__empty .mono { font-size: 11px; opacity: .4; margin-bottom: 16px; }
.cart-line {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.cart-line__cover {
  width: 64px;
  flex-shrink: 0;
  aspect-ratio: 2/3;
  background: var(--ink);
  overflow: hidden;
}
.cart-line__cover img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__meta { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line__title {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}
.cart-line__variation {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0;
}
.cart-line__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.cart-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
  overflow: hidden;
}
.cart-qty__btn {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background .1s;
}
.cart-qty__btn:hover { background: var(--ink); color: var(--paper); }
.cart-qty__val {
  font-family: var(--f-mono);
  font-size: 12px;
  width: 28px;
  text-align: center;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  line-height: 28px;
}
.cart-line__price {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
}
.cart-line__remove {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--accent);
  padding: 0;
  margin-top: 6px;
  text-align: left;
}
.cart-drawer__nudges {
  padding: 12px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-nudge {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ink);
}
.cart-drawer__foot {
  border-top: 1.5px solid var(--ink);
  padding: 20px 24px;
  flex-shrink: 0;
}
.cart-drawer__totals { margin-bottom: 16px; }
.cart-drawer__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cart-drawer__checkout {
  width: 100%;
  justify-content: center;
  font-size: 14px;
  padding: 14px;
}

/* ── Plate picker ─────────────────────────────────────────── */
.plate-picker__button {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 90;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.plate-picker__button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.plate-picker {
  position: fixed;
  bottom: 100px;
  right: 32px;
  z-index: 91;
  width: 240px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.plate-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1.5px solid var(--ink);
}
.plate-picker__head .kicker { font-size: 11px; margin: 0; }
.plate-picker__sub { font-size: 9px; opacity: .5; margin-top: 2px; }
.plate-picker__close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  padding: 2px 6px;
}
.plate-picker__list { display: flex; flex-direction: column; }
.plate-picker__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.plate-picker__option:last-child { border-bottom: none; }
.plate-picker__option:hover { background: var(--paper-2); }
.plate-picker__option.is-selected { background: var(--ink); color: var(--paper); }
.plate-picker__swatch {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  border: 1px solid var(--rule-strong);
}
.plate-picker__swatch span { display: block; }
.plate-picker__copy { flex: 1; }
.plate-picker__copy .kicker { display: block; font-size: 10px; margin: 0; }
.plate-picker__option-sub { font-size: 9px; opacity: .5; }
.plate-picker__check { font-size: 12px; opacity: 0; transition: opacity .1s; }
.plate-picker__option.is-selected .plate-picker__check { opacity: 1; }
.plate-picker__caption {
  padding: 10px 16px;
  font-size: 9px;
  letter-spacing: .1em;
  opacity: .4;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* ── Issue card ─────────────────────────────────────────── */
.issue-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.issue-card__cover {
  position: relative;
  aspect-ratio: 2/3;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .18s, box-shadow .18s;
  margin-bottom: 14px;
}
.issue-card:hover .issue-card__cover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ink);
}
.issue-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.issue-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--ink);
}
.issue-card__variant {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.2);
}
.issue-card__meta { padding: 0 2px; }
.issue-card__meta .kicker { display: block; font-size: 10px; letter-spacing: .15em; margin-bottom: 4px; color: var(--accent); }
.issue-card__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.issue-card__creators { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .55; margin: 0 0 8px; }
.issue-card__row { display: flex; align-items: center; justify-content: space-between; }
.issue-card__price-from,
.sc-price-from {
  font-size: .75em;
  font-weight: 400;
  opacity: .6;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-text);
}
.issue-card__price { font-family: var(--f-mono); font-size: 13px; font-weight: 600; }
.issue-card__status { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }

/* Issue grid */
.grid-issues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px 24px;
}

/* ── News card ─────────────────────────────────────────── */
.news-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  transition: box-shadow .15s, transform .15s;
}
.news-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.news-card__image {
  aspect-ratio: 3/2;
  background: var(--pulp);
  overflow: hidden;
}
.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .22s;
}
.news-card:hover .news-card__image img { transform: scale(1.03); }
.news-card__body { padding: 18px; }
.news-card__kicker {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.news-card__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.news-card__dek {
  font-size: 13px;
  line-height: 1.5;
  opacity: .65;
  margin: 0 0 12px;
}
.news-card__meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .45;
  display: flex;
  gap: 12px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ── Creator card ──────────────────────────────────────── */
.creator-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: opacity .15s;
}
.creator-card:hover { opacity: .8; }
.creator-card__avatar {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-2);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(10,10,13,.1);
}
.creator-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.creator-card__initials {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: -.01em;
  color: var(--ink);
  opacity: .25;
}
.creator-card__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 3px;
  line-height: 1.2;
}
.creator-card__roles {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0 0 4px;
}
.creator-card__works {
  font-size: 11px;
  opacity: .4;
  margin: 0;
}
.grid-creators {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
}

/* ── Section header ────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-head h2, .section-head .h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -.02em;
  margin: 6px 0 0;
  line-height: 1;
  text-transform: uppercase;
}
.section-head .kicker { margin: 0; font-size: 11px; letter-spacing: .18em; color: var(--accent); }
.section-head__more {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--ink);
  transition: opacity .12s;
}
.section-head__more:hover { opacity: 1; }

/* ── Hero sections ─────────────────────────────────────── */
.hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  border-bottom: 1.5px solid var(--ink);
  max-height: calc(100vh - 80px); /* fit in viewport below header */
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--accent) 22%, transparent 23%);
  background-size: 6px 6px;
  opacity: .15;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  padding-top: 52px;
  padding-bottom: 60px;
  position: relative;
  z-index: 1;
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.hero__eyebrow-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -.02em;
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.hero__title span { color: var(--accent); }
.hero__dek {
  font-size: 15px;
  line-height: 1.6;
  opacity: .75;
  max-width: 460px;
  margin: 0 0 28px;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hero__spec-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
}
.hero__spec-cell {
  background: var(--ink);
  padding: 12px 14px;
  font-family: var(--f-mono);
}
.hero__spec-label {
  font-size: 10px;
  letter-spacing: .1em;
  opacity: .45;
  display: block;
  margin-bottom: 4px;
}
.hero__spec-value {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}
.hero__cover {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-height: calc(100vh - 180px);
  overflow: hidden;
  position: relative;
}

/* News hero: image fills the entire right column edge-to-edge */
.hero__slide.is-news .hero__row {
  position: static; /* let cover break out of container */
}
.hero__slide.is-news .hero__copy {
  padding-top: 52px;
  padding-bottom: 60px;
  position: relative;
  z-index: 2;
}
/* News image: positioned absolute relative to the .hero section, right half only */
.hero__slide.is-news .hero__cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-height: none;
  overflow: hidden;
}
.hero__slide.is-news .hero__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  max-height: none;
  box-shadow: none;
}
/* Gradient fade on left edge */
.hero__slide.is-news .hero__cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 120px;
  background: linear-gradient(to right, var(--ink), transparent);
  z-index: 1;
  pointer-events: none;
}
.hero__cover img {
  max-height: calc(100vh - 180px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 12px 12px 0 rgba(0,0,0,.4);
}
.hero__cover-main {
  width: 100%;
  max-width: 360px;
  position: relative;
  z-index: 2;
}
.hero__cover-alt {
  position: absolute;
  width: 110px;
  border: 1.5px solid var(--paper);
  box-shadow: 4px 4px 0 rgba(0,0,0,.4);
}
.hero__cover-alt--a {
  bottom: -20px;
  left: -20px;
  transform: rotate(-6deg);
  z-index: 1;
}
.hero__cover-alt--b {
  top: 30px;
  right: -20px;
  transform: rotate(8deg);
  z-index: 1;
}
.hero__burst {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 3;
}
.hero__cmyk-strip {
  display: flex;
  height: 8px;
}
.hero__cmyk-strip span {
  flex: 1;
}

/* ── Marquee ─────────────────────────────────────────── */
.marquee-section {
  padding: 20px 0;
  border-bottom: 1.5px solid var(--ink);
  overflow: hidden;
  background: var(--paper);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
  gap: 0;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  white-space: nowrap;
}
.marquee-item__text {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.marquee-item__dot {
  width: 14px;
  height: 14px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Store / Archive ─────────────────────────────────── */
.store-header {
  background: var(--ink);
  color: var(--paper);
  padding: 48px 0 40px;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.store-header .halftone {
  position: absolute;
  inset: 0;
  color: var(--cyan);
  opacity: .1;
  background-size: 8px 8px;
}
.store-header__inner { position: relative; z-index: 1; }
.store-header__eyebrow {
  color: var(--cyan);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.store-header__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 72px);
  letter-spacing: -.025em;
  text-transform: uppercase;
  line-height: .92;
  margin: 0 0 12px;
}
.store-header__sub { font-size: 16px; opacity: .6; max-width: 500px; margin: 0; }

/* sticky filter bar */
.filter-bar {
  position: sticky;
  top: 65px;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.filter-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--gutter);
  flex-wrap: wrap;
}
.filter-bar__search {
  display: flex;
  border: 1.5px solid var(--ink);
  flex: 0 0 300px;
}
.filter-bar__search-icon {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1.5px solid var(--ink);
  color: rgba(0,0,0,.35);
}
.filter-bar__search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  outline: none;
  color: var(--ink);
}
.filter-pill {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--ink);
}
.filter-pill__label {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.filter-pill select {
  border: none;
  background: transparent;
  padding: 8px 28px 8px 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  outline: none;
  cursor: pointer;
  appearance: none;
  color: var(--ink);
  min-width: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230a0a0d' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.filter-bar__count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .4;
  margin-left: auto;
}

/* Store layout */
.store-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 96px;
}
.store-sidebar {
  position: sticky;
  top: 135px;
  align-self: flex-start;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.sidebar-section { margin-bottom: 28px; }
.sidebar-section__title {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 10px;
  opacity: .6;
}
.sidebar-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-section__list button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 5px 0;
  font-family: var(--f-text);
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
  width: 100%;
  transition: color .1s;
}
.sidebar-section__list button:hover { color: var(--accent); }
.sidebar-section__list button.is-active {
  font-weight: 700;
  color: var(--accent);
}
.sidebar-checkbox {
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
}

/* ── Single product / issue ─────────────────────────── */
.product-breadcrumb {
  padding: 20px 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
}
.product-breadcrumb a { text-decoration: none; color: inherit; }
.product-breadcrumb a:hover { opacity: 1; color: var(--accent); }
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding-bottom: 80px;
}
.product-gallery { position: sticky; top: 90px; align-self: flex-start; }
.product-cover-main {
  margin-bottom: 16px;
  position: relative;
  box-shadow: 10px 10px 0 var(--ink);
}
.product-cover-main img {
  width: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.product-variants-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.product-variant-thumb {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .12s;
  aspect-ratio: 2/3;
  overflow: hidden;
}
.product-variant-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-variant-thumb.is-active { border-color: var(--accent); }

.product-gallery-kicker {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .4;
  margin: 14px 0 7px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-gallery-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: .2;
}
.product-gallery-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 4px;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}
.product-gallery-strip::-webkit-scrollbar { height: 2px; }
.product-gallery-strip::-webkit-scrollbar-thumb { background: rgba(10,10,13,.35); }
.product-gallery-thumb {
  flex: 0 0 68px;
  height: 68px;
  border: 1.5px solid var(--pulp);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .12s;
}
.product-gallery-thumb:hover { border-color: rgba(10,10,13,.4); }
.product-gallery-thumb.is-active {
  border-color: var(--accent);
  outline: 1.5px solid var(--accent);
  outline-offset: -2px;
}
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-info__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.product-info__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 52px);
  letter-spacing: -.025em;
  text-transform: uppercase;
  line-height: .95;
  margin: 0 0 16px;
}
.product-info__creators { margin-bottom: 20px; }
.product-info__creators a {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: .6;
  transition: opacity .12s;
}
.product-info__creators a:hover { opacity: 1; }
.product-info__price {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -.01em;
  margin: 0 0 20px;
}
.product-info__cover-picker { margin-bottom: 24px; }
.product-info__cover-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: .5;
}
.cover-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cover-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 14px;
  border: 1.5px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  text-align: left;
  width: 100%;
}
.cover-chip__meta {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  display: block;
}
.cover-chip__name {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
}
.cover-chip__price {
  font-family: var(--f-mono);
  font-size: 11px;
  display: block;
  margin-top: 2px;
}
.cover-chip.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.cover-chip:hover:not(.is-active) {
  border-color: var(--ink);
}
.product-info__atc {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.product-info__atc .btn { flex: 1; justify-content: center; font-size: 14px; padding: 14px; }
.product-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  margin-bottom: 28px;
}
.product-spec {
  background: var(--paper);
  padding: 12px 14px;
}
.product-spec__label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .45;
  display: block;
  margin-bottom: 3px;
}
.product-spec__value {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.product-info__synopsis {
  font-size: 15px;
  line-height: 1.65;
  opacity: .8;
  margin-bottom: 28px;
}
.product-info__arc {
  border: 1.5px solid var(--ink);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background .12s;
}
.product-info__arc:hover { background: var(--paper-2); }
.product-info__arc .kicker { font-size: 10px; margin: 0; }

/* ── Page headings ──────────────────────────────────── */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0 48px;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--accent) 22%, transparent 23%);
  background-size: 6px 6px;
  opacity: .15;
  z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-hero__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 80px);
  letter-spacing: -.025em;
  text-transform: uppercase;
  line-height: .92;
  margin: 0 0 12px;
}
.page-hero__sub { font-size: 18px; opacity: .65; max-width: 560px; margin: 0; }

/* ── Reading order ──────────────────────────────────── */
.reading-arc {
  padding: 48px 0;
  border-bottom: 1.5px solid var(--ink);
}
.reading-arc:last-child { border-bottom: none; }
.reading-arc__head { margin-bottom: 24px; }
.reading-arc__kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  display: block;
}
.reading-arc__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.reading-arc__summary { font-size: 14px; line-height: 1.55; opacity: .6; max-width: 600px; margin: 0; }
.reading-arc__issues {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.reading-arc__issues .issue-card { width: 160px; flex-shrink: 0; }
.reading-arc__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 8px;
}

/* ── Summit+ pages ──────────────────────────────────── */
.plus-hero {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.plus-hero .halftone-fine {
  position: absolute;
  inset: 0;
  color: var(--cyan);
  opacity: .08;
  pointer-events: none;
}
.plus-hero__eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 16px;
}
.plus-hero__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 96px);
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: .9;
  margin: 0 0 20px;
}
.plus-hero__sub { font-size: 20px; opacity: .7; max-width: 560px; margin: 0 0 36px; }
.plus-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  margin-bottom: 48px;
}
.plus-feature {
  background: var(--paper);
  padding: 28px 24px;
}
.plus-feature__icon {
  font-size: 24px;
  margin-bottom: 12px;
  display: block;
}
.plus-feature__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.plus-feature__desc { font-size: 13px; line-height: 1.55; opacity: .6; margin: 0; }
.plus-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
}
.plus-plan {
  border: 1.5px solid var(--ink);
  padding: 32px 28px;
  position: relative;
}
.plus-plan.is-featured { border-color: var(--accent); }
.plus-plan.is-featured::before {
  content: "BEST VALUE";
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  right: -1.5px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-align: center;
  padding: 5px;
}
.plus-plan__name {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 8px;
  margin-top: 20px;
}
.plus-plan.is-featured .plus-plan__name { margin-top: 32px; }
.plus-plan__price {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -.03em;
  margin: 0 0 4px;
  line-height: 1;
}
.plus-plan__cadence {
  font-family: var(--f-mono);
  font-size: 11px;
  opacity: .45;
  margin-bottom: 24px;
}
.plus-plan__features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plus-plan__features li {
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.plus-plan__features li::before {
  content: "✓";
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Plus library */
.plus-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px 16px;
}
.plus-release-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.plus-release-card .issue-card__cover { box-shadow: none; }

/* ── About ─────────────────────────────────────────── */
.about-prose {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.7;
}
.about-prose p { margin: 0 0 1.4em; }
.about-prose h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 1.5em 0 .5em;
}
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
}
.about-value {
  background: var(--paper);
  padding: 28px 24px;
}
.about-value__number {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -.04em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}
.about-value__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.about-value__text { font-size: 13px; line-height: 1.55; opacity: .6; margin: 0; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .store-layout { grid-template-columns: 1fr; }
  .store-sidebar { position: static; max-height: none; }
  .product-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-gallery { position: static; }
  .product-cover-main { box-shadow: 6px 6px 0 var(--ink); margin-right: 6px; }
  .hero__row { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 40px; }
  .hero__cover { order: -1; max-height: 55vw; min-height: 220px; }
  .hero__cover img { max-height: 55vw; }
  .hero__cover-alt { display: none; }
  .hero__bundle-covers { height: 220px; }
  .hero__bundle-cover { height: 180px; }
  /* News hero on mobile: revert to normal flow, image above copy */
  .hero__slide.is-news .hero__cover {
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: 100%;
    height: 55vw;
    min-height: 220px;
  }
  .hero__slide.is-news .hero__cover::before { display: none; }
  .hero__slide.is-news .hero__copy { padding-top: 24px; padding-bottom: 32px; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .plus-features { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-header__hamburger { display: flex; }
  .mobile-nav { display: flex; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-issues { grid-template-columns: repeat(2, 1fr); }
  .grid-creators { grid-template-columns: repeat(2, 1fr); }
  .plus-pricing-grid { grid-template-columns: 1fr; }
  .site-footer__newsletter-row { grid-template-columns: 1fr; gap: 24px; } .site-footer__newsletter-embed { justify-content: flex-start; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .site-header__meta { display: none; }
  .filter-bar__search { flex: 1 1 100%; }
  .hero__spec-strip { grid-template-columns: repeat(2, 1fr); }
  .about-values { grid-template-columns: 1fr; }
  .reading-arc__issues { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .plate-picker { right: 16px; bottom: 90px; }
  .plate-picker__button { bottom: 24px; right: 16px; }
}
@media (max-width: 480px) {
  .grid-issues { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .grid-creators { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: 40px; }
}

@media (max-width: 400px) {
  .grid-issues { grid-template-columns: 1fr; }
}

/* ── Misc ───────────────────────────────────────────── */
.page-main { min-height: 50vh; }

/* WordPress defaults override */
.wp-block-image img { border: none; box-shadow: none; }
.alignwide { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* WooCommerce noscript / form field resets */
.woocommerce-form-row input,
.woocommerce-form-row select,
.woocommerce-form-row textarea {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--f-text);
  width: 100%;
}
.woocommerce-form-row input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.woocommerce .button,
.woocommerce button.button {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 12px 20px;
  font-size: 13px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.woocommerce .button:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); background: var(--ink); }

/* Woo validation messages */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  padding: 12px 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  list-style: none;
  margin: 0 0 24px;
}
.woocommerce-error { border-color: var(--accent); background: #fff0f0; }

/* ── Front-page specific fixes ──────────────────────────── */

/* Override default page-section padding to be tighter */
.page-section { padding: 40px 0; }

/* Empty state for grids with no content yet */
.empty-state {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
}

/* Hero CMYK strip at the bottom of hero section */
.hero__cmyk-strip {
  display: flex;
  height: 6px;
}

/* Summit+ pitch responsive */
@media (max-width: 640px) {
  .plus-pitch-grid {
    grid-template-columns: 1fr !important;
  }
}

/* section-head: kicker always stacks above h2, never beside it */
.section-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Marquee needs overflow:hidden on parent */
.marquee-section {
  overflow: hidden;
  border-bottom: 1.5px solid var(--ink);
}

/* regmark CSS (missing from original system.css additions) */
.regmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
  opacity: .5;
}
.regmark::before,
.regmark::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.regmark::before { width: 1px; height: 100%; }
.regmark::after  { width: 100%; height: 1px; }
.regmark span {
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ── Plate picker — header-anchored version ─────────────────────────────────
   The floating button (.plate-picker__button) is retired.
   The trigger is now .site-header__plate in the header actions row.
   The panel drops down from the top-right of the screen below the header.
─────────────────────────────────────────────────────────────────────────── */

/* Hide the old floating button if it somehow still renders */
.plate-picker__button { display: none !important; }

/* Panel: positioned fixed, dropping below the sticky header */
.plate-picker {
  position: fixed;
  top: calc(var(--header-height, 105px));  /* below sticky header */
  right: 24px;
  z-index: 91;
  width: 260px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  /* override old bottom/right positioning */
  bottom: auto;
  left: auto;
}

/* Plate button in header — matches other header action icons */
.site-header__plate {
  position: relative;
}
/* Plate button dot indicators removed — accent colour signals active plate */

@media (max-width: 768px) {
  .plate-picker {
    right: 0;
    left: 0;
    width: 100%;
    top: auto;
    bottom: 0;
    box-shadow: 0 -4px 0 var(--ink);
    border-left: none;
    border-right: none;
  }
}

/* ── Utility bar (top strip) — v2 ──────────────────────────────────────────
   Replaces the old .site-header__meta styles.
   Contains: tagline · plate picker · date · auth/account links
─────────────────────────────────────────────────────────────────────────── */

.site-header__utility {
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 32px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.site-header__tagline {
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.site-header__utility-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.site-header__utility-divider {
  color: rgba(255,255,255,.2);
  user-select: none;
}

/* Plate picker trigger in utility bar */
.site-header__plate {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  transition: opacity .12s;
}
.site-header__plate:hover { opacity: .75; }
/* No dot indicators — accent colour already signals active plate */
.site-header__plate::before { display: none; }

/* Auth / account links */
.site-header__account-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header__utility-link {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .12s;
  white-space: nowrap;
}
.site-header__utility-link:hover,
.site-header__utility-link.is-active { color: var(--paper); }
.site-header__utility-link--accent {
  color: var(--yellow);
  border: 1px solid rgba(255,216,0,.4);
  padding: 1px 8px;
}
.site-header__utility-link--accent:hover {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.site-header__utility-link--muted { color: rgba(255,255,255,.3); }
.site-header__utility-link--muted:hover { color: rgba(255,255,255,.55); }

/* Plate picker panel — drops from utility bar */
.plate-picker {
  top: 32px; /* height of utility bar */
}

/* Hide utility bar on very small screens — show abbreviated version */
@media (max-width: 900px) {
  .site-header__tagline { display: none; }
  .site-header__utility-divider { display: none; }
}
@media (max-width: 640px) {
  .site-header__utility { display: none; }
}

/* Remove old .site-header__meta styles (replaced above) */
.site-header__meta { display: none; }

/* ── WooCommerce page chrome ───────────────────────────────────────────────
   Styles for My Account, Cart, Checkout, Orders etc.
   WC renders most of its own markup — we just need to make it sit right.
─────────────────────────────────────────────────────────────────────────── */

/* Account nav */
.woocommerce-MyAccount-navigation {
  margin-bottom: 32px;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  border: 1.5px solid var(--ink);
  flex-wrap: wrap;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-right: 1.5px solid var(--ink);
  transition: background .12s, color .12s;
}
.woocommerce-MyAccount-navigation li:last-child a { border-right: none; }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Account content area */
.woocommerce-MyAccount-content {
  font-size: 15px;
  line-height: 1.6;
}

/* Orders table */
.woocommerce-orders-table,
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid var(--ink);
  font-size: 13px;
}
.woocommerce-orders-table th,
.woocommerce table.shop_table th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
}
.woocommerce-orders-table td,
.woocommerce table.shop_table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.woocommerce-orders-table tr:last-child td,
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }

/* WC form fields */
.woocommerce form .form-row {
  margin-bottom: 16px;
}
.woocommerce form .form-row label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
  color: #444;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  border: 1.5px solid var(--ink);
  padding: 10px 12px;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.woocommerce form .form-row input.input-text:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* WC addresses */
.woocommerce-address-fields h3,
.woocommerce h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 24px 0 16px;
}

/* WC notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border: 1.5px solid var(--ink);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  list-style: none;
}
.woocommerce-message { background: #f0fff4; border-color: #2d6a4f; }
.woocommerce-error   { background: #fff0f0; border-color: var(--accent); }
.woocommerce-info    { background: var(--paper-2); }

/* ── Utility bar left group (tagline + plate) ───────────────────────────── */
.site-header__utility-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* On narrow screens hide the tagline but keep the plate button visible */
@media (max-width: 900px) {
  .site-header__utility-left .site-header__tagline { display: none; }
  .site-header__utility-left .site-header__utility-divider { display: none; }
}

/* ── WooCommerce Checkout — two-column layout ────────────────────────────── */

.woocommerce-checkout .woocommerce {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px var(--gutter);
}

/* Coupon bar */
.woocommerce-checkout .woocommerce-info {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  margin-bottom: 24px;
  color: var(--ink);
  list-style: none;
}
.woocommerce-checkout .woocommerce-info::before { display: none; }

/* #customer_details inner layout — WC wraps billing in .col-1 and shipping
   ("ship to different address") in .col-2. Stack them vertically so billing
   fills the full left column width and shipping appears below it. */
#customer_details.col2-set,
#customer_details.col2-set .col-1,
#customer_details.col2-set .col-2 {
  display: block;
  width: 100%;
}
#customer_details.col2-set .col-2 {
  margin-top: 24px;
}

/* Two-column: left = billing/shipping, right = order summary + payment */
form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-rows: auto;
  gap: 0 48px;
  align-items: start;
}

/* Everything on the left: customer details + any other direct children */
#customer_details,
form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup,
form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup-checkout {
  grid-column: 1;
}

/* Force all direct children of the form that aren't the right-column elements
   into column 1 so they don't accidentally push into column 2 */
form.checkout.woocommerce-checkout > *:not(.sc-checkout-right) {
  grid-column: 1;
}

/* Right column: single wrapper holds heading + order review as one grid cell.
   Without this, grid auto-placement drops #order_review to a new row BELOW
   the billing form instead of beside it. */
.sc-checkout-right {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: 80px;
}

#order_review_heading {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 10px;
  margin: 0 0 20px;
}

/* Section headings */
.woocommerce-checkout h3#order_review_heading { margin-bottom: 20px; }
.woocommerce-checkout h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 10px;
  margin: 0 0 20px;
}

/* Billing/shipping fields in a 2-col sub-grid */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}

/* Force specific fields full-width */
.woocommerce-checkout .form-row-wide,
#billing_address_1_field,
#billing_address_2_field,
#billing_email_field,
#billing_phone_field,
#billing_country_field,
#shipping_address_1_field,
#shipping_address_2_field,
#shipping_country_field {
  grid-column: 1 / -1;
}

.woocommerce-checkout .form-row {
  margin: 0 0 14px;
}

/* Labels */
.woocommerce-checkout .form-row label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--ink);
}
.woocommerce-checkout abbr.required {
  color: var(--accent);
  text-decoration: none;
  border: none;
}

/* Inputs */
.woocommerce-checkout .input-text,
.woocommerce-checkout select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(10,10,13,.2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 14px;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .12s;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus {
  border-color: var(--accent);
  box-shadow: none;
}

/* ── Order summary table (right column) ─────────────────────── */
#order_review {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 20px;
}

.shop_table.woocommerce-checkout-review-order-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 20px;
}
.shop_table.woocommerce-checkout-review-order-table th {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 0 8px;
  text-align: left;
}
.shop_table.woocommerce-checkout-review-order-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: 12px;
  line-height: 1.4;
}
.shop_table.woocommerce-checkout-review-order-table .cart_item td:last-child {
  text-align: right;
  white-space: nowrap;
}
.shop_table.woocommerce-checkout-review-order-table .order-total td,
.shop_table.woocommerce-checkout-review-order-table .order-total th {
  font-weight: 700;
  font-size: 14px;
  border-bottom: none;
  border-top: 1.5px solid var(--ink);
  padding-top: 12px;
}

/* ── Payment methods — accordion button style ─────────────────── */
#payment { margin-top: 0; background: none; border: none; padding: 0; }

#payment .payment_methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each method = a bordered accordion row */
#payment .payment_methods li {
  border: 1px solid rgba(10,10,13,.2);
  background: var(--paper);
  transition: border-color .12s;
  overflow: hidden;
}
#payment .payment_methods li.payment_method_stripe { }
#payment .payment_methods li input[type=radio] { display: none; }

/* The label becomes the clickable button header */
#payment .payment_methods li > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  user-select: none;
  gap: 12px;
}
#payment .payment_methods li > label img {
  height: 20px;
  width: auto;
  object-fit: contain;
  opacity: .8;
}
#payment .payment_methods li > label .sc-chevron {
  margin-left: auto;
  font-size: 10px;
  opacity: .4;
  transition: transform .2s;
  flex-shrink: 0;
}

/* Highlight selected method */
#payment .payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--accent);
}
#payment .payment_methods li.wc_payment_method:has(input:checked) > label {
  color: var(--accent);
}

/* Payment box (card fields etc) — collapsed by default via WC JS */
#payment .payment_box {
  background: var(--paper-2);
  padding: 16px 14px;
  border-top: 1px solid rgba(10,10,13,.1);
  font-size: 13px;
}

/* WooPayments / Stripe card iframe styling shim */
#payment .payment_box p { font-size: 12px; margin-bottom: 10px; }

/* Place order button */
#place_order {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s;
  margin-top: 8px;
}
#place_order:hover {
  background: transparent;
  color: var(--ink);
}

/* Privacy notice */
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 11px;
  opacity: .5;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Responsive — single column below 860px */
@media (max-width: 860px) {
  form.checkout.woocommerce-checkout {
    grid-template-columns: 1fr;
  }
  #customer_details { grid-column: 1; }
  .sc-checkout-right { grid-column: 1; grid-row: auto; position: static; margin-top: 32px; }
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ── Bundles page ─────────────────────────────────────────────────────────── */

.bundles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
}

.bundle-card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}

/* Header */
.bundle-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--rule);
}
.bundle-card__kicker {
  font-size: 10px;
  letter-spacing: .14em;
  margin-bottom: 4px;
  color: var(--accent);
}
.bundle-card__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(16px, 2vw, 20px);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.bundle-card__badge {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 5px 10px;
  white-space: nowrap;
}

/* Cover spread — stacked/fanned comic covers */
.bundle-card__covers {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 28px 24px 20px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  min-height: 200px;
  position: relative;
}
.bundle-cover {
  display: block;
  width: 90px;
  flex-shrink: 0;
  aspect-ratio: 2/3;
  background: var(--ink);
  overflow: hidden;
  border: 2px solid var(--paper);
  box-shadow: 2px 4px 12px rgba(0,0,0,.18);
  transition: transform .2s;
  margin-left: -16px;
  position: relative;
}
.bundle-cover:first-child { margin-left: 0; }
.bundle-cover:hover { transform: translateY(-8px) rotate(-1deg); z-index: 2; }
.bundle-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bundle-cover__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: var(--paper);
  opacity: .4;
}

/* Product list */
.bundle-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.bundle-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.bundle-item:last-child { border-bottom: none; }
.bundle-item__title {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bundle-item__title:hover { color: var(--accent); }
.bundle-item__price {
  font-size: 11px;
  opacity: .5;
  flex-shrink: 0;
}

/* Footer */
.bundle-card__foot {
  padding: 20px 24px;
  border-top: 1.5px solid var(--ink);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bundle-card__pricing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bundle-card__original {
  font-size: 12px;
  text-decoration: line-through;
  opacity: .4;
}
.bundle-card__total {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 24px;
}
.bundle-card__save {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--accent);
}

/* Add to cart button state */
.bundle-card__atc:disabled {
  opacity: .7;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .bundles-grid { grid-template-columns: 1fr; }
  .bundle-cover { width: 72px; }
}

/* ── Bundle hero covers (stacked fan) ──────────────────────────────────────── */
/* Bundle covers in hero — fixed height, tilted, contained */
.hero__bundle-covers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 400px;
  overflow: hidden;
  padding: 0 16px;
}
.hero__bundle-cover {
  display: block;
  flex-shrink: 0;
  height: 350px;
  width: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  border: 2px solid var(--paper);
  box-shadow: 3px 6px 16px rgba(0,0,0,.6);
  margin-left: -60px;
  position: relative;
  transition: transform .2s;
}
.hero__bundle-cover:first-child  { margin-left: 0; transform: rotate(-5deg); z-index: 1; }
.hero__bundle-cover:nth-child(2) { transform: rotate(3deg); z-index: 2; }
.hero__bundle-cover:nth-child(3) { transform: rotate(-2deg); z-index: 3; }
.hero__bundle-cover:nth-child(4) { transform: rotate(6deg); z-index: 2; }
.hero__bundle-cover:hover { transform: rotate(0deg) translateY(-12px) scale(1.05); z-index: 5; }

/* ── Hero carousel ───────────────────────────────────────────────────────── */
.hero__slides {
  position: static; /* news cover positions relative to .hero section */
}
.hero__slide {
  display: none;
  position: relative; /* containing block for absolute news cover */
}
.hero__slide.is-active {
  display: block;
}

/* Arrows */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  color: var(--paper);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hero__arrow:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
.hero__arrow--prev { left: 24px; }
.hero__arrow--next { right: 24px; }

/* Dot indicators */
.hero__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 8px;
}
.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.25);
  cursor: pointer;
  transition: background .15s, transform .15s;
  padding: 0;
}
.hero__dot.is-active {
  background: var(--accent);
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .hero__arrow { width: 36px; height: 36px; }
  .hero__arrow--prev { left: 12px; }
  .hero__arrow--next { right: 12px; }
}

/* ── Variation picker popup ──────────────────────────────────────────────── */
#sc-var-picker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}
#sc-var-picker.is-open { display: block; }

.sc-var-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,13,.7);
  backdrop-filter: blur(2px);
}

.sc-var-picker__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  color: var(--ink);
  width: min(480px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
}

.sc-var-picker__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
  opacity: .5;
  line-height: 1;
}
.sc-var-picker__close:hover { opacity: 1; }

.sc-var-picker__tip {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 20px 20px 0;
  margin: 0;
}

.sc-var-picker__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  padding: 6px 20px 16px;
  margin: 0;
  border-bottom: 1.5px solid var(--ink);
}

.sc-var-picker__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px 20px;
  flex: 1;
}

/* Each format chip */
.sc-var-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border: 1.5px solid rgba(10,10,13,.2);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s, color .12s;
}
.sc-var-chip:hover:not(:disabled) { border-color: var(--ink); }
.sc-var-chip.is-selected {
  border-color: var(--accent);
  background: var(--ink);
  color: var(--paper);
}
.sc-var-chip.is-oos { opacity: .4; cursor: not-allowed; }

.sc-var-chip__sub {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
}
.sc-var-chip.is-selected .sc-var-chip__sub { opacity: .6; }
.sc-var-chip__main {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}
.sc-var-chip__price {
  font-family: var(--f-mono);
  font-size: 11px;
  margin-top: 2px;
}
.sc-var-chip__oos {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c00;
  margin-top: 2px;
}

.sc-var-picker__foot {
  padding: 12px 20px 20px;
  border-top: 1px solid var(--rule);
}
.sc-var-picker__confirm {
  width: 100%;
  justify-content: center;
}

/* ── Campaigns page ───────────────────────────────────────────────────────── */

/* ── Live Now section ─────────────────────────────── */
.campaign-live {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 64px 0;
}
.campaign-live__bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--accent) 22%, transparent 23%);
  background-size: 6px 6px;
  opacity: .1;
  pointer-events: none;
}
.campaign-live__inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.campaign-live__cover {
  position: relative;
}
.campaign-live__cover img {
  width: 100%;
  display: block;
  box-shadow: 12px 12px 0 rgba(0,0,0,.4);
}
.campaign-live__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.campaign-live-pip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.3);
  animation: sc-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sc-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.3); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,.1); }
}
.campaign-chip {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 2px 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
}
.campaign-live__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 52px);
  text-transform: uppercase;
  line-height: .95;
  margin: 0 0 12px;
}
.campaign-live__tagline {
  font-size: 16px;
  opacity: .7;
  margin: 0 0 28px;
  max-width: 480px;
}
.campaign-live__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Progress bar */
.campaign-progress { margin-bottom: 4px; }
.campaign-progress__bar {
  height: 6px;
  background: rgba(255,255,255,.15);
  overflow: hidden;
  margin-bottom: 20px;
}
.campaign-progress__fill {
  height: 100%;
  background: var(--accent);
  transition: width .6s ease;
}
.campaign-progress__stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.campaign-stat { display: flex; flex-direction: column; gap: 2px; }
.campaign-stat__val {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
}
.campaign-stat__label {
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .5;
}
.campaign-updated {
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .35;
  margin-top: 16px;
}

/* KS embed wrapper */
.campaign-embed {
  margin-bottom: 4px;
}
.campaign-embed iframe {
  width: 100%;
  border: none;
}

/* Platform badge */
.campaign-platform-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--platform-color, #888);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  text-transform: uppercase;
}

/* ── Campaign grid (upcoming + past) ──────────────── */
.campaign-section { padding-top: 40px; padding-bottom: 48px; }

.campaign-grid--upcoming {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.campaign-grid--past {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Card */
.campaign-card {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.campaign-card--past {
  opacity: .85;
  transition: opacity .15s;
}
.campaign-card--past:hover { opacity: 1; }

.campaign-card__cover {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--ink);
}
.campaign-card__cover--past {
  filter: grayscale(30%);
}
.campaign-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Countdown badge (upcoming) */
.campaign-countdown {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 10px;
}

/* Funded badge (past) */
.campaign-funded-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 16px;
  padding: 4px 10px;
}

.campaign-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.campaign-card__kicker {
  font-size: 9px;
  letter-spacing: .14em;
  margin: 0;
}
.campaign-card__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.campaign-card__tagline {
  font-size: 12px;
  opacity: .65;
  margin: 0;
  line-height: 1.4;
}
.campaign-card__goal {
  font-size: 11px;
  opacity: .5;
  margin: 0;
  letter-spacing: .06em;
}
.campaign-card__past-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  opacity: .6;
  letter-spacing: .04em;
}
.campaign-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
}

/* Responsive */
@media (max-width: 860px) {
  .campaign-live__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .campaign-live__cover {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ── Late Pledge cards ───────────────────────────────────────────────────── */
.campaign-grid--late {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

/* Amber accent treatment to distinguish from live (green) and past (greyed) */
.campaign-card--late {
  border-color: rgba(245,158,11,.4);
}
.campaign-card--late:hover {
  border-color: #f59e0b;
}

.campaign-late-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #f59e0b;
  color: #0a0a0d;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 3px 8px;
  text-transform: uppercase;
}

.campaign-card__stats {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.campaign-card__stat-val {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.campaign-card__stat-label {
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .5;
}
.campaign-card__stat-sep {
  opacity: .3;
  font-size: 14px;
}

.campaign-card__cover-link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.campaign-card__cover { position: relative; }

/* ── Partner Stores page ─────────────────────────────────────────────────── */

/* Map */
.stores-map-section {
  position: relative;
  height: 480px;
  background: var(--ink);
}
#sc-stores-map {
  width: 100%;
  height: 100%;
}

/* Leaflet map pins */
.sc-map-pin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.sc-map-pin--featured {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(var(--accent), .3), 0 2px 8px rgba(0,0,0,.5);
}

/* Map popup */
.sc-map-popup { font-family: var(--f-text); min-width: 160px; }
.sc-map-popup strong { font-family: var(--f-display); font-weight: 700; display: block; margin-bottom: 2px; font-size: 13px; }
.sc-map-popup span { font-size: 11px; opacity: .7; }
.sc-map-popup a { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none; }

/* Filter buttons */
.stores-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.stores-filter__btn {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1.5px solid rgba(10,10,13,.2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.stores-filter__btn:hover { border-color: var(--ink); }
.stores-filter__btn.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Featured grid */
.stores-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* All stores grid */
.stores-region { margin-bottom: 40px; }
.stores-region__label {
  font-size: 10px;
  letter-spacing: .2em;
  opacity: .4;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Store card */
.store-card {
  display: flex;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.store-card--featured {
  flex-direction: column;
}
.store-card--compact {
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

/* Logo */
.store-card__logo-wrap {
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.store-card--featured .store-card__logo-wrap {
  height: 140px;
}
.store-card__logo-wrap--sm {
  width: 72px;
  min-height: 72px;
  border-right: 1px solid var(--rule);
}
.store-card__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.store-card__logo-placeholder {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  opacity: .2;
}

/* Card body */
.store-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Type badge */
.store-card__type-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 0;
}
.store-card__type-badge--lcs        { background: #dbeafe; color: #1e40af; }
.store-card__type-badge--online     { background: #dcfce7; color: #166534; }
.store-card__type-badge--convention { background: #fef9c3; color: #854d0e; }
.store-card__type-badge--sm { font-size: 8px; padding: 2px 6px; flex-shrink: 0; }

.store-card__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.store-card__title--sm { font-size: 13px; }
.store-card__location {
  font-size: 11px;
  letter-spacing: .08em;
  opacity: .5;
  margin: 0;
}
.store-card__address { font-size: 12px; opacity: .65; margin: 0; }
.store-card__address--sm { font-size: 11px; }
.store-card__location--sm { font-size: 10px; margin-top: 2px; }
.store-card__contact { font-size: 10px; letter-spacing: .06em; color: var(--ink); opacity: .5; text-decoration: none; }
.store-card__contact:hover { opacity: 1; }
.store-card__meta { display: flex; flex-direction: column; gap: 2px; }

.store-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.store-card__actions--sm { padding-top: 8px; }

@media (max-width: 768px) {
  .stores-map-section { height: 300px; }
  .stores-featured-grid { grid-template-columns: 1fr; }
  .stores-grid { grid-template-columns: 1fr; }
}

.stores-wholesale-wrap {
  display: flex;
  justify-content: center;
  padding: 48px var(--gutter);
  background: var(--paper-2);
}
.stores-wholesale-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 480px;
  width: 100%;
  background: var(--paper);
  border: none;
  padding: 32px 40px;
}
.stores-wholesale-card__kicker {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.stores-wholesale-card__text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}
.stores-wholesale-card__link {
  margin-top: 4px;
  font-size: 12px;
}

/* ── Submissions page ────────────────────────────────────────────────────── */

.sub-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Track card */
.sub-track {
  border: 1.5px solid var(--ink);
  padding: 32px;
  background: var(--paper);
}
.sub-track__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.sub-track__icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.sub-track__kicker { font-size: 9px; letter-spacing: .14em; margin-bottom: 4px; }
.sub-track__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
  margin: 0;
}

/* Writer notice box */
.sub-track__notice {
  background: #fef2f2;
  border-left: 3px solid #ef4444;
  color: #7f1d1d;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Form grid */
.sub-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.sub-form__field { display: flex; flex-direction: column; gap: 5px; }
.sub-form__field--full { grid-column: 1 / -1; }
.sub-form__field label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.sub-form__optional {
  font-weight: 400;
  opacity: .5;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}
.sub-form__required-note {
  font-weight: 400;
  color: #ef4444;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.sub-form__field input:not([type="checkbox"]),
.sub-form__field select,
.sub-form__field textarea {
  padding: 9px 12px;
  border: 1px solid rgba(10,10,13,.2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 13px;
  border-radius: 0;
  outline: none;
  transition: border-color .12s;
  -webkit-appearance: none;
  appearance: none;
}
.sub-form__field input:not([type="checkbox"]):focus,
.sub-form__field select:focus,
.sub-form__field textarea:focus { border-color: var(--accent); }
.sub-form__field textarea { resize: vertical; min-height: 80px; }

.sub-form__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sub-form__submit { flex-shrink: 0; }
.sub-form__status {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.sub-form__status.is-success { color: #16a34a; }
.sub-form__status.is-error   { color: #dc2626; }

/* FAQ */
.sub-faq-item {
  border-bottom: 1px solid var(--rule);
}
.sub-faq-item:first-of-type { border-top: 1px solid var(--rule); }
.sub-faq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  background: transparent;
  border: none;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  gap: 16px;
  color: var(--ink);
}
.sub-faq-btn:hover { color: var(--accent); }
.sub-faq-chevron {
  font-size: 20px;
  font-family: var(--f-mono);
  font-weight: 400;
  flex-shrink: 0;
  transition: transform .15s;
  color: var(--accent);
}
.sub-faq-body {
  padding: 0 0 20px;
}
.sub-faq-body p {
  font-size: 14px;
  line-height: 1.7;
  opacity: .75;
  margin: 0;
}

@media (max-width: 860px) {
  .sub-tracks { grid-template-columns: 1fr; }
  .sub-form__grid { grid-template-columns: 1fr; }
  .sub-form__field--full { grid-column: 1; }
}

/* Genre checkbox group */
.sub-form__checkgroup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(10,10,13,.2);
  background: var(--paper);
}
.sub-form__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  transition: background .1s;
  border-radius: 0;
}
.sub-form__check:hover { background: var(--paper-2); }
.sub-form__check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.sub-form__check span { line-height: 1.3; }

/* FAQ → form CTA */
.sub-faq-cta {
  display: flex;
  justify-content: center;
  padding: 28px 0 0;
}
.sub-faq-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: gap .2s;
}
.sub-faq-cta__link:hover { gap: 12px; }
.sub-faq-cta__link svg { transition: transform .2s; }
.sub-faq-cta__link:hover svg { transform: translateY(3px); }

/* ── Search overlay ──────────────────────────────────────────────────────── */
.sc-search {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.sc-search.is-open {
  display: flex;
}
.sc-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,13,.8);
  backdrop-filter: blur(4px);
}
.sc-search__panel {
  position: relative;
  z-index: 1;
  background: var(--paper);
  width: min(680px, 94vw);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}

/* Search bar */
.sc-search__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--ink);
  flex-shrink: 0;
}
.sc-search__bar svg { opacity: .4; flex-shrink: 0; }
.sc-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--f-text);
  font-size: 18px;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.sc-search__input::placeholder { opacity: .35; }
.sc-search__input::-webkit-search-cancel-button { display: none; }
.sc-search__close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: .4;
  padding: 4px;
  color: var(--ink);
  flex-shrink: 0;
  transition: opacity .12s;
}
.sc-search__close:hover { opacity: 1; }

/* Body */
.sc-search__body {
  overflow-y: auto;
  flex: 1;
}

/* Default / hint state */
.sc-search__default { padding: 24px 20px; }
.sc-search__hint {
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .35;
  margin: 0 0 20px;
}
.sc-search__quick-label {
  font-size: 9px;
  letter-spacing: .14em;
  opacity: .4;
  margin: 0 0 10px;
}
.sc-search__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sc-search__quick-link {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1.5px solid rgba(10,10,13,.15);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.sc-search__quick-link:hover {
  border-color: var(--accent);
  background: rgba(0,0,0,.03);
}

/* Results */
.sc-search__results { padding: 12px 0 20px; }
.sc-search__group { margin-bottom: 4px; }
.sc-search__group-label {
  font-size: 9px;
  letter-spacing: .16em;
  opacity: .35;
  padding: 10px 20px 6px;
  margin: 0;
  text-transform: uppercase;
}
.sc-search__result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: background .1s;
}
.sc-search__result:hover { background: var(--paper-2); }
.sc-search__result-thumb {
  width: 40px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-2);
  display: block;
}
.sc-search__result-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: .2;
  height: 40px;
}
.sc-search__result-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sc-search__result-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-search__result-meta {
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .45;
  text-transform: uppercase;
}

.sc-search__all-results {
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--accent);
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  margin-top: 8px;
}
.sc-search__all-results:hover { opacity: .7; }

/* Empty */
.sc-search__empty {
  padding: 48px 20px;
  text-align: center;
}
.sc-search__empty p {
  font-size: 11px;
  letter-spacing: .16em;
  opacity: .3;
  margin: 0;
}

/* Loading spinner */
.sc-search__loading {
  display: flex;
  justify-content: center;
  padding: 48px 20px;
}
.sc-search__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(10,10,13,.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sc-spin .6s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* Ensure no gap between page content and footer */
.page-main { margin-bottom: 0; }

/* ── About page — Executive Team ─────────────────────────────────────────── */
.about-exec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}
.about-exec-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-exec-card__photo-link { display: block; }
.about-exec-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  display: block;
  border: 2px solid var(--ink);
}
.about-exec-card__photo--placeholder {
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 40px;
  color: var(--ink);
  opacity: .15;
}
.about-exec-card__body { display: flex; flex-direction: column; gap: 4px; }
.about-exec-card__title {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  font-weight: 700;
}
.about-exec-card__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0;
}
.about-exec-card__name a { color: inherit; text-decoration: none; }
.about-exec-card__name a:hover { color: var(--accent); }
.about-exec-card__bio {
  font-size: 13px;
  line-height: 1.6;
  opacity: .65;
  margin: 4px 0 0;
}

/* ── About page — Staff ──────────────────────────────────────────────────── */
.about-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.about-staff-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-staff-card__photo-link { display: block; }
.about-staff-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  display: block;
}
.about-staff-card__photo--placeholder {
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--ink);
  opacity: .15;
}
.about-staff-card__body { display: flex; flex-direction: column; gap: 2px; }
.about-staff-card__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0;
}
.about-staff-card__name a { color: inherit; text-decoration: none; }
.about-staff-card__name a:hover { color: var(--accent); }
.about-staff-card__title {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0;
}
.about-staff-card__roles {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .35;
  margin: 0;
}

@media (max-width: 768px) {
  .about-exec-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .about-staff-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ── Pre-order countdown ─────────────────────────────────────────────────── */

/* Issue card chip */
.issue-card__countdown {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ink);
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .1em;
  padding: 3px 7px;
  font-weight: 700;
}

/* Single product countdown */
.product-countdown {
  margin: 20px 0;
  padding: 16px 20px;
  border: 1.5px solid var(--accent);
  background: rgba(0,0,0,.03);
}
.product-countdown__label {
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--accent);
  margin: 0 0 10px;
}
.product-countdown__units {
  display: flex;
  align-items: center;
  gap: 4px;
}
.product-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
}
.product-countdown__val {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
}
.product-countdown__unit-label {
  font-size: 8px;
  letter-spacing: .14em;
  opacity: .45;
}
.product-countdown__sep {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 24px;
  opacity: .3;
  margin-bottom: 12px;
}

/* ── Series archive hero ─────────────────────────────────────────────────── */
.series-hero { position: relative; overflow: hidden; }
.series-hero__cover-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  filter: blur(24px) brightness(.3);
  transform: scale(1.05);
}
.series-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,10,13,.92) 50%, rgba(10,10,13,.5));
}
.series-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
.series-hero__cover img {
  height: 320px;
  width: auto;
  box-shadow: 12px 12px 0 rgba(0,0,0,.4);
}
.series-hero__stats {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  letter-spacing: .1em;
  opacity: .45;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .series-hero__inner { grid-template-columns: 1fr; }
  .series-hero__cover { display: none; }
}

/* ── Press Kit ───────────────────────────────────────────────────────────── */
.presskit-section { padding-top: 48px; padding-bottom: 48px; }
.presskit-section__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 32px);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.presskit-section__desc {
  font-size: 14px; opacity: .6; margin: 0 0 28px; max-width: 600px;
}
.presskit-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.presskit-asset { display: flex; flex-direction: column; gap: 8px; }
.presskit-asset__preview {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  overflow: hidden;
  padding: 16px;
}
.presskit-asset__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.presskit-asset__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.presskit-asset__name { font-size: 10px; letter-spacing: .06em; opacity: .5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presskit-asset__ext { font-size: 9px; font-weight: 700; letter-spacing: .1em; opacity: .4; flex-shrink: 0; }
.presskit-asset__download { font-size: 11px; text-align: center; }

.presskit-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}
.presskit-cover { display: flex; flex-direction: column; gap: 8px; }
.presskit-cover__img { aspect-ratio: 2/3; overflow: hidden; border: 1px solid var(--rule); }
.presskit-cover__img img { width: 100%; height: 100%; object-fit: cover; }
.presskit-cover__name { font-size: 10px; letter-spacing: .08em; opacity: .5; }

.presskit-bio {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.presskit-bio__photo { position: relative; }
.presskit-bio__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.presskit-bio__photo-dl {
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--accent);
  margin-top: 6px;
  text-decoration: none;
}
.presskit-bio__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.presskit-bio__title {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.presskit-bio__text { font-size: 14px; line-height: 1.7; opacity: .75; margin: 0 0 12px; }

.presskit-boilerplate {
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.75;
  opacity: .8;
}

/* ── Retailer portal ─────────────────────────────────────────────────────── */
.retailer-login-box {
  border: 1.5px solid var(--ink);
  padding: 32px;
}
.retailer-login-box .login-username label,
.retailer-login-box .login-password label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.retailer-login-box input[type=text],
.retailer-login-box input[type=password] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(10,10,13,.2);
  margin-bottom: 12px;
  font-size: 14px;
}
.retailer-login-box input[type=submit] {
  width: 100%;
  padding: 12px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .15s;
}
.retailer-login-box input[type=submit]:hover { opacity: .8; }

.retailer-section { padding-top: 48px; padding-bottom: 56px; }
.retailer-section__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(18px, 2.5vw, 28px);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.retailer-section__desc { font-size: 14px; opacity: .6; margin: 0 0 28px; max-width: 600px; }
.retailer-info-block {
  border: 1px solid var(--rule);
  padding: 24px;
  font-size: 14px;
  line-height: 1.75;
  opacity: .8;
}

/* ── Retailer auth tabs & forms ──────────────────────────────────────────── */
.retailer-auth-container { max-width: 640px; }

.retailer-auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 32px;
}
.retailer-auth-tab {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  opacity: .4;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: opacity .12s;
}
.retailer-auth-tab:hover { opacity: .7; }
.retailer-auth-tab.is-active {
  opacity: 1;
  border-bottom-color: var(--accent);
  color: var(--ink);
}

/* Application form */
.retailer-apply-box { max-width: 600px; }
.retailer-apply-fieldset {
  border: 1.5px solid rgba(10,10,13,.1);
  padding: 20px 20px 16px;
  margin: 0 0 20px;
}
.retailer-apply-fieldset legend {
  font-size: 9px;
  letter-spacing: .16em;
  padding: 0 6px;
  opacity: .4;
}
.retailer-apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.retailer-apply-field { display: flex; flex-direction: column; gap: 4px; }
.retailer-apply-field--full { grid-column: 1 / -1; }
.retailer-apply-field label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.retailer-apply-field input,
.retailer-apply-field select {
  padding: 9px 12px;
  border: 1px solid rgba(10,10,13,.2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color .12s;
}
.retailer-apply-field input:focus,
.retailer-apply-field select:focus { border-color: var(--accent); }

.retailer-apply-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.retailer-apply-status { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; }
.retailer-apply-status.is-success { color: #16a34a; }
.retailer-apply-status.is-error   { color: #dc2626; }

/* Wholesale rate display */
.retailer-wholesale-info { padding: 24px; border: 1.5px solid var(--accent); display: inline-block; }
.retailer-wholesale-rate { margin: 0; }
.retailer-cat-rates { display: flex; gap: 24px; flex-wrap: wrap; }
.retailer-cat-rate { display: flex; align-items: baseline; gap: 8px; }

@media (max-width: 600px) {
  .retailer-apply-grid { grid-template-columns: 1fr; }
  .retailer-apply-field--full { grid-column: 1; }
}

/* ── Wholesale pricing display ───────────────────────────────────────────── */
.sc-wholesale-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 7px;
  vertical-align: middle;
  margin-left: 6px;
  text-transform: uppercase;
}
.sc-wholesale-original {
  text-decoration: line-through;
  opacity: .45;
  font-size: .9em;
  display: block;
}
.sc-wholesale-price-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-wholesale-retail { opacity: .4; font-size: .9em; }
.sc-wholesale-retail, .sc-wholesale-price { text-decoration: none; font-style: normal; }
.sc-wholesale-price { font-weight: 700; }

/* Campaign sort buttons */
.campaign-sort-btns {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.campaign-sort-btn {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1.5px solid rgba(10,10,13,.2);
  color: var(--ink);
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.campaign-sort-btn:hover { border-color: var(--ink); }
.campaign-sort-btn.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ── Variation sticker ───────────────────────────────────────────────────── */
.variation-sticker {
  position: absolute;
  top: -6px;
  right: -6px;
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  color: #fff;
  border-radius: 2px;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
/* Position relative on chips so sticker anchors correctly */
.cover-chip { position: relative; }
.sc-var-chip { position: relative; }

/* In the popup picker, sticker sits at top-right */
.variation-sticker--chip {
  top: -8px;
  right: -8px;
  font-size: 8px;
  padding: 2px 6px;
}

/* PDF icon on digital variation chips */
.cover-chip__pdf-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 4px;
  opacity: .7;
  flex-shrink: 0;
}
.cover-chip__name {
  display: flex;
  align-items: center;
}
.sc-var-chip__main {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sc-var-chip__main svg {
  width: 13px;
  height: 13px;
  opacity: .7;
  flex-shrink: 0;
}

/* ── Product Reviews ─────────────────────────────────────────────────────── */

/* Star rendering via clip-path on gold stars over grey */
.product-reviews-stars,
.product-rating-stars-big,
.product-rating-stars-sm,
.product-review-card__stars,
.product-review-card__sub-stars {
  position: relative;
  display: inline-block;
  color: #e5e5e5;
  letter-spacing: 2px;
}
.product-reviews-stars::before,
.product-rating-stars-big::before,
.product-rating-stars-sm::before,
.product-review-card__stars::before,
.product-review-card__sub-stars::before {
  content: '★★★★★';
  position: absolute;
  top: 0; left: 0;
  color: #f59e0b;
  width: var(--pct, 0%);
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 2px;
}

.product-reviews-section {
  background: var(--paper-2);
  padding: 48px 0;
  border-top: 1.5px solid var(--ink);
}

.product-reviews-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.product-reviews-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 36px);
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.product-reviews-avg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .5em;
  font-weight: 400;
}
.product-reviews-stars { font-size: 1.2em; }

/* Rating summary */
.product-rating-summary {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 20px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  margin-bottom: 40px;
}
.product-rating-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}
.product-rating-number {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
}
.product-rating-stars-big { font-size: 18px; letter-spacing: 3px; }

.product-rating-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 160px;
  justify-content: center;
}
.product-rating-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-rating-bar {
  flex: 1;
  height: 6px;
  background: #e5e5e5;
  border-radius: 0;
  overflow: hidden;
}
.product-rating-bar__fill {
  height: 100%;
  background: #f59e0b;
  transition: width .4s ease;
}

.product-rating-subs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.product-rating-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.product-rating-stars-sm { font-size: 13px; letter-spacing: 2px; }

/* Review cards */
.product-review-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 48px;
}
.product-review-card {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.product-review-card:first-child { border-top: 1px solid var(--rule); }

.product-review-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.product-review-card__stars { font-size: 16px; letter-spacing: 2px; flex-shrink: 0; }
.product-review-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.product-review-card__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
}
.product-review-card__verified {
  font-size: 9px;
  letter-spacing: .1em;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 7px;
}
.product-review-card__date {
  font-size: 10px;
  letter-spacing: .06em;
  opacity: .4;
}
.product-review-card__body {
  font-size: 14px;
  line-height: 1.7;
  opacity: .8;
  margin: 0 0 10px;
}
.product-review-card__subs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.product-review-card__sub {
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .5;
  display: flex;
  align-items: center;
  gap: 5px;
}
.product-review-card__sub-stars { font-size: 11px; letter-spacing: 1px; }

/* Write a review form */
.product-review-form-wrap {
  border: 1.5px solid var(--ink);
  padding: 28px 28px 24px;
  background: var(--paper);
}
.product-review-form-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.product-review-form__name {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
}
.product-review-form__name label { font-size: 10px; letter-spacing: .12em; }
.product-review-form__name input {
  padding: 8px 12px;
  border: 1px solid rgba(10,10,13,.2);
  font-size: 13px;
  max-width: 280px;
}

.product-review-form__ratings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.product-review-stars-input { display: flex; flex-direction: column; gap: 6px; }
.product-review-stars-input__label { font-size: 10px; letter-spacing: .1em; }
.product-review-stars-input__stars { display: flex; gap: 2px; }
.product-review-stars-input__stars button {
  background: none;
  border: none;
  font-size: 22px;
  color: #e5e5e5;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color .08s, transform .08s;
}
.product-review-stars-input__stars button:hover,
.product-review-stars-input__stars button.is-active { color: #f59e0b; }
.product-review-stars-input__stars button:hover { transform: scale(1.15); }

.product-review-form__body { display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px; }
.product-review-form__body label { font-size: 10px; letter-spacing: .12em; }
.product-review-form__body textarea {
  padding: 10px 12px;
  border: 1px solid rgba(10,10,13,.2);
  font-size: 13px;
  font-family: var(--f-text);
  resize: vertical;
  min-height: 80px;
}
.product-review-form__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.product-review-form__status { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; }
.product-review-form__status.is-error { color: #dc2626; }

/* ── Auth pages (Sign In / Sign Up) ─────────────────────────────────────── */
.sc-auth-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--gutter);
}
.sc-auth-page__inner {
  width: 100%;
  max-width: 480px;
}
.sc-auth-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 36px;
}
.sc-auth-tab {
  font-size: 11px;
  letter-spacing: .14em;
  padding: 10px 20px;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  color: var(--ink);
  text-decoration: none;
  opacity: .4;
  transition: opacity .12s;
}
.sc-auth-tab:hover { opacity: .7; }
.sc-auth-tab.is-active { opacity: 1; border-bottom-color: var(--accent); }

.sc-auth-panel { display: none; }
.sc-auth-panel.is-active { display: block; }

.sc-auth-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 48px);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.sc-auth-sub {
  font-size: 11px;
  letter-spacing: .18em;
  opacity: .35;
  margin: 0 0 28px;
}
.sc-auth-form { display: flex; flex-direction: column; gap: 16px; }

.sc-auth-field { display: flex; flex-direction: column; gap: 5px; }
.sc-auth-field label.mono {
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 700;
}
.sc-auth-field input.input-text {
  padding: 11px 14px;
  border: 1.5px solid rgba(10,10,13,.2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  transition: border-color .12s;
}
.sc-auth-field input.input-text:focus { border-color: var(--accent); }

.sc-auth-field--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.sc-auth-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  cursor: pointer;
}
.sc-auth-forgot {
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--ink);
  opacity: .4;
  text-decoration: none;
  transition: opacity .12s;
}
.sc-auth-forgot:hover { opacity: 1; color: var(--accent); }

.sc-auth-actions { display: flex; flex-direction: column; gap: 10px; }
.sc-auth-btn { width: 100%; }

.sc-auth-switch {
  font-size: 10px;
  letter-spacing: .1em;
  opacity: .5;
  margin: 20px 0 0;
  text-align: center;
}
.sc-auth-switch a { color: var(--accent); text-decoration: none; }

.sc-auth-terms {
  font-size: 9px;
  letter-spacing: .08em;
  opacity: .35;
  margin: 4px 0 0;
  text-align: center;
}
.sc-auth-terms a { color: inherit; }

/* WooCommerce error/success notices on auth page */
.sc-auth-page .woocommerce-error,
.sc-auth-page .woocommerce-message,
.sc-auth-page .woocommerce-info {
  list-style: none;
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 13px;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
}
.sc-auth-page .woocommerce-error { border-left-color: #dc2626; }

/* ── My Account (logged-in) ──────────────────────────────────────────────── */
.sc-account-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  min-height: 70vh;
  align-items: start;
}
.sc-account-sidebar {
  border-right: 1.5px solid var(--ink);
  padding: 40px 28px 40px 0;
  position: sticky;
  top: 80px;
}
.sc-account-user {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.sc-account-avatar__img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 0;
  display: block;
}
.sc-account-user__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 2px;
}
.sc-account-user__email {
  font-size: 10px;
  letter-spacing: .06em;
  opacity: .45;
  margin: 0;
}
.sc-account-badge {
  display: inline-block;
  font-size: 8px;
  letter-spacing: .12em;
  background: var(--accent);
  color: var(--ink);
  padding: 2px 7px;
  font-weight: 700;
  margin-top: 5px;
}
.sc-account-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc-account-nav__item {
  font-size: 10px;
  letter-spacing: .12em;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  opacity: .5;
  transition: opacity .12s, background .12s;
  border-radius: 0;
}
.sc-account-nav__item:hover { opacity: 1; background: var(--paper-2); }
.sc-account-nav__item.is-active { opacity: 1; font-weight: 700; background: var(--paper-2); }
.sc-account-nav__item--accent { color: var(--accent); opacity: .8; margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 14px; }
.sc-account-nav__item--accent:hover { opacity: 1; }

.sc-account-content {
  padding: 40px 0 40px 48px;
}

/* Override WC default my-account styles inside our layout */
.sc-account-content .woocommerce-MyAccount-content h2,
.sc-account-content .woocommerce-MyAccount-content h3 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 0;
}
.sc-account-content table.shop_table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.sc-account-content table.shop_table th {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  text-align: left;
}
.sc-account-content table.shop_table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.sc-account-content .button,
.sc-account-content .woocommerce-Button {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity .12s;
}
.sc-account-content .button:hover { opacity: .8; }

@media (max-width: 768px) {
  .sc-account-page { grid-template-columns: 1fr; }
  .sc-account-sidebar { border-right: none; border-bottom: 1.5px solid var(--ink); padding: 24px 0; position: static; }
  .sc-account-content { padding: 28px 0; }
  .sc-auth-page { padding: 40px var(--gutter); align-items: flex-start; }
}

/* ── About page ──────────────────────────────────────────────────────────── */

/* Sticky subnav — removed */
.about-subnav { display: none !important; }
.about-subnav-DISABLED {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.about-subnav__inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.about-subnav__inner::-webkit-scrollbar { display: none; }
.about-subnav__link {
  font-size: 9px;
  letter-spacing: .16em;
  padding: 12px 16px;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s;
  border-bottom: 2px solid transparent;
}
.about-subnav__link:hover { color: rgba(255,255,255,.8); }
.about-subnav__link.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Story section */
.about-story-section { padding-top: 48px; padding-bottom: 48px; }
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: flex-start;
}
.about-story-grid--single { grid-template-columns: 1fr; max-width: 720px; }
.about-prose { font-size: 16px; line-height: 1.8; }
.about-prose p { margin: 0 0 20px; }
.about-story-img { width: 100%; display: block; }
.about-story-placeholder {
  aspect-ratio: 4/3;
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Beliefs */
.about-beliefs-section { padding-top: 48px; padding-bottom: 48px; }
.about-beliefs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
@media (max-width: 600px) {
  .about-beliefs-grid { grid-template-columns: 1fr; }
  .about-belief { align-items: center; text-align: center; }
  .about-belief__rule { margin: 0 auto; }
}
.about-belief { display: flex; flex-direction: column; gap: 14px; }
.about-belief__rule {
  display: block;
  height: 3px;
  width: 40px;
  background: var(--accent);
}
.about-belief__text {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(18px, 2vw, 24px);
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--paper);
  margin: 0;
}

/* Universe */
.about-universe-section { padding-top: 48px; padding-bottom: 56px; }
.about-universe-stats {
  display: flex;
  gap: 0;
  margin-bottom: 40px;
  border: 1.5px solid var(--ink);
}
.about-universe-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  border-right: 1.5px solid var(--ink);
  gap: 8px;
}
.about-universe-stat:last-child { border-right: none; }
.about-universe-stat__num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  color: var(--ink);
}
.about-universe-stat__label {
  font-size: 9px;
  letter-spacing: .16em;
  opacity: .45;
  color: var(--ink);
}
.about-universe-body {
  font-size: 17px;
  line-height: 1.7;
  opacity: .7;
  max-width: 640px;
  color: var(--ink);
  margin: 0;
}

/* Press boilerplates */
.about-presskit-boilerplate {
  border: 1.5px solid var(--rule);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.about-presskit-boilerplate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.about-presskit-boilerplate__text {
  font-size: 14px;
  line-height: 1.75;
  opacity: .75;
  margin: 0;
}

/* Key facts */
.about-press-facts {
  margin-top: 40px;
  padding: 24px;
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  display: inline-block;
  min-width: 360px;
}
.about-press-factlist { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.about-press-factlist__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  font-size: 13px;
}
.about-press-factlist dt {
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .5;
  padding-top: 2px;
}
.about-press-factlist dd { margin: 0; font-weight: 600; }

/* Press contact card */
.about-press-contact {
  margin-top: 56px;
  padding: 36px 40px;
  background: var(--ink);
  color: var(--paper);
  display: inline-block;
  min-width: 360px;
}
.about-press-contact__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.about-press-contact__title {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--accent);
  margin: 0;
}
.about-press-contact__response {
  font-size: 9px;
  letter-spacing: .1em;
  opacity: .4;
  margin: 12px 0 0;
}

/* Contact section */
.about-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}
.about-contact-col { display: flex; flex-direction: column; gap: 4px; }
.about-contact-email {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--ink);
  text-decoration: none;
  transition: color .12s;
}
.about-contact-email:hover { color: var(--accent); }
.about-contact-social {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink);
  text-decoration: none;
  opacity: .6;
  transition: opacity .12s;
}
.about-contact-social:hover { opacity: 1; }

@media (max-width: 768px) {
  .about-story-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-story-image { order: -1; }
  .about-universe-stats { flex-direction: column; }
  .about-universe-stat { border-right: none; border-bottom: 1.5px solid rgba(255,255,255,.12); }
  .about-universe-stat:last-child { border-bottom: none; }
  .about-press-facts, .about-press-contact { min-width: 0; width: 100%; box-sizing: border-box; }
}

/* ── Single Reading Order timeline ───────────────────── */
.reading-order-hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  border-bottom: 1.5px solid var(--ink);
}
.reading-order-hero__inner { padding-top: 32px; padding-bottom: 72px; position: relative; }
.reading-order-hero__crumbs { color: rgba(255,255,255,.55); margin-bottom: 48px; }
.reading-order-hero__crumbs a { color: rgba(255,255,255,.72); }
.reading-order-hero__crumbs span { color: var(--cyan); }
.reading-order-timeline-section { background: var(--paper); padding: 64px 0 96px; }
.reading-order-count { font-size: 11px; letter-spacing: .18em; color: var(--accent); font-weight: 800; margin-bottom: 28px; }
.reading-order-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.reading-order-timeline:before { content: ''; position: absolute; left: 23px; top: 0; bottom: 0; width: 3px; background: var(--ink); opacity: .16; }
.reading-order-timeline__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; position: relative; margin-bottom: 28px; }
.reading-order-timeline__marker { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: 24px; }
.reading-order-timeline__marker span { width: 48px; height: 48px; border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; font-weight: 900; box-shadow: 5px 5px 0 var(--ink); }
.reading-order-entry { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; background: #fff; border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(10,10,13,.12); padding: 22px; }
.reading-order-entry__cover { display: block; background: var(--ink); border: 2px solid var(--ink); align-self: start; }
.reading-order-entry__cover img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.reading-order-entry__eyebrow { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10px; letter-spacing: .16em; color: var(--accent); font-weight: 800; margin-bottom: 8px; text-transform: uppercase; }
.reading-order-entry__title { font-family: var(--f-display); font-weight: 900; font-size: clamp(26px, 3vw, 44px); line-height: .95; letter-spacing: -.025em; text-transform: uppercase; margin: 0 0 10px; }
.reading-order-entry__title a { color: inherit; text-decoration: none; }
.reading-order-entry__title a:hover { color: var(--accent); }
.reading-order-entry__creators { margin-bottom: 16px; }
.reading-order-entry__synopsis { font-size: 15px; line-height: 1.6; max-width: 720px; opacity: .72; margin: 0 0 18px; }
.reading-order-entry__details { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.reading-order-entry__details div { border: 1.5px solid var(--ink); padding: 8px 12px; min-width: 96px; background: var(--paper); }
.reading-order-entry__details dt { font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .52; margin: 0 0 2px; }
.reading-order-entry__details dd { margin: 0; font-weight: 800; font-size: 13px; }
.reading-order-entry__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.reading-order-empty { padding: 80px 0; text-align: center; opacity: .65; }

@media (max-width: 720px) {
  .reading-order-hero__inner { padding-bottom: 48px; }
  .reading-order-timeline-section { padding-top: 40px; }
  .reading-order-timeline:before { left: 17px; }
  .reading-order-timeline__item { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
  .reading-order-timeline__marker span { width: 36px; height: 36px; font-size: 10px; box-shadow: 3px 3px 0 var(--ink); }
  .reading-order-entry { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .reading-order-entry__title { font-size: 24px; }
  .reading-order-entry__synopsis { grid-column: 1 / -1; }
  .reading-order-entry__details, .reading-order-entry__actions { grid-column: 1 / -1; }
}