/* ─────────────────────────────────────────────────────────────────
   kortkoll — bas: reset, typografi, sektionsgrammatik
   ───────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--brod);
  background: var(--ground);
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ─── Layout ─────────────────────────────────────────────────── */

.omslag { max-width: var(--max-bredd); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.sektion { padding-block: var(--sektion-y); }

/* ─── Typroller ──────────────────────────────────────────────── */

/* mono-metadata: alltid gemener, alltid liten, alltid dämpad */
.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ink-2);
}
.meta .snedstreck { color: var(--accent); font-weight: 700; margin-right: 6px; }

/* display-rubriker: Goblin TM — aldrig på setkoder/nummer/priser */
.rubrik {
  font-family: var(--display);
  font-weight: 400;              /* Goblin TM har en vikt */
  line-height: 1.02;
  letter-spacing: 0;
}
.rubrik-xl { font-size: clamp(44px, 8vw, 92px); }
.rubrik-l  { font-size: clamp(30px, 5vw, 56px); }
.rubrik-m  { font-size: clamp(22px, 3vw, 32px); }
.rubrik .punkt { color: var(--accent); }

/* stora tal: mono, tabellsiffror — Goblin skriver inte siffror åt oss */
.tal {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.tal-xl { font-size: clamp(56px, 10vw, 110px); }
.tal-l  { font-size: clamp(28px, 4vw, 44px); }

.inledning {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-2);
  max-width: 56ch;
}

/* ─── Sektionsgrammatik: nummer + // etikett + rubrik ────────── */

.sektionshuvud { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 4vw, 44px); align-items: start; margin-bottom: clamp(28px, 5vw, 56px); }
.sektionsnr {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  color: var(--ink-4);
  letter-spacing: -0.06em;
}
.sektionshuvud .meta { margin-bottom: 10px; }
.sektionshuvud .inledning { margin-top: 14px; }

/* ─── Hjälpklasser ───────────────────────────────────────────── */

.dampat   { color: var(--ink-3); }
.upp      { color: var(--ok); }
.ner      { color: var(--warn); }
.centrera { text-align: center; }
.gomd     { display: none !important; }