/*
Theme Name: Helgøya Fortellerfestival
Theme URI: https://helgoyafortellerfestival.no
Author: Screen Partner
Author URI: https://screenpartner.no
Description: Blokktema for Helgøya Fortellerfestival.
Version: 0.26.3
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: helgoya-fortellerfestival
*/

/* ==========================================================================
   TOPPEN
   --------------------------------------------------------------------------
   Bredden og innrykket kommer fra theme.json (wideSize + rot-utfylling), så
   den finnes ett sted. Fargene er de tre som allerede står i paletten —
   ingen nye tokens her ennå.
   ========================================================================== */

/* Klebringen må ligge på selve template-part-elementet, ikke på .site-header
   inni. Et sticky element klebrer innenfor foreldreboksen sin, og <header>-
   boksen slutter rett under topplinjen — da er det ingenting å kleble i, og
   toppen ruller vekk med en gang. Symptomet er «sticky som ikke virker». */
/* Høyden på WordPress' adminlinje, som klebringen og ankerrullingen begge må
   trekke fra. Den er `fixed` over 600px og ruller vekk under, og bytter høyde
   ved 782px — tallene er kjernens egne. Uten dette legger topplinjen seg under
   adminlinja for alle som er logget inn, som i praksis er redaktøren som skal
   godkjenne siden. */
:root { --adminlinje: 0px; }
body.admin-bar { --adminlinje: 32px; }

@media screen and ( max-width: 782px ) {
	body.admin-bar { --adminlinje: 46px; }
}

@media screen and ( max-width: 600px ) {
	body.admin-bar { --adminlinje: 0px; }
}

.wp-site-blocks > header {
	position: sticky;
	top: var( --adminlinje );
	z-index: 50;
}

/* Innrykket ligger her, på det fullbredde elementet — ikke på 76rem-stolpen
   inni. Det er ikke smak: kjernens `constrained`-oppsett legger rot-innrykket
   på *beholderen* og lar barna stå 76rem sentrert inni den. Legger man
   innrykket inne i 76rem-boksen i stedet, blir toppens spalte nøyaktig ett
   innrykk smalere enn resten av siden, og ordmerket havner en gutter lenger
   inn enn overskriftene under. */
.site-header {
	padding-inline: var( --wp--style--root--padding-right );
	background: var( --wp--preset--color--base );
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 16%, transparent );
}

/* Bakgrunnen var 92 % papir med en uskarphet bak seg. Den er heldekkende nå.
   Uskarpheten fulgte med ut: `backdrop-filter` har ingenting å gjøre bak en
   ugjennomsiktig flate, og den kostet et pseudo-element som bare fantes fordi
   filteret ellers lager en ny containing block og klipper mobilmenyens
   overlegg inne i topplinjen. Én regel mindre, én felle mindre. */

.site-header__bar {
	position: relative;
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	min-height: 4.25rem;
	gap: var( --wp--preset--spacing--30 );
}

/* ── Ordmerket ─────────────────────────────────────────────────────────────
   To linjer: stedet stort, festivalen mindre under. Skyver alt annet mot
   høyre. */
.site-header .wordmark {
	gap: 0;
	margin-right: auto;
	position: relative;
}

.site-header .wp-block-site-title,
.site-header .wp-block-site-tagline {
	margin: 0;
	line-height: 1.15;
	text-transform: uppercase;
}

.site-header .wp-block-site-title {
	font-size: 1.0625rem;
	letter-spacing: 0.06em;
}

.site-header .wp-block-site-title a {
	text-decoration: none;
	color: var( --wp--preset--color--contrast );
}

/* Hele ordmerket skal føre til forsiden, ikke bare tittellinja. Lenka i
   nettstedstittelen strekkes over hele ordmerket, undertittelen inkludert. */
.site-header .wp-block-site-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.site-header .wp-block-site-tagline {
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 45%, transparent );
}

/* ── Menyen ────────────────────────────────────────────────────────────────
   Flat, fire punkter, ingen undermenyer. Understreken vokser fram på hover
   og står igjen på siden man er på. */
.site-header .wp-block-navigation {
	font-size: var( --wp--preset--font-size--small );
}

.site-header .wp-block-navigation .wp-block-navigation__container {
	gap: var( --wp--preset--spacing--30 );
}

.site-header .wp-block-navigation-item__content {
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	color: var( --wp--preset--color--contrast );
	transition: border-color 0.18s ease;
}

.site-header .wp-block-navigation-item__content:hover {
	border-bottom-color: var( --wp--preset--color--signal );
}

.site-header .current-menu-item .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var( --wp--preset--color--contrast );
}

/* Åpen mobilmeny. Høyrejusteringen som er riktig i topplinjen er feil her —
   den presser punktene ut i kanten. I skuffen leses de fra venstre. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var( --wp--preset--spacing--50 ) var( --wp--style--root--padding-right );
	background: var( --wp--preset--color--base );
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	justify-content: flex-start;
	gap: var( --wp--preset--spacing--30 );
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var( --wp--preset--font-size--large );
}

/* ── Handlekurven ────────────────────────────────────────────────────────
   Kortkode-blokken pakker utdataene sine i en <p>. Den nøytraliseres her i
   stedet for å filtreres bort, fordi en <p> uten marg ikke gjør noen skade —
   og alternativet er en egen blokk, som krever et byggesteg temaet ikke har. */
.site-header__bar > p {
	margin: 0;
	display: flex;
	align-items: center;
}

.handlekurv {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	padding: 0.35rem;
}

.handlekurv:hover { color: var( --wp--preset--color--accent ); }

.handlekurv__ikon { display: block; }

/* Tallet, ikke ordet — da leses det som en tilstand. */
.handlekurv__antall {
	position: absolute;
	top: -0.1rem;
	right: -0.25rem;
	display: inline-grid;
	place-items: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding-inline: 0.25em;
	border-radius: 999px;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* ── Språkvalget ───────────────────────────────────────────────────────────
   To bokstaver, ikke et flagg. Flagg står for land og ikke for språk, og
   nettstedet har lesere i England som ikke er britiske.

   Ingen ramme og ingen bakgrunn: dette er ikke en knapp som konkurrerer med
   billettknappen. Det er en tilstandsvisning med ett trykkbart alternativ —
   den dagen alternativet finnes. */
.sprakvelger {
	display: inline-flex;
	align-items: center;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.sprakvelger__valg {
	padding: 0.35rem 0.3rem;
	text-decoration: none;
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 55%, transparent );
}

/* Skillestreken hører til paret, ikke til noen av bokstavene — derfor på det
   andre valget og ikke som en egen node i markupen. */
.sprakvelger__valg + .sprakvelger__valg::before {
	content: "/";
	margin-inline-end: 0.3rem;
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 25%, transparent );
}

.sprakvelger__valg.is-naa {
	color: var( --wp--preset--color--contrast );
}

/* Av. Dempet nok til å lese som «ikke nå», tydelig nok til å lese i det hele
   tatt — 30 % blekk på papir er ~3:1, som er grensa for grafikk. Går den
   lavere blir valget usynlig, og da er det ikke utgrået, det er borte. */
.sprakvelger__valg.is-av {
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 30%, transparent );
	cursor: not-allowed;
}

a.sprakvelger__valg:hover,
a.sprakvelger__valg:focus {
	color: var( --wp--preset--color--accent );
}

/* ── Billettknappen ────────────────────────────────────────────────────────
   Forsvinner aldri. Den er jobb nummer én — den blir bare trangere.

   Aksent og ikke grønn. Grønn er nå «gjør noe» — veibeskrivelse, finn fram,
   åpne kartet — og hvis billettknappen har den samme fyllen er det ett nivå på
   siden, ikke to. Aksenten er den ene handlingen som koster penger, og den er
   den eneste knappen som får den. */
.site-header__ticket .wp-block-button__link {
	background: var( --wp--preset--color--accent );
	color: #fff;
	white-space: nowrap;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-radius: 3px;
}

/* Mørkner mot blekk i stedet for å bytte kulør — en knapp som skifter farge
   under fingeren leses som en annen knapp. Må stå etter theme.json sin
   :hover på knappe-elementet, som ellers legger handlingsgrønnen oppå. */
.site-header__ticket .wp-block-button__link:hover,
.site-header__ticket .wp-block-button__link:focus {
	background: var( --aksent-hover );
	color: #fff;
}

/* ── Bredder ───────────────────────────────────────────────────────────────
   Grensa sto på 64rem, arvet fra mockupen. Den er målt ned til 47rem, fordi
   64rem gjemte lenkene lenge før de manglet plass:

     ordmerke 132 + lenkerad 263 + billettknapp 123 + kurv ~40   =  558px
     tre mellomrom à 16px                                        =   48px
                                                                 -------
     faktisk behov                                                  606px
     + rotinnrykk 2 × 40px                                        =   80px
                                                                 -------
     smalest brukbare visningsbredde                                686px

   47rem = 752px gir ~65px klaring — nok til at ordene ikke klistrer seg til
   hverandre, og nok til et språkvalg fra Polylang uten at grensa må flyttes
   igjen.

   MERK: dette er en terskel, ikke en måling. CSS har ingen «når dette flyter
   over»-regel, og container queries løser det ikke — de bytter bare hvilken
   boks du måler mot. Verre her: `container-type` slår på layout-containment,
   som gjør elementet til containing block for `position: fixed`-barn, og da
   klippes den åpne mobilmenyen inne i topplinjen. Nøyaktig samme fella som
   `backdrop-filter` sto i lenger opp i fila. Ekte overflytdeteksjon krever en
   ResizeObserver som sammenligner nødvendig mot tilgjengelig bredde. */

/* Burgeren sist, ytterst til høyre. Den er det eneste elementet i topplinjen
   som åpner noe annet enn en side, og tommelen leter etter den i hjørnet.
   Rekkefølgen settes bare der menyen faktisk er kollapset — over grensa er
   navigasjonen en vanlig lenkerad og skal stå der den står. */
/* Rekkefølgen på mobil, fra venstre: ordmerke, kurv, billetter, språk, burger.
   Språkvalget står mellom billettknappen og burgeren med vilje — det er den
   eneste plassen der det ikke skiller kurven fra billettknappen, som er de to
   som hører sammen. */
@media ( max-width: 46.99rem ) {
	.site-header__bar > p { order: 1; }
	.site-header__ticket { order: 2; }
	.site-header__bar > p:has( .sprakvelger ) { order: 3; }
	.site-header .wp-block-navigation { order: 4; }

	/* Språkvalget må krympe for å få plass. Topplinja er `nowrap`, og i full
	   størrelse dyttet «NO / EN» burgeren ut av skjermen på 375px — målt til
	   x=381 i et 375px vindu, altså en meny det ikke gikk an å trykke på.

	   Regnestykket på 375px, 335px tilgjengelig (375 − 2 × 20 rotinnrykk):

	     full velger 64px + mellomrom à 8   →  385 av 335   overflyt 50
	     kompakt 42px + mellomrom à 8       →  363 av 335   overflyt 28
	     kompakt 42px + mellomrom à 4       →  347 av 335   overflyt 12
	     + billettknappen 90 → 79px         →  336 av 335   overflyt 1

	   De to siste linjene står i 30rem-blokka lenger ned. Det er tett, men
	   ingenting er skjult og ingenting er utenfor skjermen.

	   MERK: målt mot Woo sin mini-kurv på 43px, som er den som faktisk rendres
	   nå. Temaets egen `.handlekurv` er 33px — når maldelen i databasen og
	   temafila samkjøres, kommer det 10px gratis tilbake her. */
	.sprakvelger {
		font-size: 0.625rem;
		letter-spacing: 0.02em;
	}

	.sprakvelger__valg { padding: 0.2rem 0.1rem; }

	.sprakvelger__valg + .sprakvelger__valg::before { margin-inline-end: 0.12rem; }
}

@media ( min-width: 600px ) and ( max-width: 46.99rem ) {
	.site-header .wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}
}

/* De siste pikslene. Her er det språkvalget som har kommet inn i linja, og det
   er mellomrommene, billettknappens sideluft og litt sperring som betaler —
   ikke ordmerket, og ingenting som forsvinner. Se regnestykket over. */
@media ( max-width: 30rem ) {
	.site-header__bar { gap: 4px; }

	.site-header .wp-block-site-title { font-size: 0.9375rem; }

	/* 0.13em sperring på sytten bokstaver er 23px ren luft. På 360px er det
	   luft topplinja ikke har. Undertittelen er fortsatt sperret, bare ikke
	   like mye — den leses som det samme ordmerket. */
	.site-header .wp-block-site-tagline { letter-spacing: 0.06em; }

	.site-header__ticket .wp-block-button__link {
		padding: 0.6rem 0.55rem;
		font-size: 0.6875rem;
		letter-spacing: 0.02em;
	}

	/* Skillestreken ryker her. To koder med luft mellom leses fortsatt som to
	   valg når det ene er grått — og streken koster 7px som burgeren trenger
	   mer. Over 30rem står den. */
	.sprakvelger { gap: 0.28rem; }

	.sprakvelger__valg { padding: 0.2rem 0; }

	.sprakvelger__valg + .sprakvelger__valg::before { content: none; }
}

/* Under 360px er det ikke plass til fem ting på én linje uansett hva man
   krymper — toppen rant over med 10px her allerede før språkvalget kom til.
   Da ryker valget først, for det er det eneste av de fem som ikke gjør noe
   ennå. Alternativet er en burger utenfor skjermkanten, og en meny man ikke
   når er en verre feil enn et språkvalg man ikke ser. */
@media ( max-width: 22.49rem ) {
	.site-header__bar > p:has( .sprakvelger ) { display: none; }
}

/* ==========================================================================
   AVLEDEDE TOKENS
   --------------------------------------------------------------------------
   Fargene, mellomrommene og skriftstørrelsene kommer fra theme.json. Dette er
   de som ikke er presets: hårstreker og dempet blekk er blandinger av
   contrast, ikke egne farger i paletten — å legge dem inn der ville gitt
   redaktøren åtte gråtoner å velge feil mellom.
   ========================================================================== */

:root {
	/* Handlingsgrønn. Én farge for alt som er en knapp — billetter, veibeskrivelse,
	   «finn fram». Før hadde billettknappen lauv og veiknappene skogblå, og to
	   nesten like grønntoner på samme skjerm leses ikke som to nivåer, bare som
	   en inkonsekvens. Skogblå får være flate og bakgrunn; lauv er det man
	   trykker på. */
	--handling: var( --wp--preset--color--lauv );
	--handling-hover: color-mix( in srgb, var( --wp--preset--color--lauv ) 72%, var( --wp--preset--color--contrast ) );

	/* På låvebrune bånd forsvinner lauv i bakgrunnen — knappen lysnes i stedet
	   for å bytte farge, så den fortsatt leses som den samme knappen.

	   78 % sto her, og 92 % står her nå (Yoann, 2026-08-17: «veien dit skal ha
	   lys tekst»). Med lys tekst er blandingsforholdet ikke et smaksspørsmål
	   lenger, det er en kontrastgrense:

	     78 % → rgb(96,141,99), papir på den gir **3,46:1**. Etiketten er
	            x-small i sperret versal, altså liten tekst, som krever 4,5.
	     92 % → rgb(69,122,76), papir gir **4,56:1** ✓ — og knappen står
	            fortsatt **3,46:1** mot båndet, over de 3 en kontrollflate
	            trenger.

	   Under 92 % faller teksten under grensen; over 92 % begynner knappen å
	   forsvinne i båndet igjen. Rommet er smalt, og det er derfor tallet står
	   her med utregningen ved siden av. */
	--handling-paa-morkt: color-mix( in srgb, var( --wp--preset--color--lauv ) 92%, var( --wp--preset--color--base ) );

	/* Kjøpsfargen — glørne i lyslenka på hero-bildet. Bor på `accent`.
	   Etter paletten «Kveld» gjør den bare én jobb: å koste penger.
	   «Nå»-tilstandene som lånte den før har flyttet til `signal`. */
	--aksent-hover: color-mix( in srgb, var( --wp--preset--color--accent ) 76%, var( --wp--preset--color--contrast ) );

	--rule: color-mix( in srgb, var( --wp--preset--color--contrast ) 16%, transparent );
	--rule-strong: color-mix( in srgb, var( --wp--preset--color--contrast ) 32%, transparent );
	--ink-soft: color-mix( in srgb, var( --wp--preset--color--contrast ) 62%, transparent );
	--ink-faint: color-mix( in srgb, var( --wp--preset--color--contrast ) 45%, transparent );

	/* Seksjonsrytme, flytende — ellers drukner mobilen i luft. */
	--section-y: clamp( 3rem, 2rem + 5vw, 6.5rem );

	/* Nesten firkantet. Piller leses lekent; dette gjør ikke det. */
	--radius: 3px;

	/* Billettikonet. En data-URI og ikke en fil: ett ikon er ikke verdt en
	   ekstra forespørsel, og et sprite-ark er ikke verdt vedlikeholdet. Brukes
	   som maske, så fargen i SVG-en er likegyldig — bare formen teller.

	   To ting gjør at den leses som en billett og ikke som en avrundet boks,
	   og begge måtte prøves ut i knappestørrelse for å avgjøres:

	     1. Hakkene er DYPE (r 2,4 av 11 i høyde). Forrige forsøk hadde r 1,75,
	        og på 15 px ble det en antydning til midje, ikke et hakk.
	     2. Rivekanten er et ekte hull gjennom masken (fill-rule evenodd), ikke
	        en strek på toppen. Det er den lyse stripa som gjør formen til en
	        billett med en stubb — uten den er dype hakk bare en boks med midje.

	   Et rent omriss ble også prøvd. Det forsvinner: på 15 px blir streken under
	   én piksel og ikonet leser som en tom ramme. */
	/* Sjevronen på utvidbare ting: dagbjelkene og filterbryteren. Tegnet «▾» ble
	   brukt før, men det er en glyf — den arver skriftens egen strektykkelse, er
	   ulik i hver skrift, og kunne ikke gjøres større uten å bli klumpete. Dette
	   er en strek med rund ende, som kan settes til hvilken som helst størrelse
	   og holder seg lesbar. */
	--ikon-sjevron: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l7 7 7-7"/></svg>' );

	--ikon-billett: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4 6.2h16a2 2 0 0 1 2 2v1.5a2.4 2.4 0 0 0 0 4.6v1.5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1.5a2.4 2.4 0 0 0 0-4.6V8.2a2 2 0 0 1 2-2zm10.6 1.1v9.4h1.5V7.3h-1.5z"/></svg>' );
}

/* ==========================================================================
   SEKSJONER OG OVERSKRIFTSBLOKKER
   ========================================================================== */

/* Byline over overskriften, aldri ved siden av. Ekko av maleriets
   sperrede antikva-versaler. */
.eyebrow {
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--moss );
	margin: 0;
}

.section--deep .eyebrow { color: var( --wp--preset--color--gold ); }

/* Lenke med bevegelig understrek — «se alt»-affordansen. */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: var( --wp--preset--font-size--small );
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var( --rule-strong );
	padding-bottom: 2px;
	white-space: nowrap;
	transition: border-color 0.18s ease;
}

.link-arrow:hover { border-color: currentColor; }
.link-arrow::after { content: "→"; transition: transform 0.18s ease; }
.link-arrow:hover::after { transform: translateX( 3px ); }

/* ==========================================================================
   KNAPPER
   --------------------------------------------------------------------------
   `.btn` er markupen blokkene i plugin-en skriver. Kjernens knappeblokk
   får de samme reglene gjennom klassen på omslaget, slik at en veiknapp ser
   lik ut enten den er skrevet av en redaktør eller av en spørring.

   Rognebærrødt er reservert for billetthandlinger. Knapphet er det som gjør
   det til et signal — i det øyeblikket det brukes på «les mer» slutter det å
   bety noe.
   ========================================================================== */

/* Modifikatorene skrives med `.btn.btn--map` og ikke bare `.btn--map`:
   kjernens knappeblokk legger klassen på *omslaget* (<div class="wp-block-button
   btn--map">), så en løs `.btn--map` traff også den. Symptomet var en tom, hvit,
   rammet boks med en pil i over hver knapp. */
.btn,
.wp-block-button.btn--quiet > .wp-block-button__link,
.wp-block-button.btn--map > .wp-block-button__link,
.wp-block-button.btn--ticket > .wp-block-button__link,
.wp-block-button.btn--outline > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.75rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var( --radius );
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--small { padding: 0.5rem 0.9rem; font-size: var( --wp--preset--font-size--x-small ); }

/* «Les mer» — det laveste trinnet i klynga.

   Omriss i blekk, ikke fyll og ikke farge. Tre trinn stigende forpliktelse:
   omriss = les om det, grønn = finn fram til det, glør = betal for det. En
   fylt flate til hadde gjort at øyet måtte lese alle tre for å finne kjøpet,
   og knappheten som gjør glørne til et signal var borte.

   Blekk og ikke scenelys: fiolett er reservert for «dette skjer akkurat nå» —
   prikken i «Pågår nå» og streken i framdriften. En knapp i samme farge på
   hver eneste rad hadde brukt den fargen opp.

   `--rule-strong` og ikke ren `contrast`: kanten skal si «trykkbar», ikke
   konkurrere i vekt med de to fylte ved siden av. */
.btn.btn--quiet,
.wp-block-button.btn--quiet > .wp-block-button__link {
	background: transparent;
	border-color: var( --rule-strong );
	color: var( --wp--preset--color--contrast );
}

.btn.btn--quiet:hover,
.wp-block-button.btn--quiet > .wp-block-button__link:hover {
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 7%, transparent );
	border-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--contrast );
}

/* På skogblå er blekk usynlig. Kanten og skriften snus til papir — det er den
   samme knappen, lest på mørk grunn. */
.section--deep .btn.btn--quiet,
.section--deep .wp-block-button.btn--quiet > .wp-block-button__link {
	border-color: color-mix( in srgb, var( --wp--preset--color--base ) 40%, transparent );
	color: var( --wp--preset--color--base );
}

.section--deep .btn.btn--quiet:hover,
.section--deep .wp-block-button.btn--quiet > .wp-block-button__link:hover {
	background: color-mix( in srgb, var( --wp--preset--color--base ) 12%, transparent );
	border-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--base );
}

/* Veien dit. Alltid fylt, aldri omriss: omriss leses som en
   sekundærhandling, og å komme seg fram til spillestedet er ikke sekundært.
   Samme grønn som billettknappen — en trykkbar flate ser lik ut uansett hvor
   på siden den står. */
.btn.btn--map,
.wp-block-button.btn--map > .wp-block-button__link {
	background: var( --handling );
	color: var( --wp--preset--color--base );
	border-color: var( --handling );
}

.btn.btn--map:hover,
.wp-block-button.btn--map > .wp-block-button__link:hover {
	background: var( --handling-hover );
	border-color: var( --handling-hover );
	color: var( --wp--preset--color--base );
}

/* Grønt på låvebrunt er to mørke toner oppå hverandre. Knappen lysnes så den
   fortsatt har en kant mot båndet.

   LYS TEKST, ikke blekk (Yoann, 2026-08-17). Blekk på den lysnede grønnen var
   den eneste knappen på hele nettstedet med mørk skrift, og på et mørkt bånd
   leste den som en avslått knapp. Blandingsforholdet i `--handling-paa-morkt` er
   strammet fra 78 % til 92 % i samme slengen, ellers holdt ikke papiret 4,5:1 —
   utregningen står ved tokenet. */
.section--deep .btn.btn--map,
.section--deep .wp-block-button.btn--map > .wp-block-button__link {
	background: var( --handling-paa-morkt );
	border-color: var( --handling-paa-morkt );
	color: var( --wp--preset--color--base );
}

.section--deep .btn.btn--map:hover,
.section--deep .wp-block-button.btn--map > .wp-block-button__link:hover {
	background: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--deep );
}

.btn.btn--map::before,
.wp-block-button.btn--map > .wp-block-button__link::before {
	content: "➤";
	font-size: 0.9em;
	transform: rotate( -45deg );
}

