/* ==========================================================================
   THE GOBLIN'S CORNER — Design tokens + base components   (v1, 2026-10)
   --------------------------------------------------------------------------
   Plain CSS, no framework. Drop into Eleventy as /css/tokens.css and load it
   before any page-specific CSS.

   Visual direction: "outlined friendly". Light paper background, crisp 2px
   ink outlines, rounded corners, hard offset shadows, cheerful category
   colors, bold friendly display type. Colors stay out of the way of busy,
   colorful 16:9 episode art: accents only appear on chips, buttons, and
   fallback covers, never as large page backgrounds.

   FONTS (Google Fonts only). Put this in <head> BEFORE this stylesheet:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400..700;1,400..700&family=Bricolage+Grotesque:opsz,wght@12..96,600..800&display=swap">
   - Bricolage Grotesque (600–800, optical size): headings, nav, buttons, chips
   - Atkinson Hyperlegible Next (400–700 + italics): body, long-form reading, forms

   THEMING
   - Light tokens live on :root (the default).
   - Dark tokens apply when (a) the OS prefers dark AND the user has not
     forced light, or (b) <html data-theme="dark"> is set by the toggle.
   - Toggle script: set document.documentElement.dataset.theme = "light" | "dark"
     and remember it in localStorage (wrap in try/catch). Remove the attribute
     to go back to "follow the system".
   - Every component reads only semantic tokens (--color-*), so a theme is
     just a different set of values.

   CONTRAST: every text/background pair below was checked with
   check-contrast.py (same folder) — all >= 4.5:1 for text, >= 3:1 for
   UI boundaries / focus ring. Re-run it after changing any color.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LIGHT THEME (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Raw palette — reference these only inside token definitions */
  --ink-900: #17141F;   /* near-black, slightly purple: text + outlines */
  --ink-700: #4D4759;   /* muted text */
  --paper-50: #FFFDF7;  /* page background (warm white) */
  --paper-100: #F3EFE6; /* sunken / alt section background */
  --white: #FFFFFF;

  /* Surfaces */
  --color-bg: var(--paper-50);
  --color-surface: var(--white);         /* cards, header, inputs */
  --color-surface-2: var(--paper-100);   /* alt sections, code, quotes */

  /* Text */
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-700);    /* dates, meta, hints, placeholders */
  --color-link: #5B2BC9;                 /* "sigil purple" */
  --color-link-hover: #3F1A99;

  /* Lines */
  --color-border: var(--ink-900);        /* the signature 2px outline */
  --color-border-subtle: #D9D3C7;        /* decorative dividers only (not UI boundaries) */

  /* Brand action */
  --color-primary: #3DD68C;              /* goblin green fill */
  --color-primary-hover: #2BC27A;
  --color-on-primary: var(--ink-900);    /* text on green: always dark */
  --color-accent: #FFC93C;               /* gold, highlights / mark */

  /* Feedback */
  --color-danger: #B42318;
  --color-success: #146C43;

  /* Focus + shadow */
  --color-focus: #5B2BC9;
  --color-shadow: var(--ink-900);

  /* Inverted bands (logo badge, footer) */
  --color-badge-bg: var(--ink-900);      /* the white logo sits on this */
  --color-badge-shadow: var(--color-primary);
  --color-footer-bg: var(--ink-900);
  --color-footer-text: #F4F1EA;
  --color-footer-muted: #BDB6CC;
  --color-footer-link: #8EF0B8;
  --color-footer-border: #F4F1EA;        /* outlines inside the dark footer */
  --color-footer-input-bg: #221E2C;

  /* Category colors — shared by .chip and .cover-fallback.
     Text on them is always --color-on-cat (dark ink), in BOTH themes. */
  --cat-episode: #7DE2A2;    /* green  */
  --cat-article: #9CCBFF;    /* sky    */
  --cat-news: #FFD84D;       /* yellow */
  --cat-interview: #FFA8D2;  /* pink   */
  --cat-live: #FF7A59;       /* ember  */
  --color-on-cat: var(--ink-900);
}


