/**
 * Nieuwe Stijl — theme styles.
 *
 * Reads every colour, size and rule weight from assets/tokens.css. Nothing
 * here hard-codes a hex value, so a child theme re-skins the site by
 * overriding :root.
 *
 * Section order matches the comp: base, primitives, masthead, hero, trust
 * band, pillars, cards, archive, article, related, newsletter, footer,
 * comments, then the breakpoints (1200 / 900 / 600).
 *
 * @package Nieuwe_Stijl
 */

/* =========================================================================
 * 1. Base
 * ====================================================================== */

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

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

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

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

body {
	margin: 0;
	background: var(--ns-paper);
	color: var(--ns-ink);
	font-family: var(--ns-font);
	font-size: var(--ns-size-body);
	font-weight: 400;
	line-height: 1.75;
	/*
	 * clip, not hidden: `overflow-x: hidden` on body makes it a scroll
	 * container, which silently breaks every position: sticky on the page.
	 */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

body.ns-nav-open {
	overflow: hidden;
}

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

a {
	color: var(--ns-ink);
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Zero radius everywhere, including form controls the UA rounds by default. */
input,
button,
select,
textarea,
.ns-btn {
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 900;
	line-height: 1.15;
}

p {
	margin: 0;
}

/*
 * Focus. The brand's yellow is only 1.6:1 against paper, so a bare geel ring
 * would be an indicator nobody can see. It keeps the yellow and gains a 2px
 * ink keyline outside it, which clears the 3:1 non-text minimum against every
 * surface in the palette — and looks like the rest of the design.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ns-geel);
	outline-offset: 0;
	box-shadow: 0 0 0 5px var(--ns-ink);
	position: relative;
	z-index: 3;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ns-skip:focus-visible {
	position: fixed !important;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100;
	padding: 12px 18px;
	background: var(--ns-ink);
	color: var(--ns-on-ink);
	font-size: var(--ns-size-label);
	font-weight: 700;
	letter-spacing: var(--ns-track-caps);
	text-transform: uppercase;
}

/* =========================================================================
 * 2. Layout primitives
 * ====================================================================== */

.ns-wrap {
	width: 100%;
	max-width: calc(var(--ns-wide) + var(--ns-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--ns-gutter);
}

.ns-main {
	display: block;
}

.ns-section {
	padding-block: clamp(28px, 1.5rem + 1.6vw, 44px);
}

.ns-section--pillars {
	padding-bottom: 0;
}

.ns-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 18px;
}

.ns-section-title {
	margin: 0;
	font-size: var(--ns-size-section);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ns-section-title--sm {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem);
}

/* =========================================================================
 * 3. Primitives: squares, arrows, buttons, tags, text links
 * ====================================================================== */

.ns-square {
	display: inline-block;
	flex: none;
	width: 9px;
	height: 9px;
	background: var(--ns-accent, var(--ns-ink));
}

.ns-arrow {
	display: inline-block;
	margin-left: 0.35em;
}

.ns-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	padding: 12px 20px;
	border: var(--ns-border) solid transparent;
	background: var(--ns-ink);
	color: var(--ns-on-colour);
	font-size: var(--ns-size-ui);
	font-weight: 700;
	letter-spacing: var(--ns-track-caps);
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background var(--ns-ease), color var(--ns-ease), border-color var(--ns-ease);
}

.ns-btn--primary {
	background: var(--ns-rood);
	border-color: var(--ns-rood);
	color: var(--ns-on-colour);
}

.ns-btn--blauw {
	background: var(--ns-blauw);
	border-color: var(--ns-blauw);
	color: var(--ns-on-colour);
}

.ns-btn--ink,
.ns-btn--primary:hover,
.ns-btn--primary:focus-visible,
.ns-btn--blauw:hover,
.ns-btn--blauw:focus-visible {
	background: var(--ns-ink);
	border-color: var(--ns-ink);
	color: var(--ns-on-colour);
}

.ns-btn--ghost {
	background: transparent;
	border-color: var(--ns-ink);
	color: var(--ns-ink);
}

.ns-btn--ghost:hover,
.ns-btn--ghost:focus-visible,
.ns-btn--ink:hover,
.ns-btn--ink:focus-visible {
	background: var(--ns-ink);
	border-color: var(--ns-ink);
	color: var(--ns-on-colour);
}

.ns-textlink {
	font-size: var(--ns-size-ui);
	font-weight: 700;
	color: var(--ns-ink);
	border-bottom: var(--ns-border) solid var(--ns-rood);
	padding-bottom: 2px;
	transition: color var(--ns-ease);
}

.ns-textlink:hover {
	color: var(--ns-rood);
}

/* The outlined category tag with its coloured square. */
.ns-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
	border: var(--ns-border) solid var(--ns-ink);
	background: transparent;
	color: var(--ns-ink);
	font-size: var(--ns-size-tag);
	font-weight: 700;
	letter-spacing: var(--ns-track-caps);
	line-height: 1;
	text-transform: uppercase;
	transition: background var(--ns-ease), color var(--ns-ease);
}

.ns-tag:hover {
	background: var(--ns-ink);
	color: var(--ns-on-colour);
}

/*
 * On hover the chip inverts to an ink fill. Blauw on ink is 1.5:1 and an ink
 * square disappears outright, so every square goes paper for the duration --
 * the colour identity is carried by the chip's resting state.
 */
