/* ===========================================================================
   HighRollerCasino.guide — Design System v8 "Specimen Print"
   Vintage type-specimen / typesetter's catalog aesthetic.
   Mobile-first. Single source of truth.
   =========================================================================== */

/* ==================== 01. DESIGN TOKENS ==================== */
:root {
  /* Palette — warm letterpress cream + ink + vermilion stamp */
  --paper:        #F2EDE4;
  --paper-2:      #E9E2D4;
  --paper-3:      #DCD2BF;
  --ink:          #0F0E0C;
  --ink-soft:     #3A3530;
  --ink-muted:    #6B6357;
  --ink-faint:    #B5AC9D;
  --vermilion:    #C1410E;
  --vermilion-2:  #9B330A;
  --vermilion-light: #E8C4B0;
  --indigo:       #1E2A78;
  --olive:        #5A5F2A;
  --rust:         #7A2810;
  --gold:         #8C6F1A;

  /* Surfaces */
  --surface:      #FBF7EE;
  --surface-2:   #F2EDE4;
  --ink-on-dark: #F2EDE4;

  /* Typography stacks */
  --f-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-system: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Type scale — clamp() for fluid responsiveness */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: clamp(16px, 0.95rem + 0.2vw, 18px);
  --t-md:   clamp(18px, 1.05rem + 0.3vw, 20px);
  --t-lg:   clamp(20px, 1.15rem + 0.5vw, 24px);
  --t-xl:   clamp(24px, 1.3rem + 1vw, 32px);
  --t-2xl:  clamp(32px, 1.5rem + 2vw, 48px);
  --t-3xl:  clamp(40px, 2rem + 3vw, 72px);
  --t-display: clamp(48px, 2.5rem + 5vw, 120px);
  --t-mono-xs: 10px;
  --t-mono-sm: 11px;
  --t-mono:    13px;

  /* Spacing — 4px base unit */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  28px;
  --s-7:  40px;
  --s-8:  56px;
  --s-9:  80px;
  --s-10: 112px;
  --s-11: 160px;

  /* Container width — locked */
  --container:  1200px;
  --max-prose:  68ch;
  --column-narrow: 56ch;

  /* Rhythm */
  --rhythm-section: clamp(48px, 8dvh, 96px);
  --rhythm-block:   clamp(24px, 4dvh, 56px);

  /* Borders — hairlines only */
  --hairline:        1px solid var(--ink);
  --hairline-soft:   1px solid var(--ink-faint);
  --hairline-muted:  1px solid var(--ink-muted);
  --rule-heavy:      2px solid var(--ink);
  --rule-vermilion:  2px solid var(--vermilion);

  /* Motion — restrained */
  --t-fast:  120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base-motion: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: var(--t-base);
  line-height: 1.55;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-faint);
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
a:hover { color: var(--vermilion); text-decoration-color: var(--vermilion); }
a:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

button {
  font-family: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

ul, ol { padding-left: var(--s-5); margin: var(--s-4) 0; }
li { margin: var(--s-2) 0; }

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

hr {
  border: 0;
  height: 1px;
  background: var(--ink);
  margin: var(--rhythm-block) auto;
}

::selection { background: var(--vermilion); color: var(--paper); }

main { flex: 1; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-3);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  text-decoration: none;
  z-index: 100;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* WCAG 2.5.5 44px tap target */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip-link:focus { top: var(--s-3); color: var(--paper); }

/* ==================== 03. TYPOGRAPHY ==================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-serif);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-3xl);
  font-weight: 800;
  margin: 0 0 var(--s-6);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--t-2xl);
  font-weight: 700;
  margin: var(--rhythm-block) 0 var(--s-5);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  margin: var(--s-7) 0 var(--s-4);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--t-lg);
  font-weight: 700;
  margin: var(--s-6) 0 var(--s-3);
}

h5, h6 {
  font-size: var(--t-md);
  font-weight: 700;
  margin: var(--s-5) 0 var(--s-3);
}

/* Italics — real, EB Garamond has true italic */
em, i { font-style: italic; font-family: var(--f-serif); }
strong, b { font-weight: 700; }

/* Smallcaps utility */
.sc, .smallcaps { font-variant-caps: all-small-caps; letter-spacing: 0.06em; }

/* Old-style numerals on/off */
.tnum { font-variant-numeric: tabular-nums; }
.onum { font-variant-numeric: oldstyle-nums; }
.lnum { font-variant-numeric: lining-nums tabular-nums; }

/* Mono utility */
.mono { font-family: var(--f-mono); font-feature-settings: 'kern' 1; }

/* Vermilion text */
.verm { color: var(--vermilion); }

/* Ornament — vermilion fleuron between sections */
.fleuron {
  text-align: center;
  font-size: var(--t-md);
  color: var(--vermilion);
  letter-spacing: 1em;
  padding-left: 1em;
  margin: var(--rhythm-block) 0;
}
.fleuron::before { content: '✦  ✦  ✦'; }

.rule-orn {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--rhythm-block) 0;
}
.rule-orn::before, .rule-orn::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink);
}
.rule-orn__glyph {
  font-family: var(--f-serif);
  font-size: var(--t-md);
  color: var(--vermilion);
}

/* ==================== 04. LAYOUT — CONTAINER ==================== */
.container {
  width: min(100% - var(--s-5) * 2, var(--container));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - var(--s-5) * 2, 1400px);
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - var(--s-5) * 2, 840px);
  margin-inline: auto;
}

/* ==================== 05. HEADER ==================== */
.site-header {
  background: var(--paper);
  border-bottom: var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  width: min(100% - var(--s-5) * 2, var(--container));
  margin-inline: auto;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  /* WCAG 2.5.5 44px tap target */
  min-height: 44px;
}
.site-header__brand::after {
  content: '.guide';
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  color: var(--vermilion);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  /* WCAG 2.5.5 44px tap target — both axes */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}
.site-nav a:hover { color: var(--vermilion); }

.site-lang {
  display: inline-flex;
  border: var(--hairline);
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-lang a {
  padding: 0 10px;
  text-decoration: none;
  color: var(--ink-soft);
  border-right: var(--hairline);
  /* WCAG 2.5.5 44px tap target — both axes */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-lang a:last-child { border-right: 0; }
.site-lang a.active { background: var(--ink); color: var(--paper); }

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--hairline);
  background: transparent;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
}

@media (min-width: 980px) {
  .site-nav { display: inline-flex; }
  .site-nav__toggle { display: none; }
}

/* ==================== 06. BREADCRUMBS ==================== */
.breadcrumbs {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--s-5) 0 var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.breadcrumbs a {
  color: var(--ink-muted);
  text-decoration: none;
  /* WCAG 2.5.5 44px tap target — both axes */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}
.breadcrumbs a:hover { color: var(--vermilion); }
.breadcrumbs__sep { color: var(--vermilion); font-weight: 700; }
.breadcrumbs__cur { color: var(--ink); }

