/* ==========================================================================
   Pencl — global chrome (every page except Home Page V2)

   Loaded before the page stylesheet: style.css (+ Bootstrap grid and
   responsive.css) on inner pages, assets/css/home.css on the Homepage.

   1. Brand tokens (the Homepage design's palette, type and layout)
   2. Fonts (self-hosted, latin subset, font-display: swap)
   3. Shared utilities: skip link, visually hidden text
   4. "pencl" wordmark
   5. Opening splash (template-parts/global/splash.php)
   6. Top bar (Theme Options → Announcement)
   7. Header: floating pill — logo · primary menu · actions (header.php)
   8. Footer: brand, menu columns, base line (footer.php)
   9. Responsive
   10. Motion preferences
   ========================================================================== */


/* ==========================================================================
   1. Brand tokens
   ========================================================================== */
:root {
	--ink: #1A1A18;
	--ink-2: #2E2A24;
	--body: #3F3C35;
	--muted: #57524A;
	--faint: #9A9486;
	--line: #E9E3D6;
	--line-2: #EFEBE1;
	--paper: #FFFFFF;
	--cream: #F7F4EC;
	--cream-2: #FBF8F1;
	--sand: #F1EDE3;
	--green: #1F4F49;
	--green-2: #1F6B5F;
	--green-tint: #DCE7E3;
	--panel: #14332F;        /* the app's dark panel (pencl-fe --color-panel) */
	--panel-2: #1B3F39;
	--panel-body: #C9C0AE;
	--amber: #E2912F;
	--copper: #9C6631;
	--copper-2: #C4884F;
	--red: #B5452F;
	--red-tint: #F6DED7;
	--water: #5A8BA6;

	--sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--serif: "Newsreader", Georgia, serif;
	--mono: "JetBrains Mono", ui-monospace, monospace;
	--logo: "Space Grotesk", var(--sans);

	--wrap: 1320px;
	--gutter: clamp(16px, 4vw, 56px);
	--radius: 18px;
	--shadow: 0 1px 2px rgba(26, 26, 24, .05), 0 12px 32px -12px rgba(26, 26, 24, .18);
	--shadow-lg: 0 2px 4px rgba(26, 26, 24, .04), 0 30px 60px -20px rgba(26, 26, 24, .28);
	--ease: cubic-bezier(.2, .7, .2, 1);

	/* Header: 14px offset + 72px pill (62px on phones, section 9). Pages use it for
	   sticky offsets and anchor scrolling. */
	--site-header-h: 86px;
}


/* ==========================================================================
   2. Fonts
   ========================================================================== */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-italic-400-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); }


/* ==========================================================================
   3. Shared utilities
   ========================================================================== */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.skip-link {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10001;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--ink);
	color: #fff;
	font: 600 14px var(--sans);
	transform: translateY(calc(-100% - 24px));
	/* Invisible too, not just above the page: a phone's overscroll bounce at the
	   top of the page would otherwise reveal it. */
	opacity: 0;
	pointer-events: none;
	transition: transform .15s ease, opacity .15s ease;
}

/* Shown only for keyboard focus (Tab), the people it is for. A tap, click or
   scroll never brings it up; screen readers announce it either way. */
.skip-link:focus-visible {
	transform: none;
	opacity: 1;
	pointer-events: auto;
	color: #fff;
	outline: 2px solid var(--amber);
	outline-offset: 2px;
}


/* ==========================================================================
   4. "pencl" wordmark: "penc" + pencil glyph as the "l" (header, footer,
   splash). The glyph is 1.25em tall, so it scales with the font-size.
   ========================================================================== */
.pc-wordmark {
	display: inline-flex;
	align-items: flex-end;
	font: 700 23px/1 var(--logo);
	letter-spacing: -.035em;
	color: var(--ink);
}

.pc-wordmark__glyph {
	display: block;
	width: auto;
	height: 1.25em;
	margin-left: 2px;
}

.pc-wordmark--light {
	color: #fff;
}


/* ==========================================================================
   5. Opening splash / logo loader
   ========================================================================== */
