/*
Theme Name: Norge Atlas
Theme URI: https://www.norwaytourism.org/
Author: Norway Tourism
Author URI: https://www.norwaytourism.org/
Description: Norge Atlas is the house theme for norwaytourism.org. Its organising idea is Norway ordered by latitude: a latitude rail runs down the left edge of every page, a Mercator map of the mainland anchors the front page, and every guide carries its own coordinates. The tone is cartographic survey rather than brochure — paper and ink, hairline rules, one survey orange, no rounded corners and no shadows. Built for long, number-heavy reference articles: a verification stamp, an at-a-glance table driven by post meta, a contents rail derived from the article's own headings, a sidebar mini-map that plots the article, and CLS-free ad slots. Schibsted Grotesk and IBM Plex Mono are self-hosted; nothing is fetched from a third party at runtime.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: norge-atlas
Tags: blog, news, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   1. Fonts
   --------------------------------------------------------------------------
   Self-hosted, subset to latin + latin-ext (Norwegian ø/å/æ live in latin;
   latin-ext covers the rest of the Nordic and Sámi diacritics we quote).
   Schibsted Grotesk ships from Google Fonts as ONE variable file for every
   weight — declaring it four times downloads the same 46 KB four times, so it
   is declared once over the 400–700 range.
   ========================================================================== */

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/schibsted-grotesk-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/schibsted-grotesk-var-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-400-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-500-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Tokens
   --------------------------------------------------------------------------
   Three tiers, deliberately.

   IDENTITY tokens (--nt-paper, --nt-ink, --nt-accent) are the brand. They are
   never adjusted for contrast; they are what the design is.

   GRAPHIC tokens (--nt-rule*, --nt-ink-60, --nt-ink-55, --nt-land) are for
   things that are not read as words: hairlines, ticks, map strokes, the
   graticule. Contrast rules do not apply to them, so they keep the exact
   values from the design.

   TEXT tokens (--nt-ink-label, --nt-ink-muted, --nt-accent-text) are for words
   a reader has to read. The design's 55% and 60% inks measure 3.85:1 and
   4.50:1 on paper — one fails WCAG AA outright and the other sits exactly on
   the line. The text tiers are nudged to 62% (4.77:1) and 66% (5.46:1), which
   is a change of a few percent of alpha, invisible next to the comp, and puts
   every string on the page above 4.5:1. Keep the two families separate: if a
   token is painting a line, use the graphic one; if it is painting a word, use
   the text one.
   ========================================================================== */

:root {
	/* Identity */
	--nt-paper: #f3f2ed;
	--nt-ink: #16181a;
	--nt-accent: #ec6f00;        /* oklch(0.68 0.18 50) — graphics only */
	--nt-accent-text: #ba4300;   /* oklch(0.54 0.17 45) — 4.82:1 on paper */

	/* Text tier */
	--nt-ink-strong: rgba(22, 24, 26, 0.8);   /* 8.75:1 — ledes, deks */
	--nt-ink-label: rgba(22, 24, 26, 0.66);   /* 5.46:1 — mono labels */
	--nt-ink-muted: rgba(22, 24, 26, 0.62);   /* 4.77:1 — meta, captions */

	/* Graphic tier */
	--nt-ink-60: rgba(22, 24, 26, 0.6);
	--nt-ink-55: rgba(22, 24, 26, 0.55);
	--nt-rule: rgba(22, 24, 26, 0.15);
	--nt-rule-soft: rgba(22, 24, 26, 0.12);
	--nt-rule-mid: rgba(22, 24, 26, 0.25);
	--nt-land: #e4e3db;
	--nt-photo-bg: #dcdcd3;
	--nt-ad-border: rgba(22, 24, 26, 0.22);

	/* Type */
	--nt-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--nt-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Frame */
	--nt-frame: 1180px;
	--nt-rail: 44px;
	--nt-gutter: 40px;
	--nt-header-h: 64px;
	--nt-sidebar: 300px;
	--nt-col-gap: 60px;
	--nt-hero-map: 500px;

	/* Motion */
	--nt-t: 120ms ease-out;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--nt-paper);
	color: var(--nt-ink);
	font-family: var(--nt-sans);
	font-size: 17.5px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

a:hover,
a:focus {
	color: var(--nt-accent-text);
}

:focus-visible {
	outline: 2px solid var(--nt-ink);
	outline-offset: 2px;
}

button {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--nt-sans);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--nt-rule);
	margin: 28px 0;
}

::selection {
	background: var(--nt-accent);
	color: var(--nt-paper);
}

/* Shared type helpers ----------------------------------------------------- */

.nt-kicker {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nt-accent-text);
}

.nt-meta {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
	font-variant-numeric: tabular-nums;
}

.nt-label {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nt-ink);
}

.nt-num {
	font-family: var(--nt-mono);
	font-size: 0.92em;
	font-variant-numeric: tabular-nums;
}

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

