/* ---------- Skrifter ----------
   Hostet her, ikke hentet fra Google. Et <link> til fonts.googleapis.com sender
   IP-adressen til hver eneste besøkende videre til Google før siden er tegnet,
   og da holder ikke løftet om ingen tredjeparter lenger.

   Begge familiene er variable, så én fil dekker hele vektspennet vi bruker.
   SIL Open Font License 1.1, lisenstekstene ligger i skrifter/.
   Hentes på nytt med `npm run skrifter`. */

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('skrifter/familjen-grotesk.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('skrifter/ibm-plex-sans.woff2') format('woff2');
}

/* Almanakk, norsk kalender
   Fargen på hver måned følger dagslyset: polarnattsblå i desember, midtsommergull i juni. */

:root {
  --paper:      #EDF1F5;
  --card:       #FFFFFF;
  --ink:        #0F1720;
  --ink-soft:   #3B4754;
  --muted:      #5C6875;
  --faint:      #66727F;
  --line:       #DCE3EA;
  --line-soft:  #E9EEF2;
  --rod:        #B60C2E;
  --flagg:      #1B4CA1;
  --gull:       #9A6B05;
  --klem:       #C08A18;
  --natt:       #0B1626;   /* de øvrige båndfargene ligger i A.BAAND i holidays.js */

  --shadow: 0 1px 2px rgba(15, 23, 32, .05), 0 8px 24px -12px rgba(15, 23, 32, .18);
  --radius: 12px;

  --display: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* Kalenderen er tegnet for månedskort på rundt 350 px. Blir siden bredere,
     vokser bare cellene uten å vise mer, og de tolv kortene driver fra
     hverandre. Taket holder dem samlet.

     Marga er sidepolstringen som vanlig, men aldri mindre enn det som trengs
     for å sentrere innholdet innenfor taket. Elementene selv går fortsatt helt
     ut, slik at streken under topplinja og over bunnteksten spenner over hele
     skjermen i stedet for å stoppe midt i intet. */
  --maks: 1600px;
  --marg: max(clamp(16px, 4vw, 48px), calc((100% - var(--maks)) / 2));
}

:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:     #070B12;
  --card:      #0F1622;
  --ink:       #E6ECF3;
  --ink-soft:  #C2CDD9;
  --muted:     #8B9AAB;
  --faint:     #7A8899;
  --line:      #1E2937;
  --line-soft: #17202C;
  --rod:       #FF7B88;
  --flagg:     #7FA9F5;
  --gull:      #D9A542;
  --klem:      #C99A34;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -14px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* Alle klikkflatene i topplinja, filtrene og månedsvelgeren deler ramme og hover */
.yearnav__arrow, .yearnav__theme, .yearnav__today,
.stedvalg__select, .chip, .monthbar__arrow {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  transition: border-color .15s ease, color .15s ease;
}
.yearnav__arrow:hover, .yearnav__theme:hover, .yearnav__today:hover,
.stedvalg__select:hover, .chip:hover, .monthbar__arrow:hover { border-color: var(--ink-soft); }

:focus-visible {
  outline: 2px solid var(--flagg);
  outline-offset: 2px;
  border-radius: 4px;
}

.skiplink {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; border-radius: 8px; text-decoration: none;
  transition: top .15s ease;
}
.skiplink:focus { top: 12px; }

/* ---------- Topplinje ---------- */

.masthead {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px var(--marg);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
  margin: 0; font-size: inherit; font-weight: inherit;
}
.brand--lenke { text-decoration: none; color: inherit; }
/* Snarveien tilbake til kalenderen er en lenke, men skal se ut som «I dag»-knappen */
a.yearnav__today { color: var(--ink); text-decoration: none; }
.brand__name {
  font-family: var(--display);
  font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em;
}
.brand__sub {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.yearnav { display: flex; align-items: center; gap: 4px; }

.yearnav__arrow {
  width: 32px; height: 32px; line-height: 1;
  display: grid; place-items: center;
}

.yearnav__value {
  font-family: var(--display);
  font-weight: 600; font-size: 1.05rem;
  min-width: 4ch; text-align: center;
}

.yearnav__theme {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  margin-left: 8px;
  color: var(--ink-soft);
}
.yearnav__theme:hover { color: var(--ink); }
.yearnav__theme svg { width: 16px; height: 16px; display: block; }
.yearnav__theme .icon--sun { display: none; }
:root[data-theme="dark"] .yearnav__theme .icon--sun { display: block; }
:root[data-theme="dark"] .yearnav__theme .icon--moon { display: none; }

.yearnav__today {
  margin-left: 4px;
  padding: 6px 12px;
  font-size: .8rem;
}

/* ---------- Året i tall ---------- */

main { padding: 0 var(--marg) 0; }

.facts {
  margin: 26px 0 0;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.8;
}
.facts__year {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}
/* Skiller årstallet fra det første tallet, som ellers leses som ett tall */
.facts__year::after {
  content: '·';
  color: var(--muted);
  font-family: var(--body);
  font-weight: 400;
  padding: 0 .5em;
}
.facts b {
  font-weight: 600;
  color: var(--ink-soft);
}
.facts .sep { color: var(--muted); padding: 0 .5em; }

/* ---------- Lysbåndet ---------- */

.daylight {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
}

.daylight__title {
  font-family: var(--display);
  font-weight: 600; font-size: 1.35rem; letter-spacing: -.02em;
  margin: 0 0 8px;
}
.daylight__lead {
  margin: 0;
  font-size: .82rem; line-height: 1.55; color: var(--muted);
  max-width: 42ch;
}

.stedvalg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 0;
  font-size: .78rem;
  color: var(--muted);
}
.stedvalg__merke { color: var(--ink-soft); }