/* Billett. Aksent og ikke grønn — den samme regelen som topplinjens knapp
   følger: grønn er «gjør noe», aksenten er den ene handlingen som koster
   penger. To grønne knapper side om side i en programrad hadde vært to like
   nivåer, og da må øyet lese begge for å finne kjøpet.

   Ingen egen regel for `.section--deep`: aksenten er lys nok mot skogblå til
   at den står av seg selv, og det er hele poenget med å reservere den. */
/* Kjernens knappeblokk får den samme regelen gjennom klassen på omslaget, slik
   `btn--map` og `btn--outline` allerede gjør. Uten den ble en billettknapp
   skrevet av en redaktør — «Til butikken» i bunnen av programsiden — stående i
   handlingsgrønn ved siden av kjøpsknappene fra spørringen. */
.btn.btn--ticket,
.wp-block-button.btn--ticket > .wp-block-button__link {
	background: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
	color: #fff;
}

.btn.btn--ticket:hover,
.wp-block-button.btn--ticket > .wp-block-button__link:hover {
	background: var( --aksent-hover );
	border-color: var( --aksent-hover );
	color: #fff;
}

/* Ikonet er en maske og ikke et emoji: 🎟 tegnes i fargene til den som ser på
   siden — oftest blått og rosa — og et ikon som ikke arver tekstfargen er en
   flekk på knappen. Masken er `currentColor` og følger med overalt. */
.btn.btn--ticket::before,
.wp-block-button.btn--ticket > .wp-block-button__link::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background: currentColor;
	-webkit-mask: var( --ikon-billett ) center / contain no-repeat;
	mask: var( --ikon-billett ) center / contain no-repeat;
}

.btn.btn--outline,
.wp-block-button.btn--outline > .wp-block-button__link {
	background: transparent;
	border-color: var( --rule-strong );
	color: inherit;
}

.btn.btn--outline:hover,
.wp-block-button.btn--outline > .wp-block-button__link:hover {
	border-color: currentColor;
	background: color-mix( in srgb, currentColor 8%, transparent );
}

/* Handlingsklynga på en programrad: vei først, så billett. Het `.maplinks`
   fram til billettknappen flyttet inn — et navn som sier «kart» over en rad
   som også selger, sender neste endring til feil sted. */
.handlinger { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.handlinger small { font-size: var( --wp--preset--font-size--x-small ); color: var( --ink-faint ); }

/* Utsolgt står der knappen ville stått. Aksenten er reservert for noe du kan
   trykke på, så dette er ord og ikke en rød, død knapp. */
.handlinger .utsolgt {
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --ink-soft );
}

/* ==========================================================================
   MERKELAPPER — aldersbånd, forestillingsspråk, status
   --------------------------------------------------------------------------
   Omriss og ikke fyll: behersket, og de konkurrerer aldri med
   billettknappen om oppmerksomheten.
   ========================================================================== */

.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.2rem 0.5rem;
	border: 1px solid var( --rule-strong );
	border-radius: var( --radius );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ink-soft );
	white-space: nowrap;
}

.badge--free { border-color: var( --wp--preset--color--moss ); color: var( --wp--preset--color--moss ); }
.badge--lang { border-style: dashed; }

/* ==========================================================================
   HERO — omslagsblokken, kledd om
   --------------------------------------------------------------------------
   Bygget på wp:cover og ikke på egen markup, slik at redaktøren kan bytte
   bildet med kjernens egen bildevelger. Det som overstyres her er skyggen og
   bredden: kjernens dimming er én flat farge over hele flaten, og teksten
   trenger en ekte skygge i venstre spalte mens høyre side av bildet skal
   være åpen.
   ========================================================================== */

.wp-block-cover.hero {
	min-height: min( 86vh, 44rem );
	/* Samme grep som i toppen: innrykket utenfor 76rem-boksen, ikke inni, ellers
	   står hero-teksten ett innrykk lenger inn enn seksjonene under. Bildet og
	   skyggen dekker fortsatt hele flaten — de er `position: absolute; inset: 0`
	   og måles mot utfyllingsboksen. */
	padding-block: 0;
	padding-inline: var( --wp--style--root--padding-right );
	background: var( --wp--preset--color--deep );
	align-items: flex-end;
	justify-content: flex-start;
}

/* Varm skygge, ikke nøytralt svart — nøytralt gråner akvarellen ut.
   Vinklet, slik at fortelleren til høyre i bildet blir stående synlig. */
/* Omslagsblokken skriver overleggsfargen som innebygd stil på <span>-en, og
   en innebygd stil slår et stilark uansett spesifisitet. Derfor !important:
   fargen skal vekk, gradientene under skal stå. Den kan uansett ikke bo
   innebygd, siden telefonen trenger en annen gradient enn skjermen. */
.wp-block-cover.hero > .wp-block-cover__background {
	background-color: transparent !important;
	background-image:
		linear-gradient( 100deg,
			rgba( 12, 7, 4, 0.82 ) 0%,
			rgba( 12, 7, 4, 0.62 ) 42%,
			rgba( 12, 7, 4, 0.12 ) 76%,
			rgba( 12, 7, 4, 0.05 ) 100% ),
		linear-gradient( to top,
			rgba( 12, 7, 4, 0.55 ) 0%,
			rgba( 12, 7, 4, 0.08 ) 50%,
			rgba( 12, 7, 4, 0.2 ) 100% );
	opacity: 1;
}

/* Varm glød bak hero-teksten, hentet fra gullet — samme lys som lykta i taket.
   Ligger over skyggen og under innholdet, så venstre spalte får litt av lyset i
   bildet i stedet for å være et mørkt felt limt oppå et mørkt fotografi.
   `pointer-events: none` fordi den dekker knappene. */
.wp-block-cover.hero::after {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -20%;
	width: 70%;
	height: 90%;
	background: radial-gradient( closest-side,
		color-mix( in srgb, var( --wp--preset--color--gold ) 20%, transparent ),
		transparent );
	pointer-events: none;
	z-index: 1;
}

.wp-block-cover.hero > .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* På telefon spenner teksten over hele bredden, så det finnes ingen «høyre
   side» å holde fri. Da flates den vinklede gradienten ut. */
@media ( max-width: 48rem ) {
	.wp-block-cover.hero > .wp-block-cover__background {
		background-image:
			linear-gradient( to right, rgba( 12, 7, 4, 0.78 ) 0%, rgba( 12, 7, 4, 0.64 ) 100% ),
			linear-gradient( to top, rgba( 12, 7, 4, 0.5 ) 0%, rgba( 12, 7, 4, 0.2 ) 60%, rgba( 12, 7, 4, 0.25 ) 100% );
	}
}

/* Hero-teksten skal stå i den samme 76rem-spalten som toppen og resten av
   siden — ikke ute i sidekanten.

   Begge velgerne trengs. Så snart omslagsblokken har en egendefinert
   innholdsplassering skriver kjernen
   `.wp-block-cover.has-custom-content-position.is-position-bottom-left >
   .wp-block-cover__inner-container { margin: 0 }` — fire klasser, som slår en
   regel på tre. Da får ikke `margin-inline: auto` sentrert spalten, og teksten
   legger seg flatt ut mot venstre kant. */
.wp-block-cover.hero .wp-block-cover__inner-container,
.wp-block-cover.hero.has-custom-content-position.is-position-bottom-left > .wp-block-cover__inner-container {
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-inline: 0;
	padding-block: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--45 );
	color: var( --wp--preset--color--base );
}

.wp-block-cover.hero .eyebrow { color: var( --wp--preset--color--gold ); }

.wp-block-cover.hero h1 {
	font-size: var( --wp--preset--font-size--display );
	letter-spacing: 0.01em;
	max-width: 22ch;
	margin-block: var( --wp--preset--spacing--25 ) var( --wp--preset--spacing--30 );
}

.wp-block-cover.hero .wp-block-buttons { gap: var( --wp--preset--spacing--25 ); }

/* Omrisset står mot foto, ikke mot papir — hårstreken i --rule-strong er
   blekk og forsvinner her. */
.wp-block-cover.hero .wp-block-button.btn--outline > .wp-block-button__link {
	border-color: rgba( 255, 255, 255, 0.4 );
	color: var( --wp--preset--color--base );
}

/* På telefon spiste hero-en hele førsteskjermen: 44rem min-høyde er høyere
   enn innholdet trenger, så teksten sto limt i bunnen med et tomt felt over,
   og «I dag på øya» lå helt under bretten. Ingenting fjernes — luften
   strammes, og taket settes lavt nok til at det er innholdet, ikke
   min-høyden, som bestemmer høyden. `svh` og ikke `vh`, ellers måles det mot
   skjermen uten nettleserlinjene og hero-en blir høyere enn den ser ut til.

   Må stå etter grunnreglene over: samme spesifisitet, så det er rekkefølgen i
   fila som avgjør. */
@media ( max-width: 48rem ) {
	.wp-block-cover.hero { min-height: min( 72svh, 30rem ); }

	.wp-block-cover.hero .wp-block-cover__inner-container,
	.wp-block-cover.hero.has-custom-content-position.is-position-bottom-left > .wp-block-cover__inner-container {
		padding-block: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--35 );
	}

	.wp-block-cover.hero h1 {
		margin-block: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--25 );
	}

	/* Kortene er den høyeste enkeltdelen. De strammes, ikke skrives om: tittel,
	   tid og knapper står som før. Innrykket kuttes bare på oversiden — under
	   ligger knappene, og en knapp som nesten tar i kortkanten leser som en feil
	   og ikke som en stram forside. */
	.wp-block-cover.hero .nownext { margin-bottom: var( --wp--preset--spacing--30 ); }
	.wp-block-cover.hero .nownext__row { padding-block: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--25 ); }
}

/* ==========================================================================
   NÅ OG NESTE — blokken «Kommende arrangementer», kompakt oppsett
   --------------------------------------------------------------------------
   Merkelappspalten deles mellom radene med subgrid, slik at «Nå» og «Neste»
   får titlene sine på linje selv om ordene er ulikt lange. En fast bredde
   ville holdt til etikettene blir oversatt; subgrid måler det som faktisk
   står der.
   ========================================================================== */

.nownext {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.9rem;

	/* Ett kort per arrangement, ikke ett kort med skillelinjer i. «Nå» og «Neste»
	   er to forskjellige beskjeder — det ene er i gang, det andre kan du fortsatt
	   rekke — og en strek mellom dem leste som én blokk tekst. Luft gjør det
	   samme arbeidet tydeligere. Rutenettet blir stående: det er det som holder
	   merkelappspalten i flukt fra kort til kort. */
	row-gap: var( --wp--preset--spacing--25 );
	margin-block: 0 var( --wp--preset--spacing--35 );
	max-width: 34rem;
	font-variant-numeric: tabular-nums;
	color: var( --wp--preset--color--contrast );
}

.nownext__row {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column: 1 / -1;
	column-gap: 0.9rem;
	row-gap: 0.3rem;
	align-items: baseline;

	/* Kortene er hele poenget med siden under festivalen, så de får sin egen
	   grunn i stedet for å stole på hva som ligger bak. Fotografiet har ansikter
	   og lyse klær akkurat der de havner.

	   Papir og ikke mørkt: hero-en er allerede et mørkt fotografi med en mørk
	   skygge over, og et mørkt kort oppå det leser som et hull i bildet i
	   stedet for som et kort på det. Snudd blir det et ark lagt ned på
	   fotografiet — og teksten står på den samme grunnen som resten av
	   nettstedet, i stedet for å bytte polaritet midt i siden.

	   Slagskyggen er ikke pynt: uten den flyter et lyst felt sammen med de lyse
	   flekkene i løvverket bak. */
	background: color-mix( in srgb, var( --wp--preset--color--base ) 90%, transparent );
	backdrop-filter: blur( 10px );
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 12%, transparent );
	border-radius: var( --radius );
	box-shadow: 0 1.5rem 3rem -1.5rem rgba( 12, 7, 4, 0.65 );
	padding: var( --wp--preset--spacing--25 ) var( --wp--preset--spacing--30 );
}

.nownext__tag { min-width: 4.25rem; }

@supports ( grid-template-columns: subgrid ) {
	.nownext__row { grid-template-columns: subgrid; }
	.nownext__tag { min-width: 0; }
}

/* Litt større og mindre sperret enn en byline — dette leses med ett blikk,
   med én hånd, og 0.75rem på 0.14em var for trangt å skanne.

   ALLE merkelappene er piller nå (Yoann, 2026-08-17: «make neste have a bg +
   rounded corner»). «NESTE» sto som naken tekst ved siden av en fylt «NÅ»-pille,
   og to merkelapper med samme jobb i to helt forskjellige former leses som at den
   ene er en merkelapp og den andre er en overskrift.

   Geometrien er FELLES og settes her — samme utfylling, samme radius — slik at de
   to pillene er like store og står i samme kant. Det er bare fyllet som skiller
   dem, og det er hele poenget: «NÅ» er fylt scenelys og roper, «NESTE» er en
   dempet blekkflate og hvisker. Endrer man utfyllingen her, flytter begge seg
   sammen. */
.nownext__tag {
	justify-self: start;
	padding: 0.22rem 0.6rem;
	border-radius: 999px;
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 7%, transparent );

	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;

	/* Gull leser fint mot mørkt, men er ~2.6:1 mot papir. På det snudde kortet
	   må merkelappene være dempet blekk og scenelys, som begge klarer 4.5:1. */
	color: var( --ink-soft );
}

/* ── «NÅ» ──────────────────────────────────────────────────────────────────
   De andre merkelappene — «Neste», «Senere» — er dempet blekk og skal være det.
   Denne er den ene opplysningen på kortet som har en klokke i seg: dette spilles
   i dette øyeblikket. Fylt scenelys med papirhvit skrift, ikke bare farget
   tekst.

   Kontrasten er målt, ikke antatt: papir på scenelys er 7,6:1 — godt over AA,
   og det gjelder også for de 13 px versalene, som ellers er den typen tekst
   som stryker på en «nesten god nok» farge.

   Pulsen er en ring som vokser ut og forsvinner, ikke blinking og ikke
   flytting: ingenting hopper, ingenting endrer lesbarhet underveis, og
   informasjonen står der uendret om animasjonen aldri kjøres. Samme figur og
   samme takt som prikken i «Pågår nå» lenger nede på siden — én bevegelse på
   nettstedet som betyr «nå», ikke to. */
.nownext__row--now .nownext__tag {
	/* Utfylling, radius og `justify-self` står felles på `.nownext__tag` — her
	   byttes bare fyllet og skriftfargen, pluss pulsen. */
	background: var( --wp--preset--color--signal );
	color: var( --wp--preset--color--base );
	animation: hff-naa-puls 2.2s ease-out infinite;
}

/* Ringen er scenelys der ingen sier noe annet. `--puls-ring` finnes for det ene
   stedet som må si noe annet — «Pågår nå» på det låvebrune båndet, der en
   fiolett ring på mørkt er to mørke farger igjen. En variabel og ikke et andre
   sett keyframes: et `animation-name` derfra ville vunnet over `animation: none`
   i reduced-motion-blokka på spesifisitet, og arrangementssiden hadde blitt det
   ene stedet der «slå av bevegelse» ikke ble hørt. */
@keyframes hff-naa-puls {
	0%        { box-shadow: 0 0 0 0 color-mix( in srgb, var( --puls-ring, var( --wp--preset--color--signal ) ) 55%, transparent ); }
	70%, 100% { box-shadow: 0 0 0 9px color-mix( in srgb, var( --puls-ring, var( --wp--preset--color--signal ) ) 0%, transparent ); }
}

.nownext__body { display: grid; gap: 0.15rem; }

.nownext__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.2;
}

.nownext__meta {
	font-size: var( --wp--preset--font-size--small );
	color: color-mix( in srgb, currentColor 72%, transparent );
}

/* Knappene sto rett i raden før og hentet spalte 2 hver for seg. Nå er de en
   klynge, og det er klynga som plasseres — ellers legger de to knappene seg
   oppå hverandre i samme rute. */
.nownext__row .handlinger { grid-column: 2; justify-self: start; margin-top: 0.35rem; }

/* ── Tre knapper på én linje på telefon, i flukt med tittelen ───────────────
   (Yoann, 2026-08-17.) «Les mer · Veien dit · Billetter» brakk i 2 + 1, og en
   enslig billettknapp på linja under leste som at den hørte til noe annet — som
   er stikk motsatt av det den er. Og de skal stå i samme venstrekant som
   tittelen og infolinja, ikke rykket inn under merkelappen.

   MERKELAPPEN FLYTTER OPP PÅ EGEN LINJE for å få til begge. Regnestykket, målt:
   kortet er 301 px innvendig på 390 px skjerm, «NESTE»-pillen tar 68 og
   spaltemellomrommet 14, så det står 219 px til høyre for den — og tre knapper
   trenger 254. På 360 px er det bare ~190. Å presse tre knapper inn der krever
   11 px versaler, og det er for smått for en knapp man skal treffe med tommelen.

   Med merkelappen over får tittel, infolinje OG knapper samme venstrekant, og
   klynga får hele kortbredden. Det er samme flukt Yoann ba om, oppnådd ved å
   flytte det ene elementet som ikke trengte å stå der.

   Knappene strammes i tillegg: mindre innrykk, mindre mellomrom, mindre
   sperring. 346 → 254 px.

   Sperringen er den som gir mest tilbake per tapt tegnavstand: «BILLETTER» er
   ni tegn, og 0,09em på hver av dem er nesten ti piksler bare der. 0,05em er
   fortsatt sperret nok til at versalene ikke klumper seg.

   OG IKONENE FALLER BORT. Det er ikke en tredje innstramming, det er den som
   faktisk løser det: 271 px er hele kortets innside — det finnes ikke mer bredde
   å hente noe sted — og tre knapper med versaler, sperring og ikon får ikke
   plass der uansett hvor lite innrykk de har. Målt: 300 px med ikoner, 266 uten.
   Pila og billetten koster ~17 px hver med mellomrommet sitt, og de står ved
   siden av et ord som sier det samme. Det er den samme regelen flagget i en
   språkmerkelapp følger: dekor ved siden av ordet, aldri i stedet for det — og
   når det ikke er plass til begge, er det ordet som blir. */
@media ( max-width: 34rem ) {
	/* Én spalte, så merkelappen legger seg over tittelen i stedet for ved siden
	   av den. Overstyrer `subgrid` fra `@supports`-blokka over — den står
	   tidligere i fila, så denne vinner uten `!important`. */
	.nownext__row {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 0.4rem;
	}

	/* Ut av spalte 2, som ikke finnes lenger. */
	.nownext__row .handlinger { grid-column: 1; margin-top: 0; }

	.handlinger { gap: 0.3rem; }

	.handlinger .btn--small {
		padding-inline: 0.5rem;
		letter-spacing: 0.05em;
	}

	.handlinger .btn--small::before { content: none; }
}

/* Tom tilstand. Skal ikke se ut som en feil — det er en ekte og vanlig
   beskjed klokka elleve om kvelden. */
.hff-tomt {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --ink-faint );
}

.nownext .hff-tomt { color: color-mix( in srgb, currentColor 72%, transparent ); }

/* ==========================================================================
   ARRANGEMENTSRADER — det som er felles for forsiden og programmet
   --------------------------------------------------------------------------
   Liste og ikke kortrutenett: øyet løper nedover én spalte med klokkeslett i
   stedet for å lete etter dem inni like mange bokser.

   Selve rada — `.slot` — står lenger nede, i PROGRAMMET. Her ligger bare de to
   tingene som også brukes av «nå og neste»-kortet på forsiden: framdriftsstreken
   og «Pågår nå»-merket.

   `.venue` sto her: forsidens egen rad, med en loddrett tidsakse og en node per
   arrangement. Den er borte. Forsiden og programmet viste det samme
   arrangementet på to måter — uten bilde, uten pris, uten
   tilgjengelighetsmerker på forsiden — og en rad som finnes to steder blir to
   steder å endre. Aksen svarte dessuten bare på «hvor langt ut i dagen er vi»,
   og det står nå i klartekst i «Pågår nå»-merket. Begge oppsettene rendres av
   hff_arrangement_kort().
   ========================================================================== */

/* ── Framdrift ────────────────────────────────────────────────────────────
   Hvor langt ut i forestillingen vi er. Den ene opplysningen som avgjør om det
   er noe poeng i å sette seg i bilen. */
.framdrift {
	position: relative;
	display: block;
	height: 6px;
	max-width: 14rem;
	margin-block: 0.55rem 0.2rem;
	border-radius: 999px;
	background: color-mix( in srgb, currentColor 18%, transparent );
}

/* Fyllet vokser fram når raden tegnes — det er den samme opplysningen som før,
   men bevegelsen gjør at streken leses som noe som går, ikke som et tall. */
