/* helsethbok.no — rolig og dokumentaktig. Mobil først.
   Ingen eksterne fonter: systemets serif bærer brødteksten. */

:root {
	--papir: #f6f1e7;
	--kort: #fbf8f2;
	--blekk: #2b2622;
	--dempet: #6b6158;
	--linje: #ddd3c3;
	--aksent: #7a3528;
	--aksent-mork: #5a261c;
	--gronn: #3f5a3a;
	--advarsel: #fff4d6;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tekstbredde: 40rem;
	--bredde: 64rem;
	--rom: 1.25rem;
}

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

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

body {
	margin: 0;
	background: var(--papir);
	color: var(--blekk);
	font-family: var(--serif);
	font-size: 1.125rem;
	line-height: 1.6;
}

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

a { color: var(--aksent); text-underline-offset: 0.15em; }
a:hover { color: var(--aksent-mork); }
:focus-visible { outline: 3px solid var(--aksent); outline-offset: 2px; }

h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 2rem; letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.visuelt-skjult {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.hopp { position: absolute; left: -999px; }
.hopp:focus { left: var(--rom); top: 0.5rem; background: var(--kort); padding: 0.5rem 1rem; z-index: 2; }

.kicker {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dempet);
	margin-bottom: 0.4rem;
}
.liten { font-size: 0.9rem; color: var(--dempet); }
.avklares { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.05em; color: #8a5a00; }

/* ---------- topp og bunn ---------- */

.stub-banner {
	margin: 0;
	padding: 0.4rem var(--rom);
	background: var(--advarsel);
	font-family: var(--sans);
	font-size: 0.8rem;
	text-align: center;
	border-bottom: 1px solid #e8d9a8;
}

.topp {
	border-bottom: 1px solid var(--linje);
	padding: 0.9rem var(--rom) 0;
	max-width: var(--bredde);
	margin: 0 auto;
}
.topp-rad { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.merke {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--blekk);
	text-decoration: none;
	letter-spacing: 0.01em;
}
.kurv-lenke {
	font-family: var(--sans);
	font-size: 0.9rem;
	color: var(--blekk);
	text-decoration: none;
	white-space: nowrap;
}
.kurv-antall {
	display: inline-block;
	min-width: 1.4em;
	margin-left: 0.3em;
	padding: 0 0.35em;
	border-radius: 1em;
	background: var(--aksent);
	color: #fff;
	font-size: 0.8rem;
	text-align: center;
}
/* Menyen brytes heller enn å rulle sidelengs: med «Julegavetips» i sesongen
   blir den for bred til én linje på 375 px, og skjult rulling gjemmer «Kontakt». */
.meny {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.1rem;
	padding: 0.6rem 0 0.7rem;
	font-family: var(--sans);
	font-size: 0.95rem;
}
.meny a { color: var(--dempet); text-decoration: none; white-space: nowrap; padding: 0.2rem 0; }
.meny a:hover, .meny a[aria-current] { color: var(--blekk); box-shadow: inset 0 -2px var(--aksent); }

main { max-width: var(--bredde); margin: 0 auto; padding: 1.5rem var(--rom) 3rem; }

.bunn {
	border-top: 1px solid var(--linje);
	max-width: var(--bredde);
	margin: 0 auto;
	padding: 1.5rem var(--rom) 2.5rem;
	font-family: var(--sans);
	font-size: 0.85rem;
	color: var(--dempet);
}
.bunn-merke { font-family: var(--serif); font-size: 1.05rem; color: var(--blekk); margin-bottom: 0.4rem; }
.bunn-lenker { display: flex; flex-wrap: wrap; gap: 1rem; }
/* Som på de andre Varrio-sidene: liten og dempet, nederst. */
.bunn-varrio { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--linje); font-size: 0.75rem; }
.bunn-varrio a { color: inherit; }

/* ---------- knapper og skjema ---------- */

