/* =====================================================================
   TIB COMPONENT LIBRARY — F6 "Inkline"
   Consumes tokens.css. Every component uses LOGICAL properties (RTL-first).
   Vocabulary (ratified R2.7): Story / Brief / Source item.
   States: Breaking (red) / Developing (amber) / Top (typographic).
   Corroboration renders human: "3 outlets · 2 languages", single-source =
   neutral hollow ring, never an alarm colour.
   ===================================================================== */

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.006em;
  transition: background var(--t-med), color var(--t-med);
}
[dir="rtl"] body { letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--sp-6); }
.rule { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-6); }
.serif { font-family: var(--font-serif); }

.eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--mute);
}
.sectitle { display: flex; align-items: center; justify-content: space-between; margin-block: 0 var(--sp-4); gap: var(--sp-3); }
.sectitle h2 { font-size: .8125rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
.sectitle .more { font-size: var(--fs-s); color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sectitle .note { font-size: var(--fs-xs); color: var(--mute); }

/* ---------------- chrome (header / nav) ----------------
   Brand = neutral ink, tonal hierarchy. Nav active = ink underline. */
.chrome {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.chrome-in { display: flex; align-items: center; gap: var(--sp-4); padding: 13px var(--sp-6); max-width: var(--maxw); margin: 0 auto; }
.logo { font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.logo span { color: var(--dim); font-weight: 600; }
[dir="rtl"] .logo { letter-spacing: 0; }
.nav { display: flex; gap: 2px; }
.nav a { padding: 7px 12px; font-size: var(--fs-base); font-weight: 500; color: var(--dim); position: relative; }
.nav a:hover { color: var(--text); }
.nav a.on { color: var(--text); }
.nav a.on::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: -14px;
  height: 2px; background: var(--text);
}
.chrome .right { margin-inline-start: auto; display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-s); color: var(--mute); }

/* Edition switcher — TWO AXES rendered apart: scope (ink) · language (dim). */
.edsw {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 13px; font-size: .8125rem; font-weight: 600; cursor: pointer; color: var(--text);
  position: relative;
}
.edsw .lang { color: var(--dim); font-weight: 500; }
.edsw .car { color: var(--mute); font-size: .625rem; }
.edsw select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; appearance: none;
}
.themebtn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--dim);
}
.themebtn:hover { color: var(--text); border-color: var(--line-2); }
.themebtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* ---------------- state badges ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .656rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
[dir="rtl"] .badge { letter-spacing: 0; }
/* THE BADGE LADDER (F6-P3a polish) — one geometry, descending fill intensity:
   Breaking = SOLID red · Developing = TONAL amber · Fresh = TONAL ink.
   Red only ever means Breaking; amber only ever Developing. */
.b-break { background: var(--c-breaking); color: #fff; }                    /* RED — Breaking only */
.b-dev { background: var(--c-live-weak); color: var(--c-live); border: 0; }  /* AMBER tonal — Developing only */
.b-dev .pulse, .b-dev .pulse::after { background: var(--c-live); }
.b-top {   /* typographic: an ink rule, never a colour chip */
  background: transparent; color: var(--text); padding: 0 0 2px;
  letter-spacing: .14em; border-bottom: 2px solid var(--text); border-radius: 0;
}
[dir="rtl"] .b-top { letter-spacing: .02em; }

/* live pulse — AMBER (Developing). Inside a red Breaking chip it renders white. */
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--c-live); position: relative; flex: none; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-live); animation: tib-pulse 1.8s infinite; }
.b-break .pulse, .b-break .pulse::after, .mbreak .pulse, .mbreak .pulse::after { background: #fff; }
.breakstrip .pulse, .breakstrip .pulse::after { background: var(--c-breaking); }
@keyframes tib-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }

/* ---------------- corroboration label ----------------
   Honest by construction. Single-source: neutral hollow ring + italic note. */
.corr { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-s); color: var(--dim); }
.corr b { color: var(--text); font-weight: 600; }
.corr .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mute); flex: none; }
.corr.single b { color: var(--dim); font-weight: 500; }
.corr.single .dot { background: transparent; border: 1px solid var(--mute); width: 6px; height: 6px; }
.corr.single .sc { font-style: italic; color: var(--mute); }

/* ---------------- thumbs ---------------- */
.thumb {
  border-radius: var(--r-m); position: relative; overflow: hidden;
  background: var(--surface-2); aspect-ratio: 16/10;
}
.thumb.big { aspect-ratio: 16/9; border-radius: var(--r-l); }
.thumb.sq { aspect-ratio: 1/1; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .k {
  position: absolute; inset-inline-start: 9px; bottom: 8px; z-index: 2;
  font-size: .59rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.34); padding: 2px 7px; border-radius: 5px; backdrop-filter: blur(3px);
}
[dir="rtl"] .thumb .k { letter-spacing: 0; }

/* ---------------- breaking banner (strip) ---------------- */
.breakstrip {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--c-breaking);
  border-radius: var(--r-m); padding: 11px var(--sp-4); margin-block-end: var(--sp-6);
  background: var(--c-breaking-weak);
}
.breakstrip .tag { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-breaking); white-space: nowrap; }
[dir="rtl"] .breakstrip .tag { letter-spacing: 0; }
.breakstrip .txt { font-size: .9rem; font-weight: 600; flex: 1; color: var(--text); }
.breakstrip .ago { font-size: var(--fs-s); color: var(--mute); white-space: nowrap; }

/* ---------------- Today masthead ---------------- */
.toddate { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-5); flex-wrap: wrap; }
.toddate .d { font-family: var(--font-serif); font-size: 1.6875rem; font-weight: 700; letter-spacing: -.01em; }
[dir="rtl"] .toddate .d { letter-spacing: 0; }
.toddate .s { font-size: var(--fs-s); color: var(--mute); }

/* hero = lead story + At-a-glance rail (v4 approved module) */
.hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--sp-7); align-items: start; }
.hero .thumb { margin-block-end: var(--sp-4); }
.hero h1 { font-family: var(--font-serif); font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.017em; margin-block: var(--sp-2) var(--sp-3); font-weight: 700; }
[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.35; }
.hero .why { font-size: 1rem; color: var(--dim); line-height: 1.5; max-width: 52ch; margin: 0; }
.hmeta { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; margin-block-start: var(--sp-3); font-size: var(--fs-s); color: var(--mute); }

/* At a glance rail */
.railhead { font-size: var(--fs-s); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); padding-block-end: 10px; border-bottom: 1px solid var(--line); }
.railcard { display: grid; grid-template-columns: 1fr 88px; gap: var(--sp-4); align-items: start; padding-block: 15px; border-bottom: 1px solid var(--line); }
.railcard:last-child { border-bottom: 0; }
.railcard .badge { margin-block-end: 7px; }
.railcard h3 { font-family: var(--font-serif); font-size: 1.09rem; line-height: var(--lh-snug); letter-spacing: -.008em; margin-block-end: var(--sp-2); }
[dir="rtl"] .railcard h3 { letter-spacing: 0; line-height: 1.5; }
.railcard .thumb { aspect-ratio: 1/1; border-radius: var(--r-m); }
.railcard:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- The Desk — plain typographic list (v3, no cards/images) */
.desk { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.desk .col { padding-inline: var(--sp-5); border-inline-start: 1px solid var(--line); }
.desk .col:first-child { padding-inline-start: 0; border-inline-start: 0; }
.desk .kk { font-size: .625rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mute); }
.desk h3 { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.22; letter-spacing: -.01em; margin-block: 9px var(--sp-2); font-weight: 600; }
[dir="rtl"] .desk h3 { letter-spacing: 0; line-height: 1.5; }
.desk a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Live & developing feed rows ---------------- */
.livefeed .lr { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; padding-block: 13px; border-top: 1px solid var(--line); }
.livefeed .lr:first-child { border-top: 0; }
.livefeed .lr h4 { font-size: .9rem; font-weight: 500; line-height: 1.3; }
.livefeed .lr .st { font-size: .72rem; color: var(--mute); white-space: nowrap; }
.livefeed .lr:hover h4 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- What's moving (rank rows; velocity = honest number) */
.rank .rr { display: flex; align-items: center; gap: var(--sp-3); padding-block: 9px; border-top: 1px solid var(--line); }
.rank .rr:first-child { border-top: 0; }
.rank .n { font-family: var(--font-serif); font-size: .9375rem; color: var(--mute); min-width: 15px; }
.rank .t { flex: 1; font-size: .84rem; font-weight: 500; line-height: 1.3; }
.rank .v { font-size: .656rem; font-weight: 700; color: var(--c-live); white-space: nowrap; }   /* AMBER — velocity */
.rank .v.settled { color: var(--mute); font-weight: 600; }
.rank .rr:hover .t { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- story list (elist) ---------------- */
.elist .er { display: grid; grid-template-columns: 1fr 76px; gap: var(--sp-4); padding-block: 15px; border-top: 1px solid var(--line); }
.elist .er:first-child { border-top: 0; }
.elist h3 { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.24; letter-spacing: -.008em; }
[dir="rtl"] .elist h3 { letter-spacing: 0; line-height: 1.5; }
.elist .m { display: flex; gap: 10px; align-items: center; margin-block-start: 7px; font-size: .72rem; color: var(--mute); flex-wrap: wrap; }
.elist .thumb { aspect-ratio: 1/1; }
.elist a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* UNBRIEFED story — the honest source-headline treatment (open gap #5):
   the raw outlet headline renders AS the outlet's own words — quoted serif
   italic + explicit attribution — never dressed as our synthesized title. */
.src-headline h3 { font-style: italic; font-weight: 500; color: var(--dim); }
.src-headline h3::before { content: "\201C"; color: var(--mute); }
.src-headline h3::after { content: "\201D"; color: var(--mute); }
[dir="rtl"] .src-headline h3::before { content: "\00AB\2009"; }
[dir="rtl"] .src-headline h3::after { content: "\2009\00BB"; }
.src-attr { font-size: .72rem; color: var(--mute); }
.src-attr b { color: var(--dim); font-weight: 600; }

/* ---------------- hot topics (ambient rail of doors) ---------------- */
.edstrip, .topicstrip { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.edstrip a, .topicstrip a {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill);
  padding: 8px 13px; font-size: var(--fs-s); font-weight: 600;
  display: inline-flex; gap: 6px; align-items: center;
}
.edstrip a:hover, .topicstrip a:hover { border-color: var(--line-2); }
.edstrip a .lg, .topicstrip a .lg { color: var(--mute); font-weight: 500; font-size: .687rem; }

/* ---------------- story page ---------------- */
.story-hero h1 { font-family: var(--font-serif); font-size: 2.3125rem; line-height: 1.08; letter-spacing: -.02em; margin-block: var(--sp-3); font-weight: 700; }
[dir="rtl"] .story-hero h1 { letter-spacing: 0; line-height: 1.35; }
.story-meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; font-size: var(--fs-s); color: var(--mute); }
.story-cols { display: grid; grid-template-columns: 1fr var(--rail-w); gap: 36px; margin-block-start: var(--sp-6); }

/* "What to know" — the BRIEF as a view at the top of the story */
.know { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px 20px; margin-block-end: var(--sp-6); }
.know h4 { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mute); margin-block-end: 10px; font-weight: 700; }
.know ul { margin: 0; padding-inline-start: 17px; line-height: 1.6; }
.know li { margin-block-end: 6px; font-size: .9375rem; font-family: var(--font-serif); }
[dir="rtl"] .know li { line-height: var(--lh-ar); }
.know p { margin: 0; font-size: .9375rem; font-family: var(--font-serif); line-height: 1.6; }
[dir="rtl"] .know p { line-height: var(--lh-ar); }