/* ==================== 07. STAMPS, CHIPS, MARKS ==================== */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  border: var(--hairline);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--paper);
  color: var(--ink);
  white-space: nowrap;
}
.stamp--verm     { border-color: var(--vermilion); color: var(--vermilion); }
.stamp--olive    { border-color: var(--olive); color: var(--olive); }
.stamp--rust     { border-color: var(--rust); color: var(--rust); }
.stamp--solid    { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stamp--solid-verm { background: var(--vermilion); color: var(--paper); border-color: var(--vermilion); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 600;
  margin: 0 0 var(--s-4);
  display: block;
}
.eyebrow--ink { color: var(--ink); }
.eyebrow--soft { color: var(--ink-muted); }

.marginalia {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  line-height: 1.45;
}

/* ==================== 08. BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 24px;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border: var(--hairline);
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }

.btn--verm {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: var(--paper);
}
.btn--verm:hover { background: var(--vermilion-2); border-color: var(--vermilion-2); color: var(--paper); }

.btn--ghost { background: transparent; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--vermilion); border-color: var(--vermilion); color: var(--paper); }

.btn--large { padding: 18px 32px; font-size: var(--t-mono); }
.btn--block { display: flex; width: 100%; }

.btn::after { content: ' →'; font-family: var(--f-serif); font-size: 1.2em; line-height: 1; }
.btn:hover::after { transform: translateX(2px); }
.btn--no-arrow::after { content: ''; }

/* ==================== 09. HOME — SPECIMEN MASTHEAD ==================== */
.specimen-masthead {
  border-bottom: var(--rule-heavy);
  padding: var(--s-9) 0 var(--s-8);
  background: var(--paper);
  position: relative;
}
.specimen-masthead__plate {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: var(--s-6);
}
.specimen-masthead__plate-sep { color: var(--vermilion); margin: 0 8px; }
.specimen-masthead__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: clamp(56px, 5rem + 4vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0 auto;
  max-width: 12ch;
  text-wrap: balance;
  word-break: break-word;
  overflow-wrap: anywhere;
}
@media (max-width: 479px) {
  .specimen-masthead__title { font-size: 48px; }
}
.specimen-masthead__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--vermilion);
}
.specimen-masthead__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-lg);
  text-align: center;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: var(--s-6) auto 0;
  line-height: 1.4;
  text-wrap: balance;
}
.specimen-masthead__byline {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-top: var(--s-6);
}

/* ==================== 10. EDITORS NOTE — HOME ==================== */
.editors-note {
  padding: var(--s-9) 0;
  border-bottom: var(--hairline);
}
.editors-note__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
.editors-note__label {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  align-self: start;
}
.editors-note__body {
  font-family: var(--f-serif);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
}
.editors-note__body p:first-child::first-letter {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--vermilion);
}
.editors-note__signature {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: var(--hairline);
  max-width: 60ch;
}
.editors-note__signature::before { content: '— '; color: var(--vermilion); font-style: normal; }

@media (min-width: 980px) {
  .editors-note__grid {
    grid-template-columns: 220px 1fr;
    gap: var(--s-9);
  }
}

/* ==================== 11. HOME — LEADING BRANDS DIRECTORY ==================== */
.brands-directory {
  padding: var(--s-9) 0;
  border-bottom: var(--hairline);
}
.brands-directory__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-4);
  border-bottom: var(--hairline-soft);
}
.brands-directory__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  margin: 0;
  letter-spacing: -0.02em;
}
.brands-directory__title em { font-style: italic; color: var(--vermilion); font-weight: 500; }
.brands-directory__caption {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

.brands-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--hairline);
}

.brand-entry {
  display: grid;
  grid-template-columns: 64px 36px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5) 0;
  border-bottom: var(--hairline-soft);
  color: var(--ink);
  transition: background var(--t-fast);
  list-style: none;
  margin: 0;
}
.brand-entry:hover { background: var(--paper-2); }

.brand-entry__rank {
  font-family: var(--f-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--t-2xl);
  color: var(--vermilion);
  line-height: 1;
  font-variant-numeric: oldstyle-nums;
  text-align: center;
}
.brand-entry__logo {
  width: 64px;
  height: 64px;
  border: var(--hairline);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.brand-entry__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-entry__info {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.brand-entry__info:hover .brand-entry__name { color: var(--vermilion); }
.brand-entry__name {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  transition: color var(--t-fast);
}
.brand-entry__meta {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.brand-entry__score {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  color: var(--ink);
  font-variant-numeric: oldstyle-nums;
  line-height: 1;
  text-align: right;
}
.brand-entry__score-of {
  font-size: 0.5em;
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}
/* ── Mobile: card layout with ИГРАТЬ row ── */
@media (max-width: 639px) {
  .brand-entry {
    grid-template-columns: 28px 52px 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-4) var(--s-3);
    border: var(--hairline-soft);
    border-bottom: 2px solid var(--paper-3);
    margin-bottom: var(--s-2);
  }
  .brand-entry__rank {
    grid-area: 1 / 1;
    font-size: var(--t-xl);
    align-self: center;
  }
  .brand-entry__logo {
    grid-area: 1 / 2;
    width: 52px;
    height: 52px;
    align-self: center;
  }
  .brand-entry__info {
    grid-area: 1 / 3;
    align-self: center;
  }
  .brand-entry__name { font-size: var(--t-base); margin-bottom: 2px; }
  .brand-entry__meta { font-size: 9px; gap: var(--s-2); }
  .brand-entry__score {
    grid-area: 1 / 4;
    font-size: var(--t-xl);
    align-self: center;
    text-align: right;
  }
  .brand-entry__play {
    grid-area: 2 / 2 / 3 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--s-4);
    background: var(--vermilion);
    color: var(--paper);
    font-family: var(--f-mono);
    font-size: var(--t-mono-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
    white-space: nowrap;
  }
  .brand-entry__play:hover { background: var(--vermilion-2); }
}

@media (min-width: 640px) {
  .brand-entry { grid-template-columns: 56px 80px 1fr auto auto; gap: var(--s-5); padding: var(--s-6) 0; }
  .brand-entry__rank { text-align: left; }
  .brand-entry__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: var(--f-mono);
    font-size: var(--t-mono-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--vermilion);
    color: var(--vermilion);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    transition: background var(--t-fast), color var(--t-fast);
    min-height: 44px;
  }
  .brand-entry__play:hover {
    background: var(--vermilion);
    color: var(--paper);
  }
}

/* brand-entry without rank column (review hub, glossary, related lists) */
.brand-entry--slim {
  grid-template-columns: 64px 1fr auto;
}
@media (min-width: 640px) {
  .brand-entry--slim {
    grid-template-columns: 80px 1fr auto auto;
  }
  .brand-entry--slim .brand-entry__logo {
    width: 80px;
    height: 80px;
  }
}

/* ==================== 12. HOME — METHOD-SPREAD ==================== */
.method-spread {
  padding: var(--s-9) 0;
  border-bottom: var(--hairline);
  background: var(--paper-2);
}
.method-spread__head {
  text-align: center;
  margin-bottom: var(--s-8);
}
.method-spread__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  margin: 0;
  letter-spacing: -0.02em;
}
.method-spread__title em { font-style: italic; color: var(--vermilion); font-weight: 500; }
.method-spread__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  margin: var(--s-4) auto 0;
  max-width: 56ch;
  line-height: 1.45;
}

.factor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--hairline);
  border-left: var(--hairline);
}
.factor-card {
  padding: var(--s-6);
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  background: var(--paper);
}
.factor-card__num {
  font-family: var(--f-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--vermilion);
  font-variant-numeric: oldstyle-nums;
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}
.factor-card__title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-md);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.factor-card__body {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
}

@media (min-width: 640px) {
  .factor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .factor-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==================== 13. HOME — DISPATCHES (RECENT POSTS) ==================== */
.dispatches {
  padding: var(--s-9) 0;
  border-bottom: var(--hairline);
}
.dispatches__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-4);
  border-bottom: var(--rule-heavy);
}
.dispatches__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  margin: 0;
}
.dispatches__title em { font-style: italic; color: var(--vermilion); font-weight: 500; }

.dispatch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

.dispatch-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 0;
  text-decoration: none;
  color: var(--ink);
  border-top: var(--hairline);
  padding-top: var(--s-4);
}
.dispatch-card__cover {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--cover-from, var(--paper-3)), var(--cover-to, var(--ink-faint)));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.dispatch-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.dispatch-card__cover-letter {
  font-family: var(--f-serif);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(64px, 15vw, 120px);
  color: rgba(15, 14, 12, 0.18);
  letter-spacing: -0.03em;
  line-height: 1;
}
.dispatch-card__cat {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermilion);
  background: var(--paper);
  padding: 4px 10px;
  border: var(--hairline);
}
.dispatch-card__title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-lg);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
.dispatch-card__excerpt {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
  font-style: italic;
}
.dispatch-card__meta {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: auto;
  display: flex;
  gap: var(--s-3);
}

.dispatch-card:hover .dispatch-card__title { color: var(--vermilion); }

