/* ============================================
   LISTER - Regional Showcase
   Scoped under .lister-page
   ============================================ */

/* ---- Page-scoped tokens ---- */
.lister-page {
  --l-content-max: 1180px;
  --l-content-wide: 1400px;
  --l-content-narrow: 760px;
  --l-section-padding: clamp(90px, 11vh, 160px);
  --l-card-radius: 14px;
  --l-card-radius-lg: 18px; /* harmonisert kort-radius (var 22) — bilder 14, kort 18, piller 999 */
  --l-gold: var(--color-gold);
  --l-cream: var(--surface-story);
  --l-midnight: var(--surface-strong);
  --l-utility: var(--surface-utility);
  --l-warm-white: var(--surface-explore);
  --l-aurora: var(--color-aurora);

  /* Fotoalbumet har sin egen papirskala, som det har sin egen typeskala.
     Tre lag, tre aldrede toner: bladet man ser kanten av, arket, og ramma
     rundt bildet. De skal IKKE samles med husets krem — forskjellen mellom
     dem er hele effekten. Bunnfargen deles med seksjonen under, saa skjoeten
     mellom dem ikke blir en strek. */
  --album-flate:  #f0e9d6;
  --album-papir:  #f4ecda;
  --album-ramme:  #faf6ec;
  --album-bunn:   #3d5365;
  /* Albumets to blekkfarger: naer-svart til skygge og etikettprikk, moerk
     brun til innsidepermen og bildetekstene. Laa som fem hex paa fire
     verdier (1a1208/1a1209, 2a1f10/2a1f12) — samme farge, ulike hender. */
  --album-blekk:  #1a1208;
  --album-brun:   #2a1f10;
  /* Dempet blekk: erstatter brun med 50-62 % alfa, som ga 2,84-3,88 paa
     papiret (grundig test 29. sep 2026). Hel farge blandet av albumets egne
     toner, 4,6-5,3 paa alle papirtonene. Den lyse er det samme paa den
     moerke innsiden av omslaget (4,85). */
  --album-dempet:      color-mix(in srgb, var(--album-brun) 68%, var(--album-papir));
  --album-dempet-lys:  color-mix(in srgb, var(--album-flate) 56%, var(--album-brun));
  /* Fullskjermen og den lukkede boka. Natteflata er varmere enn svart og i
     samme familie som seksjonen. Arksnittet er tre toner mellom papir og
     skygge, og mobilboka har en bunke under arket og en egen bakside. */
  --album-omslag:     #15324a;
  --album-natt:       #20323f;
  --album-natt-dyp:   #101c26;
  --album-snitt-lys:  #ded3ba;
  --album-snitt:      #d8cdb4;
  --album-snitt-mork: #cfc2a6;
  --album-arkbunke:   #e3dac2;
  --album-bakark:     #efe6cf;

  /* De to jobb-CTA-kortene: ett varmt og ett kjoelig, hver med en toneskala
     fra topp til bunn. Fire verdier som hoerer sammen som to par — slaas de
     sammen innad i et par, forsvinner gradienten. */
  --cta-varm-topp:    #fdf6f2;
  --cta-varm-bunn:    #f7ebe4;
  --cta-kjolig-topp:  #f8fbfc;
  --cta-kjolig-bunn:  #edf3f6;
  --l-glacier: var(--color-glacier);
  --l-fjord: var(--color-fjord);

  overflow-x: hidden;
  overflow-x: clip;
}

.lister-page main { overflow-x: hidden; overflow-x: clip; }

.lister-page [data-reveal] { transform: none; }
.lister-page [data-reveal].revealed { transform: none; }

.lister-page .site-footer {
  border-top: 1px solid rgba(250, 248, 245, 0.1);
  margin-top: 0;
}
.lister-page .footer-column h4 { color: var(--l-gold); }

/* Tone down Freysta logo in header so Lister brand dominates */
.lister-page .header-logo {
  opacity: 0.5;
  width: 34px;
  height: 34px;
  transition: opacity var(--duration-normal) var(--ease-out-expo);
}
.lister-page .header-logo-link:hover .header-logo,
.lister-page .header-logo-link:focus-visible .header-logo { opacity: 0.9; }

/* ---- Shared typography ---- */
.l-eyebrow {
  /* Standard er lys bunn; moerke flater overstyrer under. */
  display: inline-block;
  font-family: var(--font-body);
  /* Var --text-xs (14px); kommunesidenes eyebrow er 15. */
  font-size: var(--text-eyebrow);
  /* Var 600 og --l-gold (#c4918a) med 16px luft under. Kommunesidene bruker
   * 500, den moerke terrakottaen og 10px — og forskjellen syntes: tyngre
   * strek og dobbelt saa stor avstand ned til overskriften. */
  font-weight: 400;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--aksent-tekst);
  margin: 0 0 10px;
}
/* Var rgba(255,255,255,0.72) — praktisk talt samme farge som den hvite
 * overskriften under, saa eyebrowen forsvant inn i den. Kommunesidene
 * bruker aksentfargen paa moerk flate, slik den moerke terrakottaen
 * brukes paa lys. */
/* Kobber #C4918A ga 2,91:1 mot skiferflaten - langt under AA sine 4,5 for
   15 px normaltekst. Den sammensatte bakgrunnen bak eyebrowen er rgb(62,84,102),
   ikke skiferens rene verdi, fordi toppvignetten ligger over. #E5BEB5 gir 4,64.
   Fargen er lysere enn kobberet paa lyse flater, men flaten er en annen. */
.l-eyebrow--light { color: #E5BEB5; }
.l-eyebrow--soft { color: var(--color-text-secondary); }

.l-section-title {
  font-family: var(--font-display);
  /* Var --text-5xl (88px). Kommunesidene bruker 72, og det er den
   * etablerte seksjonstittelen. Naa samme token begge steder. */
  font-size: var(--text-seksjonstittel);
  font-weight: 300;
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  color: var(--color-text-primary);
  /* Kommunesidenes titler balanserer linjene; forsiden gjorde det ikke, og
   * «Kortere avstander, større liv» endte med «liv» alene paa linje to. */
  text-wrap: balance;
  margin: 0;
}
.l-section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--l-gold);
}
.l-section-title--light { color: var(--surface-card-light); }
.l-section-title--light em { color: var(--l-aurora); }

.l-section-intro {
  font-family: var(--font-body);
  /* Var --text-lg (20px); kommunesidenes ingress er --text-xl (24). */
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: clamp(18px, 3vh, 28px) 0 0;
}
.l-section-intro--light { color: rgba(250, 248, 245, 0.82); }

.l-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              background var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out-expo);
}
.l-btn--primary {
  background: var(--l-gold);
  color: var(--l-midnight);
}
.l-btn--primary:hover,
.l-btn--primary:focus-visible {
  background: var(--color-leire-lys);
  transform: translateY(-1px);
}
.l-btn--ghost {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(250, 248, 245, 0.4);
}
.l-btn--ghost:hover,
.l-btn--ghost:focus-visible {
  background: rgba(250, 248, 245, 0.12);
  border-color: rgba(250, 248, 245, 0.72);
}
.l-btn--dark {
  background: var(--l-midnight);
  color: var(--color-text-inverse);
}
.l-btn--dark:hover,
.l-btn--dark:focus-visible {
  background: var(--color-kort-mork);
  transform: translateY(-1px);
}
/* HANDLINGENE I HEROEN (HeroHandlinger, mobilgjennomgang okt 2026): to
   glasspiller, samme glass og pilleform som spraakbryteren. Ingen fylte
   flater — de ligger i sloeret nederst, og bildet over skal staa urørt.
   Brukes paa forsiden og i kommuneheroen; denne fila lastes av begge. */
.hero-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: var(--space-lg) 0 0;
}
.hero-handling {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--color-warm-white) 28%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-midnight) 42%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  line-height: var(--linje-tett);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}
.hero-handling:hover,
.hero-handling:focus-visible {
  background: color-mix(in srgb, var(--color-midnight) 62%, transparent);
  border-color: color-mix(in srgb, var(--color-warm-white) 55%, transparent);
}
.hero-handling:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: 2px; }

/* =========================================================
   2. GLANCE HOOK
   Appears right under hero. VillageGlance component is used
   separately for the sticky nav + facts. This is a transition
   strip.
   ========================================================= */
.l-page-nav-mount { background: var(--l-cream); }

/* =========================================================
   4. LEVE - cross-regional nature + culture
   ========================================================= */
.l-leve {
  padding: clamp(40px, 5.5vh, 72px) 0 var(--l-section-padding);
  background: var(--l-midnight);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}
