/* ============================================================
   Starwise — shared marketing-footer CSS.
   ============================================================
   Single source of truth for the 4-column footer + bottom strip
   that every non-homepage page now shares via _partials/footer.html.

   Originally extracted from the marketing pages (about, reading,
   wealth-reading, parents-guide). Those pages still have the rules
   inline; cleanup is a follow-up. For now, inline + this file
   co-exist harmlessly via cascade.
   ============================================================ */

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-mark {
  width: 28px; height: 28px;
  display: block;
  flex-shrink: 0;
}
.nav-wordmark {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: -0.04em;
  color: var(--ink-white); text-decoration: none;
  position: relative;
}
.nav-polar {
  position: absolute;
  top: -0.31em; left: 3.32em;
  width: 8px; height: 8px;
}

.footer {
  padding: 64px 0 48px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 18px;
  color: var(--ink-white);
  margin-bottom: 12px;
  letter-spacing: -0.04em;
}
.footer-tagline {
  font-family: 'Spectral', serif; font-style: italic;
  font-size: 13px;
  color: var(--ink-muted);
  max-width: 280px;
  line-height: 1.55;
}
.footer-col-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 16px;
}
.footer-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.15s;
}
.footer-link:hover { color: var(--gold-2); }

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* Responsive collapses — only fire below their breakpoint */
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* The footer needs a centered container; pages that already define
   .container will use theirs. Provide a default for pages that don't. */
.footer .container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}