@keyframes pcSplash {
	0%, 42% { opacity: 1; visibility: visible; }
	100% { opacity: 0; visibility: hidden; }
}
@keyframes pcSplashMark {
	0% { opacity: 0; transform: translateY(6px); }
	38%, 100% { opacity: 1; transform: none; }
}
@keyframes pcSplashRule {
	0% { transform: scaleX(0); }
	55%, 100% { transform: scaleX(1); }
}
@keyframes pcSplashOut {
	to { opacity: 0; visibility: hidden; }
}

.splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cream);
	pointer-events: none;
	animation: pcSplash 1.5s ease-in-out forwards; /* no-JS fallback */
}

/* Script-driven (template-parts/global/splash.php): stays up until .is-done.
   The delayed animation is only a failsafe in case the script never finishes. */
.splash.is-js {
	animation: pcSplashOut .6s ease-in-out 5s forwards;
}

.splash.is-done {
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease-in-out, visibility 0s linear .6s;
}

/* No scrolling and no scrollbar behind the splash; released as it starts to fade.
   Only on <html> (a body with hidden overflow, as on the Homepage, would become a
   scroll box of its own), so the body's own overflow is let go meanwhile. */
html.is-splashing {
	overflow: hidden;
}

html.is-splashing body {
	overflow: visible;
}

.splash__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	animation: pcSplashMark 1.1s ease-out both;
}

.splash__logo {
	font-size: 56px;
}

.splash__rule {
	width: 180px;
	height: 1px;
	background: #C9C2AE;
	transform-origin: left center;
	animation: pcSplashRule 1.1s ease-out both;
}

.splash__tagline {
	font: 400 13px var(--sans);
	color: #8A5A2B;
}


/* ==========================================================================
   6. Top bar (Theme Options → Header → Announcement)
   ========================================================================== */
.site-topbar {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
	font: 500 13.5px/1.3 var(--sans);
}

.site-topbar__text {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 10px var(--gutter);
	text-align: center;
}

.site-topbar strong,
.site-topbar b {
	color: #fff;
	font-weight: 600;
}

.site-topbar a {
	color: var(--copper-2);
	font-weight: 600;
}

.site-topbar a:hover {
	color: #fff;
}


/* ==========================================================================
   7. Header: a white pill floating over the page (the Homepage hero slides
   up underneath it). Menu: Appearance → Menus → Primary navigation; links
   and button: Theme Options → Header.
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 50;
	padding-top: 14px;
	font-family: var(--sans);
}

.site-header.is-sticky {
	position: sticky;
	top: 0;
}

.admin-bar .site-header.is-sticky {
	top: 32px;
}

.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: calc(100% - 2 * var(--gutter));
	max-width: calc(var(--wrap) - 2 * var(--gutter));
	height: 72px;
	margin: 0 auto;
	padding: 0 16px 0 36px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 24px rgba(0, 0, 0, .07);
}

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

.site-logo {
	font-size: 29px;
	transition: opacity .2s;
}

.site-logo:hover {
	opacity: .78;
}

/* Primary menu: one row between the logo and the actions. */
.site-nav__list {
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 500 14.5px var(--sans);
}

.site-nav__list a {
	position: relative;
	display: block;
	padding: 6px 0;
	color: var(--ink);
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s;
}

.site-nav__list a:hover {
	color: var(--green-2);
	text-decoration: none;
}

.site-nav__list a:hover::after,
.site-nav__parent:hover::after {
	opacity: .45;
	transform: scaleX(1);
}

/* Active: the current page (Blogs), its section (a blog post → Blogs), or the
   Homepage section in view (aria-current="location", set by assets/js/main.js). */
.site-nav__list a::after,
.site-nav__parent::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--amber);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s var(--ease), opacity .25s;
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list a[aria-current] {
	color: var(--green);
}

.site-nav__list .current-menu-item > a::after,
.site-nav__list .current-menu-parent > a::after,
.site-nav__list .current-menu-ancestor > a::after,
.site-nav__list a[aria-current]::after,
.site-nav__list .current-menu-ancestor > .site-nav__parent::after {
	opacity: 1;
	transform: scaleX(1);
}

/* Dropdown: a top-level item with sub-items (Tools → Quick Verdict, Import).
   Opens on hover with a mouse, and on click, tap or Enter (assets/js/main.js
   adds .is-open to the item). */
