/*
 * Network Theme — front-end chrome and layout.
 *
 * Design language: Danish "deal magazine". Warm paper surface, bold
 * Bricolage Grotesque headlines, coupon and price-tag details. All hues
 * derive from two per-site custom properties with color-mix():
 *   --brand-primary and --brand-accent (emitted by inc/settings-bridge.php).
 * Derived tokens (--wp--custom--*) come from theme.json.
 *
 * This file styles the chrome only: header, footer, breadcrumbs, search
 * form, archive headers, pagination, the article shell of a post, and
 * the 404 page. A visitor sees the chrome, and an editor never puts a
 * block on it.
 *
 * Everything that a block draws — a card, a grid of cards, a table, a
 * button — is styled in blocks.css. That file loads on the front end and
 * in the editor canvas, so the block looks the same in both places. The
 * short names of the tokens (--ink, --line, --gutter …) live there too.
 */

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

/*
 * The border box for the page. The canvas of a page and of a post gets
 * the same box model from blocks.css, because this file does not load
 * in the editor.
 */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * The highlight of the browser stays as the browser makes it.
 *
 * Do not write a ::selection rule here. A colour of the site would then
 * follow the brand colours of the site, and a brand colour that a person
 * sets in the customizer can make the highlight hard to read, or hide
 * the highlight completely. The default of the browser is always
 * readable, so the theme leaves it alone.
 */

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--primary-deep);
	color: #fff;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	text-decoration: none;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

