/* ============================================================
   UKFCP redesign — the app's design language on the web.
   Loaded after styles.min.css; overrides the broadsheet chrome
   and provides the components for the rebuilt pages.
   Light scheme only, by editorial decision.
   ============================================================ */

:root {
  --paper:        #FBF9F6;
  --surface:      #FFFFFF;
  --surface-2:    #F1EDE8;
  --surface-3:    #E9E4DD;
  --ink:          #16130F;
  --ink-2:        #423C36;
  --muted:        #6F675F;
  --hairline:     #E5DFD7;

  --crimson:      #C41230;
  --crimson-tint: #FBE9EC;

  --verify:       #17925A;
  --verify-tint:  #E4F4EA;
  --dispute:      #C0392B;
  --dispute-tint: #FBE8E5;
  --caution:      #B87200;
  --caution-tint: #FBF0DE;

  --rd-shadow:    0 1px 2px rgba(22,19,15,.05), 0 8px 24px rgba(22,19,15,.06);
  --rd-shadow-lg: 0 2px 6px rgba(22,19,15,.06), 0 24px 60px rgba(22,19,15,.10);

  --r-card: 18px;
  --r-row:  14px;
  --r-pill: 999px;
  --r-img:  12px;

  --serif: "FinancierDisplayWeb", Georgia, "Times New Roman", serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- ground ---------- */
/* html body outranks the page-local `body { ... !important }` cream
   overrides that many old templates still carry in their style blocks,
   so every page sits on the app's paper. */
html body {
  background: var(--paper) !important;
  color: var(--ink);
}

/* ============================================================
   CHROME RESKIN — existing base.html markup, new clothes
   ============================================================ */

/* Utility bar */
.utility-bar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.utility-link {
  color: var(--ink-2) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  text-decoration: none !important;
}
.utility-link:hover { color: var(--crimson) !important; }
.utility-link.active { color: var(--crimson) !important; border-bottom: none !important; }
.utility-bar .mx-2 { color: var(--hairline) !important; }

/* Category nav */
.category-nav {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}
.category-nav .nav-link {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
  color: var(--ink-2) !important;
  border: none !important;
}
.category-nav .nav-link:hover,
.category-nav .nav-link.active {
  color: var(--crimson) !important;
  background: transparent !important;
  border: none !important;
}

/* Masthead */
.newspaper-masthead {
  background: var(--paper) !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 1.4rem 1rem 1.1rem !important;
}
.newspaper-masthead .masthead-title {
  font-family: var(--serif) !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
}
.masthead-date { color: var(--muted) !important; font-family: var(--sans) !important; }

/* Every page shares the homepage masthead look: centred date, full
   wordmark, poll strip. base.html renders the same markup on non-home
   pages; these chrome overrides style both identically. */
.newspaper-masthead.desktop-masthead { margin-bottom: 0 !important; }
.desktop-masthead .masthead-title { font-size: 4.5rem !important; }
@media (max-width: 1200px) {
  .desktop-masthead .masthead-title { font-size: 4rem !important; }
}
@media (max-width: 992px) {
  .desktop-masthead .masthead-title { font-size: 3.5rem !important; }
}
/* The voting-intention strip is UI, not prose: same sans face and sizes on
   every page (the homepage's serif layout container was making it render in
   Financier while inner pages fell back to Inter). */
.masthead-poll-label, .masthead-poll-party, .masthead-poll-abbr,
.masthead-poll-name, .masthead-poll-cta {
  font-family: var(--sans) !important;
}
.masthead-poll-party { font-size: .8rem !important; }
.masthead-poll-label, .masthead-poll-cta { font-size: .68rem !important; }

.mobile-minimal-header {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.mobile-brand-text { font-family: var(--serif) !important; color: var(--ink) !important; }

/* Footer */
.newspaper-footer {
  background: var(--ink) !important;
  color: #C9C3BC !important;
  border-top: none !important;
  margin-top: 3rem !important;
}
.newspaper-footer .footer-title {
  font-family: var(--serif) !important;
  color: #F4F1ED !important;
  letter-spacing: -.02em !important;
}
.newspaper-footer .footer-tagline { color: #948C84 !important; }
.newspaper-footer .footer-section h4 {
  font-family: var(--sans) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #948C84 !important;
}
.newspaper-footer .footer-section a {
  color: #C9C3BC !important;
  text-decoration: none !important;
  font-size: .85rem !important;
}
.newspaper-footer .footer-section a:hover { color: #fff !important; }
.newspaper-footer .footer-social a {
  color: #C9C3BC !important;
  border: 1px solid #2E2B28 !important;
  border-radius: 50% !important;
  width: 38px; height: 38px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
.newspaper-footer .footer-social a:hover { color: #fff !important; border-color: #948C84 !important; }
.newspaper-footer .footer-bottom {
  border-top: 1px solid #2E2B28 !important;
  color: #948C84 !important;
}
.footer-trustmark-text { color: #948C84 !important; }

/* Mobile offcanvas — the app's menu: paper sheet, serif rows on hairlines,
   crimson kickers, pill actions. Markup in base.html is untouched. */
.offcanvas { background: var(--paper) !important; }
#mobileMenu.offcanvas { width: min(86vw, 360px) !important; }
#mobileMenu .offcanvas-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 1rem 1.25rem !important;
}
#mobileMenu .offcanvas-body { background: transparent !important; }
#mobileMenu .offcanvas-title {
  font-family: var(--serif) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
}
#mobileMenu .offcanvas-body { padding: 1rem 1.25rem 2rem !important; }
#mobileMenu .mobile-menu-section {
  margin-bottom: 1.4rem !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
}
.mobile-menu-title {
  color: var(--crimson) !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: .35rem !important;
}
.mobile-menu-section .nav-link {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  padding: .55rem 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
}
.mobile-menu-section .nav-item:last-child .nav-link { border-bottom: none !important; }
.mobile-menu-section .nav-link:hover { color: var(--crimson) !important; }
.mobile-menu-section .nav-link.active {
  color: var(--crimson) !important;
}
#mobileMenu .btn-primary {
  background: var(--crimson) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  padding: .8rem 1rem !important;
  color: #fff !important;
  box-shadow: none !important;
}
#mobileMenu .btn-primary:hover { background: #A50E28 !important; }
#mobileMenu .btn-outline-search {
  background: var(--surface) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  padding: .75rem 1rem !important;
}
#mobileMenu .btn-outline-search:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
#mobileMenu .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crimson); display: inline-block;
  animation: rd-live-pulse 1.6s ease-in-out infinite;
}
@keyframes rd-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

.rd-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--rd-shadow);
}