.knapp {
	display: inline-block;
	border: 0;
	border-radius: 3px;
	background: var(--aksent);
	color: #fff;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.75rem 1.4rem;
	text-decoration: none;
	cursor: pointer;
}
.knapp:hover { background: var(--aksent-mork); color: #fff; }
.knapp-stor { width: 100%; padding: 0.95rem; font-size: 1.05rem; }
.knapp-sekundar { background: transparent; color: var(--aksent); box-shadow: inset 0 0 0 2px var(--aksent); }
.knapp-sekundar:hover { background: var(--aksent); color: #fff; }
.betal-knapper { display: grid; gap: 0.6rem; }
.knapp-lenke {
	background: none; border: 0; padding: 0;
	font: inherit; font-family: var(--sans); font-size: 0.85rem;
	color: var(--aksent); text-decoration: underline; cursor: pointer;
}

/* ---------- forside: topp ---------- */

/* Arkivbildet i full bredde, utenfor main. Mørk bunn og gradient, så teksten
   har kontrast uansett hvor mye av bildet som synes. */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--blekk);
	color: #f6f1e7;
	min-height: 24rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* ikke la et langt ord i h1 gjøre sporet bredere enn skjermen */
	align-items: end;
}
.hero-bilde { position: absolute; inset: 0; }
.hero-bilde img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	filter: sepia(0.45) contrast(1.05);
	opacity: 0.85;
	animation: hero-zoom 28s ease-in-out infinite alternate;
}
@keyframes hero-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.08) translateX(-1.5%); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-bilde img { animation: none; }
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(29, 26, 23, 0.9) 0%, rgba(29, 26, 23, 0.55) 45%, rgba(29, 26, 23, 0.15) 100%);
	pointer-events: none;
}
.hero-indre {
	position: relative;
	z-index: 1;
	min-width: 0;
	width: 100%;
	max-width: var(--bredde);
	margin: 0 auto;
	padding: 5rem var(--rom) 2rem;
}
.hero-indre .kicker { color: #e2c9a3; }
.hero-indre h1 { color: #fff; font-size: 2.6rem; margin-bottom: 0.6rem; overflow-wrap: break-word; }
.hero-indre p:not(.kicker, .hero-knapper) { font-size: 1.15rem; max-width: 34rem; }
.hero-knapper { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.hero-knapper .knapp { margin: 0; }
.knapp-lys { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8); }
.knapp-lys:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero-bildetekst {
	position: absolute;
	right: var(--rom);
	bottom: 0.5rem;
	z-index: 1;
	margin: 0;
	font-family: var(--sans);
	font-size: 0.75rem;
	color: rgba(246, 241, 231, 0.6);
}

/* ---------- forside ---------- */

.tekst img, .bok-tekst img {
	background: #fff;
	padding: 0.5rem;
	box-shadow: 0 1px 2px rgba(43, 38, 34, 0.15), 0 6px 18px rgba(43, 38, 34, 0.08);
}

.seksjon { margin-bottom: 2.5rem; }
.seksjon > h2 { border-bottom: 1px solid var(--linje); padding-bottom: 0.4rem; }

/* ---------- hylle ---------- */

.hylle {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1rem;
}
.kort { display: flex; flex-direction: column; gap: 0.2rem; color: var(--blekk); text-decoration: none; }
.kort-bilde { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--papir); }
.kort-bilde img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.2s; }
.kort:hover .kort-bilde img { transform: scale(1.03); }
.kort-tittel { font-weight: 600; line-height: 1.25; margin-top: 0.4rem; }
.kort:hover .kort-tittel { color: var(--aksent); }
.kort-meta { font-size: 0.9rem; color: var(--dempet); }
.kort-pris { font-family: var(--sans); font-size: 0.95rem; }
/* Lagerstatus (#43): prikk og tekst, på kort og i kjøpsboksen. Teksten har
   fargen også, så den ikke står på fargen alene. */
.lagerstatus { font-family: var(--sans); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4em; }
.lagerstatus .prikk { width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; flex: none; }
.lagerstatus-pa-lager { color: var(--gronn); }
.lagerstatus-fa-igjen { color: var(--aksent); }
.lagerstatus-bestilles { color: var(--blekk); }
.lagerstatus-utsolgt { color: var(--dempet); }
.lagerstatus-utsolgt .prikk { background: none; border: 1.5px solid currentColor; box-sizing: border-box; }
.kort-status { margin-top: 0.1rem; }

/* Kampanje: pris i aksentfarge, førpris gjennomstreket, lapp med rabatten.
   Samme mønster som store norske bokhandler, uten ramme og store bokstaver. */
