/**
 * news_style.css
 * Editorial Dark Theme Stylesheet for PolComp News & Live Media Feeds
 */

/* Colour tokens live in theme.css (loaded after this file). The --h-* hues are
   this page's publisher and axis data colours; the white theme gets darker
   variants so they pass 4.5:1 as text. */
:root {
  --r:12px;
  --font-serif:'Instrument Serif', Georgia, serif; --font-mono:'DM Mono', monospace, monospace;
  --h-dw:#60a5fa; --h-guardian:#93c5fd; --h-rfe:#fb923c;
  --h-rad:#fb923c; --h-lib:#a78bfa; --h-trans:#38bdf8;
}
html[data-theme="light"] {
  --h-dw:#0763d5; --h-guardian:#0464d0; --h-rfe:#a84d03;
  --h-rad:#a84d03; --h-lib:#6f41f7; --h-trans:#066e9d;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { min-height:100vh; background:var(--bg); color:var(--txt); font:14px/1.6 var(--font-mono); text-rendering:optimizeLegibility; }
.amb { position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 65% 45% at 15% 15%,color-mix(in srgb,var(--a1) 8%,transparent) 0%,transparent 70%),radial-gradient(ellipse 55% 55% at 85% 85%,color-mix(in srgb,var(--a2) 7%,transparent) 0%,transparent 70%); }
.wrap { position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:24px 20px 100px; }

@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.anim { animation:fadeUp .4s cubic-bezier(.16,1,.3,1) forwards; }

/* Masthead */
.mast { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; padding:18px 0 14px; border-top:2px solid var(--txt); border-bottom:1px solid var(--bd2); }
.mast-name { font:clamp(34px,5vw,44px)/1 var(--font-serif); letter-spacing:-.5px; }
.mast-name i { color:var(--a1); font-style:italic; }
.mast-meta { color:var(--muted); font-size:10px; line-height:1.7; letter-spacing:2.5px; text-align:right; text-transform:uppercase; }
.mast-meta b { color:var(--mut2); }
.mast-sub { margin-top:2px; color:var(--mut2); font-size:12px; }
.mast-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:12px; border-bottom:1px solid var(--bd); color:var(--mut2); font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.mast-bar a { min-height:38px; padding:4px 6px; border-radius:4px; color:var(--mut2); text-decoration:none; text-underline-offset:.16em; transition:color .15s; }
.mast-bar a:hover,.mast-bar a.active { background:color-mix(in srgb,var(--a1) 9%,transparent); color:var(--a1); }
.mast-bar .back { margin-left:auto; color:var(--a1); }
.mast-bar .theme-btn { min-height:38px; margin-left:auto; padding:4px 6px; border:0; border-radius:4px; background:transparent; color:var(--mut2); cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; transition:color .15s; }
.mast-bar .theme-btn:hover { color:var(--a1); }

/* Live ticker */
.news-ticker { display:flex; align-items:center; gap:12px; min-height:46px; overflow:hidden; margin-bottom:24px; padding:10px 16px; border:1px solid var(--bd); border-radius:10px; background:var(--s1); font-size:12px; }
.ticker-badge { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:3px 8px; border:1px solid color-mix(in srgb,var(--danger) 30%,transparent); border-radius:6px; background:color-mix(in srgb,var(--danger) 14%,transparent); color:color-mix(in srgb,var(--danger) 80%,var(--txt)); font-size:10px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; }
.ticker-dot { width:6px; height:6px; border-radius:50%; background:var(--danger); animation:pulse 1.6s infinite ease-in-out; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.85); } }
.ticker-content { flex:1; overflow:hidden; color:var(--txt); text-overflow:ellipsis; white-space:nowrap; overflow-wrap:anywhere; }
.ticker-link { display:inline-block; max-width:100%; overflow:hidden; padding:5px 0; vertical-align:bottom; text-overflow:ellipsis; white-space:nowrap; color:var(--txt); text-decoration:none; text-underline-offset:.16em; transition:color .15s; }
.ticker-link:hover { color:var(--a1); }

