/* public/insights.css — /insights pages: list, topic, article, syndication
   terms and the dashboard preview. Dark media/briefs palette; every class is
   ins-*. The header and footer come inline from public/media.html via
   insights/chrome.js, and that header <style> opens with a global
   `* { margin: 0; padding: 0 }` reset, so every spacing rule here is explicit.
   Page ground and type: self-hosted fonts from /rsf-ds.css only. */

.ins-page {
  --ins-bg: #0c0e12;
  --ins-surface: #14171d;
  --ins-surface-2: #1b1f27;
  --ins-text: #f5f3ef;
  --ins-muted: #c9c4bb;
  --ins-faint: #8a8378;
  --ins-accent: #ffce00;
  --ins-accent-soft: #ffe680;
  --ins-rule: rgba(200, 151, 58, 0.22);
  --ins-measure: 66ch;
  --ins-gutter: clamp(1.25rem, 5vw, 3rem);
  margin: 0;
  background: var(--ins-bg);
  color: var(--ins-text);
  font-family: 'Hanken Grotesk', var(--font-sans, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.ins-root { display: block; padding: clamp(6.5rem, 12vw, 8.5rem) 0 clamp(4rem, 8vw, 6rem); }
.ins-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--ins-gutter); }
.ins-article { max-width: calc(var(--ins-measure) + 2 * var(--ins-gutter)); }
.ins-root a { color: var(--ins-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ins-root a:hover { color: var(--ins-accent-soft); }
.ins-root :focus-visible { outline: 2px solid var(--ins-accent); outline-offset: 3px; border-radius: 2px; }

.ins-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ins-faint); }
.ins-crumbs a { color: var(--ins-muted); text-decoration: none; }
.ins-eyebrow { display: block; margin: 0 0 1rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ins-accent); }
.ins-eyebrow a { text-decoration: none; }
.ins-title { margin: 0 0 1rem; font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; color: var(--ins-text); overflow-wrap: anywhere; }
.ins-dek { max-width: var(--ins-measure); margin: 0 0 1.5rem; font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.5; color: var(--ins-muted); }
.ins-head { max-width: var(--ins-measure); margin: 0 0 2rem; }
.ins-byline { margin: 0 0 2rem; font-size: 0.9rem; color: var(--ins-faint); }
.ins-byline__author { color: var(--ins-text); }
.ins-byline__sep { margin: 0 0.4rem; }

.ins-hero { margin: 0 0 2.5rem; }
.ins-hero img, .ins-figure img { display: block; max-width: 100%; width: 100%; height: auto; border-radius: 4px; }
.ins-figure { margin: 2rem 0; }
.ins-figure__caption { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ins-faint); }
.ins-figure__credit { margin-left: 0.35rem; font-style: italic; }

.ins-body { max-width: var(--ins-measure); overflow-wrap: anywhere; }
.ins-body p, .ins-body ul, .ins-body ol, .ins-body blockquote { margin: 0 0 1.25rem; }
.ins-body ul, .ins-body ol { padding-left: 1.4rem; }
.ins-body li { margin: 0 0 0.5rem; }
.ins-body li > p { margin: 0; }
.ins-body h2, .ins-body h3, .ins-body h4 { margin: 2.25rem 0 0.85rem; font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-weight: 500; line-height: 1.25; color: var(--ins-text); scroll-margin-top: 6rem; }
.ins-body h2 { font-size: 1.6rem; }
.ins-body h3 { font-size: 1.3rem; }
.ins-body h4 { font-size: 1.1rem; }
.ins-body blockquote { padding: 0.25rem 0 0.25rem 1.25rem; border-left: 2px solid var(--ins-accent); color: var(--ins-muted); font-style: italic; }
.ins-body hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--ins-rule); }
.ins-body code { padding: 0.1em 0.35em; border-radius: 3px; background: var(--ins-surface-2); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.9em; }

