/* The dark pages' shared ground: the two typefaces, the palette and the page itself.
   The home page carries the same rules inline, ahead of its first screen (index.html);
   test/worker.test.js checks the two never drift apart. */
/* Space Grotesk speaks (headline, wordmark, titles); Inter reads (everything else). */
@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;
}

/* The home page is dark only: neutral paper and ink, so only the logo and what is verified carry green. */
:root {
  color-scheme: dark;
  --paper: #0c0c0d;
  --ink: #f2f2ee;
  --ink-2: #e4e4e7;
  --ink-3: #a1a1aa;
  --ink-4: #8b8b94;
  --rail: rgba(242, 242, 238, .09);
  --lift: 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;
  /* A question on the wall: an open hexagon, quiet type. */
  --q-fill: rgba(242, 242, 238, .028);
  --q-edge: rgba(242, 242, 238, .12);
  --q-ink: #8f8f98;
  --q-ink-quiet: #6c6c75;
  --q-ring: rgba(242, 242, 238, .3);
  /* The hexagon: a dark card on the paper. */
  --plate: #17171a;
  --plate-edge: rgba(242, 242, 238, .26);
  --plate-shadow: drop-shadow(0 20px 36px rgba(0, 0, 0, .75)) drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
  /* What a claim comes back as: Verified, with the logo as its check. */
  --ok: #4be3a0; --ok-fill: rgba(75, 227, 160, .14); --ok-edge: rgba(75, 227, 160, .6);
  /* Polished metal, lit from above, with a reflection across it. m for plain faces, g for verified. */
  --m-hi: #2c2c31; --m-lo: #121214; --m-edge: rgba(242, 242, 238, .17); --m-lip: rgba(255, 255, 255, .16); --m-under: rgba(0, 0, 0, .55); --m-drop: rgba(0, 0, 0, .55); --m-glare: rgba(255, 255, 255, .13);
  --g-hi: #1f4d39; --g-lo: #0d261b; --g-edge: rgba(75, 227, 160, .45); --g-lip: rgba(170, 255, 216, .26); --g-under: rgba(0, 0, 0, .5);
  --font: "Inter Polygraph", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk Polygraph", var(--font);
  /* The page's column: the header, the words and every section share its left edge. */
  --nav: 64px;
  --pad: 56px;
  --edge: calc(max(20px, (100% - 1200px) / 2) + var(--pad));
  /* The wall's rhythm: a row of pills and the gutter under it. Text sits on the same rows. */
  --pill-f: clamp(14px, .8vmin + 11.1px, 19.5px);
  --pill: calc(var(--pill-f) * 2.55);
  --gutter: calc(var(--pill) * .52);
  --pitch: calc(var(--pill) + var(--gutter));
}
@media (max-width: 899px) { :root { --pad: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 8px); }
body {
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  -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; }

/* The logo, always its own green. The same shape is the check on a verified claim. */
.mark { flex: none; display: block; }
.mark path { fill: var(--ok); }