:root {

  --farge-flate:        #FAF8F5;
  --farge-flate-hevet:  #F3EFE9;
  --farge-blekk:        #14110E;
  --farge-blekk-svak:   #5A534B;
  --farge-blekk-svakest:#8C8379;
  --farge-aksent:       #2E6B5E;
  --farge-aksent-mork:  #1F4C42;
  --farge-linje:        #E0D9D0;

  --data-primar:        #00876A;
  --data-engang:        #004C3D;

  --font-display: "Fraunces Variable", "Fraunces", Georgia, serif;
  --font-brod:    "Instrument Sans Variable", "Instrument Sans",
                  system-ui, -apple-system, sans-serif;

  --tekst-xs:   0.79rem;
  --tekst-s:    0.94rem;
  --tekst-m:    1.06rem;
  --tekst-l:    1.27rem;
  --tekst-xl:   1.75rem;
  --tekst-2xl:  2.4rem;
  --tekst-3xl:  clamp(2.6rem, 8vw, 4.6rem);

  --linje-tett:  1.1;
  --linje-normal:1.6;
  --linje-luft:  1.75;

  --rom-1:  0.25rem;
  --rom-2:  0.5rem;
  --rom-3:  0.75rem;
  --rom-4:  1rem;
  --rom-6:  1.5rem;
  --rom-8:  2rem;
  --rom-12: 3rem;
  --rom-16: 4rem;
  --rom-24: 6rem;
  --rom-32: 8rem;

  --bredde-tekst: 65ch;
  --bredde-side:  72rem;

  --varighet:  520ms;
  --kurve:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --forflytning: 14px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --varighet: 1ms; --forflytning: 0px; }
}