.l-leve__inner {
  position: relative;
  z-index: 1;
  max-width: var(--l-content-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}
/* Var max-width 720px. «Kortere avstander, større liv» trenger 735 for én
 * linje og brakk med «liv» alene paa linje to. Innerbeholderen er 1180. */
.l-leve__head { max-width: 800px; margin-bottom: clamp(48px, 7vh, 80px); }

/* =========================================================
   4a. LEVE - photo album (closed cover that opens, then page-flips
        through spreads of mounted photographs). Replaces the
        earlier two-row marquee.
   ========================================================= */

/* Muted slate-blue surround — lighter than the navy book cover so
   they contrast, but desaturated enough not to compete with the
   photos on the inside pages. A subtle warm pool at the centre and
   a soft vignette at the edges keep the focus on the book. */
.l-leve--album {
  background:
    radial-gradient(ellipse 46% 50% at 50% 52%, rgba(241, 235, 227, 0.06) 0%, rgba(241, 235, 227, 0) 60%),
    radial-gradient(ellipse 95% 75% at 50% 100%, rgba(20, 32, 46, 0.45) 0%, rgba(20, 32, 46, 0) 60%),
    radial-gradient(ellipse 95% 70% at 50% 0%, rgba(20, 32, 46, 0.4) 0%, rgba(20, 32, 46, 0) 55%),
    linear-gradient(180deg, #4a6478 0%, var(--album-bunn) 100%);
  /* Seksjonens egen bunnpadding var 140 px, satt den gang regnestykket laa
     paa en annen flate og skulle skilles fra albumet. Naa deler de flate, og
     avstanden skal lese som et fall fra boka, ikke som et sideskifte. */
  padding-bottom: clamp(40px, 5vh, 64px);
}
.l-leve--album::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  z-index: 0;
}

/* Fotoboka
   -------------------------------------------------------------------
   Boka staar LUKKET i seksjonen som et omslag man kan trykke paa, og hele
   lesingen skjer i fullskjerm (handoff: docs/bildebok-fullskjerm.md).
   Desktop er et oppslag paa 1100 x 740, der hver side er 550 x 740 =
   noeyaktig 3:4. Mobil er ett ark i gangen, hengslet i venstre kant.

   REGNESTYKKET ER DET SAMME SOM FOER, bare rommet er et annet. Boka er ETT
   objekt med faste proporsjoner, og --album-skala er det eneste som endrer
   seg. Da kan forholdet ikke gli, og klipping er ikke en tilstand flata kan
   havne i. FOER regnestykket ble innfoert ble bredden satt av skjermbredden og
   hoeyden av skjermhoeyden hver for seg; forholdet gled fra 1,70 til 2,49,
   innholdet ble hoeyere enn siden og bunnen ble klippet (93–168 px maalt).

   Tidligere maalte rommet seksjonen, med et gulv paa 0,7 i hoeydeleddet slik
   at boka heller ble hoeyere enn vinduet enn uleselig. I fullskjerm finnes
   ingen rulling aa falle tilbake paa, saa gulvet er borte: boka skal alltid
   faa plass mellom topplinja og bla-knappene.

   tan(atan2(a, b)) er CSS-maaten aa dele to lengder paa og faa et rent tall;
   calc() kan ikke dele lengde paa lengde. */
.l-album {
  position: relative;
  width: 100%;
  margin-top: clamp(20px, 3vh, 36px);
}

/* ---- Hylla: den lukkede boka i seksjonen ---- */
.l-album__shelf {
  /* Ramme for valgfri dekor bak boka (slot «vifte» i ListerPhotoAlbum). */
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(20px, 4vh, 44px) 0 clamp(28px, 5vh, 56px);
}
.l-album__cover-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  /* Omslaget er en lenke (til bokas side), ikke en knapp. */
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  /* Over eventuell dekor i hylla (slot «vifte»), som er posisjonert. */
  position: relative;
  z-index: 1;
}
/* Tydelig fokusring, ikke bare en tone (WCAG 2.4.7, samlet gjennomgang 28. sep 2026).
   Bildebokknappen ligger over et foto: mørk ring med lys kant. */
.l-album__cover-btn:focus-visible { outline: 2px solid var(--color-midnight); outline-offset: 2px; box-shadow: 0 0 0 5px var(--color-warm-white); }
/* Omslaget har faste proporsjoner og ingen padding: rektangelet maales ved
   trykk og er startruta for vekstanimasjonen. Proporsjonen er arkets 3:4. */
.l-album__shelf-book {
  position: relative;
  display: block;
  width: 320px;
  aspect-ratio: 550 / 740;
  filter: drop-shadow(0 42px 54px rgba(0, 0, 0, 0.55));
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 320ms linear;
}
.l-album__cover-btn:hover .l-album__shelf-book,
.l-album__cover-btn:focus-visible .l-album__shelf-book {
  transform: translateY(-4px) rotate(-0.4deg);
  filter: drop-shadow(0 50px 60px rgba(0, 0, 0, 0.6));
}
/* Boka er «tatt ut av hylla» mens den er aapen. */
.l-album.is-open .l-album__shelf-book {
  opacity: 0;
  transition: none;
}

/* Arksnittet til hoeyre er det som gjoer at omslaget leser som en bok og ikke
   som et kort. To lag, forskjoevet, med hver sin papirtone. */
.l-album__edge {
  position: absolute;
  display: block;
  border-radius: 0 3px 3px 0;
}
.l-album__edge--1 {
  top: 8px;
  bottom: 8px;
  right: -12px;
  width: 16px;
  background: repeating-linear-gradient(90deg, var(--album-papir) 0 1px, var(--album-snitt) 1px 2.5px);
}
.l-album__edge--2 {
  top: 4px;
  bottom: 4px;
  right: -6px;
  width: 12px;
  background: repeating-linear-gradient(90deg, var(--album-ramme) 0 1px, var(--album-snitt-lys) 1px 2.5px);
}
.l-album__shelf-cover {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 3px 7px 7px 3px;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--album-omslag) 0%, var(--color-midnight) 80%);
}
.l-album__shelf-hinge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
}
.l-album__shelf-ornament {
  position: absolute;
  inset: 26px 22px;
  border: 1px solid rgba(125, 211, 192, 0.35);
  border-radius: 2px;
}
.l-album__shelf-text {
  position: absolute;
  inset: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  box-sizing: border-box;
  text-align: center;
  color: var(--l-cream);
}
.l-album__shelf-eyebrow {
  display: block;
  margin-bottom: 20px;
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(125, 211, 192, 0.85);
}
.l-album__shelf-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--album-avslutning);
  line-height: var(--linje-hero);
  color: var(--l-cream);
}
.l-album__shelf-title em { font-style: italic; }
.l-album__shelf-rule {
  display: block;
  width: 54px;
  height: 1px;
  margin: 22px 0 14px;
  background: var(--l-aurora);
}
.l-album__shelf-foot {
  display: block;
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.65);
}
.l-album__open-pill {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 1px solid rgba(250, 248, 245, 0.4);
  border-radius: 999px;
  background: rgba(250, 248, 245, 0.06);
  color: var(--l-cream);
  font-size: var(--etikett);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  transition: background 150ms linear;
}
.l-album__cover-btn:hover .l-album__open-pill { background: rgba(250, 248, 245, 0.14); }
.l-album__cover-btn:focus-visible .l-album__open-pill {
  outline: 2px solid var(--l-aurora);
  outline-offset: 3px;
}

/* ---- Fullskjerm ---- */
html.l-album-laast { overflow: hidden; }

.l-album__fs {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* Designmaalet og rommet. Rommet er vinduet minus topplinja og
     bla-knappene under boka. */
  --album-b: 1100px;
  --album-h: 740px;
  --album-rom-b: calc(100vw - 48px);
  --album-rom-h: calc(100svh - 184px);
  /* Uten tan(atan2()) staar boka i en trygg, fast skala. */
  --album-skala: 0.6;
}
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
  .l-album__fs {
    --album-skala: min(
      tan(atan2(min(var(--album-b), var(--album-rom-b)), var(--album-b))),
      tan(atan2(min(var(--album-h), var(--album-rom-h)), var(--album-h)))
    );
  }
}
/* hidden-attributtet maa vinne over display: flex i reglene under. */
.l-album__fs[hidden],
.l-album__book[hidden],
.l-album__lift[hidden] { display: none !important; }

/* Ikke svart: varmere, og i samme familie som seksjonen boka kom fra. */
.l-album__fs-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, var(--album-natt) 0%, var(--album-natt-dyp) 85%);
}
.l-album__fs.is-mob .l-album__fs-veil { background: var(--album-natt); }

.l-album__fs-bar,
.l-album__fs-foot {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 240ms linear;
}
.l-album__fs.is-shown .l-album__fs-bar,
.l-album__fs.is-shown .l-album__fs-foot {
  opacity: 1;
  transition: opacity 360ms 420ms linear;
}
/* env(safe-area-inset-*) er ikke pynt: uten det havner ✕ under hakket og
   bla-knappene under hjemmeindikatoren paa iPhone. */
