/* Privacy, terms, support and the reviewer walkthrough: the landing page's
   paper, ink and type, read as one sheet on the chart's grid, dark until a
   visitor picks light. Nothing moves except the walkthrough video, and only
   when someone plays it. */
@font-face {
  font-family: "Space Grotesk Polygraph";
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Polygraph";
  src: url("/fonts/inter-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #ebf4ef;
  --ink: #07201a;
  --ink-2: #203631;
  --ink-3: #4f6a5e;
  --ink-4: #4f6a5e;
  --card: #ffffff;
  --edge: rgba(7, 32, 26, .11);
  --rule: rgba(7, 32, 26, .09);
  --grid: rgba(7, 32, 26, .055);
  --grid-fine: rgba(7, 32, 26, .028);
  --lift: 0 1px 2px rgba(7, 32, 26, .05), 0 14px 34px -18px rgba(7, 32, 26, .28);
  --btn: #07201a;
  --btn-hover: #16352c;
  --btn-ink: #ebf4ef;
  --font: "Inter Polygraph", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk Polygraph", var(--font);
}
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper: #0c0c0d;
  --ink: #f2f2ee;
  --ink-2: #e4e4e7;
  --ink-3: #a1a1aa;
  --ink-4: #8b8b94;
  --card: #17171a;
  --edge: rgba(242, 242, 238, .15);
  --rule: rgba(242, 242, 238, .1);
  --grid: rgba(242, 242, 238, .045);
  --grid-fine: rgba(242, 242, 238, .02);
  --lift: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .9);
  --btn: #f2f2ee;
  --btn-hover: #ffffff;
  --btn-ink: #0c0c0d;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-fine) 1px, transparent 1px);
  background-size: 95px 95px, 95px 95px, 19px 19px, 19px 19px;
  color: var(--ink-2);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.top { padding: max(20px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left)); }
.brand { display: inline-flex; align-items: center; gap: 12.5px; padding: 4px 2px; border-radius: 8px; font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1; color: var(--ink); text-decoration: none; }
.mark { flex: none; display: block; width: 1.5em; height: 1.68em; }
.mark path { fill: #4be3a0; }

main { flex: 1; padding: 28px 16px 8px; }
.sheet {
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(26px, 6vw, 60px) clamp(22px, 6vw, 64px) clamp(30px, 6vw, 56px);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--edge), var(--lift);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--ink); text-wrap: balance; }
h1 { margin: 0; font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem); letter-spacing: -.035em; line-height: 1.04; }
h2 { margin: 2.4em 0 .6em; padding-top: 1.6em; border-top: 1px solid var(--rule); font-size: 1.32rem; letter-spacing: -.02em; line-height: 1.25; }
h3 { margin: 1.6em 0 .3em; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.35; }
.meta { margin: 12px 0 0; font-size: 14px; color: var(--ink-4); }
.lede { margin: 22px 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); }

p, ul, ol { margin: .85em 0 0; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: .45em; }
li::marker { color: var(--ink-4); }
b, strong { font-weight: 600; color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--ink-4); }
a:hover { text-decoration-color: var(--ink); }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }
/* The server address is copied whole, so it never breaks: its own line, sized
   to fit a phone, and a sideways scroll on anything narrower. */
.addr {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: .3em;
  overflow-x: auto;
  white-space: nowrap;
  font-size: .85em;
  scrollbar-width: thin;
}

/* Plain-language summary: a short list, not a box. */
.short { margin-top: 26px; padding-left: 0; list-style: none; }
.short li { position: relative; padding-left: 22px; }
.short li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 9px; height: 1.6px; border-radius: 1px; background: var(--ink-3); }

/* Each kind of information: its name, then what it is. */
.facts { padding-left: 0; list-style: none; }
.facts li + li { margin-top: .9em; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 13px;
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .55), var(--lift);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .15s ease, transform .2s cubic-bezier(.2, .7, .2, 1);
}
.go:hover { background: var(--btn-hover); }
.go:active { transform: scale(.97); }
.mail { font-size: 1.05rem; font-weight: 600; }

.foot { padding: 26px 16px max(26px, env(safe-area-inset-bottom)); }
.foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; font-size: 13.5px; line-height: 1; }
.foot a { padding: 8px 11px; border-radius: 999px; color: var(--ink-3); text-decoration: none; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--ink); }
.foot nav { align-items: center; }
.theme { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; padding: 0; background: none; color: var(--ink-3); border-radius: 999px; cursor: pointer; }
.theme:hover { color: var(--ink); }
.theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .moon { display: none; }
:root[data-theme="light"] .theme .sun { display: none; }
:root[data-theme="light"] .theme .moon { display: block; }
html:not(.js) .theme { display: none; }

/* Reviewer walkthrough: a wider sheet so the film's captions stay legible. */
.sheet.wide { max-width: 1180px; }
.player { margin: 28px 0 0; }
.player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px var(--edge); }
.player figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-4); }
.chapters { padding-left: 0; list-style: none; }
.chapters li { display: flex; gap: 14px; align-items: baseline; }
.chapters a { flex: none; min-width: 3.4em; font-variant-numeric: tabular-nums; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .go { transition: none; }
}