/* The two documents the site links to from its footer.

   Static pages, outside the app bundle, so they carry their own faces and
   their own tokens rather than waiting on a hashed asset name. Same palette,
   same faces, same measure as the site they belong to.

   They are documents, not pages of the site's design: no preloader, no
   inversion on scroll, no lattice. What they share with the site is the ground
   — near-black, cool ink — the four faces, and the two marks that carry the
   genre: the registration cross at the head of the page and the crosshair
   rules between sections.

   They stay on the dark ground rather than the cream one, and deliberately.
   The inversion on the main site is a scroll event with a mechanism behind it;
   a legal notice has no scroll narrative to hang it on, and a cream page here
   would read as a different site rather than as the same one at rest. */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-latin.woff2) format("woff2");
}

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

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

:root {
  --bg: #040508;
  --text: #d8d8d8;
  --text-dim: #9c9c9c;
  --line: #434343;
  color-scheme: dark;
  caret-color: var(--text);
}

@supports (color: oklch(0 0 0)) {
  :root {
    --bg: oklch(0.0999 0.0093 272.19);
    --text: oklch(0.8846 0 0);
    --text-dim: oklch(0.6884 0 0);
    --line: oklch(0.4179 0 0);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: clamp(3rem, 9vh, 6rem) clamp(1.25rem, 6vw, 3rem)
    clamp(4rem, 12vh, 8rem);
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 44rem;
  margin-inline: auto;
}

a {
  color: inherit;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--text);
  color: var(--bg);
}

.back {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  text-decoration: none;
}

.back::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.back:hover {
  color: var(--text);
}

/* The display serif, sentence case, at the size the site's section headings
   use. A legal notice set in a condensed face at 15vw would be a design
   deciding it matters more than what it says. */
h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0;
  text-wrap: balance;
}

.stamp {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 1.25rem 0 0;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: var(--text);
  margin: 2rem 0 0;
}

/* Each section opens on a hairline interrupted at its midpoint by a `+` — the
   same crosshair rule the site uses between its own sections, drawn here with
   a pseudo-element on the heading because these documents have no rule
   elements to hang it on. */
h2 {
  position: relative;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 3.5rem 0 0;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
}

h2::after {
  content: "+";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  background: var(--bg);
  padding: 0 0.5rem;
}

p,
li {
  color: var(--text-dim);
}

p {
  margin: 1.1rem 0 0;
  text-wrap: pretty;
}

ul {
  margin: 1.1rem 0 0;
  padding-left: 1.1rem;
}

li {
  margin-top: 0.5rem;
}

li::marker {
  color: var(--line);
}

strong {
  color: var(--text);
  font-weight: 600;
}

footer {
  position: relative;
  margin-top: 4rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

footer::after {
  content: "+";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text);
  background: var(--bg);
  padding: 0 0.5rem;
}

footer a {
  color: var(--text-dim);
}

footer a:hover {
  color: var(--text);
}

/* The script-free copies of the site's two React documents (written into a
   `<noscript>` by `scripts/static-fallback.ts`) use a few elements the two
   notices never needed: third-level headings, definition lists, ordered lists
   and figures. Set here, in the notices' own voice, so a page without scripts
   looks like this site at rest rather than like a browser default. */
h3 {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 2.25rem 0 0;
}

h3 + p,
h3 + ul,
h3 + ol {
  margin-top: 0.5rem;
}

ol {
  margin: 1.1rem 0 0;
  padding-left: 1.4rem;
}

dl {
  margin: 1.5rem 0 0;
}

dt {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 1rem;
}

dd {
  margin: 0.25rem 0 0;
  color: var(--text);
}

img {
  border: 1px solid var(--line);
  margin-top: 1.5rem;
}

figure {
  margin: 1.5rem 0 0;
}

figure img {
  margin-top: 0;
}

figcaption {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}