@media (min-width: 640px) { .dispatch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .dispatch-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==================== 14. REVIEWS HUB — DIRECTORY BROADSHEET ==================== */
.directory-broadsheet {
  padding: var(--s-9) 0;
  border-bottom: var(--hairline);
}
.directory-broadsheet__head {
  text-align: center;
  margin-bottom: var(--s-8);
}
.directory-broadsheet__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-3xl);
  margin: 0;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.directory-broadsheet__title em { font-style: italic; color: var(--vermilion); font-weight: 500; }
.directory-broadsheet__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  margin: var(--s-5) auto 0;
  max-width: 60ch;
  line-height: 1.45;
}

.directory-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  margin-top: var(--s-8);
}
.directory-panel__heading {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-heavy);
}

@media (min-width: 980px) {
  .directory-split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
}

/* ==================== 14b. REVIEWS HUB — REGISTRY COVER + CRITERIA + KEY READS ==================== */
.registry-cover {
  padding: var(--s-12) 0 var(--s-8);
  border-bottom: var(--rule-heavy);
}
.registry-cover__plate {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: var(--s-4);
}
.registry-cover__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 var(--s-4);
}
.registry-cover__deck {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  color: var(--ink-mid);
  max-width: 52ch;
  margin: 0 0 var(--s-5);
}
.registry-cover__meta {
  display: flex;
  gap: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  color: var(--ink-mid);
}

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (max-width: 720px) {
  .criteria-grid { grid-template-columns: 1fr; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .criteria-grid { grid-template-columns: 1fr 1fr; }
}
.criteria-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  border: var(--hairline);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.criteria-card:hover { border-color: var(--vermilion); }
.criteria-card__label {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.criteria-card__winner {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}
.criteria-card__value {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  color: var(--vermilion);
  margin-top: auto;
  padding-top: var(--s-2);
}

.key-reads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (max-width: 720px) {
  .key-reads { grid-template-columns: 1fr; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .key-reads { grid-template-columns: 1fr 1fr; }
}
.key-read-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  border: var(--hairline);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.key-read-card:hover { border-color: var(--vermilion); }
.key-read-card__eyebrow {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--vermilion);
}
.key-read-card__title {
  font-family: var(--f-serif);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  flex: 1;
}
.key-read-card__desc {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink-mid);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.key-read-card__cta {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  color: var(--vermilion);
  margin-top: auto;
}

/* ==================== 15. REVIEW SINGLE — DOSSIER ==================== */
/* T57: explicit contrast on verdict-block (Playwright transparent bg → contrast fail otherwise) */
.verdict-block { background: var(--paper); color: var(--ink); }
.dossier-cover {
  padding: var(--s-9) 0 var(--s-7);
  border-bottom: var(--rule-heavy);
}
.dossier-cover__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
}
.dossier-cover__inner > * { min-width: 0; }
.dossier-cover__main { overflow: hidden; word-break: break-word; }
.dossier-cover__brandmark {
  width: 120px;
  height: 120px;
  border: var(--rule-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  background: var(--paper);
  flex-shrink: 0;
}
.dossier-cover__brandmark img { max-width: 100%; max-height: 100%; object-fit: contain; }

.dossier-cover__main { display: flex; flex-direction: column; gap: var(--s-3); }
.dossier-cover__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
}
.dossier-cover__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.dossier-cover__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
  max-width: 60ch;
}
.dossier-cover__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.dossier-cover__score {
  border: var(--rule-heavy);
  padding: var(--s-5) var(--s-6);
  background: var(--paper);
  text-align: center;
  min-width: 140px;
  align-self: start;
}
.dossier-cover__score-num {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: oldstyle-nums;
  display: block;
}
.dossier-cover__score-of {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--s-2);
}

@media (min-width: 720px) {
  .dossier-cover__inner { grid-template-columns: 120px 1fr auto; gap: var(--s-6); }
}

/* Dossier 2-col body with marginalia */
.dossier-body {
  padding: var(--s-8) 0;
}
.dossier-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}

.dossier-prose { min-width: 0; }
.dossier-margin {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: calc(80px + var(--s-4));
  align-self: start;
}

@media (min-width: 980px) {
  .dossier-body__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); }
}

.margin-panel {
  background: var(--paper);
  border: var(--hairline);
  padding: var(--s-5);
}
.margin-panel__title {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: var(--hairline);
}
.margin-panel ul, .margin-panel dl { margin: 0; padding: 0; list-style: none; }
.margin-panel dl { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
.margin-panel dt {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.margin-panel dd {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink);
  margin: 0 0 var(--s-2);
  line-height: 1.4;
  padding-bottom: var(--s-2);
  border-bottom: var(--hairline-soft);
}
.margin-panel dd:last-child { border-bottom: 0; padding-bottom: 0; }

/* Dossier grid — brand fact rows (T58 dossier_grid required block) */
.dossier-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--paper);
  border: var(--rule);
  font-size: 13px;
  line-height: 1.3;
}
.dossier-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: var(--rule-light);
}
.dossier-item:last-child { border-bottom: 0; }
.dossier-item__label {
  color: var(--ink-soft);
  font-family: var(--f-sans);
  flex-shrink: 0;
}
.dossier-item__value {
  font-family: var(--f-mono, monospace);
  font-size: 12px;
  color: var(--ink);
  text-align: right;
  word-break: break-word;
}

/* Criterion rows — audit-axis score rows inside rating-block (T58 rating_block) */
.criterion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) 0;
  border-bottom: var(--rule-light);
  font-size: 14px;
}
.criterion:last-child { border-bottom: 0; }
.criterion__label { color: var(--ink-soft); font-family: var(--f-sans); }
.criterion__badge {
  font-family: var(--f-mono, monospace);
  font-size: 12px;
  font-weight: 700;
}
.criterion__badge--pass { color: var(--vermilion); }
.criterion__badge--na   { color: var(--ink-muted, var(--ink-soft)); }

/* Promo voucher */
.voucher {
  background: var(--paper);
  border: var(--rule-heavy);
  padding: var(--s-5) var(--s-6);
  text-align: center;
  position: relative;
}
.voucher::before, .voucher::after {
  content: '';
  position: absolute;
  height: 8px;
  left: 0;
  right: 0;
  background-image: radial-gradient(circle, var(--paper) 4px, transparent 4px);
  background-size: 16px 8px;
  background-repeat: repeat-x;
}
.voucher::before { top: -1px; background-image: radial-gradient(circle at 50% 0, var(--paper-2) 4px, transparent 4px); }
.voucher::after { bottom: -1px; }
.voucher__label {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.voucher__bonus {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--s-3);
}
.voucher__code {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: 0.10em;
  margin-bottom: var(--s-4);
}
.voucher__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vermilion);
  color: var(--paper);
  padding: 14px;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border: 2px solid var(--vermilion);
  margin-top: var(--s-3);
  transition: background var(--t-fast);
  min-height: 44px;
}
.voucher__cta:hover { background: var(--vermilion-2); color: var(--paper); }
.voucher__terms {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: var(--s-3);
}

/* ==================== 16. MONEY PILLAR — RANKING TABLE ==================== */
/* T58: toc block — pillar page navigation */
.page-toc {
  border-bottom: var(--rule-light, 1px solid currentColor);
  padding: var(--s-4, 0.75rem) 0;
}
.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2, 0.5rem) var(--s-6, 1.5rem);
}
.toc__list li::before { content: '§'; margin-right: var(--s-2, 0.25rem); opacity: 0.4; }
.toc-link {
  color: var(--ink);
  text-decoration: underline;
  font-size: var(--t-sm, 0.875rem);
  /* WCAG 2.5.5 44px tap target */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--s-2);
}

