/* Fugleramme, nettsida. Samme uttrykk som veggen: hvitt papir, svart blekk,
   panelets seks farger, EB Garamond. Ingen bibliotek, ingen JavaScript. */

@font-face {
  font-family: "EB Garamond";
  src: url("fonter/eb-garamond.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonter/eb-garamond-kursiv.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Varm nesten-svart fra de moerkeste tonene i plansjene, og et papir med et
     hint varme (25. sep 2026, etter at helsvart ble for hardt). */
  --blekk: #2b2824;
  --papir: #fbfaf7;
  --lenke: #2b5a8c;      /* lenker i tekst: en dempet blaa, den vanlige konvensjonen */
  --groenn: #0b7a3b;
  --blaa: #1c4fa1;
  --gul: #d9a400;
  --hjoerne: 12px;
  --marg: clamp(16px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { background: var(--papir); color: var(--blekk); }
body {
  margin: 0;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; font-weight: 600; line-height: 1.02; margin: 0; }
/* Sideoverskriftene tonet ned 25. sep 2026; foer gikk de til 76 px. */
h1 { font-size: clamp(32px, 3.8vw, 52px); letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; }
p { margin: 0; }
/* Lenker har samme farge som teksten rundt, og understrek paa hover. I
   loepende tekst og tabeller er understreken svak i ro og full paa hover, saa
   lenka kan skilles fra teksten uten farge. Frittstaaende lenker (meny,
   seksjonstopper, kort) faar streken bare paa hover. */
a { color: var(--lenke); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
/* Navigasjon, kort og knapper er lenker i kraft av plassen sin: blekk, uten
   strek i ro, strek paa hover. */
.nav a:hover, .sti a:hover, .doer:hover .tittel, .fuglekort:hover .navn, .oppstilling a:hover .navn, .dager .miniatyrer a:hover span { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--blaa); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
.tall { font-variant-numeric: tabular-nums; }

/* Skårne hjørner, som på en passepartout. Nettlesere uten corner-shape
   får vanlige runde hjørner. */
.skaaret { border-radius: var(--hjoerne); }
@supports (corner-shape: bevel) {
  .skaaret { corner-shape: bevel; }
}

.hopp {
  position: absolute; left: -999px; top: 8px; background: var(--blekk); color: var(--papir);
  padding: 8px 14px; z-index: 10;
}
.hopp:focus { left: 8px; }

.side { max-width: 1440px; margin: 0 auto; }

/* Topp: ordmerke, navigasjon, dobbel strek som på veggen. */
.topp {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 28px var(--marg) 16px;
  border-bottom: 5px solid var(--blekk);
}
/* Den tynne streken under den tykke. Var en box-shadow med negativ spredning,
   som ble fem piksler kortere i hver ende og saa ut som et hakk. */
.topp::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; border-top: 2px solid var(--blekk); }
/* Driftsmeldingen under toppen, i panelets roede. Settes i innhold_<spraak>.py. */
.drift {
  margin: 28px var(--marg) 0; padding: 14px 18px;
  border-left: 5px solid #c8102e; background: color-mix(in srgb, #c8102e 6%, var(--papir));
  max-width: 72ch;
}
.drift strong { color: #c8102e; font-weight: 600; }
.ordmerke { font-size: 30px; font-weight: 600; letter-spacing: 0.02em; color: var(--blekk); text-decoration: none; }
.nav { display: flex; gap: clamp(14px, 2.2vw, 32px); align-items: baseline; flex-wrap: wrap; }
.nav a {
  font-size: 17px; letter-spacing: 0.02em; color: var(--blekk);
  text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.nav a[aria-current="page"] { border-bottom-color: var(--blekk); }
/* Menyen paa smale skjermer. Nav-en er en popover (HTML, ingen JavaScript):
   bred skjerm viser den i toppen som foer, og knappen finnes ikke. Under
   knekkpunktet ligger den bak knappen. Knekkpunktet er der menyen ikke lenger
   faar plass paa én rad ved siden av ordmerket, maalt til rundt 1040 px paa
   begge spraak 24. sep 2026. Nettlesere uten popover viser nav-en som foer. */
.meny-knapp, .meny-lukk { display: none; }
.nav[popover] { position: static; inset: auto; margin: 0; border: 0; padding: 0; width: auto; height: auto; overflow: visible; color: inherit; background: transparent; }
@supports selector(:popover-open) {
  @media (max-width: 1060px) {
    .meny-knapp {
      display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
      font: inherit; font-size: 16px; letter-spacing: 0.02em; line-height: 1;
      color: var(--blekk); background: none; border: 2px solid var(--blekk); padding: 9px 14px 8px;
    }
    .meny-knapp .strek { width: 18px; height: 2px; background: var(--blekk); box-shadow: 0 -6px 0 var(--blekk), 0 6px 0 var(--blekk); }
    .nav[popover]:not(:popover-open) { display: none; }
    .nav:popover-open {
      display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
      position: fixed; top: 12px; right: 12px; left: auto; bottom: auto; margin: 0;
      min-width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
      padding: 60px 30px 30px; background: var(--papir); color: var(--blekk);
      border: 2px solid var(--blekk); box-shadow: 8px 8px 0 var(--blekk);
    }
    .nav:popover-open::backdrop { background: rgb(0 0 0 / 0.25); }
    .nav:popover-open a { font-size: 18px; }
    .nav:popover-open .spraak > * { font-size: 16px; }
    .nav:popover-open .spraak { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; padding-top: 18px; border-top: 1px solid var(--blekk); }
    .meny-lukk {
      display: block; position: absolute; top: 8px; right: 10px; cursor: pointer;
      font: inherit; font-size: 32px; line-height: 1; color: var(--blekk); background: none; border: 0; padding: 6px 10px;
    }
  }
}

/* Spraakvelgeren staar sist i navigasjonen, samme smaa kapiteler som lenkene. */
.spraak { display: flex; gap: 12px; font-size: 15px; letter-spacing: 0.02em; margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--blekk); }
.spraak a, .spraak span { color: var(--blekk); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.spraak [aria-current="true"] { border-bottom-color: var(--blekk); }

/* Seksjoner */
section, .seksjon { padding: 24px var(--marg) 44px; }
.seksjonstopp {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid var(--blekk); padding-bottom: 10px; margin-bottom: 28px;
}
/* Smaa overskrifter og etiketter i vanlig skrift, ikke versaler (25. sep 2026). */
.kicker { font-size: 18px; letter-spacing: 0.01em; font-weight: 500; }
.kicker.liten { font-size: 15px; }
.ingress { font-size: clamp(19px, 1.6vw, 22px); max-width: 62ch; }

.rad-2, .rad-3, .rad-4 { display: grid; gap: 40px 32px; }
.rad-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rad-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rad-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .rad-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rad-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rad-2, .rad-3, .rad-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Forsida */
.helt {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px 64px;
  align-items: end; padding: 48px var(--marg) 28px;
}
.helt .hoeyre { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .helt { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.knapper { display: flex; gap: 14px; flex-wrap: wrap; }
.knapp {
  display: inline-flex; align-items: center; height: 50px; padding: 0 24px;
  border: 2px solid var(--blekk); color: var(--blekk); text-decoration: none;
  font-size: 16px; letter-spacing: 0.02em; border-radius: 10px;
}
.knapp.fylt { background: var(--blekk); color: var(--papir); }
@supports (corner-shape: bevel) { .knapp { corner-shape: bevel; } }

/* Ramma på veggen */
.vegg { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px var(--marg) 48px; }
/* Pilene i dagvelgeren lenker hit, saa bildet ligger oeverst etter et klikk. */
.vegg { scroll-margin-top: 10px; }
/* Ramma skal faa plass paa skjermen i hele sin hoeyde. Ytre forhold er om lag
   0,77 (arket 3:4 pluss ramme og passepartout), saa 70vh i bredde gir rundt
   91 % av skjermhoeyden. Paa telefon i hoeydeformat vinner 100 % som foer. */
.ramme-ytre {
  width: min(100%, 960px, 70vh);
}
.ark {
  container-type: inline-size;
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: #fff; border: 1px solid #e4e4e4; border-radius: 2.2cqw;
  box-shadow: 0 24px 60px rgba(43, 40, 36, 0.14), 0 3px 8px rgba(43, 40, 36, 0.10);
}
@supports (corner-shape: bevel) { .ark { corner-shape: bevel; } }
.ark > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Alt inne på arket måles i prosent av arkets bredde (1200 = 100cqw), så
   det skalerer med ramma. Tallene er veggsidas egne pikselmål delt på 12. */
.spalte { position: absolute; left: 4cqw; top: 3.67cqw; width: 37.25cqw; display: flex; flex-direction: column; }
.spalte .kicker { font-size: 1.667cqw; letter-spacing: 0.42em; font-weight: 400; line-height: 1.1; }
.spalte .dag { font-size: 5.333cqw; font-weight: 600; line-height: 1; margin-top: 1.17cqw; }
.spalte .dato { font-size: 2.5cqw; line-height: 1.1; margin-top: 0.17cqw; }
.spalte .periode { font-size: 1.5cqw; letter-spacing: 0.05em; line-height: 1.1; margin-top: 0.58cqw; }
.spalte .strek { border-top: 0.33cqw solid var(--blekk); margin-top: 1.17cqw; }
.spalte .sted { font-size: 1.5cqw; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.1; margin-top: 1.42cqw; }
.spalte .vaer { font-size: 2cqw; line-height: 1.2; margin-top: 0.42cqw; }
.spalte .hoert {
  font-size: 1.417cqw; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; line-height: 1.1;
  margin-top: 3.58cqw; padding-bottom: 0.67cqw; border-bottom: 0.17cqw solid var(--blekk);
}
.spalte ol { list-style: none; margin: 0; padding: 0; }
.spalte .rad { display: flex; flex-direction: column; padding: 1.5cqw 0 0.83cqw; border-bottom: 1px solid var(--blekk); }
.spalte .rad .linje { display: flex; align-items: baseline; }
.spalte .rad .nr { width: 2.67cqw; font-size: 1.417cqw; }
.spalte .rad .navn { flex-grow: 1; font-size: 2.5cqw; line-height: 1.05; }
.spalte .rad .pst { font-size: 1.417cqw; }
.spalte .rad .detalj { margin-left: 2.67cqw; margin-top: 0.5cqw; font-size: 1.417cqw; line-height: 1.1; }
.spalte .ogsaa { font-size: 1.417cqw; line-height: 1.25; margin-top: 1.67cqw; }
.spalte .ogsaa span { font-size: 1.167cqw; letter-spacing: 0.16em; text-transform: uppercase; }
.spalte .strek2 { border-top: 0.17cqw solid var(--blekk); margin-top: 0.83cqw; }
.spalte .bunn { font-size: 1.25cqw; line-height: 1.5; margin-top: 1.17cqw; }
.merke {
  position: absolute; width: 2.67cqw; height: 2.67cqw; margin: -1.33cqw 0 0 -1.33cqw;
  border: 0.15cqw solid var(--blekk); border-radius: 50%; background: var(--papir);
  display: flex; align-items: center; justify-content: center; font-size: 1.5cqw;
  transition: background 0.15s, color 0.15s;
}
.omriss {
  position: absolute; border: 2px solid var(--blekk); border-radius: 14px; opacity: 0;
  transition: opacity 0.15s; pointer-events: auto;
}
@supports (corner-shape: bevel) { .omriss { corner-shape: bevel; } }
/* Lista peker på grenen: hold over en rad, og fuglen får et omriss. Og omvendt. */
.ark:has(.rad[data-nr="1"]:hover) .omriss[data-nr="1"], .ark:has(.omriss[data-nr="1"]:hover) .omriss[data-nr="1"],
.ark:has(.rad[data-nr="2"]:hover) .omriss[data-nr="2"], .ark:has(.omriss[data-nr="2"]:hover) .omriss[data-nr="2"],
.ark:has(.rad[data-nr="3"]:hover) .omriss[data-nr="3"], .ark:has(.omriss[data-nr="3"]:hover) .omriss[data-nr="3"],
.ark:has(.rad[data-nr="4"]:hover) .omriss[data-nr="4"], .ark:has(.omriss[data-nr="4"]:hover) .omriss[data-nr="4"],
.ark:has(.rad[data-nr="5"]:hover) .omriss[data-nr="5"], .ark:has(.omriss[data-nr="5"]:hover) .omriss[data-nr="5"],
.ark:has(.rad[data-nr="6"]:hover) .omriss[data-nr="6"], .ark:has(.omriss[data-nr="6"]:hover) .omriss[data-nr="6"],
.ark:has(.rad[data-nr="7"]:hover) .omriss[data-nr="7"], .ark:has(.omriss[data-nr="7"]:hover) .omriss[data-nr="7"],
.ark:has(.rad[data-nr="8"]:hover) .omriss[data-nr="8"], .ark:has(.omriss[data-nr="8"]:hover) .omriss[data-nr="8"],
.ark:has(.rad[data-nr="9"]:hover) .omriss[data-nr="9"], .ark:has(.omriss[data-nr="9"]:hover) .omriss[data-nr="9"] { opacity: 1; }
.ark:has(.rad[data-nr="1"]:hover) .merke[data-nr="1"], .ark:has(.omriss[data-nr="1"]:hover) .merke[data-nr="1"],
.ark:has(.rad[data-nr="2"]:hover) .merke[data-nr="2"], .ark:has(.omriss[data-nr="2"]:hover) .merke[data-nr="2"],
.ark:has(.rad[data-nr="3"]:hover) .merke[data-nr="3"], .ark:has(.omriss[data-nr="3"]:hover) .merke[data-nr="3"],
.ark:has(.rad[data-nr="4"]:hover) .merke[data-nr="4"], .ark:has(.omriss[data-nr="4"]:hover) .merke[data-nr="4"],
.ark:has(.rad[data-nr="5"]:hover) .merke[data-nr="5"], .ark:has(.omriss[data-nr="5"]:hover) .merke[data-nr="5"],
.ark:has(.rad[data-nr="6"]:hover) .merke[data-nr="6"], .ark:has(.omriss[data-nr="6"]:hover) .merke[data-nr="6"],
.ark:has(.rad[data-nr="7"]:hover) .merke[data-nr="7"], .ark:has(.omriss[data-nr="7"]:hover) .merke[data-nr="7"],
.ark:has(.rad[data-nr="8"]:hover) .merke[data-nr="8"], .ark:has(.omriss[data-nr="8"]:hover) .merke[data-nr="8"],
.ark:has(.rad[data-nr="9"]:hover) .merke[data-nr="9"], .ark:has(.omriss[data-nr="9"]:hover) .merke[data-nr="9"] {
  background: var(--blekk); color: var(--papir);
}
.ark:has(.omriss[data-nr="1"]:hover) .rad[data-nr="1"] .navn, .ark:has(.omriss[data-nr="2"]:hover) .rad[data-nr="2"] .navn,
.ark:has(.omriss[data-nr="3"]:hover) .rad[data-nr="3"] .navn, .ark:has(.omriss[data-nr="4"]:hover) .rad[data-nr="4"] .navn,
.ark:has(.omriss[data-nr="5"]:hover) .rad[data-nr="5"] .navn, .ark:has(.omriss[data-nr="6"]:hover) .rad[data-nr="6"] .navn,
.ark:has(.omriss[data-nr="7"]:hover) .rad[data-nr="7"] .navn, .ark:has(.omriss[data-nr="8"]:hover) .rad[data-nr="8"] .navn,
.ark:has(.omriss[data-nr="9"]:hover) .rad[data-nr="9"] .navn { text-decoration: underline; text-underline-offset: 0.12em; }

.vegg .tekst { text-align: center; max-width: 60ch; }
.vegg .tekst .kicker { font-size: 16px; letter-spacing: 0.16em; font-weight: 400; }
/* Stripa med siste dager. Bred skjerm: pilene og sju miniatyrer paa én rad.
   Under 700 px maatte miniatyrene rulle sidelengs; der blir det ei
   paginering i stedet: forrige dag og neste dag som knapper, og dagen som
   vises med en vei til den nyeste. En pil uten dag aa gaa til er synlig,
   men ikke trykkbar. */
.dager { display: flex; align-items: center; gap: 14px; max-width: 100%; padding: 6px; }
.dager .miniatyrer { display: flex; gap: 14px; }
.dager .miniatyrer a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--blekk); text-decoration: none; padding: 4px; border-radius: 10px; }
.dager .miniatyrer img { width: 84px; height: 112px; object-fit: cover; object-position: top; display: block; border: 1px solid #d9d9d9; }
.dager .miniatyrer span { font-size: 14px; letter-spacing: 0.08em; }
.dager .miniatyrer a[aria-current="page"] { outline: 2px solid var(--blekk); outline-offset: 2px; }
.dager .pil {
  width: 44px; height: 44px; border: 2px solid var(--blekk); border-radius: 10px; color: var(--blekk); text-decoration: none;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.dager .pil .tegn { display: block; width: 10px; height: 18px; }
.dager .pil.av { opacity: 0.3; }
.dager .ord { display: none; }
@supports (corner-shape: bevel) { .dager .miniatyrer a, .dager .pil { corner-shape: bevel; } }
@media (max-width: 700px) {
  .dager { justify-content: space-between; width: 100%; box-sizing: border-box; padding: 6px 0; gap: 10px; }
  .dager .miniatyrer { display: none; }
  .dager .ord { display: inline; }
  .dager .pil { width: auto; height: auto; gap: 6px; padding: 8px 10px 7px; font-size: 14px; letter-spacing: 0.02em; line-height: 18px; white-space: nowrap; }
}

/* Doegnet paa dagsiden: opptakene gjennom doegnet, og hvem som var i dem.
   Stripen er SVG fra bygg.py; her er bare fargen paa merkene og listen under. */
.doegnet .doegnstripe { margin-bottom: 20px; }
.doegnet .opptaksmerke { fill: currentColor; }
.doegnet .opptaksmerke.tom { fill-opacity: 0.22; }
.opptaksliste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 52px; }
.opptaksliste li {
  display: flex; gap: 14px; break-inside: avoid; padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--blekk) 16%, transparent);
}
.opptaksliste .kl { flex: none; width: 4.4em; letter-spacing: 0.04em; }
.opptaksliste .arter { flex: 1; line-height: 1.35; }
.opptaksliste .pst { font-size: 0.85em; color: color-mix(in srgb, var(--blekk) 58%, var(--papir)); }
.doegnet .under { margin-top: 20px; max-width: 64ch; font-size: 17px; }
@media (max-width: 700px) {
  .opptaksliste { columns: 1; }
  /* Stripen skalerer med bredden, saa paa en mobil blir timetallene fire piksler
     og merkene en haarstrek. Begge er i viewBox-enheter: her blir de stoerre,
     mens aksen er like lang. */
  .doegnet svg text { font-size: 30px; }
  .doegnet .opptaksmerke { width: 9px; }
}

/* Delene */
.del { display: flex; flex-direction: column; gap: 10px; }
.del .under { font-size: 26px; font-weight: 500; line-height: 1.1; }
.etiketter { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.etikett {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 1.5px solid var(--blekk);
  border-radius: 8px; font-size: 14px; letter-spacing: 0.08em; white-space: nowrap;
}
@supports (corner-shape: bevel) { .etikett { corner-shape: bevel; } }

/* Kort med dobbel strek */
.kort {
  border: 3px double var(--blekk); padding: 10px; background: var(--papir);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fuglekort { display: flex; flex-direction: column; gap: 8px; color: var(--blekk); text-decoration: none; }
.fuglekort .kort { height: 210px; }
.fuglekort .kort img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.fuglekort .navnlinje { display: flex; justify-content: space-between; align-items: baseline; }
.fuglekort .navn { font-size: 26px; font-weight: 500; }
.fuglekort .cm { font-size: 16px; }
.fuglekort .latin { font-size: 17px; font-style: italic; margin-top: -6px; }
.foto { display: flex; flex-direction: column; gap: 8px; }
.foto .kort { height: 460px; padding: 8px; }
.foto .kort img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { font-size: 16px; letter-spacing: 0.04em; }
.gren { display: flex; flex-direction: column; gap: 8px; }
.gren .kort { padding: 8px; }
.gren .kort img { width: 100%; display: block; }
.gren .navn { font-size: 24px; font-weight: 500; }
.gren .mnd { font-size: 16px; letter-spacing: 0.02em; }
.doer {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; border: 3px double var(--blekk);
  color: var(--blekk); text-decoration: none; background: var(--papir);
}
.doer .tittel { font-size: 28px; font-weight: 500; line-height: 1.05; }
.doer .les { font-size: 16px; letter-spacing: 0.02em; margin-top: auto; padding-top: 8px; color: var(--lenke); }

/* Fuglene */
.habitat { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--blekk); padding-bottom: 8px; margin-bottom: 20px; }
.habitat .farge { width: 18px; height: 18px; border-radius: 5px; display: inline-block; }
@supports (corner-shape: bevel) { .habitat .farge { corner-shape: bevel; } }
.oppstilling { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px 34px; padding: 10px 0 14px; }
.oppstilling a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--blekk); }
.oppstilling img { width: auto; display: block; }
.oppstilling .navn { font-size: 22px; font-weight: 500; white-space: nowrap; }
.oppstilling .latin { font-size: 15px; font-style: italic; white-space: nowrap; margin-top: -4px; }
.fuglekort .stat { font-size: 14px; letter-spacing: 0.04em; margin-top: 2px; }
.oppstilling .stat { font-size: 14px; letter-spacing: 0.04em; white-space: nowrap; margin-top: 2px; }
.oppstilling .kunstner { font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; margin-top: -2px; }

/* Én art */
.sti { padding: 28px var(--marg) 0; font-size: 16px; letter-spacing: 0.02em; }
.sti a { color: var(--blekk); text-decoration: none; }
.art { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
@media (max-width: 900px) { .art { grid-template-columns: minmax(0, 1fr); } }
.art .stor { height: min(560px, 80vw); padding: 24px; }
.art .stor img, .art .liten img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.art .liten { height: 220px; padding: 12px; }
.art .tekst { display: flex; flex-direction: column; gap: 18px; }
.art h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 0.98; }
.art .latin { font-size: clamp(24px, 2.2vw, 32px); font-style: italic; margin-top: -6px; }
.fakta { border-collapse: collapse; font-size: 20px; width: 100%; }
.fakta td { padding: 9px 0; border-bottom: 1px solid var(--blekk); vertical-align: top; }
.fakta td:first-child { letter-spacing: 0.02em; font-size: 16px; font-weight: 500; width: 170px; padding-right: 12px; }

/* Slik virker det */
.komponent { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr) 240px; gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--blekk); align-items: start; }
@media (max-width: 1000px) { .komponent { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 620px) { .komponent { grid-template-columns: minmax(0, 1fr); } }
.komponent .navn { font-size: 28px; font-weight: 500; }
.komponent .sti-kode { font-size: 15px; letter-spacing: 0.06em; margin-top: 4px; text-transform: none; padding: 0; }
.komponent .felt { font-size: 18px; }
.diagram svg, .graf svg { width: 100%; height: auto; display: block; }
/* Teksten i diagrammet er HTML inne i SVG-en, saa den bryter selv. */
.d-boks { font-family: inherit; color: var(--blekk); line-height: 1.1; }
.d-tittel { font-size: 27px; font-weight: 600; }
.d-under { font-size: 15px; letter-spacing: 0.02em; margin-top: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.d-etikett { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 14px; line-height: 1.3; letter-spacing: 0.03em; color: var(--blekk); font-family: inherit; }
.d-etikett span { background: var(--papir); padding: 0 4px; overflow-wrap: anywhere; }
.d-etikett.d-venstre { align-items: flex-start; text-align: left; }
.d-etikett.d-stor { font-size: 17px; letter-spacing: 0; }
.d-etikett.d-stor span { background: transparent; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .plan { grid-template-columns: minmax(0, 1fr); } }
.trapper { border-collapse: collapse; font-size: 18px; margin-top: 20px; width: 100%; }
.trapper td { padding: 8px 10px 8px 0; border-top: 1px solid var(--blekk); }
.trapper tr:last-child td { border-bottom: 1px solid var(--blekk); }
.farger { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.farger .rekke { display: flex; gap: 22px; flex-wrap: wrap; }
.farge-brikke { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.farge-brikke div { width: 92px; height: 92px; border: 1.5px solid var(--blekk); border-radius: 16px; }
@supports (corner-shape: bevel) { .farge-brikke div { corner-shape: bevel; } }
.farge-brikke span { font-size: 16px; letter-spacing: 0.02em; }

/* Valgene */
.valg { display: flex; flex-direction: column; gap: 4px; }
.valg .tittel { font-size: 26px; font-weight: 500; line-height: 1.1; padding-bottom: 10px; }
.valg .trinn { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--blekk); }
.valg .trinn div:first-child { font-size: 15px; letter-spacing: 0.02em; font-weight: 500; padding-top: 2px; }
.valg .trinn div:last-child { font-size: 18px; }
.forkastet { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--blekk); padding-top: 12px; }
.forkastet .tittel { font-size: 24px; font-weight: 500; line-height: 1.1; }
.forkastet p { font-size: 17px; }

/* Slik bygde jeg det */
.deler-liste { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--blekk); padding-top: 12px; }
.deler-liste .navn { font-size: 24px; font-weight: 500; }
.deler-liste ul { margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.5; }
.stroem { border-collapse: collapse; font-size: 19px; width: 100%; }
.stroem td { padding: 10px 0; border-bottom: 1px solid var(--blekk); }
.stroem td:last-child { text-align: right; white-space: nowrap; }
.tidslinje { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--blekk); }
.tidslinje .naar { font-size: 17px; letter-spacing: 0.06em; }

/* Bunn */
.bunn {
  margin-top: auto; padding: 28px var(--marg) 36px; border-top: 2px solid var(--blekk);
  display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; font-size: 17px;
}
.bunn .venstre { max-width: 720px; display: flex; flex-direction: column; gap: 8px; }
.bunn .hoeyre { display: flex; flex-direction: column; gap: 6px; text-align: right; }
@media (max-width: 620px) { .bunn .hoeyre { text-align: left; } }