/* --------------------------------------------------------------------------
   2. DARK THEME — OS default (unless user forced light) ...
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #14121A;
    --color-surface: #1D1A25;
    --color-surface-2: #282432;
    --color-text: #F4F1EA;
    --color-text-muted: #BDB6CC;
    --color-link: #B9A2FF;
    --color-link-hover: #D6C9FF;
    --color-border: #8A81A3;
    --color-border-subtle: #3A3546;
    --color-primary: #4BE39A;
    --color-primary-hover: #6AEBAD;
    --color-on-primary: #17141F;
    --color-accent: #FFD25E;
    --color-danger: #FF8A80;
    --color-success: #6EE7A8;
    --color-focus: #FFD84D;
    --color-shadow: #000000;
    --color-badge-bg: #0E0C13;
    --color-badge-shadow: var(--color-primary);
    --color-footer-bg: #0E0C13;
    --color-footer-text: #F4F1EA;
    --color-footer-muted: #BDB6CC;
    --color-footer-link: #8EF0B8;
    --color-footer-border: #8A81A3;
    --color-footer-input-bg: #1D1A25;
    /* Category fills: same hues, a touch softer so they don't glow on dark */
    --cat-episode: #6FD596;
    --cat-article: #8CBDF5;
    --cat-news: #F5CD45;
    --cat-interview: #F29BC6;
    --cat-live: #F57352;
    --color-on-cat: #17141F;
  }
}

/* ... or explicitly chosen with the toggle (keep identical to the block above) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #14121A;
  --color-surface: #1D1A25;
  --color-surface-2: #282432;
  --color-text: #F4F1EA;
  --color-text-muted: #BDB6CC;
  --color-link: #B9A2FF;
  --color-link-hover: #D6C9FF;
  --color-border: #8A81A3;
  --color-border-subtle: #3A3546;
  --color-primary: #4BE39A;
  --color-primary-hover: #6AEBAD;
  --color-on-primary: #17141F;
  --color-accent: #FFD25E;
  --color-danger: #FF8A80;
  --color-success: #6EE7A8;
  --color-focus: #FFD84D;
  --color-shadow: #000000;
  --color-badge-bg: #0E0C13;
  --color-badge-shadow: var(--color-primary);
  --color-footer-bg: #0E0C13;
  --color-footer-text: #F4F1EA;
  --color-footer-muted: #BDB6CC;
  --color-footer-link: #8EF0B8;
  --color-footer-border: #8A81A3;
  --color-footer-input-bg: #1D1A25;
  --cat-episode: #6FD596;
  --cat-article: #8CBDF5;
  --cat-news: #F5CD45;
  --cat-interview: #F29BC6;
  --cat-live: #F57352;
  --color-on-cat: #17141F;
}


/* --------------------------------------------------------------------------
   3. THEME-INDEPENDENT TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Type families */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale (~1.2 at 360px -> ~1.25 at 1280px viewport) */
  --step--2: clamp(0.78rem, 0.76rem + 0.08vw, 0.83rem);  /* fine print */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem); /* meta, chips */
  --step-0:  clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem); /* body (17-18px) */
  --step-1:  clamp(1.25rem, 1.18rem + 0.33vw, 1.45rem);  /* h4, card title */
  --step-2:  clamp(1.5rem, 1.37rem + 0.6vw, 1.85rem);    /* h3 */
  --step-3:  clamp(1.8rem, 1.57rem + 1.0vw, 2.4rem);     /* h2 */
  --step-4:  clamp(2.15rem, 1.78rem + 1.65vw, 3.1rem);   /* h1 */
  --step-5:  clamp(2.6rem, 2.0rem + 2.6vw, 4.2rem);      /* hero title */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --leading-prose: 1.7;
  --measure: 68ch;              /* long-form reading width */

  /* Spacing scale (4px base) */
  --space-3xs: 0.25rem;  /*  4 */
  --space-2xs: 0.5rem;   /*  8 */
  --space-xs: 0.75rem;   /* 12 */
  --space-s: 1rem;       /* 16 */
  --space-m: 1.5rem;     /* 24 */
  --space-l: 2rem;       /* 32 */
  --space-xl: 3rem;      /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 6rem;     /* 96 */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);  /* page side padding (16px on phones) */
  --container: 76rem;    /* max content width (~1216px) */

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 2px;
  --border: var(--border-width) solid var(--color-border);

  /* Hard offset shadows (no blur — the outlined-card signature) */
  --shadow-sm: 3px 3px 0 0 var(--color-shadow);
  --shadow-md: 5px 5px 0 0 var(--color-shadow);
  --shadow-lg: 8px 8px 0 0 var(--color-shadow);

  /* Focus ring: 3px ring + 2px gap, >= 3:1 against bg in both themes */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-focus);
  --focus-outline: 3px solid var(--color-focus);
  --focus-offset: 2px;

  /* Touch target minimum */
  --tap: 44px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 140ms;
}


