/* ==========================================================================
   Taste Norway – hovedstilark
   Statisk CSS. Ingen rammeverk, ingen byggesteg. Mørk som standard.
   Skarpe hjørner overalt. Hårlinjer som skiller. Ingen skygge i hvile.
   ========================================================================== */

/* --- Designvariabler --------------------------------------------------- */
:root {
  /* Mørke flater */
  --natt:        #0e1720;
  --natt-dyp:    #060b12;
  --natt-lys:    #16232e;

  /* Lyse flater */
  --sand:        #f6f4f0;
  --sand-varm:   #efece6;
  --papir:       #e8e4dc;

  /* Aksent */
  --kobber:      #c08a2e;
  --kobber-lys:  #d9a94e;
  /* Mørk nok til AA (4,5:1) også for småtekst på alle lyse flater */
  --kobber-mork: #7d5813;

  /* Tekst */
  --tekst-lys:    #eef1ef;
  --tekst-dempet: #a8b4bc;
  --tekst-svak:   #8b98a1;
  --tekst-mork:   #14202a;
  --tekst-brod:   #33404a;

  /* Linjer */
  --linje-lys:  rgba(238,241,239,0.22);
  --linje-mork: #ddd7ca;

  /* Bakoverkompatible navn – brukes fortsatt av eldre sideblokker */
  --granskog:      var(--natt-lys);
  --granskog-lys:  var(--natt-lys);
  --sand-mork:     var(--linje-mork);
  --tekst:         var(--tekst-mork);
  --hvit:          #ffffff;

  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maks-bredde: 1320px;
  --lesebredde: 680px;
  --innrykk: clamp(20px, 4vw, 48px);
  --radius: 0;

  /* Toppmenyens høyde. Når menyen ligger over heroen (.topp--over) er den
     tatt ut av flyten, og hero-innholdet må selv holde av plassen. */
  --topp-hoyde: 76px;
  /* Minste flate en finger skal treffe */
  --treff: 44px;

  /* Bevegelse: fire varigheter, to kurver. Ikke legg til flere. */
  --tid-mikro:  180ms;   /* farge, kant, opasitet */
  --tid-hover:  320ms;   /* løft og forskyvning ved peker */
  --tid-avslor: 700ms;   /* avsløring ved scroll */
  --tid-bilde: 1200ms;   /* bildezoom og wipe */

  --ut:  cubic-bezier(.2,.9,.3,1);   /* svarer på peker – rask start */
  --inn: cubic-bezier(.2,.7,.2,1);   /* avsløring – myk utgang */

  --loft: -4px;          /* eneste hover-løft på hele nettstedet */

  /* Hero-inngang: spiller kun ved lasting. Bevisst roligere
     enn scroll-staggeren – ikke slå dem sammen. */
  --intro-1: 200ms;
  --intro-2: 400ms;
  --intro-3: 650ms;
  --intro-4: 900ms;
  --intro-stripe: 1100ms;

  /* Aliaser for eldre regler. --overgang er hover-språket og bruker --ut. */
  --overgang: var(--tid-hover) var(--ut);
  --mykt: var(--inn);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip, ikke hidden: hindrer sidelengs overflyt uten å lage en
     scroll-container som låser den loddrette scrollingen */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--natt);
  color: var(--tekst-lys);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  /* Ett langt ord uten brytepunkter – en nettadresse, et stedsnavn – kan
     ellers dytte hele spalten ut av skjermen på de smaleste telefonene. */
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.10;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; }
h2 { font-size: clamp(28px, 3vw, 38px); }
h3 { font-size: clamp(22px, 2.2vw, 27px); }
h4 { font-size: 20px; }

p { margin: 0 0 1.2em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

strong, b { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--kobber);
  outline-offset: 3px;
}
/* Kobber mot sand gir bare 2,8:1 – lyse flater trenger mørkere fokusfarge */
.seksjon--lys :focus-visible,
.seksjon--papir :focus-visible,
.seksjon:has(> .wrap.artikkel) :focus-visible,
.oppslag:focus-visible {
  outline-color: var(--kobber-mork);
}

.hopp-lenke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kobber);
  color: #16110a;
  padding: 14px 22px;
  font-weight: 600;
  z-index: 400;
}
.hopp-lenke:focus { left: 0; }

/* Meldinger som kun skal leses opp, aldri vises */
.kun-skjermleser {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Layouthjelpere ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maks-bredde);
  margin-inline: auto;
  padding-inline: var(--innrykk);
}
.wrap--smal { max-width: 900px; }

.seksjon { padding-block: clamp(64px, 9vw, 128px); }
.seksjon--tett { padding-block: clamp(40px, 5vw, 72px); }

/* Mørke varianter */
.seksjon--mork { background: var(--natt-dyp); }
.seksjon--natt { background: var(--natt); }

/* Lyse varianter – bevisste pusterom */
.seksjon--lys,
.seksjon--papir {
  background: var(--sand);
  color: var(--tekst-brod);
}
.seksjon--papir { background: var(--sand-varm); }
.seksjon--lys h1, .seksjon--lys h2, .seksjon--lys h3, .seksjon--lys h4,
.seksjon--papir h1, .seksjon--papir h2, .seksjon--papir h3, .seksjon--papir h4 {
  color: var(--tekst-mork);
}

/* Historiesider: lesedelen står på lys flate uten at markup må endres */
.seksjon:has(> .wrap.artikkel) {
  background: var(--sand);
  color: var(--tekst-brod);
}
.seksjon:has(> .wrap.artikkel) h1,
.seksjon:has(> .wrap.artikkel) h2,
.seksjon:has(> .wrap.artikkel) h3 { color: var(--tekst-mork); }

/* --- Stikkord, ingress, kreditt ----------------------------------------- */
.stikkord {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tekst-svak);
  margin: 0 0 18px;
}
.seksjon--lys .stikkord,
.seksjon--papir .stikkord,
.seksjon:has(> .wrap.artikkel) .stikkord { color: #5a646e; }
/* Over foto trenger stikkordet mer lys enn på en flat bakgrunn */
.hero__innhold .stikkord { color: rgba(238,241,239,0.78); }

.ingress {
  font-size: 18px;
  line-height: 1.70;
  max-width: 56ch;
  color: var(--tekst-dempet);
}
.seksjon--lys .ingress,
.seksjon--papir .ingress { color: var(--tekst-brod); }

.kreditt {
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--tekst-svak);
  margin: 0;
}
.seksjon--lys .kreditt, .seksjon--papir .kreditt { color: #5a646e; }

/* Form-etikett: sjanger før tittel */
.form-etikett {
  display: inline-block;
  align-self: flex-start;   /* skal aldri strekkes av en flex-forelder */
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kobber-lys);
  border: 1px solid var(--linje-lys);
  padding: 5px 10px;
  margin: 0 0 16px;
}
.seksjon--lys .form-etikett,
.seksjon--papir .form-etikett {
  color: var(--kobber-mork);
  border-color: var(--linje-mork);
}

