/* =====================================================================
   Reader — an original long-form reading experience.
   Hand-built for this series; not derived from any existing template.
   Design intent: a calm, editorial, "good paper" feel — serif reading
   column, quiet chrome, a slide-in contents drawer, a left scrollspy
   rail, and a reading-progress hairline. Light + dark, fully responsive.
   ===================================================================== */

/* ---- fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600;700&display=swap');

/* ---- design tokens ---- */
:root, [data-theme="light"] {
  --font-read: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-fam: var(--font-ui);           /* SVG diagram text */

  --bg: #faf9f6;
  --bg-elev: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-2: #f3f1ec;
  --fg-primary: #211e1b;
  --fg-secondary: #4c4742;
  --fg-tertiary: #8b857d;
  --bd-subtle: #e7e2d9;
  --bd-strong: #d8d2c6;
  --stroke-1: 1px;

  --brand: #0891b2;
  --brand-strong: #06627e;
  --brand-tint: #e3f4f8;
  --sel: rgba(8,145,178,.16);

  --shadow-1: 0 1px 2px rgba(20,18,15,.05), 0 2px 8px rgba(20,18,15,.05);
  --shadow-2: 0 6px 28px rgba(20,18,15,.13);
  --radius-8: 10px;
  --radius-12: 16px;
  --radius-pill: 999px;
  --measure: 40rem;

  /* diagram tokens (also re-declared per-article; kept here as fallback) */
  --brand-60: var(--brand);
  --accent: #0e7068; --accent-tint:#e2f4f1;
  --violet: #5c2e91; --violet-tint:#efe9f6;
  --good: #0e700e; --good-bg:#e7f6e7; --good-stroke:#9fd89f;
  --iso-warn:#e0a500; --iso-warn-bg:#fbf3d5; --iso-warn-stroke:#e6c84a;
  --iso-bad:#c0272c; --iso-bad-bg:#fdeef0; --iso-bad-stroke:#eeacb2;
  --iso-grid:rgba(8,145,178,.07); --diagram-box-stroke:rgba(0,0,0,.14);
  --diagram-bg: var(--bg-surface);
}

[data-theme="dark"] {
  --bg: #14171a;
  --bg-elev: #1b1f24;
  --bg-surface: #1b1f24;
  --bg-surface-2: #232830;
  --fg-primary: #edf0f3;
  --fg-secondary: #bcc3cb;
  --fg-tertiary: #8b939c;
  --bd-subtle: #2b323a;
  --bd-strong: #3a424c;

  --brand: #26bcda;
  --brand-strong: #4dd0ea;
  --brand-tint: #0e2a33;
  --sel: rgba(38,188,218,.22);

  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.35);
  --shadow-2: 0 10px 34px rgba(0,0,0,.5);

  --brand-60: var(--brand);
  --accent:#4bb3a8; --accent-tint:#0f2b29;
  --violet:#b79ae0; --violet-tint:#221a36;
  --good:#5cc25c; --good-bg:#11280f; --good-stroke:#2f6b2f;
  --iso-warn:#ffc83d; --iso-warn-bg:#2a2208; --iso-warn-stroke:#6b5a16;
  --iso-bad:#ef6b70; --iso-bad-bg:#2c1113; --iso-bad-stroke:#7a2a30;
  --iso-grid:rgba(38,188,218,.14); --diagram-box-stroke:rgba(255,255,255,.32);
  --diagram-bg: var(--bg-surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14171a; --bg-elev:#1b1f24; --bg-surface:#1b1f24; --bg-surface-2:#232830;
    --fg-primary:#edf0f3; --fg-secondary:#bcc3cb; --fg-tertiary:#8b939c;
    --bd-subtle:#2b323a; --bd-strong:#3a424c;
    --brand:#26bcda; --brand-strong:#4dd0ea; --brand-tint:#0e2a33; --sel:rgba(38,188,218,.22);
    --shadow-1:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.35); --shadow-2:0 10px 34px rgba(0,0,0,.5);
    --brand-60:var(--brand);
    --accent:#4bb3a8; --accent-tint:#0f2b29; --violet:#b79ae0; --violet-tint:#221a36;
    --good:#5cc25c; --good-bg:#11280f; --good-stroke:#2f6b2f;
    --iso-warn:#ffc83d; --iso-warn-bg:#2a2208; --iso-warn-stroke:#6b5a16;
    --iso-bad:#ef6b70; --iso-bad-bg:#2c1113; --iso-bad-stroke:#7a2a30;
    --iso-grid:rgba(38,188,218,.14); --diagram-box-stroke:rgba(255,255,255,.32);
    --diagram-bg:var(--bg-surface);
  }
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-primary);
  font-family: var(--font-read);
  font-size: 1.19rem;
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sel); }
a { color: var(--brand-strong); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--brand); }
img, svg { max-width: 100%; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-family: var(--font-ui); font-weight: 600; transition: top .15s;
}
.skip:focus { top: 12px; }

