/* ============================================================
   RealTime AI News — style.css v4.2
   Features: CSS variables, dark mode, responsive, animations
   v3.4: hamburger mobile nav, cat-tab scroll, sidebar 900px, hero aspect-ratio
   v4.2: remove Politics/Stocks/Crypto blue highlight (uniform tabs), static-sidebar
   sticky offset (Trending Now no longer overlaps tabs), ticker-speed CSS var,
   article-cat-nav improvements
   v4.1: fix overflow-x:clip (sticky now works), --ticker-h var, sticky-sidebar offset,
   static-page cat-tabs sticky, mobile-nav fixed, full-bleed sticky-controls
   v4.0: sticky ticker-bar, sticky-controls (frozen tab band), new tab highlights,
   tab overflow fade arrow, mobile adjustments
   v3.5: card-title 2-line clamp, 72ch article width, contact overflow-wrap,
   480px more-stories single-col, cat-tab flex:0 0 auto, BOM/mojibake clean
   ============================================================ */

/* ── CSS Variables (Light Mode) ─────────────────────────────── */
:root {
  --accent:       #0066FF;
  --accent-hover: #0052cc;
  --accent-light: #e8f0fe;
  --cat-text:     #0052cc; /* category chip text on --accent-light — WCAG AA (5.9:1) */
  --red:          #D32F2F; /* was #E63946 — darkened so #fff text reaches WCAG AA (~5:1) */
  --green:        #2DC653;
  --bg:           #F8F9FA;
  --surface:      #FFFFFF;
  --surface2:     #F1F3F5;
  --border:       #E9ECEF;
  --text:         #212529;
  --text-muted:   #50575E; /* darkened (was #5C636A → #6C757D) for stronger readability/AA */
  --text-light:   #ADB5BD;
  --shadow:       0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --radius:       10px;
  --radius-lg:    16px;
  --header-h:     64px;
  --ticker-h:     38px;   /* height of .ticker-bar */
  --ticker-speed: 65s;    /* ticker animation duration — lower = faster */
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   Georgia, 'Times New Roman', serif;
  --transition:   0.2s ease;
  --max-w:        1280px;
}

/* ── Dark Mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #0D1117;
  --surface:    #161B22;
  --surface2:   #21262D;
  --border:     #30363D;
  --text:       #E6EDF3;
  --text-muted: #8B949E;
  --text-light: #484F58;
  --shadow:     0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --accent-light: #1a2a4a;
  --cat-text:   #9ec1ff; /* lighter blue on dark chip bg — WCAG AA in dark mode */
}

/* Dark mode: slightly stronger ring on logo to frame it */
[data-theme="dark"] .logo-icon,
[data-theme="dark"] .author-avatar {
  box-shadow: 0 0 0 1.5px var(--border);
}

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* overflow-x:clip prevents horizontal scroll WITHOUT breaking position:sticky.
     overflow-x:hidden creates a scroll container that kills sticky on child elements. */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: clip;
  transition: background var(--transition), color var(--transition);
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  height: var(--header-h);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}

/* Header logo image — clips white JPEG corners to circle */
.logo-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* Clip white background on dark mode */
  overflow: hidden;
}

.logo-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}

.logo-ai { color: var(--accent); }

.main-nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
}

.main-nav a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dark-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  color: var(--text);
}

.dark-toggle:hover { background: var(--surface2); }

.subscribe-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.subscribe-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* ── Breaking-news quick-link (header, all viewports) — v7.9.5 ─────────────────
   A persistent lightning shortcut to /breaking/, sat immediately left of the
   dark-mode toggle. Pulses gently to aid discovery; .active (on breaking pages)
   is solid red and stops pulsing. Visible on mobile (where .subscribe-btn hides),
   so the breaking section is always one tap away. */