/* --- Knapper og lenker -------------------------------------------------- */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  /* Brekker etiketten til to linjer, skal begge linjene stå midtstilt.
     justify-content styrer bare den anonyme tekstboksen, ikke linjene i den. */
  text-align: center;
  /* Uppercase med sperring brekker stygt midt i et ord uten dette */
  text-wrap: balance;
  padding-block: 12px;
  cursor: pointer;
  transition: background var(--overgang), color var(--overgang),
              border-color var(--overgang), transform var(--overgang);
}
.knapp:hover { transform: translateY(var(--loft)); }
.knapp--primar { background: var(--kobber); color: #16110a; }
.knapp--primar:hover { background: var(--kobber-lys); }
.knapp--sekundar { border-color: var(--linje-lys); color: inherit; }
.knapp--sekundar:hover { border-color: var(--kobber-lys); color: var(--kobber-lys); }
.seksjon--lys .knapp--sekundar,
.seksjon--papir .knapp--sekundar { border-color: var(--linje-mork); }
.seksjon--lys .knapp--sekundar:hover,
.seksjon--papir .knapp--sekundar:hover { border-color: var(--kobber-mork); color: var(--kobber-mork); }
.knapp--mork { background: var(--natt); color: var(--tekst-lys); }
.knapp--mork:hover { background: var(--natt-lys); }

/* Understreket versallenke */
.tekstlenke {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--kobber);
  padding-bottom: 4px;
  transition: letter-spacing var(--overgang), color var(--overgang);
}
.tekstlenke:hover { letter-spacing: 0.2em; color: var(--kobber-lys); }
.seksjon--lys .tekstlenke:hover,
.seksjon--papir .tekstlenke:hover { color: var(--kobber-mork); }

.handlingsrad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 44px);
  margin-top: 44px;
}

/* --- Toppmeny ----------------------------------------------------------- */
.topp {
  position: relative;
  z-index: 120;
  background: var(--natt);
  border-bottom: 1px solid var(--linje-lys);
}
/* Over hero: gjennomsiktig, sentrert */
.topp--over {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom: 0;
}

/* Tre spalter: ordmerket til venstre, menyen midtstilt, språk til høyre.
   Ordmerket er den eneste veien hjem fra toppen – det skal aldri skjules. */
.topp__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: var(--topp-hoyde);
}
.topp__inner > .logo { justify-self: start; }
.topp__inner > .nav { justify-self: center; }
.topp__inner > .topp__handling { justify-self: end; }

.logo {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--tekst-lys);
  white-space: nowrap;
}
.logo span { color: var(--kobber-lys); }

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__liste a {
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--tekst-lys);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--overgang), border-color var(--overgang);
}
.nav__liste a:hover,
.nav__liste a[aria-current="page"] { color: var(--kobber-lys); border-bottom-color: var(--kobber); }

.topp__handling { display: flex; align-items: center; gap: 14px; flex: none; }


.sprakvalg {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--linje-lys);
  line-height: 1;
  flex: none;
}
.sprakvalg > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tekst-dempet);
  text-decoration: none;
  background: transparent;
  transition: background var(--overgang), color var(--overgang);
}
.sprakvalg > * + * { border-left: 1px solid var(--linje-lys); }
.sprakvalg a:hover, .sprakvalg a:focus-visible { color: var(--kobber-lys); }
.sprakvalg [aria-current="true"] { background: var(--kobber); color: #16110a; cursor: default; }

/* Menyknapp */
.meny-knapp {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--linje-lys);
  cursor: pointer;
  padding: 0;
}
.meny-knapp span {
  display: block; width: 20px; height: 1px;
  background: var(--tekst-lys); margin: 5px auto;
  transition: transform var(--overgang), opacity var(--overgang);
}

/* Fullskjermsmeny under 700px */
@media (max-width: 700px) {
  .meny-knapp { display: block; }
  .topp__inner { grid-template-columns: auto 1fr; }
  .topp__inner > .nav { justify-self: stretch; }

  .nav {
    position: fixed;
    inset: 0;
    background: var(--natt);
    display: none;
    z-index: 300;
    padding: 96px var(--innrykk) 40px;
    overflow-y: auto;
  }
  .nav[data-apen="true"] { display: block; }
  .nav__liste {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    counter-reset: meny;
  }
  .nav__liste li { width: 100%; border-bottom: 1px solid var(--linje-lys); }
  .nav__liste a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    font-family: var(--serif);
    font-size: 36px;
    line-height: 1.1;
    padding: 18px 0;
    min-height: 46px;
    border-bottom: 0;
    counter-increment: meny;
  }
  .nav__liste a::before {
    content: counter(meny, upper-roman);
    font-family: var(--sans);
    font-size: 11.5px;
    letter-spacing: 0.2em;
    color: var(--kobber-lys);
    min-width: 34px;
  }
  /* Menyen dekker hele skjermen. Både lukkeknappen og ordmerket må ligge
     over den – ordmerket er den eneste veien hjem fra toppen. */
  .nav[data-apen="true"] ~ .topp__handling { position: relative; z-index: 320; }
  .topp:has(.nav[data-apen="true"]) > .topp__inner > .logo { position: relative; z-index: 320; }

  /* Menyknappen blir et kryss når menyen står åpen. Uten dette finnes det
     ingen synlig lukkeknapp i fullskjermsmenyen. */
  .meny-knapp[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .meny-knapp[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .meny-knapp[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* --- Hero, full høyde --------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100vh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--natt);
  color: var(--tekst-lys);
  isolation: isolate;
}
.hero--kort { min-height: min(50vh, 520px); }
.hero--mellom { min-height: min(64vh, 660px); }

/* På mobil er 100vh større enn den synlige flaten: adresselinjen ligger
   oppå de nederste ~90 px. svh måler flaten som faktisk er synlig, og
   hindrer at hero-innholdet havner under nettleserens egen linje. */
@supports (height: 100svh) {
  .hero { min-height: min(100svh, 940px); }
  .hero--kort { min-height: min(50svh, 520px); }
  .hero--mellom { min-height: min(64svh, 660px); }
}

.hero__bilde {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: heroDrift 26s linear both;
}
@keyframes heroDrift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.08) translateY(-1.2%); }
}
/* Siste stopp er helt ugjennomsiktig, ikke 0,86. Med 0,86 skimtes fotoet
   fortsatt i nederste kant, og der heroen slutter og seksjonen under
   begynner ble det en synlig skjøt. Nå går bildet opp i flaten under. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(14,23,32,0.50) 0%,
              rgba(14,23,32,0.06) 34%,
              rgba(14,23,32,0.88) 88%,
              rgba(14,23,32,1) 100%);
}

.hero__innhold {
  position: relative;
  /* Ekstra luft under: hero-teksten drifter litt ved scroll, og trenger
     rom å gli i uten å komme ned i seksjonen under. */
  padding-block: clamp(56px, 10vw, 110px) clamp(52px, 7vw, 88px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

/* Toppmenyen over heroen er absolutt plassert og tar ikke plass i flyten.
   Når heroen vokser forbi min-høyden – lang tittel, stripe under, lav
   skjerm – legger innholdet seg da rett under toppkanten og havner bak
   menyen. Innholdet må derfor selv holde av menyens høyde.
   Søskenvelger, ikke :has(), fordi dette er en layoutkritisk regel. */
.topp--over ~ .hero__innhold {
  padding-top: max(clamp(56px, 10vw, 110px), calc(var(--topp-hoyde) + 24px));
}

.hero__innhold > * { animation: stigInn var(--tid-avslor) var(--inn) both; }
.hero__innhold > .stikkord { animation-delay: var(--intro-1); }
.hero__innhold > .ordmerke { animation-delay: var(--intro-2); }
.hero__innhold > .hero__ingress { animation-delay: var(--intro-3); }
.hero__innhold > .hero__handling { animation-delay: var(--intro-4); margin-top: 30px; }

/* will-change settes her i stedet for på hvert element i markupen.
   Kun der parallaksen faktisk kjører: fra 860 px og med bevegelse på. */
@media (min-width: 860px) and (prefers-reduced-motion: no-preference) {
  [data-plx] { will-change: transform; }
}
@keyframes stigInn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.ordmerke {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 11vw, 150px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--tekst-lys);
}
.ordmerke em { font-style: italic; color: var(--kobber-lys); }

