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

@font-face {
  font-family: 'Glacial Indifference';
  src: url('/assets/fonts/GlacialIndifference-Regular.woff2') format('woff2'),
       url('/assets/fonts/GlacialIndifference-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('/assets/fonts/GlacialIndifference-Bold.woff2') format('woff2'),
       url('/assets/fonts/GlacialIndifference-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- 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: 22px;
  --l-gold: var(--color-gold, #c4918a);
  --l-cream: var(--surface-story, #F1EBE3);
  --l-midnight: var(--surface-strong, #0a1628);
  --l-utility: var(--surface-utility, #243D4F);
  --l-warm-white: var(--surface-explore, #FBF9F6);
  --l-aurora: var(--color-aurora, #7dd3c0);
  --l-glacier: var(--color-glacier, #8fb8ca);
  --l-fjord: var(--color-fjord, #2d4a5e);

  --font-body: 'Glacial Indifference', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  --color-dark-panel: var(--surface-utility, #243D4F);
  --color-cream: var(--surface-story, #F1EBE3);
  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, 300ms) 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 {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-gold);
  margin: 0 0 var(--space-md);
}
.l-eyebrow--light { color: rgba(255, 255, 255, 0.72); }
.l-eyebrow--soft { color: var(--color-text-secondary, #4a4a4a); }

.l-section-title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}
.l-section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--l-gold);
}
.l-section-title--light { color: #fff; }
.l-section-title--light em { color: var(--l-aurora); }

.l-section-intro {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.65;
  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: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-normal, 300ms) var(--ease-out-expo),
              background var(--duration-normal, 300ms) var(--ease-out-expo),
              border-color var(--duration-normal, 300ms) 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: #d5a6a0;
  transform: translateY(-1px);
}
.l-btn--ghost {
  background: transparent;
  color: #faf8f5;
  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: #faf8f5;
}
.l-btn--dark:hover,
.l-btn--dark:focus-visible {
  background: #162438;
  transform: translateY(-1px);
}

/* =========================================================
   1. HERO
   Full-screen video, slogan, Freysta badge
   ========================================================= */
.l-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #faf8f5;
  isolation: isolate;
}
.l-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.l-hero__media video,
.l-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 22, 40, 0.28) 0%, rgba(10, 22, 40, 0.12) 42%, rgba(10, 22, 40, 0.82) 100%),
    radial-gradient(ellipse at 75% 20%, rgba(196, 145, 138, 0.14), transparent 55%);
}
.l-hero__brand {
  position: absolute;
  top: clamp(96px, 13vh, 140px);
  left: clamp(20px, 4vw, 56px);
  z-index: 2;
  display: block;
  text-decoration: none;
}
.l-hero__brand img {
  width: clamp(200px, 24vw, 360px);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
  transition: transform var(--duration-normal, 300ms) var(--ease-out-expo);
}
.l-hero__brand:hover img,
.l-hero__brand:focus-visible img { transform: translateY(-2px); }
.l-hero__content {
  position: relative;
  padding: clamp(36px, 8vh, 96px) clamp(20px, 5vw, 56px) clamp(80px, 12vh, 140px);
  max-width: var(--l-content-wide);
  width: 100%;
  margin: 0 auto;
}
.l-hero__headline {
  max-width: 900px;
}
.l-hero__region {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 0.6rem + 0.4vw, 1.05rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--l-gold);
  margin-bottom: clamp(20px, 3.5vh, 32px);
}
.l-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(20px, 3vh, 32px);
  color: #faf8f5;
}
.l-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--l-gold);
}
.l-hero__slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
  line-height: 1.25;
  color: rgba(250, 248, 245, 0.95);
  max-width: 820px;
  margin: 0;
  letter-spacing: -0.005em;
}

/* =========================================================
   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); }

/* =========================================================
   3. KOMMUNER - asymmetric bento grid
   ========================================================= */
.l-kommuner {
  padding: clamp(40px, 5.5vh, 72px) clamp(20px, 5vw, 56px) clamp(44px, 6vh, 72px);
  background: var(--l-cream);
  position: relative;
}
.l-kommuner__head {
  max-width: var(--l-content-wide);
  margin: 0 auto clamp(48px, 7vh, 80px);
  position: relative;
}
.l-kommuner__head::before {
  content: '';
  position: absolute;
  top: clamp(-28px, -2.4vh, -18px);
  left: 0;
  width: clamp(64px, 8vw, 96px);
  height: 1px;
  background: var(--l-gold);
}
.l-kommuner__head .l-section-title {
  margin-top: clamp(14px, 2.2vh, 22px);
}
.l-section-dek {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1rem + 1.1vw, 1.95rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-text-primary);
  max-width: 640px;
  margin: clamp(22px, 3.2vh, 34px) 0 0;
}
.l-kommuner__head .l-section-intro {
  max-width: 640px;
  margin-top: clamp(18px, 2.5vh, 26px);
}

.l-kommuner__grid {
  max-width: var(--l-content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}

/* Featured kommuner (Flekkefjord, Kvinesdal) are larger */
.l-kommune-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--l-card-radius-lg);
  text-decoration: none;
  color: #faf8f5;
  isolation: isolate;
  background: var(--l-midnight);
  aspect-ratio: 4 / 5;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.l-kommune-card:hover,
