/* Median website design system (docs/WEBSITE_SPEC.md section 4). Phase W1.
   Every value is a token below; components never use raw colours, sizes or spacing. */

/* ---------- fonts (self-hosted, cut per script by scripts/build_fonts.py) ---------- */
@font-face { font-family: "Median Sans"; src: url("fonts/sans-armenian.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: "Median Sans"; src: url("fonts/sans-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Median Sans"; src: url("fonts/sans-cyrillic.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Median Serif"; src: url("fonts/serif-armenian.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: "Median Serif"; src: url("fonts/serif-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Median Serif"; src: url("fonts/serif-cyrillic.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---------- tokens ---------- */
/* Colour: Apple's system colours and greys (Human Interface Guidelines, values of June 2025; Edmon,
   12 Oct 2026). Light (day) is the default; dark (night) follows the device setting unless the reader
   picked one with the header switch (html[data-theme], remembered in localStorage).
   Pro-government = Indigo, balanced = Gray, opposition = Orange, foreign = Teal, median line and
   blindspot = Yellow, focus ring = Blue. Under colour blindness every pair stays clearly apart. */
:root {
  color-scheme: light;
  --paper: #FFFFFF;            /* systemBackground */
  --ink: #000000;              /* label */
  --ink-muted: #6C6C70;        /* systemGray, increased contrast (AA 5.2 on white) */
  --surface: #F2F2F7;          /* systemGray6 */
  --rule: #D1D1D6;             /* systemGray4 */
  /* ONE Median yellow everywhere (Edmon, 12 Oct 2026): the "I" of the wordmark, the blindspot line, accents */
  --median-amber: #FFD600;     /* the Median yellow (R 255, G 214, B 0) */
  --brand-amber: #FFD600;      /* the same yellow: the wordmark's "I", the blindspot icon's line, the search caret */
  --amber-glow: rgba(255, 214, 0, 0.30);    /* soft yellow ring: focused search */
  --hatch: rgba(0, 0, 0, 0.09);             /* the "hidden" lines over Blindspot */
  --focus: #0088FF;            /* Blue */
  --side-progov: #0091FF;      /* Blue (Edmon, 12 Oct 2026), same day and night */
  --side-balanced: #8E8E93;    /* Gray */
  --side-opposition: #FF9230;  /* Orange (Edmon, 12 Oct 2026), same day and night */
  --side-foreign: #00C3D0;     /* Teal: foreign markers only, never in the 3-part bar */
  --on-progov: #FFFFFF;        /* every percentage in the bar is white, no shadow (Edmon, 12 Oct 2026) */
  --on-balanced: #FFFFFF;
  --on-opposition: #FFFFFF;
  --on-amber: #000000;
  --tip-bg: #1C1C1E;           /* tooltips: dark box by day, light box at night */
  --tip-fg: #FFFFFF;
  --panel: #1C1C1E;            /* the no-photo panel */
  --on-panel: #FFFFFF;
  --photo-shade: rgba(0, 0, 0, 0.6);

  /* spacing: 4 8 12 16 24 32 48 64, nothing in between */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* type */
  --font-sans: "Median Sans", "Noto Sans Armenian", "Noto Sans", system-ui, sans-serif;
  --font-serif: "Median Serif", "Noto Serif Armenian", "Noto Serif", Georgia, serif;
  --fs-story: 1.625rem;   --lh-story: 1.25;
  --fs-hero: 1.375rem;    --lh-hero: 1.25;
  --fs-card-m: 1.125rem;  --lh-card: 1.35;
  --fs-card-s: 1rem;
  --fs-body: 1.0625rem;   --lh-body: 1.65;
  --fs-meta: 0.8125rem;   --lh-meta: 1.4;
  --fs-section: 1.25rem;

  /* shape */
  --radius: 2px;
  --radius-chip: 999px;
  --chip-h: 26px;
  --bar-mini: 6px;
  --bar-card: 8px;
  --bar-page: 20px;

  /* layout */
  --max: 1200px;
  --text-max: 680px;
  --gutter: 24px;
  --side-pad: 16px;
  --thumb-s: 88px;

  /* lines reserved for card M headlines so a row of cards lines up: room for the longest allowed
     headline (80 characters) in hy/ru/en, measured 11 Oct 2026. Phones show one card per row and
     the hero stands alone, so both take their natural height there. */
  --lines-l: 0;
  --lines-m: 0;
}
/* night: Apple's dark greys (systemGray6 / 5 / 4) and the dark variants of the system colours
   (WCAG AA: white on #1C1C1E 17.0, muted 7.7) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1C1C1E; --ink: #FFFFFF; --ink-muted: #AEAEB2; --surface: #2C2C2E; --rule: #3A3A3C;
    --focus: #0091FF;
    --side-foreign: #00D2E0;
    --tip-bg: #F2F2F7; --tip-fg: #000000; --panel: #2C2C2E; --hatch: rgba(255, 255, 255, 0.10);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1C1C1E; --ink: #FFFFFF; --ink-muted: #AEAEB2; --surface: #2C2C2E; --rule: #3A3A3C;
  --focus: #0091FF;
  --side-foreign: #00D2E0;
  --tip-bg: #F2F2F7; --tip-fg: #000000; --panel: #2C2C2E; --hatch: rgba(255, 255, 255, 0.10);
}
@media (min-width: 768px) {
  :root { --fs-story: 2.25rem; --fs-hero: 1.75rem; --side-pad: 24px; }
}
@media (min-width: 768px) { :root { --lines-m: 3; } }
@media (min-width: 1024px) { :root { --thumb-s: 96px; --lines-m: 4; } }
@media (min-width: 1280px) { :root { --lines-m: 3; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  overflow-wrap: anywhere;   /* long Armenian compounds never push the layout wider */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--side-foreign); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 50; background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s4); }
.skip-link:focus { top: var(--s2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--side-pad)); margin-inline: auto; padding-inline: var(--side-pad); }
.text-col { max-width: var(--text-max); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.grid > * { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) {
  .md-6 { grid-column: span 6 !important; }
  .md-4 { grid-column: span 4 !important; }
  .md-12 { grid-column: span 12 !important; }
}
@media (min-width: 1024px) {
  .lg-8 { grid-column: span 8 !important; }
  .lg-6 { grid-column: span 6 !important; }
  .lg-4 { grid-column: span 4 !important; }
  .lg-3 { grid-column: span 3 !important; }
}
.stack > * + * { margin-top: var(--s5); }
.section { padding-block: var(--s6); }
.section-title { font-size: var(--fs-section); line-height: 1.3; font-weight: 700; margin-bottom: var(--s4); }
.meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-meta);
  line-height: var(--lh-meta); color: var(--ink-muted); min-width: 0; }

/* ---------- icons ---------- */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 40px; height: 40px; stroke-width: 1.5; }

/* ---------- chips ---------- */
.chips { display: flex; gap: var(--s2); min-width: 0; min-height: var(--chip-h); }
/* chips are never cut: one line of 26 px, as wide as their words (every topic fits a phone card);
   a chip wider than its space (a very long storyline name) wraps to a second line instead */
.chip {
  display: inline-flex; align-items: center; min-height: var(--chip-h); max-width: 100%;
  padding: 0 var(--s3); border-radius: var(--radius-chip); background: var(--surface); color: var(--ink);
  font-size: var(--fs-meta); line-height: 1.3; font-weight: 500;
  flex: none; text-decoration: none; overflow-wrap: normal;
}
.chip-text { padding-block: 2px; }
.sl-scroll .chip { white-space: nowrap; }   /* the storyline row scrolls sideways instead */
/* blindspot: "unseen" (Edmon, 12 Oct 2026): a quiet chip with the crossed-out eye; the amber Median line is the
   only colour. On photos the chip is dark so it stays readable. */
.chip-blindspot { gap: var(--s1); padding-left: var(--s2); background-color: var(--surface); color: var(--ink); font-weight: 600;
  --blind-gap: var(--surface); }
