/* Generated by scripts/blog/styles.mjs — do not edit.
   Tokens are lifted from src/lib/theme/tokens.css at build time, so this
   file cannot drift from the design system. Edit tokens.css instead. */
:root {
  /* ═══ §2 Colour — primitives ══════════════════════════════════════════════ */

  /* Ink: cool neutrals for chrome, text, and borders. */
  --ink-950: #0b0e11;
  --ink-900: #12161c;
  --ink-800: #1a1f27;
  --ink-700: #252c36;
  --ink-600: #37404d;
  --ink-500: #4e5866;
  --ink-400: #6b7686;
  --ink-300: #8e98a6;
  --ink-200: #b4bcc7;
  --ink-100: #d6dbe2;
  --ink-50: #edf0f3;

  /* Table: classic card-room felt. Deliberately the familiar green of the
     category — a solitaire player expects a green table, and fighting that
     expectation cost more than it bought. Saturation is held just below the
     mass-market sites so the felt reads as cloth rather than as a fill.
     Verified: 6.7:1 against the white card face. */
  --felt-950: #0b1a12;
  --felt-900: #0f2318;
  --felt-800: #14301f;
  --felt-700: #1f5236;
  --felt-600: #276749;
  --felt-500: #35654d;
  --felt-400: #3a7d5a;

  /* Chrome: near-black green for header and footer bars. */
  --table-950: var(--felt-950);
  --table-900: var(--felt-900);
  --table-850: var(--felt-600);
  --table-800: var(--felt-500);
  --table-700: var(--felt-400);

  /* Brass: the single warm accent. Its warmth against the cool table is what
     carries the "premium" read — one accent, used sparingly. */
  --brass-600: #a8730f;
  --brass-500: #c68a16;
  --brass-400: #e0a32b;
  --brass-300: #edbb5c;
  --brass-200: #f5d394;

  /* Card stock. Near-white, as a real card is — on green felt (rather than on a
     dark table) a warm ivory reads as aged rather than as good stock. */
  --card-ivory: #fdfdfb;
  --card-ivory-shade: #dcdcd6;

  /* Suit inks. Tuned for the ivory face, not for a white screen. */
  --suit-red: #c0362c;
  --suit-black: #1a1a1c;
  /* Four-colour deck: the standard convention (hearts red, diamonds blue,
     clubs green, spades black).

     The suits are separated in LIGHTNESS as well as hue, which is the part
     that is usually got wrong. Deuteranopes — three times more common than
     protanopes — have near-normal luminance perception and confuse red with
     green by hue; a deck whose red and green are luminance-matched gives them
     nothing to work with. Measured relative luminance: spades 0.010, clubs
     0.041, hearts 0.140, diamonds 0.149. See DESIGN.md § Colour vision
     deficiency before changing any of these. */
  --suit-hearts-4c: #c0362c;
  --suit-diamonds-4c: #1f6fb2;
  --suit-clubs-4c: #0d4227;
  --suit-spades-4c: #1a1a1c;

  /* Feedback */
  --signal-success: #3e9e6b;
  --signal-warning: #d9832f;
  --signal-danger: #c0362c;

  /* ═══ §2 Colour — semantic ════════════════════════════════════════════════ */

  --color-surface: var(--felt-900);
  --color-surface-raised: var(--felt-800);
  --color-surface-sunken: var(--felt-950);
  --color-border: var(--ink-700);
  --color-border-strong: var(--ink-600);

  --color-text-primary: var(--ink-50);
  /* Muted text sits on the FELT as often as on a panel, and the felt is the
     harder surface: ink-300 measured only 2.3:1 there. These are tinted toward
     the table's own hue so they read as quiet rather than as a different
     palette, while clearing AA on both. Verified — felt 4.89:1, panel 10.37:1. */
  --color-text-muted: #cfe0d4;
  --color-text-subtle: #b4c6ba;
  --color-text-on-table: var(--ink-100);
  --color-text-inverse: var(--ink-950);

  --color-accent: var(--brass-400);
  --color-accent-hover: var(--brass-300);
  --color-accent-pressed: var(--brass-500);
  --color-on-accent: var(--ink-950);

  --color-table: var(--felt-600);
  --color-table-edge: var(--felt-950);
  /* Empty pile outlines. Visible enough to read as a target, quiet enough not
     to compete with cards. */
  --color-pile-outline: rgb(255 255 255 / 0.12);
  --color-pile-outline-active: var(--brass-400);

  --color-card-face: var(--card-ivory);
  --color-card-face-edge: var(--card-ivory-shade);
  --color-card-back: #b23a3a;

  --color-suit-red: var(--suit-red);
  --color-suit-black: var(--suit-black);

  --color-success: var(--signal-success);
  --color-warning: var(--signal-warning);
  --color-danger: var(--signal-danger);

  /* Signal colours legible ON THE FELT. The base signals are tuned for a light
     card face or a dark panel; on green they collapse (success reads green on
     green at 1.2:1). Anything that renders over the table uses these instead. */
  --color-success-on-felt: #8fe9b6;
  --color-warning-on-felt: #ffce7a;
  --color-danger-on-felt: #ffd6d0;

  --color-scrim: rgb(5 8 10 / 0.68);

  /* Casino chips. The US denomination colours — white 1, red 5, green 25,
     black 100, purple 500, orange 1000 — because anyone who has been near a
     table reads the value off the colour before reading the number, and
     inventing our own palette would throw that away for nothing.

     Each face carries its own ink, measured against it: white 14.7:1, red
     5.9:1, green 6.5:1, black 17.8:1, purple 8.5:1, orange 4.8:1. All clear AA.

     The rim is not decoration. Measured against the felt, the red chip sits at
     1.14:1 and the green at 1.03:1 — a green chip on green felt has no visible
     edge at all. Real chips solve this with light edge spots, and so do these:
     --chip-edge is 5.95:1 on the table, so the outline carries the shape and
     the face only has to carry the colour. */
  --chip-white: #f0ece1;
  --chip-white-ink: #1a1a1c;
  --chip-red: #b8342b;
  --chip-red-ink: #ffffff;
  --chip-green: #166b45;
  --chip-green-ink: #ffffff;
  --chip-black: #16181b;
  --chip-black-ink: #ffffff;
  --chip-purple: #5d3a8e;
  --chip-purple-ink: #ffffff;
  --chip-orange: #b35a12;
  --chip-orange-ink: #ffffff;
  --chip-edge: #f4f1e8;
  --chip-rim: rgb(0 0 0 / 0.32);

  /* ═══ §3 Typography ═══════════════════════════════════════════════════════ */

  /* Self-hosted variable faces — see fonts.css for the loading strategy and the
     metric-matched fallbacks that keep the swap shift-free.

     Poppins is the display face because it is the category's own voice — the
     geometric sans every major games platform converged on independently
     (Discord's gg sans, Roblox's Builder Sans). Public Sans stays deliberately
     quiet: the display face carries the character, and chrome is required to
     recede during play (DESIGN.md P6). */
  --font-display: 'Poppins', 'Poppins Fallback', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --font-ui:
    'Public Sans', 'Public Sans Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Card indices deliberately do NOT depend on the webfont. Every fallback in
     this chain ships tabular lining figures, so a failed font load can never
     make a card illegible — the one surface where that would be unacceptable. */
  --font-card:
    'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Index size scales NON-LINEARLY with card width — the clamp floor gives
     small cards a proportionally larger index (jumbo-index behaviour exactly
     where it is needed). Only possible because faces are drawn at runtime;
     every raster competitor ships a fixed proportion and goes illegible on
     small phones. Consumed by CardFace with --card-width set per instance. */
  --card-index-size: clamp(11px, var(--card-width, 100px) * 0.26, 24px);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* 1.25 ratio from a 16px base. */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5625rem; /* 25px */
  --text-2xl: 1.9375rem; /* 31px */
  --text-3xl: 2.4375rem; /* 39px */
  --text-4xl: 3.0625rem; /* 49px */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* ═══ §4 Spacing & radius ═════════════════════════════════════════════════ */

  --space-1: 0.25rem; /* 4px  */
  --space-2: 0.5rem; /* 8px  */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */
  --space-9: 6rem; /* 96px */

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-full: 9999px;

  /* ═══ §5 Elevation ════════════════════════════════════════════════════════ */

  --elevation-card-resting: 0 1px 2px rgb(0 0 0 / 0.28);
  --elevation-card-lifted: 0 8px 24px rgb(0 0 0 / 0.42), 0 2px 6px rgb(0 0 0 / 0.3);
  --elevation-panel: 0 4px 16px rgb(0 0 0 / 0.35);
  --elevation-modal: 0 24px 64px rgb(0 0 0 / 0.55);

  --focus-ring: 2px solid var(--brass-300);
  --focus-ring-offset: 2px;

  /* ═══ §6 Motion ═══════════════════════════════════════════════════════════ */

  /* Durations */
  --duration-instant: 80ms;
  --duration-quick: 140ms;
  --duration-base: 220ms;
  --duration-deliberate: 340ms;
  --duration-slow: 520ms;

  /* Easings. Each is chosen for a physical behaviour, not picked from a list. */
  --ease-deal: cubic-bezier(0.22, 0.61, 0.36, 1); /* arrives and stops */
  --ease-flip: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* symmetric, mechanical */
  --ease-lift: cubic-bezier(0.34, 1.4, 0.64, 1); /* slight overshoot on pickup */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); /* strong decelerate on landing */
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1); /* standard UI */

  /* Choreography — see DESIGN.md §6 for the full specification. */
  --deal-card-duration: 260ms;
  --deal-stagger: 32ms;
  --deal-rotation-max: 3deg;

  --flip-duration: 180ms;
  --flip-lift-scale: 1.04;

  --drag-lift-duration: 120ms;
  --drag-lift-scale: 1.03;

  --invalid-shake-duration: 320ms;
  --invalid-shake-distance: 6px;

  --foundation-fly-duration: 300ms;
  --foundation-land-scale: 0.94;

  --autofinish-stagger-start: 90ms;
  --autofinish-stagger-end: 40ms;

  --win-gravity: 1800; /* px/s²  */
  --win-bounce-damping: 0.72;
  --win-drift-max: 180; /* px/s   */
  --win-stagger: 60ms;

  /* ═══ §7 Card geometry ════════════════════════════════════════════════════ */

  /* Poker stock: 2.5in × 3.5in. */
  --card-aspect: 5 / 7;
  /* Physical cards round at ~3.5mm on a 63mm width — 5.5%. Expressed against
     card width so it holds at every rendered size. */
  --card-radius: 5.5cqw;
  --card-back-border: 1px solid rgb(255 255 255 / 0.09);

  /* Fanned-pile overlap: the fraction of a card's height left visible when the
     next card stacks on top. Face-up cards show more because their index and
     suit must both stay readable. */
  --overlap-face-down: 0.22;
  --overlap-face-up: 0.32;

  /* ═══ §11 Breakpoints (reference — media queries can't read custom props) ══ */
  --bp-tablet: 640px;
  --bp-desktop: 1024px;
}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/publicsans.woff2') format('woff2-variations');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins Fallback';src:local('Helvetica Neue'),local('Arial'),local('sans-serif');ascent-override:98.3%;descent-override:32.8%;line-gap-override:0%;size-adjust:106.8%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-surface);color:var(--color-text-primary);
  font-family:var(--font-ui);line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent-hover)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}

