/* Lexend, self-hosted (SIL Open Font License). One variable file per
   script range covers every weight. */
@font-face {
  font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/lexend-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* TheJokeDB — design system
   Layers: tokens → base → components → utilities.
   Mobile first. Fluid type and spacing via clamp(); media queries only where
   layout genuinely changes shape. Colours are defined once with light-dark();
   the theme is chosen with color-scheme on <html> (data-theme), and seasons
   override the brand tokens via data-season. */

@layer tokens, base, components, utilities;

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* type */
    --font-sans: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --text-md: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
    --text-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
    --text-xl: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
    --text-2xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
    --text-3xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    --text-4xl: clamp(1.625rem, 1.25rem + 1.6vw, 2.125rem);
    --text-hero-display: clamp(2.125rem, 1.3rem + 3.4vw, 3.75rem); /* 34 → 60 */
    --text-hero-heading: clamp(1.5625rem, 1.05rem + 2vw, 2.5rem);  /* 25 → 40 */
    --leading-tight: 1.1;
    --leading-snug: 1.28;
    --leading-normal: 1.5;
    --leading-loose: 1.65;
    --tracking-tight: -0.03em;
    --tracking-snug: -0.015em;
    --tracking-wide: 0.12em;

    /* spacing (fluid where it matters) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    --space-6: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
    --space-7: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    --space-8: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
    --gutter: clamp(1rem, 0.4rem + 2.8vw, 3.125rem);
    --content-max: 1300px;
    --prose-max: 40rem;

    /* radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-3xl: 18px;
    --radius-pill: 999px;

    /* motion */
    --ease-pop: cubic-bezier(0.3, 1.5, 0.5, 1);
    --ease-bounce: cubic-bezier(0.3, 1.6, 0.5, 1);
    --dur-fast: 80ms;
    --dur-base: 200ms;
    --dur-slow: 450ms;

    /* brand accents — these are what a season swaps */
    --brand: #1b1f3b;
    --accent-1: #ffc93c; /* sun yellow: face, DB badge */
    --accent-2: #ff6f91; /* pink: mouth */
    --accent-3: #2fd3a1; /* mint */
    --dom: light-dark(#2f63f5, #4d7bff);        /* dominant action blue */
    --dom-shadow: light-dark(#1c45c7, #a9bfff); /* raised-button offset */
    --punch: light-dark(#1c45c7, #8fb0ff);      /* punchline + links */
    --on-dom: #fff;

    /* surfaces + text */
    --bg: light-dark(#ffffff, #0f1630);
    --ink: light-dark(#1b1f3b, #eef1ff);
    --sub: light-dark(#4c5262, #aab3d1);
    --line: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));
    --tint: light-dark(#eef3ff, #18224a);
    --panel: light-dark(#f6f7f9, #18224a);
    --search: light-dark(#d6d9e0, #2a3566);
    --track-off: light-dark(#c9cdd6, #3a4470);
    --footer-bg: #1b1f3b;
    --footer-ink: #fff;
    --footer-sub: rgb(255 255 255 / 0.6);

    /* secondary (outlined) buttons */
    --btn2-bg: light-dark(#ffffff, #18224a);
    --btn2-border: light-dark(#1b1f3b, #c9d4ff);
    --btn2-shadow: light-dark(#1b1f3b, #8fb0ff);

    /* ads stay neutral in both themes */
    --ad-bg: light-dark(#f2f3f5, #262b38);
    --ad-stripe-1: light-dark(#e4e6ea, #30364a);
    --ad-stripe-2: light-dark(#eceef1, #363c50);
    --ad-ink: light-dark(#6f7582, #a3a9b6);

    /* type tiles (light tints → deep tints) */
    --tile-0: light-dark(#eef3ff, #1c2a5c);
    --tile-1: light-dark(#fff4d6, #3a3218);
    --tile-2: light-dark(#ffe7ee, #3d1f2c);
    --tile-3: light-dark(#e2f9f1, #123a31);
    --tile-4: var(--tile-0);
    --tile-5: var(--tile-1);
    --tile-icon-0: #2f63f5;
    --tile-icon-1: #ffc93c;
    --tile-icon-2: #ff6f91;
    --tile-icon-3: #2fd3a1;
    --tile-icon-4: #2f63f5;
    --tile-icon-5: #ffc93c;

    /* topic bands */
    --band-0: light-dark(#fff4d6, #3a3218);
    --band-1: light-dark(#e2f9f1, #123a31);
    --band-2: light-dark(#ffe7ee, #3d1f2c);
    --band-3: light-dark(#eef3ff, #1c2a5c);
    --band-4: var(--band-0);
    --band-5: var(--band-2);
    --band-ink: var(--ink);

    /* mood tiles (flat, saturated) */
    --mood-0: light-dark(#ffd96a, #5c4a12);
    --mood-1: light-dark(#a9c1ff, #2b3f86);
    --mood-2: light-dark(#ffa3bb, #6b2a40);
    --mood-3: light-dark(#7fe3c3, #1d5a49);
    --mood-4: light-dark(#c9cbe0, #3a3d5c);

    /* spiciness levels 0..3: clean, mild, spicy, explicit */
    --lvl-0-ink: light-dark(#1f8a4c, #7ee0a6);
    --lvl-0-bg: light-dark(#e3f5ea, #173a28);
    --lvl-1-ink: light-dark(#a96a06, #ffd27a);
    --lvl-1-bg: light-dark(#fff2cc, #3d3010);
    --lvl-2-ink: light-dark(#d0560f, #ffab78);
    --lvl-2-bg: light-dark(#ffe6d6, #40220f);
    --lvl-3-ink: light-dark(#c22b2b, #ff9a9a);
    --lvl-3-bg: light-dark(#fde0e0, #401717);

    /* collection rules */
    --collection-0: var(--dom);
    --collection-1: var(--accent-1);
    --collection-2: var(--accent-2);
    --collection-3: var(--accent-3);
  }

  /* explicit theme choice wins over the system setting */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  /* seasons: override brand tokens only; everything else follows */
  :root[data-season="halloween"] {
    --accent-1: #ff8c1a;
    --accent-2: #7a3ff2;
    --accent-3: #9bff4d;
    --dom: light-dark(#7a3ff2, #a07bff);
    --dom-shadow: light-dark(#4b1fb3, #d4c6ff);
    --punch: light-dark(#c2410c, #ffb066);
    --footer-bg: #1a0f2e;
    --tile-icon-0: #7a3ff2; --tile-icon-1: #ff8c1a; --tile-icon-2: #9bff4d; --tile-icon-3: #ff8c1a;
  }
  :root[data-season="christmas"] {
    --accent-1: #ffd166;
    --accent-2: #d7263d;
    --accent-3: #1b998b;
    --dom: light-dark(#c8102e, #ff5a6e);
    --dom-shadow: light-dark(#8a0b20, #ffc1c9);
    --punch: light-dark(#0f6b4f, #7ee0a6);
    --footer-bg: #0f3d2e;
  }
  :root[data-season="newyear"] {
    --accent-1: #ffd700;
    --accent-2: #f5f5f5;
    --accent-3: #c0c0c0;
    --dom: light-dark(#111111, #e6e6e6);
    --dom-shadow: light-dark(#b8860b, #ffd700);
    --on-dom: light-dark(#fff, #111);
    --punch: light-dark(#8a6d00, #ffd700);
    --footer-bg: #111111;
  }
  :root[data-season="easter"] {
    --accent-1: #fff3a0;
    --accent-2: #f9a8d4;
    --accent-3: #a7f3d0;
    --dom: light-dark(#7c3aed, #b794ff);
    --dom-shadow: light-dark(#5b21b6, #e3d5ff);
    --punch: light-dark(#be185d, #f9a8d4);
    --footer-bg: #2e1065;
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }
  main { flex: 1; }

  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: var(--leading-tight); text-wrap: balance; }
  a { color: var(--punch); text-underline-offset: 0.15em; }
  a:hover { text-decoration-thickness: 2px; }
  button { font: inherit; color: inherit; }
  img, svg { display: block; max-width: 100%; }
  [hidden] { display: none !important; }

  :focus-visible { outline: 3px solid var(--dom); outline-offset: 3px; border-radius: var(--radius-xs); }

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

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

/* ------------------------------------------------------------ components */
@layer components {

  /* layout ------------------------------------------------------------- */
  .wrap {
    width: min(100% - 2 * var(--gutter), var(--content-max));
    margin-inline: auto;
  }
  .section { padding-block: var(--space-7); }
  .section__head { margin-block-end: var(--space-5); }
  /* a page's own header (submit, favorites, search): more air around it */
  .section__head--page { padding-block-start: var(--space-4); margin-block-end: var(--space-7); .section__title { font-size: var(--text-4xl); } .section__sub { margin-block-start: var(--space-3); } }
  /* after breadcrumbs (tag, collection pages) the crumbs already supply the air above */
  .crumbs + .section > .section__head--page { padding-block-start: 0; }
  .section__title { font-size: var(--text-3xl); color: var(--ink); }
  .section__sub { margin-block-start: var(--space-2); font-size: var(--text-md); color: var(--sub); }
  .kicker {
    font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-wide);
    text-transform: uppercase; color: var(--punch);
  }
  .icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .icon--fill { fill: currentColor; stroke: none; }

  /* header -------------------------------------------------------------- */
  .site-head {
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--line);
    .site-head__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }

    .brand {
      font-size: clamp(1.3125rem, 1.1rem + 0.9vw, 1.625rem); font-weight: 800; letter-spacing: var(--tracking-tight);
      color: var(--ink); text-decoration: none; white-space: nowrap; margin-inline-end: auto;
    }
    .brand__db {
      display: inline-block; margin-inline-start: 3px; padding: 1px 7px; border-radius: var(--radius-md);
      background: var(--accent-1); color: var(--brand); transform: rotate(-6deg);
    }
    .site-nav {
      order: 3; flex-basis: 100%;
      display: flex; gap: var(--space-5); overflow-x: auto;
      font-size: var(--text-sm); font-weight: 600;
      padding-block-start: var(--space-2); border-block-start: 1px solid var(--line);
      a { color: var(--ink); text-decoration: none; white-space: nowrap; }
      a:hover, a[aria-current="page"] { color: var(--punch); }
    }
    .site-tools { display: flex; gap: var(--space-3); align-items: center; }
    .qs {
      position: relative; order: 2; flex-basis: 100%; display: flex; align-items: center;
      .qs__input {
        width: 100%; height: 40px; padding: 0 44px 0 var(--space-3); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink);
        background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-xl); transition: border-color var(--dur-fast), width var(--dur-base);
        &::-webkit-search-decoration, &::-webkit-search-cancel-button { appearance: none; }
        &:focus { outline: 0; border-color: var(--punch); }
      }
      .qs__go { position: absolute; right: 2px; top: 2px; width: 40px; height: 36px; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--sub); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; .icon { width: 18px; height: 18px; } &:hover { color: var(--punch); } }
      .qs__panel {
        position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); z-index: 60; max-height: min(70vh, 32rem); overflow-y: auto;
        padding: var(--space-2); border: 2px solid var(--btn2-border); border-radius: var(--radius-xl); background: var(--bg); color: var(--ink);
        box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.35); animation: pop var(--dur-base) ease-out; text-align: left;
      }
      .qs__group + .qs__group { margin-block-start: var(--space-2); padding-block-start: var(--space-2); border-block-start: 1px solid var(--line); }
      .qs__head { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sub); }
      .qs__item, .qs__all {
        display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
        color: var(--ink); text-decoration: none; font-size: var(--text-sm); font-weight: 500; line-height: 1.35;
        &:hover, &.is-active { background: var(--panel); }
      }
      .qs__item .qs__meta { flex: none; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--punch); }
      .qs__item .qs__count { margin-inline-start: auto; flex: none; font-size: var(--text-xs); color: var(--sub); }
      .qs__item .qs__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .qs__all { margin-block-start: var(--space-2); justify-content: center; font-weight: 700; color: var(--punch); border-block-start: 1px solid var(--line); border-radius: 0; padding-block-start: var(--space-3); }
    }
  }
  @media (min-width: 60rem) {
    .site-head {
      .site-head__in { min-height: 54px; gap: var(--space-6); }
      .brand { margin-inline-end: 0; }
      .site-nav {
        order: 0; flex-basis: auto; flex: 1; border: 0; padding: 0; font-size: var(--text-base);
      }
      .qs { order: 0; flex-basis: auto; width: 15rem; &:focus-within { width: 22rem; } .qs__panel { width: 26rem; left: auto; right: 0; } }
    }
  }

  /* notice bar */
  .notice {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--gutter); background: var(--tint);
    font-size: var(--text-sm); font-weight: 500; color: var(--ink);
    form { margin-inline-start: auto; }
  }
  .link-btn {
    padding: 0; border: 0; background: none; cursor: pointer;
    font-weight: 700; color: var(--punch); text-decoration: underline; white-space: nowrap;
  }

  /* buttons ------------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-xl);
    border: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
    font-weight: 700; font-size: var(--text-sm); color: var(--ink); background: transparent;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  }
  .btn--raised {
    min-height: 60px; padding: 0 clamp(1.125rem, 0.8rem + 1.2vw, 1.75rem); border: 0;
    border-radius: var(--radius-3xl); background: var(--dom); color: var(--on-dom);
    font-size: var(--text-lg); font-weight: 800; box-shadow: 0 5px 0 var(--dom-shadow);
    &:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--dom-shadow); }
    .icon { width: 1.1em; height: 1.1em; stroke-width: 2.75; }
  }
  .btn--outline {
    border-color: var(--btn2-border); background: var(--btn2-bg); box-shadow: 0 3px 0 var(--btn2-shadow);
    &:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn2-shadow); }
  }
  .btn--square { width: 56px; min-height: 56px; padding: 0; border-radius: var(--radius-2xl); font-size: var(--text-lg); .icon { width: 1.4em; height: 1.4em; } }
  .btn--square.btn--sm { width: 48px; min-height: 44px; border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.04em; }
  .btn[aria-pressed="true"] .icon { fill: var(--accent-2); stroke: var(--accent-2); }

  /* family mode: label, "?" popover, switch (only the switch is the control) */
  .fam { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
  .fam__label--long { display: none; }
  .fam__q {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--btn2-border); color: var(--ink); font-size: 0.8rem; font-weight: 800; cursor: pointer; line-height: 1;
    &:hover { background: var(--tint); }
  }
  .fam__help[open] .fam__q { background: var(--dom); border-color: var(--dom); color: var(--on-dom); }
  .fam__panel { width: min(300px, calc(100vw - 2 * var(--gutter))); padding: var(--space-4); white-space: normal; font-weight: 500;
    b { display: block; font-size: var(--text-md); font-weight: 800; }
    p { margin-block-start: var(--space-2); font-size: var(--text-sm); line-height: 1.55; color: var(--sub); }
  }
  .switch {
    display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill);
    .switch__track {
      position: relative; width: 46px; height: 26px; border-radius: var(--radius-pill); flex: none;
      background: var(--track-off); transition: background var(--dur-base);
    }
    .switch__knob {
      position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: left var(--dur-base) var(--ease-pop);
    }
    &[aria-checked="true"] .switch__track { background: var(--dom); }
    &[aria-checked="true"] .switch__knob { left: 23px; }
  }
  @media (min-width: 60rem) {
    .fam__label--short { display: none; }
    .fam__label--long { display: inline; }
  }

  /* menus (details/summary; works without JS) */
  .menu {
    position: relative;
    > summary { list-style: none; }
    > summary::-webkit-details-marker { display: none; }
    .menu__panel {
      position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 50; width: 200px; margin: 0;
      padding: var(--space-2); border: 2px solid var(--btn2-border); border-radius: var(--radius-xl);
      background: var(--bg); box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.35);
      animation: pop var(--dur-base) ease-out;
    }
    &.menu--up .menu__panel { top: auto; bottom: calc(100% + var(--space-2)); right: auto; left: 0; }
    .menu__item[hidden] { display: none; }
    .menu__item {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
      width: 100%; height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md);
      background: transparent; cursor: pointer; text-align: left; font-weight: 500; font-size: var(--text-base);
      &:hover { background: var(--panel); }
      &.is-current { font-weight: 700; background: var(--tint); }
      .icon { color: var(--punch); }
    }
  }

  .share .share__panel { width: max-content; min-width: 200px;
    .menu__item { justify-content: flex-start; gap: var(--space-3); color: var(--ink); font: inherit; font-weight: 500; white-space: nowrap; }
    .menu__item .icon { width: 18px; height: 18px; color: var(--punch); }
    .menu__item.is-done { color: var(--lvl-0-ink); } }
  .joke-page .share .share__panel { right: auto; left: 50%; transform: translateX(-50%); }

  /* badge (spiciness) --------------------------------------------------- */
  .badge {
    display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 9px;
    border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 700; white-space: nowrap;
    background: var(--lvl-bg, var(--lvl-0-bg)); color: var(--lvl-ink, var(--lvl-0-ink));
    .badge__bars { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
    .badge__bars i { display: block; width: 6px; border-radius: 2px; background: currentColor; }
    .badge__bars i:nth-child(1) { height: 6px; }
    .badge__bars i:nth-child(2) { height: 10px; }
    .badge__bars i:nth-child(3) { height: 14px; }
  }
  .badge--0 { --lvl-bg: var(--lvl-0-bg); --lvl-ink: var(--lvl-0-ink); .badge__bars i { opacity: 0.25; } }
  .badge--1 { --lvl-bg: var(--lvl-1-bg); --lvl-ink: var(--lvl-1-ink); .badge__bars i:nth-child(n + 2) { opacity: 0.25; } }
  .badge--2 { --lvl-bg: var(--lvl-2-bg); --lvl-ink: var(--lvl-2-ink); .badge__bars i:nth-child(3) { opacity: 0.25; } }
  .badge--3 { --lvl-bg: var(--lvl-3-bg); --lvl-ink: var(--lvl-3-ink); }

  /* face ---------------------------------------------------------------- */
  .face {
    width: 100%; height: auto; aspect-ratio: 1; overflow: visible;
    .face__head { fill: var(--accent-1); }
    .face__eye { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; transition: transform 150ms; }
    .face__mouth { fill: var(--accent-2); transform-origin: 60px 64px; transition: transform 150ms; }
    .face__teeth { fill: #fff; }
  }
  .is-laughing .face .face__eye { transform: translateY(-3px); }
  .is-laughing .face .face__mouth { transform: scaleY(1.35); }
  .is-laughing .face { animation: bounce 600ms var(--ease-bounce); }
  .is-laughing.alt .face { animation-name: bounce-alt; }

  /* hero ---------------------------------------------------------------- */
  .hero {
    display: grid; gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "meta face" "text text" "vote vote" "actions actions";
    align-items: center;
    padding-block: var(--space-5) var(--space-6);
    .hero__meta { grid-area: meta; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-weight: 600; font-size: var(--text-base); }
    .hero__dot { color: var(--sub); }
    .hero__text { grid-area: text; animation: pop var(--dur-slow) var(--ease-pop); }
    .hero__text.alt { animation-name: pop-alt; }
    .hero__setup, .hero__punch {
      margin-block-start: var(--space-3); max-width: 740px; white-space: pre-line; text-wrap: pretty;
      font-size: var(--text-hero-heading); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug);
    }
    .hero__setup { font-weight: 600; color: var(--ink); }
    .hero__punch { font-weight: 800; color: var(--punch); margin-block-start: var(--space-2); }
    .hero__text--display .hero__setup, .hero__text--display .hero__punch {
      max-width: 820px; font-size: var(--text-hero-display); line-height: 1.12; letter-spacing: var(--tracking-tight);
    }
    .hero__actions { grid-area: actions; display: flex; align-items: center; gap: var(--space-3); margin-block-start: var(--space-3); .btn--raised { flex: 1; } }
    .hero__face {
      grid-area: face; position: relative; width: 44px; padding: 0; border: 0; background: none; cursor: pointer;
      justify-self: end; align-self: start;
    }
    .hero__ha {
      position: absolute; right: -30px; top: -14px; padding: 5px 11px; border-radius: var(--radius-xl);
      background: var(--bg); border: 3px solid var(--ink); font-weight: 800; font-size: var(--text-md); color: var(--ink);
      transform: rotate(10deg); animation: pop 300ms var(--ease-bounce);
    }
    .hero__empty { grid-column: 1 / -1; color: var(--sub); font-size: var(--text-lg); }
  }
  @media (min-width: 48rem) {
    .hero {
      grid-template-columns: minmax(0, 1fr) 170px; column-gap: var(--space-7);
      grid-template-areas: "meta ." "text face" "vote face" "actions .";
      align-items: end; padding-block: var(--space-8) var(--space-8);
      .hero__face { width: 144px; justify-self: center; align-self: end; }
      .hero__actions { margin-block-start: var(--space-6); .btn--raised { flex: none; } }
    }
  }

  /* tiles (browse by type) ------------------------------------------------ */
  /* vote bar: funny / meh / not funny ------------------------------------- */
  .vote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-4); }
  .hero .vote { grid-area: vote; margin-block-start: 0; }
  .hero .hero__actions { margin-block-start: 0; }
  .vote__btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; font-size: var(--text-sm); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
    .icon { width: 1.4em; height: 1.4em; }
    /* each reaction in its own colour, the same as its verdict text */
    &[value="funny"] { --vote-ink: var(--lvl-0-ink); --vote-bg: var(--lvl-0-bg); }
    &[value="meh"] { --vote-ink: var(--sub); --vote-bg: var(--panel); }
    &[value="not-funny"] { --vote-ink: var(--lvl-1-ink); --vote-bg: var(--lvl-1-bg); }
    &:hover { border-color: var(--vote-ink); background: var(--vote-bg); }
    &:active { transform: scale(0.96); }
    &[aria-pressed="true"] { background: var(--vote-bg); border-color: var(--vote-ink); color: var(--vote-ink); } }
  /* the verdict sits beside the buttons, and drops below them on narrow screens */
  .vote__verdict { flex-basis: 100%; font-size: var(--text-sm); font-weight: 700; color: var(--sub); animation: pop var(--dur-base) ease-out; }
  .vote__verdict--funny { color: var(--lvl-0-ink); }
  .vote__verdict--meh { color: var(--sub); }
  .vote__verdict--notfunny { color: var(--lvl-1-ink); }
  @media (min-width: 48rem) { .vote__verdict { flex-basis: auto; margin-inline-start: var(--space-2); } }
  .vote.is-busy { opacity: 0.7; pointer-events: none; }
  .tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
  .tile {
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4);
    border-radius: var(--radius-lg); background: var(--tile-bg, var(--tile-0)); color: var(--ink); text-decoration: none;
    transition: transform var(--dur-fast);
    &:hover { transform: translateY(-2px); }
    .tile__icon { width: clamp(52px, 4rem, 64px); aspect-ratio: 1; border-radius: var(--radius-2xl); background: var(--tile-icon, var(--tile-icon-0)); flex: none; }
    .tile__title { font-size: var(--text-lg); font-weight: 800; }
    .tile__blurb { font-size: var(--text-sm); color: var(--sub); line-height: 1.4; }
    .tile__count { margin-block-start: auto; font-size: var(--text-sm); font-weight: 700; color: var(--punch); }
  }
  .tile--0 { --tile-bg: var(--tile-0); --tile-icon: var(--tile-icon-0); }
  .tile--1 { --tile-bg: var(--tile-1); --tile-icon: var(--tile-icon-1); }
  .tile--2 { --tile-bg: var(--tile-2); --tile-icon: var(--tile-icon-2); }
  .tile--3 { --tile-bg: var(--tile-3); --tile-icon: var(--tile-icon-3); }
  .tile--4 { --tile-bg: var(--tile-4); --tile-icon: var(--tile-icon-4); }
  .tile--5 { --tile-bg: var(--tile-5); --tile-icon: var(--tile-icon-5); }

  /* moods ----------------------------------------------------------------- */
  .moods { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
  .mood {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); min-height: 92px;
    padding: var(--space-4); border-radius: var(--radius-md); background: var(--mood-bg, var(--mood-0)); color: var(--band-ink); text-decoration: none;
    .mood__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
    .mood__title { font-size: var(--text-lg); font-weight: 800; }
    .mood__blurb { font-size: var(--text-sm); font-weight: 500; line-height: 1.35; }
  }
  .mood--0 { --mood-bg: var(--mood-0); } .mood--1 { --mood-bg: var(--mood-1); } .mood--2 { --mood-bg: var(--mood-2); }
  .mood--3 { --mood-bg: var(--mood-3); } .mood--4 { --mood-bg: var(--mood-4); }

  /* topic bands ----------------------------------------------------------- */
  .bands { border-radius: var(--radius-lg); overflow: hidden; }
  .band {
    display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-5);
    background: var(--band-bg, var(--band-0)); color: var(--band-ink);
    .band__title { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
    .band__count { margin-block-start: var(--space-1); font-size: var(--text-sm); font-weight: 600; opacity: 0.8; }
    .band__sample { font-size: var(--text-md); font-weight: 500; line-height: 1.4; white-space: pre-line; b { font-weight: 800; } }
    .badge { margin-block-end: var(--space-2); }
    .band__more { font-size: var(--text-sm); font-weight: 700; color: var(--band-ink); white-space: nowrap; }
  }
  @media (min-width: 48rem) {
    .band { grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6); }
  }
  .band--0 { --band-bg: var(--band-0); } .band--1 { --band-bg: var(--band-1); } .band--2 { --band-bg: var(--band-2); }
  .band--3 { --band-bg: var(--band-3); } .band--4 { --band-bg: var(--band-4); } .band--5 { --band-bg: var(--band-5); }

  /* collections, with the guide beside them on wide screens --------------- */
  .home-grid { display: grid; gap: var(--space-7); align-items: start; }
  .home-grid__side { display: flex; flex-direction: column; gap: var(--space-5); }
  @media (min-width: 75rem) {
    .home-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .home-grid .guide { margin-block-start: 0; padding-block-start: 0; border: 0; }
  }
  .collections { display: grid; gap: var(--space-6) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
  .collection {
    border-block-start: 5px solid var(--collection-rule, var(--collection-0)); padding-block-start: var(--space-4);
    .collection__title { font-size: var(--text-xl); line-height: 1.2; }
    .collection__blurb { margin-block-start: var(--space-2); font-size: var(--text-base); line-height: 1.55; color: var(--sub); }
    .collection__sample {
      margin-block-start: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
      background: var(--panel); font-weight: 600; font-size: var(--text-base); line-height: 1.45; color: var(--ink); white-space: pre-line;
    }
    .collection__link { display: inline-block; margin-block-start: var(--space-3); font-size: var(--text-sm); font-weight: 700; }
  }
  .collection--0 { --collection-rule: var(--collection-0); } .collection--1 { --collection-rule: var(--collection-1); }
  .collection--2 { --collection-rule: var(--collection-2); } .collection--3 { --collection-rule: var(--collection-3); }

  /* guide */
  .guide { margin-block-start: var(--space-7); padding-block-start: var(--space-6); border-block-start: 1px solid var(--line); max-width: var(--prose-max);
    h2 { margin-block-start: var(--space-2); font-size: var(--text-4xl); }
    p { margin-block-start: var(--space-4); font-size: var(--text-md); line-height: var(--leading-loose); color: var(--sub); b { color: var(--ink); } }
  }

  /* submit call to action */
  .cta {
    display: grid; gap: var(--space-5); align-items: center; margin-block: var(--space-4) var(--space-8);
    padding: var(--space-6); border-radius: var(--radius-lg); background: var(--tint);
    .cta__title { margin-block-start: var(--space-2); font-size: var(--text-3xl); }
    .cta__body { margin-block-start: var(--space-3); max-width: 46rem; font-size: var(--text-md); line-height: var(--leading-loose); color: var(--sub); }
    .btn--raised { justify-self: start; }
  }
  @media (min-width: 48rem) { .cta { grid-template-columns: minmax(0, 1fr) auto; .btn--raised { justify-self: end; } } }

  /* ads (neutral in every theme) */
  .ad { background: var(--ad-bg); border-radius: var(--radius-md); padding: 10px 14px 14px;
    .ad__label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ad-ink); }
  }

  /* joke cards (browse list, related) -------------------------------------- */
  .cards { display: grid; gap: var(--space-3); }
  .card {
    display: block; padding: var(--space-4) var(--space-4); border-radius: var(--radius-md); background: var(--panel);
    color: var(--ink); text-decoration: none;
    .card__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: 700; }
    .card__text { margin-block-start: var(--space-2); font-size: var(--text-md); font-weight: 500; line-height: 1.4; white-space: pre-line; }
    .card__punch { color: var(--punch); font-weight: 800; }
    &:hover { outline: 2px solid var(--line); }
  }

  /* joke page --------------------------------------------------------------- */
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block-start: var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--sub);
    .crumbs__list { display: contents; list-style: none; margin: 0; padding: 0; }
    .crumbs__item { display: flex; align-items: center; gap: var(--space-3); }
    .crumbs__current { color: var(--ink); }
    a { color: var(--punch); text-decoration: none; } a:hover { text-decoration: underline; }
    .crumbs__sep { opacity: 0.6; } }
  .joke {
    padding-block: var(--space-4) var(--space-6);
    .joke__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-weight: 600; }
    .joke__body { max-width: var(--prose-max); animation: pop var(--dur-slow) var(--ease-pop); }
    .joke__body .joke__para:first-child { margin-block-start: 0; }
    /* the first line is the page's h1 on the joke page; it reads like the rest */
    .joke__para { margin-block-start: var(--space-4); font-size: var(--text-lg); font-weight: 500; line-height: 1.6; letter-spacing: normal; text-wrap: pretty; white-space: pre-line; }
    .joke__punch { margin-block-start: var(--space-5); font-size: var(--text-2xl); font-weight: 800; line-height: 1.25; letter-spacing: var(--tracking-snug); color: var(--punch); white-space: pre-line; }
    .vote { margin-block-start: var(--space-5); }
    .joke__actions { display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-5); .btn--raised { flex: 1; } }
    .joke__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); }
  }
  @media (min-width: 48rem) { .joke .joke__actions .btn--raised { flex: none; } }
  .joke-page .joke {
    padding-block-start: var(--space-6);
    text-align: center;
    .joke__meta, .joke__actions, .vote, .joke__tags { justify-content: center; }
    .joke__body { max-width: 52rem; margin-inline: auto; }
    /* 1.5× the article scale: the joke must stand apart from the chrome at a glance. */
    .joke__para { font-size: calc(var(--text-2xl) * 1.5); line-height: 1.4; }
    .joke__punch { font-size: calc(var(--text-4xl) * 1.5); line-height: 1.15; }
  }
  .joke-page .crumbs { justify-content: center; }
  .chip { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--tint); color: var(--punch); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
  .chip--lvl-0 { background: var(--lvl-0-bg); color: var(--lvl-0-ink); }
  .chip--lvl-1 { background: var(--lvl-1-bg); color: var(--lvl-1-ink); }
  .chip--lvl-2 { background: var(--lvl-2-bg); color: var(--lvl-2-ink); }
  .chip--lvl-3 { background: var(--lvl-3-bg); color: var(--lvl-3-ink); }

  /* the browse directory (topics / moods / types) */
  .dir__head { padding-block: var(--space-7) 0; .section__title { font-size: var(--text-4xl); } .section__sub { max-width: 40rem; margin-block: var(--space-3) var(--space-7); } }
  /* tabs: an underlined strip, the current one in the dominant colour,
     with an optional count pill. Used by the browse directory and the admin. */
  .tabs { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-block-end: var(--space-5); border-block-end: 1px solid var(--line); }
  .tab { display: flex; align-items: center; gap: var(--space-2); padding: 0 2px var(--space-3); margin-block-end: -1px; font-weight: 700; color: var(--sub); text-decoration: none; box-shadow: inset 0 -3px 0 transparent;
    &:hover { color: var(--ink); }
    &[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--dom); }
    .tab__pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; background: var(--panel); color: var(--sub); }
    &[aria-current="page"] .tab__pill { background: var(--dom); color: var(--on-dom); } }
  .dir__head .tabs { margin-block-end: 0; }
  .dir { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-6) 56px; align-items: start; padding-block: var(--space-6) var(--space-8);
    &[data-single] { grid-template-columns: minmax(0, 1fr); } }
  .dir__groups { display: flex; flex-direction: column; gap: 18px; }
  .dir__group { background: var(--panel); border-radius: var(--radius-xl); padding: 22px 28px 10px; }
  .dir__group-head { display: flex; align-items: baseline; gap: var(--space-3); margin-block-end: 10px;
    h2 { margin: 0; font-size: var(--text-xl); line-height: 1.1; letter-spacing: var(--tracking-tight); }
    .dir__total { font-size: var(--text-sm); font-weight: 500; color: var(--sub); }
    .dir__all { margin-inline-start: auto; font-size: var(--text-sm); font-weight: 700; color: var(--punch); text-decoration: none; white-space: nowrap; &:hover { text-decoration: underline; } } }
  .dir__intro { margin: 0 0 var(--space-3); max-width: 46rem; font-size: var(--text-base); line-height: 1.55; color: var(--sub); }
  .dir__stat { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--ink);
    .icon { flex: none; margin-block-start: 2px; color: var(--punch); } }
  .dir__group:has(.dir__stat:last-child) { padding-block-end: 22px; }
  .dir__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: 32px; }
  .dir__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 11px 0; border-block-start: 1px solid var(--line); font-weight: 600; color: var(--ink); text-decoration: none;
    &:hover { color: var(--punch); } }
  .dir__count { font-size: var(--text-sm); font-weight: 500; color: var(--sub); white-space: nowrap; }
  .dir__aside { position: sticky; top: var(--space-5); }
  .dir__jump-title { margin-block-end: 10px; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sub); }
  .dir__jump { display: flex; flex-direction: column;
    a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-decoration: none; &:hover { color: var(--punch); } } }
  @media (max-width: 800px) { .dir { grid-template-columns: minmax(0, 1fr); } .dir__aside { display: none; } .dir__group { padding-inline: var(--space-4); } }
  /* report a joke, error pages */
  .joke__report { margin-block-start: var(--space-4); font-size: var(--text-sm); text-align: center; a { color: var(--sub); } }
  .addresses { margin: var(--space-4) 0 0; display: grid; gap: var(--space-2);
    .addresses__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding-block: var(--space-2); border-block-end: 1px solid var(--line); }
    dt { margin: 0; } dd { margin: 0; font-weight: 600; } }
  @media (max-width: 480px) { .addresses .addresses__row { grid-template-columns: 1fr; gap: var(--space-1); } }
  .report { margin-block-start: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--tint); border: 1px solid var(--line);
    h2 { margin-block-start: 0; } .report__joke { margin: var(--space-3) 0 0; padding-inline-start: var(--space-4); border-inline-start: 4px solid var(--dom); font-weight: 600; a { color: var(--ink); } } }
  .error-page { text-align: center; padding-block-start: var(--space-7);
    .error-page__code { font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--tint); -webkit-text-stroke: 2px var(--punch); }
    .section__title { margin-block-start: var(--space-2); } .search { margin-inline: auto; } .admin__actions { justify-content: center; margin-block-start: var(--space-4); } }

  /* generic text pages */
  .prose { max-width: var(--prose-max); padding-block: var(--space-6) var(--space-8);
    h1 { font-size: var(--text-4xl); }
    h2 { margin-block-start: var(--space-7); font-size: var(--text-2xl); }
    h3 { margin-block-start: var(--space-5); font-size: var(--text-lg); }
    p, li { color: var(--sub); line-height: var(--leading-loose); }
    p { margin-block-start: var(--space-4); }
    ul { margin: var(--space-4) 0 0; padding-inline-start: 1.25em; }
    li + li { margin-block-start: var(--space-2); }
    b { color: var(--ink); }
    code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.1em 0.35em; border-radius: var(--radius-xs); background: var(--panel); color: var(--ink); } }
  .prose h3 { margin-block-start: var(--space-6); font-size: var(--text-xl); }
  .prose pre { margin-block-start: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--panel); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5;
    code { padding: 0; background: none; font-size: inherit; } }
  .prose table { display: block; width: 100%; margin-block-start: var(--space-4); border-collapse: collapse; font-size: var(--text-sm); overflow-x: auto;
    th, td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-block-end: 1px solid var(--line); }
    th { color: var(--sub); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); } }
  .legal .legal__meta { margin-block-start: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--punch); }

  /* footer -------------------------------------------------------------------- */
  .site-foot {
    background: var(--footer-bg); color: var(--footer-ink); border-block-start: 1px solid rgb(255 255 255 / 0.08);
    padding: var(--space-8) var(--gutter);
    a { color: var(--footer-ink); text-decoration: none; }
    a:hover, a:focus-visible { text-decoration: underline; }
    .foot__social {
      display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none;
      a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: rgb(255 255 255 / 0.1); color: var(--footer-ink); }
      a:hover, a:focus-visible { background: rgb(255 255 255 / 0.2); text-decoration: none; }
      /* Icons take the footer colour unless they set their own fill
         (stroke icons say fill="none"; brand icons set nothing). */
      svg { width: 20px; height: 20px; }
      svg:not([fill]) { fill: currentColor; }
    }
    .foot__lang > summary {
      display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); cursor: pointer;
      border: 2px solid rgb(255 255 255 / 0.3); border-radius: var(--radius-lg); font-weight: 600; font-size: var(--text-sm); color: var(--footer-ink);
      .icon { width: 18px; height: 18px; }
      .icon:last-child { width: 14px; height: 14px; transition: transform var(--dur-base); }
    }
    .foot__lang > summary:hover { border-color: rgb(255 255 255 / 0.6); }
    .foot__lang[open] > summary .icon:last-child { transform: rotate(180deg); }
    .foot__lang .menu__panel { color: var(--ink); }
    .foot__lang .menu__item:hover, .foot__lang .menu__item:focus-visible { background: var(--panel); text-decoration: none; }
    .foot__lang { margin-block-end: var(--space-6); }
    .foot__grid { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
    .foot__brand { grid-column: 1 / -1; .foot__name { font-size: var(--text-xl); font-weight: 800; } p { margin-block-start: var(--space-2); font-size: var(--text-sm); opacity: 0.85; max-width: 300px; } }
    .foot__head { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--footer-sub); margin-block-end: var(--space-3); }
    .foot__group { min-width: 0; }
    .foot__links { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-base); font-weight: 600;
      li { margin: 0; } a { display: inline; }
      button { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--footer-ink); text-underline-offset: 0.15em; font-weight: inherit; }
      button:hover, button:focus-visible { text-decoration: underline; }
      button.is-current { text-decoration: none; opacity: 0.7; cursor: default; } }
    .foot__prefs { grid-column: 1 / -1; }
    .seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-lg); background: rgb(255 255 255 / 0.1); max-width: 300px;
      button { flex: 1; height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); cursor: pointer; font-weight: 600; font-size: var(--text-sm); background: transparent; color: rgb(255 255 255 / 0.8); }
      button[aria-checked="true"] { background: #fff; color: var(--brand); } }
    .foot__note { margin-block-start: var(--space-2); font-size: var(--text-xs); opacity: 0.7; }
    .foot__copy { margin-block-start: var(--space-6); font-size: var(--text-sm); opacity: 0.8; }
  }
  @media (min-width: 60rem) {
    .site-foot .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.3fr; }
    .site-foot .foot__brand, .site-foot .foot__prefs { grid-column: auto; }
  }
  :root[data-theme="dark"] .site-foot .seg button[aria-checked="true"] { background: var(--dom); color: #fff; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-foot .seg button[aria-checked="true"] { background: var(--dom); color: #fff; } }

  /* keyframes */
  @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes pop-alt { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes bounce { 0% { transform: none; } 30% { transform: translateY(-12px) rotate(-8deg) scale(1.08); } 60% { transform: rotate(5deg); } 100% { transform: none; } }
  @keyframes bounce-alt { 0% { transform: none; } 30% { transform: translateY(-12px) rotate(8deg) scale(1.08); } 60% { transform: rotate(-5deg); } 100% { transform: none; } }
}

  /* admin ------------------------------------------------------------------------ */
  .admin { background: var(--panel); }
  .admin__shell { display: grid; min-height: 100dvh; grid-template-columns: 1fr; }
  .admin__side {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
    padding: var(--space-3) var(--gutter); background: var(--bg); border-block-end: 1px solid var(--line);
    .brand { font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--ink); text-decoration: none; white-space: nowrap; }
    .admin__badge { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--punch); margin-inline-start: var(--space-2); }
    .admin__nav { display: flex; gap: var(--space-4); font-weight: 600; font-size: var(--text-sm);
      a { color: var(--ink); text-decoration: none; padding: var(--space-1) 0; border-block-end: 2px solid transparent; }
      a[aria-current="page"] { color: var(--punch); border-color: var(--punch); }
      .admin__soon { color: var(--sub); opacity: 0.6; cursor: not-allowed; } }
    .admin__user { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--sub); }
    .admin__site { color: var(--punch); text-decoration: none; font-weight: 600; }
  }
  .admin__main { padding: var(--space-5) var(--gutter) var(--space-8); max-width: var(--content-max); width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5);
    h1 { font-size: var(--text-3xl); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
    h2 { font-size: var(--text-lg); margin-block-end: var(--space-3); }
    h3 { font-size: var(--text-sm); margin-block: var(--space-4) var(--space-2); color: var(--sub); text-transform: uppercase; letter-spacing: var(--tracking-wide); } }
  @media (min-width: 60rem) {
    .admin__shell { grid-template-columns: 220px minmax(0, 1fr); }
    .admin__side { flex-direction: column; align-items: stretch; gap: var(--space-5); padding: var(--space-5) var(--space-4); border-block-end: 0; border-inline-end: 1px solid var(--line); position: sticky; top: 0; height: 100dvh;
      .admin__nav { flex-direction: column; gap: var(--space-2); a, .admin__soon { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 0; } a[aria-current="page"] { background: var(--tint); } }
      .admin__user { margin-inline-start: 0; margin-block-start: auto; flex-direction: column; align-items: flex-start; } }
  }
  .admin__flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--tint); color: var(--ink); font-weight: 600; border-inline-start: 4px solid var(--dom); }
  .admin__error { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--lvl-3-bg); color: var(--lvl-3-ink); font-weight: 600; margin: 0; padding-inline-start: var(--space-6); }
  p.admin__error { padding-inline-start: var(--space-4); }
  .admin__tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .admin__tile { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--line);
    .admin__tile-value { font-size: var(--text-3xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--ink); }
    .admin__tile-label { font-size: var(--text-sm); font-weight: 600; color: var(--sub); text-decoration: none; } a.admin__tile-label { color: var(--punch); } }
  .admin__cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; > * { min-width: 0; } }
  .admin__cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
  .admin__card { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--line); margin: 0;
    p { margin-block-start: var(--space-2); } p:first-of-type { margin-block-start: 0; }
    label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--sub); margin-block-start: var(--space-3); }
    input:not([type=hidden]), textarea, select { display: block; width: 100%; margin-block-start: var(--space-1); padding: var(--space-2) var(--space-3); font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); }
    textarea { resize: vertical; white-space: pre-wrap; }
    .btn { margin-block-start: var(--space-4); } }
  .admin__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); label { margin-block-start: var(--space-3); } }
  .admin__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .admin__filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--line);
    label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--sub); }
    select, input { font: inherit; padding: var(--space-2) var(--space-3); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); } }
  .admin__table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--text-sm);
    th, td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-block-start: 1px solid var(--line); }
    thead th { background: var(--panel); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--sub); border: 0; }
    tbody tr:first-child td { border-block-start: 0; }
    a { color: var(--ink); text-decoration: none; } a:hover { color: var(--punch); }
    .admin__joke { max-width: 60ch; } }
  .admin__table--stats { th { font-weight: 500; color: var(--sub); width: 60%; } td { font-weight: 700; text-align: right; } }
  .admin__status { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; background: var(--tint); color: var(--punch); }
  .admin__status--needs_review { background: var(--lvl-1-bg); color: var(--lvl-1-ink); }
  .admin__status--published { background: var(--lvl-0-bg); color: var(--lvl-0-ink); }
  .admin__status--rejected { background: var(--lvl-3-bg); color: var(--lvl-3-ink); }
  .admin__status--duplicate { background: var(--mood-4); color: var(--ink); }
  .admin__status--processing { background: var(--lvl-2-bg); color: var(--lvl-2-ink); }
  .admin__status--pending { background: var(--lvl-1-bg); color: var(--lvl-1-ink); }
  .admin__status--enriched { background: var(--lvl-2-bg); color: var(--lvl-2-ink); }
  .admin__status--live { background: var(--lvl-0-bg); color: var(--lvl-0-ink); }
  /* review screens */
  kbd { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--panel); color: var(--sub); font-family: var(--font-mono); font-size: 0.75em; line-height: 1.6; text-align: center; vertical-align: middle; }
  .btn kbd { margin-inline-start: 0.4em; border-color: currentColor; background: transparent; color: inherit; opacity: 0.7; }
  .review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); p { margin: 0; } }
  .review__form textarea[name="setup"] { font-size: var(--text-md); line-height: 1.5; }
  .review__form textarea[name="punchline"] { font-size: var(--text-md); font-weight: 700; color: var(--punch); }
  .review__tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); .btn { margin: 0; min-height: 36px; font-size: var(--text-xs); } }
  .review__lang { max-width: 8rem; }
  .review__actions { margin-block-start: var(--space-4); align-items: center; .btn { margin: 0; } }
  .review__legend { margin-block-start: var(--space-4); }
  .review__side { display: flex; flex-direction: column; gap: var(--space-4); }
  .review__reject { summary { cursor: pointer; font-weight: 700; font-size: var(--text-lg); list-style: none; } summary::-webkit-details-marker { display: none; } }
  .admin__tagset { margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md);
    legend { padding: 0 var(--space-1); } .admin__tagset-name { text-transform: capitalize; } }
  .admin__tagset--sensitive { border-color: var(--lvl-2-ink); background: var(--lvl-2-bg); legend { color: var(--lvl-2-ink); } }
  .admin__tagset-grid { display: grid; gap: var(--space-1) var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin-block-start: var(--space-2);
    .admin__check { margin: 0; font-weight: 500; input { width: auto; margin: 0; flex: none; } } }
  .admin__flag { color: var(--lvl-2-ink); font-weight: 700; margin-inline-start: var(--space-1); }
  .admin__text { font-size: var(--text-md); white-space: pre-line; } .admin__text--punch { font-weight: 800; color: var(--punch); }
  .admin__dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); margin: 0;
    dt { color: var(--sub); font-weight: 600; } dd { margin: 0; } ul { margin: 0; padding-inline-start: 1.2em; } }
  .admin__taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2);
    li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } form { margin-inline-start: auto; } }
  .admin__h2-gap { margin-block-start: var(--space-5); }
  .admin__card:has(> .admin__table) { overflow-x: auto; }
  .admin__settings { display: grid; gap: var(--space-4); max-width: 60rem; }
  .admin__settings label { display: block; margin-block-start: var(--space-3); font-weight: 600; }
  .admin__settings small { display: block; font-weight: 400; }
  .admin__social { position: relative; margin-block-start: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md);
    legend { padding: 0 var(--space-1); font-size: var(--text-sm); font-weight: 700; color: var(--sub); }
    label { margin-block-start: var(--space-2); } }
  .admin__social-preview { position: absolute; top: var(--space-2); right: var(--space-3); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--footer-bg); color: var(--footer-ink);
    svg { width: 20px; height: 20px; } svg:not([fill]) { fill: currentColor; } }
  .admin__settings textarea { font-family: var(--font-mono); font-size: var(--text-sm); }
  .admin__settings code { word-break: break-all; }
  .admin__errors { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: light-dark(#fde8e8, #4a1d1d); color: light-dark(#b42318, #ff8a80); }
  .admin__row--deleted td { opacity: 0.6; }
  .admin__check { flex-direction: row !important; align-items: center; gap: var(--space-2) !important; }
  .admin__card--highlight { border-color: var(--dom); background: var(--tint); }
  .admin__secret { display: block; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg); font-family: var(--font-mono); font-size: var(--text-md); word-break: break-all; user-select: all; }
  .admin__fieldset { border: 0; padding: 0; margin: var(--space-3) 0 0; legend { font-size: var(--text-sm); font-weight: 600; color: var(--sub); padding: 0; }
    .admin__check { display: flex; margin-block-start: var(--space-2); input { width: auto; margin: 0; } } }
  .admin__warn { display: block; margin-block-start: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; color: var(--punch); background: var(--tint); border: 1px solid var(--punch); text-decoration: none; }
  .admin--login { display: grid; place-items: center; min-height: 100dvh; }
  .admin__login { width: min(100% - 2 * var(--gutter), 22rem); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--line);
    .brand { font-size: var(--text-xl); font-weight: 800; color: var(--ink); text-decoration: none; }
    h1 { font-size: var(--text-xl); margin-block: var(--space-4) var(--space-3); }
    label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--sub); }
    input { display: block; width: 100%; margin-block: var(--space-1) var(--space-4); padding: var(--space-3); font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); } }

  /* maintenance mode: one card, no chrome */
  .maintenance { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 100dvh; padding: var(--gutter); box-sizing: border-box; background: var(--panel); }
  .maintenance__card { width: 100%; max-width: 30rem; min-width: 0; box-sizing: border-box; padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--line); text-align: center;
    .brand { font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--ink); }
    .maintenance__face { display: flex; justify-content: center; margin-block: var(--space-5) var(--space-3); color: var(--dom); .icon { width: 4rem; height: 4rem; } }
    h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); margin: 0; }
    p { margin: var(--space-3) 0 0; color: var(--sub); line-height: var(--leading-loose); } }