/* --------------------------------------------------------------------------
   4. BASE / RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem; /* sticky header offset for #anchors */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-weight: 700; }
h4 { font-size: var(--step-1); font-weight: 700; }

p { margin: 0 0 var(--space-s); }

a {
  color: var(--color-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--color-link-hover); }

/* One focus style everywhere. Never remove without a replacement. */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

::selection { background: var(--color-accent); color: var(--ink-900); }

hr {
  border: 0;
  border-top: var(--border-width) dashed var(--color-border-subtle);
  margin: var(--space-xl) 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   5. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Responsive card grid: 1 col on phones, 2–3 on larger screens */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-l);
}

.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--color-surface-2); }

.stack > * + * { margin-top: var(--space-s); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100px;
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { top: var(--space-s); }


/* --------------------------------------------------------------------------
   6. BUTTONS   <a class="btn btn--primary"> / <button class="btn btn--secondary">
   - All variants: >= 44px tall, 2px outline, hard shadow that "presses" in.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.55rem 1.15rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn:hover {
  color: var(--color-text);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--color-shadow);
}
.btn:focus-visible { outline: var(--focus-outline); outline-offset: 3px; border-radius: var(--radius-pill); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Primary — green fill, dark ink text (both themes) */
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

/* Secondary — surface fill, outlined (the default look above) */
.btn--secondary { background: var(--color-surface); color: var(--color-text); }

/* Ghost — no fill, no shadow; underline on hover. For tertiary actions ("Read more") */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-link);
  padding-inline: 0.5rem;
}
.btn--ghost:hover {
  color: var(--color-link-hover);
  background: var(--color-surface-2);
  transform: none;
  box-shadow: none;
}
.btn--ghost:active { transform: none; }

.btn--sm { min-height: var(--tap); padding: 0.4rem 0.9rem; font-size: var(--step--1); } /* smaller text, same 44px target */
.btn--icon { padding: 0; width: var(--tap); border-radius: 50%; } /* theme toggle, search, menu */


/* --------------------------------------------------------------------------
   7. CATEGORY CHIPS   <a class="chip chip--episode" href="/episodes/">Episode</a>
   Visual height ~30px; when it's a link, an invisible ::after expands the
   hit area to 44px so it still meets the touch-target rule.
   -------------------------------------------------------------------------- */
.chip {
  --chip-bg: var(--color-surface-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 30px;
  padding: 0.15rem 0.7rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-on-cat);
  background: var(--chip-bg);
  border: var(--border-width) solid var(--ink-900); /* always ink: fills are light in both themes */
  border-radius: var(--radius-pill);
}
a.chip::after { content: ""; position: absolute; inset: -7px -2px; } /* 30 + 14 = 44px */
a.chip:hover { color: var(--color-on-cat); box-shadow: var(--shadow-sm); }

.chip--episode   { --chip-bg: var(--cat-episode); }
.chip--article   { --chip-bg: var(--cat-article); }
.chip--news      { --chip-bg: var(--cat-news); }
.chip--interview { --chip-bg: var(--cat-interview); }
.chip--live      { --chip-bg: var(--cat-live); }
.chip--live::before { /* "on air" dot; non-color cue is the LIVE label itself */
  content: ""; width: 0.55em; height: 0.55em; border-radius: 50%;
  background: var(--ink-900);
}

/* Make category color available to any child (cards, fallback covers) */
.cat-episode   { --cat: var(--cat-episode); }
.cat-article   { --cat: var(--cat-article); }
.cat-news      { --cat: var(--cat-news); }
.cat-interview { --cat: var(--cat-interview); }
.cat-live      { --cat: var(--cat-live); }