/* ── Chrome ─────────────────────────────────────────────────────────── */
.bhead{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-5);
  padding:var(--space-3) var(--space-4);background:var(--color-surface-sunken);
  border-bottom:1px solid rgb(255 255 255/.07)}
.bhead__mark{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);
  color:var(--color-text-primary);letter-spacing:-.01em;white-space:nowrap}
.bhead__mark span{color:var(--color-accent)}
.bhead__nav{display:flex;gap:var(--space-4);font-size:var(--text-sm);overflow:hidden}
.bhead__nav a{color:var(--color-text-muted)}
.bhead__nav a:hover{color:var(--color-text-primary)}
.bhead__cta{margin-left:auto;background:var(--color-accent);color:var(--color-on-accent);
  font-weight:600;font-size:var(--text-sm);padding:0 var(--space-5);min-height:44px;
  border-radius:var(--radius-full);display:inline-flex;align-items:center;white-space:nowrap}
.bhead__cta:hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
@media(max-width:760px){.bhead__nav{display:none}}

.bfoot{margin-top:var(--space-9);padding:var(--space-7) var(--space-4);
  background:var(--color-surface-sunken);border-top:1px solid rgb(255 255 255/.07);
  color:var(--color-text-subtle);font-size:var(--text-sm)}
.bfoot__in{max-width:72rem;margin:0 auto;display:flex;gap:var(--space-6);flex-wrap:wrap;
  justify-content:space-between}
