:root {
  --bg: #0c0c0a;
  --bg-elevated: #131210;
  --ink: #f3ede2;
  --ink-dim: #a8a094;
  --ink-quiet: #6b665c;
  --accent: #c9a66b;
  --rule: rgba(243, 237, 226, 0.08);
  --rule-strong: rgba(243, 237, 226, 0.18);

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}

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

html {
  scroll-behavior: smooth;
  /* iOS Safari inflates type in blocks it judges wide, so an iPhone in landscape
     throws out the scale. These four pages are the App Store Support and Privacy
     Policy URLs, so they are read on phones by App Review among others. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(201, 166, 107, 0.3); transition: border-color 200ms ease; }
a:hover { border-bottom-color: var(--accent); }

/* nav */
nav.legal-nav {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav.legal-nav .logo {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  border: 0;
}
nav.legal-nav .logo span { color: var(--accent); font-style: italic; }
nav.legal-nav .back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 0;
}
nav.legal-nav .back:hover { color: var(--ink); }

/* main article */
article {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 16px;
}

article h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 24px;
}
article h1 em { font-style: italic; color: var(--accent); }

.meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
  padding-bottom: 24px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.meta .label { color: var(--ink-quiet); }
.meta .val { color: var(--ink-dim); }

.lede {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 48px;
  letter-spacing: -0.005em;
}
.lede em { font-style: italic; color: var(--accent); }

.tldr {
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
  padding: 24px 28px;
  margin: 32px 0 48px;
  border-radius: 2px;
}
.tldr h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.tldr p { color: var(--ink); margin: 0; }
.tldr p + p { margin-top: 12px; }

article h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 56px 0 16px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
article h2 .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-quiet);
  font-weight: 400;
  flex-shrink: 0;
  min-width: 28px;
}

article h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 32px 0 12px;
}

article p { color: var(--ink-dim); margin-bottom: 16px; }
article p strong { color: var(--ink); font-weight: 500; }

article ul, article ol { color: var(--ink-dim); padding-left: 24px; margin-bottom: 16px; }
article ul li, article ol li { margin-bottom: 8px; padding-left: 4px; }
article ul li::marker { color: var(--ink-quiet); }
article ul li strong, article ol li strong { color: var(--ink); font-weight: 500; }

/* A wide table scrolls inside its own box instead of widening the page. The
   cookie table has five headers whose min-content sets a ~380px floor, which
   made every iPhone narrower than a Plus scroll sideways (MEY-26). min-width
   keeps the table filling the column on wide screens. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 100%; }

article table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
}
article table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule-strong);
}
article table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-dim);
}
article table td:first-child { color: var(--ink); font-weight: 500; }

article code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink);
}

/* cross-link footer */
footer.legal-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 64px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
footer.legal-footer a, footer.legal-footer [data-consent-open] { color: var(--ink-dim); border: 0; }
footer.legal-footer a:hover, footer.legal-footer [data-consent-open]:hover { color: var(--ink); }
footer.legal-footer .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }

@media (max-width: 640px) {
  nav.legal-nav, article, footer.legal-footer { padding-left: 24px; padding-right: 24px; }
  article { padding-top: 48px; padding-bottom: 64px; }
  article h2 { font-size: 24px; gap: 12px; }
  article h2 .num { min-width: 24px; }
  .lede { font-size: 19px; }
}

/* Reduce Motion, matching the homepage. These pages have only the link
   border-colour transition, but the setting should be honoured everywhere. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}