/* ============================================================
   RiverIndex Base Styles
   Imports tokens. Sets the document foundation.
   Load this once — all other stylesheets build on top of it.
   ============================================================ */


/* ----------------------------------------------------------
   RESET
---------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dot texture — visible in margins, fades toward bottom of page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image:
    linear-gradient(to right,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.5) 15%,
      rgba(0,0,0,0.12) 30%,
      rgba(0,0,0,0.12) 70%,
      rgba(0,0,0,0.5) 85%,
      rgba(0,0,0,1) 100%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 85%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.5) 15%,
      rgba(0,0,0,0.12) 30%,
      rgba(0,0,0,0.12) 70%,
      rgba(0,0,0,0.5) 85%,
      rgba(0,0,0,1) 100%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 60%,
      rgba(0,0,0,0) 85%
    );
  mask-composite: intersect;
}

::selection {
  background: var(--color-accent-subtle);
  color: var(--color-text-primary);
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a:not([class]) {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}

a:not([class]):hover {
  color: var(--color-accent-hover);
  text-decoration-thickness: 2px;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

ol, ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
}


/* ----------------------------------------------------------
   TYPE SCALE — Base classes
   Use these directly or as reference for component styles.
---------------------------------------------------------- */

.text-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.text-h3 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

.text-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.text-small {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--leading-data);
}

.text-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.text-data {
  font-family: var(--font-serif);
  font-size: var(--text-small);
}


/* ----------------------------------------------------------
   LAYOUT UTILITIES
---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width-full);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--content {
  max-width: var(--max-width-content);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}


/* ----------------------------------------------------------
   DIVIDERS
   Heavy top rule is a RiverIndex pattern from the existing
   component library — worth keeping. Signals editorial intent.
---------------------------------------------------------- */

.rule {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  margin: var(--space-6) 0;
}

.rule--heavy {
  border-top: 2px solid var(--color-text-primary);
}

.rule--accent {
  border-top: 2px solid var(--color-accent);
}


/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-table
   Data tables. Serif numbers, sans labels, left-aligned.
   Wrap in .ri-table-wrap for horizontal scroll on mobile.
---------------------------------------------------------- */

.ri-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ri-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, var(--color-surface) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.ri-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.ri-table th {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid rgba(78, 8, 22, 0.18);
  background: rgba(255,255,255,0.3);
  white-space: nowrap;
}

.ri-table td {
  font-family: var(--font-serif);
  font-size: var(--text-small);
  color: var(--color-text-primary);
  padding: var(--space-3);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.72);
}

/* First column: label style (sans) */
.ri-table td:first-child {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.ri-table tbody tr + tr td {
  border-top: 1px solid rgba(57, 52, 47, 0.08);
}

.ri-table tbody tr:nth-child(even) td {
  background: rgba(236, 233, 227, 0.72);
}

/* Modifiers */
.ri-table--zebra tbody tr:nth-child(even) td { background: var(--color-surface-2); }
.ri-table--right-data th:not(:first-child),
.ri-table--right-data td:not(:first-child) { text-align: right; }

/* Semantic cell colors */
.ri-table .positive { color: var(--color-positive); }
.ri-table .danger   { color: var(--color-danger); }
.ri-table .warning  { color: var(--color-warning); }
.ri-table .muted    { color: var(--color-text-muted); }

/* Highlighted row variants */
.ri-table .highlight td { background: rgba(107, 31, 42, 0.06); font-weight: var(--weight-semibold); }
.ri-table .row-positive td { background: var(--color-positive-subtle); }
.ri-table .row-danger td { background: var(--color-danger-subtle); }

/* Row hover — subtle accent tint across all table types */
.ri-table tbody tr:hover td,
.ri-calc__table tbody tr:hover td,
.ri-calc__summary tr:hover td,
.ri-prose tbody tr:hover td {
  background: var(--color-accent-subtle);
}


/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-section
   Top-border section divider with h2 header.
---------------------------------------------------------- */

.ri-section {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  padding: var(--space-7) 0;
}

.ri-section__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.ri-section h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-5);
  line-height: var(--leading-snug);
}

@media (max-width: 640px) {
  .ri-section__inner { padding: 0 var(--space-4); }
}

/* Alternating section tint — every other section gets recessed bg */
.ri-section:nth-of-type(even) {
  background: var(--color-surface-2);
  border-top-color: color-mix(in srgb, var(--color-border-heavy) 82%, white);
}

/* First content section gets accent top rule */
.ri-section:first-of-type {
  border-top: 2px solid var(--color-accent);
}

/* Card-contained section variant — inset with elevation */
.ri-section--card .ri-section__inner {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* Full-bleed recessed variant — fills edge to edge */
.ri-section--recessed {
  background: var(--color-surface-2);
}


/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-faq
   Accordion using native <details>. No JavaScript.
---------------------------------------------------------- */

.ri-faq {
  max-width: var(--max-width-content);
}

.ri-faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-faq details:first-child {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-faq summary {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: color var(--transition-fast), background var(--transition-fast);
  border-radius: var(--radius-sm);
}

.ri-faq summary:hover {
  color: var(--color-accent-text);
  background: var(--color-surface-2);
}
.ri-faq summary::-webkit-details-marker { display: none; }

.ri-faq summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-left: var(--space-4);
  transition: color var(--transition-fast);
}

.ri-faq details[open] summary { color: var(--color-accent-text); }
.ri-faq details[open] summary::after { content: '\2212'; color: var(--color-accent-text); }

.ri-faq .ri-faq__answer {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  padding-bottom: var(--space-5);
}


/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-cta
   Primary and secondary button states.
---------------------------------------------------------- */

.ri-cta.ri-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-on-dark);
  background: linear-gradient(180deg, #8A2835 0%, #4A0E18 100%);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-btn);
  padding: 14px 28px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 6px 14px rgba(107, 31, 42, 0.32);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(107, 31, 42, 0.25), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ri-cta.ri-cta:hover {
  background: linear-gradient(180deg, #9C2E3D 0%, #3A0710 100%);
  color: var(--color-text-on-dark);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 10px 24px rgba(107, 31, 42, 0.42);
  transform: translateY(-1px);
}

.ri-cta.ri-cta:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(107, 31, 42, 0.2);
}

.ri-cta.ri-cta--secondary {
  background: var(--color-surface);
  color: var(--color-accent-text);
  border: 1.5px solid var(--color-accent);
  padding: 12.5px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 3px rgba(26, 26, 26, 0.08);
}

.ri-cta.ri-cta--secondary:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 16px rgba(107, 31, 42, 0.18);
  transform: translateY(-1px);
}

.ri-cta.ri-cta--secondary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(107, 31, 42, 0.12);
}


/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-masthead
   Editorial paper band between the burgundy header and the
   hero. Cream strip with a crisp hairline top (reads against
   burgundy) and a soft hairline bottom (reads against any hero
   variant — light, dark burgundy, near-black). Identical on
   every template so the nav-to-content transition never drifts.
   .ri-masthead__inner is hidden — legacy templates still render
   category/type/updated spans that we don't want visible.
---------------------------------------------------------- */
.ri-masthead {
  background: var(--color-bg);
  height: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid var(--color-border-heavy);
  margin-bottom: 0;
  position: relative;
  z-index: var(--z-base);
}
.ri-masthead__inner {
  display: none;
}


/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-hero
   Variants: default (light), --dark (burgundy), --learn (near-black), --room (light + accent stripe)
---------------------------------------------------------- */

/* Base */
.ri-hero              { position: relative; overflow: hidden; padding: var(--space-7) 0 var(--space-6); background: var(--color-surface-2); }
.ri-hero__inner       { position: relative; z-index: 1; max-width: var(--max-width-content); margin: 0 auto; padding: 0 var(--space-6); }
.ri-hero h1           { font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.12; color: var(--color-text-primary); margin-bottom: var(--space-3); }
.ri-hero__cred        { font-family: var(--font-sans); font-size: var(--text-small); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4); }
.ri-hero__cred span   { margin: 0 var(--space-2); opacity: 0.5; }
.ri-hero__desc        { font-family: var(--font-sans); font-size: var(--text-body); color: var(--color-text-secondary); line-height: var(--leading-normal); max-width: 640px; margin: 0; }

/* Watermark (background image positioned behind content) */
.ri-hero__watermark {
  position: absolute; top: 0; right: 0; bottom: 0; left: 30%;
  opacity: 0.18; pointer-events: none; overflow: hidden; z-index: 0;
  filter: grayscale(1);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 85%);
  mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 85%);
}

/* Dark + Learn shared */
.ri-hero--dark,
.ri-hero--learn                    { border-bottom: none; }
.ri-hero--dark h1,
.ri-hero--learn h1                 { color: var(--color-text-on-dark); }
.ri-hero--dark .ri-hero__cred,
.ri-hero--learn .ri-hero__cred     { color: rgba(255,255,255,0.4); }
.ri-hero--dark .ri-hero__cred span,
.ri-hero--learn .ri-hero__cred span { opacity: 0.3; }
.ri-hero--dark .ri-hero__desc,
.ri-hero--learn .ri-hero__desc     { font-family: var(--font-serif); font-size: 1.05rem; color: rgba(255,255,255,0.45); line-height: 1.6; font-style: italic; }

/* Bottom edge gradient (dark + learn) */
.ri-hero--dark::after,
.ri-hero--learn::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 80%, transparent 100%);
}

/* Dark (burgundy) — dot pattern fading from top-right.
   The .ri-masthead paper band above carries the divider; no
   top border here so the hero starts cleanly against it. */
.ri-hero--dark {
  background: var(--color-bg-dark);
}
.ri-hero--dark::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 25%, rgba(0,0,0,0.9) 0%, transparent 55%);
  mask-image: radial-gradient(ellipse at 80% 25%, rgba(0,0,0,0.9) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}

/* Learn (near-black) — larger padding, bigger h1, grid texture fading from top-right */
.ri-hero--learn                    { background: var(--color-text-primary); padding: var(--space-8) 0 var(--space-7); }
.ri-hero--learn h1                 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; }
.ri-hero--learn::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 85% 20%, rgba(0,0,0,0.8) 0%, transparent 55%);
  mask-image: radial-gradient(ellipse at 85% 20%, rgba(0,0,0,0.8) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .ri-hero__inner     { padding: 0 var(--space-4); }
  .ri-hero__watermark { left: 20%; opacity: 0.1; }
}


/* ----------------------------------------------------------
   CHARTS — Universal chart standards
   Shared container, legend, and explainer styles for every
   Chart.js and canvas visualization on the site.
   Pairs with static/js/ri-charts.js.
---------------------------------------------------------- */