.framdrift::before {
	content: "";
	display: block;
	width: var( --framdrift, 0% );
	height: 100%;
	border-radius: inherit;
	background-color: var( --wp--preset--color--signal );
	/* To bånd, ikke ett: det fremste er kraftigst, det bakerste følger etter.
	   Ett bånd leses som en refleks i glasset — to leses som bevegelse. */
	background-image: linear-gradient(
		90deg,
		transparent 20%,
		color-mix( in srgb, #fff 22%, transparent ) 29%,
		transparent 38%,
		transparent 47%,
		color-mix( in srgb, #fff 34%, transparent ) 56%,
		transparent 65%
	);
	background-repeat: no-repeat;
	background-size: 220% 100%;
	background-position: 130% 0;
	animation:
		hff-framdrift-fyll 900ms cubic-bezier( 0.22, 1, 0.36, 1 ) both,
		hff-framdrift-glans 2.8s ease-in-out 900ms infinite;
}

/* Hodet på streken: her står vi akkurat nå. Pulsen er det eneste på siden som
   ikke står stille, og det er meningen — den skal si «dette skjer mens du ser». */
.framdrift::after {
	content: "";
	position: absolute;
	top: 50%;
	left: var( --framdrift, 0% );
	width: 6px;
	height: 6px;
	margin-left: -3px;
	margin-top: -3px;
	border-radius: 50%;
	background: var( --wp--preset--color--signal );
	animation:
		hff-framdrift-hode 900ms cubic-bezier( 0.22, 1, 0.36, 1 ) both,
		hff-framdrift-puls 2.8s ease-out 900ms infinite;
}

@keyframes hff-framdrift-fyll {
	from { width: 0; }
	to   { width: var( --framdrift, 0% ); }
}

@keyframes hff-framdrift-hode {
	from { left: 0; }
	to   { left: var( --framdrift, 0% ); }
}

@keyframes hff-framdrift-glans {
	from { background-position: 130% 0; }
	to   { background-position: -30% 0; }
}

@keyframes hff-framdrift-puls {
	0%       { box-shadow: 0 0 0 0 color-mix( in srgb, var( --wp--preset--color--signal ) 55%, transparent ); }
	70%, 100% { box-shadow: 0 0 0 6px color-mix( in srgb, var( --wp--preset--color--signal ) 0%, transparent ); }
}

/* ── Pågår-merket ─────────────────────────────────────────────────────────
   I tidslinja sa framdriftsstreken for lite for seg selv: en fiolett strek
   under en rad forklarer ikke at forestillingen er i gang. Her står det med
   ord.

   Samme pille som «NÅ» på forsiden — fylt scenelys, papirhvit skrift, samme
   pulsende ring i samme takt. Den var en svak tone av scenelys før, og det
   gjorde den til den svakeste av fire merkelapper på rada: aldersgrense,
   språk og adkomst er alle rammede piller, og en lys fiolett pille i samme
   rekke leste som en femte opplysning av samme slag. Den ene som har en klokke
   i seg må se annerledes ut enn de tre som ikke har det. Kontrasten er den
   samme målte 7,6:1 som på forsiden.

   Prikken pulset før, pillen står stille. Nå er det motsatt: to ringer som
   vokser ut av hverandre i samme takt er ikke ett hjerteslag, det er to. */
.paagaar {
	display: inline-flex;
	align-items: center;
	/* `.slot__body` er et grid — uten denne strekker pillen seg over hele raden. */
	justify-self: start;
	align-self: start;
	gap: 0.45rem;
	margin-block: 0.15rem;
	padding: 0.2rem 0.65rem 0.2rem 0.5rem;
	border-radius: 999px;
	background: var( --wp--preset--color--signal );
	color: var( --wp--preset--color--base );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	animation: hff-naa-puls 2.2s ease-out infinite;
}

.paagaar__prikk {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: currentColor;
}

/* Streken skal fortsatt kunne leses av noen som har slått av bevegelse. Det
   samme gjelder «NÅ» og «Pågår nå»: begge pillene er fylt scenelys uansett, så
   beskjeden står — det er bare ringen som slutter å vokse. */
@media ( prefers-reduced-motion: reduce ) {
	.framdrift::before,
	.framdrift::after,
	.paagaar,
	.nownext__row--now .nownext__tag {
		animation: none;
		background-image: none;
	}
}

/* Veibeskrivelsen inne i nå-kortet trengte tidligere en egen, mørkere fylling
   for ikke å stå papir-på-papir. Nå er `.btn--map` fylt grønn overalt, så
   overstyringen er borte — kortet arver den samme knappen som resten av siden. */

/* Faktastripa — Infoteket / Billetter i døra / Ti minutter — sto her. Fjernet:
   den brukte en full skjermbredde på tre opplysninger som ikke endrer hva du
   gjør videre. Det praktiske står på «Før du kommer». */

/* ==========================================================================
   SEKSJONER
   ========================================================================== */

/* Fullbredde-bånd stables kant i kant, uten luft mellom seg.

   Kjernen gir hvert barn av en `constrained`-beholder en blokkavstand:
   `:where(.is-layout-constrained) > * { margin-block-start: 1rem }`. Mellom to
   avsnitt er det riktig; mellom to bånd er det en lys stripe på tvers av siden,
   og den blir godt synlig der et mørkt bånd møter et lyst. Bare det første
   båndet slipper unna, fordi kjernen nuller `:first-child` — som er grunnen til
   at hero-en så riktig ut mens faktastripa og seksjonene under ikke gjorde det.

   Et bånd eier sin egen vertikale rytme: `.section` gjennom --section-y,
   faktastripa og hero-en gjennom sin egen utfylling. Regelen til kjernen er
   pakket i :where() og har null spesifisitet, så én klasse holder for å slå den.

   Tre steder, ikke ett. Den første varianten dekket bare bånd som ligger inni
   `wp:post-content`, altså båndene på en side redaktøren har bygget. To til
   slapp unna og ga en lys stripe på tvers av siden:

     – bånd lagt rett i en blokkmal (programsidens billettavslutning ligger i
       `main`, ikke i sideinnholdet);
     – **bunnteksten, på hver eneste side i hele nettstedet.** `main` og
       `footer` er søsken under `.wp-site-blocks`, så bunnteksten arvet den
       samme rem-en fra toppen av seg. Det er stripa mellom det mørke båndet og
       støttespillerne. */
.wp-block-post-content > .alignfull,
main > .alignfull,
.wp-site-blocks > footer {
	margin-block-start: 0;
	margin-block-end: 0;
}

.section { padding-block: var( --section-y ); }

.section--deep {
	background: var( --wp--preset--color--deep );
	color: var( --wp--preset--color--base );

	/* Papir-på-låve. `--ink-soft` og `--rule` er blandinger av *blekk* og
	   virker bare på papir; på et mørkt bånd gir de mørkt på mørkt — nøyaktig
	   feilen som ble rettet i programhodets ingress. Her er de samme tre
	   nivåene snudd, så en merkelapp eller en hårstrek kan skrives én gang og
	   virke på begge flatene.

	   Ugjennomsiktige blandinger og ikke alfa: en alfaverdi over gullgløden i
	   `.arrhode::before` gir forskjellig kontrast på tvers av samme linje.
	   `--papir-rule` er unntaket — en hårstrek er ikke tekst, og der er
	   gjennomsiktighet riktig.

	   Målt på låvebrunt (#231711): soft 9,1:1, faint 5,7:1, rule 2,6:1. De to
	   første er tekst og ligger godt over AA-kravet på 4,5. Hårstreken er
	   pynt rundt tekst som allerede leses på 8–9:1, og er ikke en betjeningsflate
	   — men den sto på 20 % og målte 1,8:1, som var i tynneste laget til å se i
	   sollys på en telefon. */
	--papir-soft: color-mix( in srgb, var( --wp--preset--color--base ) 74%, var( --wp--preset--color--deep ) );
	--papir-faint: color-mix( in srgb, var( --wp--preset--color--base ) 56%, var( --wp--preset--color--deep ) );
	--papir-rule: color-mix( in srgb, var( --wp--preset--color--base ) 30%, transparent );
}

.section--deep a { color: inherit; }

/* Papir, ett hakk ned. Den tredje flaten på nettstedet, og den finnes for én
   grunn: to bånd som begge er papir står uten skille, og to som begge er
   låvebrune smelter til ett. `shade` er allerede i paletten (og brukes av
   filterpanelet), så det er ikke en ny farge — bare den samme brukt i full
   bredde.

   Ingen egne tekstfarger her. Blekk på `shade` er den samme blekkfargen som på
   papir, så `--ink-soft`, `--rule` og alle merkelappene virker uendret. Det er
   hele poenget med å gå ett hakk og ikke til en ny kulør. */
.section--shade {
	background: var( --wp--preset--color--shade );
}

/* Merkelappene på et mørkt bånd. Omrisset og den dempede skriften er de samme
   to nivåene som på papir, bare snudd — se `--papir-*` over. */
.section--deep .badge {
	border-color: var( --papir-rule );
	color: var( --papir-soft );
}

/* «Utsolgt» og «Ferdig» står der knappen ville stått, og er blekk på papir. På
   låvebrunt forsvant de helt — ordet var der, men bare for den som visste at
   det skulle være der, og et handlingsfelt som ser tomt ut leses som gratis
   eller som en feil. Det er nøyaktig det ordet finnes for å hindre. */
.section--deep .handlinger small,
.section--deep .handlinger .utsolgt {
	color: var( --papir-faint );
}

/* Fyllet sto her før — «Pågår nå» var en svak tone av scenelys overalt ellers,
   og to mørke farger oppå hverandre gjorde beskjeden til den svakeste tingen på
   båndet. Nå er pillen fylt uansett hvor den står, så bare ringen trenger et
   ord her: den er scenelys mot papir, og scenelys mot låvebrunt er to mørke
   farger igjen. Papir i stedet — samme figur, samme takt, samme keyframes. */
.section--deep .paagaar { --puls-ring: var( --wp--preset--color--base ); }

/* Byline + tittel til venstre, «se alt»-lenken til høyre — men først når det
   er plass. Under 48rem stables de, ellers klemmes lenken i stykker. */
.section-head { margin-bottom: var( --wp--preset--spacing--45 ); }

/* Foran en radliste er 3rem for mye. Luft under en seksjonsoverskrift skal
   skille overskriften fra innholdet, men en `.slots`-liste begynner med en
   hårstrek som allerede gjør nettopp det — og med noe eget øverst i lista (før
   var det skuffen «tidligere i dag», nå statusbryteren) kom dens marg på toppen,
   så avstanden ned til første ord ble nesten 4rem. Det leste som at seksjonen
   var tom.

   Bare foran denne ene typen innhold: et bildegalleri eller en tekstblokk har
   ingen strek å låne, og trenger de tre centimeterne. */
.section-head:has( + .slots ) { margin-bottom: var( --wp--preset--spacing--35 ); }

/* ── «Se alt»-lenken i en seksjonsoverskrift ───────────────────────────────
   Som understreket tekst forsvant den: samme vekt og farge som brødtekst,
   plassert i den roligste delen av seksjonen, med en hårstrek under. Her er den
   en pille på en flate ett hakk mørkere enn seksjonen — fortsatt ikke en knapp
   (grønt og rognebærrødt er reservert for å komme seg dit og for å betale), men
   noe som tydelig kan trykkes.

   Blandingen går mot `contrast` og ikke mot `shade`, slik at den ene regelen
   virker på alle flatene seksjonen kan ha: papir, det fiolett tonede «finn
   fram», og skogblå. Den låner alltid litt av blekket som allerede er der. */
.section-head .link-arrow {
	padding: 0.5rem 0.95rem;
	border: 0;
	border-radius: 999px;
	background: color-mix( in srgb, currentColor 9%, transparent );
	font-weight: 700;
	transition: background-color 0.16s ease;

	/* Bunnjustert mot overskriftens boks, men løftet forbi underlengdene: uten
	   dette står pilla på linje med bunnen av en g eller en ø i stedet for på
	   linje med selve ordet, og leses som at den har sklidd ned. */
	margin-bottom: 0.35em;
}

.section-head .link-arrow:hover {
	background: color-mix( in srgb, currentColor 16%, transparent );
}

/* Hårstreken hører til tekstvarianten. På pilla ville den vært en strek under
   en flate. */
.section-head .link-arrow,
.section-head .link-arrow:hover { border-color: transparent; }

.section-head .section-head__text { gap: var( --wp--preset--spacing--20 ); }

.section-head h2 {
	font-size: var( --wp--preset--font-size--x-large );
	margin: 0;
	max-width: 34ch;
}

/* Skjult for øyet, ikke for opplesning. Brukes til status på programradene,
   som ellers bare finnes som farge og plassering. */
.skjult {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   KARTET — blokka «Kart over øya»

   Punktene er `sted`-poster; denne fila bestemmer bare hvordan de ser ut.
   Fem lag, fem farger — men fargen står aldri alene: hver pin bærer også en
   glyf (programnummer, N, M, WC, V, P). Farge alene svikter for en fargeblind
   besøkende, og den svikter for hvem som helst i sterkt sollys på en telefon.
   ========================================================================== */

.osmmap {
	aspect-ratio: 4 / 3;
	max-height: 34rem;
	width: 100%;
	border-radius: var( --radius );
	background: var( --wp--preset--color--shade );
	z-index: 0; /* holder Leaflets paneler under en klebrig header */
}

@media ( max-width: 40rem ) {
	.osmmap { aspect-ratio: 1 / 1; }
}

.osmmap--stor { aspect-ratio: 4 / 3; max-height: none; }

@media ( min-width: 60rem ) {
	.osmmap--stor { aspect-ratio: auto; height: min( 76vh, 42rem ); }
}

/* Flisene dras mot akvarellpaletten. Det er den billige versjonen av «få det
   ekte kartet til å ligne maleriet» — ingen vektorfliser, én linje. Lagt på
   flis-panelet, så etiketter og markører holder seg skarpe. */
.osmmap .leaflet-tile-pane {
	filter: sepia( 0.32 ) saturate( 0.72 ) hue-rotate( -8deg ) brightness( 1.04 ) contrast( 0.94 );
}

/* Når flisene ikke kan lastes — offline, eller en CSP som blokkerer dem. */
.osmmap--failed {
	display: grid;
	place-items: center;
	text-align: center;
	padding: var( --wp--preset--spacing--35 );
	color: var( --ink-soft );
	font-size: var( --wp--preset--font-size--small );
}

.mapnote {
	margin-top: var( --wp--preset--spacing--25 );
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --ink-faint );
}

/* ── Pin-ene ──────────────────────────────────────────────────────────── */
.osmpin {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var( --wp--preset--color--accent );
	color: #fff;
	border: 2px solid var( --wp--preset--color--base );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.35 );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.osmpin--spillested  { background: var( --wp--preset--color--accent ); color: #fff; }
.osmpin--overnatting { background: var( --wp--preset--color--deep ); color: #fff; }
.osmpin--mat         { background: var( --wp--preset--color--moss ); color: #fff; }
/* Den ene fargen utenfor paletten. Toaletter leses blått overalt ellers i
   verden, og et kart er ikke stedet å lære bort en ny konvensjon. Mørknet fra
   mockupens vannfarge, som ikke bar hvit tekst — denne gir 5,44:1. */
.osmpin--toalett     { background: #3f6f8c; color: #fff; }
.osmpin--parkering   { background: var( --wp--preset--color--gold ); color: var( --wp--preset--color--contrast ); }

.osmpin--liten {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 0.625rem;
	letter-spacing: 0.02em;
	border-width: 1.5px;
}

/* Din egen posisjon: ingen glyf, en ring i stedet, så den aldri forveksles
   med et sted du kan dra til. */
.osmpin--meg {
	width: 1.125rem;
	height: 1.125rem;
	background: #2f6ee0;
	border: 2.5px solid #fff;
	box-shadow: 0 0 0 4px rgba( 47, 110, 224, 0.28 ), 0 2px 6px rgba( 0, 0, 0, 0.35 );
}

.leaflet-popup-content b {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 400;
}

.leaflet-popup-content a { color: var( --wp--preset--color--accent ); font-weight: 600; }

.popup__anslag {
	display: block;
	margin-top: 0.15rem;
	font-style: normal;
	font-size: 0.75rem;
	color: var( --ink-faint );
}

/* ── Lagbryterne ──────────────────────────────────────────────────────── */
.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.32rem 0.7rem;
	border: 1px solid var( --rule-strong );
	border-radius: 999px;
	background: var( --wp--preset--color--base );
	font-size: var( --wp--preset--font-size--small );
	color: var( --ink-soft );
	cursor: pointer;
	transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.chip:hover { border-color: var( --wp--preset--color--contrast ); color: var( --wp--preset--color--contrast ); }

/* Radioknappen ligger under pillen. Den er ikke display:none — da forsvinner
   den for tastaturet og for skjermlesere sammen med hele radiogruppa. */
.chip__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.chip:has( .chip__radio:checked ) {
	background: var( --wp--preset--color--contrast );
	border-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
}

/* Fokusringen må tegnes av pillen, siden selve inputen er usynlig. */
.chip:has( .chip__radio:focus-visible ) {
	outline: 2px solid var( --wp--preset--color--signal );
	outline-offset: 2px;
}

.chip > span { display: inline-flex; align-items: center; gap: 0.4em; }

.chip small { font-variant-numeric: tabular-nums; opacity: 0.55; font-size: 0.85em; }

/* ── Antallet i en filterchip ──────────────────────────────────────────────
   Var 0,85em med 55 % gjennomsiktighet — altså grått tall på papir, langt under
   AA, og det på det ene tegnet som forteller deg om chipen er verdt å trykke på.
   Nå er det en egen liten flate: full blekkfarge på en tonet skive, uten
   gjennomsiktighet på selve skriften.

   Bare i filterpanelet. Kartets lagbrytere bruker den samme `.chip`-klassen, og
   der er tallet ren tilleggsinfo ved siden av et navn som allerede står. */
.chip--filter small {
	display: inline-grid;
	place-items: center;
	min-width: 1.4em;
	padding: 0.15em 0.4em;
	border-radius: 999px;
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 11%, transparent );
	color: var( --wp--preset--color--contrast );
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.35;
	opacity: 1;
}

/* På den valgte chipen er flaten blekk. Skiva må snus med den, ellers er det
   mørkt på mørkt — nøyaktig den feilen som ble rettet i programhodet. */
.chip--filter:has( .chip__radio:checked ) small {
	background: color-mix( in srgb, var( --wp--preset--color--base ) 26%, transparent );
	color: var( --wp--preset--color--base );
}

.chip::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.85;
	flex: none;
}

.chip--spillested::before  { background: var( --wp--preset--color--accent ); }
.chip--overnatting::before { background: var( --wp--preset--color--deep ); }
.chip--mat::before         { background: var( --wp--preset--color--moss ); }
.chip--toalett::before     { background: #3f6f8c; }
.chip--parkering::before   { background: var( --wp--preset--color--gold ); }

.kartlag { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }

.kartlag__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--25 ) var( --wp--preset--spacing--35 );
	padding: var( --wp--preset--spacing--30 ) 0;
	border-bottom: 1px solid var( --rule );
	margin-bottom: var( --wp--preset--spacing--35 );
}

.kartlag__bar .btn { margin-left: auto; }

/* På telefon er «vis hvor jeg er» den mest nyttige knappen på siden, og den
   står alene på linja uansett — høyrestilt leser den som en ettertanke. */
@media ( max-width: 40rem ) {
	.kartlag__bar .btn { margin-left: 0; width: 100%; }
}


/* ── Kart og liste side ved side ──────────────────────────────────────── */
.kartside { display: grid; gap: var( --wp--preset--spacing--40 ); }

@media ( min-width: 60rem ) {
	.kartside { grid-template-columns: 1.6fr 1fr; align-items: start; }
	/* Kartet står stille mens lista rulles: å panne til et sted og så miste
	   det mens du blar er feilmodusen til enhver kartside som ruller som én
	   spalte. */
	.kartside__kart { position: sticky; top: var( --wp--preset--spacing--30 ); }
	.kartside__liste { max-height: min( 76vh, 42rem ); overflow-y: auto; }
}

/* Gruppene var sammenslåtte <details>. Det er de ikke lenger: et sted du må
   klikke fram er et sted du ikke finner, og lista er svaret på spørsmålet
   pillen over kartet nettopp stilte. Overskriften står bare igjen i visningen
   uten JavaScript, der alle lagene ligger på skjermen samtidig. */
.stedgruppe + .stedgruppe { margin-top: var( --wp--preset--spacing--30 ); }

.stedgruppe__navn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding-block: var( --wp--preset--spacing--20 );
	border-bottom: 1px solid var( --rule );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink-soft );
}

.stedgruppe__navn small {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	opacity: 0.6;
}

.sted {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.25rem 0.75rem;
	align-items: center;
	padding-block: var( --wp--preset--spacing--25 );
	border-top: 1px solid var( --rule );
}

.sted:last-child { border-bottom: 1px solid var( --rule ); }
.sted .osmpin { box-shadow: none; }
.sted__body { min-width: 0; }

/* Navnet er en knapp, ikke en lenke: den flytter kartet i stedet for å gå
   et sted, og en lenke som ikke navigerer er en løgn til en skjermleser. */
.sted__navn {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.25;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.sted__navn:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.sted__navn--statisk { cursor: default; }
.sted__navn--statisk:hover { text-decoration: none; }

.sted__meta { font-size: var( --wp--preset--font-size--x-small ); color: var( --ink-soft ); margin: 0; }

.sted__avstand {
	font-size: var( --wp--preset--font-size--x-small );
	font-variant-numeric: tabular-nums;
	color: var( --wp--preset--color--moss );
	font-weight: 700;
	white-space: nowrap;
}

.sted .btn { grid-column: 3; }

/* Programmet inne i en kartrad og i en pop-up. Stedet er punktet, men det er
   forestillingen noen leter etter — «hvor er Den Håriga Flickan», ikke «hvor
   er Nedre Sund». */
.sted__program {
	list-style: none;
	margin: 0.15rem 0 0.2rem;
	padding: 0;
	display: grid;
	gap: 0.1rem;
	font-size: var( --wp--preset--font-size--small );
}

.sted__program li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
}

.sted__program time {
	font-variant-numeric: tabular-nums;
	color: var( --ink-soft );
	flex: none;
}

.sted__program a { color: inherit; text-decoration: none; }
.sted__program a:hover { text-decoration: underline; text-underline-offset: 0.16em; }

/* Det som er ferdig blir stående — at du gikk glipp av noe er også et svar —
   men det skal ikke konkurrere med det som ennå kan rekkes. */
.sted__program .er-ferdig { color: var( --ink-faint ); }

.sted__naa {
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--signal );
}

/* Adkomst til et toalett. Står alltid, også når svaret er nei: den som trenger
   å vite det skal slippe å kjøre dit for å finne det ut. */
.sted__adkomst {
	margin: 0.15rem 0 0;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ink-faint );
}

.sted__adkomst::before {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.4rem;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 0.08em;
}

.sted__adkomst.er-trinnfritt { color: var( --wp--preset--color--moss ); }

/* Rullestolmerket i pin-en. Ikonet er en maske i currentColor, definert ett
   sted: både PHP og JavaScript setter bare klassen.

   Pin-en blir en pille i stedet for en sirkel når merket er der. Formen alene
   er lesbar på avstand der ikonet er for lite til å tydes — som er hele
   poenget med å ha den på kartet framfor inne i hvert punkt. */
.osmpin--adkomst {
	width: auto;
	min-width: 2.6rem;
	padding-inline: 0.32rem;
	gap: 0.18rem;
	grid-auto-flow: column;
	border-radius: 999px;
}

.osmpin__adkomst {
	width: 0.72rem;
	height: 0.72rem;
	background: currentColor;
	-webkit-mask: var( --ikon-rullestol ) center / contain no-repeat;
	mask: var( --ikon-rullestol ) center / contain no-repeat;
	flex: none;
}

:root {
	--ikon-rullestol: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11.5' cy='3.4' r='2.4' fill='%23000' stroke='none'/%3E%3Cpath d='M9.6 7.4v5.4h5.1l2.9 5.6'/%3E%3Ccircle cx='10.4' cy='15.6' r='5.8'/%3E%3C/svg%3E" );
}

/* ==========================================================================
   RULLING TIL ANKER
   «Hele dagen» peker på #i-dag rett under. Uten dette hopper siden dit i ett
   kutt, og du mister følelsen av at det er den samme siden lenger ned.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* Ankeret må klarere den klebrige toppen, ellers lander overskriften bak den.

   Butikkens bånd står her med attributtvelger og ikke med klasse, fordi id-ene
   bygges av kategoriens slug — `#hylle-effekter`, `#hylle-fortellerkunst` — og en
   ny kategori skal ikke kreve en ny linje i dette stilarket. Bunnteksten lenker
   til hyllene, og uten dette lander overskriften «Effekter» bak ordmerket. */
[id="i-dag"],
[id="finn-fram"],
[id="spillesteder"],
[id="billetter"],
[id^="hylle-"] {
	scroll-margin-top: calc( 5.5rem + var( --adminlinje ) );
}

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   «FINN DET DU TRENGER» — egen flate

   Seksjonen er den eneste på forsiden som er et verktøy og ikke en fortelling,
   og den skal kjennes som et annet rom. Fiolett, men som en TONE i papiret,
   ikke som et fylt bånd: kartet, pillene og pin-ene inni er alle bygget på at
   flaten under dem er papir. Et mettet fiolett bånd her ville tvunget fram en
   egen palett for halve seksjonen.
   ========================================================================== */
.section--finn {
	background: color-mix( in srgb, var( --wp--preset--color--signal ) 7%, var( --wp--preset--color--base ) );
	border-block: 1px solid color-mix( in srgb, var( --wp--preset--color--signal ) 22%, transparent );
}

/* Pillene står på den tonede flaten og må hentes tilbake til papir, ellers
   forsvinner de i den. */
.section--finn .chip { background: var( --wp--preset--color--base ); }

/* Kartets egen ramme trenger litt mer kant mot en flate som ikke er hvit. */
.section--finn .osmmap { background: var( --wp--preset--color--base ); }

/* Flagget ved siden av språket. Litt større enn teksten — flaggemojier tegnes
   optisk mindre enn versaler i samme punktstørrelse. */
.badge__flagg {
	font-size: 1.15em;
	line-height: 1;
}

/* ==========================================================================
   BUNNEN
   --------------------------------------------------------------------------
   To bånd. Støttespillerne på papir, festivalen på blekk. Begge er
   fullbredde-flater med den samme 76rem-stolpen inni, bygget som toppen:
   innrykket ligger på flaten og ikke på stolpen, ellers står bunnteksten
   én gutter smalere enn alt annet på siden.
   ========================================================================== */

/* ── Støttespillerne ───────────────────────────────────────────────────────
   Lyst bånd, med vilje. Retningslinjene til de fleste støtteordninger forbyr
   å farge om eller invertere merket, så de kan ikke knockout-settes på det
   mørke båndet under. */
.funders {
	padding-inline: var( --wp--style--root--padding-right );
	padding-block: var( --wp--preset--spacing--45 );
	background: var( --wp--preset--color--shade );
}

.funders__inner {
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

.funders h4 {
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink-faint );
	margin: 0 0 var( --wp--preset--spacing--35 );
	text-align: center;
}

.funders__row {
	gap: var( --wp--preset--spacing--35 ) var( --wp--preset--spacing--45 );
}

/* Bildeblokken har egne marger i kjernen. De nulles her — radens gap er den
   eneste avstanden som skal telle, ellers blir mellomrommene ujevne. */
.funders__row .wp-block-image {
	margin: 0;
	line-height: 0;
}