.media-badge .chip-blindspot { background-color: #1C1C1E; color: #FFFFFF; --blind-gap: #1C1C1E; --hatch: rgba(255, 255, 255, 0.12); }
.chip-blindspot { background-image: repeating-linear-gradient(-55deg, transparent 0 4px, var(--hatch) 4px 5.5px);
  transition: background-size 0.5s ease; background-size: 100% 100%; background-repeat: no-repeat; }
.chip-blindspot .chip-text, .chip-blindspot .icon { opacity: 0.75; transition: opacity 0.3s ease; }
.chip-blindspot:hover, .chip-blindspot:focus, .chip-blindspot:focus-visible { background-size: 0% 100%; --blind-eye: 1;
  --blind-line: 0; --blind-cut: 0; }
.chip-blindspot:hover .chip-text, .chip-blindspot:hover .icon, .chip-blindspot:focus .chip-text, .chip-blindspot:focus .icon { opacity: 1; }
.chip-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
a.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip-side { gap: var(--s1); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.side-progov { background: var(--side-progov); }
.side-balanced { background: var(--side-balanced); }
.side-opposition { background: var(--side-opposition); }
.side-foreign { background: var(--side-foreign); }
.side-also { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-muted); }

/* tooltip (blindspot badge and other explanations): hover or keyboard focus, tap on phones */
.tip { position: relative; cursor: help; }
.tip-box {
  display: none; position: absolute; left: 0; top: calc(100% + var(--s2)); z-index: 30;
  width: max-content; max-width: min(280px, calc(100vw - 2 * var(--side-pad)));
  padding: var(--s2) var(--s3); border-radius: var(--radius); background: var(--tip-bg); color: var(--tip-fg);
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 400; white-space: normal;
}
.tip:hover .tip-box, .tip:focus-visible .tip-box, .tip:focus .tip-box { display: block; }

/* ---------- coverage bar ---------- */
.cbar { min-width: 0; container-type: inline-size; }
.cbar-track-wrap { position: relative; }
.cbar-track { display: flex; width: 100%; height: var(--bar-h, var(--bar-card)); background: var(--surface); overflow: hidden; }
.cbar-mini { --bar-h: var(--bar-mini); }
.cbar-card { --bar-h: var(--bar-card); }
.cbar-page { --bar-h: var(--bar-page); }
.seg { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-meta); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; }
.seg + .seg { box-shadow: inset 2px 0 0 var(--paper); }   /* a thin paper gap between segments */
.seg.side-progov { color: var(--on-progov); }
.seg.side-balanced { color: var(--on-balanced); }
.seg.side-opposition { color: var(--on-opposition); }
.cbar-below { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s2);
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; }
.cbar-below > span { display: flex; gap: var(--s3); }
.cbar-below > span:empty { display: none; }
.cbar-below > span:only-child { margin-inline: auto 0; }
.cbar-below > .start:only-child { margin-inline: 0 auto; }
.bl { display: inline-flex; align-items: center; gap: var(--s1); }
.sq { width: 10px; height: 10px; flex: none; display: inline-block; }
/* the legend: every number and word in one size (meta); only the percentage is semibold */
.cbar-legend { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s4);
  margin-top: var(--s3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.cbar-legend li { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.cbar-legend .lg-side { display: flex; align-items: center; gap: var(--s2); color: var(--ink-muted); overflow-wrap: normal; }
.cbar-legend .lg-nums { display: flex; gap: var(--s2); font-variant-numeric: tabular-nums; }
.cbar-legend .lg-pct { font-weight: 600; }
.cbar-legend .lg-num { color: var(--ink-muted); }
/* narrow space (measured on the bar itself): one row per side instead of three columns */
@container (max-width: 459px) {
  .cbar-legend { grid-template-columns: max-content max-content minmax(0, 1fr); gap: var(--s2) var(--s4);
    align-items: center; }
  .cbar-legend li, .cbar-legend .lg-nums { display: contents; }
}
.cbar-dominant { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2);
  font-size: var(--fs-meta); line-height: var(--lh-meta); }
.cbar-dominant b { font-weight: 600; }
.foreign-line { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2);
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }

/* ---------- photos ---------- */
.media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--panel); }
.media-wrap { position: relative; }   /* holds the photo and the blindspot badge laid over it */
.media-badge { position: absolute; left: var(--s2); top: var(--s2); right: var(--s2); z-index: 2; display: flex; }
.media-3x2 { aspect-ratio: 3 / 2; }
.media-1x1 { aspect-ratio: 1 / 1; }
.media picture, .media img { width: 100%; height: 100%; }
.media img { object-fit: cover; }
.credit { margin-top: var(--s1); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }
/* the credit sits on the photo (full text, wraps if long), so cards in a row stay aligned */
/* Edmon (13 Oct 2026): small and muted, it must never draw the eye: a quiet grey line at the photo's bottom edge */
.media .credit { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--s4) var(--s2) 6px;
  font-size: 10.5px; line-height: 1.3; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.58);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.55); background: linear-gradient(transparent, rgba(0, 0, 0, 0.22)); }
/* branded fallback when a story has no photo: ink panel, the amber median line, the topic name */
.fallback { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s4); background: var(--panel);
  color: var(--on-panel); }
.fallback::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px;
  background: var(--median-amber); }
.fallback-topic { position: relative; max-width: 100%; padding: var(--s1) var(--s2) var(--s1) 0; background: var(--panel);
  font-family: var(--font-serif); font-size: var(--fs-card-m); line-height: var(--lh-card); font-weight: 600; }
.media-1x1 .fallback-topic { display: none; }
.media-1x1 .fallback::before { width: 3px; margin-left: -1.5px; }

