/* =============================================================
   ARNARSKÓLI — main.css
   01 Tokens · 02 Fonts · 03 Reset & base · 04 Layout
   05 Components · 06 Site chrome · 07 Mobile navigation · 08 Utilities
   ============================================================= */

/* =============================================================
   01. TOKENS
   ============================================================= */
:root {
	--hue-accent: 20;
	--hue-sage: 150;
	--hue-gold: 85;
	--hue-teal: 200;
	--hue-plum: 340;

	/* Accent — warm terracotta. */
	--accent: oklch( 75% .09 var(--hue-accent) );
	--accent-dark: oklch( 50% .1 var(--hue-accent) );
	--accent-hover: oklch( 42% .1 var(--hue-accent) );
	--accent-soft: oklch( 95% .025 var(--hue-accent) );

	/* Sage. */
	--sage: oklch( 78% .07 var(--hue-sage) );
	--sage-text: oklch( 38% .06 var(--hue-sage) );
	--sage-dark: oklch( 35% .05 var(--hue-sage) );
	--sage-link: oklch( 45% .08 var(--hue-sage) );
	--sage-soft: oklch( 95% .02 var(--hue-sage) );

	/* Gold. */
	--gold: oklch( 80% .1 var(--hue-gold) );
	--gold-dark: oklch( 45% .08 var(--hue-gold) );
	--gold-darker: oklch( 32% .07 var(--hue-gold) );
	--gold-link: oklch( 50% .1 var(--hue-gold) );
	--gold-soft: oklch( 95% .035 var(--hue-gold) );

	/* Teal — values from the design source; -text aliases -darker. */
	--teal: oklch( 76% .09 var(--hue-teal) );
	--teal-dark: oklch( 45% .09 var(--hue-teal) );
	--teal-darker: oklch( 32% .08 var(--hue-teal) );
	--teal-text: var(--teal-darker);
	--teal-link: oklch( 48% .09 var(--hue-teal) );
	--teal-soft: oklch( 95% .025 var(--hue-teal) );

	/* Plum — values from the design source; -text aliases -darker. */
	--plum: oklch( 74% .11 var(--hue-plum) );
	--plum-dark: oklch( 46% .1 var(--hue-plum) );
	--plum-darker: oklch( 34% .09 var(--hue-plum) );
	--plum-text: var(--plum-darker);
	--plum-link: oklch( 50% .1 var(--hue-plum) );
	--plum-soft: oklch( 95% .03 var(--hue-plum) );

	/* Surfaces and ink. */
	--color-bg: #FBF7EF;
	--color-surface: #fff;
	--color-ink: #4A3B2A;
	--color-ink-2: #6b5c48;
	--color-ink-3: #8a7a63;
	--alt-bg: oklch( 95% .015 var(--hue-gold) );
	--footer-bg: oklch( 93% .015 var(--hue-gold) );
	--panel-dark: oklch( 30% .035 var(--hue-accent) );
	--panel-dark-text: oklch( 90% .02 var(--hue-accent) );
	--hairline: rgba( 74, 59, 42, .08 );
	--rule: rgba( 74, 59, 42, .1 );

	/* Feedback. */
	--error: #b3432f;
	--error-soft: #FCEAEA;
	--error-text: #8a2f1c;

	/* Type families. */
	--font-display: 'Baloo 2', system-ui, sans-serif;
	--font-body: 'Nunito', system-ui, sans-serif;

	/* Measure. */
	--width-site: 1240px;
	--gutter: 40px;
	--width-content: 780px;

	/* Radii. */
	--radius-pill: 999px;
	--radius-32: 32px;
	--radius-28: 28px;
	--radius-24: 24px;
	--radius-22: 22px;
	--radius-20: 20px;
	--radius-18: 18px;
	--radius-16: 16px;
	--radius-14: 14px;
	--radius-12: 12px;
	--radius-10: 10px;

	/* Signature blob mask. */
	--blob: 45% 55% 60% 40%/55% 45% 60% 40%;

	/* Spacing scale. */
	--space-3xs: 4px;
	--space-2xs: 6px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 44px;
	--space-3xl: 64px;
	--space-4xl: 80px;
	--space-5xl: 100px;

	/* Font sizes. */
	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 14px;
	--fs-md: 15px;
	--fs-lg: 17px;
	--fs-xl: 19px;
	--fs-2xl: 22px;
	--fs-3xl: 26px;
	--fs-4xl: 30px;
	--fs-5xl: 38px;
	--fs-6xl: 50px;

	/* Line heights. */
	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-body: 1.6;
	--lh-loose: 1.75;
}

/* =============================================================
   02. FONTS
   ============================================================= */
/* Self-hosted webfonts — no requests to fonts.googleapis.com / fonts.gstatic.com. */
/* Baloo 2 & Nunito, SIL Open Font License 1.1 — see assets/fonts/LICENSE.txt. */

/* baloo-2 600 — latin-ext */
@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/baloo2-600-latin-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;
}

/* baloo-2 600 — latin */
@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/baloo2-600-latin.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;
}

/* baloo-2 700 — latin-ext */
@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/baloo2-700-latin-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;
}

/* baloo-2 700 — latin */
@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/baloo2-700-latin.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;
}

/* nunito 400 — latin-ext */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/nunito-400-latin-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;
}

/* nunito 400 — latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/nunito-400-latin.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;
}

/* nunito 500 — latin-ext */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/nunito-500-latin-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;
}

/* nunito 500 — latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/nunito-500-latin.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;
}

/* nunito 600 — latin-ext */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/nunito-600-latin-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;
}

/* nunito 600 — latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/nunito-600-latin.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;
}

/* nunito 700 — latin-ext */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/nunito-700-latin-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;
}

/* nunito 700 — latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/nunito-700-latin.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;
}

/* =============================================================
   03. RESET & BASE
   ============================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Table of contents links glide to their section rather than teleporting. The
   targets carry their own scroll-margin-top (.doc-section, .prose--numbered >
   h2) so the heading clears the fixed mobile header on arrival. */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-sm);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-tight);
	text-wrap: balance;
}

h1 { font-size: clamp( var(--fs-4xl), 1.4rem + 2.2vw, var(--fs-6xl) ); }
h2 { font-size: clamp( var(--fs-3xl), 1.3rem + 1.2vw, var(--fs-5xl) ); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }

h6 {
	font-size: var(--fs-base);
	letter-spacing: .04em;
	text-transform: uppercase;
}