.ns-tag:hover .ns-square {
	background: var(--ns-paper);
}

.ns-tag--lg {
	padding: 7px 12px;
	font-size: var(--ns-size-meta);
}

.ns-tag--plain .ns-square {
	display: none;
}

/* =========================================================================
 * 4. Masthead
 * ====================================================================== */

.ns-masthead {
	position: relative;
	z-index: 20;
	background: var(--ns-paper);
	border-bottom: var(--ns-rule) solid var(--ns-ink);
}

.ns-masthead--sticky {
	position: sticky;
	top: 0;
}

.ns-masthead-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 68px;
	padding-block: 12px;
}

.ns-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	color: var(--ns-ink);
}

.ns-brand .ns-tile {
	flex: none;
}

.ns-brand-name {
	font-size: 1.0625rem;
	font-weight: 900;
	letter-spacing: var(--ns-track-name);
	line-height: 1.05;
	text-transform: uppercase;
}

.ns-brand img {
	max-height: 44px;
	width: auto;
}

.ns-nav {
	margin-left: auto;
}

.ns-nav-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-nav-list a {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: var(--ns-border) solid transparent;
	font-size: var(--ns-size-label);
	font-weight: 700;
	letter-spacing: var(--ns-track-caps);
	text-transform: uppercase;
	transition: border-color var(--ns-ease), color var(--ns-ease);
}

.ns-nav-list a:hover,
.ns-nav-list .current-menu-item > a,
.ns-nav-list .current-menu-ancestor > a,
.ns-nav-list .current_page_item > a {
	border-bottom-color: var(--ns-rood);
}

.ns-masthead-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	margin-left: auto;
}

.ns-nav + .ns-masthead-tools {
	margin-left: 0;
}

/* -- Search: a <details> panel, so it works with no JavaScript at all. --- */

.ns-search {
	position: relative;
}

.ns-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: var(--ns-border) solid var(--ns-ink);
	background: transparent;
	cursor: pointer;
	list-style: none;
	transition: background var(--ns-ease);
}

.ns-search-button::-webkit-details-marker {
	display: none;
}

.ns-search[open] .ns-search-button,
.ns-search-button:hover {
	background: var(--ns-ink);
}

.ns-search-glyph {
	position: relative;
	display: inline-block;
	width: 11px;
	height: 11px;
	border: 2px solid var(--ns-ink);
	border-radius: 999px;
}

.ns-search-glyph::after {
	content: "";
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 2px;
	height: 6px;
	background: var(--ns-ink);
	transform: rotate(-45deg);
}

.ns-search[open] .ns-search-glyph,
.ns-search-button:hover .ns-search-glyph {
	border-color: var(--ns-paper);
}

.ns-search[open] .ns-search-glyph::after,
.ns-search-button:hover .ns-search-glyph::after {
	background: var(--ns-paper);
}

.ns-search-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 30;
	width: min(360px, calc(100vw - 2 * var(--ns-gutter)));
	padding: 16px;
	background: var(--ns-card);
	border: var(--ns-border) solid var(--ns-ink);
	box-shadow: var(--ns-shadow);
}

.ns-searchform {
	display: flex;
	gap: 0;
}

.ns-searchform-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 11px 14px;
	border: var(--ns-border) solid var(--ns-ink);
	border-right: 0;
	background: var(--ns-paper);
	font-size: var(--ns-size-ui);
}

.ns-searchform .ns-btn {
	flex: none;
}

/* -- Burger + overlay -------------------------------------------------- */

.ns-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--ns-border) solid var(--ns-ink);
	background: transparent;
	cursor: pointer;
}

.ns-burger span {
	display: block;
	width: 18px;
	height: 3px;
	background: var(--ns-ink);
	transition: transform var(--ns-ease), opacity var(--ns-ease);
}

.ns-burger.is-open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.ns-burger.is-open span:nth-child(2) {
	opacity: 0;
}

.ns-burger.is-open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.ns-overlay {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: flex-start;
	background: var(--ns-paper);
	overflow-y: auto;
	padding: 96px var(--ns-gutter) 48px;
}

.ns-overlay[hidden] {
	display: none;
}

.ns-overlay-nav {
	width: 100%;
}

.ns-overlay-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.ns-overlay-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
}

.ns-overlay-list li::before {
	content: none;
}

.ns-overlay-list a::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: var(--ns-ink);
}

.ns-overlay-list li:nth-child(4n + 1) a::before { background: var(--ns-blauw); }
.ns-overlay-list li:nth-child(4n + 2) a::before { background: var(--ns-rood); }
.ns-overlay-list li:nth-child(4n + 3) a::before { background: var(--ns-geel); }
.ns-overlay-list li:nth-child(4n + 4) a::before { background: var(--ns-ink); }

/* =========================================================================
 * 5. Hero — the Mondrian grid
 *
 * The black lines are the grid's own 3px gap showing through an ink ground,
 * not borders. That keeps every join exactly one weight however it reflows.
 * ====================================================================== */

.ns-hero-grid {
	display: grid;
	grid-template-columns: 1.55fr 0.55fr 1fr;
	grid-template-rows: 250px 170px;
	gap: var(--ns-gap);
	max-width: 1360px;
	margin-inline: auto;
	padding: var(--ns-gap);
	background: var(--ns-ink);
}