.site-nav__list > li {
	position: relative;
}

.site-nav__list > .menu-item-has-children {
	display: flex;
	align-items: center;
	gap: 4px;
}

.site-nav__parent,
.site-nav__sub-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s;
}

.site-nav__parent:hover,
.site-nav__sub-toggle:hover,
.site-nav__list .is-open > .site-nav__parent,
.site-nav__list .is-open > .site-nav__sub-toggle,
.site-nav__list .current-menu-ancestor > .site-nav__parent {
	color: var(--green-2);
}

.site-nav__parent:focus-visible,
.site-nav__sub-toggle:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
	border-radius: 4px;
}

.site-nav__chevron {
	flex: none;
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s var(--ease);
}

.site-nav__list .is-open > button .site-nav__chevron {
	transform: rotate(180deg);
}

.site-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 22px);
	left: 50%;
	z-index: 2;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--line-2);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .25);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .2s, transform .2s var(--ease), visibility 0s linear .2s;
}

/* Bridges the gap under the pill so the pointer can travel into the dropdown. */
.site-nav__list .sub-menu::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 24px;
}

.site-nav__list .is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	.site-nav__list > .menu-item-has-children:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition-delay: 0s;
	}

	.site-nav__list > .menu-item-has-children:hover > button .site-nav__chevron {
		transform: rotate(180deg);
	}
}

.site-nav__list .sub-menu a {
	padding: 10px 14px;
	border-radius: 10px;
	transition: color .2s, background .2s;
}

.site-nav__list .sub-menu a::after {
	display: none;
}

.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible,
.site-nav__list .sub-menu .current-menu-item > a {
	background: var(--cream-2);
	color: var(--green);
}

/* The secondary link repeated inside the phone menu panel. */
.site-nav__extra {
	display: none;
}

.site-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 18px;
}

.site-header__link {
	color: var(--ink);
	font: 500 15px var(--sans);
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s;
}

.site-header__link:hover,
.site-header__link[aria-current="page"] {
	color: var(--green-2);
	text-decoration: none;
}

.site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--green);
	box-shadow: 0 8px 20px -10px rgba(31, 79, 73, .7);
	color: #fff;
	font: 600 14.5px/1.2 var(--sans);
	white-space: nowrap;
	text-decoration: none;
	transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}

.site-header__cta:hover {
	background: #183F3A;
	box-shadow: 0 12px 24px -10px rgba(31, 79, 73, .75);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

/* Menu button (compact layout only, see section 9). */
.nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

.nav-toggle:hover {
	border-color: #CFC7B6;
	background: var(--cream-2);
}

.nav-toggle__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nav-toggle__bars span {
	display: block;
	width: 16px;
	height: 1.6px;
	border-radius: 2px;
	background: var(--ink);
	transition: transform .2s, opacity .2s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
	transform: translateY(5.6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
	transform: translateY(-5.6px) rotate(-45deg);
}

@keyframes pcNavIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}


/* ==========================================================================
   8. Footer. Columns: Appearance → Menus → Footer links (each top-level item
   is a column heading, its sub-items the links); tagline, copyright and
   contact: Theme Options → Footer.
   ========================================================================== */
.site-footer {
	position: relative;
	margin-top: -1px; /* closes the hairline seam under a dark section */
	padding-top: 64px;
	background: var(--panel);
	color: rgba(255, 255, 255, .85);
	font: 400 14.5px/1.6 var(--sans);
}

.site-footer a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff;
	text-decoration: none;
}

.site-footer :focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

.site-footer__grid,
.site-footer__base {
	width: calc(100% - 2 * var(--gutter));
	max-width: calc(var(--wrap) - 2 * var(--gutter));
	margin: 0 auto;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(var(--site-footer-cols, 3), minmax(0, 1fr));
	gap: 32px;
	padding-bottom: 48px;
}

.site-footer__logo {
	font-size: 34px;
	transition: opacity .2s;
}

.site-footer__logo:hover {
	opacity: .8;
}

.site-footer__tag {
	margin: 12px 0 0;
	font: italic 400 17px var(--serif);
	color: rgba(255, 255, 255, .78);
}

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

