/* ============================================================
   POUR — Ghost theme stylesheet
   neu-brutalism + pixel art + grape/lime palette.
   Built from the "Pour Design System".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Silkscreen:wght@400;700&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Grape (primary brand purple) */
  --grape-50:#F4ECFD; --grape-100:#E6D4FA; --grape-200:#CDA9F2; --grape-300:#B27FE8;
  --grape-400:#9D58DE; --grape-500:#8B3FD6; --grape-600:#7429BC; --grape-700:#5B2A8C;
  --grape-800:#421E66; --grape-900:#2C1444;
  /* Lime (action / CTA) */
  --lime-50:#F4FEDB; --lime-100:#E8FCB4; --lime-200:#DBFA84; --lime-300:#CDF752;
  --lime-400:#C2F230; --lime-500:#A8DB1C; --lime-600:#82AC12;
  /* Leaf */
  --leaf-300:#7FD45A; --leaf-400:#5DB836; --leaf-500:#45991F;
  /* Pop accents */
  --punch-pink:#E94B8A; --punch-red:#E0392B; --punch-gold:#F5C842; --punch-sky:#4FB8E8;
  /* Ink & paper */
  --ink:#121012; --ink-soft:#3A343C; --ink-faint:#6B6470;
  --paper:#FFFFFF; --paper-warm:#FBF6EF; --paper-haze:#F2ECF6; --line:#E4DCEB;

  /* Semantic aliases */
  --color-brand:var(--grape-500); --color-brand-deep:var(--grape-700); --color-brand-soft:var(--grape-100);
  --color-action:var(--lime-400); --color-action-press:var(--lime-500);
  --color-outline:var(--ink); --color-shadow:var(--ink);
  --text-strong:var(--ink); --text-body:var(--ink-soft); --text-muted:var(--ink-faint);
  --text-on-brand:var(--paper); --text-on-action:var(--ink);
  --surface-app:var(--paper-warm); --surface-card:var(--paper); --surface-sunk:var(--paper-haze);
  --color-success:var(--leaf-400); --color-warning:var(--punch-gold);
  --color-danger:var(--punch-red); --color-info:var(--punch-sky); --color-fav:var(--punch-pink);

  /* Type */
  --font-display:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --font-text:'Nunito',system-ui,-apple-system,sans-serif;
  --font-pixel:'Silkscreen','Courier New',monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fw-black:900;
  --fs-2xs:0.6875rem; --fs-xs:0.75rem; --fs-sm:0.875rem; --fs-base:1rem; --fs-md:1.125rem;
  --fs-lg:1.375rem; --fs-xl:1.75rem; --fs-2xl:2.25rem; --fs-3xl:3rem; --fs-4xl:4rem;
  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.45; --lh-relaxed:1.6;
  --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.04em; --ls-pixel:0.06em;

  /* Spacing (4px base) */
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:2.5rem; --sp-8:3rem; --sp-9:4rem; --sp-10:5rem;

  /* Radii */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-xl:30px; --radius-pill:999px;

  /* Borders */
  --bw-hair:1.5px; --bw:2.5px; --bw-bold:3.5px; --bw-chonk:5px;
  --border:var(--bw) solid var(--color-outline);
  --border-bold:var(--bw-bold) solid var(--color-outline);

  /* Hard offset shadows — the signature */
  --shadow-xs:2px 2px 0 0 var(--color-shadow);
  --shadow-sm:3px 3px 0 0 var(--color-shadow);
  --shadow-md:5px 5px 0 0 var(--color-shadow);
  --shadow-lg:7px 7px 0 0 var(--color-shadow);
  --shadow-xl:10px 10px 0 0 var(--color-shadow);
  --shadow-grape:5px 5px 0 0 var(--grape-700);
  --shadow-lime:5px 5px 0 0 var(--lime-600);
  --shadow-soft:0 10px 30px -8px rgba(44,20,68,0.35);
  --press-shift:3px;

  /* Motion */
  --ease-pop:cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:340ms;

  --wrap:1180px;
  --wrap-narrow:720px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--gh-font-body, var(--font-text));
  font-weight:var(--fw-semibold);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--text-body);
  background:var(--surface-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--grape-600); text-decoration:none; }
a:hover { color:var(--grape-500); }
::selection { background:var(--lime-300); color:var(--ink); }
:focus-visible { outline:3px solid var(--lime-400); outline-offset:2px; border-radius:4px; }
.pixelated { image-rendering:pixelated; image-rendering:crisp-edges; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

h1,h2,h3,h4 {
  font-family:var(--gh-font-heading, var(--font-display));
  font-weight:var(--fw-extrabold);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--text-strong);
  margin:0 0 var(--sp-4);
}