.pris-kampanje { color: var(--aksent); font-weight: 600; }
.forpris { color: var(--dempet); font-size: 0.85em; font-weight: 400; margin-left: 0.35rem; }
.lapp {
	display: inline-block;
	background: var(--aksent);
	color: #fff;
	font-family: var(--sans);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.3rem 0.45rem;
	border-radius: 3px;
	vertical-align: 0.3em;
	margin-left: 0.5rem;
	white-space: nowrap;
}
.kort-bilde { position: relative; }
.kort-lapp { position: absolute; top: 0.4rem; left: 0.4rem; margin: 0; vertical-align: baseline; }
.kampanje-tekst { color: var(--aksent); font-family: var(--sans); font-size: 0.85rem; margin-left: 0.3rem; }

/* ---------- kampanjer ---------- */

.kampanje-plass {
	background: var(--kort);
	border: 1px solid var(--linje);
	border-left: 4px solid var(--aksent);
	padding: 1rem var(--rom) 0.2rem;
}
.kampanje-status { font-family: var(--sans); font-size: 1rem; }
.kampanje-pagar { color: var(--aksent); font-weight: 600; }
.kampanje-info { font-family: var(--sans); font-size: 0.9rem; margin: -0.1rem 0 0.8rem; }

/* ---------- julegavetips ---------- */

.jul-frist {
	background: var(--kort);
	border: 1px solid var(--linje);
	border-radius: 4px;
	padding: 1rem 1.2rem 0.3rem;
	margin: 1.5rem 0;
}
.jul-frist h2 { font-size: 1.3rem; }
.gaver { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1.5rem; }
.gave { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.gave-tekst h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.gave-tekst h3 a { color: var(--blekk); text-decoration: none; }
.gave-tekst p { margin: 0 0 0.5rem; }
.gave-tekst .kort-pris { display: block; margin-bottom: 0.6rem; }
.gave-tekst form { margin-bottom: 0.3rem; }
@media (min-width: 44rem) {
	.gaver { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
	.gave { grid-template-columns: 9rem minmax(0, 1fr); }
}

/* ---------- bokside ---------- */

.sti { font-family: var(--sans); font-size: 0.85rem; color: var(--dempet); margin-bottom: 1rem; }
.sti a { color: var(--dempet); }

.bok-topp { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
.bok-omslag { margin: 0; max-width: 15rem; justify-self: center; }
.bok-hode h1 { font-size: 2.3rem; margin-bottom: 0.2rem; }
.undertittel { font-size: 1.25rem; font-style: italic; color: var(--dempet); margin-bottom: 0.4rem; }
.forfatter { margin-bottom: 1rem; }
.ingress { font-size: 1.2rem; }

.kjop {
	background: var(--kort);
	border: 1px solid var(--linje);
	border-radius: 4px;
	padding: 1.1rem 1.2rem 0.4rem;
	margin-top: 1rem;
}
.pris { font-family: var(--sans); font-size: 1.6rem; margin-bottom: 0.2rem; }
.status { margin-bottom: 0.8rem; }
.status .lagerstatus { font-size: 0.95rem; }
.kjop form { margin-bottom: 0.6rem; }
.kjop-knapper { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.kjop-knapper form { margin: 0; }
.kjop-knapper .knapp { min-height: 2.75rem; }
.kjop-melding { font-family: var(--sans); font-size: 0.9rem; min-height: 1.4em; margin-bottom: 0.6rem; }

.bok-tekst, .tekst { max-width: var(--tekstbredde); }
.bok-tekst { margin-bottom: 2rem; }

.fakta { max-width: var(--tekstbredde); margin-bottom: 2.5rem; }
.fakta dl { margin: 0; border-top: 1px solid var(--linje); }
.fakta dl > div {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--linje);
}
.fakta dt { font-family: var(--sans); font-size: 0.85rem; color: var(--dempet); padding-top: 0.2em; }
.fakta dd { margin: 0; }

/* ---------- tekst og nyheter ---------- */

.tekst h1 { margin-bottom: 0.8rem; }
.tekst img, .bok-tekst img { margin: 1.5rem 0 0.4rem; }
.tekst p > em:only-child, .bok-tekst p > em:only-child { display: block; font-size: 0.95rem; color: var(--dempet); }
.tekst ul, .tekst ol { padding-left: 1.3rem; }
/* Skjema som tekst (angreskjema): beholder linjene, så det kan kopieres inn i en e-post. */
.tekst pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.9rem;
	line-height: 1.5;
	padding: 1rem;
	background: var(--kort);
	border: 1px solid var(--linje);
	border-radius: 4px;
}
.dato { display: block; font-family: var(--sans); font-size: 0.85rem; color: var(--dempet); margin-bottom: 0.3rem; }

.video a {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.8rem 1rem;
	background: var(--kort);
	border: 1px solid var(--linje);
	border-radius: 4px;
	color: var(--blekk);
	text-decoration: none;
	font-family: var(--sans);
	font-size: 0.9rem;
}
.video a:hover strong { color: var(--aksent); }
.video-ikon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--aksent);
	color: #fff;
	font-size: 0.9rem;
}