/* timeline — the story's arc, newest first; source items are the entries */
.tl .it { position: relative; padding-inline-start: 24px; padding-block-end: 22px; }
.tl .it::before { content: ""; position: absolute; inset-inline-start: 5px; top: 20px; bottom: -4px; width: 2px; background: var(--line); }
.tl .it:last-child::before { display: none; }
.tl .dot { position: absolute; inset-inline-start: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--mute); }
/* fill/hollow = HONEST CORROBORATION: filled = first report from a NEW
   independent outlet, hollow = routine follow-up. State colour layers ON TOP
   (see .stf-* below): a red FILLED dot = Breaking AND outlet-significant. */
.tl .it.nv .dot { border-color: var(--text); background: var(--text); }
.tl .w { font-size: .72rem; font-weight: 700; color: var(--dim); letter-spacing: .02em; }
.tl .sc { font-size: var(--fs-xs); color: var(--mute); margin-inline-start: 8px; }
.tl h4 { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.24; margin-block: 4px; font-weight: 600; }
[dir="rtl"] .tl h4 { line-height: 1.5; }
.tl p { font-size: .8125rem; color: var(--dim); line-height: 1.5; margin: 0; }
.tl a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }

/* right-rail boxes: key events, corroboration meter, source items */
.railbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 15px 16px; margin-block-end: var(--sp-4); }
.railbox h4 { font-size: .656rem; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mute); margin-block-end: 10px; font-weight: 700; }
.railbox .kev { display: block; font-size: var(--fs-s); color: var(--dim); padding-block: 6px; border-top: 1px solid var(--line); line-height: 1.35; }
.railbox .kev:first-of-type { border-top: 0; }
.railbox .kev .kt { font-size: .625rem; color: var(--mute); font-weight: 700; display: block; }
.mrowm { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; font-size: var(--fs-s); }
.mrowm .lab { width: 74px; color: var(--dim); flex: none; }
.mrowm .val { font-weight: 700; min-width: 18px; text-align: end; }
.mbar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--dim); }   /* meters are INK */
.srcchip { display: flex; gap: 10px; padding-block: 9px; border-top: 1px solid var(--line); }
.srcchip:first-of-type { border-top: 0; }
.srcchip .lb { font-size: .625rem; font-weight: 800; color: var(--dim); background: var(--surface-2); border-radius: 5px; min-width: 24px; height: 20px; display: flex; align-items: center; justify-content: center; padding-inline: 4px; flex: none; }
.srcchip b { font-size: var(--fs-s); display: block; }
.srcchip span { font-size: var(--fs-xs); color: var(--mute); }
.linkbtn { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--btn); color: var(--btn-fg); font-weight: 600; font-size: .84rem; border-radius: var(--r-m); padding: 11px 15px; }
.caution { font-size: var(--fs-s); color: var(--dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 9px 11px; line-height: 1.45; }
.caution b { color: var(--text); }

/* ---------------- brief prose (article view) ---------------- */
.article h1 { font-family: var(--font-serif); font-size: 2.1875rem; line-height: 1.12; letter-spacing: -.02em; margin-block: 14px; font-weight: 700; }
[dir="rtl"] .article h1 { letter-spacing: 0; line-height: 1.4; }
.standfirst { font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.5; color: var(--dim); margin-block-end: var(--sp-6); }
.article h4.sh { font-size: var(--fs-xs); letter-spacing: .11em; text-transform: uppercase; color: var(--mute); margin-block: 26px 10px; font-weight: 700; }
[dir="rtl"] .article h4.sh { letter-spacing: 0; }
.article p { font-family: var(--font-serif); font-size: 1.0625rem; line-height: var(--lh-body); margin-block: 0 13px; }
.article ul { margin-block: 0 13px; padding-inline-start: 19px; }
.article li { font-family: var(--font-serif); font-size: 1.03rem; line-height: 1.58; margin-block-end: 8px; }
[dir="rtl"] .article li { line-height: var(--lh-ar); }
.cite { font-family: var(--font-sans); font-size: .625rem; font-weight: 700; color: var(--dim); background: var(--surface-2); border-radius: 4px; padding: 1px 5px; vertical-align: super; margin-inline-start: 2px; }

/* ---------------- F6-P3a story dossier ---------------- */
/* THE TINT RULE (P3a polish): every non-state tint on the dossier derives
   from the story's CATEGORY HUE (--hue-fg/--hue-soft, set by the .hue-* class
   on the .stf wrapper — the same Warm Print identity the home uses). STATE
   colour appears ONLY on the badge ladder and the timeline/spine (.stf-*).
   No third colour system exists on this page. */
.kickline a { color: var(--hue-fg, var(--text)); }
.kickline a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kickline .kdot { margin-inline: 6px; color: var(--mute); }
.tl .it:target { scroll-margin-block-start: 90px; }
.tl .it:target h4 { text-decoration: underline; text-underline-offset: 3px; }
/* STATE FLEX — the page carries its story's state: Breaking reads red,
   Developing reads amber, settled reads calm ink. Timestamps + FILLED dots
   + spine timestamps take the state colour; hollow dots stay mute (colour
   is state, fill stays corroboration — two signals, never merged). */
.stf-breaking .tl .w, .stf-breaking .railbox .kev .kt { color: var(--c-breaking); }
.stf-breaking .tl .it.nv .dot { border-color: var(--c-breaking); background: var(--c-breaking); }
.stf-developing .tl .w, .stf-developing .railbox .kev .kt { color: var(--c-live); }
.stf-developing .tl .it.nv .dot { border-color: var(--c-live); background: var(--c-live); }
/* mechanical "What to know" bullets carry their outlet, honestly */
.know .ksrc { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--mute); margin-inline-start: 6px; white-space: nowrap; }
/* the top reading layer carries the category identity — the home's
   catstrip rule, echoed: a 3px hue rule on the reading edge. */
.stf .know { border-inline-start: 3px solid var(--hue-fg, var(--line-2)); }
.stf .know h4 { color: var(--hue-fg, var(--mute)); }
.article.briefread { margin-block-end: var(--sp-7); border-inline-start: 3px solid var(--hue-fg, var(--line-2)); padding-inline-start: var(--sp-4); }
.stf .briefread .eyebrow, .stf .article h4.sh { color: var(--hue-fg, var(--mute)); }
.article ul.oneli { margin-block: 0 6px; }
/* coverage meters — the story's identity, not a state */
.stf .mbar i { background: var(--hue-fg, var(--dim)); }
/* citations: interactive = tinted chip wired to SOURCE SPREAD (a.cite);
   unresolvable = plain superscript text (span.cite-plain) — never an inert
   chip dressed as a link. */
a.cite { color: var(--hue-fg, var(--dim)); background: var(--hue-soft, var(--surface-2)); cursor: pointer; }
a.cite:hover { text-decoration: underline; text-underline-offset: 2px; }
.cite-plain { font-family: var(--font-sans); font-size: .625rem; font-weight: 700; color: var(--mute); vertical-align: super; margin-inline-start: 2px; }
/* source spread — the mockup's .srcchip row (F6-P3b-2 refinement B): S-label badge
   LEADING (first column), then the outlet name + "N reports · lang" STACKED beneath. */
.spread .sr { display: flex; align-items: flex-start; gap: 10px; padding-block: 9px; border-top: 1px solid var(--line); transition: background .3s; position: relative; }
.spread .sr:first-child { border-top: 0; }
.spread .sr.flash, .spread .sr:target { background: var(--hue-soft, var(--surface-2)); }
.spread .sr-body { display: block; min-width: 0; flex: 1; }
.spread .out { display: block; min-width: 0; font-weight: 600; font-size: var(--fs-s); color: inherit; text-decoration: none; }
/* whole-row link (D-045): the outlet-name anchor stretches over the row; the leading
   S-badges sit above it (z-index) and stay independently clickable to their own cited
   articles (D-021). No nested anchors — the row is a <div>. */
.spread a.out::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.spread a.out:hover { text-decoration: underline; text-underline-offset: 2px; }
.spread .hd { display: block; font-size: var(--fs-xs); color: var(--mute); margin-block-start: 2px; }
/* leading S-label group — one or more badges (the AI cites an outlet under several). */
.spread .srcites { flex: none; display: inline-flex; flex-wrap: wrap; gap: 4px; position: relative; z-index: 1; }
.spread .lead-tag { font-size: .562rem; font-weight: 800; letter-spacing: .06em; color: var(--hue-fg, var(--dim)); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 4px; vertical-align: 2px; margin-inline-start: 6px; text-transform: uppercase; }
.spread .srmore { font-size: var(--fs-xs); color: var(--mute); }
/* mobile timeline segmented toggle (harvested from mockups v2/v4) — a
   CONTROL, so it stays ink (controls are never signal). */
.mseg2 { display: flex; gap: 7px; margin-block-end: 12px; }
.mseg2 button { font-size: .75rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); color: var(--dim); background: none; cursor: pointer; }
.mseg2 button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.tl.keyonly .it:not(.kv) { display: none; }
/* mobile dossier header — badge OFF the scrim, facts re-laid as rows:
   (1) badge + taxonomy links (wrapping), (2) corroboration + reports,
   (3) first/latest. Every honest fact, none crammed. */
.mfacts { display: flex; flex-direction: column; gap: 7px; margin-block: 12px 18px; }
.mfacts .frow { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: var(--fs-s); color: var(--mute); min-width: 0; }
.mfacts .kickline { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }

/* ---------------- two-column split ---------------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

/* ---------------- skeleton / empty / error states ---------------- */
@keyframes tib-shimmer { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
.skel { background: var(--surface-2); border-radius: var(--r-s); animation: tib-shimmer 1.6s ease-in-out infinite; min-height: 12px; }
.skel.text { height: 12px; }
.skel.title { height: 22px; }
.skel.thumb { aspect-ratio: 16/10; border-radius: var(--r-m); }
.empty {
  border: 1px dashed var(--line-2); border-radius: var(--r-l);
  padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--dim);
}
.empty .t { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; color: var(--text); margin-block-end: 6px; }
.empty p { font-size: var(--fs-s); color: var(--mute); margin: 0; line-height: 1.5; }
.errorbox {
  border: 1px solid var(--line-2); border-radius: var(--r-l);
  padding: var(--sp-5); color: var(--dim); background: var(--surface);
  font-size: var(--fs-s); line-height: 1.5;
}
.errorbox b { color: var(--text); display: block; margin-block-end: 4px; font-size: .9375rem; }

/* ---------------- footer ---------------- */
.footer { border-top: 1px solid var(--line); margin-block-start: var(--sp-8); }
.footer-in { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6); display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: space-between; font-size: var(--fs-s); color: var(--mute); }
.footer-in a { color: var(--dim); }
.footer-in a:hover { text-decoration: underline; }