.funders__row img {
	width: auto;
	max-width: 100%;
	opacity: 0.82;
	transition: opacity 0.18s ease;
}

.funders__row .wp-block-image:hover img { opacity: 1; }

/* Høyde per merke, ikke én felles. Et sirkelmerke trenger mer høyde enn et
   bredt ordmerke for å veie like tungt — dette er målt optisk, ikke regnet. */
.funder--kulturradet img { height: 2rem; }
.funder--innlandet img { height: 2.7rem; }
.funder--ringsaker img { height: 2.4rem; }
.funder--hedmark img { height: 2.1rem; }
.funder--dnb img { height: 3.8rem; }

/* ── Bunnteksten ───────────────────────────────────────────────────────────
   Mørk flate, dempet tekst. Lenkene står i full papirhvit mens brødteksten
   ligger på 78 % — det er den forskjellen som gjør at en lenke leses som en
   lenke uten at noe er understreket før du peker på det. */
.site-footer {
	padding-inline: var( --wp--style--root--padding-right );
	padding-block: var( --section-y ) var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--contrast );
	color: color-mix( in srgb, var( --wp--preset--color--base ) 78%, transparent );
	font-size: var( --wp--preset--font-size--small );
}

.site-footer__inner {
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

.site-footer a {
	color: var( --wp--preset--color--base );
	text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

.site-footer h4 {
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --wp--preset--color--base ) 50%, transparent );
	margin: 0 0 var( --wp--preset--spacing--25 );
}

.site-footer p { margin: 0; }

/* Første spalte er bredest fordi den bærer en setning og ikke en liste.
   Under 48rem faller alt i én kolonne — tre spalter på telefon gir tre
   kolonner på to ord hver. */
.footer-grid {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
}

@media ( min-width: 48rem ) {
	.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Målt i tegn og ikke i rem: det er lesbarheten til linja som setter bredden. */
.footer-intro { max-width: 34ch; }

/* Menyblokken og listeblokken skal se like ut i de to spaltene. Kjernen gir
   dem hver sine standardstiler — punktmerker på lista, flex-gap på menyen —
   så begge nullstilles og får den samme radavstanden. */
.footer-nav ul,
.footer-kontakt {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav li + li,
.footer-kontakt li + li { margin-top: 0.4rem; }

/* Menyblokkens egen understrek-på-hover hører til toppen. Her er understreken
   allerede regelen for alle lenker i bunnen. */
.footer-nav .wp-block-navigation-item__content { text-decoration: none; }

.footer-legal {
	gap: var( --wp--preset--spacing--30 );
	margin-top: var( --wp--preset--spacing--35 );
	font-size: var( --wp--preset--font-size--x-small );
	color: color-mix( in srgb, var( --wp--preset--color--base ) 45%, transparent );
}

/* ==========================================================================
   PROGRAMSIDEN
   --------------------------------------------------------------------------
   /program/2026/ — utgavens arkiv. Rekkefølgen nedover er den besøkendes
   spørsmålsrekkefølge og ikke datamodellens: når er det, hvilken dag kan jeg,
   hva går den dagen, passer det for meg.

   Blokken er alignfull i en `default`-main, så den bærer rot-innrykket selv og
   trekker barna inn til de samme 76rem som resten av nettstedet. Daglinja er
   det ene barnet som skal gå helt ut i kanten: den er et bånd, ikke en spalte.
   ========================================================================== */

/* Temaet har ingen global border-box-nullstilling, og kjernen setter den ikke
   heller. Uten dette legger nettleseren utfyllingen *utenpå* `max-width`: filter-
   panelet ble 1266 px mot spaltens 1216 og stakk 25 px ut på hver side — synlig
   først over ~1300 px, der max-width faktisk begynner å binde. Filterbryteren på
   telefon hadde nøyaktig samme feil med `width: 100%` pluss utfylling.

   Nullstillingen holdes innenfor `.program` med vilje. Global ville vært riktigere
   i et nytt tema, men her ville den flyttet på topp, bunn, kart og forside i samme
   slengen — og det er ikke det denne siden ba om. */
.program,
.program *,
.program *::before,
.program *::after {
	box-sizing: border-box;
}

.program {
	padding-inline: var( --wp--style--root--padding-right );

	/* Høyden på den klebrige toppen. Daglinja klebrer under den, og ankrene må
	   klarere begge. Målt i nettleseren og ikke gjettet: 69 px = ordmerke +
	   utfylling + hårstreken under. Ett piksel for lite her gir en stripe av
	   rullende innhold mellom toppen og daglinja, som er nøyaktig så stygt som
	   det høres ut. */
	--topp-h: 4.3125rem;
	--dagbar-h: 3.5rem;
}

.program > * {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

/* ── 1. Når er det ─────────────────────────────────────────────────────── */

/* Samme register som forsidens hero, uten fotografiet. Låvebrunt bånd, gull-
   byline, papirhvit antikva — programsiden skal kjennes som samme nettsted i
   det du kommer inn på den, og et bilde her ville konkurrert med de ti
   bildene i radene under.

   Båndet går helt ut i kanten mens teksten står i den samme 76rem-spalten som
   alt annet: innrykket ligger på flaten, ikke på stolpen. Samme grep som
   toppen og hero-en — legger man innrykket inne i 76rem-boksen, står
   overskriften én gutter lenger inn enn dagbjelkene under. */
.programhode {
	position: relative;
	overflow: hidden;
	max-width: none;
	margin-inline: calc( var( --wp--style--root--padding-right ) * -1 );
	padding-inline: var( --wp--style--root--padding-right );
	padding-block: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--45 );
	background: var( --wp--preset--color--deep );
	color: var( --wp--preset--color--base );
}

/* Stolpen inni. Egen boks og ikke automarger på hvert barn: `margin: 0` på
   h1-en er en forkortelse og nuller `margin-inline: auto` sammen med resten,
   så overskriften la seg flatt mot venstre kant mens bjelkene under sto i
   spalten. Samme grep som `.funders__inner` og `.site-footer__inner`. */
.programhode__inner {
	position: relative;
	display: grid;
	gap: var( --wp--preset--spacing--25 );
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

/* Gull, som hero-ens byline. Mose ville forsvunnet i låvebrunt. */
.programhode .eyebrow { color: var( --wp--preset--color--gold ); }

.programhode h1 {
	font-size: var( --wp--preset--font-size--xx-large );
	letter-spacing: 0.01em;
	margin: 0;
}

/* Ingressen er dempet blekk på papir, og må snus når papiret blir blekk.

   To klasser og ikke én: `.programhode__ingress` setter `--ink-soft` lenger
   nede i fila, og to enkeltklasser har samme spesifisitet — da vinner den
   siste. Symptomet var mørk skrift på mørk flate, altså tekst du ikke kunne
   lese. Herfra styres fargen av båndet den står på, ikke av avsnittet selv.

   Ugjennomsiktig blanding mot låvebrunt, ikke `transparent`: en alfaverdi over
   en gullglød lenger nede gir forskjellig kontrast på tvers av linja. Denne
   tonen måler 8,7:1 mot flaten — godt over AA. */
.programhode .programhode__ingress {
	color: color-mix( in srgb, var( --wp--preset--color--base ) 74%, var( --wp--preset--color--deep ) );
}

/* Den varme gløden fra hero-en, i det små — men mye svakere. På forsiden ligger
   den bak hvit display-antikva i 5 rem; her ligger den bak brødtekst, og alt
   som farger en bakgrunn ujevnt bak brødtekst er kontrast man ikke lenger vet
   verdien av. Nede til venstre, under ingressen, ikke bak den. */
.programhode::before {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -60%;
	width: 48%;
	height: 120%;
	background: radial-gradient( closest-side,
		color-mix( in srgb, var( --wp--preset--color--gold ) 9%, transparent ),
		transparent );
	pointer-events: none;
}

/* Målt i tegn: det er linjelengden som setter bredden, ikke spalten.

   Brødtekststørrelse og ikke `large`. Ingressen orienterer — hvilken utgave,
   hvor mange dager — og så skal du videre ned til daglinja. En ingress i
   halvstor grad holder deg igjen i toppen av en side hvis jobb er å komme til
   programmet. */
.programhode__ingress {
	max-width: 58ch;
	margin: 0;
	color: var( --ink-soft );
}

/* ── Årvelgeren ────────────────────────────────────────────────────────────
   Programsiden hører til en utgave og ikke til nettstedet. Fire år med arbeid
   blir liggende, og blir liggende lenkbart — det er det sterkeste argumentet
   for å ha forlatt Wix, og det skal være synlig på siden og ikke bare sant i
   databasen. */
.aarbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	margin-top: var( --wp--preset--spacing--20 );
}

.aarbar__merke {
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink-faint );
	margin-right: 0.35rem;
}

.aarbar a {
	padding: 0.2rem 0.6rem;
	border-radius: var( --radius );
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-decoration: none;
	color: var( --ink-soft );
}

/* Årvelgeren står nå på det mørke båndet og må snus med det. */
.aarbar__merke { color: color-mix( in srgb, var( --wp--preset--color--base ) 50%, transparent ); }

.aarbar a { color: color-mix( in srgb, var( --wp--preset--color--base ) 72%, transparent ); }

.aarbar a:hover { color: var( --wp--preset--color--base ); }

.aarbar a[aria-current="page"] {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

/* ── 2. Hvilken dag kan jeg ────────────────────────────────────────────────
   Den eneste primæraksen på siden. Lenkene hopper, de filtrerer ikke: du
   beholder hele programmet rundt deg, kan rulle videre inn i søndagen, og det
   virker uten JavaScript.

   Båndet går helt ut i kanten — innrykket på .program nulles med en negativ
   marg og legges tilbake innenfor, så bakgrunnen og hårstrekene løper tvers
   over siden mens listen står i stolpen. */
.dagbar {
	position: sticky;
	top: calc( var( --topp-h ) + var( --adminlinje ) );
	z-index: 40;
	margin-inline: calc( var( --wp--style--root--padding-right ) * -1 );
	padding-inline: var( --wp--style--root--padding-right );
	max-width: none;
	background: var( --wp--preset--color--base );
	border-block: 1px solid var( --rule );
}

.dagbar ul {
	display: flex;
	gap: 0.15rem;
	/* Høyden bor på lista nå som lenkene er piller med egen utfylling. */
	align-items: center;
	min-height: var( --dagbar-h );
	max-width: var( --wp--style--global--wide-size );
	margin: 0 auto;
	padding: 0;
	list-style: none;

	/* Sikkerhetsnett, ikke plan A. Alle fem knappene skal få plass på en
	   telefon — se `.dagbar__lang` under. Rullingen står igjen for utgaver med
	   flere dager enn fire, og for veldig store tekststørrelser. */
	overflow-x: auto;
	scrollbar-width: none;
}

.dagbar ul::-webkit-scrollbar { display: none; }

/* Datoen og ordet «dager». Faller bort under 34rem, der «Alle dager 10 ·
   Tor 30.7 2 · Fre 31.7 2 · Lør 1.8 4 · Søn 2.8 2» er bredere enn skjermen og
   søndagen havner utenfor kanten — på en linje hvis eneste jobb er å velge dag.
   Igjen står «Alle · Tor · Fre · Lør · Søn», som får plass med god margin.

   Datoen er ikke borte, den står i bjelken rett under, med måned og alt. */
.dagbar__lang { margin-left: 0.3em; }

@media ( max-width: 34rem ) {
	.dagbar__lang {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
		border: 0;
	}

	.dagbar a { padding-inline: 0.55rem; }
}

/* Piller, ikke faner. Første utkast merket den valgte dagen med en understrek,
   og på en linje der alt annet er avslått tekst var det for stille — daglinja er
   sidens primærakse og skal se ut som den. Filterchipsene under er avrundede og
   avslåtte; en fylt scenelys-pille her leses som et nivå over dem, ikke som en
   av dem. */
.dagbar a {
	display: flex;
	align-items: center;
	/* Ingen gap. Den var der for tallet som er borte, og mellom «Tor» og
	   «30.7» leste den som dobbelt mellomrom. Prikken og datoen setter sin
	   egen avstand i stedet. */
	gap: 0;
	padding: 0.42rem 0.9rem;
	border-radius: 999px;
	white-space: nowrap;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	text-decoration: none;
	color: var( --ink-soft );
	transition: color 0.16s ease, background-color 0.16s ease;
}

.dagbar a:hover {
	color: var( --wp--preset--color--contrast );
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 6%, transparent );
}

.dagbar a[aria-current="true"] {
	background: var( --wp--preset--color--signal );
	color: var( --wp--preset--color--base );
}

.dagbar a[aria-current="true"]:hover {
	background: color-mix( in srgb, var( --wp--preset--color--signal ) 82%, var( --wp--preset--color--contrast ) );
	color: var( --wp--preset--color--base );
}

/* Festivaldagen som er i dag. Prikken står foran ordet, ikke i stedet for
   det — den som ser den skal vite hva den betyr uten å ha lært det.
   `currentColor` og ikke scenelys: står dagen valgt, er pillen scenelys, og en
   scenelysprikk på scenelys er ingen prikk. */
.dagbar a.er-i-dag::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: currentColor;
	color: var( --wp--preset--color--signal );
	margin-right: 0.45em;
	flex: none;
}

.dagbar a.er-i-dag[aria-current="true"]::before { color: var( --wp--preset--color--base ); }

/* En dag et filter har tømt. Blir stående — at lørdagen ikke har noe for
   ungene er også et svar — men slutter å love noe, og slutter å ta imot trykk:
   view.js setter `aria-disabled` sammen med klassen. Markøren må si det samme
   som resten, ellers peker hånda på noe som ikke skjer. */
.dagbar a.er-tom {
	opacity: 0.4;
	cursor: default;
}

/* Ingen hover-tilbakemelding på en avslått dag. Uten dette lyste den opp under
   pekeren som om det var noe der. */
.dagbar a.er-tom:hover {
	color: var( --ink-soft );
	background: transparent;
}

/* ── Statusbryteren i daglinja ─────────────────────────────────────────────
   «Aktuelt / Ferdig», ytterst blant dagene. Den hører sammen med dem — begge
   svarer på «når» — men den er ikke en femte dag, og skillestreken er det som
   sier det. Uten den leste bryteren som «Søn, og så en til».

   Ikke skjøvet helt ut til høyre med `margin-left: auto`: da havnet den i samme
   ende som «Kart», som er en helt annen slags ting (en hoppelenke ut av lista),
   og de to så ut som et par. Den står inntil den siste dagen fordi det er
   dagene den deler. */
.dagbar__status {
	display: flex;
	align-items: center;
	margin-left: 0.45rem;
	padding-left: 0.7rem;
	border-left: 1px solid var( --rule );
}

/* Fysisk bryter, ikke en pille som skifter farge. En scenelyspille her ville
   vært umulig å skille fra den valgte dagen tjue piksler til venstre, og de to
   gjør ikke det samme: dagen er ett valg av fem, bryteren er av eller på. */
.statusbryter {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.42rem 0.85rem 0.42rem 0.55rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var( --ink-soft );
	cursor: pointer;
	transition: color 0.16s ease, background-color 0.16s ease;
}

.statusbryter:hover {
	color: var( --wp--preset--color--contrast );
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 6%, transparent );
}

.statusbryter[aria-pressed="true"] { color: var( --wp--preset--color--contrast ); }

.statusbryter__spor {
	position: relative;
	flex: none;
	width: 1.8rem;
	height: 1.05rem;
	border-radius: 999px;
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 20%, transparent );
	transition: background-color 0.18s ease;
}

.statusbryter__spor::after {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: 0.15rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var( --wp--preset--color--base );
	transition: transform 0.18s ease;
}

.statusbryter[aria-pressed="true"] .statusbryter__spor {
	background: var( --wp--preset--color--signal );
}

.statusbryter[aria-pressed="true"] .statusbryter__spor::after {
	transform: translateX( 0.75rem );
}

/* Etiketten skifter mellom «Aktuelt» og «Ferdig», og de to er ikke like brede.
   Uten en fast bredde flytter høyre kant av linja seg for hvert trykk — og på
   programsiden står «Kart» rett bak og hopper med. Bredden er satt på det
   lengste ordet, ikke regnet ut: to norske ord, og de endrer seg ikke. */
.statusbryter__navn {
	min-width: 3.9rem;
	text-align: left;
}

@media ( prefers-reduced-motion: reduce ) {
	.statusbryter,
	.statusbryter__spor,
	.statusbryter__spor::after { transition: none; }
}

.dagbar__kart { margin-left: auto; }
.dagbar__kart a { color: var( --wp--preset--color--moss ); }

/* ── 3. Passer det for meg ─────────────────────────────────────────────────
   Fem akser, ikke seks: aldersgrensen er tatt ut som filter og står bare som
   merkelapp på raden. Se hff_program_akser().

   Panelet står under daglinja og ikke over den, og det er dempet: filtrene er
   en snarvei inn i programmet, ikke inngangen til det. Et fullbredde
   chip-panel øverst skyver selve programmet under skjermkanten og leser som en
   administrasjonsskjerm. */
/* Bryteren finnes bare under 52rem. Over den står panelet alltid åpent — det
   er en snarvei ved siden av programmet, ikke foran det. Under den er fem rader
   chips fire hundre piksler før første forestilling, og da er sammenslått
   riktig. Attributtet `data-lukket` settes uansett skjermbredde; det er CSS-en
   her som avgjør om det betyr noe, så en rotasjon fra portrett til landskap
   ordner seg selv uten en eneste linje JavaScript. */
/* Handlingsgrønn og fylt, ikke en rammet boks på papir. På telefon er dette den
   eneste inngangen til filtrene, og en tom ramme leste som et tekstfelt man
   kunne skrive i. Grønn er nettstedets ene «dette trykker du på»-farge. */
.filtre__bryter {
	display: none;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	/* Luft under også, ikke bare over. Sammenslått står bryteren rett oppå
	   «Dag 1», og de to leses som én blokk. Margen kolliderer med panelets egen
	   toppmarg når det er åpent, så det blir ikke dobbelt. */
	margin-block: var( --wp--preset--spacing--30 );
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: var( --radius );
	background: var( --handling );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--base );
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.filtre__bryter:hover { background: var( --handling-hover ); }

.filtre__bryter::after {
	content: "";
	margin-left: auto;
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	background: currentColor;
	-webkit-mask: var( --ikon-sjevron ) center / contain no-repeat;
	mask: var( --ikon-sjevron ) center / contain no-repeat;
	transition: transform 0.18s ease;
}

.filtre__bryter[aria-expanded="true"]::after { transform: rotate( 180deg ); }

/* Antall valgte filtre, som en prikk med et tall i. Det er det eneste sporet
   av filtrene som er synlig når panelet er slått sammen. Papirhvit på grønt —
   scenelys på grønt er to mettede farger som slåss. */
.filtre__bryter small {
	display: inline-grid;
	place-items: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding-inline: 0.35rem;
	border-radius: 999px;
	background: var( --wp--preset--color--base );
	color: var( --handling );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 52rem ) {
	.filtre__bryter { display: flex; }
	.filtre[data-lukket] { display: none; }
}

.filtre {
	display: grid;
	gap: 0.3rem;
	margin-block: var( --wp--preset--spacing--30 ) 0;
	padding: var( --wp--preset--spacing--25 ) var( --wp--preset--spacing--35 );
	border: 1px solid var( --rule );
	border-radius: var( --radius );
	background: color-mix( in srgb, var( --wp--preset--color--shade ) 55%, var( --wp--preset--color--base ) );
}

/* <fieldset> for å få <legend> til å bety noe for opplesning. Rammen og
   utfyllingen nettleseren gir den er derimot ikke ønsket her. */
.filtre__rad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Chipsene i filterpanelet er ett hakk lavere enn kartets. Fem rader av dem
   står over programmet, og forskjellen på 0,32 og 0,22 rem utfylling er 50 px
   av den første skjermen — som er én programrad. */
.filtre .chip { padding-block: 0.22rem; }

.filtre__merke {
	float: left;
	width: 8.5rem;
	padding: 0;
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ink-faint );
	line-height: 1.95;
}

/* Under 44rem står merkelappen over chipsene i stedet for ved siden av: 8,5rem
   av en telefonskjerm til ordet «Tilgjengelighet» etterlater tre chips på
   halvannen linje. */
@media ( max-width: 44rem ) {
	.filtre__merke { float: none; width: 100%; line-height: 1.6; }
}

.filtre .chip { background: var( --wp--preset--color--base ); }

/* Chipen bærer ingen fargeprikk her — den er en klasse i kartet, der prikken
   svarer til pin-fargen. På programsiden ville den vært pynt som ser ut som
   et system. */
.chip--filter::before { display: none; }

/* Null treff i kombinasjon med det som allerede står valgt. Chipen blir
   stående og klikkbar — den fjerner tross alt seg selv igjen — men slutter å
   love noe. Å ta den ut ville flyttet alle de andre mens du sikter. */
.chip--filter.er-tom { opacity: 0.42; }

/* ── «Flere filtre» ────────────────────────────────────────────────────────
   Skuffen «Inne eller ute» og «Tilrettelegging» ligger i. To spørsmål av fem
   gjelder et mindretall hver gang, og gjelder dem helt — tilrettelegging er
   ikke et humørvalg som «hva slags kveld vil jeg ha», det er om de kommer inn i
   det hele tatt. Her finner den som trenger dem, dem med én gang, og resten
   slipper å lese seg forbi fem chips som ikke gjelder dem.

   En ekte knapp å se på, ikke en tekstlenke. En sammenslått skuff som ser ut
   som brødtekst blir ikke åpnet, og da har den ikke skjult noe — den har
   fjernet det. Kanten er hårstrekens sterke variant og ikke en farge: den skal
   være åpenbart trykkbar uten å konkurrere med chipsene den ligger under. */
.filtre__mer { margin-top: 0.35rem; }

.filtre__merbryter {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.42rem 0.95rem;
	border: 1px solid var( --rule-strong );
	border-radius: 999px;
	background: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease;

	/* Nettleserens egen trekant fjernes i begge dialekter — Safari trenger
	   fortsatt ::-webkit-details-marker. Vi tegner vår egen under. */
	list-style: none;
}

.filtre__merbryter::-webkit-details-marker { display: none; }

.filtre__merbryter:hover {
	border-color: var( --wp--preset--color--contrast );
	background: var( --wp--preset--color--shade );
}

.filtre__merbryter::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY( -0.15em ) rotate( 45deg );
	transition: transform 0.18s ease;
}

.filtre__mer[open] > .filtre__merbryter {
	margin-bottom: 0.4rem;
	border-color: var( --wp--preset--color--contrast );
}

.filtre__mer[open] > .filtre__merbryter::after { transform: translateY( 0.1em ) rotate( -135deg ); }

/* Tallet er ikke pynt: det er måten en lukket skuff sier fra om at den skjuler
   et aktivt filter. Uten det blir noen sittende og lure på hvor de fire radene
   ble av. Tomt innhold = ingen pille, så den finnes bare når den betyr noe. */
.filtre__merbryter small:not(:empty) {
	display: inline-grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.3rem;
	border-radius: 999px;
	background: var( --wp--preset--color--signal );
	color: var( --wp--preset--color--base );
	font-size: 0.68rem;
	letter-spacing: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.filtre__merbryter,
	.filtre__merbryter::after { transition: none; }
}

.filtre__fot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--25 );
	margin-top: 0.15rem;
	padding-top: var( --wp--preset--spacing--20 );
	border-top: 1px solid var( --rule );
}

.filtre__antall {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --ink-soft );
}

/* Invertert pille, ikke en understreket lenke. «Nullstill» er den ene knappen i
   panelet som gjør noe med hele lista, og som understrek lignet den på en
   fotnote — den forsvant blant chipsene den skulle rydde opp i. */
.filtre__nullstill {
	padding: 0.3rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: var( --wp--preset--color--signal );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--base );
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.filtre__nullstill:hover {
	background: color-mix( in srgb, var( --wp--preset--color--signal ) 78%, var( --wp--preset--color--contrast ) );
}

.filtre__nullstill:focus-visible {
	outline: 2px solid var( --wp--preset--color--signal );
	outline-offset: 2px;
}