.site-footer__title {
	margin: 0 0 4px;
	font-weight: 600;
	color: #fff;
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Links underline from the left on hover; the current page, or the Homepage
   section in view (aria-current="location", assets/js/main.js), keeps an amber rule. */
.site-footer__list a {
	padding-bottom: 2px;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: color .2s, background-size .3s var(--ease);
}

.site-footer__list a:hover {
	background-size: 100% 1px;
}

.site-footer__list .current-menu-item > a,
.site-footer__list .current-menu-parent > a,
.site-footer__list a[aria-current] {
	color: #fff;
	background-image: linear-gradient(var(--amber), var(--amber));
	background-size: 100% 2px;
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 13.5px;
}

.site-footer__copy {
	margin: 0;
}

/* Contact link: an envelope icon before an email address (footer.php). */
.site-footer__contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.site-footer__contact-icon {
	flex: none;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: var(--amber);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-footer a.site-footer__name {
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .3);
	text-underline-offset: .25em;
	transition: text-decoration-color .2s;
}

.site-footer a.site-footer__name:hover {
	text-decoration: underline;
	text-decoration-color: var(--amber);
}


/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 1340px) {
	.site-nav__list {
		gap: 16px;
		font-size: 14px;
	}
}

/* Compact header: the menu opens as a full-screen sheet (after apple.com's phone
   menu): the pill stays on top with the logo and the close button, the page is
   covered and doesn't scroll, and the items fade in one after another. The items
   keep the site's menu type, with Log In and the button right after them.
   Keep in step with the breakpoint in assets/js/main.js. */
@media (max-width: 1199.98px) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-header__link {
		display: none;
	}

	.site-nav {
		/* Text lines up with the logo inside the pill. */
		--site-nav-inset: calc(var(--gutter) + 36px);
		position: fixed;
		inset: 0;
		z-index: -1; /* under the pill, over the page (the header is the stacking context) */
		display: none;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
		/* --site-nav-top: the pill's bottom edge, set by assets/js/main.js. */
		padding: calc(var(--site-nav-top, var(--site-header-h)) + 12px) var(--site-nav-inset) calc(24px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
	}

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

	/* The pill sits flat on the sheet. */
	html.has-nav-open .site-header__bar {
		box-shadow: none;
	}

	/* The page behind the open menu doesn't scroll (class set by assets/js/main.js).
	   Only on <html>: a body with hidden overflow (the Homepage's overflow-x) would
	   become a scroll box of its own and unstick the header, so it is let go while
	   the page is locked (<html> already clips the sides). */
	html.has-nav-open {
		overflow: hidden;
		scrollbar-gutter: stable;
	}

	html.has-nav-open body {
		overflow: visible;
	}

	/* The site's menu type, with a hairline between items. */
	.site-nav__list {
		display: block;
	}

	.site-nav__list > li {
		border-bottom: 1px solid var(--line-2);
	}

	.site-nav__list a,
	.site-nav__parent {
		display: block;
		padding: 13px 0;
		color: var(--ink);
		font: 500 16px/1.3 var(--sans);
	}

	.site-nav__list a:hover,
	.site-nav__parent:hover {
		color: var(--green-2);
	}

	/* In the menu the active item is marked by its colour alone. */
	.site-nav__list a::after,
	.site-nav__parent::after {
		display: none;
	}

	/* Log In and the button, right after the items. */
	.site-nav__extra {
		display: block;
	}

	.site-nav__extra a {
		display: block;
		padding: 13px 0;
		border-bottom: 1px solid var(--line-2);
		color: var(--ink);
		font: 500 16px/1.3 var(--sans);
	}

	.site-nav__extra a:hover {
		color: var(--green-2);
	}

	/* The button moves from the bar into the menu. */
	.site-header__cta--bar {
		display: none;
	}

	.site-nav__extra .site-nav__cta {
		display: flex;
		margin: 18px 0 4px;
		padding: 14px 20px;
		border-bottom: 0;
		color: #fff;
		font: 600 15px/1.2 var(--sans);
	}
}

/* Tablets: the button keeps its own size (as in the header) instead of spanning the screen. */
@media (min-width: 601px) and (max-width: 1199.98px) {
	.site-nav__extra .site-nav__cta {
		display: inline-flex;
		padding: 13px 28px;
	}
}

