/* =========================================================
   Generation – stylesheet
   Farver, skrifter og afstande står øverst som variabler.
   Ret dem her, så ændres de overalt på siden.
   ========================================================= */

:root {
  /* Farver */
  --papir: #ffffff;
  --papir-2: #f4f2ee;        /* tomme billedrammer, bokse */
  --blaek: #111111;          /* tekst og streger */
  --blaek-2: #595959;        /* sekundær tekst (7:1 på hvid) */
  --linje: #e2e0dc;          /* tynde skillelinjer */
  --accent: #c8231b;         /* links og fokus */

  /* Kategorifarver (sort tekst står på dem) */
  --pink: #ffb3d9;
  --gul: #ffe45c;
  --blaa: #a6d8ff;
  --groen: #a8ecb8;
  --orange: #ffb08a;
  --sort: #111111;
  --babypink: #ffc9e2;      /* prikken i logoet og nyhedsbrevsboksen */

  /* Skrifter */
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Gitter og afstande */
  --max: 1320px;
  --margen: 48px;
  --spalte-mellemrum: 32px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papir); color: var(--blaek); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.ramme { max-width: var(--max); margin: 0 auto; padding: 0 var(--margen); }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spring-over { position: absolute; left: var(--s4); top: -100px; z-index: 10; padding: var(--s2) var(--s4); background: var(--blaek); color: var(--papir); font-weight: 700; }
.spring-over:focus { top: var(--s4); }

/* Kategorifarver */
.farve-pink { --k: var(--pink); }
.farve-gul { --k: var(--gul); }
.farve-blaa { --k: var(--blaa); }
.farve-groen { --k: var(--groen); }
.farve-orange { --k: var(--orange); }
.farve-sort { --k: var(--sort); --k-tekst: #fff; }

/* ---------- Toppen ---------- */
.top { border-bottom: 1px solid var(--blaek); background: var(--papir); }
.top-linje { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s6); padding-top: var(--s6); padding-bottom: var(--s4); }
.logo { grid-column: 1; justify-self: start; font-family: var(--sans); font-weight: 900; font-size: clamp(44px, 7vw, 92px); line-height: .9; letter-spacing: -.055em; text-decoration: none; white-space: nowrap; }
.logo-prik { display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: 50%; background: var(--babypink); border: max(1.5px, .025em) solid var(--blaek); vertical-align: baseline; }
.top-hojre { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: var(--s6); margin-bottom: 4px; }
.top-om { font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 2px solid transparent; }
.top-knap { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--blaek); color: var(--papir); font-weight: 700; font-size: 14px; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.top-knap:hover { background: var(--babypink); color: var(--blaek); }
.top-knap .kort-tekst { display: none; }
.top-om:hover, .top-om[aria-current] { border-bottom-color: var(--blaek); }

.nav { padding-bottom: var(--s4); }
.nav ul { display: flex; gap: var(--s2); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.nav ul::-webkit-scrollbar { display: none; }
.nav-link { display: inline-block; white-space: nowrap; padding: 6px 14px; border: 1.5px solid var(--blaek); border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color .15s; }
.nav-link:hover, .nav-link[aria-current] { background: var(--k); color: var(--k-tekst, var(--blaek)); }

/* ---------- Mærker og prikker ---------- */
.maerke { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--k); color: var(--k-tekst, var(--blaek)); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; text-decoration: none; }
a.maerke:hover { outline: 1.5px solid var(--blaek); }
.prik { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--k); border: 1.5px solid var(--blaek); margin-right: var(--s3); vertical-align: 1px; }
.prik.stor { width: 28px; height: 28px; margin: 0; }

/* ---------- Kort ---------- */
.kort { display: flex; flex-direction: column; min-width: 0; }
.kort-link { display: block; overflow: hidden; }
.kort-billede { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papir-2); transition: transform .4s ease; }
.kort-billede.tomt { display: block; }
.kort:hover .kort-billede { transform: scale(1.025); }
.kort-meta { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); font-size: 13px; color: var(--blaek-2); }
.kort-titel { margin: var(--s3) 0 0; font-family: var(--sans); font-weight: 800; font-size: 25px; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.kort-titel a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s; }
.kort:hover .kort-titel a, .kort-titel a:focus-visible { background-size: 100% 1.5px; }
.kort-underrubrik { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.5; color: var(--blaek-2); }
.kort-forfatter { margin: var(--s2) 0 0; font-size: 13px; font-weight: 600; }

.kort-stor .kort-billede { aspect-ratio: 3 / 2; }
.kort-stor .kort-titel { font-weight: 900; font-size: clamp(34px, 4.4vw, 60px); line-height: .98; letter-spacing: -.045em; }
.kort-stor .kort-underrubrik { font-size: 19px; line-height: 1.5; color: var(--blaek); max-width: 34em; }