.nyhetsliste { list-style: none; padding: 0; margin: 0 0 1rem; }
.nyhetsliste li { border-bottom: 1px solid var(--linje); }
.nyhet-rad { display: flex; gap: 1rem; padding: 0.9rem 0; color: var(--blekk); text-decoration: none; }
.nyhet-bilde { flex: none; width: 5rem; height: 5rem; overflow: hidden; }
.nyhet-bilde img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.15); }
.nyhet-tekst { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.nyhet-tekst time { font-family: var(--sans); font-size: 0.8rem; color: var(--dempet); }
.nyhet-tittel { font-weight: 600; }
.nyhet-rad:hover .nyhet-tittel { color: var(--aksent); }
.nyhet-utdrag { font-size: 0.95rem; color: var(--dempet); }

.tjenesteliste { list-style: none; padding: 0; margin: 0 0 1rem; }
.tjenesteliste li { border-bottom: 1px solid var(--linje); }
.tjeneste-rad { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.9rem 0; color: var(--blekk); text-decoration: none; }
.tjeneste-tittel { font-weight: 600; }
.tjeneste-rad:hover .tjeneste-tittel { color: var(--aksent); }
.tjeneste-kort { font-size: 0.95rem; color: var(--dempet); }
.tjeneste-pris { font-family: var(--sans); }

/* ---------- handlekurv, kasse, kvittering ---------- */

.kurv-side, .kasse, .kvittering { max-width: var(--tekstbredde); }
.kurv-linjer { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--linje); }
.kurv-linje {
	display: grid;
	grid-template-columns: 4.5rem 1fr auto;
	grid-template-areas: "bilde info sum" "bilde antall fjern";
	gap: 0.3rem 0.9rem;
	align-items: center;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--linje);
}
.kurv-bilde { grid-area: bilde; }
.kurv-info { grid-area: info; display: flex; flex-direction: column; line-height: 1.3; }
.kurv-antall-skjema { grid-area: antall; }
.kurv-sum { grid-area: sum; font-family: var(--sans); text-align: right; }
.kurv-fjern { grid-area: fjern; text-align: right; }
select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="date"] {
	font: inherit;
	font-family: var(--sans);
	font-size: 1rem;
	padding: 0.55rem 0.6rem;
	border: 1px solid #bfb3a0;
	border-radius: 3px;
	background: #fff;
	color: var(--blekk);
	width: 100%;
}
select { width: auto; min-width: 4.5rem; }