/* ---------- story cards ---------- */
.card { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.card a { text-decoration: none; }
.card a:hover .card-title-text { text-decoration: underline; text-decoration-color: var(--ink);
  text-decoration-thickness: 2px; }
.card-body { display: flex; flex-direction: column; flex: 1; gap: var(--s2); padding-top: var(--s3); min-width: 0; }
/* headlines are never cut: the box reserves room for the longest allowed headline (80 characters),
   so cards in a row line up; a shorter headline simply leaves space below it */
.card-title { font-family: var(--font-serif); font-weight: 600; overflow-wrap: break-word;
  line-height: var(--lh); min-height: calc(var(--lines) * var(--lh) * 1em); }
.card-summary { color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.card-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.card-l .card-title { --lines: var(--lines-l); --lh: var(--lh-hero); font-size: var(--fs-hero); }
.card-m .card-title { --lines: var(--lines-m); --lh: var(--lh-card); font-size: var(--fs-card-m); }
.card-s { display: grid; grid-template-columns: var(--thumb-s) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.card-s .media { width: var(--thumb-s); }
.card-s .card-body { padding-top: 0; gap: var(--s2); }
.card-s .card-title { --lines: 0; --lh: var(--lh-card); font-size: var(--fs-card-s); }   /* list rows: natural height */
.card-s .card-foot { gap: var(--s1); }
.card-list { list-style: none; display: flex; flex-direction: column; gap: var(--s4); }
.card-row { align-items: stretch; }

/* ---------- header ---------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--rule); position: relative; z-index: 20; }
.utility { background: var(--surface); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.utility-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s4); min-height: 36px; padding-block: 2px; }
.u-date, .u-weather, .u-air { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; min-height: 32px; }
.u-spacer { flex: 1 0 0; }
.u-date-short, .u-date-tiny { display: none; }
@media (max-width: 1023px) {   /* phones and tablets: date without the weekday */
  .u-date-long { display: none; }
  .u-date-short { display: inline; }
}
.u-break { display: none; }
@media (max-width: 767px) {    /* phones (Edmon, 13 Oct 2026): ONE row; type, icons and gaps scale with the screen width */
  .utility { font-size: clamp(10.5px, 2.8vw, 13px); }
  .u-date-short { display: none; } .u-date-tiny { display: inline; }
  .u-air-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* the icon says it */
  .utility-inner { flex-wrap: nowrap; gap: 0 clamp(3px, 1.3vw, 10px); justify-content: space-between; min-height: 40px; }
  .utility-inner > * { flex: none; }
  .u-spacer, .u-break { display: none; }
  .utility .icon-sm { width: 1.2em; height: 1.2em; }
  .u-date, .u-weather, .u-air { gap: 0.25em; min-height: 36px; }
  .u-pill { padding: 0 0.35em; gap: 0.2em; min-height: 32px; }
  .theme-btn { width: 32px; height: 32px; }
  /* Rates as its icon here (the window carries the full title); its window opens to the left */
  .u-pop:not(.u-pop-end) .u-pill > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .u-pop:not(.u-pop-end) .pop-panel { left: auto; right: 0; }
}
@media (max-width: 369px) { .u-city { display: none; } }   /* the narrowest phones: the temperature without "Yerevan" */
.air-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.u-air-icon { display: none; }
@media (max-width: 767px) { .u-air-icon { display: block; } }
.air-good { background: #34C759; } .air-fair { background: #A3D65C; } .air-moderate { background: #FFCC00; }
.air-poor { background: #FF9500; } .air-very_poor { background: #FF3B30; } .air-extreme { background: #AF52DE; }
.icon-xs { width: 12px; height: 12px; stroke-width: 2.4; }
/* small windows from the strip: Rates (left-aligned) and languages (right-aligned) */
.u-pop { position: relative; }
.u-pill { display: inline-flex; align-items: center; gap: var(--s1); min-height: 30px; padding: 0 var(--s2);
  border-radius: var(--radius-chip); cursor: pointer; list-style: none; font-weight: 600; user-select: none; white-space: nowrap; }
.u-pill::-webkit-details-marker { display: none; }
.u-pill:hover, .u-pop[open] .u-pill { background: var(--paper); }
.u-chev { transition: transform 0.2s ease; } .u-pop[open] .u-chev { transform: rotate(180deg); }
.pop-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: max-content; min-width: 200px;
  max-width: calc(100vw - 32px); padding: var(--s3) var(--s4); background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); white-space: normal; }
.u-pop-end .pop-panel { left: auto; right: 0; min-width: 160px; padding: var(--s2); }
.rates-pop { min-width: 240px; }
.rates-pop-title { color: var(--ink-muted); margin-bottom: var(--s2); max-width: 30ch; }
.rates-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.rates-table th { text-align: left; font-weight: 600; padding: 5px var(--s4) 5px 0; white-space: nowrap; }
.rates-table td { text-align: right; padding: 5px 0; white-space: nowrap; }
.rates-table tr + tr > * { border-top: 1px solid var(--rule); }
.rates-unit { font-weight: 400; color: var(--ink-muted); }
.rates-dir { width: 20px; color: var(--ink-muted); }
.lang-menu a { display: flex; align-items: center; min-height: 38px; padding: 0 var(--s3); border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 600; }
.lang-menu a:hover { background: var(--surface); }
.lang-menu a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--brand-amber); }
.mainbar-inner { display: flex; align-items: center; gap: var(--s4); min-height: 64px; }
.logo { flex: none; display: block; }
.logo img { height: 22px; width: auto; }
.logo-night { display: none !important; }
:root[data-theme="dark"] .logo-day { display: none !important; }
:root[data-theme="dark"] .logo-night { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-day { display: none !important; }
  :root:not([data-theme="light"]) .logo-night { display: block !important; }
}
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: var(--radius); }
.theme-btn:hover { background: var(--paper); }
.theme-btn .icon-night { display: none; }
:root[data-theme="dark"] .theme-btn .icon-day { display: none; }
:root[data-theme="dark"] .theme-btn .icon-night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .icon-day { display: none; }
  :root:not([data-theme="light"]) .theme-btn .icon-night { display: block; }
}
.main-nav { flex: 1; min-width: 0; display: none; align-items: center; gap: var(--s2); }
/* menu: calm pills; the current page is a filled pill; Blindspot is last, a yellow pill with the eye */
.nav-list { list-style: none; display: flex; align-items: center; gap: var(--s1); min-width: 0; flex: 0 1 auto;
  overflow: hidden; white-space: nowrap; overflow-wrap: normal; padding-block: var(--s1); }
.nav-list a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3);
  border-radius: var(--radius-chip); text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.nav-list a:hover { background: var(--surface); }
.nav-list a[aria-current="page"] { background: var(--ink); color: var(--paper); }
/* Blindspot: hidden until you look (Edmon, 12 Oct 2026). At rest the pill is faded behind angled lines
   (like a redaction screen); on hover / focus / current page the lines wipe away and it reveals itself. */
.nav-blind { --blind-gap: var(--paper); }
.nav-blind-fixed { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center;
  gap: var(--s2); min-height: 36px; padding: 0 var(--s3); flex: none; border-radius: var(--radius-chip);
  text-decoration: none; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; color: var(--ink-muted) !important;
  box-shadow: inset 0 0 0 1px var(--rule); outline-offset: 2px;
  background-image: linear-gradient(90deg, transparent, transparent); transition: color 0.4s ease; }
.nav-blind-fixed::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: repeating-linear-gradient(-55deg, transparent 0 4px, var(--hatch) 4px 5.5px);
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 0.5s ease; }
.nav-blind-fixed > * { opacity: 0.6; transition: opacity 0.35s ease; }
.nav-blind-fixed .icon { width: 22px; height: 22px; }
/* revealed (hover, keyboard focus, current page): no highlight; the amber line leaves the eye, the angled
   lines open up and fade, and the text becomes plain and fully visible */
.nav-blind-fixed:hover, .nav-blind-fixed:focus-visible, .nav-blind-fixed[aria-current="page"] {
  color: var(--ink) !important; font-weight: 500; --blind-eye: 1; --blind-line: 0; --blind-cut: 0; }
.nav-blind-fixed:hover > *, .nav-blind-fixed:focus-visible > *, .nav-blind-fixed[aria-current="page"] > * { opacity: 1; }
.nav-blind-fixed:hover::before, .nav-blind-fixed:focus-visible::before, .nav-blind-fixed[aria-current="page"]::before {
  transform: scaleX(1.6) translateX(18%); opacity: 0; }
.more-list a { display: flex; align-items: center; gap: var(--s2); padding-block: var(--s2); text-decoration: none; font-weight: 600; }
.more-list .nav-blind { padding: var(--s1) var(--s3); border-radius: var(--radius-chip); margin-block: var(--s1); width: max-content; }
.nav-more { position: relative; flex: none; }
.nav-more[hidden] { display: none; }
.more-btn { display: inline-flex; align-items: center; gap: var(--s1); height: 40px; padding: 0 var(--s2);
  border: 0; background: none; cursor: pointer; font-weight: 500; }
.more-list { list-style: none; position: absolute; right: 0; top: 100%; min-width: 200px; padding: var(--s2) var(--s4);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); white-space: nowrap; }
.more-list[hidden] { display: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: var(--radius); text-decoration: none; }
.icon-btn:hover { background: var(--surface); }
.header-tools { display: flex; align-items: center; gap: var(--s1); margin-left: auto; flex: none; }
.mobile-menu { border-top: 1px solid var(--rule); }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; padding-block: var(--s2) var(--s4); }
.mobile-menu a { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; text-decoration: none; font-weight: 600; font-size: var(--fs-card-m); }
.mobile-menu a.nav-blind { width: max-content; padding: var(--s2) var(--s4); margin-top: var(--s2); border-radius: var(--radius-chip); }
.mobile-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ink); padding-left: var(--s3); }
@media (min-width: 768px) {
  .main-nav { display: flex; }
  .menu-btn { display: none; }
  .mobile-menu { display: none !important; }
}

/* ---------- storyline row ---------- */
.storyline-row { border-bottom: 1px solid var(--rule); }
.sl-inner { display: flex; align-items: center; gap: var(--s3); min-height: 48px; }
.sl-label { flex: none; font-size: var(--fs-meta); color: var(--ink-muted); font-weight: 600; display: none; }
@media (min-width: 1024px) { .sl-label { display: block; } }
.sl-scroll { flex: 1; min-width: 0; list-style: none; display: flex; gap: var(--s2); overflow-x: auto; padding-block: var(--s3);
  scrollbar-width: none; padding-inline: var(--s2) var(--s6);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--s2), #000 calc(100% - var(--s6)), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--s2), #000 calc(100% - var(--s6)), transparent); }
.sl-scroll::-webkit-scrollbar { display: none; }
.sl-scroll li { flex: none; display: flex; }

/* ---------- outlet line ---------- */
.outlet-lines { list-style: none; }
.outlet-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3);
  padding-block: var(--s3); border-top: 1px solid var(--rule); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.outlet-line:last-child { border-bottom: 1px solid var(--rule); }