.hero__ingress {
  font-size: 18px;
  line-height: 1.7;
  max-width: 56ch;
  color: var(--tekst-dempet);
  margin: 0;
}

/* Hero med venstrestilt tekst (historiesider) */
.hero--venstre .hero__innhold { text-align: left; align-items: flex-start; }
/* Sjangeretikett og sted står på samme linje, ikke i to stablede rader */
.hero__merking {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; margin-bottom: 10px;
}
.hero__merking .form-etikett,
.hero__merking .stikkord { margin: 0; }
/* Over foto må etiketten ha egen flate – en ramme alene drukner i motivet */
.hero__merking .form-etikett {
  background: rgba(14,23,32,0.72);
  border-color: rgba(217,169,78,0.55);
}
.hero--venstre .hero__ingress { max-width: 52ch; }
.hero__tittel {
  font-family: var(--serif);
  font-size: clamp(38px, 6.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--tekst-lys);
}

/* --- Historiestripe langs bunnen av heroen ------------------------------ */
.stripe {
  position: relative;
  border-top: 1px solid var(--linje-lys);
  animation: fadeInn var(--tid-avslor) var(--inn) var(--intro-stripe) both;
}
@keyframes fadeInn { from { opacity: 0; } to { opacity: 1; } }

.stripe__rad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.stripe__spalte {
  position: relative;
  display: block;
  padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.2vw, 30px);
  text-decoration: none;
  color: inherit;
  transition: background var(--overgang),
              transform var(--tid-hover) var(--ut);
}
.stripe__spalte + .stripe__spalte { border-left: 1px solid var(--linje-lys); }
.stripe__spalte:hover {
  background: rgba(255,255,255,0.05);
  transform: translateY(var(--loft));
}
.stripe__strek {
  display: block;
  width: 34px; height: 2px;
  background: rgba(238,241,239,0.7);
  margin-bottom: 16px;
}
.stripe__spalte:first-child .stripe__strek { background: var(--kobber); }
.stripe__tittel {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.14;
  margin: 0 0 6px;
}
.stripe__under { font-size: 15px; color: var(--tekst-dempet); margin: 0 0 12px; }
.stripe__meta {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tekst-svak);
  margin: 0;
}
/* Mobil: stripen står under hverandre, som en egen flate under fotoet.
   To ting måtte løses samtidig. Stablet med opprinnelig luft ble stripen
   over 500 px høy, og siden heroen var låst til én skjermhøyde ble
   hero-teksten dyttet opp bak toppmenyen. Vannrett rulling løste høyden,
   men en rad man må dra i for å se resten av leses som om den er kuttet av.

   Løsningen er å slutte å tvinge foto og stripe inn på samme skjerm:
   bildeflaten måler seg selv mot skjermen, stripen kommer under. Da kan
   ingen av dem presse den andre, uansett hvor lange titlene blir. */
@media (max-width: 700px) {
  /* Bare forsidens hero. Den er den eneste som har en stripe under seg, og
     dermed den eneste der de to konkurrerer om høyden. De korte heroene på
     undersidene beholder sine egne mål. Egen klasse i markupen framfor
     :has() – dette er en layoutkritisk regel som må virke overalt. */
  .hero--forside { min-height: 0; }

  /* Bildeflaten måler seg selv mot skjermen; stripen kommer under.
     86 svh, ikke 100: den første historien i stripen skal så vidt titte
     fram nederst. Det er den ærligste måten å si «det er mer her» på. */
  .hero--forside .hero__innhold {
    min-height: min(86svh, 760px);
    justify-content: flex-end;
  }

  /* Stripen er sin egen flate, ikke tekst oppå et foto. Hårlinjene og den
     dempede metateksten forsvant mot det lyseste i motivet. */
  .stripe { background: var(--natt-dyp); }
  .stripe__rad { grid-template-columns: 1fr; }

  .stripe__spalte {
    padding: 15px var(--innrykk) 17px;
  }
  .stripe__spalte + .stripe__spalte { border-left: 0; border-top: 1px solid var(--linje-lys); }
  /* Løftet ved peker hører hjemme på mus, ikke under en finger */
  .stripe__spalte:hover { transform: none; }

  .stripe__strek { width: 24px; margin-bottom: 10px; }
  .stripe__tittel { font-size: 20px; margin-bottom: 3px; }
  .stripe__under { font-size: 14.5px; line-height: 1.45; margin-bottom: 7px; }
  .stripe__meta { font-size: 10.5px; letter-spacing: 0.16em; }
}

