@charset "UTF-8";
/*
 * Norea — forsiden (byggeplanen § 4.1).
 *
 * Bygget fra Bevegelse-skissen (assets/proto/bevegelse.css, forsidedelen), med klassene omdøpt fra
 * .bv-* til .fs-* og skissegrepene tatt ut. Seksjonene: hero_portrett (.fs-helt), historie
 * (.fs-historie), saker (.fs-saker) og kolonner (.fs-kolonner). Kartet (map.css), andaktsblokken og
 * Dette er Norea har egne stiler.
 *
 * Lastes etter components.css på forsiden (is_front_page), se nrea_sidestil() i inc/assets.php.
 * Bare sidens egne klasser her. Skallets klasser endres i components.css. Ingen hex: alle farger er
 * tokens fra tokens.css. Tekstparene er fra DESIGN.md: sort på sand, blå på sand, sort på oransje,
 * sand på sort og sand på dyp blå.
 *
 * Innhold
 *   1 Felles: les videre
 *   2 Portrett og påstand (hero_portrett)
 *   3 Én historie og ett steg (historie)
 *   4 Saker
 *   5 Kolonner
 */

/* ── 1 Felles ──────────────────────────────────────── */

/* «Les videre» med pil. 44 px klikkflate. */
.fs-videre {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.fs-videre:hover { text-decoration-thickness: 3px; }

.fs-videre::after {
	content: "\00a0\2192";
	content: "\00a0\2192" / "";
}

/* ── 2 Portrett og påstand ─────────────────────────── */
/*
 * Hero-varianten «Plakat-portrett» (hero-varianter/bevegelse-a.html). Teksten står aldri over bildet.
 * Heroen er vinduet minus toppen (--fs-topp: 81,8 px under 64em, 89,8 px over, målt), minus halve
 * Region-boksen (--fs-gi-halv) og en blå stripe av kartet (--fs-stripe, 40 px). Slik står hele boksen
 * og en stripe blått under den i første skjermbilde. Er innholdet høyere, vokser heroen.
 */
.fs-helt {
	--fs-topp: 5.1125rem;
	--fs-gi-halv: 0rem;
	--fs-stripe: 2.5rem;
	display: grid;
	min-height: calc(100vh - var(--fs-topp) - var(--fs-gi-halv) - var(--fs-stripe));
	min-height: calc(100svh - var(--fs-topp) - var(--fs-gi-halv) - var(--fs-stripe));
}

/* Halve boksen: 2a er 122 px høy på mobil og 153 px på PC, 2b 114 og 73 px */
.fs-helt--gi-2a { --fs-gi-halv: 3.8125rem; }
.fs-helt--gi-2b { --fs-gi-halv: 3.5625rem; }

@media (min-width: 56.25em) {
	.fs-helt--gi-2a { --fs-gi-halv: 4.78rem; }
	.fs-helt--gi-2b { --fs-gi-halv: 2.28rem; }
}

@media (min-width: 64em) {
	.fs-helt { --fs-topp: 5.6125rem; }
}

.fs-helt__bilde {
	margin: var(--space-sm) var(--sidemarg) 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-surface-deep);
}

.fs-helt__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% 0;
}

.fs-helt__tekst {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-md) var(--sidemarg) var(--space-xl);
}

.fs-helt__etikett {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	max-width: none;
}

.fs-helt__etikett::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-ink);
}

.fs-helt__kjerne {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.fs-helt__pastand { hyphens: manual; }
.fs-helt__ingress { max-width: 40ch; }

/* «Hør den»: spillerknappen med skallets .knapp. Trekant og pause, aldri en rund knapp. */
.fs-helt__hor .np__ikon {
	flex: none;
	width: 0.85em;
	height: 0.85em;
}

.fs-helt__hor .np__ikon--pause,
.fs-helt__hor[aria-pressed="true"] .np__ikon--spill { display: none; }
.fs-helt__hor[aria-pressed="true"] .np__ikon--pause { display: block; }

/* Sitat-stil: personens egne ord som overskrift, med «» og kilden under. Ingen markering. */
.fs-helt__sitat,
.fs-helt__sitat-tekst { margin: 0; }

.fs-helt--sitat .fs-helt__pastand { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); }