@media (max-width: 1199.98px) {

	.site-nav__extra .site-nav__cta:hover {
		color: #fff;
	}

	/* Dropdowns (Tools) open in place, their links smaller and quieter. */
	.site-nav__list > .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
	}

	.site-nav__list > .menu-item-has-children > a {
		flex: 1;
	}

	.site-nav__parent {
		display: flex;
		flex: 1;
		justify-content: space-between;
	}

	.site-nav__sub-toggle {
		padding: 13px 4px;
	}

	.site-nav__list .sub-menu {
		position: static;
		display: none;
		flex-basis: 100%;
		min-width: 0;
		padding: 0 0 8px 14px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.site-nav__list .sub-menu::before {
		display: none;
	}

	.site-nav__list .is-open > .sub-menu {
		display: block;
		transform: none;
	}

	.site-nav__list .sub-menu > li {
		border-bottom: 0;
	}

	.site-nav__list .sub-menu a {
		padding: 10px 0;
		border-radius: 0;
		font-size: 15px;
	}

	.site-nav__list .sub-menu a:hover,
	.site-nav__list .sub-menu a:focus-visible,
	.site-nav__list .sub-menu .current-menu-item > a {
		background: none;
		color: var(--green);
	}

	.site-nav__list .current-menu-item > a,
	.site-nav__list .current-menu-ancestor > .site-nav__parent,
	.site-nav__list a[aria-current] {
		color: var(--green);
	}
}

/* Opening: the sheet fades in and the items follow, one after another. */
@keyframes pcNavSheet {
	from { opacity: 0; }
}

@keyframes pcNavItem {
	from { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: no-preference) {
	.site-nav.is-open {
		animation: pcNavSheet .24s ease both;
	}

	.site-nav.is-open .site-nav__list > li,
	.site-nav.is-open .site-nav__extra {
		animation: pcNavItem .36s var(--ease) both;
	}

	.site-nav.is-open .site-nav__list > li:nth-child(2) { animation-delay: .02s; }
	.site-nav.is-open .site-nav__list > li:nth-child(3) { animation-delay: .04s; }
	.site-nav.is-open .site-nav__list > li:nth-child(4) { animation-delay: .06s; }
	.site-nav.is-open .site-nav__list > li:nth-child(5) { animation-delay: .08s; }
	.site-nav.is-open .site-nav__list > li:nth-child(6) { animation-delay: .1s; }
	.site-nav.is-open .site-nav__list > li:nth-child(7) { animation-delay: .12s; }
	.site-nav.is-open .site-nav__list > li:nth-child(8) { animation-delay: .14s; }
	.site-nav.is-open .site-nav__list > li:nth-child(9) { animation-delay: .16s; }
	.site-nav.is-open .site-nav__list > li:nth-child(n+10) { animation-delay: .18s; }
	.site-nav.is-open .site-nav__extra { animation-delay: .2s; }
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Logo and tagline on their own row, the link columns paired underneath. */
	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header.is-sticky {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header.is-sticky {
		top: 0; /* the admin bar scrolls away on small screens */
	}

	:root {
		--site-header-h: 76px;
	}

	.site-header__bar {
		height: 62px;
		padding-left: 22px;
	}

	.site-nav {
		--site-nav-inset: calc(var(--gutter) + 22px);
	}

	.site-logo {
		font-size: 25px;
	}

	.site-footer__logo {
		font-size: 30px;
	}

	.site-header__actions {
		gap: 10px;
	}

	.site-header__cta {
		padding: 8px 13px;
		font-size: 13px;
	}

	/* Phones only: the logo centred on its own row; the link columns two by two as a
	   centred block, each reading left to right; tighter spacing; the copyright and
	   contact line stacked. */
	.site-footer {
		padding-top: 48px;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, max-content));
		justify-content: center;
		gap: 32px 40px;
		padding-bottom: 36px;
	}

	.site-footer__brand {
		text-align: center;
	}

	.site-footer__col,
	.site-footer__list {
		gap: 8px;
	}

	.site-footer__base {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding-block: 20px 24px;
		text-align: center;
	}
}


/* ==========================================================================
   10. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.splash { animation-duration: .35s; }
	.splash * { animation: none !important; }
}