/* ============================================
   FREYSTA VILLAGE EDITORIAL
   Modular design system for 60+ village pages
   ============================================ */

/* -- Local Fonts -- */
.village-page {
  --color-cream: var(--surface-story);
  --color-warm-white: var(--surface-explore);
  --color-midnight: var(--surface-strong);
  --color-text-muted: var(--tekst-dempet); /* WCAG AA fix: 4.86:1 on story, 5.47:1 on explore */
}

/* ============================================
   SCROLL-MARGIN — Offset for fixed header on anchor nav
   ============================================ */
.village-page [id] {
  scroll-margin-top: 90px;
}

/* ============================================
   FOOTER — fortsetter Ta steget-landingen, som paa kommunesidene
   (.kv-page-justeringen i kommune-v2.css + .lister-page i lister.css).
   Uten dette gjelder footer.css sin margin-top: 96px, og sidegrunnen
   blir staaende som en krem-glippe mellom den moerke avslutningen og
   footeren.
   ============================================ */
.village-page .site-footer--lister {
  margin-top: 0;
  background: var(--surface-utility);
  border-top: 1px solid rgba(241, 235, 227, 0.12);
  padding: clamp(18px, 2.2vw, 28px) 24px;
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}

.js [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .v-chapter__heading {
    --heading-progress: 1;
  }
}

/* ============================================
   V-CHAPTER - Story chapter wrapper
   ============================================ */
.v-chapter {
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  background: var(--color-cream);
}
/* Et kapittel rett etter en moerk eller fullbredde flate trenger mer luft
   over overskriften enn et kapittel etter et annet kapittel. Maalet er
   samme luft overalt: 128 px ned til tittelen (Tom 12. sep, etter at
   «Maritim kultur» paa Borhaug laa for tett under sitatveggen).

   Sitatveggen har 64 px bunnmarg selv, saa den faar halv verdi og lander
   paa det samme. Klassen --etter-mork settes i sida der naboen er en
   komponent som ogsaa legger igjen <link>/<script>: da traff ikke
   soeskenvelgeren. */
.v-chapter--etter-mork,
.v-chapter--over,
.v-spread--cinematic + .v-chapter {
  padding-top: var(--space-5xl);
}

.v-quote--wall + .v-chapter {
  padding-top: var(--space-3xl);
}

/* Samme problem naar den moerke flaten er SISTE element inne i forrige
   kapittel — et faktapanel eller en moerk innfelling. Da fikk neste
   overskrift bare 52 px, uansett side (Farsund by, Hidra, Sira, Byremo,
   Flekkefjord by, AAna-Sira, og de engelske utgavene). Forrige kapittel
   gir 24 px bunn selv, saa dette lander like over 116. */
.v-chapter--dark + .v-chapter,
.v-chapter:has(> .v-aside:last-child) + .v-chapter,
.v-chapter:has(> .v-feature-box:last-child) + .v-chapter {
  padding-top: var(--space-4xl);
}
/* ... men da maa panelet selv ikke ogsaa legge igjen bunnmargen sin: begge
   deler ga 216 px under faktaboksen i stedet for ~120 (Vanse, Marion 21.
   sep 2026 — «for mykje luft»; maalt likt paa Farsund by, Hidra og
   Flekkefjord by). */
.v-chapter > .v-aside:last-child {
  margin-bottom: 0;
}
/* Rett etter prosa holder det med samme luft som mellom avsnitt og
   bilde: 96 px over panelet leste som et hull i teksten («jæklig mykje
   luft», Farsund by 22. sep 2026). */
.v-prose + .v-aside {
  margin-top: var(--space-2xl);
}

#living.v-chapter {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.v-chapter--dark {
  background: var(--surface-utility);
  color: var(--color-text-inverse);
}

.v-chapter--compact {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.v-chapter--compact + .v-chapter--compact {
  padding-top: var(--space-md);
}

/* Et kompakt kapittel etter en moerk eller fullbredde flate skal ha
   husets luft likevel: --compact staar senere og slo --etter-mork, og
   overskriften fikk 24 px under bildet (Lyngdal by, 4. okt 2026). */
.v-chapter--compact.v-chapter--etter-mork {
  padding-top: var(--space-5xl);
}

/* Tighter padding when compact chapter wraps a feature-box
   — placed after the adjacent-sibling rule so it wins at equal specificity */
.v-chapter--compact:has(.v-feature-box) {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* Extra breathing room after a feature-box card (the dark edge needs
   more whitespace before the next heading to feel balanced) */
.v-chapter--compact:has(.v-feature-box) + .v-chapter {
  padding-top: var(--space-2xl);
}

.v-chapter--compact.v-chapter--dark {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
}

.v-chapter__heading {
  max-width: 1060px;
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-xl);
  border-top: none;
}
/* En overskrift midt i kapitlet, rett etter tekst (Spind: «Sjøvann i
   blodet» etter innledningen), får luft over seg. Uten den sto den bare
   prosaens 32 px under avsnittet over (Tom 8. okt 2026). */
.v-prose + .v-chapter__heading { margin-top: var(--space-4xl); }

.v-chapter__title::after {
  content: '';
  display: block;
  width: calc(20px + 180px * var(--heading-progress, 0));
  height: 3px;
  background: #2d6a3f;
  margin-top: var(--space-md);
  will-change: width;
  transition: width 0.7s var(--ease-out-expo);
}

.v-chapter--dark .v-chapter__title::after {
  background: rgba(45, 106, 63, 0.8);
}

/* ============================================
   V-FEATURE-BOX - Dark card within light chapter
   ============================================ */
/* Samme bredde som prosaen og faktapanelet rundt: med to ganger
   space-xl trukket fra sto boksen 32 px inn paa hver side («usymmetrisk»,
   Farsund by 22. sep 2026). */
.v-feature-box {
  max-width: 1060px;
  margin: 0 auto;
  background: var(--surface-utility);
  border-radius: 20px;
  /* Mer luft over tittelen enn under innholdet: den store tittelen sto
     trangt mot toppkanten (Spind, Tom 8. okt 2026). */
  padding: var(--space-3xl) var(--space-lg) 40px;
  box-shadow: 0 18px 50px rgba(10, 22, 40, 0.25);
  box-sizing: border-box;
}

/* Boksen har ingen egen margin (den ligger normalt alene i et kompakt
   kapittel). Foelger prosa rett etter, som i Farsund by der kildens
   faktaboks staar midt i historiekapitlet, trenger den samme luft under
   seg som prosaen har. */
/* Bilde nederst i den moerke boksen (Herad, svanene i Svanefjorden —
   Marion 21. sep 2026). Bred beskjaering, samme hjoerner som boksen. */
.v-feature-box__bilde {
  margin: var(--space-xl) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.v-feature-box__bilde img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: var(--v-bilde-fokus, center);
  border-radius: 12px;
}
/* Bildekarusell i den mørke boksen (Spind, Farsund Resort): luft over,
   og ingen marg under, for boksen har sin egen polstring. Bildetekst og
   kreditering får mørk-bunn-fargene fra .v-feature-box .v-spread__caption. */
.v-feature-box .v-galleri { margin: var(--space-xl) 0 0; }

.v-feature-box .v-feature-box__bilde figcaption {
  font-size: var(--etikett-stor);
  color: var(--tekst-dempet-mork);
}

/* Midt i teksten (Kongen av Farsund) får boksen like mye luft over og
   under: 64 px mot prosaens vanlige 32 (Tom 7. okt 2026). */
.v-prose:has(+ .v-feature-box + .v-prose) {
  margin-bottom: var(--space-3xl);
}
.v-feature-box + .v-prose {
  margin-top: var(--space-3xl);
}

.v-feature-box h2,
.v-feature-box h3,
.v-feature-box p,
.v-feature-box li,
.v-feature-box a {
  color: var(--color-text-inverse);
}

.v-feature-box .v-chapter__title::after {
  background: rgba(45, 106, 63, 0.8);
}

.v-feature-box .v-prose p {
  color: rgba(250, 248, 245, 0.7);
}

.v-feature-box .v-spread {
  padding: 0 var(--space-xl);
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

/* Boksen er moerk, saa bildeteksten maa ha moerk-bunn-farge. --tekst-dempet
   (lys bunn) gav 1,7:1 mot skiferen paa Flekkefjord by. Samme par som
   .v-aside under. Krediteringen: moerk-bunn-tokenet maaler 4,82 (fanget av
   axe paa Aana-Sira 7. sep). */
.v-feature-box .v-spread__caption { color: var(--color-text-inverse); }
.v-feature-box .v-spread__credit { color: var(--tekst-dempet-mork); }

.v-feature-box .v-spread + .v-prose {
  margin-top: var(--space-lg);
}

/* Bilde inne i faktapanelet (Flekkefjord by, 11. sep 2026: gatekunsten
   hoerer sammen med gatekunst-panelet, som paa den moerke boksen). Samme
   grep som .v-feature-box .v-spread over. */
.v-aside .v-spread {
  position: relative;
  max-width: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
}
.v-aside .v-spread__caption { color: var(--color-text-inverse); }
.v-aside .v-spread__credit { color: var(--tekst-dempet-mork); }

/* Skoleboksen (SkoleBoks.astro) paa en stedsside: samme lesebredde og
   luft som faktapanelet, ellers fyller den hele kapittelbredden
   (Flekkefjord by, Tom 11. sep: «for bred»). */
.v-skoleboks {
  max-width: 1060px;
  margin: var(--space-4xl) auto;
}

.v-feature-link-card {
  max-width: 1060px;
  margin: var(--space-lg) auto 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(250, 248, 245, 0.22);
  background: rgba(7, 21, 38, 0.48);
  box-shadow: inset 0 1px 0 rgba(250, 248, 245, 0.08);
}

.v-feature-link-card__inner {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.v-feature-link-card__thumb {
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.v-feature-link-card__content {
  min-width: 0;
}

.v-feature-link-card__label {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.62);
}

.v-feature-link-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.962rem + 0.3756vw, 1.3rem);
  line-height: var(--linje-kort);
  color: var(--color-text-inverse);
}

.v-feature-link-card__meta {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: var(--etikett-stor);
  color: rgba(250, 248, 245, 0.72);
}

.v-feature-link-card__inner:hover .v-feature-link-card__title {
  color: var(--color-gold);
}

.v-feature-link-card__inner:hover .v-feature-link-card__meta {
  color: var(--color-text-inverse);
}

@media (max-width: 700px) {
  .v-feature-box {
    padding: 40px 24px 32px;
    border-radius: 14px;
  }
  /* Boksen har sin egen polstring. Innholdet skal ikke legge sin oppå:
     dobbelt innrykk ga «Smaksopplevelser» (Aana-Sira) 160 px å bo på. */
  .v-feature-box .v-chapter__heading,
  .v-feature-box .v-prose,
  .v-feature-box .v-spread {
    padding-left: 0;
    padding-right: 0;
  }

  .v-feature-link-card__inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .v-feature-link-card__thumb {
    height: 140px;
  }
}

.v-chapter__title {
  font-family: var(--font-body);
  font-size: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem);
  font-weight: 400;
  letter-spacing: var(--sperring-tett);
  line-height: var(--linje-display);
  color: var(--color-text-primary);
}