/* ------------------------------------------------------------- utilities */
@layer utilities {
  .flow > * + * { margin-block-start: var(--space-4); }
  .stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .muted { color: var(--sub); }

  /* browse filters ------------------------------------------------------ */
  .filters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); align-items: end;
    margin-block: var(--space-5) var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel);
  }
  .filters__field { display: block; min-width: 0; }
  .filters__label { display: block; margin-block-end: var(--space-1); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sub); }
  .filters select { width: 100%; height: 56px; padding: 0 var(--space-3); font: inherit; font-weight: 600; color: var(--ink); background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius-xl); }
  /* the button's face plus its 4px shadow stand as tall as a 56px field */
  .filters .filters__go, .search .search__go { min-height: 52px; margin-block-end: 4px; border-radius: var(--radius-xl); font-size: var(--text-base); box-shadow: 0 4px 0 var(--dom-shadow); }
  .filters .filters__go:active, .search .search__go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dom-shadow); }
  .browse__count { margin-block-end: var(--space-4); font-size: var(--text-sm); font-weight: 600; }
  .section__intro { margin-block-start: var(--space-3); max-width: 70ch; font-size: var(--text-md); line-height: var(--leading-loose); }
  a.menu__item { color: inherit; text-decoration: none; }

  .collections--grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-block-start: var(--space-5); }
  .collection__title a { color: inherit; text-decoration: none; }
  .collection__title a:hover { color: var(--punch); }
  .prose--intro { max-width: 70ch; margin-block: var(--space-4) var(--space-5); font-size: var(--text-md); line-height: var(--leading-loose); }

  /* search box and plain forms -------------------------------------------- */
  .hits { padding-block-start: 0; }
  .hits__title { margin-block-end: var(--space-4); font-size: var(--text-xl); }
  .hits__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .hit-tag {
    display: inline-flex; flex-direction: column; gap: 2px; min-width: 9rem; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
    &:hover { border-color: var(--punch); }
    .hit-tag__kind { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--punch); }
    .hit-tag__label { font-weight: 800; }
    .hit-tag__count { font-size: var(--text-sm); color: var(--sub); }
  }
  .search { display: flex; align-items: flex-end; gap: var(--space-3); margin-block: var(--space-5); max-width: 40rem; }
  .search__input { flex: 1; min-width: 0; height: 56px; padding: 0 var(--space-4); font: inherit; font-weight: 600; color: var(--ink); background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-xl);
    &:focus { outline: 0; border-color: var(--punch); } }
  .form { display: grid; gap: var(--space-4); max-width: 40rem; margin-block: var(--space-5); }
  .form > .btn { justify-self: start; }
  .form__field { display: block; }
  .form__label { display: block; margin-block-end: var(--space-1); font-weight: 700; }
  .form__hint { display: block; margin-block-end: var(--space-2); font-size: var(--text-sm); color: var(--sub); }
  .form textarea, .form input[type="text"] { display: block; width: 100%; padding: var(--space-2) var(--space-3); font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); }
  .form__error { color: light-dark(#b42318, #ff8a80); font-weight: 600; font-size: var(--text-sm); margin-block-start: var(--space-1); }
  .foot__links a.is-current { text-decoration: none; opacity: 0.7; }
  .nowrap { white-space: nowrap; }
}