/* «Fargerik fuglekikking på Lista» — spesialdesign, portert fra Claude
   Design-handoffen «design_handoff_fuglekikking_lista» (23. sep 2026).

   Prototypens tall er INTENSJON. Her er de oversatt til husets roller:
   grad fra --text-* / --brod* / --etikett*, linjeavstand fra --linje-*,
   sperring fra --sperring-*, farge fra paletten. Der prototypen hadde alfa
   på tekst, står rolletokenet --tekst-dempet-mork.

   Monoskriften prototypen brukte i dekk-telleren og «dekar»-linja er byttet
   til brødskriften med etikettrolle: --font-mono er reservert tidskartet.

   Oppsettet uten JS er FLATT (kortene under hverandre, alle sesongpanelene,
   kikkerten åpen). .fk--scener slås på av fuglekikking.js og gir de
   fastlåste scenene. Redusert bevegelse får aldri scenene. */

.fk {
  --fk-bunn: var(--color-midnight);
  --fk-bunn-2: var(--color-marine-dyp);
  --fk-tekst: var(--color-cream);
  --fk-tittel: var(--color-warm-white);
  --fk-aurora: var(--color-aurora);
  --fk-leire: var(--aksent-tekst-mork);
  --fk-dempet: var(--tekst-dempet-mork);
  --fk-strek: color-mix(in srgb, var(--color-cream) 18%, transparent);
  --fk-side: clamp(24px, 6vw, 110px);
  --fk-ease: cubic-bezier(.16, 1, .3, 1);
  display: block;
  overflow: clip;
  background: var(--fk-bunn);
  color: var(--fk-tekst);
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod);
}
.fk-body { background: var(--color-midnight); }
/* Huset setter overflow-x: hidden på html og body (styles.css). Da blir
   body en klippekontekst som aldri scroller, og ingen av de tre
   sticky-scenene fester (målt: heltescenen rullet rett bort). clip vokter
   mot vannrett utglidning like godt uten å lage klippekontekst — samme grep
   som badebyen.css. To klasser i selektoren, fordi regelen skal slå en
   basisregel i et annet stilark (CLAUDE.md). */
html:has(body.fk-body), body.fk-body { overflow-x: clip; }
/* footer.css gir footeren toppmargin for kremsidene; her ligger den mot en
   mørk flate og ville lest som et lyst bånd. */
body.fk-body .site-footer { margin-top: 0; }

.fk img { display: block; max-width: 100%; }
/* ÉN lenkestil på hele sida (Tom, 24. sep 2026: «tre ulike stiler for å
   indikere en lenke»). Handoffens stil fra fuglestasjon-titelen: lenka
   beholder fargen i teksten rundt, og en tynn turkis strek sier at den er
   en lenke. Hover gjør teksten turkis. Knappen i CTA-en er en knapp, ikke
   en lenke i tekst, og har sin egen stil. */
.fk a:not(.fk-knapp) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-aurora) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  transition: color .2s ease;
}
.fk a:not(.fk-knapp):hover { color: var(--fk-aurora); }
.fk a:not(.fk-knapp):focus-visible { outline: 2px solid var(--fk-aurora); outline-offset: 2px; }
.fk p, .fk h1, .fk h2, .fk h3, .fk figure { margin: 0; }

/* ── Byggeklosser ─────────────────────────────────────────────── */
.fk-indre { max-width: 1240px; margin: 0 auto; position: relative; }
.fk-seksjon { padding: clamp(52px, 8vh, 96px) var(--fk-side); }
.fk-seksjon--luftig { padding-top: clamp(88px, 15vh, 180px); padding-bottom: clamp(88px, 15vh, 180px); }
.fk-seksjon--marine { background: var(--fk-bunn-2); }

.fk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--fk-aurora);
}
.fk-eyebrow--strek::before {
  content: "";
  width: 46px;
  height: 1px;
  background: currentColor;
}
.fk-etikett-leire {
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--fk-leire);
  white-space: nowrap;
}
.fk-tittel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-seksjonstittel);
  line-height: var(--linje-display);
  letter-spacing: var(--sperring-tett);
  color: var(--fk-tittel);
  text-wrap: pretty;
}
.fk-brod {
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: var(--fk-tekst);
  text-wrap: pretty;
  max-width: 48ch;
}
.fk-latin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--fk-leire);
}
.fk-kreditt {
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-2xs);
  color: var(--fk-dempet);
}
.fk-teller {
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-md);
  font-variant-numeric: tabular-nums;
  color: var(--fk-tekst);
}

