/* Read pages (articles, ranked guides, glossary, news, about/contacts/privacy) on the review design system.
   Loaded after review.css (tokens, type, light/dark, legacy adapters), only by templates that set
   body.rv.fc-read; every rule is scoped to .rv.fc-read. No new colours: tokens only (DESIGN.md).
   Data comes from view_utils/article_summary.py; templates in templates/wagtail/snippets/read/. */

.rv.fc-read {
  --rail: 220px;                       /* the TOC rail / rank-numeral column, as on reviews */
  --gap: clamp(28px, 4vw, 64px);
  --jb: 64px;                          /* ranked-guide jump bar height */
  --az: 44px;                          /* glossary letter bar height */
  --measure: 720px;                    /* reading column (68ch of 17px body copy) */
}
html:has(body.rv.fc-guide) { scroll-padding-top: calc(48px + 64px + 24px); }
html:has(body.rv.fc-glossary) { scroll-padding-top: calc(48px + 44px + 24px); }
.rv.fc-read ::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- hero ---------- */
.rv.fc-read .fc-hero { padding-bottom: 36px; }
.rv.fc-read .fc-hero-solo { grid-template-columns: minmax(0, 1fr); }
.rv.fc-read .fc-hero-solo h1 { max-width: 22ch; }
.rv.fc-read .fc-hero h1 { margin-top: 18px; text-wrap: balance; }
.rv.fc-read .rv-dek p { margin: 0; }
.rv.fc-read .fc-hero-img { margin: 18px 0 0; }
.rv.fc-read .fc-hero:not(.fc-hero-solo) h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -.04em; }
.rv.fc-read .fc-hero-img img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.rv.fc-read .fc-hero-img > img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r);
  background: var(--sunk);
}
.rv.fc-read .fc-hero-img .figure-caption { margin: 8px 0 0; }
.rv.fc-guide .fc-hero { padding-bottom: 28px; }
/* two-column heroes (image beside): the share row follows the dates and wraps left, never floats right alone */
.rv.fc-read .fc-hero:not(.fc-hero-solo) .rv-share { margin-left: 0; }

/* ---------- reading column + prose rhythm ---------- */
.rv.fc-read .fc-col { max-width: var(--measure); min-width: 0; }
.rv.fc-read .fc-col-wide { max-width: none; }
.rv.fc-read .fc-single { padding: 40px 0 72px; }
.rv.fc-read .fc-layout .rv-article { max-width: var(--measure); }
/* :where() keeps prose rules at (0,1,1), so every component rule below wins over them */
:where(.rv).fc-read main :where(.fc-col) :where(p, li:not([class])) { font-size: 17px; line-height: 1.65; }
:where(.rv).fc-read main :where(.fc-col) :where(p:not([class])) { margin: 0 0 1em; max-width: 68ch; }
:where(.rv).fc-read main :where(.fc-col) :where(ul, ol):where(:not([class], [data-fc-spy], [data-rv-toc])) { padding-left: 1.3em; margin: 0 0 1.2em; max-width: 66ch; }
:where(.rv).fc-read main :where(.fc-col) :where(ul, ol):where(:not([class], [data-fc-spy], [data-rv-toc])) > li { margin: .35em 0; }
:where(.rv).fc-read main :where(.fc-col) li::marker { color: var(--muted); }
.rv.fc-read main .how-to-list-item p { margin: 0; font-size: 14px; line-height: 1.45; }
.rv.fc-read main .fc-h { margin: 0 0 20px; text-wrap: balance; }
.rv.fc-read main .fc-sec-3 { padding-top: 36px; }
.rv.fc-read main .fc-sec-3 .fc-h { font-size: 21px; }
.rv.fc-read main :is(.header-level-three, .fc-col h3:not([class])) { text-align: left; margin: 36px 0 12px; font-size: 21px; }
.rv.fc-read main .fc-col h4 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.rv.fc-read main .fc-col .cms-image { display: block; width: 100%; height: auto; margin: 28px 0 8px; }
.rv.fc-read main .fc-col .figure-caption { margin: 0 0 24px; }
.rv.fc-read main .fc-col code { font: 500 14px/1 var(--mono); background: var(--sunk); padding: 3px 6px; border-radius: 6px; }
.rv.fc-read main .fc-col table { width: 100%; margin: 20px 0 28px; font-size: 15px; border-collapse: collapse; }
.rv.fc-read main .fc-col :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rv.fc-read main .fc-col thead th { border-bottom: 1px solid var(--ink); font-weight: 700; }
.rv.fc-read .fc-intro { color: var(--ink-2); }
.rv.fc-read main .fc-quote {
  margin: 28px 0; padding: 4px 0 4px 22px; border-left: 1px solid var(--ink);
  font-size: 21px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; color: var(--ink); max-width: 60ch;
}
.rv.fc-read main .fc-quote p { font-size: inherit; line-height: inherit; margin: 0; }
.rv.fc-read .fc-rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.rv.fc-read .fc-outro-mark { display: block; margin: 0 0 64px; }

