/* Knaben (/historier/knaben/): sakens egne stiler. Bygd etter
   «design_handoff_knaben» (okt 2026). Sakens aksent er GRUVEGUL fra
   fabrikkveggene (legges i styles.css, se PATCHES.md):
   --color-gruvegul på mørk bunn, --color-sverdgull-dyp på lys bunn.
   Brukes bare på etiketter, lenker, årstallsviseren, play-knappen og 42 –
   aldri som utheving av ord i løpende tekst (leverandørens ønske).
   Display i 400: @font-face i styles.css tegner 300 som 400. */

.kn {
  --kn-marg: clamp(20px, 5vw, 64px);
  --kn-luft: clamp(64px, 8vw, 120px);
  --kn-bred: 1000px;
}
:where(.kn) p, :where(.kn) h2, :where(.kn) h3, :where(.kn) figure,
:where(.kn) ul, :where(.kn) ol, :where(.kn) dl, :where(.kn) dd { margin: 0; }

.kn-lys { background: var(--color-cream); color: var(--color-midnight); }
.kn-lys--varm { background: var(--color-warm-white); }
.kn-mork { background: var(--color-midnight); color: var(--color-cream); }
.kn-nowrap { white-space: nowrap; }
.kn-midt { text-align: center; }

.kn-inner { max-width: var(--kn-bred); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.kn-inner--luft { gap: clamp(56px, 7vw, 96px); }
.kn-inner--krig { gap: clamp(72px, 9vw, 136px); }
.kn-spalte { width: 100%; max-width: 800px; margin: 0 auto; }
.kn-spalte-marg { box-sizing: border-box; width: 100%; max-width: calc(800px + 2 * var(--kn-marg)); margin: 0 auto; padding: 0 var(--kn-marg); }
.kn-bred-marg { box-sizing: border-box; width: 100%; max-width: calc(var(--kn-bred) + 2 * var(--kn-marg)); margin: 0 auto; padding: 0 var(--kn-marg); }
.kn-brod { display: flex; flex-direction: column; gap: 32px; }
:where(.kn-brod) p, .kn-brod-p { font-size: var(--brod); line-height: var(--linje-brod-luftig); text-wrap: pretty; }

.kn-etikett {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--etikett); line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg); text-transform: uppercase;
}
.kn-etikett--gul { color: var(--color-sverdgull-dyp); }
.kn-mork .kn-etikett--gul { color: var(--color-gruvegul); }

.kn-lenke { color: var(--color-sverdgull-dyp); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.kn-mork .kn-lenke { color: var(--color-gruvegul); }
.kn-lenke:hover { color: var(--color-midnight); }
.kn-lenke--stein { color: var(--color-stein); }
.kn-lenke--dempet { color: var(--tekst-dempet); }
.kn :focus-visible { outline: 2px solid var(--color-sverdgull-dyp); outline-offset: 4px; }
.kn .kn-mork :focus-visible { outline-color: var(--color-gruvegul); }

/* Alle Cormorant-tall: linjetall (gamle 7-tall treffer ellers teksten under). */
.kn-hero__tittel, .kn-mo__nummer, .kn-mo__symbol, .kn-mo__verdi, .kn-angrep__dato,
.kn-angrep__siffer, .kn-slutt__dato, .kn-aar__lenke, .kn-aar-pille { font-variant-numeric: lining-nums; }

/* --- Figurer ------------------------------------------------------ */
.kn-figur { display: flex; flex-direction: column; gap: 16px; }
.kn-figur img { display: block; width: 100%; height: auto; }
.kn-figur--beskaaret img { aspect-ratio: var(--kn-forhold); object-fit: cover; object-position: var(--kn-pos, 50% 50%); }
.kn-figur--ramme { width: 100%; max-width: var(--kn-maks, 520px); justify-self: center; }
.kn-figur--bred { width: 100%; max-width: var(--kn-bred); margin: 0 auto; }

.kn-bildetekst {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 4px 12px;
  font-size: var(--etikett-stor); line-height: var(--linje-etikett); letter-spacing: var(--sperring-2xs);
}
.kn-figur:not(.kn-figur--full) .kn-bildetekst { border-top: 1px solid var(--color-sand); padding-top: 14px; }
.kn-mork .kn-figur:not(.kn-figur--full) .kn-bildetekst { border-top-color: var(--surface-utility); }
.kn-figur--full .kn-bildetekst { box-sizing: border-box; width: 100%; max-width: 1368px; margin: 0 auto; padding: 0 var(--kn-marg); }
.kn-bildetekst__tekst { flex: 0 1 auto; min-width: 0; max-width: 72ch; color: var(--color-midnight); }
.kn-bildetekst__kreditt { flex: 0 1 auto; max-width: 100%; color: var(--tekst-dempet); }
.kn-mork .kn-bildetekst__tekst { color: var(--color-sand); }
.kn-mork .kn-bildetekst__kreditt { color: var(--tekst-dempet-mork); }

.kn-to-kol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 7vw, 112px); align-items: center;
}
.kn-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 3vw, 40px); align-items: start; }