/* ── Scenene ──────────────────────────────────────────────────── */
.fk-scene { position: relative; }
.fk--scener .fk-scene__fest {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* 1 · Teleskopet ------------------------------------------------ */
.fk-hero { background: var(--fk-bunn); }
/* Gulvet er aldri høyere enn skjermen (liggende telefon: tittelen havnet
   under kanten med 560 px). */
.fk-hero .fk-scene__fest { position: relative; height: 100vh; min-height: min(560px, 100svh); overflow: hidden; }
.fk--scener .fk-hero { height: 190vh; }
.fk--scener .fk-hero .fk-scene__fest { position: sticky; }
.fk-hero__vindu { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
/* Fuglens midtpunkt (51,5 % × 46 % av originalen) treffer sentrum. Ingen
   mørk overlay på bildet — kontrasten til teksten kommer fra skyggen. */
.fk-hero__bilde {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(104vw, 164vh);
  height: auto;
  max-width: none !important;
  aspect-ratio: 3 / 2;
  transform: translate(-51.5%, -46%);
}
.fk-hero__ring {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-aurora) 55%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--color-aurora) 18%, transparent);
  pointer-events: none;
}
.fk-hero__tekst {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  padding: 0 var(--fk-side) clamp(56px, 9vh, 110px);
}
.fk-hero .fk-eyebrow { text-shadow: 0 2px 10px color-mix(in srgb, var(--color-midnight) 90%, transparent); }
.fk-hero__tittel {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  color: var(--fk-tittel);
  text-wrap: pretty;
  text-shadow:
    0 1px 3px color-mix(in srgb, var(--color-midnight) 85%, transparent),
    0 2px 24px color-mix(in srgb, var(--color-midnight) 75%, transparent);
}
.fk-hero__bunn {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}
.fk-hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--fk-tekst);
}
.fk-hero__hint i {
  display: inline-block;
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, var(--color-aurora), transparent);
}
/* Hintet gjelder bare når kikkerten faktisk åpner seg. */
.fk:not(.fk--scener) .fk-hero__hint { visibility: hidden; }
.fk-hero__kreditt {
  text-align: right;
  max-width: 32ch;
  min-width: 15ch;
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  color: var(--fk-tekst);
  text-shadow: 0 1px 8px color-mix(in srgb, var(--color-midnight) 90%, transparent);
}
.fk-hero__kreditt em { font-family: var(--font-display); font-style: italic; font-size: var(--etikett-stor); }

/* 2 · Trekkveiene møtes ----------------------------------------- */
.fk-trekk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(340px, 50vh, 560px);
  padding: clamp(52px, 8vh, 100px) var(--fk-side);
  overflow: hidden;
  background: var(--fk-bunn);
}
.fk-trekk__bunn,
.fk-trekk__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none !important;
  object-fit: cover;
  pointer-events: none;
}
.fk-trekk__bunn { object-position: center 40%; opacity: .4; transition: opacity 1.2s ease; }
.fk-trekk__film { opacity: .5; filter: saturate(.75) contrast(1.05); }
.fk-trekk__skrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%,
    color-mix(in srgb, var(--color-midnight) 34%, transparent) 0%,
    color-mix(in srgb, var(--color-midnight) 72%, transparent) 55%,
    color-mix(in srgb, var(--color-midnight) 94%, transparent) 100%);
}
.fk-trekk__sitat {
  position: relative;
  max-width: 32ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: var(--linje-tittel);
  letter-spacing: var(--sperring-tett);
  color: var(--fk-tittel);
  text-wrap: pretty;
}

/* 3 og 7 · Helbilder med parallakse ----------------------------- */
.fk-helbilde { background: var(--fk-bunn); }
.fk-helbilde__ramme { position: relative; overflow: hidden; height: clamp(420px, 78vh, 880px); }
/* Bildet er 134 % høyt: overhenget er vandringen. Skriptet holder
   forskyvningen innenfor overhenget, så det aldri blir en glipe. */
