/* TGN — Shared mockup styles (Liber-pattern, TGN brand) */
:root {
  --page-bg: #F0F2F5;
  --surface-soft: #E2E6EC;
  --surface-card: #FFFFFF;
  --ink: #132240;
  --ink-soft: rgba(19, 34, 64, 0.78);
  --ink-quiet: #6B7A8D;
  --cta: #132240;
  --cta-hover: #0A1628;
  --rule: rgba(19, 34, 64, 0.10);
  --pillar-capital: #1D4ED8;
  --pillar-culture: #2D6A4F;
  --pillar-profiles: #8B3A3A;
  --pillar-transparency: #8A7750;
  /* Light + deep shades per pillar — used to build the unified diagonal
     gradient badge across homepage, MC archive, Watchlist archive, Specials,
     and article author-bio avatars. */
  --pillar-capital-light: #3F6BE8;
  --pillar-capital-deep:  #14358F;
  --pillar-culture-light: #6FAD8B;
  --pillar-culture-deep:  #1F4D3A;
  --pillar-transparency-light: #C5A872;
  --pillar-transparency-deep:  #5F5235;
  --pillar-profiles-light: #C97A7A;
  --pillar-profiles-deep:  #5E2222;
  /* Unified pillar badge gradients: 135deg diagonal, light → deep. */
  --pillar-grad-capital:      linear-gradient(135deg, var(--pillar-capital-light)      0%, var(--pillar-capital-deep)      100%);
  --pillar-grad-culture:      linear-gradient(135deg, var(--pillar-culture-light)      0%, var(--pillar-culture-deep)      100%);
  --pillar-grad-transparency: linear-gradient(135deg, var(--pillar-transparency-light) 0%, var(--pillar-transparency-deep) 100%);
  --pillar-grad-profiles:     linear-gradient(135deg, var(--pillar-profiles-light)     0%, var(--pillar-profiles-deep)     100%);
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-editorial: 'ivyjournal', 'Ivy Journal', Georgia, serif;
  --font-display: 'Syne', sans-serif;
  --radius-button: 8px;
  --max-prose: 720px;
  --max-editorial: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--ink);
  font-size: 16px; line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--max-editorial); margin: 0 auto; padding: 0 32px; }

/* PROMO STRIP (very top, navy, Insider-first per launch decision) */
.promo-strip {
  background: var(--ink);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.promo-strip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 24px;
  text-align: center;
}
.promo-strip-label {
  color: rgba(255,255,255,0.62);
  font-weight: 500;
}
.promo-strip-copy { font-weight: 500; }
.promo-strip-cta {
  color: white;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  padding-bottom: 1px;
  transition: border-color 220ms ease;
}
.promo-strip-cta:hover { border-bottom-color: white; }
.promo-strip-cta::after {
  content: " →";
  color: rgba(255,255,255,0.7);
  margin-left: 2px;
}
.promo-strip-cta:hover::after { color: white; }
.promo-strip-sep {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.2);
  display: inline-block;
}
.promo-strip-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.promo-strip-social a {
  color: rgba(255,255,255,0.72);
  display: inline-flex;
  align-items: center;
  transition: color 220ms ease;
}
.promo-strip-social a:hover { color: white; }
.promo-strip-social svg { width: 14px; height: 14px; fill: currentColor; }

@media (max-width: 720px) {
  .promo-strip-row { gap: 10px; padding: 9px 16px; font-size: 12px; }
  .promo-strip-sep { display: none; }
  .promo-strip-label { display: none; }
}

/* HEADER (non-sticky, scrolls away) */
.site-header {
  position: relative;
  background: var(--page-bg);
  border-bottom: 1px solid var(--rule);
}
.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  gap: 24px;
}
/* Three-column header lockup: mark LEFT, wordmark CENTER, actions RIGHT.
   Explicit grid-column + grid-row: 1 so DOM order does not create a second row. */
.header-mark {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.header-mark img { width: 36px; height: 36px; border-radius: 6px; display: block; }

.header-name {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  align-items: center;
}
.header-name a { display: inline-flex; }
/* Horizontal wordmark has ~12.86:1 aspect; keep height tight so the masthead
   reads at newspaper scale, not banner scale. */
.header-name img { height: 22px; width: auto; display: block; }

.header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); opacity: 0.65; }
.header-icon:hover { opacity: 1; }
.header-subscribe { background: var(--cta); color: white; padding: 10px 18px; border-radius: var(--radius-button); font-size: 14px; font-weight: 600; border: 0; cursor: pointer; }
.header-subscribe:hover { background: var(--cta-hover); }
.header-signin { color: var(--ink); font-size: 14px; font-weight: 500; padding: 10px 12px; }