.breaking-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--red, #E63946);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  animation: breakingPulse 2.4s ease-out infinite;
}
.breaking-link:hover {
  background: var(--surface2);
  border-color: var(--red, #E63946);
  transform: translateY(-1px);
}
.breaking-link.active {
  background: var(--red, #E63946);
  border-color: var(--red, #E63946);
  color: #fff;
  animation: none;
}
.breaking-link-icon { display: block; }
@keyframes breakingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(230, 57, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .breaking-link { animation: none; }
}

/* ── Mobile hamburger menu ──────────────────────────────────── */
.hamburger-btn {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 38px;
  height: 38px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text);
  transition: background var(--transition);
  flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--surface2); }
.hamburger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.25s ease;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
  z-index: 99;
  padding: 0.75rem 1.25rem;
  flex-direction: column;
  gap: 0;
  transition: background var(--transition);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  color: var(--text);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
  display: block;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { color: var(--accent); }

/* ── Breaking News Ticker ────────────────────────────────────── */
.ticker-bar {
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  height: 38px;
  overflow: hidden;
  position: sticky;
  top: var(--header-h);
  z-index: 90;
}

.ticker-badge {
  background: #fff;
  color: var(--red);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  flex-shrink: 0;
  margin-right: 1rem;
}

.ticker-track {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.ticker-inner {
  display: inline-flex;
  gap: 2rem;
  animation: ticker var(--ticker-speed) linear infinite;
  white-space: nowrap;
}

.ticker-inner:hover { animation-play-state: paused; }

.ticker-inner a {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.ticker-inner a:hover { text-decoration: underline; }

.ticker-sep { color: rgba(255,255,255,0.5); }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Home Layout ─────────────────────────────────────────────── */
.home-main { padding: 2rem 1.25rem; }

.home-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
}

.home-content-col { min-width: 0; overflow: visible; }

.section-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}

.last-updated {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Category Tabs ───────────────────────────────────────────── */
.cat-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scroll-snap-type: x mandatory;
}
.cat-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition);
  flex: 0 0 auto;
  min-height: 40px;
  white-space: nowrap;
  scroll-snap-align: start;
}

.cat-tab:hover { border-color: var(--accent); color: var(--accent); }

.cat-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── News Grid ───────────────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

/* ── News Card ───────────────────────────────────────────────── */
.news-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

@media (hover: hover) {
  .news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
}

.card-img-link { display: block; }

.card-img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--surface2);
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Deferred images (data-src) show placeholder background until loaded */
.card-img-wrap img.lazy-img {
  background: var(--surface2);
  /* Prevent layout shift — dimensions already set via width/height attrs */
}

.news-card:hover .card-img-wrap img { transform: scale(1.04); }

.card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--surface2);
  min-height: 160px;
}

.card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-cat {
  display: inline-block;
  background: var(--accent-light);
  color: var(--cat-text); /* WCAG AA: darker in light mode, lighter in dark mode */
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  align-self: flex-start;
}

.card-title {
  font-size: 1.05rem;      /* v7.9.9: slightly larger for scannability (was 1rem) */
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  flex: 1;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--accent); text-decoration: none; }
/* v7.5.7: Prevent .static-content a { text-decoration:underline } from bleeding
   into news-card titles on category pages (cards sit inside .static-content) */
.static-content .news-card .card-title a { text-decoration: none; }
.static-content .news-card .card-read-more { text-decoration: none; }
/* v7.6.1: Prevent .static-content h2 { margin:2rem 0 0.75rem; border-bottom; display:inline-block }
   from bleeding into .card-title h2 on category pages.
   - margin:0 removes the 2rem gap above the title
   - border-bottom:none removes the underline
   - display restores the -webkit-box line-clamp needed for 2-line clamp
   Also: .static-content p { margin-bottom:1rem } bleeds into .card-excerpt */
.static-content .news-card .card-title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
  display: -webkit-box;
}
.static-content .news-card .card-excerpt {
  margin-bottom: 0;
}