.fk-helbilde__bilde {
  position: absolute;
  left: 0;
  top: -17%;
  width: 100%;
  height: 134%;
  max-width: none !important;
  object-fit: cover;
  will-change: transform;
}
.fk-helbilde__tekst {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: clamp(60px, 12vh, 130px) var(--fk-side) clamp(22px, 3.4vh, 40px);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-midnight) 82%, transparent));
}
.fk-helbilde__navn { font-family: var(--font-display); font-size: var(--text-xl); color: var(--fk-tittel); }
.fk-helbilde__navn em { font-style: italic; color: var(--fk-leire); }
.fk-helbilde .fk-kreditt { color: var(--fk-tekst); }

/* 4 · 350 arter ------------------------------------------------- */
.fk-arter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
/* Tallet har brødtekstens familie, bevisst — handoffen: «samme
   skriftfamilie som brødteksten til høyre». */
.fk-arter__tall {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-6xl);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-tett);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fk-tittel);
}
.fk-arter__etikett {
  margin-top: clamp(22px, 3vh, 32px) !important;
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--fk-aurora);
}

/* 5 · Kortstokken ----------------------------------------------- */
.fk-stokk { background: var(--fk-bunn); }
.fk-stokk__fest { display: flex; flex-direction: column; }
.fk-stokk__topp {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: clamp(64px, 10vh, 110px) var(--fk-side) 0;
}
.fk--scener .fk-stokk__topp { padding-top: calc(var(--nav-height) + 26px); }
/* Flatt: kortene står under hverandre. */
.fk-stokk__bord {
  display: flex;
  flex-direction: column;
  gap: 72px;
  margin: clamp(24px, 4vh, 40px) var(--fk-side);
}
.fk-kort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vw, 52px);
}
.fk-kort__bilde {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  box-shadow: 0 46px 110px color-mix(in srgb, black 66%, transparent);
}
.fk-kort__bilde img { width: 100%; height: 100%; object-fit: cover; max-width: none !important; }
.fk-kort__tekst { flex: 0 1 clamp(172px, 24vw, 300px); min-width: 0; }
.fk-kort__nr { color: var(--fk-aurora); }
.fk-kort__navn {
  margin-top: 14px !important;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-tittel);
  letter-spacing: var(--sperring-tett);
  color: var(--fk-tittel);
}
.fk-kort .fk-latin { margin-top: 6px; }
/* Scene: kortene ligger oppå hverandre og deles ut av skriptet. */
/* 360vh: lengre rulleavstand per art, så skyvet mellom dem går roligere (Tom 7. okt 2026). */
.fk--scener .fk-stokk { height: 360vh; }
.fk--scener .fk-stokk__bord { position: relative; flex: 1; min-height: 0; display: block; margin: clamp(14px, 3vh, 34px) var(--fk-side); }
.fk--scener .fk-kort { position: absolute; inset: 0; will-change: transform, opacity; }
.fk--scener .fk-kort + .fk-kort { visibility: hidden; opacity: 0; }
.fk--scener .fk-kort__bilde { height: 100%; aspect-ratio: auto; }
.fk-stokk__linje { display: none; }
.fk--scener .fk-stokk__linje {
  display: block;
  flex: none;
  height: 2px;
  margin: 0 var(--fk-side) clamp(22px, 4vh, 40px);
  background: var(--fk-strek);
}
.fk-stokk__linje span { display: block; height: 2px; background: var(--fk-aurora); transform-origin: left center; transform: scaleX(0); }
.fk:not(.fk--scener) .fk-stokk .fk-teller[data-fk-teller] { display: none; }

/* 6 · Hvorfor Lista? -------------------------------------------- */
.fk-hvorfor { position: relative; overflow: hidden; }
.fk-hvorfor__kart {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(34%, 400px);
  overflow: hidden;
  opacity: .75;
  pointer-events: none;
  /* Kartet fyller seksjonen fra topp til bunn; bare venstrekanten tones ut
     mot teksten. */
  -webkit-mask-image: linear-gradient(to right, transparent, black 35%);
  mask-image: linear-gradient(to right, transparent, black 35%);
}
/* Kartet er høyere enn seksjonen og står på bunnen: Lista blir liggende
   nederst, og landet fortsetter over toppen av rammen. */