:root {
  --status-ok:       var(--farge-aksent, #2E6B5E);
  --status-advarsel: #8A6A2F;
  --status-feil:     #8C3A2E;
  --status-ukjent:   var(--farge-blekk-svakest, #8C8379);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--farge-flate, #FAF8F5);
  color: var(--farge-blekk, #14110E);
  font-family: var(--font-brod, system-ui, sans-serif);
  font-size: var(--tekst-m, 1.06rem);
  line-height: var(--linje-normal, 1.6);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ramme {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: var(--rom-6, 1.5rem);
}

h1, h2, h3 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  line-height: var(--linje-tett, 1.1);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; max-width: var(--bredde-tekst, 65ch); }
a { color: var(--farge-aksent, #2E6B5E); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.22em; }

:focus-visible {
  outline: 2px solid var(--farge-aksent, #2E6B5E);
  outline-offset: 3px;
  border-radius: 2px;
}

.svak { color: var(--farge-blekk-svak, #5A534B); font-size: var(--tekst-s, 0.94rem); }

.stikkord {
  font-size: var(--tekst-xs, 0.79rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--farge-blekk-svakest, #8C8379);
  margin: 0 0 var(--rom-4, 1rem);
}

.topp { border-bottom: 1px solid var(--farge-linje, #E0D9D0); }
.topp-rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rom-4, 1rem);
  padding-block: var(--rom-6, 1.5rem);
}
.merke {
  display: inline-flex;
  align-items: center;
  gap: var(--rom-2, 0.5rem);
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--tekst-l, 1.27rem);
  color: var(--farge-blekk, #14110E);
}
.merke:hover { text-decoration: none; }

.merke-ikon { width: 1.05em; height: 1.05em; display: block; flex: none; }
.merke-eier {
  margin: 0;
  font-size: var(--tekst-s, 0.94rem);
  color: var(--farge-blekk-svak, #5A534B);
  text-align: right;
}

.helt { padding-block: var(--rom-16, 4rem) var(--rom-12, 3rem); }
.helt h1 { font-size: var(--tekst-3xl, clamp(2.6rem, 8vw, 4.6rem)); max-width: 11ch; }
.helt .ingress {
  margin-top: var(--rom-6, 1.5rem);
  font-size: var(--tekst-l, 1.27rem);
  line-height: var(--linje-luft, 1.75);
  color: var(--farge-blekk-svak, #5A534B);
  max-width: 46ch;
}

form { margin: 0; }
.skjema { margin-top: var(--rom-8, 2rem); }
label {
  display: block;
  font-size: var(--tekst-s, 0.94rem);
  color: var(--farge-blekk-svak, #5A534B);
  margin-bottom: var(--rom-2, 0.5rem);
}
.felt-rad { display: flex; flex-wrap: wrap; gap: var(--rom-3, 0.75rem); max-width: 34rem; }
.felt-rad input { flex: 1 1 14rem; }

input[type="text"], input[type="email"] {
  width: 100%;
  padding: var(--rom-3, 0.75rem);
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--farge-linje, #E0D9D0);
  border-radius: 2px;
}
input::placeholder { color: var(--farge-blekk-svakest, #8C8379); }

button {
  padding: var(--rom-3, 0.75rem) var(--rom-6, 1.5rem);
  font: inherit;
  font-size: var(--tekst-s, 0.94rem);
  letter-spacing: 0.01em;
  color: var(--farge-flate, #FAF8F5);
  background: var(--farge-aksent, #2E6B5E);
  border: 1px solid var(--farge-aksent, #2E6B5E);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--varighet, 520ms) var(--kurve, ease);
}
button:hover { background: var(--farge-aksent-mork, #1F4C42); }

.skjema-fot { margin-top: var(--rom-4, 1rem); }

.felle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.feilrute {
  margin-top: var(--rom-6, 1.5rem);
  padding: var(--rom-4, 1rem);
  background: var(--farge-flate-hevet, #F3EFE9);
  border-left: 3px solid var(--status-feil);
}
.feilrute p { max-width: 52ch; }

.etter { padding-block: var(--rom-12, 3rem); }
.etter h2 { font-size: var(--tekst-xl, 1.75rem); }
.punktliste { margin: var(--rom-8, 2rem) 0 0; }
.punktliste div { margin-bottom: var(--rom-6, 1.5rem); max-width: 58ch; }
.punktliste dt { display: inline; font-weight: 600; }
.punktliste dt::after { content: '. '; }
.punktliste dd { display: inline; margin: 0; color: var(--farge-blekk-svak, #5A534B); }

.vakt-flate {
  background: var(--farge-flate-hevet, #F3EFE9);
  border-block: 1px solid var(--farge-linje, #E0D9D0);
  padding-block: var(--rom-12, 3rem);
}

.vakt-flate:last-child { border-bottom: 0; }
.vakt-flate .ramme { max-width: 36rem; }
.vakt-paastand {
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--tekst-xl, 1.75rem);
  line-height: 1.35;
  max-width: 26ch;
}
.vakt-flate p + p { margin-top: var(--rom-4, 1rem); }
.vakt-flate .vakt-tekst { max-width: 52ch; color: var(--farge-blekk-svak, #5A534B); }
.vakt-lenke { margin-top: var(--rom-6, 1.5rem); }

.rapport { padding-block: var(--rom-12, 3rem) var(--rom-16, 4rem); }
.rapport h1 { font-size: var(--tekst-2xl, 2.4rem); overflow-wrap: anywhere; }

.sammendrag {
  margin: var(--rom-6, 1.5rem) 0;
  padding-bottom: var(--rom-6, 1.5rem);
  border-bottom: 1px solid var(--farge-linje, #E0D9D0);
}
.sammendrag p { font-size: var(--tekst-l, 1.27rem); max-width: 48ch; }
.sammendrag .svak { font-size: var(--tekst-s, 0.94rem); margin-top: var(--rom-2, 0.5rem); }

.sjekk {
  padding: var(--rom-4, 1rem) 0 var(--rom-4, 1rem) var(--rom-4, 1rem);
  border-left: 3px solid var(--status-ukjent);
  border-bottom: 1px solid var(--farge-linje, #E0D9D0);
}
.sjekk:last-of-type { border-bottom: 0; }
.sjekk.ok       { border-left-color: var(--status-ok); }
.sjekk.advarsel { border-left-color: var(--status-advarsel); }
.sjekk.feil     { border-left-color: var(--status-feil); }

.sjekk h2 {
  font-family: var(--font-brod, system-ui, sans-serif);
  font-size: var(--tekst-m, 1.06rem);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 var(--rom-1, 0.25rem);
}
.sjekk .merke-ord {
  display: block;
  font-size: var(--tekst-xs, 0.79rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--rom-2, 0.5rem);
  color: var(--status-ukjent);
}
.sjekk.ok .merke-ord       { color: var(--status-ok); }
.sjekk.advarsel .merke-ord { color: var(--status-advarsel); }
.sjekk.feil .merke-ord     { color: var(--status-feil); }

.sjekk p { margin: 0; overflow-wrap: anywhere; }

.videre {
  margin-top: var(--rom-12, 3rem);
  padding-top: var(--rom-8, 2rem);
  border-top: 1px solid var(--farge-linje, #E0D9D0);
}
.videre h2 { font-size: var(--tekst-xl, 1.75rem); }
.videre p { margin-top: var(--rom-4, 1rem); color: var(--farge-blekk-svak, #5A534B); max-width: 52ch; }
.igjen { margin-top: var(--rom-8, 2rem); }

.abonnement { padding-block: var(--rom-16, 4rem) var(--rom-16, 4rem); }
.abonnement h1 { font-size: var(--tekst-2xl, 2.4rem); max-width: 14ch; }
.abonnement .ingress {
  margin-top: var(--rom-6, 1.5rem);
  font-size: var(--tekst-l, 1.27rem);
  line-height: var(--linje-luft, 1.75);
  color: var(--farge-blekk-svak, #5A534B);
  max-width: 46ch;
}
.varsler { margin: var(--rom-8, 2rem) 0 0; padding-left: var(--rom-6, 1.5rem); }
.varsler li { margin-bottom: var(--rom-2, 0.5rem); max-width: 52ch; }
.abonnement h2 { font-size: var(--tekst-xl, 1.75rem); margin-top: var(--rom-12, 3rem); }
.abonnement h2 + p { margin-top: var(--rom-4, 1rem); }
.abonnement p + p { margin-top: var(--rom-4, 1rem); }
.personvern { margin-top: var(--rom-6, 1.5rem); max-width: 52ch; }

footer.bunn {

  border-top: 1px solid var(--farge-linje, #E0D9D0);
  padding-block: var(--rom-8, 2rem) var(--rom-12, 3rem);
}
footer.bunn p { max-width: 56ch; }
footer.bunn p + p { margin-top: var(--rom-4, 1rem); }
.bunn-eier { color: var(--farge-blekk-svak, #5A534B); font-size: var(--tekst-s, 0.94rem); }

@media (prefers-reduced-motion: no-preference) {
  .gli { animation: gli-inn var(--varighet, 520ms) var(--kurve, ease) backwards; }
  .gli-2 { animation-delay: 90ms; }
  .gli-3 { animation-delay: 180ms; }
}
@keyframes gli-inn {
  from { opacity: 0; transform: translateY(var(--forflytning, 14px)); }
  to   { opacity: 1; transform: none; }
}