.card-excerpt {
  font-size: 0.9rem;       /* v7.9.9: slightly larger for readability (was 0.875rem) */
  color: var(--text-muted);
  line-height: 1.55;       /* v7.9.9: looser leading for readability (was 1.5) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: auto;
}

.card-read-more {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--accent);
  white-space: nowrap;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.home-sidebar, .article-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

.sidebar-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.sidebar-widget h3, .sidebar-widget h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.sticky-sidebar { position: sticky; top: calc(var(--header-h) + 38px + 96px + 1rem); }

.trending-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trending-list li a {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}

.trending-list li a:hover { color: var(--accent); }

.trend-num {
  font-weight: 800;
  color: var(--accent);
  font-size: 0.9rem;
  flex-shrink: 0;
  min-width: 1.5rem;
}

.sidebar-newsletter, .newsletter-widget {
  background: linear-gradient(135deg, var(--accent), #0052cc);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.sidebar-newsletter h4, .newsletter-widget h3 {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.3);
}

.sidebar-newsletter p, .newsletter-widget p {
  font-size: 0.875rem;
  opacity: 0.9;
  margin-bottom: 0.75rem;
}

.sidebar-subscribe-btn {
  background: #fff;
  color: var(--accent);
  border: none;
  border-radius: var(--radius);
  padding: 0.6rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.875rem;
  width: 100%;
  transition: transform var(--transition), box-shadow var(--transition);
}

.sidebar-subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ── Ad containers ───────────────────────────────────────────── */
.ad-container {
  margin: 1.5rem 0;
  text-align: center;
  min-height: 90px;
}

/* Only show the placeholder border when AdSense hasn't filled the slot */
.ad-container:empty,
.ad-container:has(ins:not([data-ad-status])) {
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Affiliate Box ───────────────────────────────────────────── */
.affiliate-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

[data-theme="dark"] .affiliate-box {
  background: #2a2400;
  border-color: #5a4800;
}

.affiliate-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f57c00;
}

.affiliate-link {
  font-weight: 600;
  color: #e65100;
  font-size: 0.9rem;
}

.affiliate-link:hover { text-decoration: underline; }

.affiliate-disclosure {
  margin-left: auto;
  font-size: 0.7rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  color: var(--text-muted);
}

/* ── Share Buttons ───────────────────────────────────────────── */
.share-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.share-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icon-only: square shape */
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  /* hide any residual text */
  line-height: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition);
}

.share-btn svg { flex-shrink: 0; }

.share-btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.share-btn:active { transform: translateY(0); }

.share-wa   { background: #25D366; color: #fff; }
.share-tw   { background: #000000; color: #fff; }
.share-fb   { background: #1877F2; color: #fff; }
.share-li   { background: #0A66C2; color: #fff; }
.share-ig   { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.share-copy { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }

/* ── Article page cat-nav (tabs strip below header on article pages) ──────── */
.article-cat-nav {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  padding: 0.5rem 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h));
  z-index: 80;
  /* Ensure full-width background behind tabs */
  width: 100%;
}

/* ── Static pages: cat-tabs inside static-content-col ─────────────────────────
   These are navigation links in the content area, NOT sticky filters.
   Static pages use article-cat-nav OUTSIDE the grid for the sticky nav bar. ──*/
.static-content-col > .cat-tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.article-cat-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.article-cat-nav .cat-tabs {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-bottom: 0;
  /* Prevent tab clipping at edges */
  padding: 0 0.25rem;
}

/* ── More Stories section (cross-category, below article body) ─────────────── */
.more-stories {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border);
}

.more-stories h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.more-stories .related-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* ── Article Page ────────────────────────────────────────────── */
.article-main { padding: 1.5rem 1.25rem 3rem; }

.article-container {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}

/* Prevent grid/flex children from forcing overflow on narrow screens */
.article-content-col,
.article-body,
.article-header { min-width: 0; }


.breadcrumb {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }

.article-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.article-header { margin-bottom: 1.5rem; }

.article-cat-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.article-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* Author byline — E-E-A-T visible authorship for AdSense/Google */
.article-author {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* Real logo image replacing the old CSS ::before pseudo-element avatar */
.author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  /* Subtle ring to make logo stand out from article background */
  box-shadow: 0 0 0 1.5px var(--border);
}

/* Cookie consent banner */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--card-bg, var(--bg));
  border-top: 2px solid var(--accent);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  font-size: 0.875rem;
  color: var(--text);
}
#cookie-banner p {
  margin: 0;
  flex: 1;
  min-width: 200px;
  line-height: 1.5;
}
#cookie-banner a { color: var(--accent); text-decoration: underline; }
.cookie-btns {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}
.cookie-accept {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.cookie-accept:hover { background: var(--accent-hover); }
.cookie-learn {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: underline;
}

/* Static content h3 (used in cookie policy) */
.static-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 1.25rem 0 0.5rem;
}