.nt-skip {
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-110%);
	z-index: 100;
	background: var(--nt-ink);
	color: var(--nt-paper);
	font-family: var(--nt-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 18px;
}

.nt-skip:focus {
	transform: translateY(0);
	color: var(--nt-paper);
}

/* ==========================================================================
   4. Frame
   ========================================================================== */

.nt-frame {
	max-width: var(--nt-frame);
	margin: 0 auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.nt-body {
	display: flex;
	flex: 1 0 auto;
	align-items: stretch;
}

.nt-main {
	flex: 1;
	min-width: 0;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.nt-header {
	border-bottom: 1px solid var(--nt-rule);
}

.nt-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--nt-header-h);
	padding: 0 32px;
}

.nt-lockup {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: none;
}

.nt-lockup:hover,
.nt-lockup:focus {
	color: var(--nt-ink);
}

.nt-lockup__mark {
	display: block;
	width: 30px;
	height: 30px;
	flex: none;
}

.nt-lockup__name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nt-lockup__rule {
	width: 1px;
	height: 18px;
	background: var(--nt-rule-mid);
	flex: none;
}

.nt-lockup__domain {
	font-family: var(--nt-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--nt-ink-muted);
	white-space: nowrap;
}

.nt-lockup__img {
	display: block;
	max-height: 40px;
	width: auto;
}

/* Primary navigation ------------------------------------------------------ */

.nt-nav ul {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nt-nav a {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: color var(--nt-t), border-color var(--nt-t);
	white-space: nowrap;
}

.nt-nav a:hover,
.nt-nav a:focus {
	color: var(--nt-accent-text);
}

.nt-nav .current-menu-item > a,
.nt-nav .current-menu-ancestor > a,
.nt-nav .current_page_item > a,
.nt-nav .nt-nav__current > a,
.nt-nav a[aria-current] {
	border-bottom-color: var(--nt-accent);
}

/* Search ------------------------------------------------------------------ */

.nt-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 230px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--nt-rule-mid);
	flex: none;
	transition: border-color var(--nt-t);
}

.nt-search:focus-within {
	border-color: var(--nt-ink);
}

.nt-search__glyph {
	width: 10px;
	height: 10px;
	border: 1.5px solid var(--nt-ink-muted);
	border-radius: 50%;
	flex: none;
}

.nt-search__input {
	border: 0;
	background: none;
	width: 100%;
	min-width: 0;
	padding: 0;
	font-family: var(--nt-mono);
	font-size: 11.5px;
	line-height: 1;
	color: var(--nt-ink);
}

.nt-search__input::placeholder {
	color: var(--nt-ink-muted);
	opacity: 1;
}

.nt-search__input:focus {
	outline: none;
}

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

/* Mobile menu ------------------------------------------------------------- */

.nt-menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 12px;
	background: none;
	border: 1px solid var(--nt-rule-mid);
	font-family: var(--nt-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.nt-menu-toggle__bars {
	display: block;
	width: 12px;
	height: 8px;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

.nt-panel {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--nt-paper);
	padding: 24px 20px 40px;
	overflow-y: auto;
	flex-direction: column;
	gap: 26px;
}

.nt-panel.is-open {
	display: flex;
}

.nt-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--nt-rule);
}

