/* ==========================================================================
   Merke — typografi

   Versaler används på display-rubriker, etiketter, nav, knappar, marquee och
   credits — INTE på hela body som referensen gör. Versal brödtext sänker
   läshastigheten och gör svenska sammansättningar ("produktionsbolag") till
   klumpar, och referensens kombination versaler + letter-spacing:-.03em är
   dessutom typografiskt fel: versaler behöver positiv spärr.
   ========================================================================== */

.mk-display {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-display);
  line-height: var(--mk-lh-display);
  letter-spacing: var(--mk-ls-display);
  text-transform: uppercase;
}

/* Klasserna är SJÄLVBÄRANDE: de sätter familj, vikt och tracking själva.
   Tidigare kom det bara från elementregeln h1–h6 i 02-base, vilket gjorde
   att ett <p class="mk-h2"> — som footerns och /om:s CTA — renderades i
   Inter 400 i stället för Archivo 700. Rubriken såg tunn och smal ut bredvid
   de riktiga rubrikerna. editable_text() renderar ofta <p>, så klasserna
   får aldrig förlita sig på taggen. */
.mk-h1, .mk-h2, .mk-h3, .mk-h4 {
  font-family: var(--mk-font-display);
  font-weight: 700;
  letter-spacing: var(--mk-ls-head);
  overflow-wrap: break-word;
  hyphens: none;
  text-wrap: balance;
}
.mk-h1 { font-size: var(--mk-fs-h1); line-height: var(--mk-lh-tight); text-transform: uppercase; }
.mk-h2 { font-size: var(--mk-fs-h2); line-height: var(--mk-lh-tight); text-transform: uppercase; }
.mk-h3 { font-size: var(--mk-fs-h3); line-height: var(--mk-lh-head); text-transform: uppercase; }
.mk-h4 { font-size: var(--mk-fs-h4); line-height: var(--mk-lh-head); }

/* Samma sak för display-klassen — hero-ordmärket kan också komma som <p>
   ur CMS:et beroende på hur editable_text() anropas. */
.mk-display { font-family: var(--mk-font-display); font-weight: 700; hyphens: none; }

.mk-lead {
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-lead);
  line-height: 1.45;
  letter-spacing: var(--mk-ls-body);
  font-weight: 400;
  color: var(--mk-fg);
  max-width: 34ch;
}

.mk-body { font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); }
.mk-body--mute { color: var(--mk-fg-mute); }
.mk-measure { max-width: 62ch; }

/* Mono-etiketter: eyebrows, årtal, roller, credits, formulärlabels.
   Den typografiska idén är sentence case i brödtext + versal mono i etiketter
   — hierarkin blir läsbar och etiketterna får faktiskt betydelse. */
.mk-mono {
  font-family: var(--mk-font-mono);
  font-size: var(--mk-fs-mono);
  letter-spacing: var(--mk-ls-label);
  text-transform: uppercase;
  font-weight: 400;
}
.mk-label {
  font-family: var(--mk-font-mono);
  font-size: var(--mk-fs-label);
  letter-spacing: var(--mk-ls-label);
  text-transform: uppercase;
  color: var(--mk-fg-mute);
}
.mk-caps { text-transform: uppercase; letter-spacing: .04em; }

.mk-accent { color: var(--mk-accent); }
.mk-mute   { color: var(--mk-fg-mute); }

/* Sektionshuvud: eyebrow + rubrik + valfri ingress. */
.mk-sechead { display: grid; gap: var(--mk-s-5); margin-bottom: var(--mk-s-9); justify-items: start; }
.mk-sechead__eyebrow { display: flex; align-items: center; gap: var(--mk-s-3); color: var(--mk-fg-mute); }
.mk-sechead__eyebrow::before {
  content: ''; width: .5rem; height: .5rem; flex: none;
  background: var(--mk-accent);
}
.mk-sechead__lead { color: var(--mk-fg-mute); max-width: 52ch; }