.stedvalg__select {
  font: inherit;
  color: var(--ink);
  padding: 5px 10px;
  cursor: pointer;
}

.stedvalg__pos { }

.ribbon { margin: 0; }
.ribbon__svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  background: var(--natt);
  box-shadow: var(--shadow);
}
.ribbon__cap {
  margin-top: 10px;
  font-size: .78rem;
  color: var(--muted);
  min-height: 1.4em;
}
.ribbon__cap b { color: var(--ink); font-weight: 600; }
.ribbon__cap .sep { color: var(--muted); padding: 0 .45em; }

/* ---------- Årsrekke ---------- */

.years {
  display: flex; gap: 2px;
  overflow-x: auto;
  padding: 10px 0 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.years__btn {
  flex: 1 0 auto;
  display: block; text-align: center;
  text-decoration: none; font: inherit;
  padding: 7px 12px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: .82rem;
  transition: color .15s ease, background .15s ease;
}
.years__btn:hover { color: var(--ink); background: var(--line-soft); }
.years__btn[aria-current='page'] {
  background: var(--ink); color: var(--paper); font-weight: 600;
}

/* ---------- Støttelinje ---------- */

.support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gull);
  border-radius: 10px;
  background: var(--card);
  font-size: .8rem;
  color: var(--muted);
}
.support[hidden] { display: none; }

.support__text { margin: 0; flex: 1 1 300px; line-height: 1.45; }
.support__text b { color: var(--ink); font-weight: 600; }

.support__cta {
  padding: 6px 14px;
  border: 1px solid var(--gull); border-radius: 999px;
  color: var(--gull);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.support__cta:hover { background: var(--gull); color: var(--card); }

.support__dismiss {
  padding: 6px 4px;
  border: 0; background: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.support__dismiss:hover { color: var(--ink); }

/* ---------- Verktøylinje ---------- */

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 24px;
  margin-bottom: 14px;
}

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0; padding: 0; list-style: none;
  font-size: .76rem; color: var(--muted);
}
.legend__item { display: flex; align-items: center; gap: 7px; }
.legend__swatch {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  font-size: .72rem; color: transparent;
  background: var(--line-soft);
}
.legend__swatch--red { color: var(--rod); font-weight: 600; }
.legend__swatch--klem {
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed var(--klem);
}

.dot { width: 5px; height: 5px; border-radius: 50%; display: block; }
.dot--flagg { background: var(--flagg); }
.dot--merke { background: var(--faint); }

.filters { display: flex; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-size: .78rem; color: var(--muted);
  cursor: pointer; user-select: none;
}
.chip input { accent-color: var(--flagg); margin: 0; }
.chip:has(input:checked) { color: var(--ink); }

/* ---------- Månedsrutenett ---------- */

.months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.1vw, 14px);
}