/* ── 4. Hva går den dagen ──────────────────────────────────────────────────
   Hver dag er en ekte <details>. I «Alle dager» står bare standarddagen åpen,
   og de andre er sammenslåtte bjelker: fire linjer som viser hele helga i ett
   blikk i stedet for én lang rulling. Velger du en dag i linja over, er den
   dagen alt som står igjen, og den er åpen.

   PHP skriver dem alltid `open` — det er JavaScript som lukker. Uten skript er
   hele programmet der, som før. */

.programdag {
	/* Ankeret må klarere både toppen og daglinja som klebrer under den, ellers
	   lander dagoverskriften bak dem begge når du hopper. */
	scroll-margin-top: calc( var( --topp-h ) + var( --dagbar-h ) + var( --adminlinje ) );
	border-top: 1px solid var( --rule );

	/* Innrykket kortet gir innholdet sitt. Halve rotinnrykket: ~20 px på skjerm,
	   ~10 px på telefon, uten en eneste mediespørring. */
	--dag-luft: calc( var( --wp--style--root--padding-right ) * 0.5 );
}

/* Første dag trenger ingen strek — daglinja over er allerede en. */
.programdag:first-child { border-top: 0; }

.programdag__hode {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem var( --wp--preset--spacing--30 );
	padding-block: var( --wp--preset--spacing--35 );

	/* Luft inne i bjelken — men innover, ikke utover.

	   Første forsøk la utfyllingen på og trakk den av igjen med en negativ marg,
	   så teksten sto stille mens flaten vokste forbi spalten. Da stakk dagens
	   fargede bjelke bredere ut enn filterpanelet over og radene under, og lest
	   som at kortet rømte fra sidebredden — helt riktig observert.

	   Nå er dagen et ekte kort: kanten ligger på spalten, som filterpanelets
	   boks gjør, og innholdet er rykket inn innenfor den. `.slots` får det samme
	   innrykket rett under, så overskrift og rader står i én linje. */
	padding-inline: var( --dag-luft );

	cursor: pointer;

	/* Nettleserens egen trekant fjernes i begge dialekter — Safari trenger
	   fortsatt ::-webkit-details-marker. Vi tegner vår egen, som kan farges og
	   roteres. */
	list-style: none;
}

.programdag__hode::-webkit-details-marker { display: none; }

/* Ingen hover-farge på hele bjelken: den er full bredde, og en flate som
   lyser opp under musepekeren på tvers av siden leser som at noe er valgt. */
.programdag__hode:hover h2 { text-decoration: underline; text-underline-offset: 0.16em; }

.programdag__hode:focus-visible {
	outline: 2px solid var( --wp--preset--color--signal );
	outline-offset: 2px;
}

.programdag__tekst { display: grid; gap: var( --wp--preset--spacing--20 ); }

.programdag__hode h2 {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-large );
}

.programdag__naa { color: var( --wp--preset--color--signal ); }

/* Sjevronen, helt til høyre. Peker ned når dagen er lukket og opp når den er
   åpen — samme grammatikk som filterbryteren. `margin-left: auto` fordi
   antallet som sto imellom og dyttet den dit er borte.

   1,15 rem og full blekkfarge, ikke en 12-piksels grå glyf: dette er den eneste
   tingen på bjelken som sier at den kan åpnes. */
.programdag__hode::after {
	content: "";
	flex: none;
	margin-left: auto;
	width: 1.15rem;
	height: 1.15rem;
	background: var( --ink-soft );
	-webkit-mask: var( --ikon-sjevron ) center / contain no-repeat;
	mask: var( --ikon-sjevron ) center / contain no-repeat;
	transition: transform 0.18s ease;
}

.programdag__hode:hover::after { background: var( --wp--preset--color--contrast ); }

.programdag[open] > .programdag__hode::after { transform: rotate( 180deg ); }

/* Litt luft under bjelken når dagen er åpen, så overskriften ikke sitter
   klemt oppå den første raden. Bare når den er åpen: en sammenslått bjelke
   skal stå tett på den neste. */
.programdag[open] > .programdag__hode { padding-bottom: var( --wp--preset--spacing--25 ); }

.programdag[open] { padding-bottom: var( --wp--preset--spacing--45 ); }

/* ── Dagen som går nå ──────────────────────────────────────────────────────
   Fire sammenslåtte bjelker er fire like dører, og da har den besøkende ingen
   grunn til å åpne den ene framfor den andre. Scenelys-flaten gir henne en:
   *her* er festivalen akkurat nå.

   Tone i papiret, ikke fylt bånd. Et mettet fiolett felt her ville tvunget
   teksten over til hvit — og da ville dagoverskriften i antikva vært et annet
   typografisk system enn de tre andre, som er en høyere pris enn merkingen er
   verdt. Samme grep som `.section--finn` på forsiden.

   Flaten ligger på <summary> og ikke på hele <details>: åpner du dagen, skal
   radene under stå på papir som alle andre rader. Ellers ville «i dag» betydd
   at fire forestillinger fikk en annen bakgrunn enn resten av programmet. */
/* Flaten ligger nøyaktig på spalten — ingen utfall i sidemargen, ingen kant.

   Begge var der før og begge var feil, hver på sin måte: utfallet gjorde
   bjelken 14 px bredere enn alle de andre og enn radene under, og kanten på
   3 px spiste av utfyllingen så *teksten* i dagens bjelke sto tre piksler
   lenger inn enn de tre andre dagene. To forskjellige skjevheter i samme
   element, som til sammen er akkurat den «noen piksler for smal i endene»-
   følelsen.

   Fargen alene holder. Med en fylt scenelys-flate er den loddrette kanten
   uansett den tredje måten å si det samme på — prikken i daglinja og «· i dag»
   i bylinen er de to andre. */
.programdag--i-dag > .programdag__hode {
	border-radius: var( --radius );
	background: color-mix( in srgb, var( --wp--preset--color--signal ) 13%, transparent );
}

.programdag--i-dag > .programdag__hode:hover {
	background: color-mix( in srgb, var( --wp--preset--color--signal ) 18%, transparent );
}

/* «Dag 3 · i dag» står allerede i scenelys. På den tonede flaten trenger det
   mer vekt for å ikke drukne i sin egen farge. */
.programdag--i-dag .programdag__naa { font-weight: 700; }



@media ( prefers-reduced-motion: reduce ) {
	.programdag__hode::after { transition: none; }
}

/* ── Raden ─────────────────────────────────────────────────────────────────
   Tid i egen spalte med bilderuten under, tittel og meta i midten, pris og
   knapper til høyre. Dette er den eneste arrangementsrada på nettstedet:
   programsiden setter den under hver dag, og forsidens «I dag på øya» setter
   den rett i seksjonen. Se hff_arrangement_kort().

   Rada sto tidligere bare på programsiden, og forsiden hadde sin egen med
   loddrett tidsakse. To rader med samme jobb rakk å bli uenige om hva et
   arrangement består av. Aksen er ikke savnet: den svarte på «hvor langt ut i
   dagen er vi», og det står nå med ord i «Pågår nå»-merket. */
.slots { display: grid; }

.slot {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0.35rem 1.25rem;
	align-items: start;
	padding-block: var( --wp--preset--spacing--35 );

	/* Innrykket sitter på raden, ikke på `.slots` rundt dem. Ligger det på
	   beholderen krymper hele boksen — og da blir hårstreken mellom radene
	   kortere enn dagbjelken over, som er nøyaktig det som gjorde at radene så
	   ut til å ikke bruke sidebredden. Her strekker streken seg fra kant til
	   kant som bjelken, mens innholdet står i flukt med overskriften.

	   `--dag-luft` settes av `.programdag` og finnes bare der. Reserven er 0:
	   på forsiden står lista rett i seksjonsstolpen og har ikke noe kort rundt
	   seg å rykke inn fra. */
	padding-inline: var( --dag-luft, 0 );

	border-top: 1px solid var( --rule );
}

.slot:last-child { border-bottom: 1px solid var( --rule ); }

/* På en telefon koster bilderuta direkte av tekstspalten: 7rem av 390 px lar
   «Raíces — Røtter i fremmed jord» brekke over to linjer og fortellerne over to
   til. Ruta blir 80 px i stedet — fortsatt et gjenkjennelig ansikt, og tittelen
   får linja si tilbake. */
@media ( max-width: 30rem ) {
	.slot { grid-template-columns: 5rem 1fr; column-gap: 0.9rem; }
}

/* Mosekant. Kurset deler tidslinje med forestillingene — det går den dagen det
   går — men kanten sier på en halv meters avstand at raden er en annen slags
   ting. */
.slot--kurs {
	border-left: 3px solid var( --wp--preset--color--moss );

	/* Kanten spiser tre piksler av boksen, så utfyllingen gir dem tilbake.
	   Uten det står kursradens tekst tre piksler til høyre for alle de andre —
	   den samme lille skjevheten som satt i dagbjelken før.

	   `max()` fordi `--dag-luft` er 0 på forsiden, og `calc(0px - 3px)` er en
	   negativ utfylling — ugyldig, så hele erklæringen faller bort og skjevheten
	   er tilbake. Her blir den 0 i stedet, og kursraden på forsiden mister de tre
	   pikslene mot kanten i stedet for å arve dem fra ingenting. */
	padding-left: max( 0px, calc( var( --dag-luft, 0px ) - 3px ) );

	background: color-mix( in srgb, var( --wp--preset--color--moss ) 4%, transparent );
}

/* Venstre spalte: klokkeslett over bilde.

   Bildet står ikke mellom tiden og tittelen. Tidsspalten er aksen øyet løper
   nedover for å finne «hva går klokka tre», og noe klemt inn ved siden av den
   bryter den kolonnen i to. Her ligger ruten under tallet i den samme spalten og
   overtar jobben noden på forsidens gamle tidslinje gjorde: den merker raden.
   Bonus — det er også sånn et trykt program setter det. */
.slot__spor {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	gap: 0.5rem;
	justify-items: end;
}

.slot__tid {
	margin: 0;
	display: grid;
	gap: 0.1rem;
	justify-items: end;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

/* Kvadratisk, ikke 4:5. Bassenget er blandet — ståsomme portretter, liggende
   låvebilder, en robot i høydeformat — og en kvadratisk ramme med `cover`
   overlever alle tre. Et 4:5-utsnitt av det liggende låvebildet kaster bort
   halve salen. */
.slot__bilde {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var( --radius );
	background: var( --wp--preset--color--shade );
	line-height: 0;
}

.slot__bilde img {
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Papiret er varmt, fotografiene er ikke tatt for det. Et hår av metning
	   ned tar brodden av de kjøligste uten å gjøre dem gråe — og det er ruten
	   på 88 px som trenger det, ikke bildet på arrangementssiden. */
	filter: saturate( 0.94 );
	transition: transform 0.3s ease;
}

.slot__bilde:hover img { transform: scale( 1.04 ); }

/* Et lånt portrett er et bilde av mennesket, ikke av forestillingen. Ansikter
   sitter i øvre halvdel av et portrett, så utsnittet flyttes opp — sentrert
   `cover` kutter dem i haka. */
.slot__bilde--forteller img { object-position: center 28%; }

@media ( prefers-reduced-motion: reduce ) {
	.slot__bilde img { transition: none; }
	.slot__bilde:hover img { transform: none; }
}

/* Begge klokkeslettene, ikke bare starten. Slutten sto i `--x-small` og
   `--ink-faint` — halv størrelse og grå — og et tidsrom der den andre
   halvparten er finskrift leses som en fotnote til den første. To like tall
   leses som det de er: fra og til. */
.slot__tid time {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
}

.slot__body {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.slot h3 { margin: 0; font-size: var( --wp--preset--font-size--large ); }
.slot h3 a { color: inherit; text-decoration: none; }
.slot h3 a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* Ingressen. Het `.slot__hvor` og begynte med spillestedet i halvfet, med
   formen over seg og fortellerne under. Tre linjer er borte — se
   hff_arrangement_kort() for hvorfor — og igjen står det ene som faktisk får
   noen til å velge raden. */
.slot__om {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --ink-soft );
	max-width: 62ch;
}

.slot .badges { margin-top: 0.15rem; }

/* Tilgjengelighet er den ene merkelappen som avgjør om noen i det hele tatt
   kan komme. Mose, så den skiller seg fra aldersgrense og språk uten å rope. */
.badge--adkomst {
	border-color: color-mix( in srgb, var( --wp--preset--color--moss ) 45%, transparent );
	color: var( --wp--preset--color--moss );
}

.slot__side {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 0.5rem;
}

.slot__pris {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --wp--preset--color--contrast );
	flex-basis: 100%;
}

@media ( min-width: 52rem ) {
	.slot { grid-template-columns: 7rem 1fr 13rem; }

	/* Prisen og knappene flyttes ut i sin egen spalte og stables. To knapper
	   ved siden av hverandre ville tatt ~300px fra tittelspalten på hver
	   eneste rad. `stretch` gjør dem like brede — to ulike bredder over
	   hverandre leses som at den ene er viktigere enn den andre. */
	.slot__side {
		grid-column: 3;
		grid-row: 1;
		flex-direction: column;
		align-items: stretch;
		gap: 0.4rem;
		margin-top: 0;
	}

	.slot__pris { flex-basis: auto; text-align: center; }
	.slot__side .handlinger { flex-direction: column; align-items: stretch; }
}

/* ── Statusbryteren over dagslista ─────────────────────────────────────────
   Forsidens «I dag på øya» har den samme bryteren som programsidens daglinje,
   men ingen linje å stå i. Den står over lista, i venstre kant — i flukt med
   seksjonsoverskriften over og med venstrekanten radene begynner på.

   Høyre kant ble prøvd først, med den begrunnelsen at en bryter på samme
   loddrette linje som en <h2> leser som en underoverskrift. Den begrunnelsen
   var feil vei: til høyre havnet bryteren rett under «Alle fire dager →» og
   dannet en kolonne med den, som om de to var et par knapper som hørte sammen.
   De gjør ikke det — den ene forlater seksjonen, den andre endrer den. Til
   venstre står bryteren over det den styrer.

   Her sto skuffen «Ferdig» før — et <details> med radene inni. `.tidligere`,
   `.tidligere__bryter` og `.tidligere__antall` er borte med den; se
   hff_statusbryter() for hvorfor bryteren erstattet den. */
.slots > .statusbryter--liste {
	justify-self: start;

	/* Negativ marg mot den vannrette utfyllingen i selve knappen, slik at ordet
	   står i flukt med kanten og ikke et halvt tegn innenfor. Bryteren har luft
	   rundt teksten for treffområdets skyld; her skal *teksten* flukte. */
	margin-left: calc( var( --dag-luft, 0px ) - 0.55rem );
	margin-bottom: var( --wp--preset--spacing--20 );
}

/* ── Under festivalen ──────────────────────────────────────────────────────
   Uten forelder-selektor: det er PHP som avgjør om `er-*` i det hele tatt
   skrives — se `$valg['status']` i hff_arrangement_kort(). Programsiden sender
   `false` for alle dager unntatt den som går nå, forsiden alltid `true`.
   `.programdag--i-dag` sto foran begge og gjorde reglene til programsidens
   egne — da fikk ikke forsidens rader dem.

   `.slot.er-ferdig { opacity: 0.55 }` sto her og er borte. Dempingen var en
   halv beskjed: den sa «dette er over» til noen som uansett ikke kunne gjøre
   noe med raden, og den gjorde teksten vanskeligere å lese samtidig. Nå
   avgjør statusbryteren om det ferdige står der i det hele tatt — og står det
   der, er det fordi noen ba om å se det, og da skal det være like lesbart som
   alt annet. Ordet «Ferdig» der billettknappen ville stått er beskjeden. */
/* INGEN FLATE PÅ RADEN SOM GÅR NÅ (Yoann, 2026-08-17: «we should not have purple
   bg on ongoing events»). Her sto
   `background: color-mix( in srgb, signal 20%, #fff )` — en lys fiolett vask over
   hele raden.

   Det som bærer «pågår nå» nå, og som gjorde det hele tiden: den fylte
   `.paagaar`-pillen med den pulserende prikken, og `.framdrift`-streken som sier
   hvor langt ut i forestillingen man er. To signaler på raden er nok; en flate
   under dem gjorde i praksis hele raden til en merkelapp, og på en dagliste der
   flere rader kan gå samtidig ble papiret i lista til lappeteppe.

   Fargelæren under er verdt å ta vare på selv om flaten er borte, for den gjelder
   neste gang noen skal tone noe med `signal` på papir:

     Scenelys er mørkere enn papiret i ALLE TRE kanalene — 109/63/135 mot
     250/243/227. Å blande litt av det inn i papir kan derfor bare trekke fargen
     nedover mot grått, aldri utover mot fiolett: det finnes ingen kanal igjen å
     løfte. Flaten så falmet ut, ikke i gang, og å skru prosenten opp gjorde den
     bare mørkere grå. Tonen måtte bygges fra `#fff` og ikke fra papir for at
     blåkanalen skulle få ligge over de to andre.

   `.slot.er-ferdig { opacity: 0.55 }` er borte av en beslektet grunn — se
   kommentaren over. */

/* ── Tomt resultat ─────────────────────────────────────────────────────── */

.program__ingenting {
	padding-block: var( --wp--preset--spacing--50 );
	text-align: center;
	color: var( --ink-soft );
}

/* Skjemaet er `hidden` fra PHP og slås på av JavaScript, som «vis hvor jeg er»
   i kartet. Uten JavaScript står hele programmet igjen, sortert på dag — det
   er ikke et halvt svar, det er svaret uten snarveien. Et filterpanel som ikke
   filtrerer er verre enn ingen. */
[hidden] { display: none !important; }

/* ==========================================================================
   ENKELTSIDEN — ett arrangement
   --------------------------------------------------------------------------
   Siden hver eneste programrad lenker til, og som fram til nå ikke fantes:
   uten `single-arrangement.html` falt et arrangement ned i temaets
   `index.html` og ble tegnet som et blogginnlegg med dato.

   Fire bånd, i den besøkendes spørsmålsrekkefølge:

     1. hodet     — hva er dette, når, hvor, hva koster det, hvor er knappen
     2. innholdet — redaktørens frie flate (wp:post-content)
     3. hvem      — portrettene, lånt fra `forteller`-postene
     4. mer       — resten av dagen, som vanlige programrader

   Registeret er programsidens: låvebrunt fullbredde-bånd, gull-byline,
   papirhvit antikva. Det er ikke gjenbruk for gjenbrukens skyld — hoppet fra
   en programrad til noe som ser ut som et annet nettsted er den overgangen
   som får folk til å trykke tilbake.

   Delingen mellom bånd 1 og 2 er plakatens: alt du trenger for å *bestemme
   deg* står på det mørke båndet, og papiret under er til å lese på. En
   besøkende som må rulle forbi tre avsnitt for å finne prisen har allerede
   begynt å lure på om siden vil selge henne noe.
   ========================================================================== */

/* Temaet har ingen global border-box-nullstilling (se den samme kommentaren
   over `.program`). Uten den legger nettleseren utfyllingen utenpå `max-width`
   og faktastripa stikker ut av spalten — synlig først over ~1300px, der
   max-width faktisk begynner å binde. Holdes innenfor de tre båndene med
   vilje: global ville flyttet på topp, bunn, kart og forside i samme sleng. */
.arrhode,
.arrhode *,
.arrhode *::before,
.arrhode *::after,
.arrfolk,
.arrfolk *,
.arrmer,
.arrmer * {
	box-sizing: border-box;
}

/* Båndene er `alignfull` i en `default`-main og bærer derfor rot-innrykket
   selv, mens stolpen inni trekkes inn til de samme 76rem som resten av
   nettstedet. Samme grep som `.program` og toppen: legger man innrykket inne
   i 76rem-boksen står innholdet én gutter lenger inn enn båndene rundt.

   `.arrangement` er med i lista av samme grunn som de tre andre: den er også en
   `default`-gruppe, og får derfor ikke kjernens `has-global-padding`. Se
   kommentaren ved lesespalten lenger ned for hvorfor den ikke er `constrained`. */
.arrhode,
.arrangement,
.arrfolk,
.arrmer {
	padding-inline: var( --wp--style--root--padding-right );
}

/* Egen `__inner`-stolpe og ikke automarger på hvert barn: `margin: 0` på h1-en
   er en forkortelse som nuller `margin-inline: auto` sammen med resten, og da
   legger overskriften seg flatt mot venstre kant mens stripa under står i
   spalten. Det skjedde i programhodet, og det er den samme boksen her. */
.arrhode__inner,
.arrfolk__inner,
.arrmer__inner {
	position: relative;
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

/* ── 1. Hodet ───────────────────────────────────────────────────────────── */

.arrhode {
	position: relative;
	overflow: hidden;
	padding-block: var( --wp--preset--spacing--45 ) var( --wp--preset--spacing--50 );
}

/* Den varme gløden fra hero-en, i det små — den samme som i programhodet, og
   like svak. Nede til venstre, under stripa, ikke bak brødteksten: alt som
   farger en bakgrunn ujevnt bak tekst er kontrast man ikke lenger vet verdien
   av. */
.arrhode::before {
	content: "";
	position: absolute;
	left: -8%;
	bottom: -55%;
	width: 46%;
	height: 115%;
	background: radial-gradient( closest-side,
		color-mix( in srgb, var( --wp--preset--color--gold ) 9%, transparent ),
		transparent );
	pointer-events: none;
}

.arrhode__inner {
	display: grid;
	gap: var( --wp--preset--spacing--35 );
}

/* Veien tilbake. Hver eneste programrad lenker hit, og en side uten vei
   tilbake til lista er en blindvei — særlig på telefon, der nettleserens egen
   tilbakeknapp er den eneste som finnes og ikke er synlig noe sted.

   Dempet og liten: den skal finnes uten å be om blikket, akkurat som «Les
   mer» i handlingsklynga. Pilen står i teksten og ikke som ::before, slik at
   den kan skjules for opplesning — «venstrepil Program 2026» er ikke en
   opplysning. */
.arrhode__tilbake {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--small );
}

.arrhode__tilbake a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	font-weight: 600;
	color: var( --papir-soft );
	transition: border-color 0.18s ease, color 0.18s ease;
}

.arrhode__tilbake a:hover {
	border-bottom-color: currentColor;
	color: var( --wp--preset--color--base );
}

.arrhode__tekst {
	display: grid;
	justify-items: start;
	gap: var( --wp--preset--spacing--25 );
}

/* Bylinen: «Lørdag 1. august · 15:00–16:00». Dato og klokkeslett, og ikke noe
   mer — «Dag 3» og «· i dag» sto her og er tatt bort (Yoann, 2026-08-17).

   Én farge på hele linja. Den er ett stykke informasjon, og å farge halvparten
   av den annerledes gjør at de to halvdelene leses som to ting. */
.arrhode .eyebrow { color: var( --wp--preset--color--gold ); }

.arrhode h1 {
	font-size: var( --wp--preset--font-size--xx-large );
	letter-spacing: 0.01em;
	max-width: 20ch;
	margin: 0;
}

/* Fortellerne, rett under tittelen. På en fortellerfestival er navnet halve
   avgjørelsen — den som leter etter Ben Haggarty skal se ham før hun ruller.
   Antikva og ikke sans: de er en forlengelse av tittelen, ikke metadata. */
.arrhode__fortellere {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.35;
	color: var( --wp--preset--color--gold );
}

/* Ingressen. Målt i tegn, ikke i spaltebredde: det er linjelengden som gjør
   den lesbar. Brødtekststørrelse og ikke `large` — den orienterer, og en
   ingress i halvstor grad holder deg igjen i toppen av en side hvis jobb er å
   få deg til å bestemme deg. */
.arrhode__om {
	max-width: 58ch;
	margin: 0;
	color: var( --papir-soft );
}

.arrhode .badges { margin-top: var( --wp--preset--spacing--20 ); }

/* Framdriftsstreken står bare når noe pågår, og da rett under «Pågår nå».

   `width` og ikke bare `max-width`: `.arrhode__tekst` er et grid med
   `justify-items: start`, så et blokkelement uten bredde krymper til
   innholdet sitt — og streken har ikke noe innhold. Symptomet var en enslig
   fiolett prikk der streken skulle vært. På programrada står den i et grid som
   strekker barna, og trengte derfor ingen bredde. */
