/* ============================================================
   ExperiOps Design System — Base & Layout
   ============================================================
   Reset + layout primitives. Imports tokens.
   Drop into `static/css/base.css`.
   ============================================================ */

/* tokens.css linked before this file in base.html */

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

html, body {
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ── Headings ───────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

h1 { font-size: var(--t-h1); letter-spacing: -0.045em; line-height: 0.88; }
h2 { font-size: var(--t-h2); letter-spacing: -0.03em; line-height: 1; }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.05; }
h4 { font-size: var(--t-h4); letter-spacing: -0.015em; line-height: 1.1; }

.accent-italic {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--green-deep);
  letter-spacing: -0.04em;
}
.accent-bright {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--green-bright);
  letter-spacing: -0.04em;
}

/* ── Mono labels (Swiss precision) ──────────────────────── */
.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mono-sm {
  font-family: var(--f-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Layout primitives ──────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.section {
  padding: calc(var(--s-6) * var(--unit)) 0;
}

/* ── Rules ──────────────────────────────────────────────── */
.rule       { border-bottom: var(--rule-mid)   solid var(--rule); }
.rule-thin  { border-bottom: var(--rule-thin)  solid var(--rule); }
.rule-thick { border-bottom: var(--rule-thick) solid var(--rule); }

/* ── Section meta header ────────────────────────────────── */
/* Use across ANY page: §xx / Label · spacer line */

/* ── Section title row (giant headline aligned to grid) ──── */
.sec-title-row { margin-bottom: calc(var(--s-7) * var(--unit)); }
.sec-title {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  grid-column: 1 / 11;
}

/* ── Responsive collapse ────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --pad-x: 24px; }
}