/* ---- top bar + progress ---- */
.rb-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(16px, 4vw, 40px); height: 58px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--stroke-1) solid var(--bd-subtle);
  font-family: var(--font-ui);
}
.rb-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: var(--fg-primary);
  text-decoration: none;
}
.rb-brand .dot { width: 22px; height: 22px; border-radius: 6px; background: var(--brand); display: inline-grid; place-items: center; color: #fff; }
.rb-brand .dot svg { width: 14px; height: 14px; }
/* breadcrumb — replaces the self-linking brand; caps at series level so a long
   series title truncates with an ellipsis instead of crowding the bar. */
.rb-crumbs {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
}
.rb-crumbs .dot { width: 22px; height: 22px; border-radius: 6px; background: var(--brand); display: inline-grid; place-items: center; color: #fff; flex: none; }
.rb-crumbs .dot svg { width: 14px; height: 14px; }
.rb-crumbs .sep { color: var(--fg-tertiary); flex: none; }
.rb-crumb-track { color: var(--fg-secondary); text-decoration: none; white-space: nowrap; flex: none; transition: color .15s; }
.rb-crumb-track:hover { color: var(--brand-strong); }
.rb-crumb-cur { color: var(--fg-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(46vw, 360px); }
a.rb-crumb-cur:hover { color: var(--brand-strong); }
@media (max-width: 560px) { .rb-crumbs .hide-sm { display: none; } }
.rb-spacer { flex: 1; }
.rb-iconbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 13px; border-radius: var(--radius-pill);
  border: var(--stroke-1) solid var(--bd-strong); background: var(--bg-surface);
  color: var(--fg-secondary); font-family: var(--font-ui); font-size: .85rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s, background .15s;
}
.rb-iconbtn:hover { border-color: var(--brand); color: var(--brand-strong); }
.rb-iconbtn svg { width: 17px; height: 17px; }
.rb-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong)); z-index: 61;
  transition: width .08s linear;
}

/* ---- contents drawer ---- */
.rb-scrim {
  position: fixed; inset: 0; background: rgba(10,10,12,.44); z-index: 90;
  opacity: 0; visibility: hidden; transition: opacity .25s;
}
.rb-scrim.open { opacity: 1; visibility: visible; }
.rb-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 88vw); z-index: 91;
  background: var(--bg-elev); border-left: var(--stroke-1) solid var(--bd-subtle);
  box-shadow: var(--shadow-2); transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; font-family: var(--font-ui);
}
.rb-drawer.open { transform: none; }
.rb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; border-bottom: var(--stroke-1) solid var(--bd-subtle); }
.rb-drawer-head .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: var(--fg-tertiary); font-weight: 700; }
.rb-drawer-head .t { font-size: 1.05rem; font-weight: 700; color: var(--fg-primary); margin-top: 3px; font-family: var(--font-read); }
.rb-x { background: none; border: none; cursor: pointer; color: var(--fg-tertiary); padding: 6px; border-radius: 8px; }
.rb-x:hover { background: var(--bg-surface-2); color: var(--fg-primary); }
.rb-x svg { width: 20px; height: 20px; }
.rb-toclist { list-style: none; margin: 0; padding: 10px; overflow-y: auto; }
.rb-toclist a {
  display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; align-items: start;
  padding: 13px 14px; border-radius: 12px; text-decoration: none; color: var(--fg-secondary);
  border: var(--stroke-1) solid transparent;
}
.rb-toclist a:hover { background: var(--bg-surface-2); }
.rb-toclist a.cur { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.rb-toclist .n { font-weight: 800; color: var(--brand-strong); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.rb-toclist .ti { display: block; font-weight: 600; color: var(--fg-primary); font-size: .95rem; line-height: 1.35; }
.rb-toclist .mt { display: block; font-size: .78rem; color: var(--fg-tertiary); margin-top: 3px; }
.rb-drawer-foot { margin-top: auto; padding: 14px 22px 20px; border-top: var(--stroke-1) solid var(--bd-subtle); }
.rb-drawer-foot a { color: var(--brand-strong); font-weight: 600; font-size: .9rem; text-decoration: none; }

/* ---- layout ---- */
.rb-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 44px); }
.rb-grid { display: block; }
/* Single, centered reading column (the on-page rail was removed for these short reads). */
.rb-grid > article { max-width: 44rem; margin: 0 auto; }
.rb-rail { display: none !important; }
.rb-rail h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-tertiary); margin: 0 0 12px; font-weight: 700; }
.rb-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.rb-rail a { display: block; padding: 6px 12px; border-left: 2px solid var(--bd-subtle); color: var(--fg-tertiary); font-size: .84rem; line-height: 1.4; text-decoration: none; transition: color .15s, border-color .15s; }
.rb-rail a:hover { color: var(--fg-secondary); }
.rb-rail a.active { color: var(--brand-strong); border-left-color: var(--brand); font-weight: 600; }

