:root {
  --ink:        #0E1113;
  --ink-2:      #121619;
  --steel:      #1A1F24;
  --steel-2:    #20262D;
  --seam:       #2A313A;
  --seam-soft:  #21272E;
  --fog:        #9AA3AD;
  --fog-dim:    #626A73;
  --chalk:      #EEF1F3;

  --ember:      #F2542D;
  --ember-hot:  #FF6A3D;
  --ember-dim:  #4A2318;

  --font-display: "Archivo Variable", system-ui, sans-serif;
  --font-body:    "Archivo Variable", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --r: 2px;
  --seam-w: 1px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .label { font-family: var(--font-display); }
h1, h2, h3 {
  font-variation-settings: "wght" 800, "wdth" 125;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}
h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: 18px; }

p { margin: 0; }
a { color: inherit; text-decoration: none; }

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
}

.btn {
  --bg: transparent; --bd: var(--seam); --fg: var(--chalk);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 44px; padding: 0 var(--s5);
  background: var(--bg); color: var(--fg);
  border: var(--seam-w) solid var(--bd); border-radius: var(--r);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { border-color: var(--fog-dim); background: var(--steel-2); }
.btn-ember { --bg: var(--ember); --bd: var(--ember); --fg: #10110F; }
.btn-ember:hover { background: var(--ember-hot); border-color: var(--ember-hot); }

:where(a, button):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}
::selection { background: var(--ember); color: #10110F; }