.rd-cat {
  font-family: var(--sans);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--crimson);
}
.rd-meta { font-family: var(--sans); font-size: .74rem; color: var(--muted); }
.rd-dek { font-family: var(--sans); font-size: .88rem; color: var(--ink-2); line-height: 1.5; }

.rd-tick {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  background: var(--verify-tint); color: var(--verify);
  font-size: .66rem; font-weight: 800; line-height: 1;
}

/* Score ring (conic) */
.rd-ring {
  --pct: 50; --hue: var(--verify);
  width: 54px; height: 54px; border-radius: 50% !important; flex: none;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--hue) calc(var(--pct) * 1%), var(--surface-3) 0);
}
.rd-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.rd-ring i {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; font-style: normal; line-height: 1;
}
.rd-ring b { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--hue); font-variant-numeric: tabular-nums; }
.rd-ring s { text-decoration: none; font-family: var(--sans); font-size: .5rem; color: var(--muted); margin-top: 1px; }
.rd-ring.sm { width: 44px; height: 44px; }
.rd-ring.sm b { font-size: .88rem; }
.rd-ring.xl { width: 96px; height: 96px; }
.rd-ring.xl::after { inset: 7px; }
.rd-ring.xl b { font-size: 2rem; }
.rd-ring.xl s { font-size: .7rem; }
.rd-ring.amber { --hue: var(--caution); }
.rd-ring.red { --hue: var(--dispute); }

/* Verdict chips */
.rd-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.rd-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .7rem; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: .76rem; font-weight: 600; line-height: 1.15;
}
.rd-chip em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.rd-chip.ok  { background: var(--verify-tint);  color: var(--verify); }
.rd-chip.no  { background: var(--dispute-tint); color: var(--dispute); }
.rd-chip.unk { background: var(--caution-tint); color: var(--caution); }

