:root {
  --color-bg: #000;
  --color-text: #fff;
  --color-text-muted: #ccc; /* measured in the reference: white at ~80% on black */
  --color-text-subtle: #9a9a9a; /* small captions and labels; 7.4:1 on black */
  --color-text-dim: #808080; /* second half of two-tone headings; 5.3:1 on black */
  --color-line: rgb(255 255 255 / 0.14);
  --color-line-soft: rgb(255 255 255 / 0.08);
  --color-panel: rgb(255 255 255 / 0.03);

  /* One accent: the warm light of the moment the hands touch. Used for markers,
     numbers, progress and interaction states — never for large areas. */
  --color-accent: #f2a35e; /* 10:1 on black */
  --color-accent-soft: rgb(242 163 94 / 0.14);
  --color-accent-glow: rgb(242 163 94 / 0.07);

  /* Raised surfaces for the sections that get their own panel. */
  --color-surface-1: #0b0b0c;
  --color-surface-2: #131315;
  --panel-inset: clamp(0.5rem, 0.15rem + 1vw, 1.25rem);
  --panel-radius: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);

  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --container: 76rem;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --section-space: clamp(5.5rem, 3.5rem + 7vw, 10rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

/* :where() keeps this reset at zero specificity, so component classes can set padding. */
:where(ul[role="list"], ol[role="list"]) {
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* Text for screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--color-accent);
  color: #000;
}

/* A fact about the business that has not been provided yet (src/site.mjs): clearly
   marked, so it can never pass for real content. `npm run launch-check` lists them. */
.todo {
  padding: 0.05em 0.4em;
  border: 1px dashed rgb(242 163 94 / 0.65);
  border-radius: 0.35em;
  background: rgb(242 163 94 / 0.08);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-style: normal;
  letter-spacing: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}