.l-album__fs-bar {
  justify-content: space-between;
  gap: 16px;
  padding: max(24px, env(safe-area-inset-top)) 34px 10px;
}
.l-album__fs-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: var(--etikett);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  /* 4,6:1 mot natteflata. */
  color: rgba(250, 248, 245, 0.72);
}
.l-album__fs-n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  letter-spacing: 0;
  text-transform: none;
  color: var(--l-aurora);
}
.l-album__fs-foot {
  justify-content: center;
  gap: 18px;
  padding: 14px 34px max(24px, env(safe-area-inset-bottom));
}
.l-album__fs-hint {
  text-wrap: balance;
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.72);
}
/* Treffmaal paa minst 44 px. Den gamle knappen paa 34 px var en av grunnene
   til at mobilen ikke fungerte. */
.l-album__fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(250, 248, 245, 0.3);
  background: transparent;
  color: var(--l-cream);
  font-size: var(--text-base);
  line-height: var(--linje-tett);
  cursor: pointer;
  transition: background 150ms linear, border-color 150ms linear, opacity 150ms linear;
}
.l-album__fs-btn:hover,
.l-album__fs-btn:focus-visible {
  background: rgba(250, 248, 245, 0.08);
  border-color: rgba(250, 248, 245, 0.72);
}
.l-album__fs-btn:focus-visible {
  outline: 2px solid var(--l-aurora);
  outline-offset: 2px;
}
.l-album__fs-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* Scenen: her dras og sveipes det. Draget skal ikke markere tekst, og
   nettleseren skal ikke starte sin egen bildedragging. */
.l-album__stage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  margin: 0 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.l-album__fs.is-mob .l-album__stage { touch-action: pan-y; }
.l-album__stage img { -webkit-user-drag: none; }
.l-album__stage.is-fading { animation: l-album-fade 220ms linear; }

/* Fly-laget er det som vokser fra omslaget og krymper tilbake. Perspektivet
   ligger her og ikke paa scenen: et forelderelement med transform flater ut
   3D-en under seg, saa perspektivet maa sitte innenfor den transformen. */
.l-album__fly {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  perspective: 2600px;
  perspective-origin: 50% 55%;
}
.l-album__fs.is-mob .l-album__fly {
  perspective: 1500px;
  perspective-origin: 0% 50%;
}

/* ---- Desktop-boka ---- */
.l-album__book--desk {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--album-b);
  height: var(--album-h);
  transform-style: preserve-3d;
  /* scale3d, ikke scale: med preserve-3d maa ogsaa z krympe. En 2D-skala
     lar bladenes utsving i z staa fast mens boka blir mindre, og da blir
     perspektivet mer dramatisk jo mindre boka er.
     translateX(-25%) er lukket tilstand: hoeyre permhalvdel staar midt i
     bildet. */
  transform: translate(-50%, -50%)
             scale3d(var(--album-skala), var(--album-skala), var(--album-skala))
             translateX(-25%);
  transition: transform 1280ms cubic-bezier(0.45, 0, 0.25, 1);
  cursor: grab;
}
.l-album__book--desk:active { cursor: grabbing; }
.l-album__book--desk.is-open {
  transform: translate(-50%, -50%)
             scale3d(var(--album-skala), var(--album-skala), var(--album-skala))
             translateX(0);
}
.l-album__base {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  background: var(--album-blekk);
  border-radius: 4px;
  transition: left 1000ms cubic-bezier(0.45, 0, 0.25, 1);
  box-shadow:
    0 46px 80px rgba(0, 0, 0, 0.55),
    0 18px 32px rgba(0, 0, 0, 0.4);
}
.l-album__book--desk.is-open .l-album__base { left: 0; }
.l-album__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 18px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 35%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.2) 65%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms 600ms;
}
.l-album__book--desk.is-open .l-album__spine { opacity: 1; }

/* Blad */
.l-album__leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1280ms cubic-bezier(0.45, 0, 0.25, 1);
  will-change: transform;
}
.l-album__leaf.is-flipped { transform: rotateY(-180deg); }
.l-album__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  background: var(--album-flate);
}
.l-album__face--front { transform: translateZ(0.5px); }
.l-album__face--back  { transform: rotateY(180deg) translateZ(0.5px); }
.l-album__face::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
}
.l-album__face--front::after {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%);
}
.l-album__face--back::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Sider */
.l-album__page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Maal inne i boka er FASTE px, ikke vh eller vw. Boka er et designmaal paa
     1100 x 740 som skaleres som helhet, saa et vindustall her ville koblet
     sideinnholdet til skjermen paa nytt — nettopp den koblingen som klippet
     sidene foer. */
  padding: 56px 54px;
  box-sizing: border-box;
  color: var(--album-brun);
  font-family: var(--font-body);
}

/* Omslag */
.l-album__cover-front,
.l-album__cover-back {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--album-omslag) 0%, var(--color-midnight) 80%);
  color: var(--l-cream);
}
.l-album__cover-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.l-album__cover-ornament {
  position: absolute;
  inset: 36px;
  border: 1px solid rgba(125, 211, 192, 0.35);
  border-radius: 2px;
  pointer-events: none;
}
.l-album__cover-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--l-cream);
}
.l-album__cover-eyebrow {
  font-size: var(--etikett-liten);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(125, 211, 192, 0.85);
  margin-bottom: 30px;
}
.l-album__cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--album-tittel);
  line-height: var(--linje-hero);
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--l-cream);
}
.l-album__cover-title span { display: block; }
.l-album__cover-title em { font-style: italic; font-weight: 400; }
.l-album__cover-rule {
  width: 60px;
  height: 1px;
  background: var(--l-aurora);
  margin: 30px auto 16px;
}
.l-album__cover-foot {
  font-size: var(--etikett-liten);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.65);
}
.l-album__cover-mono {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--album-mono);
  color: rgba(125, 211, 192, 0.15);
  line-height: var(--linje-tett);
  user-select: none;
}
.l-album__inside-cover {
  background: var(--album-brun);
  color: var(--album-dempet-lys);
}
.l-album__inside-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(125, 211, 192, 0.04) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(125, 211, 192, 0.03) 0%, transparent 30%);
}
.l-album__inside-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  letter-spacing: var(--sperring-2xs);
}

/* Papirsider */
.l-album__paper { background: var(--album-papir); }
.l-album__paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 0, 0, 0) 60%, rgba(60, 42, 20, 0.06) 100%),
    repeating-linear-gradient(90deg, rgba(120, 90, 40, 0.022) 0 2px, transparent 2px 4px);
}

/* Tittelside */
.l-album__title-page { text-align: center; }
.l-album__title-eyebrow {
  position: relative;
  font-size: var(--etikett-liten);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--album-dempet);
  margin-bottom: 26px;
}
.l-album__title-display {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--album-display);
  font-weight: 400;
  margin: 0;
  color: var(--album-brun);
  line-height: var(--linje-tett);
}
.l-album__title-display em {
  color: var(--color-midnight);
  font-style: italic;
}
.l-album__title-rule {
  position: relative;
  width: 50px;
  height: 1px;
  background: rgba(40, 30, 10, 0.45);
  margin: 30px auto 26px;
}
.l-album__title-body {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--brod);
  line-height: var(--linje-brod-tett);
  color: rgba(40, 30, 10, 0.82);
  max-width: 420px;
  margin: 0 auto 18px;
}
.l-album__title-body--quiet {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--etikett-stor);
  letter-spacing: var(--sperring-xs);
  color: var(--album-dempet);
}
.l-album__signoff {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  font-size: var(--etikett-liten);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--album-dempet);
}

/* Avslutning — i dyp skifer, saa den hvite logoen leser rent. Speiler
   omslagets moerke palett uten aa vaere lik den. */
.l-album__closing-page {
  text-align: center;
  justify-content: flex-start;
  padding: 78px 44px 40px;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, var(--color-fjord) 0%, var(--surface-card-dark) 80%);
  color: var(--l-cream);
}
.l-album__closing-page .l-album__paper-grain {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25) 100%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
}
.l-album__closing-display {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--album-avslutning);
  font-weight: 400;
  margin: 0;
  line-height: var(--linje-display);
  color: var(--l-cream);
}
.l-album__closing-rule {
  position: relative;
  width: 50px;
  height: 1px;
  background: rgba(250, 248, 245, 0.4);
  margin: 30px auto 26px;
}
.l-album__closing-logo {
  position: relative;
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto;
}

/* ---- Bildesider: fritt plasserte bilder ----
   Hvert bilde er absolutt plassert i andeler av arket (se fotobok.ts).
   Rammens hoeyde kommer fra aspect-ratio, bildeteksten flyter under den og er
   like bred som rammen. */
.l-album__page--bilder {
  display: block;
  padding: 0;
}
.l-album__pic {
  position: absolute;
  margin: 0;
}
.l-album__frame {
  position: relative;
  box-sizing: border-box;
  background: var(--album-ramme);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 2px 5px rgba(0, 0, 0, 0.1);
}
.l-album__pic--stor .l-album__frame { padding: 15px; }
.l-album__pic--middels .l-album__frame { padding: 12px; }
.l-album__pic--liten .l-album__frame { padding: 9px; }
.l-album__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-mist);
}
.l-album__book--desk .l-album__frame[data-liftable] { cursor: zoom-in; }
.l-album__pic-text {
  display: block;
  margin-top: 16px;
}
.l-album__pic--liten .l-album__pic-text { margin-top: 10px; }
.l-album__caption {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--linje-kort);
  color: var(--album-brun);
  text-wrap: pretty;
}
.l-album__pic--middels .l-album__caption { font-size: var(--text-lg); }
.l-album__pic--liten .l-album__caption { font-size: var(--text-base); }
/* Kreditten staar paa tekstgulvet, --etikett-liten (12 px paa telefon).
   Versaler med sperring stjeler blikket, saa kreditten er dempet og leses
   etter bildeteksten, ikke foer. */
