/* Document pages — privacy, terms, and the three Napper consent-screen pages.
   Shares the palette, faces and hairline language of the main site, whose CSS
   is inlined in index.html.

   Same three contrast lifts as the home page, for the same reason: as
   specified, --faint was 4.17:1 in dark and 3.23:1 in light, and light
   --accent was 4.47:1, all below WCAG AA at the sizes they carry here. */

:root {
  --bg: #121310;
  --raise: #191A16;
  --ink: #F2EFE8;
  --dim: #A9A69C;
  --faint: #858178;
  --rule: rgba(242,239,232,0.13);
  --rule-strong: rgba(242,239,232,0.22);
  --accent: #DE7346;
  --accent-ink: #121310;

  --display: 'Crimson Pro', Georgia, serif;
  --ui: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F7F4ED;
  --raise: #FFFFFF;
  --ink: #1A1A15;
  --dim: #5B584F;
  --faint: #6E6B63;
  --rule: rgba(26,26,21,0.14);
  --rule-strong: rgba(26,26,21,0.26);
  --accent: #AC512B;
  --accent-ink: #FFFFFF;

  color-scheme: light;
}

/* Author `display` declarations outrank the UA's [hidden] rule at equal
   specificity, so anything given a display value needs this to actually hide.
   .toggle, .hdr-toggle, .drawer and .modal all set display. */
[hidden] { display: none !important; }

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

html, body { background: var(--bg); }

body {
  color: var(--dim);
  font-family: var(--ui); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }

/* ── header ── */
.hdr {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 clamp(20px, 5vw, 32px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--rule);
}
.hdr-name {
  font-size: 13px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: none; white-space: nowrap; border-bottom: none;
}
.hdr-name:hover { color: var(--ink); border-bottom: none; }
.hdr-name span { color: var(--accent); letter-spacing: 0; }
.hdr-right { display: flex; align-items: center; gap: 16px; }
.hdr-tag {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap;
}
.hdr-toggle {
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: transparent; color: var(--dim); cursor: pointer;
  display: grid; place-items: center; font: inherit; font-size: 13px; line-height: 1;
  transition: color 150ms ease-in-out, border-color 150ms ease-in-out;
}
.hdr-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* ── layout ── */
main { max-width: 760px; margin: 0 auto; padding: clamp(48px, 8vw, 80px) clamp(20px, 5vw, 32px) 96px; }

.eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(40px, 6.4vw, 62px); line-height: 1.04;
  letter-spacing: -.025em; color: var(--ink); margin-bottom: 10px;
  text-wrap: pretty;
}
.standfirst {
  font-size: 19px; line-height: 1.65; color: var(--dim);
  padding-bottom: 32px; margin-bottom: 40px;
  border-bottom: 1px solid var(--rule); text-wrap: pretty;
}
h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 30px; line-height: 1.15; letter-spacing: -.015em;
  color: var(--ink); margin: 48px 0 14px;
  padding-top: 28px; border-top: 1px solid var(--rule);
  text-wrap: pretty;
}
h2:first-of-type { border-top: none; padding-top: 0; }
h3 {
  font-family: var(--display); font-weight: 400; font-size: 22px;
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 28px 0 8px;
}
p { margin-bottom: 16px; text-wrap: pretty; }

a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  transition: border-color 150ms ease-in-out;
}
a:hover { border-bottom-color: var(--accent); }

ul { margin: 0 0 18px 0; list-style: none; }
li { position: relative; padding-left: 22px; margin-bottom: 9px; }
li::before {
  content: '—'; position: absolute; left: 0; color: var(--faint); font-size: 14px;
}
strong { color: var(--ink); font-weight: 500; }

/* ── callout ── */
.note {
  background: var(--raise); border-left: 2px solid var(--accent);
  padding: 20px 22px; margin: 26px 0;
}
.note p:last-child { margin-bottom: 0; }

/* ── scope table ── */
.tbl-wrap { overflow-x: auto; margin: 22px 0 26px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
th, td {
  text-align: left; vertical-align: top;
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule);
}
td { color: var(--dim); }
th {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); font-weight: 400; border-bottom-color: var(--rule-strong);
}
td code, code {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--raise); padding: 2px 5px; border-radius: 2px;
}
td code { white-space: nowrap; }

/* ── meta / footer ── */
.meta {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-top: 8px;
}
footer {
  border-top: 1px solid var(--rule); margin-top: 64px; padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: 13px; color: var(--faint);
}
footer a { color: var(--faint); border-bottom-color: color-mix(in oklab, var(--faint) 40%, transparent); }
footer a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 600px) {
  main { padding: 48px 20px 72px; }
  .hdr-tag { display: none; }
  .standfirst { font-size: 17px; }
}