.ol-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0; }
.ol-name { font-weight: 700; font-size: var(--fs-card-s); line-height: var(--lh-card); text-decoration: none; }
.ol-name .dot { margin-right: var(--s2); vertical-align: 0.1em; }
.ol-time { color: var(--ink-muted); white-space: nowrap; }
.ol-headline { grid-column: 1 / -1; font-family: var(--font-serif); font-size: var(--fs-card-s); line-height: var(--lh-card); }
.ol-headline a { text-decoration: none; }
.ol-headline a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.ol-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); color: var(--ink-muted); }

/* ---------- buttons and share bar ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4);
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.share { display: flex; flex-direction: column; gap: var(--s2); }
.share-title { font-size: var(--fs-meta); font-weight: 700; }
.share-buttons { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.share-native[hidden], .share-buttons[hidden] { display: none; }
.share-status { font-size: var(--fs-meta); color: var(--ink-muted); min-height: calc(var(--lh-meta) * 1em); }

/* ---------- widget box ---------- */
.widget { background: var(--surface); border-radius: var(--radius); padding: var(--s4); min-width: 0; }
.widget-title { font-size: var(--fs-card-m); line-height: var(--lh-card); font-weight: 700; margin-bottom: var(--s3); }
.widget-foot { margin-top: var(--s3); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }
.briefing-list { padding-left: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.briefing-list li { font-family: var(--font-serif); font-size: var(--fs-card-s); line-height: var(--lh-card); }
.briefing-list a { text-decoration: none; }
.briefing-list a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.rates-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.rates-table th, .rates-table td { padding: var(--s1) 0; text-align: left; }
.rates-table td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); margin-top: var(--s3); }
.calc label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-meta); color: var(--ink-muted); min-width: 0; }
.calc .full { grid-column: 1 / -1; }
.calc input, .calc select { height: 40px; padding: 0 var(--s2); border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-size: var(--fs-card-s); min-width: 0; width: 100%; }
.calc-result { grid-column: 1 / -1; font-size: var(--fs-section); font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-now { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.wx-temp { font-size: 2rem; line-height: 1; font-weight: 600; }
.wx-days { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3);
  font-size: var(--fs-meta); }
.wx-days li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.wx-select { height: 40px; padding: 0 var(--s2); border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); max-width: 100%; }
.empty-state { padding: var(--s4); border-left: 3px solid var(--median-amber); background: var(--surface);
  font-size: var(--fs-body); }

/* ---------- footer ---------- */
.site-footer { margin-top: var(--s8); background: var(--surface); padding-block: var(--s7) var(--s6); font-size: var(--fs-meta);
  line-height: var(--lh-meta); }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--gutter); }
.footer-grid > * { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) { .footer-grid > * { grid-column: span 6; } }
@media (min-width: 1024px) { .footer-grid > * { grid-column: span 4; } }   /* three columns (RSS removed: Edmon) */
.footer-title { font-size: var(--fs-meta); font-weight: 700; margin-bottom: var(--s2); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.footer-tagline { font-family: var(--font-serif); font-size: var(--fs-card-m); line-height: var(--lh-card); margin-top: var(--s3); }
.footer-copy { margin-top: var(--s3); color: var(--ink-muted); }
.footer-credits { margin-top: var(--s2); color: var(--ink-muted); }
.footer-credits span { display: block; }   /* one source per row (Edmon) */

/* ---------- type roles (pages use these classes) ---------- */
.t-story { font-family: var(--font-serif); font-size: var(--fs-story); line-height: var(--lh-story); font-weight: 600; }
.t-hero { font-family: var(--font-serif); font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: 600; }
.t-card-m { font-family: var(--font-serif); font-size: var(--fs-card-m); line-height: var(--lh-card); font-weight: 600; }
.t-card-s { font-family: var(--font-serif); font-size: var(--fs-card-s); line-height: var(--lh-card); font-weight: 600; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }

/* ================= W2: homepage and story page ================= */
.preview-note { margin-top: var(--s4); padding: var(--s2) var(--s3); background: var(--surface); border-radius: var(--radius);
  font-size: var(--fs-meta); color: var(--ink-muted); }
.section-note { margin: calc(-1 * var(--s2)) 0 var(--s4); max-width: var(--text-max); }
.section-title a { text-decoration: none; }
.section-title a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.sub-title { margin-bottom: var(--s3); font-size: var(--fs-meta); }
.home .section + .section { border-top: 1px solid var(--rule); }
.home-lead { padding-top: var(--s5); }
.briefing-summary { margin-bottom: var(--s3); }
.blind-cols .empty-state { font-size: var(--fs-meta); }

/* story page: head + aside + body; the aside sits beside the text on wide screens */
.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-block: var(--s5) var(--s6);
  grid-template-areas: "head" "aside" "body"; }
.story-head { grid-area: head; min-width: 0; }
.story-aside { grid-area: aside; min-width: 0; }
.story-body { grid-area: body; min-width: 0; }
@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gutter);
    grid-template-areas: "head aside" "body aside"; }
  .story-aside { align-self: start; position: sticky; top: var(--s4); }
}
.crumbs { margin-bottom: var(--s3); }
.story-title { margin-bottom: var(--s3); }
.story-meta { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s4); }
.story-photo { margin: 0 0 var(--s4); }
.story-photo .credit { margin-top: var(--s2); font-size: 11px; }   /* small and quiet (Edmon, 13 Oct 2026) */
.story-summary { max-width: var(--text-max); }
.story-followup { margin-top: var(--s5); padding: var(--s4); border-left: 3px solid var(--ink); background: var(--surface); }
.story-followup p + p { margin-top: var(--s2); }
.story-section { margin-top: var(--s6); }
.story-section:first-child { margin-top: 0; }
.story-notes { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.report { margin-top: var(--s6); font-size: var(--fs-meta); }
.cov-panel { background: var(--surface); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.cov-blind { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.cov-method a { color: var(--ink); }

/* tabs (How each side framed it) */
.tab-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.tab, .filter { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3);
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
.tab[aria-selected="true"], .filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tab-count { font-weight: 400; color: inherit; opacity: 0.7; font-variant-numeric: tabular-nums; }
.tabs.js .tab-panel[data-hidden] { display: none; }
.tabs:not(.js) .tab-list { display: none; }   /* no script: every side's list shows, one after another */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.outlet-line[hidden] { display: none; }

/* coverage timeline */
.timeline { display: flex; flex-direction: column; gap: var(--s2); }
.tl-lane { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--s3); }
@media (max-width: 599px) { .tl-lane { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }   /* phones: side name above its line */
.tl-label { font-size: var(--fs-meta); color: var(--ink-muted); overflow-wrap: normal; }
.tl-track { position: relative; height: 16px; border-bottom: 1px solid var(--rule); }
.tl-dot { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--paper); }
.tl-axis { display: flex; justify-content: space-between; margin-left: calc(120px + var(--s3)); font-size: var(--fs-meta);
  color: var(--ink-muted); }
@media (max-width: 599px) { .tl-axis { margin-left: 0; } }
.tl-list { margin-top: var(--s3); font-size: var(--fs-meta); }
.tl-list summary { cursor: pointer; color: var(--ink-muted); }
.tl-list ol { margin-top: var(--s2); padding-left: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }

/* plain pages */
.prose h1 { font-family: var(--font-serif); font-size: var(--fs-story); line-height: var(--lh-story); margin-bottom: var(--s4); }
.prose h2 { font-size: var(--fs-section); margin: var(--s6) 0 var(--s3); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--s4); }
.prose ul, .prose ol { padding-left: var(--s5); }

.home-lead .lg-8 { align-self: start; }
.home-lead .card { height: auto; }
.latest-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4) var(--gutter); list-style: none; }
@media (min-width: 1024px) { .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* hero carousel */
.carousel { position: relative; min-width: 0; }
.carousel-track { display: flex; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain; position: relative; }
.carousel-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; }
.slide > .card { flex: 1; }
/* controls on the photo (3:2, so its height is 2/3 of the carousel width: 66.667cqw) */
.carousel { container-type: inline-size; }
.carousel-controls { position: absolute; left: 0; right: 0; top: 0; height: 66.667cqw; pointer-events: none; }
.carousel-controls[hidden] { display: none; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #000000; cursor: pointer; }
.car-btn .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.car-btn:hover { background: #FFFFFF; }
.car-prev { left: var(--s3); }
.car-next { right: var(--s3); }
.car-left { transform: rotate(90deg); }
.car-right { transform: rotate(-90deg); }
.car-bar { position: absolute; right: var(--s3); bottom: var(--s3); pointer-events: auto; display: flex; align-items: center;
  gap: var(--s1); padding: 0 var(--s1); border-radius: var(--radius-chip); background: rgba(0, 0, 0, 0.45); }
.car-dots { display: flex; align-items: center; }
.car-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; padding: 0;
  border: 0; background: none; cursor: pointer; }
.car-dot span { display: block; width: 8px; height: 8px; border-radius: var(--radius-chip); background: rgba(255, 255, 255, 0.55);
  transition: width 0.25s ease, background-color 0.25s ease; }
.car-dot[aria-current="true"] span { width: 20px; background: #FFFFFF; }
.car-pause { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 0; background: none; color: #FFFFFF; cursor: pointer; }
.car-i-play { display: none; }
.carousel.paused .car-i-play { display: block; }
.carousel.paused .car-i-pause { display: none; }
.carousel .media .credit { padding-right: 190px; padding-bottom: var(--s2); }   /* the credit never runs under the dots */
@media (max-width: 479px) {
  .car-btn { width: 36px; height: 36px; }
  .carousel .media .credit { padding-right: var(--s2); padding-bottom: 44px; }   /* phones: dots under the credit line */
}
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

/* daily briefing with photos */
.brief-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
/* the day's list scrolls inside the box at about six stories' height; a soft fade shows there is more below */
.brief-scroll { max-height: 470px; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--s2);
  margin-right: calc(-1 * var(--s2)); scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); padding-bottom: 28px; }
.brief-scroll::-webkit-scrollbar { width: 6px; }
.brief-scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.brief-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.brief-link { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); align-items: start; text-decoration: none; }
.brief-link:hover .brief-title { text-decoration: underline; text-decoration-color: var(--ink); }
.brief-thumb { position: relative; display: block; width: 64px; }
.brief-thumb .media { width: 64px; }
.brief-num { position: absolute; left: var(--s1); top: var(--s1); min-width: 20px; height: 20px; padding: 0 var(--s1);
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-chip);
  background: var(--paper); color: var(--ink); font-size: 0.75rem; font-weight: 700; line-height: 1; }
