/* Blindspot design tokens. Every later surface reads from this file. */

:root {
  /* Canvas */
  --void: #07070b;
  --panel: #0e0e16;
  --panel-2: #14141f;
  --line: #1e1e2b;
  --line-soft: #16161f;

  /* Ink */
  --ink: #ececf5;
  --muted: #8a8aa3;
  --faint: #55556a;

  /* Exposure, the data side */
  --org: #f97316;
  --org-2: #fb923c;
  --org-dim: rgba(249, 115, 22, 0.14);

  /* Privacy, the eye side */
  --blue: #0052ff;
  --blue-lift: #5a8dff;
  --blue-dim: rgba(0, 82, 255, 0.16);

  /* Semantics only. Never decorative. */
  --up: #22c55e;
  --down: #ef4444;

  /* Type */
  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --gut: 20px;
  --max: 1160px;
  --r: 14px;
  --r-lg: 20px;
}

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

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

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Any `display` declaration outranks the hidden attribute's user-agent rule, so
   `el.hidden = true` silently does nothing on a flex or grid element. This is the
   fix, and it has to sit above the layout rules that would otherwise win. */
[hidden] { display: none !important; }

a {
  color: var(--ink);
  text-decoration-color: rgba(249, 115, 22, 0.5);
  text-underline-offset: 3px;
}

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

:focus-visible {
  outline: 2px solid var(--org);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

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

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Section eyebrow. It labels what the section is, it does not decorate. */
.eyebrow {
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--org);
  flex: none;
}

.mono { font-family: var(--data); font-variant-numeric: tabular-nums; }

/* Any wide child scrolls inside its own container. The page body never does. */
.scroll-x {
  overflow-x: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}