/* SUB-NAV */
.subnav { border-bottom: 1px solid var(--rule); background: var(--page-bg); }
.subnav-row { display: flex; justify-content: center; gap: 36px; padding: 14px 32px; overflow-x: auto; }
.subnav-link {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  color: var(--ink); opacity: 0.78;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: opacity 150ms, border-color 150ms;
}
.subnav-link:hover { opacity: 1; }
.subnav-link.active { opacity: 1; font-weight: 700; border-bottom-color: var(--ink); }

/* SECTION INTRO (used by section pages — Med Class, Watchlist, etc.) */
.section-intro {
  padding: 72px 0 48px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.section-intro-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 18px;
}
.section-intro-title {
  font-family: var(--font-editorial);
  font-size: 56px; font-weight: 400;
  line-height: 1.05; letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 20px;
}
.section-intro-dek {
  font-family: var(--font-sans);
  font-size: 17px; line-height: 1.65;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
  font-weight: 400;
}

/* POST LIST (Liber's single-column list with thumbnail right) */
.post-list { padding: 64px 0 32px; }
.post-list-tabs {
  display: flex; gap: 28px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.post-list-tab {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  color: var(--ink); opacity: 0.65;
  padding: 14px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.post-list-tab.active { opacity: 1; font-weight: 700; border-bottom-color: var(--ink); }

.post-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.post-row:last-child { border-bottom: 0; }
.post-row-content {}
.post-row-pillar {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pillar-capital);
  margin-bottom: 12px;
}
.post-row-pillar.culture { color: var(--pillar-culture); }
.post-row-title {
  font-family: var(--font-editorial);
  font-size: 30px; font-weight: 400;
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.post-row-dek {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-row-meta {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-quiet);
}
.post-row-thumb {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #1B2D4F, #132240, #0A1628);
}

/* INSIDER STRIP */
.insider-strip { background: var(--surface-soft); padding: 64px 32px; margin: 80px 0 0; }
.insider-inner { max-width: var(--max-prose); margin: 0 auto; text-align: center; }
.insider-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 18px; }
.insider-title { font-family: var(--font-editorial); font-size: 38px; font-weight: 400; color: var(--ink); margin-bottom: 14px; }
.insider-dek { font-family: var(--font-sans); font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 28px; }
.insider-form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.insider-input { flex: 1; padding: 14px 18px; background: white; border: 1px solid var(--rule); border-radius: var(--radius-button); font-family: var(--font-sans); font-size: 14px; color: var(--ink); }
.insider-input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.insider-submit { background: var(--cta); color: white; padding: 14px 28px; border-radius: var(--radius-button); font-size: 14px; font-weight: 600; border: 0; cursor: pointer; }

/* FOOTER */
.site-footer { border-top: 1px solid var(--rule); padding: 64px 0 80px; text-align: center; }
.footer-mark { display: inline-block; margin: 0 auto 24px; }
.footer-mark img { width: 44px; height: 44px; border-radius: 8px; display: block; }
.footer-wordmark { margin: 0 auto 20px; }
.footer-wordmark img { height: 22px; width: auto; display: block; margin: 0 auto; }
.footer-tagline { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 36px; }
.footer-links { display: flex; justify-content: center; gap: 28px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--ink-quiet); margin-bottom: 24px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--ink); }
.footer-copy { font-family: var(--font-sans); font-size: 11px; color: var(--ink-quiet); }

/* MOBILE */
@media (max-width: 900px) {
  .header-row { grid-template-columns: auto 1fr auto; padding: 14px 20px; gap: 12px; }
  .header-name img { height: 18px; }
  .header-mark img { width: 30px; height: 30px; border-radius: 6px; }
  .header-icon, .header-signin { display: none; }
  .subnav-row { justify-content: flex-start; padding-left: 20px; gap: 24px; }
  .container { padding: 0 20px; }
  .section-intro-title { font-size: 36px; }
  .section-intro-dek { font-size: 17px; }
  .post-row { grid-template-columns: 1fr; gap: 16px; }
  .post-row-thumb { aspect-ratio: 16/10; order: -1; }
  .post-row-title { font-size: 24px; }
  .insider-form { flex-direction: column; }
  .insider-title { font-size: 28px; }
}