.ns-hero-cell {
	min-width: 0;
	background: var(--ns-paper);
}

.ns-hero-cell--headline {
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(22px, 1rem + 2vw, 40px);
}

.ns-hero-title {
	margin: 0;
	font-size: var(--ns-size-display);
	line-height: 0.98;
	letter-spacing: var(--ns-track-tight);
	text-transform: uppercase;
	text-wrap: pretty;
}

.ns-hero-dek {
	max-width: 42ch;
	margin: 0 0 20px;
	color: var(--ns-grijs);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
}

.ns-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ns-hero-cell--block {
	background: var(--ns-panel-bg, var(--ns-rood));
}

.ns-hero-cell--media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--ns-stripe-b);
	background-image: var(--ns-stripes);
}

.ns-hero-cell--media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ns-hero-media-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 14px;
	background: var(--ns-ink);
	color: var(--ns-on-ink);
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-name);
	line-height: 1.3;
	text-transform: uppercase;
	transition: background var(--ns-ease), color var(--ns-ease);
}

.ns-hero-cell--media:hover .ns-hero-media-label {
	background: var(--ns-rood);
}

.ns-hero-cell--stat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: 16px;
}

.ns-hero-cell--stat-a {
	background: var(--ns-panel-bg, var(--ns-geel));
	color: var(--ns-panel-text, var(--ns-ink));
}

.ns-stat-figure {
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: var(--ns-track-name);
	line-height: 1.1;
	text-transform: uppercase;
}

.ns-stat-figure--large {
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
	letter-spacing: 0;
	line-height: 1;
}

.ns-stat-note {
	color: var(--ns-muted);
	font-size: var(--ns-size-label);
	font-weight: 600;
	line-height: 1.4;
}

.ns-hero-cell--stat-a .ns-stat-note {
	color: var(--ns-grijs);
}

/* The empty-image mat, shared by the hero, cards and archive rows. */
.ns-media-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--ns-stripe-b);
	background-image: var(--ns-stripes);
}

.ns-media-empty .ns-tile {
	opacity: 0.75;
}

/* =========================================================================
 * 6. Trust band
 * ====================================================================== */

.ns-ticker {
	background: var(--ns-ink);
	color: var(--ns-on-ink);
	border-bottom: var(--ns-rule) solid var(--ns-ink);
}

.ns-ticker-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 16px;
	padding-block: 13px;
}

.ns-ticker-item {
	font-size: var(--ns-size-label);
	font-weight: 700;
	letter-spacing: var(--ns-track-wide);
	line-height: 1.2;
	text-transform: uppercase;
}

/* =========================================================================
 * 7. Pillar tiles
 * ====================================================================== */

.ns-tiles {
	display: grid;
	grid-template-columns: repeat(var(--ns-tile-columns, 4), minmax(0, 1fr));
	gap: var(--ns-gap);
	background: var(--ns-ink);
	border: var(--ns-rule) solid var(--ns-ink);
}

.ns-tile-link {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	min-height: 120px;
	padding: 22px 20px;
	background: var(--ns-panel-bg, var(--ns-paper));
	color: var(--ns-panel-text, var(--ns-ink));
	transition: background var(--ns-ease), color var(--ns-ease);
}

/*
 * Hover fills the tile with ink, the same "invert" language the buttons use.
 * A filter: invert() would have been shorter and turns rood into cyan.
 */
.ns-tile-link:hover {
	background: var(--ns-ink);
	color: var(--ns-on-ink);
}

.ns-tile-link:hover .ns-tile-sub {
	color: var(--ns-on-ink-dim);
}

.ns-tile-name {
	font-size: 1.0625rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.15;
	text-transform: uppercase;
}

.ns-tile-sub {
	color: var(--ns-panel-sub, var(--ns-muted));
	font-size: var(--ns-size-label);
	font-weight: 600;
	line-height: 1.3;
}

/* =========================================================================
 * 8. Cards
 * ====================================================================== */

.ns-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.ns-card {
	display: flex;
	flex-direction: column;
	border: var(--ns-border) solid var(--ns-ink);
	background: var(--ns-card);
	box-shadow: var(--ns-shadow);
	transition: transform var(--ns-ease), box-shadow var(--ns-ease);
}

.ns-card:hover {
	transform: var(--ns-lift);
	box-shadow: var(--ns-shadow-hover);
}

.ns-card-media-link {
	display: block;
}

.ns-card-media {
	height: 170px;
	border-bottom: var(--ns-border) solid var(--ns-ink);
	overflow: hidden;
	/* Longhand: a `background:` shorthand here would wipe the stripe image. */
	background-color: var(--ns-stripe-b);
}

.ns-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ns-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px 20px;
}

.ns-card-title {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 900;
	line-height: 1.15;
	text-transform: uppercase;
}

.ns-card-title a {
	transition: color var(--ns-ease);
}

.ns-card:hover .ns-card-title a {
	color: var(--ns-rood);
}

.ns-card-excerpt {
	color: var(--ns-muted);
	font-size: var(--ns-size-ui);
	line-height: 1.55;
}

.ns-card-meta {
	margin-top: auto;
	color: var(--ns-muted);
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-name);
	text-transform: uppercase;
}

.ns-card--compact {
	box-shadow: none;
}

.ns-card--compact:hover {
	transform: none;
	box-shadow: var(--ns-shadow);
}

