/* ═══ OCEAN DEPTH — dark hero header, light content, wavy links ═══
   Identity: reversed H1 sitting in a dark slab, gradient section
   dividers, wavy-underline body links, dark-band blockquotes
   that punch through the column. Surface ↔ depth.
*/

/* ── Reversed H1: white-on-dark slab ── */
h1 {
  font-size: clamp(2rem, 4vw + 0.5rem, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #FFFFFF;
  background: var(--secondary);
  padding: 0.45rem 0.85rem;
  display: inline-block;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  margin: var(--space-l) 0 var(--space-s);
}

h2 {
  color: var(--secondary);
  padding-bottom: 0.4rem;
  background: linear-gradient(90deg, var(--primary), transparent) no-repeat 0 100% / 5rem 2px;
}

/* Subtitle in primary blue, denser weight */
.subtitle { color: var(--primary); font-weight: 500; }

/* ── Dark sticky header ── */
.site-header { background: var(--secondary); border-bottom: none; }
.site-header .site-name { color: #FFFFFF; }
.header-links a { color: #BAE6FD; }
.header-links a:hover { color: #FFFFFF; }
.header-links a[aria-current="page"] { color: #FFFFFF; font-weight: 600; }
.header-cta { background: #FFFFFF; color: var(--secondary) !important; }
.header-cta:hover { background: #E0F2FE; color: var(--secondary) !important; }
.site-header.is-scrolled { box-shadow: 0 2px 12px rgba(8,47,73,0.15); }
.nav-toggle { border-color: rgba(186,230,253,0.3); }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { background: #FFFFFF; }
.skip-link { background: var(--secondary); }

/* ── Body styling ── */
.prose strong { color: var(--secondary); }
.prose a {
  color: var(--primary);
  text-decoration: underline wavy;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--secondary); text-decoration-color: var(--secondary); }

/* ── Tapered gradient section divider ── */
.prose hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  margin: 3rem 0;
}

/* ── Dark-band blockquote, punches through the column ── */
.prose blockquote {
  background: var(--secondary);
  color: #E0F2FE;
  border-left: 4px solid var(--primary);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0;
}
.prose blockquote strong { color: #FFFFFF; }
.prose blockquote a { color: #BAE6FD; }

/* ── Full-bleed dark CTA ── */
.cta {
  background: var(--secondary);
  color: #E0F2FE;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding: var(--space-l) var(--space-m);
  border-radius: 0;
  text-align: center;
}
.cta p, .cta a { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.cta p { color: #BAE6FD; }
.cta a { background: #FFFFFF; color: var(--secondary); }
.cta a:hover { background: #E0F2FE; }

/* ── Dark footer ── */
.site-footer { background: var(--secondary); color: #BAE6FD; border-top: none; padding: var(--space-l) var(--space-m) var(--space-m); }
.footer-col h3 { color: #E0F2FE; }
.footer-col a { color: #BAE6FD; }
.footer-col a:hover { color: #FFFFFF; }
.footer-universe { border-color: rgba(186,230,253,0.2); }
.footer-universe-label { color: #BAE6FD; }
.footer-universe-links a { color: #BAE6FD; }
.footer-universe-links a:hover { color: #FFFFFF; }
.universe-current { color: #E0F2FE; }
.footer-legal { color: #BAE6FD; }