.article-text {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
  max-width: 72ch;
  margin-inline: auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-text p {
  margin-bottom: 1.25rem;
}

.article-text p:last-child { margin-bottom: 0; }

/* Hero image */
.article-hero {
  margin: 0 0 1.5rem;
  /* border-radius and overflow moved to img so figcaption is never clipped */
}

.article-hero img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 12px 12px 0 0;
  /* Rounded top corners only — bottom flat so figcaption sits flush below */
}

.article-hero figcaption,
.unsplash-credit {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.5rem 0.5rem 0.25rem;
  line-height: 1.6;
  display: block;
  width: 100%;
  /* Ensure figcaption is always visible on all screen sizes */
  overflow: visible !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

/* Unsplash attribution: links use accent color so they are clearly visible
   on both mobile and desktop per Unsplash API guidelines */
.unsplash-credit a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color var(--transition);
  /* Force link visibility on iOS Safari and mobile Chrome */
  -webkit-tap-highlight-color: rgba(0,102,255,0.15);
  display: inline;
  pointer-events: auto;
}

.unsplash-credit a:hover,
.unsplash-credit a:active { color: var(--accent-hover); text-decoration: underline; }

.article-footer-share {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.article-footer-share strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.source-link {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.source-link a { color: var(--text-muted); }
.source-link a:hover { color: var(--accent); }

/* ── Related Articles ────────────────────────────────────────── */
.related-articles {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border);
}

.related-articles h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.related-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: var(--text);
}

@media (hover: hover) {
  .related-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--text);
  }
}

.related-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.related-card-body { padding: 0.75rem; }

.related-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.3rem;
}

.related-card h4 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Newsletter Modal ────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.modal-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.25s ease;
}

@keyframes modalIn {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.modal-close:hover { background: var(--surface2); }

.modal-box h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.modal-box p  { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.9rem; }

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.newsletter-form input[type="email"] {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  transition: border-color var(--transition);
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}

.newsletter-form button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}

.newsletter-form button:hover { background: var(--accent-hover); }

.modal-privacy { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
.modal-privacy a { color: var(--text-muted); text-decoration: underline; }

.success-msg { color: var(--green); font-weight: 700; font-size: 1rem; text-align: center; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 3rem 1.25rem 1.5rem;
  margin-top: 3rem;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-brand .logo-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; font-size: 1.1rem; }

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 0.5rem;
  max-width: 280px;
}

.footer-links h2 {   /* v7.9.10: was h4 — changed to h2 to fix heading-order (a11y); same visual style */
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;   /* reset h2 default margins so it looks identical to the old h4 */
}

.footer-links a {
  display: block;
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 0.2rem 0;
  transition: color var(--transition);
}

.footer-links a:hover { color: var(--accent); }

/* v7.9.6: Subscribe Free link in the footer "More" column — accent it so it reads
   as a CTA rather than a plain nav link. */
.footer-links a.footer-subscribe {
  color: var(--accent);
  font-weight: 600;
  margin-top: 0.35rem;
}
.footer-links a.footer-subscribe:hover { color: var(--accent-hover, var(--accent)); text-decoration: underline; }