.bfoot a{color:var(--color-text-muted)}

/* ── Post hero ──────────────────────────────────────────────────────── */
.bhero{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,var(--felt-900),var(--felt-950))}
.bhero__in{max-width:52rem;margin:0 auto;padding:var(--space-7) var(--space-4) var(--space-6)}
.bcrumb{display:flex;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-xs);
  color:var(--color-text-subtle);margin-bottom:var(--space-4)}
.bcrumb a{color:var(--color-text-muted)}
.beyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--color-accent);margin:0 0 var(--space-2)}
.bh1{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,1.2rem+2.6vw,3rem);line-height:var(--leading-tight);
  letter-spacing:-.02em;margin:0 0 var(--space-3);text-wrap:balance}
.bsummary{font-size:var(--text-lg);color:var(--color-text-muted);margin:0 0 var(--space-5);
  max-width:46ch;line-height:var(--leading-relaxed)}
.bmeta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding-top:var(--space-4);border-top:1px solid rgb(255 255 255/.1);font-size:var(--text-sm)}
.bavatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-weight:600;font-size:var(--text-sm);flex-shrink:0}
.bmeta__name{font-weight:600;color:var(--color-text-primary)}
.bmeta__name a{color:inherit;border-bottom:1px dotted rgb(255 255 255/.4)}
.bmeta__role{font-size:var(--text-xs);color:var(--color-text-subtle)}
.bmeta__dot{color:var(--color-text-subtle)}