.month {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.month__head { padding: 8px 12px 9px; }
.month__name {
  font-family: var(--display);
  font-weight: 600; font-size: .98rem; letter-spacing: -.01em;
}
.month__grid { padding: 0 6px 2px; }

.month__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.month__table th,
.month__table td {
  text-align: center;
  padding: 0;
  font-weight: 400;
}
.month__table thead th {
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 6px 0 2px;
  font-weight: 500;
}
.month__table thead th:first-child { color: var(--faint); }
.month__table thead th.is-weekend { color: var(--rod); }

.week {
  width: 13%;
  font-size: .72rem;
  color: var(--muted);
  border-right: 1px solid var(--line-soft);
}

.day { width: 12.4%; height: 26px; }

.day__inner {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: .81rem;
  color: var(--ink-soft);
  border-radius: 7px;
  border: 1px solid transparent;
  /* Plass til merkeprikkene under tallet. Settes på alle ruter, ikke bare de
     med prikker, slik at datoene står på samme linje tvers over uka. */
  padding-bottom: 6px;
}
.day:hover .day__inner { background: var(--line-soft); }

.day--red .day__inner { color: var(--rod); font-weight: 600; }

.day--today .day__inner {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.day--today.day--red .day__inner { background: var(--rod); color: var(--paper); }
.day--today:hover .day__inner { background: var(--ink); }

.day__marks {
  position: absolute; bottom: 2px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 3px;
  pointer-events: none;
}
.day__marks .dot { width: 4px; height: 4px; }
.day--today .day__marks .dot { background: var(--paper); }

/* Filtre */
body.hide-flagg .dot--flagg,
body.hide-merke .dot--merke { display: none; }

body:not(.hide-klem) .day--klem .day__inner {
  border-color: var(--klem);
  border-style: dashed;
}

.month__notes {
  margin: 0;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  display: grid; gap: 2px;
  font-size: .7rem;
  line-height: 1.3;
  color: var(--muted);
}
.month__notes:empty { display: none; }
.month__notes li { display: flex; gap: 6px; }
.note__date {
  color: var(--faint);
  min-width: 2.4ch; text-align: right;
  flex: none;
}
.note--helligdag .note__name { color: var(--rod); font-weight: 500; }
.note--flaggdag .note__name { color: var(--flagg); }
.note--tid .note__name,
.note--astro .note__name { color: var(--gull); }

body.hide-flagg .note--flaggdag,
body.hide-merke .note--merkedag,
body.hide-merke .note--astro,
body.hide-merke .note--tid { display: none; }

/* ---------- Månedsvelger (mobil) ---------- */

.monthbar { display: none; }

/* ---------- Kolofon ---------- */

/* Bunnteksten flyter i stedet for å ligge i et rutenett. Avsnittene er korte
   og ulike i lengde, så de skal legge seg ved siden av hverandre så langt det
   er plass, og brekke når det ikke er det. Et tak per spalte hindrer at to
   avsnitt strekker seg over en hel bred skjerm.

   Her sto det tidligere `max-width: 1100px` sammen med sidepolstringen. Med
   border-box gjelder taket hele boksen, så på en bred skjerm spiste polstringen
   nesten alt, og innholdet ble 140 px. Bredden styres nå av --marg alene. */
.colofon {
  border-top: 1px solid var(--line);
  padding: 22px var(--marg) 40px;
  margin-top: 0;
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  font-size: .76rem; line-height: 1.5;
  color: var(--muted);
}
.colofon p { flex: 1 1 240px; max-width: 42ch; margin: 0; }
.colofon strong { color: var(--ink-soft); font-weight: 600; }

/* ---------- Responsivt ---------- */

@media (max-width: 1180px) {
  .months { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .daylight { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .months { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .brand__sub { display: none; }
  .toolbar { gap: 14px; }
  .legend { order: 2; }

  .monthbar {
    position: sticky; top: 57px; z-index: 9;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 0;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(10px);
  }
  .monthbar__arrow {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 10px;
  }
  .monthbar__value {
    font-family: var(--display);
    font-weight: 600; font-size: 1.15rem;
    letter-spacing: .01em;
  }

  .months { grid-template-columns: 1fr; }
  .month:not(.is-active) { display: none; }
  .month__head { padding: 14px 16px; }
  .month__name { font-size: 1.25rem; }
  .day { height: 44px; }
  .day__inner { font-size: .95rem; border-radius: 9px; padding-bottom: 8px; }
  .day__marks .dot { width: 5px; height: 5px; }
  .week { font-size: .78rem; }
  .month__table thead th { font-size: .78rem; }
  .month__notes { font-size: .8rem; gap: 5px; padding: 12px 16px 16px; }
}

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

/* ---------- Utskrift ---------- */

@media print {
  :root[data-theme="dark"] {
    --paper: #FFF; --card: #FFF; --ink: #000; --ink-soft: #222;
    --muted: #555; --faint: #888; --line: #CCC; --line-soft: #E8E8E8;
    --rod: #B60C2E; --flagg: #1B4CA1; --gull: #8A5F05; --klem: #A97A15;
  }
  .masthead, .years, .filters, .monthbar, .skiplink, .ribbon__cap, .support { display: none; }
  .stedvalg__select { border: 0; padding: 0; }
  body { background: #fff; font-size: 9pt; }
  main { padding: 0; }
  .facts { margin-top: 10pt; }
  .daylight { grid-template-columns: 1fr; padding: 16pt 0 0; break-inside: avoid; }
  .ribbon__svg { box-shadow: none; }
  .months { grid-template-columns: repeat(3, 1fr); gap: 8pt; }
  .month { break-inside: avoid; box-shadow: none; }
  .month:not(.is-active) { display: flex; }
  .colofon { padding: 12pt 0 0; }
}

/* ============================================================
   Artikkelsidene
   Egne sider for helligdager, påske, ukenummer og om. De deler
   topplinje og bunn med kalenderen, men er ren lesetekst, og
   har derfor en smalere spalte enn kalenderens tolv kort.
   ============================================================ */

/* Lesespalta sentrerer seg selv med max-width, og skal derfor IKKE bruke --marg.
   Med border-box gjelder taket hele boksen, så polstringen på en bred skjerm
   spiser hele spalta: på 2560 px ble innholdet 0 px bredt og hvert ord fikk sin
   egen linje. Samme felle som i bunnteksten. */
.artikkel {
  max-width: 78ch;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 48px) 56px;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.65;
}

/* Årsartikkelen ligger under kalenderen, som er mye bredere enn 68ch.
   Uten toppstreken flyter de to sammen. */
.artikkel--under {
  max-width: 78ch;
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 28px;
}

.artikkel__tittel {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 6px 0 18px;
  color: var(--ink);
}

.artikkel h2 {
  font-family: var(--display);
  font-size: 1.18rem; font-weight: 600;
  letter-spacing: -.01em;
  margin: 34px 0 10px;
  color: var(--ink);
}

.artikkel p { margin: 0 0 14px; }

.artikkel a { color: var(--flagg); text-underline-offset: 2px; }
.artikkel a:hover { text-decoration-thickness: 2px; }

.ingress {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ingress b { color: var(--ink); font-weight: 600; }

.etterord {
  margin-top: 26px;
  font-size: .86rem;
  color: var(--muted);
}

.kilder { margin: 0 0 14px; padding-left: 20px; }
.kilder li { margin-bottom: 7px; }
.kilder b { color: var(--ink); font-weight: 600; }

/* Den faste linja nederst. Den følger alltid etter noe annet, en årsrekke
   eller siste avsnitt, og trenger luft for ikke å klebe seg til det. */
.support--fast { margin-top: 34px; }

/* ---------- Smulesti ---------- */

.smuler {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: .78rem;
  color: var(--muted);
  margin: 14px 0 4px;
}
.smuler a { color: var(--muted); text-decoration: none; }
.smuler a:hover { color: var(--ink); text-decoration: underline; }
.smuler__pil { color: var(--muted); }
.smuler [aria-current='page'] { color: var(--ink-soft); }

/* ---------- Tabeller ----------
   Brede tabeller får rulle i sin egen ramme. Sida skal aldri rulle
   sidelengs, heller ikke på en telefon. */

.tabellramme {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  text-align: left;
}
.tabell caption {
  text-align: left;
  padding: 14px 14px 12px;
  font-family: var(--display);
  font-size: .88rem; font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.tabell th, .tabell td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
/* Overskriftene får brekke. Datoene under skal stå på én linje, men
   «Kristi himmelfart» over to gjør at hele tabellen føyer seg etter
   lesespalta i stedet for å bryte ut av den. */
.tabell thead th {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: normal;
  vertical-align: bottom;
  padding-bottom: 9px;
}
.tabell tbody th { font-weight: 600; }
.tabell tbody tr:last-child th,
.tabell tbody tr:last-child td { border-bottom: 0; }
.tabell tbody tr:hover { background: var(--line-soft); }
.tabell a { color: var(--flagg); }

/* En rad som gjelder inneværende år, eller en helligdag som ryker i helga */
.tabell .er-naa th, .tabell .er-naa td { background: var(--line-soft); font-weight: 600; }
.tabell .er-helg td:last-child { color: var(--muted); }

/* ---------- Årsrekka på artikkelsidene ---------- */

.aarsliste {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.aarsliste--stor { border-top: 0; padding-top: 0; margin-top: 26px; }

.aarsliste__lenke {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: .82rem;
  text-decoration: none;
  color: var(--muted);
  background: var(--line-soft);
  transition: color .15s ease, background .15s ease;
}
.aarsliste__lenke:hover { color: var(--ink); background: var(--line); }
.aarsliste__lenke.er-naa { background: var(--ink); color: var(--paper); font-weight: 600; }

/* ---------- Lenkeraden i bunnen ---------- */

/* Lenkeraden sto lenge i samme gråtone som avsnittene under, uten strek.
   Da leste den som en setning uten mellomrom, og ingen så at det var lenker.
   Nå står den øverst i bunnteksten, i mørkere blekk og med strek under
   hver lenke, og skilles fra småskrifta med en linje. */
.colofon__lenker {
  flex: 0 0 100%;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
}
.colofon__lenker a {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.colofon__lenker a:hover,
.colofon__lenker a:focus-visible {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

@media (max-width: 620px) {
  .artikkel { font-size: .92rem; }
  .tabell th, .tabell td { padding: 10px 11px; }
}