.nt-panel__close {
	background: none;
	border: 1px solid var(--nt-rule-mid);
	height: 34px;
	padding: 0 12px;
	font-family: var(--nt-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.nt-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.nt-panel li {
	border-bottom: 1px solid var(--nt-rule);
}

.nt-panel a {
	display: block;
	padding: 16px 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.nt-panel .nt-search {
	width: 100%;
	height: 44px;
}

/* Without JavaScript the panel can never open, so the toggle is hidden and the
   nav simply wraps under the lockup instead. */

.no-js .nt-menu-toggle,
.no-js .nt-panel {
	display: none !important;
}

/* ==========================================================================
   6. Latitude rail
   ========================================================================== */

/* The rail is sticky rather than stretched. Spread over a 4,000px article the
   fourteen parallels stop reading as a scale and become a sparse ladder; held
   to the viewport it stays an instrument, and at first paint on a short page
   it looks exactly like the comp. Its right rule is drawn on .nt-body instead,
   so the line runs the full height of the column and not just the sticky
   window. */

.nt-body {
	background-image: linear-gradient(to right, var(--nt-rule) 1px, transparent 1px);
	background-position: var(--nt-rail) 0;
	background-repeat: repeat-y;
	background-size: 1px 100%;
}

.nt-rail {
	width: var(--nt-rail);
	flex: none;
	align-self: flex-start;
	position: sticky;
	top: 0;
	/* Sized to the space below the header rather than the whole viewport: at
	   scroll 0 the rail starts under the header, and a full 100vh would push
	   58°N past the fold. */
	height: calc(100vh - var(--nt-header-h));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 26px 0;
	font-family: var(--nt-mono);
	font-size: 9px;
	line-height: 1;
	color: var(--nt-ink-muted);
}

.nt-rail__row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-left: 6px;
	text-decoration: none;
	color: inherit;
	transition: color var(--nt-t);
}

.nt-rail__tick {
	display: block;
	width: 8px;
	height: 1px;
	background: currentColor;
	flex: none;
	transition: width var(--nt-t), height var(--nt-t);
}

.nt-rail__row:hover,
.nt-rail__row:focus {
	color: var(--nt-ink);
}

.nt-rail__row.is-active {
	color: var(--nt-accent-text);
	font-weight: 500;
}

.nt-rail__row.is-active .nt-rail__tick {
	width: 14px;
	height: 2px;
}

/* Horizontal strip that replaces the rail below 900px --------------------- */

.nt-latstrip {
	display: none;
	height: 32px;
	border-bottom: 1px solid var(--nt-rule);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.nt-latstrip::-webkit-scrollbar {
	display: none;
}

.nt-latstrip__in {
	display: flex;
	align-items: stretch;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	min-width: max-content;
	font-family: var(--nt-mono);
	font-size: 9.5px;
	line-height: 1;
	color: var(--nt-ink-muted);
}

.nt-latstrip__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 32px;
	padding: 0 6px;
	text-decoration: none;
	color: inherit;
	transition: color var(--nt-t);
}

.nt-latstrip__tick {
	display: block;
	width: 1px;
	height: 6px;
	background: currentColor;
}

.nt-latstrip__row:hover,
.nt-latstrip__row:focus {
	color: var(--nt-ink);
}

.nt-latstrip__row.is-active {
	color: var(--nt-accent-text);
	font-weight: 500;
}

.nt-latstrip__row.is-active .nt-latstrip__tick {
	width: 2px;
	height: 10px;
}

/* ==========================================================================
   7. Map
   ========================================================================== */

.nt-map {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--nt-mono);
	overflow: visible;
}

.nt-map__parallel {
	stroke: var(--nt-rule-mid);
	stroke-width: 0.7;
	stroke-dasharray: 2 4;
	fill: none;
}

.nt-map__parallel-label {
	font-size: 9.5px;
	fill: var(--nt-ink-60);
	text-anchor: end;
}

.nt-map__arctic {
	stroke: var(--nt-accent);
	stroke-width: 1;
	fill: none;
}

.nt-map__arctic-label {
	font-size: 9.5px;
	fill: var(--nt-accent-text);
	text-anchor: end;
	font-weight: 500;
}

.nt-map__land {
	fill: var(--nt-land);
	stroke: var(--nt-ink);
	stroke-width: 0.9;
	stroke-linejoin: round;
}

.nt-map__point circle {
	fill: var(--nt-ink);
	transition: r var(--nt-t);
}

.nt-map__point text {
	font-size: 10px;
	fill: var(--nt-ink);
	transition: font-weight var(--nt-t);
}

.nt-map__point {
	cursor: pointer;
}

/* A drawn point is 6px across, which no finger can hit. Each point carries an
   invisible r=10 disc so the hit area is about 22px at the front-page scale,
   without changing anything the reader sees. */

.nt-map__point .nt-map__hit,
.nt-map__point--highlight circle.nt-map__hit {
	fill: transparent;
	stroke: none;
	r: 12;
}

/* The highlight carries no label, so its hit area is the disc and nothing
   else; a couple of units more brings it to the same size as a labelled
   point's. */

.nt-map__point--highlight .nt-map__hit {
	r: 14;
}

/* Chrome underlines an <a> inside SVG. The map is a drawing, not prose. */

.nt-map a,
.nt-map a text {
	text-decoration: none;
}

.nt-map__point:hover circle,
.nt-map__point:focus circle {
	r: 4.5;
}

.nt-map__point:hover text,
.nt-map__point:focus text {
	font-weight: 500;
}

.nt-map__point:focus {
	outline: none;
}

.nt-map__point:focus circle {
	stroke: var(--nt-ink);
	stroke-width: 1;
	paint-order: stroke;
}

.nt-map__point--highlight circle {
	fill: var(--nt-accent);
}

/* Scoped through the point class so it outranks the highlight fill above;
   without this the r=14 locator ring is painted as a solid orange disc. */

.nt-map__point .nt-map__ring,
.nt-map__point--highlight circle.nt-map__ring {
	fill: none;
	stroke: var(--nt-accent);
	stroke-width: 1.2;
}

.nt-map__ref circle {
	fill: var(--nt-ink);
}

.nt-map__ref text {
	font-size: 10px;
	fill: var(--nt-ink-muted);
}

/* The mini-map draws a 560-unit viewBox at 300px, so everything inside it is
   at 54%. Type set in viewBox units would land at about 6px on screen, which
   is not a readable label — so the mini variant sets its own sizes, chosen to
   come out at the same optical size as the front-page map's. */

.nt-map--mini .nt-map__land {
	stroke-width: 1.4;
}

.nt-map--mini .nt-map__arctic {
	stroke-width: 1.4;
	opacity: 0.6;
}

.nt-map--mini .nt-map__point text {
	font-size: 20px;
}

.nt-map--mini .nt-map__ref text {
	font-size: 18px;
}

.nt-map--mini .nt-map__ring {
	stroke-width: 2;
}

.nt-mapfig {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nt-mapfig__cap {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--nt-mono);
	font-size: 9.5px;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
}

/* ==========================================================================
   8. Front page
   ========================================================================== */

.nt-hero {
	display: grid;
	grid-template-columns: 1fr var(--nt-hero-map);
	gap: var(--nt-gutter);
	padding: 44px var(--nt-gutter) 36px;
	align-items: start;
}

.nt-hero__text {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-top: 12px;
	min-width: 0;
}

.nt-hero__kicker {
	font-family: var(--nt-mono);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nt-accent-text);
}

