/*
Theme Name: Pomm Premium Magazine
Theme URI: https://pomm.no/
Author: Codex for Pomm Magazine
Description: A polished block theme for Pomm.no, designed around a premium online magazine experience with strong editorial hierarchy, elegant article cards, and category-led discovery.
Version: 1.38.73
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: pomm-premium-magazine
Tags: blog, news, block-patterns, full-site-editing, one-column, two-columns, custom-logo, featured-images
*/

:root {
	--pomm-paper: #fbfaf7;
	--pomm-ink: #191514;
	--pomm-muted: #6e6862;
	--pomm-line: #ded8cf;
	--pomm-soft: #f1ede7;
	--pomm-blush: #ead7d5;
	--pomm-olive: #80836b;
	--pomm-merlot: #7b2f3f;
	--pomm-red: #cf211e;
	--pomm-shadow: 0 20px 50px rgba(25, 21, 20, 0.08);
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--pomm-paper);
	color: var(--pomm-ink);
}

body,
button,
input,
textarea {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	text-underline-offset: 0.18em;
	transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

a:hover {
	color: var(--pomm-merlot);
}

img {
	filter: saturate(0.96) contrast(1.03);
}

.wp-site-blocks {
	overflow-x: clip;
}

.pomm-visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.wp-block-read-more {
	border: 1px solid var(--pomm-ink);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--pomm-sans);
	font-size: 0.76rem;
	font-weight: 700;
	padding: 0.62rem 0.9rem;
	text-decoration: none;
	text-transform: uppercase;
}

.wp-block-post-terms {
	color: var(--pomm-merlot);
	font-family: var(--wp--preset--font-family--pomm-sans);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
}

.wp-block-post-terms a {
	text-decoration: none;
}

@media (max-width: 700px) {
	body {
		background-size: 48px 48px;
	}
}

/* ==========================================================================
   POMM REDESIGN (v1.0.38)
   Ported from the pomm-redesign prototype. Scoped to .pomm-rd-* so the
   article/page templates keep their existing typography untouched.
   ========================================================================== */

:root {
	--pomm-rd-ink: #11100f;
	--pomm-rd-cream: #f4efe5;
	--pomm-rd-paper: #fffdf7;
	--pomm-rd-red: #ef3b25;
	--pomm-rd-pink: #f5a6c6;
	--pomm-rd-line: rgba(17, 16, 15, 0.25);
	--pomm-rd-serif: Georgia, "Times New Roman", serif;
	--pomm-rd-sans: Arial, Helvetica, sans-serif;
}

body {
	background: var(--pomm-rd-paper);
}

.pomm-rd-front,
.pomm-rd-header,
.pomm-rd-footer {
	color: var(--pomm-rd-ink);
	font-family: var(--pomm-rd-sans);
}

.pomm-rd-front a:hover,
.pomm-rd-header a:hover,
.pomm-rd-footer a:hover {
	color: inherit;
}

.pomm-rd-front img,
.pomm-rd-header img,
.pomm-rd-footer img {
	display: block;
	max-width: 100%;
}

/* --- shared bits -------------------------------------------------------- */

.pomm-rd-eyebrow,
.pomm-rd-front .wp-block-post-terms {
	align-items: center;
	color: var(--pomm-rd-ink);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--pomm-rd-sans);
	font-size: 11px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.13em;
	line-height: 1;
	margin: 0 0 22px;
	text-transform: uppercase;
}