.brief-text { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.brief-title { font-family: var(--font-serif); font-size: 0.9375rem; line-height: var(--lh-card); font-weight: 600; }
.brief-meta { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-meta); color: var(--ink-muted); }
.blind-dot { background: var(--median-amber); }
.brief-list.collapsed .brief-extra { display: none; }
.more-toggle { margin-top: var(--s3); padding: 0; border: 0; background: none; color: var(--ink); font: inherit;
  font-size: var(--fs-meta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.more-toggle[hidden] { display: none; }

/* homepage blindspots: a highlighted band */
.home .section.blind-band { border-top: 0; margin-block: var(--s6); padding: var(--s6) var(--s5); background: var(--surface);
  border-radius: var(--radius); box-shadow: inset 0 4px 0 var(--median-amber); }
.home .blind-band + .section { border-top: 0; }
.blind-title { display: flex; align-items: center; gap: var(--s3); --blind-gap: var(--surface); }
.blind-mark { width: 36px; height: 36px; stroke-width: 1.6; }
.blind-band .empty-state { background: var(--paper); }
.blind-band .section-note { max-width: none; }   /* the intro stays on one row on wide screens */
@media (max-width: 767px) { .home .section.blind-band { padding: var(--s5) var(--s4); } }

/* search pill: magnifier, an amber caret line (the Median "I"), a "/" shortcut; grows and glows amber on focus */
.search-pill { position: relative; display: none; align-items: center; gap: var(--s2); height: 40px; width: 150px;
  padding: 0 var(--s2) 0 var(--s3); border-radius: var(--radius-chip); background: var(--surface);
  box-shadow: inset 0 0 0 1px transparent; transition: width 0.3s ease, box-shadow 0.25s ease, background-color 0.25s ease; }
.search-pill:hover { box-shadow: inset 0 0 0 1px var(--rule); }
.search-pill:focus-within { width: 260px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--brand-amber), 0 0 0 4px var(--amber-glow); }
.search-icon { color: var(--ink-muted); flex: none; }
.search-caret { width: 2px; height: 18px; background: var(--brand-amber); flex: none; border-radius: 1px; }
.search-pill:focus-within .search-caret { display: none; }
.search-pill input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); outline: none;
  font: inherit; font-size: var(--fs-meta); caret-color: var(--brand-amber); -webkit-appearance: none; appearance: none; }
.search-pill input::placeholder { color: var(--ink-muted); opacity: 1; }
.search-pill input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-key { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule); background: var(--paper); color: var(--ink-muted);
  font: inherit; font-size: 0.75rem; font-weight: 600; }
.search-pill:focus-within .search-key { visibility: hidden; }
.search-pill:focus-visible, .search-pill input:focus-visible { outline: none; }
@media (min-width: 1100px) { .search-pill { display: flex; } .search-btn { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-blind-fixed::before, .search-pill { transition: none; }
}

/* ---------- homepage: welcome line, update times, today's balance, follow box (Edmon, 12 Oct 2026) ---------- */
.intro-strip { display: flex; align-items: flex-start; gap: var(--s3); margin-top: var(--s4); padding: var(--s3) var(--s4);
  background: var(--surface); border-radius: var(--radius); border-left: 3px solid var(--brand-amber); font-size: var(--fs-meta);
  line-height: var(--lh-meta); }
.intro-strip p { flex: 1; min-width: 0; }
.intro-side { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; font-weight: 600; }
.intro-close { width: 32px; height: 32px; margin: -4px -8px -4px 0; }
.intro-closed .intro-strip { display: none; }
.update-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); margin: var(--s1) 0 var(--s4); }
.update-line .sep { color: var(--ink-muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-amber); flex: none; }
.balance-legend { list-style: none; margin-top: var(--s3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.balance-legend li { display: flex; justify-content: space-between; gap: var(--s3); padding: 4px 0; white-space: nowrap; }
.balance-legend li + li { border-top: 1px solid var(--rule); }
.balance-legend .lg-name { display: flex; align-items: center; gap: var(--s1); }
.balance-legend b { font-weight: 600; }
.balance-note { margin-top: var(--s3); }
.follow-note { margin-bottom: var(--s3); }
.follow-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.follow-group { list-style: none; display: flex; gap: var(--s2); }
/* social links: plain line icons in the text colour (black by day, white by night), never the brands' colour logos */
.follow-btn { display: inline-flex; align-items: center; gap: var(--s1); height: 40px; padding: 0 var(--s3) 0 var(--s2);
  border: 1px solid var(--rule); border-radius: var(--radius-chip); color: var(--ink); background: var(--paper);
  text-decoration: none; font-size: var(--fs-meta); font-weight: 600; }
.follow-btn:hover { border-color: var(--ink); }
.follow-btn .icon { width: 20px; height: 20px; }
.follow-round { width: 40px; padding: 0; justify-content: center; }
.btn-sm { min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-meta); }

/* only on computers / only below that width (the Blindspot block moves between the two places) */
.only-lg { display: none; }
@media (min-width: 1024px) { .only-lg { display: block; } .only-sm { display: none; } }
/* computers: the compact Blindspot block under the carousel */
.blind-box { background: var(--surface); border-radius: var(--radius); border-top: 3px solid var(--brand-amber);
  padding: var(--s4) var(--s5) var(--s5); --blind-gap: var(--surface); }
.blind-box-head { margin-bottom: var(--s4); }
.blind-box-title { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-card-m); line-height: var(--lh-card);
  font-weight: 700; margin-bottom: var(--s1); }