.nt-hero__title {
	font-size: 66px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.nt-hero__lede {
	font-size: 18px;
	line-height: 1.5;
	max-width: 480px;
	color: var(--nt-ink-strong);
}

.nt-hero__cta {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.nt-hero__map {
	min-width: 0;
}

/* Buttons ----------------------------------------------------------------- */

.nt-btn {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 22px;
	background: var(--nt-ink);
	color: var(--nt-paper);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--nt-t);
}

.nt-btn:hover,
.nt-btn:focus {
	background: var(--nt-accent-text);
	color: var(--nt-paper);
}

.nt-btn:focus-visible {
	outline: 2px solid var(--nt-ink);
	outline-offset: 2px;
	box-shadow: inset 0 0 0 2px var(--nt-paper);
}

.nt-textlink {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border-bottom: 1px solid var(--nt-ink);
	padding-bottom: 2px;
	transition: color var(--nt-t), border-color var(--nt-t);
}

.nt-textlink:hover,
.nt-textlink:focus {
	border-bottom-color: var(--nt-accent-text);
}

/* Hero stats -------------------------------------------------------------- */

.nt-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--nt-rule);
	margin-top: 10px;
}

.nt-stat {
	padding: 16px 16px 0 0;
	border-right: 1px solid var(--nt-rule);
	min-width: 0;
}

.nt-stat + .nt-stat {
	padding-left: 16px;
}

.nt-stat:last-child {
	border-right: 0;
	padding-right: 0;
}

.nt-stat__num {
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.nt-stat__label {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nt-ink-label);
	margin-top: 4px;
}

/* Sections ---------------------------------------------------------------- */

.nt-section {
	padding: 0 var(--nt-gutter) 44px;
}

.nt-sechead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	border-bottom: 1px solid var(--nt-ink);
	padding-bottom: 10px;
	margin-bottom: 28px;
}

.nt-sechead__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.nt-sechead__meta {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nt-ink-label);
	text-decoration: none;
	white-space: nowrap;
	flex: none;
}

a.nt-sechead__meta:hover,
a.nt-sechead__meta:focus {
	color: var(--nt-accent-text);
}

.nt-featured {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: var(--nt-gutter);
	align-items: start;
}

.nt-featured__list {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.nt-grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ==========================================================================
   9. Article cards
   ========================================================================== */

.nt-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.nt-card__media {
	position: relative;
	background: var(--nt-photo-bg);
	overflow: hidden;
}

.nt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nt-card__media--placeholder {
	background:
		repeating-linear-gradient(135deg, rgba(22, 24, 26, 0.05) 0 6px, transparent 6px 14px),
		var(--nt-photo-bg);
}

/* The credit sits on the photograph, and a photograph can be any tone. A
   paper-coloured wash along the bottom edge keeps the line readable over a
   dark headland without tinting the image or adding a shadow — the credit is
   a licence requirement, so "usually legible" is not good enough. */

.nt-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 46px;
	background: linear-gradient(to top, var(--nt-paper), rgba(243, 242, 237, 0));
	pointer-events: none;
}

.nt-card__media--placeholder::after,
.nt-card__media:not(:has(img))::after {
	display: none;
}

.nt-card__credit {
	position: absolute;
	left: 12px;
	bottom: 10px;
	right: 12px;
	z-index: 1;
	font-family: var(--nt-mono);
	font-size: 9.5px;
	line-height: 1.3;
	letter-spacing: 0.05em;
	color: var(--nt-ink-strong);
	pointer-events: none;
}

.nt-card__kicker {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nt-accent-text);
}

