/* ============================================================
   PAGE SHELL — shared by every "utility" page (contact, privacy,
   sms-terms, and any future one-off legal/form page).

   These pages all use the same warm-neutral token set, the same
   sticky topbar/wordmark, and the same two-column footer. Before
   this file existed, that CSS was pasted into each page's <style>
   block, so a footer or topbar tweak meant repeating the same edit
   three times (and easy to miss one). Keep this in sync in ONE
   place instead.

   The homepage (index.html) is NOT included here — it uses its own
   --pf-* prefixed token system and .site-header/.pf-wordmark markup,
   a deliberately separate (larger, dark-capable) design system, so
   unifying it with this file would be a much bigger, riskier change
   than what was asked for.

   Pages that use this file still keep their own <style> block for
   anything page-specific (extra tokens like --btn-bg, form styles,
   legal-copy typography, etc.) — this file only carries the parts
   that were byte-identical across all three pages.
   ============================================================ */

:root {
  --bg: #F7F5F0;
  --fg: #1B1912;
  --fg-muted: #6B6558;
  --fg-faint: #6E6650;
  --hairline: #DCD5C4;

  --font-display: 'Momo Trust Display', Nunito, system-ui, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  /* Matches the homepage's --pf-font-sans stack exactly (Arial instead
     of -apple-system as the last resort) — same font, same fallback
     chain, everywhere on the site. */
  --font-body: 'Inter', system-ui, Arial, sans-serif;

  /* Fluid section inset — 24px at ~375px viewport width up to a 200px
     cap at 1280px+, so the ~900-1279px laptop range gets a
     proportionally scaled gutter instead of jumping straight from the
     mobile 24px value. */
  --section-px: clamp(24px, 19.5vw - 49px, 200px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Base body type matches the homepage's exactly (16px / -0.4px /
   1.5), rather than the slightly larger, looser-tracked, more
   open-leaded values (17px / -0.0125em / 1.6) this file used before —
   that mismatch was the biggest reason contact/privacy/sms-terms read
   as a visibly different "font treatment" from the homepage despite
   using the same underlying typefaces. */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.4px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 0.5px solid var(--hairline);
}
.topbar-inner {
  display: flex;
  align-items: center;
  padding: 14px var(--section-px);
}
.wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
}

/* Off-screen until focused, so keyboard users can jump past the
   header straight to the main content instead of tabbing through
   the nav every time. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

footer {
  box-sizing: content-box;
  max-width: 640px;
  padding: 32px var(--section-px) 40px;
  border-top: 0.5px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
}
@media (max-width: 520px) {
  footer { flex-direction: column; align-items: flex-start; }
}
/* Legal links (left) and the contact invitation (right) — sized and
   spaced to match the homepage's footer exactly (see its .footer-row
   rules) so the footer reads as one shared component across every
   page. Both paragraphs use the same base rule (no per-paragraph
   margin) so they always sit at the same height in the flex row. */
.footer-legal,
.footer-invite {
  margin: 0;
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--fg-muted);
}
.footer-legal a,
.footer-invite a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .5px;
  text-underline-offset: 3px;
}
.footer-legal a:hover,
.footer-invite a:hover { color: var(--fg); }
.footer-invite a { font-weight: 600; }

/* ============================================================
   PRINT — the sticky/blurred topbar and the skip link only mean
   something on screen. Privacy and SMS terms are the pages people
   actually print or save as a PDF, so make sure those come out clean:
   no floating chrome, full ink contrast, links still legible once
   the underline is the only cue color can't provide on paper.
   ============================================================ */
@media print {
  .skip-link { display: none !important; }
  .topbar {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .footer-legal, .footer-invite { color: #333; }
}