/* ════════════════════════════════════════════════════════════════
   Briefings — editorial overview + post.
   Ported from the design's editorial.css, EDITORIAL LAYER ONLY: the app already
   owns the chrome (mainmenu / shell / dark footer) via dataroom_base + shared
   CSS, and reuses the shared left rail (.rail-grid/.railcol/.rail-nav). Read-time
   is intentionally dropped. Loaded only on the two briefings templates.
   ════════════════════════════════════════════════════════════════ */

/* tonal bands on the white sheet, hairline-separated */
.band { width: 100%; background: transparent; }
.band-inner { width: 100%; margin: 0 auto; padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 2.75rem); }
.band + .band .band-inner { border-top: 1px solid var(--color-oatmeal); }
.hero-band { border-bottom: 1px solid var(--color-oatmeal); }
.hero-band + .band .band-inner { border-top: none; }
.hero-band .band-inner { padding-top: var(--space-8); padding-bottom: clamp(2rem, 4vw, 2.75rem); }

/* breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-stone); margin-bottom: var(--space-5); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-stone); text-decoration: none; transition: color var(--transition-base); }
.breadcrumb a:hover { color: var(--color-navy); }
.breadcrumb i { font-size: 12px; color: var(--color-oatmeal); }
.breadcrumb .here { color: var(--color-charcoal); }

/* shared eyebrow */
.ed-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); margin: 0 0 var(--space-4); }
.ed-eyebrow .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--color-eurepoc-red); box-shadow: 0 0 0 3px rgba(204,1,48,0.14); }