.fs-helt__kilde {
	margin-top: var(--space-sm);
	font-size: var(--text-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Uten portrett: Sirkelen i portrettets spalte (fra 900 px). På mobil står ingenting i stedet. */
.fs-helt__element { display: none; }

/* Gi-boksen: oransje flate (flate--oransje gir sort tekst og sort fokusring), én knapp, ingen skygge
   eller runde hjørner. På mobil står den i flyten under heroen. */
.fs-gi {
	display: grid;
	justify-items: start;
	gap: var(--space-sm);
	margin: 0 var(--sidemarg) var(--space-lg);
	padding: var(--space-md);
	background: var(--color-accent);
}

.fs-gi__tekst { max-width: 34ch; font-weight: 500; }

/* Variant 1, beløp: sort ramme rundt den oransje boksen, beløpet stort i DM Sans 600 og hva det gir */
.fs-gi--1 { border: 3px solid var(--color-ink); }

.fs-gi__belop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-sm);
	max-width: none;
}

.fs-gi__sum {
	font-size: var(--text-display);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.fs-gi__effekt { font-size: var(--text-h3); font-weight: 500; line-height: 1.3; }

/* Variant 2, region (2a stram boks, 2b stripe): regionnavnet er det eneste store, ingen elementer */
.fs-gi--2a { gap: var(--space-xs); padding: var(--space-sm) var(--space-md); }

.fs-gi__region,
.fs-gi__linje {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-sm);
	max-width: none;
}

.fs-gi__navn {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* Setningen bare fra 900 px, og høyst to linjer der */
.fs-gi--2a .fs-gi__tekst { display: none; }

.fs-gi--2b {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-md);
	padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
}

.fs-gi--2b .fs-gi__navn { font-size: var(--text-h3); }

.fs-gi__lenke {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
}

/* Variant 3, to valg: Gi én gang og Gi fast, skilt av en sort strek */
.fs-gi--3 { gap: 0; }

.fs-gi__valg {
	display: grid;
	justify-items: start;
	align-content: start;
	gap: var(--space-xs);
}

.fs-gi__valg + .fs-gi__valg {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 2px solid var(--color-ink);
}

.fs-gi__valg .knapp { margin-top: var(--space-xs); }

.fs-gi__overskrift {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

/*
 * Mobil og nettbrett (under 900 px): portrettet står i full bredde, kant til kant, og påstanden under.
 * Heroen er så høy som innholdet (ingen krav om at Gi-boksen eller kartet synes i første skjermbilde).
 * Blokkene i teksten løftes ut med display: contents, så de kan sorteres sammen med bildet og
 * Gi-boksen. Kildeordenen er uendret: overskrift → ingress → knapper → Gi-boksen. Bare den visuelle
 * rekkefølgen byttes, og fokusrekkefølgen følger den (knappene, så boksens knapp).
 *   Påstand: portrett → etikett → påstand → knapper → Gi-boksen → ingress.
 *   Sitat:   etikett → sitat og kilde → portrett → knapper → Gi-boksen → ingress.
 * Gi-boksen står i flyten rett etter knappene.
 */
@media (max-width: 56.24em) {
	.fs-helt {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		min-height: 0;
		padding: 0 var(--sidemarg) var(--space-xl);
	}

	.fs-helt__tekst,
	.fs-helt__kjerne { display: contents; }

	/* Portrettet i full bredde (negativ sidemarg), 4:5 med ansiktet øverst, høyst 70 % av høyden */
	.fs-helt__bilde {
		max-height: 70vh;
		max-height: 70svh;
		margin: 0 calc(var(--sidemarg) * -1) var(--space-xs);
		aspect-ratio: 4 / 5;
	}

	.fs-helt__img { object-position: 78% 0; }

	.fs-helt__etikett { order: 1; }
	.fs-helt__pastand,
	.fs-helt__sitat { order: 2; }
	.fs-helt__knapper { order: 3; }
	.fs-gi { order: 4; margin: 0; }
	.fs-helt__ingress { order: 5; }

	/* Les historien og Hør … står på én rad når lydtittelen er kort. Knappene er minst 44 px høye. */
	.fs-helt__knapper { gap: var(--space-xs); }
	.fs-helt__knapper .knapp { padding-inline: var(--space-sm); }

	/* 2a på mobil: regionen over, lenka og knappen på én rad under */
	.fs-gi--2a {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--space-sm);
	}

	.fs-gi--2a .fs-gi__region { grid-column: 1 / -1; }
	.fs-gi--2a .fs-gi__navn { font-size: var(--text-h3); }
	.fs-gi--2a .knapp,
	.fs-gi--2b .knapp { padding-inline: var(--space-sm); font-size: 1rem; }
	.fs-gi--2b { padding: var(--space-xs) var(--space-sm); row-gap: 0; }

	.fs-helt--sitat { padding-top: var(--space-md); }
	.fs-helt--sitat .fs-helt__bilde { order: 2; margin-top: var(--space-xs); }
	.fs-helt--sitat .fs-helt__sitat { order: 1; }
	.fs-helt--sitat .fs-helt__etikett { order: 0; }
}