/* ---------------- mobile ---------------- */
.deskonly { display: block; }
.mobonly { display: none; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--sp-5); }
  .two { grid-template-columns: 1fr; gap: var(--sp-6); }
  .story-cols { grid-template-columns: 1fr; gap: var(--sp-5); }
  .desk { grid-template-columns: 1fr; }
  .desk .col { border-inline-start: 0; padding-inline: 0; border-top: 1px solid var(--line); padding-block-start: 14px; margin-block-start: 14px; }
  .desk .col:first-child { border-top: 0; padding-block-start: 0; margin-block-start: 0; }
  .nav { display: none; }
}

@media (max-width: 620px) {
  .deskonly { display: none; }
  .mobonly { display: block; }
  .chrome { display: none; }
  /* F6 revision — mobile PARITY: modules flow with real gutters; full-bleed
     elements (mobile lead, pagers) escape with .bleed. */
  .wrap { padding-inline: var(--sp-4); }
  .bleed { margin-inline: calc(-1 * var(--sp-4)); }
  body { padding-block-end: 76px; }   /* room for the tab bar */

  /* mobile top bar */
  .mtop {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px var(--sp-4) 10px;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  }
  .mtop .logo { font-size: 1.0625rem; }
  .mtop .right { display: flex; gap: var(--sp-2); align-items: center; }
  .medpill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); font-weight: 600; color: var(--dim); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; position: relative; }
  .medpill select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; appearance: none; }

  /* mobile breaking ribbon */
  .mbreak { display: flex; align-items: center; gap: 9px; background: var(--c-breaking); color: #fff; padding: 9px var(--sp-4); font-size: var(--fs-s); font-weight: 600; }
  .mbreak .lbl { font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; flex: none; }
  [dir="rtl"] .mbreak .lbl { letter-spacing: 0; }

  /* mobile static lead (v3 top banner, NOT a slider) */
  .mlead { position: relative; margin-block-start: var(--sp-2); }
  .mlead .thumb { border-radius: 0; aspect-ratio: 4/5; width: 100%; }
  .mlead .thumb::before { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: 1; }
  .mlead .ov { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 20px var(--sp-4) 18px; color: #fff; }
  .mlead .ov .k { font-size: .625rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; opacity: .85; margin-block: var(--sp-2); display: inline-block; }
  .mlead .ov h1 { font-family: var(--font-serif); font-size: 1.6875rem; line-height: 1.13; font-weight: 700; letter-spacing: -.01em; }
  [dir="rtl"] .mlead .ov h1 { letter-spacing: 0; line-height: 1.4; }
  .mlead .ov .cr { display: flex; align-items: center; gap: 7px; margin-block-start: 11px; font-size: var(--fs-s); color: rgba(255,255,255,.82); }
  .mlead .ov .cr .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }

  /* horizontal live strip */
  .mlive { padding-block: 18px 6px; }
  .mlive .hd { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4) 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
  .mlive .track { display: flex; gap: var(--sp-3); overflow-x: auto; padding: 0 var(--sp-4) 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mlive .track::-webkit-scrollbar { display: none; }
  .mlive .lc { scroll-snap-align: start; flex: 0 0 76%; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface); }
  .mlive .lc .st { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--mute); margin-block-end: var(--sp-2); }
  .mlive .lc h4 { font-family: var(--font-serif); font-size: 1rem; line-height: 1.24; font-weight: 600; }
  [dir="rtl"] .mlive .lc h4 { line-height: 1.5; }
  .mlive .lc .cr { margin-block-start: 10px; font-size: .72rem; }

  /* mobile stream rows */
  .mstream .sh { padding: 20px var(--sp-4) 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); }
  .mrow { display: grid; grid-template-columns: 1fr 84px; gap: var(--sp-4); align-items: start; padding: 15px var(--sp-4); border-top: 1px solid var(--line); min-height: 64px; }
  .mrow h3 { font-family: var(--font-serif); font-size: 1.03rem; line-height: 1.26; letter-spacing: -.006em; }
  [dir="rtl"] .mrow h3 { letter-spacing: 0; line-height: 1.5; }
  .mrow .m { display: flex; gap: 9px; align-items: center; margin-block-start: var(--sp-2); font-size: var(--fs-xs); color: var(--mute); flex-wrap: wrap; }
  .mrow .thumb { aspect-ratio: 1/1; border-radius: var(--r-m); }

  /* horizontal chip rows (mobile sections / topics) */
  .mseg { display: flex; gap: 7px; padding: 13px var(--sp-4) 6px; overflow-x: auto; scrollbar-width: none; }
  .mseg::-webkit-scrollbar { display: none; }
  .mseg a, .mseg b { font-size: .84rem; font-weight: 600; padding: 7px 15px; border-radius: var(--r-pill); white-space: nowrap; border: 1px solid var(--line); color: var(--dim); }
  .mseg .on { background: var(--text); color: var(--bg); border-color: var(--text); }

  /* fixed bottom tab bar — active = INK, never a colour */
  .tabbar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(16px); border-top: 1px solid var(--line);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .656rem; font-weight: 600; color: var(--mute); padding-block: 2px; }
  .tabbar a.on { color: var(--text); }
  .tabbar .ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }

  .mpad { padding: var(--sp-4) var(--sp-4) 90px; }
  .story-hero h1, .article h1 { font-size: 1.5625rem; }

  /* Item D — on the STORY DETAIL page (mobile only) hide the bottom tab bar so the
     reader can focus; the CTA then docks FLUSH to the true bottom (no dead space).
     Other mobile pages keep the tab bar; desktop is untouched. */
  body.story-detail .tabbar { display: none; }

  /* CTA docked FLUSH to the bottom (the tab bar is hidden on the story page — Item D).
     The story page sets the matching .mpad bottom clearance inline (100px) when a CTA
     renders. The mockup's pinned bottom bar. */
  .cta-dock {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 55;
    padding: 10px var(--sp-4) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  }
  .cta-dock .cta { display: flex; width: 100%; }
  .mobhead { position: relative; }
  /* Item 7 — the mobile hero NEVER shows a tile label (it would collide with the
     overlaid title). Belt-and-suspenders: the mobile hero also passes no label. */
  .mobhead .thumb .tlabel { display: none; }
  /* Item D (experiment) — system-style circular back button, top-inline-start, on the
     hero (image) OR the compact band (no image). Chevron flips under RTL. */
  .mback { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); z-index: 3;
    inline-size: 34px; block-size: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.18); color: #fff; }
  .mback svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  [dir="rtl"] .mback svg { transform: scaleX(-1); }
  .mback:active { background: rgba(0,0,0,.6); }
  .mobhead .thumb { border-radius: 0; aspect-ratio: 16/10; }
  .mobhead .thumb::before { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: 1; }
  .mobhead .ov { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: var(--sp-4); color: #fff; }
  .mobhead .ov h1 { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.14; font-weight: 700; }
  [dir="rtl"] .mobhead .ov h1 { line-height: 1.4; }
  /* the eligible badge, when it rides the overlay (Item 7 toggle on): above the title.
     Over an IMAGE the developing (outlined) badge needs a light edge to read on the scrim;
     Breaking is already solid red. */
  .mobhead .ov .badge { margin-block-end: 8px; }
  .mobhead .ov .b-dev { color: #fff; border-color: rgba(255,255,255,.55); }

  /* Item 2 (owner Option A) — NO IMAGE ⇒ NO band / NO placeholder. A slim top strip
     holds the back button; the badge → title → tags → meta then flow as normal body text
     (mockup Brief tab). Nothing that reads as a failed image slot. */
  .mnobar { padding: var(--sp-3) var(--sp-4) 0; }
  /* back button on the plain page bg (no image to sit on) — a theme-aware ink disc with a
     medium ink ring so it reads in BOTH themes (near-white-on-near-white was the light risk). */
  .mnobar .mback { position: static; background: color-mix(in srgb, var(--text) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--text) 38%, var(--bg)); color: var(--text); backdrop-filter: none; }
  .mnobar .mback:active { background: color-mix(in srgb, var(--text) 20%, var(--bg)); }
  /* no-image text header: badge above the serif title, in flow. */
  .mnohead { margin-block: var(--sp-3) var(--sp-4); }
  .mnohead .badge { margin-block-end: 10px; }
  .mnohead-title { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.14; font-weight: 700; letter-spacing: -.01em; }
  [dir="rtl"] .mnohead-title { line-height: 1.4; letter-spacing: 0; }
  .mactionbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; padding: 10px var(--sp-4) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
}

@media (min-width: 621px) {
  .tabbar { display: none; }
  /* P2.1-1: bulletproof — a later-appended display rule on a mobile-only element
     can never leak onto desktop again. */
  .mobonly { display: none !important; }
}

/* =====================================================================
   F6 REVISION — density components ("Warm Print")
   ===================================================================== */

/* ---- fresh badge: quiet ink outline (an honest recency tag, never colour) */
.b-fresh { background: var(--surface-2); color: var(--dim); border: 0; }     /* INK tonal — quiet recency */
/* On photo scrims the tonal chips get a dark plate so the ladder stays legible. */
.ov .badge:not(.b-break) { background: rgba(16, 15, 13, .62); }
.ov .b-fresh { color: rgba(255, 255, 255, .88); }

/* ---- labelled gradient tile (imagery rule: real photo OR labelled tile —
       never an empty box, never a fake photo) */
.thumb.tile { background: linear-gradient(135deg, var(--hue-g1, #5a5f66), var(--hue-g2, #23262b)); }
.thumb .tlabel {
  position: absolute; inset: 0; display: flex; align-items: flex-end; z-index: 1;
  padding: 9px; color: rgba(255,255,255,.92);
  font-size: .62rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase;
  line-height: 1.3; text-align: start;
  /* Polish #1 FIX 2: a long single word (e.g. TECHNOLOGY) at caps + letter-spacing
     overflowed a narrow tile and clipped to "TECHNOLOG…". Let it WRAP instead of clip. */
  overflow-wrap: anywhere; word-break: break-word;
}
.thumb.tile.big .tlabel, .thumb.tile.wide .tlabel { font-size: .72rem; padding: 12px; }

/* ---- hued kicker / accents */
.kk.hued, .eyebrow.hued { color: var(--hue-fg, var(--mute)); }

/* ---- BRIEFS DIGEST — the calm curated read (first-class, top surface) */
.digest {
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); padding: var(--sp-5) var(--sp-5) var(--sp-3);
  margin-block-end: var(--sp-6);
}
.digest-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-block-end: var(--sp-3); }
.digest-head .t { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700; letter-spacing: -.012em; }
[dir="rtl"] .digest-head .t { letter-spacing: 0; }
.digest-head .n { font-size: var(--fs-xs); color: var(--mute); }
.digest-lead { display: grid; grid-template-columns: 1fr 168px; gap: var(--sp-5); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.digest-lead h3 { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.22; letter-spacing: -.012em; margin-block-end: 7px; }
[dir="rtl"] .digest-lead h3 { letter-spacing: 0; line-height: 1.5; }
.digest-lead p { margin: 0 0 9px; font-size: var(--fs-s); color: var(--dim); line-height: 1.55; }
.digest-lead .thumb { aspect-ratio: 4/3; }
.digest-lead:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.digest-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: baseline; padding-block: 11px; border-bottom: 1px solid var(--line); }
.digest-row:last-child { border-bottom: 0; }
.digest-row .dn { font-family: var(--font-serif); font-size: .9375rem; color: var(--hue-fg, var(--mute)); min-width: 16px; font-weight: 700; }
.digest-row h4 { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; line-height: 1.3; }
[dir="rtl"] .digest-row h4 { line-height: 1.55; }
.digest-row .dm { font-size: .72rem; color: var(--mute); white-space: nowrap; }
.digest-row:hover h4 { text-decoration: underline; text-underline-offset: 3px; }

/* ---- hero slides: NO auto-rotate; light manual fade + dot indicator */
.heroslides { position: relative; }
.hslide { display: none; }
.hslide.on { display: block; animation: tib-fadein var(--t-med) var(--ease); }
@keyframes tib-fadein { from { opacity: 0; } to { opacity: 1; } }
.dots { display: inline-flex; gap: 6px; align-items: center; }
.dots button { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); padding: 0; transition: background var(--t-fast); }
.dots button.on { background: var(--text); }
.dots button:hover { background: var(--dim); }