.ns-card--compact .ns-card-body {
	gap: 10px;
	padding: 18px 20px;
}

.ns-card--compact .ns-card-title {
	font-size: 1.0625rem;
	line-height: 1.2;
}

/* =========================================================================
 * 9. Archive: pillar header, filter chips, list rows, pagination
 * ====================================================================== */

.ns-archive-head .ns-wrap {
	max-width: 1360px;
	padding-inline: 0;
}

.ns-archive-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--ns-gap);
	padding: var(--ns-gap);
	background: var(--ns-ink);
}

.ns-archive-cell {
	min-width: 0;
	padding: clamp(22px, 1rem + 2vw, 40px);
	background: var(--ns-paper);
}

.ns-archive-title {
	margin: 0 0 14px;
	font-size: var(--ns-size-h1-archive);
	line-height: 0.98;
	letter-spacing: var(--ns-track-tight);
	text-transform: uppercase;
	text-wrap: pretty;
}

.ns-square--title {
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.16em;
	background: var(--ns-accent, var(--ns-ink));
	vertical-align: baseline;
}

.ns-archive-dek {
	max-width: 52ch;
	color: var(--ns-grijs);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
}

.ns-archive-dek p + p {
	margin-top: 12px;
}

.ns-archive-search {
	margin-top: 20px;
	max-width: 420px;
}

.ns-archive-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	padding: 28px;
	background: var(--ns-panel-bg, var(--ns-ink));
	color: var(--ns-panel-text, var(--ns-on-colour));
}

.ns-archive-count {
	font-size: clamp(2rem, 1.4rem + 2vw, 2.5rem);
	font-weight: 900;
	line-height: 1;
}

.ns-archive-count-label {
	font-size: var(--ns-size-ui);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* -- Filter chips ------------------------------------------------------ */

.ns-filters {
	border-bottom: var(--ns-rule) solid var(--ns-ink);
}

.ns-filters-inner {
	display: flex;
	gap: 10px;
	padding-block: 18px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.ns-filter {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	border: var(--ns-border) solid var(--ns-ink);
	background: transparent;
	font-size: var(--ns-size-label);
	font-weight: 700;
	letter-spacing: var(--ns-track-name);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background var(--ns-ease), color var(--ns-ease);
}

.ns-filter:hover,
.ns-filter.is-active {
	background: var(--ns-ink);
	color: var(--ns-on-colour);
}

/* -- List rows --------------------------------------------------------- */

.ns-rows {
	display: flex;
	flex-direction: column;
}

.ns-row {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) auto;
	gap: 26px;
	align-items: center;
	padding-block: 24px;
	border-bottom: var(--ns-border) solid var(--ns-ink);
}

.ns-row:last-child {
	border-bottom: 0;
}

.ns-row-media {
	height: 120px;
	border: var(--ns-border) solid var(--ns-ink);
	overflow: hidden;
	background-color: var(--ns-stripe-b);
}

.ns-row-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ns-row-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.ns-row-title {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
	font-weight: 900;
	line-height: 1.15;
	text-transform: uppercase;
}

.ns-row-title a {
	transition: color var(--ns-ease);
}

.ns-row-title a:hover {
	color: var(--ns-rood);
}

.ns-row-excerpt {
	max-width: 62ch;
	color: var(--ns-muted);
	font-size: 0.875rem;
	line-height: 1.55;
}

.ns-row-meta {
	text-align: right;
	color: var(--ns-muted);
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-name);
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

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

.ns-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: calc(var(--ns-wide) + var(--ns-gutter) * 2);
	margin-inline: auto;
	padding: 24px var(--ns-gutter) 40px;
	border-top: var(--ns-rule) solid var(--ns-ink);
	margin-top: 8px;
}

.ns-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
	border: var(--ns-border) solid var(--ns-ink);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	transition: background var(--ns-ease), color var(--ns-ease);
}

.ns-pagination .page-numbers:hover {
	background: var(--ns-ink);
	color: var(--ns-on-colour);
}

.ns-pagination .page-numbers.current {
	background: var(--ns-ink);
	color: var(--ns-on-colour);
}

.ns-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
}

.ns-pagination .prev,
.ns-pagination .next {
	color: var(--ns-rood);
	font-weight: 900;
}

.ns-pagination .prev:hover,
.ns-pagination .next:hover {
	color: var(--ns-on-colour);
}

/* =========================================================================
 * 10. Article
 * ====================================================================== */

.ns-post-head {
	padding-top: clamp(24px, 1.5rem + 1vw, 32px);
}

.ns-crumbs {
	margin-bottom: 16px;
	color: var(--ns-muted);
	font-size: var(--ns-size-label);
	font-weight: 600;
}

.ns-crumbs a {
	color: var(--ns-muted);
	transition: color var(--ns-ease);
}

.ns-crumbs a:hover {
	color: var(--ns-ink);
}

.ns-crumbs-sep,
.ns-crumbs .separator {
	margin-inline: 6px;
	color: var(--ns-rood);
}

.ns-crumbs-here,
.ns-crumbs .last {
	color: var(--ns-ink);
	font-weight: 700;
}

.ns-post-title {
	max-width: 22ch;
	margin: 12px 0 14px;
	font-size: var(--ns-size-h1);
	line-height: 1.02;
	letter-spacing: var(--ns-track-tight);
	text-transform: uppercase;
	text-wrap: pretty;
}