/* in-body calls to action */
.rv.fc-read .fc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 24px 0 28px; }
.rv.fc-read main .fc-cta .rv-btn-primary, .rv.fc-read main .fc-pick-cta .rv-btn-primary { color: var(--accent-ink); }

/* header with a note (header_note) */
.rv.fc-read .fc-hnote {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 36px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.rv.fc-read main .fc-hnote h3 { margin: 0; }
.rv.fc-read .fc-hnote .num { font-size: 14px; color: var(--muted); }

/* pretty list: ruled and numbered */
.rv.fc-read .fc-plist { list-style: none; counter-reset: p; padding: 0; margin: 20px 0 28px; border-top: 1px solid var(--line); max-width: 68ch; }
.rv.fc-read main .fc-plist li { counter-increment: p; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 14px 0; margin: 0; border-bottom: 1px solid var(--line); }
.rv.fc-read .fc-plist li::before { content: counter(p, decimal-leading-zero); grid-row: 1 / 3; font: 500 12px/2.1 var(--mono); color: var(--muted); }
.rv.fc-read .fc-plist li > * { grid-column: 2; }
.rv.fc-read .fc-plist b { display: block; font-size: 17px; color: var(--ink); }
/* on ranked guides numerals mean rank: pretty lists are ruled items only */
.rv.fc-read main .fc-plist-plain li { grid-template-columns: minmax(0, 1fr); }
.rv.fc-read .fc-plist-plain li::before { content: none; }
.rv.fc-read .fc-plist-plain li > * { grid-column: 1; }
.rv.fc-read main .fc-plist span { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* small pros & cons */
.rv.fc-read .fc-pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 28px; margin: 22px 0 26px; }
.rv.fc-read .fc-pc ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.rv.fc-read main .fc-pc li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.rv.fc-read .fc-pc li::before { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 14px/1 var(--mono); }
.rv.fc-read .fc-pc .p li::before { content: "+"; background: var(--pos-soft); color: var(--pos); }
.rv.fc-read .fc-pc .c li::before { content: "–"; background: var(--neg-soft); color: var(--neg); }
.rv.fc-read .fc-pc .p .eyebrow { color: var(--pos); }
.rv.fc-read .fc-pc .c .eyebrow { color: var(--neg); }

/* risk warning (investments disclaimer) as a take */
.rv.fc-read .fc-warn .tag { color: var(--warn); background: transparent; border: 1px solid currentColor; }

/* also-read page card */
.rv.fc-read main a.fc-pcard {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: center; margin: 28px 0;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink);
  text-decoration: none; max-width: var(--measure);
}
.rv.fc-read main a.fc-pcard:hover { border-color: var(--ink); color: var(--ink); }
.rv.fc-read .fc-pcard img { width: 160px; height: 104px; object-fit: cover; border-radius: 10px; background: var(--sunk); }
.rv.fc-read .fc-pcard b { display: block; font-size: 17px; line-height: 1.3; }
.rv.fc-read .fc-pcard-t { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rv.fc-read .fc-pcard .ref { display: block; margin-top: 10px; }
.rv.fc-read .fc-promo img { object-fit: contain; background: transparent; }

/* ---------- picks: chapter head (guide) and ranking row (plain article) ---------- */
.rv.fc-read .fc-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px); gap: 18px 28px; align-items: center;
  margin: 20px 0; padding: 20px 22px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  overflow: hidden;
}
.rv.fc-read .fc-pick-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rv.fc-read .fc-pick-id img { flex: none; width: 96px; max-width: none; height: 48px; object-fit: contain; object-position: left center; }
.rv.fc-read .fc-pick-name { display: block; font-size: 19px; line-height: 1.2; color: var(--ink); }
.rv.fc-read main .fc-pick p.fc-pick-for { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
.rv.fc-read .fc-pick-score { align-self: center; }
.rv.fc-read .fc-pick-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin: 0; padding: 14px 0 16px; border-top: 1px solid var(--line); row-gap: 12px; }
.rv.fc-read .fc-pick-facts div { padding: 0 18px; border-left: 1px solid var(--line); min-width: 0; }
.rv.fc-read .fc-pick-facts div:first-child { padding-left: 0; border-left: 0; }
.rv.fc-read .fc-pick-facts dt { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.rv.fc-read .fc-pick-facts dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.rv.fc-read .fc-pick-facts dd.num { font: 600 15px/1.25 var(--mono); letter-spacing: -.01em; }
.rv.fc-read .fc-pick-cta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 -22px; padding: 16px 22px 18px; background: var(--sunk); border-top: 1px solid var(--line);
}
/* a ranked heading without an affiliate card: name (+ note) only */
.rv.fc-read .fc-pick:not(:has(.fc-pick-cta)) { padding-bottom: 0; }
.rv.fc-read .fc-pick:not(:has(.fc-pick-cta, .fc-pick-facts)) { padding-bottom: 20px; }