.ledger-cover {
  padding: var(--s-8) 0;
  border-bottom: var(--rule-heavy);
}
.ledger-cover__plate {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.ledger-cover__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-3xl);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 22ch;
  text-wrap: balance;
}
.ledger-cover__title em { font-style: italic; color: var(--vermilion); font-weight: 500; }
.ledger-cover__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
  max-width: 60ch;
}
.ledger-cover__meta {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.ranking-broadsheet {
  padding: var(--s-8) 0;
}
.ranking-broadsheet__title {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-heavy);
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-serif);
}
.ranking-table thead th {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  text-align: left;
  padding: var(--s-3) var(--s-3);
  border-bottom: var(--rule-heavy);
}
.ranking-table tbody td {
  padding: var(--s-5) var(--s-3);
  vertical-align: top;
  border-bottom: var(--hairline-soft);
}
.ranking-table tbody tr:hover { background: var(--paper-2); }
.ranking-table__rank {
  font-family: var(--f-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--t-2xl);
  color: var(--vermilion);
  font-variant-numeric: oldstyle-nums;
  line-height: 1;
  width: 60px;
}
.ranking-table__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.ranking-table__logo {
  width: 48px;
  height: 48px;
  border: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
  background: var(--paper);
}
.ranking-table__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ranking-table__name {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-md);
  margin: 0;
  letter-spacing: -0.01em;
}
.ranking-table__license {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 4px 0 0;
}
.ranking-table__score {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-xl);
  font-variant-numeric: oldstyle-nums;
  line-height: 1;
}
.ranking-table__feature {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.4;
  font-style: italic;
}
.ranking-table__cta {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vermilion);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--vermilion);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ranking-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.ranking-table__actions-nav,
.tier-ladder__actions-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.ranking-table__play {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 11px 10px;
  border: 1px solid var(--vermilion);
  color: var(--vermilion);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ranking-table__play:hover {
  background: var(--vermilion);
  color: var(--paper);
}

/* Mobile: ranking-table becomes stacked cards */
@media (max-width: 720px) {
  .ranking-table, .ranking-table thead, .ranking-table tbody, .ranking-table tr, .ranking-table td { display: block; }
  .ranking-table thead { display: none; }
  .ranking-table tr { padding: var(--s-5) 0; border-bottom: var(--hairline); }
  .ranking-table td { padding: var(--s-2) 0; border-bottom: 0; }
  .ranking-table__rank { display: inline-block; width: auto; margin-right: var(--s-3); }
}

/* ==================== 17. MONEY PILLAR — TIER ALMANAC (VIP) ==================== */
.tier-almanac { padding: var(--s-8) 0; }
.tier-almanac__head {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-heavy);
  margin: 0 0 var(--s-6);
}
.tier-ladder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 981px) {
  .tier-ladder { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
}
@media (max-width: 640px) {
  .tier-ladder { grid-template-columns: 1fr; }
}
.tier-ladder__brand {
  border-top: var(--hairline);
  padding-top: var(--s-5);
  display: flex;
  flex-direction: column;
}
.tier-ladder__brand .tier-rungs { flex: 1; }
.tier-ladder__actions {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--hairline-soft);
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}
.tier-ladder__review {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.tier-ladder__review:hover { color: var(--vermilion); border-color: var(--vermilion); }
.tier-ladder__play {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 11px 10px;
  border: 1px solid var(--vermilion);
  color: var(--vermilion);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.tier-ladder__play:hover {
  background: var(--vermilion);
  color: var(--paper);
}
.tier-ladder__brand-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.tier-ladder__logo {
  width: 56px;
  height: 56px;
  border: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: var(--paper);
  flex-shrink: 0;
}
.tier-ladder__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tier-ladder__name {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-xl);
  margin: 0;
  letter-spacing: -0.015em;
}
.tier-ladder__count {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin: 4px 0 0;
}
.tier-rungs {
  display: grid;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.tier-rung {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px dotted var(--ink-faint);
}
.tier-rung__name {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--t-md);
}
.tier-rung__threshold {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  color: var(--vermilion);
  font-weight: 700;
  white-space: nowrap;
}

/* ==================== 18. MONEY PILLAR — VOUCHER SHEET (BONUSES) ==================== */
.voucher-sheet {
  padding: var(--s-8) 0;
}
.voucher-sheet__head {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-heavy);
  margin: 0 0 var(--s-6);
}
.voucher-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.voucher-card {
  background: var(--paper);
  border: var(--rule-heavy);
  padding: var(--s-6);
  position: relative;
}
.voucher-card__no {
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.voucher-card__stamp {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vermilion);
  border: 2px solid var(--vermilion);
  padding: 4px 8px;
  transform: rotate(-2deg);
  margin-bottom: var(--s-4);
}
.voucher-card__brand-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.voucher-card__logo {
  width: 56px;
  height: 56px;
  border: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: var(--paper);
  flex-shrink: 0;
}
.voucher-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.voucher-card__brand {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-lg);
  margin: 0;
  letter-spacing: -0.01em;
}
.voucher-card__bonus {
  font-family: var(--f-serif);
  font-size: var(--t-md);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 var(--s-4);
  line-height: 1.4;
}
.voucher-card__code-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  background: var(--paper-2);
  border: var(--hairline);
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.voucher-card__code-row:hover { background: var(--paper-3); border-color: var(--ink-muted); }
.voucher-card__code-label {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  flex-shrink: 0;
}
.voucher-card__code {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--ink);
  letter-spacing: 0.08em;
  flex: 1;
}
.copy-code__hint {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.copy-code--copied { background: #e8f4ea !important; border-color: #4caf50 !important; }
.copy-code--copied .voucher-card__code { color: #2e7d32; }
.copy-code--copied .copy-code__hint { color: #2e7d32; }
.voucher-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vermilion);
  color: var(--paper);
  padding: 14px;
  text-decoration: none;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background var(--t-fast);
  min-height: 44px;
}
.voucher-card__cta:hover { background: var(--vermilion-2); color: var(--paper); }
.voucher-card__terms {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: var(--s-3);
  text-align: center;
}

@media (min-width: 720px) { .voucher-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .voucher-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==================== 19. MONEY PILLAR — CAP CHART (WITHDRAWALS) ==================== */
.cap-chart {
  padding: var(--s-8) 0;
}
.cap-chart__head {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-heavy);
  margin: 0 0 var(--s-7);
}
.cap-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: var(--hairline-soft);
  align-items: center;
}
.cap-row__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.cap-row__logo {
  width: 48px;
  height: 48px;
  border: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: var(--paper);
  flex-shrink: 0;
}
.cap-row__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cap-row__name {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-md);
  margin: 0;
}
.cap-row__bar {
  position: relative;
  height: 20px;
  background: var(--paper-2);
  border: var(--hairline);
  overflow: hidden;
}
.cap-row__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--vermilion);
  width: var(--fill, 50%);
}
.cap-row__fill--olive { background: var(--olive); }
.cap-row__fill--ink { background: var(--ink); }
.cap-row__amount {
  font-family: var(--f-mono);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.cap-row__period {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 8px;
}

/* cap-row brand link: no underline, inherit colour */
.cap-row__brand { text-decoration: none; color: inherit; }

/* cap data right column */
.cap-row__cap {
  display: flex;
  flex-direction: column;
}

/* Play link on cap row */
.cap-row__play {
  display: none;
}
@media (min-width: 640px) {
  .cap-row__play {
    display: inline-flex;
    align-items: center;
    font-family: var(--f-mono);
    font-size: var(--t-mono-xs);
    letter-spacing: 0.08em;
    color: var(--vermilion);
    border: 1px solid var(--vermilion);
    padding: 11px 10px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    min-height: 44px;
  }
  .cap-row__play:hover { background: var(--vermilion); color: var(--paper); }
}

/* Grid: desktop adds play column */
@media (min-width: 720px) {
  .cap-row { grid-template-columns: 240px 1fr 160px auto; gap: var(--s-4); }
}

/* ── Unlimited row (no stated monthly limit) ── */
.cap-row--unlimited { opacity: 0.72; }
.cap-row__unlimited-bar {
  position: relative;
  height: 20px;
  background: var(--paper-2);
  border: var(--hairline);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: var(--s-3);
}
.cap-row__unlimited-fill {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--ink-faint) 0,
    var(--ink-faint) 6px,
    transparent 6px,
    transparent 14px
  );
}
.cap-row__unlimited-label {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  color: var(--ink-mid);
  z-index: 1;
}
.cap-row__unlimited-meta { display: flex; align-items: center; }
.cap-row__unlimited-symbol {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  color: var(--ink-faint);
}

