/* policy.css. The whole stylesheet for the two secondary surfaces, privacy.html and 404.html.

   It is NOT part of CSS_ORDER, so nothing here reaches site.css and nothing in site.css reaches here.
   That separation is on purpose: page.css is 2,700 lines of pinned acts, scroll timelines and stage
   geometry, and a document page needs none of it. Loading it here would ship the engine's whole
   layout to a page that is one column of text, and any future edit to an act could move this page.

   The six values below are copied from src/tokens.css by hand rather than imported, for the same
   reason. They are the brand, not a dependency: canvas 07080a, ink f4f4f6, body cdcdcd, the light
   ff5218 (the world's ember since mock-e5, K2; it was D7's ff6161), the hairline 242728, and Geist from the font file the home page already preloads, so a
   reader arriving here from the footer has it cached.

   BOTH pages reference this file as /policy.css, rooted. Cloudflare Pages serves a 404 at any depth of
   path and the privacy page at both /privacy and /privacy.html, so a relative href would resolve against
   whichever URL the reader happens to be on. The font url() below is relative to THIS file, which is at
   the root, so it resolves to /assets/fonts/ wherever the page linking here sits. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/geist-100-400.woff2) format("woff2");
}

:root {
  color-scheme: dark;
  --canvas: #07080a;
  --ink: #f4f4f6;
  --body: #cdcdcd;
  --light: rgb(255, 82, 24); /* the world's ember (world.css --ember), contrast 6.2 on the canvas */
  --hair: #242728;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  /* K2 (mock-e5): the world's look, an ember glow at the top of the page */
  background: radial-gradient(120% 55% at 50% -8%, rgba(255, 82, 24, 0.16), rgba(255, 82, 24, 0) 62%), var(--canvas);
  color: var(--body);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 470;
  line-height: 1.66;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
}

.doc {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 72px) clamp(20px, 5vw, 32px) clamp(64px, 12vw, 120px);
}

/* the 404 has four lines of content, so it sits near the middle of the screen instead of at the top */
.doc--mid {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(32px, 7vw, 72px);
}

h1 {
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 72px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0.4em 0 0.35em;
}

/* the logo's own two colours (#tp-g), as a short bar under the heading */
h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 0.32em;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff0026, #ffab00);
}

h2 {
  color: var(--ink);
  font-weight: 650;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 2.2em 0 0.5em;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}

p { margin: 0 0 14px; }

.doc__lead {
  color: var(--ink);
  font-size: 19px;
  margin-bottom: 28px;
}

.doc__back {
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 40px;
}

.doc--mid .doc__back { margin: 24px 0 0; }

.doc__note {
  color: #8f8f90;
  font-size: 16px;
  margin-top: 28px;
}

a {
  color: var(--light);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.doc__back a {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--light);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1); }
}