/* Forrester Clothing — the legal pages (privacy, terms, cookies).

   Lifted out of three inline copies that had already drifted from the rest of
   the site: `.content-section` carried clamp(32px, 5vw, 48px) here against
   clamp(14px, 2vw, 18px) on the About page, so the same class punctuated one
   group of pages nearly three times as hard as the other. That is the second
   time this exact divergence has been found — the motif strip had it too —
   which is why these now live in one file rather than three.

   Loaded only by those three pages, after tokens.css and components.css.
   Anything genuinely page-specific (the cookie table) stays inline on its
   own page. */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

/* ---------- Calm/Everyday body: plain background, no photography ---------- */
main { max-width: 760px; margin: 0 auto; padding: clamp(48px, 8vw, 88px) clamp(16px, 4vw, 24px); }

.page-head { margin-bottom: 8px; }
.page-head h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 12px;
}
@media (min-width: 640px) {
  .page-head h1 { font-size: 30px; }
}
.page-head p { color: var(--muted); margin: 0; }

.legal-meta {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0 0 clamp(22px, 3vw, 30px);
}

/* Still looser than the About page, deliberately: discrete legal clauses want
   more separation than flowing prose. But not the ~2.7x it was — that read as
   floating blocks rather than one document. */
.content-section { padding: clamp(18px, 2.5vw, 26px) 0; border-top: 1px solid var(--border); }
.content-section:first-of-type { border-top: none; padding-top: 0; }

.content-section h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 19px;
  /* Kept well under the section gap above: that contrast is what binds a
     heading to its own text rather than to the clause before it. */
  margin: 0 0 12px;
}
@media (min-width: 640px) {
  .content-section h2 { font-size: 22px; }
}

.content-section p { color: var(--muted); margin: 0 0 14px; }
.content-section p:last-child { margin-bottom: 0; }

.content-section ul { margin: 0 0 14px; padding-left: 20px; color: var(--muted); }
.content-section ul:last-child { margin-bottom: 0; }
.content-section li { margin-bottom: 6px; }
.content-section li:last-child { margin-bottom: 0; }

.inline-cta { color: var(--forest); font-weight: 600; text-decoration: underline; }