.ns-post-dek {
	max-width: 58ch;
	margin-bottom: 20px;
	color: var(--ns-grijs);
	font-size: var(--ns-size-dek);
	font-weight: 500;
	line-height: 1.55;
}

/* -- Byline bar -------------------------------------------------------- */

.ns-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-bottom: 24px;
	padding-block: 14px;
	border-top: var(--ns-rule) solid var(--ns-ink);
	border-bottom: 1px solid var(--ns-hairline);
}

.ns-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	overflow: hidden;
	background: var(--ns-accent, var(--ns-blauw));
	color: var(--ns-accent-text, var(--ns-on-colour));
	font-size: 0.875rem;
	font-weight: 900;
	line-height: 1;
}

.ns-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ns-avatar--lg {
	width: 56px;
	height: 56px;
	font-size: 1.25rem;
}

.ns-byline-who {
	font-size: var(--ns-size-ui);
	font-weight: 700;
	line-height: 1.45;
}

.ns-byline-name {
	border-bottom: var(--ns-border) solid transparent;
	transition: border-color var(--ns-ease);
}

.ns-byline-name:hover {
	border-bottom-color: var(--ns-rood);
}

.ns-byline-role {
	color: var(--ns-muted);
	font-weight: 500;
}

.ns-byline-meta {
	margin-left: auto;
	color: var(--ns-muted);
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-name);
	text-transform: uppercase;
}

/* -- Two-column article layout ---------------------------------------- */

.ns-article {
	display: grid;
	grid-template-columns: var(--ns-toc) minmax(0, 1fr);
	gap: var(--ns-article-gap);
	padding-bottom: 44px;
}

.ns-article--full {
	grid-template-columns: minmax(0, 1fr);
}

.ns-post-body {
	max-width: var(--ns-body);
	min-width: 0;
}

/* -- Contents rail ----------------------------------------------------- */

.ns-toc {
	position: sticky;
	top: var(--ns-sticky-top);
	border: var(--ns-border) solid var(--ns-ink);
	background: var(--ns-card);
}

.ns-toc-title {
	margin: 0;
	padding: 12px 16px;
	border-bottom: var(--ns-border) solid var(--ns-ink);
	background: var(--ns-geel);
	color: var(--ns-ink);
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-wide);
	text-transform: uppercase;
}

.ns-toc-list {
	margin: 0;
	padding: 8px 0;
	list-style: none;
	counter-reset: none;
}

.ns-toc-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	color: var(--ns-grijs);
	font-size: var(--ns-size-ui);
	font-weight: 600;
	line-height: 1.3;
	transition: color var(--ns-ease);
}

.ns-toc-list .is-sub a {
	padding-left: 30px;
	font-weight: 500;
}

.ns-toc-bullet {
	flex: none;
	width: 8px;
	height: 8px;
	border: 1.5px solid currentColor;
}

.ns-toc-list a:hover {
	color: var(--ns-ink);
}

.ns-toc-list a[aria-current="true"] {
	color: var(--ns-rood);
}

.ns-toc-list a[aria-current="true"] .ns-toc-bullet {
	background: var(--ns-rood);
	border-color: var(--ns-rood);
}

/* -- Featured figure --------------------------------------------------- */

.ns-figure {
	margin: 0 0 26px;
}

.ns-figure img {
	width: 100%;
	border: var(--ns-border) solid var(--ns-ink);
}

.ns-figure figcaption {
	padding: 8px 0 12px;
	border-bottom: 1px solid var(--ns-hairline);
	color: var(--ns-muted);
	font-size: var(--ns-size-label);
	line-height: 1.5;
}

/* =========================================================================
 * 11. Long-form content
 *
 * Scoped to .ns-prose, the wrapper single.php / page.php put around the
 * rendered post content -- NOT to .ns-post-body, which also contains the
 * author box, the tag list and the comments. An h2 is an h2: without the
 * wrapper, "MARIEKE VAN DIJK" in the author box picked up the 3px rule and
 * the 27px uppercase size meant for a section heading in the article.
 * ====================================================================== */

.ns-prose > * + * {
	margin-top: 18px;
}

/* The prose block sits among siblings (figure, tags, author box) in the
 * body column, which supplies its own rhythm. */
.ns-post-body > * + * {
	margin-top: 26px;
}

.ns-prose p {
	font-size: var(--ns-size-body);
	line-height: 1.75;
}

.ns-prose a:not(.ns-btn):not(.ns-tag) {
	color: var(--ns-blauw);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--ns-ease);
}

.ns-prose a:not(.ns-btn):not(.ns-tag):hover {
	color: var(--ns-rood);
}

.ns-prose h2 {
	margin-top: 36px;
	padding-top: 18px;
	border-top: var(--ns-rule) solid var(--ns-ink);
	font-size: var(--ns-size-h2);
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-transform: uppercase;
}

.ns-prose h3 {
	margin-top: 30px;
	font-size: var(--ns-size-h3);
	font-weight: 700;
	line-height: 1.3;
}

.ns-prose h4 {
	margin-top: 24px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: var(--ns-track-caps);
	text-transform: uppercase;
}

.ns-prose :is(h2, h3, h4)[id] {
	scroll-margin-top: var(--ns-anchor-offset, 24px);
}