/* ── Layout ─────────────────────────────────────────────────────────── */
.bpage{max-width:72rem;margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8);
  display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:var(--space-7);align-items:start}
@media(max-width:1024px){.bpage{grid-template-columns:1fr}.bside{display:none}}

.bside{position:sticky;top:5rem;display:flex;flex-direction:column;gap:var(--space-5)}
.btoc{background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-4)}
.btoc__lbl{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--color-text-subtle);margin-bottom:var(--space-3)}
.btoc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.btoc__list a{display:flex;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);
  font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}
.btoc__list a:hover,.btoc__list a.on{background:rgb(255 255 255/.06);color:var(--color-accent)}
.btoc__n{color:var(--color-text-subtle);font-size:var(--text-xs);min-width:1.2em}

/* ── Article ────────────────────────────────────────────────────────── */
.barticle{min-width:0}
.barticle h2{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.35rem,1.1rem+1vw,1.85rem);line-height:var(--leading-tight);
  margin:var(--space-8) 0 var(--space-4);padding-bottom:var(--space-2);
  border-bottom:1px solid var(--color-border);scroll-margin-top:5rem}
.barticle h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);
  margin:var(--space-6) 0 var(--space-3)}
.barticle p{font-size:var(--text-base);line-height:var(--leading-relaxed);
  color:var(--color-text-muted);margin:0 0 var(--space-5)}
.barticle strong{color:var(--color-text-primary);font-weight:600}
.barticle a{text-decoration:underline;text-underline-offset:3px}
.barticle ul,.barticle ol{margin:0 0 var(--space-5);padding-left:var(--space-5);
  color:var(--color-text-muted);line-height:var(--leading-relaxed)}