.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-5); }
.pixel { font-family:var(--font-pixel); letter-spacing:var(--ls-pixel); text-transform:uppercase; }

/* ============================================================
   BUTTONS / CHIPS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  font-family:var(--font-text); font-weight:var(--fw-extrabold); font-size:var(--fs-md);
  line-height:1; color:var(--ink); background:var(--lime-400);
  border:var(--bw-bold) solid var(--color-outline); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); cursor:pointer; white-space:nowrap; user-select:none;
  transition:transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-pop), background var(--dur-fast) var(--ease-out);
}
.btn:hover { transform:translate(-1px,-1px); box-shadow:var(--shadow-md); background:var(--lime-300); color:var(--ink); }
.btn:active { transform:translate(2px,2px); box-shadow:var(--shadow-xs); }
.btn--grape { background:var(--grape-500); color:var(--paper); }
.btn--grape:hover { background:var(--grape-400); color:var(--paper); }
.btn--outline { background:var(--paper); color:var(--ink); }
.btn--outline:hover { background:var(--paper-haze); color:var(--ink); }
.btn--sm { padding:8px 16px; font-size:var(--fs-sm); border-radius:var(--radius-sm); }
.btn--lg { padding:16px 30px; font-size:var(--fs-lg); }
.btn--block { width:100%; }

.chip {
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px;
  font-family:var(--font-text); font-weight:var(--fw-bold); font-size:var(--fs-sm); line-height:1;
  color:var(--ink); background:var(--paper);
  border:var(--bw) solid var(--color-outline); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-xs); white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-pop);
}
a.chip:hover { transform:translate(-1px,-1px); box-shadow:var(--shadow-sm); color:var(--ink); }
.chip--grape { background:var(--grape-500); color:var(--paper); }
.chip--lime { background:var(--lime-400); color:var(--ink); }

.badge {
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:4px 8px; font-family:var(--font-pixel); font-size:var(--fs-2xs);
  letter-spacing:var(--ls-pixel); text-transform:uppercase; line-height:1;
  color:var(--paper); background:var(--grape-500);
  border:var(--bw) solid var(--color-outline); border-radius:var(--radius-xs);
  box-shadow:var(--shadow-xs);
}
.badge--lime { background:var(--lime-400); color:var(--ink); }
.badge--gold { background:var(--punch-gold); color:var(--ink); }
.badge--pink { background:var(--punch-pink); color:var(--paper); }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position:sticky; top:0; z-index:100;
  background:var(--paper-warm);
  border-bottom:var(--bw-bold) solid var(--ink);
}
.site-header__inner {
  display:flex; align-items:center; gap:var(--sp-5);
  min-height:72px; padding-top:var(--sp-3); padding-bottom:var(--sp-3);
}
.site-brand { display:inline-flex; align-items:center; gap:var(--sp-3); flex:none; }
.site-brand__mark { width:44px; height:44px; flex:none; }
.site-brand__mark img, .site-brand__mark svg { width:100%; height:100%; }
.site-brand__name {
  font-family:var(--font-display); font-weight:var(--fw-extrabold);
  font-size:var(--fs-xl); letter-spacing:var(--ls-tight); color:var(--ink); line-height:1;
}
.site-nav { margin-left:auto; }
.site-nav ul { display:flex; align-items:center; gap:var(--sp-2); list-style:none; margin:0; padding:0; }
.site-nav a {
  display:inline-flex; align-items:center; padding:8px 14px;
  font-weight:var(--fw-bold); font-size:var(--fs-sm); color:var(--ink);
  border:var(--bw) solid transparent; border-radius:var(--radius-pill);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover, .site-nav li.nav-current a {
  background:var(--paper); border-color:var(--ink); box-shadow:var(--shadow-xs); color:var(--ink);
}
.site-header__cta { flex:none; }
.nav-toggle {
  display:none; flex:none; margin-left:auto;
  width:46px; height:46px; align-items:center; justify-content:center;
  background:var(--paper); border:var(--bw-bold) solid var(--ink);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-xs); cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content:''; display:block; width:22px; height:3px; background:var(--ink); border-radius:2px; position:relative;
}
.nav-toggle span::before { position:absolute; top:-7px; }
.nav-toggle span::after { position:absolute; top:7px; }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 120% at 85% -10%, var(--grape-100) 0%, transparent 55%),
    var(--paper-warm);
  border-bottom:var(--bw-bold) solid var(--ink);
}
.hero__inner { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-7); align-items:center;
  padding-top:var(--sp-9); padding-bottom:var(--sp-9); }
.hero__eyebrow { margin-bottom:var(--sp-4); color:var(--grape-600); font-size:var(--fs-xs); }
.hero__title { font-size:var(--fs-4xl); margin-bottom:var(--sp-4); }
.hero__title .hl { color:var(--grape-500); }
.hero__lead { font-size:var(--fs-md); max-width:34ch; margin-bottom:var(--sp-6); color:var(--ink-soft); }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.hero__art {
  position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--lime-300);
  border:var(--bw-chonk) solid var(--ink); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); padding:var(--sp-7); aspect-ratio:1/1;
}
.hero__art svg { width:72%; height:auto; filter:drop-shadow(4px 4px 0 rgba(18,16,18,0.15)); }
.hero__art .spark { position:absolute; font-family:var(--font-pixel); color:var(--punch-gold);
  -webkit-text-stroke:1px var(--ink); font-size:var(--fs-lg); }
.hero__art .spark.s1 { top:14px; left:18px; } .hero__art .spark.s2 { bottom:18px; right:22px; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section { padding-top:var(--sp-8); padding-bottom:var(--sp-8); }
.section__head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4);
  margin-bottom:var(--sp-6); }
.section__title { font-size:var(--fs-2xl); margin:0; }
.section__title .tick {
  display:inline-block; font-family:var(--font-pixel); font-size:var(--fs-xs);
  color:var(--ink); background:var(--lime-400); padding:5px 9px; border:var(--bw) solid var(--ink);
  border-radius:var(--radius-xs); box-shadow:var(--shadow-xs); vertical-align:middle; margin-right:10px;
  text-transform:uppercase; letter-spacing:var(--ls-pixel);
}
.section__link { font-weight:var(--fw-bold); font-size:var(--fs-sm); white-space:nowrap; }

/* ============================================================
   POST FEED / CARDS
   ============================================================ */