.ins-table { max-width: 100%; margin: 0 0 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ins-table table { min-width: 100%; border-collapse: collapse; font-size: 0.95rem; overflow-wrap: normal; }
.ins-table th, .ins-table td { padding: 0.5rem 0.75rem; border: 1px solid var(--ins-rule); text-align: left; vertical-align: top; }
.ins-table th { background: var(--ins-surface); }
.ins-table p { margin: 0; }

.ins-cta { margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--ins-rule); border-radius: 6px; background: var(--ins-surface); }
.ins-cta--band { border-color: rgba(255, 206, 0, 0.45); background: rgba(255, 206, 0, 0.06); }
.ins-cta--card { background: var(--ins-surface); }
.ins-cta--inline { padding: 1rem 1.25rem; }
.ins-cta__eyebrow { margin: 0 0 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ins-accent); }
.ins-cta__heading { margin: 0 0 0.5rem; font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-size: 1.35rem; line-height: 1.25; color: var(--ins-text); }
.ins-cta__body { margin: 0 0 1rem; color: var(--ins-muted); }
.ins-cta__action { margin: 0; }
.ins-root a.ins-cta__btn { display: inline-block; padding: 0.6rem 1.2rem; border-radius: 6px; background: var(--ins-accent); color: #0c0c0c; font-weight: 600; text-decoration: none; }
.ins-root a.ins-cta__btn:hover { background: var(--ins-accent-soft); color: #0c0c0c; }

/* The "Continue reading on Substack" stopper: shown under the teaser of an article that has a substack_url.
   The CTA band look (gold-tinted border and fill) with the gold primary button, held to the article column. */
.ins-continue { max-width: var(--ins-measure); margin: 2rem 0 2.5rem; padding: 1.75rem 1.5rem; border: 1px solid rgba(255, 206, 0, 0.45); border-radius: 6px; background: rgba(255, 206, 0, 0.06); overflow-wrap: anywhere; }
.ins-continue__eyebrow { margin: 0 0 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ins-accent); }
.ins-continue__heading { margin: 0 0 0.5rem; font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: var(--ins-text); }
.ins-continue__body { margin: 0 0 1.25rem; color: var(--ins-muted); }
.ins-continue__action { margin: 0; }
.ins-root a.ins-continue__btn { display: inline-block; max-width: 100%; padding: 0.7rem 1.4rem; border-radius: 6px; background: var(--ins-accent); color: #0c0c0c; font-weight: 600; text-decoration: none; }
.ins-root a.ins-continue__btn:hover { background: var(--ins-accent-soft); color: #0c0c0c; }

.ins-event { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--ins-accent); border-radius: 0 6px 6px 0; background: var(--ins-surface); }
.ins-event__eyebrow { margin: 0 0 0.4rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ins-accent); }
.ins-event__place { margin: 0 0 0.25rem; font-weight: 600; color: var(--ins-text); }
.ins-event__meta { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--ins-faint); }
.ins-event__summary { margin: 0 0 0.75rem; color: var(--ins-muted); }
.ins-event__action { margin: 0; }
.ins-event__link { font-weight: 600; }

.ins-section-title { margin: 3rem 0 1rem; font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-weight: 500; font-size: 1.4rem; color: var(--ins-text); }
.ins-sources, .ins-events, .ins-related { max-width: var(--ins-measure); }
.ins-sources__list, .ins-events__list { margin: 0; padding-left: 1.4rem; color: var(--ins-muted); font-size: 0.95rem; overflow-wrap: anywhere; }
.ins-sources__list li, .ins-events__list li { margin: 0 0 0.5rem; }
.ins-sources__outlet { font-style: italic; }

.ins-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ins-card { margin: 0; }
.ins-root a.ins-card__link { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.5rem; border: 1px solid var(--ins-rule); border-radius: 6px; background: var(--ins-surface); color: var(--ins-text); text-decoration: none; }
.ins-root a.ins-card__link:hover { border-color: rgba(255, 206, 0, 0.5); color: var(--ins-text); }
.ins-card__eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ins-accent); }
.ins-card__title { margin: 0; font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--ins-text); overflow-wrap: anywhere; }
.ins-card__dek { color: var(--ins-muted); font-size: 0.95rem; }
.ins-card__meta { margin-top: auto; font-size: 0.8rem; color: var(--ins-faint); }

.ins-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.ins-root a.ins-topics__link { padding: 0.35rem 0.8rem; border: 1px solid var(--ins-rule); border-radius: 999px; color: var(--ins-muted); font-size: 0.85rem; text-decoration: none; }
.ins-root a.ins-topics__link:hover { border-color: rgba(255, 206, 0, 0.5); color: var(--ins-text); }
.ins-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0; font-size: 0.9rem; color: var(--ins-faint); }
.ins-pager__prev, .ins-pager__next { font-weight: 600; }
.ins-pager__status { flex: 1; text-align: center; }
.ins-empty { color: var(--ins-muted); }
.ins-follow { margin: 2.5rem 0 0; font-size: 0.9rem; color: var(--ins-faint); }

.ins-terms .ins-body ul { padding-left: 1.4rem; }
.ins-feedpreview { max-width: var(--ins-measure); }
.ins-feedpreview__section { margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--ins-rule); border-radius: 6px; background: var(--ins-surface); overflow-wrap: anywhere; }
.ins-feedpreview__section img { display: block; max-width: 100%; height: auto; }
.ins-feedpreview__xml { max-height: 32rem; overflow: auto; white-space: pre-wrap; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.8rem; color: var(--ins-muted); }

@media (max-width: 600px) {
  .ins-page { font-size: 16px; }
  .ins-cta, .ins-event, .ins-continue { padding: 1rem; }
  .ins-root a.ins-continue__btn { display: block; text-align: center; }
}