.barticle li{margin-bottom:var(--space-2)}
.barticle li::marker{color:var(--color-accent)}

.bhero-img{margin:0 0 var(--space-6);border-radius:var(--radius-md);overflow:hidden}
.bhero-img img{width:100%;height:auto}

/* ── Callouts ───────────────────────────────────────────────────────── */
.bcallout{border-radius:var(--radius-md);padding:var(--space-5);margin:var(--space-6) 0;
  border:1px solid}
.bcallout__lbl{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;margin-bottom:var(--space-3)}
.bcallout p{margin:0;font-size:var(--text-base)}
.bcallout--quick{background:color-mix(in oklab,var(--color-accent) 8%,var(--color-surface-raised));
  border-color:color-mix(in oklab,var(--color-accent) 30%,transparent)}
.bcallout--quick .bcallout__lbl{color:var(--color-accent)}
.bcallout--quick p{color:var(--color-text-primary)}

.btakeaways{background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-left:3px solid var(--color-accent);border-radius:var(--radius-md);
  padding:var(--space-5);margin:var(--space-6) 0}
.btakeaways__lbl{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-3)}
.btakeaways ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}
.btakeaways li{position:relative;padding-left:var(--space-4);color:var(--color-text-primary);
  font-size:var(--text-base);margin:0}
.btakeaways li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--color-accent)}

/* ── Play callout — the post's whole job ────────────────────────────── */
.bplay{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap;
  background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-7) 0;overflow:hidden}
.bplay__art{flex:0 0 clamp(8rem,28%,12rem);border-radius:var(--radius-md);overflow:hidden}
.bplay__body{flex:1;min-width:14rem}
.bplay__lbl{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-2)}
.bplay__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  margin:0 0 var(--space-2)}
.bplay p{font-size:var(--text-sm);margin:0 0 var(--space-4)}
.bbtn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;
  padding:0 var(--space-6);border-radius:var(--radius-full);background:var(--color-accent);
  color:var(--color-on-accent);font-weight:600;text-decoration:none;
  transition:background var(--duration-instant) var(--ease-snap),transform var(--duration-instant) var(--ease-snap)}
.bbtn:hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
.bbtn:active{background:var(--color-accent-pressed);transform:scale(.98)}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.bfaq{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-5) 0}
.bfaq__item{border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-raised);overflow:hidden}
.bfaq__q{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-3);padding:var(--space-4);background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--text-base);font-weight:600;
  color:var(--color-text-primary);text-align:left;line-height:var(--leading-tight)}
.bfaq__q:hover{background:rgb(255 255 255/.04)}
.bfaq__ico{flex-shrink:0;font-size:1.25rem;font-weight:400;color:var(--color-text-subtle);
  transition:transform var(--duration-quick) var(--ease-snap)}
.bfaq__q[aria-expanded='true'] .bfaq__ico{transform:rotate(45deg)}
.bfaq__a{padding:0 var(--space-4) var(--space-4)}
.bfaq__a p{margin:0;font-size:var(--text-sm)}

/* ── Interlinks ─────────────────────────────────────────────────────── */
.barticle a.wiki{color:var(--color-accent);text-decoration:none;
  border-bottom:1px dotted color-mix(in oklab,var(--color-accent) 60%,transparent)}
.barticle a.wiki:hover{border-bottom-color:var(--color-accent)}

/* ── Index / hub grids ──────────────────────────────────────────────── */
.bwrap{max-width:72rem;margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8)}
.bsection__head{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4)}
.bsection__eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--color-accent)}
.bsection__h{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);margin:0}
.bgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--space-4)}
.bcard{display:flex;flex-direction:column;height:100%;background:var(--color-surface-raised);
  border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;
  transition:border-color var(--duration-instant) var(--ease-snap),transform var(--duration-quick) var(--ease-settle)}
.bcard:hover{border-color:var(--color-accent);transform:translateY(-2px)}
.bcard__art{aspect-ratio:3/2;overflow:hidden;background:var(--color-surface-sunken)}
.bcard__art img{width:100%;height:100%;object-fit:cover}
.bcard__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.bcard__fam{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--color-accent)}
.bcard__t{font-family:var(--font-display);font-weight:600;font-size:var(--text-base);
  color:var(--color-text-primary);line-height:var(--leading-tight);margin:0}