/* ---- breaking banner rotation (genuine breaking only; calm cross-fade) */
.breakstrip { position: relative; }
.breakstrip .btxt { display: none; flex: 1; min-width: 0; }
.breakstrip .btxt.on { display: flex; align-items: center; gap: var(--sp-3); animation: tib-fadein .5s var(--ease); }
.breakstrip .btxt .txt { flex: 1; }

/* ---- category strip: a tailored section per hot category */
.catstrip { border-inline-start: 3px solid var(--hue-fg, var(--line-2)); padding-inline-start: var(--sp-4); margin-block-end: var(--sp-2); }
.catstrip .cs-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-3); }
.catstrip .cs-head h2 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--hue-fg, var(--text)); letter-spacing: -.012em; }
[dir="rtl"] .catstrip .cs-head h2 { letter-spacing: 0; }
.catstrip .cs-head .more { font-size: var(--fs-s); color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cs-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5); }
.cs-lead .thumb { aspect-ratio: 16/9; margin-block-end: 10px; }
.cs-lead h3 { font-family: var(--font-serif); font-size: 1.19rem; line-height: 1.24; letter-spacing: -.01em; margin-block-end: 7px; }
[dir="rtl"] .cs-lead h3 { letter-spacing: 0; line-height: 1.5; }
.cs-lead:hover h3, .cs-rows a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.cs-rows a { display: block; padding-block: 10px; border-top: 1px solid var(--line); }
.cs-rows a:first-child { border-top: 0; padding-block-start: 0; }
.cs-rows h4 { font-family: var(--font-serif); font-size: .97rem; font-weight: 600; line-height: 1.3; margin-block-end: 5px; }
[dir="rtl"] .cs-rows h4 { line-height: 1.55; }

/* ---- hot-topic spotlight: the hottest door becomes a mini-section */
.spot { background: var(--hue-soft, var(--surface-2)); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-5); }
.spot .sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-block-end: var(--sp-3); }
.spot .sp-head .t { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700; letter-spacing: -.012em; }
[dir="rtl"] .spot .sp-head .t { letter-spacing: 0; }
.spot .sp-head .m { font-size: var(--fs-s); color: var(--dim); }
.sp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-6); }
.sp-grid a { display: grid; grid-template-columns: 1fr 64px; gap: var(--sp-3); padding-block: 9px; border-top: 1px solid var(--line); align-items: start; }
.sp-grid a:nth-child(-n+2) { border-top: 0; }
.sp-grid h4 { font-family: var(--font-serif); font-size: .97rem; font-weight: 600; line-height: 1.3; margin-block-end: 5px; }
[dir="rtl"] .sp-grid h4 { line-height: 1.55; }
.sp-grid .thumb { aspect-ratio: 1/1; border-radius: var(--r-s); }
.sp-grid a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }

/* ---- REAL sparkline (cumulative outlet arrivals — amber = velocity, its state) */
.spark { width: 54px; height: 20px; flex: none; }
.spark polyline { fill: none; stroke: var(--c-live); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- chips: catchier doors (emoji + counts + quiet NEW), still honest */
.edstrip a .em { font-size: .9rem; }
.nu { font-size: .53rem; font-weight: 800; color: var(--text); vertical-align: top; letter-spacing: .04em; border-bottom: 1.5px solid var(--text); padding-bottom: 1px; }
[dir="rtl"] .nu { letter-spacing: 0; }

/* ---- At-a-glance: desktop rail → mobile swipeable pager with dots */
.glance-dots { display: none; }

@media (max-width: 900px) {
  .cs-grid { grid-template-columns: 1fr; }
  .sp-grid { grid-template-columns: 1fr; }
  .sp-grid a:nth-child(2) { border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .digest { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
  .digest-lead { grid-template-columns: 1fr 96px; gap: var(--sp-3); }
  .digest-lead .thumb { aspect-ratio: 1/1; }

  /* glance pager (ViewPager pattern): swipe + light dots */
  .glance { display: flex; overflow-x: auto; gap: var(--sp-3); scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 4px; min-width: 0; max-width: 100%; }
  .glance::-webkit-scrollbar { display: none; }
  .glance .railcard { flex: 0 0 min(82vw, 330px); min-width: 0; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-3); background: var(--surface); border-bottom: 1px solid var(--line); }
  .glance-dots { display: flex; justify-content: center; gap: 6px; padding-block: 8px 2px; }
  .glance-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background var(--t-fast); }
  .glance-dots i.on { background: var(--text); }

  .catstrip { border-inline-start-width: 3px; padding-inline-start: var(--sp-3); }
  .elist .er { grid-template-columns: 1fr 84px; }
}

/* tile-mode visibility: the label ships in the markup for every media element;
   it shows only when the element IS a tile (no photo, or the photo broke). The
   photo-kicker hides in tile mode so the two labels never stack. */
.thumb .tlabel { display: none; }
.thumb.tile .tlabel { display: flex; }
.thumb.tile .k { display: none; }

/* =====================================================================
   F6-P2 — La Une components
   ===================================================================== */

/* ---- ONE page title (date shows here on mobile only — masthead has it on desktop) */
.latitle { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-block: 2px var(--sp-5); }
.latitle h1 { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 700; letter-spacing: -.015em; }
[dir="rtl"] .latitle h1 { letter-spacing: 0; }
.ladate { display: none; font-size: var(--fs-s); color: var(--mute); white-space: nowrap; }

/* ---- (1) TOP block: desktop grid, mobile plain flow (overflow designed out:
        no grid on mobile; every child min-width:0; pager cards are vw-clamped) */
.mod-top { display: block; }
.toplead, .glancewrap { min-width: 0; max-width: 100%; }
.lead-topline { display: flex; justify-content: space-between; align-items: center; margin-block-end: 8px; }
.lead-h { font-family: var(--font-serif); font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.017em; margin-block: 12px 10px; font-weight: 700; }
[dir="rtl"] .lead-h { letter-spacing: 0; line-height: 1.35; }
@media (min-width: 901px) {
  .mod-top { display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; align-items: start; }
  .glancewrap .railhead { margin-block-start: 6px; }
}

/* mobile static lead card (v3 grammar; gutters kept — no bleed) */
.mleadcard { min-width: 0; }  /* display owned by .mobonly (leak fix P2.1-1) */
.mleadcard .mlthumb { position: relative; overflow: hidden; aspect-ratio: 4/5; border-radius: var(--r-l); }
/* the x-tib.media .thumb fills the hero box (photo or hued-tile fallback) */
.mleadcard .mlthumb .thumb.mlfill { position: absolute; inset: 0; aspect-ratio: auto; border-radius: inherit; }
.mleadcard .mlthumb::before { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: 1; border-radius: inherit; }
.mleadcard .ov { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 18px var(--sp-4) 16px; color: #fff; }
.mleadcard .ov .k { display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; opacity: .85; margin-block: var(--sp-2); position: static; background: none; padding: 0; }
.mleadcard .ov h2 { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.14; font-weight: 700; letter-spacing: -.01em; }
[dir="rtl"] .mleadcard .ov h2 { letter-spacing: 0; line-height: 1.4; }
.mleadcard .ov .cr { display: flex; align-items: center; gap: 7px; margin-block-start: 10px; font-size: var(--fs-s); color: rgba(255,255,255,.85); }
.mleadcard .ov .cr .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.mleadcard .ov .cr b { color: #fff; }

/* ---- (4) MORNING BRIEFS — the calm briefed read (Morning-Brew grammar) */
.mbriefs { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: var(--sp-5) var(--sp-5) var(--sp-2); }
.mb-lead { display: grid; grid-template-columns: 1fr 168px; gap: var(--sp-5); padding-block: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); min-width: 0; }
.mb-lead h3 { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.22; letter-spacing: -.012em; margin-block: 6px 7px; }
[dir="rtl"] .mb-lead h3 { letter-spacing: 0; line-height: 1.5; }
.mb-lead p { margin: 0 0 9px; font-size: var(--fs-s); color: var(--dim); line-height: 1.55; }
.mb-lead .thumb { aspect-ratio: 4/3; }
.mb-lead:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.mb-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--line); }
.mb-row:last-child { border-bottom: 0; }
.mb-row h4 { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600; line-height: 1.3; margin-block-end: 4px; }
[dir="rtl"] .mb-row h4 { line-height: 1.55; }
.mb-row .dek { margin: 0 0 5px; font-size: .8rem; color: var(--dim); line-height: 1.5; }
.mb-row .dm { font-size: .72rem; color: var(--mute); white-space: nowrap; }
.mb-row:hover h4 { text-decoration: underline; text-underline-offset: 3px; }

/* ---- (5) rich category strip: two big cards in a row (mockup-Lebanon) */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); min-width: 0; }
.bigcard { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bigcard h3 { font-family: var(--font-serif); font-size: 1.19rem; line-height: 1.24; letter-spacing: -.01em; }
[dir="rtl"] .bigcard h3 { letter-spacing: 0; line-height: 1.5; }
.bigcard .dek { margin: 0; font-size: .8rem; color: var(--dim); line-height: 1.5; }
.bigcard:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.cs-after { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); margin-block-start: var(--sp-3); }
.cs-after a { display: block; padding-block: 10px; border-top: 1px solid var(--line); }
.cs-after h4 { font-family: var(--font-serif); font-size: .97rem; font-weight: 600; line-height: 1.3; margin-block-end: 5px; }
[dir="rtl"] .cs-after h4 { line-height: 1.55; }
.cs-after a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }

/* ---- edition picker (mockup-v1 SCOPE | LANGUAGE popover) */
.edpop {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 80;
  width: min(320px, calc(100vw - 24px)); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 14px; padding: 14px;
  box-shadow: var(--shadow-pop); display: none; text-align: start; cursor: default;
}
.edpop.open { display: block; }
.edpop-end { inset-inline-start: auto; inset-inline-end: 0; }
.edpop h5 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--mute); margin: 2px 0 8px; font-weight: 700; }
.edchips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 12px; }
.edchips button, .edchips a {
  font-weight: 600; font-size: .8125rem; padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line); color: var(--dim); cursor: pointer; display: inline-block;
}
@media (hover: hover) {
  /* hover-capable devices only — on touch, sticky :hover was repainting a
     just-tapped .sel chip ink-on-ink (P2.2c-1) */
  .edchips button:hover, .edchips a:hover { border-color: var(--line-2); color: var(--text); }
}
.edchips .sel, .edchips button.sel:hover, .edchips a.sel:hover { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); }
.edchips.hid { display: none; }
.edpop .note { font-size: var(--fs-xs); color: var(--mute); line-height: 1.5; border-top: 1px solid var(--line); padding-block-start: 9px; margin-block-end: 0; }

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; gap: var(--sp-5); }
  .cs-after { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ladate { display: inline; }
  .latitle h1 { font-size: 1.45rem; }

  /* v3 mobile top restored (P2.1-2): full-bleed, square corners, scrim overlay.
     Containment: the bleed is exactly the wrap gutter; width can never exceed
     the viewport (max-width guard), and every ancestor is min-width:0 flow. */
  .mleadcard { margin-inline: calc(-1 * var(--sp-4)); max-width: 100vw; }
  .mleadcard .mlthumb { border-radius: 0; }
  .mlctrl { inset-inline-end: var(--sp-4); }
  .mbriefs { padding: var(--sp-4) var(--sp-4) var(--sp-1); }
  .mb-lead { grid-template-columns: 1fr 96px; gap: var(--sp-3); }
  .mb-lead .thumb { aspect-ratio: 1/1; }
}

/* unbriefed lead/desk: the same quoted source-headline honesty as story rows */
.hslide.src-headline .lead-h, .desk .col.src-headline h3 { font-style: italic; font-weight: 500; color: var(--dim); }
.hslide.src-headline .lead-h::before, .desk .col.src-headline h3::before { content: "\201C"; color: var(--mute); }
.hslide.src-headline .lead-h::after, .desk .col.src-headline h3::after { content: "\201D"; color: var(--mute); }
[dir="rtl"] .hslide.src-headline .lead-h::before, [dir="rtl"] .desk .col.src-headline h3::before { content: "\00AB\2009"; }
[dir="rtl"] .hslide.src-headline .lead-h::after, [dir="rtl"] .desk .col.src-headline h3::after { content: "\2009\00BB"; }

/* =====================================================================
   F6-P2.1 — surgical corrections
   ===================================================================== */

/* ---- #3 lead multi-story control: arrows + count + VISIBLE dots, one
        grammar on desktop and mobile. Manual only — the lead stays still. */
.leadctl { display: inline-flex; align-items: center; gap: 8px; }
.leadctl .arr {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--dim);
  font-size: .8rem; line-height: 1; transition: color var(--t-fast), border-color var(--t-fast);
}
.leadctl .arr:hover { color: var(--text); border-color: var(--text); }
.leadctl .cnt { font-size: var(--fs-xs); font-weight: 700; color: var(--dim); letter-spacing: .04em; min-width: 30px; text-align: center; }
[dir="rtl"] .leadctl .cnt { letter-spacing: 0; }
.leadctl .dots { gap: 7px; }
.leadctl .dots button { width: 9px; height: 9px; background: var(--line-2); }
.leadctl .dots button.on { background: var(--text); }
.leadctl .dots button:hover { background: var(--dim); }

/* mobile: same control, overlaid on the v3 lead (light chip so it reads on the scrim) */
.mlctrl {
  position: absolute; z-index: 3; top: 12px; inset-inline-end: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,.38); backdrop-filter: blur(6px);
  border-radius: var(--r-pill); padding: 5px 9px; color: #fff;
}
.mlctrl .arr { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); font-size: .8rem; }
.mlctrl .cnt { font-size: .656rem; font-weight: 700; color: rgba(255,255,255,.92); letter-spacing: .04em; }
[dir="rtl"] .mlctrl .cnt { letter-spacing: 0; }
.mlctrl .dots button { width: 7px; height: 7px; background: rgba(255,255,255,.45); }
.mlctrl .dots button.on { background: #fff; }

/* ---- #4 mobile breaking banner — v3 grammar: a solid red full-bleed ribbon,
        stacked and readable (label+meta line, then the headline). Desktop keeps
        the wash strip. */
@media (max-width: 620px) {
  .breakstrip {
    display: block; margin-inline: calc(-1 * var(--sp-4)); max-width: 100vw;
    border: 0; border-radius: 0; background: var(--c-breaking); color: #fff;
    padding: 10px var(--sp-4) 12px;
  }
  .breakstrip .tag { color: #fff; margin-block-end: 4px; }
  .breakstrip .tag .pulse, .breakstrip .tag .pulse::after { background: #fff; }
  .breakstrip .btxt.on { display: block; }
  .breakstrip .btxt .txt { display: block; color: #fff; font-size: .95rem; line-height: 1.35; font-weight: 600; }
  .breakstrip .btxt .ago { display: block; color: rgba(255,255,255,.75); font-size: .687rem; margin-block-start: 4px; }
}

/* ---- #5 category "sport-card" view (the carded strip; always the LAST strip,
        right before Latest): a row of cards — image top, badge, serif title,
        dek, honest corr (the mockups' card grammar). */
.cardgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); min-width: 0; }
.cardgrid .card { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cardgrid .card .thumb { aspect-ratio: 16/10; }
.cardgrid .card h3 { font-family: var(--font-serif); font-size: 1rem; line-height: 1.26; letter-spacing: -.008em; }
[dir="rtl"] .cardgrid .card h3 { letter-spacing: 0; line-height: 1.5; }
.cardgrid .card .dek { margin: 0; font-size: .75rem; color: var(--dim); line-height: 1.45; }
.cardgrid .card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .cardgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cardgrid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .cardgrid .card .dek { display: none; } }

/* ---- #6 picker: emoji, NEW, current-indication, confirm flow */
.edsw .em { font-size: .95rem; }
.edchips .nu { font-size: .53rem; font-weight: 800; vertical-align: top; margin-inline-start: 3px; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.edchips .cur:not(.sel) { border-style: dashed; border-color: var(--dim); color: var(--text); }
.edpop .edconfirm {
  display: block; width: 100%; text-align: center; margin-block-start: 4px;
  background: var(--btn); color: var(--btn-fg); font-weight: 600; font-size: .84rem;
  border-radius: var(--r-m); padding: 10px 14px;
}
.edpop .edconfirm[disabled] { opacity: .45; cursor: not-allowed; }
.edpop .edcur { font-size: var(--fs-xs); color: var(--mute); margin-block-end: 10px; }

/* =====================================================================
   F6-P2.2 — surgical corrections
   ===================================================================== */

/* ---- #1 mobile: clear air between the full-bleed lead and At-a-glance
        (the railhead used to touch the lead image — 0px). Light AND dark. */
@media (max-width: 620px) {
  /* P2.2c-5: 24px read as cramped once the railhead underline went — 32px */
  .toplead + .glancewrap { margin-block-start: var(--sp-7); }
}

/* ---- #2 kill the pager's scroll track on EVERY engine. scrollbar-width /
        ::-webkit-scrollbar stay (cheap), but Safari/iOS don't reliably honor
        them, so the scroller also gets sacrificial bottom padding and
        .glanceclip (overflow:hidden) masks the strip the track paints in.
        Swipe + dots unchanged. Also: the rail bleeds edge-to-edge with the
        wrap gutter as inline padding, so cards scroll to the screen edge
        (same containment pattern the v3 lead proved at 390px). */
@media (max-width: 620px) {
  .glanceclip { overflow: hidden; margin-inline: calc(-1 * var(--sp-4)); max-width: 100vw; }
  .glance { padding-block-end: 24px; margin-block-end: -20px; padding-inline: var(--sp-4); scroll-padding-inline: var(--sp-4); }
}

/* ---- #3 restored richer "sport-style" card grid — the closure strip.
        3-up on desktop; a single richer column ≤900px (all 3 stay visible,
        deks stay on — this is the "sit with it" separator before Latest). */
.sportgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); min-width: 0; }
.sportgrid .card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sportgrid .card .thumb { aspect-ratio: 16/9; }
.sportgrid .card h3 { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.24; letter-spacing: -.01em; }
[dir="rtl"] .sportgrid .card h3 { letter-spacing: 0; line-height: 1.5; }
.sportgrid .card .dek { margin: 0; font-size: .8rem; color: var(--dim); line-height: 1.5; }
.sportgrid .card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .sportgrid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ---- P2.2b-1 mobile: the railhead's desktop underline (v4 rail grammar)
        read as a stray separator between "AT A GLANCE" and the card pager —
        drop it under the slider; the desktop rail keeps it. Both themes. */
@media (max-width: 620px) {
  .glancewrap .railhead { border-bottom: 0; padding-block-end: 6px; }
}

/* =====================================================================
   F6-P2.2c — final La Une cleanup
   ===================================================================== */

/* ---- #2 directional arrows, ONE shared treatment: every `.more` see-more
        link draws its arrow here (templates carry no literal arrow), and it
        flips with the reading direction. RTL-correct by construction. */
.more::after { content: " \2192"; }
[dir="rtl"] .more::after { content: " \2190"; }

/* =====================================================================
   F6-P3b — collection templates + lens hubs
   ===================================================================== */

/* ---- lens header (both families). Thematic keeps the catstrip hue edge;
        geographic is ink + flag (place identity — hue belongs to categories). */
.lenshead { margin-block-end: 20px; }
.lenshead h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.015em; margin-block: 6px 4px; }
[dir="rtl"] .lenshead h1 { letter-spacing: 0; }
.catstrip.lenshead h1 { color: var(--hue-fg, var(--text)); }
.lenshead .lstats { font-size: var(--fs-s); color: var(--mute); }
.lenshead .lstats .crumb { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
/* F6 fix C.1 — a 0-story lens gets a quiet line, not a heavy empty panel */
.lenshead .lens-quiet { margin-block-start: 10px; font-size: var(--fs-s); color: var(--mute); }

/* F6 D-019 — THE MERGED VIEW (structural band at 1-2 filled members): sectioned
   per member (header = name + count), width-filling, reusing grid2's SMALL
   TRAILING THUMB (a related band is secondary nav — it must not outweigh the
   page). ~2 text rows + thumbs per column, like the old ministrip band. */
.bandmerged { display: grid; gap: var(--sp-6) var(--sp-8); }
.bandmerged[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.bandmerged[data-cols="1"] { grid-template-columns: 1fr; }
.bandmerged .bm-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding-block-end: 7px; border-block-end: 1px solid var(--line); margin-block-end: 10px; }
.bandmerged .bm-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: baseline; }
.bandmerged .bm-head:hover .bm-name { text-decoration: underline; text-underline-offset: 3px; }
.bandmerged .bm-n { font-size: var(--fs-xs); color: var(--mute); white-space: nowrap; }
/* 1 member → its 2 stories side by side; 2 members → stacked within each column */
.bandmerged[data-cols="1"] .bm-stories { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-8); }
.bandmerged[data-cols="2"] .bm-stories { display: grid; gap: var(--sp-4); }
/* the cell = grid2's g2-item treatment: text + a small 72×54 trailing thumb */
.bandmerged .bm-item { display: grid; grid-template-columns: 1fr 72px; gap: var(--sp-3); align-items: start; min-width: 0; padding-block: 8px; border-block-start: 1px solid var(--line); }
.bandmerged .bm-stories > .bm-item:first-child { border-block-start: 0; padding-block-start: 0; }
.bandmerged[data-cols="1"] .bm-item { border-block-start: 0; padding-block: 0; }
.bandmerged .bm-text { min-width: 0; }
.bandmerged .bm-item h4 { font-family: var(--font-serif); font-size: .95rem; font-weight: 600; line-height: 1.3; margin-block: 0 5px; }
[dir="rtl"] .bandmerged .bm-item h4 { line-height: 1.55; }
.bandmerged .bm-item:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.bandmerged .bm-item.src-headline h4 { font-style: italic; font-weight: 500; color: var(--dim); }
.bandmerged .bm-item.src-headline h4::before { content: "\201C"; color: var(--mute); }
.bandmerged .bm-item.src-headline h4::after { content: "\201D"; color: var(--mute); }
.bandmerged .bm-item .thumb.g2 { aspect-ratio: 4/3; border-radius: var(--r-s); }
.bandmerged .bm-badge { margin-block-end: 4px; }
@media (max-width: 640px) {
  .bandmerged[data-cols="2"] { grid-template-columns: 1fr; }
  /* F6-P3b-2 refinement D — a SINGLE-member band (data-cols="1") rendered its two
     stories 2-up at every width, cramping at 390px. data-cols encodes member COUNT
     (server-set, honest), so the fix is here: stack that member's stories to one
     column on mobile, matching how a 2-member band collapses. */
  .bandmerged[data-cols="1"] .bm-stories { grid-template-columns: 1fr; }
}
.lens-geo .flag { font-size: 1.6rem; margin-inline-end: 10px; vertical-align: -2px; }
.lens-geo .eyebrow .crumb { color: var(--dim); text-transform: none; letter-spacing: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lens-geo .eyebrow .crumbsep { margin-inline: 4px; }

/* ---- stream filter chips — CONTROLS, so ink only (never signal) */
.fchips { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin-block-end: var(--sp-4); }
.fchips .fgroup { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fchips .fgroup + .fgroup { border-inline-start: 1px solid var(--line); padding-inline-start: 14px; }
.fchips a {
  font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
  display: inline-flex; gap: 5px; align-items: center;
}
.fchips a:hover { border-color: var(--line-2); color: var(--text); }
.fchips a.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.fchips a .lg { font-size: .656rem; font-weight: 500; color: var(--mute); }
.fchips a.on .lg { color: color-mix(in srgb, var(--bg) 75%, transparent); }

/* ---- mini-strips: light teaser columns (region→country drill, sub-themes) */
.mstrips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--sp-6); min-width: 0; }
.mstrip { min-width: 0; padding-inline: var(--sp-5); border-inline-start: 1px solid var(--line); }
.mstrip:first-child { padding-inline-start: 0; border-inline-start: 0; }
.mstrip .ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-block-end: 8px; border-bottom: 1px solid var(--line); }
.mstrip .ms-name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; letter-spacing: -.008em; }
[dir="rtl"] .mstrip .ms-name { letter-spacing: 0; }
.mstrip .ms-head:hover .ms-name { text-decoration: underline; text-underline-offset: 3px; }
.mstrip .ms-n { font-size: var(--fs-xs); color: var(--mute); white-space: nowrap; }
.mstrip .ms-row { display: block; padding-block: 10px; border-top: 1px solid var(--line); }
.mstrip .ms-row:nth-of-type(1) { border-top: 0; }
.mstrip .ms-row h4 { font-family: var(--font-serif); font-size: .95rem; font-weight: 600; line-height: 1.3; margin-block-end: 5px; }
[dir="rtl"] .mstrip .ms-row h4 { line-height: 1.55; }
.mstrip .ms-row:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .mstrips { grid-template-columns: 1fr; }
  .mstrip { padding-inline: 0; border-inline-start: 0; border-top: 1px solid var(--line); padding-block-start: 12px; margin-block-start: 12px; }
  .mstrip:first-child { border-top: 0; padding-block-start: 0; margin-block-start: 0; }
}