/* Container — wraps the <canvas> element */
.ri-chart-wrap {
  position: relative;
  height: 360px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* Legend / key — sits below the chart */
.ri-chart-legend {
  display: flex;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, white);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.ri-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.ri-chart-swatch {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Swatch variants — match ri-charts.js color tokens */
.ri-chart-swatch--ev       { background: var(--color-chart-ev); }
.ri-chart-swatch--ci70     { background: var(--color-chart-ci70); }
.ri-chart-swatch--ci95     { background: var(--color-chart-ci95); }
.ri-chart-swatch--ci997    { background: rgba(134, 239, 172, 0.35); }
.ri-chart-swatch--best     { background: var(--color-chart-best); }
.ri-chart-swatch--worst    { background: var(--color-chart-worst); }
.ri-chart-swatch--sample   { background: var(--color-chart-sample); }
.ri-chart-swatch--observed { background: var(--color-chart-observed); }
.ri-chart-swatch--profit   { background: var(--color-chart-profit); }
.ri-chart-swatch--drawdown { background: var(--color-chart-drawdown); height: 6px; opacity: 0.5; }

/* Explainer prose — sits below the legend */
.ri-chart-explainer {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

/* Responsive */
@media (max-width: 640px) {
  .ri-chart-wrap { height: 280px; padding: var(--space-3); }
  .ri-chart-legend { padding: var(--space-3) var(--space-4); gap: var(--space-3) var(--space-5); }
}


/* ----------------------------------------------------------
   PROSE — Article body typography
   Apply to any container that renders markdown/HTML content.
   Three-tier spacing: H2 (major) > H3 (sub) > paragraph.
   ---------------------------------------------------------- */

.ri-prose {
  width: 100%;
  max-width: var(--max-width-content);
  overflow-wrap: break-word;
}

/* H2: major section — accent text, hairline rule above, wide breathing room */
.ri-prose h1,
.ri-prose h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  color: var(--color-accent-text);
  line-height: var(--leading-snug);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  padding-top: var(--space-5);
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
}

.ri-prose h1 { font-size: var(--text-h1); }
.ri-prose h2 { font-size: var(--text-h2); }

/* First heading in block or after section-rule — no rule or top margin */
.ri-prose > h1:first-child,
.ri-prose > h2:first-child,
.ri-prose > .section-rule + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* .section-rule-label removed -- use plain headings */

/* H3: subsection — clear gap above (3x paragraph spacing) */
.ri-prose h3 {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.ri-prose p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  text-wrap: pretty;
}

.ri-prose strong { font-weight: var(--weight-semibold); }

.ri-prose a:not([class]) {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ri-prose a:not([class]):hover { color: var(--color-accent-hover); }

/* Glossary term links (app/glossary_links.py). They keep the body colour and
   sit on a hairline rule in the border tone, so they read as annotation and
   the burgundy stays with editorial links. Hover brings the accent in. */
.ri-gloss {
  color: inherit;
  text-decoration: underline solid var(--color-border-heavy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.ri-gloss:hover,
.ri-gloss:focus-visible {
  color: var(--color-accent-text);
  text-decoration-color: var(--color-accent-text);
}

.ri-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  padding: 1px var(--space-1);
  border-radius: 2px;
}

.ri-prose pre {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.ri-prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-accent-subtle);
}

.ri-prose blockquote p {
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.ri-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-small);
}

.ri-prose thead th {
  font-weight: var(--weight-semibold);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-accent);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.ri-prose tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  color: var(--color-text-primary);
}

.ri-prose tbody td:first-child {
  color: var(--color-text-secondary);
}

.ri-prose ul,
.ri-prose ol {
  margin: 0 0 var(--space-4) var(--space-5);
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
}

.ri-prose ul { list-style: disc; }
.ri-prose ol { list-style: decimal; }
.ri-prose li { margin-bottom: var(--space-2); }

.ri-prose hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  margin: var(--space-7) 0;
}

/* When hr precedes a heading, the heading already has its own rule and spacing */
.ri-prose hr + h1,
.ri-prose hr + h2 {
  border-top: none;
  margin-top: var(--space-5);
  padding-top: 0;
}

.ri-prose img {
  max-width: 100%;
  height: auto;
}


/* ----------------------------------------------------------
   YOUTUBE — Facade + placeholder
   Privacy-friendly YouTube embed with thumbnail facade.
   Available on any page (learn, editorial, guides, etc.)
---------------------------------------------------------- */

.ri-yt-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #2A2A2A;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.ri-yt-placeholder__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ri-yt-placeholder__icon svg { opacity: 0.3; }

.ri-yt-placeholder__label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.ri-yt-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ri-yt-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  transition: background var(--transition-fast);
}

.ri-yt-facade:hover::before { background: rgba(0,0,0,0.05); }

.ri-yt-facade__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}

.ri-yt-facade__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}

.ri-yt-facade__title {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: #fff;
}

.ri-yt-facade__channel {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: rgba(255,255,255,0.7);
}

.ri-yt-facade__duration {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  padding: 2px var(--space-2);
  border-radius: 2px;
  z-index: 1;
}


/* ----------------------------------------------------------
   LAYOUT: .ri-room-cards
   A row of offer cards. The cards are .ri-cta-card--offer, the
   shared dark card in site.css; this only lays them out, and
   any page with two or three of them can use it.
---------------------------------------------------------- */
.ri-room-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.ri-room-cards:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}


@media (max-width: 768px) {
  .ri-room-cards { grid-template-columns: 1fr; }
}




/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-cards
   Playing card rendering for _cards.html macros.
   Used by hand-rankings, holdem-rules, and any poker content.
---------------------------------------------------------- */

.ri-cards__card {
  width: 60px;
  height: 84px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, white);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  position: relative;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.ri-cards__card--red { color: var(--color-danger); }
.ri-cards__card:not(.ri-cards__card--red) { color: var(--color-text-primary); }

.ri-cards__card--hl {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 2px 8px rgba(107,31,42,0.15);
}