/* Fold rows: native <details> styled as row cards */
.rd-fold {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-row);
  font-family: var(--sans);
}
.rd-fold.warn { border-color: #EBC4BE; }
.rd-fold > summary {
  display: flex; align-items: center; gap: .85rem;
  padding: .95rem 1.05rem; cursor: pointer; list-style: none;
}
.rd-fold > summary::-webkit-details-marker { display: none; }
.rd-fold .rf-icon { flex: none; width: 1.2em; text-align: center; }
.rd-fold .rf-title { font-weight: 650; font-size: .95rem; color: var(--ink); }
.rd-fold .rf-sub { font-size: .76rem; color: var(--muted); }
.rd-fold .rf-chev { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.rd-fold[open] .rf-chev { transform: rotate(180deg); }
.rd-fold .rf-body {
  padding: 0 1.05rem 1.05rem;
  font-size: .9rem; color: var(--ink-2); line-height: 1.65;
}
.rd-fold .rf-body ul { margin: 0 0 .6rem; padding-left: 1.15rem; }
.rd-fold .rf-body li { margin-bottom: .45rem; }
.rd-fold .rf-body h5 {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 1rem 0 .4rem;
}
.rd-fold .rf-body a { color: var(--crimson); word-break: break-all; }

/* The verdict card */
.rd-verdict {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 1.35rem;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: var(--rd-shadow);
}
.rd-verdict.v-good { border-color: #BFE3CE; }
.rd-verdict.v-mixed { border-color: #EBD9B8; }
.rd-verdict.v-bad { border-color: #EBC4BE; }
.rd-verdict .rv-head { display: flex; gap: 1.1rem; align-items: center; }
.rd-verdict .rv-label {
  font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.rd-verdict .rv-word { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.rd-verdict .rv-qual { font-family: var(--sans); font-size: .84rem; color: var(--ink-2); line-height: 1.4; }
.rd-verdict .rv-quote {
  border-left: 3px solid var(--verify);
  padding-left: .9rem; margin: 0;
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.45; color: var(--ink);
}
.rd-verdict.v-mixed .rv-quote { border-left-color: var(--caution); }
.rd-verdict.v-bad .rv-quote { border-left-color: var(--dispute); }

/* Trust strip (article page) */
.rd-trust-strip {
  display: flex; align-items: center; gap: .6rem;
  background: var(--verify-tint);
  border: 1px solid #BFE3CE;
  border-radius: var(--r-row);
  padding: .65rem .9rem;
  font-family: var(--sans); font-size: .85rem; color: var(--ink);
}
.rd-trust-strip.v-mixed { background: var(--caution-tint); border-color: #EBD9B8; }
.rd-trust-strip.v-bad { background: var(--dispute-tint); border-color: #EBC4BE; }
.rd-trust-strip b { color: var(--verify); }
.rd-trust-strip.v-mixed b { color: var(--caution); }
.rd-trust-strip.v-bad b { color: var(--dispute); }
.rd-trust-strip button {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: .8rem; font-weight: 650; color: var(--crimson);
  white-space: nowrap; padding: 0;
}

/* Overlay dialog */
dialog.rd-overlay {
  border: 0; border-radius: var(--r-card);
  padding: 0; background: transparent;
  width: min(600px, calc(100vw - 2rem));
  max-height: 88vh;
}
dialog.rd-overlay::backdrop { background: rgba(22,19,15,.45); }
dialog.rd-overlay .ov-inner {
  background: var(--paper); border-radius: var(--r-card);
  padding: 1.25rem; max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .9rem;
}
dialog.rd-overlay .ov-close {
  position: sticky; top: 0; align-self: flex-end;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--surface-2); color: var(--ink);
  font-size: 1.1rem; line-height: 1; cursor: pointer; z-index: 2;
  margin-bottom: -2.2rem;
}

/* Support band (donation) */
.rd-support {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 1.15rem 1.5rem;
  box-shadow: var(--rd-shadow);
  font-family: var(--sans);
}
.rd-support .sb-heart {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: var(--crimson-tint); color: var(--crimson);
  display: grid; place-items: center; font-size: 1.1rem;
}
.rd-support .sb-text { flex: 1; }
.rd-support .sb-text b { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink); display: block; }
.rd-support .sb-text span { font-size: .8rem; color: var(--muted); }
/* Shared crimson pill button (donation band, empty states, CTAs). */
.sb-btn {
  display: inline-block;
  background: var(--crimson); color: #fff !important; border-radius: var(--r-pill);
  padding: .7rem 1.2rem; font-size: .84rem; font-weight: 650;
  white-space: nowrap; flex: none; text-decoration: none !important;
}

/* Checker CTA band */
.rd-checker-band {
  border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--hairline); box-shadow: var(--rd-shadow);
  padding: 1.5rem 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
  font-family: var(--sans);
}
.rd-checker-band .cbb-left { display: flex; gap: 1rem; align-items: center; min-width: 260px; flex: 1; }
.rd-checker-band .cbb-badge {
  width: 52px; height: 52px; border-radius: 15px; flex: none;
  display: grid; place-items: center; font-size: 1.4rem;
  background: var(--crimson-tint); color: var(--crimson);
}
.rd-checker-band .cbb-t { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); }
.rd-checker-band .cbb-s { font-size: .84rem; color: var(--muted); margin-top: .15rem; }
.rd-checker-band .cbb-right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.rd-checker-band .cbb-btn {
  background: var(--crimson); color: #fff !important; border-radius: var(--r-pill);
  padding: .85rem 1.4rem; font-size: .88rem; font-weight: 650;
  white-space: nowrap; text-decoration: none !important; display: inline-block;
}

/* ============================================================
   HOMEPAGE
   ============================================================ */
.rd-home { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1rem 3rem; display: flex; flex-direction: column; gap: 2.25rem; }

.rd-hero { display: grid; grid-template-columns: minmax(0,7.5fr) minmax(0,4.5fr); gap: 1.5rem; align-items: start; }
.rd-lead { overflow: hidden; }
.rd-lead .lead-media img { width: 100%; height: 330px; object-fit: cover; display: block; }
.rd-lead .lead-body { padding: 1.3rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.rd-lead h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -.02em; line-height: 1.12; margin: 0; }
.rd-lead h2 a { color: var(--ink); text-decoration: none; }
.rd-lead h2 a:hover { color: var(--crimson); }

.rd-fcrail { padding: 1.25rem; display: flex; flex-direction: column; }
.rd-fcrail .fcr-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .3rem; }
.rd-fcrail .fcr-title { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.rd-seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.rd-seg button {
  font-family: var(--sans); font-size: .78rem; font-weight: 600; border: 0; cursor: pointer;
  padding: .35rem .85rem; border-radius: var(--r-pill); background: transparent; color: var(--muted);
}
.rd-seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.rd-fc-row {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .9rem 0; border-bottom: 1px solid var(--hairline);
  text-decoration: none !important;
}
.rd-fc-row:last-of-type { border-bottom: 0; }
.rd-fc-src { font-family: var(--sans); font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rd-fc-h { font-family: var(--serif); font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--ink); }
.rd-fc-row:hover .rd-fc-h { color: var(--crimson); }

.rd-cta-check {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--crimson); color: #fff !important; border-radius: var(--r-pill);
  padding: .95rem 1.25rem; font-family: var(--sans); font-weight: 650; font-size: .9rem;
  text-decoration: none !important;
}

.rd-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rd-sec-h { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.rd-sec-more { font-family: var(--sans); font-size: .77rem; font-weight: 650; color: var(--crimson); text-decoration: none; }

.rd-river { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; align-items: stretch; }
.rd-rcard {
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none !important;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--rd-shadow);
  padding: .9rem .9rem 1.05rem;
  transition: box-shadow .15s ease, transform .15s ease;
}
.rd-rcard:hover { box-shadow: var(--rd-shadow-lg); transform: translateY(-2px); }
.rd-rcard picture { display: block; width: 100%; }
.rd-rcard img {
  width: 100%; height: 150px; object-fit: cover;
  border-radius: var(--r-img) !important; display: block;
}
.rd-rcard h3 {
  font-family: var(--serif); font-weight: 700; font-size: 1.06rem;
  line-height: 1.25; color: var(--ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-rcard .rd-dek {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-rcard .rd-meta { margin-top: auto; }
.rd-rcard:hover h3 { color: var(--crimson); }

.rd-topics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.25rem; }
.rd-topic-col { display: flex; flex-direction: column; gap: .8rem; }
.rd-topic-h {
  font-family: var(--sans); font-size: .68rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
  padding-bottom: .5rem; border-bottom: 2px solid var(--crimson); margin: 0;
}
.rd-topic-h a { color: inherit; text-decoration: none; }
.rd-topic-item {
  display: flex; gap: .7rem; align-items: flex-start;
  padding-bottom: .8rem; border-bottom: 1px solid var(--hairline);
  text-decoration: none !important;
}
.rd-topic-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rd-topic-item img { width: 62px; height: 46px; object-fit: cover; border-radius: 8px; flex: none; }
.rd-topic-item h4 { font-family: var(--serif); font-weight: 700; font-size: .92rem; line-height: 1.25; color: var(--ink); margin: 0 0 .2rem; }
.rd-topic-item:hover h4 { color: var(--crimson); }

/* Poll ribbon */
.rd-poll {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .3rem 1.1rem;
  padding: .65rem 1rem; border-bottom: 1px solid var(--hairline);
  background: var(--surface); font-family: var(--sans);
}
.rd-poll-title { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--crimson); }
.rd-party { display: inline-flex; align-items: center; gap: .32rem; font-size: .81rem; color: var(--ink-2); }
.rd-party b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.rd-article { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.rd-article .art-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r-img); display: block; }
.rd-article .art-caption { font-family: var(--sans); font-size: .78rem; color: var(--muted); line-height: 1.5; margin: 0; }
.rd-article h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 2.2rem);
  letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin: 0;
}
.rd-article .art-byline { font-family: var(--sans); font-size: .85rem; color: var(--ink-2); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.rd-article .art-byline a { color: var(--ink); font-weight: 650; text-decoration: none; }
.rd-article .art-byline a:hover { color: var(--crimson); }
.rd-article .art-updated { font-style: italic; color: var(--muted); font-size: .78rem; width: 100%; }

/* TLDR fold */
.rd-tldr { border: 0; background: transparent; }
.rd-tldr > summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: .2rem 0;
}
.rd-tldr > summary::-webkit-details-marker { display: none; }
.rd-tldr .tl-label { font-family: var(--sans); font-size: .82rem; font-weight: 800; letter-spacing: .1em; color: var(--crimson); }
.rd-tldr .tl-chev { color: var(--muted); transition: transform .2s ease; }
.rd-tldr[open] .tl-chev { transform: rotate(90deg); }
.rd-tldr .tl-body { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); line-height: 1.6; padding: .5rem 0 .3rem; }

/* Audio player container */
.rd-audio { border: 1px solid var(--hairline); border-radius: var(--r-row); background: var(--surface); padding: .8rem .9rem; }
.rd-audio audio { width: 100%; display: block; }

/* Body copy */
.rd-article .art-body {
  font-family: var(--serif); font-size: 1.13rem; line-height: 1.65; color: var(--ink);
}
.rd-article .art-body p { margin-bottom: 1rem; max-width: 66ch; }
.rd-article .art-body a { color: var(--crimson); }
.rd-article .art-body img { max-width: 100%; height: auto; border-radius: var(--r-img); }
.rd-article .art-body figure { margin: 1.25rem 0; }
.rd-article .art-body figcaption { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin-top: .4rem; }
.rd-article .art-body blockquote {
  border-left: 3px solid var(--crimson); padding-left: 1rem;
  font-style: italic; color: var(--ink-2); margin: 1.25rem 0;
}

/* Share row */
.rd-share-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: .8rem 0; font-family: var(--sans);
}
.rd-share-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rd-share-btn {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--ink) !important; font-size: .85rem; text-decoration: none !important;
  cursor: pointer;
}
.rd-share-btn:hover { border-color: var(--crimson); color: var(--crimson) !important; }
.rd-share-comments { margin-left: auto; font-size: .8rem; color: var(--muted); text-decoration: none; }
.rd-share-comments:hover { color: var(--crimson); }

