/* ==========================================================================
   APEXION — design tokens & base
   Style source: "Press Room" — a high-stakes monochrome printing-press
   aesthetic. Black and white do all the work; no brand accent color.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* surfaces */
  --bg: #f6f6f6;
  --bg-dark: #000000;
  --surface: #ffffff;
  --surface-dark: #000000;
  --surface-2: #f6f6f6;
  --border: #d1d1d1;
  --border-strong: #000000;
  --border-dark: rgba(255, 255, 255, 0.24);

  /* text */
  --text: #000000;
  --text-inverse: #ffffff;
  --text-muted: #69727d;
  --text-muted-inverse: rgba(255, 255, 255, 0.65);
  --text-faint: #a6a6a6;
  --text-faint-inverse: rgba(255, 255, 255, 0.45);

  /* no brand accent — kept only as a functional error tone */
  --accent: #000000;
  --accent-contrast: #ffffff;
  --error: #c0392b;

  /* radius */
  --r-sm: 8px;
  --r-md: 16px;
  --r-pill: 9999px;

  /* spacing (8px base) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-14: 112px;

  /* layout */
  --max-w: 1440px;

  /* type */
  --font-mono: 'Inter', ui-sans-serif, system-ui, sans-serif; /* kept for back-compat with .mono usage; no monospace in Press Room */
  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 6vw, 5.75rem);
  --fs-h1: clamp(2rem, 3.4vw, 2.75rem);
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-caption: 0.75rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

p { margin: 0; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow--accent { color: var(--text); }

.section {
  padding: var(--sp-14) 0;
  background: var(--bg);
  color: var(--text);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
}
.section--dark .text-muted { color: var(--text-muted-inverse); }
.section--dark .text-faint { color: var(--text-faint-inverse); }
.section--dark .eyebrow { color: var(--text-faint-inverse); }
.section--dark .text-accent { color: var(--text-inverse); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-inverse); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--text); font-weight: 700; }

.mono { font-family: var(--font-body); }
.display { font-family: var(--font-display); font-weight: 800; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 720px) {
  .container { padding: 0 var(--sp-2); }
  .section { padding: var(--sp-8) 0; }
}