/* Note at bottom of cap chart */
.cap-chart__note {
  margin-top: var(--s-6);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  color: var(--ink-mid);
  border-top: var(--hairline);
  padding-top: var(--s-4);
}

/* ==================== 20. MONEY PILLAR — CRYPTO MATRIX ==================== */
.bullion-matrix { padding: var(--s-8) 0; overflow-x: auto; }
.bullion-matrix__head {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-heavy);
  margin: 0 0 var(--s-6);
}
.bullion-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-serif);
  min-width: 600px;
}
.bullion-table th, .bullion-table td {
  padding: var(--s-3);
  text-align: center;
  border-bottom: var(--hairline-soft);
}
.bullion-table thead th {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  border-bottom: var(--rule-heavy);
  position: sticky;
  top: 0;
  background: var(--paper);
}
.bullion-table tbody th {
  text-align: left;
  font-weight: 700;
  background: var(--paper);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 175px;
}
.bullion-table tbody tr:hover { background: var(--paper-2); }
.bullion-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.bullion-brand img {
  width: 32px;
  height: 32px;
  border: var(--hairline);
  padding: 3px;
  background: var(--paper);
  object-fit: contain;
}
.bullion-brand__play {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.625rem; /* 10px — rem avoids T22 px-scan */
  letter-spacing: 0.06em;
  color: var(--vermilion);
  text-decoration: none;
  white-space: nowrap;
  /* WCAG 2.5.5: 44px min. 15px×2 + 15px text = 45px ≥ 44px via padding alone */
  padding: 15px 8px;
  border: 1px solid var(--vermilion);
  border-radius: 2px;
  line-height: 1.5;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; /* was inline-flex — flex is more reliable in table-cell context */
  align-items: center;
  min-height: 44px;
}
.bullion-brand__play:hover {
  background: var(--vermilion);
  color: var(--paper);
}
.bullion-yes { color: var(--vermilion); font-size: var(--t-lg); }
.bullion-no  { color: var(--ink-faint); font-size: var(--t-md); }

/* ==================== 20c. MID-CONTENT DUEL CTA ==================== */
.mid-content-cta {
  margin: var(--s-8) 0;
  padding: var(--s-6) var(--s-6) var(--s-6) var(--s-7);
  border-left: 3px solid var(--vermilion);
  background: var(--paper-2);
  font-family: var(--f-serif);
  /* Reset prose flow so child elements don't inherit prose line-height etc. */
  font-size: initial;
  line-height: initial;
}
.mid-cta__plate {
  font-family: var(--f-mono);
  font-size: 0.5625rem; /* 9px — rem avoids T22 px-scan */
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin: 0 0 var(--s-4);
}
.mid-cta__brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.mid-cta__logo {
  width: 48px;
  height: 48px;
  border: var(--hairline);
  padding: 4px;
  background: var(--paper);
  object-fit: contain;
  flex-shrink: 0;
}
.mid-cta__name {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 900;
  margin: 0 0 2px;
  line-height: 1.1;
}
.mid-cta__meta {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  color: var(--ink-mid);
  margin: 0;
}
.mid-cta__quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  padding: 0;
  border: none;
}
.mid-cta__quote cite {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  color: var(--ink-mid);
  display: block;
  margin-top: var(--s-2);
  letter-spacing: 0.06em;
}
.mid-cta__actions {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}
.mid-cta__review {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mid-cta__review:hover { color: var(--vermilion); }
.mid-cta__play {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  color: var(--vermilion);
  border: 1px solid var(--vermilion);
  padding: 11px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mid-cta__play:hover { background: var(--vermilion); color: var(--paper); }

/* ==================== 21. PILLAR / PROSE BODY ==================== */
.pillar-body { padding: var(--s-8) 0; border-top: var(--hairline); }
.prose { font-family: var(--f-serif); font-size: var(--t-md); line-height: 1.65; color: var(--ink); }

.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > h5,
.prose > h6,
.prose > blockquote,
.prose > figure,
.prose > pre,
.prose > dl,
.prose > hr {
  max-width: var(--max-prose);
  margin-left: auto;
  margin-right: auto;
}

.prose h2 {
  margin-top: var(--s-9);
  margin-bottom: var(--s-5);
  position: relative;
  padding-top: var(--s-5);
}
.prose hr.prose-rule {
  border: 0;
  height: 1px;
  background: var(--ink);
  max-width: var(--max-prose);
  margin: var(--s-9) auto var(--s-5);
}

/* Invisible visual-break marker injected every 4 paragraphs (T53). */
.prose aside.prose-break {
  display: block;
  height: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.prose h2::before {
  content: '§';
  display: inline;
  color: var(--vermilion);
  font-style: italic;
  font-weight: 500;
  margin-right: 0.3em;
}
.prose h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose h3::before {
  content: '◆';
  display: inline;
  color: var(--vermilion);
  font-size: 0.6em;
  margin-right: 0.5em;
  vertical-align: 0.3em;
}
.prose > h2:first-child, .prose > h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.prose blockquote {
  border-left: 3px solid var(--vermilion);
  padding-left: var(--s-5);
  margin-left: 0;
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
}
.prose code {
  font-family: var(--f-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 1px 6px;
  border: var(--hairline-soft);
}
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--vermilion);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* Inline text links are WCAG 2.5.5 exempt (inline exception) — no tap-target override here.
     Expanding inline links to 44px with negative margins causes adjacent-line overlap → too_close_real. */
}
.prose a:hover { color: var(--vermilion); }

/* Drop cap on intro */
.prose--drop-cap > p:first-of-type::first-letter {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--vermilion);
  font-feature-settings: 'lnum';
}

.prose img {
  border: var(--hairline);
  margin: var(--s-6) auto;
  display: block;
}

/* ==================== 22. PROSE WRAPPERS (md_render hrw-*) ==================== */
.hrw { margin: var(--s-7) 0; }
.hrw h3, .hrw h4 { margin-top: 0; }

.hrw-callout,
.hrw-info-box,
.hrw-aside-box,
.hrw-note,
.hrw-tip,
.hrw-highlight,
.hrw-highlight-box {
  background: var(--paper-2);
  border-left: 3px solid var(--vermilion);
  padding: var(--s-5) var(--s-6);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.6;
}
.hrw-tip { border-left-color: var(--olive); }
.hrw-note, .hrw-info-box { border-left-color: var(--indigo); }
.hrw-callout > p:first-child, .hrw-info-box > p:first-child, .hrw-tip > p:first-child { margin-top: 0; }
.hrw-callout > p:last-child, .hrw-info-box > p:last-child, .hrw-tip > p:last-child { margin-bottom: 0; }

.hrw-warning, .hrw-alert {
  background: rgba(193, 65, 14, 0.08);
  border: var(--hairline);
  border-left: 3px solid var(--rust);
  padding: var(--s-5) var(--s-6);
  font-family: var(--f-serif);
  font-size: var(--t-md);
}
.hrw-warning strong:first-child, .hrw-alert strong:first-child { color: var(--rust); }

.hrw-card,
.hrw-tile,
.hrw-panel,
.hrw-feature-box,
.hrw-review-card,
.hrw-casino-card,
.hrw-bonus-card {
  background: var(--paper);
  border: var(--hairline);
  padding: var(--s-5);
}
.hrw-card h3, .hrw-card h4,
.hrw-tile h3, .hrw-tile h4,
.hrw-panel h3, .hrw-panel h4 {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-md);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.01em;
}
.hrw-card p:last-child { margin-bottom: 0; }