.l-kommune-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -24px rgba(10, 22, 40, 0.4);
}
.l-kommune-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.l-kommune-card__media video,
.l-kommune-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.l-kommune-card:hover .l-kommune-card__media img,
.l-kommune-card:hover .l-kommune-card__media video {
  transform: scale(1.07);
}
.l-kommune-card__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 10%, rgba(10, 22, 40, 0.3) 55%, rgba(10, 22, 40, 0.9) 100%);
}
.l-kommune-card__content {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.l-kommune-card__name {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 1.35rem + 3.5vw, 5rem);
  margin: 0;
  color: #faf8f5;
}
.l-kommune-card__name em {
  font-style: italic;
  color: var(--l-gold);
}
.l-kommune-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: rgba(250, 248, 245, 0.88);
  margin: clamp(14px, 1.8vh, 22px) 0 0;
  max-width: 460px;
}
.l-kommune-card__arrow {
  align-self: flex-end;
  margin-top: clamp(16px, 2.2vh, 24px);
  width: clamp(36px, 3vw, 48px);
  color: var(--l-gold);
  display: inline-flex;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.l-kommune-card__arrow svg {
  width: 100%;
  height: auto;
  display: block;
}
.l-kommune-card:hover .l-kommune-card__arrow,
.l-kommune-card:focus-visible .l-kommune-card__arrow {
  transform: translateX(8px);
}

/* Row cards — narrower cards get a more restrained type scale */
.l-kommune-card--row .l-kommune-card__content { padding: clamp(20px, 2.2vw, 28px); }
.l-kommune-card--row .l-kommune-card__name {
  font-size: clamp(1.8rem, 1.15rem + 1.4vw, 2.5rem);
}
.l-kommune-card--row .l-kommune-card__tagline {
  font-size: clamp(1.05rem, 0.85rem + 0.33vw, 1.2rem);
  margin-top: clamp(10px, 1.4vh, 16px);
  max-width: none;
}
.l-kommune-card--row .l-kommune-card__arrow {
  width: clamp(28px, 2.4vw, 36px);
  margin-top: clamp(12px, 1.6vh, 18px);
}

/* Bento spans */
.l-kommune-card--featured-1 { grid-column: span 7; aspect-ratio: 7 / 5; }
.l-kommune-card--featured-2 { grid-column: span 5; aspect-ratio: 5 / 5; }
.l-kommune-card--row { grid-column: span 3; aspect-ratio: 3 / 4; }

@media (max-width: 1024px) {
  .l-kommune-card--featured-1 { grid-column: span 12; aspect-ratio: 16 / 10; }
  .l-kommune-card--featured-2 { grid-column: span 12; aspect-ratio: 16 / 10; }
  .l-kommune-card--row { grid-column: span 6; aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
  .l-kommune-card--row { grid-column: span 12; aspect-ratio: 4 / 5; }
}

/* =========================================================
   4. LEVE - cross-regional nature + culture
   ========================================================= */
.l-leve {
  padding: clamp(40px, 5.5vh, 72px) 0 var(--l-section-padding);
  background: var(--l-midnight);
  color: #faf8f5;
  position: relative;
  overflow: hidden;
}
.l-leve__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.18;
  filter: saturate(0.85);
}
.l-leve__bg video { width: 100%; height: 100%; object-fit: cover; }
.l-leve__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--l-midnight) 0%, rgba(10,22,40,0.3) 40%, rgba(10,22,40,0.7) 80%, var(--l-midnight) 100%);
}
.l-leve__inner {
  position: relative;
  z-index: 1;
  max-width: var(--l-content-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}
.l-leve__head { max-width: 720px; margin-bottom: clamp(48px, 7vh, 80px); }

.l-filmstrip {
  position: relative;
  margin: 0 calc(-1 * clamp(20px, 5vw, 56px));
}
.l-filmstrip__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  padding: 0 clamp(20px, 5vw, 56px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(20px, 5vw, 56px);
  scrollbar-width: none;
}
.l-filmstrip__track::-webkit-scrollbar { display: none; }
.l-filmstrip__frame {
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: var(--l-card-radius);
  background: var(--l-utility);
}
.l-filmstrip__frame--tall {
  width: clamp(280px, 34vw, 460px);
  aspect-ratio: 3 / 4;
}
.l-filmstrip__frame--wide {
  width: clamp(400px, 48vw, 640px);
  aspect-ratio: 4 / 3;
}
.l-filmstrip__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slowest, 1200ms) var(--ease-out-expo);
}
.l-filmstrip__frame:hover img { transform: scale(1.03); }
.l-filmstrip__frame figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.l-filmstrip__controls {
  display: flex;
  gap: 12px;
  margin-top: clamp(24px, 4vh, 36px);
  padding: 0 clamp(20px, 5vw, 56px);
}
.l-filmstrip__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(250, 248, 245, 0.3);
  background: transparent;
  color: #faf8f5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast, 150ms), border-color var(--duration-fast, 150ms), transform var(--duration-fast, 150ms);
}
.l-filmstrip__btn:hover,
.l-filmstrip__btn:focus-visible {
  background: rgba(250, 248, 245, 0.08);
  border-color: rgba(250, 248, 245, 0.72);
}
.l-filmstrip__btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.l-filmstrip__btn svg { width: 18px; height: 18px; }