/* kind tag — one taxonomy of editorial products */
.ktag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.ktag i { font-size: 12px; }
.ktag.balance   { color: #7A4C1A; background: #F2E2CC; }
.ktag.briefing  { color: var(--color-navy); background: var(--color-slate-pale); }
.ktag.weekly    { color: #3A5E50; background: #D8E8DF; }
.ktag.analysis  { color: #6B3A3C; background: #EDD8D9; }
.ktag.incident  { color: var(--color-charcoal); background: var(--color-ecru); }
.ktag.country   { color: #3A5566; background: #DCE7EC; }

/* ───────── OVERVIEW ───────── */
.ov-title { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; }
.ov-dek { font-size: 17px; line-height: 1.62; color: var(--fg-body); max-width: 44rem; margin: var(--space-4) 0 0; text-wrap: pretty; }
.ov-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-stone); }
.ov-meta b { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.ov-meta .dot { color: var(--color-oatmeal); }

/* featured lead */
.feat { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0; background: #fff; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card, 0 1px 4px rgba(31,42,43,0.09)); }
.feat-main { padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.feat-kind { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.feat-flag { font-family: var(--font-ui); font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-eurepoc-red); }
.feat-title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; text-wrap: pretty; }
a.feat-title { text-decoration: none; transition: color var(--transition-base); }
a.feat-title:hover { color: var(--color-navy); }
.feat-dek { font-size: 15.5px; line-height: 1.6; color: var(--fg-body); margin: var(--space-4) 0 0; max-width: 38rem; text-wrap: pretty; }
.feat-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: auto; padding-top: var(--space-6); }
.feat-by { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-charcoal); }
.feat-by .lab { color: var(--color-stone); }
.feat-dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-stone); }
.feat-go { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; margin-top: var(--space-6); align-self: flex-start; font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-medium); color: #fff; background: var(--color-navy); border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition-base); }
.feat-go:hover { background: var(--color-navy-mid); }
.feat-go i { font-size: 16px; transition: transform var(--transition-base); }
.feat-go:hover i { transform: translateX(3px); }
.feat-side { background: var(--color-navy); color: var(--color-linen); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--space-5); }
.feat-side .fs-lab { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-slate); }
.fs-stats { display: flex; flex-direction: column; gap: var(--space-5); }
.fs-stat { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--space-5); border-bottom: 1px solid rgba(244,243,245,0.14); }
.fs-stat:last-child { border-bottom: none; padding-bottom: 0; }
.fs-num { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 2.6rem; line-height: 1; color: #fff; }
.fs-cap { font-family: var(--font-ui); font-size: 13px; line-height: 1.4; color: var(--color-slate-pale); }
@media (max-width: 780px) { .feat { grid-template-columns: 1fr; } .feat-side { order: -1; } }

/* editor's picks (was "most read") — ranked list */
.mr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(var(--space-8), 5vw, var(--space-16)); border-top: 1.5px solid var(--color-charcoal); margin-top: var(--space-2); }
@media (max-width: 680px) { .mr-list { grid-template-columns: 1fr; } }
.mr-item { display: flex; align-items: baseline; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-oatmeal); text-decoration: none; }
.mr-item .rk { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 2.1rem; line-height: 0.9; color: var(--color-oatmeal); flex: none; width: 1.1em; text-align: right; transition: color var(--transition-base); }
.mr-item:hover .rk { color: var(--color-navy); }
.mr-bd { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mr-kind { font-family: var(--font-ui); font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.mr-t { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 1.2rem; line-height: 1.2; color: var(--color-charcoal); margin: 0; text-wrap: pretty; transition: color var(--transition-base); }
.mr-item:hover .mr-t { color: var(--color-navy); }
.mr-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }

/* category filter row */
.kindbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 var(--space-2); }
.kindbar .kb-lab { font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); margin-right: var(--space-2); }
.kindbar button { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-stone); background: none; cursor: pointer; border: 1px solid var(--color-oatmeal); padding: 5px 13px; border-radius: var(--radius-pill); white-space: nowrap; transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base); }
.kindbar button:hover { color: var(--color-navy); border-color: var(--color-navy); }
.kindbar button.on { color: #fff; background: var(--color-navy); border-color: var(--color-navy); font-weight: var(--weight-medium); }

/* briefing list — ruled rows (read-time column dropped) */
.blist { border-top: 1.5px solid var(--color-charcoal); }
.brow { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; align-items: start; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-oatmeal); text-decoration: none; color: inherit; transition: background var(--transition-base); }
.brow:hover { background: var(--color-linen); }
.brow.hide { display: none; }
.brow-when { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; }
.brow-dt { font-family: var(--font-mono); font-size: 12px; color: var(--color-stone); white-space: nowrap; }
.brow-no { font-family: var(--font-mono); font-size: 11px; color: var(--color-oatmeal); }
.brow-bd { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.brow-bd .ktag { align-self: flex-start; }
.brow-t { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 1.35rem; line-height: 1.2; color: var(--color-charcoal); margin: 0; text-wrap: pretty; transition: color var(--transition-base); }
.brow:hover .brow-t { color: var(--color-navy); }
.brow-d { font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--color-stone); margin: 0; max-width: 46rem; text-wrap: pretty; }
.brow-by { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-stone); }
.brow-by b { color: var(--color-charcoal); font-weight: var(--weight-medium); }
.brow-rt { display: flex; align-items: center; justify-content: flex-end; flex: none; padding-top: 6px; }
.brow-arr { font-size: 18px; color: var(--color-oatmeal); transition: color var(--transition-base), transform var(--transition-base); }
.brow:hover .brow-arr { color: var(--color-navy); transform: translateX(3px); }
@media (max-width: 720px) {
  .brow { grid-template-columns: 1fr; gap: var(--space-3); }
  .brow-when { flex-direction: row; align-items: center; gap: var(--space-3); }
  .brow-rt { display: none; }
}

/* ───────── POST / ARTICLE ───────── */
.art-wrap { max-width: 52rem; margin: 0 auto; }
.art-kind { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.art-flag { font-family: var(--font-ui); font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-eurepoc-red); }
.art-title { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; text-wrap: pretty; }
.art-dek { font-family: var(--font-display); font-weight: var(--weight-light); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; color: var(--color-stone); margin: var(--space-5) 0 0; max-width: 42rem; text-wrap: pretty; }