/* ---------- Gitter ---------- */
.gitter { display: grid; gap: var(--s12) var(--spalte-mellemrum); }
.gitter-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hoved-sektion { padding-top: var(--s8); }
.hoved-gitter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--spalte-mellemrum); }
.hoved-side { display: grid; gap: var(--s8); align-content: start; border-left: 1px solid var(--linje); padding-left: var(--spalte-mellemrum); }

.sektion { padding-top: var(--s16); }
.sektion-hoved { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s6); padding-top: var(--s4); border-top: 3px solid var(--blaek); }
.sektion-titel { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.se-alle { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.se-alle:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Nyhedsbrev ---------- */
.nyhedsbrev-sektion { padding-top: var(--s16); scroll-margin-top: var(--s8); }
.nyhedsbrev { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s8) var(--s12); align-items: center; padding: var(--s12); background: var(--babypink); border: 1.5px solid var(--blaek); }
.nyhedsbrev-titel { margin: 0; font-family: var(--sans); font-weight: 900; font-size: clamp(36px, 5vw, 64px); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.nyhedsbrev-titel .logo-prik { background: var(--papir); }
.nyhedsbrev-tekst p { margin: var(--s4) 0 0; font-size: 18px; max-width: 30em; }
.nyhedsbrev-form { min-width: 0; }
.nyhedsbrev-felt { display: flex; gap: var(--s2); }
.nyhedsbrev-felt input { flex: 1; min-width: 0; padding: 14px 18px; border: 1.5px solid var(--blaek); border-radius: 999px; background: var(--papir); color: var(--blaek); font: inherit; font-size: 16px; }
.nyhedsbrev-felt button { padding: 14px 26px; border: 1.5px solid var(--blaek); border-radius: 999px; background: var(--blaek); color: var(--papir); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.nyhedsbrev-felt button:hover { background: var(--papir); color: var(--blaek); }
.nyhedsbrev-felt button:disabled { opacity: .6; cursor: wait; }
.nyhedsbrev-lille { margin: var(--s3) 0 0; font-size: 13px; line-height: 1.5; }
.nyhedsbrev-status { margin: var(--s2) 0 0; font-weight: 700; min-height: 1.5em; }
.nyhedsbrev-form.sendt .nyhedsbrev-felt { opacity: .5; }

/* ---------- Listesider ---------- */
.liste-side { padding-top: var(--s12); }
.liste-hoved { display: flex; align-items: center; gap: var(--s4); padding-bottom: var(--s8); margin-bottom: var(--s8); border-bottom: 3px solid var(--blaek); }
.liste-titel { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 8vw, 112px); line-height: .95; letter-spacing: -.03em; }
.sidenav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s16); padding-top: var(--s4); border-top: 1px solid var(--linje); font-weight: 600; font-size: 15px; }
.sidenav a { text-decoration: none; }
.sidenav a:hover { text-decoration: underline; }
.tom-besked { padding: var(--s16) 0; color: var(--blaek-2); }

/* ---------- Artikel ---------- */
.artikel-hoved { max-width: 1040px; padding-top: var(--s16); padding-bottom: var(--s12); }
.artikel-meta { margin-bottom: var(--s6); }
.artikel-titel { margin: 0; font-family: var(--sans); font-weight: 900; font-size: clamp(40px, 6.4vw, 88px); line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.artikel-underrubrik { margin: var(--s6) 0 0; max-width: 36em; font-family: var(--sans); font-weight: 400; font-size: clamp(19px, 2vw, 23px); line-height: 1.45; color: var(--blaek); text-wrap: pretty; }
.byline { margin: var(--s8) 0 0; font-size: 14px; font-weight: 700; }
.byline-meta { font-weight: 400; color: var(--blaek-2); }

.artikel-billede { margin: 0; }
.artikel-billede img { width: 100%; max-height: 82vh; object-fit: cover; background: var(--papir-2); }
.artikel-billede figcaption, .artikel-tekst figcaption { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--linje); font-size: 13px; line-height: 1.5; }
.kredit { margin-left: var(--s2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blaek-2); white-space: nowrap; }