.ri-cards__card:not(.ri-cards__card--hl) {
  border-color: color-mix(in srgb, var(--color-border) 84%, white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  background: var(--color-bg, #F8F7F4);
}

.ri-cards__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.ri-cards__corner--tl {
  top: 4px;
  left: 5px;
}

.ri-cards__corner--br {
  bottom: 4px;
  right: 5px;
  transform: rotate(180deg);
}

.ri-cards__rank {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.ri-cards__card--wide .ri-cards__rank {
  font-size: 11px;
  letter-spacing: -0.5px;
}

.ri-cards__suit-sm {
  font-size: 10px;
  line-height: 1;
  margin-top: -1px;
}

.ri-cards__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
}

/* Hand display -- fan rotation */
.ri-cards__hand {
  display: inline-flex;
  padding: 8px 12px 12px;
  cursor: default;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.ri-cards__hand:hover {
  transform: translateY(-2px);
}

.ri-cards__hand .ri-cards__card { margin-left: -18px; }
.ri-cards__hand .ri-cards__card:first-child { margin-left: 0; }
.ri-cards__hand .ri-cards__card--hl + .ri-cards__card:not(.ri-cards__card--hl) { margin-left: 6px; }

.ri-cards__hand .ri-cards__card:nth-child(1) { transform: rotate(-3deg); z-index: 1; }
.ri-cards__hand .ri-cards__card:nth-child(2) { transform: rotate(-1.5deg); z-index: 2; }
.ri-cards__hand .ri-cards__card:nth-child(3) { transform: rotate(0deg); z-index: 3; }
.ri-cards__hand .ri-cards__card:nth-child(4) { transform: rotate(1.5deg); z-index: 4; }
.ri-cards__hand .ri-cards__card:nth-child(5) { transform: rotate(3deg); z-index: 5; }

/* Board display -- flat row, no rotation */
.ri-cards__board {
  display: inline-flex;
  gap: var(--space-2);
  padding: 8px 0;
}

/* Hole cards -- flat, bigger */
.ri-cards__hole {
  display: inline-flex;
  gap: var(--space-2);
  padding: 8px 0;
}

.ri-cards__hole .ri-cards__card {
  width: 70px;
  height: 100px;
}

.ri-cards__hole .ri-cards__rank { font-size: 15px; }
.ri-cards__hole .ri-cards__card--wide .ri-cards__rank { font-size: 13px; }
.ri-cards__hole .ri-cards__suit-sm { font-size: 12px; }
.ri-cards__hole .ri-cards__center { font-size: 26px; }

/* Mobile card scaling */
@media (max-width: 640px) {
  .ri-cards__card {
    width: 46px;
    height: 64px;
  }
  .ri-cards__rank { font-size: 11px; }
  .ri-cards__card--wide .ri-cards__rank { font-size: 9px; }
  .ri-cards__suit-sm { font-size: 8px; }
  .ri-cards__center { font-size: 17px; }
  .ri-cards__hand .ri-cards__card { margin-left: -14px; }
  .ri-cards__hand .ri-cards__card--hl + .ri-cards__card:not(.ri-cards__card--hl) { margin-left: 4px; }
  .ri-cards__hand .ri-cards__card:nth-child(1) { transform: rotate(-1.5deg); }
  .ri-cards__hand .ri-cards__card:nth-child(2) { transform: rotate(-0.75deg); }
  .ri-cards__hand .ri-cards__card:nth-child(3) { transform: rotate(0deg); }
  .ri-cards__hand .ri-cards__card:nth-child(4) { transform: rotate(0.75deg); }
  .ri-cards__hand .ri-cards__card:nth-child(5) { transform: rotate(1.5deg); }
  /* Hole cards flat on mobile too */
}

/* Casino board -- 5-slot layout like a real table felt */
.ri-cards__casino-board {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-positive);
  border-radius: var(--radius-md);
  border: 5px solid #3d2b1f;
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.1);
}

.ri-cards__slot {
  width: 74px;
  height: 104px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.ri-cards__slot--empty {
  border: 2px dashed rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.08);
}

.ri-cards__slot--dealt {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cards inside casino board are bigger */
.ri-cards__casino-board .ri-cards__card {
  width: 70px;
  height: 100px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.ri-cards__casino-board .ri-cards__rank {
  font-size: 15px;
}

.ri-cards__casino-board .ri-cards__card--wide .ri-cards__rank {
  font-size: 13px;
}

.ri-cards__casino-board .ri-cards__suit-sm {
  font-size: 12px;
}

.ri-cards__casino-board .ri-cards__center {
  font-size: 26px;
}

@media (max-width: 640px) {
  .ri-cards__casino-board {
    gap: var(--space-1);
    padding: var(--space-3);
    border-width: 4px;
  }
  .ri-cards__slot {
    width: 54px;
    height: 76px;
  }
  .ri-cards__casino-board .ri-cards__card {
    width: 50px;
    height: 72px;
  }
  .ri-cards__casino-board .ri-cards__rank { font-size: 12px; }
  .ri-cards__casino-board .ri-cards__card--wide .ri-cards__rank { font-size: 10px; }
  .ri-cards__casino-board .ri-cards__suit-sm { font-size: 9px; }
  .ri-cards__casino-board .ri-cards__center { font-size: 20px; }
}


/* ----------------------------------------------------------
   LOGO SYSTEM
   Three-tier shared logo container for operator/room/network logos.
   Replaces 13 bespoke per-page classes. Canvas source PNGs are
   aspect-matched (wide logos get wide canvases) so object-fit:
   contain renders each logo at its natural proportion within the
   slot. The --dark modifier stays available for future
   white-on-transparent logos even though no current logo uses it.
---------------------------------------------------------- */

.ri-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.ri-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The hero tier is a fixed 320px box, so a square mark (CoinPoker) floated
   116px inside it while a wide wordmark (WPT) nearly filled it: the review
   hero's visible left edge moved with whichever room you were reading. Anchor
   the artwork to the box's left edge, same reasoning as the table-cell rule
   below. */
.ri-logo--hero {
  width: 320px;
  height: 96px;
  justify-content: flex-start;
}

.ri-logo--hero img {
  object-position: left center;
}

.ri-logo--standard {
  width: 200px;
  height: 56px;
}

.ri-logo--compact {
  width: 140px;
  height: 40px;
}

/* Left-align logos inside table cells so rows share a common left edge */
td .ri-logo {
  justify-content: flex-start;
}

/* Text fallback when a room has no logo image — shares the .ri-logo slot */
.logo-text {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Responsive scaling on small screens so .ri-logo--standard fits mobile grids */
@media (max-width: 768px) {
  .ri-logo--hero {
    width: 240px;
    height: 72px;
  }
  .ri-logo--standard {
    width: 140px;
    height: 44px;
  }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   Respect user preference for minimal animation.
---------------------------------------------------------- */

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


/* A single offer card inside an article column. The card is the shared
   .ri-cta-card--offer; this keeps one card from stretching to the measure of
   the prose around it. */
.ri-learn__room-cta {
  max-width: 420px;
  margin: var(--space-7) auto;
}

/* ============================================================
   RiverIndex — Home (mirror of WordPress masthead → tools → row-b
   → ticker → stories → about → more grid). Light editorial grid.
   ============================================================ */

.ri-home {
  background: var(--color-bg);
  padding: 0 0 var(--space-9);
}

/* Site grid: matches .header-inner and .ri-hero__inner so the masthead h1
   starts on the same left edge as the nav logo. */
.ri-home__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.ri-home a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ri-home img {
  max-width: 100%;
  display: block;
}


/* ---------- MASTHEAD ----------------------------------------- */

.ri-home__masthead {
  padding: var(--space-7) 0 0;
}

.ri-home__masthead h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.ri-home__deck {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-2);
}

.ri-home__since {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-5);
}

.ri-home__rule {
  border: none;
  border-top: 2px solid var(--color-text-primary);
  margin: 0;
}


/* ---------- LABELS ------------------------------------------- */

.ri-home__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-1);
}

.ri-home__label--accent {
  color: var(--color-accent);
}


/* ---------- ROW A — three flagship tool tiles ---------------- */

.ri-home__row-a {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: var(--space-5) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__lead-tool {
  display: block;
  padding: 0 var(--space-5);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__lead-tool:first-child { padding-left: 0; }
.ri-home__lead-tool:last-child  { padding-right: 0; border-right: none; }

.ri-home__lead-tool-img {
  width: 100%;
  display: block;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, white);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
}

.ri-home__lead-tool-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.ri-home__lead-tool-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.ri-home__lead-tool:hover .ri-home__lead-tool-title {
  color: var(--color-accent);
}


/* ---------- ROW B — featured / nudge / mini tools ------------ */

.ri-home__row-b {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr;
  gap: 0;
  padding: var(--space-5) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__row-b-col {
  padding: 0 var(--space-5);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__row-b-col:first-child { padding-left: 0; }
.ri-home__row-b-col:last-child  { padding-right: 0; border-right: none; }

/* Featured (WSOP) */
.ri-home__featured-link {
  display: block;
}

.ri-home__featured-img {
  width: 100%;
  /* The img carries width/height attributes to reserve layout space. Without
     height:auto the attribute height wins and the plate renders squashed. */
  height: auto;
  display: block;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, white);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
}

.ri-home__article-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.ri-home__featured-link:hover .ri-home__article-title {
  color: var(--color-accent);
}

.ri-home__article-desc {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}

.ri-home__article-meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Nudge column */
.ri-home__nudge--secondary {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
}

.ri-home__nudge-hl {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

.ri-home__nudge-sub {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}

.ri-home__nudge-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  border-bottom: 1.5px solid var(--color-text-primary);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ri-home__nudge-link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Mini tools column */
.ri-home__mini-tool {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__mini-tool:first-of-type { padding-top: 0; }
.ri-home__mini-tool:last-child    { padding-bottom: 0; border-bottom: none; }

.ri-home__mini-tool-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.ri-home__mini-tool-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.ri-home__mini-tool:hover .ri-home__mini-tool-title {
  color: var(--color-accent);
}


/* ---------- TICKER — 4 short links --------------------------- */

.ri-home__ticker {
  display: flex;
  gap: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__ticker-item {
  flex: 1;
  padding: 0 var(--space-4);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__ticker-item:first-child { padding-left: 0; }
.ri-home__ticker-item:last-child  { padding-right: 0; border-right: none; }

.ri-home__ticker-item-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.ri-home__ticker-item:hover .ri-home__ticker-item-title {
  color: var(--color-accent);
}


/* ---------- STORIES — lead + secondary ----------------------- */

.ri-home__stories {
  padding: var(--space-6) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__stories .ri-home__rule {
  margin-bottom: var(--space-5);
}

.ri-home__section-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.012em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-5);
}

.ri-home__stories-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
}

.ri-home__story-lead {
  padding-right: var(--space-5);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__story-lead > a { display: block; }

.ri-home__story-lead-img {
  width: 100%;
  display: block;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, white);
  margin-bottom: var(--space-3);
}

.ri-home__story-lead-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.ri-home__story-lead-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.ri-home__story-lead a:hover .ri-home__story-lead-title {
  color: var(--color-accent);
}

.ri-home__stories-secondary {
  padding-left: var(--space-5);
}

.ri-home__story-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__story-item:first-child { padding-top: 0; }
.ri-home__story-item:last-child  { padding-bottom: 0; border-bottom: none; }

.ri-home__story-item-img {
  width: 100px;
  height: 68px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, white);
  flex-shrink: 0;
}

.ri-home__story-item-body {
  min-width: 0;
}

.ri-home__story-item-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.ri-home__story-item-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.ri-home__story-item:hover .ri-home__story-item-title {
  color: var(--color-accent);
}


/* ---------- ABOUT -------------------------------------------- */

.ri-home__about {
  padding: var(--space-6) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__about .ri-home__rule {
  margin-bottom: var(--space-5);
}

.ri-home__about h2 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.ri-home__about p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
  max-width: 75ch;
}

.ri-home__about p:last-child { margin-bottom: 0; }


/* ---------- MORE GRID ---------------------------------------- */

.ri-home__more {
  margin-top: var(--space-7);
  padding: var(--space-5) 0 var(--space-2);
  border-top: 2px solid var(--color-text-primary);
}

.ri-home__more-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.012em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-5);
}

.ri-home__more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.ri-home__more-item {
  display: block;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__more-item:nth-child(3n)       { border-right: none; padding-right: 0; }
.ri-home__more-item:nth-child(3n+2),
.ri-home__more-item:nth-child(3n)       { padding-left: var(--space-4); }
.ri-home__more-item:nth-child(3n+1)     { padding-left: 0; }
.ri-home__more-item:nth-last-child(-n+3) { border-bottom: none; }

.ri-home__more-item-type {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.ri-home__more-item-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.ri-home__more-item:hover .ri-home__more-item-title {
  color: var(--color-accent);
}


/* ============================================================
   SECTION HEADERS (Tools / Rooms / Learn / Casino)
   ============================================================ */

.ri-home__section {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

/* Alternating tint bands. Four identically-built section headers stacked on
   one flat ground gave the page no vertical rhythm and nothing to tell the
   sections apart by at a glance. Tone does that work here rather than a
   per-section restyle, so every header keeps the same construction.
   The band bleeds past the content column; the column is viewport-centred,
   so a 100vw child anchored at left:50% lands flush on both edges. */
.ri-home__section:nth-of-type(even) {
  padding-top: var(--space-2);
  padding-bottom: var(--space-6);
  border-bottom-color: transparent;
}

.ri-home__section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  /* surface-2 alone sits about six values off the page ground and reads as a
     rendering artefact rather than a band. Pulled toward surface-3 until the
     edge is legible without turning into a panel. */
  background: color-mix(in srgb, var(--color-surface-2) 45%, var(--color-surface-3));
  z-index: -1;
  pointer-events: none;
}

.ri-home__section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-6) 0 var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  margin-bottom: var(--space-5);
}

.ri-home__section-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.ri-home__section-h {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}

.ri-home__section-more {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.ri-home__section-more:hover {
  color: var(--color-accent);
}


/* ============================================================
   TOOLS SUB-RAIL — 6 secondary tools, single row
   ============================================================ */

.ri-home__sub-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: var(--space-4) 0 var(--space-5);
}

.ri-home__rail-item {
  display: block;
  padding: 0 var(--space-3);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__rail-item:first-child { padding-left: 0; }
.ri-home__rail-item:last-child  { padding-right: 0; border-right: none; }

.ri-home__rail-item-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-top: 2px;
}

.ri-home__rail-item:hover .ri-home__rail-item-title {
  color: var(--color-accent);
}


/* ============================================================
   LEARN — no-image variants for clean editorial cards
   ============================================================ */

.ri-home__story-lead--no-img > a {
  display: block;
  padding: var(--space-2) 0 0;
}

.ri-home__story-lead--no-img .ri-home__story-lead-title {
  font-size: 1.5rem;
  margin-top: var(--space-2);
}

.ri-home__story-item--no-img {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__story-item--no-img:first-child { padding-top: 0; }
.ri-home__story-item--no-img:last-child  { padding-bottom: 0; border-bottom: none; }

.ri-home__story-item--no-img .ri-home__story-item-title {
  font-size: 1.0625rem;
}


/* ============================================================
   CASINO GRID — 4-up cards with accent label
   ============================================================ */

.ri-home__casino-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0 0 var(--space-5);
}

.ri-home__casino-item {
  display: block;
  padding: 0 var(--space-4);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__casino-item:first-child { padding-left: 0; }
.ri-home__casino-item:last-child  { padding-right: 0; border-right: none; }

.ri-home__casino-item-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.ri-home__casino-item-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.ri-home__casino-item:hover .ri-home__casino-item-title {
  color: var(--color-accent);
}

.ri-home__ticker--secondary {
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .ri-home__row-b {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    padding: var(--space-5) 0;
  }
  .ri-home__row-b-col {
    padding: 0;
    border-right: none;
  }
  .ri-home__row-b-col--featured {
    grid-column: 1 / -1;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
    padding-bottom: var(--space-5);
  }

  .ri-home__stories-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .ri-home__story-lead {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
    padding-bottom: var(--space-5);
  }
  .ri-home__stories-secondary { padding-left: 0; }

  .ri-home__sub-rail { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-3); }
  .ri-home__rail-item:nth-child(3n) { border-right: none; padding-right: 0; }
  .ri-home__rail-item:nth-child(3n+1) { padding-left: 0; }
  .ri-home__rail-item:nth-child(n+4) {
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  }

  .ri-home__casino-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .ri-home__casino-item:nth-child(2n) { border-right: none; padding-right: 0; }
  .ri-home__casino-item:nth-child(2n+1) { padding-left: 0; }
  .ri-home__casino-item:nth-child(n+3) {
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  }

  .ri-home__more-grid { grid-template-columns: 1fr 1fr; }
  .ri-home__more-item:nth-child(3n)     { border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white); padding-right: var(--space-4); }
  .ri-home__more-item:nth-child(3n+2),
  .ri-home__more-item:nth-child(3n)     { padding-left: 0; }
  .ri-home__more-item:nth-child(2n)     { border-right: none; padding-right: 0; }
  .ri-home__more-item:nth-child(2n+1)   { padding-left: 0; padding-right: var(--space-4); }
  .ri-home__more-item                   { padding-left: var(--space-4); }
  .ri-home__more-item:nth-last-child(-n+3) { border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white); }
  .ri-home__more-item:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 640px) {
  .ri-home__inner {
    padding-inline: var(--space-4);
  }

  .ri-home__masthead { padding-top: var(--space-5); }
  .ri-home__masthead h1 { font-size: 1.75rem; }
  .ri-home__deck { font-size: 1rem; }

  .ri-home__row-a {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .ri-home__lead-tool {
    padding: 0 0 var(--space-5);
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  }
  .ri-home__lead-tool:last-child { border-bottom: none; padding-bottom: 0; }

  .ri-home__row-b { grid-template-columns: 1fr; }

  .ri-home__ticker {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .ri-home__ticker-item {
    flex: 0 0 calc(50% - var(--space-2) / 2);
    padding: var(--space-2) 0;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  }
  .ri-home__ticker-item:nth-last-child(-n+2) { border-bottom: none; }

  .ri-home__story-item-img {
    width: 88px;
    height: 60px;
  }

  .ri-home__section-head {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .ri-home__section-eyebrow { grid-column: 1; grid-row: 1; }
  .ri-home__section-more { grid-column: 2; grid-row: 1; }
  .ri-home__section-h { grid-column: 1 / -1; grid-row: 2; font-size: 1.25rem; }

  .ri-home__sub-rail { grid-template-columns: 1fr 1fr; }
  .ri-home__rail-item:nth-child(odd) { padding-left: 0; }
  .ri-home__rail-item:nth-child(even) { border-right: none; padding-right: 0; }
  .ri-home__rail-item { border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white); }
  .ri-home__rail-item:nth-child(n+3) {
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  }

  .ri-home__casino-grid { grid-template-columns: 1fr; row-gap: 0; }
  .ri-home__casino-item {
    padding: var(--space-3) 0 !important;
    border-right: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  }
  .ri-home__casino-item:last-child { border-bottom: none; }

  .ri-home__more-grid { grid-template-columns: 1fr; }
  .ri-home__more-item {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white) !important;
  }
  .ri-home__more-item:last-child { border-bottom: none !important; }
}

/* ─── FEATURED PROMOTION ──────────────────────────────────────
   Occupies the same slot as the featured review card and is built to the
   same height: mark, title, three facts, CTA. Only the first three rows of
   promo.detail render here — the full table lives on the review page. */
.ri-home__promo-facts {
  margin: var(--space-3) 0 var(--space-4);
}

.ri-home__promo-fact {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__promo-fact:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__promo-fact dt {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ri-home__promo-fact dd {
  font-family: var(--font-serif);
  font-size: 1rem;
  margin: 0;
}

.ri-home__promo-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.ri-home__promo-cta:hover { text-decoration: underline; }


/* ─── ALSO RUNNING ────────────────────────────────────────────
   The other rooms with a live series. Deliberately a list and not a second
   run of promo cards: the lead card already spends the reader's attention on
   art and three facts, and repeating that per room turns the slot into an ad
   block. Each row carries the room, the headline, and the one number. */
.ri-home__promo-more-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__promo-more {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ri-home__promo-more-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.ri-home__promo-more-item + .ri-home__promo-more-item {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 45%, white);
}

.ri-home__promo-more-link {
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.ri-home__promo-more-room {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ri-home__promo-more-hl {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.3;
  margin-top: 1px;
}

.ri-home__promo-more-link:hover .ri-home__promo-more-hl {
  color: var(--color-accent);
}

.ri-home__promo-more-val {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .ri-home__promo-fact {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  /* The value drops under the headline rather than squeezing it to a couple
     of characters a line. */
  .ri-home__promo-more-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* ============================================================
   BLOG BAND — lead beside a digest river
   Every other band on this page is a card grid. This one borrows
   the section-front construction from /blog/ so the two read as
   the same section, and so a fifth grid does not flatten the page.
   No datelines by design: the feed ranks on readership, not
   recency (homepage_blog_feed in article_routes.py).
   ============================================================ */

.ri-home__blog {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  gap: var(--space-6);
  padding-bottom: var(--space-2);
}

.ri-home__blog-lead {
  display: block;
  padding-right: var(--space-6);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__blog-lead-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.ri-home__blog-lead-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.ri-home__blog-lead:hover .ri-home__blog-lead-title {
  color: var(--color-accent);
}

/* Kicker and headline on one line each: five rows have to sit against
   the lead without out-running it, so the label goes beside the title
   rather than above it. */
.ri-home__blog-post {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-home__blog-post:first-child {
  padding-top: 0;
  border-top: none;
}

.ri-home__blog-post:last-child {
  padding-bottom: 0;
}

.ri-home__blog-post .ri-home__label {
  margin-bottom: 0;
}

.ri-home__blog-post-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.ri-home__blog-post:hover .ri-home__blog-post-title {
  color: var(--color-accent);
}

@media (max-width: 960px) {
  .ri-home__blog {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .ri-home__blog-lead {
    padding-right: 0;
    padding-bottom: var(--space-5);
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  }
}

@media (max-width: 640px) {
  .ri-home__blog-post {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ri-home__blog-post .ri-home__label {
    margin-bottom: var(--space-1);
  }
}

/* ============================================================
   RiverIndex — Site Components
   Header, footer, nav, and shared patterns used across
   all page templates. Page-specific CSS lives in each template.
   ============================================================ */

/* ----------------------------------------------------------
   TOP MASTHEAD AD
   Contractual top-of-page placement, styled as publication
   chrome rather than a generic banner strip.
---------------------------------------------------------- */

.site-masthead-slot {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(248,247,244,0.98) 100%),
    linear-gradient(90deg, rgba(107, 31, 42, 0.04) 0%, transparent 42%);
  border-bottom: 1px solid rgba(57, 52, 47, 0.08);
  min-height: 132px;
}

.site-masthead-slot--prefooter {
  background:
    linear-gradient(180deg, rgba(248,247,244,0.98) 0%, rgba(255,255,255,0.82) 100%),
    linear-gradient(90deg, rgba(107, 31, 42, 0.04) 0%, transparent 42%);
  border-top: 1px solid rgba(57, 52, 47, 0.08);
  border-bottom: none;
  margin-top: var(--space-8);
}

.site-masthead-slot__inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

.site-masthead-slot__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.site-masthead-slot__label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-masthead-slot__note {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.35;
}

.site-masthead-slot__frame {
  display: flex;
  justify-content: center;
  min-height: 90px;
  min-width: 0;
}

.site-partner-banner {
  width: 728px;
  min-height: 90px;
  max-width: 100%;
  min-width: 0;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(57, 52, 47, 0.07);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.site-partner-banner:hover {
  box-shadow: 0 10px 28px rgba(57, 52, 47, 0.11);
  transform: translateY(-1px);
}

/* Supplied 728x90 partner creative — image fills the frame edge to edge. */
.site-partner-banner--creative {
  min-height: 0;
  padding: 0;
  gap: 0;
  background: var(--color-bg-dark);
  overflow: hidden;
}

.site-partner-banner--creative picture,
.site-partner-banner--creative img {
  display: block;
  width: 100%;
  height: auto;
}

.site-partner-banner__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-partner-banner__logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.site-partner-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.site-partner-banner__headline {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.site-partner-banner__sub {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.35;
}

.site-partner-banner__cta {
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  background: linear-gradient(180deg, #6B1F2A 0%, #4E0816 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 2px 6px rgba(107,31,42,0.22);
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}

.site-partner-banner:hover .site-partner-banner__cta {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 6px 16px rgba(107,31,42,0.3);
}

@media (max-width: 640px) {
  .site-partner-banner {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .site-partner-banner__sub { display: none; }
  .site-partner-banner__cta { margin-left: 0; }
}

@media (max-width: 768px) {
  .site-masthead-slot__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  /* Creative scales below 728px — don't reserve 90px of dead frame under it. */
  .site-masthead-slot__frame { min-height: 0; }
  .site-masthead-slot { min-height: 0; }

  /* The 320x50 phone cut shows at its own size rather than stretching. */
  .site-partner-banner--has-mobile { width: 320px; }

  .site-masthead-slot__meta {
    min-width: 0;
    align-items: center;
    text-align: center;
  }

  .site-masthead-slot__placeholder {
    width: 320px;
    height: 50px;
    min-height: 50px;
    outline-offset: -6px;
  }
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.site-header {
  background: var(--color-bg-dark);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.12);
}

.header-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  height: 64px;
  gap: var(--space-2);
}

/* The page grid narrows to --space-4 at this width; the logo follows it so the
   nav and the h1 beneath it keep a single left edge on phones. */
@media (max-width: 640px) {
  .header-inner {
    padding-inline: var(--space-4);
  }
}

.site-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 176px;
  max-width: 220px;
  height: 64px;
  margin-right: var(--space-4);
  padding-right: var(--space-5);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo__wordmark {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
  line-height: 1;
}

.site-logo__tagline {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.2;
}


/* ----------------------------------------------------------
   PRIMARY NAV — Desktop
---------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* Trigger buttons */

.nav-dropdown-trigger {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-transform: none;
  padding: var(--space-2) var(--space-3);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  position: relative;
}

.nav-dropdown-trigger:hover {
  color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.06);
}

.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--color-text-on-dark);
  background: rgba(255, 255, 255, 0.08);
}

/* Chevron */

.nav-chevron {
  opacity: 0.45;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  flex-shrink: 0;
}

.nav-dropdown:hover .nav-chevron,
.nav-dropdown.is-open .nav-chevron {
  opacity: 0.9;
}

.nav-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
}


/* ----------------------------------------------------------
   MEGA DROPDOWN — Panel
---------------------------------------------------------- */

.nav-mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-surface);
  box-shadow: 0 20px 40px rgba(28, 27, 27, 0.06);
  border-radius: 0;
  z-index: var(--z-overlay);
  min-width: 260px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear 0.18s;
}

.nav-dropdown.is-open .nav-mega {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear 0s;
}

/* Hero block — featured item at top of dropdown */

.nav-mega__hero {
  display: block;
  padding: var(--space-5);
  background: var(--color-accent-subtle);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.nav-mega__hero:hover {
  background: var(--color-accent-subtle);
}

.nav-mega__hero-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}

.nav-mega__hero-title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.nav-mega__hero-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  margin-top: var(--space-1);
}

.nav-mega__hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text);
  margin-top: var(--space-3);
}

.nav-mega__hero-cta svg {
  transition: transform var(--transition-fast);
}

.nav-mega__hero:hover .nav-mega__hero-cta svg {
  transform: translateX(3px);
}


/* Body — content area above the hub link */

.nav-mega__body {
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.nav-mega__body--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
  min-width: 440px;
}

/* Columns */

.nav-mega__col {
  display: flex;
  flex-direction: column;
}


/* ----------------------------------------------------------
   MEGA DROPDOWN — Items
---------------------------------------------------------- */

.nav-mega__item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  transition: background var(--transition-fast);
  line-height: var(--leading-snug);
}

.nav-mega__item:hover {
  background: var(--color-surface-2);
}



/* ----------------------------------------------------------
   MEGA DROPDOWN — Hub link (bottom bar)
---------------------------------------------------------- */

.nav-mega__hub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text);
  text-decoration: none;
  transition: background var(--transition-fast);
  border-radius: 0;
}

.nav-mega__hub:hover {
  background: var(--color-accent-subtle);
}

.nav-mega__hub svg {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.nav-mega__hub:hover svg {
  transform: translateX(3px);
}


/* ----------------------------------------------------------
   HEADER — Promotional slot (right side)
---------------------------------------------------------- */

.header-promo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  height: auto;
  text-decoration: none;
  transition: color var(--transition-fast);
  flex-shrink: 0;
}

.header-promo:hover {
  background: transparent;
}

.header-promo__badge {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
  line-height: 1.3;
}

.header-promo__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

.header-promo__arrow {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.header-promo:hover .header-promo__arrow {
  transform: translateX(2px);
  color: rgba(255, 255, 255, 0.8);
}


/* ----------------------------------------------------------
   NAV — Mobile toggle
---------------------------------------------------------- */

.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  /* 44px square — the smallest reliable touch target. */
  width: 44px;
  height: 44px;
  margin-right: -10px; /* pull the optical edge back to the header padding */
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-text-on-dark);
}