.ns-prose :is(ul, ol) {
	margin-left: 0;
	padding-left: 22px;
}

.ns-prose li + li {
	margin-top: 8px;
}

.ns-prose ul {
	list-style: none;
	padding-left: 0;
}

.ns-prose ul li {
	position: relative;
	padding-left: 22px;
}

.ns-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	background: var(--ns-ink);
}

.ns-prose ul.is-style-ns-squares li::before {
	background: var(--ns-accent, var(--ns-rood));
}

.ns-prose ul ul {
	margin-top: 8px;
}

.ns-prose blockquote,
.ns-prose .wp-block-quote {
	margin: 28px 0;
	padding: 4px 0 4px 24px;
	border-left: 8px solid var(--ns-rood);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.4;
}

.ns-prose blockquote p {
	font-size: inherit;
	line-height: inherit;
}

.ns-prose blockquote cite {
	display: block;
	margin-top: 10px;
	color: var(--ns-muted);
	font-size: var(--ns-size-ui);
	font-style: normal;
	font-weight: 600;
}

.ns-prose figure {
	margin: 26px 0;
}

.ns-prose figure img {
	width: 100%;
	border: var(--ns-border) solid var(--ns-ink);
}

.ns-prose figcaption {
	padding-top: 8px;
	color: var(--ns-muted);
	font-size: var(--ns-size-label);
	line-height: 1.5;
}

.ns-prose hr,
.ns-prose .wp-block-separator {
	height: 0;
	margin: 32px 0;
	border: 0;
	border-top: var(--ns-rule) solid var(--ns-ink);
}

.ns-prose code,
.ns-prose kbd {
	padding: 2px 6px;
	background: var(--ns-stripe-b);
	font-size: 0.9375em;
}

.ns-prose pre {
	padding: 18px;
	border: var(--ns-border) solid var(--ns-ink);
	background: var(--ns-card);
	overflow-x: auto;
}

/* -- Tables: 3px frame, ink header, 2px black cell gaps ---------------- */

.ns-prose .wp-block-table,
.ns-prose figure.wp-block-table {
	margin: 26px 0;
	overflow-x: auto;
}

.ns-prose table {
	width: 100%;
	border: var(--ns-rule) solid var(--ns-ink);
	/*
	 * separate + border-spacing over an ink ground gives the comp's 2px
	 * black lines between cells without a border on every <td>.
	 */
	border-collapse: separate;
	border-spacing: 2px;
	background: var(--ns-ink);
	font-size: 0.875rem;
}

.ns-prose th {
	padding: 10px 14px;
	background: var(--ns-ink);
	color: var(--ns-on-ink);
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-caps);
	text-align: left;
	text-transform: uppercase;
}

.ns-prose td {
	padding: 12px 14px;
	background: var(--ns-card);
	vertical-align: top;
}

.ns-prose tbody tr:nth-child(odd) td {
	background: var(--ns-paper);
}

.ns-prose tbody tr td:first-child {
	font-weight: 600;
}

/* -- Callout block styles ---------------------------------------------- */

.ns-prose .is-style-ns-goodtoknow,
.ns-prose .is-style-ns-warning {
	display: grid;
	grid-template-columns: 8px minmax(0, 1fr);
	gap: 0;
	margin: 24px 0;
	padding: 0;
	border: var(--ns-border) solid var(--ns-ink);
	background: var(--ns-card);
}

.ns-prose .is-style-ns-goodtoknow::before,
.ns-prose .is-style-ns-warning::before {
	content: "";
	display: block;
	/* A grid column, not a border-left: it has to butt against the frame. */
	background: var(--ns-geel);
}

.ns-prose .is-style-ns-warning::before {
	background: var(--ns-rood);
}

.ns-prose .is-style-ns-goodtoknow > *,
.ns-prose .is-style-ns-warning > * {
	grid-column: 2;
	margin: 0;
	padding-inline: 20px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.ns-prose .is-style-ns-goodtoknow > :first-child,
.ns-prose .is-style-ns-warning > :first-child {
	padding-top: 16px;
}

.ns-prose .is-style-ns-goodtoknow > :last-child,
.ns-prose .is-style-ns-warning > :last-child {
	padding-bottom: 16px;
}

.ns-prose :is(.is-style-ns-goodtoknow, .is-style-ns-warning) > * + * {
	margin-top: 8px;
}

/* The label line: any h3/h4/strong-only paragraph leading the callout. */
.ns-prose :is(.is-style-ns-goodtoknow, .is-style-ns-warning) > :is(h3, h4, h5) {
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-wide);
	text-transform: uppercase;
}

.ns-prose .is-style-ns-panel {
	margin: 24px 0;
	padding: 20px;
	border: var(--ns-rule) solid var(--ns-ink);
	background: var(--ns-card);
}

.ns-prose .is-style-ns-panel > * + * {
	margin-top: 10px;
}

.ns-prose .is-style-ns-pullquote {
	border-left-width: 8px;
}

/* -- FAQ: Rank Math's block, and core/details ------------------------- */

.ns-prose .ns-faq,
.ns-prose .rank-math-block {
	margin: 24px 0;
	border: var(--ns-border) solid var(--ns-ink);
	background: var(--ns-card);
}

.ns-prose .rank-math-list-item {
	border-bottom: var(--ns-border) solid var(--ns-ink);
}

