/* FinpulseTestExample — palette: cool_mint · layout: magazine */
:root {
  --bg: #fafbfb;
  --text: #0c1a17;
  --text-muted: #3b5a52;
  --text-faint: #6b8a82;
  --border: #e2eae7;
  --card-bg: #ffffff;
  --header-bg: #f3f8f6;
  --accent: #0f9d7e;
  --accent-fg: #ffffff;
  --ok-bg: #dff5ec;
  --ok-fg: #0a6a52;
  --warn-bg: #fdecec;
  --warn-fg: #a82626;
  --neutral-bg: #eef2f1;
  --neutral-fg: #3b5a52;
  --max-width: 1240px;
  --max-width-narrow: 1100px;
  --radius: 6px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 36px;
  --space-6: 56px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter var", "Segoe UI",
               Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif Pro", "Iowan Old Style", Georgia, serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -------- Header -------- */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--header-bg);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-brand {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
}
.site-brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: var(--space-4); }
.site-nav a {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-tagline {
  max-width: var(--max-width);
  margin: var(--space-2) auto 0;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* -------- Main -------- */
.site-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-6);
}

/* -------- Hero (layout: hero_grid) -------- */
.hero { margin-bottom: var(--space-6); }
.hero-meta {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.hero-dot { color: var(--border); margin: 0 var(--space-2); }
.hero-source { color: var(--text-muted); font-weight: 500; letter-spacing: 0.3px; }
.hero-title {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0 0 var(--space-3);
  font-weight: 700;
  max-width: 880px;
}
.hero-title a { color: var(--text); }
.hero-summary {
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 0 var(--space-3);
}
.hero-attribution {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* -------- Grid (6-up cards) -------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform 120ms ease, border-color 120ms ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  font-weight: 700;
}
.card-section { color: var(--accent); }
.card-sentiment {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 10px;
}
.sentiment-positive,
.sentiment-bullish { background: var(--ok-bg); color: var(--ok-fg); }
.sentiment-negative,
.sentiment-bearish { background: var(--warn-bg); color: var(--warn-fg); }
.sentiment-neutral,
.sentiment-somewhat-bullish,
.sentiment-somewhat-bearish { background: var(--neutral-bg); color: var(--neutral-fg); }
.card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
  font-weight: 700;
}
.card-title a { color: var(--text); }
.card-summary {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.card-source { font-size: 12px; color: var(--text-faint); margin: 0; }

/* -------- Stream -------- */
.stream { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.stream-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.stream-list { list-style: none; margin: 0; padding: 0; }
.stream-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.4;
}
.stream-item:last-child { border-bottom: none; }
.stream-item a { color: var(--text); }
.stream-source { color: var(--text-faint); font-size: 13px; margin-left: var(--space-2); }

/* -------- Legal / static pages -------- */
.legal {
  max-width: 720px;
  margin: 0 auto;
}
.legal h1 {
  font-family: var(--font-serif);
  font-size: 36px;
  letter-spacing: -0.5px;
  margin: 0 0 var(--space-3);
}
.legal h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  margin: var(--space-5) 0 var(--space-2);
}
.legal-lead {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.legal-meta { font-size: 13px; color: var(--text-faint); margin-bottom: var(--space-4); }
.legal p { color: var(--text); }
.legal ul { color: var(--text); padding-left: var(--space-4); }
.legal li { margin-bottom: var(--space-2); }

/* -------- Forms -------- */
.contact-form, .unsubscribe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.unsubscribe-fieldset {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.unsubscribe-fieldset legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 6px;
}
.unsubscribe-fieldset input[type="email"],
.unsubscribe-fieldset input[type="tel"] {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.unsubscribe-fieldset input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.form-hint {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.2px;
}
.form-hint code {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.unsubscribe-reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.contact-form input, .contact-form textarea, .contact-form select,
.unsubscribe-form select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
}
.contact-form input:focus, .contact-form textarea:focus,
.unsubscribe-form select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary {
  align-self: flex-start;
  padding: 10px 22px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: filter 120ms;
}
.btn-primary:hover { filter: brightness(1.08); }
.form-note { font-size: 12px; color: var(--text-faint); margin-top: var(--space-2); }

/* -------- Category strip (sticky top nav) -------- */
.category-strip {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.category-strip-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px var(--space-4);
  /* Stretch the 8 chips evenly across the block instead of clustering
     them on the left. Equal-width columns + ``space-between`` gap
     gives the row a proper editorial-rail feel. */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.category-strip-inner::-webkit-scrollbar { display: none; }
/* Modern flat editorial nav: typography-driven, no pill backgrounds,
   no rounded borders. Uppercase tracked labels with a thin accent
   underline that animates in on hover — the look you see on FT /
   Bloomberg / NYT section nav. Works equally on light + dark
   palettes because every color comes from the same CSS vars. */
.category-chip {
  padding: 10px 4px;
  border-radius: 0;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  position: relative;
  transition: color 160ms ease;
}
.category-chip::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}
.category-chip:hover {
  color: var(--text);
  text-decoration: none;
  transform: none;
  box-shadow: none;
  background: transparent;
}
.category-chip:hover::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .category-strip-inner {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 18px;
  }
  .category-chip { flex: 0 0 auto; font-size: 12px; padding: 8px 2px; }
}

/* -------- Footer (multi-column) -------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--header-bg);
  margin-top: var(--space-6);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .footer-inner { grid-template-columns: 1fr; }
}
.footer-col {}
.footer-brand-name {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
}
.footer-brand-name:hover { text-decoration: none; color: var(--accent); }
.footer-tagline {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.3px;
  margin: var(--space-2) 0 var(--space-3);
  text-transform: uppercase;
}
.footer-blurb {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: 280px;
}
.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}
.footer-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-link-list a {
  color: var(--text-muted);
  font-size: 13px;
  transition: color 120ms;
}
.footer-link-list a:hover { color: var(--accent); text-decoration: none; }

.footer-disclaimer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 0;
}
.footer-disclaimer strong { color: var(--warn-fg); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 12px;
}
.footer-copy { color: var(--text-muted); }
.footer-address { color: var(--text-faint); flex: 1; text-align: center; min-width: 200px; }
.footer-address a { color: var(--accent); }
.footer-bottom-links {
  display: flex;
  gap: 8px;
  color: var(--text-faint);
}
.footer-bottom-links a { color: var(--text-muted); }
.footer-bottom-links a:hover { color: var(--accent); text-decoration: none; }

@media (max-width: 600px) {
  .hero-title { font-size: 32px; }
  .legal h1 { font-size: 28px; }
  .site-main { padding: var(--space-4) var(--space-3); }
}


/* ============================================================
   MAGAZINE LAYOUT
   ============================================================ */

/* ---------- Ticker tape ---------- */
.ticker-strip {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  white-space: nowrap;
  margin-bottom: var(--space-5);
}
.ticker-track {
  display: inline-block;
  animation: ticker-scroll 60s linear infinite;
  padding-left: 100%;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--space-4);
  font-size: 13px;
  letter-spacing: 0.3px;
}
.ticker-symbol { font-weight: 700; color: var(--text); }
.ticker-label  { color: var(--text-faint); font-size: 12px; }
.ticker-price  { color: var(--text); font-variant-numeric: tabular-nums; }
.ticker-pct    { font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker-up   { color: var(--ok-fg); }
.ticker-down { color: var(--warn-fg); }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- TradingView ticker-tape host ---------- */
/* Tame the iframe so it sits flush with the rest of the layout and
   adopts the page's border conventions. */
.tv-tape {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
  /* TradingView's widget renders ~46px tall — pin it so layout
     doesn't shift while the iframe boots. */
  min-height: 46px;
  display: flex;
  align-items: center;
}
.tv-tape .tradingview-widget-container { width: 100%; }
.tv-tape iframe { display: block; }

/* ---------- Markets at close (sidebar SEO snapshot) ---------- */
.markets-at-close .markets-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.markets-at-close .markets-asof {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.markets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.markets-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
}
.markets-table thead th:nth-child(2),
.markets-table thead th:nth-child(3) { text-align: right; }
.markets-table tbody tr + tr td,
.markets-table tbody tr + tr th { border-top: 1px solid var(--border); }
.markets-table th,
.markets-table td { padding: 8px 0; vertical-align: middle; }
.markets-sym {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-weight: 400;
}
.markets-sym-code {
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.4px;
}
.markets-sym-label {
  font-size: 11px;
  color: var(--text-faint);
}
.markets-last { text-align: right; color: var(--text); }
.markets-chg  { text-align: right; font-weight: 600; }
.markets-up   { color: var(--ok-fg); }
.markets-down { color: var(--warn-fg); }
.markets-footnote {
  margin: var(--space-3) 0 0;
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}

/* ---------- 404 page ---------- */
/* Editorial 404 — typography-driven, no error-code shouting. The
   eyebrow "404" is small and faded so the human-readable headline
   does the work. */
.not-found-hero {
  text-align: left;
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}
.nf-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--text-faint);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.nf-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
  color: var(--text);
  letter-spacing: -0.02em;
}
.nf-lede {
  font-size: 18px;
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  max-width: 56ch;
  line-height: 1.5;
}
.nf-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.nf-cta-primary {
  background: var(--accent);
  color: var(--accent-fg);
  padding: 12px 22px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 4px;
  transition: opacity 140ms ease;
}
.nf-cta-primary:hover { opacity: 0.88; text-decoration: none; }
.nf-cta-secondary {
  color: var(--text-muted);
  padding: 12px 22px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 140ms ease, color 140ms ease;
}
.nf-cta-secondary:hover {
  color: var(--text);
  border-color: var(--text-muted);
  text-decoration: none;
}
.not-found-recent { margin-bottom: var(--space-7); }
.not-found-recent .section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* ---------- Hero row ---------- */
.hero-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  /* Both columns stretch to the tallest column's height so the
     two right-side features fill the same vertical span as the
     lead — no empty gap below the second feature. */
  align-items: stretch;
}
.hero-lead { display: flex; }
.hero-lead > .article { width: 100%; }
.hero-features {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  min-height: 0;  /* allow children to shrink inside their grid row */
}
.hero-features > .article { min-height: 0; }
/* On the hero row, drop the strict 16:9 aspect on feature images so
   the images grow to fill the row height the grid hands them. The
   body content stays its natural size at the bottom, the image
   absorbs the slack — net effect: right column matches lead. */