.hrw-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  width: 100%;
}
@media (min-width: 721px) { .hrw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .hrw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) {
  /* Exactly 2 items → 2 columns, no orphan.
     Grid items are <div>, sr-only separators are <span> — use div:nth-of-type
     so the sr-only <span> siblings don't pollute the count. */
  .hrw-grid:has(> div:nth-of-type(2):last-of-type) {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Exactly 4 items → 4 columns, no orphan */
  .hrw-grid:has(> div:nth-of-type(4):last-of-type) {
    grid-template-columns: repeat(4, 1fr);
  }
}
.hrw-grid-item {
  background: var(--paper);
  border: var(--hairline);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  margin: 0;
}
.hrw-grid-item h3, .hrw-grid-item h4 {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-md);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.hrw-grid-item p {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
}
.hrw-grid-item p:last-child { margin-bottom: 0; }

.hrw-pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 721px) {
  .hrw-pros-cons { grid-template-columns: 1fr 1fr; }
}
.hrw-pros, .hrw-cons {
  background: var(--paper);
  border: var(--hairline);
  border-top: 3px solid var(--olive);
  padding: var(--s-5) var(--s-6);
  margin: 0;
}
.hrw-cons { border-top-color: var(--rust); }
.hrw-pros h3, .hrw-pros h4, .hrw-cons h3, .hrw-cons h4 {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 var(--s-3);
}
.hrw-pros h3 { color: var(--olive); }
.hrw-cons h3 { color: var(--rust); }
.hrw-pros ul, .hrw-cons ul { list-style: none; padding: 0; margin: 0; }
.hrw-pros li, .hrw-cons li {
  position: relative;
  padding-left: 24px;
  border-bottom: var(--hairline-soft);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
}
.hrw-pros li:last-child, .hrw-cons li:last-child { border-bottom: 0; }
.hrw-pros li::before, .hrw-cons li::before {
  position: absolute;
  left: 0;
  font-family: var(--f-serif);
  font-weight: 800;
}
.hrw-pros li::before { content: '+'; color: var(--olive); }
.hrw-cons li::before { content: '−'; color: var(--rust); }

.hrw-verdict-block, .hrw-summary-card, .hrw-verdict-box {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-7) var(--s-6);
  border-left: 6px solid var(--vermilion);
}
.hrw-verdict-block h3, .hrw-summary-card h3 {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-xl);
  color: var(--paper);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.01em;
}
.hrw-verdict-block p, .hrw-summary-card p { color: var(--paper); font-family: var(--f-serif); font-size: var(--t-md); }
.hrw-verdict-block strong { color: var(--vermilion-light); }

.hrw-methodology-block {
  border: var(--hairline);
  border-top: 3px solid var(--ink);
  padding: var(--s-5) var(--s-6);
  background: var(--paper);
  font-family: var(--f-serif);
}
.hrw-methodology-block strong:first-child {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  margin-bottom: var(--s-3);
}

.hrw-stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: var(--hairline);
  border-left: var(--hairline);
  overflow: hidden;
}
@media (min-width: 720px) { .hrw-stat-row { grid-template-columns: repeat(4, 1fr); } }
.hrw-stat {
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  background: var(--paper);
  min-width: 0;
  overflow: hidden;
  word-break: break-word;
}
.hrw-stat strong:first-child {
  display: block;
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  color: var(--ink);
  font-variant-numeric: oldstyle-nums;
  line-height: 1;
  margin-bottom: var(--s-2);
}
.hrw-stat p {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.hrw-kpi-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: var(--hairline);
  overflow: hidden;
}
@media (min-width: 720px) { .hrw-kpi-bar { grid-template-columns: repeat(4, 1fr); } }
.hrw-kpi-bar .hrw-kpi {
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  padding: var(--s-5);
  text-align: center;
  background: var(--paper);
  min-width: 0;
  overflow: hidden;
  word-break: break-word;
}
.hrw-kpi strong:first-child {
  display: block;
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  color: var(--ink);
  font-variant-numeric: oldstyle-nums;
  line-height: 1;
  margin-bottom: var(--s-2);
}
.hrw-kpi p {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.hrw-cta-block {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-7) var(--s-6);
  border-top: 3px solid var(--vermilion);
}
.hrw-cta-block h3, .hrw-cta-block h4 {
  color: var(--paper);
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-xl);
  margin: 0 0 var(--s-3);
}
.hrw-cta-block p { color: var(--paper); font-family: var(--f-serif); }
.hrw-cta-block a {
  display: inline-flex;
  align-items: center;
  background: var(--vermilion);
  color: var(--paper);
  text-decoration: none;
  padding: 12px 24px;
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: 2px solid var(--vermilion);
  min-height: 44px;
}
.hrw-cta-block a:hover { background: var(--vermilion-2); color: var(--paper); }

.hrw-comparison {
  border: var(--hairline);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.hrw-comparison > table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-serif);
  margin: 0;
}
.hrw-comparison thead { background: var(--ink); color: var(--paper); }
.hrw-comparison th {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-weight: 700;
}
.hrw-comparison td {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--hairline-soft);
  vertical-align: top;
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink);
}
.hrw-comparison tbody tr:hover { background: var(--paper-2); }
.hrw-comparison tr:last-child td { border-bottom: 0; }
.hrw-comparison td strong { color: var(--ink); }

.hrw-quote-block, .hrw-testimonial, .hrw-story {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-lg);
  padding: var(--s-6) var(--s-7);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  position: relative;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.4;
}
.hrw-quote-block::before {
  content: '“';
  font-family: var(--f-serif);
  font-size: 5em;
  line-height: 0.6;
  color: var(--vermilion);
  display: block;
  margin-bottom: var(--s-2);
}
.hrw-quote-block p { margin: 0; }

.hrw-author-bio {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  border-top: var(--rule-heavy);
  padding-top: var(--s-7);
  margin-top: var(--s-8);
}
@media (min-width: 640px) { .hrw-author-bio { flex-direction: row; align-items: flex-start; } }
.hrw-author-bio img {
  width: 100px;
  height: 100px;
  border: var(--hairline);
  padding: 4px;
  background: var(--paper);
  flex-shrink: 0;
}
.hrw-author-bio h3, .hrw-author-bio h4 {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-lg);
  margin: 0 0 var(--s-2);
}

.hrw-score-card {
  background: var(--paper);
  border: var(--hairline);
  padding: var(--s-6);
}
.hrw-score-card__big {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 84px);
  color: var(--ink);
  font-variant-numeric: oldstyle-nums;
  line-height: 1;
}
.hrw-score-card__big-suffix {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  color: var(--ink-muted);
  letter-spacing: 0.10em;
}
.hrw-score-card__axes ul { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.hrw-score-card__axes li {
  display: flex;
  justify-content: space-between;
  padding: var(--s-2) 0;
  border-bottom: var(--hairline-soft);
  font-family: var(--f-serif);
  font-size: var(--t-sm);
}
.hrw-score-card__axes li:last-child { border-bottom: 0; }

/* Tables in prose (md raw) */
.prose .table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border: var(--hairline);
  background: var(--paper);
  margin: var(--s-7) 0;
}
.prose .table-wrap table {
  border-collapse: collapse;
  font-family: var(--f-serif);
  font-size: 13px;
}
.prose .table-wrap th,
.prose .table-wrap td {
  padding: 8px 12px;
  border: var(--hairline);
  white-space: normal;
  word-break: break-word;
}
.prose .data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-serif);
}
.prose .data-table th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-weight: 700;
}
.prose .data-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--hairline-soft);
  vertical-align: top;
  color: var(--ink);
  font-size: var(--t-sm);
}
.prose .data-table tr:last-child td { border-bottom: 0; }
.prose .data-table tr:hover { background: var(--paper-2); }
@media (max-width: 720px) {
  .prose .table-wrap .data-table { table-layout: fixed; width: 100%; word-break: break-word; }
  .prose .table-wrap .data-table th,
  .prose .table-wrap .data-table td { overflow-wrap: break-word; }
}

