/* ============================================================
   INSIGHTS ADD-ON STYLESHEET
   New components only. Reuses every token from style.css.
   ============================================================ */

/* ── HUB HERO ────────────────────────────────────────────── */
.insights-hero {
  background: var(--paper);
  padding: 140px 0 64px;
  border-bottom: 0.5px solid var(--rule);
}
.insights-hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.insights-hero h1 em { font-style:italic; color:var(--accent); }
.insights-hero p {
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.8;
  max-width: 560px;
  margin-bottom: 36px;
}
.insights-hero-actions { display:flex; gap:18px; flex-wrap:wrap; }

/* ── HUB SERIES TILES (2-col, large, premium) ─────────────── */
.hub-series-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule-mid);
  margin-top: 48px;
}
.hub-series-tile {
  position: relative;
  padding: 48px 44px 44px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 0.25s var(--ease);
  overflow: hidden;
  min-height: 260px;
}
.hub-series-tile:hover { background: var(--white) !important; }
.hub-tile-watermark {
  position: absolute;
  top: -12px;
  right: 24px;
  font-family: var(--serif);
  font-size: 140px;
  font-weight: 300;
  color: rgba(26,92,58,0.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.hub-tile-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hub-tile-title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 16px;
}
.hub-tile-blurb {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 28px;
  max-width: 420px;
}
.hub-tile-link {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--accent);
  align-self: flex-start;
}

/* ── HUB ORPHAN TILES (3-col, smaller) ────────────────────── */
.hub-orphan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-mid);
  margin-top: 1px;
}
.hub-orphan-tile {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 0.25s var(--ease);
}
.hub-orphan-tile:hover { background: var(--white) !important; }
.hub-orphan-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
  margin-top: 10px;
}

/* ── SERIES PAGE HEADER ────────────────────────────────────── */
.series-header {
  padding: 150px 0 56px;
  border-bottom: 0.5px solid var(--rule);
}
.series-header-title {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.series-header-blurb {
  font-size: 17px;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.7;
  max-width: 640px;
}

/* ── SERIES TWO-COLUMN LAYOUT ──────────────────────────────── */
.series-body-section { padding: 72px 0 80px; }
.series-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 72px;
  align-items: start;
}

/* ── ARTICLE LIST (single-column editorial) ────────────────── */
.series-article-list { display:flex; flex-direction:column; }
.series-article-row {
  display: grid;
  grid-template-columns: 80px 1fr 28px;
  gap: 0 20px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 0.5px solid var(--rule);
  text-decoration: none;
  transition: background 0.2s;
}
.series-article-row:first-child { border-top: 0.5px solid var(--rule); }
.series-article-row:hover { background: var(--paper-warm); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.series-article-part {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 4px;
}
.series-article-content { display:flex; flex-direction:column; gap:6px; }
.series-article-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.series-article-dek {
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.6;
}
.series-article-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}
.series-article-arrow {
  color: var(--accent);
  font-size: 16px;
  padding-top: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.series-article-row:hover .series-article-arrow { opacity: 1; }

/* ── RIGHT PANEL (sticky image rotator) ────────────────────── */
.series-image-panel {
  position: sticky;
  top: 96px;
}
.image-panel-frame {
  border: 0.5px solid var(--rule-mid);
  background: var(--white);
  overflow: hidden;
}
.image-panel-link { display:block; }
.image-panel-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.image-panel-caption {
  padding: 14px 16px 10px;
  border-top: 0.5px solid var(--rule);
}
.image-panel-part {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.image-panel-title {
  display: block;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.image-panel-dots {
  display: flex;
  gap: 6px;
  padding: 10px 16px 14px;
  justify-content: center;
}
.panel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rule-mid);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.panel-dot-active { background: var(--accent); }
.panel-dot:hover:not(.panel-dot-active) { background: var(--ink-muted); }

/* ── SUBSCRIBE PANEL ─────────────────────────────────────────  */
.subscribe-panel {
  background: var(--white);
  border: 0.5px solid var(--rule-mid);
  position: relative;
  padding: 36px 40px;
  max-width: 620px;
}
.subscribe-panel::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:100%; background:var(--accent);
}
.subscribe-panel-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.subscribe-panel h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 10px;
}
.subscribe-panel p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 20px;
}
.subscribe-embed iframe {
  width:100%; max-width:480px; height:150px;
  border:0.5px solid var(--rule-mid); background:var(--white);
}