/* Compass banner */
.compass-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px; padding:14px 18px; border:1px solid color-mix(in srgb,var(--a1) 32%,var(--bd)); border-radius:var(--r); background:color-mix(in srgb,var(--a1) 7%,var(--s1)); }
.compass-banner-txt { color:var(--txt); font-size:12px; }
.compass-banner-txt b { color:var(--a1); }
.compass-banner-scores { display:flex; gap:6px; flex-wrap:wrap; }
.c-chip { padding:2px 7px; border:1px solid var(--bd); border-radius:12px; background:var(--s2); color:var(--mut2); font-size:10px; letter-spacing:1px; }

/* Feed controls */
.feed-controls { display:flex; flex-direction:column; gap:14px; margin-bottom:28px; padding:16px; border:1px solid var(--bd); border-radius:var(--r); background:var(--s1); }
.source-tabs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.source-tab { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:6px 14px; border:1px solid var(--bd); border-radius:8px; background:var(--s2); color:var(--mut2); cursor:pointer; font:11px var(--font-mono); transition:all .15s; }
.source-tab:hover { border-color:var(--a1); color:var(--txt); }
.source-tab.on { border-color:var(--a1); background:var(--a1); color:var(--bg); font-weight:500; }
.source-tab.dw.on { border-color:var(--h-dw); background:var(--h-dw); color:var(--bg); }
.source-tab.guardian.on { border-color:var(--h-guardian); background:var(--h-guardian); color:var(--bg); }
.source-tab.rfe.on { border-color:var(--h-rfe); background:var(--h-rfe); color:var(--bg); }
.source-actions { display:flex; align-items:center; gap:10px; min-height:38px; margin-left:auto; }
.btn-refresh { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:6px 12px; border:1px solid var(--bd2); border-radius:8px; background:transparent; color:var(--mut2); cursor:pointer; font:10px var(--font-mono); transition:all .15s; }
.btn-refresh:hover { border-color:var(--a2); color:var(--a2); }
.btn-refresh.spinning svg { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.feed-status { color:var(--muted); font-size:10px; line-height:1.45; letter-spacing:.5px; overflow-wrap:anywhere; }
.filter-bar { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; }
.search-box { position:relative; }
.search-box input { width:100%; min-height:38px; padding:9px 12px 9px 34px; border:1px solid var(--bd); border-radius:8px; outline:none; background:var(--s2); color:var(--txt); font:11px var(--font-mono); transition:border-color .15s; }
.search-box input:focus { border-color:var(--a1); }
.search-box svg { position:absolute; top:50%; left:10px; width:14px; height:14px; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.filter-select { width:100%; min-height:38px; padding:9px 12px; border:1px solid var(--bd); border-radius:8px; outline:none; background:var(--s2); color:var(--txt); cursor:pointer; font:11px var(--font-mono); transition:border-color .15s; }
.filter-select:focus { border-color:var(--a1); }
.cat-pills { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.cat-pill { min-height:38px; padding:4px 10px; border:1px solid var(--bd); border-radius:16px; background:transparent; color:var(--muted); cursor:pointer; font:10px var(--font-mono); transition:all .15s; }
.cat-pill:hover { border-color:var(--mut2); color:var(--txt); }
.cat-pill.on { border-color:var(--a1); background:var(--s3); color:var(--a1); font-weight:500; }

/* Hero */
.hero-card { position:relative; min-width:0; overflow:hidden; margin-bottom:32px; padding:26px; border:1px solid var(--bd2); border-radius:var(--r); background:var(--s1); cursor:pointer; transition:border-color .2s,transform .2s; }
.hero-card:hover { border-color:var(--a1); transform:translateY(-2px); }
.hero-card::before { position:absolute; top:0; left:0; width:100%; height:2px; background:var(--txt); content:''; }
.hero-badge-row,.modal-badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.source-badge { --c:var(--a1); display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border:1px solid color-mix(in srgb,var(--c) 40%,transparent); border-radius:6px; background:color-mix(in srgb,var(--c) 14%,transparent); color:color-mix(in srgb,var(--c) 88%,var(--txt)); font-size:10px; font-weight:500; letter-spacing:1px; text-transform:uppercase; }
.source-badge.dw { --c:var(--h-dw); }.source-badge.guardian { --c:var(--h-guardian); }.source-badge.rfe { --c:var(--h-rfe); }.source-badge.polcomp { --c:var(--a1); }
.country-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border:1px solid var(--bd); border-radius:12px; background:var(--s2); color:var(--txt); font-size:10px; text-decoration:none; }.country-pill:hover { border-color:var(--a1); }
.hero-title { margin-bottom:12px; color:var(--txt); font:clamp(24px,3.8vw,34px)/1.25 var(--font-serif); letter-spacing:-.3px; overflow-wrap:anywhere; }
.hero-summary { max-width:82ch; margin-bottom:18px; color:var(--mut2); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.hero-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--bd); }
.hero-impacts,.card-impacts { display:flex; gap:6px; flex-wrap:wrap; }
.impact-tag { --c:var(--txt); display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border:1px solid color-mix(in srgb,var(--c) 40%,var(--bd)); border-radius:6px; background:var(--s2); color:var(--c); font-size:10px; letter-spacing:.5px; }
.impact-tag.prog,.modal-impact-row.prog{--c:var(--a1)}.impact-tag.soc,.modal-impact-row.soc{--c:var(--a3)}.impact-tag.dem,.modal-impact-row.dem{--c:var(--a2)}.impact-tag.trans,.modal-impact-row.trans{--c:var(--h-trans)}.impact-tag.cosmo,.modal-impact-row.cosmo{--c:var(--warn)}.impact-tag.lib,.modal-impact-row.lib{--c:var(--h-lib)}.impact-tag.sec,.modal-impact-row.sec{--c:var(--danger)}.impact-tag.rad,.modal-impact-row.rad{--c:var(--h-rad)}
.btn-read-lead,.btn-reset-filters { min-height:38px; padding:8px 16px; border-radius:8px; cursor:pointer; font:500 11px var(--font-mono); transition:opacity .15s; }.btn-read-lead { position:relative; z-index:2; display:inline-flex; align-items:center; border:0; background:var(--a1); color:var(--bg); text-decoration:none; }
/* Titles are links but read as headlines; the link's ::after stretches over the whole card so the card is one target. */
.hero-title a,.card-title a { color:inherit; text-decoration:none; transition:color .15s; }
.hero-title a:hover,.card-title a:hover { color:var(--a1); }
.hero-title a::after,.card-title a::after { position:absolute; inset:0; z-index:1; content:''; }
.card-link-act { position:relative; z-index:2; min-height:28px; padding:6px 0 6px 10px; }
.news-card:focus-within { border-color:var(--a1); }.btn-read-lead:hover,.btn-ext-link:hover { opacity:.9; }.btn-reset-filters { border:1px solid var(--bd2); background:var(--s2); color:var(--txt); }.btn-reset-filters:hover { border-color:var(--a1); background:var(--a1); color:var(--bg); }

/* Feed cards */
.sec-lbl { display:flex; align-items:center; gap:10px; margin:36px 0 16px; color:var(--muted); font-size:10px; letter-spacing:3px; text-transform:uppercase; }.sec-lbl::after { flex:1; height:1px; background:var(--bd); content:''; }.sec-lbl span { color:var(--a1); }
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr)); gap:18px; }
.news-card { display:flex; position:relative; min-width:0; flex-direction:column; justify-content:space-between; padding:18px; border:1px solid var(--bd); border-radius:var(--r); background:var(--s1); cursor:pointer; transition:all .2s cubic-bezier(.16,1,.3,1); }.news-card:hover { border-color:var(--bd2); background:var(--s2); transform:translateY(-2px); }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px; }.card-date { color:var(--muted); font-size:10px; }.card-title { margin-bottom:10px; color:var(--txt); font:clamp(19px,2.4vw,21px)/1.35 var(--font-serif); letter-spacing:-.2px; overflow-wrap:anywhere; }.card-title mark { padding:0 2px; border-radius:2px; background:color-mix(in srgb,var(--a1) 30%,transparent); color:var(--txt); }.card-desc { flex-grow:1; margin-bottom:16px; color:var(--mut2); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }.card-foot { display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:1px solid var(--bd); }.card-meta { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; }.card-link-act { display:inline-flex; align-items:center; gap:4px; color:var(--a1); font-size:10px; font-weight:500; text-decoration:none; text-underline-offset:.16em; }
.news-empty { grid-column:1/-1; padding:60px 20px; border:1px dashed var(--bd); border-radius:var(--r); background:var(--s1); text-align:center; }.empty-title { margin-bottom:8px; color:var(--txt); font:24px var(--font-serif); }.empty-sub { margin-bottom:16px; color:var(--muted); font-size:12px; }