.hero-features .article-image {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 180px;
}
/* The lead card also needs to be a column-flex so its image grows
   when the right column dictates a taller hero row. */
.hero-lead .article { flex-direction: column; }
.hero-lead .article-image {
  /* Keep a sane minimum aspect for the lead so a very long
     headline doesn't squish it. Lead grows beyond this when the
     right column is taller (rare). */
  aspect-ratio: 16/9;
  flex: 1 1 auto;
  min-height: 280px;
}
@media (max-width: 900px) {
  .hero-row { grid-template-columns: 1fr; }
  .hero-features .article-image { aspect-ratio: 16/9; }
}

/* ---------- Article (image-or-gradient + body) ---------- */
.article {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.article:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.25);
}
.article-image {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-placeholder-label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.85;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Aspect ratios by size */
.article-hero .article-image    { aspect-ratio: 16/9; }
.article-feature .article-image { aspect-ratio: 16/9; }
.article-card .article-image    { aspect-ratio: 4/3; }
.article-row .article-image     { display: none; }

.article-sentiment {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.6px;
  font-weight: 700;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.article-sentiment.sentiment-positive,
.article-sentiment.sentiment-bullish        { background: rgba(16,185,129,0.85); color: #fff; }
.article-sentiment.sentiment-negative,
.article-sentiment.sentiment-bearish        { background: rgba(225,67,67,0.85); color: #fff; }
.article-sentiment.sentiment-somewhat-bullish { background: rgba(16,185,129,0.7); color: #fff; }
.article-sentiment.sentiment-somewhat-bearish { background: rgba(225,67,67,0.7); color: #fff; }

.article-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.article-meta {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.article-section { color: var(--accent); }
.article-dot     { color: var(--border); }
.article-byline  { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-faint); }
.article-title {
  font-family: var(--font-serif);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.article-title a { color: var(--text); }
.article-title a:hover { color: var(--accent); text-decoration: none; }
.article-hero    .article-title { font-size: 32px; letter-spacing: -0.8px; }
.article-feature .article-title { font-size: 20px; }
.article-card    .article-title { font-size: 18px; }
.article-summary {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.article-hero .article-summary { font-size: 17px; }
.article-summary-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-attribution {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  margin: 0;
}

/* ---------- Magazine main + sidebar grid ---------- */
.magazine-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 900px) {
  .magazine-grid { grid-template-columns: 1fr; }
}

/* ---------- Section blocks ---------- */
/* Anchored category jumps — clicking a chip in the strip jumps to
   the matching section. ``scroll-margin-top`` gives the landing
   point a comfortable gap from the top of the viewport so the
   section header isn't kissing the browser chrome / sticky bars. */
html { scroll-behavior: smooth; }
.section-block {
  margin-bottom: var(--space-6);
  scroll-margin-top: 24px;
}
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.section-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--text);
  white-space: nowrap;
}
.section-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 800px) {
  .section-cards { grid-template-columns: 1fr; }
}

/* ---------- Sidebar ---------- */
.magazine-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-3);
  align-self: start;
}
.sidebar-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.sidebar-trending {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-trending li {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
}
.sidebar-trending li:last-child { border-bottom: none; }
.trending-rank {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
  min-width: 22px;
}
.trending-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.trending-body a { color: var(--text); }
.trending-body a:hover { color: var(--accent); text-decoration: none; }
.trending-section {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
}
.sidebar-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-sections li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.section-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.sidebar-disclaimer-card { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.sidebar-disclaimer-card strong { color: var(--accent); display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.sidebar-disclaimer-card p { margin: 0; }

/* ---------- Newsletter signup ---------- */
.newsletter {
  background: linear-gradient(135deg, var(--card-bg), var(--header-bg));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-4);
  align-items: center;
}
@media (max-width: 800px) {
  .newsletter { grid-template-columns: 1fr; }
}
.newsletter-text h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  margin: 0 0 var(--space-2);
  color: var(--text);
}
.newsletter-text p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.newsletter-form {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
.newsletter-form input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.newsletter-form .btn-primary { white-space: nowrap; }
.newsletter-note {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-faint);
  margin: 0;
  text-align: right;
}

/* ---------- Stream wrap (more headlines) ---------- */
.stream-wrap { margin-top: var(--space-6); }
.stream-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (max-width: 700px) {
  .stream-list { grid-template-columns: 1fr; }
}
.stream-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stream-item a { color: var(--text); }
.stream-item a:hover { color: var(--accent); text-decoration: none; }
.stream-item .stream-source { color: var(--text-faint); font-size: 12px; }
.stream-item .stream-section {
  display: inline-block;
  width: fit-content;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 600px) {
  .article-hero .article-title { font-size: 24px; }
  .ticker-item { margin: 0 var(--space-3); font-size: 12px; }
  .section-title { font-size: 18px; }
  .magazine-sidebar { position: static; }
}


/* ============================================================
   PER-ARTICLE LANDING PAGE
   ============================================================ */
.article-page {
  max-width: 920px;
  margin: 0 auto;
}
.article-page-header { margin-bottom: var(--space-4); }
.article-page-section {
  display: inline-block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.article-page-section:hover { text-decoration: none; opacity: 0.85; }
.article-page-title {
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin: 0 0 var(--space-3);
  color: var(--text);
}
.article-page-byline {
  font-size: 12px;
  color: var(--text-faint);
  margin: var(--space-4) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-style: italic;
  letter-spacing: 0.2px;
}
.article-page-byline a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border); }
.article-page-byline a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.article-page-hero {
  margin: var(--space-4) 0 var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
}
.article-page-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.article-page-hero-placeholder {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-page-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .article-page-grid { grid-template-columns: 1fr; }
}

.article-page-lede {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 var(--space-5);
  padding-left: var(--space-4);
  border-left: 3px solid var(--accent);
}

.article-page-commentary {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.commentary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.commentary-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--text);
}
.commentary-badge {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--neutral-bg);
  color: var(--neutral-fg);
  border: 1px solid var(--border);
  cursor: help;
}
.article-page-commentary p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 var(--space-3);
}
.article-page-commentary p:last-child { margin-bottom: 0; }

