@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --papir: #efede6;
  --flade: #e6e3da;
  --blaek: #16211d;
  --daempet: #4a5852;
  --linje: #cdc8bb;
  --oxid: #b04a28;
  --fokus: #b04a28;
  --ramme: 72rem;
  --kant: clamp(1rem, 4vw, 2.5rem);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papir: #121a17;
    --flade: #18221e;
    --blaek: #e9e6dd;
    --daempet: #a3ada7;
    --linje: #2c3833;
    --oxid: #e07650;
    --fokus: #e07650;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papir);
  color: var(--blaek);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
::selection { background: var(--blaek); color: var(--papir); }
a { color: inherit; text-decoration-color: var(--oxid); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }

.ramme { max-width: var(--ramme); margin-inline: auto; padding-inline: var(--kant); }
.spring { position: absolute; left: var(--kant); top: -4rem; background: var(--blaek); color: var(--papir); padding: 0.5rem 0.875rem; z-index: 2; }
.spring:focus { top: 0.75rem; }

/* Top */
.top { border-bottom: 1px solid var(--linje); }
.top-ramme { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; }
.logo { display: inline-flex; color: var(--blaek); padding-block: 0.5rem; }
.logo-svg { width: 3.75rem; height: auto; display: block; }
.skraa { fill: var(--oxid); }
.menu { display: flex; gap: clamp(1rem, 3vw, 2rem); font-size: 0.9375rem; font-weight: 500; }
.menu a { text-decoration: none; padding-block: 0.5rem; border-bottom: 1px solid transparent; }
.menu a:hover { border-bottom-color: var(--blaek); }
.menu a[aria-current="page"] { border-bottom-color: var(--oxid); }

/* Forside: helt */
.helt { border-bottom: 1px solid var(--linje); }
.helt-gitter { display: grid; gap: clamp(2rem, 6vw, 4rem); padding-block: clamp(3rem, 10vw, 7.5rem) clamp(3rem, 8vw, 6rem); }
.stort-maerke { display: block; width: min(100%, 34rem); height: auto; color: var(--blaek); }
.helt-tekst { max-width: 34rem; }
h1, h2 { font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.2; }
.indledning { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.5; color: var(--blaek); margin: 1.25rem 0 0; text-wrap: pretty; }
.status { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 2.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linje); font-size: 0.9375rem; }
.status div { display: grid; gap: 0.125rem; }
.status dt { color: var(--daempet); font-size: 0.8125rem; }
.status dd { margin: 0; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; }
.prik { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--oxid); }

@media (min-width: 60rem) {
  .helt-gitter { grid-template-columns: 1.15fr 1fr; align-items: end; }
}

/* Afsnit med overskrift i venstre spalte */
.afsnit { border-bottom: 1px solid var(--linje); }
.afsnit .to-spalter { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.to-spalter { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) {
  .to-spalter { grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 3rem; }
}

.indeks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--blaek); }
.indeks li { border-bottom: 1px solid var(--linje); }
.indeks a { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1.5rem; align-items: center; padding: 1.125rem 0.25rem; text-decoration: none; transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), padding 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.indeks .navn { font-weight: 600; font-size: 1.125rem; }
.indeks .tekst { color: var(--daempet); grid-column: 1; }
.indeks .pil { grid-column: 2; grid-row: 1 / span 2; width: 1.375rem; height: 1.375rem; color: var(--oxid); transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.indeks a:hover { background: var(--flade); padding-inline: 0.75rem; }
.indeks a:hover .pil { transform: translateX(3px); }
@media (min-width: 40rem) {
  .indeks a { grid-template-columns: 10rem 1fr auto; }
  .indeks .tekst { grid-column: 2; }
  .indeks .pil { grid-column: 3; grid-row: 1; }
}

.broed { max-width: 40rem; }
.broed p { margin: 0 0 1rem; text-wrap: pretty; }
.broed p:last-child { margin-bottom: 0; }
.broed h2 { margin: 2.5rem 0 0.75rem; }
.broed .indledning { margin: 0 0 1.5rem; }

/* Tekstsider */
.tekstside .to-spalter { padding-block: clamp(2.5rem, 8vw, 5.5rem); }
.tekstside h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }

.knap { display: inline-flex; align-items: center; gap: 0.625rem; background: var(--blaek); color: var(--papir); text-decoration: none; font-weight: 600; padding: 0.75rem 1.125rem; border-radius: 2px; }
.knap .pil { width: 1.125rem; height: 1.125rem; }
.knap:hover { background: var(--oxid); }

/* Bund */
.bund { border-top: 1px solid var(--blaek); }
.bund-ramme { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; font-size: 0.9375rem; }
.bund p { margin: 0; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .indeks a, .indeks .pil { transition: none; }
}