.fk-kart { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; }
.fk-kart__land { fill: color-mix(in srgb, var(--color-cream) 7%, transparent); }
.fk-kart__kyst { fill: none; stroke: color-mix(in srgb, var(--color-aurora) 45%, transparent); stroke-width: .8; }
.fk-kart__ring { fill: none; stroke: color-mix(in srgb, var(--color-aurora) 55%, transparent); stroke-width: 1; }
.fk-kart__punkt { fill: var(--color-aurora); }
.fk-kart__navn {
  fill: var(--color-aurora);
  font-family: var(--font-body);
  /* typografi-unntak: grad i SVG-brukerenheter (viewBox 400 bred), ikke CSS-piksler — kartet skaleres som ett bilde */
  font-size: 13px;
  letter-spacing: var(--sperring-xl);
}
.fk-hvorfor__innhold { position: relative; }
.fk-hvorfor .fk-tittel { max-width: 14ch; }
.fk-hvorfor__rader { display: flex; flex-direction: column; gap: 34px; max-width: 62ch; margin-top: clamp(40px, 7vh, 72px); }
.fk-hvorfor__rad {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.6vw, 38px);
  align-items: baseline;
  padding-top: 24px;
  border-top: 1px solid var(--fk-strek);
}
.fk-hvorfor__rad .fk-brod { max-width: none; }

/* 8 · Sesong ---------------------------------------------------- */
.fk-sesong { background: var(--fk-bunn); }
.fk-sesong__fest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 32px);
  padding: clamp(64px, 10vh, 110px) var(--fk-side);
}
.fk--scener .fk-sesong { height: 300vh; }
/* Den festede flaten får innholdets egen høyde; skriptet sentrerer den med
   top, så det ikke blir tom luft over og under. */
.fk--scener .fk-sesong__fest { height: auto; padding: calc(var(--nav-height) + clamp(12px, 2vh, 28px)) var(--fk-side) clamp(20px, 3vh, 40px); }
.fk-sesong .fk-indre { width: 100%; }
.fk-sesong__tittel {
  margin-top: 16px !important;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--linje-display);
  letter-spacing: var(--sperring-tett);
  color: var(--fk-tittel);
  text-wrap: pretty;
}
.fk-sesong__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.fk-hjul { position: relative; width: 100%; max-width: min(480px, 50vh); margin: 0 auto; aspect-ratio: 1; }
.fk-hjul svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fk-hjul__ring { fill: none; stroke: color-mix(in srgb, var(--color-cream) 16%, transparent); stroke-width: 1; }
.fk-hjul__strek { stroke: color-mix(in srgb, var(--color-cream) 30%, transparent); stroke-width: 1; }
.fk-hjul__bokstav {
  fill: var(--fk-dempet);
  font-family: var(--font-body);
  /* typografi-unntak: grad i SVG-brukerenheter (viewBox 360), hjulet skaleres som ett bilde */
  font-size: 12px;
  letter-spacing: var(--sperring-sm);
}
.fk-hjul__bue { fill: none; stroke-width: 7; stroke-linecap: round; opacity: .32; transition: opacity .3s linear; }
.fk-hjul__bue--vaar { stroke: var(--color-aurora); }
/* Leira som FLATE, aldri som tekst (CLAUDE.md, «Leira som liten tekst»). */
.fk-hjul__bue--host { stroke: var(--color-gold); }
.fk:not(.fk--scener) .fk-hjul__bue { opacity: .9; }
.fk-hjul__mark { fill: var(--fk-tittel); }
.fk-hjul__markring { fill: none; stroke: color-mix(in srgb, var(--color-warm-white) 30%, transparent); stroke-width: 1; }
.fk:not(.fk--scener) [data-fk-mark] { display: none; }
.fk-hjul__midt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  text-align: center;
}
.fk-hjul__mnd {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-3xl);
  line-height: var(--linje-tett);
  color: var(--fk-tittel);
}
.fk:not(.fk--scener) .fk-hjul__mnd { display: none; }
.fk-hjul__under {
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--fk-dempet);
}
/* Flatt: panelene står under hverandre. */
.fk-sesong__paneler { display: flex; flex-direction: column; gap: 56px; }
.fk--scener .fk-sesong__paneler { position: relative; display: block; min-height: clamp(330px, 62vh, 700px); }
.fk--scener .fk-panel { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.fk-panel { display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.6vh, 28px); }
.fk-panel__bilde { position: relative; overflow: hidden; height: clamp(170px, 40vh, 460px); }
.fk-panel__bilde img { width: 100%; height: 100%; object-fit: cover; max-width: none !important; }
.fk-panel__bilde figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 14px 10px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-midnight) 85%, transparent));
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--fk-tekst);
}
.fk-panel__bilde figcaption .fk-kreditt { display: block; margin-top: 4px; text-transform: none; letter-spacing: var(--sperring-2xs); font-size: var(--etikett-liten); }
.fk-panel__etikett {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--fk-tekst);
}
.fk-panel__etikett i { width: 22px; height: 2px; }
.fk-panel__dato {
  margin-top: 14px !important;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-kort);
}
.fk-panel__tekst { margin-top: 14px !important; max-width: 40ch; font-size: var(--brod-kort); line-height: var(--linje-brod); color: var(--fk-tekst); text-wrap: pretty; }
/* Sesongens farge: turkis vår, leire høst (streken er flate, datoen er
   tekst og tar tekst-tokenet), dempet resten av året. */