/* Modal */
.modal-backdrop[hidden] { display:none !important; }
.modal-backdrop { display:flex; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .25s ease; }.modal-backdrop.open { opacity:1; pointer-events:auto; }.modal-box { position:relative; width:100%; max-width:720px; max-height:88vh; overflow-y:auto; overscroll-behavior:contain; padding:32px; border:1px solid var(--bd2); border-radius:16px; background:var(--s1); box-shadow:0 20px 50px rgba(0,0,0,.6); scrollbar-color:var(--bd2) var(--s1); transform:translateY(20px); transition:transform .25s cubic-bezier(.16,1,.3,1); }.modal-backdrop.open .modal-box { transform:translateY(0); }.modal-close { display:flex; position:absolute; top:20px; right:20px; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--bd); border-radius:50%; background:var(--s2); color:var(--mut2); cursor:pointer; font-size:14px; transition:all .15s; }.modal-close:hover { border-color:var(--a1); color:var(--txt); }.modal-title { margin-bottom:16px; color:var(--txt); font:clamp(24px,4vw,32px)/1.3 var(--font-serif); overflow-wrap:anywhere; }.modal-meta-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:14px; border-bottom:1px solid var(--bd); color:var(--muted); font-size:10px; }.modal-body { margin-bottom:28px; color:var(--txt); font-size:13px; line-height:1.9; }.modal-body p { margin-bottom:16px; }.modal-body a { color:var(--a1); text-decoration-thickness:1px; text-underline-offset:.16em; }.modal-impact-sec { margin-bottom:24px; padding:18px; border:1px solid var(--bd); border-radius:var(--r); background:var(--s2); }.modal-impact-title { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--a1); font-size:10px; letter-spacing:2px; text-transform:uppercase; }.modal-impact-list { display:flex; flex-direction:column; gap:8px; }.modal-impact-row { --c:var(--a1); display:flex; align-items:baseline; justify-content:space-between; padding-bottom:6px; border-bottom:1px dashed var(--bd); font-size:12px; }.modal-impact-row b { color:var(--c); font-weight:500; }.modal-impact-row b::before { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:currentColor; content:''; }.modal-impact-row .impact-score { color:var(--c); font-weight:500; }.modal-impact-note { margin-left:8px; color:var(--mut2); font-size:10px; }.modal-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--bd); }.btn-ext-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:9px 18px; border-radius:8px; background:var(--a1); color:var(--bg); font-size:11px; font-weight:500; text-decoration:none; transition:opacity .15s; }
.colophon { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:60px; padding-top:20px; border-top:1px solid var(--bd); color:var(--muted); font-size:10px; letter-spacing:2px; text-transform:uppercase; }.colophon a { display:inline-block; padding:6px 0; color:var(--mut2); text-decoration:none; text-underline-offset:.16em; transition:color .15s; }.colophon a:hover { color:var(--a1); }