.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* Footer logo */
.footer-bottom-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.footer-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity var(--transition);
}

.footer-logo:hover { opacity: 1; }

.footer-bottom p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.footer-disclaimer { font-size: 0.75rem; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .home-inner, .article-container, .static-inner { grid-template-columns: minmax(0, 1fr) 280px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .sticky-sidebar { position: static; }
}

@media (max-width: 900px) {
  .home-inner, .article-container, .static-inner { grid-template-columns: minmax(0, 1fr); }
  .home-sidebar, .article-sidebar, .static-sidebar { display: none; }
}

@media (max-width: 768px) {
  :root { --header-h: 56px; }

  .header-inner { gap: 0.5rem; padding: 0 0.75rem; }
  .logo-icon    { width: 30px; height: 30px; flex: 0 0 auto; }
  .author-avatar { width: 20px; height: 20px; }
  .logo-text    { font-size: 1rem; }
  .site-logo    { flex: 1 1 auto; }
  .main-nav     { display: none; }
  .hamburger-btn { display: flex; }
  .site-header  { position: sticky; }

  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

  /* Show 3-line excerpt on mobile single-column layout */
  .card-excerpt { -webkit-line-clamp: 3; }

  .article-main  { padding: 1rem 0.75rem 2rem; }
  .article-body   { padding: 1.25rem; }
  .article-title  { font-size: 1.4rem; }
  .article-text   { font-size: 1rem; }
  /* Use aspect-ratio instead of max-height so image doesn't get cropped */
  .article-hero img { height: auto !important; max-height: none; aspect-ratio: 16/9; width: 100%; }

  /* Guarantee photo credit is always visible on mobile */
  .article-hero figcaption,
  .unsplash-credit {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    height: auto !important;
    clip: auto !important;
    padding: 0.4rem 0.5rem 0.25rem;
    font-size: 0.72rem;
  }
  .unsplash-credit a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    pointer-events: auto !important;
    display: inline !important;
  }

  .related-grid { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }

  /* Wrap share buttons on narrow screens */
  .share-buttons { gap: 0.4rem; flex-wrap: wrap; }
  .share-btn     { width: 34px; height: 34px; }

  .ticker-badge  { padding: 0.2rem 0.5rem; font-size: 0.72rem; }
  .ticker-inner a { font-size: 0.8rem; }

  .subscribe-btn { display: none; }
  /* v7.9.5: subscribe hides on mobile but the Breaking quick-link stays — keep the
     header-actions cluster tight so logo + 3 controls fit narrow phones. */
  .header-actions { gap: 0.5rem; }
  .breaking-link { width: 36px; height: 36px; font-size: 1rem; }
  .article-cat-nav { padding: 0.4rem 0.75rem; }
  .more-stories .related-grid { grid-template-columns: repeat(2, 1fr); }
  .section-header { margin-top: 0.5rem; }
}

@media (max-width: 480px) {
  .home-main, .article-main { padding: 1rem 0.75rem 2rem; }
  .modal-box { padding: 1.5rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .news-grid { gap: 1rem; }
  .more-stories .related-grid { grid-template-columns: 1fr; }
  .card-meta { gap: 0.4rem 0.65rem; }
  .card-read-more { margin-left: 0; }
}

/* ── Static pages (About / Privacy / Contact) ────────────────── */
.static-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.static-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}

.static-content-col { min-width: 0; }

.static-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h) + 56px + 1rem);
  /* 56px = approximate cat-tabs row height when sticky */
  align-self: start;
}

.static-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  min-width: 0;
}

.static-content h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  font-family: var(--font-serif);
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--text);
}

.static-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  color: var(--text);
}

.static-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
}

.static-content .lead {
  font-size: 1.15rem;
  color: var(--text);
  font-weight: 500;
}

.static-content .static-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.static-content a { color: var(--accent); text-decoration: underline; }
.static-content a:hover { color: var(--accent-hover); }