.arrhode .framdrift { width: min( 18rem, 100% ); }

/* Kurs. Ingen mosekant her — på et fullbredde bånd ville tre piksler mose helt
   ute i skjermkanten vært pynt ingen kobler til noe. Merkelappen sier det i
   ord i stedet, i den samme mosegrønne som kanten på programrada. */
.badge--kurs {
	border-color: var( --wp--preset--color--moss );
	color: var( --wp--preset--color--moss );
}

.section--deep .badge--kurs {
	/* Mose på låvebrunt er to mørke farger oppå hverandre. Lysnes mot papir så
	   den fortsatt leses som den samme kursgrønnen. */
	border-color: color-mix( in srgb, var( --wp--preset--color--moss ) 52%, var( --wp--preset--color--base ) );
	color: color-mix( in srgb, var( --wp--preset--color--moss ) 42%, var( --wp--preset--color--base ) );
}

/* ── Bildet, og bildesporet ───────────────────────────────────────────────

   Bare arrangementets EGNE bilder havner her — se kommentaren i render.php. Et
   lånt portrett eller et bilde av spillestedet er riktig i en 112-pikslers rute
   på en programrad, men blåst opp til et sidebilde lyver det om hva
   forestillingen er.

   GALLERIET BOR HER (Yoann, 2026-08-17). Det sto som et eget låvebrunt bånd
   nede på siden i en time, og det var ett bånd for mye: en side som viser deg
   ett bilde øverst og de samme bildene igjen tre skjermer ned har to steder å se
   på det samme. Nå er hodets bilde sporets første bilde.

   RAMMEN ER DEN SAMME FOR HELE SPORET: 3:2 liggende over én spalte, 4:5 stående
   ved siden av teksten, `object-fit: cover` — nøyaktig den plakaten hodet hadde
   før galleriet fantes. Formatet flyttet bare fra figuren til FLATEN, fordi
   figuren nå også bærer miniatyrraden under.

   Et forsøk på `contain` på en matte sto her en kort stund, med den begrunnelsen
   at samlingen går fra 4:5 stående til 2:1 liggende og at en fast beskjæring
   viser 37 % av det bredeste bildet. Det stemmer — men i en 4:5 ramme ga
   `contain` nesten halve høyre spalte som tom matte, og et hode som er mest
   bakgrunn er verre enn et fotografi som er beskåret. Dette er hodets bilde ved
   siden av en tittel, ikke et arkiv å studere; beskjæringen er den samme
   beskjæringen det utvalgte bildet alltid har tålt.

   (Regelen ble oppdaget ved at `contain` ikke virket i det hele tatt:
   `.arrhode__bilde img` er ett klassenavn PLUSS en elementtype og slår
   `.arrgal__flate`, som er ett klassenavn. Spesifisiteten hadde rett.)
   ========================================================================== */

.arrhode__bilde {
	margin: 0;

	/* Tak på bredden så lenge båndet er én spalte. Stående over full
	   spaltebredde var 950 px høyt på en 820-piksels skjerm — en hel skjermhøyde
	   bilde mellom merkelappene og prisen, altså mellom «gjelder dette meg» og
	   «hva koster det». Taket gjelder ikke på telefon, der 30rem er bredere enn
	   skjermen og bildet dekker spalten som før. */
	max-width: 30rem;

	/* Rammen og skyggen bor på `.arrgal__scene` nå, ikke her: figuren strekker
	   seg rundt miniatyrraden også, og en avrundet kant rundt begge ville lagt
	   seg utenfor bildet. Avstanden ned til miniatyrene settes her. */
	display: grid;
	gap: 0.5rem;
}

@media ( min-width: 60rem ) {
	.arrhode__bilde { max-width: none; }
}

.arrgal__scene {
	position: relative;
	border-radius: var( --radius );
	overflow: hidden;
	box-shadow: 0 10px 30px rgba( 12, 7, 4, 0.35 );
}

/* ── Sporet ─────────────────────────────────────────────────────────────────

   En EKTE rulleboks: `overflow-x: auto` + `scroll-snap-type`. Sveipet på telefon
   er nettleserens egen rulling — treghet og gummikant og alt — så det finnes ikke
   én linje berøringskode i dette galleriet. */

.arrgal__spor {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;

	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;

	/* Rullefeltet skjules — sporet har miniatyrer, piler og selve sveipet til å
	   fortelle at det går an å bla. En grå strek under fotografiet er den fjerde
	   av de tre. */
	scrollbar-width: none;
}

.arrgal__spor::-webkit-scrollbar { display: none; }

/* Ingen `gap` i sporet, i motsetning til et vanlig rutenett: mellomrommet blir
   synlig som en stripe bakgrunn midt i sveipet, og et bilde som glir forbi et
   annet uten kant imellom leser som ett album. */
.arrgal__bilde {
	position: relative;
	flex: 0 0 100%;
	margin: 0;
	min-width: 0;
	scroll-snap-align: center;
	/* Et raskt sveip skal flytte ETT bilde, ikke fire. */
	scroll-snap-stop: always;
}

/* Rammen: liggende over én spalte, `cover` — se overskriftskommentaren for
   hvorfor det ikke er `contain`.

   Formatet står på FLATEN og ikke på figuren, og det er det som holder høyden
   fast mens du sveiper. Uten et format her ble hvert lysbilde like høyt som sitt
   eget fotografi, og hele hodet «pustet» i høyden fra stående til liggende — rett
   over faktastripa, som er det ene stedet på siden ingenting skal flytte seg. */
.arrgal__flate,
.arrgal__bilde .arrgal__bygg,
.arrgal__bilde video,
.arrgal__bilde .wp-video,
.arrgal__bilde .wp-video-shortcode {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: color-mix( in srgb, var( --wp--preset--color--base ) 6%, transparent );
}

@media ( min-width: 60rem ) {
	/* Stående når det står ved siden av teksten. Et liggende bilde i høyre
	   spalte konkurrerer med tittelen om bredden; stående står ved siden av den,
	   som en plakat. */
	.arrgal__flate,
	.arrgal__bilde .arrgal__bygg,
	.arrgal__bilde video,
	.arrgal__bilde .wp-video,
	.arrgal__bilde .wp-video-shortcode {
		aspect-ratio: 4 / 5;
	}
}

/* Innebygd film fra YouTube eller Vimeo. Kjernen gir markupen sin egen
   `.wp-block-embed`-innpakning bare i blokkeditoren — her kommer det en naken
   <iframe> med width/height fra leverandøren, og den må tvinges til å fylle
   flaten. */
.arrgal__bygg {
	position: relative;
	background: #000;
	overflow: hidden;
}

.arrgal__bygg iframe,
.arrgal__bygg embed,
.arrgal__bygg object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Bildeteksten ligger OPPÅ bildet, i et slør.

   Under det ville hvert lysbilde vært like høyt som sin egen tekst, og sporet
   hadde rykket opp og ned mens du sveipet — rett over faktastripa, som er det
   ene stedet på siden ingenting skal flytte seg. Den må være lesbar uten å
   trykke: halvparten av disse fotografiene er fra tidligere utgaver, og «Fra
   2024-utgaven» er en opplysning, ikke pynt. */
.arrgal__tekst {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 1.8rem 0.85rem 0.6rem;
	background: linear-gradient( transparent, rgba( 12, 8, 6, 0.85 ) );
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.35;
	color: var( --wp--preset--color--base );
	pointer-events: none;
}

/* ── Pilene ─────────────────────────────────────────────────────────────────

   Skjult i markupen og slås på av view.js — en knapp som ikke gjør noe uten
   JavaScript skal ikke stå der uten JavaScript.

   `top: 50%` virker her, i motsetning til i det gamle båndet: scenen inneholder
   bare flaten nå, bildeteksten ligger oppå den. */
.arrgal__pil {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	transform: translateY( -50% );
	padding: 0;
	border: 1px solid var( --papir-rule );
	border-radius: 50%;
	background: rgba( 12, 8, 6, 0.6 );
	color: var( --wp--preset--color--base );
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.16s ease, opacity 0.16s ease;
}

.arrgal__pil--forrige { left: 0.6rem; }
.arrgal__pil--neste { right: 0.6rem; }

.arrgal__pil:hover:not( :disabled ),
.arrgal__pil:focus-visible {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--deep );
}

/* Avslått og ikke borte. En pil som forsvinner i enden av rekka flytter den
   andre pila, og da bommer du på den. */
.arrgal__pil:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Piler er en musehandling. På berøring er sveipet både raskere og det du
   allerede gjør, og to knapper oppå fotografiet er to steder å treffe feil.

   Bredden står ved siden av `hover`, ikke i stedet for den: i et smalt
   nettleservindu på en maskin med mus er `hover: hover` sant, og der dekket de to
   pilene en tredjedel av et bilde på 335 px. To spørsmål, to grunner. */
@media ( hover: none ), ( max-width: 34rem ) {
	.arrgal__pil { display: none; }
}

/* ── Miniatyrene ────────────────────────────────────────────────────────────

   Ankere, ikke knapper: `href="#…"` ruller sporet til riktig element helt uten
   JavaScript, fordi elementene ER sporets egne barn.

   Kvadratiske (Yoann, 2026-08-17), og det passer kilden: `hff-program` er
   224 × 224 hardt beskåret og fins fra før, så en kvadratisk rute er den ENE
   formen som ikke beskjærer miniatyren en gang til.

   Raden ruller selv når det er mange. Ingen omslag til flere linjer: i en spalte
   på 24rem blir en miniatyrrad på to linjer like høy som faktastripa ved siden
   av, og hodet mister formen sin. */
.arrgal__mini {
	display: flex;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.arrgal__mini::-webkit-scrollbar { display: none; }

.arrgal__mini li { flex: 0 0 auto; }

.arrgal__minirute {
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 2px;
	overflow: hidden;
	line-height: 0;
	/* Kanten står der hele tiden, gjennomsiktig — ellers hopper raden 2 px når
	   markeringen flytter seg. */
	border: 2px solid transparent;
	opacity: 0.55;
	transition: opacity 0.16s ease, border-color 0.16s ease;
}

.arrgal__minirute img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Beskjæringen tar ansikter, ikke midtpunkter — samme forskyvning som
	   portrettene ellers på nettstedet. */
	object-position: center 35%;
	display: block;
}

.arrgal__minirute:hover,
.arrgal__minirute:focus-visible { opacity: 1; }

/* Gull og full metning på den som vises. To signaler og ikke ett: en ramme
   alene forsvinner mot et lyst fotografi, og full metning alene forsvinner på
   en rad der du nettopp holdt musa over noe. */
.arrgal__minirute[ aria-current ] {
	opacity: 1;
	border-color: var( --wp--preset--color--gold );
}

.arrgal__minirute:focus-visible {
	outline: 2px solid var( --wp--preset--color--gold );
	outline-offset: 2px;
}

/* Film har ingen miniatyr å hente ut. Et spilltegn på flat grunn sier hva det
   er; en tom grå rute ville sett ut som et bilde som ikke lastet. */
.arrgal__minifilm {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: color-mix( in srgb, var( --wp--preset--color--base ) 12%, transparent );
	color: var( --wp--preset--color--base );
	font-size: 0.8rem;
	line-height: 1;
}

/* Myk rulling er pynt, og pynt skal kunne slås av. Sporet ruller fortsatt — det
   hopper bare rett dit. */
@media ( prefers-reduced-motion: reduce ) {
	.arrgal__spor,
	.arrgal__mini { scroll-behavior: auto; }

	.arrgal__minirute,
	.arrgal__pil { transition: none; }
}

/* ── Faktastripa ────────────────────────────────────────────────────────── */

.arrfakta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	/* 1rem og ikke 1,5. Når stripa brekker — og den brekker så snart det står et
	   bilde ved siden av — er denne avstanden hullet mellom klokkeslettet og
	   knappene, og den leste som at noe manglet imellom. */
	gap: var( --wp--preset--spacing--30 );
	padding-top: var( --wp--preset--spacing--30 );
	border-top: 1px solid var( --papir-rule );
}

.arrfakta__liste {
	display: flex;
	flex-wrap: wrap;
	/* 2rem og ikke 3 mellom kolonnene: med tre rader og et bilde ved siden av
	   er 44rem alt venstre spalte har, og på 3rem falt «Pris» ned på en linje
	   for seg selv på en 1280-skjerm. Prisen er den ene av de tre man ser etter,
	   og en pris under en strek leses som en fotnote til stedet. */
	gap: var( --wp--preset--spacing--25 ) var( --wp--preset--spacing--40 );
	margin: 0;

	/* Radene skal måle seg selv, ikke strekkes til den høyeste. «Pris» brekker
	   over to linjer så snart den sier både «I festivalpasset» og en kroneverdi,
	   og med strekk fikk «Når» tjue piksler tomrom under klokkeslettet for å
	   holde følge med den. Tiden er den korteste opplysningen i stripa; den skal
	   få lov til å være kort. */
	align-items: start;
}

/* `flex: 1 1 12rem` og ikke naturlige bredder. Med naturlige bredder avgjorde
   summen av tre tilfeldige tekstlengder om «Pris» ble stående på linja eller
   falt ned under en strek — og den falt for ett stedsnavn med et forbehold
   under, altså for data ingen kontrollerer. Nå deler de tre plassen likt når
   det er plass til alle tre, og brekker i samlet flokk når det ikke er det.

   Prisen er den ene av de tre man ser etter, og en pris alene under en strek
   leses som en fotnote til stedet.

   `max-width` i tegn og ikke i piksler: det er anslags-setningen som setter
   bredden, ikke spalten. */
.arrfakta__rad {
	display: grid;
	gap: 0.15rem;
	flex: 1 1 12rem;
	max-width: 26ch;
}

.arrfakta__rad dt {
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --papir-faint );
}

/* Brødtekststørrelse, halvfet — ikke `large`. På en laptop står stripa i en
   spalte på rundt 550 px ved siden av bildet, og tre verdier i 20 px brakk
   alle tre over to linjer. Størrelsen løftes først når det faktisk er plass
   til den, se under. Fete tall i brødtekstgrad leser fortsatt som fakta og
   ikke som prosa; det er `dt`-en over som gjør den jobben. */
.arrfakta__rad dd {
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

@media ( min-width: 68rem ) {
	.arrfakta__rad dd {
		font-size: var( --wp--preset--font-size--large );
		font-weight: 600;
		line-height: 1.25;
	}
}

/* Undertekstene: stedets ingress og anslags-forbeholdet. Egen linje under
   navnet, ikke en parentes etter det — de svarer på noe annet enn «hvor». */
.arrfakta__rad dd small {
	display: block;
	margin-top: 0.2rem;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.45;
	color: var( --papir-faint );
}

/* Kartet innrømmer hvilke pin-er som er gjetninger, og siden må gjøre det
   samme. Gull og ikke dempet papir: dette er et forbehold, ikke en fotnote. */
.arrfakta__anslag { color: var( --wp--preset--color--gold ) !important; }

/* Programnummeret sto her, i den samme røde sirkelen kartet tegner pin-ene med.
   Tatt bort (Yoann, 2026-08-17): på et kart er tallet en nøkkel — det binder
   pin-en til lista og til det trykte programmet — men på én arrangementsside
   finnes det ingenting å binde det til. Da er det bare en rød skive foran
   stedsnavnet, i den ene fargen nettstedet ellers reserverer for at noe koster
   penger. Nummeret står fortsatt på kartet, der det gjør jobben sin. */

/* Knappene står nederst til høyre i stripa, i flukt med prisen. `.btn--map` og
   `.btn--ticket` har allerede sine varianter for mørke bånd gjennom
   `.section--deep`, så det er ikke noe å skrive her. `--small` er droppet:
   dette er sidens hovedhandling, ikke én av ti rader. */
.arrfakta .handlinger { gap: 0.6rem; }

.arrfakta .handlinger .btn--small {
	padding: 0.7rem 1.3rem;
	font-size: var( --wp--preset--font-size--small );
}

/* ── Hodet på bred skjerm ───────────────────────────────────────────────── */

@media ( min-width: 60rem ) {
	.arrhode--bilde .arrhode__inner {
		grid-template-columns: minmax( 0, 1fr ) 24rem;
		column-gap: var( --wp--preset--spacing--45 );
	}

	/* Eksplisitte spor, ikke automatisk flyt. Bildet spenner over begge radene
	   i høyre spalte slik at venstre spalte kan leses ovenfra og ned —
	   tittel, så fakta — mens bildet står som en plakat ved siden av. */
	.arrhode--bilde .arrhode__tilbake { grid-column: 1 / -1; grid-row: 1; }
	.arrhode--bilde .arrhode__tekst   { grid-column: 1; grid-row: 2; }
	.arrhode--bilde .arrhode__bilde   { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
	.arrhode--bilde .arrfakta         { grid-column: 1; grid-row: 3; }
}

/* Under 44rem stables knappene under fakta i stedet for å stå ved siden av.
   To knapper og tre faktarader på 390px blir én knapp per linje uansett — da
   er det bedre at de er like brede enn at de er ulikt brekt. */
@media ( max-width: 44rem ) {
	.arrfakta { flex-direction: column; align-items: stretch; }
	.arrfakta .handlinger { flex-direction: column; align-items: stretch; }
	.arrhode h1 { max-width: none; }
}

/* ── 2. Redaktørens side ────────────────────────────────────────────────── */

/* Vanlig `wp:post-content` på papir. Ingen egen editor og ingen felter å lære:
   redaktøren trykker Rediger og får den samme blokkredigereren som på en
   hvilken som helst side.

   Båndet klapper sammen når arrangementet ikke har noe innhold ennå. Ti av ti
   arrangementer står slik i dag, og en fire centimeter høy tom stripe mellom
   det mørke hodet og fortellerne leses som at noe er ødelagt — ikke som at
   ingen har skrevet noe. Utfyllingen nulles i stedet for `display: none` fordi
   båndet fortsatt skal kunne velges i nettstedsredigereren. */
.arrangement:not( :has( .wp-block-post-content > * ) ) {
	padding-block: 0;
}

/* Lesespalten står i flukt med resten av siden, ikke sentrert i båndet.

   Hver eneste overskrift over og under — tittelen i hodet, «Hvem du møter»,
   «Ellers søndag» — begynner i sidens venstrekant. En sentrert brødtekst midt i
   det leses som at den hører til noe annet, og forskyvningen var over 250 px på
   en 1280-skjerm.

   Derfor er verken gruppa eller `wp:post-content` `constrained`. Kjernens
   constrained-oppsett skriver `margin-left: auto !important` på hvert barn — en
   overstyring i stilarket kan altså ikke slå den uten sitt eget `!important`,
   og et `!important` for å oppheve et `!important` er et spor ingen finner
   tilbake til. Uten oppsettet finnes regelen ikke, og bredden settes her.

   Spalten er `--content-size` (42rem) og ikke en verdi funnet på: det er den
   samme linjelengden en vanlig side har, bare venstrestilt. */
.arrangement .wp-block-post-content {
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

.arrangement .wp-block-post-content > * {
	max-width: var( --wp--style--global--content-size );
}

/* Redaktørens uttrykte valg vinner. Legger hun inn noe bredt — et bilde, en
   kolonneseksjon — skal det få være bredt; da er 42rem en spalte hun ikke ba om. */
.arrangement .wp-block-post-content > .alignwide,
.arrangement .wp-block-post-content > .alignfull {
	max-width: none;
}

/* Sitatet. Kjernens blokk kommer uten utseende, og temaet har aldri hatt noe
   for den — den rendret som et innrykket avsnitt, altså som et avsnitt noen
   hadde tabbet inn ved en feil. Den står her og ikke globalt fordi det er her
   redaktøren faktisk skriver prosa; en global regel ville truffet forsiden og
   programsiden i samme sleng, og de har ikke bedt om noe.

   Strek og ikke anførselstegn: tegnene finnes ikke i to former som ser like ut
   på tvers av de fem skriftene i stakken, og de kommer i tillegg til dem
   redaktøren selv skriver. Streken er mosegrønn — den samme kanten kursradene
   har, altså nettstedets ene «dette er en annen slags ting»-markør.

   `.sitat` er det andre stedet. Om-siden er den andre siden med ekte prosa, og
   den ba om det samme utseendet — så selektoren utvides i stedet for at reglene
   skrives opp en gang til seks linjer lenger ned. En klasse og ikke en
   sidescope: `body_class()` skriver ikke sideslugen, bare `page-id-88`, og en
   regel som henger på en post-ID er et spor ingen finner tilbake til. */
.arrangement .wp-block-quote,
.wp-block-quote.sitat {
	margin-block: var( --wp--preset--spacing--35 );
	padding-left: var( --wp--preset--spacing--35 );
	border-left: 3px solid var( --wp--preset--color--moss );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.4;
}

.arrangement .wp-block-quote p,
.wp-block-quote.sitat p { margin-block: 0.4em; }

.arrangement .wp-block-quote cite,
.wp-block-quote.sitat cite {
	display: block;
	margin-top: 0.6em;
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--small );
	font-style: normal;
	color: var( --ink-soft );
}

/* ── 3. Hvem du møter ───────────────────────────────────────────────────── */

/* På `shade` og ikke på låvebrunt. Seksjonen sto mørkt en stund — en rad
   portretter på mørkt leser som en rollebesetning — men den ligger rett under
   hodet, og hodet er låvebrunt selv. På et arrangement uten brødtekst klapper
   båndet imellom sammen (se `.arrangement` over), og de to mørke feltene smeltet
   til ett langt brunt felt med to overskrifter i.

   Halve grunnen til at `forteller` er en egen innholdstype står her: portrettet,
   bioen og lenkene ut settes på personen én gang og lånes av hvert arrangement
   hun er med på. Ben Haggarty opptrer tre ganger i 2026. */

/* Strammere enn `--section-y`. Båndet har ingen brødtekst å puste rundt — det
   er en overskrift og en rad ansikter — og på en forestilling med én forteller
   uten portrett ble seks centimeter flate over og under ett navn. Det leses som
   at seksjonen mangler noe, ikke som luft. */
.arrfolk {
	padding-block: var( --wp--preset--spacing--50 );
}

.arrfolk .section-head { margin-bottom: var( --wp--preset--spacing--35 ); }

.arrfolk__liste {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 19rem, 1fr ) );
	gap: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--45 );
}

.person {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0 var( --wp--preset--spacing--30 );
	align-items: start;
}

/* Har NOEN i lista et portrett, holdes spalten av til alle.

   Regelen «ingen plassholder» gjelder fortsatt — det tegnes ingen grå sirkel,
   bare tomrom. Men den regelen ble laget for en liste der enten alle eller
   ingen har bilde, og virkeligheten er blandet: av de fire på
   åpningsforestillingen har én portrett. Uten dette begynte de tre andre
   navnene 5,5 rem lenger til venstre enn det fjerde, og raden så ut som et
   oppsett som hadde falt sammen.

   Uten et eneste portrett i lista faller spalten bort helt, og navnene står
   inntil kanten som før. */
.arrfolk__liste:has( .person__portrett ) .person {
	grid-template-columns: 5.5rem minmax( 0, 1fr );
}

.arrfolk__liste:has( .person__portrett ) .person__tekst {
	grid-column: 2;
}

/* Ingen plassholder når portrettet mangler — det tegnes ingenting, spalten står
   bare tom. En grå sirkel med et hode i opplyser om databasen, ikke om
   fortelleren. Samme regel som bildet på en programrad. */
.person__portrett {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	overflow: hidden;
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 8%, transparent );
}

.person__portrett img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Beskjæringen tar ansikter, ikke midtpunkter. Samme forskyvning som
	   `.slot__bilde--forteller`. */
	object-position: center 28%;
	display: block;
}

.person h3 {
	margin: 0;
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.2;
}

/* Landkoden slik plakaten trykker den. Sans og sperret, så den leses som en
   opplysning ved siden av navnet og ikke som en del av det. */
.person__land {
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var( --ink-faint );
	white-space: nowrap;
}