/* Refresh additions: focus, notices, filter summaries, media, provenance, skeletons, and progressive loading. */
:root { color-scheme:dark; --focus-ring:color-mix(in srgb,var(--a1) 78%,white); --focus-halo:color-mix(in srgb,var(--a1) 26%,transparent); --state-surface:color-mix(in srgb,var(--s2) 92%,var(--a1)); }
html[data-theme="light"] { color-scheme:light; }
button,input,select { min-height:38px; } button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; box-shadow:0 0 0 4px var(--focus-halo); }

#data-status-notice:not([hidden])::before { flex:none; width:7px; height:7px; margin-top:.5em; border-radius:50%; background:var(--notice-color); content:''; }
.feed-notice,#data-status-notice:not([hidden]) { --notice-color:var(--a1); display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--notice-color) 40%,var(--bd)); border-radius:8px; background:color-mix(in srgb,var(--notice-color) 8%,var(--s1)); color:var(--mut2); font-size:12px; line-height:1.55; }
.feed-notice > :first-child { color:var(--notice-color); }.feed-notice strong,.feed-notice b { color:var(--txt); }
.feed-notice.is-loading,.feed-notice.loading,.feed-status.is-loading,.feed-status.loading,#data-status-notice[data-state="loading"] { --notice-color:var(--a1); }
.feed-notice.is-success,.feed-notice.success,.feed-status.is-success,.feed-status.success { --notice-color:var(--a2); color:color-mix(in srgb,var(--a2) 62%,var(--txt)); }
.feed-notice.is-warning,.feed-notice.warning,.feed-notice.is-stale,.feed-notice.stale,.feed-status.is-warning,.feed-status.warning,.feed-status.is-stale,.feed-status.stale,#data-status-notice[data-state="degraded"],#data-status-notice[data-state="stale"] { --notice-color:var(--warn); color:color-mix(in srgb,var(--warn) 58%,var(--txt)); }
.feed-notice.is-error,.feed-notice.error,.feed-notice.is-degraded,.feed-notice.degraded,.feed-status.is-error,.feed-status.error,.feed-status.is-degraded,.feed-status.degraded,#data-status-notice[data-state="offline"] { --notice-color:var(--danger); color:color-mix(in srgb,var(--danger) 60%,var(--txt)); }