p,
ul,
ol,
figure,
blockquote,
pre,
table {
	margin: 0 0 var(--space-md);
}

a {
	color: var(--accent-dark);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--accent-hover);
	text-decoration: underline;
	text-underline-offset: .15em;
}

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

hr {
	height: 0;
	margin: var(--space-xl) 0;
	border: 0;
	border-top: 1px solid var(--rule);
}

:focus-visible {
	outline: 2px solid var(--accent-dark);
	outline-offset: 2px;
	border-radius: var(--radius-10);
}

/* Focus ring on dark surfaces.
   --accent-dark measures 2.19:1 against --panel-dark, under the 3:1 that
   WCAG 2.4.11 / 1.4.11 require of a focus indicator. `outline-offset` does
   not rescue it, because the offset lands on more dark surface. Keyboard
   users are exactly the people who depend on this ring, so the dark panels
   get a light one instead. */
.panel-dark :focus-visible,
.section--dark :focus-visible,
.panel-dark:focus-visible,
.section--dark:focus-visible {
	outline-color: var(--panel-dark-text);
}

/* =============================================================
   04. LAYOUT & CONTAINERS
   ============================================================= */
.container {
	max-width: var(--width-site);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Single-column reading measure. Unscoped on purpose: the contact page
   uses it outside an .article. */
.container--narrow {
	max-width: 820px;
}

.site-main {
	padding-block: var(--space-3xl);
}

.entry-content,
.entry-summary,
.page-header,
.comments-area {
	max-width: var(--width-content);
}

.entry-content > .alignwide {
	max-width: var(--width-site);
}

.entry-content > .alignfull {
	max-width: none;
}

@media ( max-width: 48em ) {
	:root {
		--gutter: 20px;
	}

	.site-main {
		padding-block: var(--space-2xl);
	}
}

/* The mobile header is fixed, so reserve its full top inset and capsule
   height in normal document flow. Without this offset, page headings begin
   underneath the frosted capsule. */
@media ( max-width: 899px ) {
	.site-main {
		margin-top: calc( 12px + env( safe-area-inset-top, 0px ) + 62px );
	}
}

/* =============================================================
   05. COMPONENTS
   ============================================================= */

/* --- Buttons ------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: 14px 30px;
	background: transparent;
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn:hover,
.btn:focus {
	text-decoration: none;
}

.btn--sm {
	padding: 10px 22px;
	font-size: var(--fs-base);
}

.btn--lg {
	padding: 16px 36px;
	font-size: 16px;
}

/* --accent is too light to carry white text (2.32:1), so the filled CTA
   uses --accent-dark (6.29:1) and darkens further on hover (8.92:1).
   The --accent token itself is unchanged — it is correct for the soft
   cards, tints and blobs that never put text on it. */
.btn--primary {
	background: var(--accent-dark);
	color: var(--color-surface);
}

.btn--primary:hover,
.btn--primary:focus {
	background: var(--accent-hover);
	color: var(--color-surface);
}

.btn--sage {
	background: var(--sage);
	color: var(--sage-dark);
}

.btn--sage:hover,
.btn--sage:focus {
	background: var(--sage-dark);
	color: var(--sage-soft);
}

.btn--gold {
	background: var(--gold);
	color: var(--gold-darker);
}

.btn--gold:hover,
.btn--gold:focus {
	background: var(--gold-dark);
	color: var(--gold-soft);
}

.btn--outline {
	border-color: var(--sage);
	color: var(--sage-text);
}

.btn--outline:hover,
.btn--outline:focus {
	background: var(--sage-soft);
	border-color: var(--sage-dark);
	color: var(--sage-dark);
}

/* --- Arrow text link ----------------------------------------- */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--accent-dark);
	font-size: var(--fs-base);
	font-weight: 700;
	text-decoration: none;
}

.link-arrow::after {
	content: "\2192";
	transition: transform .15s ease;
}

.link-arrow:hover,
.link-arrow:focus {
	color: var(--accent-hover);
	text-decoration: none;
}

.link-arrow:hover::after,
.link-arrow:focus::after {
	transform: translateX( 3px );
}

/* --- Back link ------------------------------------------------ */
/* The one navigation control above an article, in place of the
   breadcrumb trail. It is a .btn — a single destination is a control,
   not a trail — and its arrow is .link-arrow's mirrored rather than a
   second copy: same pseudo element, same nudge, pointing back. The
   bottom margin is the trail's, so the gap under it is unchanged. */
.back-link {
	margin: 0 0 var(--space-lg);
}

.back-link::before {
	content: "\2190";
	transition: transform .15s ease;
}

.back-link:hover::before,
.back-link:focus::before {
	transform: translateX( -3px );
}

/* --- Chips (taxonomy / category pills) ----------------------- */
.chip {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2xs) var(--space-md);
	background: var(--alt-bg);
	border-radius: var(--radius-pill);
	color: var(--color-ink-2);
	font-size: var(--fs-2xs);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

a.chip:hover,
a.chip:focus {
	text-decoration: none;
	filter: brightness( .97 );
}

.chip--accent { background: var(--accent-soft); color: var(--accent-dark); }
.chip--sage { background: var(--sage-soft); color: var(--sage-dark); }
.chip--gold { background: var(--gold-soft); color: var(--gold-dark); }
.chip--teal { background: var(--teal-soft); color: var(--teal-dark); }
.chip--plum { background: var(--plum-soft); color: var(--plum-dark); }
/* --color-ink-3 on the hairline tint measures 3.43:1 at 11px/700 — below AA. */
.chip--neutral { background: var(--hairline); color: var(--color-ink-2); }

/* The design sets some chips — the policy category, not the news one —
   as tracked-out uppercase. */
