/* Salty — shared site styles.
   Brand tokens live here once. Before the move each of the nine homepage sections
   redeclared them and pulled the font stylesheet separately, so the assembled page
   fetched Google Fonts nine times.

   The legacy aliases below (--navy, --aqua, --white …) are kept deliberately: home.css
   and the standalone pages still reference them, so remapping the values here re-skins
   every consumer at once instead of requiring a rename across the whole site. */

:root {
  /* Printed-archive palette */
  --paper: #F7F5F0;
  --surface: #EDEBEC;
  --card: #FFFFFF;
  --ink: #1A1118;
  --ink-2: #4A3F4E;
  --ink-3: #6E6472;
  --rule: #D8D3D0;

  /* Accent. --accent is display-size only (3:1); --accent-text clears 4.5:1 on paper. */
  --accent: #FF3D5A;
  --accent-text: #CC2040;
  --accent-dark: #9E1832;

  /* Legacy aliases — keep older rules working while the palette moves under them. */
  --navy: var(--paper);
  --navy-soft: var(--surface);
  --navy-panel: var(--surface);
  --aqua: var(--accent-text);
  --coral: var(--accent-text);
  --lavender: var(--accent-dark);
  --white: var(--ink);
  --muted: var(--ink-2);
  --faint: var(--rule);

  --measure: 760px;
  --font-head: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); }
a:hover { color: var(--accent-dark); }

/* Skip link — the nav is the first thing in the tab order on every page. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-text);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 240, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-header .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.brand span { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 15px;
}
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--ink); }
.site-nav a[aria-current='page'] { font-weight: 500; }

/* ---------- prose pages (privacy, terms, help) ---------- */

.page-head {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 72px 24px 8px;
}
.page-head h1 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
}

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 8px 24px 96px;
}
.prose h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 48px 0 12px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.prose h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  margin: 32px 0 8px;
  color: var(--ink);
}
.prose h2 + h3 { margin-top: 20px; }
.prose p { margin: 0 0 16px; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; color: var(--ink-2); }
.prose li { margin-bottom: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.site-footer .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 24px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  font-size: 15px;
  color: var(--ink-2);
}
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .legal { font-size: 14px; color: var(--ink-3); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-nav { gap: 16px; font-size: 14px; width: 100%; margin-left: 0; }
  .page-head { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- footer detail ---------- */

.site-footer .inner {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2.2fr;
  gap: 40px;
  align-items: start;
  padding: 56px 24px 32px;
}

.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand svg { width: 40px; height: 40px; flex: none; color: var(--accent); }
.foot-name {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 21px;
  color: var(--ink);
}
.foot-tag { font-size: 13px; color: var(--ink-3); }

.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px;
}
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-h {
  margin: 0 0 3px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.foot-col a { font-size: 15px; }

.foot-bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px 44px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-3);
}
.foot-bottom p { margin: 0; }

@media (max-width: 760px) {
  .site-footer .inner { grid-template-columns: 1fr; gap: 32px; }
}