.summer { font-family: var(--sans); margin: 0 0 0.8rem; }
.summer > div { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.summer dd { margin: 0; }

.kasse-oversikt {
	background: var(--kort);
	border: 1px solid var(--linje);
	border-radius: 4px;
	padding: 1rem 1.2rem 0.3rem;
	margin-bottom: 1.5rem;
}
.kasse-oversikt h2 { font-size: 1.1rem; }
.kasse-linjer { list-style: none; padding: 0; margin: 0 0 0.6rem; font-family: var(--sans); font-size: 0.95rem; }
.kasse-linjer li, .kasse-varer { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.kasse-varer { font-family: var(--sans); border-top: 1px solid var(--linje); padding-top: 0.5rem; }

.skjema fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.skjema legend { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.6rem; }
.felt { margin-bottom: 0.9rem; }
.felt label { display: block; font-family: var(--sans); font-size: 0.9rem; margin-bottom: 0.25rem; }
.felt-rad { display: grid; grid-template-columns: 7rem 1fr; gap: 0.8rem; }
.merknad { margin: -0.4rem 0 0.9rem; }
.merknad:empty { margin: 0; }
.valg {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.8rem;
	margin-bottom: 0.5rem;
	border: 1px solid var(--linje);
	border-radius: 4px;
	background: var(--kort);
	cursor: pointer;
	font-family: var(--sans);
	font-size: 0.95rem;
}
.valg:has(input:checked) { border-color: var(--aksent); box-shadow: 0 0 0 1px var(--aksent); }
.valg input { margin-top: 0.3rem; accent-color: var(--aksent); }
.godta { display: flex; gap: 0.6rem; align-items: flex-start; font-family: var(--sans); font-size: 0.95rem; margin-bottom: 1rem; }
.godta input { margin-top: 0.3rem; accent-color: var(--aksent); }
.feil { color: #a3261b; font-family: var(--sans); font-size: 0.85rem; margin: 0.25rem 0 0; }
[aria-invalid="true"] { border-color: #a3261b; }
.feilboks {
	border-left: 4px solid #a3261b;
	background: #fbecea;
	padding: 0.8rem 1rem 0.2rem;
	margin-bottom: 1.5rem;
	font-family: var(--sans);
	font-size: 0.95rem;
}
textarea { resize: vertical; line-height: 1.45; }

/* ---------- kontaktskjema ---------- */

.kontakt { margin-top: 1rem; }
.kontakt .knapp { margin-bottom: 1rem; }
.kvitteringboks {
	border-left: 4px solid var(--gronn);
	background: #eef2ea;
	padding: 0.8rem 1rem 0.2rem;
	margin-bottom: 1.5rem;
	font-family: var(--sans);
	font-size: 0.95rem;
}
/* Honningkrukke: utenfor skjermen, ikke display:none, så enkle roboter fyller den ut. */
.honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.stub-merknad {
	background: var(--advarsel);
	border: 1px solid #e8d9a8;
	padding: 0.6rem 0.9rem;
	font-family: var(--sans);
	font-size: 0.9rem;
}

/* ---------- tabeller ---------- */

/* Brede tabeller ruller i sin egen boks, ikke hele siden. */
.tabell-rull { overflow-x: auto; margin-bottom: 0.6rem; }

/* Backoffice har sitt eget stilark: admin.css. */

/* hentekart på kvitteringen */
.hentekart { margin: 1.5rem 0; }
.hentekart figure { margin: 0.5rem 0; }
.hentekart-bilde { position: relative; border: 1px solid var(--linje); }
.hentekart-bilde img { display: block; width: 100%; height: auto; }
.hentekart-merke { position: absolute; left: 71.67%; top: 45%; width: 18px; height: 18px; margin: -12px 0 0 -12px;
	border-radius: 50%; background: var(--aksent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.hentekart figcaption { margin-top: 0.3rem; }

/* ---------- utskrift ---------- */

@page { size: A4; margin: 15mm; }

@media print {
	.hopp, .stub-banner, .topp, .bunn { display: none; }
	.tekst pre { background: none; border: none; padding: 0; font-size: 11pt; }
	.tekst a { color: inherit; }
}

/* ---------- bredere skjermer ---------- */

@media (min-width: 44rem) {
	:root { --rom: 2rem; }
	h1 { font-size: 2.4rem; }
	.topp { display: flex; align-items: baseline; gap: 1.6rem; padding-bottom: 0; }
	.topp-rad { display: contents; }
	.meny { order: 1; margin-left: auto; padding: 0.9rem 0; }
	.kurv-lenke { order: 2; }
	.hero { min-height: 30rem; }
	.hero-indre h1 { font-size: 3.4rem; }
	.hylle { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
	.hylle-smal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.bok-topp { grid-template-columns: minmax(0, 22rem) 1fr; gap: 2.5rem; align-items: start; }
	.bok-omslag { max-width: 22rem; }
	.bok-hode h1 { font-size: 2.8rem; }
	.nyhet-bilde { width: 6rem; height: 6rem; }
}