.chip--upper {
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* --- Eyebrow -------------------------------------------------- */
/* 12px/700 on cream: --color-ink-3 measures 3.90:1, below AA, so the base
   takes --color-ink-2 (6.05:1). The tinted modifiers set their own colour. */
.eyebrow {
	display: block;
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The tinted modifiers turn the eyebrow into the design's pill form. */
.eyebrow--gold,
.eyebrow--sage {
	display: inline-block;
	padding: var(--space-xs) 18px;
	border-radius: var(--radius-pill);
	letter-spacing: .5px;
}

.eyebrow--gold {
	background: var(--gold-soft);
	color: var(--gold-dark);
}

.eyebrow--sage {
	background: var(--sage-soft);
	color: var(--sage-dark);
}

/* Loud, tracked-out label — reads as gold whenever it sits on a dark panel. */
.eyebrow--upper {
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Contextual only — there is deliberately no manual "on dark" opt-in class,
   because gold on a light surface measures 1.76:1 and the opt-in form can
   only ever be applied wrongly. */
.panel-dark .eyebrow--upper,
.section--dark .eyebrow--upper {
	color: var(--gold);
}

/* --- Soft colour cards ---------------------------------------- */
.card-soft {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: 30px;
	background: var(--alt-bg);
	border-radius: var(--radius-32);
}

.card-soft__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.card-soft__text {
	margin: 0;
	color: var(--color-ink-2);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
}

.card-soft .link-arrow {
	margin-top: auto;
}

.card-soft--accent { background: var(--accent-soft); }
.card-soft--accent .link-arrow { color: var(--accent-dark); }

.card-soft--sage { background: var(--sage-soft); }
.card-soft--sage .card-soft__title { color: var(--sage-dark); }
.card-soft--sage .link-arrow { color: var(--sage-link); }

.card-soft--gold { background: var(--gold-soft); }
.card-soft--gold .card-soft__title { color: var(--gold-darker); }
.card-soft--gold .link-arrow { color: var(--gold-link); }

.card-soft--teal { background: var(--teal-soft); }
.card-soft--teal .card-soft__title { color: var(--teal-darker); }
.card-soft--teal .link-arrow { color: var(--teal-link); }

.card-soft--plum { background: var(--plum-soft); }
.card-soft--plum .card-soft__title { color: var(--plum-darker); }
.card-soft--plum .link-arrow { color: var(--plum-link); }

/* Neutral tint — for soft cards that must not claim a hue. */
.card-soft--alt { background: var(--alt-bg); }

/* --- Card (white surface, hairline border) --------------------- */
.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: 26px;
	background: var(--color-surface);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-20);
}

/* --- Card parts — shared by .card, .card-soft and their skins --- */
.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	background: var(--alt-bg);
	border-radius: 50%;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1;
}

.card__icon img,
.card__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.card__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: var(--lh-snug);
}

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

.card__title a:hover,
.card__title a:focus {
	color: var(--accent-dark);
	text-decoration: underline;
}

.card__text {
	margin: 0;
	color: var(--color-ink-2);
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: var(--lh-body);
}

.card__text--strong {
	color: var(--color-ink);
	font-weight: 600;
}

/* --color-ink-3 measures 4.16:1 at this size on white — below AA. Meta text
   this small takes --color-ink-2 (6.05:1) and still reads as secondary. */
.card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	color: var(--color-ink-2);
	font-size: var(--fs-xs);
}

.card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	margin-top: auto;
	padding-top: var(--space-2xs);
	color: var(--accent-dark);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 700;
	text-decoration: none;
}

.card__link::after {
	content: "\2192";
	transition: transform .15s ease;
}

.card__link:hover,
.card__link:focus {
	color: var(--accent-hover);
	text-decoration: none;
}

.card__link:hover::after,
.card__link:focus::after {
	transform: translateX( 3px );
}

/* --- Card skins ------------------------------------------------ */
/* Front-page topic card — composes .card-soft. */
.card-topic {
	gap: 14px;
}

.card-topic .card__title { font-size: 20px; }

/* News card — composes .card. */
.card-news {
	gap: 10px;
	overflow: hidden;
	padding: 0;
}

.card-news .entry-thumbnail,
.card-news .card__media {
	display: block;
	aspect-ratio: 16 / 10;
	margin: 0;
	background: var(--alt-bg);
	overflow: hidden;
}

.card-news .entry-thumbnail img,
.card-news .card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-news__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	flex: 1;
	padding: 26px;
}

/* Standalone featured image, used outside .card-news too. */
.entry-thumbnail {
	display: block;
	margin: 0 0 var(--space-md);
	overflow: hidden;
	border-radius: var(--radius-20);
}

.entry-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* --- Dark panel ----------------------------------------------- */
.panel-dark {
	padding: 28px;
	background: var(--panel-dark);
	border-radius: var(--radius-18);
	color: var(--panel-dark-text);
}

.panel-dark .eyebrow {
	color: var(--gold);
	letter-spacing: 1.5px;
}

.panel-dark__eyebrow {
	display: block;
	margin: 0 0 var(--space-3xs);
	color: var(--gold);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The panel heading: sits between the uppercase eyebrow above and the body
   copy below. Same treatment as .section-head__title, scaled down for a
   panel and re-inked for the dark surface. */
.panel-dark__title {
	margin: 0 0 var(--space-xs);
	color: var(--panel-dark-text);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.panel-dark__text {
	margin: 0;
	color: inherit;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	opacity: .85;
}

/* Links on dark panels. The panel sets --panel-dark-text for its text, but
   links had no rule and fell back to the global --accent-dark: 2.19:1 against
   --panel-dark, where 4.5:1 is required. --gold clears 4.5:1 even after the
   .85 opacity above composites it toward the panel, and stays visibly a link
   against the surrounding body text. */
.panel-dark a {
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.panel-dark a:hover,
.panel-dark a:focus {
	color: var(--panel-dark-text);
}

.panel-dark__stat {
	display: block;
	color: var(--gold);
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 700;
	line-height: 1.1;
}

.panel-dark--band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding: 56px var(--gutter);
	border-radius: 0;
	text-align: center;
}

.panel-dark--band > * {
	max-width: 900px;
}

.panel-dark--band .panel-dark__text {
	font-size: 18px;
	opacity: 1;
}

/* --- Callout -------------------------------------------------- */
.callout {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--space-xl);
	background: var(--alt-bg);
	border-radius: var(--radius-24);
}

.callout__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.callout__text,
.callout p {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
}

.callout--gold {
	background: var(--gold-soft);
	color: var(--gold-darker);
}

.callout--gold .callout__title { color: var(--gold-darker); }

.callout--sage {
	background: var(--sage-soft);
	color: var(--sage-dark);
}

.callout--sage .callout__title { color: var(--sage-dark); }

/* --- Meta line ------------------------------------------------ */
.meta-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	color: var(--color-ink-2);
	font-size: var(--fs-base);
}

.meta-line__item {
	color: inherit;
}

.meta-line__sep {
	color: inherit;
}

/* --- Section head --------------------------------------------- */
/* No __eyebrow element: compose .eyebrow inside .section-head. */
.section-head {
	margin-bottom: var(--space-xl);
}