.article-page-cta {
  background: linear-gradient(135deg, var(--card-bg), var(--header-bg));
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-align: center;
  margin-top: var(--space-5);
}
.article-page-cta .btn-primary {
  display: inline-block;
  padding: 14px 28px;
  font-size: 15px;
}
.cta-note {
  font-size: 12px;
  color: var(--text-faint);
  margin: var(--space-3) auto 0;
  max-width: 460px;
  line-height: 1.5;
}

.article-page-related {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: 70px;
  align-self: start;
}
@media (max-width: 900px) {
  .article-page-related { position: static; }
}

/* Editor's picks with thumbnails */
.picks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.picks-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.picks-link:hover { text-decoration: none; }
.picks-link:hover .picks-headline { color: var(--accent); }
.picks-thumb {
  width: 72px;
  height: 56px;
  flex: 0 0 72px;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.picks-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.picks-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.picks-section {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
}
.picks-headline {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Trending in section (numbered list) */
.article-page-related .sidebar-trending li { font-size: 12px; }
.article-page-related .trending-rank { font-size: 18px; min-width: 18px; }
.trending-byline {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Related coverage list */
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.related-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.related-list li:last-child .related-link { border-bottom: none; }
.related-section {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
}
.related-headline {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
}
.related-link:hover { text-decoration: none; }
.related-link:hover .related-headline { color: var(--accent); }

/* Compact newsletter card */
.sidebar-newsletter p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}
.sidebar-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--space-2);
}
.sidebar-newsletter-form input[type="email"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.sidebar-newsletter-form input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.sidebar-newsletter-form .btn-primary {
  padding: 8px 14px;
  font-size: 13px;
  width: 100%;
  text-align: center;
}
.sidebar-newsletter-note {
  font-size: 10px;
  color: var(--text-faint);
  margin: 0;
  text-align: right;
}

/* Browse sections (current marker) */
.sidebar-section-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.sidebar-section-link:hover { text-decoration: none; }
.sidebar-section-link:hover .section-name { color: var(--accent); }
.section-current-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  margin-left: auto;
}