.nt-card__title {
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.nt-card__title a {
	text-decoration: none;
	transition: color var(--nt-t);
}

.nt-card__dek {
	font-size: 16px;
	line-height: 1.55;
	color: var(--nt-ink-strong);
}

.nt-card__meta {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* Lead -------------------------------------------------------------------- */

.nt-card--lead {
	gap: 16px;
}

.nt-card--lead .nt-card__media {
	aspect-ratio: 16 / 10;
}

.nt-card--lead .nt-card__title {
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.nt-card--lead .nt-card__dek {
	max-width: 600px;
}

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

.nt-card--list {
	gap: 8px;
	padding: 18px 0;
	border-bottom: 1px solid var(--nt-rule);
}

.nt-card--list:first-child {
	padding-top: 0;
}

.nt-card--list:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.nt-card--list .nt-card__title {
	font-size: 18px;
}

.nt-card--list .nt-card__kicker,
.nt-card--list .nt-card__meta {
	font-size: 10px;
}

/* Grid -------------------------------------------------------------------- */

.nt-card--grid {
	gap: 12px;
}

.nt-card--grid .nt-card__media {
	aspect-ratio: 4 / 3;
}

.nt-card--grid .nt-card__credit {
	left: 10px;
	bottom: 8px;
}

.nt-card--grid .nt-card__title {
	font-size: 19px;
}

.nt-card--grid .nt-card__kicker {
	font-size: 10px;
}

/* ==========================================================================
   10. Single article
   ========================================================================== */

.nt-main--article {
	padding: 0 var(--nt-gutter) 48px;
}

.nt-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding-top: 22px;
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
}

.nt-crumbs a {
	text-decoration: none;
}

.nt-crumbs__current {
	color: var(--nt-ink);
}

.nt-crumbs .separator,
.nt-crumbs__sep {
	color: var(--nt-ink-muted);
}

.nt-titleblock {
	display: grid;
	grid-template-columns: 1fr var(--nt-sidebar);
	gap: var(--nt-col-gap);
	align-items: end;
	padding: 30px 0 34px;
	border-bottom: 1px solid var(--nt-rule);
}

.nt-titleblock--wide {
	grid-template-columns: 1fr;
}

.nt-titleblock__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.nt-titleblock__kicker {
	font-family: var(--nt-mono);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nt-accent-text);
}

.nt-titleblock__title {
	font-size: 50px;
	line-height: 1.04;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.nt-titleblock__dek {
	font-size: 19px;
	line-height: 1.5;
	color: var(--nt-ink-strong);
	max-width: 640px;
}

/* Verification stamp ------------------------------------------------------ */

.nt-metablock {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--nt-mono);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nt-ink-strong);
	border-left: 1px solid var(--nt-rule);
	padding-left: 20px;
	font-variant-numeric: tabular-nums;
}

.nt-metablock__row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.nt-metablock__label {
	color: var(--nt-ink-label);
	flex: none;
}

.nt-metablock__value {
	text-align: right;
}

.nt-metablock__row--verified .nt-metablock__value {
	color: var(--nt-ink);
	font-weight: 500;
}

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

.nt-figure {
	margin: 0;
	padding-top: 34px;
}

.nt-figure__frame {
	background: var(--nt-photo-bg);
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

.nt-figure__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nt-figure__cap {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-top: 8px;
	font-family: var(--nt-mono);
	font-size: 11px;
	line-height: 1.4;
	color: var(--nt-ink-muted);
}

.nt-figure__cap a {
	color: inherit;
}

/* Body grid --------------------------------------------------------------- */

.nt-layout {
	display: grid;
	grid-template-columns: 1fr var(--nt-sidebar);
	gap: var(--nt-col-gap);
	padding-top: 40px;
	align-items: start;
}

.nt-layout--wide {
	grid-template-columns: 1fr;
}

.nt-article {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.nt-page-body {
	max-width: 760px;
	margin: 0 auto;
}

/* An article with nothing to put in the sidebar still needs a reading
   measure; the full column is 1,050px wide, which nobody can read. */

.nt-article--measured {
	max-width: 760px;
}

/* At a glance ------------------------------------------------------------- */

.nt-glance {
	border-top: 2px solid var(--nt-ink);
}

.nt-glance__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0 10px;
	border-bottom: 1px solid var(--nt-rule);
}

.nt-glance__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.nt-glance__note {
	font-family: var(--nt-mono);
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
}

.nt-glance__grid {
	display: grid;
	grid-template-columns: 140px 1fr;
	font-size: 15px;
	line-height: 1.45;
}

.nt-glance__label {
	font-family: var(--nt-mono);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nt-ink-label);
	padding: 14px 12px 11px 0;
	border-bottom: 1px solid var(--nt-rule-soft);
}

.nt-glance__value {
	padding: 11px 0;
	border-bottom: 1px solid var(--nt-rule-soft);
}

.nt-glance__row--last .nt-glance__label,
.nt-glance__row--last .nt-glance__value {
	border-bottom: 0;
}