/* Den korte omtalen. Rik tekst fra `hff_kort_om`, så det er et helt lite
   tekstfelt og ikke ett avsnitt — den kan holde to avsnitt, en lenke og en
   punktliste hvis redaktøren vil. */
.person__om {
	max-width: 46ch;
	margin-top: 0.4rem;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
	color: var( --ink-soft );
}

.person__om > :first-child { margin-top: 0; }
.person__om > :last-child { margin-bottom: 0; }
.person__om p { margin-block: 0.5em; }

/* Lenker inne i omtalen skal se ut som lenker, men ikke som knapper. Scenelys
   er temaets lenkefarge og står uendret her — det er en lenke redaktøren har
   valgt å sette, i motsetning til ikonradene under. */
.person__om a { color: var( --wp--preset--color--signal ); }

/* ── Lenkene ut ────────────────────────────────────────────────────────────
   Nettsted, Instagram, Facebook, YouTube. En forteller som opptrer i august vil
   at du skal finne henne igjen i november, og hun bor ikke på dette nettstedet.

   Ikoner og ikke ord: fire navn under hvert portrett er fire tekstlinjer som
   konkurrerer med bioen, og merkene kjennes igjen raskere enn de leses. Navnet
   står i markupen for opplesning — se `.skjult`.

   Ekte knapper å se på: papirfylt sirkel med hårstrek rundt, blekk inni. Første
   utkast var bare et dempet ikon uten flate, og det forsvant — mot `shade` var
   fire grå streker under et navn noe man måtte lete etter for å finne. Det er
   ikke riktig avveining her: for en forteller som skal finnes igjen i november
   ER lenka ut halve grunnen til at hun står på siden.

   Blekk og ikke scenelys. Fylt flate holder dem synlige; en farge i tillegg
   ville gjort fire piller ved siden av hvert ansikt til det mest fargede på
   båndet, og rødt er uansett reservert for det som koster penger. */
.sosial {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.sosial__lenke {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var( --rule-strong );
	border-radius: 50%;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
	transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

/* Snus helt ved berøring, som `.filtre__merbryter` og de andre pillene på
   nettstedet — ikke bare et hakk mørkere, som leses som at ingenting skjedde. */
.sosial__lenke:hover,
.sosial__lenke:focus-visible {
	background: var( --wp--preset--color--contrast );
	border-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
}

/* Trefflaten er hele sirkelen og ikke bare streken: 20 px er under alle
   anbefalte minstemål for en fingertupp, og fire av dem på rad er fire sjanser
   til å bomme. 2,5 rem = 40 px, som er målet. */
.sosial__ikon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* På et mørkt bånd må de snus med flaten. Seksjonen ligger på `shade` i dag,
   men regelen står her så en flytting ikke gir usynlige ikoner. */
.section--deep .sosial__lenke {
	border-color: var( --papir-rule );
	background: transparent;
	color: var( --wp--preset--color--base );
}

.section--deep .sosial__lenke:hover,
.section--deep .sosial__lenke:focus-visible {
	background: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--deep );
}

/* «m.fl.» er en egenskap ved lista og ikke ved en person, så den står under
   den — ikke som et kort uten ansikt. */
.arrfolk__mfl {
	margin: var( --wp--preset--spacing--35 ) 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --ink-faint );
}

@media ( max-width: 30rem ) {
	.person__portrett { width: 4rem; height: 4rem; }
}

/* ── 4. Resten av dagen ─────────────────────────────────────────────────── */

/* Dagen, ikke «lignende arrangementer». Det er ikke sjangeren som avgjør hva
   du gjør videre — det er at du allerede har bestemt deg for å reise ut på øya
   torsdag, og at det går fire andre ting den kvelden.

   Radene er de samme `hff_arrangement_kort()` tegner på programsiden og
   forsiden, og trenger ingen egne regler her. Det er hele poenget med at det
   bare finnes én rad. */
.arrmer .section-head { margin-bottom: var( --wp--preset--spacing--35 ); }

/* ==========================================================================
   BUTIKKEN
   ==========================================================================

   Butikken er bånd, ikke et rutenett med filtre over.

   Programsiden har fem filterakser fordi de ti radene der er sammenlignbare:
   alle er en kveld på øya, og spørsmålet er hvilken. Her er de ikke det. Et
   krus konkurrerer ikke med en bygdebok, og en chip-rad mellom dem er et filter
   ingen har bruk for — den ville bare gjort fire tydelige hyller om til én
   uklar liste med en databaseskjerm på toppen. Fire overskrifter er svaret når
   kategoriene er få og forskjellige.

   Rekkefølgen nedover er stigende og så fallende forpliktelse: passet (hele
   helga, én avgjørelse), billettene (én kveld), hyllene (noe å ta med hjem).
   Se toppkommentaren i blocks/butikk/render.php.

   Nullstillingen under er den samme som `.program` har, av den samme grunnen:
   flatene her setter både utfylling og max-width, og uten `border-box` blir en
   76rem-spalte med 2,5rem utfylling 81rem bred og stikker ut på hver side.
   Holdt innenfor `.butikk` med vilje — global ville flyttet på topp, bunn og
   forside i samme slengen.
   ========================================================================== */

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

/* Utfyllingen ligger på hvert bånd og ikke på omslaget, fordi hvert bånd her er
   fullbredde med sin egen flate. På programsiden er det motsatt — der er bare
   hodet fullbredde, og resten står i spalten — og derfor bærer `.program`
   utfyllingen selv og `.programhode` bryter seg ut igjen med negativ marg. Den
   dansen er ikke nødvendig når alle båndene er fullbredde. */
.butikk > * {
	padding-inline: var( --wp--style--root--padding-right );
}

/* Stolpen inni hvert bånd. Egen boks og ikke automarger på hvert barn:
   `margin: 0` på en overskrift er en forkortelse som nuller `margin-inline:
   auto` sammen med resten, og da legger overskriften seg flatt mot venstre kant
   mens innholdet under står i spalten. Det skjedde i programhodet og i
   arrangementshodet; dette er den samme boksen for tredje gang. */
.butikkhode__inner,
.butikkbolk__inner,
.passet__inner {
	position: relative;
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
}

/* ── Hodet ────────────────────────────────────────────────────────────────
   Samme register som programhodet: låvebrunt bånd, gull-byline, papirhvit
   antikva. Butikken skal kjennes som samme nettsted i det du kommer inn på
   den. Ingen hero og ingen fotografi — bildene i hyllene under er varene, og et
   bilde her ville konkurrert med alle sammen. */

.butikkhode {
	position: relative;
	overflow: hidden;
	padding-block: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--45 );
	background: var( --wp--preset--color--deep );
	color: var( --wp--preset--color--base );
}

.butikkhode__inner {
	display: grid;
	gap: var( --wp--preset--spacing--25 );
}

/* Gull, som hero-ens og programhodets byline. Mose ville forsvunnet i
   låvebrunt. */
.butikkhode .eyebrow { color: var( --wp--preset--color--gold ); }

.butikkhode h1 {
	font-size: var( --wp--preset--font-size--xx-large );
	letter-spacing: 0.01em;
	margin: 0;
	max-width: 30ch;
}

/* Dempet papir, ikke dempet blekk. `--ink-soft` er en blanding av *blekk* og
   gir mørkt på mørkt her — nøyaktig feilen som ble rettet i programhodets
   ingress. Ugjennomsiktig blanding og ikke alfa, fordi gløden under ligger bak
   deler av linja og en alfaverdi ville gitt forskjellig kontrast på tvers av
   den. Måler 8,7:1 mot låvebrunt. */
.butikkhode__ingress {
	max-width: 56ch;
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
	color: color-mix( in srgb, var( --wp--preset--color--base ) 74%, var( --wp--preset--color--deep ) );
}

/* Den varme gløden fra hero-en, i det små og like svak som i programhodet.
   Nede til venstre, under ingressen — alt som farger en bakgrunn ujevnt bak
   brødtekst er kontrast man ikke lenger vet verdien av. */
.butikkhode::before {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -60%;
	width: 48%;
	height: 120%;
	background: radial-gradient( closest-side,
		color-mix( in srgb, var( --wp--preset--color--gold ) 9%, transparent ),
		transparent );
	pointer-events: none;
}

/* Veien tilbake, på en hylle. Samme rolle og samme demping som
   `.arrhode__tilbake`: den skal finnes uten å be om blikket. Står der
   øyenbrynet står på butikkforsiden, fordi det er den samme linja — på
   forsiden er den en etikett, her er den en vei ut. */
.butikkhode__tilbake {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
}

.butikkhode__tilbake a {
	color: color-mix( in srgb, var( --wp--preset--color--base ) 72%, var( --wp--preset--color--deep ) );
	text-decoration: none;
}

.butikkhode__tilbake a::before {
	content: "← ";
}

.butikkhode__tilbake a:hover {
	color: var( --wp--preset--color--base );
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* ── Passet ───────────────────────────────────────────────────────────────
   Egen flate og ikke et varekort i rutenettet. Passet er den ene varen som
   ikke konkurrerer med de andre — det er ikke *et av* tilbudene, det er
   inngangen til hele helga — og et pass i et rutenett mellom et krus og en bok
   er et pass ingen ser.

   Låvebrunt, som programsidens billettavslutning: den mørke flaten er
   nettstedets «her skjer det noe som koster penger». At den ligger rett under
   det låvebrune hodet er med vilje — de to leses som ett bånd med en linje
   mellom, og skillet er hårstreken. To lyse bånd i mellom ville gjort passet
   til en annonse langt nede på siden. */

.passet {
	border-top: 1px solid var( --papir-rule );
}

.passet__inner {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	align-items: center;
}

@media ( min-width: 60rem ) {
	/* Teksten bredest. Passet selges av setningen «adgang til alle
	   forestillinger gjennom hele helgen», ikke av bildet — bildet er der for at
	   båndet ikke skal være en tekstblokk. */
	.passet__inner {
		grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr );
		gap: var( --wp--preset--spacing--50 );
	}
}

.passet__tekst {
	display: grid;
	gap: var( --wp--preset--spacing--25 );
}

.passet h2 {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-large );
}

.passet__om {
	margin: 0;
	max-width: 52ch;
	color: var( --papir-soft );
}

/* Prisen i display-antikva og stor. Den er ikke en opplysning ved siden av
   knappen — den ER avgjørelsen, og på det ene båndet på nettstedet der ett tall
   avgjør alt, skal tallet være det nest største etter overskriften. På
   varekortene under står prisen i brødtekst, fordi der er den én av fire ting
   du sammenligner. */
.passet__pris {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.1;
	color: var( --wp--preset--color--gold );

	/* Loddrette sifre, tvunget. Display-serifen er Hoefler Text, og den setter
	   gamle stilsifre som standard: ettallet har x-høyde og ingen fot, så «1 490
	   kr» leses som «ı 490 kr» — en prikkløs i foran et tresifret tall. Det er
	   riktig og pent midt i en setning, og feil i det største tallet på siden.
	   Klokkeslettene i programmet har ikke problemet, fordi et døgn ikke har noe
	   siffer foran seg som må bære vekten alene. */
	font-variant-numeric: lining-nums;
}

.passet .handlinger { margin-top: var( --wp--preset--spacing--20 ); }

/* Bildet er dekor her, ikke en vare som skal inspiseres, så det beskjæres hardt
   inn i flaten i stedet for å stå i en ramme med `contain` som varekortene
   gjør. Samme avveining som `.arrhode__bilde`: `contain` ville lagt halve
   spalten som tom matte, og et bånd som er mest bakgrunn er verre enn et
   fotografi som er beskåret. */
.passet__bilde {
	margin: 0;
	border-radius: var( --radius );
	overflow: hidden;
	border: 1px solid var( --papir-rule );
}

/* 4:3 også på brede skjermer. Sto på 1:1 der, og et kvadratisk bilde på 28rem er
   nesten 600 px høyt mot en tekstspalte på under 300 — med `align-items: center`
   ble båndet dobbelt så høyt som innholdet sitt, og halvparten av det var tomt
   låvebrunt til venstre for et fotografi. Bildet skal følge tekstens høyde, ikke
   sette sin egen. */
.passet__bilde img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ── Hyllene ──────────────────────────────────────────────────────────────
   Ett bånd per kategori. Papir og papir-ett-hakk om hverandre, slik at to
   hyller etter hverandre ikke smelter til én lang liste — samme jobb som
   hårstreken gjør mellom to programrader, men på en flate som må bære fire
   bilder i bredden.

   `:nth-of-type` og ikke en klasse fra PHP: hvilken hylle som er annenhver er
   et spørsmål om hvor mange hyller som endte opp med å ha noe i seg, og det vet
   bare den ferdige siden. Med en klasse fra PHP ville en tom hylle i midten
   snudd stripene og gitt to like flater etter hverandre. */

.butikkbolk:nth-of-type( even ) {
	background: var( --wp--preset--color--shade );
}

/* Overskrift til venstre, ingressen under den. Ingen «se alt»-lenke til høyre —
   båndet viser hele hylla — så dette er ikke `.section-head`s vanlige to-kolonne
   rad, bare en tekststolpe. Flex likevel, og ikke bare margin, fordi
   `.section-head__text` setter `gap` og den trenger en flex- eller
   grid-forelder for å bety noe. */
.butikkbolk .section-head {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 );
	align-items: flex-end;
	justify-content: space-between;
}

.butikkbolk .section-head__text {
	display: flex;
	flex-direction: column;
}

.butikkbolk__om {
	margin: 0;
	max-width: 56ch;
	color: var( --ink-soft );
	font-size: var( --wp--preset--font-size--small );
}

/* ── Varekortene ──────────────────────────────────────────────────────────
   `auto-fill` og ikke et fast antall spalter: hyllene har mellom én og fem
   varer, og en `repeat(4, 1fr)` med tre varer i gir en tom fjerdedel som leses
   som at noe mangler. Med `auto-fill` fyller tre varer bredden og den fjerde
   kolonnen finnes ikke.

   15,5rem er valgt av bokomslaget: under det blir en ryggtittel i display-
   antikva to ord per linje. Fire spalter i 76rem-stolpen, én på telefon. */

.varer {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15.5rem, 1fr ) );
	gap: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--35 );
}

.vare {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: var( --wp--preset--spacing--25 );
}

/* Rammen rundt motivet.

   `contain` og ikke `cover`, som er det motsatte valget av det `.arrhode__bilde`
   og `.slot__bilde` tar — og forskjellen er hva bildet ER. En programrad viser
   et fotografi fra en forestilling; der er beskjæringen gratis, fordi et utsnitt
   av et publikum fortsatt er et publikum. Butikken selger flate, trykte ting i
   fire forskjellige format: et liggende akvarellkart, tre stående bokrygger, et
   kvadratisk krus. En hard kvadratisk beskjæring tar toppen og bunnen av kartet
   og halve boktittelen — altså nøyaktig det man skal se på for å bestemme seg.

   Så: rammen har samme størrelse for alle, motivet beholder sin egen form, og
   matten rundt er papir ett hakk ned. Det ser ut som et trykk som ligger på et
   ark, som er omtrent hva det er. */
.vare__bilde {
	position: relative;

	/* Ett uttalt spor, ikke `place-items: center` på et implisitt.
	   Se kommentaren over `.vare__bilde img` — dette er halve den fiksen. */
	display: grid;
	grid-template: 1fr / 1fr;
	aspect-ratio: 4 / 5;
	padding: var( --wp--preset--spacing--30 );
	border: 1px solid var( --rule );
	border-radius: var( --radius );
	background: var( --wp--preset--color--shade );
	overflow: hidden;

	/* Rammen er `aria-hidden` dekor som lenker samme sted som tittelen under.
	   Uten dette arver den scenelys og understrek fra lenkeregelen i theme.json,
	   og tittelflaten — som ER tekst inne i den lenken — kom ut som en fiolett,
	   understreket boktittel. Fargen settes her og ikke bare på flaten, slik at
	   den også gjelder den dagen noe annet enn en tittel skal stå i ruten. */
	color: inherit;
	text-decoration: none;
}

/* På det tonede båndet må matten hentes tilbake til papir, ellers er rammen og
   flaten samme farge og motivet flyter. Samme grep som filterpanelets chips på
   den tonede seksjonen. */
.butikkbolk:nth-of-type( even ) .vare__bilde {
	background: var( --wp--preset--color--base );
}

/* Bildet fyller ruten og letterbokses med `object-fit`. Det tok tre forsøk, og
   grunnen er verdt å skrive ned, fordi den ser ut som en bildefeil og ikke som en
   layout-feil.

   Motivene har fire forskjellige format — et liggende akvarellkart, stående
   bokrygger, et kvadratisk krus — og ruten er 4:5 for alle. Så bildet må måle seg
   mot rutens høyde, og rutens høyde kommer fra `aspect-ratio`, altså fra bredden.

     1. `max-height: 100%` — droppes stille. Bildet blir bare bredde-begrenset og
        får sin egen forholdsmessige høyde.

     2. `height: 100%` — virket på åtte av ni motiver. Grunnen til at det ene
        falt ut er en syklus: med `place-items: center` strekkes ikke elementet,
        så det implisitte radsporet måles av innholdet — samtidig som innholdets
        høyde skulle måles av sporet. Nettleseren bryter sirkelen ved å lese
        `height: 100%` som `auto`. For de åtte lave motivene ble sporet likevel
        klemt av rutens egen bestemte høyde og prosenten løste seg; for det ene
        motivet som var høyere enn 4:5 vokste sporet forbi, og sirkelen brøt.
        «Virker på åtte av ni» er verre enn «virker ikke»: det leses som at det
        er noe galt med det ene bildet.

     3. `position: absolute; inset: <matte>` — virker ikke på et *erstattet*
        element. `width: auto` på et bilde løses til bildets egen bredde, ikke
        til kantene, så oppsettet blir overbestemt og en kant ignoreres.

   Løsningen er å fjerne syklusen i stedet for å jobbe rundt den: ruten får ett
   uttalt `1fr`-spor, og bildet strekkes i det. Et `1fr`-spor i en beholder med
   bestemt høyde er selv bestemt, og da har prosenten noe å løses mot.
   `min-width`/`min-height: 0` fordi et rutenett-element ellers har `auto` som
   minstemål — altså minst innholdets egen størrelse, som er nøyaktig den
   grensen vi vil under.

   Symptomet gjennom alle tre, verdt å kjenne igjen: `overflow: hidden` klipper
   pent, så det ser ikke ut som noe stikker ut. Det ser ut som et bilde som viser
   et vannrett belte ut av midten — og på t-skjortemotivet var beltet himmelen
   over trærne, altså en nesten tom rute. Målt: ruten 286 × 358, bildet 252 × 387.

   `filter: drop-shadow` og ikke `box-shadow`, som er hele grunnen til at
   `contain` går an her: `box-shadow` følger elementets boks, som nå er hele
   ruten, og ville tegnet en skygge rundt matten i stedet for rundt motivet.
   `drop-shadow` følger det som faktisk males — og med `contain` males bare
   motivet. Skyggen er det som gjør at trykket ligger PÅ arket i stedet for å
   være klippet inn i det.

   Varm tone, ikke nøytralt svart: nøytralt gråner akvarellen ut. Samme tone som
   omslagsblokkene. */
.vare__bilde img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	filter: drop-shadow( 0 2px 8px color-mix( in srgb, var( --wp--preset--color--deep ) 26%, transparent ) );
	transition: transform 0.24s ease;
}

/* Tittelflaten sto midtstilt av `place-items: center` på ruten. Den er borte —
   se over — så flaten midtstiller seg selv nå. */
.vare__tittelflate {
	align-self: center;
	justify-self: center;
}

.vare:hover .vare__bilde img { transform: scale( 1.03 ); }

@media ( prefers-reduced-motion: reduce ) {
	.vare__bilde img { transition: none; }
	.vare:hover .vare__bilde img { transform: none; }
}

/* Uten bilde: tittelen satt i display-antikva, ikke en grå boks med et
   kameraikon. Det er den samme regelen som gjelder bildet på en programrad — en
   plassholder opplyser om databasen og ikke om festivalen — men en rute kan
   ikke bare falle bort her: et rutenett med et hull i er ødelagt, ikke ærlig.
   Så flaten får tittelen i stedet, og det ser ut som en ryggtittel på en bok. */
.vare__tittelflate {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	color: var( --ink-faint );
}

/* Flex og ikke grid, og det er ikke en smakssak.

   Med `grid` måtte radene navngis på forhånd, og de finnes ikke på alle kortene:
   ingressen mangler på noen varer, og en tom grid-rad tar plass. Med
   `align-content: start` — som var første forsøk — stabler innholdet seg riktig,
   men boksen slutter å strekke seg, og da har `margin-top: auto` på
   handlingsklynga ingenting å skyve mot. Symptomet var at «Plakat: Rans kart
   over Helgøya» har en tittel på to linjer mens naboene har én, så knappen sto
   én linje lenger ned enn de tre andre i samme rad.

   Flex kolonne strekker seg over hele `1fr`-raden `.vare` gir den, og da virker
   `auto`-margen: knappene står på linje på tvers av hylla uansett hvor lang
   tittelen eller ingressen ble. */
.vare__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.vare h3 {
	margin: 0;
	font-size: var( --wp--preset--font-size--large );
}

.vare h3 a {
	color: inherit;
	text-decoration: none;
}

.vare h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.vare__om {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --ink-soft );

	/* Tre linjer. Kortene står side om side og skal ha samme høyde på
	   knapperaden; en kort omtale på fem linjer ved siden av en på én gjør at to
	   knapper i samme rad står 60 px fra hverandre. Klippet, ikke skjult:
	   ingressen er en smakebit, og hele teksten står på varesiden. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Brødtekst og ikke display-antikva, i motsetning til passets pris. Her er
   prisen én av fire ting du sammenligner nedover en rad, og fire store tall i
   antikva ville gjort butikken til en priskatalog. Halvfet og tabellsifre, slik
   at «390 kr» og «1 490 kr» står på samme sifferbredde og kan sammenlignes med
   øyet. */
/* `margin-top: auto` her og ikke på handlingsklynga: prisen og knappen er ett
   par, og paret skyves ned sammen. Sto `auto` på knappen alene, fulgte prisen
   sin egen ingress oppover — og en hylle der fire priser står i fire forskjellige
   høyder mens fire knapper står på linje ser ut som fire kort som ikke ble
   ferdig. Nå er begge linjene rette på tvers av hylla. */
