body { background: var(--bg); }

.rd-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.rd-head { margin-bottom: 34px; }
.rd-head .brand { margin: 14px 0 26px; }
.rd-kicker {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--gold);
}
.rd-head h1 {
  margin: 0 0 14px; font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.15;
}
.rd-lede { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.7; color: var(--ink-dim); }

.rd-covers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin-bottom: 28px; padding: 4px; perspective: 1200px;
}
@media (max-width: 700px) { .rd-covers { grid-template-columns: 1fr; } }
/* a physical card, elevated even at rest — see feedback_elevated_cards
   in memory: this is the site's default card language now, not a
   one-off for the Chart page's continuation cards */
.rd-cover-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: var(--bg-2);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--ink) 26%, transparent);
  transform: translateZ(0);
  transition: transform .28s var(--ease-soft), box-shadow .28s var(--ease-soft);
}
.rd-cover-card:hover {
  transform: translateY(-6px) rotateX(3deg) rotateY(-2deg);
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent),
    0 24px 44px -16px color-mix(in srgb, var(--ink) 34%, transparent);
}
.rd-cover-n { font-family: var(--serif); font-size: 20px; color: var(--gold); }
.rd-cover-card b { font-size: 15px; color: var(--ink); }
.rd-cover-card span:last-child { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }

.rd-cta-row { display: flex; }
.rd-cta-box {
  display: flex; flex-direction: column; gap: 8px; max-width: 420px;
  padding: 26px; border-radius: 18px;
  background:
    radial-gradient(ellipse 480px 280px at 6% -22%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 480px 280px at 100% 120%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
    var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 22%, var(--line));
  box-shadow: 0 20px 60px -30px color-mix(in srgb, var(--accent) 30%, transparent);
}
.rd-cta-box-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); margin-top: 4px;
}
.rd-cta-box b:first-of-type { margin-top: -4px; }
.rd-cta-box b { font-size: 15px; color: var(--ink); font-weight: 600; }
.rd-cta-btn {
  margin-top: 10px; display: flex; align-items: center; justify-content: center;
  min-height: 48px; border-radius: 12px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 700;
  transition: background .15s var(--ease-soft);
}
.rd-cta-btn:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.rd-cta-box-note { font-size: 12px; color: var(--ink-faint); text-align: center; }