/* Shared visual system and navigation for every page. */
:root {
  --page: #f4f0e9;
  --surface: #e9e1d6;
  --text: #26231f;
  --muted: #71685f;
  --line: #cfc5b7;
  --accent: #ad3d27;
  --button-text: #fffaf2;
  --field: #fffaf2;
  --home-ink: var(--text);
  --home-paper: var(--page);
  --home-paper-2: var(--surface);
  --home-rust: #bd482e;
  --home-cream: #fffaf2;
  --on-dark: #f7f1e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --page: #1d1d1a; --surface: #292a25; --text: #f7f1e6;
    --muted: #bab3a7; --line: #4c4b40; --accent: #ef9c81;
    --button-text: #211f1a; --field: #292a25;
    --home-ink: var(--text); --home-paper: var(--page);
    --home-paper-2: var(--surface); --home-cream: #fffaf2;
  }
}
:root[data-theme=dark] {
  --page: #1d1d1a; --surface: #292a25; --text: #f7f1e6;
  --muted: #bab3a7; --line: #4c4b40; --accent: #ef9c81;
  --button-text: #211f1a; --field: #292a25;
  --home-ink: var(--text); --home-paper: var(--page);
  --home-paper-2: var(--surface); --home-cream: #fffaf2;
}
body { background: var(--page); color: var(--text); }
.site-header { height: 88px; border-color: var(--line); gap: 32px; }
.home-header .desktop-nav { gap: 28px; }
.desktop-nav a { position: relative; padding: 10px 0; }
.desktop-nav a[aria-current=page] { text-decoration: none; }
.desktop-nav a[aria-current=page]::after,
.desktop-nav a.section-current::after {
  content: ''; position: absolute; bottom: 2px; left: 0; width: 18px;
  height: 2px; background: var(--accent);
}
.desktop-nav a[aria-current=page], .desktop-nav a.section-current,
.mobile-nav a[aria-current=page], .mobile-nav a.section-current { color: var(--accent); }
.home-header .button-small {
  background: var(--text); border-color: var(--text); color: var(--page);
  gap: 10px; padding: 11px 15px;
}
.home-header .button-small:hover { background: var(--home-rust); color: #fffaf2; }
.home-header .theme-toggle { color: var(--text); }
.button { border-radius: 0; }
.eyeline, .section-kicker, .eyebrow { color: var(--accent); }
.home-footer, .home-footer .footer-bottom { border-color: var(--line); }
.home-footer { padding-top: 44px; }
.home-footer .footer-main { padding-bottom: 44px; }
.hero-photo figcaption, .muted-copy, .resource-links small { color: var(--muted); }
.home-statement, .guide-topics, .guide-topics li, .resource-links,
.resource-links a { border-color: var(--line); }
.pillar-card { color: #26231f; }
.pillar-card-dark, .pillar-card-image, .pillar-card-overlay { color: var(--on-dark); }
.guide-form-card { background: #26231f; color: var(--on-dark); }
.hero-note, .hero-actions .button, .home-invitation .button { color: #fffaf2; }
.guide-form-card input[type=email], .form-status a { color: var(--on-dark); }
.form-submit { background: #fffaf2; border-color: #fffaf2; color: #26231f; }
.form-submit:hover { color: #fffaf2; }
.guide-callout { background: var(--home-moss); color: var(--on-dark); padding: 90px 0; margin-top: 48px; }
.guide-callout-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: end; }
.guide-callout .section-kicker { color: #dfaa90; margin-bottom: 24px; }
.guide-callout h2 { font-size: clamp(38px,4.8vw,70px); letter-spacing: -.065em; line-height: 1; }
.guide-callout em { font-family: Georgia,serif; font-weight: 400; }
.guide-callout p:not(.section-kicker) { max-width: 470px; font-size: 17px; line-height: 1.55; margin-bottom: 26px; }
.guide-callout .button { background: #fffaf2; border-color: #fffaf2; color: #26231f; }
.guide-callout small { display: block; margin-top: 17px; font-size: 11px; color: #d5d5c7; }
@media (max-width: 1100px) {
  .site-header { gap: 20px; }
  .home-header .desktop-nav { gap: 20px; }
}
@media (max-width: 900px) {
  .home-header .desktop-nav { gap: 16px; }
  .guide-callout-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .site-header { height: 88px; }
  .home-header .theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .mobile-nav:not([hidden]) { inset: 87px -20px auto; background: var(--page); border-color: var(--line); }
  .mobile-nav a:last-child { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 20px; color: var(--accent); font-weight: 800; }
  .guide-callout { padding: 62px 0; margin-top: 20px; }
  .home-footer .footer-bottom { flex-direction: column; align-items: start; gap: 8px; }
}