.fk-panel--vaar .fk-panel__etikett i { background: var(--color-aurora); }
.fk-panel--vaar .fk-panel__dato { color: var(--color-aurora); }
.fk-panel--host .fk-panel__etikett i { background: var(--color-gold); }
.fk-panel--host .fk-panel__dato { color: var(--aksent-tekst-mork); }
.fk-panel--rest .fk-panel__etikett i { background: var(--tekst-dempet-mork); }
.fk-panel--rest .fk-panel__dato { color: var(--tekst-dempet-mork); }

/* 9 · Fuglestasjonen -------------------------------------------- */
/* Ren tekstseksjon, midtstilt under kongeørna (24. sep 2026). */
.fk-stasjon__innhold { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fk-stasjon__tittel {
  margin-top: 22px !important;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-tittel);
  color: var(--fk-tittel);
  text-wrap: pretty;
}
/* Fuglefestivalen (Marion, 24. sep 2026): brødtekst under påstanden. */
.fk-stasjon__festival { margin-top: 22px !important; max-width: 40ch; }

/* 10 · Reservatene ---------------------------------------------- */
.fk-reservat { background: var(--fk-bunn); }
.fk-reservat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 6vw, 80px);
  margin-top: clamp(36px, 6vh, 64px);
  align-items: start;
}
.fk-reservat__navn { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--linje-tittel); color: var(--fk-tittel); }
/* Prototypen hadde monoskrift her; brødskriften med etikettrolle i stedet. */
.fk-reservat__fakta {
  margin-top: 16px !important;
  font-size: var(--etikett-stor);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fk-leire);
}
.fk-reservat__tekst { margin-top: 22px !important; max-width: 42ch; }
.fk-reservat__sitat {
  margin-top: clamp(64px, 10vh, 120px) !important;
  max-width: 52ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--brod-loft);
  line-height: var(--linje-kort);
  color: var(--fk-tittel);
  text-wrap: pretty;
}
/* Egen seksjon etter ringgås-bildet: sitatet følger rett etter eyebrowen. */
.fk-reservat--poster .fk-reservat__sitat { margin-top: clamp(28px, 4vh, 48px) !important; }
.fk-reservat__tall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(40px, 6vh, 72px);
}
.fk-reservat__tallkort { padding-top: 26px; border-top: 1px solid var(--fk-strek); }
.fk-reservat__n { font-family: var(--font-display); font-weight: 300; font-size: var(--text-4xl); line-height: var(--linje-tett); color: var(--fk-leire); }
.fk-reservat__nt { margin-top: 12px !important; font-size: var(--etikett); line-height: var(--linje-brod-tett); letter-spacing: var(--sperring-sm); color: var(--fk-tekst); }

/* 11 · Flokken -------------------------------------------------- */
.fk-flokk { overflow: hidden; padding-bottom: clamp(70px, 11vh, 140px); }
.fk-flokk__tittel { margin: 22px 0 clamp(48px, 7vh, 80px) !important; max-width: 20ch; }
.fk-flokk__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(160px, calc((100% - 4 * clamp(8px, 1vw, 14px)) / 5)), 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.fk-fugl {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--fk-bunn);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
  will-change: transform, opacity;
}
.fk-fugl img { width: 100%; height: 100%; object-fit: cover; max-width: none !important; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fk-fugl:hover img { transform: scale(1.05); }
.fk-fugl:focus-visible { outline: 2px solid var(--fk-aurora); outline-offset: 3px; }
.fk-fugl__tekst {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 9px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-midnight) 88%, transparent));
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  color: var(--fk-tekst);
}
.fk-fugl__tekst .fk-kreditt { display: block; margin-top: 4px; text-transform: none; letter-spacing: var(--sperring-2xs); font-size: var(--etikett-liten); }
.fk-flokk__avslutning {
  max-width: 26ch;
  margin: clamp(70px, 11vh, 140px) auto 0 !important;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-kort);
  color: var(--fk-tittel);
  text-wrap: pretty;
}