/* Related grid */
.rd-related { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
.rd-related a { display: flex; flex-direction: column; gap: .5rem; text-decoration: none !important; }
.rd-related img, .rd-related .rel-ph { width: 100%; height: 84px; object-fit: cover; border-radius: var(--r-img); background: var(--surface-2); display: block; }
.rd-related h4 { font-family: var(--serif); font-weight: 700; font-size: .9rem; line-height: 1.25; color: var(--ink); margin: 0; }
.rd-related a:hover h4 { color: var(--crimson); }

/* Prev / next */
.rd-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; font-family: var(--sans); }
.rd-prevnext a {
  display: flex; align-items: center; gap: .85rem;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-row); padding: .95rem 1.05rem;
  text-decoration: none !important; color: var(--ink);
}
.rd-prevnext a:hover { border-color: var(--crimson); }
.rd-prevnext .pn-dir { font-size: .72rem; color: var(--muted); }
.rd-prevnext .pn-title { font-family: var(--serif); font-weight: 700; font-size: .92rem; line-height: 1.25; }
.rd-prevnext a.pn-next { text-align: right; justify-content: flex-end; }

/* Comments reskin (existing markup) */
.article-comments { border-top: 2px solid var(--ink); padding-top: 1rem; }
.comments-title { font-family: var(--serif) !important; font-size: 1.3rem !important; color: var(--ink) !important; }
.article-comments textarea, .article-comments input[type="text"] {
  border: 1px solid var(--hairline) !important; border-radius: var(--r-row) !important;
  background: var(--paper) !important;
}
.article-comments .btn-primary {
  background: var(--crimson) !important; border: 0 !important;
  border-radius: var(--r-pill) !important; font-weight: 650 !important;
}