.filter-summary,#filter-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding-top:2px; color:var(--mut2); font-size:10px; line-height:1.5; }#filter-summary:empty { display:none; }.filter-summary-count,.filter-summary strong { color:var(--txt); font-weight:500; }.filter-summary-tags { display:flex; flex:1 1 auto; gap:6px; min-width:0; flex-wrap:wrap; }.filter-summary-tag { max-width:100%; overflow:hidden; padding:3px 7px; border:1px solid var(--bd); border-radius:999px; background:var(--s2); color:var(--mut2); text-overflow:ellipsis; white-space:nowrap; }.filter-clear,.btn-clear-filters { flex:0 0 auto; min-height:34px; padding:6px 10px; border:1px solid var(--bd2); border-radius:7px; background:transparent; color:var(--a1); cursor:pointer; font:10px var(--font-mono); }.filter-clear:hover,.btn-clear-filters:hover { border-color:var(--a1); background:color-mix(in srgb,var(--a1) 10%,transparent); color:var(--txt); }

.story-media,.article-media,.hero-media { position:relative; overflow:hidden; isolation:isolate; margin:0 0 14px; border:1px solid var(--bd); border-radius:calc(var(--r) - 3px); background:var(--s2); aspect-ratio:16/9; }.story-media.story-media-featured { max-height:310px; margin-bottom:20px; }.story-media + .story-content,.article-media + .article-content { margin-top:14px; }.story-image,.article-image,.hero-image,.story-media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }.news-card:hover .story-image,.news-card:hover .article-image,.news-card:hover .story-media img,.hero-card:hover .hero-image,.hero-card:hover .story-media img { transform:scale(1.025); }.story-media-fallback,.story-image-fallback,.article-media-fallback,.story-media.image-fallback { display:grid; width:100%; height:100%; min-height:116px; place-items:center; padding:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--a1) 15%,transparent),transparent 54%),linear-gradient(225deg,color-mix(in srgb,var(--a2) 10%,transparent),var(--s2)); color:var(--mut2); font:17px/1.25 var(--font-serif); text-align:center; }.story-media.image-fallback { display:flex; align-items:flex-end; padding:14px; }.story-media-fallback svg,.story-image-fallback svg,.article-media-fallback svg { width:30px; height:30px; color:var(--a1); }.story-media-topic { max-width:100%; overflow:hidden; padding:4px 8px; border:1px solid color-mix(in srgb,var(--a1) 42%,var(--bd)); border-radius:999px; background:color-mix(in srgb,var(--bg) 72%,transparent); color:var(--txt); font-size:10px; letter-spacing:.05em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.story-media .story-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.story-media .story-media-topic { position:absolute; bottom:10px; left:10px; z-index:2; }
/* Image-less stories get a slim topic band. The shared fallback rule used height:100%, which
   ballooned the card and let its title spill over the card below. The featured image fills its
   width (max-height + aspect-ratio had shrunk it to about half). */
.story-media.image-fallback { height:64px; min-height:0; aspect-ratio:auto; }
.story-media.story-media-featured { height:clamp(190px,30vw,310px); max-height:none; aspect-ratio:auto; }
.story-media.story-media-featured.image-fallback { height:clamp(110px,14vw,150px); }
.story-media.is-loading .story-image { opacity:0; }
.story-media.is-loaded .story-image { opacity:1; animation:image-reveal .28s ease-out; }
.story-media.is-loading::before { position:absolute; inset:0; z-index:0; background:linear-gradient(110deg,var(--s2),color-mix(in srgb,var(--a1) 9%,var(--s2)),var(--s2)); content:''; }
@keyframes image-reveal { from { opacity:0; transform:scale(1.01); } to { opacity:1; transform:scale(1); } }

.article-provenance,.story-provenance,.card-provenance { display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; color:var(--muted); font-size:10px; line-height:1.45; }.article-provenance { flex:0 0 auto; padding:2px 7px; border:1px solid var(--bd); border-radius:999px; background:var(--s2); color:var(--mut2); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }.article-provenance.live { border-color:color-mix(in srgb,var(--a2) 42%,var(--bd)); color:var(--a2); }.article-provenance.curated { border-color:color-mix(in srgb,var(--a1) 42%,var(--bd)); color:var(--a1); }.article-provenance a,.story-provenance a,.card-provenance a { color:var(--mut2); text-decoration-color:color-mix(in srgb,currentColor 48%,transparent); }.article-provenance a:hover,.story-provenance a:hover,.card-provenance a:hover { color:var(--a1); }.provenance-label { color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }.provenance-value { color:var(--txt); }.provenance-divider { width:3px; height:3px; border-radius:50%; background:var(--bd2); }

.skeleton-card,.news-card.is-skeleton { min-height:270px; overflow:hidden; pointer-events:none; cursor:progress; }.skeleton,.skeleton-line,.skeleton-badge,.skeleton-media,.skeleton-card .card-title,.skeleton-card .card-desc { position:relative; overflow:hidden; border-radius:5px; background:color-mix(in srgb,var(--s3) 78%,var(--bd)); color:transparent; }.skeleton::after,.skeleton-line::after,.skeleton-badge::after,.skeleton-media::after,.skeleton-card .card-title::after,.skeleton-card .card-desc::after { position:absolute; inset:0; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--txt) 9%,transparent),transparent); content:''; transform:translateX(-100%); animation:skeleton-shimmer 1.5s infinite; }@keyframes skeleton-shimmer { to { transform:translateX(100%); } }.skeleton-line { height:11px; margin:9px 0; }.skeleton-line.short { width:58%; }.skeleton-line.medium { width:78%; }.skeleton-badge { width:78px; height:20px; }.skeleton-media { width:100%; margin-bottom:14px; aspect-ratio:16/9; }.skeleton-card .card-title { min-height:52px; margin-top:12px; }.skeleton-card .card-desc { min-height:48px; }