.l-album__credit {
  display: block;
  margin-top: 6px;
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--album-dempet);
}
.l-album__pagenr {
  position: absolute;
  right: 58px;
  bottom: 34px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--linje-tett);
  color: var(--album-dempet);
}

/* Fotohjoerner */
/* ---- Festene: fotohjoerner, maskeringstape, eller ingenting ----
   Valgt per bilde i Publisering (festeDeler i pakken). Maalene er bokas
   designpiksler og foelger rammens stoerrelse. admin-fotobok-redigering.css i
   Publisering har de samme festene (.fr-hj / .fr-tape). */

/* Fotohjoerne: moerkt papir med glans og lys snittkant, og skygge mot bildet. */
.l-album__hj {
  position: absolute;
  z-index: 1;
  width: 36px;
  height: 36px;
  --hj-glans: 135deg;
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.45));
}
.l-album__hj::before,
.l-album__hj::after {
  content: '';
  position: absolute;
  inset: 0;
}
.l-album__hj::before {
  background:
    linear-gradient(var(--hj-glans), rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 50%),
    repeating-linear-gradient(var(--hj-glans), rgba(255, 255, 255, 0.025) 0 1px, rgba(0, 0, 0, 0.03) 1px 2px),
    linear-gradient(var(--hj-glans), #3a332b 0%, #26211b 55%, #1a1612 100%); /* farge-unntak: fotohjoernets moerke papir, tre trinn i én gradient som gir glans paa en gjenstand, ikke palettfarger */
  clip-path: var(--hj-form);
}
.l-album__hj::after {
  background: rgba(255, 246, 226, 0.3);
  clip-path: var(--hj-kant);
}
.l-album__hj--tl {
  top: -2px;
  left: -2px;
  --hj-form: polygon(0 0, 100% 0, 0 100%);
  --hj-kant: polygon(100% 0, 0 100%, 0 calc(100% - 1.4px), calc(100% - 1.4px) 0);
}
.l-album__hj--tr {
  top: -2px;
  right: -2px;
  --hj-glans: 225deg;
  --hj-form: polygon(0 0, 100% 0, 100% 100%);
  --hj-kant: polygon(0 0, 100% 100%, 100% calc(100% - 1.4px), 1.4px 0);
}
.l-album__hj--br {
  bottom: -2px;
  right: -2px;
  --hj-glans: 315deg;
  --hj-form: polygon(100% 0, 100% 100%, 0 100%);
  --hj-kant: polygon(100% 0, 0 100%, 1.4px 100%, 100% 1.4px);
}
.l-album__hj--bl {
  bottom: -2px;
  left: -2px;
  --hj-glans: 45deg;
  --hj-form: polygon(0 0, 0 100%, 100% 100%);
  --hj-kant: polygon(0 0, 100% 100%, calc(100% - 1.4px) 100%, 0 1.4px);
}
.l-album__pic--middels .l-album__hj,
.l-album__frame--mob .l-album__hj { width: 30px; height: 30px; }
.l-album__pic--liten .l-album__hj { width: 24px; height: 24px; }

/* Maskeringstape: halvgjennomsiktig, med fibre, moerkere langkanter og avrevne ender. */
.l-album__tape {
  position: absolute;
  z-index: 2;
  width: 92px;
  height: 27px;
  filter: drop-shadow(0 1px 1.2px rgba(60, 40, 10, 0.3));
}
.l-album__tape::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(90, 65, 25, 0.1) 0 1px, rgba(255, 255, 255, 0.3) 1px, rgba(255, 255, 255, 0) 45%, rgba(90, 65, 25, 0.08) calc(100% - 1px), rgba(90, 65, 25, 0.14) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(110, 80, 30, 0.05) 1px 3px),
    rgba(216, 198, 150, 0.86);
  clip-path: polygon(3% 0, 97% 0, 100% 10%, 97.5% 24%, 100% 37%, 96.5% 51%, 99.5% 64%, 97% 78%, 100% 91%, 97% 100%,
                     3% 100%, 0 88%, 2.5% 75%, 0 61%, 3.5% 48%, 0.5% 35%, 3% 22%, 0 9%);
  mix-blend-mode: multiply;
}
.l-album__tape--tl { top: 4px; left: -28px; transform: rotate(-40deg); }
.l-album__tape--tr { top: 4px; right: -28px; transform: rotate(38deg); }
.l-album__tape--topp { top: -14px; left: calc(50% - 56px); width: 112px; height: 29px; transform: rotate(-2.5deg); }
.l-album__pic--middels .l-album__tape,
.l-album__frame--mob .l-album__tape { width: 78px; height: 24px; }
.l-album__pic--middels .l-album__tape--tl,
.l-album__frame--mob .l-album__tape--tl { top: 3px; left: -24px; }
.l-album__pic--middels .l-album__tape--tr,
.l-album__frame--mob .l-album__tape--tr { top: 3px; right: -24px; }
.l-album__pic--middels .l-album__tape--topp,
.l-album__frame--mob .l-album__tape--topp { top: -12px; left: calc(50% - 48px); width: 96px; height: 25px; }
/* Paa mobil gaar bildet nesten ut til arkets kant, og arket klipper det som
   stikker ut. Tapen legges derfor lenger inn. */
.l-album__frame--mob .l-album__tape--tl { top: 6px; left: -12px; }
.l-album__frame--mob .l-album__tape--tr { top: 6px; right: -12px; }
.l-album__pic--liten .l-album__tape { width: 64px; height: 20px; }
.l-album__pic--liten .l-album__tape--tl { top: 2px; left: -20px; }
.l-album__pic--liten .l-album__tape--tr { top: 2px; right: -20px; }
.l-album__pic--liten .l-album__tape--topp { top: -10px; left: calc(50% - 39px); width: 78px; height: 21px; }

/* ---- Mobilboka: ett ark i gangen ---- */
.l-album__book--mob {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.l-album__mob-edge {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -4px;
  width: 8px;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, var(--album-papir) 0 1px, var(--album-snitt-mork) 1px 2.5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.l-album__mob-base {
  position: absolute;
  inset: 0;
  border-radius: 2px 5px 5px 2px;
  background: var(--album-arkbunke);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.l-album__book--mob .l-album__leaf {
  left: 0;
  width: 100%;
}
/* -172, ikke -180: den lille helningen er det som gjoer at arket leses som
   papir og ikke som et bilde som snur. */
.l-album__book--mob .l-album__leaf.is-flipped { transform: rotateY(-172deg); }
.l-album__book--mob .l-album__face--front { border-radius: 2px 5px 5px 2px; }
.l-album__book--mob .l-album__face--back { border-radius: 5px 2px 2px 5px; }
.l-album__book--mob .l-album__face::after { width: 34px; }
.l-album__book--mob .l-album__cover-ornament { inset: 30px 26px; }
.l-album__book--mob .l-album__cover-eyebrow { margin-bottom: 26px; }
.l-album__book--mob .l-album__cover-rule { margin: 26px auto 14px; }

.l-album__mob-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 14px 18px;
  box-sizing: border-box;
  background: var(--album-papir);
  color: var(--album-brun);
  container-type: size;
}
.l-album__mob-pic {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* Bildet er 4:5 og fyller bredden — med mindre arket er for lavt, da krymper
   det saa bildetekst og kreditering fortsatt faar plass under. */
.l-album__frame--mob {
  flex: none;
  align-self: center;
  width: min(100%, calc((100cqh - 128px) * 0.8));
  padding: 9px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.l-album__frame--mob img {
  height: auto;
  aspect-ratio: 4 / 5;
}
.l-album__mob-text {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6px;
}
.l-album__mob-text .l-album__caption {
  font-size: var(--text-lg);
  line-height: var(--linje-kort);
}
.l-album__mob-text .l-album__credit {
  margin-top: 8px;
  letter-spacing: var(--sperring-lg);
}
.l-album__mob-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--etikett-liten);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--album-dempet);
}
.l-album__mob-back {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(120, 90, 40, 0.03) 0 2px, transparent 2px 5px),
    var(--album-bakark);
}

/* ---- Liggende telefon ----
   Skriptet velger mobilboka ogsaa naar skjermen er lav (MOBIL i
   lister-album.js). Hoeyden er da det knappe: topplinja og bla-knappene
   under boka tok 184 px av 390. Her staar telleren, hintet og ✕ i en lav
   linje oeverst, bla-knappene paa hver side av boka, og arket er liggende
   og sentrert. */