/* Small screens */
@media (max-width: 991.98px) {
  .rd-hero { grid-template-columns: 1fr; }
  .rd-river { grid-template-columns: 1fr; }
  .rd-topics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rd-related { grid-template-columns: 1fr; }
  .rd-prevnext { grid-template-columns: 1fr; }
  .rd-checker-band .cbb-right { align-items: flex-start; }
}
@media (max-width: 575.98px) {
  .rd-topics { grid-template-columns: 1fr; }
  .rd-support { flex-wrap: wrap; }
}

/* ============================================================
   AUTH — login / register
   ============================================================ */
.rd-auth {
  max-width: 460px;
  margin: 2.5rem auto 4.5rem;
  padding: 0 1.25rem;
  font-family: var(--sans);
}
.rd-auth-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--rd-shadow);
  padding: 2.1rem 2rem 1.9rem;
}
.rd-auth-kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--crimson); margin: 0 0 .55rem;
}
.rd-auth-title {
  font-family: var(--serif); font-size: 2rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 .45rem; line-height: 1.15;
}
.rd-auth-sub { color: var(--muted); font-size: .93rem; line-height: 1.55; margin: 0 0 1.5rem; }

.rd-auth .rd-field { display: block; margin-bottom: 1.05rem; }
.rd-auth .rd-field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem;
}
.rd-auth .rd-field-label a { font-weight: 600; color: var(--crimson); text-decoration: none; font-size: .78rem; }
.rd-auth .rd-field-label a:hover { text-decoration: underline; }
.rd-auth .form-control {
  width: 100%;
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-img) !important;
  padding: .8rem .95rem !important;
  font-family: var(--sans) !important;
  font-size: .95rem !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rd-auth .form-control:focus {
  background: var(--surface) !important;
  border-color: var(--crimson) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--crimson-tint) !important;
}
.rd-auth .invalid-feedback { color: var(--dispute); font-size: .8rem; font-weight: 500; }

.rd-auth-check {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--surface-2); border-radius: var(--r-img);
  padding: .85rem .95rem; margin: 0 0 1.2rem;
  font-size: .85rem; color: var(--ink-2); line-height: 1.45;
  cursor: pointer;
}
.rd-auth-check input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; margin-top: .12rem; flex: 0 0 auto;
  accent-color: var(--crimson);
}
.rd-auth-check a { color: var(--crimson); font-weight: 600; text-decoration: none; }
.rd-auth-check a:hover { text-decoration: underline; }

.rd-auth-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--crimson); color: #fff; border: none;
  border-radius: var(--r-pill); padding: .9rem 1rem;
  font-family: var(--sans); font-weight: 700; font-size: .98rem;
  cursor: pointer; transition: background .15s ease;
}
.rd-auth-submit:hover { background: #A50E28; color: #fff; }

.rd-auth-div {
  display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0;
  color: var(--muted); font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.rd-auth-div::before, .rd-auth-div::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}

.rd-auth-ghost {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  padding: .82rem 1rem; font-family: var(--sans); font-weight: 600; font-size: .95rem;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.rd-auth-ghost:hover { background: var(--ink); color: var(--paper); text-decoration: none; }

.rd-auth-alt { text-align: center; font-size: .9rem; color: var(--ink-2); margin: 1.4rem 0 0; }
.rd-auth-alt a { color: var(--crimson); font-weight: 700; text-decoration: none; }
.rd-auth-alt a:hover { text-decoration: underline; }
.rd-auth-footnote {
  text-align: center; color: var(--muted); font-size: .8rem;
  line-height: 1.5; margin: 1.1rem auto 0; max-width: 360px;
}

.rd-auth-alert {
  border-radius: var(--r-img); padding: .8rem 1rem; font-size: .88rem;
  font-weight: 500; margin-bottom: 1.1rem; border: 1px solid transparent;
}
.rd-auth-alert.a-info    { background: var(--surface-2); color: var(--ink-2); border-color: var(--hairline); }
.rd-auth-alert.a-success { background: var(--verify-tint); color: var(--verify); }
.rd-auth-alert.a-danger  { background: var(--dispute-tint); color: var(--dispute); }
.rd-auth-alert.a-warning { background: var(--caution-tint); color: var(--caution); }

/* ============================================================
   LEGAL / STATIC PROSE (privacy, and any bootstrap-card page
   tagged rd-legal) — surfaces on paper, serif headings
   ============================================================ */
.rd-legal { max-width: 900px; }
.rd-legal .card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--rd-shadow) !important;
}
.rd-legal .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 1.1rem 1.5rem !important;
}
.rd-legal .card-header.bg-primary {
  background: transparent !important;
  color: var(--ink) !important;
}
.rd-legal .card-header h1,
.rd-legal .card-header h2 {
  font-family: var(--serif) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
}
.rd-legal .card-body { padding: 1.5rem !important; }
.rd-legal .card-body h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); }
.rd-legal p, .rd-legal li { color: var(--ink-2); line-height: 1.65; }
.rd-legal a { color: var(--crimson); }