.section-head .eyebrow {
	margin-bottom: 10px;
}

.section-head__title {
	margin: 0 0 var(--space-xs);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-4xl);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.section-head__lead {
	max-width: 680px;
	margin: 0;
	color: var(--color-ink-2);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
}

/* --- Sibling-page sidebar -------------------------------------- */
/* The <ul> and its <li>s carry no classes — .sidebar-siblings is both the
   panel and the list, so it works whether the markup nests a list or not. */
.sidebar-siblings {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	padding: 26px;
	background: var(--alt-bg);
	border-radius: var(--radius-20);
	list-style: none;
}

.sidebar-siblings ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-siblings li {
	display: flex;
}

.sidebar-siblings__label,
.sidebar-siblings__heading {
	margin: 0;
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Body-level interactive text on a light panel — --color-ink-3 measures
   3.9:1 here, so inactive links use --color-ink-2 (6.05:1). */
.sidebar-siblings__link {
	color: var(--color-ink-2);
	font-size: var(--fs-base);
	font-weight: 500;
	text-decoration: none;
}

.sidebar-siblings__link:hover,
.sidebar-siblings__link:focus {
	color: var(--color-ink);
	text-decoration: none;
}

.sidebar-siblings__link--current,
.sidebar-siblings__link.is-current,
.sidebar-siblings__link.is-active,
.sidebar-siblings .is-current > .sidebar-siblings__link {
	color: var(--color-ink);
	font-weight: 700;
}

/* --- Numbered document sections -------------------------------- */
/* scroll-margin-top clears the fixed header when a table of contents link
   jumps to a section, matching .prose--numbered > h2 in templates.css. */
.doc-section {
	display: flex;
	gap: var(--space-lg);
	padding: var(--space-xl) 0;
	border-bottom: 1px solid var(--rule);
	scroll-margin-top: 90px;
}

.doc-section__num {
	flex: none;
	min-width: 56px;
	color: var(--sage-text);
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	opacity: 1;
}

.doc-section__title {
	margin: 0 0 10px;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: var(--lh-snug);
}

.doc-section__body {
	max-width: 620px;
	margin: 0;
	color: var(--color-ink);
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
}

/* --- Inline table of contents ---------------------------------- */
.toc {
	padding: 20px 0;
	margin-bottom: var(--space-xs);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.toc__label {
	display: block;
	margin: 0 0 var(--space-sm);
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-transform: uppercase;
}

.toc__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc__item {
	display: flex;
}

.toc__list a,
.toc__link {
	color: var(--article-link, var(--sage-text));
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.toc__list a:hover,
.toc__list a:focus,
.toc__link:hover,
.toc__link:focus {
	color: var(--article-accent-dark, var(--sage-dark));
	text-decoration: underline;
}

/* The section number is the quieter half of the entry. The design tints
   it with the link colour, but --color-ink-3 measures 4.16:1 at 13px —
   below AA — so the muted tone here is --color-ink-2 (6.05:1). */
.toc__num {
	color: var(--color-ink-2);
	font-variant-numeric: tabular-nums;
}

/* --- Table of contents, vertical rail variant ------------------- */
/* The base .toc above is a horizontal wrap-inline list under the lead —
   the policy template depends on that. This modifier turns the same markup
   into the stacked rail the general and hub templates park in their aside;
   only the box and the list axis change, the type and colours are shared. */
.toc--rail {
	padding: 0;
	border-top: 0;
	border-bottom: 0;
}

.toc--rail .toc__list {
	flex-direction: column;
	gap: 0;
}

.toc--rail .toc__item {
	border-bottom: 1px solid var(--rule);
}

/* The transparent left border is always present so the active marker can
   colour it in without shifting the row by two pixels. */
.toc--rail .toc__link {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	padding: 9px 0 9px 10px;
	border-left: 2px solid transparent;
}

.toc--rail .toc__link:hover,
.toc--rail .toc__link:focus {
	border-left-color: var(--article-accent, var(--sage));
}

.toc--rail .toc__num {
	flex: none;
	min-width: 20px;
}

/* --- Blob shapes ----------------------------------------------- */
/* The blob radius itself lives on .u-blob in section 08. */
.blob-circle {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	background: var(--alt-bg);
	border-radius: 50%;
}

.blob-circle--accent { background: var(--accent); }
.blob-circle--sage { background: var(--sage); }
.blob-circle--gold { background: var(--gold); }

/* --- Chips ----------------------------------------------------- */
.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Large surface chip — the front-page "quick links" size. */
.chip--lg {
	padding: var(--space-sm) 20px;
	background: var(--color-surface);
	border-radius: var(--radius-16);
	color: var(--color-ink);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* --- Pill nav (segmented in-page filter) ----------------------- */
/* .pill-nav is the capsule AND the list — no separate __list element. */
.pill-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 5px;
	background: var(--alt-bg);
	border-radius: var(--radius-pill);
	list-style: none;
}

.pill-nav li {
	display: flex;
}

.pill-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	/* Inactive nav text on the tinted capsule: --color-ink-3 measures
	   3.60:1, below AA, so this takes --color-ink-2. Active vs inactive
	   stays a colour-only difference. */
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.pill-nav__link:hover,
.pill-nav__link:focus {
	color: var(--color-ink);
	text-decoration: none;
}

.pill-nav__link.is-current,
.pill-nav__link.is-active,
.pill-nav__link[aria-current] {
	background: var(--color-surface);
	color: var(--color-ink);
}

/* --- Forms ----------------------------------------------------- */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.field__label {
	color: var(--color-ink);
	font-size: var(--fs-base);
	font-weight: 600;
}

/* 13px/400 on white: --color-ink-3 measures 4.16:1, below AA. */
.field__hint {
	color: var(--color-ink-2);
	font-size: var(--fs-sm);
}

.field__input,
.field__textarea,
.field__select {
	width: 100%;
	max-width: 100%;
	padding: 13px var(--space-md);
	background: var(--color-bg);
	border: 1.5px solid color-mix( in srgb, var(--color-ink) 18%, transparent );
	border-radius: var(--radius-12);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
}

.field__input::placeholder,
.field__textarea::placeholder {
	color: var(--color-ink-2);
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
	border-color: var(--accent);
}

.field__textarea {
	min-height: 120px;
	resize: vertical;
}

.field__select {
	padding-right: 40px;
	font-weight: 600;
}

.field--invalid .field__input,
.field--invalid .field__textarea,
.field--invalid .field__select,
.field__input[aria-invalid="true"],
.field__textarea[aria-invalid="true"],
.field__select[aria-invalid="true"] {
	border-color: var(--error);
}

.field--invalid .field__label {
	color: var(--error-text);
}

.field__error {
	color: var(--error);
	font-size: var(--fs-xs);
	font-weight: 600;
}

/* --- Form sections --------------------------------------------- */
/* apply.css owns __head / __hint and the option widgets; this is the base. */
.form-section {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 30px;
	background: var(--color-surface);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-24);
}

.form-section + .form-section {
	margin-top: var(--space-lg);
}

.form-section__heading {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: var(--lh-snug);
}

/* --- Form success ---------------------------------------------- */
.form-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	max-width: var(--width-content);
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-xl);
	background: var(--sage-soft);
	border-radius: var(--radius-28);
	color: var(--sage-dark);
	text-align: center;
}