/* ---- pager — calm print pagination (prev/next + honest page count) */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-block-start: var(--sp-5); }
.pager .pbtn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--dim); font-size: .9rem;
}
.pager a.pbtn:hover { color: var(--text); border-color: var(--text); }
.pager .pbtn.off { opacity: .35; }
.pager .pcount { font-size: var(--fs-xs); font-weight: 700; color: var(--dim); letter-spacing: .04em; }
[dir="rtl"] .pager .pcount { letter-spacing: 0; }

/* unbriefed honesty extends to the smaller headline rows the collections use */
.src-headline h4 { font-style: italic; font-weight: 500; color: var(--dim); }
.src-headline h4::before { content: "\201C"; color: var(--mute); }
.src-headline h4::after { content: "\201D"; color: var(--mute); }
[dir="rtl"] .src-headline h4::before { content: "\00AB\2009"; }
[dir="rtl"] .src-headline h4::after { content: "\2009\00BB"; }

/* ---- lens hubs: header, teaser-strip sub-line, compact directory rows,
        topic cards, and the Places world directory */
.hubhead { margin-block-end: 18px; }
.hubhead h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.015em; margin-block-end: 4px; }
[dir="rtl"] .hubhead h1 { letter-spacing: 0; }
.hubhead .lstats { font-size: var(--fs-s); color: var(--mute); }
.hubsub { font-size: var(--fs-xs); color: var(--mute); margin-block: -6px 10px; }

/* tier 3/4 — one honest row per member: name · count · latest headline */
.hubrows { min-width: 0; }
.hubrow { display: grid; grid-template-columns: 200px 110px 1fr; gap: var(--sp-4); align-items: baseline; padding-block: 11px; border-top: 1px solid var(--line); }
.hubrow:first-child { border-top: 0; }
.hubrow .hr-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: baseline; }
.hubrow .hr-n { font-size: var(--fs-xs); color: var(--mute); white-space: nowrap; }
.hubrow .hr-hl { min-width: 0; overflow: hidden; }
/* 2c: the long-tail headline is explicitly LABELLED so its role is obvious. */
.hubrow .hr-lbl { font-size: .58rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--mute); margin-inline-end: 6px; }
[dir="rtl"] .hubrow .hr-lbl { letter-spacing: 0; }
.hubrow .hr-t { font-family: var(--font-serif); font-size: .95rem; font-weight: 500; line-height: 1.3; color: var(--dim); }
.hubrow:hover .hr-name { text-decoration: underline; text-underline-offset: 3px; }
.hubrow.is-muted .hr-name { color: var(--mute); font-weight: 600; }
/* gradient (2026-07-22): a row whose latest story has a photo carries a SMALL
   thumbnail — "some thumbnails where applicable", the tail stays text-only. */
.hubrow.has-thumb { grid-template-columns: 200px 110px 1fr 60px; }
.hubrow .hr-thumb { align-self: center; }
.hubrow .hr-thumb .thumb.hr { width: 60px; aspect-ratio: 10/7; border-radius: var(--r-s); }  /* 60×42; photo or hued tile via x-tib.media */
@media (max-width: 620px) {
  .hubrow, .hubrow.has-thumb { grid-template-columns: 1fr auto; }
  .hubrow .hr-hl, .hubrow .hr-thumb { display: none; }
}

/* 2f: related band — labelled groups so a pill row is never unexplained. */
.relband .sectitle { margin-block-end: var(--sp-3); }
.relgroup { margin-block-end: 12px; }
.relgroup:last-child { margin-block-end: 0; }
.relgroup > .eyebrow { display: block; margin-block-end: 7px; }

/* topics hub tier 2 — honest topic cards */
.hubcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); min-width: 0; }
.topcard { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: var(--sp-4); min-width: 0; }
.topcard .tc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.topcard .tc-name { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 700; }
.topcard .tc-head:hover .tc-name { text-decoration: underline; text-underline-offset: 3px; }
.topcard .tc-n { font-size: var(--fs-xs); color: var(--mute); white-space: nowrap; }
.topcard .tc-sub { font-size: var(--fs-xs); color: var(--mute); margin-block-start: 2px; }
.topcard .tc-row { display: block; padding-block: 9px; border-top: 1px solid var(--line); margin-block-start: 9px; }
.topcard .tc-row + .tc-row { margin-block-start: 0; }
.topcard .tc-row h4 { font-family: var(--font-serif); font-size: .93rem; font-weight: 600; line-height: 1.3; margin-block-end: 4px; }
[dir="rtl"] .topcard .tc-row h4 { line-height: 1.55; }
.topcard .tc-row:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .hubcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .hubcards { grid-template-columns: 1fr; } }

/* places hub — the world directory (grouped by region, honest 30d counts) */
.dirgroup { margin-block-end: var(--sp-5); }
.dg-head { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--dim); margin-block-end: 8px; }
[dir="rtl"] .dg-head { letter-spacing: 0; }
a.dg-head:hover { text-decoration: underline; text-underline-offset: 3px; }
.dirgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--sp-6); }
.dirrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding-block: 7px; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.dirrow .dr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dirrow .dr-n { font-size: var(--fs-xs); color: var(--mute); }
.dirrow:hover .dr-name { text-decoration: underline; text-underline-offset: 3px; }
.dirrow.is-muted .dr-name { color: var(--mute); font-weight: 500; }
@media (max-width: 900px) { .dirgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .dirgrid { grid-template-columns: 1fr; } }

/* gated hubs (AR/FR): rows carry no headline column — 2-col grid */
.hubrow:not(:has(.hr-hl)) { grid-template-columns: 1fr auto; }

/* small-lens stream note (everything already in highlights) */
.streamnote { font-size: var(--fs-s); color: var(--mute); font-style: italic; margin-block: 4px 0; }

/* =====================================================================
   F6-P3c — entry-point mode (a promoted scope's front door) + Beats prototype
   ===================================================================== */
/* entry-point chip: replaces the edition picker inside a promoted front door */
.epchip { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; }
.epchip .ep-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.epchip .ep-exit { font-weight: 600; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; margin-inline-start: 4px; }
.epchip .ep-exit:hover { color: var(--text); }
/* D-049 — the entry-point language picker (EN · AR · FR) */
.epchip .ep-langs { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; }
.epchip .ep-lang { font-weight: 600; color: var(--dim); text-decoration: none; padding: 1px 6px; border-radius: 999px; line-height: 1.6; }
.epchip .ep-lang:hover { color: var(--text); }
.epchip .ep-lang.on { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* Beats-row entry-point discovery prototype (home): flag-forward door cards */
.epdoors { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.epdoors a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-l);
  padding: 10px 15px; font-weight: 700; background: var(--surface); }
.epdoors a:hover { border-color: var(--text); }
.epdoors a .em { font-size: 1.1rem; }
.epdoors a .sub { font-size: var(--fs-xs); color: var(--mute); font-weight: 500; }
.epnote { font-size: var(--fs-xs); color: var(--mute); margin-block-start: 6px; }

/* =====================================================================
   F6-P3b V4 — Tier-2 image card (grid2thumb): 2×2 stories, trailing thumbs
   ===================================================================== */