/* --------------------------------------------------------------------------
   8. CARDS   (listing excerpt card)
   <article class="card cat-episode">
     <a class="card__media" href="…" tabindex="-1" aria-hidden="true"><img …></a>  (or .cover-fallback)
     <div class="card__body">
       <span class="chip chip--episode">Episode</span>
       <h3 class="card__title"><a class="card__link" href="…">Title</a></h3>
       <p class="card__meta"><time datetime="…">Oct 12, 2026</time> · Ep. 204</p>
       <p class="card__excerpt">…</p>
       <span class="card__more" aria-hidden="true">Read more →</span>
     </div>
   </article>
   The title link stretches over the whole card (one tab stop per card).
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.card:has(.card__link:focus-visible) { outline: var(--focus-outline); outline-offset: 3px; }
.card__link:focus-visible { outline: none; } /* stretched link: ring is drawn on the whole card instead */

.card__media {
  display: block;
  aspect-ratio: 16 / 9;
  border-bottom: var(--border);
  background: var(--color-surface-2);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-m);
  flex: 1;
}
.card__title {
  font-size: var(--step-1);
  font-weight: 800;
  line-height: var(--leading-snug);
  margin: var(--space-3xs) 0 0;
}
.card__link { color: var(--color-text); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* stretched link */
.card__link:hover { color: var(--color-text); text-decoration: underline; }
.card .chip { z-index: 2; } /* category chip stays independently clickable */

.card__meta {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.card__excerpt {
  margin: 0;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__more {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-link);
}

/* Featured variant for the homepage latest-episode hero: media left, text right */
.card--feature { box-shadow: var(--shadow-lg); }
@media (min-width: 52rem) {
  .card--feature { flex-direction: row; }
  .card--feature .card__media { flex: 1 1 58%; border-bottom: 0; border-right: var(--border); }
  .card--feature .card__body { flex: 1 1 42%; justify-content: center; padding: var(--space-xl); }
  .card--feature .card__title { font-size: var(--step-3); }
}


/* --------------------------------------------------------------------------
   9. FALLBACK COVER (86 posts without art) — CSS only
   <div class="cover-fallback cat-episode" role="img" aria-label="Episode 57 cover">
     <span class="cover-fallback__kicker">Episode</span>
     <span class="cover-fallback__num">57</span>
     <span class="cover-fallback__brand">The Goblin's Corner</span>
   </div>
   For articles/news, put a short word in __num (e.g. "Article") — it scales down.
   -------------------------------------------------------------------------- */
.cover-fallback {
  --cat: var(--cat-episode);
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  color: var(--color-on-cat);
  background-color: var(--cat);
  /* diagonal "tabletop" stripes + a soft dot grid, all in ink at low alpha */
  background-image:
    radial-gradient(rgb(23 20 31 / 0.14) 1.5px, transparent 1.6px),
    repeating-linear-gradient(-45deg, rgb(23 20 31 / 0.06) 0 14px, transparent 14px 28px);
  background-size: 18px 18px, auto;
  container-type: inline-size;
  text-align: center;
}
.card .cover-fallback { border-bottom: var(--border); }
/* big ink "ring" behind the number */
.cover-fallback::before {
  content: "";
  position: absolute;
  width: 46cqi; aspect-ratio: 1;
  border: 3px solid var(--ink-900);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.35);
  box-shadow: 6px 6px 0 0 var(--ink-900);
  z-index: 0;
}
.cover-fallback > * { position: relative; z-index: 1; }
.cover-fallback__kicker {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(0.8rem, 4.2cqi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cover-fallback__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(2.5rem, 19cqi);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.cover-fallback__brand {
  position: absolute;
  left: 4cqi; bottom: 3.5cqi;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(0.7rem, 3cqi);
  padding: 0.2em 0.6em;
  border: 2px solid var(--ink-900);
  border-radius: var(--radius-pill);
  background: rgb(255 253 247 / 0.85);
  color: var(--ink-900);
}


/* --------------------------------------------------------------------------
   10. SITE HEADER + LOGO BADGE
   <header class="site-header">
     <div class="container site-header__inner">
       <a class="logo-badge" href="/"><img src="/img/logo-white.png" alt="The Goblin's Corner — home" width="…" height="…"></a>
       <nav class="site-nav" aria-label="Main">
         <a href="/" aria-current="page">Home</a> … <a href="https://…teepublic…" class="is-external">Store</a>
       </nav>
       <form class="site-search" role="search">…</form>
       <button class="btn btn--icon theme-toggle" aria-pressed="false" aria-label="Dark theme">…</button>
     </div>
   </header>

   LOGO TREATMENT (recommended): the white PNG sits inside a dark rounded
   "badge" (ink fill, 2px outline, green offset shadow). Works unchanged in
   both themes, keeps the artwork's own drop shadow, and needs no second
   asset. Don't use filter: brightness(0) — it turns the drop shadow solid
   black and fuses it into the letters.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 76px;
  padding-block: var(--space-2xs);
}

.logo-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 6px 12px;
  min-height: var(--tap);
  background: var(--color-badge-bg);
  border: var(--border-width) solid var(--ink-900);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 0 var(--color-badge-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.logo-badge img { height: 48px; width: auto; }
.logo-badge:hover { transform: translate(-1px, -1px) rotate(-1.5deg); box-shadow: 5px 5px 0 0 var(--color-badge-shadow); }
/* In dark theme the ink badge would vanish into the bg, so it gets a light outline */
:root[data-theme="dark"] .logo-badge { border-color: var(--color-border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-badge { border-color: var(--color-border); } }
/* Large badge for the footer/About page */
.logo-badge--lg img { height: clamp(72px, 10vw, 120px); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-inline-start: auto;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
}
.site-nav a:hover { border-color: var(--color-border); color: var(--color-text); }
.site-nav a[aria-current="page"] {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.site-nav a.is-external::after { content: "\2197"; margin-inline-start: 0.25em; } /* ↗ */

/* Mobile: nav collapses behind a menu button (JS toggles [data-open]) */
.nav-toggle { display: none; }
@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; margin-inline-start: auto; }
  .site-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    padding: var(--space-s) var(--gutter) var(--space-m);
    background: var(--color-surface);
    border-bottom: var(--border);
  }
  .site-header[data-open] .site-nav { display: flex; }
  .site-nav a { min-height: 48px; }
}

.site-search { display: flex; align-items: center; gap: var(--space-2xs); }
.site-search .input { min-width: 0; width: 12rem; border-radius: var(--radius-pill); }
@media (max-width: 52rem) { .site-search .input { width: 100%; } }


/* --------------------------------------------------------------------------
   11. PROSE — long-form reading (800–1500-word articles, episode notes)
   <div class="prose"> …markdown output… </div>
   -------------------------------------------------------------------------- */
.prose {
  max-width: var(--measure);
  font-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.22rem);
  line-height: var(--leading-prose);
  color: var(--color-text);
}
.prose > * + * { margin-top: 1.1em; }
.prose p { margin: 0; }
.prose h2 { font-size: var(--step-3); margin: 2em 0 0.5em; }
.prose h3 { font-size: var(--step-2); margin: 1.6em 0 0.4em; }
.prose h4 { font-size: var(--step-1); margin: 1.4em 0 0.3em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0; }
.prose a { font-weight: 700; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-inline-start: 1.4em; margin: 0; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--color-text-muted); font-weight: 700; }
.prose blockquote {
  margin-inline: 0;
  padding: var(--space-s) var(--space-m);
  background: var(--color-surface-2);
  border: var(--border);
  border-left-width: 8px;
  border-radius: var(--radius-md);
  font-style: italic;
}
.prose blockquote p + p { margin-top: 0.8em; }
.prose img, .prose figure img {
  border: var(--border);
  border-radius: var(--radius-md);
}
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-text-muted); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--color-surface-2);
  border-radius: var(--radius-xs);
}
.prose pre {
  overflow-x: auto;
  padding: var(--space-s);
  background: var(--color-surface-2);
  border: var(--border);
  border-radius: var(--radius-md);
}
.prose pre code { padding: 0; background: none; }
.prose hr { margin: 2.5em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 0.5em 0.75em; border-bottom: 1px solid var(--color-border-subtle); text-align: left; }
.prose th { font-family: var(--font-display); border-bottom: var(--border); }