/* Smal telefon: påstanden ett trinn ned, så den holder seg på fire linjer. Knappeteksten i 1 rem, så
   «Les historien» og «Hør andakten · N min» får plass på én rad på 390 px. */
@media (max-width: 35.99em) {
	.fs-helt__pastand { font-size: 2.25rem; }
	.fs-helt__knapper .knapp { font-size: 1rem; }
}

@media (min-width: 56.25em) {
	.fs-helt {
		position: relative;
		grid-template-columns: clamp(20rem, 37vw, 36rem) minmax(0, 1fr);
		max-width: 90rem;
		margin-inline: auto;
	}

	/* Portrettet fyller høyden heroen får (vinduet under toppen, eller teksten når den er høyere), og
	   bildets eget forhold bestemmer den ikke (contain: size). Uten portrett står Sirkelen, avkuttet av
	   venstre kant i samme spalte, aldri over tekst. */
	.fs-helt__bilde,
	.fs-helt__element {
		align-self: stretch;
		min-height: 20rem;
		margin: 0;
		aspect-ratio: auto;
		contain: size;
	}

	.fs-helt__element { --kutt: 0.4; display: block; }
	.fs-helt__img { object-position: 80% 0; }

	/* Høyre kant flukter med .container i toppen, også når heroen er smalere enn vinduet */
	.fs-helt__tekst {
		justify-content: center;
		gap: var(--space-md);
		padding: var(--space-lg) max(var(--sidemarg), calc((min(100vw, 90rem) - var(--container)) / 2))
			var(--space-lg) clamp(2rem, 4.5vw, 5rem);
	}

	/* Etikett, påstand, ingress og knapper står samlet og midtstilt i høyden */
	.fs-helt__kjerne { gap: var(--space-md); }
	.fs-helt__ingress { font-size: var(--text-h3); line-height: 1.5; }

	/* Påstanden følger også vinduets høyde, så heroen får plass i 1366 × 768 */
	.fs-helt--pastand .fs-helt__pastand { font-size: min(var(--text-hero), 7.5vh); }
	.fs-helt--pastand .fs-helt__pastand { font-size: min(var(--text-hero), 7.5svh); }

	/* Lav skjerm (1366 × 768): påstanden og ingressen ett trinn ned, så heroen får plass */
	@media (max-height: 50em) {
		.fs-helt--pastand .fs-helt__pastand { font-size: min(var(--text-hero), 6vh); }
		.fs-helt--pastand .fs-helt__pastand { font-size: min(var(--text-hero), 6svh); }
		.fs-helt__ingress { font-size: var(--text-body); line-height: 1.6; }
		.fs-helt__tekst { padding-top: var(--space-md); }
	}

	/* Anførselstegnet henger utenfor tekstkanten, så sitatets første bokstav flukter med resten */
	.fs-helt--sitat .fs-helt__pastand { text-indent: -0.45em; }

	/*
	 * Gi-boksen over skillet til seksjonen under: 5 rem står i heroen og resten over toppen av neste
	 * seksjon (kartets luft over etiketten). Tekstspalten får like mye ekstra luft under, så boksen aldri
	 * dekker heroens tekst eller knapper. Heroens høyde er uendret: portrettet bestemmer den.
	 */
	.fs-helt--gi .fs-helt__tekst { padding-bottom: calc(var(--space-lg) + 6.5rem); }

	/* Liggende boks: innholdet til venstre og handlingen til høyre, så boksen er lav og går bare inn i
	   luften over kartets etikett (8 rem), aldri ned til teksten der. */
	.fs-gi {
		position: absolute;
		top: calc(100% - 6rem);
		right: max(var(--sidemarg), calc((min(100vw, 90rem) - var(--container)) / 2));
		z-index: 2;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		column-gap: var(--space-lg);
		width: min(44rem, 62%);
		margin: 0;
	}

	.fs-gi > :not(.knapp, .knapp-rad) { grid-column: 1; }
	.fs-gi > .knapp,
	.fs-gi > .knapp-rad { grid-column: 2; grid-row: 1 / span 4; }

	/* Region (2a, 2b): midt over skillet, halvt i heroen og halvt i kartets luft (8 rem). Tekstspalten
	   holder av plass til den øvre halvdelen, så boksen aldri dekker heroens tekst eller knapper. */
	:is(.fs-helt--gi-2a, .fs-helt--gi-2b) .fs-helt__tekst { padding-bottom: calc(var(--fs-gi-halv) + 3rem); }

	:is(.fs-helt--gi-2a, .fs-helt--gi-2b) .fs-gi { top: 100%; translate: 0 -50%; }

	.fs-gi--2a { width: min(38rem, 55%); row-gap: 0; }
	.fs-gi--2a .fs-gi__tekst {
		display: -webkit-box;
		overflow: hidden;
		max-width: 46ch;
		font-size: 1rem;
		line-height: 1.5;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.fs-gi--2b { width: min(44rem, 62%); }

	/* To valg side om side, med streken mellom */
	.fs-gi--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	.fs-gi--3 > .fs-gi__valg { grid-column: auto; }

	.fs-gi__valg + .fs-gi__valg {
		margin: 0 0 0 var(--space-md);
		padding: 0 0 0 var(--space-md);
		border-top: 0;
		border-left: 2px solid var(--color-ink);
	}
}

/* ── 3 Én historie og ett steg ─────────────────────── */
.fs-historie { scroll-margin-top: var(--space-md); }

.fs-historie__rutenett {
	display: grid;
	gap: var(--space-xl);
}

.fs-historie__hode > * + * { margin-top: var(--space-sm); }

.fs-historie__tittel {
	max-width: 14ch;
	font-size: var(--text-h1);
	line-height: 1.1;
}

/* Kartlenken: «Se Sør-Asia på kartet» */
.fs-traad {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 500;
}

.fs-historie__tekst {
	display: grid;
	align-content: start;
	gap: var(--space-md);
}

.fs-historie__tekst > p:first-child {
	font-size: var(--text-h3);
	font-weight: 500;
	line-height: 1.5;
}

.fs-historie__tekst .fs-videre { justify-self: start; }

/* Sitatet: én oransje kantlinje, som bibelverset i andakten. Ingen flate. */
.fs-sitat {
	margin: 0;
	padding-left: var(--space-md);
	border-left: 4px solid var(--color-accent);
}

.fs-sitat__tekst p {
	font-size: var(--text-h3);
	font-weight: 500;
	line-height: 1.5;
}

.fs-sitat__kilde {
	margin-top: var(--space-xs);
	font-size: var(--text-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Ett steg: skallets .neste-steg (oransje, sort tekst). Knappene er skallets, som i andakten:
   primær er blå med sand tekst, sekundær har sort ramme og sort tekst på oransje. */
.fs-steg {
	align-self: start;
	padding: var(--space-md) var(--space-lg);
}

.fs-steg__tittel { font-size: var(--text-h2); line-height: 1.15; }

@media (min-width: 56.25em) {
	.fs-historie__rutenett {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--space-md);
	}

	.fs-historie__hode { grid-column: 1 / span 4; }
	.fs-historie__tekst { grid-column: 5 / span 5; }
	.fs-steg { grid-column: 10 / -1; }

	/* Uten steg får teksten de siste spaltene */
	.fs-historie__rutenett:not(:has(.fs-steg)) .fs-historie__tekst { grid-column: 5 / span 7; }
}

/* ── 4 Saker ───────────────────────────────────────── */
.fs-saker__hode {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-lg);
	margin-bottom: var(--space-lg);
}

.fs-saker__tittel { font-size: var(--text-h1); line-height: 1.1; }

.fs-saker__liste {
	display: grid;
	gap: var(--space-md);
}

/* Kortet fyller cellen, så kortene i en rad er like høye. min-width: 0 på cellen og kortet, så et
   langt ord i versaler aldri presser rutenettet bredere enn vinduet (320 px). */
.fs-saker__sak { display: flex; min-width: 0; max-width: none; }
.fs-saker__sak > .kort { flex: 1; min-width: 0; }
.fs-saker__sak:empty { display: none; }

.fs-saker .kort__innhold { gap: var(--space-sm); }
.fs-saker .kort__tittel { font-size: var(--text-h2); line-height: 1.15; }
.fs-saker .kort--stor .kort__tittel { font-size: var(--text-h1); line-height: 1.1; }

/* Ansiktene øverst i utsnittet. Teksten står under bildet, aldri over. */
.fs-saker .kort--stor .kort__bilde { aspect-ratio: 5 / 4; object-position: 40% 50%; }

@media (min-width: 48em) {
	.fs-saker__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Uten stort kort: tre kort gir ett alene til slutt, som får hele bredden */
	.fs-saker__liste:not(.fs-saker__liste--stor)[data-antall="3"] .fs-saker__sak:last-child { grid-column: 1 / -1; }

	/* Med stort kort: det store over i hele bredden, og de andre som liggende kort under hverandre, med
	   bildet til venstre for teksten. Da står aldri et kort alene med et høyt bilde. */
	.fs-saker__liste--stor .fs-saker__sak { grid-column: 1 / -1; }

	/* Bildet ligger absolutt i venstre del av kortet, så det aldri bestemmer høyden. Teksten gjør det,
	   og bildet fyller høyden ved siden av (object-fit fra skallet). */
	.fs-saker__liste--stor .fs-saker__sak:not(:first-child) .kort:has(.kort__bilde) {
		min-height: 9rem;
		padding-left: 38%;
	}

	.fs-saker__liste--stor .fs-saker__sak:not(:first-child) .kort__bilde {
		position: absolute;
		inset: 0 auto 0 0;
		width: 38%;
		height: 100%;
		aspect-ratio: auto;
	}

	.fs-saker__liste--stor .fs-saker__sak:not(:first-child) .kort__innhold { min-width: 0; }
}

@media (min-width: 56.25em) {
	/* Det store kortet til venstre over alle radene, de liggende kortene til høyre. Bildet i det store
	   kortet fyller høyden kolonnen til høyre gir, så kortet aldri får en tom, hvit flate under teksten. */
	.fs-saker__liste--stor { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.fs-saker__liste--stor .fs-saker__sak:first-child { grid-column: 1; grid-row: 1 / span 2; }
	.fs-saker__liste--stor[data-antall="4"] .fs-saker__sak:first-child { grid-row: 1 / span 3; }
	.fs-saker__liste--stor .fs-saker__sak:not(:first-child) { grid-column: 2; }

	.fs-saker__liste--stor .kort--stor .kort__bilde {
		flex: 1 1 0;
		min-height: 20rem;
		aspect-ratio: auto;
		contain: size;
	}

	/* Teksten tar bare plassen den trenger. Resten går til bildet. */
	.fs-saker__liste--stor .kort--stor .kort__innhold { flex: none; }

	/* Uten stort kort: alle på én rad med tre, to og to med fire */
	.fs-saker__liste:not(.fs-saker__liste--stor)[data-antall="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fs-saker__liste:not(.fs-saker__liste--stor)[data-antall="3"] .fs-saker__sak:last-child { grid-column: auto; }
}

/* ── 5 Kolonner ────────────────────────────────────── */
/* «Misjon i tre spørsmål»: overskriften er en etikett, spørsmålene bærer. Strek under overskriften. */
.fs-kolonner__tittel {
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.15em;
}

.fs-kolonner__strek { margin-block: var(--space-sm) var(--space-lg); }

.fs-kolonner__liste {
	display: grid;
	gap: var(--space-xl);
	counter-reset: fs-kolonne;
}

.fs-kolonner__ledd {
	display: grid;
	align-content: start;
	gap: var(--space-sm);
	max-width: none;
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-ink);
}

.fs-kolonner__ledd-tittel { font-size: var(--text-h1); line-height: 1.1; }

/* Nummerert: tallet i DM Sans 600 over tittelen. Lista er en <ol>, så tallet er dekor for synet. */
ol.fs-kolonner__liste > .fs-kolonner__ledd { counter-increment: fs-kolonne; }

ol.fs-kolonner__liste > .fs-kolonner__ledd::before {
	content: counter(fs-kolonne);
	content: counter(fs-kolonne) / "";
	font-size: var(--text-h2);
	font-weight: 600;
	line-height: 1;
}

.fs-kolonner__lenker { display: grid; }

.fs-kolonner__lenke {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
	text-underline-offset: 0.25em;
}

.fs-kolonner__lenke::after {
	content: "\00a0\2192";
	content: "\00a0\2192" / "";
}

@media (min-width: 56.25em) {
	.fs-kolonner__liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
	.fs-kolonner__liste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-lg); }
}