.vare__pris {
	margin: 0;
	margin-top: auto;
	padding-top: var( --wp--preset--spacing--25 );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Fast avstand opp til prisen. `auto` sto her og er flyttet til `.vare__pris` —
   se der.

   Klynga må være like høy enten den har en knapp i seg eller ikke. Et utsolgt
   kort har ingen knapp — der står bare ordet «Utsolgt» i finskrift — og en lavere
   klynge betyr, med bunnjusteringen fra `.vare__pris`, at prisen over den skyves
   NED. Symptomet var tre priser på linje og en fjerde 18 px under dem, på nøyaktig
   den hylla som hadde en utsolgt vare.

   Løst ved å gi ordet knappens loddrette utfylling i stedet for å sette en
   `min-height` på klynga. En fast høyde måtte gjettet på knappens linjeboks —
   første forsøk sa 2,125rem og knappen var 37,2 px — og ville blitt feil igjen
   neste gang noen rører knappestørrelsen. Utfyllingen er den samme regningen
   nettleseren allerede gjør: samme skriftgrad, samme utfylling, samme kant, altså
   samme høyde. Verdiene er `.btn--small`s egne; endres de der, endres de her. */
.vare .handlinger { margin-top: var( --wp--preset--spacing--25 ); }

.vare .handlinger .utsolgt {
	display: inline-block;
	padding-block: 0.5rem;
	border-block: 1px solid transparent;
}

/* ── Varesiden ────────────────────────────────────────────────────────────
   Woos egne blokker, hentet tilbake til nettstedets uttrykk. Bare det som
   faktisk står feil får en regel — en fullstendig overstyring av Woos CSS er en
   jobb ingen blir ferdig med, og hver regel her er en regel som må vedlikeholdes
   gjennom neste Woo-oppdatering. */

.vareside__tilbake {
	margin: 0 0 var( --wp--preset--spacing--35 );
	font-size: var( --wp--preset--font-size--small );
}

.vareside__tilbake a {
	color: var( --ink-soft );
	text-decoration: none;
}

.vareside__tilbake a::before { content: "← "; }

.vareside__tilbake a:hover {
	color: var( --wp--preset--color--contrast );
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* Bildet i samme ramme som på varekortet, av samme grunn: et liggende kart og
   et stående bokomslag skal begge få stå som de er. */
.vareside__bilde .wp-block-woocommerce-product-image-gallery img {
	border: 1px solid var( --rule );
	border-radius: var( --radius );
	background: var( --wp--preset--color--shade );
	box-shadow: 0 2px 14px color-mix( in srgb, var( --wp--preset--color--deep ) 16%, transparent );
}

.vareside__kjop { display: grid; align-content: start; gap: var( --wp--preset--spacing--30 ); }

.vareside__kjop .wp-block-post-title { margin: 0; }

/* Prisen i display-antikva her, som på passets bånd: på en side som handler om
   én vare er prisen avgjørelsen, ikke en kolonne å sammenligne. */
.vareside__kjop .wp-block-woocommerce-product-price {
	font-family: var( --wp--preset--font-family--display );
	color: var( --wp--preset--color--accent );
	line-height: 1.1;

	/* Samme grunn som på passets pris: display-serifen setter gamle stilsifre,
	   og et ettall uten fot foran «490» leses ikke som tusen. */
	font-variant-numeric: lining-nums;
}

/* Woos kjøpsskjema. Antallsfeltet og knappen på én linje, og knappen er
   nettstedets billettknapp — aksent, sperret versal, med billettikonet. Woos
   egen `.single_add_to_cart_button` arver temaets knappefarge fra theme.json
   (grønn), og grønn er «gjør noe» mens aksenten er «betal». Det er den samme
   regelen som skiller «Veien dit» fra «Billetter» på en programrad. */
.vareside__kjop form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--25 );
	align-items: center;
	margin: 0;
}

.vareside__kjop .quantity input[type="number"] {
	width: 5rem;
	padding: 0.55rem 0.6rem;
	border: 1px solid var( --rule-strong );
	border-radius: var( --radius );
	background: var( --wp--preset--color--base );
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
}

.vareside__kjop .single_add_to_cart_button {
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.4rem;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.vareside__kjop .single_add_to_cart_button:hover {
	background: var( --aksent-hover );
}

/* Lagerstatus og SKU/kategori-stripa. Finskrift, dempet — de er opplysninger
   man leter etter, ikke noe man skal lese. */
.vareside__kjop .stock,
.vareside__kjop .wp-block-woocommerce-product-meta {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --ink-soft );
}

.vareside__kjop .stock.out-of-stock { color: var( --wp--preset--color--accent ); }

/* Lesebredde, venstrejustert.

   `margin-inline: 0` er den halve fiksen som faktisk gjorde jobben. `max-width`
   alene holdt bredden, men gruppa lå fortsatt midt i 76rem-spalten: `main` har
   en constrained-layout, og den gir hvert barn `margin-inline: auto`. Målt sto
   brødteksten 273 px inn fra venstre, altså under ingenting, mens alt annet på
   siden var justert mot samme kant. */
.vareside__om {
	margin-top: var( --wp--preset--spacing--50 );
	margin-inline: 0;
	max-width: 42rem;
}

/* Woos butikkvarsler — «Vare lagt i kurven». Kjernens er en grønn boks med et
   hake-ikon fra Woos egen palett; her er den mosegrønn kant på papir, som
   resten av nettstedet. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	border-radius: var( --radius );
	background: var( --wp--preset--color--shade );
	border-left: 3px solid var( --wp--preset--color--moss );
	color: var( --wp--preset--color--contrast );
}

.woocommerce-notices-wrapper .woocommerce-error {
	border-left-color: var( --wp--preset--color--accent );
}

/* ── Kurven og kassen ─────────────────────────────────────────────────────
   Woos kurv- og kasseblokker, med den ene regelen som må gjelde: den knappen
   som fører til betaling er aksent, ikke grønn.

   Det er ikke kosmetikk. Nettstedet har brukt de to fargene konsekvent siden
   forsiden — grønn er «gjør noe» («Veien dit», «Vis hvor jeg er»), aksent er
   «betal» («Billetter», «Legg i kurv») — og Woos knapper arver temaets
   knappefarge fra theme.json, altså grønn. Resultatet var at hele kjøpsløpet
   snudde fargekoden på det siste steget: du trykker en rognebærrød knapp i
   butikken og en grønn i kassen, for å gjøre den samme tingen.

   Bare de to primærknappene. Resten av Woos kurv — antallsvelgere, rabattfelt,
   søppelbøtta — får stå som den er: en fullstendig overstyring av Woos CSS er en
   jobb ingen blir ferdig med, og hver regel her er en regel som må vedlikeholdes
   gjennom neste oppdatering. */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 999px;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var( --aksent-hover );
}

/* Summene i sidestolpen. Tabellsifre slik at «390 kr» og «1 490 kr» står på
   samme sifferbredde nedover kolonnen og kan sammenlignes med øyet — det er den
   ene kolonnen på nettstedet der tall skal legges sammen i hodet. */
.wc-block-components-totals-item__value,
.wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
}

/* «Din handlekurv (elementer: 1)». Telleren står allerede i hodet — tallet i
   sirkelen på kurvikonet du nettopp trykket på — og skuffen viser varene selv.
   Parentesen sier altså det samme for tredje gang, på klosset norsk.

   Skjult og ikke fjernet fra maldelen: å legge Woos `parts/mini-cart.html` inn i
   temaet for å ta ut én blokk ville fryse hele skuffas oppbygning på den
   utgaven av WooCommerce som gjelder i dag. `display: none` tar den også ut av
   opplesningen, som er riktig her — det er ingen opplysning som går tapt. */
.wp-block-woocommerce-mini-cart-title-items-counter-block {
	display: none;
}

/* ── Velgeren ─────────────────────────────────────────────────────────────
   «Hva ser du etter» — fire piller rett under hodet.

   Butikken hadde fem bånd og ingen oversikt: du måtte rulle gjennom hele
   sortimentet for å oppdage hva som fantes i det, og den som kom for en bok
   passerte et festivalpass, tre forestillinger og et krus på veien. Velgeren er
   svaret på det ene spørsmålet man kommer med — hva slags ting har de — og gir
   det på én linje, med tall.

   Den ligger på papir og ikke på det tonede båndet filterpanelet står på. Grunnen
   er hva den er: filterpanelet på programsiden er et *verktøy* som sorterer en
   lang liste, og det får en egen flate for å si det. Dette er en innholdsfortegnelse,
   og en innholdsfortegnelse hører til siden den beskriver. Hårstreken under holder
   den fra å flyte inn i det første båndet.

   Ikke klebrig, i motsetning til programmets daglinje. To grunner: velgeren er
   `hidden` til JavaScript slår den på, og et klebrig element som dukker opp etter
   at siden er tegnet flytter alt under seg. Og når man først har valgt, er siden
   kort — det er hele poenget — så det finnes ingenting å rulle bort fra.
   ========================================================================== */

.butikkvelger {
	padding-inline: var( --wp--style--root--padding-right );
	border-bottom: 1px solid var( --rule );
}

.butikkvelger__inner {
	width: 100%;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-block: var( --wp--preset--spacing--35 );
}

/* Kjernens `fieldset` har egen kant og utfylling i alle nettlesere. */
.butikkvelger fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: var( --wp--preset--spacing--25 );
}

/* Ledeteksten. Samme register som `.filtre__merke` på programsiden — sperret
   versal i finskrift — fordi den gjør den samme jobben: navner aksen pillene
   ved siden av er svar på.

   `float: left` + `clear` er ikke pynt: en `<legend>` deltar ikke i grid- eller
   flex-oppsettet til sin egen fieldset i alle nettlesere. Uten den sto teksten
   oppå første pille i Safari. */
.butikkvelger__merke {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: var( --wp--preset--spacing--25 );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ink-faint );
}

.butikkvelger__rad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	clear: both;
}

/* Pillene er programsidens chips, med to forskjeller.

   Litt større: dette er sidens primærakse — det tilsvarende på programsiden er
   daglinja, ikke chipsene nede i panelet — og en primærakse i 12 px sperret
   finskrift leses som en fotnote.

   Og tallet er ikke dempet like hardt. På en filterchip er tallet en advarsel om
   en blindvei («Tysk 1»); her er det opplysningen man kom for («Håndverket 3»). */
.chip--hylle {
	padding: 0.42rem 0.95rem;
	font-size: var( --wp--preset--font-size--small );
}

/* Fargeprikken bort, samme unntak som `.chip--filter` har. `.chip::before` er en
   kartklasse: der svarer prikken til fargen på pin-en i kartet ved siden av.
   Her er den bare en flekk foran hvert ord — og fordi den er `currentColor`,
   blir den svart på den valgte pilla og ser ut som en radioknapp som ikke virker. */
.chip--hylle::before { display: none; }

.chip--hylle small {
	opacity: 0.75;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
}

.chip--hylle:has( .chip__radio:checked ) small { opacity: 0.85; }

/* Stripingen av hyllene må regnes på nytt når velgeren skjuler noen av dem.
   `:nth-of-type` er strukturell og ser ikke `hidden`, så med bare bøkene igjen
   kunne det ene synlige båndet være det tonede — et enslig beige felt midt på en
   papirside, uten en nabo å veksle mot. Er ett bånd valgt, er det alltid papir. */
.butikk:has( .chip__radio:checked:not( [value="" ] ) ) .butikkbolk {
	background: var( --wp--preset--color--base );
}

.butikk:has( .chip__radio:checked:not( [value="" ] ) ) .butikkbolk .vare__bilde {
	background: var( --wp--preset--color--shade );
}

/* ── Hyllene på telefon ───────────────────────────────────────────────────
   To varer i bredden, ikke én.

   `auto-fill` med et minstemål på 15,5rem ga én spalte under 34rem, og det var
   for sjenerøst: hvert kort ble en halv skjermhøyde, og fire krus krevde fire
   sveip. En hylle man ikke kan se i ett blikk er ikke en hylle, den er en kø. To
   i bredden gjør «Å ta med hjem» til to rader man ser under ett.

   Fast `repeat(2, …)` og ikke et lavere minstemål på `auto-fill`: minstemålet
   ville også slått inn på brede skjermer og gitt fem-seks smale spalter der
   fire er riktig. Bruddet hører til telefonen, så det står i et mediespørsmål.
   `minmax(0, 1fr)` og ikke `1fr` — `1fr` har `auto` som minstemål, altså minst
   innholdets bredde, og en lang boktittel ville sprengt spalten.
   ========================================================================== */

@media ( max-width: 40rem ) {
	.varer {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --wp--preset--spacing--35 ) var( --wp--preset--spacing--25 );
	}

	/* Tittelen ned fra `large` til brødtekst. 20 px display-antikva i en spalte
	   på 160 px er elleve tegn per linje, og «Plakat: Rans kart over Helgøya»
	   blir fire linjer. */
	.varer .vare h3 { font-size: var( --wp--preset--font-size--medium ); }

	/* Ingressen bort. Tre linjer finskrift i en spalte på 160 px er en vegg, og
	   den står mellom bildet — som ER varen her, det er Rans akvarell — og
	   prisen. Hele omtalen står på varesiden, ett trykk unna. */
	.varer .vare__om { display: none; }

	/* Restlageret bort, av en mekanisk grunn og ikke en redaksjonell: «Legg i
	   kurv» og «2 igjen» er til sammen bredere enn spalten, så hintet legger seg
	   på egen linje og gjør den ene klyngen høyere enn naboene. Med prisen
	   bunnjustert mot klyngen betyr det at ett kort får prisen sin 19 px lavere
	   enn de andre — samme feil som utsolgt-ordet ga på brede skjermer. Tallet
	   står fortsatt på varesiden. */
	.varer .vare .handlinger small:not( .utsolgt ) { display: none; }
}

/* ==========================================================================
   OM-SIDEN
   --------------------------------------------------------------------------
   /om/ — den ene siden på nettstedet som er ren prosa. Ingen spørring, ingen
   CPT: redaktøren skriver den i blokkredigereren som en vanlig side.

   Nesten alt utseendet den trenger fins fra før — `.section`-båndene,
   `.eyebrow`, `.link-arrow`, knappene, og sitatet, som låner reglene til
   arrangementssiden gjennom klassen `.sitat`. Det som står her er de tre
   tingene som ikke fantes noe sted.

   Siden har sin egen mal, `page-om.html`, og grunnen står der.
   ========================================================================== */

/* ── Tittelbåndet ─────────────────────────────────────────────────────────
   Samme figur som programsidens `.programhode`: låvebrunt bånd helt ut i
   kanten, gull byline, papirhvit antikva. Men ikke den samme klassen —
   `.programhode` er plugin-ens markup, med sin egen `__inner`-stolpe og sitt
   eget gullskimmer, og å låne den hit ville bundet Om-siden til en blokk den
   ikke bruker. Her er det `.section section--deep`, altså båndet nettstedet
   allerede har, med tre barn i.

   Derfor er H1-en ikke i malen. Fra `wp:post-title` arver den lesespaltens
   42rem og står en gutter lenger inn enn hver eneste seksjonsoverskrift under
   — synlig som at overskriften har sklidd. Her står den i den samme
   76rem-spalten som resten av siden. Samme grep som forsiden, av samme grunn. */
.om__hode h1 {
	margin: 0;

	/* Målt i tegn og ikke i spaltebredde: på 1280 px ville «Om festivalen» hatt
	   plass til dobbelt så mye, og en H1 som får løpe fritt over hele 76rem
	   leses ikke som en overskrift lenger, bare som en linje. Samme grense
	   `.section-head h2` har. */
	max-width: 34ch;
}

/* Ingressen. `large` fra paletten gir størrelsen, men ikke skriften — en
   ingress i systemsans er bare stor brødtekst, og da er det ikke en ingress.
   Antikva og strammere linjeavstand, altså samme grep som
   `.programhode__ingress` og `.butikkhode__ingress`, de to andre ingressene på
   nettstedet.

   Ingen egen farge. De to andre må dempes fordi de står i brødtekstgrad; denne
   står i `large`, og en dempet tone på stor antikva mot låvebrunt leser som at
   teksten er halvveis slått av. Papirhvitt arvet fra båndet er riktig her.

   Bredden er målt i tegn av samme grunn som H1-ens: 46 tegn er tre til fire
   linjer på en bred skjerm, som er en ingress. Over hele spalten ville det vært
   halvannen. */
.om__ingress {
	max-width: 46ch;
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	line-height: 1.4;
}

/* Luften mellom de tre. Båndets `blockGap` er 1rem, som er riktig mellom
   byline og overskrift, men for lite mellom overskrift og ingress — de to
   antikvablokkene rant sammen til én tekst. */
.om__hode .om__ingress { margin-top: var( --wp--preset--spacing--35 ); }

/* ── Sitatet på låvebrunt ─────────────────────────────────────────────────
   To rettelser, og begge er den samme feilen temaet retter for `.badge--kurs`
   og for programhodets ingress: en farge blandet mot *blekk* virker bare på
   papir.

   Mosegrønt på #231711 måler 1,4:1 — streken var der, men bare for den som
   visste at den skulle være der. Gull i stedet, som er båndets egen aksent
   (bylinjen bruker den allerede), og `--papir-soft` til kilden, som er den
   snudde `--ink-soft` seksjonen selv definerer. */
.section--deep .wp-block-quote.sitat {
	border-left-color: var( --wp--preset--color--gold );
}

.section--deep .wp-block-quote.sitat cite {
	color: var( --papir-soft );
}

/* ── Kartet ───────────────────────────────────────────────────────────────
   Bildeteksten. Kjernen skriver `.wp-element-caption` uten utseende, og en
   bildetekst i brødtekstgrad rett under et bilde leses som et avsnitt som
   hører til bildet — ikke som en opplysning om det.

   Regelen henger på `.om__kart` og ikke på `figcaption` globalt: bunnens fem
   støttemerker og programradenes bilder er også figurer, og de har ingen
   bildetekst i dag. Den dagen noen legger inn en, skal den ikke arve en regel
   som ble skrevet for et akvarellkart. */
.om__kart figcaption {
	margin-top: var( --wp--preset--spacing--25 );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.45;
	color: var( --ink-soft );
}

/* Kartet er stående (1266 × 1600) og teksten ved siden av er tre avsnitt. På
   brede skjermer bærer spalten det fint. Under 60rem stabler kjernen spaltene,
   og da kommer et kart i full spaltebredde mellom brødteksten og neste bånd —
   på en telefon er det en rulletur forbi noe man allerede har sett. Halv
   bredde, sentrert; bildeteksten blir stående til venstre, fordi den er tekst. */
@media ( max-width: 60rem ) {
	.om__kart { text-align: center; }

	.om__kart img { max-width: 62%; }

	.om__kart figcaption { text-align: left; }
}

/* ==========================================================================
   MELD INTERESSE — dialogen på utsolgte varer
   --------------------------------------------------------------------------
   Et utsolgt varekort var en blindvei: ordet «Utsolgt» og ingenting mer. Nå
   står det en dempet knapp ved siden av ordet, og den åpner et lite skjema i en
   ekte `<dialog>`.

   Skjemaet er Ninja Forms, altså markup vi ikke skrev. Reglene under er derfor
   avgrenset til `.hff-dialog` og rører ikke NF ellers på nettstedet: den dagen
   noen legger et skjema på en vanlig side, skal det ikke arve dialogens mål.

   Bare det som faktisk står feil får en regel — samme husregel som varesidens
   Woo-blokker. En fullstendig overstyring av NF-ens CSS er en jobb ingen blir
   ferdig med, og hver regel her må gjennom neste NF-oppdatering.
   ========================================================================== */

.hff-dialog {
	width: min( 30rem, calc( 100vw - 2rem ) );
	max-height: min( 88vh, 42rem );
	overflow: auto;
	padding: var( --wp--preset--spacing--35 );
	border: 1px solid var( --rule-strong );
	border-radius: var( --radius );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

/* Bokstavelig farge og ikke `var( --wp--preset--color--deep )`.

   `::backdrop` arvet historisk INGENTING fra elementet det hører til, så en
   egenskap definert på `:root` var utilgjengelig her. Nyere nettlesere arver
   riktig, men flaten bak en modal er ikke stedet å oppdage at en av dem ikke
   gjør det — da står dialogen på noe nesten gjennomsiktig med hele butikken
   lesbar bak. Verdien er `deep` (35 23 17).

   Merk at regelen ikke kan verifiseres med et skjermbilde: `::backdrop` blir
   ikke med i Playwrights opptak selv når den virker. Sjekk
   `getComputedStyle( d, '::backdrop' ).backgroundColor`. */
.hff-dialog::backdrop {
	background: rgba( 35, 23, 17, 0.72 );
}

/* Flytende og ikke absolutt plassert. En modal `<dialog>` sentreres av
   nettleseren med `position: fixed; inset: 0; margin: auto`, og `position:
   relative` for å henge krysset i hjørnet ville tatt sentreringen med seg.
   Krysset står først i markupen, så `float` gjør jobben uten å røre noe. */
.hff-dialog__lukk {
	float: right;
	margin: -0.5rem -0.5rem 0 0.5rem;
	padding: 0.25rem 0.5rem;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var( --ink-soft );
	cursor: pointer;
}

.hff-dialog__lukk:hover { color: var( --wp--preset--color--contrast ); }

.hff-dialog__lukk:focus-visible {
	outline: 2px solid var( --wp--preset--color--signal );
	outline-offset: 2px;
	border-radius: var( --radius );
}

.hff-dialog h2 {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--large );
}

/* Hvilken vare det gjelder. Den ENE opplysningen som gjør skjemaet trygt å
   sende: uten den er dialogen et adressefelt uten sammenheng, og det som
   skiller «meld interesse for denne t-skjorta» fra «meld deg på nyhetsbrevet»
   er nettopp denne linja. */
.hff-dialog__gjelder {
	margin: 0 0 var( --wp--preset--spacing--30 );
	padding-bottom: var( --wp--preset--spacing--25 );
	border-bottom: 1px solid var( --rule );
	font-size: var( --wp--preset--font-size--small );
	color: var( --ink-soft );
}

.hff-dialog__gjelder strong { color: var( --wp--preset--color--contrast ); }

/* Formålssetningen. Den står i skjemaet som et HTML-felt, slik at ordlyden kan
   endres uten en utrulling — se tools/seed-interesseskjema.php. */
.hff-dialog .hff-dialog__formaal {
	margin: 0 0 var( --wp--preset--spacing--30 );
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.5;
	color: var( --ink-soft );
}

/* ── Ninja Forms inne i dialogen ──────────────────────────────────────────── */

.hff-dialog .nf-form-cont { font-family: var( --wp--preset--font-family--system-sans ); }

.hff-dialog .nf-form-fields-required { display: none; }

.hff-dialog .nf-field-container { margin-bottom: var( --wp--preset--spacing--25 ); }

.hff-dialog .nf-field-label label {
	margin-bottom: 0.25rem;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
}

.hff-dialog .nf-field-element input[type="text"],
.hff-dialog .nf-field-element input[type="email"],
.hff-dialog .nf-field-element textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --rule-strong );
	border-radius: var( --radius );
	background: #fff;
	color: var( --wp--preset--color--contrast );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
}

/* Fast høyde og ikke bare `min-height`. NF tegner tekstboksen med sine egne
   `rows`, og resultatet var 200 px tomt felt midt i en dialog der alt annet er
   én linje — det leste som at det VAR meldingen vi ba om, og den er valgfri.
   Tre linjer sier «gjerne en setning», som er hva det er. */
.hff-dialog .nf-field-element textarea {
	height: 4.75rem;
	min-height: 4.75rem;
	resize: vertical;
}

.hff-dialog .nf-field-element input:focus-visible,
.hff-dialog .nf-field-element textarea:focus-visible {
	outline: 2px solid var( --wp--preset--color--signal );
	outline-offset: 1px;
}

.hff-dialog .nf-field-description,
.hff-dialog .nf-field-description p,
.hff-dialog .nf-help-text {
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --ink-soft );
}

/* Send-knappen er grønn, ikke aksentfarget. Grønn er «gjør noe» og aksenten er
   «betal» — og å melde interesse koster ingenting. Knappen som ÅPNET dialogen
   er dempet av samme grunn: den er en vei videre, ikke handlingen selv. */
.hff-dialog .nf-field-element input[type="submit"],
.hff-dialog .nf-field-element input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var( --radius );
	background: var( --handling );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--system-sans );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s ease;
}

.hff-dialog .nf-field-element input[type="submit"]:hover,
.hff-dialog .nf-field-element input[type="button"]:hover { background: var( --handling-hover ); }

.hff-dialog .nf-error-msg,
.hff-dialog .nf-error .nf-error-msg {
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --aksent-hover );
}

/* Takkemeldingen. NF bytter ut skjemaet med den, og uten en regel står den som
   brødtekst midt i en dialog som ellers er finskrift og felter. */
.hff-dialog .nf-response-msg p {
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
}

/* ── Knappen på varekortet ────────────────────────────────────────────────── */

/* På telefon er hylla to spalter på ~160 px, og der kan knappen ikke stå ved
   siden av ordet «Utsolgt» uansett hvor kort etiketten er. Da får den hele
   raden i stedet for å bli klemt: et trykkmål på full bredde er riktigere enn
   en pille på 96 px, og alle utsolgte kort blir like mye høyere — én forskjell
   å se, ikke fire tilfeldige.

   Prisen over den flyttes ett hakk opp på nettopp de kortene. Det er den kjente
   prisen for dette (se `.vare .handlinger` lenger opp), og alternativet — å
   reservere to linjers klyngehøyde på ALLE kort — gir død luft under hver vare
   som er på lager, altså under nesten alle.

   På skrivebord er dette ikke et problem: målt på 1280 px er klynga 37 px høy
   både med og uten knappen, altså én linje, og prisene står på linje. */
@media ( max-width: 40rem ) {
	.varer .vare .handlinger [data-meld-interesse] { flex: 1 0 100%; }
}