@media (max-width: 600px) {
  .article-page-title { font-size: 28px; }
}


/* =============================================================
   In-page unsubscribe lightbox

   Lives in the rendered base template; fires when a marketing
   email link lands here with ?bq_unsub=... A small, intentional
   surface area: backdrop + centered card with three swappable
   states (loading / success / error). Uses palette CSS vars so
   every theme gets a brand-aligned modal for free.
   ============================================================= */
.bq-unsub-modal[hidden] { display: none !important; }
.bq-unsub-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: bqUnsubFade .15s ease-out;
}
@keyframes bqUnsubFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bqUnsubPop { from { transform: scale(.96); opacity: .6; } to { transform: scale(1); opacity: 1; } }
@keyframes bqUnsubSpin { to { transform: rotate(360deg); } }

.bq-unsub-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 22, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.bq-unsub-open { overflow: hidden; }

.bq-unsub-card {
  position: relative;
  background: var(--card, var(--bg, #fff));
  color: var(--text, #111);
  border: 1px solid var(--rule, rgba(0,0,0,.08));
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,.35), 0 6px 18px -6px rgba(0,0,0,.18);
  padding: 32px 32px 28px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  animation: bqUnsubPop .2s ease-out;
}
.bq-unsub-card h2 {
  margin: 12px 0 8px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 600;
}
.bq-unsub-card p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted, #666);
}
.bq-unsub-card strong { color: var(--text); }

.bq-unsub-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  display: block;
}
.bq-unsub-icon-ok { color: var(--accent, #1f7a3a); }
.bq-unsub-icon-err { color: #c0392b; }

.bq-unsub-spinner {
  width: 36px;
  height: 36px;
  margin: 4px auto 14px;
  border: 3px solid var(--rule, rgba(0,0,0,.12));
  border-top-color: var(--accent, #1a1a1a);
  border-radius: 50%;
  animation: bqUnsubSpin .9s linear infinite;
}

.bq-unsub-btn {
  display: inline-block;
  background: var(--accent, #1a1a1a);
  color: var(--accent-fg, #fff);
  border: 0;
  border-radius: var(--radius, 6px);
  padding: 10px 22px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s ease;
}
.bq-unsub-btn:hover { opacity: .9; text-decoration: none; }
.bq-unsub-btn:focus { outline: 2px solid var(--accent, #1a1a1a); outline-offset: 2px; }

@media (max-width: 480px) {
  .bq-unsub-card { padding: 24px 20px 20px; }
  .bq-unsub-card h2 { font-size: 20px; }
}