.v-chapter--dark .v-chapter__title {
  color: var(--color-text-inverse);
}

/* ============================================
   V-PROSE - Text block
   ============================================ */
.v-prose {
  max-width: 1060px;
  margin: 0 auto var(--space-xl);
  padding: 0 var(--space-xl);
}

.v-prose::after {
  content: "";
  display: block;
  clear: both;
}

#living.v-chapter .v-prose:last-of-type {
  margin-bottom: var(--space-lg);
}

.v-prose--tight {
  margin-top: calc(-1 * var(--space-md));
  margin-bottom: var(--space-xl);
}

.v-prose p{
  font-family: var(--font-body);
  font-size: var(--brod);
  font-weight: 400;
  line-height: var(--linje-brod-luftig);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.v-chapter--dark .v-prose p {
  color: rgba(250, 248, 245, 0.7);
}

/* Mellomtittel i broedteksten — kildens egne underoverskrifter inne i et
 * kapittel («Oldemors hage», «Oldemors hus» paa Aana-Sira, 7. sep 2026).
 * Display-kursiv paa tittelskalaen, saa den leser som et avsnittsskifte og
 * ikke konkurrerer med kapitteltittelen. */
.v-prose h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  letter-spacing: var(--sperring-tett);
  color: var(--color-text-primary);
  margin: var(--space-xl) 0 var(--space-sm);
}
.v-prose h3:first-child { margin-top: 0; }
/* Inne i den moerke innskuddsboksen arver mellomtittelen boksens tekstfarge —
   .v-prose h3 staar seinere i fila enn .v-feature-box h3 og vant ellers. */
.v-feature-box .v-prose h3 { color: var(--color-text-inverse); }

/* Kursiv i løpende tekst: brødskriften har ingen kursivsnitt, så vinkelen
   settes her (CLAUDE.md, «Kursiv»). Sitert tale og navn, for eksempel
   kaperskipene og Christinas dialektord (Marion, 7. okt 2026). */
.v-prose em { font-style: oblique 14deg; }

.v-prose p:last-child {
  margin-bottom: 0;
}

.v-prose p.v-prose__spacer {
  margin: 0 0 var(--space-md);
  font-size: 0;
  line-height: 0;
}

.v-prose__lead {
  font-size: var(--brod);
  font-weight: 400 !important;
  color: var(--color-text-primary) !important;
}

.v-chapter--dark .v-prose__lead {
  color: var(--color-text-inverse) !important;
}

/* Float image inside prose - editorial wrap */
.v-prose__float-image {
  float: right;
  width: 44%;
  margin: var(--space-xs) 0 var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.v-prose__float-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

.v-prose__float-image figcaption {
  padding: var(--space-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--etikett);
  color: var(--color-text-muted);
  line-height: var(--linje-etikett);
}

.v-prose a {
  color: #1f5f45;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.v-prose a:hover {
  color: #184a36;
}

.v-chapter--dark .v-prose a {
  /* Leire (--color-gold) maaler 4,18 mot skifer — under AA. Aksent for
     moerk bunn maaler 4,69 (axe, Aana-Sira 7. sep 2026). */
  color: var(--aksent-tekst-mork);
}

.v-feature-box .v-prose a {
  color: var(--aksent-tekst-mork);
}

.v-feature-box .v-prose a:hover {
  color: var(--color-text-inverse);
}

.v-split__text a {
  color: #1f5f45;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.v-split__text a:hover {
  color: #184a36;
}

.v-chapter--dark .v-split__text a {
  color: var(--color-gold);
}

.v-prose ul + p {
  margin-top: var(--space-lg);
}

/* ============================================
   V-SPREAD - Full-width image
   ============================================ */
.v-spread {
  max-width: 1060px;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-xl);
}

.v-spread--bleed {
  max-width: none;
  padding: 0;
}

.v-spread__figure {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.v-spread__figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}

/* Bilde i full lesebredde (Spind, 16. okt 2026): figuren fyller spalten
   og tegnes i sitt eget format, også når det er høyere enn vinduet.
   Standardfiguren krymper til 80vh og blir smalere enn teksten. */
.v-spread--lesebredde .v-spread__figure { width: 100%; }
.v-spread--lesebredde .v-spread__figure img { width: 100%; max-height: none; }

.v-spread__caption {
  width: 100%;
  max-width: var(--spread-caption-width, 100%);
  margin: 0 auto;
  padding: var(--space-sm) 0 0;
  /* Some fonts have negative left sidebearing on capitals; keep the first glyph
     from looking clipped against the content edge. */
  padding-left: 12px;
  font-family: var(--font-body);
  font-size: var(--etikett);
  color: var(--color-text-muted);
  border-radius: 0;
  overflow: visible;
}

.v-spread--bleed .v-spread__caption {
  padding-left: 12px;
  padding-right: 0;
}

.v-spread__credit {
  /* Ingen opacity: den vasket tokenet ut til 3,01:1. Fargen baerer verdien.
     Lys bunn er standard; cinematic-varianten ligger paa foto og overstyrer. */
  color: var(--tekst-dempet);
}

/* ============================================
   DUO — to staaende bilder side om side
   Mobilfoto er som regel staaende. Ett staaende bilde alene blir en smal
   soeyle, og i delt visning etterlater det et tomt felt ved siden av
   teksten (Andabeloey, 7. sep 2026). To i samme hoeyde, med hver sin
   kreditering, leser som et oppslag. Samme bredde, hjoerner og luft som
   .v-spread. Under 900 px staar de under hverandre.
   ============================================ */
.v-duo {
  max-width: 1060px;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.v-duo__figure {
  margin: 0;
  min-width: 0;
}

.v-duo__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.v-duo__caption {
  padding: var(--space-sm) 0 0 12px;
  font-family: var(--font-body);
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .v-duo {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Portrait image variant - narrower, centered */
.v-spread--portrait {
  max-width: 600px;
}

.v-spread--portrait .v-spread__figure img {
  max-height: none;
}

/* Sticky scene - cinematic image stays pinned while content scrolls over */
.v-sticky-scene {
  position: relative;
}

/* Full-bleed variant for feature strips */
.v-spread--cinematic {
  /* Fokuspunktet settes her, og kan overstyres per bilde i sida: 70 %
     holder horisonten hoeyt paa de fleste motivene, men et motiv med noe
     viktig oeverst (surfebrettet paa Borhaug, Tom 12. sep) maa loeftes. */
  --v-spread-fokus: center 70%;
  max-width: none;
  padding: 0;
  position: relative;
  height: 80vh;
  min-height: 550px;
  max-height: 900px;
  overflow: hidden;
  border-radius: 0;
  /* Bildet fyller flaten, bildeteksten står i en stripe under det. */
  display: flex;
  flex-direction: column;
}

/* Fullbreddebilde INNE I et kapittel (surferen paa Farsund by, 15. okt
   2026): kapitlet har luft paa sidene, saa bildet trekkes ut over den og
   naar kant i kant, som bildene mellom kapitlene. Avstanden over og under
   er samme som for sakskortet. */
.v-chapter > .v-spread--cinematic {
  margin: var(--space-2xl) calc(-1 * var(--space-xl));
}
@media (max-width: 768px) {
  .v-chapter > .v-spread--cinematic {
    margin-inline: calc(-1 * var(--space-lg));
  }
}

/* Sticky variant - pins below fixed header */
.v-spread--sticky {
  position: sticky;
  top: 0; /* Clear the fixed header */
  z-index: 0;
}

/* Seksjoner som ikke er kapitler (arbeidsgivere, stillinger) og skal
   scrolle over et sticky bilde. De har egen bakgrunn fra før. */
.v-sticky-scene__over {
  position: relative;
  z-index: 1;
}

/* Chapter that scrolls over the sticky image */
.v-chapter--over {
  position: relative;
  z-index: 1;
  padding-top: var(--space-3xl);
}
/* Begynner kapitlet med et faktapanel, har kapitlet alt luften over seg.
   Panelets egen toppmarg kom i tillegg og ga ~160 px tomrom under det
   fastlåste bildet (Vanse, Tom 24. sep 2026). */
.v-chapter--over > .v-aside:first-child { margin-top: 0; }
/* ... og kapitlet selv trenger ikke de 128 px som er stemt for tekst etter
   et moerkt bilde: et panel er en flate med egen kant, og luften over det
   leser dobbelt. To klasser, saa regelen slaar .v-chapter--over over. */
.v-chapter.v-chapter--over:has(> .v-aside:first-child) { padding-top: var(--space-3xl); }

.v-spread--cinematic .v-spread__figure {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

.v-spread--cinematic .v-spread__figure img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: var(--v-spread-fokus);
  border-radius: 0;
}

/* INGEN SLØR OVER BILDET (Marion, 7. okt 2026: «aldri mørke filter»).
   Før lå bildeteksten på fotoet, og et mørkt slør holdt den lesbar. Det
   gjorde bildene triste, også med det lettere sløret på Herad. Nå står
   bildeteksten i en stripe under bildet, på sidens egen bunn, og bildet
   vises som fotografen tok det. Overlay-elementet står igjen i sidene,
   men tegner ingenting. */
.v-spread--cinematic .v-spread__overlay { display: none; }

.v-spread--cinematic .v-spread__caption {
  flex: 0 0 auto;
  max-width: none;
  margin: 0;
  padding: var(--space-sm) var(--space-xl) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm);
}

.v-spread--cinematic .v-spread__caption-title {
  font-family: var(--font-body);
  font-size: var(--etikett-stor);
  color: var(--color-midnight);
}

.v-spread--cinematic .v-spread__credit { opacity: 1; }

/* Bildeteksten til en FAST scene (v-spread--sticky) står utenfor det faste
   laget, rett under bildet i laget som ruller. I det faste laget ble den
   dekket i samme øyeblikk som bildet var helt inne, og ble aldri sett
   (Tom 8. okt 2026). Nå står den under bildet når scenen begynner og
   glir opp sammen med teksten. Samme løsning som .lb-scenetekst. */
.v-scenetekst {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-cream);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm);
}
.v-scenetekst .v-spread__caption-title {
  font-family: var(--font-body);
  font-size: var(--etikett-stor);
  color: var(--color-midnight);
}

@media (max-width: 700px) {
  .v-spread--cinematic .v-spread__caption,
  .v-scenetekst { padding-inline: var(--space-lg); }
}

/* ============================================
   V-SPLIT - Image + text side by side
   ============================================ */
.v-split {
  max-width: 1060px;
  /* Large lead-in, tighter exit.
     Bottom spacing gets very noticeable when the right/left image is tall. */
  margin: var(--space-3xl) auto var(--space-xl);
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  /* Top-align text with side images to avoid big "dead space" when the image is taller than the text. */
  align-items: start;
}

/* When a split immediately follows a heading, the heading's own bottom
   margin provides enough separation — remove the split's top margin. */
.v-chapter__heading + .v-split {
  margin-top: 0;
}

/* When a split follows a prose block, the prose already provides bottom spacing.
   Avoid double-stacking vertical margins which can create huge "dead space". */
.v-prose + .v-split {
  margin-top: 0;
}

/* Reduce vertical gap when a split follows a text block (common rhythm tweak). */
.v-split--flush {
  margin-top: 0;
}

.v-split--reverse {
  direction: rtl;
}

.v-split--reverse > * {
  direction: ltr;
}

.v-split__image {
  overflow: visible;
}

.v-split__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.v-split__image figcaption {
  padding: var(--space-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--etikett);
  color: var(--color-text-muted);
}

.v-split__text p{
  font-family: var(--font-body);
  font-size: var(--brod);
  font-weight: 400;
  line-height: var(--linje-brod-luftig);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.v-split__text p:last-child {
  margin-bottom: 0;
}

.v-split__text p.v-split__spacer {
  margin: 0 0 var(--space-sm);
  font-size: 0;
  line-height: 0;
}

.v-chapter--dark .v-split__text p {
  color: rgba(250, 248, 245, 0.7);
}

.v-chapter--dark .v-split__image figcaption {
  color: rgba(250, 248, 245, 0.5);
}

/* ============================================
   V-QUOTE - Standalone quotation
   ============================================ */
.v-quote {
  font-size: var(--brod-kort);
  max-width: 800px;
  margin: var(--space-3xl) auto;
  padding: 0 var(--space-xl) 0 calc(var(--space-xl) + 2rem);
  border-left: 3px solid rgba(45, 106, 63, 0.4);
}

.v-quote__text {
  /* Ekte kursiv: Cormorant har egne tegnede kursivformer, mens broedskriften
     bare kan skraastilles. Graden er satt 9 %% opp fordi Cormorants x-hoeyde
     er 80 mot Glacials 87 ved samme pikselverdi — uten det hadde teksten
     krympet synlig ved familiebyttet. */
  font-family: var(--font-display);
  font-size: var(--brod-loft);
  font-weight: 400;
  font-style: italic;
  line-height: var(--linje-brod-tett);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.v-chapter--dark .v-quote__text {
  color: var(--color-text-inverse);
}

/* Utsagn: tekstens egen sluttsetning løftet fram, uten å late som den er
   et sitat fra en person (Korshamn, 16. okt 2026). Ingen anførselstegn,
   ingen strek; graden og displayskriften bærer fremhevingen. */
.v-utsagn {
  max-width: 30ch;
  margin: var(--space-3xl) auto;
  padding: 0 var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--linje-tittel);
  letter-spacing: var(--sperring-tett);
  color: var(--color-midnight);
  text-align: center;
  text-wrap: balance;
}

.v-quote__source {
  font-family: var(--font-body);
  /* <cite> er kursiv fra nettleserens standardstil, og broedskriften har
     ingen kursiv. Vinkelen settes derfor av oss. */
  font-style: oblique 14deg;
  font-size: var(--etikett);
  font-weight: 400;
  letter-spacing: var(--sperring-xs);
  text-transform: uppercase;
  color: #2d6a3f;
}

/* ============================================
   V-QUOTE--WALL - Full-width dark quote wall
   ============================================ */
.v-quote--wall {
  max-width: none;
  margin: var(--space-3xl) 0;
  padding: var(--space-4xl) var(--space-xl);
  border-left: none;
  background: var(--surface-utility);
  text-align: center;
}

.v-quote--wall__blockquote {
  max-width: 900px;
  margin: 0 auto;
}

.v-quote--wall__text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem);
  font-weight: 400;
  font-style: normal;
  line-height: var(--linje-tittel);
  color: var(--color-cream);
  margin: 0;
}

.v-quote--wall__source {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--sperring-xs);
  text-transform: uppercase;
  /* Var --color-gold (leire, 4,18 mot skifer — under AA). Aksent for moerk
     bunn maaler 4,69 (axe, Aana-Sira 7. sep 2026). */
  color: var(--aksent-tekst-mork);
  margin-top: var(--space-md);
}

/* Sitatvegg med rundt portrett av den som sier det (Borhaug, Didrik
   Sørensen, 21. sep 2026). Portrettet står til venstre og sitatet leses
   venstrejustert ved siden av; på smal skjerm stables de og sentreres som
   den vanlige veggen. */
.v-quote--wall__rad {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  /* Lesebredden (1060), lik kapitlene over og under: var 1080 (19. okt 2026). */
  max-width: 1060px;
  margin: 0 auto;
  text-align: left;
}
.v-quote--wall__rad .v-quote--wall__blockquote { margin: 0; }
.v-quote--wall__portrett {
  flex: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.v-quote--wall__portrett img {
  display: block;
  width: clamp(140px, 7.5rem + 8vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 35%;
  border: 3px solid var(--aksent-tekst-mork);
}
.v-quote--wall__kreditt {
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet-mork);
}
@media (max-width: 700px) {
  .v-quote--wall__rad { flex-direction: column; text-align: center; }
}

/* ============================================
   V-ASIDE - Editorial fact panel (dark, immersive)
   ============================================ */
.v-aside {
  max-width: 1060px;
  margin: var(--space-4xl) auto;
  padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) calc(var(--space-3xl) + 1rem);
  background: var(--surface-utility);
  border-left: 4px solid rgba(45, 106, 63, 0.6);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 12px rgba(10, 22, 40, 0.12),
    0 16px 48px rgba(10, 22, 40, 0.16);
  position: relative;
}

.v-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(45, 106, 63, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(36, 61, 79, 0.3) 0%, transparent 60%);
  pointer-events: none;
}

.v-chapter--dark .v-aside {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: rgba(45, 106, 63, 0.6);
  box-shadow:
    0 4px 12px rgba(10, 22, 40, 0.2),
    0 16px 48px rgba(10, 22, 40, 0.25);
}

.v-chapter--dark .v-aside::before {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(45, 106, 63, 0.06) 0%, transparent 60%);
}

.v-aside__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: var(--sperring-2xs);
  /* Panelet er moerkt. Leira (#c4918a) ga 4,03 mot det — nok for stor
     tekst paa desktop, men ikke paa mobil, der tittelen er 20 px
     (pikselmaaling 28. sep 2026). */
  color: var(--aksent-tekst-mork);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(250, 248, 245, 0.12);
}

.v-chapter--dark .v-aside__title {
  color: var(--color-text-inverse);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.v-aside__list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-2xl);
}

.v-aside__list li{
  position: relative;
  padding-left: calc(var(--space-md) + 6px);
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  color: rgba(250, 248, 245, 0.8);
  line-height: var(--linje-brod);
}

.v-chapter--dark .v-aside__list li {
  color: rgba(250, 248, 245, 0.7);
}

.v-aside__list li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Midt på første linje (lh = linjehøyden), litt ned mot midten av de
     små bokstavene. Med 0.72em lå streken over midten av teksten
     (Tom 7. okt 2026). */
  top: calc(0.5lh - 1px + 0.05em);
  width: 10px;
  height: 2px;
  background: var(--color-gold);
}

/* Et faktapanel med et avsnitt i stedet for punktliste (Eikensverdet,
   Kvinatun). Sto først bare i eiken.css, så Kvinatun-boksen fikk mørk
   tekst på mørk bunn (Tom 21. okt 2026). Fargen er et token, ikke alfa. */
.v-aside__tekst {
  position: relative;
  margin: 0 0 var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod);
  color: var(--color-cream);
}
.v-aside--lys .v-aside__tekst { color: var(--color-text-primary); }

.v-aside__note {
  position: relative;
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: oblique 14deg;
  /* Token, ikke alfa: rgba(…, 0.5) ga 3,96 mot panelet (21. okt 2026). */
  color: var(--tekst-dempet-mork);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(250, 248, 245, 0.1);
}

/* Lenken i noten skal se ut som en lenke. Den arvet notens dempede farge
   uten understrek, og ble ikke sett (Vanse, Marion 21. sep 2026). */
.v-aside__note a {
  color: var(--color-cream);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.v-aside__note a:hover { text-decoration-thickness: 2px; }

.v-chapter--dark .v-aside__note {
  color: var(--tekst-dempet-mork);
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* -- Lys variant: lys sand med mørk tekst --
   For et faktapanel som står nær en mørk boks det ikke hører sammen med:
   «Noen høydepunkter» på Farsund by fikk samme mørke flate som «Kongen av
   Farsund» rett over, og de leste som ett par (Tom 7. okt 2026).
   Aksenten (leira) gir bare 4,49 mot sanden, så tittelen er mørk og
   bildeteksten dempet. To klasser, så de slår grunnreglene. */
.v-aside.v-aside--lys {
  background: var(--color-sand-lys);
  border-left-color: var(--color-gold);
  box-shadow: 0 4px 12px rgba(10, 22, 40, 0.06), 0 16px 48px rgba(10, 22, 40, 0.08);
}
.v-aside.v-aside--lys::before { content: none; }
.v-aside--lys .v-aside__title {
  /* Mer tyngde enn den mørke varianten: på lys bunn forsvant tittelen i
     samme grad og vekt som lista under (Tom 7. okt 2026). */
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-midnight);
  border-bottom-color: rgba(10, 22, 40, 0.12);
}
.v-aside--lys .v-aside__list li { color: var(--color-midnight); }
.v-aside--lys .v-aside__note { color: var(--tekst-dempet); border-top-color: rgba(10, 22, 40, 0.1); }
.v-aside--lys .v-aside__note a { color: var(--color-midnight); }
.v-aside--lys .v-spread__caption { color: var(--color-midnight); }
.v-aside--lys .v-spread__credit { color: var(--tekst-dempet); }

/* -- Activities aside variant (wide panel with activity grid) -- */
.v-aside--activities {
  margin-bottom: 0;
}

.v-aside--activities .v-aside__subtitle {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  font-style: oblique 14deg;
  color: rgba(250, 248, 245, 0.5);
  margin-bottom: var(--space-2xl);
}

.v-aside__activity-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: var(--space-xl);
  background: rgba(250, 248, 245, 0.06);
  border-radius: 0;
  overflow: hidden;
}

.v-aside__activity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-md);
  background: var(--surface-card-dark);
  text-align: center;
  transition: background-color 0.35s ease;
  border-radius: 0;
}

.v-aside__activity:hover {
  background: rgba(45, 106, 63, 0.15);
}

.v-aside__activity-icon {
  width: 36px;
  height: 36px;
  color: var(--color-gold);
  transition: color 0.35s ease;
}

.v-aside__activity:hover .v-aside__activity-icon {
  color: var(--color-gold);
}

.v-aside__activity-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--sperring-xs);
  color: rgba(250, 248, 245, 0.75);
  transition: color 0.35s ease;
}

.v-aside__activity:hover .v-aside__activity-name {
  color: rgba(250, 248, 245, 0.95);
}

/* -- Narrow aside variant (short content, matches quote width) -- */
.v-aside--narrow {
  max-width: 800px;
  padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) calc(var(--space-2xl) + 1rem);
}

.v-aside--narrow .v-aside__list {
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

/* ============================================
   V-NUDGE - Contextual CTA panel
   ============================================ */
.v-nudge {
  max-width: 720px;
  width: min(92%, 720px);
  margin: var(--space-4xl) auto;
  padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) calc(var(--space-2xl) + 1rem);
  background: linear-gradient(
    155deg,
    rgba(236, 245, 239, 1) 0%,
    rgba(224, 238, 229, 1) 40%,
    rgba(232, 238, 231, 1) 65%,
    rgba(242, 233, 228, 1) 100%
  );
  border-left: 4px solid rgba(45, 106, 63, 0.6);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 12px rgba(10, 22, 40, 0.12),
    0 16px 48px rgba(10, 22, 40, 0.16),
    0 22px 64px rgba(10, 22, 40, 0.18);
  position: relative;
}

.v-nudge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(45, 106, 63, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.v-nudge__heading {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.v-nudge__body {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--linje-brod);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.v-nudge__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(10, 22, 40, 0.2);
  transition: border-color 0.3s ease;
}

.v-nudge__link:hover {
  border-bottom-color: var(--color-text-primary);
}

/* ============================================
   V-ACTIVITIES - Grid of activities
   ============================================ */
.v-activities {
  max-width: var(--container-content);
  margin: var(--space-2xl) auto;
  padding: 0 var(--space-xl);
}

.v-activities__title {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.v-chapter--dark .v-activities__title {
  color: var(--color-text-inverse);
}

.v-activities__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.v-chapter--dark .v-activities__subtitle {
  color: rgba(250, 248, 245, 0.5);
}

.v-activities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-sm);
}

.v-activities__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
  transition: border-color 0.3s;
}

.v-chapter--dark .v-activities__item {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(250, 248, 245, 0.65);
}

.v-activities__item:hover {
  border-color: var(--color-gold);
}

.v-activities__icon {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

.v-activities__note {
  max-width: 680px;
  margin: var(--space-xl) auto 0;
  padding: 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--linje-brod-luftig);
  color: var(--color-text-secondary);
}

.v-chapter--dark .v-activities__note {
  color: rgba(250, 248, 245, 0.65);
}

/* -- Narrow activities variant (within 680px text column) -- */
.v-activities--narrow {
  max-width: 680px;
  padding: 0 var(--space-xl);
}

.v-activities--narrow .v-activities__grid {
  grid-template-columns: repeat(3, 1fr);
}

.v-activities--narrow .v-activities__note {
  max-width: none;
  padding: 0;
}

/* ============================================
   V-GALLERY - Gallery
   ============================================ */
.v-gallery {
  padding: var(--space-2xl) var(--space-xl) var(--space-4xl);
  background: var(--surface-explore);
}

.v-gallery__header {
  max-width: var(--container-content);
  margin: 0 auto var(--space-3xl);
}

/* Section label - signals transition from editorial to photo essay */
.v-gallery__label {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  /* Var rgba(45, 106, 63, 0.85): alfa paa tekst er en kontrast ingen har regnet
     paa — under 4,5 blandet mot papiret (axe, 7. sep). Paletten, uten alfa. */
  color: var(--color-pine);
  margin-bottom: var(--space-2xl);
}

.v-gallery__label::before,
.v-gallery__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(45, 106, 63, 0.25), transparent);
}

.v-gallery__title {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: var(--sperring-tett);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.v-gallery__credit {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: oblique 14deg;
}

.v-gallery__grid {
  max-width: var(--container-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 260px 260px;
  gap: 8px;
}

.v-gallery__item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-utility);
  border-radius: var(--radius-lg);
}

.v-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out-expo);
  border-radius: inherit;
}

@media (hover: hover) {
  .v-gallery__item:hover img {
    transform: scale(1.03);
  }

  .v-gallery__item figcaption {
    opacity: 0;
  }

  .v-gallery__item:hover figcaption {
    opacity: 1;
  }
}

.v-gallery__item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl) var(--space-md) var(--space-md);
  background: linear-gradient(to top, rgba(36, 61, 79, 0.85), transparent);
  transition: opacity 0.3s;
}

@media (hover: none) {
  .v-gallery__item figcaption {
    opacity: 1;
    background: linear-gradient(to top, rgba(36, 61, 79, 0.7), transparent);
    padding: var(--space-md) var(--space-sm) var(--space-sm);
  }
}

.v-gallery__item figcaption span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-warm-white);
}

/* Gallery grid positions */
.v-gallery__item--feature {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
}

.v-gallery__item--tall {
  grid-column: 8 / 10;
  grid-row: 1 / 3;
}

.v-gallery__item:nth-child(3) {
  grid-column: 10 / 13;
  grid-row: 1 / 2;
}

.v-gallery__item:nth-child(4) {
  grid-column: 10 / 12;
  grid-row: 2 / 3;
}

.v-gallery__item:nth-child(5) {
  grid-column: 12 / 13;
  grid-row: 2 / 3;
}

/* Tre bilder (Åna-Sira). Rutenettet over er laget for fem, og med tre
   sto halve flaten tom. Oppsettet velges ut fra antallet: nøyaktig tre
   bilder er et rutenett der det tredje også er det siste. Under 769 px
   gjelder telefonoppsettet, som allerede stabler dem. */
@media (min-width: 1025px) {
  .v-gallery__grid:has(> .v-gallery__item:nth-child(3):last-child) > .v-gallery__item--feature { grid-column: 1 / 9; grid-row: 1 / 3; }
  .v-gallery__grid:has(> .v-gallery__item:nth-child(3):last-child) > .v-gallery__item--tall { grid-column: 9 / 13; grid-row: 1 / 2; }
  .v-gallery__grid:has(> .v-gallery__item:nth-child(3):last-child) > .v-gallery__item:nth-child(3) { grid-column: 9 / 13; grid-row: 2 / 3; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  /* Brua over hele bredden, de to andre side om side under. */
  .v-gallery__grid:has(> .v-gallery__item:nth-child(3):last-child) { grid-template-rows: 320px 220px; }
  .v-gallery__grid:has(> .v-gallery__item:nth-child(3):last-child) > .v-gallery__item--feature { grid-column: 1 / 7; grid-row: 1 / 2; }
  .v-gallery__grid:has(> .v-gallery__item:nth-child(3):last-child) > .v-gallery__item--tall { grid-column: 1 / 4; grid-row: 2 / 3; }
  .v-gallery__grid:has(> .v-gallery__item:nth-child(3):last-child) > .v-gallery__item:nth-child(3) { grid-column: 4 / 7; grid-row: 2 / 3; }
}

/* ============================================
   GALLERY — SHOWCASE (teaser grid + lightbox)
   Shows a curated preview; remaining images are
   hidden but accessible via the lightbox viewer.
   ============================================ */
.v-gallery--showcase .v-gallery__grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 280px 180px;
  gap: 6px;
}

/* Showcase: visible preview items */
.v-gallery--showcase .v-gallery__item--showcase:nth-child(1) {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
}
.v-gallery--showcase .v-gallery__item--showcase:nth-child(2) {
  grid-column: 7 / 10;
  grid-row: 1 / 2;
}
.v-gallery--showcase .v-gallery__item--showcase:nth-child(3) {
  grid-column: 10 / 13;
  grid-row: 1 / 2;
}
.v-gallery--showcase .v-gallery__item--showcase:nth-child(4) {
  grid-column: 7 / 10;
  grid-row: 2 / 3;
}

/* 5th item: hosts the "View all" overlay */
.v-gallery--showcase .v-gallery__item--showcase:nth-child(5) {
  grid-column: 10 / 13;
  grid-row: 2 / 3;
  position: relative;
}

/* "View all X photos" overlay on last visible item */
.v-gallery__viewall {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(2px);
  z-index: 2;
  cursor: pointer;
  transition: background 0.3s;
  border-radius: inherit;
}

.v-gallery__viewall:hover {
  /* Moerkere ved hover, ikke lysere: 0,35 tok teksten under kravet. */
  background: rgba(10, 22, 40, 0.65);
}

.v-gallery__viewall-count {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem);
  font-weight: 300;
  color: var(--color-warm-white);
  line-height: var(--linje-tett);
}

.v-gallery__viewall-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  /* Hel farge, ikke 80 %: over lyse bilder falt halve flaten under 4,5
     (pikselmaaling 28. sep 2026). */
  color: var(--color-warm-white);
  text-transform: uppercase;
  letter-spacing: var(--sperring-sm);
  margin-top: 0.35rem;
}

/* Hidden items: invisible in the grid but picked up by lightbox JS */
.v-gallery--showcase .v-gallery__item--hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.v-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(36, 61, 79, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.v-lightbox.is-active {
  opacity: 1;
  visibility: visible;
}

.v-lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-warm-white);
  cursor: pointer;
  transition: border-color 0.3s;
}

.v-lightbox__close:hover {
  border-color: var(--color-gold);
}

.v-lightbox__close svg {
  width: 18px;
  height: 18px;
}

.v-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-warm-white);
  cursor: pointer;
  transition: border-color 0.3s;
}

.v-lightbox__nav:hover {
  border-color: var(--color-gold);
}

.v-lightbox__nav--prev { left: var(--space-lg); }
.v-lightbox__nav--next { right: var(--space-lg); }

.v-lightbox__nav svg {
  width: 18px;
  height: 18px;
}

.v-lightbox__content {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v-lightbox__image {
  max-width: 100%;
  max-height: calc(85vh - 50px);
  object-fit: contain;
}

.v-lightbox__caption {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(250, 248, 245, 0.6);
}

.v-lightbox__counter {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(250, 248, 245, 0.4);
  letter-spacing: var(--sperring-sm);
}

@media (max-width: 768px) {
  .v-lightbox {
    overscroll-behavior: contain;
  }

  .v-lightbox__nav--prev,
  .v-lightbox__nav--next {
    top: auto;
    bottom: var(--space-xl);
    transform: none;
  }

  .v-lightbox__nav--prev {
    left: var(--space-xl);
  }

  .v-lightbox__nav--next {
    right: var(--space-xl);
  }

  .v-lightbox__content {
    max-width: 96vw;
    max-height: 75vh;
  }

  .v-lightbox__counter {
    bottom: var(--space-md);
  }
}

/* ============================================
   V-BREATHER - Transition space with teaser text
   ============================================ */
.v-breather {
  background: var(--surface-explore);
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
}

.v-breather__inner {
  max-width: 680px;
  margin: 0 auto;
}

.v-breather__text {
  /* Ekte kursiv: Cormorant har egne tegnede kursivformer, mens broedskriften
     bare kan skraastilles. Graden er satt 9 %% opp fordi Cormorants x-hoeyde
     er 80 mot Glacials 87 ved samme pikselverdi — uten det hadde teksten
     krympet synlig ved familiebyttet. */
  font-family: var(--font-display);
  font-size: clamp(1.4688rem, 1.2752rem + 0.8261vw, 2.0187rem);
  font-weight: 400;
  font-style: italic;
  line-height: var(--linje-brod-tett);
  color: var(--color-text-primary);
  margin: 0;
  opacity: 0.85;
}

/* ============================================
   V-TOUR - Aerial 360deg view
   ============================================ */
.v-tour {
  padding: var(--space-xl) var(--space-xl) var(--space-4xl);
  background: var(--surface-explore);
}

.v-tour__header {
  max-width: var(--container-content);
  margin: 0 auto var(--space-3xl);
}

/* Section label - matches gallery/explore pattern */
.v-tour__label {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  /* Full farge, ikke alfa: 85 % ga 4,44:1 mot bunnen, under kravet 4,5
     (tilgjengelighetsvakten 28. sep 2026). Full farge gir ca. 6,2. */
  color: rgb(45, 106, 63);
  margin-bottom: var(--space-2xl);
}

.v-tour__label::before,
.v-tour__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(45, 106, 63, 0.25), transparent);
}

.v-tour__title {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: var(--sperring-tett);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.v-tour__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  max-width: 600px;
}

.v-tour__embed {
  max-width: var(--container-max);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-utility);
  box-shadow: var(--shadow-lg);
}

.v-tour__embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Klikk-for-aa-laste-fasade for innbygde tredjepartsfilmer (YouTube).
   Ingen tredjepartslast foer klikket; skriptet bytter knappen mot en
   iframe fra youtube-nocookie.com. Se village-yt-fasade.js og
   docs/steder-spec.md. */
.v-yt-fasade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--surface-utility);
  cursor: pointer;
}
.v-yt-fasade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out-quart);
}
.v-yt-fasade:hover img { transform: scale(1.02); }
.v-yt-fasade__ikon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.92);
}
.v-yt-fasade__ikon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--surface-strong);
}
.v-yt-fasade:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.v-yt-fasade__hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 22, 40, 0.72);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xs);
  text-transform: uppercase;
  line-height: var(--linje-etikett);
}

.v-tour__credit {
  max-width: var(--container-max);
  margin: var(--space-md) auto 0;
  text-align: right;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.v-tour__credit a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast);
}

.v-tour__credit a:hover {
  color: var(--color-text-secondary);
}

/* Touch/desktop instruction hints */
.v-tour__hint--touch {
  display: none;
}

@media (hover: none) {
  .v-tour__hint--desktop {
    display: none;
  }
  .v-tour__hint--touch {
    display: inline;
  }
}

/* Actions row below embed */
.v-tour__actions {
  max-width: var(--container-max);
  margin: var(--space-md) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v-tour__actions .v-tour__credit {
  margin: 0;
}

.v-tour__open-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast);
}

.v-tour__open-link:hover {
  color: var(--color-text-secondary);
}

/* ============================================
   V-EXPLORE-PHASE - Unified explore background
   ============================================ */
.v-explore-phase {
  background: var(--surface-explore);
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Naar los-stripa foelger rett etter, baerer stripas egen margin lufta:
 * galleriets bunnpolstring + fasens 72 px + stripas margin ga 255 px over
 * mot 182 px under (Tom 7. sep: lik luft over og under). Uten fasens 72 px
 * staar det 182 mot 182. */
.v-explore-phase:has(+ .ls-stripe),
.v-explore-phase:has(+ link + .ls-stripe) {
  /* LosStripe rendrer <link rel="stylesheet"> foer <section>, saa «neste
     soesken» er ofte lenka — derfor begge formene. */
  padding-bottom: 0;
}

/* Uten tjenester (tom seksjon, f.eks. lokalt uten portal-API) ligger kartet
 * rett under stripa med bare 32 px topp. Da faar kartseksjonen samme luft
 * som tjenestene ville gitt: 182 px fra stripa til innholdet, som over. */
.ls-stripe + #services:not(:has(> section:not(.is-hidden))) + #location {
  padding-top: 64px;
}

/* Uten artikler skal fasen ikke etterlate en blank, lys stripe mellom
   de moerke naboseksjonene — kollaps den naar ingen synlig seksjon er
   igjen. (Ikke :only-child: komponentens <link> ligger som soesken, og
   Aana-Sira har galleriet sitt her — det skal beholde lufta.) */
.v-explore-phase:has(> .v-article-section.is-hidden):not(:has(> section:not(.is-hidden))) {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .v-explore-phase {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

  .v-gallery {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-bottom: var(--space-xl);
  }

  .v-gallery__header {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .v-gallery__label {
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .v-gallery__title {
    margin-bottom: var(--space-sm);
  }

  .v-tour {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-top: var(--space-lg);
  }

  .v-tour {
    padding-bottom: var(--space-lg);
  }

  .v-tour__header {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .v-tour__label {
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .v-tour__embed {
    aspect-ratio: 9 / 16;
    max-height: 70vh;
    width: min(92%, 420px);
    margin-left: auto;
    margin-right: auto;
  }

  .v-tour__embed iframe {
    transform: scale(0.65);
    transform-origin: 0 0;
    width: 153.846%;
    height: 153.846%;
  }

  .v-tour__credit {
    margin-top: var(--space-sm);
  }

  .v-tour__actions {
    margin-top: var(--space-sm);
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .v-tour__embed {
    aspect-ratio: 16 / 9;
    max-height: 70vh;
  }

  .v-tour__embed iframe {
    transform: none;
    width: 100%;
    height: 100%;
  }

  .v-tour__actions {
    margin-top: var(--space-sm);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .v-tour__actions .v-tour__credit {
    text-align: left;
  }
}

/* ============================================
   V-VIDEO-SHOWCASE - Dark box on story surface
   ============================================ */
.v-video-showcase {
  background: var(--surface-story);
  padding: var(--space-4xl) var(--space-xl);
  position: relative;
}

.v-video-showcase__inner {
  max-width: 1060px;
  margin: 0 auto;
  position: relative;
  background: var(--surface-utility);
  border-radius: 20px;
  padding: 48px;
  box-shadow: 0 18px 50px rgba(10, 22, 40, 0.25);
}

/* -- Header -- */
.v-video-showcase__header {
  margin-bottom: var(--space-2xl);
}

.v-video-showcase__label {
  display: inline-block;
  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-mork); /* var --color-gold: 4,18 mot skifer (axe, Byremo 7. sep) */
  margin-bottom: var(--space-sm);
}

.v-video-showcase__title {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem);
  font-weight: 400;
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-md);
  line-height: var(--linje-tittel);
}

.v-video-showcase__intro {
  /* Ekte kursiv: Cormorant har egne tegnede kursivformer, mens broedskriften
     bare kan skraastilles. Graden er satt 9 %% opp fordi Cormorants x-hoeyde
     er 80 mot Glacials 87 ved samme pikselverdi — uten det hadde teksten
     krympet synlig ved familiebyttet. */
  font-family: var(--font-display);
  font-size: clamp(1.225rem, 1.1392rem + 0.3663vw, 1.4688rem);
  font-style: italic;
  line-height: var(--linje-brod);
  color: rgba(250, 248, 245, 0.75);
  max-width: 960px;
  margin: 0;
}

/* -- Video Frame -- */
.v-video-showcase__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-utility);
  box-shadow:
    0 4px 12px rgba(10, 22, 40, 0.2),
    0 16px 48px rgba(10, 22, 40, 0.25);
}

.v-video-showcase__player {
  width: 100%;
  height: auto;
  max-height: 80vh;
  display: block;
  object-fit: contain;
}

/* -- Footer -- */
.v-video-showcase__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.v-video-showcase__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.v-video-showcase__tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 400;
  letter-spacing: var(--sperring-xs);
  color: rgba(250, 248, 245, 0.6);
  background: rgba(250, 248, 245, 0.08);
  padding: 0.35em 0.85em;
  border-radius: 2rem;
  border: 1px solid rgba(250, 248, 245, 0.1);
  transition: all 0.3s ease;
}

.v-video-showcase__tag:hover {
  background: rgba(250, 248, 245, 0.12);
  color: rgba(250, 248, 245, 0.8);
}

.v-video-showcase__credit {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(250, 248, 245, 0.6);
  font-style: oblique 14deg;
  margin: 0;
}

@media (max-width: 768px) {
  .v-video-showcase {
    padding: var(--space-xl) var(--space-md) var(--space-3xl);
  }

  .v-video-showcase__inner {
    padding: 32px 24px;
  }

  .v-video-showcase__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .v-video-showcase {
    padding: var(--space-2xl) var(--space-sm);
  }

  .v-video-showcase__inner {
    padding: var(--space-xl) var(--space-md);
    border-radius: 14px;
  }
}

/* Legacy v-video (kept for backwards compatibility) */
.v-video {
  padding: var(--space-4xl) var(--space-xl) var(--space-3xl);
  background: var(--color-warm-white);
}

.v-video__frame {
  max-width: 1060px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-utility);
  box-shadow: var(--shadow-lg);
}

.v-video__player {
  width: 100%;
  height: auto;
  display: block;
}

.v-video__caption {
  max-width: 1060px;
  margin: var(--space-md) auto 0;
  padding: 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: oblique 14deg;
}