.pomm-rd-front .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.pomm-rd-front .wp-block-post-terms a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pomm-rd-read-link a,
.pomm-rd-front .wp-block-read-more {
	background: none;
	border: 0;
	border-bottom: 2px solid currentColor;
	border-radius: 0;
	display: inline-block;
	font-family: var(--pomm-rd-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	padding: 10px 0 7px;
	text-decoration: none;
	text-transform: uppercase;
	width: fit-content;
}

.pomm-rd-read-link {
	margin: 0;
}

.pomm-rd-section {
	padding-block: clamp(74px, 9vw, 145px);
}

.pomm-rd-section-heading {
	align-items: baseline;
	margin-bottom: 34px;
}

.pomm-rd-section-heading h2 {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(45px, 5vw, 78px);
	font-weight: 400;
	letter-spacing: -0.045em;
	line-height: 0.9;
	margin: 0;
}

.pomm-rd-section-link {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.pomm-rd-section-link a {
	text-decoration: none;
}

.pomm-rd-section-heading-bordered {
	border-bottom: 1px solid var(--pomm-rd-ink);
	padding-bottom: 24px;
}

/* --- topline + masthead + nav ------------------------------------------- */

.pomm-rd-header {
	background: var(--pomm-rd-cream);
	border-bottom: 1px solid var(--pomm-rd-ink);
	padding-block: 0;
}

.pomm-rd-topline {
	align-items: center;
	background: var(--pomm-rd-red);
	color: #fff;
	display: flex;
	font-size: 10px;
	font-weight: 700;
	justify-content: space-between;
	letter-spacing: 0.14em;
	min-height: 32px;
	padding: 7px 24px 6px;
	text-transform: uppercase;
}

/* Flex-wrap, not a rigid two-column grid. A grid forces both children onto
   one line however narrow the window gets, which is how the abonner button
   ended up running off the right edge. Wrapping lets the actions drop under
   the logo instead. Height scales too - 184px around a small logo is a lot of
   empty band. */
.pomm-rd-masthead {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	justify-content: space-between;
	min-height: clamp(104px, 13vw, 184px);
}

.pomm-rd-brand {
	flex: 0 1 auto;
	min-width: 0;
}

/* The nav strip is now category links only, so it no longer needs to spread
   its children apart. */
.pomm-rd-nav {
	justify-content: flex-start;
}

.pomm-rd-brand {
	width: clamp(250px, 36vw, 530px);
}

.pomm-rd-descriptor {
	align-self: center;
	font-family: var(--pomm-rd-serif);
	font-size: clamp(17px, 1.5vw, 23px);
	font-style: italic;
	line-height: 1.06;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

.pomm-rd-brand img,
.pomm-rd-brand.wp-block-site-logo img {
	height: auto;
	width: 100%;
}

.pomm-rd-nav {
	align-items: stretch;
	border-top: 1px solid var(--pomm-rd-ink);
	gap: 0;
	min-height: 55px;
}

.pomm-rd-nav-links .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
}

.pomm-rd-nav-links .wp-block-navigation-item__content {
	align-items: center;
	border-right: 1px solid var(--pomm-rd-ink);
	display: flex;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0 24px;
	text-decoration: none;
	text-transform: lowercase;
	transition: background 200ms ease;
}

.pomm-rd-nav-links .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	border-left: 1px solid var(--pomm-rd-ink);
}

.pomm-rd-nav-links .wp-block-navigation-item__content:hover {
	background: var(--pomm-rd-pink);
}

/* Søk and abonner now live in the masthead, opposite the logo. Heights are
   explicit rather than min-height:100%: that only worked because the old
   parent - the 55px nav strip - had a height to stretch against. In the 184px
   masthead it would have made both controls absurdly tall. */
.pomm-rd-nav-actions {
	align-items: center;
	flex: 0 0 auto;
	gap: 14px;
	margin-left: auto;
}

.pomm-rd-search .wp-block-search__button {
	align-items: center;
	background: transparent;
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 0;
	color: var(--pomm-rd-ink);
	display: flex;
	height: 46px;
	padding: 0 20px;
}

.pomm-rd-search .wp-block-search__button:hover {
	background: var(--pomm-rd-pink);
}

/* Knappen er rosa, ikke svart. Svart var den tyngste flata i menylinja og
   trakk blikket til seg før ordmerket - rosaen sier det samme uten å rope,
   og er den ene fargen som ikke alt er i bruk der oppe.

   Teksten er svart og ikke hvit. Hvitt på #f5a6c6 måler 1,9:1 og er
   uleselig; svart måler over 12:1. Ramma blir stående av samme grunn som før:
   i rosa modus er grunnen selv rosa, og uten ramma ville fyllet forsvunnet
   i den. */
.pomm-rd-subscribe .wp-block-button__link {
	align-items: center;
	background: var(--pomm-rd-pink);
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 0;
	color: var(--pomm-rd-ink);
	display: flex;
	font-size: 13px;
	font-weight: 700;
	height: 46px;
	justify-content: center;
	letter-spacing: 0.03em;
	padding: 0 24px;
	text-transform: lowercase;
	width: 130px;
}

/* Svart ved hover, der den var svart før. Rødt over rosa er to nabofarger som
   bytter plass, og skiftet knapt merkes; svart er utvetydig. */
.pomm-rd-subscribe .wp-block-button__link:hover {
	background: var(--pomm-rd-ink);
	color: #fff;
}

/* --- hero ---------------------------------------------------------------- */

.pomm-rd-hero-query .wp-block-post-template,
.pomm-rd-story-grid .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Høyden settes her, ikke av teksten. Med `min-height: 720px` mot en
   bildespalte på rundt 1000px måtte bildet bli nesten kvadratisk - 1000 x 720
   er 1,4:1. En fast, lavere høyde gjør raden liggende: ca. 1000 x 500, altså
   omtrent 2:1. Teksten under er strammet inn så den får plass i den høyden i
   stedet for å presse den opp igjen. */
.pomm-rd-hero {
	border-inline: 1px solid var(--pomm-rd-ink);
	display: grid;
	grid-template-columns: minmax(0, 1.85fr) minmax(360px, 0.95fr);
	/* min-height, ikke height. Med fast høyde ble teksten skåret tvers gjennom
	   bokstavene i det den trengte én linje mer enn raden hadde. Nå er tallet
	   en normalhøyde raden hviler på, og linjeklippene under sørger for at den
	   ikke kan vokse langt forbi den. Bildet blir liggende i praksis, uten at
	   noe blir amputert i kanten. */
	min-height: clamp(420px, 35vw, 520px);
}

.pomm-rd-hero-image {
	border-right: 1px solid var(--pomm-rd-ink);
	margin: 0;
	min-height: 0;
	overflow: hidden;
	position: relative;
}

.pomm-rd-hero-image a,
.pomm-rd-hero-image img {
	height: 100%;
	width: 100%;
}

.pomm-rd-hero-image img {
	object-fit: cover;
	object-position: center 45%;
	transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pomm-rd-hero-image:hover img,
.pomm-rd-story-image:hover img {
	transform: scale(1.025);
}

.pomm-rd-hero-image::after,
.pomm-rd-story-image::after {
	align-items: center;
	background: var(--pomm-rd-pink);
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 50%;
	display: flex;
	font-size: 12px;
	font-weight: 700;
	height: 42px;
	justify-content: center;
	left: 14px;
	position: absolute;
	top: 14px;
	width: 42px;
	z-index: 2;
}

.pomm-rd-hero-image::after {
	content: "01";
}

.pomm-rd-hero-copy {
	background: var(--pomm-rd-cream);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 0;
	padding: clamp(26px, 2.8vw, 46px) clamp(26px, 3vw, 48px);
}

/* Ingen overflow: hidden her. Det var denne som skar gjennom bokstavene:
   klipping på en beholder kjenner ikke tekstlinjer og kutter der høyden tar
   slutt. Teksten begrenses av linjeklipp på tittelen og ingressen i stedet -
   de kutter ved en hel linje og setter prikker. */
.pomm-rd-hero-head {
	min-height: 0;
}

/* Lenken er det siste som skal vike. Uten dette krymper flex den bort før
   teksten over blir klippet, og da forsvinner utgangen fra saken. */
.pomm-rd-hero-copy .pomm-rd-read-link {
	flex-shrink: 0;
	margin-top: 20px;
}

.pomm-rd-eyebrow::before,
.pomm-rd-hero-copy .wp-block-post-terms::before {
	background: var(--pomm-rd-red);
	border-radius: 50% 50% 50% 0;
	content: "";
	height: 10px;
	transform: rotate(-45deg);
	width: 10px;
}

.pomm-rd-hero-title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	font-family: var(--pomm-rd-serif);
	/* Målt mot en spalte som bare er ~34 % av siden, ikke mot siden selv. */
	font-size: clamp(30px, 2.8vw, 46px);
	font-weight: 400;
	letter-spacing: -0.05em;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	line-height: 0.98;
	/* Klippeboksen til `overflow: hidden` er polstringskanten, ikke tekstlinja.
	   Med `line-height: 0.98` er linjeboksen lavere enn Georgia sine bokstaver
	   (stigning + nedheng = ~1,14 em), så g-, j- og y-halene stakk ut under
	   kanten og ble skåret av - «Hele Norges konge» mistet begge halene. Å og
	   Ø har samme problem oppe. Polstringa gir halene plass innenfor klippet,
	   og den negative margen tar plassen tilbake så ingressen under ikke
	   flytter seg. Linjeklippet teller fortsatt fire hele linjer. */
	margin: -0.12em 0;
	overflow: hidden;
	padding-block: 0.12em;
}

.pomm-rd-hero-title a {
	text-decoration: none;
}

.pomm-rd-dek {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.4;
	margin: 18px 0 0;
	max-width: 46ch;
	min-height: 0;
}

/* Klippet må stå på avsnittet, ikke på wrapperen rundt det. Utdragsblokken
   lager <div class="pomm-rd-dek"><p>teksten</p></div>, og en -webkit-box som
   bare inneholder ett blokkelement har ingen tekstlinjer å telle - da klipper
   den ingenting, og teksten renner ned i lenken under. Her sitter det på
   avsnittet, som faktisk har linjene, og da kommer prikkene av seg selv. */
.pomm-rd-dek p {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	/* Fire linjer. Blir ingressen lengre, kuttes den ved fjerde linje og får
	   prikker - i stedet for å presse raden nedover og gjøre bildet høyere. */
	-webkit-line-clamp: 4;
	line-clamp: 4;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pomm-rd-dek .wp-block-post-excerpt__more-text {
	display: none;
}

@keyframes pomm-rd-drift {
	to {
		transform: translateX(-50%);
	}
}

/* --- story grid (front page "Nyeste") ------------------------------------ */

.pomm-rd-latest .wp-block-post-template {
	border: 1px solid var(--pomm-rd-ink);
	counter-reset: pomm-rd-num 1;
	display: grid;
	grid-template-columns: 1.36fr 0.78fr 0.86fr;
}

.pomm-rd-latest .wp-block-post {
	counter-increment: pomm-rd-num;
	min-width: 0;
}

.pomm-rd-latest .wp-block-post + .wp-block-post {
	border-left: 1px solid var(--pomm-rd-ink);
}

.pomm-rd-story-card {
	background: var(--pomm-rd-paper);
	height: 100%;
}

.pomm-rd-story-image {
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid var(--pomm-rd-ink);
	margin: 0;
	overflow: hidden;
	position: relative;
}

.pomm-rd-story-image::after {
	content: counter(pomm-rd-num, decimal-leading-zero);
}

.pomm-rd-story-image a,
.pomm-rd-story-image img {
	height: 100%;
	width: 100%;
}

.pomm-rd-story-image img {
	object-fit: cover;
	transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pomm-rd-latest .wp-block-post:nth-child(2) .pomm-rd-story-image {
	aspect-ratio: 3 / 4.2;
}

.pomm-rd-latest .wp-block-post:nth-child(3) .pomm-rd-story-image {
	aspect-ratio: 1 / 1;
}

.pomm-rd-story-copy {
	padding: 24px 24px 32px;
}

.pomm-rd-story-copy .wp-block-post-terms {
	margin-bottom: 12px;
}

.pomm-rd-story-copy .wp-block-post-title {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(26px, 2.4vw, 42px);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0;
}

.pomm-rd-story-copy .wp-block-post-title a {
	text-decoration: none;
}

.pomm-rd-story-copy .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.pomm-rd-story-copy .wp-block-post-excerpt {
	font-size: 14px;
	line-height: 1.45;
	margin: 18px 0 0;
	max-width: 42ch;
}

.pomm-rd-story-copy .wp-block-post-excerpt p {
	margin: 0;
}

.pomm-rd-story-copy .wp-block-post-excerpt__more-text {
	display: none;
}

/* --- feature ("fra arkivet") --------------------------------------------- */

.pomm-rd-feature-query .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pomm-rd-feature {
	align-items: center;
	display: grid;
	gap: clamp(50px, 8vw, 130px);
	grid-template-columns: 1.2fr 0.8fr;
}

.pomm-rd-feature-visual {
	padding: 0 0 46px 48px;
	position: relative;
}

.pomm-rd-feature-image {
	aspect-ratio: 1.18 / 1;
	border: 1px solid var(--pomm-rd-ink);
	box-shadow: -18px 18px 0 var(--pomm-rd-pink);
	margin: 0;
	overflow: hidden;
}

.pomm-rd-feature-image a,
.pomm-rd-feature-image img {
	height: 100%;
	width: 100%;
}

.pomm-rd-feature-image img {
	object-fit: cover;
}

.pomm-rd-sticker {
	align-items: center;
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 50%;
	display: flex;
	font-size: 11px;
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1.05;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
}

.pomm-rd-sticker-pink {
	background: var(--pomm-rd-pink);
	bottom: 5px;
	height: 104px;
	left: 0;
	transform: rotate(-13deg);
	width: 104px;
}

.pomm-rd-sticker-red {
	background: var(--pomm-rd-red);
	color: #fff;
	height: 78px;
	right: -18px;
	top: 30px;
	transform: rotate(14deg);
	width: 78px;
}

.pomm-rd-feature-copy .wp-block-post-title {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(48px, 5vw, 78px);
	font-weight: 400;
	letter-spacing: -0.052em;
	line-height: 0.96;
	margin: 0;
}

.pomm-rd-feature-copy .wp-block-post-title a {
	text-decoration: none;
}

.pomm-rd-feature-copy .wp-block-post-excerpt {
	font-family: var(--pomm-rd-serif);
	font-size: 20px;
	line-height: 1.45;
	margin: 30px 0 42px;
	max-width: 42ch;
}

.pomm-rd-feature-copy .wp-block-post-excerpt p {
	margin: 0;
}

.pomm-rd-feature-copy .wp-block-post-excerpt__more-text {
	display: none;
}

/* --- newsletter ---------------------------------------------------------- */

.pomm-rd-newsletter {
	background: var(--pomm-rd-pink);
	border-block: 1px solid var(--pomm-rd-ink);
	padding-block: 0;
}

.pomm-rd-newsletter-grid {
	align-items: center;
	display: grid;
	gap: 8vw;
	grid-template-columns: 0.95fr 1.05fr;
	min-height: 440px;
}

.pomm-rd-newsletter h2 {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(56px, 6vw, 92px);
	font-weight: 400;
	letter-spacing: -0.06em;
	line-height: 0.9;
	margin: 0;
}

.pomm-rd-newsletter-form .wp-block-jetpack-subscriptions__form-elements,
.pomm-rd-newsletter-form form {
	align-items: end;
	border-bottom: 2px solid var(--pomm-rd-ink);
	display: grid;
	gap: 0;
	grid-template-columns: 1fr auto;
}

.pomm-rd-newsletter-form input[type="email"] {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--pomm-rd-serif);
	font-size: 26px;
	min-width: 0;
	outline: none;
	padding: 15px 0;
}

.pomm-rd-newsletter-form input[type="email"]::placeholder {
	color: rgba(17, 16, 15, 0.55);
}

.pomm-rd-newsletter-form button {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--pomm-rd-ink);
	cursor: pointer;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 15px 0 15px 20px;
	text-transform: uppercase;
}

.pomm-rd-newsletter-note {
	font-size: 11px;
	margin: 14px 0 0;
}

/* --- footer -------------------------------------------------------------- */

.pomm-rd-footer {
	background: var(--pomm-rd-cream);
	padding-block: 0;
}

.pomm-rd-footer-grid {
	display: grid;
	gap: 30px 8vw;
	grid-template-columns: 1fr 1fr;
	min-height: 390px;
	padding-block: 72px 35px;
}

.pomm-rd-footer-logo {
	width: min(420px, 80%);
}

.pomm-rd-footer-logo img {
	height: auto;
	width: 100%;
}

.pomm-rd-footer-blurb {
	font-family: var(--pomm-rd-serif);
	font-size: 20px;
	line-height: 1.4;
	margin: 0;
	max-width: 35ch;
}

.pomm-rd-footer-links {
	align-items: flex-end;
	font-size: 12px;
	font-weight: 700;
	gap: 24px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pomm-rd-footer-nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.pomm-rd-copyright {
	border-top: 1px solid var(--pomm-rd-ink);
	font-size: 10px;
	grid-column: 1 / -1;
	letter-spacing: 0.12em;
	margin: 0;
	padding-top: 20px;
	text-transform: uppercase;
}

/* --- archive / category / search ----------------------------------------- */

.pomm-rd-archive {
	padding-bottom: clamp(74px, 9vw, 145px);
}

.pomm-rd-archive-head {
	border-bottom: 1px solid var(--pomm-rd-ink);
	padding-block: clamp(52px, 6vw, 96px) 28px;
}

.pomm-rd-archive-head .wp-block-query-title {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(52px, 7vw, 112px);
	font-weight: 400;
	letter-spacing: -0.06em;
	line-height: 0.88;
	margin: 0;
	text-transform: lowercase;
}

.pomm-rd-archive-dek {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(18px, 1.6vw, 23px);
	line-height: 1.4;
	margin: 24px 0 0;
	max-width: 52ch;
}

.pomm-rd-archive-search {
	margin-top: 28px;
	max-width: 420px;
}

.pomm-rd-archive-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 0;
}

.pomm-rd-archive-grid {
	margin-top: 0;
}

.pomm-rd-archive-grid .wp-block-post-template {
	border-inline: 1px solid var(--pomm-rd-ink);
	border-bottom: 1px solid var(--pomm-rd-ink);
	/* --pomm-num-start is set in PHP on paginated archives so page two carries
	   on from 13 rather than restarting at 01. */
	counter-reset: pomm-rd-num var(--pomm-num-start, 0);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.pomm-rd-archive-grid .wp-block-post {
	border-bottom: 1px solid var(--pomm-rd-ink);
	border-right: 1px solid var(--pomm-rd-ink);
	counter-increment: pomm-rd-num;
	min-width: 0;
}

.pomm-rd-archive-grid .wp-block-post:nth-child(3n) {
	border-right: 0;
}

.pomm-rd-archive-grid .wp-block-post:last-child {
	border-bottom: 0;
}

/* lead story spans the full width so the archive reads as a magazine front,
not a uniform blog list */
.pomm-rd-archive-grid .wp-block-post:first-child {
	border-right: 0;
	grid-column: 1 / -1;
}

.pomm-rd-archive-grid .wp-block-post:first-child .pomm-rd-story-card {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
}

.pomm-rd-archive-grid .wp-block-post:first-child .pomm-rd-story-image {
	aspect-ratio: 16 / 10;
	border-bottom: 0;
	border-right: 1px solid var(--pomm-rd-ink);
}

.pomm-rd-archive-grid .wp-block-post:first-child .pomm-rd-story-copy {
	align-self: center;
	padding: clamp(24px, 3vw, 46px);
}

.pomm-rd-archive-grid .wp-block-post:first-child .wp-block-post-title {
	font-size: clamp(38px, 4vw, 66px);
}

.pomm-rd-archive-grid .wp-block-post:first-child .wp-block-post-excerpt {
	font-family: var(--pomm-rd-serif);
	font-size: 19px;
}

.pomm-rd-pagination {
	align-items: center;
	border-top: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-top: 40px;
	text-transform: uppercase;
}

.pomm-rd-pagination a,
.pomm-rd-pagination .page-numbers {
	text-decoration: none;
}

.pomm-rd-pagination .current {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
	/* Stablet: den faste radhøyden ville klemt teksten, så cellene får måle
	   seg selv igjen. Bildet beholder et liggende format i stedet for den
	   gamle 60vw-klossen, som ble nesten kvadratisk. */
	.pomm-rd-hero {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}

	.pomm-rd-hero-image {
		aspect-ratio: 16 / 9;
		border-bottom: 1px solid var(--pomm-rd-ink);
		border-right: 0;
		min-height: 0;
	}

	.pomm-rd-hero-copy {
		min-height: 0;
		overflow: visible;
	}

	.pomm-rd-hero-head {
		overflow: visible;
	}

	.pomm-rd-hero-title {
		-webkit-line-clamp: 6;
		line-clamp: 6;
	}

	.pomm-rd-dek p {
		-webkit-line-clamp: 6;
		line-clamp: 6;
	}

	.pomm-rd-latest .wp-block-post-template {
		grid-template-columns: 1fr 1fr;
	}

	.pomm-rd-latest .wp-block-post:nth-child(1) {
		grid-column: 1 / -1;
	}

	.pomm-rd-latest .wp-block-post:nth-child(2) {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}

	.pomm-rd-latest .wp-block-post:nth-child(3) {
		border-top: 1px solid var(--pomm-rd-ink);
	}

	.pomm-rd-archive-grid .wp-block-post-template {
		grid-template-columns: 1fr 1fr;
	}

	.pomm-rd-archive-grid .wp-block-post:nth-child(3n) {
		border-right: 1px solid var(--pomm-rd-ink);
	}

	.pomm-rd-archive-grid .wp-block-post:nth-child(2n) {
		border-right: 0;
	}

	.pomm-rd-feature {
		grid-template-columns: 1fr;
	}

	.pomm-rd-newsletter-grid {
		gap: 45px;
		grid-template-columns: 1fr;
		padding-block: 70px;
	}
}

@media (max-width: 720px) {
	.pomm-rd-topline {
		padding-inline: 12px;
	}

	.pomm-rd-topline span:last-child {
		display: none;
	}

	.pomm-rd-brand {
		width: 215px;
	}

	.pomm-rd-descriptor {
		display: none;
	}

	.pomm-rd-nav {
		min-height: 0;
	}

	.pomm-rd-nav-links .wp-block-navigation-item__content {
		border: 0;
		border-bottom: 1px solid var(--pomm-rd-ink);
		min-height: 48px;
	}

	.pomm-rd-nav-links .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
		border-left: 0;
	}

	.pomm-rd-hero {
		border-inline: 0;
	}

	.pomm-rd-hero-image {
		min-height: 0;
	}

	.pomm-rd-hero-copy {
		min-height: 0;
		padding: 30px 22px;
	}

	.pomm-rd-hero-title {
		font-size: clamp(48px, 14vw, 69px);
	}

	.pomm-rd-dek {
		font-size: 19px;
	}

	.pomm-rd-section {
		padding-block: 72px;
	}

	.pomm-rd-section-heading h2 {
		font-size: 51px;
	}

	.pomm-rd-latest .wp-block-post-template,
.pomm-rd-archive-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.pomm-rd-latest .wp-block-post,
.pomm-rd-archive-grid .wp-block-post {
		border-left: 0;
		border-right: 0;
		grid-column: auto;
	}

	.pomm-rd-latest .wp-block-post + .wp-block-post {
		border-top: 1px solid var(--pomm-rd-ink);
	}

	.pomm-rd-archive-grid .wp-block-post:first-child .pomm-rd-story-card {
		grid-template-columns: 1fr;
	}

	.pomm-rd-archive-grid .wp-block-post:first-child .pomm-rd-story-image {
		border-bottom: 1px solid var(--pomm-rd-ink);
		border-right: 0;
	}

	.pomm-rd-latest .wp-block-post:nth-child(2) .pomm-rd-story-image {
		aspect-ratio: 4 / 4.6;
	}

	.pomm-rd-latest .wp-block-post:nth-child(3) .pomm-rd-story-image {
		aspect-ratio: 4 / 3;
	}

	.pomm-rd-story-copy {
		padding: 20px 18px 28px;
	}

	.pomm-rd-story-copy .wp-block-post-title {
		font-size: 35px;
	}

	.pomm-rd-archive-head .wp-block-query-title {
		font-size: clamp(46px, 15vw, 68px);
	}

	.pomm-rd-feature {
		gap: 45px;
	}

	.pomm-rd-feature-visual {
		padding: 0 0 30px 22px;
	}

	.pomm-rd-feature-image {
		box-shadow: -10px 10px 0 var(--pomm-rd-pink);
	}

	.pomm-rd-sticker-pink {
		height: 92px;
		width: 92px;
	}

	.pomm-rd-sticker-red {
		height: 74px;
		right: -4px;
		width: 74px;
	}

	.pomm-rd-feature-copy .wp-block-post-title {
		font-size: 51px;
	}

	.pomm-rd-newsletter h2 {
		font-size: 58px;
	}

	.pomm-rd-newsletter-form .wp-block-jetpack-subscriptions__form-elements,
.pomm-rd-newsletter-form form {
		grid-template-columns: 1fr;
	}

	.pomm-rd-newsletter-form button {
		padding-left: 0;
		text-align: left;
	}

	.pomm-rd-footer-grid {
		grid-template-columns: 1fr;
		min-height: 450px;
	}

	.pomm-rd-footer-logo {
		width: 250px;
	}

	.pomm-rd-footer-links {
		align-items: flex-start;
	}

	.pomm-rd-copyright {
		grid-column: auto;
	}
}

/* --- layout shell + motif corrections ------------------------------------ */

/* The prototype's shell: min(1440px,
100% - 48px). Declared explicitly so the
   masthead,
nav and footer line up regardless of theme.json root padding. */
.pomm-rd-header,
.pomm-rd-footer,
.pomm-rd-topline-wrap {
	padding-inline: 0;
}

.pomm-rd-masthead,
.pomm-rd-nav,
.pomm-rd-footer-grid {
	margin-inline: auto;
	max-width: none;
	width: min(1440px, calc(100% - 48px));
}

/* Jetpack Subscriptions renders its own wrapper markup; strip the plugin
   chrome so it inherits the newsletter section's styling. */
.pomm-rd-newsletter-form .wp-block-jetpack-subscriptions__container,
.pomm-rd-newsletter-form .wp-block-jetpack-subscriptions__form {
	margin: 0;
	padding: 0;
}

.pomm-rd-newsletter-form p {
	margin: 0;
}

@media (max-width: 720px) {
	.pomm-rd-masthead,
.pomm-rd-nav,
.pomm-rd-footer-grid {
		width: calc(100% - 24px);
	}
}

.pomm-rd-archive-head h1 {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(52px, 7vw, 112px);
	font-weight: 400;
	letter-spacing: -0.06em;
	line-height: 0.88;
	margin: 0;
}

/* --- v1.0.39: match the prototype screenshot more closely ---------------- */

.pomm-rd-footer-nav .wp-block-navigation__container {
	gap: 24px;
}

.pomm-rd-footer-nav .wp-block-navigation-item__content {
	font-family: var(--pomm-rd-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.pomm-rd-footer-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.pomm-rd-search .wp-block-search__button {
	font-family: var(--pomm-rd-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: lowercase;
}

/* The prototype clips card excerpts at the grid edge; clamp instead so the
   cards stay tidy without cutting a line in half. */
.pomm-rd-latest .wp-block-post-excerpt p,
.pomm-rd-archive-grid .wp-block-post:not(:first-child) .wp-block-post-excerpt p {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	overflow: hidden;
}

/* --- v1.0.40: topline is now an empty red rule ---------------------------- */

.pomm-rd-topline {
	display: block;
	min-height: 10px;
	padding: 0;
}

/* --- v1.0.41: the pink band is now a live headline strip ------------------
   Replaces the decorative "holder det ekte" marquee. Pulls posts 9-14,
i.e.
   stories that appear nowhere else on the front page {
	align-items: stretch;
	gap: 0;
	min-height: 56px;
	overflow: hidden;
}

/* If there is nothing at that depth in the archive yet {
	display: none;
}

/* ==========================================================================
   v1.0.43 - ARTICLE + CATEGORY LANDING
   Ported from the two mockups. The article body is a three-column shell
   (share rail / measure / brief rail) that collapses to one column.
   ========================================================================== */

/* --- article head -------------------------------------------------------- */

.pomm-rd-article-head {
	padding-block: clamp(34px, 4vw, 58px) clamp(24px, 3vw, 38px);
}

.pomm-rd-crumbs {
	gap: 8px;
	margin-bottom: clamp(28px, 4vw, 52px);
}

.pomm-rd-crumbs p {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0;
	text-transform: uppercase;
}

.pomm-rd-crumbs a {
	text-decoration: none;
}

.pomm-rd-article-eyebrow {
	margin-bottom: 18px;
}

.pomm-rd-article-title {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(44px, 5.4vw, 88px);
	font-weight: 400;
	letter-spacing: -0.055em;
	line-height: 0.95;
	margin: 0;
	max-width: 20ch;
}

.pomm-rd-article-dek {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.36;
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 46ch;
}

.pomm-rd-article-dek .wp-block-post-excerpt__more-text {
	display: none;
}

.pomm-rd-byline {
	align-items: center;
	border-block: 1px solid var(--pomm-rd-ink);
	font-size: 10px;
	font-weight: 700;
	gap: 26px;
	letter-spacing: 0.14em;
	margin-top: clamp(26px, 3vw, 40px);
	padding-block: 14px;
	text-transform: uppercase;
}

.pomm-rd-byline p,
.pomm-rd-byline div {
	margin: 0;
}

.pomm-rd-byline a {
	text-decoration: none;
}

.pomm-rd-byline .wp-block-post-author-name::before {
	content: "av ";
}

/* --- lead image + caption ------------------------------------------------ */

.pomm-rd-article-media {
	padding-block: 0;
}

.pomm-rd-article-image {
	margin: 0;
}

.pomm-rd-article-image img {
	height: auto;
	max-height: 76vh;
	object-fit: cover;
	width: 100%;
}

/* The caption sits in a group marked alignwide, but its parent uses flow
   layout, where alignwide means nothing - so it inherited the parent's
   full-bleed negative margin and hung off the left edge of the screen. Width
   and centring are stated here instead, using the same root padding and wide
   size WordPress gives the article head above it, so the two line up exactly. */
.pomm-rd-figcaption-wrap {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: none;
	width: min(
		var(--wp--style--global--wide-size, 1440px),
		calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem))
	);
}

.pomm-rd-figcaption {
	color: rgba(17, 16, 15, 0.62);
	font-size: 10px;
	letter-spacing: 0.04em;
	margin: 10px 0 0;
	max-width: 70ch;
}

/* --- three-column body shell --------------------------------------------- */

.pomm-rd-article-body {
	align-items: start;
	display: grid;
	gap: clamp(24px, 4vw, 64px);
	grid-template-columns: 72px minmax(0, 1fr) 210px;
	padding-block: clamp(44px, 6vw, 86px);
}

.pomm-rd-article-rail {
	position: sticky;
	top: 24px;
}

.pomm-rd-share-label,
.pomm-rd-brief-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.pomm-rd-share-link {
	align-items: center;
	border: 1px solid var(--pomm-rd-ink);
	display: flex;
	font-size: 13px;
	font-weight: 700;
	height: 38px;
	justify-content: center;
	margin-bottom: -1px;
	text-decoration: none;
	transition: background 200ms ease;
	width: 38px;
}

.pomm-rd-share-link:hover {
	background: var(--pomm-rd-pink);
}

.pomm-rd-brief {
	border-top: 2px solid var(--pomm-rd-ink);
	padding-top: 14px;
}

.pomm-rd-brief p {
	font-size: 13px;
	line-height: 1.45;
	margin: 0 0 10px;
}

.pomm-rd-brief .pomm-rd-brief-label {
	font-size: 10px;
}

/* --- article content ----------------------------------------------------- */

.pomm-rd-article-content .wp-block-post-content {
	font-family: var(--pomm-rd-serif);
	font-size: 19px;
	line-height: 1.6;
}

/* Her satt det egentlige taket på bildebredden.

   `.pomm-rd-article-content` er en constrained gruppe, og innholdsblokka er et
   vanlig barn av den - uten `alignwide` eller `alignfull`. WordPress' regel

       .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
           { max-width: var(--wp--style--global--content-size) }

   ga derfor hele innholdsboksen `max-width: 760px`. Et `alignwide`-bilde inni
   den får riktignok `max-width: 1440px`, men det hjelper ikke når forelderen
   måler 760: bildet ble 760 uansett justering. Det er derfor «Ingen» og «Bred
   bredde» ga nøyaktig samme bilde, på alle skjermbredder.

   Taket løftes av innholdsboksen, ikke av teksten. Innholdsblokka er selv
   constrained, så avsnittene får fortsatt sine 760 piksler og står midtstilt i
   spalta - det er bare bildene som får lov til å bruke bredden.

   To klasser slår WordPress' ene, så `!important` trengs ikke. Auto-margene i
   samme regel har `!important`, men de gjør ingenting på en boks uten
   maksbredde. */
.pomm-rd-article-content > .wp-block-post-content {
	max-width: none;
}

.pomm-rd-article-content .wp-block-post-content > p {
	margin: 0 0 1.35em;
}

/* Red drop cap on the opening paragraph,
as in the mockup. */
.pomm-rd-article-content .wp-block-post-content > p:first-of-type::first-letter {
	color: var(--pomm-rd-red);
	float: left;
	font-family: var(--pomm-rd-serif);
	font-size: 4.4em;
	line-height: 0.78;
	margin: 0.04em 0.09em 0 0;
}

.pomm-rd-article-content .wp-block-post-content h2 {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 2em 0 0.7em;
	text-align: left;
}

.pomm-rd-article-content .wp-block-post-content h3 {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 400;
	margin: 1.8em 0 0.6em;
}

.pomm-rd-article-content figure {
	margin: 2.2em 0;
}

/* Bildet skal stå midt i spalta, ikke klistret mot venstre kant.

   Da innholdsboksen mistet taket sitt i 1.38.49, ble figurene like breie som
   spalta - men bildet inni beholder sin egen pikselbredde. Er fila smalere enn
   spalta, blir resten av figuren tom plass på høyre side, og bildet ser
   feilstilt ut ved siden av den midtstilte teksten.

   `alignfull` er dessuten unntatt i WordPress' egen sentreringsregel

       .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
           { margin-left: auto !important; margin-right: auto !important }

   så full bredde-bilder får ingen auto-marger derfra. De får i stedet negative
   marger av `.has-global-padding > .alignfull`, som drar dem ut forbi tekstens
   venstrekant. Tre klasser her slår begge WordPress-reglene.

   `width: fit-content` krymper figuren til bildet, slik at bildeteksten
   fortsatt følger bildets venstrekant i stedet for å bre seg over hele spalta.
   Bilder som er breiere enn spalta er urørt: `max-width` holder dem på 100 %,
   og da er det ingen ledig plass å fordele. */
.pomm-rd-article-content .wp-block-post-content .wp-block-image {
	margin-inline: auto;
	max-width: 100%;
	width: fit-content;
}

/* Body-image captions. Selector kept deliberately specific: WordPress prints
   its own caption sizing as global styles, and a single-class rule here does
   not reliably win that cascade. */
.pomm-rd-article-content figcaption,
.pomm-rd-article-content .wp-block-post-content figcaption,
.pomm-rd-article-content .wp-block-post-content .wp-element-caption {
	color: rgba(17, 16, 15, 0.6);
	font-family: var(--pomm-rd-sans);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin-top: 10px;
	text-align: left;
}

/* Pink pull quote. Style both quote blocks so either one lands correctly. */
.pomm-rd-article-content .wp-block-pullquote,
.pomm-rd-article-content .wp-block-quote {
	background: var(--pomm-rd-pink);
	border: 0;
	border-left: 0;
	font-family: var(--pomm-rd-serif);
	font-size: clamp(21px, 2.2vw, 29px);
	font-style: normal;
	line-height: 1.24;
	margin: 2.4em 0;
	padding: clamp(26px, 3vw, 42px);
	text-align: left;
}

.pomm-rd-article-content .wp-block-pullquote p,
.pomm-rd-article-content .wp-block-quote p {
	font-size: inherit;
	margin: 0;
}

.pomm-rd-article-content .wp-block-pullquote cite,
.pomm-rd-article-content .wp-block-quote cite {
	display: block;
	font-family: var(--pomm-rd-sans);
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-top: 16px;
	text-transform: uppercase;
}

/* --- tags + author box --------------------------------------------------- */

.pomm-rd-tags {
	border-top: 1px solid var(--pomm-rd-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 3em;
	padding-top: 2em;
}

.pomm-rd-tags a {
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 999px;
	font-family: var(--pomm-rd-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 7px 15px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 200ms ease;
}

.pomm-rd-tags a:hover {
	background: var(--pomm-rd-pink);
}

/* --- "Les videre" grid on the article ------------------------------------ */

.pomm-rd-readnext {
	border-top: 1px solid var(--pomm-rd-ink);
	padding-block: clamp(52px, 6vw, 90px);
}

.pomm-rd-readnext .wp-block-post-template {
	border: 1px solid var(--pomm-rd-ink);
	counter-reset: pomm-rd-num;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pomm-rd-readnext .wp-block-post {
	counter-increment: pomm-rd-num;
	min-width: 0;
}

.pomm-rd-readnext .wp-block-post + .wp-block-post {
	border-left: 1px solid var(--pomm-rd-ink);
}

.pomm-rd-readnext .pomm-rd-story-image {
	aspect-ratio: 4 / 3;
}

.pomm-rd-readnext .pomm-rd-story-image::after {
	content: none;
}

.pomm-rd-readnext .wp-block-post-title {
	font-size: clamp(20px, 1.8vw, 26px);
}

/* --- category landing ---------------------------------------------------- */

.pomm-rd-archive-headline {
	align-items: start;
	display: grid;
	gap: clamp(20px, 5vw, 90px);
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.pomm-rd-archive-headline .wp-block-query-title {
	margin: 0;
}

.pomm-rd-archive-headline .pomm-rd-archive-dek {
	font-size: clamp(18px, 1.5vw, 22px);
	margin: 0;
	padding-top: 0.4em;
}

.pomm-rd-filters-wrap {
	padding-block: clamp(26px, 3vw, 44px) 0;
}

.pomm-rd-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pomm-rd-filter {
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 8px 17px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 200ms ease, color 200ms ease;
}

.pomm-rd-filter:hover {
	background: var(--pomm-rd-pink);
}

.pomm-rd-filter.is-active {
	background: var(--pomm-rd-ink);
	color: var(--pomm-rd-paper);
}

.pomm-rd-archive-grid {
	margin-top: clamp(26px, 3vw, 44px);
}

/* red current page,
as in the mockup */
.pomm-rd-pagination {
	gap: 8px;
	justify-content: center;
}

.pomm-rd-pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--pomm-rd-ink);
	display: flex;
	height: 34px;
	justify-content: center;
	min-width: 34px;
	text-decoration: none;
}

.pomm-rd-pagination .page-numbers.current {
	background: var(--pomm-rd-red);
	border-color: var(--pomm-rd-red);
	color: #fff;
	text-decoration: none;
}

/* --- newsletter label ---------------------------------------------------- */

.pomm-rd-newsletter-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

/* --- responsive ---------------------------------------------------------- */

/* Skinnene spiste bredden justeringsknappene skulle bruke.

   Artikkelspalta er en grid-celle mellom 72 piksler delingsknapper og 210
   piksler «kort fortalt», med to luker på opptil 64 piksler. Ved 1152 piksler
   vindusbredde måler midtspalta 709 - altså mindre enn de 760 «Ingen» står
   for. Da traff «Ingen» og «Bred bredde» samme tak, og bildejusteringen i
   editoren så ut til å være i stykker: uansett knapp ble bildet like bredt.

   Høyre skinne flyttes derfor ned under artikkelen alt ved 1400 i stedet for
   1000. Midtspalta måler da 1204 ved 1400 piksler og 861 ved 1024, mot 760
   for «Ingen» - forskjellen er synlig på hele laptop-området. Over 1400 står
   begge skinnene, og der er spalta 927 piksler eller mer av seg selv.

   Merk: «Full bredde» blir fortsatt like bred som «Bred bredde». Begge fyller
   spalta, og alignfull kan ikke sprenge seg ut av en grid-celle uten å legge
   seg over skinnene. */
@media (max-width: 1400px) {
	.pomm-rd-article-body {
		grid-template-columns: 60px minmax(0, 1fr);
	}

	.pomm-rd-article-rail-right {
		grid-column: 2;
		position: static;
	}

	.pomm-rd-brief {
		margin-bottom: 2em;
	}
}

@media (max-width: 1000px) {
	.pomm-rd-archive-headline {
		grid-template-columns: 1fr;
	}

	.pomm-rd-readnext .wp-block-post-template {
		grid-template-columns: 1fr 1fr;
	}

	.pomm-rd-readnext .wp-block-post:nth-child(3) {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}
}

@media (max-width: 720px) {
	.pomm-rd-article-body {
		gap: 0;
		grid-template-columns: 1fr;
	}

	.pomm-rd-article-rail-left {
		grid-column: 1;
		margin-bottom: 2em;
		position: static;
	}

	.pomm-rd-share {
		align-items: center;
		display: flex;
		gap: 0;
	}

	.pomm-rd-share-label {
		margin: 0 14px 0 0;
	}

	.pomm-rd-share-link {
		margin: 0 -1px 0 0;
	}

	.pomm-rd-article-rail-right {
		grid-column: 1;
	}

	.pomm-rd-article-title {
		font-size: clamp(38px, 11vw, 54px);
	}

	.pomm-rd-byline {
		gap: 12px 18px;
	}

	.pomm-rd-article-content .wp-block-post-content {
		font-size: 17px;
	}

	.pomm-rd-readnext .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.pomm-rd-readnext .wp-block-post + .wp-block-post {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}

}

/* --- v1.0.44: Instagram / TikTok panels ---------------------------------- */

.pomm-rd-feeds-band {
	border-top: 1px solid var(--pomm-rd-ink);
	padding-block: clamp(52px, 6vw, 96px);
}

.pomm-rd-feeds {
	border: 1px solid var(--pomm-rd-ink);
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.pomm-rd-feed {
	display: flex;
	flex-direction: column;
	min-height: 260px;
	padding: clamp(22px, 2.6vw, 34px);
}

.pomm-rd-feed + .pomm-rd-feed {
	border-left: 1px solid var(--pomm-rd-ink);
}

.pomm-rd-feed-instagram {
	background: var(--pomm-rd-cream);
}

.pomm-rd-feed-tiktok {
	background: var(--pomm-rd-pink);
}

.pomm-rd-feed-kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.pomm-rd-feed h3 {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(26px, 2.6vw, 40px);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0;
}

.pomm-rd-feed h3 a {
	text-decoration: none;
}

.pomm-rd-feed h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.pomm-rd-feed-blurb {
	font-size: 14px;
	line-height: 1.45;
	margin: 16px 0 0;
	max-width: 34ch;
}

.pomm-rd-feed-cta {
	border-bottom: 2px solid currentColor;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	margin-top: auto;
	padding: 10px 0 7px;
	text-decoration: none;
	text-transform: uppercase;
	width: fit-content;
}

.pomm-rd-feed-cta span {
	margin-left: 18px;
}

/* When a feed plugin is active its markup drops in here. */
.pomm-rd-feed-embed {
	margin-top: 18px;
}

.pomm-rd-feed-embed img,
.pomm-rd-feed-embed iframe {
	max-width: 100%;
}

@media (max-width: 720px) {
	.pomm-rd-feeds {
		grid-template-columns: 1fr;
	}

	.pomm-rd-feed + .pomm-rd-feed {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}
}

/* --- collection boxes: "Pomm stories" + "Pomm ser film" ------------------
   One component, two skins. The base is colour-neutral and inherits from the
   box, so a variant only has to set background and colour. ----------------- */

.pomm-rd-coll-band {
	padding-block: clamp(52px, 6vw, 96px) 0;
}

.pomm-rd-coll-box {
	padding: clamp(36px, 4.6vw, 80px);
}

.pomm-rd-film-box {
	background: var(--pomm-rd-ink);
	color: var(--pomm-rd-paper);
}

.pomm-rd-stories-box {
	background: var(--pomm-rd-cream);
	border: 1px solid var(--pomm-rd-ink);
	color: var(--pomm-rd-ink);
}

/* Flex, not grid: a grid track with minmax(0, …) can shrink below its content
   and break the heading mid-word. Flex items cannot overlap. */
.pomm-rd-coll-head {
	border-bottom: 1px solid currentColor;
	display: block;
	padding-bottom: clamp(26px, 3vw, 40px);
}

.pomm-rd-film-box .pomm-rd-coll-head {
	border-bottom-color: rgba(255, 253, 247, 0.28);
}

.pomm-rd-stories-box .pomm-rd-coll-head {
	border-bottom-color: rgba(17, 16, 15, 0.2);
}

/* inline-block, not a full-width flex row: the colour should sit behind the
   words, not stretch into a banner across the box. */
.pomm-rd-coll-label {
	background: var(--pomm-rd-red);
	color: #fff;
	display: inline-block;
	font-family: var(--pomm-rd-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 18px;
	padding: 8px 16px;
	text-transform: uppercase;
}

.pomm-rd-stories-box .pomm-rd-coll-label {
	background: var(--pomm-rd-pink);
	color: var(--pomm-rd-ink);
}

.pomm-rd-coll-head h2 {
	color: inherit;
	font-family: var(--pomm-rd-serif);
	font-size: clamp(40px, 5vw, 76px);
	font-weight: 400;
	-webkit-hyphens: none;
	hyphens: none;
	letter-spacing: -0.045em;
	line-height: 0.96;
	margin: 0;
	min-width: min-content;
	overflow-wrap: normal;
	word-break: keep-all;
}

.pomm-rd-coll-grid {
	display: grid;
	gap: clamp(18px, 1.8vw, 26px);
	grid-template-columns: 1fr;
	padding-top: clamp(24px, 2.6vw, 36px);
}

/* Thumbnail left, text right. Both children are placed explicitly rather than
   left to auto-placement: the shortcode output passes through wpautop, which
   can inject a stray empty paragraph, and an extra grid item was enough to
   push the text into the next row under the picture. */
.pomm-rd-coll-card {
	align-items: start;
	display: grid;
	gap: clamp(14px, 1.4vw, 20px);
	grid-template-columns: clamp(96px, 9vw, 132px) minmax(0, 1fr);
	min-width: 0;
}

.pomm-rd-coll-card > p:empty {
	display: none;
}

.pomm-rd-coll-image {
	aspect-ratio: 1;
	display: block;
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	overflow: hidden;
}

.pomm-rd-coll-copy {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.pomm-rd-coll-image img {
	height: 100%;
	object-fit: cover;
	transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
	width: 100%;
}

.pomm-rd-coll-image:hover img {
	transform: scale(1.03);
}

.pomm-rd-coll-meta {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 8px;
	opacity: 0.6;
	text-transform: uppercase;
}

/* Capped at three lines so one long headline cannot run five deep and leave
   the neighbouring cards with a ragged well of empty space underneath. */
.pomm-rd-coll-card h3 {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-family: var(--pomm-rd-serif);
	font-size: clamp(17px, 1.35vw, 22px);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.14;
	margin: 0;
	overflow: hidden;
}

.pomm-rd-coll-card h3 a {
	color: inherit;
	text-decoration: none;
}

.pomm-rd-coll-card h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* terningkast 1-6, from the optional `terningkast` custom field */
.pomm-rd-coll-score {
	display: flex;
	gap: 5px;
	margin: 12px 0 0;
}

.pomm-rd-coll-pip {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 50%;
	display: block;
	height: 11px;
	opacity: 0.45;
	width: 11px;
}

.pomm-rd-coll-pip.is-on {
	background: var(--pomm-rd-red);
	border-color: var(--pomm-rd-red);
	opacity: 1;
}

.pomm-rd-coll-excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 13px;
	line-height: 1.5;
	margin: 10px 0 0;
	max-width: 52ch;
	opacity: 0.72;
	overflow: hidden;
}

@media (max-width: 1000px) {
	.pomm-rd-coll-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 720px) {
	.pomm-rd-coll-grid {
		grid-template-columns: 1fr;
	}
}

/* --- v1.0.53: article navigation + page template ------------------------- */

/* Pages have no share rail or brief,
so the body is a single measure. */
.pomm-rd-page-body {
	display: block;
}

/* Left edge, not centred: the title and the body sit in the same alignwide
   container, so an auto-centred measure left the text starting a third of the
   way across while the heading stayed at the margin. */
.pomm-rd-page-body .pomm-rd-article-content {
	margin-inline: 0;
}

.pomm-rd-page .pomm-rd-article-title {
	max-width: 24ch;
}

/* No drop cap on pages - it belongs to reportage,
not to an about page. */
.pomm-rd-page .wp-block-post-content > p:first-of-type::first-letter {
	color: inherit;
	float: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

@media (max-width: 720px) {
}

/* --- v1.0.59: the two collection boxes side by side ---------------------- */

.pomm-rd-coll-pair {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 2.4vw, 34px);
}

/* flex-basis 0 rather than a two-column grid, so that when one box hides
   itself for lack of posts the other simply fills the row. */
/* margin-block-start: 0 is load-bearing. The pair group uses the flow layout,
   so WordPress emits a block-gap rule that puts 1.25rem on every child after
   the first. In a flex row that reads as a top margin, and the second box sat
   ~20px lower than the first. */
.pomm-rd-coll-pair > * {
	align-self: stretch;
	display: flex;
	flex: 1 1 0;
	margin-block-start: 0;
	min-width: 0;
}

.pomm-rd-coll-pair .pomm-rd-coll-box {
	flex: 1;
	padding: clamp(26px, 2.6vw, 44px);
}

.pomm-rd-coll-pair .pomm-rd-coll-head h2 {
	font-size: clamp(28px, 2.9vw, 46px);
}

@media (max-width: 900px) {
	.pomm-rd-coll-pair > * {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   v1.0.60 - MOBILE PASS (iPhone / iPad / Android)
   ========================================================================== */

/* WordPress ships `word-break: break-word` on .wp-block-post-title, so once a
   heading is fractionally too wide the browser splits the word itself -
   "oredobbe / r". Normal breaking plus real hyphenation instead: Norwegian
   hyphenates properly because WordPress sets lang on <html>. */
.pomm-rd-hero-title,
.pomm-rd-article-title,
.pomm-rd-section-heading h2,
.pomm-rd-coll-head h2,
.pomm-rd-coll-card h3,
.pomm-rd-newsletter h2,
.pomm-rd-archive-head h1,
.pomm-rd-archive-head .wp-block-query-title,
.pomm-rd-story-copy .wp-block-post-title,
.pomm-rd-feature-copy .wp-block-post-title,
.pomm-rd-readnext .wp-block-post-title {
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: break-word;
	word-break: normal;
}

/* Stop iOS inflating body text in landscape. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Nothing should ever scroll sideways. */
html,
body {
	overflow-x: hidden;
}

/* Keep the red topline clear of the notch / dynamic island. */
.pomm-rd-topline {
	padding-top: max(0px, env(safe-area-inset-top));
}

.pomm-rd-footer-grid {
	padding-bottom: max(35px, env(safe-area-inset-bottom));
}

/* --- tablet: iPad portrait ----------------------------------------------- */

@media (max-width: 1024px) {
	.pomm-rd-hero-copy {
		min-height: 0;
		padding-block: clamp(28px, 5vw, 48px);
	}

	.pomm-rd-newsletter-grid {
		min-height: 0;
	}

	.pomm-rd-footer-grid {
		min-height: 0;
	}
}

/* --- phones --------------------------------------------------------------
   The clamp() minimums were written for desktop and act as a floor, so on a
   phone the largest headings were being asked to fit ~280px. Lowered here
   rather than by weakening the desktop sizes. */

@media (max-width: 720px) {
	.pomm-rd-hero-title {
		font-size: clamp(32px, 9.5vw, 46px);
	}

	.pomm-rd-hero-copy {
		min-height: 0;
		padding: 26px 20px 30px;
	}

	.pomm-rd-hero-image {
		aspect-ratio: 3 / 2;
		min-height: 0;
	}

	.pomm-rd-hero-image img {
		aspect-ratio: auto;
		height: 100%;
	}

	.pomm-rd-dek {
		font-size: 16px;
		margin-top: 18px;
	}

	.pomm-rd-section-heading h2 {
		font-size: clamp(30px, 8.5vw, 42px);
	}

	.pomm-rd-article-title {
		font-size: clamp(30px, 8.5vw, 44px);
	}

	.pomm-rd-feature-copy .wp-block-post-title {
		font-size: clamp(30px, 8.5vw, 44px);
	}

	.pomm-rd-newsletter h2 {
		font-size: clamp(32px, 9.5vw, 46px);
	}

	.pomm-rd-newsletter-grid {
		min-height: 0;
		padding-block: 52px;
	}

	.pomm-rd-archive-head h1,
	.pomm-rd-archive-head .wp-block-query-title {
		font-size: clamp(32px, 10vw, 48px);
	}

	.pomm-rd-story-copy .wp-block-post-title {
		font-size: clamp(24px, 7vw, 30px);
	}

	.pomm-rd-coll-head h2 {
		font-size: clamp(26px, 7.5vw, 34px);
	}

	.pomm-rd-coll-box {
		padding: 22px 18px 26px;
	}

	.pomm-rd-byline {
		font-size: 9px;
		gap: 10px 14px;
	}

	/* 16px floor on form fields, otherwise iOS Safari zooms the page in when
	   the field takes focus and never zooms back out. */
	input,
	select,
	textarea {
		font-size: max(16px, 1em);
	}

	.pomm-rd-newsletter-form input[type="email"] {
		font-size: 20px;
	}

	/* Comfortable tap targets. */
	.pomm-rd-nav-links .wp-block-navigation-item__content,
	.pomm-rd-search .wp-block-search__button,
	.pomm-rd-filter,
	.pomm-rd-tags a {
		min-height: 44px;
	}

	.pomm-rd-filter,
	.pomm-rd-tags a {
		align-items: center;
		display: inline-flex;
	}
}

/* --- small phones: iPhone SE / older Android ----------------------------- */

@media (max-width: 400px) {
	.pomm-rd-coll-card {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 12px;
	}

	.pomm-rd-brand {
		width: 175px;
	}

	.pomm-rd-coll-card h3 {
		font-size: 16px;
	}

	.pomm-rd-coll-excerpt {
		font-size: 12px;
	}
}

/* --- v1.0.64: one subscribe control in the header, and a still one -------

   A Jetpack subscribe block is sitting inside the saved header navigation and
   renders as "✓ Abonnert". It is not in this theme's header.html - the theme
   ships a single plain link over on the right, next to søk. Hidden here rather
   than left to reappear, because it also reflows the nav: the label swaps
   between "Abonner" and "✓ Abonnert" on subscribe, and the row jumps. */
.pomm-rd-header .wp-block-jetpack-subscriptions,
.pomm-rd-nav .wp-block-jetpack-subscriptions,
.pomm-rd-nav-links .wp-block-jetpack-subscriptions,
.pomm-rd-nav .jetpack_subscription_widget,
.pomm-rd-nav-links .wp-block-button.is-style-jetpack-subscribe {
	display: none;
}


/* --- v1.0.65: overskriften over Instagram-innbyggingen ------------------- */

/* The panels are gone; the band is just a section title sitting on top of
   whatever embed follows it, so it needs no bottom padding of its own. */
.pomm-rd-feeds-band {
	padding-bottom: clamp(20px, 2.4vw, 34px);
}

.pomm-rd-feeds-band .pomm-rd-section-heading {
	margin-bottom: 0;
}

/* --- v1.0.66: article on phones ------------------------------------------
   The body drops the grid entirely rather than collapsing to a single track.
   Earlier attempts kept it a grid and the share rail stayed stuck in a narrow
   first column, stacking f / x / @ vertically with a well of empty space
   around them. Plain block flow leaves nothing to go wrong. */

@media (max-width: 720px) {
	.pomm-rd-article-body {
		display: block;
		gap: 0;
		padding-block: 24px 30px;
	}

	.pomm-rd-article-rail {
		position: static;
		top: auto;
	}

	.pomm-rd-article-rail-left {
		margin: 0 0 20px;
	}

	.pomm-rd-share {
		align-items: center;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0;
	}

	.pomm-rd-share-label {
		margin: 0 12px 0 0;
	}

	.pomm-rd-share-link {
		height: 36px;
		margin: 0 -1px 0 0;
		width: 36px;
	}

	.pomm-rd-article-rail-right {
		margin-top: 26px;
	}

	/* The footer already carries this description on every page, so on a phone
	   it is a third repeat at the end of every article. */
	.pomm-rd-tags {
		margin-top: 2em;
		padding-top: 1.5em;
	}

}

/* --- v1.0.67: no subscribe control anywhere in the header row ------------
   Removed from header.html, and suppressed here as well so a copy saved in
   the Site Editor cannot put it back. Deliberately broad: it has reappeared
   twice, as a core button and as a Jetpack block. The newsletter band at the
   foot of every page still handles signups. */
/* Narrowed: the theme's own subscribe button lives in .pomm-rd-subscribe over
   in the actions cluster and must survive. Everything else that tries to put
   a subscribe control in this row - a stray core button, a Jetpack block
   saved into the header - is suppressed. */
.pomm-rd-header .wp-block-buttons:not(.pomm-rd-subscribe),
.pomm-rd-header .wp-block-jetpack-subscriptions,
.pomm-rd-nav-links .wp-block-button,
.pomm-rd-nav-links .wp-block-buttons {
	display: none;
}

/* --- v1.0.68: "alle saker" landing page ---------------------------------- */

/* A flat, even grid: this page is the chronological run, so no post gets the
   full-width lead treatment the category archives give their newest story. */
.pomm-rd-archive-grid-flat .wp-block-post:first-child {
	border-right: 1px solid var(--pomm-rd-ink);
	grid-column: auto;
}

.pomm-rd-archive-grid-flat .wp-block-post:first-child .pomm-rd-story-card {
	display: block;
}

.pomm-rd-archive-grid-flat .wp-block-post:first-child .pomm-rd-story-image {
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid var(--pomm-rd-ink);
	border-right: 0;
}

.pomm-rd-archive-grid-flat .wp-block-post:first-child .pomm-rd-story-copy {
	align-self: auto;
	padding: 24px 24px 32px;
}

.pomm-rd-archive-grid-flat .wp-block-post:first-child .wp-block-post-title {
	font-size: clamp(26px, 2.4vw, 42px);
}

.pomm-rd-archive-grid-flat .wp-block-post:first-child .wp-block-post-excerpt {
	font-family: var(--pomm-rd-sans);
	font-size: 14px;
}

.pomm-rd-archive-grid-flat .wp-block-post:nth-child(3n) {
	border-right: 0;
}

/* The "alle" pill is a marker for where you are, not a link. */
.pomm-rd-catnav span.pomm-rd-filter {
	cursor: default;
}

@media (max-width: 1000px) {
	.pomm-rd-archive-grid-flat .wp-block-post:nth-child(3n) {
		border-right: 1px solid var(--pomm-rd-ink);
	}

	.pomm-rd-archive-grid-flat .wp-block-post:nth-child(2n) {
		border-right: 0;
	}
}

@media (max-width: 720px) {
	.pomm-rd-archive-grid-flat .wp-block-post,
	.pomm-rd-archive-grid-flat .wp-block-post:first-child {
		border-right: 0;
	}
}

/* --- v1.0.72: visible keyboard focus -------------------------------------
   The CSS purge in 1.0.53 took the old design's :focus-visible rules with it
   and the redesign never replaced them, so keyboard and screen-reader users
   had no indication of where they were on the page. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	border-radius: 2px;
	outline: 3px solid var(--pomm-rd-red);
	outline-offset: 3px;
}

/* Red disappears against the dark surfaces; pink holds contrast there.
   .pomm-rd-manifesto sto her til v1.38.27. */
.pomm-rd-film-box :focus-visible,
.pomm-rd-topline :focus-visible {
	outline-color: var(--pomm-rd-pink);
}

/* --- v1.0.80: actions moved into the masthead ---------------------------- */

@media (max-width: 720px) {
	.pomm-rd-nav-actions {
		gap: 8px;
	}

	.pomm-rd-search .wp-block-search__button {
		font-size: 11px;
		height: 40px;
		padding: 0 14px;
	}

	/* Wrapping handles narrow screens now, so abonner stays available rather
	   than being hidden. */
	.pomm-rd-nav-actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

/* --- v1.0.81: no horizontal overflow, at any width ----------------------- */

/* Belt and braces. Several of these rows are flex or grid with fixed-width
   children; a single one that refuses to shrink pushes the whole page wider
   than the screen and gives every browser a sideways scrollbar. */
.pomm-rd-header,
.pomm-rd-masthead,
.pomm-rd-nav,
.pomm-rd-nav-actions,
.pomm-rd-footer-grid {
	max-width: 100%;
}

.pomm-rd-nav-links,
.pomm-rd-nav-links .wp-block-navigation__container {
	min-width: 0;
}

/* The logo is the one element that can genuinely outgrow a small screen. */
.pomm-rd-brand,
.pomm-rd-brand img,
.pomm-rd-brand.wp-block-site-logo img {
	max-width: 100%;
}

/* Images should never be the reason a page scrolls sideways. */
.pomm-rd-front img,
.pomm-rd-header img,
.pomm-rd-footer img {
	max-width: 100%;
}

/* height: auto belongs only on images that keep their own proportions. It was
   applied to every image here, which silently overrode the height: 100% that
   makes the hero, card and collection images fill their frame - the hero
   stopped short and left a white gap under it. */
.pomm-rd-article-content img,
.pomm-rd-front .wp-block-post-content img,
.pomm-rd-header img,
.pomm-rd-footer img {
	height: auto;
}

/* --- v1.0.82: language switcher slot ------------------------------------- */

/* Empty unless a translation plugin fills it, so the masthead is unchanged
   until one is installed. */
.pomm-rd-lang:empty {
	display: none;
}

.pomm-rd-lang {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* v1.38.58: the theme's own TranslatePress switcher - see
   pomm_premium_magazine_trp_switcher() in functions.php. One button per
   language you can switch *to*, cut to the same pattern as søk: 46 high, ink
   border, square corners, lowercase sans, pink on hover. The plugin's own
   dropdown (white, rounded, flag, system font, "NORWEGIAN") never renders
   here any more, so there is nothing of it to override. */
.pomm-rd-lang-link {
	align-items: center;
	background: transparent;
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 0;
	color: var(--pomm-rd-ink);
	display: flex;
	font-family: var(--pomm-rd-sans);
	font-size: 13px;
	font-weight: 700;
	height: 46px;
	letter-spacing: 0.03em;
	padding: 0 20px;
	text-decoration: none;
	text-transform: lowercase;
	white-space: nowrap;
}

.pomm-rd-lang-link:hover,
.pomm-rd-lang-link:focus-visible {
	background: var(--pomm-rd-pink);
	color: var(--pomm-rd-ink);
	text-decoration: none;
}

/* Same step-down as søk on phones (v1.0.80 block further down). */
@media (max-width: 720px) {
	.pomm-rd-lang-link {
		font-size: 11px;
		height: 40px;
		padding: 0 14px;
	}
}

/* Polylang and WPML ship their own markup; flatten it to match søk and
   abonner rather than letting a stray dropdown skin land in the masthead. */
.pomm-rd-lang ul,
.pomm-rd-lang ol {
	align-items: center;
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pomm-rd-lang a,
.pomm-rd-lang li {
	color: inherit;
	text-decoration: none;
}

.pomm-rd-lang a:not(.pomm-rd-lang-link):hover,
.pomm-rd-lang .current-lang > a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pomm-rd-lang img {
	height: 12px;
	width: auto;
}

.pomm-rd-lang select {
	background: transparent;
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 6px 8px;
	text-transform: uppercase;
}

/* --- v1.0.91: TikTok row -------------------------------------------------- */

.pomm-rd-tiktok-band {
	border-top: 1px solid var(--pomm-rd-ink);
	margin-top: clamp(34px, 4vw, 56px);
	padding-top: clamp(26px, 3vw, 44px);
}

.pomm-rd-tiktok-heading {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	text-transform: uppercase;
}

/* Three across on desktop. The tracks are minmax(0, 1fr) rather than 1fr so a
   TikTok iframe, which arrives with its own min-width, cannot push the grid
   wider than the page. */
.pomm-rd-tiktok-grid {
	display: grid;
	gap: clamp(14px, 1.6vw, 24px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pomm-rd-tiktok-item {
	border: 1px solid var(--pomm-rd-ink);
	display: flex;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	padding: 10px;
}

/* TikTok's script writes inline min-width: 325px onto the blockquote and the
   iframe it swaps in. Left alone, three of those overflow anything under
   ~1030px. These overrides need the weight to beat inline styles. */
.pomm-rd-tiktok-item .tiktok-embed,
.pomm-rd-tiktok-item iframe {
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
}

.pomm-rd-tiktok-creator {
	border: 1px solid var(--pomm-rd-ink);
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: 10px;
}

.pomm-rd-tiktok-creator .tiktok-embed,
.pomm-rd-tiktok-creator iframe {
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.pomm-rd-tiktok-cta {
	margin: clamp(18px, 2vw, 26px) 0 0;
}

.pomm-rd-tiktok-cta a {
	border-bottom: 2px solid currentColor;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	padding-bottom: 4px;
	text-decoration: none;
	text-transform: uppercase;
}

.pomm-rd-tiktok-cta span {
	margin-left: 14px;
}

/* Two across on tablets, one on phones: a TikTok player narrower than about
   300px stops being watchable. */
@media (max-width: 1000px) {
	.pomm-rd-tiktok-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pomm-rd-tiktok-item:nth-child(3) {
		grid-column: 1 / -1;
		justify-self: center;
		max-width: 50%;
	}
}

@media (max-width: 680px) {
	.pomm-rd-tiktok-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pomm-rd-tiktok-item:nth-child(3) {
		grid-column: auto;
		max-width: none;
	}
}

/* --- v1.0.93: samtykke til informasjonskapsler --------------------------- */

.pomm-consent {
	background: var(--pomm-rd-cream);
	border-top: 1px solid var(--pomm-rd-ink);
	bottom: 0;
	box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.12);
	left: 0;
	padding: clamp(18px, 2.2vw, 26px) 0;
	position: fixed;
	right: 0;
	/* Over alt annet, men under nettleserens egne dialoger. */
	z-index: 9999;
}

.pomm-consent[hidden] {
	display: none;
}

.pomm-consent:focus {
	outline: none;
}

.pomm-consent-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.4vw, 40px);
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size, 1440px);
	padding-inline: clamp(16px, 3vw, 40px);
}

.pomm-consent-copy {
	flex: 1 1 420px;
	min-width: 0;
}

.pomm-consent-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.pomm-consent-body {
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	max-width: 78ch;
}

.pomm-consent-body a {
	text-underline-offset: 4px;
}

.pomm-consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Begge knappene har samme størrelse, vekt og form. Forskjellen er bare
   flate mot ramme - nok til å skille dem, ikke nok til å styre valget. */
.pomm-consent-button {
	background: transparent;
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 0;
	color: var(--pomm-rd-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	min-height: 48px;
	padding: 13px 24px;
	text-transform: uppercase;
	transition: background 180ms ease, color 180ms ease;
	white-space: nowrap;
}

.pomm-consent-accept {
	background: var(--pomm-rd-ink);
	color: var(--pomm-rd-cream);
}

.pomm-consent-accept:hover {
	background: var(--pomm-rd-red);
	color: #fff;
}

.pomm-consent-reject:hover {
	background: var(--pomm-rd-pink);
}

/* Kortet som står der en innbygging ville vært. */
.pomm-consent-block {
	align-items: center;
	background: var(--pomm-rd-cream);
	border: 1px dashed var(--pomm-rd-ink);
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	min-height: 200px;
	padding: clamp(22px, 3vw, 38px);
	text-align: center;
}

.pomm-consent-block-text {
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	max-width: 46ch;
}

.pomm-consent-block-button {
	background: var(--pomm-rd-ink);
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 0;
	color: var(--pomm-rd-cream);
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	min-height: 48px;
	padding: 13px 24px;
	text-transform: uppercase;
	transition: background 180ms ease;
}

.pomm-consent-block-button:hover {
	background: var(--pomm-rd-red);
	color: #fff;
}

/* Ser ut som de andre footer-lenkene, men må være en knapp: den åpner en
   dialog og går ingen steder. */
.pomm-consent-reopen {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 720px) {
	.pomm-consent-inner {
		align-items: stretch;
		flex-direction: column;
	}

	/* `flex: 1 1 420px` er riktig på en rad, der tallet er en bredde. Når raden
	   blir en kolonne, blir det en høyde: tekstblokka vokste til 420px og dyttet
	   knappene ned, så banneret dekket nesten hele telefonskjermen med tomrom i
	   midten. Her skal den bare være så høy som teksten. */
	.pomm-consent-copy {
		flex: 0 1 auto;
	}

	.pomm-consent-actions {
		flex-direction: column;
	}

	.pomm-consent-button {
		width: 100%;
	}
}

.pomm-rd-footer-legal {
	font-size: 12px;
	gap: 8px 22px;
	margin-top: 18px;
}

.pomm-rd-footer-legal p {
	margin: 0;
}

.pomm-rd-footer-legal a,
.pomm-rd-footer-legal .pomm-consent-reopen {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- v1.1.4: Instagram-innlegg i artikler -------------------------------- */

.pomm-rd-insta {
	border-top: 1px solid var(--pomm-rd-ink);
	margin: clamp(44px, 5vw, 72px) 0 0;
	padding-top: clamp(24px, 2.8vw, 38px);
}

.pomm-rd-insta-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 clamp(18px, 2.2vw, 28px);
	text-transform: uppercase;
}

.pomm-rd-insta-grid {
	display: grid;
	gap: clamp(14px, 1.6vw, 24px);
	grid-template-columns: minmax(0, 1fr);
}

.pomm-rd-insta-item {
	border: 1px solid var(--pomm-rd-ink);
	display: flex;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	padding: 10px;
}

/* Instagrams script skriver inline min-width: 326px og en egen max-width på
   blokksitatet. Uten disse sprenger innbyggingen tekstspalten, som er
   smalere enn det på mobil. */
.pomm-rd-insta-item .instagram-media,
.pomm-rd-insta-item iframe {
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
}

.pomm-rd-insta-cta {
	margin: clamp(16px, 1.8vw, 24px) 0 0;
}

.pomm-rd-insta-cta a {
	border-bottom: 2px solid currentColor;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	padding-bottom: 4px;
	text-decoration: none;
	text-transform: uppercase;
}

.pomm-rd-insta-cta span {
	margin-left: 14px;
}

/* Vises det flere innlegg, står de side ved side der det er plass. */
@media (min-width: 900px) {
	.pomm-rd-insta-grid:has(> * + *) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- v1.1.6: sekundærsaker under toppsaken ------------------------------- */

/* Trappen på forsiden er 1 stor -> 2 mellomstore -> 3 små. Dette båndet er
   mellomtrinnet, og henger fysisk sammen med toppsaken: ingen luft over, bare
   en delelinje, så de to leses som én blokk. */
.pomm-rd-second-query .wp-block-post-template {
	border: 1px solid var(--pomm-rd-ink);
	border-top: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pomm-rd-second-query .wp-block-post {
	margin: 0;
	min-width: 0;
}

.pomm-rd-second-query .wp-block-post + .wp-block-post {
	border-left: 1px solid var(--pomm-rd-ink);
}

.pomm-rd-second-card {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	height: 100%;
}

.pomm-rd-second-image {
	border-right: 1px solid var(--pomm-rd-ink);
	margin: 0;
	overflow: hidden;
	position: relative;
}

.pomm-rd-second-image a,
.pomm-rd-second-image img {
	height: 100%;
	width: 100%;
}

.pomm-rd-second-image img {
	object-fit: cover;
	transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pomm-rd-second-image:hover img {
	transform: scale(1.025);
}

.pomm-rd-second-copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 280px;
	padding: clamp(20px, 2.1vw, 34px);
}

.pomm-rd-second-copy .wp-block-post-title {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(22px, 1.85vw, 32px);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 12px 0 0;
}

.pomm-rd-second-copy .wp-block-post-title a {
	text-decoration: none;
}

.pomm-rd-second-copy .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.pomm-rd-second-copy .wp-block-post-excerpt {
	font-size: 14px;
	line-height: 1.5;
	margin: 14px 0 0;
}

.pomm-rd-second-copy .pomm-rd-read-link {
	margin-top: 22px;
}

/* Under 1000px stables toppsaken alt, og to spalter à to spalter blir for
   trangt. Da blir båndet én sak per rad, med bildet over teksten. */
@media (max-width: 1000px) {
	.pomm-rd-second-query .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.pomm-rd-second-query .wp-block-post + .wp-block-post {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}
}

@media (max-width: 720px) {
	.pomm-rd-second-query .wp-block-post-template {
		border-inline: 0;
	}

	.pomm-rd-second-card {
		grid-template-columns: 1fr;
	}

	.pomm-rd-second-image {
		aspect-ratio: 3 / 2;
		border-bottom: 1px solid var(--pomm-rd-ink);
		border-right: 0;
	}

	.pomm-rd-second-copy {
		min-height: 0;
		padding: 22px 20px 26px;
	}
}

/* --- v1.2.3: ingen luft under kortene ------------------------------------ */

/* Rutenettet strekker alle kortene til samme høyde, men innholdet fylte ikke:
   bildet lå låst på 4:3 og teksten tok det den tok, så resten ble hvitt
   tomrom nederst - mest under det korteste kortet. Nå er kortet en kolonne
   der bildet får vokse inn i det som blir til overs. Sideforholdet er
   fortsatt utgangspunktet, ikke et tak. */
.pomm-rd-story-grid:not(.pomm-rd-archive-grid) .pomm-rd-story-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pomm-rd-story-grid:not(.pomm-rd-archive-grid) .pomm-rd-story-image {
	flex: 1 1 auto;
	min-height: 0;
}

/* Lenka rundt bildet er inline av natur, og da har img-en ingen høyde å regne
   sine 100 % mot. */
.pomm-rd-story-grid:not(.pomm-rd-archive-grid) .pomm-rd-story-image a {
	display: block;
	height: 100%;
	width: 100%;
}

/* Teksten beholder sin egen høyde - det er bildet som skal gi etter. */
.pomm-rd-story-grid:not(.pomm-rd-archive-grid) .pomm-rd-story-copy {
	flex: 0 0 auto;
}


/* --- v1.2.6: "Nyeste"-bolken, samlet ------------------------------------- */

/* Denne bolken er skrevet om fra bunnen. Etter fem runder lå det fem
   konkurrerende .pomm-rd-latest-regler i fila, der senere overstyrte
   tidligere - det virket, men var umulig å lese. Her er sluttresultatet i én
   blokk:
   
     toppsak
       (luft, ca. 50px - ikke de 145px som var der opprinnelig)
     tre kort i rammet rutenett
     stripe med "se alle saker"
*/

.pomm-rd-latest {
	/* Kortene er sin egen bolk igjen, ikke en forlengelse av toppsaken. Men
	   luften er en tredjedel av det den var. */
	display: flex;
	flex-direction: column;
	padding-top: clamp(34px, 3.6vw, 58px);
}

/* Stripa nederst. order flytter den bare visuelt - i markupen står
   seksjonsoverskriften fortsatt foran innholdet den navngir, slik en
   skjermleser trenger den. */
.pomm-rd-latest .pomm-rd-section-heading {
	align-items: center;
	border: 1px solid var(--pomm-rd-ink);
	border-top: 0;
	justify-content: flex-end;
	margin-bottom: 0;
	order: 2;
	padding: clamp(11px, 1.1vw, 16px) clamp(16px, 1.8vw, 28px);
}

/* Overskrifta i stripa sto skjult her fra v1.2.6 til v1.38.31: "Nyeste" var
   overflødig å lese for den som ser tre kort under toppsaken, men ikke for den
   som navigerer siden etter overskrifter. Nå heter bolken «kjerner» og er
   navnet på en synlig boks - se v1.38.31-bolken nederst i fila. */

@media (max-width: 720px) {
	.pomm-rd-latest .pomm-rd-section-heading {
		border-inline: 0;
		padding-inline: 0;
	}
}

/* --- v1.2.7: Jetpacks innlimte abonner-blokk ---------------------------- */

/* Jetpack limer en abonner-blokk inn på slutten av hver artikkel, med egen
   overskrift, egen skillelinje og standardformatering som ikke ligner resten
   av siden. Temaet har allerede sitt eget nyhetsbrevfelt lenger ned på samme
   side, så leseren møter det samme spørsmålet to ganger.
   
   Riktig sted å slå den av er Jetpack-innstillingene. Dette er sikringen i
   mellomtiden: hele gruppa den ligger i skjules, ikke bare skjemaet - ellers
   blir overskriften og streken stående alene. */
.pomm-rd-article-content .wp-block-group:has(.wp-block-jetpack-subscriptions) {
	display: none;
}

/* Reserveløsning for nettlesere uten :has(). Da blir streken og overskriften
   stående, men skjemaet forsvinner - mindre galt enn to skjemaer. */
.pomm-rd-article-content .wp-block-jetpack-subscriptions {
	display: none;
}

/* --- v1.2.8: halen under artikkelen, strammet ---------------------------- */

/* Stikkordene var utformet som knapper - hel ramme i tusj, store nok til at
   tolv av dem tok to rader og ropte høyere enn brødteksten over. De er
   metadata, ikke handlinger. Nå er de lette merker: tynnere linje, mindre
   type, tettere satt. Alle blir stående, de tar bare mindre plass. */
.pomm-rd-tags {
	gap: 6px;
	margin-top: 2.4em;
	padding-top: 1.6em;
}

.pomm-rd-tags a {
	border-color: var(--pomm-rd-line);
	font-size: 9px;
	letter-spacing: 0.1em;
	padding: 5px 12px;
}

.pomm-rd-tags a:hover {
	background: var(--pomm-rd-pink);
	border-color: var(--pomm-rd-ink);
}

/* Forrige/neste sto som to like etiketter uten retning. Pilene forteller
   hvilken vei de går, uten å legge til ord. */
/* Merket i "om Pomm"-boksen var en tom rosa sirkel. Granateplet er i strek
   og gjennomsiktig inni, så det trenger den rosa skiva bak seg for å ha noe
   å stå mot. */

/* --- v1.3.3: "om Pomm"-boksen ute av artiklene --------------------------- */

/* Boksen er fjernet fra artikkelmalen, og stilene med den. Denne ene regelen
   står igjen fordi malen kan ligge lagret i nettstedsredigereren - da sendes
   markupen fortsatt, og uten dette ville boksen blitt stående uformatert
   nederst i hver artikkel. Kan slettes den dagen malen er nullstilt. */
.pomm-rd-authorbox {
	display: none;
}

/* --- v1.3.4: forrige/neste sak fjernet ---------------------------------- */

/* Navigasjonen til forrige og neste sak er ute av artikkelmalen - "Les videre"
   nederst gjør samme jobb bedre, med bilder og overskrifter. Reglene som
   formaterte den er fjernet. Denne ene står igjen av samme grunn som for
   "om Pomm"-boksen: ligger malen lagret i nettstedsredigereren, sendes
   markupen fortsatt, og da skal den ikke stå igjen uformatert. */
.pomm-rd-postnav {
	display: none;
}

/* --- v1.3.6: Instagram rett under overskriften --------------------------- */

/* Sporet ligger mellom "pomm i feeden" og TikTok-raden. Er ingen lenker lagt
   inn under Innstillinger -> Pomm sosiale medier, gir kortkoden tom streng, og
   da skal ikke sporet legge igjen luft. */
.pomm-rd-insta-slot:empty {
	display: none;
}

/* I båndet på forsiden bærer h2-en over allerede navnet, så kickeren inne i
   selve seksjonen ville sagt det samme to ganger. Den brukes bare i artikler,
   der seksjonen står alene. */
.pomm-rd-insta-slot .pomm-rd-insta {
	border-top: 0;
	margin-top: clamp(20px, 2.4vw, 32px);
	padding-top: 0;
}

/* --- v1.3.7: cover inne i cover ------------------------------------------ */

/* Mønsteret er en ytre cover med bilde eller video, og en indre cover med
   heldekkende farge oppå - rammen og kortet. På forsiden ble kortet klemt til
   brødtekstbredden (760px) inne i en ramme på 1440, så videoen ble to brede
   striper på sidene i stedet for en jevn kant. Samtidig har begge coverne
   samme minstehøyde, så kortet fylte rammen loddrett og lot ingenting synes
   over og under. Redigeringsvinduet er smalere og traff derfor tilfeldigvis
   riktigere enn den publiserte siden.
   
   Her får kortet hele bredden av rammen, og rammen får luft over og under.
   Kanten blir like tykk hele veien rundt. */
.pomm-rd-article-content .wp-block-cover .wp-block-cover {
	max-width: none;
	width: 100%;
}

.pomm-rd-article-content .wp-block-cover:has(.wp-block-cover) > .wp-block-cover__inner-container {
	padding-block: clamp(18px, 2.4vw, 38px);
}

/* Uten dette arver det indre kortet minstehøyden på 430px og blir stående
   halvtomt når teksten er kort. */
.pomm-rd-article-content .wp-block-cover .wp-block-cover {
	min-height: 0;
}

@media (max-width: 720px) {
	/* På telefon er det ikke plass til både ramme og kort. Kanten krymper til
	   en antydning, så teksten beholder lesbar bredde. */
	.pomm-rd-article-content .wp-block-cover:has(.wp-block-cover) > .wp-block-cover__inner-container {
		padding-block: 12px;
	}
}

/* --- v1.4.0: sveip mellom artikler på mobil ------------------------------ */

/* Selve dra-bevegelsen. Ingen overgang mens fingeren er nede - der skal flata
   følge fingeren nøyaktig - og en kort, dempet overgang når den slipper. */
.pomm-rd-article.is-swiping {
	will-change: transform;
}

.pomm-rd-article.is-releasing {
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pomm-rd-article.is-leaving {
	transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}

/* Mens sveipen pågår skal ingenting under fingeren markere seg som valgt.
   Uten dette blåser iOS opp en blå markering over avsnittet man drar i. */
.pomm-swipe-active,
.pomm-swipe-active body {
	-webkit-user-select: none;
	user-select: none;
}

/* Sida flyttes sidelengs, og på vei ut står den helt utenfor skjermen. Uten
   dette dukker det opp en vannrett rullelist gjennom hele bevegelsen. */
.pomm-swipe-active body {
	overflow-x: hidden;
}

.pomm-swipe-hint {
	align-items: center;
	background: var(--pomm-rd-ink);
	border-radius: 2px;
	color: var(--pomm-rd-paper);
	display: flex;
	gap: 10px;
	max-width: min(74vw, 320px);
	opacity: 0;
	padding: 12px 14px;
	pointer-events: none;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	/* Over artikkelen, men under samtykkebanneret. */
	z-index: 60;
}

.pomm-swipe-hint[hidden] {
	display: none;
}

/* Kortet ligger ved kanten sveipen går mot, så det peker samme vei som
   fingeren beveger seg. */
.pomm-swipe-hint-forward {
	flex-direction: row-reverse;
	right: 0;
}

.pomm-swipe-hint-back {
	left: 0;
}

.pomm-swipe-hint-arrow {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1;
	opacity: 0.65;
}

.pomm-swipe-hint-forward .pomm-swipe-hint-arrow::before {
	content: "→";
}

.pomm-swipe-hint-back .pomm-swipe-hint-arrow::before {
	content: "←";
}

.pomm-swipe-hint-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.pomm-swipe-hint-forward .pomm-swipe-hint-copy {
	text-align: right;
}

.pomm-swipe-hint-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	opacity: 0.6;
	text-transform: uppercase;
}

.pomm-swipe-hint-title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-family: var(--pomm-rd-serif);
	font-size: 15px;
	letter-spacing: -0.02em;
	line-height: 1.2;
	overflow: hidden;
}

/* Terskelen er nådd: slipper leseren nå, bytter vi artikkel. Fargeskiftet er
   hele beskjeden - uten den er sveipen en gjetning helt til siden forsvinner. */
.pomm-swipe-hint.is-armed {
	background: var(--pomm-rd-red);
}

.pomm-swipe-hint.is-armed .pomm-swipe-hint-arrow,
.pomm-swipe-hint.is-armed .pomm-swipe-hint-label {
	opacity: 1;
}

/* --- v1.5.0: arrangementer i Oslo ---------------------------------------- */

.pomm-rd-events-filters {
	border-bottom: 1px solid var(--pomm-rd-line);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-bottom: 14px;
}

.pomm-rd-events-filter {
	background: none;
	border: 1px solid var(--pomm-rd-line);
	border-radius: 999px;
	color: var(--pomm-rd-ink);
	cursor: pointer;
	font-family: var(--pomm-rd-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: 7px 14px;
	text-transform: uppercase;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.pomm-rd-events-filter:hover {
	border-color: var(--pomm-rd-ink);
}

.pomm-rd-events-filter.is-active {
	background: var(--pomm-rd-ink);
	border-color: var(--pomm-rd-ink);
	color: var(--pomm-rd-paper);
}

.pomm-rd-events-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pomm-rd-event {
	align-items: baseline;
	border-bottom: 1px solid var(--pomm-rd-line);
	display: grid;
	gap: clamp(16px, 3vw, 34px);
	/* Datoen får en fast kolonne. Uten den flytter overskriftene seg
	   sidelengs mellom en ensifret og en tosifret dato, og lista mister
	   den loddrette linja som holder den sammen. */
	grid-template-columns: 62px 1fr;
	padding: clamp(16px, 2.2vw, 24px) 0;
}

.pomm-rd-event[hidden] {
	display: none;
}

.pomm-rd-event-date {
	display: block;
	line-height: 1;
	text-align: center;
}

.pomm-rd-event-date b {
	display: block;
	font-family: var(--pomm-rd-serif);
	font-size: 34px;
	font-weight: 400;
	letter-spacing: -0.04em;
}

.pomm-rd-event-date i {
	display: block;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-top: 5px;
	text-transform: uppercase;
}

.pomm-rd-event-copy {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.pomm-rd-event-area {
	color: var(--pomm-rd-red);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pomm-rd-event-title {
	font-family: var(--pomm-rd-serif);
	font-size: clamp(19px, 2.2vw, 25px);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.pomm-rd-event-title a {
	color: inherit;
	text-decoration: none;
}

.pomm-rd-event-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Lenkene går ut av huset, og i en liste der noen oppføringer har lenke og
   andre ikke, er pila det eneste som skiller dem. */
.pomm-rd-event-title a::after {
	content: "↗︎";
	font-size: 0.6em;
	margin-left: 0.4em;
	opacity: 0.55;
	vertical-align: super;
}

.pomm-rd-event-meta {
	font-size: 12px;
	letter-spacing: 0.02em;
	opacity: 0.62;
}

@media (max-width: 720px) {
	.pomm-rd-event {
		gap: 14px;
		grid-template-columns: 48px 1fr;
	}

	.pomm-rd-event-date b {
		font-size: 26px;
	}
}

/* --- v1.6.0: Pomm nå, plukk en kjerne, Kjernen og Følg sporet ------------ */

/* Fire nye ting, alle bygget av det som allerede står i fila: linjene, den
   sperrede versalen i sans og brødskriften i antikva. Ingen nye farger, ingen
   avrundede kort, ingen skygger. */

/* --- Pomm nå ------------------------------------------------------------- */

/* Kortere enn de andre bolkene med vilje: notatene er korte, og full
   seksjonsluft ville gjort en rad med fire setninger til sidens tyngste
   element. */
.pomm-rd-now-section {
	padding-block: clamp(52px, 6vw, 96px);
}

/* Flex, ikke grid: med tre notater i stedet for fire skal raden fylle bredden
   likevel, ikke etterlate en tom fjerde kolonne. */
.pomm-rd-now-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Skillet mellom notatene er en loddrett strek, slik spaltene i et magasin er
   delt - ikke en ramme rundt hvert kort. */
.pomm-rd-now-item {
	border-left: 1px solid var(--pomm-rd-line);
	flex: 1 1 0;
	min-width: 0;
	padding: clamp(20px, 2.2vw, 30px) clamp(15px, 1.7vw, 28px) 0;
}

.pomm-rd-now-item:first-child {
	border-left: 0;
	padding-left: 0;
}

.pomm-rd-now-item:last-child {
	padding-right: 0;
}

.pomm-rd-now-note {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pomm-rd-now-image {
	margin-bottom: 16px;
}

.pomm-rd-now-image img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.pomm-rd-now-date {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: 11px;
	opacity: 0.5;
	text-transform: uppercase;
}

/* Versal i sans, som forsidens kickere. Antikva ville gjort notatet til en
   liten artikkel; det er nettopp det det ikke er. */
.pomm-rd-now-title {
	font-family: var(--pomm-rd-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.25;
	margin: 0 0 9px;
	text-transform: uppercase;
}

/* Klippet på fire linjer: skriver noen for langt, holder raden formen
   likevel. */
.pomm-rd-now-text {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	display: -webkit-box;
	font-family: var(--pomm-rd-serif);
	font-size: 15px;
	line-height: 1.45;
	margin: 0;
	overflow: hidden;
}

/* margin-top: auto holder lenkene på linje nederst når notatene over er
   ulike lange. */
.pomm-rd-now-link {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	margin: auto 0 0;
	padding-top: 14px;
	text-transform: uppercase;
}

.pomm-rd-now-link a {
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	text-decoration: none;
}

.pomm-rd-now-link a:hover {
	color: var(--pomm-rd-red);
}

/* --- plukk en kjerne ----------------------------------------------------- */

/* Står i stripa under «Nyeste», til venstre for «se alle saker». Stripa er
   satt til flex-end, så auto-margin til høyre er det som skyver denne mot
   venstre kant uten å røre regelen den deler rad med. */
.pomm-rd-plukk {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 auto 0 0;
}

.pomm-rd-plukk-cue {
	font-size: 12px;
	opacity: 0.55;
}

.pomm-rd-plukk-link {
	border-bottom: 1px solid currentColor;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding-bottom: 3px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* `a` foran klassen er ikke pynt: temaet setter `.pomm-rd-front a:hover {
   color: inherit }`, og uten elementet i velgeren taper denne regelen på
   spesifisitet og hover-fargen uteblir. */
a.pomm-rd-plukk-link:hover {
	color: var(--pomm-rd-red);
}

/* --- Kjernen ------------------------------------------------------------- */

/* Samme grep som «Kort fortalt» i høyremargen: tykk strek over, tynn under,
   ingen flate. Boksen skal lese som et opphold i teksten, ikke som en
   innboks-melding. */
.pomm-kjernen {
	border-bottom: 1px solid var(--pomm-rd-line);
	border-top: 2px solid var(--pomm-rd-ink);
	margin-block: clamp(30px, 4vw, 46px);
	padding: 15px 0 19px;
}

.pomm-kjernen-label {
	color: var(--pomm-rd-red);
	font-family: var(--pomm-rd-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 11px;
	text-transform: uppercase;
}

/* Litt mindre enn brødteksten rundt, så boksen ikke konkurrerer med den. */
.pomm-kjernen-text {
	font-family: var(--pomm-rd-serif);
	font-size: 17px;
	line-height: 1.5;
	margin: 0;
}

.pomm-kjernen-source {
	font-family: var(--pomm-rd-sans);
	font-size: 11px;
	letter-spacing: 0.05em;
	margin: 13px 0 0;
	opacity: 0.6;
}

.pomm-kjernen-source a {
	border-bottom: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
}

.pomm-kjernen-source a:hover {
	color: var(--pomm-rd-red);
}

/* --- Følg sporet --------------------------------------------------------- */

.pomm-rd-spor-section {
	padding-block: clamp(50px, 5.5vw, 88px) 0;
}

/* Sporet og «Les videre» står rett etter hverandre. Uten dette møtes to fulle
   seksjonsluftrom og halen under artikkelen blir dobbelt så lang som resten
   av siden. Er sporet tomt, fjernes hele gruppa i PHP, og da treffer ikke
   denne regelen - «Les videre» beholder luften sin. */
.pomm-rd-spor-section + .pomm-rd-readnext {
	padding-top: clamp(50px, 5.5vw, 88px);
}

/* En ol, ikke en ul: rekkefølgen er hele poenget. Tallene skjules - pilene
   forteller det samme, tydeligere. */
.pomm-rd-spor {
	list-style: none;
	margin: 0;
	max-width: 640px;
	padding: 0;
}

.pomm-rd-spor-step {
	padding-block: 15px;
	position: relative;
}

.pomm-rd-spor-step + .pomm-rd-spor-step {
	border-top: 1px solid var(--pomm-rd-line);
	padding-top: 34px;
}

/* Pila er utsmykning og står derfor i CSS, ikke i markupen: en skjermleser
   som leser lista trenger ikke høre «nedoverpil» mellom hver overskrift. */
.pomm-rd-spor-step + .pomm-rd-spor-step::before {
	content: "↓";
	font-size: 13px;
	left: 0;
	line-height: 1;
	opacity: 0.4;
	position: absolute;
	top: 11px;
}

.pomm-rd-spor-title {
	display: block;
	font-family: var(--pomm-rd-serif);
	font-size: clamp(20px, 2.3vw, 27px);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.pomm-rd-spor-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-top: 9px;
	opacity: 0.5;
	text-transform: uppercase;
}

.pomm-rd-spor-link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.pomm-rd-spor-link:hover .pomm-rd-spor-title {
	color: var(--pomm-rd-red);
}

/* Utgangspunktet er dempet: det er der leseren allerede står, og skal ikke se
   ut som noe å trykke på. */
.pomm-rd-spor-here .pomm-rd-spor-title {
	opacity: 0.45;
}

.pomm-rd-spor-marker {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-top: 9px;
	text-transform: uppercase;
}

/* --- v1.6.0: mindre skjermer -------------------------------------------- */

@media (max-width: 900px) {
	/* Fire spalter blir fire smale striper. Under denne bredden ligger
	   notatene på rekke og sveipes i stedet - samme bevegelse som mellom
	   artiklene. */
	.pomm-rd-now-list {
		margin-inline: 0;
		overflow-x: auto;
		padding-bottom: 10px;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}

	.pomm-rd-now-item {
		flex: 0 0 clamp(220px, 62vw, 300px);
		scroll-snap-align: start;
	}
}

@media (max-width: 720px) {
	.pomm-rd-now-section {
		padding-block: clamp(44px, 9vw, 64px);
	}

	/* Spørsmålet og knappen tar hele bredden når «se alle saker» ikke får
	   plass ved siden av. */
	.pomm-rd-plukk {
		flex-basis: 100%;
		gap: 9px;
		justify-content: space-between;
	}

	.pomm-rd-spor-section {
		padding-block: clamp(44px, 9vw, 64px) 0;
	}

	.pomm-rd-spor-section + .pomm-rd-readnext {
		padding-top: clamp(44px, 9vw, 64px);
	}

	.pomm-rd-spor-step + .pomm-rd-spor-step {
		padding-top: 30px;
	}
}


/* --- v1.8.5: Pomm nå med ett eller to notater ----------------------------- */

/* Raden ble tegnet for tre-fire notater, der `flex: 1 1 0` gir like spalter.
   Med bare ett notat strakte den samme regelen kortet over hele bredden:
   bildet ble et plakatoppslag, og notatet leste som sidens hovedsak - stikk
   motsatt av hva bolken er.

   `:first-child:nth-last-child(n)` teller hvor mange søsken som finnes uten at
   PHP-en trenger å skrive antallet inn i markupen. Ett eller to notater holder
   spaltebredden sin og legger seg til venstre; fra tre og opp strekker de seg
   som før. Bare på store skjermer - under 900px ligger notatene alt på en
   sveiperekke med fast bredde. */
@media (min-width: 901px) {
	.pomm-rd-now-item:first-child:nth-last-child(1),
	.pomm-rd-now-item:first-child:nth-last-child(2),
	.pomm-rd-now-item:first-child:nth-last-child(2) ~ .pomm-rd-now-item {
		flex: 0 1 clamp(240px, 25%, 320px);
	}
}

/* --- v1.10.0: notatmerket og tittelen ------------------------------------ */

/* Notatet leste som en artikkel: bilde, dato, tittel - samme oppbygning som et
   saks-kort. Merket «notat» sier hva kortet er, i samme sirkelform som
   stickerne på «fra arkivet», bare mindre, siden spalten er smal. */
.pomm-rd-now-flag {
	align-items: center;
	background: var(--pomm-rd-pink);
	border: 1px solid var(--pomm-rd-ink);
	border-radius: 50%;
	display: flex;
	flex: 0 0 auto;
	font-family: var(--pomm-rd-sans);
	font-size: 9px;
	font-weight: 800;
	height: 54px;
	justify-content: center;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	width: 54px;
}

.pomm-rd-now-image {
	position: relative;
}

/* Har notatet bilde, henger merket i hjørnet av det - som en etikett klistret
   på et utklipp. */
.pomm-rd-now-image .pomm-rd-now-flag {
	position: absolute;
	right: -11px;
	top: -11px;
	transform: rotate(12deg);
}

/* Uten bilde er det ingenting å klistre på, og merket blir kortets første
   linje i stedet. */
.pomm-rd-now-note > .pomm-rd-now-flag {
	margin-bottom: 14px;
	transform: rotate(-8deg);
}

/* Tittelen tapte mot en overskriftsregel av samme vekt, og notatet fikk
   forsidens display-antikva i stor grad - altså akkurat uttrykket til en sak.
   Med listen foran klassen står regelen et hakk høyere og vinner uansett
   rekkefølge på stilarkene. Verdiene er de samme som over. */
.pomm-rd-now-list .pomm-rd-now-title {
	font-family: var(--pomm-rd-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.25;
	margin: 0 0 9px;
	text-transform: uppercase;
}

.pomm-rd-now-list .pomm-rd-now-date {
	font-family: var(--pomm-rd-sans);
}

/* --- v1.15.0: stickerne som bilder ---------------------------------------- */

/* Merkene er ikke lenger tegnet i CSS, men brukerens egne klistremerker:
   «fra arkivet» i rosa, «les igjen» i rødt og «notat» i kremhvitt, alle med den
   samme randen av knust holo-folie. To forsøk på å lage den randen med
   gradienter (1.11.0 og 1.14.0) kom ikke i nærheten - ekte folie har tilfeldige
   flak og et fargespill som ingen konisk gradient gjentar. Nå gjør de ikke
   forsøket heller.

   Bildene er klippet til sirkelen og lagret som webp med gjennomsiktig
   bakgrunn i assets/stickers/, ~40 kB hver. Ordene står i bildet, så
   markupen er tom - de to på forsida var alt merket `aria-hidden`, og
   notatmerket beholder ordet sitt i en skjult span for skjermlesere. */

/* Ordene ligger i bildet. Ligger de også i markupen - fra en eldre mal lagret
   i Site Editor - skal de ikke tegnes oppå. `font-size: 0` på selve merket, og
   ikke på barna, så «notat» fremdeles leses av skjermlesere gjennom sin egen
   skjulte span. */
.pomm-rd-sticker {
	color: transparent;
	font-size: 0;
	line-height: 0;
}

.pomm-rd-sticker,
.pomm-rd-now-flag {
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border: 0;
	border-radius: 50%;
	/* Skyggen merket kaster på papiret. Den lå i originalbildene også, men ble
	   klippet bort sammen med den hvite bakgrunnen - her er den igjen, og den
	   følger merket når det roteres. */
	filter: drop-shadow(0 5px 11px rgba(17, 16, 15, 0.2));
	position: absolute;
}

.pomm-rd-sticker-pink {
	background-image: url("assets/stickers/fra-arkivet.webp");
	/* Litt større enn de tegnede sirklene: ordene ligger i bildet, innenfor
	   randen, og trenger diameteren for å være lesbare. */
	height: 122px;
	width: 122px;
}

.pomm-rd-sticker-red {
	background-image: url("assets/stickers/les-igjen.webp");
	height: 94px;
	width: 94px;
}

.pomm-rd-now-flag {
	background-image: url("assets/stickers/notat.webp");
	height: 74px;
	width: 74px;
}

/* Notatmerket uten bilde står i tekstflyten, ikke oppå noe. */
.pomm-rd-now-note > .pomm-rd-now-flag {
	position: relative;
}

/* --- v1.13.0: notatet skrevet for hånd ------------------------------------ */

/* Samme skrift som i STCKRZ/PommCollage - Oooh Baby, SIL Open Font License,
   lisensteksten ligger ved i assets/fonts/OFL.txt. Fila lastes fra temaet, ikke
   fra Google, så leseren ikke må innom en tredjepart for å se en overskrift.
   `swap`: heller Georgia i et halvt sekund enn en usynlig tittel. */
@font-face {
	font-display: swap;
	font-family: "Oooh Baby";
	font-style: normal;
	font-weight: 400;
	src: url("assets/fonts/OoohBaby-Regular.ttf") format("truetype");
}

/* Notatet er det ene stedet på Pomm der en menneskehånd får skrive. Versalen i
   sans sa «kicker», altså redaksjonell etikett; pennen sier at noen satt og
   noterte. Derfor bort med `text-transform` og sperringen - en skriveskrift i
   sperret versal er ikke håndskrift, det er en font som er tvunget. */
.pomm-rd-now-list .pomm-rd-now-title {
	font-family: "Oooh Baby", var(--pomm-rd-serif);
	font-size: clamp(26px, 2.2vw, 34px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.05;
	/* Skriveskrifter har lang underlengde; uten litt luft kolliderer j og g i
	   linja under. */
	margin: 0 0 12px;
	text-transform: none;
}

/* --- v1.16.0: notatet som tredje kort i boksparet -------------------------- */

/* Blokka er satt inn som tredje barn i .pomm-rd-coll-pair, ved siden av
   «fortalt underveis» og «sett med pomm-blikk». Foreldren er en flex-rad der
   hvert barn får `flex: 1 1 0`, så bredden stemte fra før - men innholdet lå
   som en smal spalte øverst i sin egen kolonne, og kortet så halvferdig ut ved
   siden av to fylte bokser.

   Her strekkes notatet gjennom hele høyden, og bildet får vokse. Reglene
   gjelder bare inne i boksparet: står blokka et annet sted, er den fremdeles
   den smale notatspalten den var laget som. */

.pomm-rd-coll-pair .pomm-rd-now-list,
.pomm-rd-now-section .pomm-rd-now-list {
	flex: 1;
	/* Rad, ikke kolonne. Denne sto på `column` fra den gang kortet var ett
	   enslig notat i boksparet - da var det uten virkning. Med tre notater
	   stablet den dem loddrett. */
	flex-direction: row;
	width: 100%;
}

/* Klassen står tre hakk høyt fordi regelen for enslige notater lenger oppe
   (v1.8.5) klemmer kortet til 320px. Den er riktig i den smale bolken og feil
   her. */
.pomm-rd-coll-pair .pomm-rd-now-list > .pomm-rd-now-item:first-child,
.pomm-rd-now-section .pomm-rd-now-list > .pomm-rd-now-item:first-child {
	border-left: 0;
	display: flex;
	flex: 1;
	max-width: none;
	padding: 0;
}

.pomm-rd-coll-pair .pomm-rd-now-note,
.pomm-rd-now-section .pomm-rd-now-note {
	flex: 1;
	width: 100%;
}

/* Bildet er det eneste som tåler å vokse - resten er en dato, en tittel og et
   par linjer. */
.pomm-rd-coll-pair .pomm-rd-now-image,
.pomm-rd-now-section .pomm-rd-now-image {
	margin-bottom: clamp(16px, 1.7vw, 26px);
}

.pomm-rd-coll-pair .pomm-rd-now-image img,
.pomm-rd-now-section .pomm-rd-now-image img {
	aspect-ratio: 4 / 3;
}

/* Samme trapp som overskriften i naboboksen, så de tre kortene leser som
   likeverdige. */
.pomm-rd-coll-pair .pomm-rd-now-list .pomm-rd-now-title,
.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-title {
	font-size: clamp(30px, 2.9vw, 46px);
	line-height: 1.02;
	margin-bottom: 14px;
}

.pomm-rd-coll-pair .pomm-rd-now-text,
.pomm-rd-now-section .pomm-rd-now-text {
	-webkit-line-clamp: 6;
	font-size: clamp(15px, 1.1vw, 17px);
}

@media (max-width: 900px) {
	.pomm-rd-coll-pair .pomm-rd-now-list,
	.pomm-rd-now-section .pomm-rd-now-list {
		overflow-x: visible;
	}
}

/* --- v1.20.0: notatet ligger på et håndlagd ark --------------------------- */

/* Brukerens eget ark fra STCKRZ, frilagt: hvit bakgrunn og slagskygge er
   nøklet bort, og den fillete kanten er beholdt. Ligger i
   assets/stickers/notatpapir.webp, ~73 kB.

   Papiret er nesten hvitt, og bakgrunnen var det også - de lot seg skille på
   varmen: arket har metning 13-24, hvit bakgrunn og grå slagskygge har 0-3.

   `100% 100%` og ikke `cover`: arket skal aldri beskjæres. Blir kortet høyere
   enn arket er, strekkes papiret litt - det synes ikke på en flate av
   linjer, mens et avkuttet hull i toppen ville synes med en gang.

   Toppfôringen er romsligere enn de andre sidene, så innholdet begynner under
   hullradén og ikke oppi den. */
.pomm-rd-now-note {
	background-image: url("assets/stickers/notatpapir.webp");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/* Det håndlagde arket har ingen hullrad i toppen, slik blokkarket hadde,
	   så toppen trenger ikke lenger ekstra klaring. */
	padding: clamp(26px, 6%, 40px) clamp(20px, 6%, 34px);
}

/* Papiret har alt en skygge langs underkanten i bildet; kortet trenger ingen
   ramme eller strek i tillegg. Skillestreken mellom notatene i den smale
   bolken ville dessuten delt to ark med en linje som ikke finnes. */
.pomm-rd-now-item {
	border-left: 0;
}

/* --- v1.24.0: ingen numre på forsida -------------------------------------- */

/* Nummerbadgen er tatt av både hovedsaken og «Nyeste»-rekken. Den lovet en
   rekkefølge den ikke holdt: 01 stod i heroen, så kom to saker uten nummer, og
   så 02-04 langt nede. Rekken av tre leser som en rekke uansett - den trengte
   ikke tall for å forstås, og uten dem får fotografiene raden for seg selv.

   Arkivet beholder sin nummerering. Der er den til nytte: en lang liste med
   tolv saker om gangen, der tallet forteller hvor i rekkefølgen man er.

   Stickerne ligger fortsatt i assets/stickers/ (nr-01 til nr-04), så de kan
   settes inn igjen uten å lages på nytt. */
.pomm-rd-hero-image::after,
.pomm-rd-latest .pomm-rd-story-image::after {
	content: none;
}

/* --- v1.19.0: håndskrift på linjene --------------------------------------- */

/* Linjene er tatt ut av papirbildet og tegnes her i stedet. Grunnen er enkel:
   i bildet ligger de på faste steder, og teksten traff dem bare ved et
   sammentreff. Tegnet som en gjentagende gradient med nøyaktig samme høyde som
   tekstens linjeavstand, treffer skriften alltid - uansett hvor lang
   overskriften er, hvor bred spalten blir, eller hvor mange linjer notatet får.

   Én linjeavstand for hele kortet, så overskrift og brødtekst står i samme
   linjenett. */
.pomm-rd-now-note {
	--pomm-rule: 30px;
	/* Blyantgrå, ikke rosa: det håndlagde arket er ulinjert, så linjene skal
	   lese som noe noen har trukket opp selv - ikke som trykk. */
	--pomm-rule-ink: rgba(122, 108, 94, 0.32);
}

.pomm-rd-now-title,
.pomm-rd-now-text {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0 calc(var(--pomm-rule) - 1px),
		var(--pomm-rule-ink) calc(var(--pomm-rule) - 1px) var(--pomm-rule)
	);
}

/* Brødteksten i samme hånd som overskriften. Skriveskrift trenger mer kropp
   enn antikva for å være like lesbar, derav sprangetved i størrelse. */
.pomm-rd-now-list .pomm-rd-now-text {
	font-family: "Oooh Baby", var(--pomm-rd-serif);
	font-size: 19px;
	line-height: var(--pomm-rule);
}

.pomm-rd-now-list .pomm-rd-now-title {
	font-size: 26px;
	line-height: var(--pomm-rule);
	margin-bottom: 0;
}

/* --- kortet i boksparet --------------------------------------------------- */

.pomm-rd-coll-pair .pomm-rd-now-note,
.pomm-rd-now-section .pomm-rd-now-note {
	--pomm-rule: 38px;
	padding: clamp(24px, 5.5%, 38px) clamp(18px, 5%, 30px) clamp(22px, 5%, 34px);
}

.pomm-rd-coll-pair .pomm-rd-now-list .pomm-rd-now-title,
.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-title {
	font-size: clamp(26px, 2.2vw, 34px);
	line-height: var(--pomm-rule);
	margin-bottom: 0;
}

.pomm-rd-coll-pair .pomm-rd-now-list .pomm-rd-now-text,
.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-text {
	-webkit-line-clamp: 5;
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: var(--pomm-rule);
}

/* Bildet er det som gir etter. Med `flex: 1 1 0` teller det ikke med i kortets
   naturlige høyde, og da er det naboboksene som bestemmer radhøyden - kortet
   slutter på samme linje som dem i stedet for å skyve raden nedover. Bildet
   fyller det som blir til overs. */
.pomm-rd-coll-pair .pomm-rd-now-image,
.pomm-rd-now-section .pomm-rd-now-image {
	flex: 0 0 auto;
}

/* Ingen `overflow: hidden` her: «notat»-merket henger med vilje ut over
   bildets hjørne, og ble kappet av da bildet klippet sitt eget innhold. */
.pomm-rd-coll-pair .pomm-rd-now-image img,
.pomm-rd-now-section .pomm-rd-now-image img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Det er teksten, ikke bildet, som strekker seg. Bildet beholder sitt 4:3 og
   står som det er fotografert - forrige forsøk lot bildet fylle restplassen,
   og da ble motivet zoomet inn til det ugjenkjennelige. Linjene under teksten
   fortsetter i stedet ned til arkets fot, slik en notatside gjør når det er
   plass igjen. */
.pomm-rd-coll-pair .pomm-rd-now-text,
.pomm-rd-now-section .pomm-rd-now-text {
	flex: 1;
}

/* --- v1.22.0: arket ligger, og merket er etiketten ------------------------ */

/* 1. Arket lå ikke - det stod. Den originale slagskyggen ble nøklet bort
   sammen med bakgrunnen, og uten skygge og fall leser et papir som en flate,
   ikke som noe som er lagt ned. `drop-shadow` og ikke `box-shadow`, fordi
   skyggen skal følge den fillete kanten og ikke et rektangel.

   Dreiningen er under én grad. Mer, og kortet begynner å slåss med
   naboboksene om plassen; mindre, og øyet leser det som skjevt trykk. */
.pomm-rd-coll-pair .pomm-rd-now-note,
.pomm-rd-now-section .pomm-rd-now-note {
	filter: drop-shadow(0 9px 16px rgba(17, 16, 15, 0.14));
	position: relative;
	transform: rotate(-0.7deg);
}

/* 2. Merket er kortets etikett, ikke en dekorasjon i et hjørne. Naboboksene
   har «POMM STORIES» og «POMM SER» øverst til venstre; notatet får sitt merke
   samme sted, hengende ut over papirkanten som noe påklistret.

   Det løser samtidig at kremhvitt merke på kremhvitt papir nesten forsvant:
   nå ligger halve merket over fotografiet og har noe å spille mot. */
.pomm-rd-coll-pair .pomm-rd-now-image,
.pomm-rd-now-section .pomm-rd-now-image {
	position: static;
}

.pomm-rd-coll-pair .pomm-rd-now-image .pomm-rd-now-flag,
.pomm-rd-now-section .pomm-rd-now-image .pomm-rd-now-flag {
	height: 96px;
	left: -20px;
	right: auto;
	top: -24px;
	transform: rotate(-9deg);
	width: 96px;
	z-index: 3;
}

/* 3. Blekk, ikke trykksverte. Papiret er varmt, og en kald nesten-svart
   flyter ikke sammen med det. */
.pomm-rd-now-note {
	color: #2b2119;
}

/* Datoen stod i sperret versal mens alt annet på arket var skrevet for hånd.
   Samme hånd, og små bokstaver - en skriveskrift i versal er ingen hånd. */
.pomm-rd-now-list .pomm-rd-now-date {
	font-family: "Oooh Baby", var(--pomm-rd-serif);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.01em;
	opacity: 0.65;
	text-transform: none;
}

.pomm-rd-coll-pair .pomm-rd-now-list .pomm-rd-now-date,
.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-date {
	font-size: 20px;
	line-height: var(--pomm-rule);
	margin-bottom: 0;
}

/* --- v1.23.0: notatet alene på sin egen rad -------------------------------- */

/* Bolken er flyttet opp, rett under «Nyeste»-rekken: et notat er ferskvare, og
   sto for langt nede da det lå mellom faste spalter lenger ned på sida.

   Alene i full bredde ville arket blitt et banner. Bredden holdes derfor nede
   til noe som fortsatt leser som et ark man kan holde, og luften rundt gjør
   resten av jobben. */
.pomm-rd-now-section .pomm-rd-now-list {
	max-width: clamp(300px, 34vw, 460px);
}

/* Regelen for enslige notater lenger oppe klemmer kortet til 320px, og er
   riktig i en rad med fire. Her settes bredden i stedet av taket under - men
   `max-width` må gjentas her, ellers vinner denne regelen med sin høyere
   spesifisitet og notatet strekker seg over hele raden. */
.pomm-rd-now-section .pomm-rd-now-list > .pomm-rd-now-item:first-child {
	/* Samme grunnlag som søsknene, ellers blir det første arket bredere enn
	   de to andre. */
	flex: 1 1 0;
	max-width: var(--pomm-now-width);
}

/* --- v1.24.0: tre ark i rekken -------------------------------------------- */

/* Bredden lå på lista og passet ett ark. Nå ligger den på arket selv: med ett
   notat står det like bredt som før og til venstre, med tre deler de raden
   likt - uten at noe måtte skrives om for hvert antall. */
.pomm-rd-now-section .pomm-rd-now-list {
	gap: clamp(18px, 2.2vw, 34px);
	max-width: none;
}

/* Ett tall for bredden, brukt av begge reglene over og under. Et notat skal
   se ut som noe man kan holde - ikke som en plakat. */
.pomm-rd-now-section .pomm-rd-now-list {
	--pomm-now-width: clamp(250px, 26vw, 380px);
}

.pomm-rd-now-section .pomm-rd-now-item {
	max-width: var(--pomm-now-width);
}

/* Merket skalerer ikke av seg selv, og 96px på et 380px-ark er en knapp, ikke
   en etikett. */
.pomm-rd-now-section .pomm-rd-now-image .pomm-rd-now-flag {
	height: 72px;
	left: -16px;
	top: -18px;
	width: 72px;
}

/* Tre ark med nøyaktig samme fall ser trykt ut. Ulik vinkel på hvert, små nok
   til at ingen leser dem som skjeve, gjør at de ser lagt ned ut. */
.pomm-rd-now-section .pomm-rd-now-item:nth-child(2) .pomm-rd-now-note {
	transform: rotate(0.6deg);
}

.pomm-rd-now-section .pomm-rd-now-item:nth-child(3) .pomm-rd-now-note {
	transform: rotate(-1.1deg);
}

/* --- v1.25.0: strammere luft mellom bolkene ------------------------------- */

/* Seksjonene hadde opptil 145px topp og bunn hver. To naboer ga dermed nesten
   300px tomrom, og forsida ble en trapp av bolker med lange hopp mellom.
   Luften er redusert med rundt førti prosent - nok til at raden under ligger
   innenfor synsfeltet når man er ferdig med raden over, og fortsatt mer enn
   nok til at bolkene ikke klistrer seg sammen. */
.pomm-rd-section {
	padding-block: clamp(46px, 5.2vw, 84px);
}

.pomm-rd-now-section,
.pomm-rd-feeds-band {
	padding-block: clamp(38px, 4.4vw, 70px);
}

.pomm-rd-coll-band {
	padding-block: clamp(38px, 4.4vw, 70px) 0;
}

/* --- v1.28.1: ingen strek under notatene ---------------------------------- */

/* Streken fra 1.27.0 er tatt bort igjen. Den lukket bolken, og det er feil her:
   «Pomm nå», «fortalt underveis» og «sett med pomm-blikk» hører sammen som
   nåtid på forsida, og en strek mellom notatene og boksene skiller nettopp det
   som skal leses i ett. Streken over overskriften åpner bolken; derfra og ned
   løper nåtiden uten avbrudd. */

/* --- v1.30.0: ett notat på mobil ------------------------------------------ */

/* På mobil vises **ett** notat. Ikke tre i en sveiperekke, ikke to halve ved
   siden av hverandre - ett ark, hele bredden.

   De to andre skjules med CSS og ikke med et lavere antall i PHP, fordi
   serveren ikke vet hvor bred skjermen er. Markupen inneholder fortsatt alle
   tre, og de kommer til syne igjen så snart skjermen er bred nok til å vise
   dem side om side.

   Alt som hadde med sveip å gjøre - kikkehull, snapping, skjult rullefelt - er
   borte her. Det var svaret på et spørsmål som ikke lenger stilles.

   Grensen går ved 700px og ikke 900px: en iPad i høydeformat er 810-834px bred
   og har god plass til to ark ved siden av hverandre. Se bolken under. */
@media (max-width: 700px) {
	.pomm-rd-now-section .pomm-rd-now-list {
		display: block;
		overflow-x: visible;
		padding-block: 0;
	}

	.pomm-rd-now-section .pomm-rd-now-item + .pomm-rd-now-item {
		display: none;
	}

	/* Selektoren står like høyt som regelen den skal slå: taket på 380px
	   settes lenger oppe med `> .pomm-rd-now-item:first-child`, altså fire
	   klasser, og en regel med to klasser taper uansett hvor sent den kommer. */
	.pomm-rd-now-section .pomm-rd-now-list > .pomm-rd-now-item,
	.pomm-rd-now-section .pomm-rd-now-list > .pomm-rd-now-item:first-child {
		max-width: none;
		width: 100%;
	}

	/* Arket fyller nå skjermen, og tåler et litt åpnere linjenett enn da det
	   lå på 260px i en rekke. */
	.pomm-rd-now-section .pomm-rd-now-note {
		--pomm-rule: 32px;
		padding: 22px 20px 20px;
		/* Ingen naboer å ligge skjevt mot, og et fall på ett enkelt ark leser
		   som en feil i stedet for som en gest. */
		transform: none;
	}

	.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-title {
		font-size: 27px;
	}

	.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-text {
		-webkit-line-clamp: 6;
		font-size: 18px;
	}

	.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-date {
		font-size: 16px;
	}

	/* Merket tilbake til etikettplassen øverst til venstre - innenfor arket,
	   siden et merke som henger utenfor ville stukket ut i skjermkanten. */
	.pomm-rd-now-section .pomm-rd-now-image {
		position: relative;
	}

	.pomm-rd-now-section .pomm-rd-now-image .pomm-rd-now-flag {
		bottom: auto;
		height: 52px;
		left: 8px;
		right: auto;
		top: 8px;
		width: 52px;
	}
}

/* --- v1.31.0: to notater på nettbrett ------------------------------------- */

/* Mellom telefon og bred skjerm: iPad i høydeformat (810-834px), iPad mini
   (744px) og delt skjerm på større brett. Tre ark blir for smale her og ett
   blir for tomt - to fyller raden uten at noen av dem klemmes.

   Det tredje notatet skjules, som det andre og tredje gjør på telefon. I
   landskap er brettet 1024px eller mer, og da gjelder de vanlige reglene med
   alle tre. */
@media (min-width: 701px) and (max-width: 900px) {
	.pomm-rd-now-section .pomm-rd-now-list {
		display: flex;
		gap: clamp(16px, 2.4vw, 28px);
		/* Grunnregelen for små skjermer gjør lista til en sveiperekke. Her
		   står arkene stille side om side i stedet. */
		overflow-x: visible;
		padding-block: 0;
	}

	.pomm-rd-now-section .pomm-rd-now-list > .pomm-rd-now-item,
	.pomm-rd-now-section .pomm-rd-now-list > .pomm-rd-now-item:first-child {
		flex: 1 1 0;
		max-width: none;
	}

	.pomm-rd-now-section .pomm-rd-now-item:nth-child(3) {
		display: none;
	}

	.pomm-rd-now-section .pomm-rd-now-note {
		--pomm-rule: 30px;
		padding: 20px 17px 18px;
	}

	.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-title {
		font-size: 24px;
	}

	.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-text {
		-webkit-line-clamp: 5;
		font-size: 17px;
	}

	.pomm-rd-now-section .pomm-rd-now-list .pomm-rd-now-date {
		font-size: 15px;
	}

	/* Merket innenfor arket også her: to ark med 20-28px mellom seg har ikke
	   plass til en etikett som henger 16px utenfor kanten uten at den legger
	   seg oppå naboen. */
	.pomm-rd-now-section .pomm-rd-now-image {
		position: relative;
	}

	.pomm-rd-now-section .pomm-rd-now-image .pomm-rd-now-flag {
		bottom: auto;
		height: 54px;
		left: 8px;
		right: auto;
		top: 8px;
		width: 54px;
	}
}

/* --- v1.31.4: «Hva skjer i Oslo» som en liten boks ------------------------ */

/* Bolken tok en hel skjermhøyde for noe som er en notis ved siden av
   redaksjonelt stoff. Den krymper derfor til en innrammet boks i venstre
   tredjedel, med samme typografi som resten — bare i notisstørrelse.
   Alt er skrudd fast under .pomm-rd-events-section, slik at kortkoden brukt
   i en vanlig side fortsatt gir den store lista. */

.pomm-rd-events-section {
	/* Luften over og under var målt for en seksjon i full høyde; en notis
	   trenger ikke 145 piksler på hver side for å bli sett. */
	max-width: 420px;
	padding-block: clamp(48px, 5vw, 80px);
}

/* Overskriften er ikke lenger en seksjonstittel, men etiketten på boksen:
   den flytter ned på selve rammen og settes i sperret versal. */
.pomm-rd-events-section .pomm-rd-section-heading {
	border: 0;
	margin-bottom: 0;
	padding-bottom: 10px;
}

.pomm-rd-events-section .pomm-rd-section-heading h2 {
	font-family: var(--pomm-rd-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

.pomm-rd-events-section .pomm-rd-events {
	border: 1px solid var(--pomm-rd-ink);
	padding: 4px 20px;
}

.pomm-rd-events-section .pomm-rd-events-filters {
	border-bottom: 1px solid var(--pomm-rd-line);
	gap: 5px;
	margin-top: 16px;
	padding-bottom: 12px;
}

.pomm-rd-events-section .pomm-rd-events-filter {
	font-size: 9px;
	letter-spacing: 0.12em;
	padding: 5px 10px;
}

/* Datoen beholder sin faste kolonne, men står nå på én linje — «19 aug»
   trenger ikke 62 piksler og tre etasjer når raden ellers er tre linjer. */
.pomm-rd-events-section .pomm-rd-event {
	gap: 12px;
	grid-template-columns: 46px 1fr;
	padding: 13px 0;
}

.pomm-rd-events-section .pomm-rd-event:last-child {
	border-bottom: 0;
}

.pomm-rd-events-section .pomm-rd-event-date {
	align-items: baseline;
	column-gap: 4px;
	display: flex;
	flex-wrap: wrap;
	text-align: left;
}

.pomm-rd-events-section .pomm-rd-event-date b {
	font-family: var(--pomm-rd-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
}

.pomm-rd-events-section .pomm-rd-event-date i {
	font-size: 9px;
	margin-top: 0;
	opacity: 0.6;
}

.pomm-rd-events-section .pomm-rd-event-copy {
	gap: 3px;
}

/* Titlene fra Ticketmaster er lange nok til å bli fem linjer i en smal
   spalte. To linjer og så avkorting holder raden forutsigbar. */
.pomm-rd-events-section .pomm-rd-event-title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 17px;
	line-height: 1.2;
	overflow: hidden;
}

.pomm-rd-events-section .pomm-rd-event-meta {
	font-size: 11px;
}

@media (max-width: 720px) {
	/* På mobil er det ingen plass ved siden av å spare — boksen får hele
	   bredden, men beholder den lave radhøyden. */
	.pomm-rd-events-section {
		max-width: none;
	}

	.pomm-rd-events-section .pomm-rd-event {
		grid-template-columns: 46px 1fr;
	}

	.pomm-rd-events-section .pomm-rd-event-date b {
		font-size: 14px;
	}
}

/* --- v1.31.5: arrangementsbåndet under nyhetsbrevet ----------------------- */

/* Bolken flyttet ut av <main> og ned under det rosa nyhetsbrevfeltet. Der har
   den ingen constrained-forelder å arve bredden fra, så den får sitt eget
   bånd. Papirfargen skiller den fra det rosa over og bunnen under uten at det
   trengs en ny strek. */
.pomm-rd-events-band {
	background: var(--pomm-rd-paper);
}

/* --- v1.31.6: arrangementene på én linje hver ----------------------------- */

/* Tre linjer per arrangement — felt, tittel, sted — er en seksjon. Én linje
   er en notis, og det er det bolken er nå. Feltnavnet ryker: står det «kunst
   og kultur» over samtlige fem, sier det ingenting. Filtreringen bruker
   data-area på raden og virker fortsatt. */

.pomm-rd-events-band .pomm-rd-events-section {
	/* Boksen står alene i feltet sitt og kan være bredere. Uten bredden får
	   ikke tittelen plass på linja, og hele poenget ryker. */
	max-width: 680px;
	padding-block: clamp(36px, 4vw, 56px);
}

.pomm-rd-events-band .pomm-rd-event {
	align-items: baseline;
	column-gap: 14px;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	padding: 8px 0;
}

.pomm-rd-events-band .pomm-rd-event-area {
	display: none;
}

.pomm-rd-events-band .pomm-rd-event-copy {
	display: contents;
}

/* Én linje, og det som ikke får plass avkortes. Ticketmaster-titler kan være
   nitti tegn lange, og en rad som vokser til to linjer ødelegger takten. */
.pomm-rd-events-band .pomm-rd-event-title {
	display: block;
	font-size: 16px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pomm-rd-events-band .pomm-rd-event-meta {
	font-size: 11px;
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 720px) {
	/* Sted og klokkeslett er det første som må vike når linja blir smal:
	   datoen og tittelen er det leseren velger ut fra. */
	.pomm-rd-events-band .pomm-rd-event {
		grid-template-columns: 46px minmax(0, 1fr);
	}

	.pomm-rd-events-band .pomm-rd-event-meta {
		display: none;
	}
}

/* --- v1.31.7: notatarkene sentrert i raden -------------------------------- */

/* Arkene har `flex: 1 1 0`, men taket på bredden gjør at de slutter å vokse
   ved 380px. Resten av raden ble dermed liggende som luft til høyre, og de
   tre arkene så forskjøvet ut mot venstre. Overskuddet fordeles nå likt på
   hver side i stedet. */
.pomm-rd-now-section .pomm-rd-now-list {
	justify-content: center;
}

/* --- v1.32.5: arrangementene som egen spalte i bunnteksten ---------------- */

/* Boksen sto i sitt eget bånd over bunnteksten og ble en tredje flate på rad.
   Den er flyttet inn i bunnrutenettet: brødteksten - logo, «Bak det vi liker»,
   lenkene - stables i venstre spalte, og boksen får hele den høyre. */

.pomm-rd-footer-grid > * {
	grid-column: 1;
}

/* Spennet skrives ut fordi `-1` bare teller til siste uttrykte linje, og
   radene her lages implisitt av innholdet. Tallet er raust med vilje: et
   spenn som er lengre enn det finnes rader, skader ikke, mens et for kort
   spenn ville sluppet noe inn i høyre spalte under boksen. */
.pomm-rd-footer-grid > .pomm-rd-footer-events {
	align-self: start;
	grid-column: 2;
	grid-row: 1 / span 8;
}

/* Ytterkassa har ingen egen flate lenger - den ligger på bunntekstens krem. */
.pomm-rd-footer-events.pomm-rd-events-band {
	background: none;
}

/* Bredden settes av spalten, og luften over og under av bunnteksten selv. */
.pomm-rd-footer-events .pomm-rd-events-section {
	max-width: none;
	padding-block: 0;
}

@media (max-width: 900px) {
	/* Én spalte: boksen legger seg under lenkene i stedet for ved siden av. */
	.pomm-rd-footer-grid > .pomm-rd-footer-events {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --- v1.36.0: strammere overgang der stripa sto --------------------------- */

/* Den rosa stripa mellom toppsakene og saksrekka er borte igjen. Luften
   seksjonen har over seg var målt for å stå etter en bolk, ikke rett under to
   kort med ramme rundt - der ble 84px et hull. */
.pomm-rd-latest {
	padding-top: clamp(26px, 2.8vw, 42px);
}

/* --- v1.36.1: toppsaken og sekundærraden henger sammen igjen -------------- */

/* Sekundærraden er tegnet for å sitte klistret under toppsaken: rammen dens
   har `border-top: 0` nettopp fordi toppsakens underkant skulle være
   delelinja. Blokkavstanden fra WordPress la likevel ~17px papir mellom dem,
   og da ble resultatet en strek, en luftspalte, og en rad uten overkant -
   som ser ut som en glipp, ikke som et valg. */
.pomm-rd-second-query {
	margin-block-start: 0;
}

/* Delelinja må da finnes. Toppsaken har bare sidekanter, så uten denne ville
   de to radene med bilder møtt hverandre uten noe imellom. */
.pomm-rd-hero {
	border-bottom: 1px solid var(--pomm-rd-ink);
}

/* --- v1.36.2: luft mellom toppsaken og sekundærraden ---------------------- */

/* Klistret var for tett. Raden får luft igjen - men da må den også ha en
   overkant: en rad uten ramme oppe, med papir over seg, er nettopp det som
   så ut som en glipp i utgangspunktet. Nå er begge to lukkede bokser med et
   bevisst mellomrom, ikke to halve rammer. */
.pomm-rd-second-query {
	margin-block-start: clamp(24px, 2.6vw, 40px);
}

.pomm-rd-second-query .wp-block-post-template {
	border-top: 1px solid var(--pomm-rd-ink);
}

/* --- v1.36.3: prikken på alle saker --------------------------------------- */

/* Den røde kjernen var forbeholdt toppsakene, med den begrunnelsen at den var
   et motiv og ikke en kortdekorasjon. Regelen som slo den av for saksrekka og
   for ukas sak er fjernet: nå bærer hver sak den, og feltnavnene leses likt
   over hele forsida. Ingen ny regel trengs - grunnregelen på .pomm-rd-eyebrow
   gjaldt allerede, den ble bare overstyrt. */

/* --- v1.37.0: kilde under arrangementslista ------------------------------- */

/* Var liten og grå da den bare var en kildehenvisning. Nå er den lovpålagt
   merking av betalte lenker, og da er kravet at den er lett å få øye på: full
   svarthet, samme størrelse som resten av småteksten, og en strek over som
   skiller den fra arrangementene i stedet for at den flyter med som en av
   dem. Uthevingen er det eneste stedet på forsida der fet sans brukes i
   brødtekststørrelse - med vilje. */
.pomm-rd-events-source {
	border-top: 1px solid var(--pomm-rd-line);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	padding-top: 11px;
	text-transform: uppercase;
}

/* --- v1.38.1: merket lite i menylinja, og en bryter for rosa -------------- */

/* «Jeg vil beholde den gamle versjonen av nettsiden, slik som den ser ut nå.
   Bare endre på logo og rosa/hvit-knappen. Logoen kan være mye mindre og i
   menylinjen.»

   Alt over denne linja står urørt. Denne bolken gjør to ting, og bare to.

   1. Ordmerket krymper fra 530 til rundt 110 piksler og flytter ned i
      menylinja. Båndet det sto i - de 104-184 pikslene mellom den røde stripa
      og kategoriene - forsvinner da av seg selv, fordi det ikke lenger har noe
      å bære. Toppen blir én linje: merke, bryter, kategorier, søk, abonner.

   2. En bryter til høyre for merket lar leseren male hele sida rosa. Hvit er
      fortsatt utgangspunktet; ingen som ikke rører bryteren ser noen forskjell
      fra i dag.

   Ingen markup er flyttet for å få til punkt 1. Grunnen er at toppen på
   pomm.no kan ligge som en lagret kopi i Site Editor, og den kopien overstyrer
   parts/header.html - en regel på oppsettet treffer begge, en flyttet blokk i
   fila treffer bare den ene. */

/* --- merket ned i menylinja --- */

/* Toppen er tre felt under hverandre: den røde stripa, merkefeltet og
   menylinja. Her blir den en flex-rad som brytes: stripa tar første linje for
   seg selv, resten deler den neste.

   `display: contents` på merkefeltet er det som gjør jobben. Feltet slutter å
   tegne en boks, men barna blir stående - og de blir da ledd i headerens egen
   rad i stedet for i sin egen. Merket og handlingene havner altså på linje med
   menyen uten at én eneste blokk er flyttet i markupen.

   Faller `display: contents` bort i en gammel nettleser, står toppen som før
   med et lite merke i stedet for et stort. Det er en dårligere topp, ikke en
   ødelagt en. */

.pomm-rd-header {
	/* Samme skall som resten av sida: `min(1440px, 100% - 48px)` sentrert er
	   det samme som 24 pikslers luke inntil linja blir bredere enn 1488, og
	   halve overskuddet etter det. Regnet ut én gang her, fordi den røde
	   stripa må trekke seg ut av nøyaktig den samme luka igjen. */
	--pomm-meny-luke: max(24px, calc((100% - 1440px) / 2));

	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	padding-inline: var(--pomm-meny-luke);
	/* Luft mellom den røde stripa og linja under. Den ligger i radgapet og
	   ikke som margin på menyfeltet: en margin der teller med i linjas
	   høyde, og da blir merket sentrert mot en boks som er 20 piksler
	   høyere enn den det står ved siden av - det er nok til at merket
	   synlig ligger over midten av kategoriene. */
	row-gap: 12px;
}

/* Stripa skal fortsatt gå fra kant til kant, så den tar hele første linje og
   trekker seg ut av headerens luke igjen. `!important` fordi WordPress' egen
   regel for alignfull-barn (`.has-global-padding > .alignfull`) er to klasser
   og vinner ellers på spesifisitet. */
.pomm-rd-header > .pomm-rd-topline-wrap {
	/* `flex-basis: auto` og bredden satt selv. Med `flex: 0 0 100%` er
	   basisen radens egen bredde, og da flytter de negative margene stripa
	   mot venstre uten å gjøre den bredere - den ble 48 piksler for kort og
	   sluttet før høyre kant. */
	flex: 0 0 auto;
	margin-inline: calc(-1 * var(--pomm-meny-luke)) !important;
	width: calc(100% + 2 * var(--pomm-meny-luke));
}

.pomm-rd-masthead {
	display: contents;
}

/* Merkefeltet er `is-layout-flow` i WordPress' oppsett, og da får hvert barn
   etter det første `margin-block-start: 1.25rem`. I en flyt stabler den
   ingenting - her ville den dyttet handlingene og bryteren 20 piksler ned fra
   merkets linje. */
.pomm-rd-masthead > * {
	margin-block: 0;
}

/* Mye mindre: fra 250-530 til 84-116. Merket er nå en avsender ytterst til
   venstre i linja, ikke en plakat.

   `!important` fordi Site Logo-blokka kan ha en bredde lagret som inline style
   i den lagrede kopien i Site Editor, og inline style slår enhver vanlig
   selektor. */
.pomm-rd-brand {
	align-self: center;
	flex: 0 0 auto;
	margin-inline: 0 !important;
	order: 0;
	width: clamp(84px, 8vw, 116px) !important;
}

/* Bryteren hører til merket og skal leses sammen med det, ikke som første
   menypunkt: kortere luke inn til den enn ut til kategoriene. */
.pomm-modus {
	align-self: center;
	margin-left: 12px;
	order: 1;
}

/* Menyen tar resten av linja. Streken over den er fjernet: den delte tidligere
   merkefeltet fra kategoriene, og det skillet finnes ikke lenger - den røde
   stripa er nå det som avslutter linja oppover. En strek som bare gikk under
   kategoriene og ikke under merket ville dessuten sett ut som en halv strek.

   `margin-inline: 0 !important` fordi WordPress gir alignwide-barn i et
   constrained oppsett `margin-left: auto !important`. Auto-marger i en flex-rad
   spiser opp all ledig plass, og da havner kategoriene midt på linja. */
.pomm-rd-nav {
	border-top: 0;
	flex: 1 1 auto;
	margin: 0 !important;
	max-width: none;
	min-height: 62px;
	order: 2;
	padding-left: clamp(14px, 1.8vw, 26px);
	width: auto;
}

/* Søk og abonner ytterst til høyre, som før - de har bare byttet linje. */
.pomm-rd-nav-actions {
	align-self: center;
	flex: 0 0 auto;
	/* Venstremargen skal være auto - det er den som skyver søk og abonner
	   ytterst til høyre den dagen menyen ikke fyller linja selv. Bare
	   høyremargen nulles, og begge med `!important` fordi WordPress' regel
	   for alignwide-barn har det. */
	margin: 0 0 0 auto !important;
	order: 3;
	padding-left: clamp(12px, 1.6vw, 22px);
}

/* --- nettbrett: 601-999 piksler --- */

/* Under omtrent tusen piksler går ikke linja opp. Leddene måler til sammen
   994 piksler ved sin egen minstebredde - 24 i luke, 84 til merket, 52 til
   bryteren, 507 til kategoriene, 249 til søk og abonner, og lukene mellom dem
   - og da er det abonner-knappen som ryker først.

   Den brytes med vilje her i stedet for å la det skje av seg selv. Skjer det
   av seg selv, vet ingen regel at det har skjedd, og da er det ingen som kan
   legge luft under raden som falt ned: knappene ble stående klemt mot streken
   i bunnen av toppen. */

@media (min-width: 721px) and (max-width: 999px) {
	.pomm-rd-nav-actions {
		flex: 0 0 100%;
		justify-content: flex-end;
		padding: 0 0 12px;
	}
}

/* --- telefon --- */

@media (max-width: 720px) {
	.pomm-rd-header {
		--pomm-meny-luke: 12px;
	}

	.pomm-rd-brand {
		width: 76px !important;
	}

	/* Kategoriene ligger i en overlay-meny her, så menyfeltet er bare
	   hamburgeren. Da trenger det ingen høyde av seg selv. */
	.pomm-rd-nav {
		min-height: 54px;
		padding-left: 10px;
	}

	/* Merke, bryter og hamburger på første linje, søk og abonner på den neste.
	   Alt på én linje går ikke opp under 600 piksler: de fem leddene måler
	   tilsammen mer enn skjermen er bred, og da er det abonner-knappen som
	   ryker ut over høyre kant. */
	.pomm-rd-nav-actions {
		flex: 0 0 100%;
		justify-content: flex-end;
		padding: 0 0 12px;
	}
}

/* --- selve bryteren ------------------------------------------------------ */

/* En skyvebryter, ikke en knapp med tekst: den bytter ikke side, den bytter
   flate, og en bryter er den formen som sier det. Den kan klikkes, dras og
   styres med piltastene - se assets/js/pomm-modus.js.

   VIL DU FJERNE HELE FUNKSJONEN: slett denne bolken og den under, fila
   inc/rosa-og-hvit.php, assets/js/pomm-modus.js og linja i modul-lista i
   functions.php. Resten av toppen står igjen som den er. */

.pomm-modus {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	padding: 0;
	/* Draget går sidelengs; uten dette tolker mobilen det som en rulling og
	   knotten står stille mens sida flytter seg. */
	touch-action: pan-y;
}

/* Navnet er der for skjermlesere. Tilstanden bæres av aria-checked, så teksten
   kan stå i ro mens knotten flytter seg. */
.pomm-modus-navn {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.pomm-modus-spor {
	align-items: center;
	background: var(--pomm-rd-cream);
	border: 2px solid var(--pomm-rd-ink);
	border-radius: 999px;
	/* Låst her, ikke arvet: JS regner ut hvor langt knotten kan dra ut fra
	   sporets clientWidth, og et content-box-spor ville gitt fire piksler
	   avvik mellom draget og hvilestillingen. */
	box-sizing: border-box;
	display: flex;
	height: 26px;
	justify-content: space-between;
	padding: 0 6px;
	position: relative;
	width: 52px;
}

/* Prikkene ligger under knotten. Da dekker knotten det moduset du står i, og
   det som blir stående synlig er det du kan bytte til. Rosaprikken er en fast
   farge og ikke en variabel: den skal vise rosa nettopp når siden ikke er det. */
.pomm-modus-ikon {
	font-size: 10px;
	line-height: 1;
	position: relative;
	z-index: 0;
}

.pomm-modus-rosa {
	color: #f0688a;
}

.pomm-modus-hvit {
	color: var(--pomm-rd-ink);
}

.pomm-modus-knott {
	background: var(--pomm-rd-ink);
	border-radius: 50%;
	box-sizing: border-box;
	height: 18px;
	left: 3px;
	position: absolute;
	top: 50%;
	/* Hvit er utgangspunktet, så knotten hviler til høyre. 24px = sporets 48
	   innvendige piksler, minus knottens 18 og 3 piksler luft i hver ende.
	   Samme regnestykke som i pomm-modus.js. */
	transform: translate(var(--pomm-modus-dra, 24px), -50%);
	transition: transform 220ms cubic-bezier(0.3, 0.8, 0.3, 1);
	width: 18px;
	z-index: 1;
}

[data-pomm-modus="rosa"] .pomm-modus-knott {
	transform: translate(var(--pomm-modus-dra, 0px), -50%);
}

/* Under fingeren skal knotten følge, ikke gli etter. */
.pomm-modus.er-dratt .pomm-modus-knott {
	transition: none;
}

.pomm-modus:focus-visible {
	outline: none;
}

.pomm-modus:focus-visible .pomm-modus-spor {
	outline: 2px solid var(--pomm-rd-red);
	outline-offset: 3px;
}

/* Reserveplassen, brukt bare hvis toppen ikke tok imot bryteren - se
   inc/rosa-og-hvit.php. */
.pomm-modus-flyt {
	bottom: 18px;
	position: fixed;
	right: 18px;
	z-index: 90;
}

@media (prefers-reduced-motion: reduce) {
	.pomm-modus-knott {
		transition: none;
	}
}

/* --- rosa modus ---------------------------------------------------------- */

/* Fire flater byttes ut: grunnen, panelene, accentflata og rødfargen. Ingen
   annen regel røres - hele sida er bygget på disse variablene, så det holder
   å bytte dem.

   Rosaen er Pomms egen, målt i logofila: ordmerket ligger på #fbbdc9 og
   monogrammet på #fcd6dc. Den lyseste av dem er grunnen, fordi den er den som
   tåler å ligge under tjue fotografier uten å konkurrere med dem. Panelene er
   samme kulør ett hakk dypere, slik at et kort fortsatt leses som et kort.

   Svart tekst måler over 14:1 mot grunnen, altså god margin over kravet - det
   er lysere rosa enn den svake sanseteksten allerede står på i dag. */

html[data-pomm-modus="rosa"] {
	--pomm-rd-paper: #fcd6dc;
	--pomm-rd-cream: #fbc5cd;
	--pomm-rd-pink: #f7879d;
	/* Logorøden. Ved siden av så mye rosa leses #ef3b25 som oransje. */
	--pomm-rd-red: #df201c;

	/* De eldre variablene, brukt av artikkel- og sidemalene. */
	--pomm-paper: #fcd6dc;
	--pomm-soft: #fbc5cd;
	--pomm-blush: #f7879d;
}

/* --- v1.38.2: «Pomm» over artikkeltittelen er borte --------------------- */

/* Lenka sto øverst i artikkelhodet, over kategoriene: ordet POMM i
   versaler, med en lenke hjem. Den er tatt ut av templates/single.html.

   Denne regelen er reserven. Er artikkelmalen lagret som en kopi i Site
   Editor, overstyrer kopien fila, og da blir lenka stående selv om blokka er
   fjernet her - se «Fjern tilpasninger» i Utseende → Editor. CSS-en når fram
   uansett.

   Bare på artikler: `templates/page.html` har den samme lenka, og der er den
   ikke bedt om fjernet. Derfor `body.single` og ikke `.pomm-rd-crumbs` alene.

   Luften forsvinner med den. Lenka bar `margin-bottom: 28-52px`, og
   artikkelhodets egen toppolstring på 34-58px står igjen - kategoriene legger
   seg altså der ordet sto, ikke der de sto. */
body.single .pomm-rd-crumbs {
	display: none;
}

/* --- v1.38.3: grunnen er hvit, ikke beige ------------------------------- */

/* «Kan du gjøre at standardfargen er hvit? Bytt fra beige til hvit.»

   Beigen satt i to variabler, og det er de to som byttes her. Ingen regel er
   skrevet om - hele sida henter flatene sine fra disse.

   `--pomm-rd-cream` var #f4efe5, altså den som faktisk leses som beige: den
   maler toppbåndet, toppsakens tekstfelt, kortfyllene og de fleste panelene.
   `--pomm-rd-paper` var #fffdf7 - nesten hvit alt, men med en varm tone som
   leses som elfenben over en hel skjerm.

   Panelene sto først på #f6f6f4, to prosent under grunnen, som en svak
   inndeling der ramma alene ikke rakk. **v1.38.11 setter dem til #ffffff:**
   «nå er det grå bakgrunn, kan du gjøre den hvit?» Over en hel toppmeny og en
   hel bunntekst leses de to prosentene ikke som et panel, men som at sida er
   grå. De svarte rammene bærer inndelinga alene nå - toppmenya har allerede
   `border-bottom`, samtykkelinja `border-top`, boksene sin egen ramme, og
   bunnteksten står under den svarte streken fra bolken over.

   Vil du ha den svake inndelinga tilbake, er #f6f6f4 verdien som sto her.

   Rødt, svart og rosa står urørt.

   Selektoren er `html:not([data-pomm-modus="rosa"])` og ikke `:root`. Grunnen
   er rekkefølgen: rosa-bolken står lenger opp i fila, og med lik spesifisitet
   ville denne vunnet over den og malt rosa modus hvit. Slik taper den mot
   rosa uten at noe må flyttes. */

html:not([data-pomm-modus="rosa"]) {
	--pomm-rd-paper: #ffffff;
	--pomm-rd-cream: #ffffff;

	/* Den eldre variabelen bak artikkel- og sidemalene. */
	--pomm-paper: #ffffff;

	/* Fargene blokkvelgeren tilbyr. Kilden er rettet i theme.json i v1.38.12 -
	   `paper` og `soft` er hvite der nå, og `line` nøytral - så disse tre er
	   ikke lenger en overstyring av temaet, men av det WordPress har lagret.
	   Globale stiler lagret i databasen fra før vinner over theme.json, og på
	   pomm.no er de lagret. Derfor blir de stående. */
	--wp--preset--color--paper: #ffffff;
	--wp--preset--color--soft: #ffffff;
	--wp--preset--color--line: #e7e7e4;
}

/* --- v1.38.4: ordmerket er rødt, ikke svart ----------------------------- */

/* «Gjør svart logo rød.»

   Logoen i toppen og i bunnteksten er den samme opplastede fila i WordPress,
   og den er svart. En opplasting kan ikke fargelegges herfra - så temaet tar
   med sitt eget ordmerke i stedet (assets/pomm-logo-rod.png, 1004 x 277) og
   tegner det over den opplastede. Da slår rødfargen gjennom uten at noe må
   lastes opp på nytt, og den følger med i zip-en så den ikke kan bli borte.

   Fila brukes som MASKE, ikke som bilde: bare formen hentes ut av den, mens
   fargen kommer fra `--pomm-rd-red`. Det er med vilje. Fila er tegnet i
   #df201c, mens sida ellers er bygget på #ef3b25 - og to røde ti piksler fra
   hverandre, i den røde stripa og i merket rett under, leses ikke som to
   nivåer men som en feil. Med maske er det én rød på sida, og bytter du den
   røde variabelen en dag, følger merket etter av seg selv.

   Hele bolken ligger bak `@supports`. Uten den ville en nettleser som ikke
   kan maskere tegnet et rødt rektangel der ordmerket skulle stått - en fylt
   flate uten form. Nå står den opplastede svarte logoen igjen i stedet, som
   er en eldre logo, ikke en ødelagt en.

   VIL DU TILBAKE TIL DEN SVARTE: slett hele denne bolken. Laster du opp en ny
   logo i WordPress uten å slette den, blir den nye skjult av denne. */

@supports (mask-image: url(assets/pomm-logo-rod.png)) or (-webkit-mask-image: url(assets/pomm-logo-rod.png)) {

	.pomm-rd-brand .custom-logo-link,
	.pomm-rd-footer-logo .custom-logo-link {
		display: block;
	}

	/* Bildet blir stående for skjermlesere - det er det som bærer alt-teksten
	   «Pomm Magazine», og lenka ville vært uten navn uten den. `display: none`
	   ville tatt den ut av tilgjengelighetstreet; dette tar den bare ut av
	   synsfeltet. */
	.pomm-rd-brand img,
	.pomm-rd-brand.wp-block-site-logo img,
	.pomm-rd-footer-logo img,
	.pomm-rd-footer-logo.wp-block-site-logo img {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	/* Sideforholdet settes eksplisitt fra fila. Uten det ville høyden arvet
	   den gamle logoens boks - 841 x 258 er 3,26:1 mot denne 3,62:1 - og
	   merket hadde fått luft over og under det ikke skal ha. Bredden kommer
	   fortsatt fra feltet rundt. */
	.pomm-rd-brand .custom-logo-link::before,
	.pomm-rd-footer-logo .custom-logo-link::before {
		aspect-ratio: 1004 / 277;
		background: var(--pomm-rd-red);
		content: "";
		display: block;
		width: 100%;
		-webkit-mask: url(assets/pomm-logo-rod.png) left center / contain no-repeat;
		mask: url(assets/pomm-logo-rod.png) left center / contain no-repeat;
	}
}

/* --- v1.38.7: toppen legger seg rett på telefon ------------------------- */

/* «mobilversjonen; den legger seg ikke rett»

   Toppen brytes i to linjer under 720 piksler - det er med vilje, og gjort i
   bolken over. Feilen er hvor leddene legger seg når den er brutt: merke,
   bryter og hamburger sto alle inntil venstre kant på første linje, søk og
   abonner inntil høyre kant på den andre. Da står det et tomrom oppe til
   høyre og et nede til venstre, diagonalt over hverandre, og toppen leses
   som om den har brukket i stedet for å være delt.

   Grunnen er at menyfeltet har `flex: 1 1 auto` og tar resten av linja. Med
   kategoriene inni fyller det den også - men på telefon er kategoriene i en
   overlay, og feltet er bare hamburgeren med et halvtomt felt etter seg.

   Her får hver linje en kant å slutte mot: hamburgeren ytterst til høyre, og
   søk og abonner strukket over hele linja under. Ingen av dem er flyttet i
   markupen, av samme grunn som resten av toppen - se bolken over.

   Grensa er 600 og ikke 720 piksler. Det er der kategoriene faktisk går inn i
   overlay-menyen. Mellom 601 og 720 står de fortsatt på linja, og en
   høyrestilling der ville dyttet dem inn mot midten.

   `599.98px` og ikke `600px`: WordPress' egen meny slår om på
   `min-width: 600px`, og med `max-width: 600px` her gjelder begge på nøyaktig
   den bredden - kategoriene kommer tilbake på linja samtidig som knappen
   under strekker seg. Én breddes overlapp, men den finnes. */

@media (max-width: 599.98px) {

	/* Hamburgeren til høyre kant, der en tommel leter etter den. */
	.pomm-rd-header .pomm-rd-nav {
		justify-content: flex-end;
	}

	/* Linja under fylles fra kant til kant.

	   IKKE sett `flex-wrap: nowrap` her. Det var første forsøk, og det tok
	   søkefeltet med seg: søkeblokka er «bare knapp», og feltet folder seg ut
	   ved klikk ved å bli bredt. Utfoldet måler søket rundt 290 piksler, og
	   det får det bare hvis abonner kan vike ned på en linje under. Med
	   `nowrap` må de to dele linja, og da blir feltet null piksler bredt -
	   knappen svarer på trykket, men det kommer ikke noe felt å skrive i.
	   Målt: 226 piksler bredt felt med brytning, 0 uten. */
	.pomm-rd-header .pomm-rd-nav-actions {
		column-gap: 10px;
		justify-content: flex-start;
	}

	/* Søk beholder størrelsen sin, abonner tar resten. Knappen er 130 piksler
	   bred i grunnregelen, og de fire klassene her er det som skal til for å
	   vinne over den uten `!important`. */
	.pomm-rd-header .pomm-rd-nav-actions .pomm-rd-subscribe {
		flex: 1 1 auto;
	}

	.pomm-rd-header .pomm-rd-nav-actions .pomm-rd-subscribe .wp-block-button,
	.pomm-rd-header .pomm-rd-nav-actions .pomm-rd-subscribe .wp-block-button__link {
		width: 100%;
	}
}

/* --- v1.38.8/v1.38.10: ordmerket i bunnteksten -------------------------- */

/* v1.38.8 flyttet merket over i høyre spalte, som hadde stått tom siden
   arrangementsboksen ble tatt ut. v1.38.10 fjerner det helt - «fjern logoen
   nederst» - så plasseringsreglene derfra er slettet: de kan ikke treffe noe.

   Selve merket lever videre i toppen. Maskeregelen i v1.38.4-bolken nevner
   fortsatt `.pomm-rd-footer-logo`, og den delen er nå uten virkning. Den blir
   stående med vilje: skal merket tilbake nederst en dag, er det å sette inn
   site-logo-blokka i parts/footer.html igjen og fjerne filteret i
   functions.php - fargen følger da med av seg selv. */

/* Andre lås: blokka fjernes i PHP (se pomm_premium_magazine_fjern_bunnlogo),
   men WordPress.com serverer bunnteksten fra cache, og en side som ble lagret
   før oppdateringa bærer fortsatt markupen. CSS-en gjelder også for de sidene,
   og da forsvinner merket med én gang i stedet for når cachen faller. */
.pomm-rd-footer-logo {
	display: none;
}

/* Rutenettet var to spalter fordi merket sto i den ene. Nå er det bare
   lenker, juridiske lenker og kolofon igjen, og med to spalter stanset streken
   over «© Pomm Magazine» midt på sida - halv strek, tom høyrehalvdel. Én
   spalte lar den gå ut til samme kant som resten av sidas rutenett. */
.pomm-rd-footer-grid {
	grid-template-columns: 1fr;

	/* Høyden var målt for et ordmerke på 116 piksler: 390 piksler minimum,
	   450 på telefon. Uten merket ble de til luft mellom tre rader småtekst -
	   målt 129 piksler dødt rom på 1440. Nå bestemmer innholdet, og
	   bunnteksten lander på 261 piksler med sin egen padding. */
	min-height: 0;
}

/* --- v1.38.12: stripa øverst er rosa, ikke rød -------------------------- */

/* «Kan streken her være rosa?» Stripa er den 10 piksler høye flata øverst på
   sida, over ordmerket og menylinja.

   Fargen tas fra `--pomm-rd-pink` og ikke skrives inn som en hexverdi, fordi
   den varierer med moduset: i hvit modus er den #f5a6c6 - nøyaktig den samme
   rosaen som abonner-knappen i motsatt hjørne, så de to leses som ett par - og
   i rosa modus #f7879d, som er den dypere av Pomms to rosatoner og fortsatt
   skiller seg fra det rosa papiret under.

   `--pomm-rd-red` røres ikke. Den maler også prikken foran kategoriene,
   røde kort og knapper, og en variabel som er rød overalt ellers, men rosa
   her, er en felle for neste endring. */
.pomm-rd-topline {
	background: var(--pomm-rd-pink);
}

/* --- v1.38.15: én stemme på forsida --------------------------------------- */

/* Forsida byttet visuelt språk sju ganger nedover: rene kort, svart panel,
   klistremerker, revet papir, bokser, fargefelt, tomme feed-ruter. Hver bolk er
   grei alene; sammen hadde sida ingen retning. Denne bolken velger det rene
   redaksjonelle - det som allerede bærer toppen og hele artikkelsida - og tar
   bort grepene som hører til et annet design.

   Ingenting er slettet lenger oppe. Vil du ha merkene, skyggen eller de tomme
   feed-rutene tilbake, sletter du denne bolken, og sida står som i 1.38.14. */

/* 1. Klistremerkene ut ----------------------------------------------------- */

/* «Fra arkivet», «les igjen» og «notat» er egne merker, og de er fine - men de
   er det eneste scrapbook-elementet igjen på en ellers ren side, og leses
   derfor som en rest og ikke som et valg. Bildene blir liggende i
   assets/stickers/, så de kan hentes tilbake uten å pakke temaet på nytt.

   At det er en arkivsak sies fortsatt i klartekst: lenka under saken heter
   «gå til arkivet». */
.pomm-rd-sticker,
.pomm-rd-now-flag {
	display: none;
}

/* Rammen rundt arkivbildet blir stående - den er samme 1px-strek som resten av
   sida bruker. Den forskjøvede rosa skyggen går: den er en plakateffekt, og på
   forsida er det ingenting annet som svarer på den.

   Innrykket var plass til merkene, ikke til bildet. Uten dem gjør det bare
   arkivbildet smalere enn alle andre bilder i samme spalte. Regelen står
   utenfor mediespørsmål med vilje: den skal også slå ut smalversjonen i
   bolken rundt linje 1376, og den vinner der fordi den kommer sist. */
.pomm-rd-feature-image {
	box-shadow: none;
}

.pomm-rd-feature-visual {
	padding: 0;
}

/* 2. Feed-bolken er ikke lenger et hull ------------------------------------ */

/* Instagram og TikTok ligger bak samtykke, og det skal de gjøre. Men før noen
   har sagt ja sto to stiplede bokser på 200px hver, med tomme sitatfelt under -
   rundt 700 piksler forside som ser ødelagt ut for alle som svarte «bare
   nødvendige», altså permanent for de fleste.

   Løsningen er ikke å skjule samtykkekortet: da kunne innbyggingene aldri
   slippes løs i det hele tatt. Kortet blir i stedet en linje - tekst til
   venstre, knapp til høyre - så bolken leses som et tilbud og ikke som et
   tomrom. */
.pomm-rd-feeds-band .pomm-consent-block {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px 22px;
	justify-content: space-between;
	min-height: 0;
	padding: 16px 20px;
	text-align: left;
}

.pomm-rd-feeds-band .pomm-consent-block-text {
	max-width: 62ch;
}

/* Selve innbyggingene er tomme skall til skriptet får kjøre: en ramme rundt
   «se innlegget på Instagram», en rundt «@pomm.magazine». De skjules så lenge
   samtykkekortet står der. Det er en trygg test og ikke en gjetning: JS-en
   fjerner kortet fra DOM-en i det leseren sier ja (releaseBlock i
   assets/js/pomm-consent.js), så innbyggingene kommer tilbake av seg selv uten
   at noe må skrus på her. */
.pomm-rd-insta:has([data-pomm-consent-block]) .pomm-rd-insta-grid,
.pomm-rd-tiktok:has([data-pomm-consent-block]) .pomm-rd-tiktok-creator {
	display: none;
}

/* 3. Seksjonsoverskriftene skriver seg likt -------------------------------- */

/* «Pomm nå» og «Pomm-universet» sto med stor forbokstav, «fortalt underveis» og
   «pomm i feeden» med liten. To skrivemåter i samme kolonne leses som at noen
   ikke har bestemt seg, og flertallet vinner.

   ::first-letter og ikke `text-transform: capitalize` - den siste ville gitt
   «Fortalt Underveis». Teksten i markupen røres ikke, så en overskrift som skal
   stå med liten forbokstav med vilje, får det ved å unnta den her.

   Kategorinavnene (stil, steder, smaker) er ikke med. De er skrevet med liten
   forbokstav overalt på sida, også i menylinja - det er en skrivemåte, ikke en
   glipp. */
.pomm-rd-section-heading h2::first-letter,
.pomm-rd-coll-head h2::first-letter {
	text-transform: uppercase;
}

/* 4. Bryteren står umerket ------------------------------------------------ */

/* v1.38.15 satte ordet «rosa» ved siden av sporet, fordi en umerket bryter i en
   topp gjerne leses som mørk modus. Tatt bort igjen i v1.38.16 - «fjern teksten
   ved knappen» - samme kveld: ordet la seg mellom ordmerket og menyen, altså
   inn i det eneste feltet på sida der ingenting skal stå.

   Navnet lever videre skjult i `.pomm-modus-navn`, så bryteren melder fortsatt
   hva den er for skjermlesere, og `title` gir det samme ved peking. Regelen for
   `.pomm-modus-merke` er slettet i stedet for skrudd av: uten spannet i
   inc/rosa-og-hvit.php kan den ikke treffe noe, og en død regel er verre enn
   ingen regel neste gang noen leser fila. */

/* --- v1.38.17: en gul flate som bryter opp sida ------------------------- */

/* «Kan vi kanskje ha noe som bryter opp designet med en annen farge, som
   lysgul?» Referansen var en plakat: et helt felt lysgult med rød display-type
   over.

   Sida hadde da dette ble skrevet to farger som faktisk fylte en flate - den
   svarte manifestbolken midt på, og det rosa nyhetsbrevet nederst. Mellom dem
   var det omtrent 2000 piksler hvitt. Det er der gult gjør mest nytte, og
   derfor ligger det bak «Pomm nå» og ikke et sted til. Manifestbolken er ute
   fra v1.38.27, så det hvite feltet over gult er blitt større, ikke mindre -
   gult gjør om mulig enda mer nytte nå.

   Gult sto to steder og ikke ett. Én gul flate på en ellers hvit side leses
   som at noe har falt ned der; to leses som en farge sida har. Det andre stedet
   var «rom»-kortet i Pomm-universet - den raden er slettet i v1.38.36, og gult
   står nå bare her. Kommer en gul flate til, er det den andre forekomsten.

   Rødt og rosa røres ikke. Stripa øverst, abonner-knappen og nyhetsbrevet står
   som før - gult kommer i tillegg til paletten, det bytter ikke ut noe.

   VIL DU HA DET BORT: slett hele denne bolken. Ingenting lenger oppe er endret. */

:root {
	/* Lys nok til at svart brødtekst måler over 16:1, og til at et fotografi
	   kan ligge rett på flata uten å få en kulør på seg. Dypere enn dette og
	   notatbildene begynner å se varme ut. */
	--pomm-rd-gul: #f7f0a3;
}

/* I rosa modus ligger gult mot #fcd6dc og ikke mot hvitt. To like lyse
   pastellflater ved siden av hverandre leses som en utvasking, så gulen tar et
   hakk mer kulør her - samme lyshet, mer metning. */
html[data-pomm-modus="rosa"] {
	--pomm-rd-gul: #f7ea92;
}

/* --- 1. «Pomm nå» på gult felt ------------------------------------------- */

/* Bolken er `alignwide`, altså 1440 piksler midt på sida, og flata skal gå fra
   kant til kant. Den tegnes derfor som et bakgrunnslag under innholdet i
   stedet for som en `background` på selve bolken: `calc(50% - 50vw)` ut til
   hver side er avstanden fra bolkens kant til vindusknaten, uansett hvor bred
   skjermen er.

   `overflow-x: clip` på `.wp-site-blocks` (linje 57) er det som gjør at 100vw
   ikke lager en vannrett rullestripe. Uten den regelen ville dette grepet gitt
   en - sjekk den før du flytter bolken hit fra et annet tema. */
.pomm-rd-now-section {
	position: relative;
	/* Litt mer luft enn de 52-96 pikslene bolken hadde. En farget flate må ha
	   mer marg enn hvit: på hvitt slutter bolken der teksten slutter, på gult
	   ser man nøyaktig hvor kanten går. */
	padding-block: clamp(64px, 7vw, 112px);
}

.pomm-rd-now-section::before {
	background: var(--pomm-rd-gul);
	content: "";
	/* `inset: 0 calc(50% - 50vw)` = full vindusbredde, sentrert på bolken. */
	inset: 0 calc(50% - 50vw);
	position: absolute;
	/* Under innholdet, men fortsatt inne i bolkens eget stablingslag - så
	   den kan ikke havne bak sidens bakgrunn slik en negativ z-index på
	   rotnivå ville gjort. */
	z-index: 0;
}

/* Alt innholdet må løftes over flata. `position: relative` uten `top`/`left`
   flytter ingenting; det gir bare barna et eget lag over ::before. */
.pomm-rd-now-section > * {
	position: relative;
	z-index: 1;
}

/* Streken under «Pomm nå» og de loddrette skillene mellom notatene er
   `rgba(17, 16, 15, 0.25)` - en gjennomsiktig svart som er regnet for hvitt
   papir. På gult blir den grønnlig. Her settes den i stedet som en tettere,
   nøytral strek, lokalt i bolken. */
.pomm-rd-now-section {
	--pomm-rd-line: rgba(17, 16, 15, 0.34);
}

/* --- v1.38.19: grønt i «Fortalt underveis» ------------------------------- */

/* «Og denne grønnfargen» - en plakat i neongrønt med blå type.

   Grønt er en flate og ikke et kort. Kortraden er en rad med fem kategorier der
   fargen betyr noe, og et sjette kort finnes ikke - skulle grønt inn der, måtte
   en kategori gitt fra seg fargen sin for å gi plass til en flate.

   Det som sto igjen hvitt var «Fortalt underveis» - en ramme rundt hvitt, midt
   mellom det gule feltet og kortraden, altså det eneste elementet på nedre
   halvdel som ikke hadde bestemt seg. Grønt gjør boksen til en flate på linje
   med de andre.

   Boksen og ikke feed-bolken, som var det andre kandidatet: feed-bolken
   grenser rett til det rosa nyhetsbrevet, og neongrønt som støter i rosa uten
   en hvit luke mellom er den ene sammenstillingen på denne sida som gjør vondt.
   Rundt boksen ligger det 96 piksler hvitt på hver side.

   VIL DU HA DEN HVITE TILBAKE: slett denne bolken. */

:root {
	/* Neongrønt, dempet så vidt fra plakatens rene #c8f240: på papir står den
	   fargen alene, her ligger den under seriftekst i brødtekststørrelse. */
	--pomm-rd-gronn: #cdf24a;
}

/* Mot rosa grunn får grønnen et hakk mer kropp. Den lyseste neongrønnen mot
   #fcd6dc vibrerer i kanten - to mettede pasteller med nesten samme lyshet. */
html[data-pomm-modus="rosa"] {
	--pomm-rd-gronn: #c6ec3f;
}

.pomm-rd-stories-box {
	background: var(--pomm-rd-gronn);
}

/* Merkelappen «pomm stories» var rosa. Rosa på neongrønt er den samme
   flimmerfella som rødt på blått i bolken over, og her er den verre fordi
   lappen er et helt felt og ikke en prikk. Hvit lapp med svart tekst: den
   leses som et stempel på flata i stedet for som en tredje farge. */
.pomm-rd-stories-box .pomm-rd-coll-label {
	background: var(--pomm-rd-paper);
	color: var(--pomm-rd-ink);
}

/* --- v1.38.20: blåfargen er tatt ut igjen -------------------------------- */

/* «Nei jeg likte ikke blå fargen, fjern den.» Blått var prøvd i v1.38.18, samme
   kveld som gult og grønt: manifestbolken «Kulturen rundt oss» i kobolt i stedet
   for svart, og «steder»-kortet blått i stedet for hvitt.

   Bolken er slettet, ikke skrudd av. Manifestbolken ble svart igjen fra sin
   egen regel lenger oppe i fila - den bolken er i sin tur slettet i v1.38.27 -
   og «steder» er hvitt igjen fra `.pomm-rd-card-cream`. Kortraden leses nå
   rød, hvit, rosa, gul, svart.

   Ikke foreslå blått på nytt. Gult (v1.38.17) og grønt (v1.38.19) står, og de er
   ikke det samme valget - de ble vist og beholdt hver for seg.

   Denne kommentaren er hele det som er igjen av v1.38.18. Den står fordi en
   farge som har vært inne og ute igjen ellers kommer tilbake neste gang noen
   leter etter noe som bryter opp sida. */

/* --- v1.38.22: den grønne boksen flyttes opp ---------------------------- */

/* «Og ha den grønne boksen tidligere.» «Fortalt underveis» lå som nest siste
   bolk før kortraden, altså godt nedenfor midten. Nå står den rett etter
   saksrekka, omtrent en tredel ned - der den er det første fargefeltet leseren
   møter. Fram til v1.38.27 lå den svarte manifestbolken imellom; den er borte,
   og den grønne boksen har rykket opp i det tomrommet.

   Flyttet med flex `order` og ikke i front-page.html. Grunnen er den samme som
   i toppen: forsida på pomm.no kan ligge som en lagret kopi i Site Editor, og
   den kopien overstyrer malfila. En regel på oppsettet treffer begge, en
   flyttet blokk i fila treffer bare den ene.

   Rekkefølgen nedover blir: toppsak, ukas sak, saksrekka, GRØNN boks, fra
   arkivet, GULT felt, kortraden. Hvert fargefelt har hvitt på minst én side.
   `order`-verdiene hopper over 4 etter at manifestbolken gikk ut i v1.38.27 -
   hullet er med vilje, siden verdiene bare trenger å stå i rett rekkefølge og
   de andre bolkene da beholder tallene sine.

   VIL DU HA DEN GAMLE REKKEFØLGEN: slett denne bolken. */

.pomm-rd-front {
	display: flex;
	flex-direction: column;
}

/* Én ting må rettes opp når flyten blir til flex, og den er lett å gå på:
   WordPress sentrerer barna i et constrained-oppsett med `margin-inline: auto`.
   I en flex-kolonne skrur auto-marger på tvers *av* strekkingen - eleven får
   ikke lenger radens fulle bredde, men krymper til innholdet sitt og blir
   sentrert der. Målt uten regelen under: «Pomm nå» falt fra 1360 til 1260
   piksler og Pomm-universet fra 1360 til 1023.

   `width: 100%` gir dem bredden tilbake. `max-width` og auto-margene står
   urørt, så en smalere skjerm oppfører seg nøyaktig som før. Alignfull-bolkene
   er ikke med: de holder bredden med negative marger og ikke med auto, og de
   målte riktig hele veien.

   Det andre som ikke følger med, er marginkollaps. Målt: lukene mellom bolkene
   står uendret på 20 piksler, fordi WordPress' blokkluft ligger som
   `margin-block-start` på hvert barn og ikke som en marg i hver ende - to
   møtende marger finnes altså ikke her, og da er det ingenting å kollapse.
   Det eneste som flyttet seg er toppen: toppsaken begynner 20 piksler lenger
   ned enn før. Mål på nytt hvis en bolk får margin i bunnen. */
.pomm-rd-front > .alignwide {
	width: 100%;
}

.pomm-rd-front > .pomm-rd-hero-query { order: 1; }
.pomm-rd-front > .pomm-rd-second-query { order: 2; }
.pomm-rd-front > .pomm-rd-latest { order: 3; }
.pomm-rd-front > .pomm-rd-coll-band { order: 5; }
.pomm-rd-front > .pomm-rd-feature-query { order: 6; }
.pomm-rd-front > .pomm-rd-now-section { order: 7; }

/* Den skjulte h1-en er ikke nevnt over og får derfor `order: 0` - den blir
   stående først, som i markupen. Den måler 1x1 piksel og flytter ingenting,
   men skjermlesere og søkemotorer leser rekkefølgen slik den står her, og da
   skal overskrifta fortsatt komme før alt annet. */

/* Boksen sto sist i sin bolk og trengte aldri luft under seg. Nå har den den
   hvite arkivbolken rett etterpå, og uten dette ville grønnflata og bildet
   under møttes uten en luke. */
.pomm-rd-coll-band {
	padding-bottom: clamp(52px, 6vw, 96px);
}

/* --- v1.38.24: «rom» der «Pomm nå» sto ----------------------------------- */

/* Det gule feltet midt på forsida bar tre notater - korte observasjoner uten
   egen side å gå til. Nå bærer det de tre siste sakene i rom-kategorien.

   Bolken er den samme bolken: klassen `pomm-rd-now-section` står igjen på
   omslaget, så flata som går ut til vindusknaten, den tettere streken som ikke
   blir grønnlig mot gult, og luften rundt (v1.38.17) gjelder uendret. Det som
   er byttet er innholdet, og det tegnes i inc/rom-boks.php - forsida på pomm.no
   ligger som lagret kopi i Site Editor, og en endring i front-page.html alene
   ville ikke vist seg.

   Kortene arver saksrekkas regler (`pomm-rd-story-card`, `-image`, `-copy`).
   Det som må stå her, er de tre tingene rekka fikk fra `.pomm-rd-latest` og
   som denne bolken ikke er inni: rutenettet, strekene mellom kortene, og at
   nummermerket er av.

   VIL DU HA «POMM NÅ» TILBAKE: slett inc/rom-boks.php, ta linja for den ut av
   modullista i functions.php, og slett denne bolken. Notatene og blokka står
   urørt. */

.pomm-rd-rom-grid .wp-block-post-template {
	border: 1px solid var(--pomm-rd-ink);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pomm-rd-rom-grid .wp-block-post {
	display: flex;
	min-width: 0;
}

.pomm-rd-rom-grid .wp-block-post + .wp-block-post {
	border-left: 1px solid var(--pomm-rd-ink);
}

/* Kortet fyller ruta si, så de tre bunnene står på linje selv når én tittel
   går over to linjer og de andre over én. */
.pomm-rd-rom-grid .pomm-rd-story-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.pomm-rd-rom-grid .pomm-rd-story-image {
	flex: 1 1 auto;
	min-height: 0;
}

.pomm-rd-rom-grid .pomm-rd-story-image a {
	display: block;
	height: 100%;
	width: 100%;
}

/* Det rosa nummermerket er skrudd av i saksrekka (v1.19-bolken) og i heroen,
   men regelen der er skrevet på `.pomm-rd-latest`. Uten denne ville kortene
   her fått en rosa sirkel med «00» i seg: telleren finnes ikke utenfor rekka,
   og `counter()` svarer null. */
.pomm-rd-rom-grid .pomm-rd-story-image::after {
	content: none;
}

/* Datoen står der kategorinavnet står på de andre kortene. Den skal ikke rope
   like høyt som en kategori gjør - samme skrift og sperring, litt mindre
   svart. */
.pomm-rd-rom-grid .pomm-rd-eyebrow {
	color: rgba(17, 16, 15, 0.62);
	margin-bottom: 14px;
	text-transform: lowercase;
}

.pomm-rd-rom-grid .wp-block-post-title a {
	color: inherit;
}

@media (max-width: 900px) {
	.pomm-rd-rom-grid .wp-block-post-template {
		grid-template-columns: 1fr 1fr;
	}

	/* Den nyeste tar hele bredden, slik toppsaken i rekka gjør på samme
	   punkt. To like kort under, og ingen tredje kolonne som blir tom. */
	.pomm-rd-rom-grid .wp-block-post:nth-child(1) {
		grid-column: 1 / -1;
	}

	.pomm-rd-rom-grid .wp-block-post:nth-child(2) {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}

	.pomm-rd-rom-grid .wp-block-post:nth-child(3) {
		border-top: 1px solid var(--pomm-rd-ink);
	}
}

@media (max-width: 600px) {
	.pomm-rd-rom-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.pomm-rd-rom-grid .wp-block-post + .wp-block-post {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}
}

/* Overskrifta og lenka står på samme linje. Til vanlig kommer det oppsettet
   fra blokkas egne `is-layout-flex`-klasser, som WordPress lager når blokka
   tegnes fra malen. Her er markupen skrevet i PHP og har ingen blokk bak seg,
   så raden må settes her. `.pomm-rd-section-heading` har alt `align-items:
   baseline`, men ingen `display`. */
.pomm-rd-rom-section .pomm-rd-section-heading {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
}

/* «rom» er et kategorinavn, og de skrives med liten forbokstav overalt på
   sida - også i menylinja. Regelen som gir seksjonsoverskriftene stor
   forbokstav (v1.38.x, «Seksjonsoverskriftene skriver seg likt») unntok
   kategorinavnene fordi ingen av dem sto som overskrift den gangen. Nå gjør
   ett av dem det. */
.pomm-rd-rom-section .pomm-rd-section-heading h2::first-letter {
	text-transform: none;
}

/* Bildene står i linje på tvers av raden. Saksrekka lar bildet vokse inn i
   det som blir til overs (v1.2.3), fordi kortene der har hver sin
   bildeform med vilje. Her er de tre likeverdige, og tre 4:3-bilder som
   slutter på tre ulike høyder leses som en feil. Teksten tar overskuddet i
   stedet. */
/* Klassen står dobbelt fordi regelen som lar bildet vokse er skrevet med
   `:not(.pomm-rd-archive-grid)` og dermed teller ett hakk høyere enn et vanlig
   klassepar. Med `.pomm-rd-story-grid.pomm-rd-rom-grid` står de likt, og den
   som kommer sist i fila vinner. */
.pomm-rd-story-grid.pomm-rd-rom-grid .pomm-rd-story-image {
	aspect-ratio: 4 / 3;
	flex: 0 0 auto;
}

.pomm-rd-story-grid.pomm-rd-rom-grid .pomm-rd-story-copy {
	flex: 1 1 auto;
}

/* --- v1.38.29: den grønne boksen leser som det gule feltet --------------- */

/* «Kan den grønne boksen være mer lik den gule? Samme tekst, stil og
   størrelse.»

   De to bolkene sa det samme på to måter. Det gule rom-feltet hadde
   kategorinavnet som overskrift, en arkivlenke i samme linje, og tre kort med
   foto i 4:3, dato med rød prikk, antikva-tittel og ingress. Den grønne boksen
   hadde en hvit merkelapp over overskrifta, ingen utgang til arkivet, og to
   kort med kvadratisk miniatyr til venstre og 17-22px tittel til høyre - altså
   halvparten av det gule feltets 45-78px. Ved siden av hverandre leste de som
   to forskjellige nettsteder.

   Boksen er den samme boksen: `pomm-rd-stories-box` står igjen på omslaget, så
   neongrønnen fra v1.38.19, kanten og plassen i rekkefølgen fra v1.38.22 er
   uendret. Det som er byttet, er drakta på innholdet - og det gjøres ved å ta
   i bruk rom-feltets egne klasser (`pomm-rd-section-heading`,
   `pomm-rd-story-card`, `pomm-rd-rom-grid`) i stedet for å skrive reglene av
   under nye navn. Da kan de to bolkene ikke drive fra hverandre neste gang én
   av dem rettes. Markupen står i inc/stil-boks.php (het inc/kjerner-boks.php
   fram til v1.38.30).

   Tre ting følger ikke med fra klassene, og settes her.

   VIL DU HA DEN GAMLE BOKSEN TILBAKE: sett `pomm-rd-coll-head`-markupen og
   kortkoden inn igjen i inc/stil-boks.php og slett denne bolken. Det
   lille kortet (`pomm-rd-coll-card`) er ikke rørt - filmboksen og kortkoden
   bruker det fortsatt. */

/* 1. Overskrifta og arkivlenka står på samme linje. Til vanlig kommer det
   oppsettet fra blokkas egne `is-layout-flex`-klasser, som WordPress lager når
   blokka tegnes fra malen. Her er markupen skrevet i PHP og har ingen blokk bak
   seg, så raden må settes her - samme grep som i rom-feltet. */
.pomm-rd-stil-boks .pomm-rd-section-heading {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
}

/* «stil» er et kategorinavn, og de skrives med liten forbokstav overalt på
   sida - også i menylinja. Samme unntak som «rom» har. */
.pomm-rd-stil-boks .pomm-rd-section-heading h2::first-letter {
	text-transform: none;
}

/* 2. Antall spalter følger antall kort. Rom-feltet kan låse tre, fordi
   kategorien alltid har tre å vise. Kjerner-kategorien er yngre og kan stå med
   to - og da ville `repeat(3, 1fr)` gitt en tom tredje rute med hårstrek rundt.
   Tallet settes som `--pomm-stil-spalter` på rutenettet i PHP. */
.pomm-rd-stil-grid .wp-block-post-template {
	grid-template-columns: repeat(var(--pomm-stil-spalter, 3), 1fr);
}

/* 3. Deler boksen raden med filmboksen, står kortene under hverandre. Boksen
   ligger i `.pomm-rd-coll-pair`, og der får den halve bredden så snart det
   finnes filmsaker å vise. Tre 4:3-bilder på en halv spalte blir frimerker, og
   det var nettopp det denne bolken tok bort. Én i bredden er det eneste som
   holder tittelstørrelsen oppe.

   Akkurat nå har ikke pomm.no filmsaker, så boksen er alene i raden og står i
   full bredde - `:only-child` treffer fordi filmbolken fjernes helt av
   `pomm_premium_magazine_hide_empty_film_band()`, ikke bare tømmes. */
.pomm-rd-coll-pair > *:not(:only-child) .pomm-rd-stil-grid .wp-block-post-template {
	grid-template-columns: 1fr;
}

.pomm-rd-coll-pair > *:not(:only-child) .pomm-rd-stil-grid .wp-block-post + .wp-block-post {
	border-left: 0;
	border-top: 1px solid var(--pomm-rd-ink);
}

/* Regelen over står etter rom-feltets egne mediespørringer i fila, og en
   mediespørring gir ikke høyere vekt enn en vanlig regel - bare senere plass.
   Derfor må stablingen på liten skjerm gjentas her, ellers ville
   spalteregelen over vunnet hele veien ned til mobil.

   Stabler på 900 og ikke på 600 som rom-feltet: der er kortene like brede som
   sida, her ligger de inne i en boks med 26-44px luft på hver side, og to
   spalter innenfor den luften er smalere enn de samme to er ute på det gule
   feltet. */
@media (max-width: 900px) {
	.pomm-rd-stil-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	/* Rom-feltet lar den nyeste ta hele bredden på dette punktet. Med én
	   spalte er «hele bredden» det alle kortene har, og regelen ville bare
	   stått og lyst i inspektøren. */
	.pomm-rd-stil-grid .wp-block-post:nth-child(1) {
		grid-column: auto;
	}

	.pomm-rd-stil-grid .wp-block-post + .wp-block-post {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}
}

/* --- v1.38.30: den grønne boksen viser stil ------------------------------ */

/* «Kan du bytte kjerner-boksen nå til stil? Og sakene skal være fra stil.»

   Ingen nye regler her - drakta fra v1.38.29 står uendret, og det er bare
   kategorien som er byttet. Bolken står fordi navnene i fila ellers ville
   løyet: reglene over heter nå `.pomm-rd-stil-boks` og `.pomm-rd-stil-grid`,
   og fila som tegner boksen heter inc/stil-boks.php.

   Grønt og «stil» hører sammen fra før. v1.38.26 ga stil-kortet i rekka nederst
   den grønne flata («stil skal være grønn»), og fram til nå var det den eneste
   grønnen som pekte på en kategori - boksen lenger oppe viste kjerner, som har
   det svarte kortet. Nå bærer stil grønnen begge steder, slik rom bærer gult
   både i feltet midt på sida og på kortet sitt.

   Kjerner er ikke skjult noe sted: kategorien har fortsatt kortet sitt i rekka,
   punktet i menylinja og arkivsida si. Kortkoden [pomm_kjerner] står i
   functions.php ved siden av [pomm_stories], som ble stående på samme måte da
   boksen gikk fra stories til kjerner.

   VIL DU HA KJERNER TILBAKE I BOKSEN: rett `POMM_STIL_SLUG`, overskrifta og
   lenketeksten i inc/stil-boks.php. Klassenavnene kan bli stående - de sier
   hvilken boks det er, ikke hvilken kategori den viser. */


/* ==========================================================================
   v1.38.32 - «på speilet»
   ========================================================================== */

/* Bolken er ett fotografi med en setning skrevet tvers over i leppestift, og
   ingenting rundt det.

   Første utkast satte bildet på en speilflate med lysstripe og ga setningen som
   ekte tekst i temaets håndskrift oppå et rent fotografi. Begge deler er tatt
   bort: «ha originalbildet slik som det er, trenger ingen bakgrunn nå».
   Setningen ligger nå i bildefila, og fila står på papiret som den er.

   Det som er igjen her er plassen bolken tar og bredden bildet får. Slettes
   hele bolken, står fotografiet igjen i full bredde med bildeteksten under -
   ingenting forsvinner, og ingen annen bolk på forsida rører seg. */

/* Plassen i rekkefølgen. Forsida er en flex-kolonne der hver bolk har fått et
   `order`-tall (se v1.0.x-bolken over), og 4 sto ledig mellom den røde
   kjerner-rekka (3) og boksparet (5). Det er der bolken skal stå.

   Tallet er ikke pynt: uten det arver bolken `order: 0` og hopper helt til
   toppen, foran toppsaken. Flyttes bolken i PHP, må tallet flyttes her. */
.pomm-rd-front > .pomm-rd-speil { order: 4; }

.pomm-rd-speil-rad {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 64px);
	justify-content: center;
}

.pomm-rd-speil-lapp {
	/* Bildet står smalere enn bolken. Taket fulgte bildeformatet: en stående
	   polaroid ble nesten halvannen meter høy på full bredde og ville tatt
	   forsida, så det lå på 560 piksler. Lappen som henger der nå er liggende
	   (1666 x 944), og 560 piksler ga den bare 317 piksler høyde - et frimerke
	   midt på en tom rad. 840 piksler gir den om lag samme høyde som den
	   stående hadde bredde, og fila er fortsatt dobbelt så bred som den vises,
	   så håndskriften holder seg skarp på en skjerm med to ganger oppløsning.

	   Taket hører altså til bildet, ikke til bolken: byttes lappen til et
	   stående format igjen, skal tallet ned igjen.

	   Grunnbredden er den samme uansett hvor mange lapper som henger der; det
	   er `flex-wrap` som avgjør om de får plass på én rad. */
	flex: 0 1 clamp(240px, 64vw, 840px);
	margin: 0;
	max-width: 100%;
}

.pomm-rd-speil-bilde {
	display: block;
	height: auto;
	width: 100%;
}

.pomm-rd-speil-bildetekst {
	color: var(--pomm-rd-ink);
	font-family: var(--pomm-rd-sans);
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: clamp(16px, 1.8vw, 24px) 0 0;
}

.pomm-rd-speil-kreditt {
	color: var(--pomm-rd-ink);
	opacity: 0.62;
}

@media (max-width: 600px) {
	/* Grunnbredden på 240px er en nedre grense for hvor smalt bildet kan bli
	   presset når flere lapper deler en rad. På en telefon er det bare én lapp
	   i rada, og da skal den ha hele bredden. */
	.pomm-rd-speil-lapp {
		flex-basis: 100%;
	}
}


/* --- v1.38.33: kjerner-boksen har stil-boksens drakt --------------------- */

/* «ha røde boksen som stil-boksen. Dette er altså kjerner-boksen.»

   v1.38.31 la rødt på rutenettet og på stripa under det, og satte navnet i
   stripa som en liten etikett. Da leste bolken som en rad med røde kort, ikke
   som en boks med navn. Stil-boksen lenger nede sier det samme med ett annet
   grep: fargen er flata *rundt* kortene, og navnet står øverst i den flata.

   De fire tingene den boksen gjør, gjort i rødt her:

     1. Flata er hele boksen, med luft hele veien rundt kortene.
     2. Navnet står øverst til venstre, i antikva og i full størrelse.
     3. En hårstrek skiller navneraden fra kortene.
     4. Kortene er hvite igjen, med sin egen ramme, og teksten i dem står i
        tusj - som på alle andre kort på sida.

   Trekninga («vet du ikke hva du skal lese? plukk en kjerne») følger med opp i
   navneraden sammen med «se alle saker». Den sto under kortene fordi stripa
   var det eneste stedet den hadde; nå har boksen en rad der lenker hører
   hjemme, og det er den samme raden stil-boksen legger arkivlenka si i.

   Rutenettet er ikke rørt. Stil-boksen har tre like spalter fordi de tre
   sakene der er likeverdige - kjerner-rekka har ett bredt kort og to smale med
   hver sin bildeform, og det er innholdet i boksen, ikke drakta på den.

   Luften over boksen er marg og ikke innrykk nå, siden innrykket er blitt
   flatas egen luft. `padding-top`-regelen fra v1.36.0 lenger oppe i fila er
   derfor overstyrt her, ikke slettet - avstanden den målte, står i margen.

   VIL DU HA DEN GAMLE REKKA TILBAKE: slett denne bolken. Navnet blir stående -
   det settes i inc/forside-tilfeldig.php - og legger seg tilbake i stripa
   under kortene. */

/* `box-sizing` er ikke pynt her. Bolken er `alignwide` og et direkte barn av
   forsida, og v1.38.x gir alle slike barn `width: 100%` for å ta tilbake
   bredden flex-kolonnen tok fra dem. Uten border-box ville innrykket lagt seg
   *utenpå* de 100 prosentene, og boksen stukket 80 piksler ut på hver side.
   Stil-boksen slipper unna det: den ligger inne i et bånd og har ingen
   fastsatt bredde. */
.pomm-rd-latest {
	background: var(--pomm-rd-red);
	border: 1px solid var(--pomm-rd-ink);
	box-sizing: border-box;
	color: var(--pomm-rd-paper);
	margin-block: clamp(26px, 2.8vw, 42px) clamp(28px, 3vw, 48px);
	padding: clamp(36px, 4.6vw, 80px);
}

/* Kortene er hvite fra `.pomm-rd-story-card` og trenger ikke annet enn å få
   tusjen tilbake: uten dette arver de papirfargen boksen setter, og hvit
   tekst på hvitt kort blir borte. */
.pomm-rd-latest .pomm-rd-story-card {
	color: var(--pomm-rd-ink);
}

/* Navneraden: navnet til venstre, trekninga og arkivlenka samlet til høyre,
   hårstrek under. `order: 0` flytter raden opp - den har stått nederst siden
   v1.2.6, der den var en stripe og ikke en overskrift.

   `margin-right: auto` på overskrifta er det som deler raden i to.
   `.pomm-rd-plukk` hadde den samme automargen fra før og må gi den fra seg,
   ellers deler de to luften mellom seg og trekninga havner midt i raden. */
.pomm-rd-latest .pomm-rd-section-heading {
	align-items: baseline;
	border: 0;
	border-bottom: 1px solid rgba(255, 253, 247, 0.32);
	column-gap: clamp(16px, 2vw, 30px);
	display: flex;
	flex-wrap: wrap;
	margin-bottom: clamp(28px, 3.2vw, 44px);
	order: 0;
	padding: 0 0 clamp(20px, 2.4vw, 30px);
	row-gap: 12px;
}

.pomm-rd-latest .pomm-rd-section-heading h2 {
	margin-right: auto;
}

/* «kjerner» er et kategorinavn, og de skrives med liten forbokstav overalt på
   sida - også i menylinja. Samme unntak som «rom» og «stil» har. */
.pomm-rd-latest .pomm-rd-section-heading h2::first-letter {
	text-transform: none;
}

.pomm-rd-latest .pomm-rd-plukk {
	margin-right: 0;
}

/* Lenkene henter tusj fra theme.json. I navneraden ligger de på rødt og skal
   ha papirfarge; inne i kortene arver de tusjen fra kortet. Én regel dekker
   begge, fordi begge skal ha fargen til flata de står på. */
.pomm-rd-latest a {
	color: inherit;
}

/* Begge lenkene i navneraden skifter til rødt når musa er over dem. Rødt på
   rødt er ingen tilbakemelding - de blekner i stedet. */
.pomm-rd-latest .pomm-rd-section-heading a:hover {
	color: inherit;
	opacity: 0.7;
}

/* Spørsmålet foran trekninga står på 0.55 mot papir. Mot rødt blir det for
   svakt til å leses. */
.pomm-rd-latest .pomm-rd-plukk-cue {
	opacity: 0.8;
}

/* Fokusringen er rød over hele sida og forsvinner i flata. Inne i kortene er
   den riktig som den er - der er bakgrunnen hvit. */
.pomm-rd-latest .pomm-rd-section-heading :focus-visible {
	outline-color: var(--pomm-rd-paper);
}


/* --- v1.38.35: rekka har færre enn tre kjerner --------------------------- */

/* «pass på så sakene som dukker opp i kjerner er faktisk kategorisert som
   kjerner»

   Utvalget er gjort i inc/forside-tilfeldig.php: rekka trekker fra
   kjerner-kategorien og ikke fra hele arkivet. Det eneste drakta må ta høyde
   for, er at en kategori kan ha færre saker enn en rad har ruter.

   Rutenettet er tegnet for tre kort med hver sin bredde. Med to ville den
   tredje ruta stått igjen som et rødt hull med hårstrek rundt - en tom celle
   leses som en sak som ikke kom fram, ikke som en rad med to i.

   Bredden på det brede kortet er den samme i alle tre tilfellene. Det er det
   som gjør at raden fortsatt leser som den samme raden, bare kortere.

   `:has()` og ikke et tall satt i PHP: markupen kommer fra WordPress' egen
   spørringsblokk, og den tar ikke imot en variabel fra temaet slik
   stil-boksens egen markup gjør (`--pomm-stil-spalter`). I en nettleser uten
   `:has()` står tre spalter som før - det er nøyaktig dagens oppførsel, og
   ingen sak forsvinner. */

.pomm-rd-latest .wp-block-post-template:has(> .wp-block-post:nth-child(2):last-child) {
	grid-template-columns: 1.36fr 0.86fr;
}

.pomm-rd-latest .wp-block-post-template:has(> .wp-block-post:only-child) {
	grid-template-columns: 1fr;
}

/* Med to kort blir den andre ruta nesten dobbelt så bred som den var som
   midtkort, og 3:4.2 gjør da bildet til en søyle på nesten tusen piksler.
   Samme høyde-forhold som det brede kortet holder raden i balanse. */
.pomm-rd-latest .wp-block-post-template:has(> .wp-block-post:nth-child(2):last-child) .wp-block-post:nth-child(2) .pomm-rd-story-image {
	aspect-ratio: 4 / 3;
}


/* --- v1.38.36: Pomm-universet er slettet -------------------------------- */

/* «slett dette» - pekt på kortraden nederst på forsida.

   Fem flater med hver sin kategori, et stort tall og et navn. Den var det siste
   leseren møtte før nyhetsbrevet, og den sa det navigasjonen øverst alt sier:
   stil, steder, smaker, rom, kjerner. Bolken er ute, ikke skrudd av.

   Fjernet tre steder, fordi ett ikke holder - samme oppskrift som
   manifestbolken i v1.38.27:

   - Markupen er ute av `templates/front-page.html` (hele `wp:group`-blokka med
     overskrifta og `wp:html`-rutene).
   - CSS-en er ute herfra: grunnbolken `--- Pomm-universet ---` med
     `.pomm-rd-category-grid`, `.pomm-rd-category-card` og de fire
     `.pomm-rd-card-*`-flatene, de tre mediespørsmålene for nettbrett og mobil,
     `order: 8` i rekkefølgeregelen, kortlinjene i de delte reglene for
     orddeling og fokusring, «rom»-gulen fra v1.38.17, hele v1.38.26 (grønn og
     oransje, og `--pomm-rd-oransje` med den - ingen andre brukte den) og hele
     v1.38.28 (trekkspillet). Til sammen ~9 kB.
   - PHP-en: `pomm_premium_magazine_fjern_universet()` i `functions.php` kaster
     blokka i `render_block`. Dette er det som faktisk avgjør saken - forsida på
     pomm.no kjøres fra en lagret kopi i Site Editor, og den kopien leser ikke
     malfila. Uten filteret ville raden blitt stående med markup, men uten stil:
     fem lenker under hverandre på hvit flate.

   Rekkefølgen nedover er nå: toppsak (1), ukas sak (2), saksrekka (3), speilet
   (4), boksparet (5), fra arkivet (6), GULT felt (7). Raden hadde 8, og tallet
   står nå ledig - de andre bolkene beholder sine.

   Kommentarene i v1.38.20 og lenger oppe nevner kortene i fortid. De står som
   historie - fargevalgene der er avgjort og skal ikke prøves på nytt. */


/* ==========================================================================
   v1.38.37 - «på speilet» sto løs øverst på forsida
   ========================================================================== */

/* «slett teksten på speilet over her på toppbilde».

   Overskrifta sto helt øverst, over toppsakens bilde, uten bolken sin. Det var
   plassholderen fra malfila som ble stående: `.pomm-rd-speil-plass` har aldri
   hatt noe `order`-tall, og på ei forside som er en flex-kolonne betyr det
   `order: 0` - altså foran alt annet.

   Rettelsen ligger i inc/pa-speilet.php (filteret slipper ikke lenger omslaget
   gjennom urørt) og i templates/front-page.html (omslaget står tomt). Regelen
   under er den tredje låsen, for den lagrede forsidekopien i Site Editor som vi
   ikke ser herfra: skulle et slikt omslag likevel nå fram, skal det ikke ta
   plass. Bolken selv har klassen `pomm-rd-speil` og røres ikke. */
.pomm-rd-front > .pomm-rd-speil-plass { display: none; }

/* --- v1.38.39: «Pomm» over sidetittelen er borte ------------------------ */

/* Samme lenke som forsvant fra artiklene i 1.38.2 sto fortsatt øverst på
   sidene - ordet POMM i versaler, med lenke hjem, rett over «om pomm».
   Blokka er tatt ut av templates/page.html.

   Reserven er denne gangen PHP, ikke CSS: `pomm_premium_magazine_fjern_sidekrumme`
   i functions.php kaster blokka i render_block, så markupen aldri sendes til
   leseren - heller ikke om sidemalen ligger lagret som en kopi i Site Editor.
   En display:none hadde latt ordet stå i lesermodus, utskrift og skjermleser.

   Filteret treffer klassen `pomm-rd-crumbs`, uansett mal. Reserveregelen
   `body.single .pomm-rd-crumbs` lenger opp treffer derfor ingenting lenger;
   den står igjen som dokumentasjon av 1.38.2 og gjør ingen skade.

   Luften forsvinner med ordet, som på artiklene: lenka bar 28-52 piksler under
   seg, og artikkelhodets egen toppolstring på 34-58 piksler står igjen.
   Tittelen legger seg altså der ordet sto. Basisstilene for
   `.pomm-rd-crumbs` er ikke slettet - de koster ingenting, og skal krummene
   tilbake på en mal senere, står de klare. */

/* --- v1.38.40: «kjerner» står i tusj på det røde ------------------------- */

/* «kjerner her bør være sort skrift.»

   Navnet øverst i den røde kjerner-boksen på forsida arvet papirfargen
   `.pomm-rd-latest` setter på hele flata (v1.38.33). Nå settes det i tusj.

   Bare overskrifta. Resten av navneraden - trekninga «vet du ikke hva du skal
   lese?» og «se alle saker» - står fortsatt i papir, og det gjør hårstreken
   under raden også. De henter fargen sin fra `.pomm-rd-latest a { color:
   inherit }`, som gjelder lenkene i kortene like mye som lenkene i raden;
   skulle de også bli svarte, er det den regelen som må deles i to, ikke denne
   som utvides.

   Kontrasten er målt begge veier: svart mot #ef3b25 er 5,3:1, og mot rosa
   modus' #df201c 4,4:1. Kravet for tekst i denne størrelsen er 3:1, så begge
   har margin - og svart står nå sterkere mot rødt enn papir gjorde (4,8:1).

   Regelen må være minst like spesifikk som `.pomm-rd-latest`s egen
   `color`-arv, derfor den samme kjeden og ikke `h2` alene. */
.pomm-rd-latest .pomm-rd-section-heading h2 {
	color: var(--pomm-rd-ink);
}

/* --- v1.38.41: hele navneraden i kjerner-boksen står i tusj -------------- */

/* «streken under skal og være svart, sammen med den småteksten "plukk en
   kjerne" "se alle saker".»

   v1.38.40 svartet bare overskrifta. Nå settes fargen ett hakk lenger opp, på
   selve raden, så alt i den arver tusj: trekninga, arkivlenka og spørsmålet
   foran dem. Regelen fra v1.38.40 på `h2` er beholdt - den sier hva som var
   bedt om først, og gjør ingen skade når raden alt er svart.

   `.pomm-rd-latest a { color: inherit }` er ikke rørt, og trengte ikke å
   deles i to likevel: lenkene i kortene arver tusj fra det hvite kortet,
   lenkene her arver nå tusj fra raden. Understreken under «plukk en kjerne»
   er `currentColor` og følger med av seg selv.

   Hårstreken går fra 32 % papir til hel tusj. Det er den samme streken
   `.pomm-rd-section-heading-bordered` bruker over hele sida, altså husets egen
   - den var lys her bare fordi flata er rød.

   Fokusringen står igjen i papir. Den skal skille seg fra teksten den ligger
   rundt, ikke ligne på den, og hvit ring på rødt er det som er lettest å se
   når raden ellers er svart. */
.pomm-rd-latest .pomm-rd-section-heading {
	border-bottom: 1px solid var(--pomm-rd-ink);
	color: var(--pomm-rd-ink);
}

/* --- v1.38.42: nyhetsbrev-bandet står tidlig på forsida ----------------- */

/* «kan nyhetsbrev-boksen komme mye tidligere, sånn før kjerner-boksen?»

   Det rosa bandet lå nederst, mellom sosialbolken og bunnen. Nå står det rett
   over den røde kjerner-boksen: toppsak, ukas to saker, nyhetsbrev, kjerner.

   Selve flyttinga er gjort i PHP - inc/nyhetsbrev-band.php - fordi bandet er
   en template-part som står utenfor `<main>` og derfor ikke er søsken av
   bolkene i denne kolonnen. `order` kan bare stokke om på søsken. PHP-en
   plasserer markupen; tallene her bestemmer hva den står mellom, og begge
   trengs.

   Alle tallene under kjerner-boksen skyves ett hakk opp for å gi plass. Det er
   samme rekkefølge som før, bare med bandet skutt inn som nummer tre - ingen
   bolk bytter naboer utover det. Rekkefølgen nedover: toppsak (1), ukas saker
   (2), NYHETSBREV (3), kjerner (4), speilet (5), boksparet (6), fra arkivet
   (7), «Pomm nå» (8).

   Verdiene over i fila er ikke slettet; disse står sist og vinner på
   rekkefølge ved lik spesifisitet. Vil du ha bandet nederst igjen: slett denne
   bolken og fila inc/nyhetsbrev-band.php - da faller alt tilbake til de gamle
   tallene av seg selv.

   Bandet er `alignfull` og henter bredden sin med negative marger, ikke med
   auto-marger, så `.pomm-rd-front > .alignwide { width: 100% }` lenger oppe
   gjelder det ikke - det står i full bredde her som det gjorde nederst.
   Luften rundt er WordPress' egen blokkluft på 20 piksler, den samme det
   hadde mellom sosialbolken og bunnen. */
.pomm-rd-front > .pomm-rd-newsletter { order: 3; }
.pomm-rd-front > .pomm-rd-latest { order: 4; }
.pomm-rd-front > .pomm-rd-speil { order: 5; }
.pomm-rd-front > .pomm-rd-coll-band { order: 6; }
.pomm-rd-front > .pomm-rd-feature-query { order: 7; }
.pomm-rd-front > .pomm-rd-now-section { order: 8; }

/* --- v1.38.43: nyhetsbrev-bandet er lavere ------------------------------ */

/* «kan du gjøre boksen mindre?»

   Bandet var bygget for å stå nederst, som siste ord på sida: 440 piksler høyt
   med en overskrift på opptil 92. Der var det et mål. Etter v1.38.42 står det
   midt i lesinga, mellom ukas saker og kjerner-boksen, og da skal det være et
   avbrekk og ikke en stopp - det som skal få plass er tilbudet og feltet, ikke
   en plakat.

   Målt på 1440 piksler: 441 piksler høyt før, 301 etter. Det er én skjermhøyde
   mindre å bla forbi for den som ikke skal melde seg på.

   Fire tall er endret, og ingenting annet:

     1. `min-height` fra 440 til 300. Det er dette som bestemmer høyden på
        brede skjermer - polstringa er 0, så flata er akkurat så høy som tallet
        sier.
     2. Overskrifta fra clamp(56, 6vw, 92) til clamp(42, 4.2vw, 62). Den er
        fortsatt bandets største skrift og bryter fortsatt i to linjer der
        `<br>`-en står.
     3. Luken mellom spaltene fra 8vw (115 piksler på 1440) til et clamp som
        stopper på 72. 8vw var luft nok til å skille to plakathalvdeler; her
        skal de to leses som én rad.
     4. Feltet og knappen: 26 til 21 piksler skrift, og 15 til 12 pikslers
        polstring over og under. Feltet er fortsatt det høyeste elementet i
        høyre spalte, altså fortsatt det man sikter på.

   Størrelsen gjelder bandet overalt, også nederst på artikler og sider. Det er
   den samme bolken, og to størrelser på den ville lest som to forskjellige
   tilbud. Skal bare forsida ha det lave bandet, sett `.pomm-rd-front >` foran
   velgerne under.

   Regelen for overskrifta står uten mediespørring, men ligger sist i fila og
   slår derfor også 58-piksel-regelen i telefonbolken lenger oppe. Det er med
   vilje: på 720 piksler gir clampen 42, altså mindre enn før, og det er den
   samme innstrammingen. */
.pomm-rd-newsletter-grid {
	gap: clamp(32px, 4.5vw, 72px);
	min-height: 300px;
}

.pomm-rd-newsletter h2 {
	font-size: clamp(42px, 4.2vw, 62px);
}

.pomm-rd-newsletter-form input[type="email"] {
	font-size: 21px;
	padding: 12px 0;
}

.pomm-rd-newsletter-form button {
	padding: 12px 0 12px 20px;
}

/* Én spalte under 1000 piksler: der er det polstringa og ikke `min-height` som
   gir høyden, og den strammes i takt med resten - 70 til 52. */
@media (max-width: 1000px) {
	.pomm-rd-newsletter-grid {
		gap: 32px;
		padding-block: 52px;
	}
}

/* Knappen står under feltet på telefon og skal ikke ha innrykket fra
   tospaltevisningen. Regelen fantes fra før i telefonbolken; den gjentas her
   fordi polstringa over er skrevet om og ellers ville tatt innrykket tilbake. */
@media (max-width: 720px) {
	.pomm-rd-newsletter-form button {
		padding-left: 0;
	}
}

/* --- v1.38.44: bandet er strammet ett hakk til -------------------------- */

/* «kan være enda smalere, ikke mye luft mellom»

   v1.38.43 tok bandet fra 441 til 301 piksler ved å skru ned tallene. Dette
   hakket tar luften: 301 til 201 på 1440 piksler, og nå er det ikke høyden som
   er skrudd ned for seg - det er avstandene inne i bandet som er borte.

   `min-height` fra 300 til 200. Innholdet måler rundt 112 piksler i den
   høyeste spalten, så det står fortsatt drøyt 40 pikslers luft over og under -
   nok til at bandet ikke klemmer mot strekene sine, og lite nok til at det
   leses som en linje i sida og ikke som et felt.

   Luken mellom overskrifta og skjemaet fra 72 til 40 på det bredeste. Det var
   det siste som fikk de to spaltene til å lese som to bolker ved siden av
   hverandre; på 40 hører de sammen.

   De to små margene inne i høyre spalte følger med: etiketten «e-postadresse»
   fra 12 til 7 piksler ned til feltet, og forbeholdet under fra 14 til 9.
   Begge hører til feltet og skal ligge inntil det.

   Overskrifta fra clamp(42, 4.2vw, 62) til clamp(36, 3.4vw, 52). Den er
   fortsatt bandets største skrift, men slutter å konkurrere med toppsaken over
   - den står på 92 og skal fortsatt vinne.

   Herfra er det ikke mer luft å ta uten å ta plass fra selve feltet. Skal
   bandet bli lavere enn dette, er neste grep å legge overskrifta og skjemaet på
   samme linje i stedet for i to spalter. */
.pomm-rd-newsletter-grid {
	gap: clamp(20px, 2.6vw, 40px);
	min-height: 200px;
}

.pomm-rd-newsletter h2 {
	font-size: clamp(36px, 3.4vw, 52px);
}

.pomm-rd-newsletter-label {
	margin-bottom: 7px;
}

.pomm-rd-newsletter-note {
	margin-top: 9px;
}

/* Én spalte under 1000 piksler. Her er polstringa høyden, og luken mellom
   overskrifta og skjemaet er den som betyr noe - de står over hverandre og
   ikke ved siden av. 52 til 34, og 32 til 22. */
@media (max-width: 1000px) {
	.pomm-rd-newsletter-grid {
		gap: 22px;
		padding-block: 34px;
	}
}

/* --- v1.38.45: bandet er en boks, ikke et bånd tvers over -------------- */

/* «trenger ikke at streken strekker seg over hele siden»

   Streken er over- og underkanten av det rosa bandet. Bandet er `alignfull`,
   altså fullbredde fra skjermkant til skjermkant, og da går de to strekene
   tvers over sida. Nederst gjorde det jobben sin - der avsluttet de. Etter
   v1.38.42 står bandet midt i lesinga, og der deler de sida i to.

   Nå stopper bandet der alt annet stopper: 1440 piksler, den samme
   `wideSize` kjerner-boksen og saksrutenettet holder seg innenfor. Strekene
   ender altså i flukt med kortene over og boksen under, og sida har én kant
   hele veien ned.

   Sidekantene kommer med: en rosa flate som slutter uten strek der de andre
   bolkene har strek, leses som noe som er kuttet av. `border-block` blir til
   `border` - fire streker, som på kjerner-boksen.

   `.alignfull` er med i velgeren for spesifisitetens skyld, ikke for utvalgets.
   WordPress gir alignfull-barn negative marger for å sprenge seg ut av
   sidepolstringa, og den regelen veier `0,2,0`. Uten klassen i velgeren veier
   denne like mye, og da avgjør hvilken stilbolk som står sist i `<head>` - noe
   temaet ikke styrer. Med klassen veier den `0,3,0` og vinner alltid.
   `!important` trengs ikke.

   BARE PÅ FORSIDA. Nederst på artikler og sider er bandet fortsatt fullbredde:
   der er det siste bolk før bunnen, det deler ingenting i to, og en strek tvers
   over er riktig avslutning. Skal det være boks der også, fjern
   `.pomm-rd-front >` fra velgeren. */
.pomm-rd-front > .pomm-rd-newsletter.alignfull {
	border: 1px solid var(--pomm-rd-ink);
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
}

/* --- v1.38.54: sekundærbåndet er rødt ------------------------------------ */

/* «kan vi gjøre denne boksen her himmelblå» → «hvordan fargen til rød»

   Boksen er raden med to saker rett under toppsaken - `.pomm-rd-second-query`.
   Fargen legges på rutenettet inni (`.wp-block-post-template`), ikke på
   ytterblokka, fordi det er rutenettet som bærer ramma: da følger flata
   nøyaktig de fire strekene, uten å blø ut i luftspalta over som v1.36.2 la
   inn mellom toppsaken og denne raden.

   Bildene dekker sine egne celler, så fargen viser seg der teksten står -
   tekstfeltet i hvert kort. Det er den flata som var hvit før.

   Rødfargen er husrøden `--pomm-rd-red`, ikke en egen verdi. Da følger båndet
   rosa modus av seg selv: der bytter variabelen til logorøden #df201c, som er
   valgt nettopp fordi #ef3b25 leses som oransje ved siden av mye rosa.

   Teksten blir stående svart. Svart mot #ef3b25 måler 4,8:1 - over kravet på
   4,5:1, og ingressen på 14px trenger den marginen. Hvit tekst hadde målt
   4,0:1 og falt under, så den er ikke et alternativ her selv om den ser
   renere ut.

   Prikken måtte flytte seg. `.pomm-rd-eyebrow::before` er rød på hvit grunn
   over hele sida; på rød grunn forsvinner den helt. Her males den i papir, så
   kategorilinja beholder motivet sitt. Bare i dette båndet - alle andre
   forekomster står urørt. */

.pomm-rd-second-query .wp-block-post-template {
	background: var(--pomm-rd-red);
}

.pomm-rd-second-query .pomm-rd-eyebrow::before {
	background: var(--pomm-rd-paper);
}

/* --- v1.38.55: rosa kant rundt toppsaken --------------------------------- */

/* «kan du lage en slags rosa kant rundt det hvite boksen her»

   Boksen er toppsaken - `.pomm-rd-hero`, bildet og det hvite tekstfeltet som
   én ramme øverst på forsida.

   Kanten er husrosa, og den er tjukk med vilje. Temaet tegner alt annet med
   svarte hårstreker på 1px; en rosa hårstrek ville bare lest som at streken
   var blitt utydelig. En bred flate leses derimot som en passepartout rundt
   bildet - en ramme, ikke en svak strek. Bredden følger skjermen, fra 8px på
   det smaleste til 13px på det bredeste.

   Den erstatter de svarte ytterkantene i stedet for å komme i tillegg. Hero
   hadde `border-inline` (v1.0) og `border-bottom` (v1.36.1); begge lå i
   ytterkanten, og en svart hårstrek klemt inntil en 13px rosa flate leses som
   skitt i kanten, ikke som to lag. Overkanten kommer med nå - en ramme som er
   åpen i toppen er ingen ramme.

   Delelinja mellom bilde og tekst står urørt og svart. Det er en indre strek,
   ikke en ytterkant, og det er den som holder de to halvdelene fra hverandre.

   Rosa modus følger med av seg selv: `--pomm-rd-pink` bytter til #f7879d der.

   Under 720px faller sidekantene bort igjen, slik v1.0 allerede bestemte for
   de svarte: der går kortet ut i skjermkanten, og en ramme som er kuttet av
   på begge sider ser ut som en glipp. Over- og underkanten blir stående, så
   boksen fortsatt er lukket oppe og nede. */

.pomm-rd-hero {
	border: clamp(8px, 0.75vw, 13px) solid var(--pomm-rd-pink);
}

@media (max-width: 720px) {
	.pomm-rd-hero {
		border-inline: 0;
	}
}

/* --- v1.38.56: Instagram-raden er bilder, ikke innbygginger -------------- */

/* «kan vi endre instagram embed til at det dukker opp de nyeste bildene
   publisert på instagram?»

   Den gamle raden var to innbygginger fra Instagram, hver i sin ramme med
   polstring rundt - `.pomm-rd-insta-item`. Den nye er bilder som ligger på
   pomm.no, hentet av inc/instagram-feed.php, og den har sin egen klasse
   nettopp fordi den ikke skal arve noe av det: en innbygging trenger luft
   rundt seg for å ikke se innelåst ut, et fotografi trenger det ikke.

   Rutenettet er kvadratisk. Instagram blander stående, liggende og kvadratisk
   fritt, og vises bildene i sitt eget format blir raden en trapp. Kvadratet er
   formatet folk kjenner igjen som en Instagram-rekke, og det eneste som gir én
   jevn linje øverst og nederst.

   Strekene mellom rutene er `gap: 1px` mot en svart bunn, ikke rammer på hvert
   bilde. Med rammer ville hver innvendig strek blitt dobbelt så tjukk som
   ytterkanten, og en strek som bare er dobbel noen steder leses som skjelving.
   Bunnfargen er svart, så mellomrommet ER streken - og den treffer riktig av
   seg selv når raden brytes i to på smalere skjermer.

   Seks ruter på bredt, tre på mellomstort, to på smalt. Seks er tallet
   POMM_IG_VISIBLE henter; deler tre og to opp i to og tre rader, går det opp
   uten en halvtom siste linje. */

.pomm-rd-insta-shots {
	background: var(--pomm-rd-ink);
	border: 1px solid var(--pomm-rd-ink);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pomm-rd-insta-shot {
	aspect-ratio: 1;
	background: var(--pomm-rd-paper);
	display: block;
	overflow: hidden;
	position: relative;
}

.pomm-rd-insta-shot img {
	display: block;
	height: 100%;
	object-fit: cover;
	/* Samme bevegelse som saksbildene ellers på forsida, så raden hører
	   hjemme i den samme sida. */
	transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
	width: 100%;
}

.pomm-rd-insta-shot:hover img,
.pomm-rd-insta-shot:focus-visible img {
	transform: scale(1.04);
}

@media (min-width: 560px) {
	.pomm-rd-insta-shots {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.pomm-rd-insta-shots {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* --- v1.38.57: kjerner er grønn, stil er rød ----------------------------- */

/* «kjerner boksen kan være grønn og stil-boksen kan være rød. Bare bytt om
   fargene»

   Det er en ren ombytting, og den er så kort som den er fordi begge boksene
   allerede henter flata si fra en variabel. Grønnen er den samme neongrønnen
   fra v1.38.19, røden den samme husrøden - ingen ny farge er laget, de har
   bare byttet plass. Rosa modus følger med av seg selv, siden begge
   variablene byttes ut der.

   To ting måtte følge fargen over.

   Tusjen i kjerner-boksen. Boksen sto med `color: paper` fra v1.38.33 fordi
   flata var rød. Hvit tekst på neongrønt måler 1,3:1 - den forsvinner helt, og
   dette er ikke en finjustering men forskjellen på lesbar og usynlig. Nå står
   den i tusj. Navneraden var allerede svart fra v1.38.41, og kortene har hatt
   sin egen tusj hele veien, så det som faktisk endrer seg er det lille som
   ligger rett på flata.

   Fokusringen samme sted. Den var papir fordi hvit ring var det som skilte seg
   ut mot rødt; mot neongrønt gjør den ikke det. Svart ring gjør.

   Stil-boksen trenger ingen av delene. Den har stått i tusj hele tida, og svart
   på husrødt måler 4,8:1 - over kravet, og den samme avgjørelsen v1.38.41 tok
   for kjerner-boksen den gangen den var rød. Hårstreken under navneraden er
   `.pomm-rd-section-heading-bordered`, altså hel tusj fra før.

   ETT UNNTAK å vite om: `.pomm-rd-stories-box .pomm-rd-coll-head` har en
   hårstrek på 20 % svart, målt for den lyse grønnflata. Den regelen treffer
   ingenting i dag - stil-boksen tegner navneraden sin med
   `.pomm-rd-section-heading` - men settes den gamle coll-head-markupen tilbake
   (se v1.38.29-bolken), må den streken bli hel tusj for å synes på rødt.

   VIL DU BYTTE TILBAKE: slett denne bolken. */

.pomm-rd-latest {
	background: var(--pomm-rd-gronn);
	color: var(--pomm-rd-ink);
}

.pomm-rd-latest .pomm-rd-section-heading :focus-visible {
	outline-color: var(--pomm-rd-ink);
}

.pomm-rd-stories-box {
	background: var(--pomm-rd-red);
}


/* --- v1.38.59: to saker per boks på mobil -------------------------------- */

/* «kan du fikse så på mobilversjonen det er to saker per boks og ikke tre?»

   Tre bokser på forsida viser tre saker hver: saksrekka (den grønne, med
   `.pomm-rd-latest`), rom-feltet (det gule) og stil-boksen. På en telefon
   står kortene under hverandre, og tre kort i høyden per boks er ni kort å
   rulle forbi før nyhetsbrevet. To holder.

   Det tredje kortet skjules med CSS og ikke ved å hente færre saker i PHP:
   serveren vet ikke hvor bred skjermen er, og på skrivebord skal det fortsatt
   være tre. `display: none` tar kortet helt ut av rutenettet, så det blir
   ingen tom rute og ingen hårstrek etter det andre kortet.

   720 er punktet der saksrekka alt stabler til én spalte. Rom-feltet stablet
   først på 600, og mellom 600 og 720 sto den nyeste over hele bredden med to
   under seg - uten det tredje ville det andre kortet stått alene i halv
   bredde. Derfor stabler rom-feltet nå på 720, samme sted som saksrekka.
   Stil-boksen stabler alt på 900 og trenger ingen egen regel for det.

   VIL DU HA TRE IGJEN: slett denne bolken. */

@media (max-width: 720px) {
	.pomm-rd-rom-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.pomm-rd-rom-grid .wp-block-post:nth-child(1) {
		grid-column: auto;
	}

	.pomm-rd-rom-grid .wp-block-post + .wp-block-post {
		border-left: 0;
		border-top: 1px solid var(--pomm-rd-ink);
	}

	.pomm-rd-latest .wp-block-post:nth-child(3),
	.pomm-rd-rom-grid .wp-block-post:nth-child(3),
	.pomm-rd-stil-grid .wp-block-post:nth-child(3) {
		display: none;
	}
}


/* --- v1.38.60: sveip til neste sak virker med et flikk ------------------ */

/* «kan du også fikse sveip for å lese neste sak på mobil?»

   Sveipen fantes (v1.4.0), men gikk bare når fingeren hadde dratt sida 72-140
   piksler, uansett fart. En tommel flikker: 40-70 piksler på under hundre
   millisekunder. Det flikket viste hintet i full styrke og gjorde ingenting
   ved slipp. Selve rettelsen står i assets/js/pomm-swipe.js: farten teller,
   terskelen er lavere, og skrå sveip godtas.

   Det som står her: nettleseren skal ikke gjøre krav på den vannrette
   bevegelsen. Uten `touch-action` avgjør Chrome på Android og Safari på iOS
   selv om et drag er en rulling, og har de først bestemt seg, kan de holde
   hendelsene tilbake eller nekte oss å avbryte dem. `pan-y` sier at sida
   bare ruller loddrett, så alt som går sidelengs kommer helt fram til
   scriptet. `pinch-zoom` står ved siden av fordi `pan-y` alene også skrur av
   knipe-zoom, og et bilde i en sak skal fortsatt kunne forstørres.

   Bare på berøringsskjerm under 900, samme vilkår som scriptet setter for
   seg selv. På skrivebord finnes ingen sveip, og da skal heller ikke
   `touch-action` stå der.

   VIL DU HA DET GAMLE: slett denne bolken. Scriptet er ikke avhengig av den,
   bare tryggere med den. */

@media (max-width: 900px) and (pointer: coarse) {
	main.pomm-rd-article {
		touch-action: pan-y pinch-zoom;
	}
}


/* --- v1.38.63: bla-raden «forrige»/«neste» er borte -------------------- */

/* Raden som sto sist i brødteksten fra v1.38.61, med «← forrige» og
   «neste →» og tittelen på nabosaken, er tatt bort på Milans ord: «fjern
   dette under hver artikkel». Markupen tegnes ikke lenger (filteret i
   functions.php er fjernet), og reglene for .pomm-bla er ute. Sveipen på
   mobil står som før. */

/* --- v1.38.64: tynnere rosa ramme rundt toppsaken ----------------------- */

/* Ramma fra v1.38.55 ble for tung: 13px rosa på en bred skjerm leses som en
   plakatkant, ikke som en passepartout. Milan: «kanskje gjøre rosa kanten
   tynnere?». Halvert - 7px på det bredeste, 4px på det smaleste - så den
   fortsatt er en tydelig farget kant, men lar bildet og tittelen puste.
   Sidekantene faller fortsatt bort under 720px, som før. */

.pomm-rd-hero {
	border-width: clamp(4px, 0.4vw, 7px);
}

@media (max-width: 720px) {
	.pomm-rd-hero {
		border-inline: 0;
	}
}

/* --- v1.38.65: mindre luft mellom menyen og toppsaken -------------------- */

/* Målt på pomm.no: 40 piksler hvit stripe mellom menylinja og den rosa
   ramma. Det er to lag WordPress-blokkluft på 20px hver - ett over <main>
   fra `.wp-site-blocks > *`, og ett over toppsaken fra
   `.is-layout-constrained > *`, som bare finnes fordi den skjulte H1-en
   (position: absolute) teknisk sett er første barn. Den andre var aldri
   ment som luft, se notatet ved v1.38.5x om at «toppsaken begynner 20
   piksler lenger ned enn før». Milan: «det er akkurat den hvite stripen
   som får det til å kjennes nakent».

   Nå: toppsaken ligger inntil <main>, og <main> får 24px - samme mål som
   menylukene. Begge WordPress-reglene er :where() og har null
   spesifisitet, så disse vinner uten !important. */

.wp-site-blocks > .pomm-rd-front {
	margin-block-start: 24px;
}

.pomm-rd-front > .pomm-rd-hero-query {
	margin-block-start: 0;
}

/* --- v1.38.66: krøllet papir som grunn -------------------------------- */

/* Milan: «kan vi ha hvitt ark som denne som bakgrunn, istedenfor hvit
   bakgrunn?» Grunnen er nå et fotografi av et sammenkrøllet ark,
   assets/papir.webp (736 × 1308, 13 kB). Fila er laget sømløs: den
   langsomme lysgradienten i fotografiet er trukket ut, bildet er
   forskjøvet et halvt steg i begge retninger og skjøtene blandet mykt
   inn, så flisen kan gjentas uten synlig kant.

   Flisen er nesten hvit med grå bretter, og ligger med `multiply` over
   papirfargen. I vanlig modus gir det #fffdf7 med bretter; i rosa modus
   bytter `--pomm-rd-paper` til #fcd6dc og arket blir rosa av seg selv -
   ingen egen regel trengs der.

   Kortene og panelene som selv har `background: var(--pomm-rd-paper)`
   (toppsakens tekstside, storykortene, arrangementsbåndet) ligger flatt
   oppå arket, som ark på ark. Det er med vilje: et kort skal fortsatt
   leses som et kort.

   Ikke `background-attachment: fixed`: iOS tegner det ikke, og på
   desktop gir det et ark som ikke ruller med sida. */

body {
	background: url("assets/papir.webp") repeat 0 0 / 736px 1308px var(--pomm-rd-paper);
	background-blend-mode: multiply;
}

/* --- v1.38.67: «på speilet» heter «notis» ------------------------------- */

/* Ingen CSS-endring. Overskrifta i bolken byttes i inc/pa-speilet.php: med
   krøllet papir som grunn (v1.38.66) er lappene notiser på et ark, ikke
   lapper på et speil. Milan: «kanskje bedre å bytte til "notis" istedenfor
   speilet? siden det er papirbakgrunn». Klassene .pomm-rd-speil* står. */

/* --- v1.38.68: notisene er rosa lapper -------------------------------- */

/* Milan: «kan bakgrunnen til notiset være dette? Så har man et bilde eller
   tekst over, alt ettersom. Men den skal ikke ha hvit bakgrunn.» Bildet er
   en rosa notislapp med bøyd hjørne nede til venstre. Den hvite grunnen er
   regnet bort (assets/pa-speilet/notis.webp, 355 × 280, gjennomsiktig,
   9 kB), så lappen ligger rett på det krøllede arket.

   Lappen tegnes som `border-image` med ni ruter, ikke som et strukket
   bilde: det bøyde hjørnet (150 × 130 px i fila) og de rette kantene
   beholder formen uansett hvilket format fotografiet har, og bare den
   flate rosa midten strekkes. Rutene måles i cqw, altså prosent av
   lappens egen bredde, så hjørnet skalerer med lappen og ikke med
   skjermen. `container-type: inline-size` på lappen er det som gir
   cqw noe å regne fra.

   Fotografi: lappen ligger bak, som et ark fotografiet er lagt oppå.
   Luft rundt på 4 % oppe og til høyre, 10 % til venstre og 18 % nede,
   så det bøyde hjørnet stikker fram under fotografiet. Lappen er vridd
   halvannen grad; fotografiet ligger rett. Lappen er en ::before med
   z-index -1, og `isolation: isolate` på lappen holder den innenfor
   sin egen stabel så den ikke faller bak papiret.

   Tekst: lappen er selve boksen, med lappens eget format (355:280) og
   luft nede som holder ordene unna det bøyde hjørnet. Skriften er
   Oooh Baby, samme håndskrift som klistremerkene, i logorødt.

   Rosa modus: lappen er #f8b8d4-ish mot #fcd6dc-grunn - nær nok til at
   den fortsatt leses som en lapp, men ikke like tydelig som på hvitt.
   Det er greit; det er samme forhold klistremerkene har. */

.pomm-rd-speil-ark {
	container-type: inline-size;
	isolation: isolate;
	position: relative;
}

.pomm-rd-speil-lapp:not(.pomm-rd-speil-lapp-tekst) .pomm-rd-speil-ark {
	padding: 4% 4% 18% 10%;
}

.pomm-rd-speil-lapp:not(.pomm-rd-speil-lapp-tekst) .pomm-rd-speil-ark::before {
	border: 0 solid transparent;
	border-image: url("assets/pa-speilet/notis.webp") 12 12 130 150 fill / 3.4cqw 3.4cqw 36.6cqw 42.3cqw / 0 stretch;
	content: "";
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
	inset: 0;
	position: absolute;
	transform: rotate(-1.5deg);
	z-index: -1;
}

.pomm-rd-speil-bilde {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.pomm-rd-speil-bildetekst {
	margin-top: clamp(12px, 1.4vw, 18px);
}

.pomm-rd-speil-lapp-tekst .pomm-rd-speil-ark {
	aspect-ratio: 355 / 280;
	background: url("assets/pa-speilet/notis.webp") 0 0 / 100% 100% no-repeat;
	box-sizing: border-box;
	padding: 9cqw 10cqw 38cqw 12cqw;
}

.pomm-rd-speil-tekst {
	color: var(--pomm-rd-red);
	font-family: "Oooh Baby", var(--pomm-rd-serif);
	font-size: clamp(28px, 6cqw, 64px);
	line-height: 1.15;
	margin: 0;
}

/* --- v1.38.69: lappen dekker hele fotografiet ---------------------------- */

/* Milan: «passe på at notiset er stort nok til å dekke bilde». Med 4 % luft
   oppe og til høyre stakk fotografiet utenfor lappen i øvre høyre hjørne:
   vridningen på halvannen grad flytter kanten 12-15 piksler på full bredde,
   og de øverste og ytterste 2-3 prosentene av lappefila er skygge, ikke
   rosa. Nå 7 % oppe, 8 % til høyre, og lappen vridd én grad i stedet for
   halvannen. Gjengitt i Chrome på 1400 px: rosa hele veien rundt.

   Teksten under lappen er tatt bort i inc/pa-speilet.php («fjern tekst
   under»); regelen for .pomm-rd-speil-bildetekst står, for en kreditt som
   måtte komme senere. */

.pomm-rd-speil-lapp:not(.pomm-rd-speil-lapp-tekst) .pomm-rd-speil-ark {
	padding: 7% 8% 18% 10%;
}

.pomm-rd-speil-lapp:not(.pomm-rd-speil-lapp-tekst) .pomm-rd-speil-ark::before {
	transform: rotate(-1deg);
}

/* --- v1.38.70: notis-bolken er slettet ---------------------------------- */

/* «bare slett hele notis». Lappelista i inc/pa-speilet.php er tom, så bolken
   tegnes ikke og ingen markup sendes. assets/pa-speilet/ er borte. Reglene
   for .pomm-rd-speil* over står uten noe å treffe; de gjør ingen skade, og
   følger temaets regel om aldri å avkorte fila. */

/* --- v1.38.71: mindre luft mellom boksene på forsida --------------------- */

/* Milan: «litt mindre mellomrom her mellom boksene» - grønn kjerner-boks →
   rød stil-boks → arkivsaken → gult rom-bånd. Målt på 1440 px før:

     grønn → rød       126 px  (kjerner mb 3vw + WP 20 + bånd pt 4.4vw)
     rød → arkivet     181 px  (bånd pb 6vw + WP 20 + arkiv pt 5.2vw)
     arkivet → gult     95 px  (arkiv pb 5.2vw + WP 20)

   Nå om lag en tredjedel mindre: 89, 118 og 69. WordPress' egne 20 px
   mellom blokkene står; det er temaets egne marger og innrykk som er
   strammet. Det gule båndets innrykk innenfor kanten (7vw) rører jeg ikke:
   en farget flate må ha mer marg enn hvit, se notatet ved v1.38.24.
   Kjerner-boksens innrykk innenfor sin egen kant står også. */

.pomm-rd-latest {
	margin-bottom: clamp(16px, 1.8vw, 28px);
}

.pomm-rd-coll-band {
	padding-block: clamp(26px, 3vw, 48px) clamp(30px, 3.4vw, 54px);
}

.pomm-rd-front > .pomm-rd-feature-query {
	padding-block: clamp(30px, 3.4vw, 54px);
}

/* --- v1.38.72: stripa øverst er rød igjen -------------------------------- */

/* Milan: «toppstrek kan være rød». Stripa er den 10 piksler høye flata
   øverst på sida, over ordmerket og menylinja. Den ble rosa i v1.38.12;
   nå tilbake til `--pomm-rd-red`, som er det den var fra v1.0.40. Variabelen
   følger moduset: #ef3b25 i hvit modus, #df201c i rosa modus, slik at stripa
   fortsatt skiller seg fra det rosa papiret under. Bolken fra v1.38.12 står,
   denne overstyrer den. */

.pomm-rd-topline {
	background: var(--pomm-rd-red);
}

/* --- v1.38.73: lysere, varmere og roligere papir ------------------------- */

/* Milan: «gjør den papir-bakgrunnen gjerne litt lysere, varmere og mindre
   synlig tekstur». Flisen fra v1.38.66 står som den er; det som endres er
   et slør over den.

   Sløret er et ekstra bakgrunnslag øverst: en flat, halvgjennomsiktig farge
   (linear-gradient med samme farge i begge ender - CSS har ingen annen måte
   å legge en flat farge som eget lag). Under ligger flisen med `multiply`
   mot papirfargen, som før. Sløret er 62 % varm hvit (#fff8ee) i hvit
   modus, og gjør tre ting på én gang: det løfter hele arket mot hvitt, det
   gir det en svak varm tone, og det demper brettene til godt under halv
   styrke - de er der fortsatt, men som et pust, ikke som en tegning.

   Rosa modus har sitt eget slør i papirrosa (#fcd6dc) på 50 %, så arket
   forblir rosa og bare brettene dempes. Variabelen settes med de samme
   selektorene som papirfargen selv (v1.38.3 og rosa-bolken), så den følger
   bryteren uten egen logikk.

   `background-blend-mode` tar ett verdi per lag: sløret blandes normalt,
   flisen med multiply. Rekkefølgen i shorthand er øverst først.

   VIL DU HA DET GAMLE: slett denne bolken. Bolken fra v1.38.66 står. Vil du
   ha mer eller mindre tekstur, er det alfaverdien i sløret som skrus. */

html:not([data-pomm-modus="rosa"]) {
	--pomm-rd-papir-slor: rgba(255, 248, 238, 0.62);
}

html[data-pomm-modus="rosa"] {
	--pomm-rd-papir-slor: rgba(252, 214, 220, 0.5);
}

body {
	background:
		linear-gradient(var(--pomm-rd-papir-slor), var(--pomm-rd-papir-slor)),
		url("assets/papir.webp") repeat 0 0 / 736px 1308px var(--pomm-rd-paper);
	background-blend-mode: normal, multiply;
}