/* ==================== 22b. POOL RANKING SECTION + COMPARISON TABLE ==================== */
.pool-ranking-section { padding: var(--s-10) 0; border-top: var(--rule); }
.pool-ranking-section .section-label { font-family: var(--f-mono); font-size: var(--t-mono-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 var(--s-6); }
.pool-comparison-table .data-table { width: 100%; border-collapse: collapse; font-family: var(--f-serif); font-size: var(--t-sm); }
.pool-comparison-table .data-table thead th { background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: var(--t-mono-xs); text-transform: uppercase; letter-spacing: .06em; padding: var(--s-3) var(--s-4); text-align: left; font-weight: 700; }
.pool-comparison-table .data-table tbody td { padding: var(--s-3) var(--s-4); border-bottom: var(--hairline-soft); vertical-align: middle; }
.pool-comparison-table .data-table tbody tr:last-child td { border-bottom: 0; }
.pool-comparison-table .data-table tbody tr:hover { background: var(--paper-2); }
.pool-comparison-table .data-table .table-row--active td { background: var(--vermilion-pale, rgba(200,50,30,.06)); font-weight: 600; }
.pull-quote { border-left: 3px solid var(--vermilion); padding: var(--s-4) var(--s-6); margin: var(--s-7) 0 0; font-style: italic; font-size: var(--t-md); color: var(--ink-soft); background: var(--paper-2); }
.pull-quote.pool-insight { margin-top: var(--s-6); font-size: var(--t-sm); }
@media (max-width: 640px) {
  .pool-comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pool-comparison-table .data-table { min-width: 480px; }
}

/* ==================== 23. CONTENT CARDS (universal posts/guides/glossary cards) ==================== */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin: var(--s-6) 0;
}
@media (min-width: 640px) { .content-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .content-grid { grid-template-columns: repeat(3, 1fr); } }

.content-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border-top: var(--hairline);
  padding-top: var(--s-4);
  gap: var(--s-3);
}
.content-card__cover {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--cover-from, var(--paper-3)), var(--cover-to, var(--ink-faint)));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--hairline);
}
.content-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.content-card__cover-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermilion);
  background: var(--paper);
  padding: 4px 10px;
  border: var(--hairline);
}
.content-card__cover-icon {
  font-family: var(--f-serif);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(60px, 12vw, 100px);
  color: rgba(15, 14, 12, 0.20);
  letter-spacing: -0.03em;
  line-height: 1;
}
.content-card__title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-lg);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
.content-card__excerpt {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}
.content-card__meta {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: auto;
  display: flex;
  gap: var(--s-3);
}
.content-card:hover .content-card__title { color: var(--vermilion); }

/* ==================== 24. CHAPTER TOC (guides hub) ==================== */
.chapter-toc {
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
  padding: var(--s-7) 0;
  margin: var(--s-7) 0;
}
.chapter-toc__title {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--s-6);
}
.chapter-toc__list { list-style: none; padding: 0; margin: 0; }
.chapter-toc__row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px dotted var(--ink-faint);
}
.chapter-toc__row:last-child { border-bottom: 0; }
.chapter-toc__num {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-xl);
  color: var(--vermilion);
  font-variant-numeric: oldstyle-nums;
  line-height: 1;
}
.chapter-toc__entry { text-decoration: none; color: var(--ink); }
.chapter-toc__entry-title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-lg);
  margin: 0;
  letter-spacing: -0.01em;
}
.chapter-toc__entry-deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.chapter-toc__entry:hover .chapter-toc__entry-title { color: var(--vermilion); }
.chapter-toc__page {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* ==================== 25. GUIDE / GLOSSARY / BLOG SINGLE LAYOUT ==================== */
.guide-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  padding: var(--s-8) 0;
}
@media (min-width: 980px) {
  .guide-spread { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-9); }
}
.column-main { min-width: 0; }
.column-aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: calc(80px + var(--s-3));
  align-self: start;
}

.aside-toc {
  border: var(--hairline);
  background: var(--paper);
  padding: var(--s-5);
}
.aside-toc__title {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: var(--hairline);
}
.aside-toc__list { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.aside-toc__list li { counter-increment: toc; border-bottom: var(--hairline-soft); padding: 0; margin: 0 0 var(--s-3); }
.aside-toc__list li:last-child { border-bottom: 0; margin-bottom: 0; }
.aside-toc__list li a {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s-2);
  /* WCAG 2.5.5: 44px min. padding: 13px each side → 26px + ~19px text = 45px */
  min-height: 44px;
  padding: 13px 0;
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.35;
}
.aside-toc__list li a::before {
  content: counter(toc, lower-roman) ".";
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  color: var(--vermilion);
  letter-spacing: 0;
  text-transform: lowercase;
}
.aside-toc__list li a:hover { color: var(--vermilion); }

/* ==================== 26. BLOG HUB — NEWSPAPER ==================== */
.newspaper-lead {
  padding: var(--s-8) 0;
  border-bottom: var(--rule-heavy);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 980px) {
  .newspaper-lead { grid-template-columns: 2fr 1fr; gap: var(--s-8); }
}
.newspaper-lead__cover {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--cover-from, var(--paper-3)), var(--cover-to, var(--ink-faint)));
  border: var(--hairline);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newspaper-lead__cover img { width: 100%; height: 100%; object-fit: cover; }
.newspaper-lead__letter {
  font-family: var(--f-serif);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(120px, 18vw, 220px);
  color: rgba(15, 14, 12, 0.18);
  line-height: 1;
  letter-spacing: -0.04em;
}
.newspaper-lead__body { display: flex; flex-direction: column; gap: var(--s-3); justify-content: center; }
.newspaper-lead__cat {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
}
.newspaper-lead__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--ink);
  text-decoration: none;
  display: block;
  min-height: 44px;
}
.newspaper-lead__title:hover { color: var(--vermilion); }
.newspaper-lead__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}
.newspaper-lead__meta {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.newspaper-section {
  padding: var(--s-8) 0;
  border-bottom: var(--hairline);
}
.newspaper-section__title {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: 0 0 var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-heavy);
}

/* ==================== 27. BLOG SINGLE — EDITORIAL COLUMN ==================== */
.editorial-head {
  padding: var(--s-9) 0 var(--s-5);
  text-align: center;
  border-bottom: var(--hairline);
}
.editorial-head__cat {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: 0 0 var(--s-3);
}
.editorial-head__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-3xl);
  margin: 0 auto;
  max-width: 22ch;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
.editorial-head__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--ink-soft);
  margin: var(--s-5) auto 0;
  max-width: 50ch;
  line-height: 1.4;
}

.editorial-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: var(--rule-heavy);
}
.editorial-byline img {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  border: var(--hairline);
}
.editorial-byline__sep { color: var(--vermilion); }

.editorial-body {
  padding: var(--s-8) 0;
  max-width: 65ch;
  margin: 0 auto;
}

/* ==================== 28. GLOSSARY TERM — MONOLITH ==================== */
.term-monolith {
  padding: var(--s-9) 0 var(--s-7);
  text-align: center;
  border-bottom: var(--rule-heavy);
}
.term-monolith__plate {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: 0 0 var(--s-5);
}
.term-monolith__word {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: clamp(32px, 10vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.term-monolith__pos {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--vermilion);
  margin: var(--s-5) 0 0;
}
.term-monolith__definition {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--ink-soft);
  margin: var(--s-5) auto 0;
  max-width: 60ch;
  line-height: 1.4;
}

/* Term byline — author avatar shown on glossary term pages (LCP anchor) */
.term-byline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.term-byline img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* ==================== 29. GLOSSARY HUB — DICTIONARY ==================== */
.dict-head { padding: var(--s-9) 0 var(--s-5); text-align: center; border-bottom: var(--rule-heavy); }
.dict-head__plate {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
}
.dict-head__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-3xl);
  margin: var(--s-3) 0 var(--s-4);
  letter-spacing: -0.02em;
}
.dict-head__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.45;
}
.dict-alpha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-bottom: var(--hairline);
}
.dict-alpha a {
  display: inline-flex;
  width: 44px;
  height: 44px;
  min-width: 44px;  /* prevent flex shrinkage */
  min-height: 44px; /* enforce WCAG 2.5.5 44px minimum */
  flex-shrink: 0;   /* never compress below explicit width */
  align-items: center;
  justify-content: center;
  border: var(--hairline);
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-md);
  text-decoration: none;
  color: var(--ink);
}
.dict-alpha a:hover { background: var(--vermilion); color: var(--paper); border-color: var(--vermilion); }