.nt-glance__value--verdict {
	font-weight: 500;
}

/* Contents / sidebar ------------------------------------------------------ */

.nt-sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
	position: sticky;
	top: 20px;
	min-width: 0;
}

.nt-sidebox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--nt-rule);
	padding-top: 12px;
}

.nt-sidebox--strong {
	border-top: 2px solid var(--nt-ink);
	gap: 8px;
}

.nt-sidebox__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.nt-sidebox__label {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nt-sidebox__coords {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.3;
	color: var(--nt-accent-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.nt-sidebox__note {
	font-family: var(--nt-mono);
	font-size: 10px;
	line-height: 1.4;
	color: var(--nt-ink-muted);
}

.nt-toc {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.35;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nt-toc a {
	text-decoration: none;
	transition: color var(--nt-t);
}

.nt-toc a.is-active {
	color: var(--nt-accent-text);
	font-weight: 500;
}

.nt-toc__l3 {
	padding-left: 14px;
	color: var(--nt-ink-muted);
}

.nt-related {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nt-related__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nt-related__kicker {
	font-family: var(--nt-mono);
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nt-accent-text);
}

.nt-related__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

/* Previous / next --------------------------------------------------------- */

.nt-adjacent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nt-gutter);
	border-top: 2px solid var(--nt-ink);
	margin-top: 48px;
	padding-top: 12px;
}

.nt-adjacent__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.nt-adjacent__item--next {
	text-align: right;
}

.nt-adjacent__dir {
	font-family: var(--nt-mono);
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
}

.nt-adjacent__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-decoration: none;
}

/* Closing note ------------------------------------------------------------ */

.nt-endnote {
	font-size: 14px;
	line-height: 1.55;
	color: var(--nt-ink-muted);
	font-style: italic;
	border-top: 1px solid var(--nt-rule);
	padding-top: 16px;
}

/* ==========================================================================
   11. Article content (the_content output)
   ========================================================================== */

.nt-content > * {
	margin-top: 28px;
	margin-bottom: 0;
}

.nt-content > *:first-child {
	margin-top: 0;
}

.nt-content p {
	font-size: 17.5px;
	line-height: 1.6;
}

.nt-content h2 {
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-top: 40px;
	scroll-margin-top: 24px;
}

.nt-content h3 {
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-top: 32px;
	scroll-margin-top: 24px;
}

.nt-content h4 {
	font-size: 17px;
	margin-top: 28px;
	scroll-margin-top: 24px;
}

.nt-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.nt-content ul,
.nt-content ol {
	padding-left: 22px;
	font-size: 17.5px;
	line-height: 1.6;
}

.nt-content li + li {
	margin-top: 8px;
}

.nt-content li::marker {
	color: var(--nt-ink-muted);
}

.nt-content strong {
	font-weight: 600;
}

.nt-content blockquote {
	margin: 0;
	border-left: 2px solid var(--nt-ink);
	padding-left: 20px;
	font-size: 19px;
	line-height: 1.5;
	font-style: normal;
}

.nt-content blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--nt-mono);
	font-size: 11px;
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
}

.nt-content figure {
	margin: 28px 0 0;
}

.nt-content figure img {
	display: block;
	width: 100%;
	background: var(--nt-photo-bg);
}

.nt-content figcaption {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 8px;
	font-family: var(--nt-mono);
	font-size: 11px;
	line-height: 1.4;
	color: var(--nt-ink-muted);
	text-align: left;
}

.nt-content .wp-block-image.aligncenter figcaption,
.nt-content .wp-block-image figcaption {
	text-align: left;
}

/* Tables ------------------------------------------------------------------ */

.nt-tablewrap {
	border-top: 2px solid var(--nt-ink);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.nt-content table,
.nt-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.nt-tablewrap table {
	min-width: 520px;
}

.nt-content .wp-block-table {
	overflow-x: visible;
}

.nt-content th {
	font-family: var(--nt-mono);
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nt-ink-label);
	text-align: left;
	padding: 12px 16px 8px 0;
	border: 0;
	border-bottom: 1px solid var(--nt-rule);
	vertical-align: bottom;
}

.nt-content td {
	padding: 12px 16px 12px 0;
	border: 0;
	border-bottom: 1px solid var(--nt-rule-soft);
	vertical-align: top;
}

.nt-content tr > *:last-child {
	padding-right: 0;
}

.nt-content tbody td:first-child {
	font-weight: 500;
}

.nt-content table figcaption,
.nt-content .wp-block-table figcaption {
	display: block;
	font-family: var(--nt-mono);
	font-size: 10.5px;
	color: var(--nt-ink-muted);
	padding-top: 8px;
	text-align: left;
}

/* FAQ --------------------------------------------------------------------- */

.nt-faq {
	border-top: 2px solid var(--nt-ink);
}

.nt-faq__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0 6px;
}