/* --- Årstallsviseren ------------------------------------------------ */
.kn-aar, .kn-aar-pille { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.kn-aar.er-synlig, .kn-aar-pille.er-synlig { opacity: 1; pointer-events: auto; }
.kn-aar { display: none; }
.kn-aar-pille {
  position: fixed; left: 16px; top: calc(var(--nav-height) + 12px); z-index: 900;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-gruvegul) 50%, transparent);
  background: color-mix(in srgb, var(--color-midnight) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--color-gruvegul);
}
.kn-aar-pille__prikk { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gruvegul); }
@media (min-width: 1420px) {
  .kn-aar-pille { display: none; }
  .kn-aar {
    --kn-aar-aksent: var(--color-sverdgull-dyp); --kn-aar-linje: var(--color-sand); --kn-aar-bunn: var(--color-cream);
    --kn-aar-forbi: var(--color-stein); --kn-aar-kommer: var(--tekst-dempet);
    display: block; position: fixed; z-index: 900; top: 50%; transform: translateY(-50%);
    left: calc(50% - var(--kn-bred) / 2 - 205px);
  }
  .kn-aar[data-tone='mork'] {
    --kn-aar-aksent: var(--color-gruvegul); --kn-aar-linje: var(--surface-utility); --kn-aar-bunn: var(--color-midnight);
    --kn-aar-forbi: var(--color-sand); --kn-aar-kommer: var(--tekst-dempet-mork);
  }
  .kn-aar__liste { list-style: none; margin: 0; padding: 0 0 0 24px; position: relative; display: flex; flex-direction: column; gap: 18px; }
  .kn-aar__linje, .kn-aar__fyll { position: absolute; left: 4px; top: 12px; }
  .kn-aar__linje { bottom: 12px; width: 1px; background: var(--kn-aar-linje); }
  .kn-aar__fyll { width: 2px; height: calc((100% - 24px) * var(--kn-aar-p, 0)); background: var(--kn-aar-aksent); transition: height 0.4s; }
  .kn-aar__ledd { position: relative; display: flex; align-items: center; min-height: 26px; }
  .kn-aar__prikk { position: absolute; left: -24px; width: 10px; height: 10px; border-radius: 50%; background: var(--kn-aar-linje); outline: 4px solid var(--kn-aar-bunn); }
  .kn-aar__ledd.er-forbi .kn-aar__prikk, .kn-aar__ledd.er-aktiv .kn-aar__prikk { background: var(--kn-aar-aksent); }
  .kn-aar__lenke {
    font-family: var(--font-body); font-size: var(--text-sm); line-height: 1; letter-spacing: var(--sperring-sm);
    color: var(--kn-aar-kommer); text-decoration: none; white-space: nowrap; transition: color 0.3s, font-size 0.3s;
  }
  .kn-aar__ledd.er-forbi .kn-aar__lenke { color: var(--kn-aar-forbi); }
  .kn-aar__ledd.er-aktiv .kn-aar__lenke { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 0; color: var(--kn-aar-aksent); }
}
@media (prefers-reduced-motion: reduce) { .kn-aar, .kn-aar-pille, .kn-aar__fyll { transition: none; } }