/* ----------------------------------------------------------
   NAV — Mobile (< 768px)
---------------------------------------------------------- */

@media (max-width: 768px) {

  .header-promo { display: none; }

  .site-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-bg-dark);
    flex-direction: column;
    /* The desktop rule centres nav items on a horizontal row. Left as-is,
       it centres them on the cross axis once the drawer stacks vertically,
       which shrink-wraps every panel into a floating column. */
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) 0 var(--space-4);
    z-index: var(--z-overlay);
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 18px 32px rgba(28, 27, 27, 0.28);
  }

  .site-nav.is-open { display: flex; }

  .nav-mobile-toggle { display: flex; }

  /* Dropdown container */
  .nav-dropdown {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .site-logo {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    min-width: 0;
    max-width: none;
    height: auto;
    gap: 0;
  }

  .site-logo__tagline {
    display: none;
  }

  /* Triggers — full-width section rows, chevron parked on the right edge */
  .nav-dropdown-trigger {
    height: auto;
    min-height: 52px;
    padding: var(--space-3) var(--space-5);
    width: 100%;
    justify-content: space-between;
    border-radius: 0;
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: rgba(255, 255, 255, 0.92);
  }

  .nav-chevron {
    opacity: 0.55;
    width: 12px;
    height: 8px;
  }

  .nav-dropdown-trigger:hover,
  .nav-dropdown.is-open .nav-dropdown-trigger {
    background: transparent;
    color: var(--color-text-on-dark);
  }

  /* Mega panel — inline accordion, not absolute.
     Recessed rather than outlined: the style system sections by tone, not
     by hairline rules, and a darker well reads as "inside this section". */
  .nav-mega {
    position: static;
    transform: none;
    display: none;
    border: none;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.16);
    min-width: 0;
    width: 100%;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  .nav-dropdown.is-open .nav-mega {
    display: block;
    transform: none;
    transition: none;
  }

  .nav-mega__body {
    padding: var(--space-2) 0;
  }

  /* Force single column on mobile */
  .nav-mega__body--2col {
    display: block;
    min-width: 0;
  }

  /* Hero in mobile */
  .nav-mega__hero {
    padding: var(--space-3) var(--space-6);
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
  }

  .nav-mega__hero:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .nav-mega__hero-label {
    color: rgba(255, 255, 255, 0.4);
  }

  .nav-mega__hero-title {
    color: var(--color-text-on-dark);
    font-size: var(--text-body);
  }

  .nav-mega__hero-desc {
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--text-label);
  }

  .nav-mega__hero-cta {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-label);
  }

  /* Items in mobile — full-bleed tap rows, indented under their section */
  .nav-mega__item {
    display: flex;
    align-items: center;
    min-height: 46px;
    color: rgba(255, 255, 255, 0.78);
    /* 40px reads as a deliberate step under the 24px section rows; the 32px
       token lands close enough to look like a mistake. */
    padding: var(--space-2) var(--space-5) var(--space-2) 40px;
    border-radius: 0;
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
  }

  .nav-mega__item:hover,
  .nav-mega__item:active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-on-dark);
  }

  /* Hub link in mobile — closes the section, so it carries the accent */
  .nav-mega__hub {
    display: flex;
    min-height: 48px;
    color: var(--color-text-on-dark);
    background: rgba(0, 0, 0, 0.14);
    border-top: none;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-5) var(--space-2) 40px;
    border-radius: 0;
    font-size: var(--text-small);
    letter-spacing: 0.02em;
  }

  .nav-mega__hub:hover,
  .nav-mega__hub:active {
    background: rgba(0, 0, 0, 0.22);
    color: var(--color-text-on-dark);
  }

  .nav-mega__hub svg { opacity: 0.7; }
}


