/* ════════════════════════════════════════════════════════════════
   Legal pages — Privacy Policy, Terms & Conditions.

   Deliberately NOT styles.css. That stylesheet is 5000+ lines built
   around the SPA's routes, its Lenis scroll and its hero transitions;
   these two pages are plain documents served outside the SPA shell and
   only need type, measure and rhythm. Loading the whole site sheet here
   would couple a legal page that must NEVER break to every future
   layout change on the portfolio.

   Palette and families are copied from the :root tokens in styles.css
   so the pages still read as part of the same site.
   ════════════════════════════════════════════════════════════════ */
:root{
  --cream:      #faf7f1;
  --ink:        #1a1612;
  --ink-soft:   rgba(26, 22, 18, .72);
  --ink-mute:   rgba(26, 22, 18, .65);
  --ink-line:   rgba(26, 22, 18, .14);
  --accent:     #a8553a;
  --serif:      "Cormorant Garamond", "Times New Roman", serif;
  --sans:       "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono:       "JetBrains Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15px, .55vw + 12px, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap{
  max-width: 760px;            /* ~72 characters at this size — a reading measure */
  margin: 0 auto;
  padding: clamp(40px, 8vh, 96px) clamp(24px, 6vw, 48px) clamp(64px, 12vh, 140px);
}

/* ── Masthead ─────────────────────────────────────────────────── */
.back{
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  margin-bottom: clamp(28px, 5vh, 48px);
}
.back:hover { color: var(--accent); }
.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
h1{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.updated{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-mute);
  margin: 0 0 clamp(32px, 6vh, 56px);
  padding-bottom: clamp(24px, 4vh, 40px);
  border-bottom: 1px solid var(--ink-line);
}

/* ── Body ─────────────────────────────────────────────────────── */
h2{
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(15px, .5vw + 13px, 17px);
  letter-spacing: .02em;
  margin: clamp(34px, 5vh, 52px) 0 12px;
}
h2:first-of-type { margin-top: 0; }
h3{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1em;
  color: var(--ink-soft);
  margin: 26px 0 8px;
}
p, li { color: var(--ink-soft); margin: 0 0 14px; }
ul { padding-left: 1.15em; margin: 0 0 18px; }
li { margin-bottom: 8px; }
strong { color: var(--ink); font-weight: 600; }
/* The underline is the affordance, so it has to clear 3:1 on its own (WCAG
   1.4.11) — not just look like a hint. rgba(168,85,58,.85) over the cream
   blends to #b76d55, which measures 3.69:1. The .3 it replaces was 1.51:1:
   invisible in greyscale, on a dim screen, or to most low-vision readers. */
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(168, 85, 58, .85); }
a:hover { border-bottom-color: var(--accent); }

/* The disclosures a carrier reviewer is scanning for. Boxed so they are
   findable in one pass rather than buried mid-paragraph. */
.callout{
  border-left: 2px solid var(--accent);
  background: rgba(168, 85, 58, .045);
  padding: 18px 22px;
  margin: 0 0 20px;
}
.callout p:last-child { margin-bottom: 0; }

.colophon{
  margin-top: clamp(48px, 8vh, 88px);
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.colophon a { border-bottom: 0; color: inherit; }
.colophon a:hover { color: var(--accent); }