.grid2thumb { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); min-width: 0; }
.g2-item { display: grid; grid-template-columns: 1fr 72px; gap: var(--sp-3); align-items: start; padding-block: 10px; border-top: 1px solid var(--line); min-width: 0; }
/* first row of each column has no top rule */
.grid2thumb .g2-item:nth-child(-n+2) { border-top: 0; padding-block-start: 0; }
.g2-item .g2-text { min-width: 0; }
.g2-item .g2-badge { margin-block-end: 5px; }
.g2-item h4 { font-family: var(--font-serif); font-size: .97rem; font-weight: 600; line-height: 1.3; margin-block-end: 5px; }
[dir="rtl"] .g2-item h4 { line-height: 1.55; }
.g2-item:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.g2-item .thumb.g2 { aspect-ratio: 4/3; border-radius: var(--r-s); }  /* 72px column → 72×54; photo or labelled tile via x-tib.media */
.g2-item .thumb.g2 .tlabel { font-size: .5rem; padding: 5px; letter-spacing: .04em; }
.g2-item .g2-text.src-headline h4 { font-style: italic; font-weight: 500; color: var(--dim); }
.g2-item .g2-text.src-headline h4::before { content: "\201C"; color: var(--mute); }
.g2-item .g2-text.src-headline h4::after { content: "\201D"; color: var(--mute); }
@media (max-width: 620px) {
  .grid2thumb { grid-template-columns: 1fr; gap: 0; }
  .grid2thumb .g2-item:nth-child(2) { border-top: 1px solid var(--line); padding-block-start: 10px; }
}

/* ============================================================================
   F6-P3b-2 — THE STORIES HUB (surfing feed). Ink only (colour law: red=Breaking,
   amber=Developing live only, everything else ink). LOGICAL properties only —
   RtlLayoutTest forbids physical left/right here, which is what makes it flip.
   ========================================================================== */
/* HEAD (v10 .v10head) — title + order toggle + search pushed to the far end (desktop). */
.feedhead { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-block: var(--sp-5) 0; }
.feedtitle { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
[dir="rtl"] .feedtitle { font-family: var(--font-ar-display), var(--font-serif); }
/* RANKED / LATEST segmented toggle (v10 .ordtoggle2) — the active side filled with --btn. */
.ordtoggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; font-size: 12.5px; font-weight: 600; }
.ordtoggle a { padding: 7px 14px; color: var(--mute); }
.ordtoggle a.on { background: var(--btn); color: var(--btn-fg); }
/* SEARCH (v10 .search) — a pill box wrapping a real <input name="q"> + a ⌕ submit. Desktop:
   in the head, pushed to the far end. Mobile: hidden in the head, shown big in .m-searchrow. */
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-pill); padding: 8px 14px; color: var(--mute); font-size: 13px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); padding: 0; }
.search input::placeholder { color: var(--mute); }
.search input:focus { outline: none; }
.search .go { border: 0; background: transparent; color: var(--mute); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.feedhead .search { min-width: 220px; margin-inline-start: auto; }
.m-searchrow { display: none; }
/* FILTERS button (v10 .filterbtn) — mobile only; a raised SURFACE button, distinct from pills. */
.filterbtn { display: none; align-items: center; gap: 7px; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.10); cursor: pointer; white-space: nowrap; }
/* SCOPE TABS — ink underline on the active tab (reader editions only). */
.scopetabs { display: flex; gap: var(--sp-5); border-block-end: 1px solid var(--line); margin-block-end: var(--sp-4); overflow-x: auto; }
.scopetabs a { padding-block: 9px; font-size: var(--fs-s); font-weight: 600; color: var(--mute); white-space: nowrap; border-block-end: 2px solid transparent; margin-block-end: -1px; }
.scopetabs a.on { color: var(--ink); border-block-end-color: var(--ink); }
/* FILTER BAR — the product on this surface. */
.filterbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-block-end: var(--sp-5); }
.fsearch { flex: 1 1 240px; min-width: 0; padding: 9px 14px; font: inherit; font-size: var(--fs-s); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); }
.fsearch:focus { outline: none; border-color: var(--line-2); }
.fchips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.fchip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: var(--fs-s); font-weight: 600; color: var(--dim); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); white-space: nowrap; }
.fchip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fchip.clear { color: var(--mute); background: none; border-style: dashed; }
/* THE FEED — a readable surfing column, one stream. */
.feed { max-width: 680px; margin-inline: auto; }
/* TIMELINE SEPARATOR (v10 .v10sep) — sticky, weighted serif day + muted date + a trailing
   ruled line. Sticks to the top of the viewport while its section scrolls. */
/* --stick-top = the height of the sticky nav so the feed separators + rail sit JUST below
   it (not behind it): desktop nav 64px, mobile nav 60px (overridden below). */
:root { --stick-top: 60px; }
.feedsep { position: sticky; top: var(--stick-top); z-index: 3; display: flex; align-items: baseline; gap: var(--sp-3);
  /* reverted to the mockup's soft-fade background (owner preferred it); TALLER opaque band
     (padding + 85% stop) so a pinning separator covers the previous one's text/line. */
  padding-block: var(--sp-6) var(--sp-3); margin-block: var(--sp-5) var(--sp-2);
  background: linear-gradient(var(--bg), var(--bg) 85%, transparent); }
.feedsep b { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
[dir="rtl"] .feedsep b { font-family: var(--font-ar-display), var(--font-ar); }
.feedsep .d { font-size: 12px; letter-spacing: .06em; color: var(--mute); }
.feedsep::after { content: ""; flex: 1; height: 2px; border-radius: 3px; background: var(--line-2); align-self: center; }
/* 5b place tag — rendered only when a story isn't about the edition's country (D-054).
   Minimal functional style; the final look is PART 6. */
.feedplace { font-weight: 700; color: var(--dim); }
.feedplace::before { content: "\25C8"; margin-inline-end: 3px; opacity: .55; font-size: .85em; }
/* FEATURE card (significant) — media + body, the emphasis form. */
.fcard { display: block; padding-block: var(--sp-5); border-block-end: 1px solid var(--line); }
.fcard .fc-media .thumb { margin-block-end: var(--sp-4); }
/* point 1a — the feature media is a CONTAINED banner, never the whole viewport: cap it at
   ~300px on desktop (object-fit:cover already crops the photo; a hue tile is likewise capped).
   Mobile keeps the .big 16/9 ratio. */
@media (min-width: 901px) { .fcard .fc-media .thumb.big { aspect-ratio: auto; height: 300px; } }
.fcard h3 { font-family: var(--serif, Georgia, serif); font-size: 1.32rem; font-weight: 700; line-height: 1.22; margin-block: 4px 6px; }
.fcard .dek { font-size: var(--fs-s); color: var(--dim); line-height: 1.5; margin-block-end: 8px; }
.fcard .m, .crow .cr-meta { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-s); color: var(--mute); flex-wrap: wrap; }
.fcard .src-attr { margin-block: 4px 8px; }
/* STANDARD card reuses the .er row (elist) grid, outside its hub context. */
.feed .er { display: grid; grid-template-columns: 1fr 84px; gap: var(--sp-4); align-items: start; padding-block: var(--sp-4); border-block-end: 1px solid var(--line); }
.feed .er .thumb { aspect-ratio: 1/1; border-radius: var(--r-m); }
.feed .er h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.feed .er .m { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-s); color: var(--mute); margin-block-start: 5px; flex-wrap: wrap; }
/* COMPACT text row (normal + no image) — density, not a degraded class. */
/* compact / no-image row — same grid as the standard .er row (1fr + 84px), so the text
   column ALIGNS and the (reserved, hidden) image slot keeps the space. Meta sits BELOW
   the title (a .m row inside .cr-main), never in a far-end column. */
.crow { display: grid; grid-template-columns: 1fr 84px; gap: var(--sp-4); align-items: start; padding-block: var(--sp-4); border-block-end: 1px solid var(--line); }
.crow h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-block-start: 3px; }
.crow .m { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-s); color: var(--mute); flex-wrap: wrap; margin-block-start: 5px; }
.crow .cr-noimg { aspect-ratio: 1/1; visibility: hidden; }
@media (max-width: 700px) { .crow { grid-template-columns: 1fr 0; gap: 0; } .crow .cr-noimg { display: none; } }
/* LAST-DIVIDER (point 8b): the row that immediately precedes a separator ends a timeline
   section — drop its bottom rule so a divider never butts the section separator; likewise the
   very last row of the feed. Dividers BETWEEN stories stay. Rows are direct <a> children. */
.feed > a:has(+ .feedsep) { border-block-end: none; }
.feed > a:last-of-type { border-block-end: none; }
/* LOAD MORE (v10 .loadmore2) — a real link, progressively enhanced. The loading state shows a
   spinner + label (jar/ Loading…) instead of the idle "Load more" text. */
.loadmore { display: flex; justify-content: center; padding-block: var(--sp-5); }
.loadmore-btn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 22px; font-size: 13px; font-weight: 600; color: var(--dim); background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer; }
.loadmore-btn .lm-busy { display: none; align-items: center; gap: 9px; }
.loadmore.loading .loadmore-btn { pointer-events: none; }
.loadmore.loading .lm-idle { display: none; }
.loadmore.loading .lm-busy { display: inline-flex; }
.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--text); animation: tib-spin 1s linear infinite; }
@keyframes tib-spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) {
  .feed, .loadmore { max-width: 100%; }
  .fcard h3 { font-size: 1.18rem; }
}

/* ============================================================================
   F6 v10 (D-062) — STORIES-HUB CHROME. Feed at the START (~680), a STICKY rail on the far
   side that scrolls INTERNALLY (so its foot stays reachable), the whole [feed+rail] block
   centered by .wrap. Rows are unchanged (locked) — this is layout AROUND the rows. Mobile:
   single column; the rail's controls move into a Filters SHEET, and a big search + a Filters
   button sit under the pills. Ported verbatim from /public/mockup/v10.
   ========================================================================== */
.storiescols { display: grid; grid-template-columns: minmax(0,1fr) var(--rail-w); gap: 44px; align-items: start; }
.storiescols .feed { max-width: none; margin-inline: 0; width: 100%; }
.storiescols .loadmore { max-width: none; }
@media (min-width: 901px) {
  .storiescols { grid-template-columns: 680px var(--rail-w); justify-content: space-between; gap: 0; }
  /* sticky rail. NO internal overflow — that forced overflow-x:auto which CLIPPED the selected
     facet's overhang pill (killing its rounded corners + side padding). The show-more/less caps
     keep the rail short enough; when a group is expanded the page just scrolls. */
  .storail { padding-block-start: var(--sp-5); position: sticky; top: var(--stick-top); align-self: start; }
}
@media (max-width: 900px) {
  :root { --stick-top: 58px; }                       /* mobile nav is 60px (point 5) */
  body { overflow-x: hidden; }
  .storiescols { grid-template-columns: 1fr; gap: 0; }
  .storail { display: none; }                       /* rail → Filters sheet on mobile */
  .feedhead .search { display: none; }               /* head search → the big m-searchrow */
  .m-searchrow { display: flex; align-items: center; gap: var(--sp-2); margin-block: var(--sp-3) var(--sp-4); }
  .m-searchrow .search { flex: 1; min-width: 0; padding: 11px 16px; font-size: 14px; }
  .filterbtn.m-filter { display: inline-flex; }
}
/* rail + sheet share their group / heading / chipflow treatment (identical, point 6). */
.storail h4, .sheet h4 { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); margin-block-end: var(--sp-2); }
.storail .grp { border-block-start: 1px solid var(--line); padding-block: var(--sp-4); }
.storail .grp:first-child { border-block-start: 0; padding-block-start: 0; }
.storail .chipflow, .sheet .chipflow { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: 2px; }