/* Post header (above .prose) */
.post-header { max-width: var(--measure); margin-bottom: var(--space-l); }
.post-header__title { font-size: var(--step-4); margin-top: var(--space-xs); }
.post-header__meta { color: var(--color-text-muted); font-size: var(--step--1); }

/* Embeds: YouTube (16:9) + audio player. Breaks out slightly wider than the text. */
.embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: #000;
}
.embed iframe { width: 100%; height: 100%; border: 0; }
.embed--audio { aspect-ratio: auto; background: var(--color-surface); padding: var(--space-s); }
.embed--audio audio, .embed--audio iframe { width: 100%; min-height: var(--tap); }


/* --------------------------------------------------------------------------
   12. LISTEN-ON BUTTONS
   <ul class="listen-buttons" aria-label="Listen on">
     <li><a class="listen-btn" href="…"><svg aria-hidden="true">…</svg>Spotify</a></li> …
   </ul>
   -------------------------------------------------------------------------- */
.listen-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.listen-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  padding: 0.45rem 1rem 0.45rem 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--color-text);
  background: var(--color-surface);
  text-decoration: none;
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.listen-btn svg, .listen-btn img { width: 26px; height: 26px; flex: none; }
.listen-btn:hover { color: var(--color-text); transform: translate(-1px, -1px); box-shadow: var(--shadow-md); }
.listen-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.listen-btn small { display: block; font-weight: 400; font-size: var(--step--2); color: var(--color-text-muted); line-height: 1; }