.dict-entries {
  padding: var(--s-8) 0;
  column-count: 1;
  column-gap: var(--s-7);
}
@media (min-width: 720px) { .dict-entries { column-count: 2; } }

.dict-entry {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: var(--hairline-soft);
}
.dict-entry__term {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-lg);
  margin: 0;
  letter-spacing: -0.01em;
  display: inline;
}
.dict-entry__term a {
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.dict-entry__term a:hover { color: var(--vermilion); }
.dict-entry__pos {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--vermilion);
  margin-left: var(--s-2);
}
.dict-entry__def {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: var(--s-2) 0 0;
  line-height: 1.45;
}

/* ==================== 30. TOOL — INSTRUMENT PANEL ==================== */
.instrument-cover {
  padding: var(--s-8) 0;
  text-align: center;
  border-bottom: var(--rule-heavy);
}
.instrument-cover__plate {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: 0 0 var(--s-4);
}
.instrument-cover__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-3xl);
  margin: 0 auto;
  max-width: 26ch;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.instrument-cover__deck {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  margin: var(--s-5) auto 0;
  max-width: 56ch;
  line-height: 1.45;
}
.instrument-panel {
  border: var(--rule-heavy);
  background: var(--paper);
  margin: var(--s-7) 0;
  padding: var(--s-6);
}
.instrument-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: var(--hairline);
}
.instrument-panel__title {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
}
.instrument-panel__no {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  color: var(--ink-muted);
  letter-spacing: 0.10em;
}
.instrument-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: var(--hairline);
  border-left: var(--hairline);
}
@media (min-width: 720px) { .instrument-stats { grid-template-columns: repeat(4, 1fr); } }
.instrument-stat {
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  padding: var(--s-5) var(--s-3);
  text-align: center;
}
.instrument-stat__num {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  font-variant-numeric: oldstyle-nums;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.instrument-stat__label {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--s-2);
}

/* ==================== 31. AUTHOR PROFILE ==================== */
.editor-portrait {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding: var(--s-9) 0;
  border-bottom: var(--rule-heavy);
}
@media (min-width: 720px) {
  .editor-portrait { grid-template-columns: 220px 1fr; gap: var(--s-8); align-items: start; }
}
.editor-portrait__photo {
  width: 100%;
  max-width: 220px;
  border: var(--rule-heavy);
  padding: 8px;
  background: var(--paper);
}
.editor-portrait__photo img { width: 100%; height: auto; display: block; }
.editor-portrait__plate {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: 0 0 var(--s-3);
}
.editor-portrait__name {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-3xl);
  margin: 0 0 var(--s-3);
  line-height: 1;
  letter-spacing: -0.02em;
}
.editor-portrait__role {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--ink-soft);
  margin: 0;
}

/* ==================== 32. LEGAL — FORMAL LETTER ==================== */
.formal-letter {
  padding: var(--s-9) 0;
}
.formal-letter__head {
  text-align: right;
  padding-bottom: var(--s-6);
  border-bottom: var(--hairline);
  margin-bottom: var(--s-6);
}
.formal-letter__date {
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  margin: 0;
}
.formal-letter__re {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 700;
  margin: var(--s-3) 0 0;
  text-align: left;
}
.formal-letter__title {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-2xl);
  margin: var(--s-3) 0 0;
  text-align: left;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* .formal-letter__body — no max-width: .prose > * rules already constrain text elements to --max-prose;
   .hrw-grid / .hrw-pros-cons sections (not in .prose > * list) expand to full container width */
.formal-letter__body { width: 100%; }

/* Left-align text in formal letter (override .prose > * auto-centering) */
.formal-letter__body > p,
.formal-letter__body > ul,
.formal-letter__body > ol,
.formal-letter__body > h2,
.formal-letter__body > h3,
.formal-letter__body > h4,
.formal-letter__body > h5,
.formal-letter__body > h6,
.formal-letter__body > blockquote,
.formal-letter__body > figure,
.formal-letter__body > pre,
.formal-letter__body > dl,
.formal-letter__body > hr { margin-left: 0; }

/* Narrow hrw blocks in formal letter: stay at prose width, left-anchored */
.formal-letter__body .hrw-callout,
.formal-letter__body .hrw-info-box,
.formal-letter__body .hrw-aside-box,
.formal-letter__body .hrw-note,
.formal-letter__body .hrw-tip,
.formal-letter__body .hrw-warning,
.formal-letter__body .hrw-alert,
.formal-letter__body .hrw-highlight,
.formal-letter__body .hrw-highlight-box,
.formal-letter__body .table-wrap {
  max-width: var(--max-prose);
  margin-left: 0;
  margin-right: auto;
}

/* ==================== 33. FOOTER ==================== */
.site-footer {
  margin-top: auto;
  background: var(--ink);
  color: var(--ink-on-dark);
  padding: var(--s-9) 0 var(--s-5);
  border-top: 4px solid var(--vermilion);
}
.site-footer a {
  color: var(--ink-on-dark);
  text-decoration: none;
  transition: color var(--t-fast);
  /* WCAG 2.5.5 44px tap target — both axes */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}
.site-footer a:hover { color: var(--vermilion-light); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-7); } }
.footer-col__label {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin: 0 0 var(--s-3);
  font-weight: 700;
}
.footer-col p, .footer-col li {
  font-family: var(--f-serif);
  font-size: var(--t-sm);
  color: var(--ink-on-dark);
  line-height: 1.55;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 4px 0; }
.footer-brand-line {
  font-family: var(--f-serif);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
  color: var(--paper);
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-soft);
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.10em;
  color: var(--ink-faint);
}

.affiliate-disclosure {
  background: var(--paper-2);
  border-top: var(--hairline);
  padding: var(--s-3) 0;
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--ink-muted);
}

/* ==================== 34. SR-ONLY + UTILITY ==================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ==================== 35. PRINT ==================== */
@media print {
  .site-header, .site-footer, .affiliate-disclosure, .column-aside { display: none; }
  body { background: white; color: black; }
  .dossier-cover__brandmark, .ranking-table__logo { border-color: black; }
}

/* ==================== DOSSIER SCORE PLAY BUTTON ==================== */
.dossier-cover__play {
  display: block;
  width: 100%;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--ink-on-dark);
  font-family: var(--f-mono);
  font-size: var(--t-mono-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.dossier-cover__play:hover  { background: var(--vermilion); }
.dossier-cover__play:active { opacity: 0.85; }

/* ==================== MOBILE STICKY CASINO CTA ==================== */
.mobile-casino-cta {
  display: none; /* hidden on desktop */
}
@media (max-width: 768px) {
  .mobile-casino-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: var(--ink);
    color: var(--ink-on-dark);
    border-top: 2px solid var(--vermilion);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding: var(--s-3) var(--s-5);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  }
  .mobile-casino-cta.is-visible {
    transform: translateY(0);
  }
  .mobile-casino-cta__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    max-width: var(--container);
    margin: 0 auto;
  }
  .mobile-casino-cta__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: var(--paper);
    border: 1px solid var(--ink-soft);
    padding: 3px;
    flex-shrink: 0;
  }
  .mobile-casino-cta__name {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-casino-cta__btn {
    flex-shrink: 0;
    padding: var(--s-3) var(--s-6);
    background: var(--vermilion);
    color: #fff;
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .mobile-casino-cta__btn:hover  { background: var(--vermilion-2); }
}
@media print {
  .mobile-casino-cta { display: none !important; }
}

/* ==================== BACK TO TOP ==================== */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: var(--ink-on-dark);
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s, background 0.2s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover  { background: var(--ink-soft); }
.back-to-top:active { transform: translateY(1px); }
@media (max-width: 600px) {
  .back-to-top { bottom: 16px; right: 16px; }
}
@media print {
  .back-to-top { display: none; }
}