.wrap {
	max-width: var(--wide-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.site-header {
	position: relative;
	/* The dropdowns of the menu must cover the content below the header. */
	z-index: 20;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

/* Price-sticker ribbon: the one loud per-brand signature. */
.site-header::before {
	content: "";
	display: block;
	height: 5px;
	background: repeating-linear-gradient(
		-55deg,
		var(--brand-accent) 0 18px,
		var(--brand-primary) 18px 36px
	);
}

.site-header__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.75rem 2rem;
	padding-block: 1.3rem;
}

.site-header__brand {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1;
	margin-right: auto;
	/*
	 * The base size of a flex item is the width of its content, and an
	 * item that does not fit goes to a line of its own. A long tagline
	 * would push the button below the brand. A base size of zero lets
	 * the brand take the space that is left, so the tagline wraps.
	 */
	flex: 1 1 0;
	min-width: 0;
}

.site-header__link {
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
}

.site-header__name {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 3vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.site-header__logo {
	max-height: 2.75rem;
	width: auto;
	display: block;
}

.site-header__tagline {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.site-header__toggle {
	display: none;
	align-items: center;
	/* The button keeps its size while the brand shrinks. */
	flex-shrink: 0;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-weight: 600;
	color: var(--ink);
	background: var(--tint);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
}

.site-header__toggle-icon {
	display: inline-block;
	width: 1rem;
	height: 2px;
	background: currentcolor;
	position: relative;
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 1rem;
	height: 2px;
	background: currentcolor;
	transition: transform 0.2s ease;
}

.site-header__toggle-icon::before {
	top: -5px;
}

.site-header__toggle-icon::after {
	top: 5px;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
	background: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before {
	transform: translateY(5px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
	transform: translateY(-5px) rotate(-45deg);
}

.site-header__panel {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Navigation with submenus                                            */
/* ------------------------------------------------------------------ */

/*
 * One markup, two behaviours:
 * - 900px and wider: the first submenu drops below its item, and each
 *   deeper submenu flies out beside its item.
 * - Below 900px: every submenu is a line of an accordion in the panel.
 *
 * No rule below names a depth number, so a menu of ten levels behaves
 * like a menu of two levels. Netsite_Nav_Walker gives each parent item an
 * arrow button, and main.js puts the class is-open on the open item.
 */

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each item carries the submenu that belongs to it. */
.menu--primary li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.menu--primary a {
	padding-block: 0.35rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--ink);
	text-decoration: none;
}

.menu--primary > li > a {
	border-bottom: 2px solid transparent;
}

.menu--primary a:hover,
.menu--primary a:focus {
	color: var(--brand-primary);
}

.menu--primary > li > a:hover,
.menu--primary > li > a:focus {
	border-bottom-color: var(--brand-accent);
}

.menu--primary > li.current-menu-item > a,
.menu--primary > li.current_page_item > a,
.menu--primary > li.current-menu-ancestor > a {
	color: var(--brand-primary);
	border-bottom-color: var(--brand-primary);
}

.menu--primary .sub-menu .current-menu-item > a,
.menu--primary .sub-menu .current_page_item > a,
.menu--primary .sub-menu .current-menu-ancestor > a {
	color: var(--brand-primary);
}

/*
 * The arrow button stands beside the link. The link therefore keeps its
 * own function and goes to its page; only the button opens the submenu.
 */
.menu__sub-toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	margin-inline-start: 0.1rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

@media (hover: hover) {
	.menu__sub-toggle:hover {
		color: var(--brand-primary);
		background: var(--tint);
	}
}

.menu__sub-toggle-icon {
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: translateY(-0.1em) rotate(45deg);
	transition: transform 0.2s ease;
}

.menu__sub-toggle[aria-expanded="true"] .menu__sub-toggle-icon {
	transform: translateY(0.1em) rotate(-135deg);
}

/*
 * A closed submenu uses visibility, not display. The browser then keeps
 * the links out of the tab order, and the panel can still animate.
 */
.menu--primary .sub-menu {
	position: absolute;
	z-index: 30;
	min-width: max(12rem, 100%);
	max-width: min(20rem, 78vw);
	padding: 0.35rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.35rem);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease,
		visibility 0s linear 0.15s;
}

/* Level one drops down. It touches its item, so the mouse cannot fall out. */
.menu--primary > li > .sub-menu {
	top: 100%;
	inset-inline-start: 0;
}

/* Level two and deeper fly out to the side. */
.menu--primary .sub-menu .sub-menu {
	top: -0.4rem;
	inset-inline-start: 100%;
}

/* main.js moves a panel to the other side when the window is too narrow. */
.menu--primary .sub-menu.is-flipped {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.menu--primary .sub-menu .sub-menu.is-flipped {
	inset-inline-end: 100%;
}

/* ...and lifts it when the bottom of the window is too near. */
.menu--primary .sub-menu .sub-menu.is-raised {
	top: auto;
	bottom: -0.4rem;
}

.menu--primary li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.menu--primary .sub-menu li {
	width: 100%;
}

.menu--primary .sub-menu a {
	flex: 1 1 auto;
	padding: 0.45rem 0.6rem;
	font-size: 0.95rem;
	border-radius: var(--radius-sm);
}

.menu--primary .sub-menu a:hover,
.menu--primary .sub-menu a:focus {
	background: var(--tint);
}

/* An arrow of a deeper level points to the side, not down. */
.menu--primary .sub-menu .menu__sub-toggle-icon,
.menu--primary .sub-menu .menu__sub-toggle[aria-expanded="true"] .menu__sub-toggle-icon {
	transform: rotate(-45deg);
}

/*
 * Without JavaScript no button works. The menu then shows every level at
 * once, and the header panel stays open. The menu still works.
 */
html:not(.js) .menu--primary .sub-menu {
	position: static;
	flex-basis: 100%;
	min-width: 0;
	max-width: none;
	padding: 0 0 0 0.9rem;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

html:not(.js) .menu__sub-toggle,
html:not(.js) .site-header__toggle {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.menu--primary .sub-menu,
	.menu__sub-toggle-icon {
		transition: none;
	}
}

/* Search form (header and 404/search templates). */
.search-form {
	display: flex;
	gap: 0.4rem;
}

.search-form__field {
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	min-width: 0;
	width: 11rem;
}

.search-form__field:focus {
	border-color: var(--brand-primary);
	outline: none;
}

.search-form__submit {
	padding: 0.5rem 1.1rem;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	background: var(--brand-primary);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.search-form__submit:hover {
	background: var(--primary-deep);
}

@media (max-width: 899px) {
	/*
	 * The panel is a line of its own under the brand and the button,
	 * so the row must wrap here. From 900px up the header is one row.
	 */
	.site-header__inner {
		flex-wrap: wrap;
		padding-block: 1rem;
	}

	.site-header__toggle {
		display: inline-flex;
	}

	.site-header__panel {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding-block: 1rem 1.25rem;
		border-top: 1px solid var(--line);
		max-height: min(72vh, 34rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.site-header__panel.is-open {
		display: flex;
	}

	.menu--primary {
		flex-direction: column;
		gap: 0;
	}

	.menu--primary li {
		border-bottom: 1px solid var(--line);
	}

	.menu--primary a {
		flex: 1 1 auto;
		padding-block: 0.7rem;
		font-size: 1.05rem;
	}

	/*
	 * The line of the item separates the rows here, so the underline of
	 * the link goes away. The colour still marks the current page.
	 */
	.menu--primary > li > a {
		border-bottom: 0;
	}

	/* A finger needs a target of its own, beside the link. */
	.menu__sub-toggle {
		width: 2.75rem;
		height: 2.75rem;
		margin-inline-start: 0;
	}

	/* Every level becomes a line of the accordion. */
	.menu--primary .sub-menu {
		position: static;
		display: none;
		flex-basis: 100%;
		min-width: 0;
		max-width: none;
		padding: 0 0 0.35rem 0.9rem;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.menu--primary li.is-open > .sub-menu {
		display: block;
	}

	.menu--primary .sub-menu > li:last-child {
		border-bottom: 0;
	}

	.menu--primary .sub-menu a {
		padding-inline: 0;
		font-size: 1rem;
	}

	/* Each arrow points down here, also on a deeper level. */
	.menu--primary .sub-menu .menu__sub-toggle-icon {
		transform: translateY(-0.1em) rotate(45deg);
	}

	.menu--primary .sub-menu .menu__sub-toggle[aria-expanded="true"] .menu__sub-toggle-icon {
		transform: translateY(0.1em) rotate(-135deg);
	}

	html:not(.js) .site-header__panel {
		display: flex;
		max-height: none;
		overflow: visible;
	}

	html:not(.js) .menu--primary .sub-menu {
		display: block;
	}

	.search-form__field {
		flex: 1;
		width: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Breadcrumbs                                                         */
/* ------------------------------------------------------------------ */

/*
 * The look of the trail stands in blocks.css, because the trail is also
 * a block and the editor canvas must draw it the same way. Only the
 * space under the header belongs here: templates/header.php gives the
 * trail of an article and of an archive the class "wrap", and the block
 * on a page never has that class.
 */
.breadcrumbs.wrap {
	margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Main shell                                                          */
/* ------------------------------------------------------------------ */

/*
 * A template that draws its own elements (a listing, a post, the 404
 * page) holds the vertical space of the page. page.php draws no element,
 * so it leaves this class off and the blocks hold the space. The two
 * measurements come from theme.json, and blocks.css reads the same two.
 */
.site-main--framed {
	padding-block: var(--wp--custom--flow-start) var(--wp--custom--flow-end);
}

/*
 * A Posts page that holds blocks: an editor holds the space over the
 * content, because the content is blocks, and the template holds the
 * space under the list, because the list is what the template draws. The
 * measurement is the one of theme.json, the same one that
 * .site-main--framed reads.
 */
.site-main--tail {
	padding-block-end: var(--wp--custom--flow-end);
}

/*
 * A block of the page that draws nothing (a Post grid with no post, a
 * Page title on a page with no title). The container is then empty, the
 * first block holds no space, and the space over the list comes from
 * here. A Posts page that holds no block at all reaches this rule never:
 * index.php draws no container there and gives <main> the class
 * .site-main--framed, which holds both spaces.
 */
.site-main--tail > .entry-content:empty {
	margin-top: var(--wp--custom--flow-start);
}

/* ------------------------------------------------------------------ */
/* Archive and list headers                                            */
/* ------------------------------------------------------------------ */

.archive-header {
	max-width: var(--wide-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.archive-header__kicker {
	margin: 0 0 0.4rem;
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-accent);
}

.archive-header__title {
	margin: 0;
	font-size: clamp(1.9rem, 5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.archive-header__description {
	max-width: 46rem;
	margin-top: 0.75rem;
	color: var(--muted);
}

.archive-header__description > :first-child {
	margin-top: 0;
}

.archive-header__description > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

.pagination {
	max-width: var(--wide-w);
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding-inline: var(--gutter);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-width: 2.4rem;
	justify-content: center;
	padding: 0.45rem 0.8rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	text-decoration: none;
}

.pagination a.page-numbers:hover {
	border-color: var(--brand-primary);
	color: var(--brand-primary);
}

.pagination .page-numbers.current {
	background: var(--brand-primary);
	border-color: var(--brand-primary);
	color: #fff;
}

.pagination .page-numbers.dots {
	border: 0;
	background: none;
}

/* ------------------------------------------------------------------ */
/* Article (single and page)                                           */
/* ------------------------------------------------------------------ */

.article {
	width: 100%;
}

.article__header {
	max-width: var(--content-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.article__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.9rem;
}

.article__categories a {
	padding: 0.2rem 0.65rem;
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--accent-deep);
	background: var(--accent-tint);
	border-radius: 999px;
	text-decoration: none;
}

.article__categories a:hover {
	color: #fff;
	background: var(--brand-accent);
}

.article__title {
	margin: 0;
	font-size: clamp(1.9rem, 5.5vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin-top: 0.9rem;
	font-size: 0.85rem;
	color: var(--muted);
}

/*
 * The picture has no space under it. The space over the first block
 * gives it, in the editor and on the page (assets/css/blocks.css).
 */
.article__hero {
	max-width: var(--wide-w);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.article__hero img {
	width: 100%;
	border-radius: var(--radius);
	display: block;
}

.article__hero figcaption {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--muted);
	text-align: center;
}

.article__footer {
	max-width: var(--content-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-top: clamp(2rem, 4vw, 3rem);
}

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

.tag-list a {
	padding: 0.3rem 0.8rem;
	font-size: 0.82rem;
	color: var(--muted);
	background: var(--tint);
	border: 1px solid var(--line);
	border-radius: 999px;
	text-decoration: none;
}

.tag-list a:hover {
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

/* Previous / next post navigation. */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	max-width: var(--content-w);
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding-inline: var(--gutter);
}

.post-nav__item {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem 1.2rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
}

.post-nav__item:hover {
	border-color: var(--brand-primary);
}

.post-nav__item--next {
	text-align: right;
	grid-column: 2;
}

.post-nav__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--brand-accent);
}

.post-nav__title {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink);
	line-height: 1.3;
}

.post-nav__item:hover .post-nav__title {
	color: var(--brand-primary);
}

@media (max-width: 599px) {
	.post-nav {
		grid-template-columns: 1fr;
	}

	.post-nav__item--next {
		grid-column: auto;
		text-align: left;
	}
}

/* ------------------------------------------------------------------ */
/* Entry content: block alignment inside the article                   */
/* ------------------------------------------------------------------ */

/*
 * The content area spans the full viewport. Each direct child snaps to
 * the 680px column. Blocks with alignwide or alignfull break out.
 *
 * The gutter comes from the width of the child, not from its padding.
 * A block that sets its own padding (the deal box, the disclosure, a
 * group with a background) therefore keeps the gutter. With
 * padding-inline the block would touch the edge of a small screen.
 */
.entry-content > * {
	width: min(100% - (var(--gutter) * 2), var(--content-w));
	margin-left: auto;
	margin-right: auto;
}

.entry-content > .alignwide {
	width: min(100% - (var(--gutter) * 2), var(--wide-w));
}

.entry-content > .alignfull {
	width: 100%;
}

/*
 * Floated images keep their own width. Only the block-level children
 * above take the column width.
 */
.entry-content > .alignleft,
.entry-content > .alignright {
	width: auto;
	max-width: 50%;
}

.entry-content > .alignleft {
	float: left;
	margin-right: 1.5rem;
	margin-left: var(--gutter);
}

.entry-content > .alignright {
	float: right;
	margin-left: 1.5rem;
	margin-right: var(--gutter);
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ------------------------------------------------------------------ */
/* Affiliate components                                                */
/* ------------------------------------------------------------------ */

/*
 * The class names in this section must stay free of the words
 * "affiliate", "ad", "advert", "sponsor", and "banner". An ad blocker
 * hides an element that carries such a class name. The old names
 * "affiliate-disclosure" and "affiliate-link" are on the public block
 * lists, and an ad blocker made the disclosure and the buttons
 * invisible. Do not put these words back.
 */
.content-notice {
	margin-bottom: 1.4rem;
	padding: 0.7rem 1rem;
	font-size: 0.83rem;
	color: var(--muted);
	background: var(--tint);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

/*
 * The disclosure over the footer. templates/footer.php draws it on every
 * view of the site, so the box needs its own space above the footer and
 * the gutter of the layout. The box keeps the look of the notice over an
 * article; only the space around it belongs to this rule.
 */
.site-disclosure {
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.site-disclosure .content-notice {
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.site-disclosure .content-notice > :first-child {
	margin-top: 0;
}

.site-disclosure .content-notice > :last-child {
	margin-bottom: 0;
}

/* CTA sticker: used by netsite_theme_affiliate_link() and the
   "affiliate" button block style (see blocks.css for the block side).
   The class name is neutral on purpose. See the note above.

   The three --button tokens stand in blocks.css, which loads on the
   front end beside this file. The sticker therefore carries the same
   colours as every other button of the site. */
.cta-sticker {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--button-ink);
	background: var(--button);
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0.2rem 0.2rem 0 var(--primary-deep);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cta-sticker::after {
	content: " →";
}

.cta-sticker:hover,
.cta-sticker:focus {
	color: var(--button-ink);
	background: var(--button-hover);
	transform: translate(0.1rem, 0.1rem);
	box-shadow: 0.1rem 0.1rem 0 var(--primary-deep);
}

/* ------------------------------------------------------------------ */
/* Search results and 404                                              */
/* ------------------------------------------------------------------ */

.error-404 {
	max-width: var(--content-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
	text-align: center;
	padding-block: clamp(2rem, 6vw, 4rem);
}

.error-404__code {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(4rem, 14vw, 7rem);
	font-weight: 800;
	line-height: 1;
	color: var(--tint);
	-webkit-text-stroke: 2px var(--brand-primary);
}

.error-404__title {
	margin: 0.5rem 0 0.75rem;
	font-size: clamp(1.5rem, 4vw, 2rem);
}

.error-404 .search-form {
	justify-content: center;
	margin-top: 1.5rem;
}

.error-404__links {
	margin-top: 2rem;
}

.error-404__links-title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: var(--muted);
}

.error-404__links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.no-results {
	max-width: var(--content-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.no-results .search-form {
	margin-top: 1rem;
}

/* ------------------------------------------------------------------ */
/* Signup band                                                         */
/* ------------------------------------------------------------------ */

/*
 * newsletter/band.php draws the band under the disclosure and over the
 * footer, on every view of the site. The band gives the colour, the
 * width and the space. The form inside it belongs to the newsletter
 * plugin, which styles it in assets/signup.css.
 *
 * The class says "signup" and not "newsletter", for the reason that
 * stands over the affiliate components above.
 */
.site-signup {
	background: var(--tint);
	border-top: 1px solid var(--line);
}

.site-signup__inner {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

/*
 * The band IS the box, so the form drops the box of the block. The two
 * rules of the plugin stand behind a :not(), which carries the weight
 * of one class. This selector carries two, so it wins wherever the two
 * stylesheets stand.
 */
.site-signup .netsite-signup,
.site-signup .netsite-signup:not(.has-background) {
	max-width: var(--content-w);
	margin-inline: auto;
	padding: 0;
	background: none;
	border: 0;
}

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

.site-footer {
	margin-top: auto;
	color: color-mix(in srgb, #fff 82%, var(--brand-primary));
	background: var(--primary-deep);
	border-top: 5px solid var(--brand-accent);
}

.site-footer a {
	color: #fff;
	text-decoration-color: color-mix(in srgb, #fff 40%, transparent);
}

.site-footer a:hover {
	color: #fff;
	text-decoration-color: var(--brand-accent);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 2rem;
	padding-block: clamp(2rem, 4vw, 3rem);
}

/*
 * The three columns of the footer are tight. Each block in a column
 * keeps its own space with a margin.
 */
.site-footer__column {
	line-height: 1;
}

.site-footer__brand-name {
	margin: 0 0 0.4rem;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 800;
	color: #fff;
}

.site-footer__tagline {
	margin: 0;
	font-size: 0.9rem;
}

.site-footer__heading {
	margin: 0 0 0.75rem;
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, #fff 65%, var(--brand-primary));
}

.menu--footer {
	flex-direction: column;
	gap: 0.45rem;
}

.menu--footer a {
	text-decoration: none;
	font-size: 0.95rem;
}

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

/* The footer shows every level at once. It has no button and no dropdown. */
.menu--footer .menu__sub-toggle {
	display: none;
}

.menu--footer .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-block-start: 0.45rem;
	padding-inline-start: 0.85rem;
	border-inline-start: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
}

.site-footer__custom {
	font-size: 0.9rem;
}

.site-footer__custom > :first-child {
	margin-top: 0;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	padding-block: 1rem;
	border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
	font-size: 0.82rem;
}

.site-footer__copyright {
	margin: 0;
}

/*
 * The five pages of the network (inc/legal.php). They stand in the
 * shell of every view, so they are not a menu that an editor changes.
 */
.site-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal a {
	color: inherit;
	text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Body layout: sticky footer                                          */
/* ------------------------------------------------------------------ */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ */
/* The five pages of the network                                       */
/* ------------------------------------------------------------------ */

/*
 * The article shell draws them, so they need almost nothing of their
 * own: one line under the title that says what the page answers.
 */
.article__standfirst {
	margin-block: 0.75rem 0;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--muted);
}

.legal-page .entry-content h2 {
	margin-top: 2.25rem;
}

.legal-page .entry-content h3 {
	margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* The cookie banner                                                   */
/* ------------------------------------------------------------------ */

/*
 * It stands over the page and does not cover it: the reader can read,
 * scroll and follow a link with the banner open. A cookie wall would
 * make the consent worthless.
 *
 * The two buttons are the same size and sit beside each other, because
 * refusing must be as easy as accepting. Both read the button tokens of
 * the site (blocks.css), so the banner is the banner of THIS site and
 * not a grey box from somewhere else. See inc/consent.php.
 */
.consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	color: var(--ink);
	background: var(--surface);
	border-top: 2px solid var(--button);
	box-shadow: 0 -8px 24px rgb(0 0 0 / 12%);
}

.consent__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 1rem;
}

.consent__words {
	flex: 1 1 22rem;
}

.consent__title {
	margin: 0 0 0.2rem;
	font-weight: 700;
}

.consent__text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--muted);
}

.consent__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.consent__button {
	min-width: 11rem;
	padding: 0.65rem 1.25rem;
	font: inherit;
	font-weight: 600;
	color: var(--button);
	cursor: pointer;
	background: transparent;
	border: 2px solid var(--button);
	border-radius: var(--radius);
}

.consent__button--yes {
	color: var(--button-ink);
	background: var(--button);
}

.consent__button:hover,
.consent__button:focus-visible {
	color: var(--button-ink);
	background: var(--button-hover);
	border-color: var(--button-hover);
}

/* The way back to the question, in the footer of every view. */
.consent__reopen {
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: 0;
}

.consent__reopen:hover,
.consent__reopen:focus-visible {
	text-decoration: underline;
}

@media (max-width: 599px) {
	.consent__buttons {
		width: 100%;
	}

	.consent__button {
		flex: 1 1 8rem;
		min-width: 0;
	}
}