/* ----------------------------------------------------------
   STICKY SUB-NAV
   Shared horizontal section-navigation bar.
   Sits directly below the sticky header (top: 64px).
   Used by room reviews, calculators, holdem rules, WSOP.
---------------------------------------------------------- */

.ri-subnav {
  position: sticky;
  top: 64px;
  z-index: var(--z-subnav);
  background: var(--color-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ri-subnav__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.ri-subnav__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ri-subnav__track::-webkit-scrollbar {
  display: none;
}

.ri-subnav__link {
  flex-shrink: 0;
  scroll-snap-align: start;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.ri-subnav__link:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-2);
}

.ri-subnav__link.active {
  color: var(--color-accent-text);
  border-bottom-color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

@media (max-width: 640px) {
  .ri-subnav__inner {
    padding: 0 var(--space-4);
  }
}


/* ----------------------------------------------------------
   AD BAND
   Header leaderboard slot. Sits between sticky nav and page content.
   Label left-aligned, banner centered — editorial treatment.
---------------------------------------------------------- */

.ad-band {
  background: var(--color-bg);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ad-band-inner {
  max-width: var(--max-width-inset);
  margin: 0 auto;
}

.ad-band-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-2);
}

.ad-band-slot {
  display: flex;
  justify-content: center;
}

/* Ad bands are always visible — placeholders shown until real ad tags are swapped in */

/* Placeholder shown until a real ad loads */
.ad-band-slot .ad-placeholder {
  width: 728px;
  height: 90px;
  max-width: 100%;
  background: var(--color-surface-2);
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 768px) {
  .ad-band { padding: var(--space-3) var(--space-4); }
  /* Standard mobile banner: 320×50 */
  .ad-band-slot .ad-placeholder { width: 320px; height: 50px; }
}


/* ----------------------------------------------------------
   PAGE HERO
   Standard pattern for all content/tool page headers.
---------------------------------------------------------- */

.page-hero {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  padding: var(--space-7) 0 var(--space-6);
  background: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-bg) 100%);
}

.page-hero-inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.page-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.page-hero h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.page-hero p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 640px;
  line-height: var(--leading-normal);
}


/* .section-rule-label removed -- use plain <h2>/<h3> headings instead */

/* Alternating tonal sections — even/odd background shifts */
.ri-review__section {
  padding: var(--space-7) var(--space-6);
  margin-left: calc(-1 * var(--space-6));
  margin-right: calc(-1 * var(--space-6));
}

.ri-review__section--surface {
  background: var(--color-surface);
}

.ri-review__section--recessed {
  background: var(--color-surface-2);
}


/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-crosslinks
   Editorial grouped-column layout for internal links.
   Groups items by category with vertical rules between columns.
---------------------------------------------------------- */

.ri-crosslinks {
  max-width: var(--max-width-content);
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-6) var(--space-8);
}

.ri-crosslinks__rule {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-border-heavy) 82%, white);
  margin-bottom: var(--space-5);
}

.ri-crosslinks__label {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  display: block;
  margin-bottom: var(--space-5);
}

.ri-crosslinks__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ri-crosslinks__columns--2 {
  grid-template-columns: repeat(2, 1fr);
}

.ri-crosslinks__columns--1 {
  grid-template-columns: 1fr;
}

.ri-crosslinks__group {
  padding: 0 var(--space-5);
  border-left: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

.ri-crosslinks__group:first-child {
  padding-left: 0;
  border-left: none;
}

.ri-crosslinks__group:last-child {
  padding-right: 0;
}

.ri-crosslinks__group-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-4);
  display: block;
}

.ri-crosslinks__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ri-crosslinks__link {
  text-decoration: none;
  display: block;
  transition: transform var(--transition-base);
}

.ri-crosslinks__link:hover {
  transform: translateX(3px);
}

.ri-crosslinks__title {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  transition: color var(--transition-fast);
  display: block;
}

.ri-crosslinks__link:hover .ri-crosslinks__title {
  color: var(--color-accent-text);
}

.ri-crosslinks__desc {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: var(--space-1);
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .ri-crosslinks__columns,
  .ri-crosslinks__columns--2,
  .ri-crosslinks__columns--3 {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .ri-crosslinks__group {
    padding: 0;
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
    padding-top: var(--space-4);
  }

  .ri-crosslinks__group:first-child {
    border-top: none;
    padding-top: 0;
  }
}


/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

.site-footer {
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.6);
  padding: var(--space-8) var(--space-6) var(--space-6);
}

.footer-inner {
  max-width: var(--max-width-inset);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.footer-tagline {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.4);
  line-height: var(--leading-normal);
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: var(--space-4);
}

.footer-col h4 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-col h4 a:hover {
  color: rgba(255, 255, 255, 0.6);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: var(--text-small);
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--color-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom {
  max-width: var(--max-width-full);
  margin: 0 auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-bottom p,
.footer-legal a {
  font-size: var(--text-label);
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}

.footer-legal {
  display: flex;
  gap: var(--space-4);
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
}

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

@media (max-width: 640px) {
  .site-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ----------------------------------------------------------
   SKIP LINK
---------------------------------------------------------- */

.ri-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  text-decoration: none;
}

.ri-skip-link:focus {
  top: var(--space-2);
}


/* ----------------------------------------------------------
   COOKIE CONSENT BANNER
   Fixed-bottom bar. 2px burgundy accent on top edge — the
   one earned burgundy moment on a page that already uses
   burgundy in header and footer. White surface lifts from
   the off-white page via shadow, no sectioning border.
---------------------------------------------------------- */

.ri-cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-toast);
  background: var(--color-surface);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 -8px 28px rgba(26, 26, 26, 0.08);
}

.ri-cookie-consent[hidden] {
  display: none;
}

.ri-cookie-consent__inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.ri-cookie-consent__copy {
  flex: 1 1 auto;
  max-width: 640px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.ri-cookie-consent__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.ri-cookie-consent__btn.ri-cta.ri-cta {
  padding: 10px 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .ri-cookie-consent__inner {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-3);
  }
  .ri-cookie-consent__copy {
    max-width: none;
  }
  .ri-cookie-consent__actions {
    justify-content: flex-end;
  }
}


/* ============================================================
   PD CTA CARD — premium dark CTA component
   Variants: .ri-cta-card--hero | .ri-cta-card--banner | .ri-cta-card--sidebar
   Namespace is .ri-cta-card (not .ri-cta — that is the shared button class in base.css).
   ============================================================ */

.ri-cta-card {
  position: relative;
  background: linear-gradient(168deg, #201D1B 0%, #141312 62%, #100F0E 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow:
    0 24px 48px -20px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Texture, not decoration. The page ground is a fine cream dot field; the dark
   card carries the same field in white and fades it out down the surface, so
   the placement reads as part of the paper rather than a black rectangle
   dropped on it. It replaces a burgundy corner glow that muddied the top right
   and a two-pixel red-to-pink rule across the top: a coloured stripe on a card
   edge is the cheapest kind of emphasis and it made a $60 placement look like
   a banner ad. */
.ri-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(170deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(170deg, #000 0%, transparent 72%);
  pointer-events: none;
}

.ri-cta-card__inner {
  position: relative;
  z-index: 1;
}

.ri-cta-card__copy {
  min-width: 0;
}

/* Logo — appears above the eyebrow in the sidebar variant */
.ri-cta-card__logo {
  display: flex;
  align-items: center;
  height: 36px;
  margin-bottom: var(--space-4);
}

.ri-cta-card__logo img {
  height: 100%;
  width: auto;
  max-width: 148px;
  object-fit: contain;
}

/* Eyebrow */
.ri-cta-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-4);
}

.ri-cta-card__eyebrow-rule {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.ri-cta-card__eyebrow-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Headline — override section h2 burgundy via specificity */
.ri-cta-card .ri-cta-card__headline,
.ri-wsop__section .ri-cta-card__headline {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  padding-top: 0;
  border-top: none;
}

/* Deck list */
.ri-cta-card__deck {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: var(--space-4) 0 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.ri-cta-card__deck span {
  position: relative;
  padding-left: 14px;
}

.ri-cta-card__deck span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(107, 31, 42, 0.25);
}

/* Description — sidebar variant */
.ri-cta-card__desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Actions group */
.ri-cta-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Button */
/* The system's primary button, not a variant of it: sharp corners, the
   180deg burgundy ramp, uppercase label at 0.08em. What was here before ran a
   three-stop gradient with a white shine that swept across on hover and a
   32px burgundy glow underneath — casino furniture, and the loudest object on
   a page that sells editorial independence. */
.ri-cta-card__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, var(--color-accent) 0%, #4E0816 100%);
  color: #FFFFFF;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: var(--radius-btn);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 6px rgba(107, 31, 42, 0.22);
  white-space: nowrap;
}

.ri-cta-card__btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #7C2634 0%, #5A0F1D 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px rgba(107, 31, 42, 0.3);
}

.ri-cta-card__btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ri-cta-card__btn-label,
.ri-cta-card__btn-arrow {
  position: relative;
  z-index: 1;
}

.ri-cta-card__btn-arrow {
  font-size: 1.1em;
  line-height: 1;
  display: inline-block;
  transition: transform var(--transition-fast);
}

.ri-cta-card__btn:hover .ri-cta-card__btn-arrow {
  transform: translateX(4px);
}

/* Micro */
.ri-cta-card__micro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ri-cta-card__micro-rule {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.7;
  flex-shrink: 0;
}

.ri-cta-card__micro-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}


/* ====== HERO VARIANT ====== */
.ri-cta-card--hero {
  padding: var(--space-8) var(--space-7);
}

.ri-cta-card--hero .ri-cta-card__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
}