.bcard__d{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;flex:1}
.bcard__date{font-size:var(--text-xs);color:var(--color-text-subtle)}

/* ── Search ─────────────────────────────────────────────────────────── */
.bsearch{position:relative;margin:0 0 var(--space-6)}
.bsearch input{width:100%;min-height:52px;padding:0 var(--space-5);border-radius:var(--radius-full);
  border:1px solid var(--color-border);background:var(--color-surface-raised);
  color:var(--color-text-primary);font-family:inherit;font-size:var(--text-base)}
.bsearch input::placeholder{color:var(--color-text-subtle)}
.bsearch input:focus{border-color:var(--color-accent);outline:none}
.bsearch__count{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-text-subtle);
  min-height:1.4em}
.bchips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-6);padding:0;list-style:none}
.bchip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-full);border:1px solid var(--color-border);
  background:var(--color-surface-raised);font-size:var(--text-sm);color:var(--color-text-muted)}
.bchip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.bchip__n{font-size:var(--text-xs);color:var(--color-text-subtle)}
.bempty{padding:var(--space-7);text-align:center;color:var(--color-text-subtle)}

/* ── Author ─────────────────────────────────────────────────────────── */
.bauthor{display:flex;gap:var(--space-5);align-items:flex-start;flex-wrap:wrap;
  max-width:52rem;margin:0 auto;padding:var(--space-7) var(--space-4)}
.bauthor__av{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  font-weight:600;font-size:var(--text-lg);flex-shrink:0}
.bauthor__body{flex:1;min-width:16rem}
.bauthor__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl);margin:0}
.bauthor__role{color:var(--color-accent);font-size:var(--text-sm);font-weight:600;
  margin:var(--space-1) 0 var(--space-3)}
.bauthor__bio{color:var(--color-text-muted);margin:0;line-height:var(--leading-relaxed)}

/* ── Game promos ────────────────────────────────────────────────────────
   Lives here rather than in its own file so a post makes one stylesheet
   request, not two. The rotator ships markup only. */
.promo{margin:0 0 var(--space-5)}
.promo__card{display:block;background:var(--color-surface-raised);
  border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;
  color:inherit;text-decoration:none;
  transition:border-color var(--duration-instant) var(--ease-snap),transform var(--duration-quick) var(--ease-settle)}
.promo__card:hover{border-color:var(--color-accent);transform:translateY(-2px);color:inherit}
.promo__art{overflow:hidden;background:var(--color-surface-sunken)}
.promo__art img{width:100%;height:100%;object-fit:cover}
.promo__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.promo__eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--color-accent)}
.promo__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-base);
  color:var(--color-text-primary);margin:0}
.promo__blurb{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}
.promo__btn{align-self:flex-start;margin-top:var(--space-1);background:var(--color-accent);
  color:var(--color-on-accent);font-weight:600;font-size:var(--text-sm);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);white-space:nowrap}
.promo__dots{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-3)}
.promo__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--color-border-strong);
  transition:width var(--duration-quick) var(--ease-settle),background var(--duration-instant) var(--ease-snap)}
.promo__dot[aria-current='true']{width:18px;border-radius:var(--radius-full);background:var(--color-accent)}
.promo__slide[hidden]{display:none}
/* In-article promos sit sideways so they interrupt the column less. */
.promo--banner .promo__card{display:flex;align-items:stretch}
.promo--banner .promo__art{flex:0 0 42%}
.promo--banner .promo__body{flex:1;justify-content:center}
.promo--side .promo__art{aspect-ratio:3/2}
@media(max-width:600px){
  .promo--banner .promo__card{flex-direction:column}
  .promo--banner .promo__art{flex:none;aspect-ratio:3/2}
}

@media(prefers-reduced-motion:reduce){
  .bcard,.bbtn,.bfaq__ico,.promo__card,.promo__dot{transition:none}
}