/* Lightboxen — bygges av skriptet. */
.fk-lys { position: fixed; inset: 0; z-index: 1100; }
.fk-lys__bak { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-midnight) 92%, black); opacity: 0; transition: opacity .4s ease; cursor: zoom-out; }
.fk-lys__bilde { position: fixed; object-fit: cover; max-width: none !important; transition: all .52s cubic-bezier(.2, .8, .2, 1); cursor: zoom-out; }
.fk-lys__info {
  position: fixed;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .4s ease .28s, transform .5s ease .28s;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
}
.fk-lys__navn { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: var(--linje-tittel); color: var(--fk-tittel); }
.fk-lys__lukk {
  background: none;
  border: 1px solid color-mix(in srgb, var(--color-cream) 35%, transparent);
  color: var(--fk-tekst);
  font-family: var(--font-body);
  font-size: var(--etikett);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  padding: 14px 20px;
  min-height: 44px;
  cursor: pointer;
}
.fk-lys__lukk:focus-visible { outline: 2px solid var(--fk-aurora); outline-offset: 3px; }

/* 13 · Kilder og bilder -------------------------------------------------- */
/* Liten og stille: en fotnote til saken, ikke en seksjon som konkurrerer
   med innholdet. Hårstrek over, etikett, og kildene som en tett liste. */
.fk-kilder { background: var(--fk-bunn-2); padding-top: clamp(40px, 6vh, 64px); }
.fk-kilder__tittel {
  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;
  color: var(--fk-dempet);
}
.fk-kilder__liste {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  columns: 2 320px;
  column-gap: clamp(24px, 4vw, 56px);
}
.fk-kilder__tittel--bilder { margin-top: clamp(24px, 3.5vh, 36px); }
.fk-kilder__art { color: var(--fk-tekst); }
.fk-kilder__liste li {
  break-inside: avoid;
  margin-bottom: 8px;
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--fk-dempet);
}

/* 12 · Farsund-CTA ---------------------------------------------- */
.fk-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 15vh, 170px) var(--fk-side);
  background: var(--fk-bunn) url('/assets/foto/farsund-hero-poster.jpg') center / cover no-repeat;
  border-top: 1px solid color-mix(in srgb, var(--color-cream) 8%, transparent);
}
.fk-cta__film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none !important; object-fit: cover; pointer-events: none; }
/* Skrim, ikke alfa på teksten: kontrasten bæres av flaten bak. */
.fk-cta__skrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(110% 90% at 50% 50%,
    color-mix(in srgb, var(--color-midnight) 82%, transparent) 0%,
    color-mix(in srgb, var(--color-midnight) 70%, transparent) 60%,
    color-mix(in srgb, var(--color-midnight) 88%, transparent) 100%);
}
.fk-cta__innhold {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.6vh, 26px);
  text-align: center;
}
.fk-cta__tittel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--linje-display);
  letter-spacing: var(--sperring-tett);
  color: var(--fk-tittel);
  text-wrap: balance;
}
.fk-cta__tekst { max-width: 46ch; }
.fk .fk-knapp {
  margin-top: clamp(8px, 1.4vh, 16px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--fk-aurora);
  color: var(--color-midnight);
  font-weight: 700;
  font-size: var(--etikett);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  transition: background .25s ease, gap .25s ease;
}
.fk .fk-knapp:hover { background: var(--fk-tittel); color: var(--color-midnight); gap: 18px; }
.fk .fk-knapp:focus-visible { outline: 2px solid var(--fk-tittel); outline-offset: 3px; }
.fk-cta__kreditt { position: absolute; right: var(--fk-side); bottom: 18px; color: var(--fk-tekst); }

