/* ==========================================================================
   Privacy / Terms — the legal pages.

   These carry their OWN stylesheet rather than the landing page's, on purpose:
   they are documents that must stay readable even if the marketing CSS is
   rewritten, and they are the pages on this site that should never break for
   a design reason.

   It is an external file, not a <style> block, because nginx serves this site
   under a strict CSP with no 'unsafe-inline' (style-src 'self'). An inline
   style block here would simply be dropped by the browser and the page would
   render unstyled.

   The palette is the warmdark preset's values, written literally. These pages
   do not import the token file for the same independence reason.
   ========================================================================== */

:root {
  --paper: #221D19;
  --paper-2: #2A241F;
  --ink: #EDE4D4;
  --muted-ink: #C9BEAC;
  --accent: #B8955A;
  --rule: #3E372F;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 28px; }

header { border-bottom: 1px solid var(--rule); }
header .wrap { display: flex; align-items: center; min-height: 74px; }
.mark { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 19px; }
.mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

main { padding: 56px 0 80px; }

h1 { font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }

.updated {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin: 0 0 40px;
}

h2 { font-size: 23px; line-height: 1.25; margin: 44px 0 12px; }
h3 { font-size: 19px; margin: 28px 0 8px; }

p { margin: 0 0 16px; }
ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }

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

.lede { font-size: 20px; color: var(--muted-ink); margin-bottom: 32px; }

/* the one emphasised block per page: the plain-English summary, and the
   explanation of how the visitor count works without identifying anybody */
.box {
  margin: 28px 0;
  padding: 22px 24px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
.box p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 16.5px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; }

footer {
  border-top: 1px solid var(--rule);
  padding: 28px 0 48px;
  color: var(--muted-ink);
  font-size: 15.5px;
}
footer a { color: var(--muted-ink); }

@media (max-width: 700px) {
  body { font-size: 17px; }
  h1 { font-size: 30px; }
  h2 { font-size: 21px; }
  main { padding: 40px 0 56px; }
  table, th, td { font-size: 15.5px; }
  /* a two-column table of "what / why" is unreadable at 375; stack it */
  thead { display: none; }
  tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  td { display: block; border: 0; padding: 0 0 6px; }
  td:first-child { font-weight: 600; }
}