/* chapter head: the reader's summary of the pick, bigger name and score */
.rv.fc-read .fc-pick-ch { margin: 0; padding: 24px 26px 0; }
.rv.fc-read .fc-pick-ch .fc-pick-cta { margin: 0 -26px; padding-inline: 26px; }
.rv.fc-read .fc-pick-ch .fc-pick-id img { width: 112px; height: 56px; }
.rv.fc-read main .fc-pick-ch h3 { margin: 0; font-size: clamp(28px, 2.6vw, 34px); font-weight: 750; line-height: 1.05; letter-spacing: -.03em; }
.rv.fc-read .fc-pick-ch .fc-pick-score .num { font: 600 30px/1 var(--mono); letter-spacing: -.04em; }
.rv.fc-read .fc-pick-ch .fc-pick-score .num .ref { font-size: 11px; letter-spacing: 0; }
.rv.fc-read .fc-pick-ch .fc-pick-score i { height: 10px; }
@media (max-width: 640px) {
  .rv.fc-read .fc-pick, .rv.fc-read .fc-pick-ch { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 0; gap: 14px; }
  .rv.fc-read .fc-pick-cta, .rv.fc-read .fc-pick-ch .fc-pick-cta { margin: 0 -18px; padding: 14px 18px 16px; }
  .rv.fc-read .fc-pick-id { align-items: flex-start; }
  .rv.fc-read .fc-pick-id img, .rv.fc-read .fc-pick-ch .fc-pick-id img { width: 72px; height: 40px; }
  .rv.fc-read .fc-pick-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .rv.fc-read .fc-pick-facts div, .rv.fc-read .fc-pick-facts div:first-child { padding: 0; border-left: 0; }
  .rv.fc-read .fc-pick-cta .rv-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- ranked guide: the answer (at rest), pinned strip (read.js), lead-in, countdown chapters ---------- */
/* at rest: the answer right under the byline, one ruled row per pick, #1 on ink (Ink Inversion Rule) */
.rv.fc-read .fc-rank-wrap { margin: 0 0 8px; }
.rv.fc-read main .fc-jump-h { margin: 0 0 10px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv.fc-read .fc-jump ol { list-style: none; margin: 0; padding: 0; border-block: 1px solid var(--ink); }
.rv.fc-read .fc-rk {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 170px auto; grid-template-areas: "a for bar cta";
  align-items: center; gap: 8px 28px; margin: 0; padding: 14px 18px 14px 0;
}
.rv.fc-read .fc-rk + .fc-rk { border-top: 1px solid var(--line); }
.rv.fc-read main .fc-rk-a { grid-area: a; display: flex; align-items: center; gap: 16px; min-width: 0; color: var(--ink); text-decoration: none; }
.rv.fc-read main .fc-rk-a:hover .n { color: var(--accent); }
.rv.fc-read .fc-rk .r { display: inline-block; flex: none; min-width: 2.3ch; font: 600 48px/.9 var(--mono); letter-spacing: -.04em; font-feature-settings: "tnum"; }
.rv.fc-read .fc-rk .r.lz::first-letter { color: var(--line-2); }
.rv.fc-read .fc-rk .lg { flex: none; width: 88px; max-width: none; height: 40px; object-fit: contain; object-position: left center; }
.rv.fc-read .fc-rk .n { font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: break-word; min-width: 0; }
/* at rest the score reads from the bar; the link keeps it for screen readers */
.rv.fc-read .fc-jump:not(.is-stuck) .fc-rk .s {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.rv.fc-read main .fc-rk-for { grid-area: for; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.rv.fc-read .fc-rk-bar { grid-area: bar; }
.rv.fc-read .fc-rk-cta { grid-area: cta; display: grid; gap: 6px; justify-items: start; }
.rv.fc-read main .fc-rk-cta .rv-btn-primary { color: var(--accent-ink); }
.rv.fc-read .fc-rk.top { background: var(--ink); color: var(--paper); padding-left: 18px; border-radius: var(--r); border-top-color: transparent; }
.rv.fc-read .fc-rk.top + .fc-rk { border-top-color: transparent; }
.rv.fc-read main .fc-rk.top .fc-rk-a, .rv.fc-read .fc-rk.top .rv-sbar .num { color: var(--paper); }
.rv.fc-read .fc-rk.top .r.lz::first-letter { color: color-mix(in srgb, var(--paper) 40%, transparent); }
.rv.fc-read main .fc-rk.top .fc-rk-for, .rv.fc-read .fc-rk.top .ref { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.rv.fc-read .fc-rk.top .rv-sbar i { background: color-mix(in srgb, var(--paper) 22%, transparent); }
.rv.fc-read .fc-rk.top .rv-sbar i b { background: var(--paper); }
.rv.fc-read .fc-rk.top .lg { background: #fbfaf6; border-radius: 6px; padding: 4px 8px; box-sizing: border-box; }  /* light tile in both themes: dark wordmarks vanish on the ink row */
.rv.fc-read main .fc-rk .rv-btn-ink, .rv.fc-read main .fc-rk .rv-btn-ink:hover { background: var(--paper); color: var(--ink); }
.rv.fc-read main .fc-rk-a:focus-visible { outline-offset: 4px; }
.rv.fc-read .fc-rk.top :is(.fc-rk-a, .rv-btn):focus-visible { outline-color: var(--paper); }
@media (max-width: 1100px) {
  .rv.fc-read .fc-rk { grid-template-columns: minmax(0, 1fr) 160px auto; grid-template-areas: "a bar cta" "for for cta"; }
}
@media (max-width: 640px) {
  .rv.fc-read .fc-rk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "for" "bar" "cta"; padding: 16px 0; gap: 10px; }
  .rv.fc-read .fc-rk.top { padding-inline: 16px; }
  .rv.fc-read .fc-rk .r { font-size: 30px; }
  .rv.fc-read .fc-rk .lg { width: 72px; height: 32px; }
  .rv.fc-read .fc-rk-cta { justify-items: stretch; }
  .rv.fc-read .fc-rk-cta .rv-btn { justify-content: center; }
}

/* pinned: read.js sets .is-stuck (position fixed; left/width from the wrapper) once the answer has scrolled
   away; the wrapper keeps the answer's height so nothing jumps. Pinned, only the links remain (CTAs hidden,
   not duplicated); without JS the answer simply stays in the flow. */
.rv.fc-read .fc-jump.is-stuck {
  position: fixed; top: var(--hdr); z-index: 20;
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink); animation: fc-pin .2s cubic-bezier(.2, .7, .2, 1);
}
@keyframes fc-pin { from { transform: translateY(-100%); opacity: 0; } }
.rv.fc-read .fc-jump.is-stuck :is(.fc-jump-h, .fc-rk-for, .fc-rk-bar, .fc-rk-cta, .lg) { display: none; }
.rv.fc-read .fc-jump.is-stuck ol { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border: 0; }
.rv.fc-read .fc-jump.is-stuck .fc-rk { display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); }
.rv.fc-read .fc-jump.is-stuck .fc-rk + .fc-rk { border-left: 1px solid var(--line); }
.rv.fc-read main .fc-jump.is-stuck .fc-rk-a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; min-height: var(--jb);
  padding: 0 16px; color: var(--ink); transition: background .15s;
}
.rv.fc-read main .fc-jump.is-stuck:not(.is-ranked) .fc-rk-a { grid-template-columns: minmax(0, 1fr) auto; }
.rv.fc-read main .fc-jump.is-stuck .fc-rk-a:hover { background: var(--card); }
.rv.fc-read main .fc-jump.is-stuck .fc-rk-a:hover .n { color: var(--ink); }
.rv.fc-read main .fc-jump.is-stuck .fc-rk-a:focus-visible { outline-offset: -3px; outline-color: var(--accent); }
.rv.fc-read .fc-jump.is-stuck .r { font: 600 12px/1 var(--mono); min-width: 0; color: var(--muted); }
.rv.fc-read .fc-jump.is-stuck .r.lz::first-letter { color: inherit; }
.rv.fc-read .fc-jump.is-stuck .n { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.rv.fc-read .fc-jump.is-stuck .s { font: 600 15px/1 var(--mono); letter-spacing: -.02em; }
.rv.fc-read main .fc-jump.is-stuck a[aria-current] { background: var(--card); box-shadow: inset 0 -2px 0 var(--accent); }
.rv.fc-read .fc-jump.is-stuck a[aria-current] .r { color: var(--accent); }

.rv.fc-read .fc-flow { padding: 0 0 56px; }
.rv.fc-read .fc-row { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gap); }
.rv.fc-read .fc-row > :not(.fc-ch-rank) { grid-column: 2; }
.rv.fc-read .fc-gsec { padding-top: 44px; }
.rv.fc-read .fc-gsec + .fc-gsec > .fc-col, .rv.fc-read .fc-after > .fc-col { border-top: 1px solid var(--line); padding-top: 44px; }
.rv.fc-read .fc-countdown > .fc-gsec > .fc-col { border-top: 0; }
.rv.fc-read .fc-countdown { padding-bottom: 12px; }

.rv.fc-read .fc-ch { padding: 48px 0 8px; margin-top: 40px; border-top: 1px solid var(--ink); }
.rv.fc-read .fc-countdown > .fc-gsec + .fc-ch { margin-top: 24px; }
.rv.fc-read .fc-ch-rank { position: sticky; top: calc(var(--hdr) + var(--jb) + 24px); align-self: start; }
.rv.fc-read .fc-num {
  display: block; font: 600 96px/.82 var(--mono); letter-spacing: -.04em; font-feature-settings: "tnum";
  color: var(--ink); margin-top: 4px;
}
.rv.fc-read .fc-num.lz::first-letter { color: var(--line-2); }
.rv.fc-read .fc-ch-body { min-width: 0; }
.rv.fc-read .fc-fig { margin: 18px 0 0; }
.rv.fc-read .fc-fig img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r); margin: 0; }
.rv.fc-read .fc-fig .carousel { margin: 0 !important; padding: 0 !important; }
.rv.fc-read .fc-prose { padding-top: 26px; }