.nt-faq__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.nt-faq__note {
	font-family: var(--nt-mono);
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
}

.nt-content details,
.nt-faq details {
	border-bottom: 1px solid var(--nt-rule-soft);
	margin-top: 0;
}

.nt-content summary,
.nt-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.nt-content summary::-webkit-details-marker,
.nt-faq summary::-webkit-details-marker {
	display: none;
}

.nt-content summary::after,
.nt-faq summary::after {
	content: "+";
	font-family: var(--nt-mono);
	font-size: 18px;
	line-height: 1;
	color: var(--nt-ink-muted);
	flex: none;
	transition: transform var(--nt-t);
}

.nt-content details[open] summary::after,
.nt-faq details[open] summary::after {
	transform: rotate(45deg);
}

.nt-content details > *:not(summary),
.nt-faq details > *:not(summary) {
	font-size: 16px;
	line-height: 1.55;
	color: var(--nt-ink-strong);
	margin: 0 0 18px;
}

/* Rank Math FAQ block ----------------------------------------------------- */

.nt-content .rank-math-list-item {
	border-bottom: 1px solid var(--nt-rule-soft);
	padding: 16px 0;
	margin: 0;
}

.nt-content .rank-math-question {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

.nt-content .rank-math-answer {
	font-size: 16px;
	line-height: 1.55;
	color: var(--nt-ink-strong);
	margin-top: 8px;
}

.nt-content .rank-math-answer > *:first-child {
	margin-top: 0;
}

/* Rank Math breadcrumbs --------------------------------------------------- */

.rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-family: var(--nt-mono);
	font-size: 10.5px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
}

.rank-math-breadcrumb a {
	text-decoration: none;
}

.rank-math-breadcrumb .last {
	color: var(--nt-ink);
}

/* ==========================================================================
   12. Ad slots
   ========================================================================== */

.nt-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.nt-ad--reserved {
	border: 1px dashed var(--nt-ad-border);
}

.nt-ad__label {
	font-family: var(--nt-mono);
	font-size: 9.5px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nt-ink-muted);
}

.nt-ad--leaderboard {
	margin: 0 var(--nt-gutter) 40px;
	min-height: 90px;
}