/* --- 1 · Topp -------------------------------------------------------- */
.kn-hero { padding-top: var(--nav-height); }
.kn-hero__figur { display: flex; flex-direction: column; gap: 16px; }
.kn-hero__ramme { position: relative; overflow: hidden; width: 100%; height: max(420px, 100vh - var(--nav-height)); background: var(--color-midnight); }
@supports (height: 100svh) { .kn-hero__ramme { height: max(420px, 100svh - var(--nav-height)); } }
.kn-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kn-hero__slor {
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--color-midnight) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-midnight) 78%, transparent) 30%,
    color-mix(in srgb, var(--color-midnight) 40%, transparent) 52%,
    transparent 72%);
}
.kn-hero__innhold { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--kn-marg) clamp(36px, 6vh, 72px); }
.kn-hero__eyebrow, .kn-hero__h1 { max-width: 1240px; margin-left: auto; margin-right: auto; }
.kn-hero__eyebrow {
  margin-bottom: clamp(12px, 1.6vw, 20px); font-size: var(--text-eyebrow); line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg); text-transform: uppercase; color: var(--color-gruvegul);
}
.kn-hero__h1 { display: flex; flex-direction: column; gap: clamp(6px, 1vw, 14px); font: inherit; }
.kn-hero__tittel {
  font-family: var(--font-display); font-weight: 400;
  /* typografi-unntak: H1 «Knaben» er ett kort ord og skal bære hele toppen, maks 9rem */
  font-size: clamp(3.5rem, 1.5634rem + 8.2629vw, 9rem);
  line-height: var(--linje-tett); letter-spacing: var(--sperring-tett); color: var(--color-warm-white);
}
.kn-hero__under {
  max-width: 24ch; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-3xl); line-height: var(--linje-tittel); color: var(--color-sand); text-wrap: balance;
}
.kn-hero__tekst { padding: 0 clamp(20px, 3.4vw, 48px); }

/* --- 2 · Ingress ----------------------------------------------------- */
.kn-ingress {
  display: flex; flex-direction: column; align-items: center; gap: clamp(56px, 7vw, 104px);
  padding: clamp(48px, 6vw, 88px) var(--kn-marg) var(--kn-luft);
}
.kn-ingress__tekst {
  max-width: 800px; font-family: var(--font-display); font-weight: 400;
  font-size: var(--brod-loft); line-height: var(--linje-kort); color: var(--color-warm-white); text-wrap: pretty;
}

/* --- 3 · Molybden ---------------------------------------------------- */
.kn-mo { padding: var(--kn-luft) var(--kn-marg); }
.kn-mo__rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 3vw, 40px); align-items: start; }
.kn-mo__flis {
  width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; padding: clamp(20px, 3vw, 40px);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--color-midnight); color: var(--color-cream);
}
.kn-mo__topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.kn-mo__nummer { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1; color: var(--color-gruvegul); }
.kn-mo__smelte { font-size: var(--etikett-stor); letter-spacing: var(--sperring-sm); color: var(--tekst-dempet-mork); text-align: right; white-space: nowrap; }
.kn-mo__symbol {
  align-self: center; font-family: var(--font-display); font-weight: 400;
  /* typografi-unntak: grunnstoffsymbolet er flisas bilde, 112–240 px */
  font-size: clamp(7rem, 4.1831rem + 12.0188vw, 15rem);
  /* Under 1: symbolet skal fylle flisa uten luft over og under. */
  line-height: 0.8; letter-spacing: var(--sperring-tett); color: var(--color-warm-white);
}
.kn-mo__navn { text-align: center; font-size: var(--text-eyebrow); letter-spacing: var(--sperring-xl); text-transform: uppercase; color: var(--color-sand); }
.kn-mo__fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 clamp(24px, 3vw, 40px); border-top: 1px solid var(--color-sand); }
.kn-mo__faktum { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--color-sand); }
.kn-mo__verdi { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-midnight); white-space: nowrap; }
.kn-mo__etym { font-size: var(--brod-kort); line-height: var(--linje-brod); color: var(--color-midnight); text-wrap: pretty; }

/* --- 4–5 · Tidlig historie ------------------------------------------- */
.kn-bonder { padding: var(--kn-luft) var(--kn-marg); }
.kn-mellom { padding: 0 var(--kn-marg) var(--kn-luft); }
.kn-mellom .kn-inner--luft { gap: clamp(72px, 9vw, 128px); }