.radio-custom,
.checkbox-custom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	background: transparent;
	border: 2px solid color-mix( in srgb, var(--color-ink) 30%, transparent );
	cursor: pointer;
}

.radio-custom {
	border-radius: 50%;
}

.checkbox-custom {
	border-radius: var(--space-2xs);
}

.radio-custom::after {
	content: "";
	width: 10px;
	height: 10px;
	background: transparent;
	border-radius: 50%;
}

.checkbox-custom::after {
	content: "\2713";
	color: transparent;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1;
}

input[type="radio"]:checked + .radio-custom,
input[type="checkbox"]:checked + .checkbox-custom {
	border-color: var(--sage-dark);
}

input[type="radio"]:checked + .radio-custom::after {
	background: var(--sage-dark);
}

input[type="checkbox"]:checked + .checkbox-custom::after {
	color: var(--sage-dark);
}

input[type="radio"]:focus-visible + .radio-custom,
input[type="checkbox"]:focus-visible + .checkbox-custom {
	outline: 2px solid var(--accent-dark);
	outline-offset: 2px;
}

/* --- Error banner ---------------------------------------------- */
.error-banner {
	padding: 18px 22px;
	background: var(--error-soft);
	border-radius: var(--radius-16);
	color: var(--error-text);
	font-size: var(--fs-base);
	font-weight: 600;
}

/* --- Person ------------------------------------------------------ */
.person {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px var(--space-md);
	background: var(--color-surface);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-18);
}

.person__avatar {
	display: block;
	flex: none;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 50%;
	object-fit: cover;
}

/* 35 of ~90 members have no photo. The fallback must read as a designed
   monogram, not a missing image: tinted circle, centred display-face
   initials, no border. Hue rotates via --person-tint where set. */
.person__avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--person-tint, var(--sage-soft));
	color: var(--person-tint-text, var(--sage-dark));
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1;
	text-transform: uppercase;
	overflow: hidden;
}

.person__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.person__name {
	display: block;
	color: var(--color-ink);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: var(--lh-snug);
}

/* 12px/400 on white: --color-ink-3 measures 4.16:1, below AA. */
.person__role {
	display: block;
	color: var(--color-ink-2);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
}

.person__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: var(--color-ink-2);
	font-size: var(--fs-xs);
}

.person__meta a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.person__meta a:hover,
.person__meta a:focus {
	color: var(--color-ink);
	text-decoration: underline;
}

/* --- Team groups -------------------------------------------------- */
.team-group + .team-group {
	margin-top: var(--space-2xl);
}

.team-group__heading {
	margin: 0 0 var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--rule);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: var(--lh-snug);
}

/* Second level of the two-level grouping: group → department → people. */
.team-group__dept + .team-group__dept {
	margin-top: var(--space-xl);
}

.team-group__dept-title {
	margin: 0 0 var(--space-sm);
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --- CTA strip --------------------------------------------------- */
.cta-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-lg);
	padding-block: var(--space-3xl);
}

.cta-strip__title {
	margin: 0 0 var(--space-xs);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.cta-strip__text {
	max-width: 440px;
	margin: 0;
	color: var(--color-ink-2);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
}

.cta-strip__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* --- Sections (vertical rhythm bands) ------------------------------ */
.section {
	padding-block: 56px;
}

.section--alt {
	background: var(--alt-bg);
}

.section--dark {
	background: var(--panel-dark);
	color: var(--panel-dark-text);
}

.section--dark .section-head__title,
.section--dark .section-head__lead,
.section--dark .cta-strip__title,
.section--dark .cta-strip__text,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
	color: inherit;
}

.section--dark .eyebrow {
	color: var(--gold);
}

.section--dark a:not(.btn) {
	color: var(--gold);
}

/* --- Grid recipes -------------------------------------------------- */
.grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
}

/* Department grids on the team archive (13 groups on the team archive).
   auto-fill is mobile-safe on its own — at 390px the 350px container fits
   exactly one 240px track — so this needs no breakpoint. */
.grid--people {
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}

.grid--sidebar {
	gap: 48px;
}

.grid__main {
	min-width: 0;
}

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

/* Fixed-count recipes. 2-up is the design's intent for the news grid —
   two wider cards give headlines room, not a cell count that happens to
   fit. Do NOT change .grid--2 to auto-fit/auto-fill: at the 1240px
   container's ~1160px inner width, auto-fit packs a third 320px track
   and silently turns this into a 3-up grid. The base .grid gives a
   single column below 768px; the second column arrives here.
   .grid--3 is likewise fixed rather than auto-fill: auto-fill leaves a
   4th empty track when there are exactly three cards. */
@media ( min-width: 768px ) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 900px ) {
	.grid--3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.grid--sidebar {
		grid-template-columns: minmax( 0, 1fr ) 300px;
		align-items: start;
	}
}

@media ( min-width: 1100px ) {
	.grid--4 {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/* --- Pagination -------------------------------------------------- */
.pagination {
	margin-top: var(--space-2xl);
}

.pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-ink-2);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent-hover);
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--accent-dark);
	background: var(--accent-dark);
	color: var(--color-surface);
}

.pagination .page-numbers.dots {
	min-width: auto;
	padding-inline: var(--space-3xs);
	border-color: transparent;
	background: transparent;
}

/* --- Page links (wp_link_pages) ---------------------------------- */
/* A smaller sibling of .pagination, for a post split across pages.
   Some callers put a "Síður:" label in the `before` argument, which
   lands as a bare text node — hence the element selectors below rather
   than a blanket child rule. */