.ns-prose .rank-math-list-item:last-child {
	border-bottom: 0;
}

.ns-prose .rank-math-question {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
	border: 0;
	padding: 0;
}

.ns-prose .rank-math-answer {
	padding: 0 18px 14px;
	color: var(--ns-grijs);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.ns-prose .rank-math-answer > * + * {
	margin-top: 10px;
}

/* Un-enhanced (no JavaScript): question is a plain heading, answer visible. */
.ns-prose .rank-math-question {
	padding: 15px 18px 8px;
}

.ns-faq.is-enhanced .rank-math-question {
	padding: 0;
}

.ns-faq-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 15px 18px;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: background var(--ns-ease);
}

.ns-faq-toggle:hover {
	background: var(--ns-paper);
}

.ns-faq-sign {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}

.ns-faq-sign::before,
.ns-faq-sign::after {
	content: "";
	position: absolute;
	background: var(--ns-rood);
}

.ns-faq-sign::before {
	top: 6px;
	left: 0;
	width: 14px;
	height: 3px;
}

.ns-faq-sign::after {
	top: 0;
	left: 6px;
	width: 3px;
	height: 14px;
	transition: opacity var(--ns-ease);
}

.ns-faq-toggle[aria-expanded="true"] .ns-faq-sign::after {
	opacity: 0;
}

/* core/details styled to match, for FAQs written without Rank Math. */
.ns-prose .wp-block-details.is-style-ns-faq-item {
	margin: 0;
	border-bottom: var(--ns-border) solid var(--ns-ink);
	background: var(--ns-card);
}

.ns-prose .wp-block-details.is-style-ns-faq-item summary {
	padding: 15px 18px;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.ns-prose .wp-block-details.is-style-ns-faq-item summary::-webkit-details-marker {
	display: none;
}

.ns-prose .wp-block-details.is-style-ns-faq-item summary::after {
	content: "+";
	float: right;
	color: var(--ns-rood);
	font-weight: 900;
}

.ns-prose .wp-block-details.is-style-ns-faq-item[open] summary::after {
	content: "\2212";
}

.ns-prose .wp-block-details.is-style-ns-faq-item > :not(summary) {
	padding: 0 18px 14px;
	color: var(--ns-grijs);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* -- Links outside the prose block ------------------------------------- */

.ns-authorbox-name a,
.ns-byline-who a {
	transition: color var(--ns-ease);
}

.ns-authorbox-name a:hover {
	color: var(--ns-rood);
}

.ns-comments a {
	color: var(--ns-blauw);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ns-comments a:hover {
	color: var(--ns-rood);
}

.ns-comments .ns-btn,
.ns-comments .submit {
	text-decoration: none;
}

/* -- Tags and author box ---------------------------------------------- */

.ns-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.ns-authorbox {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	margin-top: 36px;
	padding: 22px;
	border: var(--ns-rule) solid var(--ns-ink);
	background: var(--ns-card);
}

.ns-authorbox-name {
	margin: 0 0 4px;
	font-size: 0.9375rem;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ns-authorbox-role {
	margin-bottom: 6px;
	color: var(--ns-muted);
	font-size: var(--ns-size-ui);
	font-weight: 600;
}

.ns-authorbox-bio {
	color: var(--ns-muted);
	font-size: var(--ns-size-ui);
	line-height: 1.6;
}

/* =========================================================================
 * 12. Related
 * ====================================================================== */

.ns-related {
	padding-block: 28px 40px;
	border-top: var(--ns-rule) solid var(--ns-ink);
}

.ns-cards--compact {
	gap: 24px;
}

/* =========================================================================
 * 13. Newsletter band
 * ====================================================================== */

.ns-news {
	background: var(--ns-geel);
	border-top: var(--ns-rule) solid var(--ns-ink);
}

.ns-news-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px 40px;
	align-items: center;
	padding-block: 32px;
}

.ns-news-title {
	margin: 0 0 6px;
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.5rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ns-news-text {
	color: var(--ns-grijs);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}

.ns-news-form {
	display: flex;
}

.ns-news-input {
	width: 220px;
	max-width: 100%;
	min-height: 48px;
	padding: 13px 16px;
	border: var(--ns-border) solid var(--ns-ink);
	border-right: 0;
	background: var(--ns-paper);
	font-size: 0.875rem;
}

.ns-news-input::placeholder {
	color: var(--ns-muted);
	opacity: 1;
}

.ns-news-form .ns-btn {
	min-height: 48px;
}

/* =========================================================================
 * 14. Footer
 * ====================================================================== */

.ns-footer {
	background: var(--ns-ink);
	color: var(--ns-on-ink);
	padding-top: 44px;
}

.ns-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 32px;
	padding-bottom: 36px;
}

.ns-footer-grid--brand-only {
	grid-template-columns: minmax(0, 1fr);
}

.ns-brand--footer {
	margin-bottom: 14px;
	color: var(--ns-on-ink);
}

.ns-footer-blurb {
	max-width: 34ch;
	color: var(--ns-on-ink-dim);
	font-size: var(--ns-size-ui);
	line-height: 1.6;
}

.ns-footer-heading {
	margin: 0 0 8px;
	color: var(--ns-on-ink);
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-wide);
	text-transform: uppercase;
}

.ns-footer-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-footer-col a {
	display: inline-block;
	padding-block: 4px;
	color: var(--ns-on-ink-dim);
	font-size: var(--ns-size-ui);
	line-height: 1.8;
	transition: color var(--ns-ease);
}

.ns-footer-col a:hover {
	color: var(--ns-on-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ns-footer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding-block: 18px;
	border-top: 1px solid var(--ns-on-ink-rule);
}

.ns-footer-squares {
	display: inline-flex;
	gap: 14px;
}

.ns-footer-note {
	margin-left: auto;
	color: var(--ns-on-ink-faint);
	font-size: var(--ns-size-label);
}

/* =========================================================================
 * 15. Comments, empty states
 * ====================================================================== */

.ns-comments {
	margin-top: 44px;
	padding-top: 28px;
	border-top: var(--ns-rule) solid var(--ns-ink);
}

.ns-comments-title {
	margin-bottom: 18px;
	font-size: var(--ns-size-section);
	text-transform: uppercase;
}

.ns-comment-list,
.ns-comment-list ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-comment-list li {
	padding: 18px 0;
	border-bottom: 1px solid var(--ns-hairline);
}

.ns-comment-list .children {
	margin-top: 18px;
	padding-left: 20px;
	border-left: var(--ns-border) solid var(--ns-ink);
}

.ns-comments .comment-meta {
	margin-bottom: 8px;
	color: var(--ns-muted);
	font-size: var(--ns-size-meta);
	font-weight: 700;
	letter-spacing: var(--ns-track-name);
	text-transform: uppercase;
}

.ns-comments .comment-author img {
	display: inline-block;
	margin-right: 8px;
	vertical-align: middle;
}

.ns-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: 12px 14px;
	border: var(--ns-border) solid var(--ns-ink);
	background: var(--ns-card);
}

.ns-comments .comment-form > p {
	margin-top: 14px;
}

.ns-comments label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--ns-size-label);
	font-weight: 700;
	letter-spacing: var(--ns-track-caps);
	text-transform: uppercase;
}