@media (max-width: 980px) {
  html:has(body.rv.fc-guide) { scroll-padding-top: calc(48px + 52px + 16px); }
  html:has(body.rv.fc-guide .fc-jump ol.few) { scroll-padding-top: calc(48px + 90px + 16px); }
  .rv.fc-read { --jb: 52px; }
  .rv.fc-read:has(.fc-jump ol.few) { --jb: 90px; }
  .rv.fc-read main .fc-jump.is-stuck .fc-rk-a { padding: 0 12px; gap: 8px; }
  /* up to four picks: a 2x2 grid, all of them visible */
  .rv.fc-read .fc-jump.is-stuck ol.few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv.fc-read main .fc-jump.is-stuck ol.few .fc-rk-a { min-height: 44px; }
  .rv.fc-read .fc-jump.is-stuck ol.few .fc-rk:nth-child(odd) { border-left: 0; }
  .rv.fc-read .fc-jump.is-stuck ol.few .fc-rk:nth-child(n+3) { border-top: 1px solid var(--line); }
  /* more picks: a snapping scroller, faded on the edge that still has picks behind it (read.js toggles .more) */
  .rv.fc-read .fc-jump.is-stuck ol:not(.few) {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .rv.fc-read .fc-jump.is-stuck ol:not(.few)::-webkit-scrollbar { display: none; }
  .rv.fc-read .fc-jump.is-stuck ol:not(.few) .fc-rk { flex: 0 0 auto; scroll-snap-align: start; }
  .rv.fc-read .fc-jump.is-stuck ol:not(.few) .n { max-width: 14ch; }
  .rv.fc-read .fc-jump.is-stuck ol.more { mask-image: linear-gradient(to right, var(--ink) calc(100% - 56px), transparent);  /* alpha only */ }
  .rv.fc-read .fc-row { grid-template-columns: minmax(0, 1fr); }
  .rv.fc-read .fc-row > :not(.fc-ch-rank) { grid-column: 1; }
  .rv.fc-read .fc-ch { padding-top: 32px; margin-top: 32px; }
  .rv.fc-read .fc-ch-rank { position: static; margin-bottom: 16px; }
  .rv.fc-read .fc-num { font-size: 64px; }
  .rv.fc-read .fc-gsec { padding-top: 32px; }
  .rv.fc-read .fc-gsec + .fc-gsec > .fc-col, .rv.fc-read .fc-after > .fc-col { padding-top: 32px; }
}

/* ---------- more guides + also-read strip ---------- */
.rv.fc-read .fc-more h2, .rv.fc-read .fc-also h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0; }
.rv.fc-read .fc-also { margin: 40px 0 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.rv.fc-read .fc-also ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--ink); }
.rv.fc-read .fc-also li + li { border-left: 1px solid var(--line); }
.rv.fc-read main .fc-also a { display: grid; gap: 6px; height: 100%; padding: 18px 20px 20px; color: var(--ink); text-decoration: none; transition: background .15s; }
.rv.fc-read .fc-also li:first-child a { padding-left: 0; }
.rv.fc-read main .fc-also a:hover { background: var(--card); color: var(--ink); }
.rv.fc-read main .fc-also a:hover b { color: var(--accent); }
.rv.fc-read .fc-also b { font-size: 17px; line-height: 1.25; }
.rv.fc-read .fc-also a > span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 760px) {
  .rv.fc-read .fc-also ul { grid-template-columns: minmax(0, 1fr); }
  .rv.fc-read .fc-also li + li { border-left: 0; border-top: 1px solid var(--line); }
  .rv.fc-read main .fc-also a, .rv.fc-read .fc-also li:first-child a { padding: 16px 0; }
}