.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-lg);
	color: var(--color-ink-2);
	font-size: var(--fs-base);
	font-weight: 700;
}

.page-links a,
.page-links > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	padding: var(--space-3xs) var(--space-sm);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-ink-2);
	line-height: 1.4;
	text-decoration: none;
}

.page-links a:hover,
.page-links a:focus {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent-hover);
	text-decoration: none;
}

/* wp_link_pages renders the page you are on as a span, not a link. */
.page-links > span {
	border-color: var(--accent-dark);
	background: var(--accent-dark);
	color: var(--color-surface);
}


/* --- Hero -------------------------------------------------------- */
/* Design is a wrapping flex row: 420px blob, then a min-340px text
   column. Flex-wrap alone handles mobile — the blob drops above the
   copy and the copy takes the full measure. */
.hero {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 64px;
	padding-block: 70px 90px;
}

.hero__media {
	position: relative;
	flex: 0 1 420px;
	width: 420px;
	max-width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
}

.hero__media img,
.hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Front page and Um Arnarskóla have no featured image. Without a tint the
   blob renders as an empty hole and reads as broken, so give it one. */
.hero__media--placeholder {
	background: linear-gradient( 140deg, var(--accent-soft), var(--gold-soft) );
}

.hero__body {
	flex: 1;
	min-width: 340px;
}

.hero__title {
	margin: var(--space-sm) 0 var(--space-md);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: clamp( var(--fs-5xl), 1.6rem + 2.4vw, var(--fs-6xl) );
	font-weight: 700;
	line-height: var(--lh-tight);
}

.hero__lead {
	max-width: 520px;
	margin: 0 0 var(--space-lg);
	color: var(--color-ink-2);
	font-size: var(--fs-lg);
	line-height: var(--lh-loose);
}

.hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm) 14px;
}

/* --- Prose (the_content wrapper) ---------------------------------- */
/* Every long-form template wraps editor output in .prose, so the element
   selectors below are the only styling that reaches WP-authored markup.
   Links and rules pick up the article accent when one is set. */
.prose {
	max-width: var(--width-content);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
}

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

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

.prose h2 {
	margin: var(--space-xl) 0 10px;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: var(--lh-snug);
}

.prose h3 {
	margin: 26px 0 10px;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.prose h4 {
	margin: var(--space-lg) 0 var(--space-xs);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.prose p {
	margin: 0 0 var(--space-md);
}

.prose ul,
.prose ol {
	margin: 0 0 var(--space-md);
	padding-left: 22px;
}

.prose li {
	margin-bottom: var(--space-xs);
	padding-left: var(--space-3xs);
}

.prose li::marker {
	color: var(--article-accent, var(--sage));
}

.prose li > ul,
.prose li > ol {
	margin: var(--space-xs) 0 0;
}

/* :not(.btn) matters — .prose a outweighs .btn--primary on specificity, so
   without it a button placed in editor content loses its own text colour. */
.prose a:not(.btn) {
	color: var(--article-link, var(--accent-dark));
	text-decoration: underline;
	text-underline-offset: .15em;
	overflow-wrap: break-word;
}

.prose a:not(.btn):hover,
.prose a:not(.btn):focus {
	color: var(--article-accent-dark, var(--accent-hover));
}

.prose strong,
.prose b {
	color: var(--color-ink);
	font-weight: 700;
}

.prose blockquote {
	margin: var(--space-lg) 0;
	padding: var(--space-md) 0 var(--space-md) var(--space-lg);
	border-left: 3px solid var(--article-accent, var(--sage));
	color: var(--color-ink);
	font-size: var(--fs-lg);
	font-style: italic;
	line-height: var(--lh-body);
}

.prose blockquote p:last-child {
	margin-bottom: 0;
}

.prose figure {
	margin: var(--space-lg) 0;
}

.prose img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-16);
}

.prose figcaption {
	margin-top: var(--space-xs);
	color: var(--color-ink-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

/* Tables scroll inside their own box rather than widening the page. */
.prose table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: var(--space-lg) 0;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--fs-base);
}

.prose th,
.prose td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.prose th {
	color: var(--color-ink);
	font-weight: 700;
	white-space: nowrap;
}

.prose hr {
	margin: var(--space-xl) 0;
	border: 0;
	border-top: 1px solid var(--rule);
}

/* --- Article meta bits --------------------------------------------- */
.date-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	gap: var(--space-3xs);
	min-width: 62px;
	padding: var(--space-xs) 14px;
	background: var(--article-accent-soft, var(--plum-soft));
	border-radius: var(--radius-14);
	color: var(--article-accent-dark, var(--plum-dark));
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