.nt-ad--leaderboard .nt-ad__inner {
	width: 100%;
	max-width: 728px;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nt-ad--incontent {
	margin: 28px 0 0;
	min-height: 280px;
}

.nt-ad--incontent .nt-ad__inner {
	width: 100%;
	max-width: 336px;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nt-ad--sidebar {
	min-height: 250px;
}

.nt-ad--sidebar .nt-ad__inner {
	width: 100%;
	max-width: 300px;
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nt-ad ins.adsbygoogle {
	display: block;
	width: 100%;
}

/* ==========================================================================
   13. Archives, search, 404
   ========================================================================== */

.nt-archive-head {
	padding: 30px 0 34px;
	border-bottom: 1px solid var(--nt-rule);
	display: grid;
	grid-template-columns: 1fr var(--nt-sidebar);
	gap: var(--nt-col-gap);
	align-items: end;
}

.nt-archive-head--wide {
	grid-template-columns: 1fr;
}

.nt-archive-body {
	padding-top: 40px;
}

.nt-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 44px;
	padding-top: 16px;
	border-top: 1px solid var(--nt-rule);
	font-family: var(--nt-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.nt-pagination .page-numbers {
	text-decoration: none;
	padding: 4px 8px;
	border: 1px solid transparent;
	color: var(--nt-ink-muted);
}

.nt-pagination .page-numbers:hover,
.nt-pagination .page-numbers:focus {
	color: var(--nt-accent-text);
}

.nt-pagination .page-numbers.current {
	color: var(--nt-ink);
	border-color: var(--nt-rule-mid);
}

.nt-notfound {
	padding: 80px 0 100px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	max-width: 560px;
}

.nt-notfound__title {
	font-size: 66px;
	line-height: 1;
	letter-spacing: -0.025em;
}

.nt-404-map {
	max-width: 420px;
	margin-top: 20px;
}

.nt-search-again {
	max-width: 320px;
	margin-top: 28px;
}

.nt-emptylist {
	padding: 40px 0 60px;
	font-size: 19px;
	line-height: 1.5;
	color: var(--nt-ink-strong);
	max-width: 640px;
}

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

.nt-footer {
	border-top: 1px solid var(--nt-rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 18px var(--nt-gutter) 18px calc(var(--nt-rail) + var(--nt-gutter));
	font-family: var(--nt-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--nt-ink-muted);
}

.nt-footer__links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nt-footer a {
	text-decoration: none;
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 1179px) {
	:root {
		--nt-hero-map: 420px;
		--nt-sidebar: 280px;
		--nt-col-gap: 40px;
	}

	.nt-hero__title {
		font-size: 56px;
	}

	.nt-titleblock__title {
		font-size: 44px;
	}

	.nt-featured {
		grid-template-columns: 1.2fr 1fr;
	}

	.nt-notfound__title {
		font-size: 56px;
	}
}

@media (max-width: 899px) {
	:root {
		--nt-gutter: 28px;
	}

	.nt-rail {
		display: none;
	}

	/* The map is drawn smaller here, so its hit discs have to grow to keep the
	   same physical target. 16 units still leaves clear air between Bodø and
	   Lofoten, the closest pair on the map. */
	.nt-map__point .nt-map__hit,
	.nt-map__point--highlight circle.nt-map__hit {
		r: 16;
	}

	.nt-body {
		background-image: none;
	}

	.nt-latstrip {
		display: block;
	}

	.nt-nav,
	.nt-header .nt-search {
		display: none;
	}

	.nt-menu-toggle {
		display: inline-flex;
	}

	.nt-header__in {
		padding: 0 20px;
	}

	.no-js .nt-nav {
		display: block;
		width: 100%;
	}

	.no-js .nt-nav ul {
		flex-wrap: wrap;
		gap: 16px 20px;
	}

	.no-js .nt-header__in {
		flex-wrap: wrap;
		height: auto;
		padding: 14px 20px;
		gap: 14px;
	}

	.nt-hero {
		grid-template-columns: 1fr;
		padding: 32px var(--nt-gutter) 32px;
		gap: 32px;
	}

	.nt-hero__text {
		padding-top: 0;
	}

	.nt-hero__map {
		max-width: 520px;
		width: 100%;
		margin: 0 auto;
	}

	.nt-featured {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.nt-grid3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.nt-titleblock,
	.nt-archive-head {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.nt-metablock {
		border-left: 0;
		border-top: 1px solid var(--nt-rule);
		padding-left: 0;
		padding-top: 16px;
	}

	.nt-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.nt-sidebar {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		align-items: start;
	}

	.nt-sidebar .nt-sidebox--toc,
	.nt-sidebar .nt-ad--sidebar {
		display: none;
	}

	.nt-footer {
		padding-left: var(--nt-gutter);
	}
}

@media (max-width: 639px) {
	:root {
		--nt-gutter: 20px;
	}

	body {
		font-size: 17px;
	}

	.nt-header__in {
		gap: 12px;
	}

	.nt-lockup__rule,
	.nt-lockup__domain {
		display: none;
	}

	.nt-hero__title,
	.nt-notfound__title {
		font-size: 44px;
	}

	.nt-titleblock__title {
		font-size: 36px;
	}

	.nt-hero__lede {
		font-size: 17px;
	}

	.nt-titleblock__dek {
		font-size: 17.5px;
	}

	.nt-content p,
	.nt-content ul,
	.nt-content ol {
		font-size: 17px;
	}

	.nt-content h2 {
		font-size: 24px;
	}

	.nt-grid3 {
		grid-template-columns: 1fr;
	}

	.nt-sidebar {
		grid-template-columns: 1fr;
	}

	.nt-card--lead .nt-card__title {
		font-size: 26px;
	}

	.nt-stats {
		grid-template-columns: 1fr;
	}

	.nt-stat {
		border-right: 0;
		border-bottom: 1px solid var(--nt-rule);
		padding: 12px 0;
	}

	.nt-stat + .nt-stat {
		padding-left: 0;
	}

	.nt-stat:last-child {
		border-bottom: 0;
	}

	.nt-glance__grid {
		grid-template-columns: 1fr;
	}

	.nt-glance__label {
		padding: 12px 0 0;
		border-bottom: 0;
	}

	.nt-glance__value {
		padding: 4px 0 12px;
	}

	.nt-figure__frame {
		aspect-ratio: 3 / 2;
	}

	.nt-figure__cap,
	.nt-mapfig__cap {
		flex-direction: column;
		gap: 4px;
	}

	.nt-adjacent {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.nt-adjacent__item--next {
		text-align: left;
	}

	.nt-ad--leaderboard {
		min-height: 100px;
	}

	.nt-ad--leaderboard .nt-ad__inner {
		max-width: 320px;
		min-height: 100px;
	}

	.nt-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* ==========================================================================
   16. Motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.nt-rail,
	.nt-latstrip,
	.nt-search,
	.nt-menu-toggle,
	.nt-panel,
	.nt-ad,
	.nt-sidebox--toc,
	.nt-adjacent,
	.nt-skip {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}

	.nt-layout,
	.nt-titleblock {
		grid-template-columns: 1fr;
		gap: 18pt;
	}

	.nt-sidebar {
		position: static;
	}

	.nt-titleblock__title {
		font-size: 24pt;
	}

	.nt-content a::after {
		content: " (" attr(href) ")";
		font-family: var(--nt-mono);
		font-size: 8pt;
		word-break: break-all;
	}
}