.ri-cta-card--hero .ri-cta-card__headline {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  margin: 0 0 var(--space-4);
  max-width: 640px;
}

.ri-cta-card--hero .ri-cta-card__deck {
  margin-top: 0;
}

@media (max-width: 820px) {
  .ri-cta-card--hero {
    padding: var(--space-6) var(--space-5);
  }
  .ri-cta-card--hero .ri-cta-card__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .ri-cta-card--hero .ri-cta-card__headline {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .ri-cta-card--hero .ri-cta-card__actions {
    width: 100%;
  }
  .ri-cta-card--hero .ri-cta-card__btn {
    width: 100%;
    justify-content: center;
  }
}


/* ====== BANNER VARIANT ====== */
.ri-cta-card--banner {
  padding: var(--space-5) var(--space-6);
}

.ri-cta-card--banner .ri-cta-card__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
}

.ri-cta-card--banner .ri-cta-card__eyebrow {
  margin-bottom: var(--space-2);
  gap: 10px;
}

.ri-cta-card--banner .ri-cta-card__eyebrow-rule {
  width: 22px;
}

.ri-cta-card--banner .ri-cta-card__eyebrow-label {
  font-size: 10.5px;
}

.ri-cta-card--banner .ri-cta-card__headline {
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  line-height: 1.2;
}

.ri-cta-card--banner .ri-cta-card__actions {
  gap: var(--space-2);
}

.ri-cta-card--banner .ri-cta-card__btn {
  padding: 13px 24px;
  font-size: 14px;
}

.ri-cta-card--banner .ri-cta-card__micro-label {
  font-size: 9.5px;
}

@media (max-width: 720px) {
  .ri-cta-card--banner {
    padding: var(--space-5) var(--space-4);
  }
  .ri-cta-card--banner .ri-cta-card__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .ri-cta-card--banner .ri-cta-card__actions {
    width: 100%;
  }
  .ri-cta-card--banner .ri-cta-card__btn {
    width: 100%;
    justify-content: center;
  }
}


/* ====== STRIP VARIANT ======
   One light row inside an article column (offer_strip in _room_macros.html).
   White on the off-white page ground, so it separates by tone alone and reads
   as part of the page rather than a block dropped into it. */
.ri-cta-card--strip {
  background: var(--color-surface);
  box-shadow: none;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-7) 0;
}

.ri-cta-card--strip::before {
  content: none;
}

.ri-cta-card--strip .ri-cta-card__inner {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
}

.ri-cta-card--strip .ri-cta-card__logo {
  width: 52px;
  height: 52px;
  margin: 0;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: 8px;
}

.ri-cta-card--strip .ri-cta-card__logo img {
  max-width: 100%;
  max-height: 100%;
}

.ri-cta-card--strip .ri-cta-card__eyebrow-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

.ri-cta-card--strip .ri-cta-card__headline {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-top: var(--space-1);
}

.ri-cta-card--strip .ri-cta-card__actions {
  align-items: center;
  gap: 6px;
}

.ri-cta-card--strip .ri-cta-card__btn {
  padding: 13px 22px;
}

.ri-cta-card--strip .ri-cta-card__micro-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .ri-cta-card--strip {
    padding: var(--space-4);
  }
  .ri-cta-card--strip .ri-cta-card__inner {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
  }
  .ri-cta-card--strip .ri-cta-card__logo {
    width: 44px;
    height: 44px;
    padding: 6px;
  }
  .ri-cta-card--strip .ri-cta-card__headline {
    font-size: 1.0625rem;
  }
  .ri-cta-card--strip .ri-cta-card__actions {
    grid-column: 1 / -1;
  }
  .ri-cta-card--strip .ri-cta-card__btn {
    width: 100%;
    justify-content: center;
  }
}


/* ====== SIDEBAR VARIANT ======
   The room offer card, in the rail and (as --offer) in rows mid-page. White
   paper on the off-white page, per the surface hierarchy: the tone shift is
   the edge, so there is no drop shadow, no dot texture and no rule under the
   head. It replaced a near-black card with a 26px logo in a cream chip, which
   read as a casino banner on pages that sell independent maths. */
.ri-cta-card--sidebar {
  padding: var(--space-5);
  background: var(--color-surface);
  box-shadow: none;
}

.ri-cta-card--sidebar::before {
  background: none;
}

.ri-cta-card--sidebar .ri-cta-card__inner {
  display: flex;
  flex-direction: column;
}

/* Masthead row: room mark on the left, what the card is on the right, a
   hairline under both. It replaces a centred stack of blocks — plate, then
   headline, then button, each the full width — which had no axis and left the
   card reading as three unrelated slabs. The rule gives the copy something to
   hang from and the asymmetry gives the eye somewhere to enter. */
.ri-cta-card--sidebar .ri-cta-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ---- Centred axis (affiliate card only) ----
   The room card holds a mark, one offer and one button, and Zach wants them
   on a centre line: the mark stacks over its label, the rule runs under both,
   the offer sits centred above a full-width button. The house card keeps the
   left axis — it carries a paragraph of body copy, and centred prose over
   four or five lines rags on both edges. */
.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__head {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__logo {
  align-self: center;
}

.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__head .ri-cta-card__eyebrow-label {
  text-align: center;
}

.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__headline,
.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__desc {
  text-align: center;
}

/* One short line under the offer: why this page named this room. */
.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__actions {
  align-items: center;
}

.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__review {
  align-self: center;
}

/* The mark sits straight on the white card at the style guide's logo tiers:
   standard (56px) in a row, compact (40px) in the 240px rail. The unified
   logos are drawn on light canvases, so they need no tile behind them. */
.ri-cta-card--sidebar .ri-cta-card__logo {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: auto;
  margin: 0;
}

.ri-cta-card--sidebar .ri-cta-card__logo img {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.ri-cta-card--offer .ri-cta-card__logo img {
  height: 56px;
  max-width: 200px;
}

.ri-cta-card--sidebar.ri-cta-card--house:hover .ri-cta-card__head {
  border-bottom-color: rgba(57, 52, 47, 0.2);
}

/* Head-row label. Sits opposite the logo, so it drops the accent tick the
   standalone eyebrow carries — two marks in one row is one too many. */
.ri-cta-card--sidebar .ri-cta-card__head .ri-cta-card__eyebrow-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  text-align: right;
}

.ri-cta-card--sidebar .ri-cta-card__eyebrow {
  margin-bottom: var(--space-3);
  gap: 8px;
}

.ri-cta-card--sidebar .ri-cta-card__eyebrow-rule {
  width: 18px;
}

.ri-cta-card--sidebar .ri-cta-card__eyebrow-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
}

.ri-cta-card--sidebar .ri-cta-card__desc {
  margin: 0 0 var(--space-4);
}

/* "CLAIM AT COINPOKER" at 12px/0.09em is 205px of label in a 202px rail, so
   the longest room names broke onto a second line. Tracking and size come
   down just enough to keep every name on one. */
.ri-cta-card--sidebar .ri-cta-card__btn {
  padding: 14px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  width: 100%;
  justify-content: center;
  white-space: normal;       /* allow long room names to wrap inside narrow sidebar */
  text-align: center;
  line-height: 1.3;
}

.ri-cta-card--sidebar .ri-cta-card__btn-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ri-cta-card--sidebar .ri-cta-card__headline {
  overflow-wrap: anywhere;
}

/* ---- Sidebar card finish ---- */

/* The offer is the card: it takes the space between the mark and the button
   so the eye lands on it first. */
.ri-cta-card--sidebar .ri-cta-card__headline {
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

.ri-cta-card--sidebar .ri-cta-card__actions {
  gap: var(--space-4);
}

/* The shared card hover from STYLE-GUIDE §5: a light shadow, no lift. */
.ri-cta-card--sidebar {
  transition: box-shadow var(--transition-base);
}

.ri-cta-card--sidebar:hover {
  box-shadow: var(--shadow-sm);
}

.ri-cta-card--sidebar.ri-cta-card--house:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 26px 46px -14px rgba(57, 52, 47, 0.2),
    0 2px 4px rgba(57, 52, 47, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  .ri-cta-card--sidebar {
    transition: none;
  }
}

/* Secondary review link below the primary button, for readers who want the
   review before the affiliate link. */
.ri-cta-card--sidebar .ri-cta-card__review {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 2px 6px;
  transition: color var(--transition-fast);
}

.ri-cta-card--sidebar .ri-cta-card__review:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-color: rgba(107, 31, 42, 0.35);
  text-underline-offset: 4px;
}

/* The disclosure follows whichever axis its card is on: centred under the
   affiliate card, left under the house card's left-aligned stack. */
.ri-cta-card--sidebar .ri-cta-card__micro {
  margin-top: var(--space-2);
  justify-content: flex-start;
  width: 100%;
}

.ri-cta-card--sidebar:not(.ri-cta-card--house) .ri-cta-card__micro {
  justify-content: center;
}

.ri-cta-card--sidebar .ri-cta-card__micro-rule {
  width: 16px;
  background: var(--color-border-heavy);
  opacity: 1;
}

.ri-cta-card--sidebar .ri-cta-card__micro-label {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}

.ri-cta-card--sidebar.ri-cta-card--house .ri-cta-card__micro-rule {
  background: var(--color-accent);
  opacity: 0.5;
}


/* ====== OFFER VARIANT ======
   The sidebar card used in a row: same construction, sized for a grid cell.
   Cards in a row have to end level, so the inner column stretches and the
   actions block sits on the base line regardless of how the offer wraps. */
.ri-cta-card--offer {
  height: 100%;
}

.ri-cta-card--offer .ri-cta-card__inner {
  height: 100%;
}

.ri-cta-card--offer .ri-cta-card__actions {
  margin-top: auto;
  width: 100%;
}

.ri-cta-card--offer .ri-cta-card__headline {
  margin-bottom: var(--space-5);
}


/* ====== HOUSE VARIANT ======
   Layered on --sidebar for RiverIndex's own properties (BBZ Academy).
   Cream surface instead of the #1A1A1A paid-room register so a house
   placement never competes with the affiliate card above it in the rail. */
.ri-cta-card--house {
  background: linear-gradient(180deg, #FDFCFA 0%, #F4F0E9 100%);
  border: 1px solid rgba(57, 52, 47, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 22px 40px -14px rgba(57, 52, 47, 0.14),
    0 2px 4px rgba(57, 52, 47, 0.04);
}

.ri-cta-card--house::before {
  background: none;
}

.ri-cta-card--house .ri-cta-card__eyebrow-label {
  color: var(--color-accent-text);
}

.ri-cta-card--house .ri-cta-card__head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(57, 52, 47, 0.12);
}

.ri-cta-card--house .ri-cta-card__head .ri-cta-card__eyebrow-label {
  color: var(--color-text-muted);
}

.ri-cta-card--house .ri-cta-card__headline {
  color: var(--color-text-primary);
}

.ri-cta-card--house .ri-cta-card__desc {
  color: var(--color-text-secondary);
}

.ri-cta-card--house .ri-cta-card__review {
  color: var(--color-text-muted);
}

.ri-cta-card--house .ri-cta-card__review:hover {
  color: var(--color-accent-text);
  text-decoration-color: rgba(107, 31, 42, 0.35);
}

.ri-cta-card--house .ri-cta-card__micro-label {
  color: var(--color-text-muted);
}

/* ============================================================
   PD CROSSPROMO — premium sidebar link list
   Light editorial companion to .ri-cta-card. Use wherever a
   sidebar needs a polished "More on RiverIndex"-style list of
   2-5 related destinations. Gradient cream surface, inset
   highlight, deep soft shadow; each row is a kicker + serif
   title + sans description + arrow that slides on hover.
   ============================================================ */

.ri-crosspromo {
  position: relative;
  background: linear-gradient(180deg, #FDFCFA 0%, #F4F0E9 100%);
  border: 1px solid rgba(57, 52, 47, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 22px 40px -14px rgba(57, 52, 47, 0.14),
    0 2px 4px rgba(57, 52, 47, 0.04);
  overflow: hidden;
}

.ri-crosspromo__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-4);
}

.ri-crosspromo__rule {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.ri-crosspromo__title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.ri-crosspromo__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ri-crosspromo__item {
  border-top: 1px solid rgba(57, 52, 47, 0.08);
}

.ri-crosspromo__item:first-child {
  border-top: none;
}

.ri-crosspromo__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: var(--space-3);
  padding: var(--space-3) 4px;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast), padding-left var(--transition-fast);
}