.static-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}

.static-list li {
  padding: 0.6rem 1rem;
  background: var(--surface2);
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.5;
}

.static-list li strong { color: var(--accent); }

.contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.contact-icon { font-size: 2rem; line-height: 1; }

.contact-card > div { min-width: 0; }

.contact-card a {
  font-size: 1.05rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Static page responsive — placed after base rules so they take effect */
@media (max-width: 1100px) {
  .static-inner { grid-template-columns: minmax(0, 1fr); }
  .static-sidebar { display: none; }
}

@media (max-width: 768px) {
  .static-main    { padding: 1.5rem 0.75rem 2rem; }
  .static-content { padding: 1.5rem 1.25rem; }
  .static-content h1 { font-size: 1.5rem; }
}

/* ── Load More Button ─────────────────────────────────────────────── */
.load-more-wrap {
  display: none;           /* shown by JS when needed */
  text-align: center;
  padding: 2rem 1rem 1rem;
  grid-column: 1 / -1;    /* full width inside the grid */
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 2rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;        /* touch-friendly */
  min-width: 200px;
  letter-spacing: 0.02em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0,102,255,0.25);
}

.load-more-btn::after {
  content: '↓';
  font-size: 1rem;
}

.load-more-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,102,255,0.35);
}

.load-more-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.load-more-count {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Mobile: full-width button on small screens */
@media (max-width: 480px) {
  .load-more-btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ── Print styles ────────────────────────────────────────────── */
@media print {
  .site-header, .ticker-bar, .share-buttons, .ad-container,
  .affiliate-box, .related-articles, .site-footer,
  .sidebar-widget, #nl-modal { display: none !important; }

  .article-container { display: block; }
  .article-body { border: none; padding: 0; }
  .article-title { font-size: 1.8rem; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}

/* ── Utility classes ─────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Skeleton loader animation ───────────────────────────────── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.skeleton {
  background: var(--surface2);
  border-radius: 4px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════════
   v4.0 — STICKY HEADER SYSTEM + TAB VISIBILITY FIXES
   Freezes: site-header (64px) → ticker (38px) → sticky-controls
   Total frozen height: ~130px. Content scrolls underneath cleanly.
   ════════════════════════════════════════════════════════════════ */

/* ── sticky-controls: frozen section-header + cat-tabs band ──── */
.sticky-controls {
  position: sticky;
  top: calc(var(--header-h) + var(--ticker-h));
  z-index: 80;
  background: var(--bg);
  padding: 0;
  box-shadow: 0 3px 16px -4px rgba(0,0,0,0.10);
  transition: box-shadow 0.2s ease;
}
/* Inner wrapper: mirrors home-inner max-width and padding */
.sticky-controls-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.75rem 1.25rem 0;
}
[data-theme="dark"] .sticky-controls {
  box-shadow: 0 3px 16px -4px rgba(0,0,0,0.50);
}
/* Dark mode: fades use dark bg variable */
[data-theme="dark"] .cat-tabs-wrapper::after {
  background: linear-gradient(to right, transparent, var(--bg) 75%);
}
[data-theme="dark"] .cat-tabs-wrapper::before {
  background: linear-gradient(to left, transparent, var(--bg) 75%);
}
.sticky-controls .section-header {
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}
.sticky-controls .cat-tabs {
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  /* Let the wrapper handle overflow scroll on desktop */
  overflow-x: visible;
  min-width: max-content;
}

/* ── cat-tabs-wrapper: right-edge fade arrow (desktop hint) ──── */
.cat-tabs-wrapper {
  position: relative;
  /* Prevent wrapper from shrinking below tab content */
  min-width: 0;
  /* Enable horizontal scroll on desktop — critical for 18+ tabs */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Ensure cat-tabs inside can expand to full width */
  scroll-behavior: smooth;
}
.cat-tabs-wrapper::-webkit-scrollbar { display: none; }
.cat-tabs-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 4px;
  width: 48px;
  /* Fade matches bg so it works in both light and dark mode */
  background: linear-gradient(to right, transparent, var(--bg) 75%);
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1;
}
/* Left fade — shown when user has scrolled right on desktop */
.cat-tabs-wrapper::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 4px;
  width: 32px;
  background: linear-gradient(to left, transparent, var(--bg) 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.cat-tabs-wrapper.scrolled-left::before {
  opacity: 1;
}
/* Hide the fade when all tabs fit without scrolling */
.cat-tabs-wrapper.no-overflow::after {
  opacity: 0;
  pointer-events: none;
}
/* Show a ▸ chevron inside the right fade to hint at scrollability */
.cat-tabs-wrapper:not(.no-overflow)::after {
  content: '▸';
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* All category tabs are uniform — no special highlight for any tab */

/* ── Prevent anchor jump targets hiding under frozen band ─────── */
[id] {
  scroll-margin-top: calc(var(--header-h) + 38px + 80px);
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sticky-controls {
    top: calc(var(--header-h) + var(--ticker-h));
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.12);
  }
  .sticky-controls-inner {
    padding: 0.5rem 0.75rem 0;
  }
  [data-theme="dark"] .sticky-controls {
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.5);
  }
  .article-cat-nav {
    top: calc(var(--header-h) + var(--ticker-h));
  }
  .cat-tab {
    padding: 0.4rem 1rem;
    min-height: 40px;
    font-size: 0.82rem;
  }
  /* Cat-tabs-wrapper fade uses bg variable (works dark mode too) */
  .cat-tabs-wrapper::after {
    background: linear-gradient(to right, transparent, var(--bg) 80%);
  }
  /* Sidebar is hidden on mobile so static offset is fine */
  .sticky-sidebar { position: static; }
}

@media (max-width: 480px) {
  .cat-tab {
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
  }
}

/* ── style.css v4.3 — desktop tab scroll fix (cat-tabs-wrapper overflow-x) ── */

/* ══════════════════════════════════════════════════════════════════════════════
   v7.5.0 — Category pages · Archive pages · HTML sitemap · Mobile subscribe
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Category page header ──────────────────────────────────────────────────── */
.cat-page-header { margin-bottom: 1.25rem; }
.cat-page-header h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--text); }
.cat-page-info { font-size: 0.85rem; color: var(--text-muted); }

