:root {
  --brand: #1a3c6e;
  --text: #1a1a1a;
  --muted: #666;
  --bg: #fff;
  --border: #e2e2e2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.site-header .brand {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--brand);
  text-decoration: none;
}

.site-nav a {
  margin-left: 1.25rem;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:first-child { margin-left: 0; }

.site-nav a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hero {
  text-align: center;
  padding: 2rem 0 3rem;
}

.hero h1 {
  color: var(--brand);
  margin-bottom: 0.25rem;
}

.hero p { color: var(--muted); }

.editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .editorial {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.card-category { color: var(--brand); font-weight: 700; }
.card-dot { color: var(--border); }

.card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.card h2 a { color: var(--brand); text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }

.card-excerpt { color: var(--text); }
.card-excerpt p { margin: 0; }

.card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--brand);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.card-readmore:hover { text-decoration: underline; }

.post {
  /* Offsets main's shared 2rem top padding so the title sits closer to the
     header on article pages specifically, without changing main's padding
     (which is shared with the homepage and list pages). */
  margin-top: -1rem;
}

.post h1 {
  color: var(--brand);
  font-size: 2rem;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

@media (max-width: 480px) {
  .post h1 {
    font-size: 1.5rem;
    line-height: 1.15;
  }
}

.cta-cluster {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.continue-reading-btn {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  padding: 0.85rem 1rem;
  border: 2.5px solid #000;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.continue-reading-btn:hover {
  background: #1834b8;
}

.collapsible-content {
  position: relative;
  max-height: 180px;
  overflow: hidden;
}

.collapsible-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg));
  pointer-events: none;
  z-index: 1;
}

.collapsible-content.expanded {
  max-height: none;
}

.collapsible-content.expanded::after {
  display: none;
}

.cta-cluster a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 2.5px solid #000;
  border-radius: 14px;
  background: #1E3FE0;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cta-cluster a:hover {
  border-color: #000;
  background: #1834b8;
}

.cta-cluster a::after {
  content: "\2192";
  margin-left: auto;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.cta-number {
  flex-shrink: 0;
  color: #A8E100;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
}

.cta-headline {
  flex: 1;
  font-weight: 700;
  color: #fff;
}

.cta-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

.footer-nav a {
  margin: 0 0.6rem;
  color: var(--muted);
  text-decoration: none;
}

.footer-nav a:hover { text-decoration: underline; }

.copyright { margin-top: 0.75rem; }

/* Footer disclosure summary (full text lives on /disclosures/). Uses --muted on
   --bg (#666 on #fff, 5.74:1) at 14px; long words wrap so nothing overflows at
   narrow phone widths. */
.disclosures {
  max-width: 760px;
  margin: 1rem auto 0;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.disclosures a { color: var(--brand); }

/* Pages with the #anchor ad mount (everything except trust pages) get extra room
   under the footer so a fixed bottom anchor ad can never cover the disclosure
   summary or the copyright line. */
body:has(#anchor) .site-footer { padding-bottom: calc(1.5rem + 120px); }