/* --- 6 · Krigen ------------------------------------------------------ */
.kn-krig { padding: clamp(80px, 10vw, 152px) var(--kn-marg) var(--kn-luft); }
.kn-krig__tittel {
  margin-bottom: clamp(8px, 1.5vw, 20px); font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-5xl); line-height: var(--linje-tett); letter-spacing: var(--sperring-tett);
  color: var(--color-warm-white); text-wrap: balance;
}
.kn-angrep { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); border-top: 1px solid var(--surface-utility); }
.kn-angrep__ledd { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--surface-utility); }
@media (min-width: 860px) {
  .kn-angrep__ledd:first-child { padding-right: clamp(0px, 4vw, 56px); }
  .kn-angrep__ledd + .kn-angrep__ledd { padding-left: clamp(0px, 4vw, 56px); border-left: 1px solid var(--surface-utility); }
}
.kn-angrep__hode { display: flex; flex-direction: column; gap: 6px; }
.kn-angrep__dato { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--linje-hero); color: var(--color-warm-white); }
.kn-angrep__tall { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.kn-angrep__siffer {
  font-family: var(--font-display); font-weight: 400;
  /* typografi-unntak: plakattall for angrepene, 72–128 px */
  font-size: clamp(4.5rem, 3.2676rem + 5.2582vw, 8rem);
  /* Under 1: tallet sitter tett på teksten ved siden av. */
  line-height: 0.85; letter-spacing: var(--sperring-tett); color: var(--color-warm-white);
}
.kn-angrep__tallTekst { font-size: var(--brod-kort); letter-spacing: var(--sperring-xs); color: var(--tekst-dempet-mork); }
.kn-angrep__tekst { font-size: var(--brod-kort); line-height: var(--linje-brod); color: var(--color-sand); text-wrap: pretty; }

/* --- 7 · Etter krigen ------------------------------------------------ */
.kn-etter { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); padding: var(--kn-luft) 0; }

/* --- 8 · 1973 -------------------------------------------------------- */
.kn-slutt { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); padding: clamp(80px, 10vw, 152px) 0 var(--kn-luft); }
.kn-slutt__tekst { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.kn-slutt__dato {
  font-family: var(--font-display); font-weight: 400;
  /* typografi-unntak: datoen gruvene ble lagt ned er saken vendepunkt, 45–96 px */
  font-size: clamp(2.8rem, 1.6732rem + 4.8075vw, 6rem);
  line-height: var(--linje-tett); letter-spacing: var(--sperring-tett); color: var(--color-warm-white);
}

/* --- 9 · I dag ------------------------------------------------------- */
.kn-idag { padding: var(--kn-luft) var(--kn-marg); }

/* --- 10 · Museum ----------------------------------------------------- */
.kn-museum { padding: var(--kn-luft) var(--kn-marg); }
.kn-museum__hode { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.kn-museum__tittel { font-family: var(--font-display); font-weight: 400; font-size: var(--text-5xl); line-height: var(--linje-tett); letter-spacing: var(--sperring-tett); color: var(--color-midnight); }
.kn-museum__kol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(40px, 6vw, 96px);
  border-top: 1px solid var(--color-sand); padding-top: clamp(32px, 4vw, 56px);
}
.kn-museum__del { display: flex; flex-direction: column; gap: 24px; }
.kn-museum__h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--linje-hero); color: var(--color-midnight); }
.kn-museum__p { font-size: var(--brod-kort); line-height: var(--linje-brod); color: var(--color-midnight); text-wrap: pretty; }
.kn-museum__merk { padding: 18px 0; border-top: 1px solid var(--color-sand); border-bottom: 1px solid var(--color-sand); font-size: var(--brod-kort); line-height: var(--linje-brod-tett); font-weight: 700; }
/* Museumsgalleriet. Tilstandsklassene (is-paa, is-inn-*, is-ut-*) settes av
   karusell.js; hver bruker tegner dem selv (som v-galleri på stedssidene). */