/* author byline */
.byline { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.byline .avatars { display: flex; }
.byline .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-jacket); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-oatmeal); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-charcoal); margin-left: -10px; }
.byline .avatar:first-child { margin-left: 0; }
.byline .by-text { display: flex; flex-direction: column; line-height: 1.3; gap: 2px; }
.byline .by { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--fg-body); }
.byline .by b { font-weight: var(--weight-medium); }
.byline .by-meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-stone); }

/* prose — descendant selectors so Wagtail RichText (rendered inside <section>
   wrappers) and the methodology block all pick up the styling. */
.prose { font-family: var(--font-ui); font-size: 16px; line-height: 1.72; color: var(--fg-body); }
.prose > section { scroll-margin-top: 24px; }
.prose p { margin: 0 0 var(--space-5); text-wrap: pretty; }
.prose p.lead { font-size: 18px; line-height: 1.6; color: var(--color-charcoal); }
.prose > section:first-child > p:first-child { font-size: 18px; line-height: 1.6; color: var(--color-charcoal); }
.prose h2 { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: 1.5rem; line-height: 1.25; color: var(--color-charcoal); margin: var(--space-12) 0 var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-oatmeal); }
.prose > section:first-child h2 { margin-top: 0; padding-top: 0; border-top: none; }
.prose h2 .h2-no { font-family: var(--font-mono); font-size: 0.65em; font-weight: var(--weight-medium); color: var(--color-navy); margin-right: 0.6em; }
.prose h3 { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: 17px; color: var(--color-charcoal); margin: var(--space-8) 0 var(--space-3); }
.prose a { color: var(--color-navy); }
.prose a.xref { font-weight: var(--weight-medium); }
.prose strong { font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.prose ul, .prose ol { margin: 0 0 var(--space-5); padding-left: 1.3em; }
.prose li { margin-bottom: var(--space-2); text-wrap: pretty; }
.prose li::marker { color: var(--color-oatmeal); }
/* RichText blockquote → pull-quote treatment */
.prose blockquote { margin: var(--space-10) 0; padding: 0 0 0 var(--space-6); border-left: 2px solid var(--color-eurepoc-red); font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; color: var(--color-charcoal); }
.prose blockquote p { margin: 0; }
/* methodology block (renders via its own template when used in a briefing) */
.prose .method-card { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); background: var(--color-linen); border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); }
.prose .method-card .intro p { margin: 0 0 var(--space-3); }
.prose .links { display: flex; flex-direction: column; gap: var(--space-2); }
.prose .links a { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-medium); }

/* pull quote */
.pullq { margin: var(--space-10) 0; padding: 0 0 0 var(--space-6); border-left: 2px solid var(--color-eurepoc-red); }
.pullq p { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.3; color: var(--color-charcoal); margin: 0; text-wrap: pretty; }
.pullq cite { display: block; margin-top: var(--space-4); font-family: var(--font-ui); font-style: normal; font-size: 13px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--color-stone); }

/* inline figure callout */
.figrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-8) 0; }
.figcell { background: var(--color-linen); border: 1px solid var(--color-oatmeal); border-top: 2px solid var(--color-navy); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }
.figcell .fnum { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 2.2rem; line-height: 1; color: var(--color-navy); }
.figcell .fcap { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; color: var(--color-stone); margin-top: 6px; }
@media (max-width: 620px) { .figrow { grid-template-columns: 1fr; } }

/* source / note block */
.art-source { margin-top: var(--space-10); padding: var(--space-5) var(--space-6); background: var(--color-linen); border-left: 2px solid var(--color-oatmeal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.art-source p { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--color-stone); margin: 0; }
.art-source p + p { margin-top: var(--space-3); }

/* related briefings */
.relbrief { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-oatmeal); }
.relbrief-h { font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); margin: 0 0 var(--space-5); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 780px) { .rel-grid { grid-template-columns: 1fr; } }
a.rel-card { display: flex; flex-direction: column; gap: 8px; padding: var(--space-5); background: var(--color-ecru); border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base); }
a.rel-card:hover { background: var(--color-bone); border-color: var(--color-stone); transform: translateY(-2px); }
.rel-card .rc-k { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.rel-card .rc-t { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1.18; }
.rel-card .rc-dt { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); margin-top: 2px; }