/* =========================================================
   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%, #3d5365 100%);
}
.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;
}

/* Album stage */
.l-album {
  position: relative;
  width: 100%;
  margin-top: clamp(20px, 3vh, 36px);
}
.l-album__wrap {
  position: relative;
  height: clamp(520px, 70vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2400px;
  perspective-origin: 50% 60%;
}
.l-album__book {
  position: relative;
  width: min(1100px, 92vw);
  height: clamp(440px, 60vh, 680px);
  transform-style: preserve-3d;
  /* When closed, shift left so the right-half cover appears centered. */
  transform: rotateX(8deg) translateX(-25%);
  transition: transform 1700ms cubic-bezier(0.45, 0, 0.25, 1);
}
.l-album__book.is-open {
  transform: rotateX(8deg) translateX(0);
}
.l-album__base {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  background: #1a1209;
  border-radius: 4px;
  transition: left 1000ms cubic-bezier(0.45, 0, 0.25, 1),
              right 1700ms cubic-bezier(0.45, 0, 0.25, 1);
  box-shadow:
    0 60px 100px rgba(0, 0, 0, 0.7),
    0 30px 50px rgba(0, 0, 0, 0.55);
}
.l-album__book.is-open .l-album__base {
  left: 0;
  right: 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.0) 50%,
    rgba(0, 0, 0, 0.2) 65%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms 600ms;
}
.l-album__book.is-open .l-album__spine { opacity: 1; }

/* Leaves */
.l-album__leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1700ms 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: #f0e9d6;
}
.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%);
}

/* Page faces */
.l-album__page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 3vh, 44px) clamp(28px, 3vw, 48px);
  box-sizing: border-box;
  color: #2a2118;
  font-family: var(--font-body);
}

/* Cover */
.l-album__cover-front,
.l-album__cover-back {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #15324a 0%, #0a1628 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-ornament::before,
.l-album__cover-ornament::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 60%;
  height: 1px;
  background: rgba(125, 211, 192, 0.35);
  transform: translateX(-50%);
}
.l-album__cover-ornament::before { top: 14px; }
.l-album__cover-ornament::after  { bottom: 14px; }
.l-album__cover-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--l-cream);
}
.l-album__cover-eyebrow {
  font-size: 12px;
  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: clamp(2.6rem, 1.6rem + 2.6vw, 4.1rem);
  line-height: 1.05;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  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: 11px;
  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: clamp(10rem, 6rem + 8vw, 14rem);
  color: rgba(125, 211, 192, 0.15);
  line-height: 1;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-album__inside-cover {
  background: #2a1f12;
  color: rgba(240, 233, 214, 0.5);
}
.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 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 2;
}

/* Paper pages */
.l-album__paper { background: #f4ecda; }
.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);
}

/* Title page */
.l-album__title-page { text-align: center; }
.l-album__title-eyebrow {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(60, 42, 20, 0.5);
  margin-bottom: 24px;
}
.l-album__title-display {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 2.2rem + 2.4vw, 5.2rem);
  font-weight: 400;
  margin: 0;
  color: #2a1f10;
  line-height: 1;
}
.l-album__title-display em {
  color: #0a1628;
  font-style: italic;
}
.l-album__title-rule {
  width: 50px;
  height: 1px;
  background: rgba(40, 30, 10, 0.45);
  margin: 28px auto 24px;
}
.l-album__title-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.18rem);
  line-height: 1.55;
  color: rgba(40, 30, 10, 0.78);
  max-width: 360px;
  margin: 0 auto 14px;
}
.l-album__title-body--quiet {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(60, 42, 20, 0.55);
}
.l-album__signoff {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(60, 42, 20, 0.5);
}

/* Closing page — bookend in deep slate so the white-heavy Region
   Lister logo reads cleanly. Echoes the cover's dark palette without
   matching it exactly. */
.l-album__closing-page {
  text-align: center;
  justify-content: flex-start;
  padding-top: clamp(48px, 8vh, 80px);
  /* Override the cream paper background only on the closing page. */
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #2f4a60 0%, #1f3344 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 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
  color: var(--l-cream);
}
.l-album__closing-display em { color: var(--l-aurora); font-style: italic; }
.l-album__closing-rule {
  width: 50px;
  height: 1px;
  background: rgba(250, 248, 245, 0.4);
  margin: clamp(22px, 3vh, 32px) auto clamp(18px, 3vh, 28px);
}
.l-album__closing-logo {
  display: block;
  width: clamp(240px, 70%, 400px);
  height: auto;
  margin: 0 auto;
  opacity: 1;
}

/* Photo frame */
.l-album__frame {
  position: relative;
  background: #faf6ec;
  padding: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.l-album__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-album__frame--portrait {
  width: 78%;
  aspect-ratio: 3 / 4;
  margin-top: 14px;
}
.l-album__frame--landscape {
  width: 88%;
  aspect-ratio: 4 / 3;
  margin-top: 14px;
}
.l-album__frame--small {
  width: clamp(160px, 22vw, 220px);
  aspect-ratio: 4 / 3;
}
.l-album__frame--full { width: 100%; height: 100%; }

/* Photo corners */
.l-album__pc {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #1a1208;
  opacity: 0.85;
}
.l-album__pc--tl { top: -3px; left: -3px;  clip-path: polygon(0 0, 100% 0, 0 100%); }
.l-album__pc--tr { top: -3px; right: -3px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.l-album__pc--bl { bottom: -3px; left: -3px;  clip-path: polygon(0 0, 0 100%, 100% 100%); }
.l-album__pc--br { bottom: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Captions */
.l-album__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.18rem);
  line-height: 1.4;
  color: #2a1f10;
  text-align: center;
  margin-top: 18px;
  max-width: 80%;
}
.l-album__caption--small { font-size: clamp(0.82rem, 0.75rem + 0.18vw, 0.95rem); margin-top: 8px; text-align: left; }
.l-album__credit {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(60, 42, 20, 0.55);
  margin-top: 6px;
}

/* Double / collage layouts */
.l-album__double {
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vh, 36px);
  align-items: center;
  padding: clamp(22px, 3vh, 32px) clamp(18px, 2.5vw, 30px);
}
.l-album__double-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.l-album__double .l-album__frame--small {
  /* Override the default 220px cap — fill most of the half-page so
     the subject of each photo actually reads. */
  width: clamp(220px, 78%, 360px);
  aspect-ratio: 4 / 3;
}
.l-album__double .l-album__caption--small {
  text-align: center;
  max-width: 88%;
  margin-top: 4px;
}
.l-album__collage { padding: 30px; }
.l-album__collage-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  width: 100%;
  height: 100%;
}
.l-album__collage-cell { display: flex; flex-direction: column; align-items: center; min-height: 0; }
.l-album__collage-cell--big { grid-row: 1 / 3; }
.l-album__collage-cell .l-album__frame { flex: 1 1 auto; min-height: 0; height: 0; }
.l-album__collage-cell .l-album__caption { margin-top: 6px; font-size: 12px; }

/* Click zones */
.l-album__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 30;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  appearance: none;
}
.l-album__zone--prev { left: 0; }
.l-album__zone--next { right: 0; }
.l-album__zone-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(250, 248, 245, 0.0);
  transition: color 0.3s, transform 0.3s;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  pointer-events: none;
}
.l-album__zone--prev .l-album__zone-hint { left: 26px; }
.l-album__zone--next .l-album__zone-hint { right: 26px; }
.l-album__wrap:hover .l-album__zone-hint { color: rgba(250, 248, 245, 0.5); }
.l-album__zone:hover .l-album__zone-hint { color: var(--l-aurora); transform: translateY(-50%) scale(1.1); }
.l-album.is-closed .l-album__zone--prev { cursor: default; }
.l-album.is-end .l-album__zone--next { cursor: default; }

/* Toolbar */
.l-album__toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(16px, 2.5vh, 32px) auto 0;
  max-width: min(1100px, 92vw);
  z-index: 40;
}
.l-album__progress { display: flex; gap: 6px; align-items: center; }
.l-album__progress span {
  width: 18px;
  height: 1px;
  background: rgba(250, 248, 245, 0.2);
  transition: background 0.4s, width 0.4s;
}
.l-album__progress span.is-on {
  background: var(--l-aurora);
  width: 30px;
}
.l-album__counter {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(250, 248, 245, 0.72);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}
.l-album__counter-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--l-aurora);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.l-album__controls { display: flex; gap: 10px; }
.l-album__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(250, 248, 245, 0.3);
  background: transparent;
  color: var(--l-cream);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: background 150ms, border-color 150ms;
}
.l-album__btn:hover,
.l-album__btn:focus-visible {
  background: rgba(250, 248, 245, 0.08);
  border-color: rgba(250, 248, 245, 0.72);
}
.l-album__btn--text {
  width: auto;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Mobile: tighten spread, stack the double-row internally */
@media (max-width: 720px) {
  .l-album__wrap { perspective: 1600px; perspective-origin: 50% 50%; }
  .l-album__book {
    width: min(380px, 95vw);
    height: clamp(440px, 70vh, 580px);
    /* Drop the rotateX tilt on mobile — it confuses backface culling
       at this aspect ratio and causes back faces of later leaves to
       bleed through. */
    transform: translateX(-25%);
  }
  .l-album__book.is-open { transform: translateX(0); }
  .l-album__page { padding: clamp(18px, 3vw, 28px); }
  .l-album__cover-ornament { inset: 22px; }
  .l-album__cover-eyebrow { font-size: 10px; margin-bottom: 18px; }
  .l-album__cover-title { font-size: clamp(2.2rem, 1.6rem + 3vw, 2.6rem); }
  .l-album__cover-rule { margin: 22px auto 12px; }
  .l-album__title-display { font-size: clamp(2.6rem, 2rem + 2vw, 3.2rem); }
  .l-album__title-body { font-size: 0.96rem; max-width: 100%; }
  .l-album__title-body--quiet { font-size: 11px; }
  .l-album__closing-display { font-size: clamp(1.4rem, 1rem + 2vw, 2rem); }
  .l-album__double { gap: 18px; padding: 14px 10px; }
  .l-album__double-row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
  }
  .l-album__frame--small { width: 70%; aspect-ratio: 4 / 3; }
  .l-album__double .l-album__frame--small { width: 86%; max-width: 86%; }
  .l-album__frame--portrait { width: 88%; margin-top: 6px; }
  .l-album__frame--landscape { width: 96%; margin-top: 6px; }
  .l-album__caption { font-size: 13px; margin-top: 10px; max-width: 96%; }
  .l-album__caption--small { font-size: 11px; text-align: center; }
  .l-album__credit { font-size: 9px; letter-spacing: 0.16em; }
  .l-album__collage { padding: 14px; }
  .l-album__collage-grid { gap: 8px; grid-template-columns: 1fr; grid-template-rows: 1.4fr 1fr 1fr; }
  .l-album__collage-cell--big { grid-row: 1; }
  .l-album__inside-label { font-size: 14px; }
  .l-album__toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .l-album__progress { display: none; }
  .l-album__btn { width: 34px; height: 34px; font-size: 16px; }
  .l-album__btn--text { padding: 0 12px; }
  /* Hide zone hints so they don't crowd the small viewport */
  .l-album__zone-hint { font-size: 20px; }
  .l-album__zone--prev .l-album__zone-hint { left: 8px; }
  .l-album__zone--next .l-album__zone-hint { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .l-album__book,
  .l-album__leaf,
  .l-album__base {
    transition: none;
  }
}

/* =========================================================
   4b. LEVE - stories moved to own `.lister-home-articles` section
       (reuses home-articles + articles-listing design)
   ========================================================= */

/* =========================================================
   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);
}

/* =========================================================
   7. KART - region map
   ========================================================= */
.l-map {
  padding: clamp(22px, 3.5vh, 44px) clamp(20px, 5vw, 56px) var(--l-section-padding);
  background: var(--l-cream);
  color: var(--color-text-primary, #1a1a1a);
}
.l-map__inner {
  max-width: var(--l-content-wide);
  margin: 0 auto;
}
.l-map__text {
  max-width: 760px;
  margin-bottom: clamp(28px, 4.5vh, 48px);
}
.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--interactive {
  position: relative;
  height: clamp(560px, 72vh, 760px);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
}
.l-map__canvas .v-location__map {
  width: 100%;
  height: 100%;
}
.l-map__canvas--interactive .v-location__map {
  display: none;
}
.l-map__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.l-map__map .mapboxgl-ctrl-top-right {
  top: 18px;
  right: 18px;
}
.l-map__map .mapboxgl-ctrl-group {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(250, 248, 245, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.l-map__legend,
.l-map__hint {
  position: absolute;
  z-index: 4;
  font-family: var(--font-body);
  color: #fff8ee;
  pointer-events: none;
}
.l-map__legend {
  left: 18px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(250, 248, 245, 0.14);
  border-radius: 999px;
  background: rgba(10, 22, 40, 0.68);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.l-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.l-map__legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  margin: -4px 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
  /* Parent .l-map__legend has pointer-events: none so the map
     underneath can still be dragged through empty legend space.
     The toggle buttons themselves must opt back in. */
  pointer-events: auto;
  transition: background 150ms ease, opacity 150ms ease, border-color 150ms ease;
}
.l-map__legend-toggle:hover,
.l-map__legend-toggle:focus-visible {
  background: rgba(250, 248, 245, 0.12);
  border-color: rgba(250, 248, 245, 0.2);
  outline: none;
}
.l-map__legend-toggle.is-off { opacity: 0.45; }
.l-map__legend-toggle.is-off .l-map__legend-dot { opacity: 0.5; }
.l-map__legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(250, 248, 245, 0.5);
}
.l-map__legend-dot--kommune {
  width: 18px;
  height: 2px;
  border-radius: 0;
  background: #fff8ee;
  box-shadow: none;
}
.l-map__legend-dot--bo { background: #d7a29b; }
.l-map__legend-dot--jobb { background: #7dd3c0; }
.l-map__legend-dot--poi { background: #e3b97a; }
.l-map__hint {
  left: 18px;
  bottom: 18px;
  max-width: 260px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(10, 22, 40, 0.62);
  color: rgba(250, 248, 245, 0.82);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
}
.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, #1a1a1a);
  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;
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  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: #fff;
  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: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--l-gold);
}
.l-map-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1vw, 2.2rem);
  font-weight: 300;
  line-height: 1.02;
  color: var(--color-text-primary, #1a1a1a);
}
.l-map-card__tagline {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.32;
  color: var(--l-fjord);
}
.l-map-card__text {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--color-text-secondary, #4a4a4a);
}
.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: 0.72rem;
  font-weight: 700;
}
.l-map-card__footer {
  margin-top: 18px;
}
.l-map-card__link,
.l-map-card__demo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  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-card__demo-link {
  color: rgba(10, 22, 40, 0.46);
}
.l-map__canvas .v-location__pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--l-gold);
  border: 2px solid #faf8f5;
  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: #faf8f5;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 900px) {
  .l-map__canvas .v-location__pin[data-label]::after {
    font-size: 0.64rem;
    padding: 4px 8px;
  }
}
@media (max-width: 900px) {
  .l-map__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   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: 600;
  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, 300ms), transform var(--duration-normal, 300ms);
}
.l-partners__logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* =========================================================
   7. FLYTT-GUIDER (adaptert fra nordoyane .n-move)
   ========================================================= */
.l-move-guides {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(540px, 65vh, 780px);
  overflow: hidden;
  color: #faf8f5;
  isolation: isolate;
}
.l-move-guides__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.l-move-guides__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.l-move-guides__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(10, 22, 40, 0.18) 0%,
    rgba(10, 22, 40, 0.32) 45%,
    rgba(10, 22, 40, 0.48) 100%
  );
}
.l-move-guides__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  padding: clamp(56px, 8vh, 104px) clamp(24px, 5vw, 48px);
}
.l-move-guides__content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center 30%,
    rgba(10, 22, 40, 0.55) 0%,
    rgba(10, 22, 40, 0.32) 32%,
    rgba(10, 22, 40, 0.08) 62%,
    rgba(10, 22, 40, 0) 82%
  );
  z-index: -1;
  pointer-events: none;
}
.l-move-guides__content .l-eyebrow {
  margin-bottom: clamp(14px, 2vh, 22px);
}
.l-move-guides__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #faf8f5;
  margin: 0 0 clamp(18px, 2.8vh, 28px);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.l-move-guides__title em {
  font-style: italic;
  color: var(--l-gold);
}
.l-move-guides__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(250, 248, 245, 0.82);
  margin: 0 0 clamp(32px, 4.5vh, 52px);
  max-width: 600px;
}
.l-move-guides__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
}
.l-move-guides__card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--l-card-radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  text-decoration: none;
  color: #faf8f5;
  text-align: left;
  transition: background 400ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.l-move-guides__card:hover,
.l-move-guides__card:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(196, 145, 138, 0.55);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}
.l-move-guides__card-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--l-gold);
  margin-bottom: clamp(10px, 1.6vh, 16px);
}
.l-move-guides__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 0.95rem + 1vw, 1.75rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #faf8f5;
  margin-bottom: clamp(10px, 1.6vh, 16px);
}
.l-move-guides__card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: rgba(250, 248, 245, 0.72);
  margin-bottom: clamp(16px, 2.2vh, 24px);
  flex: 1;
}
.l-move-guides__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--l-gold);
  transition: gap 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.l-move-guides__card:hover .l-move-guides__card-link,
.l-move-guides__card:focus-visible .l-move-guides__card-link {
  gap: 14px;
}

.l-move-guides__card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(26px, 3.4vw, 40px) clamp(28px, 3.5vw, 44px);
}
.l-move-guides__card--wide .l-move-guides__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.l-move-guides__card--wide .l-move-guides__card-desc {
  margin-bottom: 0;
  max-width: 60ch;
}
.l-move-guides__card--wide .l-move-guides__card-link {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .l-move-guides__card--wide {
    flex-direction: column;
    align-items: flex-start;
  }
  .l-move-guides__card--wide .l-move-guides__card-desc {
    margin-bottom: clamp(14px, 2vh, 20px);
  }
}

@media (max-width: 640px) {
  .l-move-guides__cards {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   8. CTA
   ========================================================= */
.l-cta {
  position: relative;
  padding: clamp(120px, 18vh, 200px) clamp(20px, 5vw, 56px);
  background: var(--l-midnight);
  color: #faf8f5;
  overflow: hidden;
  isolation: isolate;
}
.l-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.l-cta__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.8);
}
.l-cta__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.65) 40%, rgba(10, 22, 40, 0.92) 100%);
}
.l-cta__inner {
  max-width: var(--l-content-max);
  margin: 0 auto;
  text-align: center;
}
.l-cta__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.5rem + 3.8vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 16px 0 20px;
}
.l-cta__title em {
  font-style: italic;
  color: var(--l-gold);
}
.l-cta__lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto clamp(40px, 6vh, 56px);
  color: rgba(250, 248, 245, 0.82);
}
.l-cta__actions {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* =========================================================
   Fade-in animation on reveal
   ========================================================= */
.lister-page [data-reveal] {
  opacity: 0;
  transition: opacity 900ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.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-kommune-card,
  .l-kommune-card__media img,
  .l-kommune-card__media video,
  .l-filmstrip__frame img,
  .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); }

/* =========================================================
   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;
}

/* =========================================================
   BO — bo-områder-rutenett + FINN-inngang
   Adaptert fra nordoyane .n-grid-a/.n-card-a, .l-bo-prefiks
   ========================================================= */
.l-bo {
  background: var(--l-cream);
  padding: clamp(28px, 4vh, 52px) clamp(20px, 4vw, 56px) clamp(60px, 9vh, 120px);
}

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

.l-bo__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vh, 72px);
}

.l-bo__head .l-section-intro {
  margin: clamp(18px, 3vh, 28px) auto 0;
}

.l-bo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.l-bo-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--l-card-radius-lg, 22px);
  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);
}

.l-bo-card--static {
  cursor: default;
}

.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__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;
}

.l-bo-card:hover .l-bo-card__image img {
  transform: scale(1.08);
  filter: brightness(1.06) saturate(1.08);
}