/* ── Pagination bar ─────────────────────────────────────────────────────────── */
.cat-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 2rem 0 1rem;
  flex-wrap: wrap;
}
.cat-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius, 10px);
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition, .2s ease), border-color var(--transition, .2s ease);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
}
.cat-page-link:hover { background: var(--surface2); border-color: var(--accent); }
.cat-page-link.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  pointer-events: none;
  font-weight: 600;
}
.cat-page-link.dots { border-color: transparent; color: var(--text-muted); pointer-events: none; }
@media (max-width: 480px) {
  .cat-page-header h1 { font-size: 1.4rem; }
  .cat-page-link { min-width: 32px; height: 32px; font-size: 0.8rem; }
  .cat-pagination { gap: 0.2rem; padding: 1.5rem 0 0.75rem; }
}

/* ── Archive pages ──────────────────────────────────────────────────────────── */
.arc-year-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0.5rem 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  color: var(--text);
}
.arc-year-heading a { color: inherit; text-decoration: none; }
.arc-year-heading a:hover { color: var(--accent); }
.arc-months-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.arc-month-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 0.7rem 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color var(--transition, .2s ease);
}
.arc-month-card:hover { border-color: var(--accent); }
.arc-month-name { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.arc-month-count { font-size: 0.75rem; color: var(--text-muted); }
@media (max-width: 600px) { .arc-months-grid { grid-template-columns: 1fr 1fr; } }

/* ── HTML sitemap (/site-map/) ───────────────────────────────────────────────── */
.sitemap-sections { display: flex; flex-direction: column; gap: 1.5rem; }
.sitemap-section h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  color: var(--text);
}
.sitemap-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem;
}
.sitemap-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--transition, .2s ease), color var(--transition, .2s ease);
}
.sitemap-link:hover { border-color: var(--accent); color: var(--accent); }
.sitemap-count { font-size: 0.72rem; color: var(--text-muted); margin-left: 0.4rem; }

