/* ══════════════════════════════════════════════════════════════════
   /field-report/ — the weekly broadcast, its editions and its data
   Brand Pack v1.0: editorial palette (cream paper, forest ink, ochre),
   Fraunces display, Lato body, JetBrains Mono eyebrows, 2px radius.
   Chart colours are the campaign hues, validated as a categorical set
   on cream (teal, ochre, berry, lime) and a single-hue forest ramp for
   evidence tiers. Every chart carries visible labels or a table.
   ══════════════════════════════════════════════════════════════════ */

.fr {
  --fr-reach: var(--teal, #2A9D8F);
  --fr-brief: var(--ochre, #B8762A);
  --fr-evidence: var(--berry, #8B2783);
  --fr-fresh: var(--lime, #9FB04F);
  --fr-farming: var(--teal, #2A9D8F);
  --fr-both: var(--ochre, #B8762A);
  --fr-nutrition: var(--berry, #8B2783);
  --fr-t1: #1F3A2B; --fr-t2: #3B634C; --fr-t3: #5E8169; --fr-t4: #8FA283; --fr-tnone: #D9D3C4;
  --fr-rule: rgba(31,58,43,0.16);
  --fr-ink: var(--forest-ink, #1F3A2B);
  --fr-body: var(--charcoal, #2A3020);
  --fr-mid: var(--text-mid, #4a5246);
  --fr-muted: var(--muted-tx, #5F6C57);
  --fr-paper: var(--cream-paper, #F6F2E9);
  --fr-paper-2: var(--cream-2, #EDE8DC);
  background: var(--fr-paper);
  color: var(--fr-body);
}
.fr *, .fr *::before, .fr *::after { box-sizing: border-box; }
.fr img { max-width: 100%; height: auto; }

/* ── Eyebrows, headings, prose ─────────────────────────────────────── */
.fr-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ochre-tx, #8F5A1F);
  margin: 0 0 12px;
}
.fr-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.18;
  color: var(--fr-ink);
  margin: 0 0 14px;
}
.fr-h2 em { color: var(--ochre, #B8762A); font-style: italic; }
.fr-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--fr-ink);
  margin: 0 0 8px;
}
.fr-lead { font-size: 1.08rem; line-height: 1.7; color: var(--fr-mid); max-width: 720px; margin: 0 0 18px; }
.fr-note { font-size: 0.88rem; line-height: 1.6; color: var(--fr-muted); }
.fr-note a, .fr-lead a, .fr-prose a { color: var(--teal-tx, #187364); text-decoration: underline; text-underline-offset: 3px; }
.fr-prose p { line-height: 1.75; margin: 0 0 14px; max-width: 760px; }

.fr-band { padding: 72px 16px; }
.fr-band--white { background: #fff; }
.fr-band--paper2 { background: var(--fr-paper-2); }
.fr-band--forest { background: var(--fr-ink); color: var(--fr-paper); }
.fr-band--forest .fr-h2, .fr-band--forest .fr-h3 { color: var(--fr-paper); }
.fr-band--forest .fr-eyebrow { color: #E3AF6C; }
.fr-band--forest .fr-lead { color: rgba(246,242,233,0.78); }
.fr-wrap { max-width: 1160px; margin: 0 auto; }
.fr-wrap--narrow { max-width: 860px; margin: 0 auto; }
@media (min-width: 768px) { .fr-band { padding: 88px 24px; } }

/* ── Hero ──────────────────────────────────────────────────────────── */
.fr-hero {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(184,118,42,0.22) 0%, rgba(184,118,42,0) 55%),
    linear-gradient(160deg, var(--soil, #1C1510) 0%, #22301f 55%, var(--fr-ink) 100%);
  color: var(--fr-paper);
  padding: 116px 16px 64px;
}
@media (min-width: 768px) { .fr-hero { padding: 136px 24px 84px; } }
.fr-hero__grid { max-width: 1160px; margin: 0 auto; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .fr-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: 56px; } }
.fr-hero__crumb { font-size: 0.8rem; color: rgba(246,242,233,0.7); margin: 0 0 18px; }
.fr-hero__crumb a { color: rgba(246,242,233,0.8); text-decoration: none; }
.fr-hero__crumb a:hover { color: #E3AF6C; }
.fr-hero__crumb span { opacity: 0.5; margin: 0 6px; }
.fr-hero .fr-eyebrow { color: #E3AF6C; }
.fr-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 20px;
}
.fr-hero__title em { color: #E3AF6C; font-style: italic; }
.fr-hero__sub { font-size: 1.1rem; line-height: 1.7; color: rgba(246,242,233,0.8); max-width: 640px; margin: 0 0 28px; }
.fr-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.fr-hero__actions .btn { white-space: normal; }
.fr-hero__art { position: relative; justify-self: center; width: 100%; max-width: 420px; }
.fr-hero__art img { display: block; width: 100%; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.fr-hero__art--wide { max-width: 560px; }
.fr-hero__meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(246,242,233,0.7);
}
.fr-hero__meta b { color: #fff; font-weight: 500; }

.btn--on-dark { background: transparent; color: var(--fr-paper); border-color: rgba(246,242,233,0.55); }
.btn--on-dark:hover { background: rgba(246,242,233,0.1); color: #fff; border-color: #fff; }

/* Where to watch, listen and read */
.fr-platforms { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.fr-platforms a, .fr-platforms span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 8px 14px; border-radius: 2px; font-size: 0.86rem; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(246,242,233,0.35); color: var(--fr-paper);
}
.fr-platforms a:hover { border-color: #E3AF6C; color: #fff; }
.fr-platforms span { opacity: 0.6; font-weight: 400; }
.fr-platforms svg { flex: 0 0 auto; }
.fr-platforms--light a, .fr-platforms--light span { color: var(--fr-ink); border-color: var(--fr-rule); background: #fff; }
.fr-platforms--light a:hover { border-color: var(--ochre, #B8762A); color: var(--fr-ink); }

/* ── Video (click to load: nothing is fetched from YouTube until play) */
.fr-video {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--soil, #1C1510); border-radius: 2px; border: 0; padding: 0; cursor: pointer;
  box-shadow: 0 24px 48px rgba(28,21,16,0.28);
}
.fr-video picture, .fr-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; background: var(--ochre-tx, #8F5A1F);
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: transform 0.2s, background 0.2s;
}
.fr-video:hover .fr-video__play, .fr-video:focus-visible .fr-video__play { transform: translate(-50%, -50%) scale(1.06); background: var(--ochre, #B8762A); }
.fr-video__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; text-align: left;
  background: linear-gradient(0deg, rgba(15,10,8,0.85), rgba(15,10,8,0));
  color: #fff; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.fr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fr-video:focus-visible { outline: 3px solid var(--ochre, #B8762A); outline-offset: 3px; }
.fr-video-consent { font-size: 0.8rem; color: var(--fr-muted); margin: 10px 0 0; }

/* ── Stat strip ───────────────────────────────────────────────────── */
.fr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--fr-rule); border: 1px solid var(--fr-rule); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .fr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fr-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fr-stats li { background: #fff; padding: 18px 18px 16px; }
.fr-stats b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.05; color: var(--fr-ink); }
.fr-stats span { display: block; margin-top: 6px; font-size: 0.82rem; line-height: 1.4; color: var(--fr-mid); }
.fr-stats small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-muted); }

/* ── The week in one line ─────────────────────────────────────────── */
.fr-weekline {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.4; color: var(--fr-ink);
  border-left: 4px solid var(--ochre, #B8762A); padding: 4px 0 4px 22px; margin: 0 0 22px; max-width: 900px;
}

/* ── Watch + listen layout on an edition page ─────────────────────── */
.fr-watch { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .fr-watch { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 44px; } }
.fr-aside { background: #fff; border: 1px solid var(--fr-rule); border-top: 4px solid var(--fr-ink); padding: 24px; }
.fr-aside h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; color: var(--fr-ink); margin: 0 0 14px; }
.fr-linklist { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--fr-rule); }
.fr-linklist li { border-bottom: 1px solid var(--fr-rule); }
.fr-linklist a, .fr-linklist span { display: flex; align-items: center; gap: 12px; padding: 12px 2px; min-height: 44px; color: var(--fr-ink); font-weight: 700; text-decoration: none; }
.fr-linklist a:hover { color: var(--ochre-tx, #8F5A1F); }
.fr-linklist span { color: var(--fr-muted); font-weight: 400; }
.fr-linklist small { margin-left: auto; font-weight: 400; color: var(--fr-muted); font-size: 0.8rem; }
.fr-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.9rem; }
.fr-facts dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-muted); padding-top: 3px; }
.fr-facts dd { margin: 0; color: var(--fr-body); }

/* ── Score: ten cells, coloured by the part that earned them ───────── */
.fr-score { display: inline-flex; align-items: center; gap: 10px; }
.fr-score__cells { display: inline-grid; grid-template-columns: repeat(10, 12px); gap: 2px; }
.fr-score__cells i { display: block; width: 12px; height: 14px; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--fr-rule); }
.fr-score__cells i.reach { background: var(--fr-reach); box-shadow: none; }
.fr-score__cells i.brief { background: var(--fr-brief); box-shadow: none; }
.fr-score__cells i.evidence { background: var(--fr-evidence); box-shadow: none; }
.fr-score__cells i.fresh { background: var(--fr-fresh); box-shadow: none; }
.fr-score__total { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; color: var(--fr-ink); }
.fr-score__total small { font-size: 0.8rem; font-weight: 400; color: var(--fr-muted); }
.fr-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 0.84rem; color: var(--fr-mid); }
.fr-key li { display: inline-flex; align-items: center; gap: 7px; }
.fr-key i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.fr-key .reach { background: var(--fr-reach); } .fr-key .brief { background: var(--fr-brief); }
.fr-key .evidence { background: var(--fr-evidence); } .fr-key .fresh { background: var(--fr-fresh); }
.fr-key .farming { background: var(--fr-farming); } .fr-key .both { background: var(--fr-both); } .fr-key .nutrition { background: var(--fr-nutrition); }

/* ── The running order ───────────────────────────────────────────── */
.fr-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.fr-topic {
  display: grid; grid-template-columns: 1fr; gap: 6px 22px;
  background: #fff; border: 1px solid var(--fr-rule); padding: 22px 18px 20px; position: relative;
}
@media (min-width: 720px) { .fr-topic { grid-template-columns: 72px minmax(0, 1fr); padding: 28px 28px 24px 22px; } }
.fr-topic__n {
  font-family: var(--font-serif); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--ochre, #B8762A);
}
.fr-topic__n small { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fr-muted); margin-top: 6px; }
.fr-topic--wild { border-top: 4px solid var(--berry, #8B2783); }
.fr-topic--wild .fr-topic__n { color: var(--berry, #8B2783); font-size: 2rem; }
.fr-topic--finally { border-top: 4px solid var(--fr-ink); background: var(--fr-paper-2); }
.fr-topic--finally .fr-topic__n { color: var(--fr-ink); font-size: 2rem; }
.fr-topic h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.22; color: var(--fr-ink); margin: 0 0 10px; }
.fr-topic__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 14px; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fr-chips li {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px; background: var(--fr-paper); color: var(--fr-mid); border: 1px solid var(--fr-rule);
}
.fr-chips li.is-trend { background: var(--fr-ink); color: var(--fr-paper); border-color: var(--fr-ink); }
.fr-chips li.is-bridge { color: var(--ochre-tx, #8F5A1F); border-color: rgba(184,118,42,0.45); }
.fr-chips li.is-warn { color: #7a3b16; border-color: rgba(122,59,22,0.35); background: #fbf1e6; }
.fr-topic__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre-tx, #8F5A1F); margin: 14px 0 4px; }
.fr-topic p { margin: 0; line-height: 1.7; color: var(--fr-body); }
.fr-topic blockquote {
  margin: 16px 0 4px; padding: 2px 0 2px 16px; border-left: 3px solid var(--ochre, #B8762A);
  font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; line-height: 1.55; color: var(--fr-ink);
}
.fr-topic cite { display: block; font-style: normal; font-size: 0.86rem; color: var(--fr-mid); margin: 4px 0 0 19px; }
.fr-topic cite em { color: var(--ochre-tx, #8F5A1F); font-style: normal; }
.fr-topic__foot { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fr-rule); font-size: 0.86rem; color: var(--fr-mid); }
.fr-topic__foot strong { color: var(--fr-ink); }
.fr-topic__watch { color: var(--teal-tx, #187364); font-weight: 700; text-decoration: none; white-space: nowrap; }
.fr-topic__watch:hover { text-decoration: underline; }

/* ── Prediction scorecard ─────────────────────────────────────────── */
.fr-predict { display: grid; gap: 22px; }
@media (min-width: 900px) { .fr-predict { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.fr-card { background: #fff; border: 1px solid var(--fr-rule); padding: 22px; }
.fr-card--ink { background: var(--fr-ink); color: var(--fr-paper); border-color: var(--fr-ink); }
.fr-card--ink .fr-h3 { color: var(--fr-paper); }
.fr-card--ink .fr-eyebrow { color: #E3AF6C; }
.fr-card--ink .fr-note { color: rgba(246,242,233,0.72); }
.fr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fr-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.fr-table th { text-align: left; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--fr-rule); }
.fr-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--fr-rule); vertical-align: top; line-height: 1.45; }
.fr-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-hit { color: var(--teal-tx, #187364); font-weight: 700; white-space: nowrap; }
.fr-miss { color: #8a3a1a; font-weight: 700; white-space: nowrap; }
.fr-next { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: nx; }
.fr-next li { counter-increment: nx; display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(246,242,233,0.18); font-family: var(--font-serif); font-size: 1.15rem; }
.fr-next li::before { content: counter(nx); font-family: var(--font-mono); font-size: 0.8rem; color: #E3AF6C; }
.fr-next li small { margin-left: auto; font-family: var(--font-sans); font-size: 0.8rem; color: rgba(246,242,233,0.7); white-space: nowrap; }
.fr-big { font-family: var(--font-serif); font-size: 3rem; line-height: 1; color: var(--fr-ink); }
.fr-card--ink .fr-big { color: #fff; }

/* ── Chapters and sources ─────────────────────────────────────────── */
.fr-chapters { columns: 1; column-gap: 40px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .fr-chapters { columns: 2; } }
.fr-chapters li { break-inside: avoid; display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--fr-rule); font-size: 0.92rem; }
.fr-chapters a { font-family: var(--font-mono); font-size: 0.8rem; color: var(--teal-tx, #187364); text-decoration: none; min-width: 48px; }
.fr-chapters a:hover { text-decoration: underline; }
.fr-sources { list-style: none; margin: 0; padding: 0; counter-reset: src; display: grid; gap: 0; }
@media (min-width: 900px) { .fr-sources { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.fr-sources li { counter-increment: src; position: relative; padding: 14px 0 14px 38px; border-bottom: 1px solid var(--fr-rule); }
.fr-sources li::before { content: counter(src); position: absolute; left: 0; top: 15px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ochre-tx, #8F5A1F); }
.fr-sources a { font-weight: 700; color: var(--fr-ink); text-decoration: underline; text-decoration-color: rgba(31,58,43,0.3); text-underline-offset: 3px; }
.fr-sources a:hover { color: var(--ochre-tx, #8F5A1F); }
.fr-sources p { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--fr-mid); }
.fr-sources p.in { color: var(--fr-body); }
.fr-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 0.78rem; color: var(--fr-muted); }

/* ── Edition cards (the series archive) ───────────────────────────── */
.fr-editions { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.fr-edition { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fr-rule); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; }
a.fr-edition:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(31,58,43,0.12); }
.fr-edition img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fr-edition__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fr-edition__week { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre-tx, #8F5A1F); }
.fr-edition__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--fr-ink); margin: 0; }
.fr-edition__line { font-size: 0.9rem; line-height: 1.55; color: var(--fr-mid); margin: 0; }
.fr-edition__meta { margin-top: auto; padding-top: 10px; font-size: 0.8rem; color: var(--fr-muted); }
.fr-edition--next { background: transparent; border-style: dashed; border-color: rgba(31,58,43,0.3); }
.fr-edition--next .fr-edition__body { justify-content: center; }

/* ── Latest edition feature ───────────────────────────────────────── */
.fr-latest { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .fr-latest { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; } }
.fr-mini-order { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--fr-rule); }
.fr-mini-order li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--fr-rule); font-size: 0.95rem; }
.fr-mini-order b { font-family: var(--font-serif); font-weight: 500; color: var(--ochre, #B8762A); }
.fr-mini-order span { color: var(--fr-ink); }
.fr-mini-order small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fr-muted); white-space: nowrap; }
.fr-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fr-actions .btn { white-space: normal; }

/* ── How it works ─────────────────────────────────────────────────── */
.fr-steps { display: grid; gap: 1px; background: rgba(246,242,233,0.16); grid-template-columns: 1fr; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: st; }
@media (min-width: 720px) { .fr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .fr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fr-steps li { counter-increment: st; background: var(--fr-ink); padding: 24px 22px 26px; }
.fr-steps li::before { content: '0' counter(st); display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; color: #E3AF6C; margin-bottom: 14px; }
.fr-steps h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; color: #fff; margin: 0 0 8px; }
.fr-steps p { margin: 0; font-size: 0.93rem; line-height: 1.65; color: rgba(246,242,233,0.78); }
.fr-format { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin: 26px 0 0; padding: 0; list-style: none; }
.fr-format li { border-top: 2px solid #E3AF6C; padding-top: 12px; color: rgba(246,242,233,0.82); font-size: 0.92rem; line-height: 1.55; }
.fr-format b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; color: #fff; margin-bottom: 4px; }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.fr-faq { max-width: 820px; }
.fr-faq details { border-bottom: 1px solid var(--fr-rule); padding: 4px 0; }
.fr-faq summary { cursor: pointer; list-style: none; padding: 14px 32px 14px 0; position: relative; font-weight: 700; color: var(--fr-ink); font-size: 1.02rem; }
.fr-faq summary::-webkit-details-marker { display: none; }
.fr-faq summary::after { content: '+'; position: absolute; right: 4px; top: 10px; font-size: 1.4rem; color: var(--ochre, #B8762A); }
.fr-faq details[open] summary::after { content: '–'; }
.fr-faq p { margin: 0 0 16px; line-height: 1.7; color: var(--fr-mid); }

/* ── Edition prev / next ──────────────────────────────────────────── */
.fr-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 8px; }
.fr-pager a { color: var(--fr-ink); font-weight: 700; text-decoration: none; }
.fr-pager a:hover { color: var(--ochre-tx, #8F5A1F); }

/* ══════════════════════════════════════════════════════════════════
   Dashboard
   ══════════════════════════════════════════════════════════════════ */
.frd-controls { position: sticky; top: 64px; z-index: 20; background: rgba(246,242,233,0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--fr-rule); padding: 10px 16px; }
.frd-controls__inner { max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.frd-controls label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-muted); }
.frd-controls select { font: inherit; font-size: 0.95rem; padding: 8px 34px 8px 12px; min-height: 40px; border: 1px solid var(--fr-rule); border-radius: 2px; background: #fff; color: var(--fr-ink); }
.frd-jump { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; }
.frd-jump a { color: var(--fr-mid); text-decoration: none; }
.frd-jump a:hover { color: var(--ochre-tx, #8F5A1F); }
@media (max-width: 720px) { .frd-jump { display: none; } .frd-controls { top: 56px; } }
.frd-edition-link { margin-left: auto; font-weight: 700; color: var(--teal-tx, #187364); text-decoration: none; font-size: 0.9rem; }
.frd-edition-link:hover { text-decoration: underline; }

.frd-panel { padding: 56px 16px; border-bottom: 1px solid var(--fr-rule); scroll-margin-top: 130px; }
.frd-panel:nth-of-type(even) { background: #fff; }
@media (min-width: 768px) { .frd-panel { padding: 72px 24px; } }
.frd-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 30px; align-items: end; margin-bottom: 26px; }
.frd-panel__head .fr-lead { margin: 0; }
.frd-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .frd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.frd-multiples { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.frd-mult { background: var(--fr-paper); border: 1px solid var(--fr-rule); padding: 16px 16px 10px; }
.frd-panel:nth-of-type(odd) .frd-mult { background: #fff; }
.frd-mult h3 { font-family: var(--font-sans); font-weight: 700; font-size: 0.98rem; line-height: 1.3; color: var(--fr-ink); margin: 0 0 4px; }
.frd-mult p { margin: 0 0 6px; font-size: 0.82rem; color: var(--fr-mid); }
.frd-mult .flag { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre-tx, #8F5A1F); margin-bottom: 4px; }
.frd-chart { display: block; width: 100%; height: auto; overflow: visible; }
.frd-chart text { font-family: Lato, Arial, sans-serif; }
.frd-chart .hit { fill: transparent; cursor: default; }
.frd-chart .hit:hover + .mark, .frd-chart .mark:hover { opacity: 0.85; }
.frd-tip {
  position: fixed; z-index: 100; pointer-events: none; background: var(--fr-ink); color: var(--fr-paper);
  padding: 8px 10px; border-radius: 2px; font-size: 0.82rem; line-height: 1.4; max-width: 280px; box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  opacity: 0; transition: opacity 0.12s;
}
.frd-tip.on { opacity: 1; }
.frd-tip b { display: block; font-size: 1rem; color: #fff; }

.frd-split { display: flex; width: 100%; height: 38px; gap: 2px; margin: 8px 0 10px; }
.frd-split > div { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.86rem; border-radius: 2px; min-width: 34px; }
.frd-lists { display: grid; gap: 22px; margin-top: 18px; }
@media (min-width: 760px) { .frd-lists { grid-template-columns: 1fr 1fr; } }
.frd-lists h3 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; color: var(--fr-ink); margin: 0 0 8px; }
.frd-rows { list-style: none; margin: 0; padding: 0; }
.frd-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--fr-rule); font-size: 0.92rem; }
.frd-rows li small { color: var(--fr-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.frd-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; padding: 0; list-style: none; }
.frd-words li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 2px; background: #fff; border: 1px solid var(--fr-rule); font-size: 0.95rem; color: var(--fr-ink); }
.frd-panel:nth-of-type(even) .frd-words li { background: var(--fr-paper); }
.frd-words li small { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fr-muted); }
.frd-words--rising li { border-color: rgba(42,157,143,0.5); }
.frd-words--new li { border-color: rgba(184,118,42,0.55); }
.frd-words--fading li { color: var(--fr-muted); border-style: dashed; }

.frd-sources { columns: 1; column-gap: 32px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .frd-sources { columns: 2; } }
@media (min-width: 1000px) { .frd-sources { columns: 3; } }
.frd-sources li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--fr-rule); font-size: 0.9rem; color: var(--fr-ink); }
.frd-sources li small { display: block; font-size: 0.76rem; color: var(--fr-muted); }

.frd-empty { padding: 18px; border: 1px dashed rgba(31,58,43,0.3); color: var(--fr-muted); font-size: 0.92rem; }
.frd-loading { opacity: 0.55; transition: opacity 0.2s; }
.frd-caveat { font-size: 0.82rem; color: var(--fr-muted); margin: 14px 0 0; max-width: 820px; line-height: 1.6; }
.frd-tablebtn { margin-top: 10px; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--teal-tx, #187364); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.frd-hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .fr-edition, .fr-video__play, .frd-tip { transition: none; } }

/* Running order, scored: one row per topic, ten-unit track, a 2px gap between parts */
.frd-bars { display: grid; gap: 10px; margin-top: 6px; }
.frd-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--fr-rule); }
@media (min-width: 760px) { .frd-bar { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) 52px; gap: 18px; align-items: center; } }
.frd-bar__label { font-size: 0.95rem; color: var(--fr-ink); line-height: 1.35; }
.frd-bar__label b { display: inline-block; min-width: 26px; font-family: var(--font-serif); font-weight: 500; color: var(--ochre, #B8762A); }
.frd-bar__label small { display: block; margin-left: 26px; font-size: 0.78rem; color: var(--fr-muted); }
.frd-bar__track { display: flex; gap: 2px; height: 24px; background: repeating-linear-gradient(90deg, var(--fr-paper-2) 0, var(--fr-paper-2) calc(10% - 2px), transparent calc(10% - 2px), transparent 10%); border-radius: 2px; }
.frd-seg { display: flex; align-items: center; justify-content: center; height: 24px; border-radius: 2px; color: #fff; font-size: 0.74rem; font-weight: 700; outline-offset: 2px; }
.frd-seg:focus-visible, .frd-split > div:focus-visible, .frd-chart rect:focus-visible, .frd-words li:focus-visible { outline: 2px solid var(--fr-ink); }
.frd-bar__total { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; color: var(--fr-ink); }
.frd-bar__total small { font-size: 0.78rem; font-weight: 400; color: var(--fr-muted); }
@media (max-width: 759px) { .frd-bar__total { display: none; } }
.fr a.fr-edition, .fr a.fr-edition:hover, .fr a.fr-edition:focus { text-decoration: none; }
.fr a.fr-edition:focus-visible { outline: 3px solid var(--ochre, #B8762A); outline-offset: 3px; }