.feed { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.feed--with-feature { grid-template-columns:repeat(3,1fr); }

.post-card {
  display:flex; flex-direction:column;
  background:var(--surface-card);
  border:var(--bw-bold) solid var(--ink); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-pop), box-shadow var(--dur-base) var(--ease-pop);
}
.post-card:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
.post-card__media { position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  border-bottom:var(--bw-bold) solid var(--ink); background:var(--paper-haze); }
.post-card__media img { width:100%; height:100%; object-fit:cover; }
.post-card__media--placeholder { display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, var(--grape-100) 0 14px, var(--paper-haze) 14px 28px); }
.post-card__media--placeholder svg { width:42%; height:auto; opacity:0.92; }
.post-card__tag {
  position:absolute; top:12px; left:12px;
}
.post-card__body { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); flex:1; }
.post-card__title { font-size:var(--fs-lg); margin:0; }
.post-card__title a { color:var(--ink); }
.post-card__title a:hover { color:var(--grape-600); }
.post-card__excerpt { font-size:var(--fs-sm); color:var(--ink-soft); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-card__meta { display:flex; align-items:center; gap:var(--sp-2); margin-top:auto;
  padding-top:var(--sp-3); border-top:var(--bw-hair) solid var(--line);
  font-size:var(--fs-xs); color:var(--ink-faint); font-weight:var(--fw-bold); }
.post-card__avatar { width:26px; height:26px; border-radius:var(--radius-pill);
  border:2px solid var(--ink); object-fit:cover; flex:none; }
.post-card__dot { width:4px; height:4px; border-radius:50%; background:var(--ink-faint); }

/* Feature (first/large) post */
.feature-card { grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  background:var(--surface-card); border:var(--bw-bold) solid var(--ink); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-pop), box-shadow var(--dur-base) var(--ease-pop); }
.feature-card:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-xl); }
.feature-card__media { position:relative; min-height:300px; overflow:hidden;
  border-right:var(--bw-bold) solid var(--ink); background:var(--paper-haze); }
.feature-card__media img { width:100%; height:100%; object-fit:cover; }
.feature-card__media--placeholder { display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, var(--grape-100) 0 16px, var(--paper-haze) 16px 32px); }
.feature-card__media--placeholder svg { width:46%; }
.feature-card__body { padding:var(--sp-7); display:flex; flex-direction:column; gap:var(--sp-4);
  justify-content:center; }