/* 12px/600 on cream: --color-ink-3 measures 3.90:1, below AA. */
.read-time {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	color: var(--color-ink-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
}

/* --- Article accents ------------------------------------------------ */
/* Modifiers on the article root. They set local custom properties, which
   .prose, .toc and .date-pill above read — so retinting a template is one
   class, not a parallel set of rules per component. */
.article--general,
.article--policy,
.article--news,
.article--values,
.article--calendar {
	--article-accent: var(--accent);
	--article-accent-dark: var(--accent-dark);
	--article-accent-soft: var(--accent-soft);
	--article-link: var(--accent-dark);
}

.article--policy {
	--article-accent: var(--sage);
	--article-accent-dark: var(--sage-dark);
	--article-accent-soft: var(--sage-soft);
	--article-link: var(--sage-link);
}

.article--news {
	--article-accent: var(--gold);
	--article-accent-dark: var(--gold-darker);
	--article-accent-soft: var(--gold-soft);
	--article-link: var(--gold-link);
}

.article--values {
	--article-accent: var(--teal);
	--article-accent-dark: var(--teal-darker);
	--article-accent-soft: var(--teal-soft);
	--article-link: var(--teal-link);
}

.article--calendar {
	--article-accent: var(--plum);
	--article-accent-dark: var(--plum-darker);
	--article-accent-soft: var(--plum-soft);
	--article-link: var(--plum-link);
}

/* The hub takes sage so its rail agrees with .doc-section__num, which is
   tinted --sage-text by the component itself. */
.article--hub {
	--article-accent: var(--sage);
	--article-accent-dark: var(--sage-dark);
	--article-accent-soft: var(--sage-soft);
	--article-link: var(--sage-link);
}

/* --- Component responsive steps -------------------------------------- */
@media ( max-width: 48em ) {
	.card-soft {
		padding: var(--space-lg);
	}

	.callout,
	.card,
	.form-section,
	.sidebar-siblings {
		padding: 20px;
	}

	.card-news {
		padding: 0;
	}

	.card-news__body {
		padding: 18px 20px 20px;
	}

	.panel-dark--band {
		padding: var(--space-2xl) var(--gutter);
	}

	.panel-dark__stat {
		font-size: 38px;
	}

	.doc-section {
		flex-direction: column;
		gap: 10px;
		padding: var(--space-lg) 0;
	}

	.doc-section__num {
		min-width: 0;
		font-size: 26px;
	}

	.btn {
		padding: var(--space-sm) var(--space-lg);
	}

	.btn--lg {
		padding: 14px 28px;
	}

	.cta-strip {
		padding-block: var(--space-2xl);
	}

	.section {
		padding-block: var(--space-2xl);
	}

	.hero {
		gap: var(--space-xl);
		padding-block: var(--space-2xl) var(--space-3xl);
	}

	.hero__media {
		flex-basis: 300px;
		width: 300px;
		margin-inline: auto;
	}

	/* min-width:0 alone stops the flex row from wrapping (the 340px floor
	   on .hero__body was the only wrap trigger), so .hero__media and
	   .hero__body end up sharing one line and the text column gets
	   crushed. flex-basis:100% forces .hero__body onto its own row under
	   the (now centred, margin-inline:auto) media, while min-width:0
	   still does its job of letting long words break instead of
	   overflowing. */
	.hero__body {
		flex-basis: 100%;
		min-width: 0;
	}

	.team-group__heading {
		font-size: var(--fs-2xl);
	}

	.form-section__heading {
		font-size: var(--fs-xl);
	}
}

/* =============================================================
   06. SITE CHROME
   ============================================================= */

/* --- Header ---------------------------------------------------- */
/* Hidden below 900px; the section 07 mobile nav is the exact inverse
   (it hides at min-width 900px), so there is no gap or overlap. */
.site-header {
	display: none;
	border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-md);
	max-width: var(--width-site);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: 22px;
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-ink);
	text-decoration: none;
}

.site-header__brand:hover,
.site-header__brand:focus {
	color: var(--color-ink);
	text-decoration: none;
}

.site-header__logo {
	display: block;
	width: auto;
	height: 36px;
}

.site-header__wordmark {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}

.site-header__nav {
	display: flex;
	align-items: center;
}

.site-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__item {
	display: flex;
}

/* Active vs inactive differ by colour only — no underline, no bar,
   no weight change. Inactive is --color-ink-2 (6.05:1) rather than
   --color-ink-3 (3.9:1, fails AA); --color-ink at 10.08:1 is still
   plainly distinct from it. */
.site-nav__link {
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	font-weight: 600;
	text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link:focus {
	color: var(--color-ink);
	text-decoration: none;
}

.site-nav__link.is-active,
.site-nav__item.current-menu-item > .site-nav__link,
.site-nav__item.current-menu-ancestor > .site-nav__link {
	color: var(--color-ink);
}

.site-header__cta {
	white-space: nowrap;
}

@media ( min-width: 900px ) {
	.site-header {
		display: block;
	}
}

/* --- Footer ----------------------------------------------------- */
.site-footer {
	background: var(--footer-bg);
	border-top: 1px solid var(--rule);
}

.site-footer__inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-xl) 20px;
	max-width: var(--width-site);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: 50px;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-2xs);
	color: var(--color-ink);
	text-decoration: none;
}

.site-footer__logo {
	display: block;
	width: auto;
	height: 26px;
}

.site-footer__wordmark {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	color: var(--color-ink-2);
	font-size: var(--fs-base);
	font-style: normal;
}

.site-footer__contact p,
.site-footer__contact address {
	margin: 0;
	font-style: normal;
}

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

.site-footer__contact a:hover,
.site-footer__contact a:focus {
	color: var(--color-ink);
	text-decoration: underline;
}

.site-footer__address,
.site-footer__hours,
.site-footer__reach {
	margin: 0;
	color: inherit;
	font-style: normal;
	line-height: var(--lh-body);
}

.site-footer__reach {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.site-footer__phone,
.site-footer__email {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.site-footer__phone:hover,
.site-footer__phone:focus,
.site-footer__email:hover,
.site-footer__email:focus {
	color: var(--color-ink);
	text-decoration: underline;
}

.site-footer__sep {
	color: var(--color-ink-2);
	user-select: none;
}

/* The contact column is a stretch-aligned flex column, so the button
   has to opt out of the full-width stretch it would otherwise take. */
.site-footer__cta {
	align-self: flex-start;
	margin-top: var(--space-xs);
}

/* The column sets a link colour for the address lines; the button
   brings its own and must not inherit it, hover included. */
.site-footer__contact a.site-footer__cta,
.site-footer__contact a.site-footer__cta:hover,
.site-footer__contact a.site-footer__cta:focus {
	color: var(--color-surface);
	text-decoration: none;
}

.site-footer__links {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--space-xl);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__col-title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.2;
}

.footer-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav__item {
	display: flex;
}

.footer-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--color-ink);
	font-size: var(--fs-base);
	font-weight: 600;
	text-decoration: none;
}

.footer-nav__link:hover,
.footer-nav__link:focus {
	color: var(--accent-hover);
	text-decoration: underline;
}

.site-footer__bottom {
	flex-basis: 100%;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
	color: var(--color-ink-2);
	font-size: var(--fs-sm);
}

.site-footer__bottom p,
.site-footer__credit {
	margin: 0;
	color: inherit;
}

.site-footer__credit a {
	color: inherit;
	text-decoration: underline;
}

@media ( max-width: 48em ) {
	.site-footer__inner {
		flex-direction: column;
		gap: var(--space-xl);
		padding-block: var(--space-2xl);
	}

	.site-footer__links {
		gap: var(--space-lg) var(--space-xl);
	}
}

/* =============================================================
   07. MOBILE NAVIGATION (option 1a)
   ============================================================= */
.mobile-nav {
	--mn-top: calc( 12px + env( safe-area-inset-top, 0px ) );
	--mn-gutter: 16px;
	--mn-capsule-h: 62px;

	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
}

/* --- Frosted capsule ------------------------------------------------ */
.mobile-nav__capsule {
	position: absolute;
	top: var(--mn-top);
	right: var(--mn-gutter);
	left: var(--mn-gutter);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 9px 9px 20px;
	border-radius: var(--radius-pill);
	background: rgba( 251, 247, 239, .72 );
	box-shadow: 0 10px 26px -12px rgba( 74, 59, 42, .4 ), inset 0 0 0 1px rgba( 255, 255, 255, .5 );
	pointer-events: auto;
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	transition: background .3s ease, box-shadow .3s ease;
}