/* --- Trykte oppslag ----------------------------------------------------- */
.oppslag-rad {
  display: flex;
  gap: clamp(20px, 2.6vw, 34px);
  overflow-x: auto;
  padding-inline: var(--innrykk);
  padding-block: 8px 22px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.oppslag {
  flex: 0 0 min(88vw, 660px);
  scroll-snap-align: start;
  background: var(--natt-lys);
  border: 1px solid var(--linje-lys);
  padding: clamp(16px, 2vw, 28px);
  text-decoration: none;
  color: var(--tekst-lys);
  transition: transform var(--tid-hover) var(--ut), box-shadow var(--tid-hover) var(--ut);
}
.oppslag:hover {
  transform: translateY(var(--loft));
  box-shadow: 0 26px 60px rgba(0,0,0,0.42);
}
.oppslag__ramme {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--natt-lys);
}
.oppslag__ramme img { width: 100%; height: 100%; object-fit: cover; }
.oppslag__ord {
  position: absolute;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(12px, 2vw, 22px);
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 44px);
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  margin: 0;
  pointer-events: none;
}
.oppslag__kreditt {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--tekst-svak);
  margin: 12px 0 0;
}

/* --- Kapitteloppslag ---------------------------------------------------- */
.kapittel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: stretch;
  border-top: 1px solid var(--linje-lys);
}
.kapittel__bilde {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 46vw, 620px);
  background: var(--natt-lys);
}
.kapittel__bilde img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tid-bilde) var(--inn);
}
.kapittel:hover .kapittel__bilde img { transform: scale(1.05); }

.kapittel__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: clamp(36px, 5vw, 80px) clamp(24px, 4vw, 68px);
  background: var(--natt);
}
.kapittel__tekst h3 {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.10;
  margin: 0 0 10px;
}
.kapittel__under {
  font-size: 18px;
  color: var(--tekst-dempet);
  margin: 0 0 22px;
}
.kapittel__tekst p { max-width: 56ch; }
.kapittel__tekst .kreditt { margin: 6px 0 24px; }

/* Vekslende rekkefølge: bilde venstre, høyre, venstre */
.kapittel--speilvendt .kapittel__bilde { order: 2; }
.kapittel--speilvendt .kapittel__tekst { order: 1; }
@media (max-width: 860px) {
  .kapittel--speilvendt .kapittel__bilde { order: 0; }
  .kapittel--speilvendt .kapittel__tekst { order: 0; }
}

/* --- Kriterier: kun toppstrek per celle --------------------------------- */
.kriterier {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 36px;
  row-gap: 8px;
  margin: 48px 0 0;
  list-style: none;
  padding: 0;
}
/* Antall spalter settes eksplisitt. Med fem punkter ville auto-fit gitt
   en foreldreløs celle på siste rad, med en toppstrek som henger alene. */
@media (min-width: 560px)  { .kriterier { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .kriterier { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .kriterier { grid-template-columns: repeat(5, 1fr); } }
/* Tre punkter (avtalen på partnersiden) skal aldri brekke til 5 */
@media (min-width: 860px)  { .kriterier--tre { grid-template-columns: repeat(3, 1fr) !important; } }
.kriterier li {
  border-top: 1px solid var(--linje-lys);
  padding: 22px 0 30px;
}
.seksjon--lys .kriterier li,
.seksjon--papir .kriterier li { border-top-color: var(--linje-mork); }
.kriterier__nr {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--tekst-svak);
  margin-bottom: 10px;
}
.seksjon--lys .kriterier__nr,
.seksjon--papir .kriterier__nr { color: var(--kobber-mork); }
.kriterier h3 { font-size: 22px; margin-bottom: 8px; }
.kriterier p { font-size: 16px; color: var(--tekst-dempet); margin: 0; }
.seksjon--lys .kriterier p,
.seksjon--papir .kriterier p { color: var(--tekst-brod); }

/* --- Historiekort ------------------------------------------------------- */
.rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: 44px;
}
/* Vekslende rytme: én bred, to smale */
.rutenett--rytme { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 900px) {
  .rutenett--rytme { grid-template-columns: repeat(2, 1fr); }
  .rutenett--rytme > .kort--bred { grid-column: 1 / -1; }
  .rutenett--rytme > .kort--bred .kort__media { aspect-ratio: 21 / 9; }
}

.kort {
  position: relative;
  background: var(--natt-lys);
  border: 1px solid var(--linje-lys);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background var(--overgang), border-color var(--overgang),
              transform var(--tid-hover) var(--ut), box-shadow var(--tid-hover) var(--ut);
}
.kort:hover {
  background: #1b2a36;
  border-color: rgba(238,241,239,0.34);
  transform: translateY(var(--loft));
  box-shadow: 0 26px 60px rgba(0,0,0,0.42);
}
.seksjon--lys .kort, .seksjon--papir .kort {
  background: #fff;
  border-color: var(--linje-mork);
  color: var(--tekst-brod);
}
.seksjon--lys .kort:hover, .seksjon--papir .kort:hover { background: #fff; }

.kort--dempet { opacity: 0.62; }
.kort--dempet:hover { opacity: 1; }

.kort__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--natt-dyp);
}
.kort__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tid-bilde) var(--inn);
}
.kort:hover .kort__media img { transform: scale(1.05); }

.kort__merke {
  position: absolute; top: 0; left: 0;
  background: var(--natt);
  color: var(--kobber-lys);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  font-weight: 600;
}
.kort__merke--eksempel { letter-spacing: 0.1em; line-height: 1.4; right: auto; max-width: 90%; }

.kort__tekst {
  padding: clamp(22px, 2.4vw, 30px);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kort__sted {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kobber-lys);
  font-weight: 600;
  margin: 0 0 10px;
}
.seksjon--lys .kort__sted, .seksjon--papir .kort__sted { color: var(--kobber-mork); }
.kort h2, .kort h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 10px; }
.kort p { font-size: 16.5px; color: var(--tekst-dempet); margin-bottom: 20px; }
.seksjon--lys .kort p, .seksjon--papir .kort p { color: var(--tekst-brod); }
.kort .kreditt { margin-bottom: 18px; }
.kort__lenke {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--kobber);
  padding-bottom: 4px;
  transition: letter-spacing var(--overgang), color var(--overgang);
}
.kort__lenke:hover { letter-spacing: 0.2em; color: var(--kobber-lys); }
.kort__lenke::after { content: ""; position: absolute; inset: 0; }

/* Status uten lenkefunksjon. Brukes på kort der besøket ikke er gjort ennå –
   uten ::after blir ikke kortet en klikkflate som ikke fører noe sted. */
.kort__lenke--av {
  color: var(--tekst-svak);
  border-bottom-color: var(--linje-lys);
  cursor: default;
}
.kort__lenke--av::after { content: none; }

/* Regionfiltre */
/* Filterraden krever JavaScript. Uten skriptet skjules den helt –
   døde knapper er verre enn ingen knapper. Alle kortene vises da. */
.filterrad { display: none; }
.js-filter .filterrad {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.filterrad a, .filterrad span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--linje-lys);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  color: var(--tekst-dempet);
  transition: color var(--overgang), border-color var(--overgang);
}
.filterrad a, .filterrad span[role="button"] { cursor: pointer; }
.filterrad a:hover,
.filterrad span[role="button"]:hover { color: var(--kobber-lys); border-color: var(--kobber); }
.filterrad [aria-current="true"] { background: var(--kobber); border-color: var(--kobber); color: #16110a; }

/* --- Historieside ------------------------------------------------------- */
.artikkel {
  max-width: var(--lesebredde);
  margin-inline: auto;
}
.artikkel > h1 { color: var(--tekst-mork); }
.artikkel .ingress {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.34;
  color: var(--tekst-mork);
  max-width: none;
}
.artikkel p { font-size: 18.5px; line-height: 1.75; color: var(--tekst-brod); max-width: 56ch; }
.artikkel h2 { margin-top: 56px; color: var(--tekst-mork); }
.artikkel__meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #5a646e;
  border-top: 1px solid var(--linje-mork);
  border-bottom: 1px solid var(--linje-mork);
  padding-block: 16px;
  margin-bottom: 48px;
}
/* Metabåndet øverst på historiesidene – samme rad, men uten rammer og
   spredt utover hele bredden. Mobilvarianten står i mobilbolken nederst. */
.artikkel__meta--band {
  border: 0;
  margin: 0;
  padding: 0;
  color: var(--tekst-dempet);
  justify-content: space-between;
}
.artikkel figure img { width: 100%; }
.artikkel figcaption {
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #5a646e;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linje-mork);
}
.sitat {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.32;
  border-left: 2px solid var(--kobber);
  padding-left: 26px;
  margin: 56px 0;
  color: var(--tekst-mork);
}
/* Faktaboksen arver flaten den står på. Den skal aldri sette bakgrunn
   uten samtidig å sette tekstfarge – da blir den uleselig på mørk flate. */
.faktaboks {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--linje-lys);
  padding: 30px 0 0;
  margin: 56px 0;
}
.faktaboks h3 { font-size: 22px; color: inherit; }
.faktaboks p { color: var(--tekst-dempet); }

/* På lys flate snus linjene og tekstfargene */
.seksjon--lys .faktaboks,
.seksjon--papir .faktaboks,
.seksjon:has(> .wrap.artikkel) .faktaboks { border-top-color: var(--linje-mork); }
.seksjon--lys .faktaboks h3,
.seksjon--papir .faktaboks h3,
.seksjon:has(> .wrap.artikkel) .faktaboks h3 { color: var(--tekst-mork); }
.seksjon--lys .faktaboks p,
.seksjon--papir .faktaboks p,
.seksjon:has(> .wrap.artikkel) .faktaboks p { color: var(--tekst-brod); }
.faktaboks dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 4px 32px;
  font-size: 16px;
}
.faktaboks dt {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kobber-lys);
  padding-top: 14px;
  border-top: 1px solid var(--linje-lys);
}
.faktaboks dd { margin: 0 0 14px; color: var(--tekst-dempet); }
.seksjon--lys .faktaboks dt, .seksjon--papir .faktaboks dt,
.seksjon:has(> .wrap.artikkel) .faktaboks dt { color: #5a646e; border-top-color: var(--linje-mork); }
.seksjon--lys .faktaboks dd, .seksjon--papir .faktaboks dd,
.seksjon:has(> .wrap.artikkel) .faktaboks dd { color: var(--tekst-brod); }

/* «Why it is here» – kriterier brukt konkret */
.hvorfor { margin: 56px 0; list-style: none; padding: 0; }
.hvorfor li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 32px;
  border-top: 1px solid var(--linje-mork);
  padding: 18px 0;
}
@media (min-width: 700px) {
  /* Etiketten skal være smal – svaret er innholdet */
  .hvorfor li { grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); }
}

.hvorfor dt, .hvorfor__navn {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--tekst-mork);
}
.hvorfor__tekst { font-size: 16.5px; color: var(--tekst-brod); margin: 0; }
.hvorfor__navn .kriterier__nr { display: inline; margin: 0 12px 0 0; font-size: 15px; }

/* Samme mønster på mørk flate – brukes av spørsmålene på partnersiden */
.hvorfor--mork li { border-top-color: var(--linje-lys); }
.hvorfor--mork .hvorfor__navn { color: var(--tekst-lys); }
.hvorfor--mork .hvorfor__tekst { color: var(--tekst-dempet); }

/* Praktisk bånd */
.praktisk { background: var(--natt-lys); color: var(--tekst-lys); }
.praktisk h2, .praktisk h3 { color: var(--tekst-lys); }
.praktisk__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.praktisk dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 32px;
}
.praktisk dt {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--kobber-lys);
  padding-top: 16px; border-top: 1px solid var(--linje-lys);
}
.praktisk dd { margin: 0 0 16px; color: var(--tekst-dempet); }

/* Neste historie */
.praktisk + .neste { border-top: 1px solid var(--linje-lys); }
.seksjon.praktisk { padding-bottom: clamp(44px, 5vw, 72px); }

.neste {
  position: relative;
  display: block;
  min-height: clamp(280px, 34vw, 420px);
  overflow: hidden;
  text-decoration: none;
  color: var(--tekst-lys);
  background: var(--natt);
}
.neste img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tid-bilde) var(--inn);
}
.neste:hover img { transform: scale(1.05); }
.neste::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,23,32,0.35), rgba(14,23,32,0.85));
}
.neste__innhold {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  padding: clamp(32px, 5vw, 64px) var(--innrykk);
  max-width: var(--maks-bredde);
  margin-inline: auto;
}
.neste h2 { margin: 0; color: var(--tekst-lys); }

/* Nummerert rekkefølge – utvelgelsesprosessen */
.rekke { list-style: none; counter-reset: steg; padding: 0; margin: 32px 0 0; }
/* Ikke grid: <li> har en løs tekstnode etter <strong>, og den ville blitt
   et eget anonymt rutenettelement i den smale tallspalten – ett ord per
   linje. Absolutt plassert tall holder teksten samlet i én flyt. */
.rekke li {
  counter-increment: steg;
  position: relative;
  border-top: 1px solid var(--linje-lys);
  padding: 20px 0 20px 62px;
  max-width: 780px;
  color: var(--tekst-dempet);
}
.rekke li::before {
  content: counter(steg, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: var(--kobber-lys);
}
.rekke li strong {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--tekst-lys);
  margin-bottom: 4px;
}

/* --- Skjema: to spalte på de korte feltene ------------------------------ */
.skjema { max-width: 720px; }
@media (min-width: 720px) {
  .skjema__rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}

/* --- Historieside: redaksjonelt rutenett ---------------------------------
   Teksten står i sin egen akse, med et margfelt til høyre for kapittelnummer
   og bildetekster. Symmetrisk midtstilling er det som får en artikkel til å
   lese som et dokument i stedet for et oppslag. ------------------------- */
:root {
  --artikkelrutenett:
    [kant-start] minmax(var(--innrykk), 1fr)
    [tekst-start] minmax(0, 640px)
    [tekst-slutt] minmax(0, 280px)
    [marg-slutt] minmax(var(--innrykk), 1fr) [kant-slutt];
}

/* Under 1080 px finnes det ikke plass til et margfelt. Da faller
   artikkelen tilbake til én lesespalte – margfeltet ville ellers stjålet
   halve tekstbredden. */
@media (max-width: 1080px) {
  :root {
    --artikkelrutenett:
      [kant-start] minmax(var(--innrykk), 1fr)
      [tekst-start] minmax(0, 680px)
      [tekst-slutt marg-slutt] minmax(var(--innrykk), 1fr) [kant-slutt];
  }
}

.artikkel {
  display: grid;
  grid-template-columns: var(--artikkelrutenett);
  column-gap: clamp(24px, 3vw, 56px);
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  counter-reset: kapittel;
}
.artikkel > * { grid-column: tekst-start / tekst-slutt; }

.artikkel > h1 { grid-column: tekst-start / marg-slutt; }
.artikkel .ingress { grid-column: tekst-start / marg-slutt; }
.artikkel__meta { grid-column: tekst-start / marg-slutt; }

/* Kapittelnummer rir i margfeltet, på linje med overskriften */
.artikkel h2 {
  position: relative;
  counter-increment: kapittel;
  margin-top: clamp(56px, 7vw, 88px);
}
.artikkel h2::before {
  content: counter(kapittel, decimal-leading-zero);
  position: absolute;
  top: 0.55em;
  left: calc(100% + clamp(24px, 3vw, 56px));
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--kobber-mork);
}
@media (max-width: 1080px) { .artikkel h2::before { display: none; } }

/* Innledningen får initial – et typografisk startpunkt, ikke bare et avsnitt */
.artikkel > h2:first-of-type + p::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.4em;
  line-height: 0.84;
  padding: 0.06em 0.12em 0 0;
  color: var(--tekst-mork);
}
@media (min-width: 700px) {
  .artikkel > h2:first-of-type + p::first-letter { font-size: 4.4em; line-height: 0.82; }
}

/* Bilder får full bredde og en mørk flate å ligge på. Det er vekslingen
   mellom sand og natt som gir lesningen rytme. */
.artikkel figure {
  grid-column: kant-start / kant-slutt;
  display: grid;
  grid-template-columns: var(--artikkelrutenett);
  column-gap: clamp(24px, 3vw, 56px);
  background: var(--natt);
  padding-block: clamp(30px, 4vw, 64px);
  margin: clamp(56px, 7vw, 96px) 0;
  width: auto;
}
.artikkel figure img {
  grid-column: tekst-start / marg-slutt;
  width: 100%;
}
.artikkel figcaption {
  grid-column: tekst-start / tekst-slutt;
  max-width: none;
  color: var(--tekst-svak);
  border-top-color: var(--linje-lys);
  margin-top: 20px;
  padding-top: 14px;
}

/* Sitatet bryter ut i margfeltet */
.artikkel .sitat {
  grid-column: tekst-start / marg-slutt;
  border-left: 0;
  padding-left: 0;
  border-top: 1px solid var(--kobber);
  padding-top: 28px;
  margin: clamp(56px, 7vw, 88px) 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.24;
}
.artikkel .sitat footer { margin-top: 20px !important; }

.artikkel .hvorfor { grid-column: tekst-start / marg-slutt; width: auto; margin-inline: 0; }
.artikkel .faktaboks { grid-column: tekst-start / marg-slutt; }

/* --- Seksjonsåpning på forsiden -----------------------------------------
   Redaksjonell åpning: kort messinglinje, stikkord, venstrestilt overskrift
   og ingress i egen målebredde. Erstatter de midtstilte tekstblokkene – en
   side som midtstiller alt leser som et dokument, ikke som et oppslag. */
.seksjonsapning { text-align: left; }
.seksjonsapning .stikkord {
  position: relative;
  padding-top: 22px;
}
.seksjonsapning .stikkord::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 1px;
  background: var(--kobber);
}
.seksjonsapning h2 { max-width: 22ch; }
.seksjonsapning .ingress { max-width: 52ch; margin-inline: 0; }
.seksjonsapning .ingress + .ingress { margin-top: 22px; }

/* --- Flere historier nederst på en historieside ------------------------- */
.flere .rutenett { margin-top: 32px; }
.flere .kort__media { aspect-ratio: 3 / 2; }
.flere .kort h2, .flere .kort h3 { font-size: clamp(21px, 1.9vw, 25px); }
.flere .kort p { font-size: 15.5px; }

/* --- Prisbokser --------------------------------------------------------- */
.priser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin-top: 44px;
  align-items: stretch;
}
.pris {
  background: transparent;
  border: 1px solid var(--linje-lys);
  padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column;
}
.seksjon--lys .pris, .seksjon--papir .pris { border-color: var(--linje-mork); }
.pris--fremhevet { border-color: var(--kobber); }
.pris__merke {
  display: inline-block;
  align-self: flex-start;
  background: var(--kobber);
  color: #16110a;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 10px; font-weight: 600; margin-bottom: 20px;
}
.pris h3 { font-size: 26px; }
.pris__tall { font-family: var(--serif); font-size: 40px; line-height: 1.1; margin: 0; }
.pris__enhet { font-size: 15px; color: var(--tekst-dempet); margin: 6px 0 24px; }
.seksjon--lys .pris__enhet, .seksjon--papir .pris__enhet { color: #5a646e; }
.pris ul { list-style: none; padding: 0; margin: 0 0 30px; font-size: 16px; }
.pris li { padding-left: 22px; position: relative; margin-bottom: 12px; }
.pris li::before { content: "—"; position: absolute; left: 0; color: var(--kobber); }
.pris .knapp { margin-top: auto; }

/* --- Skjema ------------------------------------------------------------- */
.skjema { max-width: 560px; margin-top: 36px; }
.felt { margin-bottom: 22px; }
.felt label {
  display: block; font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
  color: var(--tekst-dempet);
}
.seksjon--lys .felt label, .seksjon--papir .felt label { color: #5a646e; }
.felt input, .felt textarea, .felt select {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--linje-lys);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: inherit;
}
.seksjon--lys .felt input, .seksjon--lys .felt textarea, .seksjon--lys .felt select,
.seksjon--papir .felt input, .seksjon--papir .felt textarea, .seksjon--papir .felt select {
  border-color: var(--linje-mork); background: #fff;
}
.felt textarea { min-height: 150px; resize: vertical; }
.felt__hjelp { font-size: 14px; color: var(--tekst-svak); margin-top: 6px; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* --- Kart --------------------------------------------------------------- */
#kart {
  height: clamp(420px, 72vh, 720px);
  width: 100%;
  border: 1px solid var(--linje-lys);
  background: var(--natt-lys);
}
.kart-info { font-size: 15px; color: var(--tekst-dempet); margin-top: 16px; }

/* Popup må følge det mørke kartet – Leaflets standard er hvit boks.
   Leaflets eget stilark lastes etter dette, så regelen trenger
   forelderen .leaflet-popup for å vinne på spesifisitet. */
.leaflet-popup .leaflet-popup-content-wrapper,
.leaflet-popup .leaflet-popup-tip {
  background: #16202b;
  color: #e8edf1;
}
.leaflet-popup .leaflet-popup-content a { color: var(--kobber-lys); }
.leaflet-container a.leaflet-popup-close-button { color: #a8b4bc; }
.kart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (min-width: 900px) {
  .kart-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .kart-grid > :first-child { position: sticky; top: 96px; }
}
.stedsliste { list-style: none; margin: 0; padding: 0; }
.stedsliste li { border-top: 1px solid var(--linje-lys); }
.stedsliste a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 14px 0;
  min-height: 46px;
  text-decoration: none;
  color: inherit;
  transition: color var(--overgang), background var(--overgang);
}
.stedsliste a:hover { background: rgba(255,255,255,0.04); }
.stedsliste__navn { line-height: 1.2; }
.stedsliste__navn .kreditt { display: block; margin-top: 4px; font-size: 12.5px; }
.stedsliste a:hover { color: var(--kobber-lys); }
.stedsliste__nr { font-family: var(--serif); color: var(--kobber-lys); }
.stedsliste__navn { font-family: var(--serif); font-size: 22px; }
.stedsliste__status {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tekst-svak);
}

/* --- Redaktørbrev (about) ----------------------------------------------- */
.brev {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .brev { grid-template-columns: minmax(240px, 320px) 1fr; }
  .brev > :first-child { position: sticky; top: 110px; }
}
.brev figure { margin: 36px 0 0; overflow: hidden; }
.brev figure img { width: 100%; }
.brev__tekst { max-width: var(--lesebredde); }
.brev__tekst p { max-width: 56ch; }
.brev__signatur {
  font-family: var(--serif);
  font-size: 30px;
  margin-top: 32px;
}
.brev__slutt {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.35;
  color: var(--kobber-mork);
  margin-top: 40px;
}
.seksjon--natt .brev__slutt, .seksjon--mork .brev__slutt { color: var(--kobber-lys); }

/* --- Stedsoppslag på regionsider (bevares) ------------------------------ */
.sted { max-width: 1100px; margin-inline: auto; padding-block: clamp(48px, 6vw, 84px); }
.sted + .sted { border-top: 1px solid var(--linje-lys); }
.sted__bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-bottom: 36px;
}
.sted__bilder figure { margin: 0; overflow: hidden; }
.sted__bilder img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.sted__bilder figcaption {
  font-size: 13.5px; color: var(--tekst-svak); margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--linje-lys);
}
.sted__tekst { max-width: 780px; }
.sted__tekst p { max-width: 56ch; color: var(--tekst-dempet); }
.leteliste { list-style: none; padding: 0; margin: 28px 0 0; max-width: 780px; }
.leteliste li { border-top: 1px solid var(--linje-lys); padding-block: 16px; font-size: 17px; }

/* --- Bunntekst ---------------------------------------------------------- */
.bunn {
  background: var(--natt-dyp);
  color: var(--tekst-dempet);
  padding-block: clamp(56px, 7vw, 84px) 32px;
  border-top: 1px solid var(--linje-lys);
}
.bunn a { color: var(--tekst-lys); text-decoration: none; transition: color var(--overgang); }
.bunn a:hover { color: var(--kobber-lys); }
.bunn__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
  margin-bottom: 48px;
}
.bunn h2 {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kobber-lys);
  margin-bottom: 18px;
}
.bunn ul { list-style: none; padding: 0; margin: 0; font-size: 16px; }
.bunn li { margin-bottom: 10px; }
.bunn__under {
  border-top: 1px solid var(--linje-lys);
  padding-top: 24px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
}

/* --- 404 ---------------------------------------------------------------- */
.feilside { text-align: center; }
.feilside .ordmerke { font-size: clamp(72px, 18vw, 200px); }

/* --- Mobil ---------------------------------------------------------------
   Justeringene under er tilpasninger av det samme designet, ikke et eget
   mobildesign: skarpe hjørner, hårlinjer og de samme fargene. Det som endres
   er rytme, typografitrapp og treffflater – tre ting som ikke lar seg løse
   med clamp() alene.
   ------------------------------------------------------------------------ */

/* 700 px: samme knekk som toppmenyen bruker */
@media (max-width: 700px) {

  /* Oppslagsraden: ett eksempel, ikke en rullbar rad.
     Raden lå i flukt med skjermkanten og det andre kortet var bare synlig
     som en stripe helt ute i høyre kant – det leses som et kutt, ikke som
     noe man kan dra i. Ett oppslag i full bredde innenfor sidens innrykk
     gjør det tydelig at dette ER eksempelet. Resten ligger bak
     «Se alle historier» rett under. */
  .oppslag-rad {
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-block: 0 0;
  }
  .oppslag { display: block; }
  .oppslag:nth-child(n+2) { display: none; }
  .oppslag:hover { transform: none; box-shadow: none; }

  /* Handlingsrad: knapp og tekstlenker stables. Vannrett brakk knappen til
     to linjer og la lenkene ligge klemt inntil den. */
  .handlingsrad {
    flex-direction: column;
    gap: 26px;
    margin-top: 36px;
  }
  .handlingsrad > .knapp {
    width: 100%;
    max-width: 380px;
  }

  /* Treffflater. Understrekingen og sperringen er selve uttrykket i
     .tekstlenke, så høyden legges på en usynlig flate over lenken i
     stedet for som padding – da endres ikke typografien. */
  .tekstlenke { position: relative; }
  .tekstlenke::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: var(--treff);
    transform: translateY(-50%);
  }
  /* .kort__lenke skal IKKE ha position: relative. Dens ::after måler seg mot
     .kort og gjør hele kortet klikkbart – en posisjonering her ville krympet
     treffflaten til selve lenketeksten. */

  /* Ordmerket i toppen er en lenke hjem – den skal treffes like lett
     som menyknappen ved siden av. */
  /* padding, ikke flex: en flex-container spiser mellomrommet mellom
     «Taste» og <span>Norway</span>, og ordmerket blir «TasteNorway». */
  .topp__inner > .logo { display: inline-block; padding-block: 6px; }

  .bunn ul { line-height: 1.5; }
  .bunn li { margin-bottom: 0; }
  .bunn ul a { display: inline-block; padding-block: 11px; }

  /* Metabåndet på historiesidene: space-between på fem korte spenn ga
     tilfeldige hull midt i raden. Venstrestilt liste leser roligere. */
  .artikkel__meta--band { justify-content: flex-start; gap: 6px 22px; }
  .artikkel__meta a { display: inline-block; padding-block: 10px; }

  /* Kartet skal ikke spise mer enn to tredeler av skjermen – listen under
     er den egentlige inngangen til stedene på mobil. */
  #kart { height: clamp(340px, 58vh, 460px); }

  /* Stedslisten: navn og status delte bredden, så lange navn brakk til to
     linjer mens statusen sto alene ute til høyre. Statusen flyttes ned
     under navnet og navnet får hele bredden. */
  .stedsliste a {
    grid-template-columns: 30px minmax(0, 1fr);
    row-gap: 6px;
    padding: 16px 0;
  }
  .stedsliste__status { grid-column: 2; }
}

/* 620 px: der to spalter slutter å være to spalter */
@media (max-width: 620px) {
  /* Bunnteksten sto i to 150 px smale spalter der annenhver lenke brakk.
     Merkevareblokken legger seg over hele bredden, lenkelistene deler resten. */
  .bunn__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 22px;
  }
  .bunn__grid > :first-child { grid-column: 1 / -1; }
  /* space-between har ingenting å fordele når begge spennene får plass på
     én linje – de endte klistret inntil hverandre. Under hverandre i stedet. */
  .bunn__under { flex-direction: column; gap: 6px; }
}

/* 600 px: typografitrappen. clamp()-ene over står flatt på minsteverdien
   under ca. 590 px, så de smaleste telefonene får samme grader som en
   iPhone Pro Max. Her fortsetter trappen nedover – og treffer de gamle
   verdiene igjen med én gang det er plass. */
@media (max-width: 600px) {
  .hero__tittel { font-size: clamp(30px, 9.7vw, 38px); }
  .artikkel .ingress { font-size: clamp(21px, 6.2vw, 24px); }
  .sitat, .artikkel .sitat { font-size: clamp(23px, 7vw, 28px); }
  .kort h2, .kort h3 { font-size: clamp(21px, 6.2vw, 24px); }
  .pris__tall { font-size: clamp(31px, 9.5vw, 40px); }

  /* Fem kriterier under hverandre: strammere pust mellom hver */
  .kriterier li { padding: 18px 0 24px; }
}

/* 480 px: de smale telefonene */
@media (max-width: 480px) {
  .ordmerke { font-size: clamp(42px, 13vw, 52px); }

  /* Toppraden: ordmerke, språkvalg og menyknapp skal stå på én linje uten
     å presse hverandre. 44 px er fortsatt over treffgrensen. */
  .logo { font-size: 20px; }
  .topp__handling { gap: 10px; }
  .sprakvalg > * {
    min-width: 42px;
    min-height: var(--treff);
    padding: 0 8px;
    font-size: 12px;
  }
  .meny-knapp { width: var(--treff); height: var(--treff); }

  /* Fullskjermsmenyen: 36 px serif ga fem punkter som knapt fikk plass */
  .nav__liste a { font-size: 30px; padding: 15px 0; }
  .nav { padding-top: calc(var(--topp-hoyde) + 20px); }

  /* Filterknappene brakk til fire rader. Kortere sperring, mindre luft. */
  .filterrad a, .filterrad span {
    min-height: var(--treff);
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  .js-filter .filterrad { gap: 8px; }

  /* Oppslagsraden får litt mer bredde når skjermen er smal */
  .oppslag { flex-basis: min(90vw, 660px); }
}

/* --- Bevegelse ved scroll ----------------------------------------------- */
[data-anim] {
  will-change: opacity, transform;
  transition:
    opacity var(--tid-avslor) var(--inn),
    transform var(--tid-avslor) var(--inn),
    clip-path var(--tid-avslor) var(--inn);
  transition-delay: var(--anim-delay, 0ms);
}
/* Kort avsløres på opasitet, og eier transform selv.
   Uten dette vinner [data-anim] hele transition-erklæringen. */
.oppslag[data-anim],
.kort[data-anim] {
  transition:
    opacity   var(--tid-avslor) var(--inn),
    transform var(--tid-hover)  var(--ut),
    box-shadow var(--tid-hover) var(--ut);
  /* Stenografien over nullstiller forsinkelsen. Uten denne linjen taper
     [data-anim] sin transition-delay på spesifisitet, og stagger-trappen
     dør på nettopp oppslagene og kortene. */
  transition-delay: var(--anim-delay, 0ms);
}
/* Startstillingene gjelder kun når skriptet har kjørt. Uten JavaScript
   står alt innhold synlig – siden skal aldri kunne bli tom. */
.js-bevegelse [data-anim="rise"]  { opacity: 0; transform: translateY(34px); }
.js-bevegelse [data-anim="fade"]  { opacity: 0; }
.js-bevegelse [data-anim="zoom"]  { opacity: 0; transform: scale(1.06); }
.js-bevegelse [data-anim="left"]  { opacity: 0; transform: translateX(-40px); }
.js-bevegelse [data-anim="right"] { opacity: 0; transform: translateX(40px); }

[data-anim].synlig { opacity: 1; transform: none; }

/* Wipe ligger på barnet, ikke på selve elementet. Et element som er helt
   bortklippet har tom skjæringsflate, og IntersectionObserver ville da
   aldri regne det som synlig – da ville det aldri bli avslørt. */
.js-bevegelse [data-anim="wipe"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--tid-avslor) var(--inn);
  transition-delay: var(--anim-delay, 0ms);
}
[data-anim="wipe"].synlig > * { clip-path: inset(0); }

/* --- Redusert bevegelse -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-anim], .hero__innhold > *, .stripe, .hero__bilde {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}