.blind-box-title .icon-lg { width: 32px; height: 32px; }
.blind-box-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.blind-box .empty-state { background: var(--paper); font-size: var(--fs-meta); }
@media (max-width: 479px), (min-width: 1024px) and (max-width: 1279px) {   /* phones and the narrow sidebar: five buttons in one row */
  .follow-list, .follow-group { gap: 6px; }
  .follow-btn { height: 36px; padding: 0 10px 0 8px; gap: 4px; }
  .follow-btn .icon { width: 18px; height: 18px; }
  .follow-round { width: 36px; padding: 0; }
}
/* computers: the right column ends level with the follow strip; today's balance sits at the bottom and the
   briefing box grows into the space above it (its list scrolls), so there is no empty space on either side */
@media (min-width: 1024px) {
  .home-lead .grid > .lg-4 { display: flex; flex-direction: column; }
  .home-lead .lg-4 > .widget:first-child { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .home-lead .brief-scroll { flex: 1 1 0; min-height: 220px; max-height: none; }
}

/* ---------- the Blindspot page (Edmon, 13 Oct 2026): a narrow animated intro, then the stories by silent side ---------- */
.bs { --ease: cubic-bezier(0.22, 1, 0.36, 1); }
.bs-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  max-width: 880px; margin: clamp(24px, 4vw, 48px) auto 0; padding: clamp(20px, 3.5vw, 36px); background: var(--surface);
  border-radius: 24px; border-top: 3px solid var(--brand-amber); }
.bs-eye { width: clamp(72px, 11vw, 120px); height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bs-eye .eye { stroke: var(--ink); stroke-width: 1.2; opacity: 0.55; }
.bs-eye .cut { stroke: var(--surface); stroke-width: 4; stroke-linecap: butt; animation: bs-fade 0.4s ease 1.1s both; }
.bs-eye .line { stroke: var(--brand-amber); stroke-width: 1.8; stroke-linecap: butt; stroke-dasharray: 1; animation: bs-draw 1.2s var(--ease) 1.1s both; }
.bs-title { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.1; font-weight: 700; animation: bs-rise 0.9s var(--ease) both; }
.bs-lead { color: var(--ink-muted); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.5; margin-top: var(--s2); animation: bs-rise 0.9s var(--ease) 0.15s both; }
.bs-demo { margin-top: var(--s4); }
.bs-bar { display: flex; gap: 3px; height: 26px; border-radius: 6px; overflow: hidden; max-width: 440px; }
.bs-bar .seg { width: var(--w); display: flex; align-items: center; justify-content: center; font-size: var(--fs-meta); font-weight: 700;
  color: #FFFFFF; transform-origin: left; animation: bs-grow 1.2s var(--ease) 0.5s both; }
.bs-silent { margin-top: var(--s2); }
.bs-silent-chip { display: inline-flex; align-items: center; gap: var(--s1); padding: 3px 12px; border-radius: 999px; font-size: var(--fs-meta);
  font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--brand-amber); animation: bs-pulse 2.4s ease-in-out 2s 2 both; }
.bs-rules { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s3); font-size: var(--fs-meta); }
.bs-rules li { display: inline-flex; align-items: center; gap: var(--s1); animation: bs-rise 0.6s var(--ease) calc(1.4s + var(--k) * 0.35s) both; }
.bs-rules .icon { background: var(--brand-amber); color: #000; border-radius: 50%; padding: 2px; stroke-width: 2.6; }
.bs-care { margin-top: var(--s3); font-size: var(--fs-meta); color: var(--ink-muted); }
@keyframes bs-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes bs-grow { from { transform: scaleX(0); } }
@keyframes bs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bs-fade { from { opacity: 0; } }
@keyframes bs-pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--brand-amber), 0 0 0 6px var(--amber-glow); } }
@media (max-width: 599px) { .bs-hero { grid-template-columns: 1fr; justify-items: start; } .bs-eye { width: 64px; } }
@media (prefers-reduced-motion: reduce) { .bs * { animation: none !important; } }
.bs-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: clamp(28px, 4vw, 44px) 0 var(--s5); }
.bs-tabs button { display: inline-flex; align-items: center; gap: var(--s1); min-height: 38px; padding: 0 var(--s4); border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
  --blind-gap: var(--paper); }
.bs-tabs button span { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bs-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); --blind-gap: var(--ink); }
.bs-tabs button[aria-selected="true"] span { color: var(--paper); opacity: 0.7; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--gutter); }
.bs-card[hidden] { display: none; }
.bs-sides { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: var(--s3) 0 var(--s2); font-size: var(--fs-meta); }
.bs-sides li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.bs-sides em { font-style: normal; color: var(--ink-muted); }
.bs-sides b { font-variant-numeric: tabular-nums; }
.bs-sides .bs-is-silent { font-weight: 600; }
.bs-sides .bs-is-silent b { box-shadow: inset 0 -2px 0 var(--brand-amber); }

/* ---------- search panel (Edmon, 13 Oct 2026): calm, fast, results while typing ---------- */
.sr { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding: clamp(12px, 8vh, 96px) var(--side-pad) 16px; }
.sr[hidden] { display: none; }
.sr-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.2s ease; }
.sr-box { position: relative; width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--paper);
  border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); overflow: hidden;
  opacity: 0; transform: translateY(-10px) scale(0.985); transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.sr.show .sr-backdrop { opacity: 1; } .sr.show .sr-box { opacity: 1; transform: none; }
html.sr-open { overflow: hidden; }
.sr-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.sr-glass { width: 22px; height: 22px; color: var(--ink-muted); flex: none; }
.sr-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem); padding: 10px 0; caret-color: var(--brand-amber); }
.sr-input::-webkit-search-cancel-button { display: none; }
.sr-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.sr-status { padding: var(--s3) var(--s4) var(--s1); font-size: var(--fs-meta); color: var(--ink-muted); }
.sr-status b { color: var(--ink); }
.sr-list { list-style: none; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s2) var(--s2); }
.sr-list li { animation: sr-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--k) * 22ms); }
@keyframes sr-in { from { opacity: 0; transform: translateY(6px); } }
.sr-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s2); border-radius: 12px;
  color: var(--ink); text-decoration: none; }
.sr-item:hover, .sr-item.on { background: var(--surface); }
.sr-item.on { box-shadow: inset 3px 0 0 var(--brand-amber); }
.sr-thumb img, .sr-noimg { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--surface); }
.sr-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sr-blind { font-size: 11px; font-weight: 700; color: var(--ink); align-self: flex-start; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--brand-amber); }
.sr-title { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.sr-snip { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); overflow-wrap: anywhere; }
.sr-meta { font-size: 12px; color: var(--ink-muted); }
.sr-bar { display: flex; gap: 2px; height: 4px; max-width: 160px; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.sr-seg { display: block; height: 100%; } .sr-s0 { background: var(--side-progov); } .sr-s1 { background: var(--side-balanced); } .sr-s2 { background: var(--side-opposition); }
.sr mark { background: var(--amber-glow); color: inherit; border-radius: 3px; box-shadow: 0 0 0 1px var(--amber-glow); }
.sr-keys { padding: var(--s2) var(--s4); font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--rule); }
@media (max-width: 767px) {   /* phones: the panel takes the whole screen; no keyboard hint */
  .sr { padding: 0; } .sr-box { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .sr-keys { display: none; }
}
/* the search page: the same panel, sitting on the page */
.sr.sr-inpage { position: static; padding: clamp(16px, 4vw, 40px) 0 0; }
.sr-inpage .sr-backdrop { display: none; }
.sr-inpage .sr-box { box-shadow: none; border: 1px solid var(--rule); max-height: none; opacity: 1; transform: none; margin: 0 auto; }
.sr-inpage .sr-list { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .sr-box, .sr-backdrop, .sr-list li { transition: none !important; animation: none !important; } }

/* ---------- topic pages and daily briefing pages (Edmon, 13 Oct 2026) ---------- */
.tp, .bp { --ease: cubic-bezier(0.22, 1, 0.36, 1); padding-bottom: var(--s6); }
.tp-head, .bp-head { max-width: 760px; margin-top: clamp(24px, 4vw, 48px); }
.tp-head-topic { margin-top: var(--s4); }
.tp-eyebrow { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-muted); letter-spacing: 0.02em; margin-bottom: var(--s2); }
.tp-eyebrow a { color: inherit; text-decoration: none; }
.tp-eyebrow a:hover { color: var(--ink); text-decoration: underline; }
.tp-title { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.01em;
  animation: tp-rise 0.7s var(--ease) both; }