.ns-comments .submit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 12px 20px;
	border: var(--ns-border) solid var(--ns-rood);
	background: var(--ns-rood);
	color: var(--ns-on-colour);
	font-size: var(--ns-size-ui);
	font-weight: 700;
	letter-spacing: var(--ns-track-caps);
	text-transform: uppercase;
	cursor: pointer;
}

.ns-comments .submit:hover {
	background: var(--ns-ink);
	border-color: var(--ns-ink);
}

.ns-empty {
	max-width: 52ch;
	padding: 32px;
	border: var(--ns-rule) solid var(--ns-ink);
	background: var(--ns-card);
}

.ns-empty h2 {
	margin-bottom: 10px;
	font-size: var(--ns-size-section);
	text-transform: uppercase;
}

.ns-empty p {
	margin-bottom: 18px;
	color: var(--ns-muted);
}

/* =========================================================================
 * 16. Breakpoints — 1200 / 900 / 600, as specified
 * ====================================================================== */

@media (max-width: 1200px) {
	.ns-article {
		--ns-toc: 220px;
		--ns-article-gap: 32px;
	}

	.ns-nav-list {
		gap: 16px;
	}

	.ns-row {
		grid-template-columns: 170px minmax(0, 1fr) auto;
		gap: 20px;
	}
}

@media (max-width: 1000px) {
	.ns-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ns-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ns-archive-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ns-archive-stat {
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 14px;
	}
}

@media (max-width: 900px) {
	/* Navigation collapses to the full-screen overlay. */
	.ns-nav {
		display: none;
	}

	.ns-burger {
		display: inline-flex;
	}

	.ns-masthead-cta {
		display: none;
	}

	/*
	 * The contents rail stops being a rail: sticky positioning inside a
	 * single-column flow just pins a box to the top of the article.
	 */
	.ns-article {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ns-toc {
		position: static;
	}

	.ns-toc-col {
		max-width: var(--ns-body);
	}

	.ns-hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
	}

	.ns-hero-cell--headline {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.ns-hero-cell--block,
	.ns-hero-cell--media {
		min-height: 160px;
	}

	.ns-news-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.ns-card {
		box-shadow: var(--ns-shadow-mobile);
	}

	.ns-card:hover {
		box-shadow: var(--ns-shadow);
	}

	.ns-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.ns-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.ns-hero-cell--block,
	.ns-hero-cell--media {
		min-height: 120px;
	}

	.ns-hero-cell--stat {
		grid-column: span 1;
	}

	/* Rows lose the thumbnail column and stack. */
	.ns-row {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
	}

	.ns-row-media {
		height: 72px;
	}

	.ns-row-meta {
		grid-column: 2;
		text-align: left;
	}

	.ns-byline-meta {
		width: 100%;
		margin-left: 0;
	}

	.ns-news-form {
		width: 100%;
	}

	.ns-news-input {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	.ns-footer-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ns-footer-note {
		width: 100%;
		margin-left: 0;
	}

	.ns-overlay-list a {
		font-size: 1.5rem;
	}

	.ns-authorbox {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Very narrow: the brand wordmark wraps rather than pushing the burger off
 * the masthead. 320px is the floor this theme is checked at.
 */
@media (max-width: 400px) {
	.ns-brand-name {
		font-size: 0.8125rem;
		max-width: 8ch;
	}

	.ns-search {
		display: none;
	}
}