/* --------------------------------------------------------------------------
   13. FORMS (footer contact form + search)
   <div class="field">
     <label class="field__label" for="cf-email">Email</label>
     <input class="input" id="cf-email" type="email" autocomplete="email" required aria-describedby="cf-email-err">
     <p class="field__error" id="cf-email-err" hidden>Enter an email like you@example.com</p>
   </div>
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-s); }
.form__row { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.field { display: grid; gap: var(--space-3xs); }
.field__label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.field__label .req { color: inherit; font-weight: 400; } /* "(required)" text, not just an asterisk */
.field__hint { margin: 0; font-size: var(--step--1); color: var(--color-text-muted); }
.field__error { margin: 0; font-size: var(--step--1); font-weight: 700; color: var(--color-danger); }
.field__error::before { content: "\26A0\FE0E  "; } /* ⚠ — non-color cue */

.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap);
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: max(16px, var(--step-0)); /* >=16px stops iOS zoom */
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-body); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: var(--shadow-sm);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  border-width: 3px;
}
.form__status { font-weight: 700; }
.form__status--ok { color: var(--color-success); }
.form__status--err { color: var(--color-danger); }

/* Honeypot spam trap (hide from people, not bots) */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* --------------------------------------------------------------------------
   14. SITE FOOTER — dark band in both themes (pairs with the logo badge)
   Contains: contact form, socials, listen-on, merch.
   Components inside are re-tokened so .btn / .input / .listen-btn just work.
   -------------------------------------------------------------------------- */
.site-footer {
  --color-text: var(--color-footer-text);
  --color-text-muted: var(--color-footer-muted);
  --color-link: var(--color-footer-link);
  --color-link-hover: var(--color-footer-text);
  --color-border: var(--color-footer-border);
  --color-surface: var(--color-footer-input-bg);
  --color-surface-2: var(--color-footer-input-bg);
  --color-bg: var(--color-footer-bg);
  --color-shadow: #000000;
  --color-danger: #FF8A80;
  --color-success: #6EE7A8;
  --color-focus: #FFD84D;
  background: var(--color-footer-bg);
  color: var(--color-text);
  border-top: var(--border-width) solid var(--ink-900);
  padding-block: var(--space-2xl) var(--space-l);
  margin-top: var(--space-3xl);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.site-footer h2, .site-footer h3 { color: var(--color-text); font-size: var(--step-2); }
.site-footer .btn--primary { --color-on-primary: var(--ink-900); }
.site-footer .logo-badge { border-color: var(--color-footer-border); } /* ink badge on ink band needs a visible edge */
.site-footer__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(244 241 234 / 0.2);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

/* Social icon row (Facebook, Twitch, Discord, YouTube) — 44px circles */
.social-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.social-links a {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--color-text);
  border: var(--border);
  border-radius: 50%;
  background: transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.social-links a:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--color-primary); color: var(--color-text); }
.social-links svg { width: 22px; height: 22px; }