.ri-crosspromo__link:hover {
  background: rgba(107, 31, 42, 0.035);
  padding-left: 10px;
}

.ri-crosspromo__kicker {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 4px;
}

.ri-crosspromo__label {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: 4px;
  transition: color var(--transition-fast);
}

.ri-crosspromo__link:hover .ri-crosspromo__label {
  color: var(--color-accent-text);
}

.ri-crosspromo__desc {
  grid-column: 1 / -1;
  grid-row: 3;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.ri-crosspromo__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.ri-crosspromo__link:hover .ri-crosspromo__arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}


/* ----------------------------------------------------------
   SHARED COMPONENT: .ri-breadcrumb
   Label-scale trail under the masthead (includes/_breadcrumb.html).
   --hero: the room review places it inside its hero above the h1.
   ---------------------------------------------------------- */
.ri-breadcrumb {
  max-width: var(--max-width-full);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6) 0;
}

.ri-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.ri-breadcrumb__item + .ri-breadcrumb__item::before {
  content: "\00B7";
  margin: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

.ri-breadcrumb__link {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
}

.ri-breadcrumb__link:hover {
  color: var(--color-accent-text);
}

.ri-breadcrumb--hero {
  max-width: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}

/* On a burgundy or near-black hero the muted grey the trail normally wears
   drops to unreadable, so it takes the on-dark ink instead. These are the
   tokens the palette already reserves for exactly this. */
.ri-hero--dark .ri-breadcrumb--hero .ri-breadcrumb__link,
.ri-hero--learn .ri-breadcrumb--hero .ri-breadcrumb__link {
  color: var(--color-text-on-dark-muted);
}

.ri-hero--dark .ri-breadcrumb--hero .ri-breadcrumb__link:hover,
.ri-hero--learn .ri-breadcrumb--hero .ri-breadcrumb__link:hover {
  color: var(--color-text-on-dark);
}

.ri-hero--dark .ri-breadcrumb--hero .ri-breadcrumb__item + .ri-breadcrumb__item::before,
.ri-hero--learn .ri-breadcrumb--hero .ri-breadcrumb__item + .ri-breadcrumb__item::before {
  color: var(--color-text-on-dark-faint);
}

@media (max-width: 768px) {
  .ri-breadcrumb {
    padding: var(--space-3) var(--space-4) 0;
  }
}

/* ============================================================
   Sidebar TOC — Unified Component
   Used by all article/guide templates with markdown-generated TOC.
   2-column layout: content (left) + sticky TOC sidebar (right).
   On mobile: TOC collapses inline above content.
   ============================================================ */

/* LAYOUT: content + sidebar */
.ri-sidebar-layout {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

/* Match .ri-hero__inner, which drops to --space-4 here, so the article column
   keeps the hero's left edge on small screens. */
@media (max-width: 640px) {
  .ri-sidebar-layout {
    padding-inline: var(--space-4);
  }
}

@media (min-width: 769px) {
  .ri-sidebar-layout {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
    column-gap: calc(var(--space-8) + var(--space-1));
  }
}

.ri-sidebar-layout > :not(.ri-sidebar) {
  min-width: 0;
  width: 100%;
}

/* TOOL PAGES: the rail sits beside the guide under a calculator. Below the
   two-column breakpoint it would land between the results and the guide, so
   it drops out there; the room cards and related tools further down already
   carry the same links on small screens. */
.ri-sidebar-layout--tool {
  padding-block: 0;
}

@media (max-width: 768px) {
  .ri-sidebar-layout--tool > .ri-sidebar {
    display: none;
  }
}

/* SIDEBAR CONTAINER */
.ri-sidebar {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 769px) {
  .ri-sidebar {
    order: 0;
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    align-self: start;
  }

  .ri-sidebar > * {
    width: 100%;
  }
}

/* TOC NAV */
.ri-toc {
  margin-bottom: 0;
  padding: var(--space-4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 244, 239, 0.98) 100%);
  border: 1px solid rgba(57, 52, 47, 0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 34px rgba(57, 52, 47, 0.06);
}

.ri-toc__title {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* MOBILE: compact inline box */
@media (max-width: 768px) {
  .ri-toc {
    padding: var(--space-4) var(--space-5);
  }
}

.ri-toc ul,
.ri-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ri-toc li {
  margin-bottom: 1px;
}

/* Nested items (H3) */
.ri-toc ul ul,
.ri-toc ol ol {
  padding-left: var(--space-3);
}

/* DESKTOP: left-border indicator style */
@media (min-width: 769px) {
  .ri-toc a {
    font-family: var(--font-sans);
    font-size: var(--text-label);
    line-height: 1.4;
    color: var(--color-text-secondary);
    text-decoration: none;
    display: block;
    padding: 8px 10px 8px var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow: inset 2px 0 0 transparent;
    transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  }

  .ri-toc a:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.72);
  }

  .ri-toc a.ri-toc--active {
    color: var(--color-text-primary);
    box-shadow: inset 2px 0 0 var(--color-accent);
    font-weight: var(--weight-medium);
    background: rgba(107, 31, 42, 0.08);
  }
}

/* MOBILE: simpler link style */
@media (max-width: 768px) {
  .ri-toc a {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    text-decoration: none;
    display: block;
    padding: 2px 0;
    transition: color var(--transition-fast);
  }

  .ri-toc a:hover {
    color: var(--color-accent-text);
  }
}

/* SIDEBAR AD SLOT */
.ri-sidebar__ad {
  margin-bottom: var(--space-5);
}

.ri-sidebar__ad .ad-placeholder {
  width: 100%;
  height: 250px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

.ri-sidebar__ad-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* FALLBACK: when ad is occupied, hide the CTA */
.ri-sidebar__ad:not(:empty) ~ .ri-sidebar__cta {
  display: none;
}

/* SIDEBAR CTA CARD — premium watermark-backed treatment.
   Mirrors .ri-premium-cta visual register at sidebar scale:
   subtle gradient surface, faint thematic watermark in the
   bottom-right, soft elevation, on-hover lift.
*/
.ri-sidebar__cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FDFCFA 0%, #F4F0E9 100%);
  border: 1px solid rgba(57, 52, 47, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-fast);
  box-shadow: 0 18px 34px rgba(57, 52, 47, 0.06);
}

.ri-sidebar__cta:hover {
  border-color: rgba(107, 31, 42, 0.18);
  box-shadow: 0 24px 44px rgba(57, 52, 47, 0.12);
  transform: translateY(-1px);
}

/* Watermark — large faint glyph anchored bottom-right.
   Same opacity / scale ratio as .ri-premium-cta__watermark.
*/
.ri-sidebar__cta-watermark {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 168px;
  height: 168px;
  opacity: 0.07;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.ri-sidebar__cta:hover .ri-sidebar__cta-watermark {
  opacity: 0.12;
}

.ri-sidebar__cta-watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ri-sidebar__cta-body {
  position: relative;
  z-index: 1;
}

/* Variant: Vegas Tracker — warm cream surface that reads
   distinct from the neutral default without breaking the brand.
*/
.ri-sidebar__cta--tracker {
  background: linear-gradient(180deg, #FBF6EE 0%, #F1E7D2 100%);
}

.ri-sidebar__cta--tracker .ri-sidebar__cta-label {
  color: #8A5A1F;
}

/* Variant: Learn Poker course — burgundy-tinted surface that
   matches .ri-premium-cta--course in the in-body course CTAs.
*/
.ri-sidebar__cta--course {
  background: linear-gradient(180deg, #F5EEE9 0%, #EDE3DA 100%);
  border-color: rgba(107, 31, 42, 0.15);
}

.ri-sidebar__cta--course .ri-sidebar__cta-room {
  color: var(--color-accent-text);
}

.ri-sidebar__cta--course .ri-sidebar__cta-label {
  color: var(--color-accent-text);
}

.ri-sidebar__cta-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.ri-sidebar__cta-room {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.ri-sidebar__cta-hook {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.ri-sidebar__cta-note {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
}

.ri-sidebar__cta-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ri-sidebar__cta-link {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark);
  background: linear-gradient(180deg, #6B1F2A 0%, #4E0816 100%);
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 8px 16px;
  text-align: center;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(107, 31, 42, 0.25), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ri-sidebar__cta-link:hover {
  background: linear-gradient(180deg, #5A1923 0%, #3D0F15 100%);
  color: var(--color-text-on-dark);
  box-shadow: 0 3px 8px rgba(107, 31, 42, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.ri-sidebar__cta-review {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 6px 2px 0;
}

.ri-sidebar__cta-review:hover {
  color: var(--color-accent-text);
}

/* On mobile, sidebar ad and CTA follow standard sidebar visibility (hidden via .ri-sidebar order) */

/* ============================================================
   RiverIndex Design Tokens
   Version: 1.0 — March 2026

   Direction: Light editorial authority. Analytical. NYT-register.
   Audience: Serious poker players. Data-forward.

   Type:   Source Serif 4 (headlines, data numbers)
           · IBM Plex Sans (UI/body/labels)
   Accent: Deep burgundy #6B1F2A — header, footer, primary buttons
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR — Neutrals
  ---------------------------------------------------------- */

  --color-bg:           #F8F7F4; /* Warm off-white. Paper, not screen. */
  --color-surface:      #FFFFFF; /* Cards, panels, raised elements */
  --color-surface-2:    #F2F1EE; /* Recessed — zebra rows, inset areas, section tint */
  --color-surface-3:    #E3E0DA; /* Deep recessed — calc panels, tool chrome */
  --color-border:       #E2E0DB; /* Dividers, table lines, field outlines */
  --color-border-heavy: #C8C5BE; /* Stronger rule — section breaks, table headers */

  --color-text-primary:   #1A1A1A; /* Headlines, body — near black */
  --color-text-secondary: #5A5A5A; /* Supporting copy, metadata */
  --color-text-muted:     #909090; /* Labels, placeholders, disabled */
  --color-text-inverse:   #FFFFFF; /* Text on dark backgrounds */


  /* ----------------------------------------------------------
     COLOR — Accent (Deep Burgundy)
     Header, footer, primary buttons. Premium, distinctive.
     Not excitement — authority.
  ---------------------------------------------------------- */

  --color-accent:           #6B1F2A;
  --color-accent-hover:     #4A1520; /* Darker on hover */
  --color-accent-subtle:    #F7EEEF; /* Tinted backgrounds, subtle highlights */
  --color-accent-border:    #C9909A; /* Accent-tinted dividers */
  --color-accent-text:      #6B1F2A; /* Burgundy text on light backgrounds */

  --color-accent-light:     #7D2533; /* Progress bar gradient top */
  --color-accent-dark:      #5A1923; /* Progress bar gradient bottom */

  --color-bg-dark:          #6B1F2A; /* Header, footer, primary button fill */
  --color-text-on-dark:     #FFFFFF; /* Text on all dark surfaces */
  --color-text-on-dark-muted: rgba(255,255,255,0.5);  /* Secondary text on dark hero */
  --color-text-on-dark-faint: rgba(255,255,255,0.35); /* Breadcrumbs, separators on dark hero */


  /* ----------------------------------------------------------
     COLOR — Semantic
     Positive/negative are data colors — independent of brand accent.
  ---------------------------------------------------------- */

  --color-danger:        #C0392B; /* High rake, unfavorable values — use sparingly */
  --color-danger-subtle: #FDF2F1;
  --color-positive:      #1B6B3A; /* Low rake, favorable values — semantic green */
  --color-positive-subtle: #EEF4F0;
  --color-warning:       #8B6914;
  --color-warning-subtle: #FBF6E9;


  /* ----------------------------------------------------------
     COLOR — Chart / Data Visualization
     For simulation lines, confidence bands, and chart elements.
     Each page can override these in its scoped styles if needed.
  ---------------------------------------------------------- */

  --color-chart-ev:       #1A1A1A; /* EV / mean line */
  --color-chart-ci70:     #86efac; /* 70% confidence band */
  --color-chart-ci95:     #16a34a; /* 95% confidence band */
  --color-chart-best:     #1B6B3A; /* Best run — uses positive green */
  --color-chart-worst:    #C0392B; /* Worst run — uses danger red */
  --color-chart-sample:   #a78bfa; /* Individual sample runs */
  --color-chart-observed: #6B1F2A; /* User's observed results — accent */
  --color-chart-drawdown: #C0392B; /* Drawdown shading */
  --color-chart-profit:   #3b82f6; /* Profit line in drawdown chart */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Families
  ---------------------------------------------------------- */

  --font-serif:  'Source Serif 4', Georgia, serif;
  --font-sans:   'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:   'SF Mono', 'Cascadia Code', 'Fira Code', monospace; /* Formula blocks only */

  /* Data numbers: use --font-serif at display size, --font-sans at table/label size. */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Scale
     Base: 16px. Unit: rem.
  ---------------------------------------------------------- */

  --text-display: 3rem;      /* 48px — Hero stats, feature numbers */
  --text-h1:      2rem;      /* 32px — Page titles */
  --text-h2:      1.5rem;    /* 24px — Section headers */
  --text-h3:      1.125rem;  /* 18px — Card titles, sidebar heads */
  --text-body:    1rem;      /* 16px — All prose */
  --text-small:   0.875rem;  /* 14px — Metadata, captions */
  --text-label:   0.75rem;   /* 12px — Tags, table column headers */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Weights
  ---------------------------------------------------------- */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;


  /* ----------------------------------------------------------
     TYPOGRAPHY — Line Heights
  ---------------------------------------------------------- */

  --leading-tight:   1.2;   /* Headlines, display text */
  --leading-snug:    1.35;  /* Subheadings, card titles */
  --leading-normal:  1.6;   /* Body prose */
  --leading-relaxed: 1.75;  /* Long-form article body */
  --leading-data:    1.4;   /* Table rows, data lists */


  /* ----------------------------------------------------------
     TYPOGRAPHY — Letter Spacing
  ---------------------------------------------------------- */

  --tracking-tight:   -0.02em; /* Large serif headlines */
  --tracking-normal:   0;
  --tracking-wide:     0.04em; /* Uppercase labels */
  --tracking-wider:    0.08em; /* Small caps, badge text */


  /* ----------------------------------------------------------
     SPACING — 4px base, powers of 2
  ---------------------------------------------------------- */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;   /* Primary gap between related elements */
  --space-6:   32px;
  --space-7:   48px;   /* Section internal padding */
  --space-8:   64px;   /* Section separation */
  --space-9:   96px;   /* Major page sections */
  --space-10:  128px;  /* Hero-scale spacing */


  /* ----------------------------------------------------------
     BORDER RADIUS
     Tight by default. This is a data site, not a marketing site.
  ---------------------------------------------------------- */

  --radius-none: 0;
  --radius-btn:  0;    /* Buttons — sharp corners signal precision */
  --radius-sm:   2px;  /* Inputs, form elements */
  --radius-md:   4px;  /* Cards, panels */
  --radius-lg:   6px;  /* Modals, dropdowns */
  --radius-pill: 999px; /* Badges only — use reluctantly */


  /* ----------------------------------------------------------
     SHADOWS
     Subtle. Textured, not dramatic.
  ---------------------------------------------------------- */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);

  /* Hover-state shadows — pair with translateY(-1px) or translateY(-2px) */
  --shadow-sm-hover: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-md-hover: 0 8px 20px rgba(0, 0, 0, 0.17), 0 0 0 1px rgba(0, 0, 0, 0.06);


  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --max-width-content:  1200px;  /* Standard content width — matches full-bleed */

  --max-width-full:     1200px;  /* Full-bleed layouts */

  /* Content box of the site grid, for an inner that sits inside a band which
     already carries the 32px gutter. Capping such an inner at the full 1200
     instead lands it 32px left of the header logo and every .ri-hero__inner. */
  --max-width-inset:    calc(var(--max-width-content) - var(--space-6) * 2);
  --max-width-narrow:   560px;   /* Focused forms, modals */

  --header-height:      64px;    /* Site header height for sticky offset */
  --sidebar-width:      240px;   /* TOC sidebar width */


  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */

  --transition-fast:   0.12s cubic-bezier(0.2, 0, 0, 1);
  --transition-base:   0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow:   0.28s cubic-bezier(0.4, 0, 0.2, 1);


  /* ----------------------------------------------------------
     Z-INDEX
  ---------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-subnav:  90;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

}

/* ==========================================================================
   RiverIndex — site-specific glue (loads after the mirrored base sheets)
   Only adds what the shared target stylesheets don't already cover:
   webfont faces, language switcher, archive grid, pager, article page bits.
   ========================================================================== */

/* --- Webfonts (as shipped by the mirrored theme) --- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/riverindex/static/fonts/IBMPlexSans-normal-400-latin.sub_vsub1.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/riverindex/static/fonts/SourceSerif4-normal-400-latin.sub_vsub1.woff2') format('woff2');}

/* --- Language switcher (header right) --- */
.ri-langs{display:flex;align-items:center;gap:.35rem;margin-left:auto;flex-wrap:wrap}
.ri-langs a{font-size:var(--text-label);letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-text-secondary);text-decoration:none;padding:.15rem .3rem;border-radius:var(--radius-sm)}
.ri-langs a:hover{color:var(--color-accent)}
.ri-langs a.is-on{color:var(--color-accent);font-weight:var(--weight-semibold)}

/* --- Generic page shell for non-home templates --- */
.ri-pagehead{border-bottom:1px solid var(--color-border);
  padding:var(--space-8) 0 var(--space-6);margin-bottom:var(--space-8)}
.ri-pagehead__eyebrow{display:inline-block;font-size:var(--text-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-2)}
.ri-pagehead h1{font-family:var(--font-serif);font-size:var(--text-h1);line-height:var(--leading-tight);
  color:var(--color-text-primary);margin:0 0 var(--space-2)}
.ri-pagehead p{color:var(--color-text-secondary);max-width:var(--max-width-narrow);margin:0}

/* --- Archive grid built from the theme's own story-item cards --- */
.ri-archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-5);margin:0 0 var(--space-8);padding:0;list-style:none}
.ri-archive-grid .ri-home__story-item{border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface);
  transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}
.ri-archive-grid .ri-home__story-item:hover{box-shadow:var(--shadow-md-hover);border-color:var(--color-accent-border)}

/* --- Pager --- */
.ri-pager{display:flex;justify-content:center;gap:var(--space-2);margin:var(--space-8) 0}
.ri-pager a,.ri-pager span{min-width:2.25rem;text-align:center;padding:.4rem .7rem;
  border:1px solid var(--color-border);border-radius:var(--radius-btn);
  font-size:var(--text-small);color:var(--color-text-secondary);text-decoration:none;background:var(--color-surface)}
.ri-pager a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.ri-pager .is-on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-dark)}

/* --- Article page --- */
.ri-article__byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  margin:var(--space-4) 0;color:var(--color-text-secondary);font-size:var(--text-small)}
.ri-article__byline img{width:2rem;height:2rem;border-radius:50%;object-fit:cover}
.ri-article__byline .ri-sep{color:var(--color-border-heavy)}
.ri-article__hero{width:100%;border-radius:var(--radius-md);margin:var(--space-5) 0;
  border:1px solid var(--color-border)}

/* --- Sidebar --- */
.ri-aside{position:sticky;top:calc(var(--header-height) + var(--space-4))}
.ri-aside .ri-home__rail-item{margin-bottom:.25rem}

/* --- Compact category grid on the home page --- */
.ri-home__casino-item{cursor:pointer}

/* --- Comments --- */
.ri-comments{margin:var(--space-9) 0 0;padding-top:var(--space-6);border-top:1px solid var(--color-border)}
.ri-comments__title{font-family:var(--font-serif);font-size:var(--text-h2);margin:0 0 var(--space-5)}
.ri-comments__empty{color:var(--color-text-muted)}
.ri-comment-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.ri-comment{display:flex;gap:var(--space-3);align-items:flex-start}
.ri-comment__avatar{flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--color-accent-subtle);color:var(--color-accent);display:flex;align-items:center;
  justify-content:center;font-weight:var(--weight-semibold);font-size:var(--text-small);
  border:1px solid var(--color-accent-border)}
.ri-comment__head{display:flex;gap:var(--space-3);align-items:baseline;flex-wrap:wrap;margin-bottom:.2rem}
.ri-comment__name{color:var(--color-text-primary);font-size:var(--text-small)}
.ri-comment__time{color:var(--color-text-muted);font-size:var(--text-label)}
.ri-comment__text{margin:0;color:var(--color-text-secondary);line-height:var(--leading-relaxed)}

/* --- Page head (category / platforms) --- */
.ri-pagehead__title{font-family:var(--font-serif);font-size:clamp(1.75rem,3.5vw,2.5rem);
  line-height:1.12;letter-spacing:-0.02em;color:var(--color-text-primary);margin:0 0 var(--space-2)}
.ri-pagehead__lede{color:var(--color-text-secondary);max-width:70ch;margin:0 0 var(--space-2)}
.ri-pagehead__meta{font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-muted);margin:0}