.feature-card__title { font-size:var(--fs-2xl); margin:0; }
.feature-card__title a { color:var(--ink); }
.feature-card__title a:hover { color:var(--grape-600); }
.feature-card__excerpt { color:var(--ink-soft); margin:0; }

/* ============================================================
   SUBSCRIBE / CTA STRIP
   ============================================================ */
.subscribe {
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-6); align-items:center;
  background:var(--grape-500); color:var(--paper);
  border:var(--bw-chonk) solid var(--ink); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); padding:var(--sp-7);
}
.subscribe__mascot { width:120px; height:auto; flex:none; }
.subscribe__title { color:var(--paper); font-size:var(--fs-2xl); margin:0 0 var(--sp-2); }
.subscribe__text { color:var(--grape-100); margin:0 0 var(--sp-5); max-width:48ch; }
.subscribe__form { display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.subscribe__input {
  flex:1; min-width:220px; padding:13px 18px; font-family:var(--font-text);
  font-weight:var(--fw-bold); font-size:var(--fs-base); color:var(--ink); background:var(--paper);
  border:var(--bw-bold) solid var(--ink); border-radius:var(--radius-md); box-shadow:var(--shadow-xs);
}
.subscribe__input::placeholder { color:var(--ink-faint); }

/* ============================================================
   SINGLE POST
   ============================================================ */
.article { padding-top:var(--sp-8); padding-bottom:var(--sp-8); }
.article__inner { max-width:var(--wrap-narrow); margin:0 auto; }
.article__header { text-align:center; margin-bottom:var(--sp-7); }
.article__tags { display:flex; justify-content:center; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.article__title { font-size:var(--fs-3xl); margin:0 0 var(--sp-4); }
.article__excerpt { font-size:var(--fs-md); color:var(--ink-soft); max-width:46ch; margin:0 auto; }
.article__meta { display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  margin-top:var(--sp-5); font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink-faint); }
.article__meta img { width:38px; height:38px; border-radius:var(--radius-pill); border:var(--bw) solid var(--ink); object-fit:cover; }
.article__feature { margin:0 auto var(--sp-8); max-width:var(--wrap); }
.article__feature img { width:100%; border:var(--bw-chonk) solid var(--ink);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); }

/* Article body typography */
.post-content { font-size:var(--fs-md); line-height:var(--lh-relaxed); color:var(--ink-soft); }
.post-content > * + * { margin-top:var(--sp-5); }
.post-content h2 { font-size:var(--fs-2xl); margin-top:var(--sp-8); }
.post-content h3 { font-size:var(--fs-xl); margin-top:var(--sp-7); }
.post-content h4 { font-size:var(--fs-lg); margin-top:var(--sp-6); }
.post-content a { color:var(--grape-600); text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:2px; font-weight:var(--fw-bold); }
.post-content strong { color:var(--ink); font-weight:var(--fw-extrabold); }
.post-content img { border:var(--bw-bold) solid var(--ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.post-content figure { margin:var(--sp-6) 0; }
.post-content figcaption { margin-top:var(--sp-3); text-align:center; font-size:var(--fs-sm); color:var(--ink-faint); }
.post-content blockquote {
  margin:var(--sp-6) 0; padding:var(--sp-5) var(--sp-6);
  background:var(--lime-100); border:var(--bw-bold) solid var(--ink);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-lg);
  color:var(--ink); font-style:normal;
}
.post-content blockquote p { margin:0; }
.post-content ul, .post-content ol { padding-left:1.4em; }
.post-content li + li { margin-top:var(--sp-2); }
.post-content code {
  font-family:var(--font-pixel); font-size:0.82em; background:var(--paper-haze);
  border:var(--bw-hair) solid var(--line); border-radius:var(--radius-xs); padding:2px 6px; color:var(--grape-700);
}
.post-content pre {
  background:var(--ink); color:var(--lime-200);
  border:var(--bw-bold) solid var(--ink); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:var(--sp-5); overflow-x:auto;
}
.post-content pre code { background:none; border:none; color:inherit; padding:0; font-size:0.9em; }
.post-content hr { border:none; border-top:var(--bw-bold) dashed var(--line); margin:var(--sp-8) 0; }
.kg-card { margin:var(--sp-6) 0; }
.kg-width-wide { max-width:var(--wrap); margin-left:50%; transform:translateX(-50%); }
.kg-width-full { max-width:100vw; margin-left:50%; transform:translateX(-50%); }

/* Article footer */
.article__footer { max-width:var(--wrap-narrow); margin:var(--sp-9) auto 0; }
.author-card {
  display:flex; gap:var(--sp-5); align-items:center;
  background:var(--surface-card); border:var(--bw-bold) solid var(--ink);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--sp-6);
}
.author-card__img { width:72px; height:72px; flex:none; border-radius:var(--radius-pill);
  border:var(--bw-bold) solid var(--ink); object-fit:cover; box-shadow:var(--shadow-xs); }