/* ============================================================
   SEARCH MODAL — base.html markup untouched
   ============================================================ */
#searchModal .modal-content {
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--rd-shadow-lg) !important;
}
#searchModal .modal-header { padding: 1.1rem 1.25rem .6rem !important; }
#searchModal .modal-body { padding: .75rem 1.25rem 1.4rem !important; }
#searchModal .search-input-group { display: flex !important; gap: .5rem !important; }
#searchModal input[type="search"] {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-pill) !important;
  padding: .7rem 1.2rem !important;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
#searchModal input[type="search"]:focus {
  border-color: var(--crimson) !important;
  box-shadow: 0 0 0 3px var(--crimson-tint) !important;
  outline: none !important;
}
#searchModal .btn-primary {
  background: var(--crimson) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  min-width: 48px !important;
  box-shadow: none !important;
}
#searchModal .btn-primary:hover { background: #A50E28 !important; }
#searchModal #search-suggestions h6 {
  font-family: var(--sans) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--crimson) !important;
}
#searchModal .category-tag {
  display: inline-block !important;
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  padding: .45rem .95rem !important;
  font-family: var(--sans) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin: 0 .4rem .5rem 0 !important;
}
#searchModal .category-tag:hover {
  background: var(--crimson-tint) !important;
  color: var(--crimson) !important;
}
#searchModal .search-result-item {
  border-bottom: 1px solid var(--hairline) !important;
  padding: .8rem 0 !important;
  background: transparent !important;
}
#searchModal .search-result-item:last-child { border-bottom: none !important; }
#searchModal .search-result-item h6,
#searchModal .search-result-item a {
  font-family: var(--serif) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}
#searchModal .search-result-item a:hover { color: var(--crimson) !important; }
#searchModal .btn-outline-primary {
  background: var(--surface) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  padding: .6rem 1.4rem !important;
  box-shadow: none !important;
}
#searchModal .btn-outline-primary:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}