.l-bo-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 22, 40, 0.78) 0%,
    rgba(10, 22, 40, 0.22) 48%,
    transparent 100%
  );
  transition: background 0.6s ease;
}

.l-bo-card:hover .l-bo-card__overlay {
  background: linear-gradient(
    to top,
    rgba(10, 22, 40, 0.85) 0%,
    rgba(10, 22, 40, 0.3) 55%,
    rgba(10, 22, 40, 0.05) 100%
  );
}

.l-bo-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(20px, 2.6vw, 32px);
  z-index: 2;
  color: #fff;
  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: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-gold);
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.l-bo-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.l-bo-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  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 {
  margin: clamp(40px, 6vh, 64px) auto 0;
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px);
  background: #faf8f5;
  border: 1px solid rgba(196, 145, 138, 0.22);
  border-radius: var(--l-card-radius-lg, 22px);
  box-shadow: 0 4px 16px rgba(10, 22, 40, 0.05);
}

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

.l-bo__finn-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-gold);
  margin-bottom: 8px;
}

.l-bo__finn-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-primary, #1a1a1a);
  margin: 0;
}

.l-bo__finn-cta {
  flex: 0 0 auto;
}

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

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

@media (max-width: 768px) {
  .l-bo__finn {
    flex-direction: column;
    align-items: flex-start;
  }
  .l-bo__finn-cta {
    align-self: stretch;
    justify-content: center;
  }
}

@media (max-width: 639px) {
  .l-bo__grid {
    grid-template-columns: 1fr;
  }
  .l-bo-card {
    aspect-ratio: 4 / 5;
  }
}

@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-warm-white);
  padding: clamp(60px, 9vh, 120px) clamp(20px, 4vw, 56px);
}

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

.l-jobb__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vh, 72px);
}

.l-jobb__head .l-section-intro {
  margin: clamp(18px, 3vh, 28px) auto 0;
}

/* 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: #fff;
  border-radius: var(--l-card-radius-lg, 22px);
  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: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  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: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-gold);
  margin-bottom: 8px;
}

.l-jobb-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-primary, #1a1a1a);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.l-jobb-card__summary {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-secondary, #4a4a4a);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 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;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
  color: var(--color-text-secondary, #4a4a4a);
  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;
  aspect-ratio: 3 / 2;
  padding: clamp(14px, 1.4vw, 20px);
  background: #fff;
  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: #fff;
  text-align: center;
}

.l-jobb-logo__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-text-primary, #1a1a1a);
  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);
}

/* =========================================================
   CTA-row — premium editorial (3 kort: selv, partnere, veiledet)
   ========================================================= */
.l-jobb__cta-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  max-width: 1320px;
  margin: 0 auto;
}

.l-jobb-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(36px, 3.8vw, 56px) clamp(30px, 3.2vw, 48px) clamp(32px, 3.4vw, 44px);
  border-radius: var(--l-card-radius-lg, 22px);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  transition:
    transform 0.55s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.55s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Top hairline-ornament (rose-gold) — vokser på hover */
.l-jobb-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(30px, 3.2vw, 48px);
  height: 2px;
  width: 40px;
  background: var(--l-gold);
  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.l-jobb-cta:hover::before {
  width: calc(100% - (2 * clamp(30px, 3.2vw, 48px)));
}

.l-jobb-cta__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vh, 16px);
  margin-top: clamp(14px, 1.8vh, 22px);
}

.l-jobb-cta__eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--l-gold);
}

.l-jobb-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

.l-jobb-cta__text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.78;
  max-width: 34ch;
}

.l-jobb-cta__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 3.6vh, 44px);
  padding-top: clamp(18px, 2.2vh, 24px);
  border-top: 1px solid currentColor;
  border-color: rgba(10, 22, 40, 0.12);
}

.l-jobb-cta__label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.l-jobb-cta__arrow {
  width: 22px;
  height: 22px;
  margin-left: auto;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.l-jobb-cta:hover .l-jobb-cta__arrow {
  transform: translateX(8px);
}

/* --- Lyse kort (01 & 02) — subtile fargeaksenter --- */
.l-jobb-cta--self,
.l-jobb-cta--partners {
  color: var(--color-text-primary, #1a1a1a);
  border-color: rgba(196, 145, 138, 0.2);
  box-shadow:
    0 1px 2px rgba(10, 22, 40, 0.03),
    0 4px 12px rgba(10, 22, 40, 0.04),
    0 12px 32px rgba(10, 22, 40, 0.04);
}

/* Kort 01: varm aksent (rose-gold fra øvre høyre, fader ned til cream) */
.l-jobb-cta--self {
  background:
    radial-gradient(ellipse 75% 65% at 95% 0%, rgba(196, 145, 138, 0.28), transparent 60%),
    linear-gradient(135deg, #fdf6f2 0%, #f7ebe4 100%);
}

.l-jobb-cta--self:hover {
  background:
    radial-gradient(ellipse 75% 65% at 95% 0%, rgba(196, 145, 138, 0.4), transparent 60%),
    linear-gradient(135deg, #fdf6f2 0%, #f7ebe4 100%);
}

/* Kort 02: kjølig aksent (glacier fra nedre venstre, fader opp til cream) */
.l-jobb-cta--partners {
  background:
    radial-gradient(ellipse 75% 65% at 5% 100%, rgba(143, 184, 202, 0.32), transparent 60%),
    linear-gradient(135deg, #f8fbfc 0%, #edf3f6 100%);
}

.l-jobb-cta--partners:hover {
  background:
    radial-gradient(ellipse 75% 65% at 5% 100%, rgba(143, 184, 202, 0.45), transparent 60%),
    linear-gradient(135deg, #f8fbfc 0%, #edf3f6 100%);
}

.l-jobb-cta--self:hover,
.l-jobb-cta--partners:hover {
  transform: translateY(-6px);
  border-color: rgba(196, 145, 138, 0.55);
  box-shadow:
    0 2px 6px rgba(10, 22, 40, 0.04),
    0 16px 40px rgba(10, 22, 40, 0.08),
    0 40px 80px rgba(196, 145, 138, 0.08);
}

.l-jobb-cta--self .l-jobb-cta__foot,
.l-jobb-cta--partners .l-jobb-cta__foot {
  border-color: rgba(10, 22, 40, 0.12);
}

.l-jobb-cta--self:hover .l-jobb-cta__foot,
.l-jobb-cta--partners:hover .l-jobb-cta__foot {
  border-color: var(--l-gold);
}

/* --- Mørkt kort (03) --- */
.l-jobb-cta--guided {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(196, 145, 138, 0.1), transparent 60%),
    linear-gradient(135deg, #0f1d30 0%, var(--l-midnight) 60%, #0a1524 100%);
  color: #faf8f5;
  border-color: rgba(250, 248, 245, 0.08);
  box-shadow:
    0 2px 6px rgba(10, 22, 40, 0.15),
    0 14px 36px rgba(10, 22, 40, 0.22),
    inset 0 1px 0 rgba(250, 248, 245, 0.04);
}

.l-jobb-cta--guided:hover {
  transform: translateY(-6px);
  border-color: rgba(196, 145, 138, 0.5);
  box-shadow:
    0 2px 6px rgba(10, 22, 40, 0.2),
    0 18px 44px rgba(10, 22, 40, 0.3),
    0 40px 80px rgba(196, 145, 138, 0.12),
    inset 0 1px 0 rgba(250, 248, 245, 0.06);
}

.l-jobb-cta--guided .l-jobb-cta__foot {
  border-color: rgba(250, 248, 245, 0.15);
}

.l-jobb-cta--guided:hover .l-jobb-cta__foot {
  border-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);
  }
  .l-jobb__cta-split {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}

@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,
  .l-jobb-cta,
  .l-jobb-cta__arrow {
    transition: none !important;
  }
  .l-jobb-card:hover,
  .l-jobb-logo:hover,
  .l-jobb-cta:hover {
    transform: none;
  }
  .l-jobb-card:hover .l-jobb-card__image img {
    transform: none;
  }
}

/* =========================================================
   ARKIVET — Flere historier (dummy-karusell, batch-swap)
   ========================================================= */
.larch {
  background: var(--l-cream, #f1ebe3);
  padding: 0 0 clamp(60px, 9vh, 120px);
}

.larch__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 56px);
}

.larch__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(20px, 2.6vh, 32px);
  padding: 0 clamp(80px, 5.5vw, 108px);
}

.larch__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-gold);
}

.larch__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #1a1a1a);
  margin: 0;
}

.larch__track-wrap {
  position: relative;
  padding: 0 clamp(80px, 5.5vw, 108px);
}

.larch__viewport {
  position: relative;
  overflow: hidden;
}

.larch__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  will-change: transform;
}

.larch__grid--incoming {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

@media (max-width: 1399px) {
  .larch__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 639px) {
  .larch__grid {
    grid-template-columns: 1fr;
  }
}

.larch-card {
  background: #faf8f5;
  border-radius: var(--radius-xl, 16px);
  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);
  }
}

.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: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--l-gold);
  margin-bottom: 12px;
}

.larch-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.98rem + 0.4vw, 1.3rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-primary, #1a1a1a);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.larch-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #4a4a4a);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.larch__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.86);
  color: #faf8f5;
  border: 1px solid rgba(250, 248, 245, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 5;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 10px 24px rgba(10, 22, 40, 0.18);
}

.larch__nav svg {
  width: 20px;
  height: 20px;
}

.larch__nav:hover:not(:disabled) {
  background: rgba(10, 22, 40, 0.95);
  border-color: var(--l-gold);
  transform: translateY(-50%) scale(1.05);
}

.larch__nav:focus-visible {
  outline: 2px solid var(--l-gold);
  outline-offset: 3px;
}

.larch__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.larch__nav--prev {
  left: clamp(4px, 0.5vw, 10px);
}

.larch__nav--next {
  right: clamp(4px, 0.5vw, 10px);
}

@media (max-width: 640px) {
  .larch__track-wrap,
  .larch__header {
    padding: 0 56px;
  }
  .larch__nav {
    width: 40px;
    height: 40px;
  }
  .larch__nav svg {
    width: 16px;
    height: 16px;
  }
  .larch__nav--prev {
    left: 4px;
  }
  .larch__nav--next {
    right: 4px;
  }
}

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