@media (max-height: 500px) and (orientation: landscape) {
  .l-album__fs.is-mob {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "num hint close" "prev stage next";
    column-gap: 12px;
    padding: 0 max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .l-album__fs.is-mob .l-album__fs-bar,
  .l-album__fs.is-mob .l-album__fs-foot { display: contents; }
  .l-album__fs.is-mob .l-album__fs-num { grid-area: num; padding-top: 10px; }
  .l-album__fs.is-mob .l-album__fs-hint { grid-area: hint; align-self: center; text-align: center; padding-top: 10px; }
  .l-album__fs.is-mob [data-album-close] { grid-area: close; margin-top: 8px; }
  .l-album__fs.is-mob [data-album-prev] { grid-area: prev; align-self: center; }
  .l-album__fs.is-mob [data-album-next] { grid-area: next; align-self: center; }
  .l-album__fs.is-mob .l-album__stage { grid-area: stage; margin: 8px 0 0; }
  /* Linjene er display: contents; barna maa selv ligge over sloeret. */
  .l-album__fs.is-mob .l-album__fs-bar > *,
  .l-album__fs.is-mob .l-album__fs-foot > * { position: relative; z-index: 2; }
  /* Arket: hoeyden styrer, bredden foelger. */
  .l-album__fs.is-mob .l-album__book--mob {
    inset: 0;
    margin: auto;
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 2;
  }
  /* Et ferdig bladd ark ville ligget synlig til venstre for boka og over
     tilbake-knappen (i staaende format ligger det utenfor skjermen). Det
     skjules naar vendingen er ferdig, og vises med en gang det blas
     tilbake: forsinkelsen gjelder bare paa vei inn i is-flipped. */
  .l-album__fs.is-mob .l-album__book--mob .l-album__leaf.is-flipped {
    visibility: hidden;
    transition: transform 1280ms cubic-bezier(0.45, 0, 0.25, 1), visibility 0s linear 1280ms;
  }
}
/* Et liggende ark: bildet til venstre, teksten til hoeyre. Arket er sin
   egen beholder (container-type: size), saa dette foelger arkets form og
   ikke vinduets. */
@container (aspect-ratio > 1) {
  .l-album__book--mob .l-album__mob-pic { flex-direction: row; align-items: stretch; gap: 14px; }
  .l-album__book--mob .l-album__frame--mob { align-self: center; width: calc((100cqh - 56px) * 0.8); }
  .l-album__book--mob .l-album__mob-text { justify-content: center; padding: 0 8px 0 0; }
}

/* ---- Bildeloeftet (desktop) ---- */
.l-album__lift {
  position: absolute;
  inset: 0;
  z-index: 8;
}
.l-album__lift-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 16, 24, 0.82);
  cursor: zoom-out;
  animation: l-album-veil 320ms linear both;
}
.l-album__lift-veil:focus-visible {
  outline: 2px solid var(--l-aurora);
  outline-offset: -8px;
}
/* Innholdet slipper klikk gjennom til sloeringen, saa et klikk hvor som helst
   legger bildet tilbake. */
.l-album__lift-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin: 0;
  padding: 70px;
  box-sizing: border-box;
  pointer-events: none;
}
.l-album__lift-mat {
  flex: none;
  padding: 20px;
  background: var(--album-ramme);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  animation: l-album-lift 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.l-album__lift-mat img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(760px, 56vw);
  max-height: calc(100svh - 180px);
}
.l-album__lift-text {
  max-width: 320px;
  animation: l-album-veil 640ms 220ms both;
}
.l-album__lift-caption {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--linje-tittel);
  color: var(--l-cream);
  text-wrap: pretty;
}
.l-album__lift-credit {
  margin: 16px 0 0;
  font-size: var(--etikett-liten);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: rgba(125, 211, 192, 0.85);
}
.l-album__lift-hint {
  margin: 28px 0 0;
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.72);
}

/* Lukking: aapningen baklengs. Teksten kom sist og gaar foerst, bildet synker
   tilbake dit det kom fra, og sloeringen toner ut sammen med det. JS skjuler
   loeftet naar dette er ferdig (460 ms). Mens det lukker slipper det klikk
   gjennom, saa et klikk paa neste bilde virker med en gang. */
.l-album__lift.is-closing {
  pointer-events: none;
}
.l-album__lift.is-closing .l-album__lift-text {
  animation: l-album-veil-ut 180ms linear both;
}
.l-album__lift.is-closing .l-album__lift-mat {
  animation: l-album-lift-ut 440ms cubic-bezier(0.4, 0, 0.8, 0.2) both;
}
.l-album__lift.is-closing .l-album__lift-veil {
  animation: l-album-veil-ut 320ms 120ms linear both;
}

@keyframes l-album-lift { from { transform: scale(0.58) translateY(60px); opacity: 0; } }
@keyframes l-album-lift-ut { to { transform: scale(0.58) translateY(60px); opacity: 0; } }
@keyframes l-album-veil { from { opacity: 0; } }
@keyframes l-album-veil-ut { to { opacity: 0; } }
@keyframes l-album-fade { from { opacity: 0.25; } }

@media (max-width: 720px) {
  .l-album__cover-btn { gap: 22px; }
  .l-album__shelf-book {
    width: 250px;
    filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.55));
  }
  .l-album__edge--1 { top: 6px; bottom: 6px; right: -9px; width: 12px; }
  .l-album__edge--2 { top: 3px; bottom: 3px; right: -5px; width: 10px; }
  .l-album__shelf-cover { border-radius: 3px 6px 6px 3px; }
  .l-album__shelf-hinge { width: 16px; }
  .l-album__shelf-ornament,
  .l-album__shelf-text { inset: 20px 18px; }
  .l-album__shelf-text { padding: 0 12px; }
  .l-album__shelf-eyebrow {
    margin-bottom: 16px;
    font-size: var(--etikett-liten);
  }
  .l-album__shelf-title { font-size: var(--text-3xl); }
  .l-album__shelf-rule { width: 44px; margin: 18px 0 12px; }
  .l-album__fs-bar { padding: max(18px, env(safe-area-inset-top)) 18px 10px; }
  .l-album__fs-foot {
    gap: 16px;
    padding: 14px 18px max(24px, env(safe-area-inset-bottom));
  }
  .l-album__fs-foot .l-album__fs-btn { width: 48px; height: 48px; }
  .l-album__fs-bar .l-album__fs-btn { width: 44px; height: 44px; }
}

/* ---- Ringen: flere boeker ----
   Boekene staar i en ring som snus (lerretet «Fotoboekene paa Lister»,
   retning D): den valgte fremst, naboene ved siden av, mindre og vridd,
   resten innover og bakover til de moetes bakerst. Hver bok i ringen er et
   helt album (rot med omslag og fullskjerm), saa lister-album.js aapner den
   fremste som om den sto alene i hylla. Geometrien regnes i
   public/scripts/lister-fotobok-ring.js og settes som inline-transform; her
   staar bare rammene og overgangene. Med én bok vises hylla over, uendret.

   Rutenettet legger pilene ved siden av scenen paa desktop og paa hver side
   av «Åpne boka» paa mobil, uten aa flytte noe i markupen. */
.l-ring {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "prev scene next"
    "valgt valgt valgt"
    "prikker prikker prikker"
    "aapne aapne aapne";
  align-items: center;
  justify-items: center;
  column-gap: 24px;
  row-gap: 18px;
  margin-top: clamp(20px, 3vh, 36px);
  padding: clamp(20px, 4vh, 44px) 0 clamp(28px, 5vh, 56px);
}
.l-ring__scene {
  grid-area: scene;
  position: relative;
  width: 100%;
  height: calc(320px * 740 / 550);
  perspective: 1400px;
  perspective-origin: 50% 40%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
/* Hver bok er en albumrot (.l-album) som ellers fyller bredden; i ringen er
   den et fast objekt som JS flytter. Foer JS har plassert dem, staar bare
   den fremste. */
.l-ring__bok {
  position: absolute;
  left: 50%;
  top: 0;
  width: 320px;
  margin: 0 0 0 -160px;
  opacity: 0;
  will-change: transform;
}
.l-ring__bok:first-child { opacity: 1; }
.l-ring.is-klar .l-ring__bok {
  transition: transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 420ms ease, filter 420ms ease;
}
.l-ring__bok .l-album__cover-btn { gap: 0; }
.l-ring__bok .l-album__open-pill { display: none; }
/* Naboene loefter seg ikke ved hover; de snur ringen, de aapner ikke. */
.l-ring__bok:not(.is-front) .l-album__cover-btn:hover .l-album__shelf-book {
  transform: none;
  filter: drop-shadow(0 42px 54px rgba(0, 0, 0, 0.55));
}
/* Pillen med fokusringen er borte i ringen, saa omslaget maa baere den. */
.l-ring__bok .l-album__cover-btn:focus-visible .l-album__shelf-cover {
  outline: 2px solid var(--l-aurora);
  outline-offset: 4px;
}

.l-ring__pil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(250, 248, 245, 0.4);
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.06);
  color: var(--l-cream);
  cursor: pointer;
  transition: background 200ms ease;
}
.l-ring__pil--prev { grid-area: prev; }
.l-ring__pil--next { grid-area: next; }
.l-ring__pil svg { width: 20px; height: 20px; }
.l-ring__pil:hover { background: rgba(250, 248, 245, 0.14); }
.l-ring__pil:focus-visible {
  outline: 2px solid var(--l-aurora);
  outline-offset: 3px;
}

