/* =========================================================
   Arx — design tokens (light editorial, engineer-first)
   ========================================================= */
:root {
  --paper:        #F6F3EC;
  --paper-2:      #EFEBE1;
  --paper-3:      #E7E1D3;
  --ink:          #151412;
  --ink-2:        #3A3834;
  --ink-3:        #6B6760;
  --rule:         #D9D3C3;
  --rule-2:       #C9C2AE;

  --accent:       #1F3A2E;
  --accent-ink:   #F6F3EC;
  --accent-soft:  #E3DFCF;

  --signal:       #B54A2B;
  --signal-2:     #7A5C1E;
  --ok:           #2E5A3B;

  --mono-bg:      #111110;
  --mono-ink:     #E7E3D7;
  --mono-dim:     #8A8777;
  --mono-green:   #A3C58A;
  --mono-amber:   #D6B56B;

  --font-display: 'Fraunces', 'Tiempos', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --step-1:  1rem;
  --step-2:  1.125rem;
  --step-3:  1.375rem;

  --gutter: 32px;
  --max:    1320px;

  --ease: cubic-bezier(.2,.6,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: 1.5;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--ink); color: var(--paper); }

.container {
  width: 100%; max-width: var(--max);
  margin: 0 auto; padding: 0 var(--gutter);
}
.container-narrow {
  width: 100%; max-width: 920px;
  margin: 0 auto; padding: 0 var(--gutter);
}
.container-read {
  width: 100%; max-width: 680px;
  margin: 0 auto; padding: 0 var(--gutter);
}

.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow .dot { display: inline-block; width: 6px; height: 6px; background: var(--signal); border-radius: 50%; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.02em; }
p { margin: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 18px;
  border-radius: 2px;
  font-size: 14px; font-weight: 500;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-2);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-link {
  color: var(--ink); font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: gap .2s var(--ease);
}
.btn-link:hover { gap: 10px; }

.arrow-right::after {
  content: "→"; display: inline-block;
  transition: transform .2s var(--ease);
}
a:hover .arrow-right::after, button:hover .arrow-right::after { transform: translateX(3px); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
section { position: relative; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html { scrollbar-color: var(--rule-2) transparent; scrollbar-width: thin; }