/* Solid fallback where the blur is unsupported. */
@supports not ( ( -webkit-backdrop-filter: blur( 14px ) ) or ( backdrop-filter: blur( 14px ) ) ) {
	.mobile-nav__capsule {
		background: var(--color-bg);
	}
}

.mobile-nav__brand {
	display: flex;
	gap: 9px;
	align-items: center;
	color: var(--color-ink);
	text-decoration: none;
	transition: opacity .2s ease;
}

.mobile-nav__logo {
	display: block;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: contain;
}

.mobile-nav__logo--mark {
	background: var(--accent);
}

.mobile-nav__logo--custom {
	width: auto;
	border-radius: 0;
}

.mobile-nav__logo--custom img {
	display: block;
	width: auto;
	height: 26px;
}

.mobile-nav__wordmark {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-ink);
}

/* --- Trigger: terracotta circle, 2 lines morphing to a ✕ ------------ */
.mobile-nav__trigger {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 6px 14px -6px var(--accent-dark);
	cursor: pointer;
	transition: background .3s ease, box-shadow .3s ease;
}

.mobile-nav__bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
}

.mobile-nav__bars span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--color-surface);
	transition: width .3s ease, transform .34s cubic-bezier( .4, 0, .2, 1 ), background .3s ease;
}

.mobile-nav__bars span:first-child {
	width: 20px;
}

.mobile-nav__bars span:last-child {
	width: 13px;
}

/* Open: the capsule recedes and the trigger becomes a white ✕ button. */
.mobile-nav.is-open .mobile-nav__capsule {
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.mobile-nav.is-open .mobile-nav__brand {
	visibility: hidden;
	opacity: 0;
}

.mobile-nav.is-open .mobile-nav__trigger {
	background: var(--color-surface);
	box-shadow: 0 6px 16px -8px rgba( 74, 59, 42, .5 );
}

.mobile-nav.is-open .mobile-nav__bars span {
	width: 20px;
	background: var(--color-ink);
}

.mobile-nav.is-open .mobile-nav__bars span:first-child {
	transform: translateY( 4px ) rotate( 45deg );
}

.mobile-nav.is-open .mobile-nav__bars span:last-child {
	transform: translateY( -4px ) rotate( -45deg );
}

/* --- Full-bleed overlay --------------------------------------------- */
.mobile-nav__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow-x: hidden;
	overflow-y: auto;
	padding: calc( var(--mn-top) + var(--mn-capsule-h) + var(--space-xl) ) 34px calc( var(--space-2xl) + env( safe-area-inset-bottom, 0px ) );
	background: var(--color-bg);
	opacity: 0;
	transform: scale( 1.06 );
	pointer-events: none;
	-webkit-overflow-scrolling: touch;
	transition: opacity .36s ease, transform .36s cubic-bezier( .34, 1.2, .5, 1 );
}

.mobile-nav__overlay[hidden] {
	display: none;
}

.mobile-nav.is-open .mobile-nav__overlay {
	opacity: 1;
	transform: scale( 1 );
	pointer-events: auto;
}

/* --- Decorative blobs ----------------------------------------------- */
.mobile-nav__blob {
	position: absolute;
	display: block;
	border-radius: var(--blob);
	pointer-events: none;
}

.mobile-nav__blob--1 {
	top: -80px;
	right: -70px;
	width: 300px;
	height: 300px;
	background: var(--sage);
	opacity: .35;
}

.mobile-nav__blob--2 {
	bottom: -70px;
	left: -70px;
	width: 260px;
	height: 260px;
	background: var(--gold);
	opacity: .3;
}

/* --- Links ----------------------------------------------------------- */
.mobile-nav__nav {
	position: relative;
	z-index: 1;
	width: 100%;
}

.mobile-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav__item {
	margin: 0;
}

.mobile-nav__link {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--hairline);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: var(--lh-snug);
	color: var(--color-ink);
	text-decoration: none;
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity .42s ease, transform .42s ease;
	transition-delay: calc( .08s + var(--i, 0) * .06s );
}

.mobile-nav__item:last-child .mobile-nav__link {
	border-bottom: 0;
}

.mobile-nav__dot {
	display: block;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--dot, var(--accent));
}

.mobile-nav.is-open .mobile-nav__link {
	opacity: 1;
	transform: translateY( 0 );
}

/* --- Gold pill CTA ---------------------------------------------------- */
.mobile-nav__cta {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-top: 30px;
	padding: var(--space-md) 34px;
	border-radius: var(--radius-pill);
	background: var(--gold);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--gold-darker);
	text-decoration: none;
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity .42s ease, transform .42s ease;
	transition-delay: calc( .08s + var(--i, 4) * .06s );
}

.mobile-nav.is-open .mobile-nav__cta {
	opacity: 1;
	transform: translateY( 0 );
}

/* --- Scroll lock ------------------------------------------------------ */
body.is-nav-open {
	position: fixed;
	left: 0;
	width: 100%;
	overflow: hidden;
}

/* --- Reduced motion --------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.mobile-nav__capsule,
	.mobile-nav__brand,
	.mobile-nav__trigger,
	.mobile-nav__bars span,
	.mobile-nav__overlay,
	.mobile-nav__link,
	.mobile-nav__cta {
		transition: none;
		transition-delay: 0s;
	}

	.mobile-nav__overlay {
		transform: none;
	}

	.mobile-nav.is-open .mobile-nav__overlay {
		transform: none;
	}

	.mobile-nav__link,
	.mobile-nav__cta {
		transform: none;
	}
}

/* --- Desktop: the site header takes over ------------------------------ */
@media ( min-width: 900px ) {
	.mobile-nav {
		display: none;
	}
}

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

.skip-link:focus {
	position: fixed !important;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 100;
	width: auto;
	height: auto;
	padding: var(--space-sm) var(--space-lg);
	clip-path: none;
	background: var(--color-surface);
	color: var(--color-ink);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
}

.alignleft {
	float: left;
	margin: 0 var(--space-lg) var(--space-md) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-md) var(--space-lg);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption-text,
.wp-element-caption {
	color: var(--color-ink-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

.u-blob {
	border-radius: var(--blob);
}