.tp-lead { margin-top: var(--s3); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.5; color: var(--ink-muted);
  animation: tp-rise 0.7s var(--ease) 0.08s both; }
.tp-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s3); }
.tp-facts span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 var(--s4) 0 calc(-1 * var(--s2));
  border-radius: 50%; background: var(--ink-muted); vertical-align: middle; }
@keyframes tp-rise { from { opacity: 0; transform: translateY(10px); } }

/* all topics: tiles */
.tp-tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--gutter); margin-top: clamp(24px, 4vw, 40px); }
.tp-tile { animation: tp-rise 0.6s var(--ease) calc(0.1s + var(--k) * 0.04s) both; }
.tp-tile-link { display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden; background: var(--surface);
  color: var(--ink); text-decoration: none; transition: transform 0.25s var(--ease), box-shadow 0.25s ease; }
.tp-tile-link:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.tp-tile-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tp-tile-media .media { border-radius: 0; }
.tp-tile-body { display: flex; flex-direction: column; gap: var(--s1); flex: 1; padding: var(--s4); }
.tp-tile-name { font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.tp-tile-count { font-size: var(--fs-meta); color: var(--ink-muted); }
.tp-tile-head { margin-top: var(--s2); font-family: var(--font-serif); font-size: 0.9375rem; line-height: var(--lh-card); font-weight: 600; }
.tp-tile-body .cbar { margin-top: auto; padding-top: var(--s3); }
/* phones: compact rows (photo left, words right), so all topics fit in a few screens */
@media (max-width: 599px) {
  .tp-tiles { gap: var(--s3); }
  .tp-tile-link { flex-direction: row; border-radius: 14px; }
  .tp-tile-media { flex: none; width: 104px; }
  .tp-tile-media .media { aspect-ratio: auto; height: 100%; min-height: 104px; }
  .tp-tile-media .credit { display: none; }   /* too small to read on a thumbnail; the story page carries it */
  .tp-tile-body { padding: var(--s3); }
  .tp-tile-name { font-size: 1.0625rem; }
  .tp-tile-head { margin-top: 2px; font-size: 0.875rem; }
}
.tp-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s5); font-size: var(--fs-meta);
  color: var(--ink-muted); }
/* every card here is this topic: no topic chip (a major-story chip stays) */
.tp .tp-top .chips .chip:not(.chip-major), .tp .card-row .chips .chip:not(.chip-major) { display: none; }
.tp .tp-top .chips:not(:has(.chip-major)), .tp .card-row .chips:not(:has(.chip-major)) { display: none; }

/* one topic: the switcher (one row, scrolls sideways) */
.tp-switch { margin: var(--s4) calc(-1 * var(--side-pad)) 0; }
.tp-switch ul { list-style: none; display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s1) var(--side-pad) var(--s2);
  scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--side-pad), #000 calc(100% - 28px), transparent); }
.tp-switch ul::-webkit-scrollbar { display: none; }
.tp-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule); background: var(--paper); color: var(--ink); font-size: var(--fs-meta); font-weight: 600;
  white-space: nowrap; text-decoration: none; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.tp-pill span { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.tp-pill:hover { box-shadow: inset 0 0 0 1px var(--ink-muted); }
.tp-pill.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.tp-pill.on span { color: var(--paper); opacity: 0.7; }
.tp-pill.quiet { color: var(--ink-muted); }
.tp-top { padding-top: var(--s5); }
.tp-empty { margin-top: var(--s6); }

/* a day's briefing */
.bp-sum { margin-top: var(--s3); font-weight: 600; font-variant-numeric: tabular-nums; animation: tp-rise 0.7s var(--ease) 0.14s both; }
.bp-days { display: flex; align-items: center; gap: var(--s2); margin: clamp(20px, 3vw, 32px) 0 var(--s4); }
.bp-day-list { list-style: none; display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px; scrollbar-width: none; }
.bp-day-list::-webkit-scrollbar { display: none; }
.bp-day { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 54px; padding: 8px 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); text-decoration: none; scroll-snap-align: center;
  transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.bp-day:hover { box-shadow: inset 0 0 0 1px var(--ink-muted); }
.bp-wd { font-size: 11px; line-height: 1.2; color: var(--ink-muted); }
.bp-dn { font-size: 1.125rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.bp-day.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.bp-day.on .bp-wd { color: var(--paper); opacity: 0.7; }
.bp-step { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
.bp-step:hover { box-shadow: inset 0 0 0 1px var(--ink-muted); }
.bp-step.off { opacity: 0.3; }
.bp-grid { margin-top: var(--s4); }
.bp-list { list-style: none; }
.bp-list > li { padding-block: var(--s5); border-top: 1px solid var(--rule); animation: tp-rise 0.6s var(--ease) calc(0.05s + var(--k) * 0.05s) both; }
.bp-list > li:first-child { border-top: 0; padding-top: 0; }
.bp-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.bp-row .chips { flex-wrap: wrap; }
.bp-num { grid-row: span 2; font-size: 1.75rem; line-height: 1; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bp-media, .bp-body { grid-column: 2; min-width: 0; }
.bp-body { display: flex; flex-direction: column; gap: var(--s2); }
.bp-title { font-family: var(--font-serif); font-size: 1.25rem; line-height: var(--lh-card); font-weight: 600; }
.bp-title a { color: inherit; text-decoration: none; }
.bp-title a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.bp-lead { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); max-width: var(--text-max); }
@media (min-width: 768px) {
  .bp-row { grid-template-columns: 40px 220px minmax(0, 1fr); column-gap: var(--s4); }
  .bp-num { grid-row: auto; }
  .bp-media { grid-column: 2; }
  .bp-body { grid-column: 3; }
}
@media (min-width: 1024px) { .bp-aside { align-self: start; position: sticky; top: var(--s4); } }
.bp-digest { list-style: none; margin-top: var(--s3); counter-reset: dg; }
.bp-digest li { counter-increment: dg; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px var(--s2); padding: var(--s3) 0;
  border-top: 1px solid var(--rule); }
.bp-digest li::before { content: counter(dg); grid-row: span 2; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bp-digest a { font-family: var(--font-serif); font-size: 0.9375rem; line-height: var(--lh-card); font-weight: 600; color: var(--ink);
  text-decoration: none; }
.bp-digest a:hover { text-decoration: underline; }
.bp-digest .cbar { grid-column: 2; max-width: 180px; }
.brief-open { margin-top: var(--s3); font-size: var(--fs-meta); font-weight: 600; }
.brief-open a { color: var(--ink); text-decoration: none; }
.brief-open a::after { content: " →"; }
.brief-open a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .tp *, .bp * { animation: none !important; transition: none !important; } }

/* major story (Edmon's ⚡ switch, 13 Oct 2026): a quiet ink chip, no alarm colours */
.chip-major { background: var(--ink); color: var(--paper); font-weight: 700; }

/* ---------- feature sections (Phase W7): "From the world" (deep green) and "Armenians worldwide" (pomegranate) ----------
   The accents are colour-blind checked against the bar's blue / grey / orange and the yellow. Chips keep the day colour
   with white text in both themes (6.5:1 and 7.6:1); lines use a lighter tone at night. */
:root { --world: #0F6B45; --armenians: #A5192F; --world-line: #0F6B45; --armenians-line: #A5192F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --world-line: #2FA36F; --armenians-line: #E0485F; } }
:root[data-theme="dark"] { --world-line: #2FA36F; --armenians-line: #E0485F; }
.fc-world, .fs-world { --accent: var(--world); --accent-line: var(--world-line); }
.fc-armenians, .fs-armenians { --accent: var(--armenians); --accent-line: var(--armenians-line); }
.chip-section { background: var(--accent); color: #FFFFFF; font-weight: 700; text-decoration: none; }
.chip-section.world { background: var(--world); } .chip-section.armenians { background: var(--armenians); }
a.chip-section:hover { filter: brightness(1.1); }
.card-feature .fc-sources { margin: 0 0 var(--s2); padding-top: var(--s2); border-top: 3px solid var(--accent-line);
  width: fit-content; max-width: 100%; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); }
/* homepage strips: one row that scrolls sideways */
.fstrip-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.fstrip-head .section-title { display: flex; align-items: center; gap: var(--s2); }
.fstrip-head .section-title::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--accent-line); }
.fstrip-all { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.fstrip-all::after { content: " →"; }
.fstrip-all:hover { text-decoration: underline; }
.fstrip-list { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: var(--gutter);
  overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s2); scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent; }
.fstrip-list > li { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) { .fstrip-list { grid-auto-columns: calc((100% - 2 * var(--gutter)) / 2.4); } }
@media (min-width: 1024px) { .fstrip-list { grid-auto-columns: calc((100% - 3 * var(--gutter)) / 3.4); } }
/* section pages */
.fsec-mark { font-size: 2.25rem; line-height: 1; margin-bottom: var(--s2); }
/* section banner (Edmon, 14 Oct 2026): the section's colour, a drawn visual on the right, the intro on one line on wide screens */
.fsec-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(20px, 3vw, 36px); border-radius: 20px;
  min-height: clamp(190px, 21vw, 250px); padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column;
  justify-content: flex-end; color: #FFFFFF; }
.fs-world .fsec-hero { background: radial-gradient(120% 140% at 85% 10%, rgba(255, 255, 255, 0.10), transparent 55%),
  linear-gradient(135deg, #12804F 0%, #0F6B45 45%, #083826 100%); }
.fs-armenians .fsec-hero { background: radial-gradient(110% 130% at 80% 20%, rgba(242, 169, 59, 0.22), transparent 55%),
  linear-gradient(135deg, #B81E36 0%, #A5192F 45%, #5A0C19 100%); }
.fsec-hero .tp-title { color: #FFFFFF; }
.fsec-hero .tp-lead { color: rgba(255, 255, 255, 0.88); max-width: 46rem; }
@media (min-width: 1024px) { .fsec-hero { min-height: 280px; } .fsec-hero .tp-lead { max-width: none; }
  .fsec-art { top: 4%; right: 2%; height: 74%; transform: none; } }   /* above the intro line, which runs the full width */
.fsec-art { position: absolute; z-index: -1; top: 50%; right: -1%; height: 125%; width: auto; transform: translateY(-50%);
  pointer-events: none; }
@media (max-width: 767px) { .fsec-art { right: -38%; height: 115%; opacity: 0.45; } }
.fsec-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fsec-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; }
.fsec-pulse { animation: fsec-pulse 3.2s ease-in-out infinite; }
.fsec-ripple { transform-box: fill-box; transform-origin: center; animation: fsec-ripple 3.6s ease-out infinite; }
@keyframes fsec-draw { to { stroke-dashoffset: 0; } }
@keyframes fsec-pulse { 50% { opacity: 0.35; } }
@keyframes fsec-ripple { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fsec-arc { animation: none; stroke-dashoffset: 0; } .fsec-pulse, .fsec-ripple { animation: none; } .fsec-move { display: none; } }
.fsec-tabs { margin-top: clamp(20px, 3vw, 32px); }
.fsec-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--gutter); margin-top: var(--s5); }
.fsec-grid > li[hidden] { display: none; }
.frel { margin-top: 0; }
/* feature story page */
.fcrumbs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.fnote { margin-top: var(--s4); padding: var(--s3) var(--s4); border-left: 3px solid var(--accent-line); background: var(--surface);
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-muted); max-width: var(--text-max); }
.fsources-list { list-style: none; display: flex; flex-direction: column; }
.fsources-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) 0; border-top: 1px solid var(--rule);
  font-size: var(--fs-meta); line-height: var(--lh-meta); }
.fsources-list li:first-child { border-top: 0; padding-top: 0; }
.fs-outlet { font-weight: 700; }
.fsources-list a { color: var(--ink); overflow-wrap: anywhere; }
.fsources-list time { color: var(--ink-muted); }
/* daily briefing: the day's features */
.frow-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.frow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3); align-items: start; text-decoration: none; color: var(--ink); }
.frow-thumb .media { width: 56px; }
.frow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frow-section { font-size: 12px; font-weight: 700; color: var(--accent-line); }
.frow-title { font-family: var(--font-serif); font-size: 0.9375rem; line-height: var(--lh-card); font-weight: 600; }
.frow:hover .frow-title { text-decoration: underline; }

