/* ─────────────────────────────────────────────────────────────────────
   SvarKlar - /privacy/ + /terms/ page styles.

   Dark long-form reading on the new design system. The page surface is
   --ink-warm (the same warm near-black the homepage FAQ + the /about
   closing section use), cream text, Switzer headings, gold inline links
   and list markers. Mirrors /about's content column (~760px).

   The shared .t-header was built to sit over a dark surface, so on these
   dark pages it needs no overrides. Ported from the legacy style.css
   when this file landed (style.css has since been retired).

   Loaded after tokens.css + components.css + site.css (per-page link
   on /privacy/ + /terms/).
   ───────────────────────────────────────────────────────────────────── */


/* ── Page shell ───────────────────────────────────────────────────── */
/* Set the surface to the design-system warm near-black; .legal-page
   carries the clearance for the new fixed header. */
body {
  background: var(--ink-warm);
  color: #f5f0e6;
  padding-top: 0;
}
.legal-page {
  background: var(--ink-warm);
  padding: 160px 24px 112px;   /* generous top gap below the fixed header, matching the site's section rhythm */
}
.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}


/* ── Head: page title + last-updated, hairline divider ────────────── */
.legal-head {
  margin-bottom: 44px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(245, 240, 230, 0.16);
}
.legal-head h1 {
  font-family: var(--heading-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-ls);
  line-height: var(--h1-lh);
  color: #f5f0e6;
  margin: 0 0 12px;
  text-wrap: balance;
}
.legal-meta {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--body-on-dark-mute);
}


/* ── Article body ─────────────────────────────────────────────────── */
.legal-article {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--body-on-dark);
  text-wrap: pretty;
}
.legal-lede {
  font-size: 1.22rem;
  line-height: 1.6;
  color: #f5f0e6;
  margin: 0 0 8px;
}
.legal-article h2 {
  font-family: var(--heading-font);
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #f5f0e6;
  margin: 44px 0 14px;
}
.legal-article h3 {
  font-family: var(--heading-font);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #f5f0e6;
  margin: 26px 0 10px;
}
.legal-article p { margin: 0 0 16px; }
.legal-article p:last-child { margin-bottom: 0; }
.legal-article ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal-article li { margin-bottom: 8px; }
.legal-article li::marker { color: var(--gold); }
.legal-article strong { color: #f5f0e6; font-weight: 600; }

/* Inline links: bright gold text, soft gold underline. */
.legal-article a {
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 217, 126, 0.4);
  transition: border-color var(--dur-default) var(--ease-standard),
              background-color var(--dur-default) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .legal-article a:hover {
    border-bottom-color: var(--gold);
    background: var(--gold-wash);
  }
}

/* Inline code (subprocessor host names, the hello@ mailbox) */
.legal-article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--gold-wash);
  border: 1px solid rgba(232, 196, 89, 0.22);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  color: var(--gold-soft);
}


/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .legal-page { padding: 124px 18px 76px; }
  .legal-head { margin-bottom: 32px; padding-bottom: 18px; }
  .legal-article { font-size: 1.02rem; }
  .legal-lede { font-size: 1.12rem; }
  .legal-article h2 { font-size: 1.32rem; margin-top: 36px; }
}