.kn-galleri { display: flex; flex-direction: column; gap: 16px; }
.kn-galleri__spor {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-sand);
}
.kn-galleri__stopp {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s 0.85s;
}
.kn-galleri__stopp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kn-galleri__stopp.is-paa { visibility: visible; transform: translateX(0); z-index: 2; transition-delay: 0s, 0s; }
.kn-galleri__stopp.is-inn-hoyre { visibility: visible; transform: translateX(100%); }
.kn-galleri__stopp.is-inn-venstre { visibility: visible; transform: translateX(-100%); }
.kn-galleri__stopp.is-ut-venstre { visibility: visible; transform: translateX(-100%); z-index: 1; }
.kn-galleri__stopp.is-ut-hoyre { visibility: visible; transform: translateX(100%); z-index: 1; }
.kn-galleri__stopp.is-uten-overgang { transition: none !important; }
.kn-galleri__piler {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  border-top-left-radius: var(--radius-lg);
  overflow: hidden;
}
.kn-galleri__pil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 6vw, 84px);
  height: clamp(50px, 5vw, 66px);
  border: 0;
  background: var(--color-cream);
  color: var(--color-midnight);
  cursor: pointer;
  transition: background 0.2s;
}
.kn-galleri__pil--forrige { border-right: 1px solid var(--color-sand); }
.kn-galleri__pil svg { width: 22px; height: 22px; }
.kn-galleri__pil:hover, .kn-galleri__pil:focus-visible { background: var(--color-mist); }
.kn-galleri__pil:focus-visible { outline: 2px solid var(--color-midnight); outline-offset: -4px; }
.kn-galleri .kn-bildetekst { border-top: 1px solid var(--color-sand); padding-top: 14px; }
.kn-galleri__teller {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Før init (og uten JS): første bilde står, pilene skjules. */
.kn-galleri:not(.is-klar) .kn-galleri__stopp:first-child { visibility: visible; transform: none; }
.kn-galleri:not(.is-klar) .kn-galleri__piler { display: none; }
@media (max-width: 700px) {
  .kn-galleri__spor { aspect-ratio: 4 / 3; }
  .kn-galleri__pil { width: 44px; height: 44px; }
  .kn-galleri__pil svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .kn-galleri__stopp { transition: none !important; }
  .kn-galleri__stopp.is-inn-hoyre, .kn-galleri__stopp.is-inn-venstre { transform: none; }
}

.kn-museum__lenke { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; }
.kn-museum__mer { font-size: var(--brod-kort); color: var(--color-stein); }
.kn-knapp {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px;
  border: 1px solid var(--color-midnight); border-radius: 999px; color: var(--color-midnight); text-decoration: none;
  font-size: var(--etikett); line-height: var(--linje-etikett); letter-spacing: var(--sperring-md); text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.kn-knapp:hover { background: var(--color-midnight); color: var(--color-cream); }

/* --- 11 · Avslutning ------------------------------------------------- */
.kn-avslutning { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); padding-bottom: var(--kn-luft); }
.kn-avslutning__tekst {
  box-sizing: border-box; max-width: calc(900px + 2 * var(--kn-marg)); margin: 0 auto; padding: clamp(24px, 3vw, 48px) var(--kn-marg) 0;
  text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--text-4xl); line-height: var(--linje-tittel); color: var(--color-midnight); text-wrap: balance;
}

/* --- 12 · Film ------------------------------------------------------- */
.kn-film { padding: var(--kn-luft) var(--kn-marg); }
.kn-film__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); }
.kn-film__hode { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.kn-film__tittel { font-family: var(--font-display); font-weight: 400; font-size: var(--text-5xl); line-height: var(--linje-tett); letter-spacing: var(--sperring-tett); color: var(--color-warm-white); }
.kn-film__ramme {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* farge-unntak: letterbox bak video */
  background: #000;
  overflow: hidden;
}
.kn-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kn-film__knapp {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(0deg, color-mix(in srgb, var(--color-midnight) 55%, transparent), color-mix(in srgb, var(--color-midnight) 5%, transparent) 60%);
}
.kn-film__knapp[hidden] { display: none; }
.kn-film__sirkel {
  width: clamp(72px, 8vw, 104px); height: clamp(72px, 8vw, 104px); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--color-gruvegul);
  background: color-mix(in srgb, var(--color-midnight) 60%, transparent); border: 1px solid var(--color-gruvegul);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.kn-film__kreditt { font-size: var(--etikett-stor); line-height: var(--linje-etikett); letter-spacing: var(--sperring-2xs); color: var(--tekst-dempet-mork); }

/* --- 13 · Kilder ----------------------------------------------------- */
.kn-kilder { padding: clamp(56px, 7vw, 96px) var(--kn-marg) clamp(72px, 9vw, 128px); }
.kn-kilder__inner { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--color-sand); padding-top: 36px; }
.kn-kilder__tittel { color: var(--tekst-dempet); }
.kn-kilder__liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm); line-height: var(--linje-brod-tett); }

/* Mobil: seksjonsluften (styles.css, --mobil-seksjon). */
@media (max-width: 767px) {
  .kn { --kn-luft: var(--mobil-seksjon); }
  /* Krigen og 1973 åpner med et trinn mer, som Snartemosverdets vendepunkter. */
  .kn-krig,
  .kn-slutt { padding-top: var(--space-3xl); }
}