/* ---------- glossary: A-Z bar + terms ---------- */
.rv.fc-read .fc-az {
  position: sticky; top: var(--hdr); z-index: 20; margin: 0 0 8px;
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-block: 1px solid var(--ink);
}
.rv.fc-read .fc-az ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); }
.rv.fc-read .fc-az li { display: grid; place-items: center; min-height: var(--az); margin: 0; font: 500 14px/1 var(--mono); color: var(--muted); }
.rv.fc-read main .fc-az a { display: grid; place-items: center; width: 100%; height: 100%; min-height: var(--az); font-weight: 600; color: var(--ink); text-decoration: none; }
.rv.fc-read main .fc-az a:hover { background: var(--card); color: var(--accent); }
.rv.fc-read main .fc-az a:focus-visible { outline-offset: -3px; }
.rv.fc-read main .fc-az a[aria-current] { background: var(--ink); color: var(--paper); }
.rv.fc-read .fc-letter { padding-top: 12px; }
.rv.fc-read main .fc-letter-h { font: 800 44px/1 var(--sans); letter-spacing: -.04em; margin: 24px 0 4px; }
.rv.fc-read .fc-gl { margin: 0; }
.rv.fc-read .fc-gl > div { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.rv.fc-read .fc-gl dt { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.rv.fc-read .fc-gl dd { margin: 4px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
.rv.fc-read .fc-terms { padding-bottom: 8px; }
@media (max-width: 760px) {
  .rv.fc-read .fc-az { margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut); }
  .rv.fc-read .fc-az ol { display: flex; overflow-x: auto; scrollbar-width: none; }
  .rv.fc-read .fc-az ol::-webkit-scrollbar { display: none; }
  .rv.fc-read .fc-az li { flex: 0 0 34px; }
  .rv.fc-read .fc-az li.off { display: none; }
  .rv.fc-read .fc-az li:not(.off) { flex-basis: 44px; }
}

/* ---------- news: body + aside ---------- */
.rv.fc-read .fc-news-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); padding: 40px 0 24px; align-items: start; }
.rv.fc-read .fc-news-grid .rv-article { max-width: var(--measure); }
.rv.fc-read main .fc-source { font-size: 15px; color: var(--muted); margin-top: 24px; }
.rv.fc-read .fc-aside { position: sticky; top: calc(var(--hdr) + 24px); }
.rv.fc-read main .fc-aside h2.eyebrow { display: block; font: 600 12px/1 var(--mono); letter-spacing: .08em; margin: 28px 0 8px; color: var(--muted); }
.rv.fc-read main .fc-aside h2.eyebrow:first-child { margin-top: 0; }
.rv.fc-read .fc-aside ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rv.fc-read .fc-aside li { border-bottom: 1px solid var(--line); }
.rv.fc-read main .fc-aside-list a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.3; }
.rv.fc-read main .fc-aside-list a:hover span { color: var(--accent); }
.rv.fc-read .fc-aside-list img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--sunk); }
.rv.fc-read .fc-aside-logos img { object-fit: contain; background: transparent; }
.rv.fc-read main .fc-aside-links a { display: block; padding: 10px 0; font-size: 14px; }
.rv.fc-news .fc-more .rv-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv.fc-news .fc-more { margin-bottom: 72px; }
@media (max-width: 900px) {
  .rv.fc-read .fc-news-grid { grid-template-columns: minmax(0, 1fr); }
  .rv.fc-read .fc-aside { position: static; }
  .rv.fc-news .fc-more .rv-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- contacts ---------- */
.rv.fc-read .fc-channels { list-style: none; padding: 0; margin: 28px 0 32px; border-top: 1px solid var(--ink); }
.rv.fc-read main .fc-channels li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rv.fc-read main .fc-channels h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.rv.fc-read main .fc-channels p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.rv.fc-read main .fc-channels .rv-btn-primary { color: var(--accent-ink); }
.rv.fc-read main .fc-legal { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---------- about & partners ---------- */
.rv.fc-read .fc-about-grid { border-top: 1px solid var(--ink); }
.rv.fc-read .fc-about-grid > div {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 10px var(--gap); align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.rv.fc-read .fc-about-grid > div > :not(h3) { grid-column: 2; }
.rv.fc-read .fc-about-grid > div:last-child { border-bottom: 0; }
.rv.fc-read main .fc-about-grid h3 { grid-row: 1 / span 3; align-self: start; margin: 0; font-size: 21px; letter-spacing: -.02em; }
.rv.fc-read main .fc-about-grid p { margin: 0; color: var(--ink-2); }
.rv.fc-read .fc-about-grid .rv-btn { justify-self: start; margin-top: 8px; }
.rv.fc-read .fc-impressum { margin-top: 8px; }
.rv.fc-read .fc-impressum summary {
  display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.15em; border: 1px solid var(--line-2); border-radius: 999px;
  font: 600 15px/1 var(--sans); color: var(--ink); cursor: pointer; list-style: none;
}
.rv.fc-read .fc-impressum summary::-webkit-details-marker { display: none; }
.rv.fc-read .fc-impressum summary::after { content: "+"; font: 500 17px/1 var(--mono); color: var(--muted); }
.rv.fc-read .fc-impressum[open] summary::after { content: "–"; }
.rv.fc-read .fc-impressum summary:hover { border-color: var(--ink); }
.rv.fc-read .fc-impressum dl { margin: 14px 0 0; border-top: 1px solid var(--line); font-size: 15px; }
.rv.fc-read .fc-impressum dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rv.fc-read .fc-impressum dt { font: 500 11px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rv.fc-read .fc-impressum dd { margin: 0; }
.rv.fc-read .fc-impressum dd.num { font-family: var(--mono); font-size: 14px; }
.rv.fc-read .fc-partners { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.rv.fc-read main .fc-partners li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: start; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.rv.fc-read .fc-partners img { width: 88px; height: 88px; object-fit: contain; border-radius: 10px; }
.rv.fc-read main .fc-partners h3 { margin: 0 0 6px; font-size: 18px; }
.rv.fc-read main .fc-partners h3 a { color: var(--ink); text-decoration: none; }
.rv.fc-read main .fc-partners h3 a:hover { color: var(--accent); text-decoration: underline; }
.rv.fc-read main .fc-partners p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.rv.fc-read .fc-partner-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin: 56px 0 0;
  padding: 28px; border-radius: var(--r); background: var(--ink); color: var(--paper);
}
.rv.fc-read main .fc-partner-cta h2 { margin: 0; color: var(--paper); font-size: clamp(28px, 3.4vw, 40px); }
.rv.fc-read main .fc-partner-cta .rv-btn { background: var(--paper); color: var(--ink); }
.rv.fc-read main .fc-credits { margin: 28px 0 72px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
  .rv.fc-read .fc-about-grid > div { grid-template-columns: minmax(0, 1fr); }
  .rv.fc-read .fc-about-grid > div > :not(h3) { grid-column: 1; }
  .rv.fc-read main .fc-about-grid h3 { grid-row: auto; }
  .rv.fc-read .fc-impressum dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- plain layout on narrow screens + touch targets ---------- */
@media (max-width: 980px) {
  .rv.fc-read .fc-single { padding-top: 24px; }
  .rv.fc-read .fc-pcard { grid-template-columns: 112px minmax(0, 1fr); }
  .rv.fc-read .fc-pcard img { width: 112px; height: 76px; }
}
@media (pointer: coarse) {
  .rv.fc-read .fc-channels .rv-btn, .rv.fc-read .fc-cta .rv-btn, .rv.fc-read .fc-pick-cta .rv-btn,
  .rv.fc-read .fc-about-grid .rv-btn, .rv.fc-read .fc-impressum summary, .rv.fc-read .fc-partner-cta .rv-btn { min-height: 44px; }
  .rv.fc-read main .fc-aside-links a { padding-block: 12px; }
  .rv.fc-read main .rv-dates a, .rv.fc-read main .rv-author a { display: inline-block; min-height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv.fc-read main :is(.fc-jump a, .fc-also a) { transition: none; }
  .rv.fc-read .fc-jump.is-stuck { animation: none; }
}

/* end-of-article referral disclosure on read pages (article_page.html, generic_home_page.html) */
.rv.fc-read .fc-disc-wrap { max-width: var(--measure); }