/* ONE-PILL-ROW (v10): a base .pill component used by the scope/state pill row AND the rail/
   sheet STATUS group (point 5 — status uses .pill, NOT .chip, so Breaking→red / Developing→
   amber when active, All→ink; never the generic black .chip.on). */
.pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-block: var(--sp-3); scrollbar-width: none; -ms-overflow-style: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 8px 15px; font-size: var(--fs-s); font-weight: 600; color: var(--dim); background: transparent; white-space: nowrap; }
.pill .c { font-size: 11.5px; opacity: .65; font-variant-numeric: tabular-nums; }
/* MOBILE: the pill row (scope OR state tabs) scrolls horizontally, no scrollbar (point 6).
   Placed AFTER the base .pills so it wins on mobile (a source-order fix). */
@media (max-width: 900px) { .pills { flex-wrap: nowrap; overflow-x: auto; } }
.pill.on { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); }
.pill.breaking { color: var(--c-breaking); border-color: color-mix(in srgb, var(--c-breaking) 50%, transparent); }
.pill.breaking.on { background: var(--c-breaking); color: #fff; border-color: var(--c-breaking); }
.pill.developing { color: var(--c-live); border-color: color-mix(in srgb, var(--c-live) 50%, transparent); }
.pill.developing.on { background: var(--c-live); color: #fff; border-color: var(--c-live); }
/* NEW status (point 12) — selected reads like the .b-fresh badge (quiet grey/dim tonal),
   NOT the ink-black .pill.on. Breaking→red / Developing→amber / All→ink stay as above. */
.pills .pill.new.on, .storail .pill.new.on, .sheet .pill.new.on { background: var(--surface-2); color: var(--dim); border-color: var(--surface-2); }
/* status pills inside the rail/sheet read a touch tighter than the tab row. */
.storail .statusgrp .pill, .sheet .statusgrp .pill { padding: 6px 13px; font-size: 12px; }

/* rail + sheet FACETS (categories/topics/countries) with counts + category HUE. Neutral by
   default; the selected facet is bold + a soft highlight (categories carry a soft hue bg;
   country/topic get a soft neutral bg — point 6). */
/* FACETS — COPIED VERBATIM from /mockup/v10 (owner: copy the mockup). No gap / no
   align-items on .facet; the selected soft pill (r-s, padding-inline 8px, margin -8px) is on
   the HUED (category) facets; a selected non-hued facet (All/topics/countries) is bold ink. */
.storail .facet, .sheet .facet { display: flex; justify-content: space-between; padding-block: 5px; font-size: 13px; color: var(--dim); text-decoration: none; }
.sheet .facet { padding-block: 7px; }
.storail .facet .c, .sheet .facet .c { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.storail .facet.on, .sheet .facet.on { color: var(--text); font-weight: 700; }
/* every selected facet — INCLUDING "All" — gets the soft PADDED, rounded-rect highlight
   (surface-2 for plain/All, the hue-soft for categories). */
.storail .facet.on, .sheet .facet.on { background: var(--surface-2); border-radius: var(--r-m); padding-inline: 10px; margin-inline: -10px; }
.storail .facet.hued, .sheet .facet.hued { color: var(--hue-fg); }
.storail .facet.hued .c, .sheet .facet.hued .c { color: var(--mute); }
.storail .facet.hued.on, .sheet .facet.hued.on { color: var(--hue-fg); background: var(--hue-soft); }
/* PER-SECTION "show more / show less" (point 3): a group longer than ~6 facets folds the
   overflow into a <details>; the summary swaps its label on open. CSS-only, no JS. The
   overflow facets are ordinary .facet <a>s once revealed. */
/* show more / show less (points 3+4): the toggle CONTROL stays at the BOTTOM of the group;
   opening APPENDS the overflow facets ABOVE it. CSS-only (hidden checkbox + label). The
   label is centered + distinguished (a pill). */
.facetmore-cb { position: absolute; opacity: 0; pointer-events: none; }
.facetmore-extra { display: none; }
.facetmore-cb:checked ~ .facetmore-extra { display: block; }
.facetmore-lbl { display: inline-flex; align-items: center; justify-content: center; margin-block-start: 10px;
  padding: 5px 14px; font-size: 12px; font-weight: 700; color: var(--dim); cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); }
.storail .facetmore-lbl, .sheet .facetmore-lbl { display: flex; inline-size: fit-content; margin-inline: auto; }
.facetmore-lbl:hover { color: var(--text); border-color: var(--text); }
.facetmore-lbl .less-lbl { display: none; }
.facetmore-cb:checked ~ .facetmore-lbl .more-lbl { display: none; }
.facetmore-cb:checked ~ .facetmore-lbl .less-lbl { display: inline; }
/* point 1 — a down arrow on "show more", an up arrow on "show less". */
.facetmore-lbl .more-lbl::after { content: " \25BE"; }
.facetmore-lbl .less-lbl::after { content: " \25B4"; }

/* mobile Filters SHEET + scrim (v10). Never on desktop; closed by default; opens on the ⚙. */
.filt-toggle { position: absolute; opacity: 0; pointer-events: none; }
.sheet, .scrim { display: none; }
/* point 7 — the sheet is a flex column that maxes at 85vh: grab + header stay pinned at the
   top while ONLY .sheet-body scrolls. z-index 70/scrim 69 raise it ABOVE the fixed bottom
   .tabbar (z-60) so its content is never clipped; safe-area padding clears the last facet. */
.sheet { position: fixed; inset-inline: 0; inset-block-end: 0; background: var(--surface);
  border-start-start-radius: 18px; border-start-end-radius: 18px; box-shadow: 0 -18px 44px -22px rgba(0,0,0,.4);
  border-block-start: 1px solid var(--line); padding: 16px 0 0; z-index: 70; max-width: 520px; margin: 0 auto;
  /* display stays none (set above) until opened on mobile — flex layout applies then. The inline
     padding lives on the header + scroll body (not .sheet) so the scrolling body does NOT clip
     the selected pill's overhang. */
  flex-direction: column; max-height: 85vh; }
.sheet .grab { width: 38px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto 14px; flex: 0 0 auto; }
.sheet-hd { position: sticky; top: 0; z-index: 1; background: var(--surface); flex: 0 0 auto; padding-inline: 20px;
  display: flex; justify-content: space-between; align-items: center; padding-block-end: 10px; }
.sheet-hd b { font-family: var(--font-serif); font-size: 1.05rem; }
[dir="rtl"] .sheet-hd b { font-family: var(--font-ar-display), var(--font-serif); }
.sheet-x { color: var(--mute); font-size: 20px; cursor: pointer; line-height: 1; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-inline: 20px; padding-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.sheet .sheetgrp { border-block-start: 1px solid var(--line); padding-block: 14px; }
.sheet .sheetgrp:first-of-type { border-block-start: 0; padding-block-start: 4px; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 69; }
@media (max-width: 900px) {
  .filt-toggle:checked ~ .sheet { display: flex; }
  .filt-toggle:checked ~ .scrim { display: block; }
}

/* ============================================================================
   F6-P3b-2 Phase 4 — STORY-PAGE UPLIFT (dateline · byline · CTA · cited S-labels ·
   related). Ink only (colour law). Logical properties only (RtlLayoutTest-clean).
   ========================================================================== */
.dateline { color: var(--mute); }
/* brief footer: byline (method attribution). CTA relocated to the rail foot / mobile dock. */
.brieffoot { margin-block-start: var(--sp-5); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line); }
.byline { font-size: var(--fs-s); color: var(--mute); font-style: italic; }

/* CTA (D-022, D-043) — the v2/v3 mockup's `.linkbtn` (9px = --r-m, filled, 11×15,
   .84rem, centred). Desktop = foot of the right rail (.rail-cta), mobile = a docked
   bar (.cta-dock). COLOUR LAW (D-043, supersedes D-042's colour rule): Breaking → RED,
   Developing → AMBER, everything else → INK/PAPER only — NO category hue on the CTA
   ever (deliberately unlike the S-labels). Amber-text = --btn-fg, which flips
   white-in-light / dark-in-dark, so it stays legible on --c-live in both themes. */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 15px; font-family: var(--font-sans); font-size: .84rem; font-weight: 600; color: var(--btn-fg); background: var(--btn); border: 0; border-radius: var(--r-m); }
.cta:hover { filter: brightness(1.06); }
/* trailing arrow via ::after (the shared .more treatment) so it MIRRORS under RTL. */
.cta::after { content: "\2192"; }
[dir="rtl"] .cta::after { content: "\2190"; }
.stf-breaking .cta { background: var(--c-breaking); color: #fff; }
.stf-developing .cta { background: var(--c-live); color: var(--btn-fg); }
/* desktop: the CTA sits full-width at the foot of the rail. */
.rail-cta { margin-block-start: var(--sp-4); }
.rail-cta .cta { display: flex; width: 100%; }
/* S-label on a genuinely-cited SOURCE SPREAD row (opens the source, D-021; cited rows
   only). The mockup's .lb badge, LEADING the row (first column, 24×20). COLOUR LAW
   INCLUDING category hue (D-043 — deliberately UNLIKE the CTA): Breaking → red-weak,
   Developing → amber-weak, else the category hue. Uncited rows keep an empty gutter
   (.srcite-gap) so the outlet names stay aligned. */
.spread .srcite, .spread .srcite-gap { flex: none; min-width: 24px; height: 20px; box-sizing: border-box; }
.spread .srcite { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: .625rem; font-weight: 800; letter-spacing: .02em; color: var(--hue-fg, var(--dim)); background: var(--hue-soft, var(--surface-2)); border-radius: var(--r-s); padding: 0 5px; }
.spread .srcite:hover { text-decoration: underline; text-underline-offset: 2px; }
.stf-breaking .spread .srcite { color: var(--c-breaking); background: var(--c-breaking-weak); }
.stf-developing .spread .srcite { color: var(--c-live); background: var(--c-live-weak); }
/* RELATED STORIES · OTHER DEVELOPING (taxonomy overlap). */
.relwrap { margin-block-start: var(--sp-7); padding-block-start: var(--sp-6); border-block-start: 1px solid var(--line); }
.relsec { margin-block-end: var(--sp-6); }
.reltitle { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-block-end: var(--sp-4); }
.relgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); min-width: 0; }
.relcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.relcard .thumb { aspect-ratio: 16/10; border-radius: var(--r-m); }
.relcard-b h4 { font-family: var(--font-serif); font-size: 1rem; line-height: 1.25; font-weight: 600; letter-spacing: -.005em; }
.relcard-b .m { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); color: var(--mute); margin-block-start: 4px; flex-wrap: wrap; }
.relcard-b .eyebrow { display: block; margin-block-end: 3px; }
@media (max-width: 900px) { .relgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .relgrid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }