/* =====================================================================
   Felles stil for alle sidene på taragot-nettsiden.
   Bruker KUN variablene fra tokens.css (farger, fonter, størrelser).
   Ny layout 2026-10-26 etter Mildrids skisser.
   ===================================================================== */

/* Skriften Inter (OFL-lisens, se skrift/LISENS-Inter-OFL.txt) ligger på nettsiden */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("skrift/inter-regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("skrift/inter-medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("skrift/inter-semibold.woff") format("woff"); }

* { box-sizing: border-box; }

/* «Hopp til innhold»: skjult til man trykker Tab */
.hopp {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--text); color: #FFFFFF; padding: 10px 16px; border-radius: 6px;
  font-size: var(--t-liten); font-weight: 600; transition: top .15s ease;
}
.hopp:focus { top: 12px; }
main:focus { outline: none; }
main { scroll-margin-top: 130px; } /* så toppmenyen ikke dekker overskriften etter «Hopp til innhold» */

/* Personvern-siden */
.juridisk { max-width: 68ch; padding: 0 var(--gutter) var(--seksjon-luft); }
.juridisk h2 { font-size: var(--t-meny); font-weight: 600; margin: 40px 0 10px; }
.juridisk p, .juridisk li { font-size: var(--t-brod); line-height: 1.65; margin: 0 0 12px; }
.juridisk ul { padding-left: 20px; margin: 0 0 12px; }
.juridisk .lenke { font-size: inherit; }
.juridisk .oppdatert { color: var(--text-svak-2); font-size: var(--t-liten); margin-top: 40px; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-brodtekst);
  font-size: var(--t-brod);
  line-height: var(--linjehoyde);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Tekst bare for skjermlesere */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Synlig tastaturfokus på alt som kan klikkes */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px;
}

.proto-varsel {
  background: var(--text); color: var(--bg);
  font-family: var(--font-meny); font-size: var(--t-liten);
  text-align: center; padding: 8px 16px; letter-spacing: 0.02em;
}

/* Lik luft over og under hver seksjon */
:root { --seksjon-luft: 72px; }

.innhold { padding: 0 var(--gutter); }

/* --- Overskrifter ------------------------------------------------------
   H1 forside: stor introsetning (.intro h1)
   H1 underside: sidetittel med store bokstaver (.sidetittel)
   H2: seksjonsoverskrift (.tittel)
   H3: underoverskrift / korttittel                                       */
.tittel {
  font-family: var(--font-overskrift);
  font-size: var(--t-h2-ny); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1.2; margin: 0;
}
.undertittel {
  font-size: var(--t-meny); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0;
}

/* --- Toppmeny ---------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px var(--gutter) 18px;
  transition: transform .3s ease;
}
.nav--skjult { transform: translateY(-100%); }

.logo { display: inline-block; }
.logo img { display: block; width: 97px; height: auto; }

.nav-lenker { display: flex; align-items: center; gap: clamp(28px, 6vw, 72px); padding-top: 14px; }
.nav-lenker a, .sprak {
  font-family: var(--font-meny); font-size: var(--t-nav); font-weight: 500;
  text-transform: uppercase; color: var(--text);
  transition: opacity .15s ease;
}
.nav-lenker a:hover, .sprak:hover { opacity: .45; }
/* Siden man står på: oransje strek under (teksten forblir svart for kontrast) */
.nav-lenker a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--aksent);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}

.sprak {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.sprak svg { width: 12px; height: 12px; transition: transform .15s ease; }
.sprak[aria-expanded="true"] svg { transform: rotate(180deg); }
.sprakvelger { position: relative; }
.sprak-liste {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  list-style: none; margin: 0; padding: 6px 0; min-width: 150px;
  background: var(--bg-alt); border: 1px solid var(--linje); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.sprak-liste[hidden] { display: none; }
.nav-lenker .sprak-liste a { display: block; padding: 9px 16px; text-transform: none; font-weight: 400; }
.nav-lenker .sprak-liste a:hover { opacity: 1; background: var(--bg-alt-2); }
.sprak-liste a[aria-current="true"] { font-weight: 600; }
.sprak-liste a[aria-current="true"]::after { content: " ✓"; }

/* Ekstra innhold i mobilmenyen (språk og sosiale medier) – skjult på PC */
.meny-mobil { display: none; }
.meny-some { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.nav-lenker .meny-some a {
  font-size: var(--t-liten); font-weight: 400; text-transform: none;
  text-decoration: underline; text-decoration-color: var(--aksent); text-underline-offset: 4px;
}

.meny-knapp {
  display: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--aksent); background: none; color: var(--text);
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.meny-knapp svg { width: 22px; height: 22px; }
.meny-knapp .ikon-lukk, .nav--apen .meny-knapp .ikon-meny { display: none; }
.nav--apen .meny-knapp .ikon-lukk { display: block; }

/* --- Forside: intro ---------------------------------------------------- */
.intro { padding: 72px var(--gutter) var(--seksjon-luft); }
.intro h1 {
  margin: 0; max-width: 23em;
  font-size: clamp(28px, 2.8vw, 38px); font-weight: 400;
  line-height: 1.15; letter-spacing: -0.015em;
}

/* --- Undersider: sidetopp ---------------------------------------------- */
.sidetopp { padding: 72px var(--gutter) 56px; }
.sidetittel {
  margin: 0;
  font-size: var(--t-sidetittel-ny); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1;
}
/* Sidetittel til venstre, ingress til høyre (samme kolonner som .to-kol) */
.sidetopp--to-kol { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; align-items: start; }
.sidetopp--to-kol .sideingress { margin-top: 4px; }
.sideingress {
  margin: 28px 0 0; max-width: 56ch;
  font-size: var(--t-ingress); line-height: 1.4;
}

/* --- Utgivelser -------------------------------------------------------- */
#utgivelser { padding-top: var(--seksjon-luft); }
.utgivelser-topp { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.pilknapper { display: none; gap: 10px; }
.pil {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--aksent); background: none; color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: opacity .15s ease;
}
.pil svg { width: 18px; height: 18px; }
.pil:disabled { opacity: .3; cursor: default; }

.kort-rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
/* Utgivelser oppfører seg som kort (hele flaten er klikkbar),
   men uten ramme – bare cover og tekst. */
.kort { display: block; position: relative; border-radius: 4px; }
.cover {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--bg-alt-2); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px;
  color: var(--text-svak-2); font-size: var(--t-caption);
}
.cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: filter .3s ease;
}
/* Hover: coveret blekner litt (beholder fargene), som tegn på at det kan klikkes */
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--bg); opacity: 0; transition: opacity .3s ease;
}
.kort:hover .cover::before, .kort:focus-visible .cover::before { opacity: .5; }
/* Hårlinje rundt coveret, så lyse covere ikke flyter ut i bakgrunnen */
.cover::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--cover-kant); pointer-events: none;
}
.kort h3 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: var(--t-meny); font-weight: 500; margin: 14px 0 2px; line-height: 1.3;
}
.kort .pil-ut { flex: none; font-weight: 400; color: var(--text-svak-2); transition: color .15s ease, transform .15s ease; }
.kort:hover .pil-ut, .kort:focus-visible .pil-ut { color: var(--text); transform: translate(2px, -2px); }
.kort .artist { font-size: var(--t-meny); color: var(--text-svak-2); margin: 0; line-height: 1.3; }
.kort .format { font-size: var(--t-caption); color: var(--text-svak-2); margin: 4px 0 0; }
/* Søk i katalogen */
.katalogsok { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 36px; }
.sokefelt {
  display: flex; align-items: center; gap: 10px; flex: 0 1 420px;
  height: 48px; padding: 0 8px 0 16px;
  border: 1px solid var(--felt-kant); border-radius: 6px; background: var(--bg-alt);
  transition: border-color .15s ease;
}
.sokefelt:hover { border-color: var(--text); }
.sokefelt:focus-within { border-color: var(--text); outline: 2px solid var(--text); outline-offset: 1px; }
.sokefelt > svg { flex: none; width: 18px; height: 18px; color: var(--text-svak-2); }
.sokefelt input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font-family: var(--font-brodtekst); font-size: var(--t-meny); color: var(--text);
}
.sokefelt input::placeholder { color: var(--text-svak-2); }
.sokefelt input::-webkit-search-cancel-button { display: none; }
.sok-tom {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: none;
  color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.sok-tom[hidden] { display: none; }
.sok-tom:hover { background: var(--bg-alt-2); }
.sok-tom svg { width: 16px; height: 16px; }
.sok-antall { margin: 0; font-size: var(--t-liten); color: var(--text-svak-2); }
.sok-ingen { margin: 0 0 40px; font-size: var(--t-meny); }
.kort[hidden] { display: none; }

/* Kommende utgivelse: merke oppå coveret. Fjernes automatisk på slippdagen (felles.js). */
.slipp-merke {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  background: rgba(0, 0, 0, .72); color: #FFFFFF;
  border: 1.5px solid var(--aksent); backdrop-filter: blur(2px);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: 999px;
}

.se-alle { margin: 56px 0 var(--seksjon-luft); }
.katalog { padding-bottom: var(--seksjon-luft); }

/* --- Knapper ------------------------------------------------------------
   Sekundær: oransje kant. Primær: fylt oransje, svart tekst.            */
.knapp {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  background: none; color: var(--text);
  border: 1.5px solid var(--aksent); border-radius: 999px;
  font-family: var(--font-meny); font-size: var(--t-knapp); font-weight: 500;
  padding: 9px 14px 9px 13px;
  transition: background .15s ease, color .15s ease;
}
.knapp svg { width: 16px; height: 16px; transition: transform .15s ease; }
.knapp:hover { background: var(--aksent); }
.knapp:hover svg { transform: translateX(3px); }
.knapp--primar { background: var(--aksent); border-color: var(--aksent); color: var(--text); font-weight: 600; }
.knapp--primar:hover { background: var(--text); border-color: var(--text); color: #FFFFFF; }

/* --- Tekstlenker ------------------------------------------------------- */
.lenke {
  font-size: var(--t-meny);
  text-decoration: underline; text-decoration-color: var(--aksent);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: opacity .15s ease;
}
.lenke:hover { opacity: .55; }

/* --- To kolonner: tittel til venstre, innhold til høyre ---------------- */
.to-kol {
  display: grid; grid-template-columns: 1fr 2fr; gap: 56px;
  padding: var(--seksjon-luft) var(--gutter);
}
.to-kol .tittel { margin-bottom: 12px; }
.ingress { margin: 0; font-size: var(--t-meny); color: var(--text-svak-2); max-width: 32ch; }

/* --- Nyhetsbrev -------------------------------------------------------- */
.felter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.felt label { display: block; font-size: var(--t-liten); color: var(--text); margin-bottom: 6px; }
.felt input {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--bg-alt);
  border: 1px solid var(--felt-kant); border-radius: 6px;
  font-family: var(--font-brodtekst); font-size: var(--t-meny); color: var(--text);
  transition: border-color .15s ease;
}
.felt input:hover { border-color: var(--text); }
.felt input:focus { outline: 2px solid var(--text); outline-offset: 1px; border-color: var(--text); }
.personvern { font-size: var(--t-caption); color: var(--text-svak-2); margin: 0 0 22px; }
.personvern a { text-decoration: underline; text-underline-offset: 3px; }
/* Nyhetsbrev: bekreftelse vises der skjemaet stod, uten ny side */
.bekreftelse {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 28px; border: 1px solid var(--linje); border-radius: 6px;
  background: var(--bg-alt);
}
.bekreftelse[hidden], .skjema-feil[hidden], #paamelding[hidden] { display: none; }
.bekreftelse:focus { outline: none; }
.bekreftelse-ikon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--aksent); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.bekreftelse-ikon svg { width: 22px; height: 22px; }
.bekreftelse-tittel { margin: 6px 0 6px; font-size: var(--t-meny); font-weight: 600; }
.bekreftelse-tekst { margin: 0 0 16px; font-size: var(--t-liten); color: var(--text-svak-2); line-height: 1.6; }
.bekreftelse-tekst strong { color: var(--text); font-weight: 500; }
.tekstknapp {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--t-liten); color: var(--text);
  text-decoration: underline; text-decoration-color: var(--aksent); text-underline-offset: 4px;
}
.tekstknapp:hover { opacity: .55; }
.skjema-feil { margin: 14px 0 0; font-size: var(--t-liten); color: #B3261E; }
.knapp[aria-busy="true"] { opacity: .6; cursor: progress; }

/* --- Kontaktliste ------------------------------------------------------ */
.kontaktliste { list-style: none; margin: 0; padding: 0; }
.kontaktliste li {
  display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 24px; align-items: baseline;
  padding: 10px 0;
}
.kontaktliste .navn { font-size: var(--t-meny); font-weight: 500; }
.kontaktliste .tlf { justify-self: start; }

/* --- Om oss ------------------------------------------------------------ */
.bilde-plass {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--bg-alt-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-svak-2); font-size: var(--t-liten); text-align: center; padding: 16px;
}
.bilde-plass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fellesbilde { margin: 0; padding: 0 var(--gutter); }
.fellesbilde .bilde-plass { aspect-ratio: 21 / 9; }
.fellesbilde figcaption { margin-top: 12px; font-size: var(--t-caption); color: var(--text-svak-2); }

.brodtekst { max-width: 62ch; }
.brodtekst p { margin: 0 0 1.2em; font-size: var(--t-brod); line-height: 1.65; }
.brodtekst p:last-child { margin-bottom: 0; }
.brodtekst .lenke { font-size: inherit; }

.folk-seksjon { padding-bottom: 16px; }
.folk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.person .bilde-plass { aspect-ratio: 4 / 5; }
.person h3 { margin: 16px 0 2px; font-size: var(--t-meny); font-weight: 500; line-height: 1.3; }
.person p { margin: 0; font-size: var(--t-liten); color: var(--text-svak-2); line-height: 1.45; }
.person-kontakt { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.person-kontakt .lenke { font-size: var(--t-liten); }

/* --- Footer ------------------------------------------------------------ */
footer {
  margin: 0 var(--gutter); padding: var(--seksjon-luft) 0 32px;
  border-top: 1px solid var(--linje-sterk);
  font-size: var(--t-liten); color: var(--text);
}
/* Kontakt oss er første del av footeren: tittel til venstre, innhold til høyre.
   Personene, adressen og Følg oss står i ett felles rutenett, så kolonnene
   står i linje og avstanden er lik overalt. */
.footer-kontakt { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; padding-bottom: 56px; }
.footer-grid {
  display: grid; grid-template-columns: repeat(4, max-content);
  justify-content: space-between; gap: 40px 24px;
}
.footer-kol--person h3 { white-space: nowrap; }
/* Litt ekstra luft mellom personene og Adresse / Følg oss */
.footer-grid > .footer-kol:not(.footer-kol--person) { margin-top: 24px; }
.footer-kol h3 {
  margin: 0 0 10px; font-size: var(--t-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-svak-2);
}
.footer-kol p, .footer-kol ul { margin: 0; padding: 0; list-style: none; line-height: 1.9; }
.footer-kol .lenke { font-size: var(--t-liten); }
.footer-bunn {
  display: flex; justify-content: flex-start; align-items: center; gap: 24px; flex-wrap: wrap;
  padding-top: 8px; font-size: var(--t-caption); color: var(--text-svak-2);
}
/* Til toppen: rund knapp med pil, samme stil som menyknappen.
   Ligger fast nede i høyre hjørne og vises når man har scrollet ned. */
.til-toppen {
  position: fixed; right: var(--gutter); bottom: 24px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--aksent); background: var(--bg); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
}
.til-toppen--synlig { opacity: 1; visibility: visible; transform: none; }
.til-toppen svg { width: 20px; height: 20px; transition: transform .15s ease; }
.til-toppen:hover { background: var(--aksent); }
.til-toppen:hover svg { transform: translateY(-2px); }
body.meny-apen .til-toppen { visibility: hidden; }

/* =====================================================================
   NETTBRETT
   ===================================================================== */
@media (max-width: 1180px) {
  /* Smalere skjerm: to kolonner, så navnene ikke deles */
  .footer-grid { grid-template-columns: repeat(2, max-content); justify-content: start; column-gap: 72px; }
}
@media (max-width: 1000px) {
  .kort-rad { grid-template-columns: repeat(2, 1fr); }

  /* Nettbrett og mobil: tittel over innholdet i Kontakt oss og på Katalog */
  .footer-kontakt { grid-template-columns: 1fr; gap: 24px; }
  .sidetopp--to-kol { grid-template-columns: 1fr; gap: 0; }
  .sokefelt { flex-basis: 100%; }
  .sidetopp--to-kol .sideingress { margin-top: 24px; }

  /* Nettbrett og mobil: rund menyknapp i stedet for menylinjen */
  .nav { align-items: center; padding: 16px var(--gutter); }
  /* Mobilmeny: dekker hele skjermen, store lenker.
     Ligger bak logo og lukkeknapp (z-index -1 inne i headeren). */
  .nav-lenker {
    display: none; z-index: -1;
    position: fixed; inset: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg);
    padding: var(--meny-topp, 136px) var(--gutter) 40px;
    overflow-y: auto;
  }
  .nav--apen .nav-lenker { display: flex; }
  .nav-lenker > a {
    font-size: var(--t-meny-stor); font-weight: 400; line-height: 1.15;
    letter-spacing: 0.01em; padding: 10px 0;
    text-decoration: underline; text-decoration-color: var(--aksent);
    text-decoration-thickness: 1.5px; text-underline-offset: 8px;
  }
  .nav-lenker > a[aria-current="page"] { text-decoration-thickness: 3px; }
  .nav-lenker > a:hover { opacity: .55; }
  .sprakvelger { margin-top: 36px; }
  .sprak { font-size: var(--t-meny); padding: 6px 0; }
  .sprak svg { width: 14px; height: 14px; }
  .sprak-liste { position: static; margin-top: 10px; box-shadow: none; min-width: 180px; }
  .nav-lenker .sprak-liste a { padding: 12px 16px; }
  .meny-mobil { display: block; margin-top: 36px; }
  .meny-knapp { display: inline-flex; }
  body.meny-apen { overflow: hidden; }
}

/* =====================================================================
   MOBIL
   ===================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 20px; --t-h2-ny: 20px; --t-sidetittel-ny: 28px; --t-ingress: 19px; --seksjon-luft: 48px; }

  .logo img { width: 68px; }

  .intro { padding: 28px var(--gutter) var(--seksjon-luft); }
  .intro h1 { font-size: 24px; }
  .sidetopp { padding: 32px var(--gutter) 36px; }
  .sidetopp--to-kol { grid-template-columns: 1fr; gap: 0; }
  .sidetopp--to-kol .sideingress { margin-top: 18px; }

  .utgivelser-topp { margin-bottom: 18px; }
  .pilknapper { display: flex; }

  /* Katalog: to cover per rad på mobil (50+ utgivelser) */
  .kort-rad { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .kort-rad .kort h3, .kort-rad .kort .artist { font-size: var(--t-liten); }

  /* Forsiden: karusell. Første cover starter i linje med resten av innholdet. */
  .karusell {
    display: flex; gap: 16px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; touch-action: pan-x pan-y;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
    scroll-padding: 0 var(--gutter);
  }
  .karusell::-webkit-scrollbar { display: none; }
  .karusell .kort {
    flex: 0 0 78%; scroll-snap-align: start;
    opacity: .4; transition: opacity .25s ease;
  }
  .karusell .kort.fokus { opacity: 1; }
  .karusell .kort:hover .cover::before { opacity: 0; }
  .karusell .kort h3, .karusell .kort .artist { font-size: var(--t-meny); }

  .se-alle { margin: 36px 0 var(--seksjon-luft); }

  .to-kol { grid-template-columns: 1fr; gap: 20px; }
  .felter { grid-template-columns: 1fr; gap: 26px; margin-bottom: 34px; }
  .bekreftelse { padding: 22px; gap: 16px; }
  .kontaktliste li { grid-template-columns: 1fr; gap: 4px; padding: 0 0 24px; }

  .fellesbilde .bilde-plass { aspect-ratio: 4 / 3; }
  .folk { grid-template-columns: 1fr; gap: 40px; }

  footer { padding: 48px 0 28px; }
  .footer-kontakt { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-kol--person { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav, .kort, .cover img { transition: none; }
}

.footer-bunn .lenke { font-size: var(--t-caption); }