/* --- Breadcrumb extras --- */
.ri-breadcrumb__sep{color:var(--color-text-muted);margin:0 .4rem}
.ri-breadcrumb__current{color:var(--color-text-secondary)}

/* --- Sub category nav --- */
.ri-subnav__item{display:inline-block;margin:0 var(--space-3) var(--space-2) 0;padding:.3rem .8rem;
  border:1px solid var(--color-border);border-radius:var(--radius-btn);font-size:var(--text-small);
  color:var(--color-text-secondary);text-decoration:none;background:var(--color-surface)}
.ri-subnav__item:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* --- Article page --- */
.ri-article__title{font-family:var(--font-serif);font-size:clamp(1.6rem,3.2vw,2.35rem);
  line-height:1.15;letter-spacing:-0.02em;color:var(--color-text-primary);margin:0 0 var(--space-3)}
.ri-article__meta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  color:var(--color-text-secondary);font-size:var(--text-small);
  margin:0 0 var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}
.ri-article__cat{color:var(--color-accent);font-weight:var(--weight-semibold);text-decoration:none}
.ri-article__related{margin:var(--space-9) 0 0}
.ri-section-h{font-family:var(--font-serif);font-size:1.35rem;font-weight:var(--weight-bold);
  letter-spacing:-0.015em;color:var(--color-text-primary);margin:0 0 var(--space-5)}

/* --- Promos on archive pages --- */
.ri-archive__promos{margin:var(--space-9) 0 0}
.ri-archive__empty{color:var(--color-text-muted);padding:var(--space-8) 0}

/* --- Grid cards: give the theme's story-item a card shell --- */
.ri-archive-grid .ri-home__story-item--no-img{border-bottom:1px solid var(--color-border);
  padding:var(--space-5)}
.ri-archive-grid .ri-home__story-item-body{display:block;text-decoration:none}
.ri-home__story-item-body{display:block;text-decoration:none}

/* --- Utility --- */
.ri-mt-8{margin-top:var(--space-8)}
@media (max-width:860px){
  .ri-archive-grid{grid-template-columns:1fr}
  .ri-langs{width:100%;margin:.5rem 0 0;justify-content:flex-start}
}