/* ── Mobil (under 768 px) — mobilprototypens verdier ─────────── */
@media (max-width: 767px) {
  .fk { --fk-side: 24px; }
  .fk-hero__tekst { gap: 18px; padding-bottom: clamp(40px, 7vh, 72px); }
  .fk-hero__kreditt { text-align: left; }
  /* Liggende ramme på mobil: fotoene er liggende, og en stående ramme viste
     under halve bredden — hodene falt ut på sidene (25. sep 2026). Mindre
     overheng til parallaksen, så den ikke zoomer bildet ytterligere. */
  .fk-helbilde__ramme { height: max(240px, 66vw); }
  .fk-helbilde__bilde { top: -8%; height: 116%; }
  .fk-helbilde__tekst { padding-top: 44px; gap: 2px 14px; }
  .fk-seksjon--luftig { padding-top: clamp(64px, 10vh, 110px); padding-bottom: clamp(64px, 10vh, 110px); }
  .fk-kort { flex-direction: column; align-items: stretch; gap: 14px; }
  .fk-kort__tekst { flex: none; }
  .fk-kort__nr { display: none; }
  .fk-kort__navn { margin-top: 0 !important; }
  .fk--scener .fk-stokk__bord { margin: 16px var(--fk-side); }
  .fk--scener .fk-kort__bilde { flex: 1 1 auto; height: auto; }
  .fk-hvorfor__kart { right: -12%; width: 72%; opacity: .4; }
  .fk-hvorfor__rad { grid-template-columns: 1fr; gap: 8px; }
  .fk--scener .fk-sesong__fest { gap: clamp(12px, 2vh, 20px); padding: calc(var(--nav-height) + 10px) var(--fk-side) 16px; }
  /* Mobilprototypen har tittelen på 30 px; den festede flaten må få plass
     i ett vindu, så tittelen tar trinnet under. */
  .fk-sesong__tittel { margin-top: 10px !important; font-size: var(--text-3xl); }
  .fk-sesong__grid { grid-template-columns: 1fr; gap: clamp(14px, 2.4vh, 24px); }
  .fk-hjul { max-width: min(250px, 30vh); }
  .fk--scener .fk-sesong__paneler { min-height: clamp(250px, 40vh, 380px); }
  .fk--scener .fk-panel { justify-content: flex-start; gap: 12px; }
  .fk-panel__bilde { height: clamp(110px, 18vh, 200px); }
  .fk-panel__dato { margin-top: 8px !important; }
  .fk-panel__tekst { margin-top: 6px !important; line-height: var(--linje-brod-tett); }
  .fk-reservat__grid { grid-template-columns: 1fr; gap: 44px; }
  .fk-reservat__tall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .fk-flokk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fk-fugl__tekst { padding: 22px 9px 7px; }
  .fk-cta { padding: clamp(64px, 10vh, 110px) var(--fk-side); }
  .fk-cta__kreditt { right: auto; left: var(--fk-side); }
}

/* ── Fugleskjulet i Våien: bilde og teleskopvideo ─────────────────
   Små, side om side under sitatet (Marion, 7. okt 2026). Begge har
   samme høyde; bredden følger bildets egne proporsjoner (1:1 og 9:16). */
.fk-skjul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.5vw, 32px);
  margin-top: clamp(32px, 5vh, 56px);
  --fk-skjul-h: clamp(240px, 30vw, 380px);
}
.fk-skjul__figur { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fk-skjul__figur img,
.fk-skjul__video {
  display: block;
  height: var(--fk-skjul-h);
  width: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.fk-skjul__figur img { aspect-ratio: 1 / 1; }
.fk-skjul__video { aspect-ratio: 9 / 16; background: var(--color-midnight); }
.fk-skjul__tekst {
  max-width: calc(var(--fk-skjul-h) * 1);
  font-size: var(--etikett-stor);
  line-height: var(--linje-etikett);
  color: var(--fk-tekst);
}
.fk-skjul__figur--video .fk-skjul__tekst { max-width: calc(var(--fk-skjul-h) * 0.5625); }
.fk-skjul__kreditt { display: block; margin-top: 2px; font-size: var(--etikett-liten); color: var(--fk-dempet); }

/* ── Redusert bevegelse ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fk-trekk__film, .fk-cta__film { display: none; }
  .fk-fugl img { transition: none; }
  .fk-fugl:hover img { transform: none; }
  .fk-lys__bak, .fk-lys__bilde, .fk-lys__info { transition: none; }
}