.l-ring__valgt {
  grid-area: valgt;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  text-align: center;
}
.l-ring__tittel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-kort);
  color: var(--surface-card-light);
}

/* Prikkene er 6 px aa se paa, men knappen bak dem er 24 px hoey, saa de kan
   treffes med en finger. */
.l-ring__prikker {
  grid-area: prikker;
  display: flex;
  gap: 10px;
}
.l-ring__prikk {
  display: block;
  height: 24px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.l-ring__prikk::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(250, 248, 245, 0.35);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1), background 320ms ease;
}
.l-ring__prikk.is-aktiv::before {
  width: 22px;
  background: var(--l-aurora);
}
.l-ring__prikk:focus-visible {
  outline: 2px solid var(--l-aurora);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Samme pille som «Åpne boka» under den enkle hylla, men som egen knapp. */
.l-ring__aapne {
  grid-area: aapne;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 1px solid rgba(250, 248, 245, 0.4);
  border-radius: 999px;
  background: rgba(250, 248, 245, 0.06);
  color: var(--l-cream);
  font: inherit;
  font-size: var(--etikett);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms linear;
}
.l-ring__aapne:hover { background: rgba(250, 248, 245, 0.14); }
.l-ring__aapne:focus-visible {
  outline: 2px solid var(--l-aurora);
  outline-offset: 3px;
}

/* Samme grense som MOBIL i lister-fotobok-ring.js. Pilene står ved
   prikkene og «Åpne boka» på egen rad: mellom pilene fikk knappen ca.
   150 px, og «Open the / book» brøt på to linjer. */
@media (max-width: 900px) {
  .l-ring {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "scene scene scene"
      "valgt valgt valgt"
      "prev prikker next"
      "aapne aapne aapne";
    column-gap: 12px;
    row-gap: 14px;
  }
  .l-ring__scene { height: calc(220px * 740 / 550); }
  .l-ring__bok {
    width: 220px;
    margin-left: -110px;
  }
  .l-ring .l-album__shelf-book { width: 220px; }
  .l-ring__pil { width: 48px; height: 48px; }
  .l-ring__pil--prev { justify-self: end; }
  .l-ring__pil--next { justify-self: start; }
  .l-ring__pil svg { width: 18px; height: 18px; }
  .l-ring__valgt { min-height: 48px; }
  .l-ring__aapne { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .l-ring.is-klar .l-ring__bok,
  .l-ring__prikk::before {
    transition: none;
  }
}

/* /fotobok/<bok>/: boka er det foerste paa sida, og topplinja ligger fast
   over den, saa seksjonen maa begynne under linja. Lenka tilbake til
   forsiden staar under boka paa seksjonens bunnfarge, saa den hoerer til boka
   og ikke til bunnteksten. */
.l-fotobok-side .l-leve--album { padding-top: calc(var(--nav-height) + clamp(40px, 5.5vh, 72px)); }
.l-fotobok-tilbake {
  margin: 0;
  padding: 0 clamp(20px, 5vw, 56px) clamp(48px, 7vh, 88px);
  text-align: center;
  background: var(--album-bunn);
}
.l-fotobok-tilbake a {
  color: var(--l-cream);
  font-size: var(--text-sm);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.l-fotobok-tilbake a:hover { text-decoration-thickness: 2px; }
.l-fotobok-tilbake a:focus-visible {
  outline: 2px solid var(--l-aurora);
  outline-offset: 3px;
}

/* Uten bevegelse: ingen vekst, ingen 3D-vending og ingen loefteanimasjon.
   Fullskjermen kommer med en gang, og bladingen toner i stedet for aa vende
   (JS setter .is-fading paa scenen ved hver blading). */
@media (prefers-reduced-motion: reduce) {
  .l-album__book--desk,
  .l-album__leaf,
  .l-album__base,
  .l-album__spine,
  .l-album__shelf-book,
  .l-album__fly,
  .l-album__fs-bar,
  .l-album__fs-foot {
    transition: none !important;
  }
  .l-album__lift-veil,
  .l-album__lift-mat,
  .l-album__lift-text {
    animation: none !important;
  }
}

/* =========================================================
   6. HISTORIER - StaticArticleSection overrides for Lister
   ========================================================= */
.lister-static-articles {
  background: var(--l-cream);
}

.lister-home-articles .section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--l-gold);
}

/* Featured article card — video support (shared CSS only targets img) */
.lister-home-articles .al-featured-card__image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.lister-home-articles .al-featured-card:hover .al-featured-card__image video {
  transform: scale(1.03);
}

.l-map__canvas {
  height: clamp(420px, 62vh, 620px);
  border-radius: var(--l-card-radius);
  overflow: hidden;
  background: var(--l-midnight);
  border: 1px solid rgba(250, 248, 245, 0.08);
}
.l-map__canvas .v-location__map {
  width: 100%;
  height: 100%;
}
.l-map-card {
  position: absolute;
  z-index: 5;
  left: 22px;
  bottom: 64px;
  width: min(380px, calc(100% - 44px));
  overflow: hidden;
  border-radius: 18px;
  background: rgba(250, 248, 245, 0.98);
  color: var(--color-text-primary);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.46),
    0 14px 34px rgba(10, 22, 40, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.52);
  opacity: 0;
  transform: translateY(18px) scale(0.975);
  filter: saturate(0.96);
  transition:
    opacity 280ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.l-map-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: saturate(1);
}
.l-map-card[hidden] {
  display: block;
  pointer-events: none;
}
.l-map-card__close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.68);
  color: #fff8ee;
  padding: 0;
  /* typografi-unntak: kryss-tegnet i lukkeknappen tegnes ulikt i Glacial og
     hopper noen piksler mellom tilstandene; Arial gir stabil glyf. */
  font-family: Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--linje-tett);
  cursor: pointer;
}
.l-map-card__media {
  position: relative;
  height: 310px;
  background: var(--l-midnight);
}
.l-map-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.l-map-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.05), rgba(10, 22, 40, 0.36));
}
.l-map-card__logo {
  position: absolute;
  left: 16px;
  bottom: -24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 48px;
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-card-light);
  box-shadow: 0 10px 28px rgba(10, 22, 40, 0.2);
}
.l-map-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.l-map-card__body {
  padding: 24px 22px 20px;
}
.l-map-card__logo + .l-map-card__body,
.l-map-card__media:has(.l-map-card__logo) + .l-map-card__body {
  padding-top: 36px;
}
.l-map-card__eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--l-gold);
}
.l-map-card__title {
  margin: 0;
  font-family: var(--font-display);
  /* Var 28/28/35px. */
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: var(--linje-tett);
  color: var(--color-text-primary);
}
.l-map-card__tagline {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  line-height: var(--linje-kort);
  color: var(--l-fjord);
}
.l-map-card__text {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
}
.l-map-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.l-map-card__facts span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(196, 145, 138, 0.12);
  color: var(--l-fjord);
  font-size: var(--etikett-liten);
  font-weight: 700;
}
.l-map-card__footer {
  margin-top: 18px;
}
.l-map-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  text-decoration: none;
}
.l-map-card__link {
  color: var(--l-midnight);
}
.l-map-card__link:hover,
.l-map-card__link:focus-visible {
  color: var(--l-fjord);
}
.l-map__canvas .v-location__pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--l-gold);
  border: 2px solid var(--color-text-inverse);
  box-shadow: 0 0 0 6px rgba(196, 145, 138, 0.25);
  cursor: pointer;
}
.l-map__canvas .v-location__pin[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(10, 22, 40, 0.78);
  border: 1px solid rgba(250, 248, 245, 0.14);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-xs);
  line-height: var(--linje-tett);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 900px) {
  .l-map__canvas .v-location__pin[data-label]::after {
    /* Kartmerkelappene skal vaere smaa, men ikke under tekstgulvet paa
     * 12 px (--etikett-liten). */
    font-size: var(--etikett-liten);
    padding: 4px 8px;
  }
}

/* =========================================================
   8. PARTNERE
   ========================================================= */
.l-partners {
  padding: clamp(60px, 9vh, 100px) clamp(20px, 5vw, 56px);
  background: var(--l-warm-white);
  border-top: 1px solid rgba(10, 22, 40, 0.06);
  border-bottom: 1px solid rgba(10, 22, 40, 0.06);
}
.l-partners__inner {
  max-width: var(--l-content-max);
  margin: 0 auto;
  text-align: center;
}
.l-partners__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 clamp(28px, 4vh, 44px);
}
.l-partners__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 4.5vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
}
.l-partners__logo {
  height: clamp(56px, 6vw, 80px);
  width: auto;
  max-width: 220px;
  opacity: 0.85;
  transition: opacity var(--duration-normal), transform var(--duration-normal);
}
.l-partners__logo:hover,
.l-partners__lenke:hover .l-partners__logo,
.l-partners__lenke:focus-visible .l-partners__logo {
  opacity: 1;
  transform: translateY(-2px);
}
/* Lenka rundt logoen: ingen egen flate, synlig fokusring paa tastatur. */
.l-partners__lenke {
  display: inline-flex;
  border-radius: var(--radius-sm);
}
.l-partners__lenke:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 6px;
}

/* =========================================================
   Fade-in animation on reveal
   ========================================================= */
.lister-page [data-reveal] {
  opacity: 0;
  transition: opacity 900ms var(--ease-out-expo);
}
.lister-page [data-reveal].revealed { opacity: 1; }
.lister-page [data-reveal][data-reveal-delay="1"] { transition-delay: 120ms; }
.lister-page [data-reveal][data-reveal-delay="2"] { transition-delay: 220ms; }
.lister-page [data-reveal][data-reveal-delay="3"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .lister-page [data-reveal] {
    opacity: 1;
    transition: none;
  }
  .l-btn {
    transition: none !important;
  }
  .l-map-card {
    transition: none !important;
  }
}

/* =========================================================
   Page-nav-mount tuning for VillageGlance in Lister context
   ========================================================= */
.lister-page .v-glance { background: var(--l-cream); }
.lister-page .v-glance__intro { margin-top: 0; }

/* =========================================================
   Fix hover on .al-card. Two blockers:
   1) `.lister-page [data-reveal] { transform: none }` above kills the lift
   2) articles-listing.css sets `transition-delay: 0.7s` on hover
   Use !important and no @media (hover) wrap so it works everywhere.

   0.8 s open-delay so the drawer doesn't fire while the mouse just
   passes across the card. Closing (mouseleave) snaps back immediately
   because the delay only applies to the :hover rule.
   ========================================================= */
.lister-page .al-card,
.lister-page .al-card[data-reveal],
.lister-page .al-card[data-reveal].revealed {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: translateY(0) !important;
}

.lister-page .al-card:hover,
.lister-page .al-card[data-reveal]:hover,
.lister-page .al-card[data-reveal].revealed:hover {
  transform: translateY(-6px) !important;
  transition-delay: 0.8s !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.06),
    0 20px 48px rgba(0, 0, 0, 0.1),
    0 40px 80px rgba(0, 0, 0, 0.05) !important;
}

.lister-page .al-card:hover .al-card__image-wrap img {
  transform: scale(1.04) !important;
  transition-delay: 0.8s !important;
}

.lister-page .al-card:hover .al-card__title-bar,
.lister-page .al-card:hover .al-card__title,
.lister-page .al-card:hover .al-card__footer {
  transition-delay: 0.8s !important;
}

.l-bo-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--l-card-radius-lg, 18px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 2px 8px rgba(10, 22, 40, 0.08),
    0 8px 24px rgba(10, 22, 40, 0.04);
  transition:
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Loeftet bare der hover finnes. */
@media (hover: hover) {
  .l-bo-card:hover {
    transform: translateY(-8px);
    box-shadow:
      0 12px 32px rgba(10, 22, 40, 0.12),
      0 24px 56px rgba(10, 22, 40, 0.10),
      0 0 0 1px rgba(196, 145, 138, 0.15);
  }
  .l-bo-card:hover .l-bo-card__image img {
    transform: scale(1.08);
    filter: brightness(1.06) saturate(1.08);
  }
}

.l-bo-card__image {
  position: absolute;
  inset: 0;
}

.l-bo-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),
    filter 0.8s ease;
}

/* Todelt kort: fotoet lever i de oeverste to tredjedelene, teksten i den
   nederste med sin egen flate. Maalt: med den gamle myke gradienten laa
   kommunenavnet paa 3,62 (Flekkefjord sentrum) og 4,27 (Hidra) — under
   WCAG AA sitt krav paa 4,5 for tekst under 18,7 px. Med 65 %-baandet er
   de samme fire kortene paa 11,0 til 13,9.

   Baandet er heldekkende opp til 30 % og toner ut innen 44 %, saa
   overgangen leser som lys som faller av, ikke som en strek.

   65 % er valgt fordi det holder KREM over 4,5 mot et hvilket som helst
   bilde. Gull ville krevd 85 %, og da forsvinner fotoet i nedre tredjedel.
   Se .l-bo-card__kommune. */
.l-bo-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 22, 40, 0.8) 0%,
    rgba(10, 22, 40, 0.78) 32%,
    rgba(10, 22, 40, 0.2) 46%,
    transparent 64%
  );
  transition: background 0.6s ease;
}

.l-bo-card:hover .l-bo-card__overlay {
  background: linear-gradient(
    to top,
    rgba(10, 22, 40, 0.84) 0%,
    rgba(10, 22, 40, 0.82) 32%,
    rgba(10, 22, 40, 0.3) 48%,
    rgba(10, 22, 40, 0.05) 70%
  );
}

.l-bo-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(20px, 2.6vw, 32px);
  z-index: 2;
  color: var(--surface-card-light);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.l-bo-card:hover .l-bo-card__content {
  transform: translateY(-4px);
}

.l-bo-card__kommune {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  /* Krem, ikke gull. Maalt: gull #c4918a i 11 px versaler trenger 87 %
     overlay for aa naa 4,5 mot et hvilket som helst bilde — da er fotoet
     borte. Krem klarer det med 64 %. Aksentfargen lever videre i
     .l-bo-card__accent, paa en flate der den fungerer. */
  color: var(--l-krem, var(--color-cream));
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.l-bo-card__name {
  font-family: var(--font-display);
  /* Var 24/27/32 — --text-2xl gir 25/31/32. */
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: var(--linje-display);
  letter-spacing: var(--sperring-2xs);
  margin: 0 0 6px;
  color: var(--surface-card-light);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.l-bo-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  /* Var --text-sm og 0.78 — serif kursiv paa foto ble nesten uleselig
     (Toms innspill 20. aug, boomraade-kortene paa Lyngdal). */
  font-size: var(--brod);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 12px;
  transition: color 0.4s ease;
}

.l-bo-card:hover .l-bo-card__tagline {
  color: rgba(255, 255, 255, 0.92);
}

.l-bo-card__accent {
  display: block;
  width: 0;
  height: 2px;
  background: var(--l-gold);
  border-radius: 2px;
  transition: width 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.l-bo-card:hover .l-bo-card__accent {
  width: 56px;
}

/* FINN-inngangen */
.l-bo__finn {
  position: relative;
  overflow: hidden;
  margin: clamp(40px, 6vh, 64px) auto 0;
  max-width: 1040px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 4.5vw, 52px) clamp(32px, 4.5vw, 56px);
  background: linear-gradient(135deg, var(--color-marine-dyp) 0%, var(--l-midnight, var(--color-midnight)) 100%);
  border: 1px solid rgba(196, 145, 138, 0.28);
  border-radius: var(--l-card-radius-lg, 18px);
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.28);
}

/* Dempet gull-glød oppe i venstre hjørne for litt dybde */
.l-bo__finn::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -8%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(196, 145, 138, 0.18) 0%, rgba(196, 145, 138, 0) 70%);
  pointer-events: none;
}

.l-bo__finn-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.l-bo__finn-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  /* FINN-inngangen er moerk: lys-tokenet ga 2,5 mot den (pikselmaaling
     28. sep 2026). */
  color: var(--aksent-tekst-mork);
  margin-bottom: 10px;
}

.l-bo__finn-text {
  font-family: var(--font-body);
  /* Var 17/17/19px. */
  font-size: var(--brod);
  line-height: var(--linje-etikett);
  color: var(--l-cream, var(--color-cream));
  margin: 0;
}

.l-bo__finn-ctas {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Begge knappene fyller like brede kolonner → visuelt likestilt */
.l-bo__finn-cta {
  width: 100%;
  justify-content: center;
}

.l-bo__finn-cta svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .l-bo__finn {
    flex-direction: column;
    align-items: flex-start;
  }
  .l-bo__finn-ctas {
    align-self: stretch;
    width: 100%;
  }
  /* Knappeteksten skal aldri brytes. Med 32px sidepolstring i to like
     kolonner ble «FOR / SALE» og «TIL / SALGS» to linjer paa smal mobil,
     og pillene ble dobbelt saa tjukke (Tom 13. sep 2026). Strammere
     polstring her, og under 480px staar knappene under hverandre. */
  .l-bo__finn-cta {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 20px;
    white-space: nowrap;
  }
}