.load-more-wrap,.feed-load-more,#load-more-container { display:flex; justify-content:center; margin:28px 0 8px; }.load-more,.btn-load-more { min-width:min(100%,210px); min-height:42px; padding:9px 16px; border:1px solid var(--bd2); border-radius:8px; background:var(--s1); color:var(--txt); cursor:pointer; font:11px var(--font-mono); transition:border-color .15s,background .15s,color .15s; }.load-more:hover,.btn-load-more:hover { border-color:var(--a1); background:var(--state-surface); color:var(--a1); }.load-more[disabled],.btn-load-more[disabled] { cursor:wait; opacity:.62; }
.inline-feed-state,.news-inline-state,.feed-degraded-state,.feed-missing-state { display:flex; align-items:flex-start; gap:11px; grid-column:1/-1; padding:15px 16px; border:1px dashed var(--bd2); border-radius:var(--r); background:color-mix(in srgb,var(--s1) 86%,var(--warn)); color:var(--mut2); font-size:12px; line-height:1.6; }.inline-feed-state strong,.news-inline-state strong,.feed-degraded-state strong,.feed-missing-state strong { display:block; color:var(--txt); }.inline-feed-state.is-error,.news-inline-state.is-error,.feed-missing-state { border-color:color-mix(in srgb,var(--danger) 45%,var(--bd)); background:color-mix(in srgb,var(--s1) 89%,var(--danger)); }.inline-feed-state .btn-refresh,.news-inline-state .btn-refresh,.feed-degraded-state .btn-refresh,.feed-missing-state .btn-refresh { flex:0 0 auto; margin-left:auto; }