/* ── Mobile nav Subscribe button ─────────────────────────────────────────────── */
.mobile-nav .mobile-nav-subscribe {
  display: block;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin: 0.5rem 0 0.75rem;
  border-radius: var(--radius, 10px);
  border-bottom: none;
  padding: 0.75rem 1rem;
  text-decoration: none;
  min-height: 44px;  /* Apple HIG touch target */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── style.css v4.4 — mobile/desktop audit fixes (2026-06-07) ──────────────────
   FIX 1: .logo-text — removed 3 duplicate declarations (white-space, overflow, text-overflow)
   FIX 2: .header-actions — removed duplicate flex-shrink: 0
   FIX 3: .article-text — consolidated 3 split rule blocks into 1 (min-width, overflow-wrap merged)
   FIX 4: .article-main bottom padding restored at ≤480px (was losing 2rem bottom, looked cramped)
   FIX 5: .cat-tab min-height raised 36px → 40px (consistent touch target across all breakpoints)
   FIX 6: .related-grid uses minmax(0,1fr) — prevents cell overflow on very narrow phones (<360px)
   FIX 7: .news-grid uses min(300px,100%) — cards never overflow on sub-360px screens
   FIX 8: .mobile-nav-subscribe — removed !important overuse, added 44px touch target + flex centering
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── v7.9.0: Editor's Picks (homepage) — fully scoped, no global bleed ─────── */
.editors-picks {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent, #c8102e);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;   /* v7.9.6: relocated below Load More — add top spacing */
}
.editors-picks .ep-header {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.editors-picks .ep-header h2 { font-size: 1.15rem; margin: 0; }
.editors-picks .ep-byline { font-size: 0.8rem; color: var(--text-muted, #666); }
.editors-picks .ep-byline a { color: inherit; text-decoration: underline; }
.editors-picks .ep-list { list-style: none; margin: 0; padding: 0; }
.editors-picks .ep-item {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--border);
}
.editors-picks .ep-item:last-child { border-bottom: none; }
.editors-picks .ep-cat {
  flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  color: var(--accent, #c8102e); letter-spacing: 0.04em;
}
.editors-picks .ep-title {
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.editors-picks .ep-title:hover { text-decoration: underline; }
/* Article byline author link */
.article-author .author-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.article-author .author-link:hover { text-decoration: none; border-bottom-style: solid; }


/* ── v7.9.2 Breaking Strip (homepage, client-side) ───────────────
   All selectors scoped under .breaking-strip — no global bleed.
   min-height reserves layout space so the async fetch causes no CLS;
   JS sets display:none if the JSON is stale/empty (rare, brief shift
   acceptable in that failure path). */
.breaking-strip {
  min-height: 44px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.breaking-strip .bs-badge {
  flex: 0 0 auto;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  animation: bs-pulse 1.6s ease-in-out infinite;
}
@keyframes bs-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .breaking-strip .bs-badge { animation: none; }
}
.breaking-strip .bs-items {
  flex: 1 1 auto;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breaking-strip .bs-items::-webkit-scrollbar { display: none; }
.breaking-strip .bs-item {
  flex: 0 0 auto;
  max-width: 46ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}
.breaking-strip .bs-item:hover { color: var(--accent); }
.breaking-strip .bs-age {
  margin-left: 0.45rem;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 400;
}
.breaking-strip .bs-more {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 700px) {
  /* v7.9.3: keep "All breaking" visible on mobile — titles scroll, link stays */
  .breaking-strip .bs-more { font-size: 0.72rem; }
  .breaking-strip .bs-item { max-width: 60vw; }
}