/* ── ARTICLE BODY ────────────────────────────────────────────  */
.article-header {
  background: var(--paper);
  padding: 150px 0 56px;
  border-bottom: 0.5px solid var(--rule);
}
.article-breadcrumb {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.article-breadcrumb a { color:var(--accent); }
.article-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.article-eyebrow::before { content:''; width:28px; height:0.5px; background:var(--accent); }
.article-header h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 780px;
  margin-bottom: 22px;
}
.article-dek {
  font-size: 17px;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.7;
  max-width: 660px;
  margin-bottom: 28px;
}
.article-byline {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}
.article-body { max-width:680px; margin:0 auto; padding:64px 24px 8px; }
.article-body p { font-size:16px; line-height:1.85; color:var(--ink); font-weight:300; margin-bottom:24px; }
.article-body p.lead { font-size:19px; line-height:1.7; }
.article-body h2 { font-family:var(--serif); font-size:27px; font-weight:400; line-height:1.25; margin:52px 0 18px; }
.article-body h3 { font-family:var(--serif); font-size:21px; font-weight:400; line-height:1.3; margin:40px 0 14px; }
.article-body a { color:var(--accent); text-decoration:underline; text-decoration-color:var(--rule-mid); }
.article-body ul, .article-body ol { margin:0 0 24px 22px; }
.article-body li { font-size:16px; line-height:1.8; color:var(--ink); font-weight:300; margin-bottom:10px; }
.article-body blockquote {
  font-family:var(--serif); font-style:italic; font-size:24px; line-height:1.45;
  color:var(--accent); border-left:3px solid var(--accent); padding-left:26px; margin:44px 0;
}
.article-body hr { border:none; border-top:0.5px solid var(--rule); margin:48px 0; }
.article-body strong { font-weight:500; color:var(--ink); }
.article-body sup { font-family:var(--mono); }
.article-body sup a { color:var(--accent); text-decoration:none; }
.article-body img, .article-body figure img { max-width:100%; height:auto; display:block; margin:12px 0 28px; border:0.5px solid var(--rule-mid); }
.article-body figcaption { font-family:var(--mono); font-size:10.5px; color:var(--ink-muted); margin-top:-18px; margin-bottom:28px; }

.reference-list { max-width:680px; margin:0 auto; padding:0 24px 72px; }
.reference-list-label {
  font-family:var(--mono); font-size:10px; color:var(--ink-muted);
  letter-spacing:0.12em; text-transform:uppercase; margin-bottom:20px;
  border-top:0.5px solid var(--rule); padding-top:36px;
}
.reference-item { font-size:12.5px; color:var(--ink-soft); line-height:1.7; font-weight:300; margin-bottom:9px; }
.reference-item .num { color:var(--accent); font-family:var(--mono); margin-right:8px; }

/* ── RESPONSIVE ──────────────────────────────────────────────  */
@media (max-width:900px) {
  .series-layout { grid-template-columns:1fr; }
  .series-image-panel { position:static; }
  .image-panel-img { height:220px; }
}
@media (max-width:768px) {
  .hub-series-grid { grid-template-columns:1fr; }
  .hub-orphan-grid { grid-template-columns:1fr; }
  .insights-hero { padding:110px 0 48px; }
  .series-header { padding:120px 0 40px; }
  .hub-tile-watermark { font-size:90px; }
  .series-article-row { grid-template-columns:64px 1fr 20px; }
  .hub-series-tile { padding:36px 28px; min-height:auto; }
}