@media (max-width:768px) { .filter-bar { grid-template-columns:1fr; } }
@media (max-width:640px) { .wrap { padding:16px 12px 72px; }.mast { align-items:flex-start; gap:10px; padding:14px 0 12px; }.mast-name { font-size:clamp(32px,12vw,40px); }.mast-meta { width:100%; font-size:10px; letter-spacing:1.7px; text-align:left; }.mast-bar { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:18px; padding-bottom:10px; }.mast-bar a,.mast-bar .back,.mast-bar .theme-btn { width:100%; min-height:42px; margin-left:0; padding:8px; text-align:center; }.news-ticker { align-items:flex-start; gap:8px; margin-bottom:18px; padding:10px 12px; }.ticker-content,.ticker-link { white-space:normal; }.compass-banner,.feed-controls { margin-bottom:20px; padding:13px; }.source-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.source-tab { width:100%; min-width:0; min-height:42px; padding:7px 8px; font-size:10px; text-align:center; }.source-actions { display:grid; grid-column:1/-1; grid-template-columns:minmax(0,1fr) auto; width:100%; margin-left:0; gap:8px; }.feed-status { align-self:center; min-width:0; }.btn-refresh { min-height:42px; padding:7px 10px; }.filter-bar { gap:8px; }.search-box input,.filter-select { min-height:42px; font-size:12px; }.cat-pills { flex-wrap:nowrap; overflow-x:auto; margin-inline:-1px; padding:2px 1px 7px; scrollbar-color:var(--bd2) transparent; scrollbar-width:thin; }.cat-pill { flex:0 0 auto; min-height:38px; padding:6px 11px; }.filter-summary,#filter-summary { align-items:flex-start; flex-wrap:wrap; }.filter-clear,.btn-clear-filters { min-height:38px; }.hero-card { margin-bottom:24px; padding:18px; }.hero-title { font-size:clamp(25px,8vw,31px); }.hero-summary { font-size:12px; line-height:1.75; }.hero-foot { align-items:stretch; gap:14px; }.btn-read-lead { width:100%; min-height:42px; }.sec-lbl { margin:28px 0 13px; letter-spacing:2px; }.news-grid { gap:12px; }.news-card { padding:15px; }.card-title { font-size:20px; }.colophon { align-items:flex-start; margin-top:42px; line-height:1.7; }.modal-backdrop { align-items:flex-end; padding:0; }.modal-box { width:100%; max-height:min(90dvh,760px); padding:22px 16px max(20px,env(safe-area-inset-bottom)); border-right:0; border-bottom:0; border-left:0; border-radius:16px 16px 0 0; transform:translateY(100%); }.modal-close { top:12px; right:12px; width:40px; height:40px; }.modal-title { padding-right:38px; font-size:clamp(25px,8vw,31px); }.modal-meta-row { gap:8px 12px; margin-bottom:18px; }.modal-body { font-size:13px; line-height:1.8; }.modal-impact-row { align-items:flex-start; gap:10px; }.modal-actions { align-items:stretch; }.btn-ext-link,.modal-actions .source-tab { width:100%; min-height:42px; }.inline-feed-state,.news-inline-state,.feed-degraded-state,.feed-missing-state { flex-wrap:wrap; }.inline-feed-state .btn-refresh,.news-inline-state .btn-refresh,.feed-degraded-state .btn-refresh,.feed-missing-state .btn-refresh { width:100%; margin-left:0; } }
@media (max-width:380px) { .mast-bar,.source-tabs { grid-template-columns:1fr; }.source-actions { grid-column:auto; grid-template-columns:1fr; }.btn-refresh { width:100%; }.compass-banner { padding:12px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }.anim { opacity:1; transform:none; } }