/* ---------- Blindspot page, split board (Edmon, 18 Oct 2026; in the way of Ground News's Blindspot feed) ---------- */
.bs2-head { max-width: 760px; margin-top: clamp(24px, 4vw, 44px); }
.bs2-head .bs-lead a { color: inherit; font-weight: 600; }
.bs2-switch { display: none; }
.bs2-board { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(24px, 3.5vw, 40px); }
.bs2-col { --side: var(--side-progov); min-width: 0; border-radius: 20px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.bs2-col.side-opposition { --side: var(--side-opposition); }
.bs2-col-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  padding: clamp(18px, 2.4vw, 26px); color: #FFFFFF;
  background: linear-gradient(135deg, var(--side) 0%, color-mix(in srgb, var(--side) 72%, #000) 100%); }
.bs2-eye { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.bs2-eye .icon { width: 26px; height: 26px; }
.bs2-col-title { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.2; font-weight: 700; color: inherit; }
.bs2-col-sub { margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); opacity: 0.88; }
.bs2-count { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.bs2-count b { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.bs2-count span { font-size: 12px; opacity: 0.85; margin-top: 4px; }
.bs2-list { list-style: none; padding: var(--s2) clamp(14px, 2vw, 22px) var(--s4); }
.bs2-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0;
  border-top: 1px solid var(--rule); animation: bs-rise 0.6s var(--ease) calc(0.05s * var(--k)) both; }
.bs2-item:first-child { border-top: 0; }
.bs2-thumb { display: block; border-radius: 12px; overflow: hidden; align-self: start; }
.bs2-title { font-size: 1rem; line-height: 1.32; font-weight: 650; }
.bs2-title a { color: var(--ink); text-decoration: none; }
.bs2-title a:hover { text-decoration: underline; }
.bs2-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }   /* even spacing in every language */
.bs2-body > * { margin: 0 !important; }
.bs2-nums { display: flex; flex-wrap: wrap; gap: 4px var(--s3); font-size: var(--fs-meta); line-height: 1.45; color: var(--ink-muted); }
.bs2-nums span { display: inline-flex; align-items: center; gap: 6px; }
.bs2-nums b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bs2-silent { color: var(--ink); font-weight: 600; }
.bs2-silent b { box-shadow: inset 0 -2px 0 var(--side); }
.bs2-empty { padding: var(--s5) clamp(14px, 2vw, 22px); color: var(--ink-muted); }
.bs2-how { margin-top: clamp(40px, 6vw, 72px); }
.bs2-how-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; margin-bottom: var(--s4); }
.mth-embedded { border-radius: 20px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
/* phones and narrow tablets: one side at a time, a two-colour switch on top */
@media (max-width: 859px) {
  .bs2-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: sticky; top: var(--header-h, 0px); z-index: 5;
    margin-top: var(--s5); padding: 6px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
  .bs2-tab { --side: var(--side-progov); display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    min-height: 48px; padding: 0 var(--s3); border: 0; border-radius: 12px; background: transparent; color: var(--ink);
    font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
  .bs2-tab.side-opposition { --side: var(--side-opposition); }
  .bs2-tab-name { min-width: 0; word-break: keep-all; overflow-wrap: normal; line-height: 1.2; }
  .bs2-tab b { flex: none; white-space: nowrap; font-size: 1.25rem; color: var(--side); }
  .bs2-col-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); }
  .bs2-eye { width: 40px; height: 40px; }
  .bs2-tab[aria-selected="true"] { background: var(--side); color: #FFFFFF; }
  .bs2-tab[aria-selected="true"] b { color: #FFFFFF; }
  .bs2-board { grid-template-columns: 1fr; margin-top: var(--s3); }
  .bs2-board[data-show="pro-government"] .bs2-col.side-opposition,
  .bs2-board[data-show="opposition"] .bs2-col.side-progov { display: none; }
  .bs2-item { grid-template-columns: 76px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .bs2-item { animation: none; } }