/* ---- hero ---- */
.rb-hero { padding: clamp(34px, 6vw, 68px) 0 8px; }
.rb-eyebrow { font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-strong); }
.rb-title { font-family: var(--font-read); font-weight: 600; font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.018em; margin: .32em 0 .28em; color: var(--fg-primary); }
.rb-dek { font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.5; color: var(--fg-secondary); font-style: italic; max-width: 34rem; margin: 0 0 22px; }
.rb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--font-ui); font-size: .84rem; color: var(--fg-tertiary); }
.rb-meta strong { color: var(--fg-secondary); font-weight: 600; }
.rb-meta .sep { opacity: .5; }
.rb-hr { border: none; border-top: var(--stroke-1) solid var(--bd-subtle); margin: 30px 0 6px; }

/* ---- article prose ---- */
.rb-article { padding-bottom: 40px; }
.rb-article > * { max-width: var(--measure); }
.rb-article > figure, .rb-article > .rb-full { max-width: none; }
.rb-article p { margin: 0 0 1.15em; }
.rb-article h2 {
  font-family: var(--font-read); font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  line-height: 1.2; letter-spacing: -.012em; color: var(--fg-primary);
  margin: 2.1em 0 .55em; scroll-margin-top: 78px;
}
.rb-article h3 { font-family: var(--font-read); font-weight: 600; font-size: 1.32rem; margin: 1.7em 0 .4em; color: var(--fg-primary); scroll-margin-top: 78px; }
.rb-article strong { font-weight: 700; color: var(--fg-primary); }
.rb-article em { font-style: italic; }
.rb-article a { color: var(--brand-strong); }
.rb-article ul, .rb-article ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.rb-article li { margin: 0 0 .5em; padding-left: .2em; }
.rb-article li::marker { color: var(--brand); }
.rb-article hr { border: none; border-top: var(--stroke-1) solid var(--bd-subtle); margin: 2.2em 0; }
.rb-article blockquote { margin: 1.4em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--brand); color: var(--fg-secondary); font-style: italic; }
.rb-article code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--bg-surface-2); padding: .12em .4em; border-radius: 6px; }

/* lead paragraph */
.rb-article .lead, .rb-article > p.lead { font-size: 1.28rem; line-height: 1.6; color: var(--fg-secondary); }

/* thesis / big-idea */
.rb-article .thesis {
  max-width: var(--measure);
  background: linear-gradient(180deg, var(--brand-tint), color-mix(in srgb, var(--brand-tint) 40%, var(--bg-surface)));
  border: var(--stroke-1) solid color-mix(in srgb, var(--brand) 26%, transparent);
  border-radius: var(--radius-12); padding: 22px 26px; margin: 4px 0 34px;
}
.rb-article .thesis-label { font-family: var(--font-ui); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--brand-strong); margin: 0 0 8px; }
.rb-article .thesis-body { margin: 0; font-size: 1.16rem; line-height: 1.58; color: var(--fg-primary); }

/* figures */
.rb-article figure { margin: 32px 0; text-align: center; }
.rb-article figure.reveal { position: relative; }
.rb-article figure svg { width: 100%; height: auto; border: var(--stroke-1) solid var(--bd-subtle); border-radius: var(--radius-12); padding: 14px; background: var(--diagram-bg); box-shadow: var(--shadow-1); }
.rb-article figcaption { font-family: var(--font-ui); font-size: .86rem; line-height: 1.5; color: var(--fg-tertiary); margin-top: 12px; max-width: 40rem; margin-left: auto; margin-right: auto; }
.rb-article figcaption b { color: var(--fg-secondary); }