.artikel-tekst { max-width: 680px; margin: var(--s12) auto 0; font-size: 19px; line-height: 1.65; hyphens: auto; -webkit-hyphens: auto; }
.artikel-tekst p { margin: 0 0 1.1em; }
.artikel-tekst > p:first-of-type { display: flow-root; min-height: calc(3 * 1.65em); } /* initialet må ikke stikke ned i næste afsnit */
.artikel-tekst > p:first-of-type::first-letter { float: left; margin: 8px var(--s3) 0 -2px; font-family: var(--sans); font-weight: 900; letter-spacing: -.04em; font-size: 100px; line-height: 80px; }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .artikel-tekst > p:first-of-type::first-letter { float: none; margin: 0 var(--s3) 0 0; font-size: inherit; line-height: inherit; -webkit-initial-letter: 3; initial-letter: 3; }
}
.artikel-tekst h2, .artikel-tekst h3 { margin: 1.8em 0 .5em; font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.artikel-tekst h2 { font-size: 32px; }
.artikel-tekst h3 { font-size: 24px; }
.artikel-tekst a { text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.artikel-tekst a:hover { color: var(--accent); }
.artikel-tekst ul, .artikel-tekst ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.artikel-tekst li { margin-bottom: .4em; }
.artikel-tekst img { width: 100%; height: auto; margin: var(--s8) 0 0; }
.artikel-tekst figure { margin: var(--s8) 0; }
.artikel-tekst figure img { margin: 0; }
.artikel-tekst hr { border: 0; text-align: center; margin: var(--s12) 0; }
.artikel-tekst hr::after { content: "* * *"; letter-spacing: .6em; color: var(--blaek-2); }

/* Citater i brødteksten bliver til pull quotes */
.artikel-tekst blockquote { margin: var(--s12) -80px; padding: var(--s6) 0; border-top: 3px solid var(--blaek); border-bottom: 1px solid var(--blaek); text-align: center; }
.artikel-tekst blockquote::before { content: "\00BB"; display: block; margin-bottom: var(--s2); font: 700 72px/1 var(--serif); color: var(--accent); }
.artikel-tekst blockquote p { margin: 0 auto; max-width: 22em; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.25; text-wrap: balance; hyphens: manual; }
.artikel-tekst blockquote p + p { margin-top: var(--s4); font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blaek-2); }

.relaterede { padding-top: var(--s24); }
.om-side { padding-top: var(--s16); max-width: 1040px; }
.om-side .artikel-tekst { margin-left: 0; }

/* ---------- Bunden ---------- */
.fod { margin-top: var(--s24); background: var(--blaek); color: var(--papir); padding: var(--s16) 0 var(--s8); }
.fod a { text-decoration: none; }
.fod a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fod :focus-visible { outline-color: var(--gul); }
.fod-logo { margin: 0; font-family: var(--sans); font-weight: 900; font-size: clamp(48px, 8vw, 104px); line-height: .9; letter-spacing: -.055em; }
.fod-logo .logo-prik { border-color: var(--papir); }
.fod-kolonner { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s16); margin-top: var(--s12); }
.fod-titel { margin: 0 0 var(--s2); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #b5b5b5; }
.fod-liste { margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; line-height: 2; }
.fod-bund { margin: var(--s12) 0 0; padding-top: var(--s4); border-top: 1px solid #3a3a3a; font-size: 13px; color: #b5b5b5; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .gitter-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoved-gitter { grid-template-columns: 1fr; }
  .hoved-side { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; padding-left: 0; gap: var(--spalte-mellemrum); }
  .nyhedsbrev { grid-template-columns: 1fr; }
  .artikel-tekst blockquote { margin-left: 0; margin-right: 0; }
}

/* ---------- Mobil ---------- */
@media (max-width: 680px) {
  :root { --margen: 16px; --spalte-mellemrum: 16px; }
  body { font-size: 16px; }
  .top-linje { padding-top: var(--s4); padding-bottom: var(--s3); }
  .top-linje { align-items: center; }
  .logo { font-size: clamp(34px, 10.5vw, 44px); }
  .top-hojre { grid-column: 2; gap: var(--s4); margin-bottom: 0; }
  .top-om { display: none; }
  .top-knap { padding: 7px 12px; font-size: 13px; }
  .top-knap .lang { display: none; }
  .top-knap .kort-tekst { display: inline; }
  .nyhedsbrev { padding: var(--s8) var(--s6); }
  .nyhedsbrev-felt { flex-direction: column; }
  .nav { padding-bottom: var(--s3); }
  .nav ul { margin-right: calc(var(--margen) * -1); padding-right: var(--margen); }
  .gitter-3, .hoved-side { grid-template-columns: 1fr; }
  .gitter { gap: var(--s12); }
  .kort-titel { font-size: 23px; }
  .sektion { padding-top: var(--s12); }
  .artikel-hoved { padding-top: var(--s8); padding-bottom: var(--s8); }
  .artikel-tekst { font-size: 18px; margin-top: var(--s8); }
  .artikel-tekst blockquote p { font-size: 26px; }
  .fod-kolonner { gap: var(--s8); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}