.author-card__name { font-size:var(--fs-lg); margin:0 0 var(--sp-1); }
.author-card__bio { font-size:var(--fs-sm); color:var(--ink-soft); margin:0; }

/* ============================================================
   READ NEXT
   ============================================================ */
.read-next { background:var(--paper-haze); border-top:var(--bw-bold) solid var(--ink); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display:flex; align-items:center; justify-content:center; gap:var(--sp-4);
  padding:var(--sp-8) 0; }
.pagination a, .pagination .page-number {
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  font-weight:var(--fw-extrabold); font-size:var(--fs-sm);
  background:var(--paper); color:var(--ink);
  border:var(--bw-bold) solid var(--ink); border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
}
.pagination a:hover { transform:translate(-1px,-1px); box-shadow:var(--shadow-md); color:var(--ink);
  background:var(--lime-300); }
.pagination .page-number { background:transparent; border-color:transparent; box-shadow:none;
  font-family:var(--font-pixel); font-size:var(--fs-xs); color:var(--ink-faint); letter-spacing:var(--ls-pixel); }

/* ============================================================
   EMPTY / ERROR STATES
   ============================================================ */
.state { text-align:center; max-width:520px; margin:0 auto; padding:var(--sp-10) var(--sp-5); }
.state__mascot { width:160px; height:auto; margin:0 auto var(--sp-5); }
.state__code { font-family:var(--font-pixel); font-size:var(--fs-3xl); color:var(--grape-500);
  -webkit-text-stroke:2px var(--ink); margin-bottom:var(--sp-3); }
.state__title { font-size:var(--fs-2xl); margin-bottom:var(--sp-3); }
.state__text { color:var(--ink-soft); margin-bottom:var(--sp-6); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--ink); color:var(--paper-warm); margin-top:var(--sp-9);
  border-top:var(--bw-chonk) solid var(--grape-500); }
.site-footer__inner { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-7);
  padding-top:var(--sp-8); padding-bottom:var(--sp-7); }
.site-footer__brand { display:inline-flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.site-footer__brand .mark { width:40px; height:40px; }
.site-footer__brand .name { font-family:var(--font-display); font-weight:var(--fw-extrabold);
  font-size:var(--fs-lg); color:var(--paper); }
.site-footer p { color:#C9C2D2; font-size:var(--fs-sm); max-width:40ch; }
.site-footer h4 { color:var(--lime-300); font-family:var(--font-pixel); font-size:var(--fs-2xs);
  letter-spacing:var(--ls-pixel); text-transform:uppercase; margin-bottom:var(--sp-4); }
.site-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.site-footer a { color:var(--paper-warm); font-weight:var(--fw-bold); font-size:var(--fs-sm); }
.site-footer a:hover { color:var(--lime-300); }
.site-footer__bottom { border-top:var(--bw-hair) solid #34303A; padding:var(--sp-5) 0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.site-footer__bottom .pixel { color:var(--ink-faint); font-size:var(--fs-2xs); }
.site-footer__bottom a { color:#C9C2D2; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .feed { grid-template-columns:repeat(2,1fr); }
  .hero__inner { grid-template-columns:1fr; }
  .hero__art { max-width:360px; }
  .feature-card { grid-template-columns:1fr; }
  .feature-card__media { border-right:none; border-bottom:var(--bw-bold) solid var(--ink); min-height:240px; }
  .site-footer__inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  :root { --fs-4xl:2.75rem; --fs-3xl:2.25rem; --fs-2xl:1.875rem; }
  .feed { grid-template-columns:1fr; }
  .site-nav { display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--paper-warm); border-bottom:var(--bw-bold) solid var(--ink); padding:var(--sp-4); }
  .site-nav.is-open { display:block; }
  .site-nav ul { flex-direction:column; align-items:stretch; gap:var(--sp-2); }
  .site-nav a { justify-content:flex-start; }
  .nav-toggle { display:inline-flex; }
  .site-header__cta { display:none; }
  .subscribe { grid-template-columns:1fr; text-align:center; }
  .subscribe__mascot { margin:0 auto; }
  .subscribe__form { justify-content:center; }
  .site-footer__inner { grid-template-columns:1fr; }
}