/* figure full-screen viewer */
.rb-figexpand { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 8px; border: 1.5px solid var(--bd-strong); background: var(--bg-surface-2); color: var(--fg-primary); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.rb-figexpand:hover, .rb-figexpand:focus-visible { border-color: var(--brand); color: var(--brand-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
@media (hover: none) { .rb-figexpand { opacity: 1; } }
.rb-figview { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 3vmin; background: rgba(8, 10, 14, .86); opacity: 0; transition: opacity .18s; }
.rb-figview.open { opacity: 1; }
.rb-figview-stage { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 96vw; max-height: 92vh; transform: scale(.98); transition: transform .18s; }
.rb-figview.open .rb-figview-stage { transform: none; }
.rb-figview-stage svg { width: min(1500px, 96vw); height: auto; max-height: 84vh; background: var(--diagram-bg); border: var(--stroke-1) solid var(--bd-subtle); border-radius: var(--radius-12); padding: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.rb-figview-cap { color: #e8eaed; font-family: var(--font-ui); font-size: .9rem; line-height: 1.5; text-align: center; max-width: 60rem; margin: 0 auto; }
.rb-figview-x { position: fixed; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .12); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.rb-figview-x:hover { background: rgba(255, 255, 255, .24); }

/* ---- Fluent 2 diagram cards (flat, elevated, WCAG-AA, reduced-motion aware) ---- */
.rb-article figure svg {
  background:
    linear-gradient(var(--iso-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--iso-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--diagram-bg);
}
.iso-front { filter: drop-shadow(0 2px 3px rgba(20,18,15,.20)); }
[data-theme="dark"] .iso-front { filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
.iso-label { font-family: var(--font-ui); font-size: 14px; font-weight: 700; fill: #fff; text-anchor: middle; }
.iso-sub { font-family: var(--font-ui); font-size: 11px; font-weight: 600; fill: rgba(255,255,255,.95); text-anchor: middle; }
/* fixed fills, dark enough for white text at AA (>=4.5:1) in both light and dark */
.c-brand  .iso-front { fill: #0e7490; }
.c-accent .iso-front { fill: #0369a1; }
.c-violet .iso-front { fill: #6d28d9; }
.c-good   .iso-front { fill: #166534; }
.c-warn   .iso-front { fill: #b45309; }
.c-bad    .iso-front { fill: #b91c1c; }
.c-flat   .iso-front { fill: var(--bg-surface); stroke: var(--fg-tertiary); stroke-width: 1.6; }
.c-flat   .iso-label, .c-flat .iso-sub { fill: var(--fg-primary); }
/* flat cards need a brighter edge on the dark diagram canvas to stay visible */
[data-theme="dark"] .c-flat .iso-front { stroke: rgba(255,255,255,.5); stroke-width: 1.7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-flat .iso-front { stroke: rgba(255,255,255,.5); stroke-width: 1.7; }
}
.flow { stroke-dasharray: 9 7; animation: dash 1.1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .flow { animation: none; } }

/* callouts */
.rb-article .callout {
  display: grid; grid-template-columns: 30px 1fr; gap: 0 14px; align-items: start;
  max-width: var(--measure);
  background: var(--bg-surface-2); border: var(--stroke-1) solid var(--bd-subtle);
  border-left: 4px solid var(--brand); border-radius: 0 var(--radius-12) var(--radius-12) 0;
  padding: 18px 22px; margin: 26px 0;
}
.rb-article .callout-icon { width: 30px; height: 30px; color: var(--brand); }
.rb-article .callout-icon svg { width: 22px; height: 22px; }
.rb-article .callout-body { min-width: 0; }
.rb-article .callout-body > strong { display: block; font-family: var(--font-ui); font-size: .95rem; margin-bottom: 6px; color: var(--fg-primary); }
.rb-article .callout-body p { margin: 0 0 .7em; font-size: 1.05rem; }
.rb-article .callout-body p:last-child { margin-bottom: 0; }
.rb-article .callout-success { border-left-color: var(--good); }
.rb-article .callout-success .callout-icon { color: var(--good); }
.rb-article .callout-warn { border-left-color: var(--iso-warn); }
.rb-article .callout-warn .callout-icon { color: var(--iso-warn); }
.rb-article .callout-danger { border-left-color: var(--iso-bad); }
.rb-article .callout-danger .callout-icon { color: var(--iso-bad); }
.rb-article .intro-note { max-width: var(--measure); border-left: 4px solid var(--brand); background: var(--bg-surface-2); border-radius: 0 var(--radius-12) var(--radius-12) 0; padding: 16px 22px; margin: 0 0 30px; color: var(--fg-secondary); }

/* glossary */
.rb-article .glossary { max-width: var(--measure); margin: 8px 0 0; }
.rb-article .glossary dt { font-family: var(--font-ui); font-weight: 700; color: var(--fg-primary); margin-top: 18px; font-size: .98rem; }
.rb-article .glossary dd { margin: 5px 0 0; color: var(--fg-secondary); font-size: 1.06rem; line-height: 1.6; }

/* SVG diagram outline + glow states.
   Fills and label colours come from the AA-safe fixed-fill block above — do NOT
   re-declare .c-* fills or .iso-label/.iso-sub here: the theme-variable fills
   (var(--bd-subtle), var(--iso-warn), …) are too light for white text in light
   theme and made whole bands unreadable. */
.iso-front { stroke: var(--diagram-box-stroke); stroke-width: 1.5px; }
.glow-good .iso-front { stroke: var(--good); stroke-width: 2.5; }
.glow-bad .iso-front { stroke: var(--iso-bad); stroke-width: 2.5; }
.flow { stroke-dasharray: 9 7; animation: rb-dash 1.1s linear infinite; }
@keyframes rb-dash { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .flow { animation: none; } }
figure svg text { font-family: var(--font-ui); }

/* ---- sources ---- */
.rb-sources { max-width: var(--measure); margin: 40px 0 8px; padding-top: 20px; border-top: var(--stroke-1) solid var(--bd-subtle); font-family: var(--font-ui); }
.rb-sources h2 { font-size: 1.02rem; margin: 0 0 4px; }
.rb-sources-note { font-size: .86rem; color: var(--fg-tertiary); margin: 0 0 12px; }
.rb-sources ul { margin: 0; padding-left: 18px; }
.rb-sources li { margin: 6px 0; font-size: .92rem; line-height: 1.45; }
.rb-sources a { color: var(--brand); text-decoration: none; overflow-wrap: anywhere; }
.rb-sources a:hover { text-decoration: underline; }

/* ---- pager (prev / next) ---- */
.rb-pager { display: grid; gap: 14px; margin: 20px 0 10px; max-width: var(--measure); }
@media (min-width: 640px) { .rb-pager { grid-template-columns: 1fr 1fr; } }
.rb-pager a {
  display: block; text-decoration: none; padding: 16px 18px; border-radius: var(--radius-12);
  border: var(--stroke-1) solid var(--bd-subtle); background: var(--bg-surface);
  font-family: var(--font-ui); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rb-pager a:hover { border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.rb-pager .dir { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-tertiary); font-weight: 700; }
.rb-pager .lab { display: block; margin-top: 5px; font-weight: 600; color: var(--fg-primary); font-size: 1rem; line-height: 1.3; }
.rb-pager .next { text-align: right; }
.rb-pager .disabled { opacity: .45; pointer-events: none; }

/* ---- index / landing ---- */
/* Match the article reading column: the index hero + list share the same centered
   44rem column that articles get from .rb-grid > article (scoped to direct children
   of .rb-wrap, so article pages are unaffected). */
.rb-wrap > .rb-hero, .rb-wrap > #main { max-width: 44rem; margin-inline: auto; }
.rb-index-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rb-card { display: grid; grid-template-columns: 52px 1fr; gap: 0 18px; align-items: start; padding: 22px; border-radius: var(--radius-12); border: var(--stroke-1) solid transparent; text-decoration: none; transition: background .16s, border-color .16s; }
.rb-card:hover { background: var(--bg-surface-2); border-color: var(--bd-subtle); }
.rb-card .num { font-family: var(--font-ui); font-size: 2rem; font-weight: 800; color: var(--brand-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.rb-card .ti { display: block; font-family: var(--font-read); font-size: 1.42rem; font-weight: 600; color: var(--fg-primary); margin: 0 0 6px; line-height: 1.25; letter-spacing: -.01em; }
.rb-card .dk { display: block; color: var(--fg-secondary); margin: 0 0 8px; font-size: 1.08rem; line-height: 1.55; }
.rb-card .mt { display: block; font-family: var(--font-ui); font-size: .8rem; color: var(--fg-tertiary); }

/* ---- footer ---- */
.rb-foot { border-top: var(--stroke-1) solid var(--bd-subtle); margin-top: 40px; padding: 28px 0 60px; font-family: var(--font-ui); color: var(--fg-tertiary); font-size: .86rem; }
.rb-foot strong { color: var(--fg-secondary); }
.rb-foot .fine { margin-top: 12px; font-size: .78rem; max-width: 42rem; font-style: italic; }