/* Privacy Policy — standalone page and shared modal content styles.
   Uses the same palette and typefaces as the main website. */

:root {
  --bg: #F7F5F0;
  --ink: #222222;
  --ink-soft: #55534F;
  --coral: #F36B45;
  --teal: #4BAFA5;
  --display: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
  --text: 'Manrope', 'Manrope Fallback', system-ui, sans-serif;
  --gutter: clamp(20px, 6vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ---- Standalone page shell ---- */
body.prv-page {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
}

.prv-skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--ink); color: var(--bg);
  padding: 8px 14px; border-radius: 4px; z-index: 10;
}
.prv-skip:focus { left: 8px; }

.prv-header {
  padding: 22px var(--gutter);
  border-bottom: 1px solid rgba(34, 34, 34, 0.14);
}
.prv-wordmark {
  font: 500 15px/1 var(--display);
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--ink);
}
.prv-wordmark span { font-weight: 400; color: var(--ink-soft); margin-left: 0.5em; }

.prv-main {
  padding: 56px var(--gutter) 80px;
}

/* ---- Shared article styles (used in both standalone page and modal) ---- */
.prv-body {
  max-width: 640px;
}

.prv-body h1 {
  font: 500 28px/1.2 var(--display);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}

.prv-updated {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 36px;
  letter-spacing: 0.03em;
}

.prv-body h2 {
  font: 500 15px/1.3 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 36px 0 10px;
}

.prv-body p, .prv-body address {
  margin: 0 0 14px;
  font-style: normal;
}

.prv-body ul {
  margin: 0 0 14px;
  padding-left: 1.4em;
}
.prv-body li { margin-bottom: 6px; }

.prv-body a {
  color: inherit;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prv-body a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }