/*
 * Kunststi — prototype-tema
 * Håndskrevet CSS, ingen bundler. Mobile-first: basisstilene under er for
 * mobil, og alt utvides oppover via min-width-brytepunkter.
 */

:root {
	/* Bevisst gråskala i denne fasen — dette er en funksjonsprototype,
	   ikke en visuell designleveranse. Fargepalett/merkevareprofil
	   kommer i en egen designfase. */
	--color-ink: #000000;
	--color-paper: #ffffff;
	--color-soft: #f2f2f2;
	--color-line: #dcdcdc;
	/* Alt er #000 — ingen gråtoner for hierarki. Ingress/meta skiller seg
	   heller ut med størrelse/vekt (se .ingress / .verk__meta). Variabelen
	   beholdes bare for å slippe å bytte den ut alle steder den brukes. */
	--color-muted: #000000;
	--color-accent: #000000;
	--color-accent-ink: #ffffff;

	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-heading: var(--font-body);

	/* Global type-skala — alle overskrifter/tekst på siden leser fra en av
	   disse i stedet for at hver komponent setter sin egen font-size. */
	--fs-h1: clamp(2rem, 1.4rem + 3vw, 3.25rem);
	--fs-h2: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
	--fs-h3: clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem);
	--fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--fs-h5: 1rem;
	--fs-h6: 0.875rem;
	--fs-body: 1rem;
	--fs-ingress: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--fs-sm: 0.875rem;

	--site-width: 1400px;
	/* Lesespalten på kunstverk-siden (.verk__content) — sticky-navigasjonen
	   der bruker samme mål, siden 1400px (--site-width) er mye bredere enn
	   selve innholdet den hører til. */
	--verk-content-width: 850px;
	--gutter: clamp(16px, 3vw, 24px);
	--section-space: clamp(40px, 8vw, 88px);
	--radius: 0;
	/* Litt luft over sticky-navens faktiske høyde (~116px på mobil, der
	   Kart pakkes til egen rad over Forrige/GPS/Neste) — ellers blir
	   bunnen av teksten/footeren liggende delvis skjult bak baren. */
	--sticky-nav-h: 130px;
	--header-h: 70px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--color-ink);
	background: var(--color-paper);
}

img {
	max-width: 100%;
	display: block;
}

/* Google Material Symbols — brukes for alle ikoner (hamburgermeny, lukk,
   forstørr bilde, kompasspil), i stedet for enkelttegn/emoji. */
.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

/* ---------- Type-hierarki ---------- */

/* Regulær, tilbakeholden vekt på overskriftene — à la Haugar kunstmuseums
   egne utstillingssider (vestfoldmuseene.no), ikke tung/"designet" sans. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 400; letter-spacing: normal; }
h2 { font-size: var(--fs-h2); font-weight: 400; }
h3 { font-size: var(--fs-h3); font-weight: 400; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-h5); font-weight: 600; }
h6 { font-size: var(--fs-h6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }

p { margin: 0 0 1em; }

.eyebrow {
	font-size: var(--fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	margin: 0 0 0.75em;
}

.ingress {
	font-size: var(--fs-ingress);
	font-weight: 400;
	line-height: 1.45;
	color: var(--color-muted);
	margin: 0 0 1.25em;
}

.prose :is(h2, h3, h4) { margin-top: 1.4em; }
.prose p { margin-bottom: 1.1em; }
.prose a { color: var(--color-accent); text-decoration-thickness: 1.5px; }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--color-ink);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */

/* Den ABSOLUTTE maksbredden for hele siden (header, hero-bakgrunner, alt) —
   se base.twig. Alt annet nedenfor er innvendige marger/lesebredder inni
   denne rammen, aldri en egen, uavhengig senterakse. */
.site-frame {
	max-width: var(--site-width);
	margin-inline: auto;
}

.container {
	width: 100%;
	padding-inline: var(--gutter);
}

/* Smalere lesebredde for tittel/brødtekst. Legges INNI en .container (aldri
   på samme element som .container) slik at venstrekanten alltid stemmer
   overens med resten av siden i stedet for å sentrere seg selv separat. */
.container--narrow { max-width: 720px; }

.section { padding-block: var(--section-space); }
.section--top-0 { padding-top: 0; }

/* ---------- Brødsmuler (i header, venstre side under logoen) ---------- */

.site-header__breadcrumbs { padding-top: 0.75rem; padding-bottom: 0.85rem; }

.breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	font-size: var(--fs-sm);
	color: var(--color-ink);
}
.breadcrumbs li { display: flex; gap: 0.4em; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--color-ink); }
.breadcrumbs a { color: var(--color-ink); text-decoration: none; }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); }

/* ---------- Dev-only: GPS-variant-bryter (fjernes når vi har landet) ---------- */

.dev-gps-switch {
	margin: 0.75rem auto 0;
	padding: 0.5em 0.9em;
	border: 1px dashed var(--color-line);
	font-size: var(--fs-sm);
	color: var(--color-muted);
}
.dev-gps-switch a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 0.15em; }
.dev-gps-switch a[aria-current="page"] { color: var(--color-ink); font-weight: 600; text-decoration: none; }

/* ---------- Sidetittel (tittel + ingress) ---------- */

.page-heading { margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
.page-heading h1 { margin-bottom: 0.4em; }
.page-heading .ingress { margin-bottom: 0; }

@media (min-width: 720px) {
	.page-heading--split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(1.5rem, 4vw, 3rem);
		align-items: baseline;
	}
	.page-heading--split h1 { margin-bottom: 0; }

	.hero { margin-inline: var(--gutter); }
}

/* ---------- Header ---------- */

.site-header {
	background: var(--color-paper);
}

/* .container gir samme maks-bredde og sidemarger som resten av siden, slik
   at navigasjonen alltid stemmer overens med innholdet under. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--header-h);
}

/* Logo + slogan står alltid på samme linje (slogan kan skrus av under
   Nettstedinnstillinger, men aldri stables under). */
.site-header__logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.75em;
	text-decoration: none;
	color: var(--color-ink);
	line-height: 1.2;
}
.site-header__name {
	font-weight: 600;
	font-size: 1.25rem;
}
/* Logoen skal fylle mest mulig av den faste header-høyden (--header-h),
   ikke sitte med mye luft rundt seg selv i en ellers uendret header. */
.site-header__logo-img {
	height: calc(var(--header-h) - 22px);
	width: auto;
}
/* Skjult på smale skjermer — ikke nok plass til logo + slogan + hamburger
   på én linje der. Kommer tilbake fra 560px og oppover. */
.site-header__tagline {
	display: none;
	font-size: 0.8rem;
	color: var(--color-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-header__tagline::before {
	content: "|";
	margin-right: 0.75em;
	color: var(--color-line);
}
@media (min-width: 560px) {
	.site-header__tagline { display: inline-block; }
}

/* Mobile-first: skjul den vanlige menylinja og vis hamburgeren som
   standard; min-width-brytepunktet lenger ned snur dette til desktop. */
.site-nav { display: none; }

.site-nav__list {
	list-style: none;
	display: flex;
	gap: clamp(0.75rem, 3vw, 1.5rem);
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	overflow-x: auto;
}
.site-nav__list a {
	text-decoration: none;
	white-space: nowrap;
}
.site-nav__list a[aria-current="page"] { color: var(--color-accent); }

/* Hamburgermeny — skjult på desktop, vises under brytepunktet der
   .site-nav i stedet gjemmes (se mobile-first-brytepunkt lenger ned). */
.site-header__burger {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--color-ink);
}

.mobile-menu {
	border-top: 1px solid var(--color-line);
	background: var(--color-paper);
}
.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem var(--gutter) 1.5rem;
}
.mobile-menu__list a {
	display: block;
	padding: 0.85em 0;
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-ink);
	border-bottom: 1px solid var(--color-line);
}
.mobile-menu__list a[aria-current="page"] { color: var(--color-muted); }

/* ---------- Hero (forside) ---------- */

.hero {
	position: relative;
	overflow: hidden;
	/* Litt luft ned fra headeren — uten dette satt panelet helt tett inntil
	   logo-raden over. */
	margin-top: 1rem;
	/* Mobile-first: full-bleed helt ut til skjermkanten — mer i tråd med
	   hvordan et hero-bilde/-video/-galleri vanligvis brukes på mobil, og
	   sparer den knappe bredden der. Fra 720px og oppover får den samme
	   gutter-innrykk som resten av innholdet (.container) — se
	   min-width-brytepunktet lenger ned i filen. Teksten inni
	   (.hero__inner) har uansett sin egen ekstra padding oppå dette. */
	padding: clamp(56px, 11vw, 110px) var(--gutter) clamp(64px, 13vw, 130px);
	background: var(--color-ink);
	color: #fff;
	/* Teksten skal sitte nederst i panelet — der overlayen (se ::before)
	   er mørkest og gir mest kontrast — i stedet for rett under toppen. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(420px, 62vw, 640px);
}
/* Ingen bilde/bilder/video valgt: rent fargefelt (redaktørens egen farge,
   ellers samme mørke standardfarge som før). */
.hero--flat { background: var(--hero-bg-color, var(--color-ink)); }

/* Justerbar (0–1 via --hero-overlay, satt av hero.twig fra 0–100-feltet i
   wp-admin) mørk gradient — sterkest nederst der teksten står, slik at den
   alltid er lesbar uansett hva som ligger under. 0 = usynlig, 1 = helt sort. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Uten en eksplisitt z-index her stables ikke ::before pålitelig over
	   .hero__media (som HAR en eksplisitt z-index) — resultatet var at
	   overlayen rent visuelt lå TAPT bak bildet/videoen, usynlig uansett
	   hvor høyt den ble skrudd opp. */
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, calc(var(--hero-overlay, 0.6) * 0.55)),
		rgba(0, 0, 0, var(--hero-overlay, 0.6))
	);
}

/* Bilde/bilder/video ligger som et lag UNDER teksten (og under ::before-
   gradienten, som fortsatt ligger over alt for lesbarhet). Ett bilde er
   bare ett alltid-synlig lag; "bilder" har flere, der kun én av gangen har
   .is-active — JS (hero-media.js) bytter det med en myk crossfade. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.4s ease;
}
.hero__media-img.is-active { opacity: 1; }

/* Vimeo-embed som fyller heroen edge-to-edge, samme "cover"-resultat som
   .hero__media-img sin object-fit: cover over — men object-fit virker
   ikke pålitelig på <iframe>-innhold, så her overdimensjoneres iframen i
   stedet (alltid minst 100% i begge retninger, uansett heroens
   sideforhold) og sentreres/beskjæres av .hero sin egen overflow: hidden. */
.hero__media-embed {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh; /* 16:9 */
	height: 56.25vw; /* 16:9 */
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none; /* rent bakgrunnsvisuelt — ingen egne kontroller å trykke på */
}

.hero__media-toggle {
	position: absolute;
	/* Mobil: nederst til høyre, unna hamburgermenyen rett over heroen.
	   Fra 780px (der menyen er en vanlig, ikke-overlappende linje) flyttes
	   den opp igjen — se min-width-brytepunktet lenger ned i filen. */
	bottom: 1rem;
	right: 1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: rgba(0,0,0,0.35);
	color: rgba(255,255,255,0.85);
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.hero__media-toggle:hover { background: rgba(0,0,0,0.55); }
.hero__media-toggle .material-symbols-outlined { font-size: 1.15rem; }

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
}
@media (min-width: 720px) {
	/* Ekstra innrykk utover heroens egen gutter, slik at teksten alltid
	   ligger tydelig lenger inn enn selve bakgrunnskanten — kun på
	   desktop, der heroen har sin egen margin-inline og ikke lenger er
	   full-bleed (se .hero-regelen over). På mobil er heroen full-bleed,
	   så teksten skal starte i nøyaktig samme venstrekant som resten av
	   innholdet under (.container), ikke lenger inn. */
	.hero__inner { padding-left: clamp(8px, 4vw, 40px); }
}
.hero .eyebrow { color: rgba(255,255,255,0.65); }
.hero h1 { color: #fff; }
.hero .ingress { color: #fff; }

.btn {
	display: inline-block;
	padding: 0.85em 1.5em;
	font-weight: 700;
	font-size: var(--fs-sm);
	text-decoration: none;
}
.btn--primary {
	background: #fff;
	color: var(--color-ink);
}

/* ---------- Innholdsblokker (gjenbrukes på alle sider) ---------- */

.block-heading { margin-bottom: clamp(1.25rem, 4vw, 2rem); }
.block-heading h2 { margin-bottom: 0.3em; }
.block-heading .ingress { margin-bottom: 0; }
.block-heading__copy { max-width: 640px; }

.block-heading--with-cta {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
/* Samme stil som .media-text__link — tekst + bokstavelig «→», understreket
   som én sammenhengende linje (ikke et eget ikon-glyf ved siden av). */
.block-heading__cta {
	flex-shrink: 0;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	color: var(--color-ink);
}

@media (min-width: 640px) {
	.block-heading--with-cta {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.section--tight { padding-block: clamp(24px, 4vw, 48px); }

.image-block__narrow { max-width: 900px; margin-inline: auto; }
/* Ett bilde: figuren tar hele bredden alene (grid med 1 kolonne holder
   det slik uten noen egen "single"-spesialkode i CSS-en). Flere bilder:
   rutenett — 1 kolonne på mobil, 2 fra desktop-bredde. */
.image-block__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.image-block__figure img { width: 100%; display: block; }
.image-block__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.image-block__figure figcaption {
	margin-top: 0.6em;
	font-size: var(--fs-sm);
	color: var(--color-muted);
}
/* Kilde/generell bildetekst under HELE rutenettet — egen, litt mer
   tilbaketrukket stil enn per-bilde-bildetekstene over, så de to ikke blir
   forvekslet med hverandre. */
.image-block__source {
	margin-top: 1rem;
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

@media (min-width: 640px) {
	.image-block__grid:not(.image-block__grid--single) { grid-template-columns: repeat(2, 1fr); }
}

.media-text {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.media-text__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-text__copy p { color: var(--color-muted); }
.media-text__link { font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }

@media (min-width: 720px) {
	.media-text {
		flex-direction: row;
		align-items: center;
		gap: clamp(2rem, 5vw, 4rem);
	}
	.media-text__media,
	.media-text__copy { flex: 1 1 50%; min-width: 0; }
	.media-text--reverse { flex-direction: row-reverse; }
}

/* ---------- Kunst-oversikt ---------- */

.verk-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	align-items: stretch;
}
/* Grid-rader strekker .verk-card (li) til samme høyde automatisk (grid sin
   standard align-items: stretch) — a/body må bare selv fylle den høyden. */
.verk-card { height: 100%; }
/* Padding sitter på selve <a> (ikke bare på __body) slik at BILDET også
   får samme luft rundt seg som teksten — ellers ligger bildet helt inntil
   kortkanten mens teksten under har god margin, som så ubalansert ut. */
.verk-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	background: var(--color-soft);
	padding: 1.5rem;
}
.verk-card__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	flex-shrink: 0;
}
.verk-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Kun luft OVER teksten — venstre/høyre/bunn kommer allerede fra <a>
	   sin egen padding over. */
	padding: 1.5rem 0 0;
	position: relative;
}
.verk-card__nr {
	position: absolute;
	top: -2.6rem;
	right: 1.5rem;
	background: var(--color-accent);
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-sm);
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Ingen egen font-size-overstyring her lenger — den gjorde tittelen nesten
   like stor som den fete kunstner/år-metalinjen under. Bruker nå bare den
   vanlige h3-størrelsen (--fs-h3). */
.verk-card h3 { margin-bottom: 0.2em; }
.verk-card__kunstner { font-weight: 600; margin-bottom: 0.5em; }
.verk-card__info { color: var(--color-muted); margin-bottom: 0; }
/* Pil dyttes alltid til bunnen av kortet, uansett hvor mye (eller lite)
   tekst kortene over/under den har — det er selve poenget med at
   .verk-card__body er en flex-kolonne. */
.verk-card__arrow {
	display: inline-block;
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--color-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------- Fremhevet enkelt-kunstverk (kunstverk_liste, ett valgt verk) ---------- */

/* To valgte verk: to .verk-featured stablet under hverandre — samme
   bredde/stil som ett verk får alene, i stedet for å presse dem inn i to
   smale grid-kolonner (ikke nok bredde der til bilde+tekst side om side
   uten at det blir trangt). */
.verk-featured-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Fire valgte verk: det siste spenner over hele rutenettets bredde (se
   kunstverk_liste.twig) — like bred som .verk-featured-stack sine kort
   over, så det kan bruke akkurat samme bilde/tekst-side-om-side-stil. */
.verk-grid__wide { grid-column: 1 / -1; }

.verk-featured {
	display: flex;
	flex-direction: column;
	/* Avstanden mellom bilde og tekst — IKKE dobbel padding fra begge
	   (se __media/__body under, som bare har padding på de UTVENDIGE
	   kantene nå). Mindre enn desktop sin rad-gap, mer passende for en
	   stablet mobilvisning. */
	gap: 1.25rem;
	text-decoration: none;
	color: inherit;
	background: var(--color-soft);
	overflow: hidden;
}
/* Samme padding som __body under — uten dette lå bildet helt inntil
   kortkanten mens teksten hadde god margin, som så ubalansert ut. Bildet
   sitter da "matt inn" i kortets --color-soft-bakgrunn, akkurat som
   teksten gjør. Padding KUN på de utvendige kantene (ikke bunnen på
   bildet/toppen av teksten) — ellers legger den seg oppå .verk-featured
   sin egen gap over, og avstanden mellom bilde og tekst blir dobbelt så
   stor som tiltenkt (nøyaktig samme feil som først ble fikset for
   desktop-raden, men glemt her for den stablede mobilversjonen). */
.verk-featured__media {
	flex-shrink: 0;
	padding: 1.5rem 1.5rem 0;
}
.verk-featured__media img,
.verk-featured__media .no-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.verk-featured__body {
	display: flex;
	flex-direction: column;
	padding: 0 1.5rem 1.5rem;
}
/* Tydelig større enn en vanlig kort-tittel (--fs-h3) — dette skal lese
   som EN fremhevet ting, ikke bare et kort i en rekke. */
/* Samme størrelse som .verk-card h3 (--fs-h3, basisverdien — ingen egen
   overstyring her lenger) — ensartet titteltypografi på tvers av alle
   visningsstilene, ikke en egen større størrelse for "fremhevet". */
.verk-featured h3 { margin-bottom: 0.3em; }
.verk-featured__kunstner { font-weight: 600; margin-bottom: 0.75em; }
/* Lesemål — uten dette kunne linjene i beskrivelsen bli unødvendig lange
   når tekstkolonnen er bred (opp mot ~600px på desktop). */
.verk-featured__info { color: var(--color-muted); margin-bottom: 0; max-width: 42ch; }
/* IKKE margin-top: auto her (i motsetning til .verk-card__arrow) — den
   ville dyttet pilen helt til bunnen og kansellert __body sin
   justify-content: center på desktop, så teksten+pilen sto delt i to i
   stedet for samlet midt på raden. */
.verk-featured__arrow {
	display: inline-block;
	padding-top: 1.75rem;
	color: var(--color-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (min-width: 780px) {
	/* Bilde venstre, tekst høyre — bruker faktisk breddene som er ledig i
	   stedet for én smal rute midt i en ellers tom seksjon.
	   min-height = max-height (samme clamp() begge veier) gir en FAST,
	   forutsigbar radhøyde — uten dette hadde bildet ingen reell
	   høydebegrensning (height: 100% mot en forelder uten egen fast
	   høyde er tvetydig, og endte opp med å bruke bildets rå,
	   ubegrensede pikselstørrelse i praksis). */
	.verk-featured {
		flex-direction: row;
		align-items: stretch;
		min-height: clamp(320px, 34vw, 520px);
		max-height: clamp(320px, 34vw, 520px);
	}
	/* Padding på HVER av de to sidene (full rundt bildet, full rundt
	   teksten) la de to legge seg oppå hverandre der kolonnene møtes —
	   dobbelt så stort mellomrom som tiltenkt. Ingen padding på de
	   innvendige kantene lenger; .verk-featured sin egen gap styrer
	   avstanden mellom bilde og tekst alene, mindre enn den doble
	   paddingen var. */
	.verk-featured { gap: clamp(2rem, 4vw, 3.5rem); }
	.verk-featured__media {
		flex: 1 1 50%;
		min-width: 0;
		padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
	}
	.verk-featured__media img,
	.verk-featured__media .no-image { height: 100%; aspect-ratio: auto; }
	.verk-featured__body {
		flex: 1 1 50%;
		justify-content: center;
		padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) 0;
		overflow-y: auto;
	}
}

/* ---------- "Bilde mangler ennå" (nøytral, ikke en generert fil) ---------- */

.no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Litt mørkere enn kortets egen bakgrunn (--color-soft), slik at man
	   ser hvor "bildet" slutter og tekstdelen av kortet begynner — ellers
	   flyter de to sonene sammen til én, udelt flate. */
	background: #e6e6e6;
	color: var(--color-muted);
	min-height: 200px;
}
.no-image .material-symbols-outlined { font-size: 2.5rem; opacity: 0.6; }
.verk__hero .no-image { min-height: 40vh; }

/* ---------- Kunstverk detaljside ---------- */

.verk__hero {
	margin: clamp(1.25rem, 4vw, 2rem) 0 0;
}
.verk__hero-expand {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.verk__hero-expand img {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
}
.verk__hero-expand-icon {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: rgba(23,23,23,0.7);
	color: #fff;
	font-size: 1.2rem;
}
.verk__heading { padding-top: clamp(1.5rem, 5vw, 2.5rem); }
.verk__heading .ingress { margin-bottom: 0; }
.verk__body { padding-top: clamp(1.5rem, 5vw, 2.5rem); padding-bottom: var(--sticky-nav-h); }
/* Unntak fra venstrejustert-regelen: sentrert lesespalte, venstrejustert
   TEKST inni (ikke text-align: center). */
.verk__content { max-width: var(--verk-content-width); margin-inline: auto; text-align: left; }
/* ~68 tegn per linje er en vanlig, komfortabel lesemål-tommelfingerregel
   for løpende brødtekst — GJELDER OVERALT .prose brukes (Gutenberg-
   innhold på vanlige sider, ikke bare lang tekst om verket), slik at all
   brødtekst på siden får nøyaktig samme bredde og posisjon, uansett
   hvilken mal den vises på. Mobil beholder full bredde (ikke plass til å
   ofre noe der). */
@media (min-width: 700px) {
	/* Sentrert (margin-inline: auto) i stedet for et fast venstre-innrykk
	   — et rent venstre-innrykk ga et mindre venstremarg enn høyremarg
	   (skjevt), mens auto-marger gir likt "luft"-rom på begge sider. */
	.prose { max-width: 68ch; margin-inline: auto; }
	/* Ingressen på kunstverk-siden får samme lesemål — men UTEN innrykk,
	   den skal starte i samme venstrekant som tittelen/bildet over, bare
	   ikke strekke seg ut til full 850px når den blir lang. */
	.verk__heading .ingress { max-width: 50ch; }
}
.verk__meta { font-weight: 600; color: var(--color-muted); margin-bottom: 1em; }
.verk__video-section {
	margin: 2.5em 0;
	padding-top: 1.75em;
	border-top: 1px solid var(--color-line);
}
/* Vanlig h3 (samme som resten av overskriftshierarkiet) — ingen egen
   liten/uppercase "eyebrow"-stil lenger. */
.verk__video-label { color: var(--color-muted); }
.verk__video { margin: 0; }
.verk__video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--radius);
}
.verk__kilde { font-size: var(--fs-sm); color: var(--color-muted); margin-top: 2em; }

/* body.single-kunstverk always reserves room at the bottom for the sticky nav */
.single-kunstverk .site-footer { padding-bottom: var(--sticky-nav-h); }

/* ---------- Sticky neste/forrige-nav ---------- */

/* Fire like store, like formede piller på én rad — Kart, Forrige, GPS,
   Neste. Kart skiller seg ut kun ved farge (lys, nøytral), ikke ved
   størrelse — samme visuelle vekt som de tre andre. Hele stripa er
   plassert innenfor SAMME maks-bredde-ramme som header/innhold
   (--site-width), og border-radius er greit her (ellers fjernet fra
   resten av siden) — dette er eksplisitt flytende, ikke flate seksjoner.
   Ingen egen bakgrunn/blur bak selve raden — pillene flyter fritt, hver
   for seg. */
.sticky-nav {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	/* Litt mer luft enn bare safe-area — satt tett inntil telefonens egen
	   URL-linje/hjem-indikator så den nesten rørte den. */
	bottom: calc(env(safe-area-inset-bottom, 0) + 1.25rem);
	z-index: 150;
	width: calc(100% - 2 * var(--gutter));
	/* Matcher bredden på selve kunstverk-innholdet (.verk__content), ikke
	   hele site-width-rammen — den er mye bredere enn det disse knappene
	   faktisk hører til. */
	max-width: var(--verk-content-width);
	/* Mobile-first: alt i én rad, sentrert sammen som gruppe — ikke nok
	   plass til å la Kart stå for seg selv til venstre uten at det
	   trenger seg inn på Forrige/GPS/Neste. Fra 700px (se
	   min-width-brytepunktet lenger ned) brukes et grid-oppsett i stedet,
	   der Kart står til venstre og resten sentrerer seg UAVHENGIG i resten
	   av bredden. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* justify-content: center + en maks-bredde per pille (i stedet for en
   usynlig plassholder-pille) — slik at 2 knapper (på første/siste verk,
   uten forrige/neste) sentrerer seg pent i stedet for å henge skjevt til
   den ene siden med et tomt hull der den tredje "skulle" vært. */
.sticky-nav__toolbar {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	/* Bredere enn før — med sticky-nav nå låst til .verk__content sin
	   bredde (850px) ble de tre viktigste knappene (Forrige/GPS/Neste)
	   for smale/tette i forhold til den tilgjengelige plassen. */
	max-width: 640px;
}

.sticky-nav__pill {
	/* GPS-pillen er en <button> — uten dette arver den IKKE sidens
	   font-size fra body slik <a>-pillene gjør (nettleserens standard
	   skjemakontroll-stil setter sin egen, mindre font-size på <button>).
	   Det gjorde at "gap"-en under (i em) ble mindre i px for GPS enn for
	   de andre pillene, så bildetekst/hovedtekst satt tettere sammen der. */
	font: inherit;
	flex: 1 1 0;
	/* Bredere enn før (var 150px) — nå som raden har mer albuerom (se
	   .sticky-nav__toolbar), skal knappene faktisk bruke den, ikke bare
	   sentrere seg tett sammen med tomrom rundt. */
	max-width: 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Tett mellom bildetekst og selve tittelen (GPS/FORRIGE/NESTE) — de
	   hører sammen som én enhet, ikke to jevnt fordelte linjer. */
	gap: 0.05em;
	/* Lavere enn før — med fire piller på rad ble bredden så smal at den
	   gamle høyden (68px) + border-radius: 999px ga en rund firkant i
	   stedet for en avlang pille. */
	min-height: 52px;
	min-width: 0;
	padding: 0.4em 0.9em;
	border: none;
	border-radius: 999px;
	background: var(--color-ink);
	color: #fff;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}

.sticky-nav__caption {
	font-size: 0.65rem;
	/* <button> arver ikke line-height fra body på samme måte som <a>/<span>
	   gjør (nettleserens standard skjemakontroll-stil) — uten dette ble
	   GPS-knappens (som er en <button>) stikktekst kompakt, mens
	   Forrige/Neste (som er <a>) fikk bodyens line-height: 1.55, som ga
	   for mye luft under før selve tittelen. Sett eksplisitt, likt for alle. */
	line-height: 1.2;
	font-weight: 600;
	color: rgba(255,255,255,0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.sticky-nav__main {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-weight: 700;
	font-size: 1rem;
	white-space: nowrap;
}
.sticky-nav__main .material-symbols-outlined {
	font-size: 1.2rem;
	transition: transform 0.2s ease;
}
.sticky-nav__main .material-symbols-outlined.is-live { transform-origin: center; }

/* GPS: to tydelig ulike farge-tilstander — blå ("Aktiver GPS") og grønn,
   levende tilstand når den faktisk sporer ("Følg pilen via GPS") — farge
   som eneste unntak fra den ellers helt svart/hvite paletten, fordi det
   kommuniserer noe CSS-vekt/størrelse ikke klarer alene: av vs. på. */
.sticky-nav__pill--gps { background: #2563eb; }
.sticky-nav__pill--gps.is-active { background: #15803d; }

/* Kart: samme størrelse/form som de tre andre, men en lys, nøytral farge
   — skiller den ut som "noe annet" uten å gjøre den mindre viktig å
   trykke på. */
.sticky-nav__pill--maps {
	background: #fff;
	color: var(--color-ink);
	border: 1px solid #b7b7b7;
	box-shadow: none;
}
.sticky-nav__pill--maps .sticky-nav__caption { color: rgba(0,0,0,0.55); }

/* Mobil (under 700px-grid-brytepunktet): Kart havner alene på sin egen
   rad når Forrige/GPS/Neste ikke lenger får plass ved siden av den — og
   full pille-størrelse + sentrert alene på raden gjorde at den leste seg
   som DEN viktigste knappen (størst, øverst), stikk i strid med at
   Forrige/GPS/Neste er hovedhandlingene. Gjør den i stedet liten,
   sirkel-aktig og dyttet til venstre (i stedet for sentrert), uten
   understekst — et sekundært "snarvei"-tegn, ikke en jevnbyrdig fjerde
   knapp. */
@media (max-width: 699px) {
	.sticky-nav__pill--maps {
		flex: 0 0 auto;
		/* Med bare Kart på egen rad har raden ledig plass — auto-margin på
		   høyre side dytter den til venstre i stedet for at
		   .sticky-nav sin justify-content: center legger den midt på. */
		margin-right: auto;
		flex-direction: row;
		gap: 0.35em;
		min-height: 40px;
		padding: 0.4em 0.75em;
	}
	.sticky-nav__pill--maps .sticky-nav__caption { display: none; }
	.sticky-nav__pill--maps .sticky-nav__main { font-size: 0.8rem; gap: 0.25em; }
	.sticky-nav__pill--maps .material-symbols-outlined { font-size: 1.05rem; }

	/* Den svevende skyggen under hver pille blir en synlig, litt rar
	   "boks" bak knappene på mobil (mindre piller, tettere sammen) — kuttet
	   helt der. Beholdes på desktop, hvor pillene har mer luft rundt seg. */
	.sticky-nav__pill { box-shadow: none; }
}

/* Første/siste stopp på stien: pillen blir stående (raden holder alltid
   samme rytme/bredde), men grået ut og uten lenke — i stedet for et hull
   der en tredje knapp "skulle" vært. */
.sticky-nav__pill--disabled {
	background: var(--color-line);
	color: rgba(0,0,0,0.4);
	cursor: default;
	box-shadow: none;
}
.sticky-nav__pill--disabled .sticky-nav__caption,
.sticky-nav__pill--disabled .material-symbols-outlined { color: inherit; }

/* Kart: bevisst NED i visuell vekt — en liten, understreket tekstlenke,
   ikke en knapp som konkurrerer med Forrige/GPS/Neste. */
/* Egen, hvit "bar" med garantert kontrast — svart tekst direkte over
   scrollende innhold (mørkt bilde, hero osv.) uten egen bakgrunn ville
   vært uleselig i praksis. Ikonet er IKKE understreket, kun teksten
   (ellers får man to ulike understreknings-biter ved siden av hverandre
   i stedet for én sammenhengende linje under selve teksten). */
/* Kompakt, ikon-only — teksten finnes fortsatt for skjermlesere
   (.sr-only) og som hover-tooltip (title), bare ikke synlig i selve
   raden, for å gi plass til Forrige/GPS/Neste. Ingen text-decoration noe
   sted her — det er et rent ikon, ikke en tekstlenke. */
/* ---------- Lightbox (full-størrelse bildevisning) ---------- */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.92);
	padding: var(--gutter);
}
.lightbox[hidden] { display: none; }
.lightbox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	margin-inline: auto;
	object-fit: contain;
}
.lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: rgba(255,255,255,0.1);
	color: #fff;
	border: 0;
	cursor: pointer;
}

/* ---------- Kart-side ---------- */

.kart-seksjon { padding-bottom: var(--section-space); }
.kart {
	position: relative;
	width: 100%;
	height: 60vh;
	min-height: 360px;
	overflow: hidden;
	border: 1px solid var(--color-line);
}
@media (max-width: 720px) {
	.kart-seksjon .container { padding-inline: 0; }
	.kart { border: 0; }
}
.leaflet-popup-content h3 { font-size: 1rem; margin-bottom: 0.2em; }
.leaflet-popup-content img { margin-bottom: 0.4em; }

/* ---------- Footer ---------- */

.site-footer {
	border-top: 1px solid var(--color-line);
	font-size: var(--fs-sm);
	color: var(--color-muted);
}
.site-footer__inner {
	padding-block: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.site-footer a { color: var(--color-ink); text-decoration-thickness: 1.5px; }
.site-footer__meta { margin-bottom: 0; }
.site-footer__text p:last-child { margin-bottom: 0; }
.site-footer__logoer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer__logo img {
	height: 2rem;
	width: auto;
	max-width: 9rem;
	object-fit: contain;
}

@media (min-width: 640px) {
	/* Tekst til venstre, logoer til høyre — jevnt delt, samme rad. */
	.site-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
	.site-footer__text { flex: 1 1 50%; }
	.site-footer__logoer { flex: 1 1 50%; justify-content: flex-end; margin: 0; }
}

/* ---------- Brytepunkter (mobile-first: alt herfra og opp) ---------- */

@media (min-width: 640px) {
	.verk-grid { grid-template-columns: repeat(2, 1fr); }

	/* % i stedet for en fast verdi (eller vw, som skalerer med
	   VINDUSBREDDEN uansett hvor smalt selve kortet er) — % regnes ut fra
	   KORTETS EGEN bredde, så et smalt 3-kolonners kort og et bredt
	   fremhevet kort begge får en padding som ser proporsjonal ut for
	   akkurat sin egen størrelse, i stedet for at det smale kortet arver
	   det brede kortets store, faste luft og drukner i den. */
	.verk-card a { padding: 8%; }
	.verk-card__body { padding: 8% 0 0; }
	.verk-card__nr { right: 8%; }
}

@media (min-width: 700px) {
	/* Nok plass nå til at Kart kan stå helt til venstre uten å trenge seg
	   inn på Forrige/GPS/Neste, som i stedet sentrerer seg UAVHENGIG i
	   midten av resten av bredden (kolonne 3 er en usynlig, like bred
	   "motvekt" til Kart-kolonnen — det er det som gjør sentreringen
	   ekte, ikke bare sentrert i det som er igjen etter Kart). */
	.sticky-nav {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.sticky-nav__pill--maps { justify-self: start; }
	.sticky-nav__toolbar { grid-column: 2; justify-self: center; }
}

@media (min-width: 780px) {
	.site-nav { display: block; }
	.site-header__burger,
	.mobile-menu { display: none !important; }

	.hero__media-toggle { top: 1rem; bottom: auto; }
}

@media (min-width: 960px) {
	.verk-grid { grid-template-columns: repeat(3, 1fr); }
	.sticky-nav__pill { min-height: 58px; }
}