@media (max-width: 479px) {
  .l-bo__finn-ctas {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-bo-card,
  .l-bo-card__image img,
  .l-bo-card__overlay,
  .l-bo-card__content,
  .l-bo-card__tagline,
  .l-bo-card__accent {
    transition: none !important;
  }
  .l-bo-card:hover {
    transform: none;
  }
  .l-bo-card:hover .l-bo-card__image img {
    transform: none;
  }
}

/* =========================================================
   JOBB — featured partnere + logo-vegg + split-CTA
   ========================================================= */
.l-jobb {
  background: var(--l-cream);
  padding: clamp(36px, 5vh, 64px) clamp(20px, 4vw, 56px) clamp(60px, 9vh, 120px);
}

/* Jobb ligger nå på cream (tydeligere sceneskifte fra den hvite Bo-seksjonen).
   Chips og stillingslista får egne lyse flater så de får kontrast og fokus
   mot cream-bakgrunnen. */
/* Filter-chips: solide hvite piller (aktiv chip beholder grønn aksent). */
.l-jobb .rl-jobfeat__chip {
  background: var(--surface-card-light);
  border-color: var(--color-sand);
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05);
}
.l-jobb .rl-jobfeat__chip:hover { border-color: var(--rl-accent); }
/* Stillingslista løftes opp på en hvit panel-flate; hover blir cream. */
.l-jobb .rl-jobfeat--embedded { --jf-paper: var(--l-cream); }
.l-jobb .rl-jobfeat__rail {
  background: var(--surface-card-light);
  border-radius: 18px;
  padding: clamp(6px, 1vh, 12px) clamp(14px, 1.4vw, 22px);
  box-shadow: 0 2px 10px rgba(10, 22, 40, 0.06), 0 16px 40px rgba(10, 22, 40, 0.05);
}
.l-jobb .rl-jobfeat__item:first-child { border-top: none; }
.l-jobb .rl-jobfeat__item:last-child { border-bottom: none; }

.l-jobb__inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* Featured-rutenett */
.l-jobb__featured {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-bottom: clamp(56px, 8vh, 96px);
}

.l-jobb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card-light);
  border-radius: var(--l-card-radius-lg, 18px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 2px 8px rgba(10, 22, 40, 0.06),
    0 8px 24px rgba(10, 22, 40, 0.04);
  transition:
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.l-jobb-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 10px 28px rgba(10, 22, 40, 0.1),
    0 20px 48px rgba(10, 22, 40, 0.08),
    0 0 0 1px rgba(196, 145, 138, 0.18);
}

.l-jobb-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--l-cream);
}

.l-jobb-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

.l-jobb-card:hover .l-jobb-card__image img {
  transform: scale(1.06);
}

.l-jobb-card__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  background: rgba(250, 248, 245, 0.94);
  color: var(--l-gold);
  border: 1px solid rgba(196, 145, 138, 0.35);
  backdrop-filter: blur(3px);
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
}

.l-jobb-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px) clamp(22px, 2.6vh, 28px);
}

.l-jobb-card__kommune {
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--aksent-tekst);
  margin-bottom: 8px;
}

.l-jobb-card__name {
  font-family: var(--font-display);
  /* Traff 20/22/24 — praktisk talt --text-xl allerede. */
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
  margin: 0 0 8px;
  letter-spacing: var(--sperring-tett);
}

.l-jobb-card__summary {
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Logo-vegg */
.l-jobb__wall {
  margin-bottom: clamp(56px, 8vh, 96px);
}

.l-jobb__wall-caption {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  /* Var 16/17/19px; --text-base gir 16/18/18. */
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0 0 clamp(28px, 4vh, 40px);
}

.l-jobb__logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(12px, 1.2vw, 16px);
  align-items: stretch;
}

.l-jobb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* width MAA staa foer aspect-ratio faar bestemme noe.
     Rutenettet er align-items: stretch, saa et kort med lang tekst gjoer HELE
     rada hoeyere. Uten en definert bredde regner aspect-ratio da bredden ut av
     den strukne hoeyden - 106 px * 1,5 = 159 px - og alle kortene i rada blir
     bredere enn sporet sitt paa 141 px. De spiser mellomrommet og floet sammen.
     Maalt paa 1366x900: tre ulike kortbredder (141, 156, 157) og 16 px utenfor
     rutenettet. Med width: 100% kommer bredden fra sporet, og aspect-ratio
     regner hoeyden ut av bredden slik den var ment. */
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: clamp(14px, 1.4vw, 20px);
  background: var(--surface-card-light);
  border: 1px solid rgba(10, 22, 40, 0.06);
  border-radius: var(--l-card-radius, 14px);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.03);
  transition:
    border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.l-jobb-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.l-jobb-logo:hover {
  border-color: rgba(196, 145, 138, 0.4);
  box-shadow: 0 6px 20px rgba(10, 22, 40, 0.08);
  transform: translateY(-2px);
}

/* Tekst-variant for partnere uten egen logo */
.l-jobb-logo--text {
  background: var(--surface-card-light);
  text-align: center;
}

.l-jobb-logo__name {
  font-family: var(--font-display);
  /* Var 15/16/18px. */
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--linje-tittel);
  letter-spacing: var(--sperring-tett);
  color: var(--color-text-primary);
  display: inline-block;
  padding: 0 4px;
  transition: color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.l-jobb-logo--text:hover .l-jobb-logo__name {
  color: var(--l-gold);
}

/* Responsive */
@media (max-width: 1199px) {
  .l-jobb__featured {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px) {
  .l-jobb__featured {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .l-jobb__featured {
    grid-template-columns: 1fr;
  }
  .l-jobb__logos {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-jobb-card,
  .l-jobb-card__image img,
  .l-jobb-logo {
    transition: none !important;
  }
  .l-jobb-card:hover,
  .l-jobb-logo:hover {
    transform: none;
  }
  .l-jobb-card:hover .l-jobb-card__image img {
    transform: none;
  }
}

/* =========================================================
   ARKIVET — kortene i historiearkivets sveiperad (HistorierSection)
   ========================================================= */
.larch-card {
  background: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(10, 22, 40, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .larch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(10, 22, 40, 0.1);
  }
  .larch-card:hover .larch-card__image img {
    transform: scale(1.04);
  }
}

/* Lenken fyller kortet: kortene i en rad har lik hoeyde, og hele flaten
   skal kunne trykkes. */
.larch-card__linkwrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.larch-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(10, 22, 40, 0.08);
}

.larch-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.larch-card__body {
  flex: 1;
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.2vw, 26px) clamp(22px, 2.6vh, 28px);
  display: flex;
  flex-direction: column;
}

.larch-card__chip {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--aksent-tekst);
  margin-bottom: 12px;
}

.larch-card__title {
  font-family: var(--font-display);
  /* Var 18/19/21. */
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--linje-kort);
  color: var(--color-text-primary);
  margin: 0 0 10px;
  letter-spacing: var(--sperring-tett);
}

.larch-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .larch-card,
  .larch-card__image img {
    transition: none;
  }
}

/* Meldingsflaten (bl.a. 404) staar paa navy. */
.v-melding .l-eyebrow,
.v-melding__inner .l-eyebrow {
  color: var(--aksent-tekst-mork);
}

.l-leve__head .l-eyebrow--light { color: color-mix(in srgb, var(--color-gold), var(--color-warm-white) 62%); }

/* =========================================================
   KORT MED TEKST UNDER BILDET (mobilgjennomgang, okt 2026)
   Under 768 px laa kommunekortene med 62-93 % sloer fra 40 % ned, og
   boomraadekortene med et moerkt baand opp til en tredjedel. Hvert kort var
   godt begrunnet, men til sammen ble siden tung. Naa staar bildet uten
   sloer oeverst i 4:3, og teksten paa lys flate under: kontrasten er
   uavhengig av bildet. Samme kortregler, mobilvariant av grunnregelen.
   ========================================================= */
@media (max-width: 767px) {

  .l-bo-card {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    /* Krem med haarstrek, ikke varmhvitt: seksjonen er nesten hvit, og et
       hvitt kort paa hvit bunn leste som et bilde og en loesrevet tekst,
       ikke som ett kort. */
    background: var(--color-cream);
    border: 1px solid var(--color-sand);
  }
  .l-bo-card__image {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .l-bo-card__overlay { display: none; }
  .l-bo-card__content {
    position: static;
    padding: 16px 20px 20px;
    color: var(--color-text-primary);
  }
  .l-bo-card__kommune {
    margin-bottom: 4px;
    color: var(--aksent-tekst);
    text-shadow: none;
  }
  .l-bo-card__name {
    color: var(--color-text-primary);
    text-shadow: none;
  }
  .l-bo-card__tagline {
    margin-bottom: 0;
    color: var(--color-stein);
  }
  .l-bo-card__accent { display: none; }
}

/* Mobil: seksjonsluften (styles.css, --mobil-seksjon) for blokkene
   forsiden og kommunesidene deler. */
@media (max-width: 767px) {
  .l-leve { padding-bottom: var(--mobil-seksjon); }
  /* «Åpne boka» er det siste i seksjonen; hyllas egen bunnluft kom i
     tillegg til seksjonens og ga 90 px tomt mørke. */
  .l-album__shelf { padding-bottom: 0; }
  .l-partners { padding-block: var(--mobil-seksjon); }
}