.v-video__credit {
  opacity: 0.7;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .v-split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .v-split--reverse {
    direction: ltr;
  }

  .v-split--text-first-mobile {
    display: flex;
    flex-direction: column;
  }

  .v-split--text-first-mobile .v-split__text {
    order: -1;
  }

  .v-gallery__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 200px 200px 200px;
  }

  .v-gallery__item--feature {
    grid-column: 1 / 7;
    grid-row: 1 / 2;
  }

  .v-gallery__item--tall {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }

  .v-gallery__item:nth-child(3) {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
  }

  .v-gallery__item:nth-child(4) {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
  }

  .v-gallery__item:nth-child(5) {
    grid-column: 3 / 7;
    grid-row: 3 / 4;
  }

  /* Showcase gallery tablet */
  .v-gallery--showcase .v-gallery__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 220px 180px;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(1) {
    grid-column: 1 / 7;
    grid-row: 1 / 2;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(2) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(3) {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(4) {
    display: none;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(5) {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
  }
}

@media (max-width: 900px) {
  .v-prose__float-image {
    float: none;
    width: 100%;
    margin: var(--space-xl) 0;
  }
}

@media (max-width: 1024px) {
  .v-chapter {
    padding: var(--space-lg) var(--space-xl) var(--space-lg);
  }

  .v-chapter__heading {
    margin-bottom: var(--space-md);
  }

  .v-chapter--compact {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .v-chapter--compact + .v-chapter--compact {
    padding-top: var(--space-sm);
  }

  .v-chapter--compact.v-chapter--dark {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
  }

  #living.v-chapter {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .v-spread {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .v-prose {
    margin-bottom: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .v-chapter {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
  }

  .v-chapter__heading {
    margin-bottom: var(--space-md);
  }

  .v-chapter--compact {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .v-chapter--compact + .v-chapter--compact {
    padding-top: var(--space-sm);
  }

  .v-chapter--compact.v-chapter--dark {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
  }

  #living.v-chapter {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
  }

  .v-spread {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .v-prose {
    margin-bottom: var(--space-lg);
  }

  /* Kapitteltittelen hører med: uten den sto titlene 8 px lenger inn enn
     teksten under på alle stedssider. */
  .v-prose,
  .v-quote,
  .v-aside,
  .v-chapter__heading {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  #living.v-chapter .v-prose:last-of-type {
    margin-bottom: var(--space-sm);
  }

  .v-prose--tight {
    margin-top: calc(-1 * var(--space-sm));
    margin-bottom: var(--space-md);
  }

  .v-quote {
    padding-left: calc(var(--space-lg) + 1.5rem);
  }

  .v-quote--wall {
    padding: var(--space-2xl) var(--space-md);
  }

  .v-quote--wall__text {
    font-size: clamp(1.5rem, 1.2359rem + 1.1268vw, 2.25rem);
  }

  .v-aside {
    padding: var(--space-2xl) calc(var(--space-lg) + 0.75rem) var(--space-2xl) calc(var(--space-lg) + 0.75rem);
  }

  .v-nudge {
    padding: var(--space-xl) var(--space-lg) var(--space-xl) calc(var(--space-lg) + 0.75rem);
  }

  .v-spread {
    padding: 0 var(--space-lg);
  }

  .v-split {
    padding: 0 var(--space-lg);
  }

  .v-activities__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .v-aside__activity-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .v-gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .v-gallery__item--feature,
  .v-gallery__item--tall,
  .v-gallery__item:nth-child(3),
  .v-gallery__item:nth-child(4),
  .v-gallery__item:nth-child(5) {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1;
  }

  .v-gallery__item--feature {
    grid-column: span 2;
    aspect-ratio: 16/9;
  }

  /* Showcase gallery mobile */
  .v-gallery--showcase .v-gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 140px;
    gap: 4px;
  }
  .v-gallery--showcase .v-gallery__item--showcase {
    aspect-ratio: auto;
    height: 100%;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(3) {
    display: none;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(4) {
    display: none;
  }
  .v-gallery--showcase .v-gallery__item--showcase:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .v-spread--cinematic {
    height: 50vh;
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .v-activities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .v-activities--narrow .v-activities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .v-aside__activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .v-aside__list {
    grid-template-columns: 1fr;
  }
}


/* ---------- Bildegalleri — v-galleri ----------
   Samme karusell som Lyngdals handelsslider (public/scripts/karusell.js),
   men BARE bilder: ingen tekstboks, én felles bildetekst under, og
   krediteringen byttes med bildet (data-kreditt). Første gang på Borhaug
   (Tom 15. sep 2026) for de fargerike husene. Står i kapittelbredde som
   v-spread. Adferden deles; tilstandsklassene tegnes her. */
.v-galleri {
  position: relative;
  max-width: 1060px;
  margin: var(--space-2xl) auto;
}
.v-galleri__spor {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-sand);
}
.v-galleri__stopp {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s 0.85s;
}
.v-galleri__stopp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-galleri__stopp.is-paa {
  visibility: visible;
  transform: translateX(0);
  z-index: 2;
  transition-delay: 0s, 0s;
}
.v-galleri__stopp.is-inn-hoyre { visibility: visible; transform: translateX(100%); }
.v-galleri__stopp.is-inn-venstre { visibility: visible; transform: translateX(-100%); }
.v-galleri__stopp.is-ut-venstre { visibility: visible; transform: translateX(-100%); z-index: 1; }
.v-galleri__stopp.is-ut-hoyre { visibility: visible; transform: translateX(100%); z-index: 1; }
.v-galleri__stopp.is-uten-overgang { transition: none !important; }

.v-galleri__piler {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  border-top-left-radius: 14px;
  overflow: hidden;
}
.v-galleri__pil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 6vw, 84px);
  height: clamp(50px, 5vw, 66px);
  border: 0;
  background: var(--color-cream);
  color: var(--color-midnight);
  cursor: pointer;
  transition: background 0.2s;
}
.v-galleri__pil--forrige { border-right: 1px solid var(--color-sand); }
.v-galleri__pil svg { width: 22px; height: 22px; }
.v-galleri__pil:hover,
.v-galleri__pil:focus-visible { background: var(--color-mist); }
/* Tydelig fokusring, ikke bare en tone (WCAG 2.4.7, samlet gjennomgang 28. sep 2026). */
.v-galleri__pil:focus-visible { outline: 2px solid var(--color-midnight); outline-offset: 2px; box-shadow: 0 0 0 5px var(--color-warm-white); }
.v-galleri__pil:focus-visible { box-shadow: inset 0 0 0 2px var(--color-gold-mork); }

/* Skjermleser-teller (visuelt skjult; oppdateres av skriptet). */
.v-galleri__teller {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Foer init (og uten JS): foerste bilde staar statisk, pilene skjules. */
.v-galleri:not(.is-klar) .v-galleri__stopp:first-child { visibility: visible; transform: none; }
.v-galleri:not(.is-klar) .v-galleri__piler { display: none; }

@media (max-width: 700px) {
  .v-galleri__spor { aspect-ratio: 4 / 3; border-radius: 10px; }
  /* Pilfeltet tok en fjerdedel av bildet på mobil; mindre felt, samme mål. */
  .v-galleri__piler { border-top-left-radius: 10px; }
  .v-galleri__pil { width: 44px; height: 44px; }
  .v-galleri__pil svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-galleri__stopp { transition: none !important; }
  .v-galleri__stopp.is-inn-hoyre,
  .v-galleri__stopp.is-inn-venstre { transform: none; }
}

/* ---------- Sitat med bilde — v-quote--portrett ----------
   Et ekte sitat med et bilde av personen som sier det (Farsund by, Mette
   Starheim Pedersen, 15. sep 2026). Bildet står til venstre i stående
   format; sitatet bærer mest og får mest plass. Samme sitattypografi som
   v-quote, men uten venstrestreken — bildet gjør den jobben. */
.v-quote--portrett {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: 960px;
  margin: var(--space-3xl) auto 0;
  padding: 0;
  border-left: 0;
}
.v-quote__portrett {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-sand);
}
.v-quote__portrett img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-quote__sitat {
  margin: 0;
  padding: 0;
}
.v-quote--portrett .v-quote__text { margin-bottom: var(--space-lg); }

@media (max-width: 700px) {
  .v-quote--portrett {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .v-quote__portrett { aspect-ratio: 4 / 5; }
}

/* ============================================
   V-GRENDER — stedsnavnregister for grendene i et boområde
   ============================================
   Gyland (16. sep 2026): kildens liste med 22 grender. Innholdet er bare
   navn, så boksen leses som et register i spalter — ikke som faktapanel
   (v-aside, punkter med innhold) eller innskuddsboks (v-feature-box, tekst).
   Lys flate, så den ikke konkurrerer med travbaneboksen lenger ned. */
.v-grender {
  max-width: calc(1060px - (var(--space-xl) * 2));
  margin: var(--space-xl) auto 0;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  background: var(--surface-explore);
  border: 1px solid rgba(10, 22, 40, 0.08);
  border-radius: 20px;
  box-sizing: border-box;
}

.v-grender__hode {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.v-grender__etikett {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--aksent-tekst);
}

.v-grender__tittel {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--linje-tittel);
  color: var(--color-text-primary);
}

.v-grender__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  column-count: 4;
  column-gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid rgba(10, 22, 40, 0.14);
}

.v-grender__liste li {
  break-inside: avoid;
  padding: 10px 0;
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-kort);
  color: var(--color-text-primary);
}

@media (max-width: 900px) {
  .v-grender__liste { column-count: 3; }
}

@media (max-width: 600px) {
  .v-grender { margin-left: var(--space-md); margin-right: var(--space-md); }
  .v-grender__liste { column-count: 2; }
}

/* ---------- Bilde over hele skjermbredden — v-spread--fullbredde ----------
   Et landskapsbilde som skal fylle skjermen (Byremo, Marions pirk 30. sep
   2026). Kapittelet har sidemarg (--space-xl); bildet går ut over den, uten
   avrundede hjørner. Krediteringen står i vanlig lesebredde under. */
.v-spread--fullbredde {
  max-width: none;
  padding: 0;
  margin-inline: calc(-1 * var(--space-xl));
}
.v-spread--fullbredde .v-spread__figure {
  width: 100%;
  border-radius: 0;
}
.v-spread--fullbredde .v-spread__figure img {
  width: 100%;
  max-height: 88vh;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.v-spread--fullbredde .v-spread__caption {
  max-width: 1060px;
  padding: var(--space-sm) var(--space-xl) 0;
}
/* Kapittelet har --space-lg som sidemarg under 768 px; bildet følger. */
@media (max-width: 768px) {
  .v-spread--fullbredde {
    margin-inline: calc(-1 * var(--space-lg));
  }
  .v-spread--fullbredde .v-spread__caption {
    padding-inline: var(--space-lg);
  }
}

/* ---------- Hele bildet i full bredde — v-spread--hele ----------
   Mellom kapitlene: bildet over hele skjermbredden i sine egne
   proporsjoner, uten beskjæring. Den kinematiske varianten skar toppen av
   seilskuta i Farsund (Marion, 10. okt 2026). Bruk <Bilde fullskjerm>. */
.v-spread--hele {
  max-width: none;
  padding: 0;
  margin: var(--space-3xl) 0;
}
.v-spread--hele .v-spread__figure {
  width: 100%;
  border-radius: 0;
}
.v-spread--hele .v-spread__figure img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: fill;
  border-radius: 0;
}
.v-spread--hele .v-spread__caption {
  max-width: 1060px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-xl) 0;
}
@media (max-width: 768px) {
  .v-spread--hele .v-spread__caption { padding-inline: var(--space-lg); }
}

/* ---------- Kort til en sak fra et kapittel — v-sakskort ----------
   Samme kort som på kommunesidene (bilde, tittel, ingress, «Les
   artikkelen →», kreditering), her side om side på bred skjerm. Brukes der
   et kapittel handler om det samme som en egen sak (Farsund by → surfing).
   Sandflate, så kortet skiller seg fra fortellingsflaten rundt. */
.v-sakskort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  max-width: 1060px;
  margin: var(--space-2xl) auto;
  padding: 14px;
  border-radius: 18px;
  background: var(--color-sand-lys);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.v-sakskort:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10, 22, 40, 0.10); }
.v-sakskort__bilde { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.v-sakskort__bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-sakskort__body { display: flex; flex-direction: column; gap: 10px; padding: var(--space-md) var(--space-lg) var(--space-md) 0; }
.v-sakskort__tittel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  color: var(--color-midnight);
  transition: color 0.2s ease;
}
.v-sakskort__tekst {
  margin: 0;
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
/* Sandflaten: dempet tekst for å holde AA (aksent-tokenet ligger for nær). */
.v-sakskort__les {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--etikett-stor);
  color: var(--color-midnight);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.v-sakskort__les span { transition: transform 0.2s ease; }
.v-sakskort:hover .v-sakskort__les span { transform: translateX(4px); }
.v-sakskort__kreditt {
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
}
@media (max-width: 760px) {
  .v-sakskort { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-inline: var(--space-md); padding-bottom: var(--space-lg); }
  .v-sakskort__body { padding: 0 var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .v-sakskort, .v-sakskort__les span { transition: none; }
  .v-sakskort:hover { transform: none; }
}

/* ============================================
   Mobil: seksjonsluften (styles.css, --mobil-seksjon), Tom 20. okt 2026
   ============================================
   Kapittelreglene over er stemt for PC: 128 px til tittelen etter en
   mørk eller fullbredde flate, 96 px etter et panel. På en telefon ga de
   140–190 px tomrom mellom kapitlene. Samme selektorer gjentas her, så
   hver regel får sin mobilverdi uten at rekkefølgen mellom dem endres. */
@media (max-width: 767px) {
  .v-chapter--etter-mork,
  .v-chapter--over,
  .v-spread--cinematic + .v-chapter,
  .v-quote--wall + .v-chapter,
  .v-chapter--compact.v-chapter--etter-mork,
  .v-chapter.v-chapter--over:has(> .v-aside:first-child) {
    padding-top: var(--mobil-seksjon);
  }
  .v-chapter--dark + .v-chapter,
  .v-chapter:has(> .v-aside:last-child) + .v-chapter,
  .v-chapter:has(> .v-feature-box:last-child) + .v-chapter {
    padding-top: var(--mobil-seksjon);
  }
  /* Sitatveggen: 96 px innvendig og 64 px marg på begge sider. Bunnmargen
     faller bort, kapitlet under bærer luften. Over står kapitlets egen
     bunnluft (~40 px), så en liten marg gir 48 px til veggen. */
  .v-quote--wall {
    margin: var(--space-sm) 0 0;
    padding-block: var(--mobil-seksjon);
  }
  /* Paneler inne i kapitlet: 96 px over og under på PC, halvparten her. */
  .v-skoleboks,
  .v-aside,
  .v-nudge { margin-block: var(--space-2xl); }
  .v-prose + .v-chapter__heading { margin-top: var(--space-3xl); }
  .v-skoleboks:last-child { margin-bottom: 0; }
  .v-breather { padding-block: var(--mobil-seksjon); }
  /* Galleriet har egen toppluft; fasens 24 px kom i tillegg (72 px). */
  .v-explore-phase:has(> .v-gallery:not(.is-hidden)) { padding-top: 0; }
  /* Kartet under stripa uten tjenester: kartseksjonen har nå luften selv. */
  .ls-stripe + #services:not(:has(> section:not(.is-hidden))) + #location {
    padding-top: 0;
  }
}

/* ============================================
   Mobil: tekstmarg og bilder kant i kant (Tom 20. okt 2026)
   ============================================
   Kapitlet hadde 24 px sidemarg og hver blokk inni 24 til, så teksten
   sto 48 px fra kanten og brukte 270 av 375 px. Nå bærer kapitlet margen
   alene. Fotografier i selve fortellingen går ut over den, uten runde
   hjørner; bilder i bokser (faktaboks, featureboks) beholder rammen. */
@media (max-width: 767px) {
  .v-chapter { padding-inline: var(--mobil-marg); }
  /* Et bilde mellom kapitlene har ingen kapittelmarg rundt seg og tar
     margen selv. Står først: reglene under nuller den inne i kapitler
     og bokser. */
  .v-spread:not(.v-spread--fullbredde, .v-spread--hele, .v-spread--bleed, .v-spread--cinematic) {
    padding-inline: var(--mobil-marg);
  }
  .v-prose,
  .v-chapter__heading,
  .v-chapter > .v-spread,
  .v-feature-box .v-spread,
  .v-aside .v-spread,
  .v-split,
  .v-duo { padding-inline: 0; }
  /* Bildeteksten står på tekstmargen; de 12 px innrykket var for
     første bokstav mot en bildekant, og kanten er nå skjermkanten. */
  .v-spread__caption,
  .v-duo__caption { padding-left: 0; }
  .v-quote:not(.v-quote--wall) { padding-inline: var(--space-lg) 0; }

  /* Bokser: 16 px innvendig. */
  .v-aside,
  .v-nudge,
  .v-feature-box { padding-inline: var(--space-md); }

  /* Fotografier kant i kant. calc(50% - 50vw) trekker figuren ut til
     vinduskanten uansett hvor mye marg forelderen har; siden klipper
     vannrett overflyt (html/body). */
  :not(.v-feature-box):not(.v-aside) > .v-spread:not(.v-spread--portrait) .v-spread__figure {
    width: auto;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
  .v-split__image:not(.ek-sitat__portrett) > img,
  .v-duo__figure > img {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
  :not(.v-feature-box):not(.v-aside) > .v-spread:not(.v-spread--portrait) .v-spread__figure img {
    width: 100%;
    max-height: none;
  }

  /* Bildene som alt gikk ut over kapittelmargen, følger den nye. */
  .v-spread--fullbredde,
  .v-chapter > .v-spread--cinematic { margin-inline: calc(50% - 50vw); }
  .v-spread--fullbredde .v-spread__caption,
  .v-spread--hele .v-spread__caption { padding-inline: var(--mobil-marg); }
}