/* -----------------------------------------------------------------------
   layout.css — site header, primary nav, mobile drawer, site footer.
   ----------------------------------------------------------------------- */

/* --------------------------------------------------------------- header */

/*
 * the design: a 1328x64 bar inset 56px from the left edge, 16px from the
 * top. On the front page it overlays the hero; elsewhere it gets a solid
 * ground so the white links stay legible.
 */
.site-header {
	position: relative;
	z-index: 100;
	width: 100%;
	background-color: var(--c-bg);
}

.site-header--overlay {
	position: absolute;
	inset: 0 0 auto 0;
	background-color: transparent;
}

/*
 * Once the reader is past the banner the bar stops being an overlay and
 * becomes a real header: pinned to the top with a ground behind it.
 *
 * initStickyHeader() has been toggling `is-scrolled` since the header was
 * built and NO rule ever read it, so the bar was transparent everywhere it
 * overlaid a photograph and then simply scrolled away — which is the
 * "transparent header across the whole site" this is fixing. It only takes
 * effect after 40px, so nothing about the resting layout changes.
 */
.site-header--overlay.is-scrolled {
	position: fixed;
	background-color: var(--c-bg);
	box-shadow: 0 1px 0 0 var(--c-line);
	animation: bbqld-header-in var(--transition) both;
}

@keyframes bbqld-header-in {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header--overlay.is-scrolled {
		animation: none;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	max-width: 1440px;
	min-height: 64px;
	margin-inline: auto;
	padding: 16px clamp(20px, 3.889vw, 56px);
}

.site-header__logo {
	flex: 0 0 auto;
	display: block;
	width: 138px;
}

/*
 * The design renders the logo inside a "Mask group" — the artwork masked to a flat
 * white fill. The bundled asset is the full-colour original, so the header,
 * footer and drawer knock it back to white the same way. The contact card
 * sits on a light panel and uses the original colours.
 */
.site-header__logo-img,
.site-footer__logo-img,
.mobile-nav__logo-img {
	filter: brightness(0) invert(1);
}

.site-header__logo-img {
	width: 138px;
	height: 64px;
	object-fit: contain;
	object-position: left center;
}

/* ------------------------------------------------------------------ nav */

.site-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 4px 24px;
	list-style: none;
	border-radius: var(--radius-pill);
}

.nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.nav__link {
	display: inline-block;
	padding: 10px 0;
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: var(--lh-body);
	white-space: nowrap;
}

.nav__link:hover,
.nav__item.is-current>.nav__link {
	color: var(--c-accent);
}

/*
 * The design draws "Solutions–" as ONE text run, so the indicator takes the label's
 * colour: on the current page both are red. It used to stay white while the
 * label went red.
 */
.nav__item.is-current>.nav__toggle {
	color: var(--c-accent);
}

/*
 * The design marks parent items with a trailing "+". It is decorative, so it
 * is drawn on the toggle rather than baked into the link label.
 */
/*
 * The design sets the indicator as a character in the label's own run —
 * "Solutions–", "Customers+" — so it is rendered as a glyph in the same face,
 * size and weight with no gap, rather than drawn from two 1px bars. It is
 * decorative: the button carries aria-expanded and an aria-label.
 */
.nav__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: var(--lh-body);
}

.nav__toggle-icon::before {
	content: "+";
}

.nav__item--has-children.is-open>.nav__toggle .nav__toggle-icon::before {
	content: "\2013";
}

/*
 * "Solutions–" is ONE text run in the design, so the label and the indicator
 * change colour together — always, not only when the pointer happens to be on
 * the half it is over.
 *
 * The two are separate elements (a link and a button, so the panel can be
 * opened without following the link), and each carried its own :hover. Hovering
 * the LABEL therefore reddened the label and left the sign dark beside it, and
 * an open panel reddened neither — the red in that state was only ever the
 * label's own hover. Both now hang off the ITEM, which is the box that owns the
 * pair, so whichever half is pointed at, and whether the panel is open by
 * pointer or by keyboard, the run changes as one.
 */
.nav__item:hover>.nav__link,
.nav__item:hover>.nav__toggle,
.nav__item:focus-within>.nav__link,
.nav__item:focus-within>.nav__toggle,
.nav__item--has-children.is-open>.nav__link,
.nav__item--has-children.is-open>.nav__toggle {
	color: var(--c-accent);
}

/* ----------------------------------------------- primary nav panels ---
   the design (mega) and
   "Menu - Resources" (compact dropdown). Both are white panels that sit 6px
   under the 96px header; the mega one is pinned to the 1280px container, the
   compact one is centred on its trigger.
   ---------------------------------------------------------------------- */

/* A mega panel spans the container, so its item must not be the offset
   parent; a compact panel aligns to its trigger, so that one must be. */
.nav__item--mega {
	position: static;
}

.nav__item--dropdown {
	position: relative;
}

.nav-panel {
	position: absolute;
	top: calc(100% + 6px);
	z-index: 50;
	background-color: var(--white);
	color: var(--c-ink-dark);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

/* the design: 1280x400 at the container's left edge. */
.nav-panel--mega {
	left: 50%;
	width: min(var(--container-max), calc(100vw - var(--gutter) * 2));
	min-height: 400px;
	transform: translateX(-50%) translateY(-6px);
}

.nav-panel--dropdown {
	left: 50%;
	min-width: 255px;
	transform: translateX(-50%) translateY(-6px);
}

.nav__item--has-children:hover>.nav-panel,
.nav__item--has-children:focus-within>.nav-panel,
.nav__item--has-children.is-open>.nav-panel {
	opacity: 1;
	visibility: visible;
}

.nav__item--mega:hover>.nav-panel,
.nav__item--mega:focus-within>.nav-panel,
.nav__item--mega.is-open>.nav-panel,
.nav__item--dropdown:hover>.nav-panel,
.nav__item--dropdown:focus-within>.nav-panel,
.nav__item--dropdown.is-open>.nav-panel {
	transform: translateX(-50%) translateY(0);
}

/* The design: 48px padding; columns 324 / 380 / image, 48px apart. */
.nav-panel--mega .nav-panel__inner {
	display: grid;
	grid-template-columns: 324px 380px 1fr;
	column-gap: 48px;
	align-items: start;
	padding: 48px;
}

.nav-panel__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.nav-panel__heading {
	color: var(--c-ink-dark);
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.nav-panel__description {
	color: var(--description);
	font-size: var(--fs-small);
	font-weight: 300;
	line-height: var(--lh-body);
}

.nav-panel__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-panel__list .nav__item {
	display: block;
}

/* The design: 6px vertical padding over a 1px rule; the row turns primary red on
   hover and reveals a trailing arrow. */
.nav-panel--mega .nav-panel__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	color: var(--description);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-body);
	border-bottom: 1px solid var(--c-border);
	transition: color var(--transition), border-color var(--transition);
}

/*
 * The same arrow-right the sliders use, at the row's own text size. The row is
 * already a flex line with a 6px gap, so the span only has to stop being a
 * text box and become the glyph.
 */
.nav-panel__arrow {
	display: inline-flex;
	align-items: center;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--transition), transform var(--transition);
}

.nav-panel__arrow svg {
	display: block;
	width: 1em;
	height: 1em;
}

.nav-panel--mega .nav-panel__link:hover,
.nav-panel--mega .nav-panel__link:focus-visible,
.nav-panel__list .is-current>.nav-panel__link {
	color: var(--c-accent);
	border-bottom-color: var(--c-accent);
}

.nav-panel__link:hover .nav-panel__arrow,
.nav-panel__link:focus-visible .nav-panel__arrow,
.is-current>.nav-panel__link .nav-panel__arrow {
	opacity: 1;
	transform: translateX(0);
}

/* The design: 370x351, inset 24px from the panel edge (the panel pads 48px). */
.nav-panel__media {
	display: flex;
	justify-content: flex-end;
	margin: -24px -24px -24px 0;
}

/* the design: 370x351, inset 24px from the panel's top and right. */
.nav-panel__frame {
	position: relative;
	display: block;
	width: 370px;
	height: 351px;
}

.nav-panel__image {
	width: 370px;
	height: 351px;
	object-fit: cover;
}

/*
 * the design: the line drawing over the photograph — 304x228 at the
 * image's bottom-left corner (y 123..351 of a 351-tall image, so flush to its
 * foot). It is a different crop of the same artwork the solution cards use,
 * which is why it has its own file rather than sharing theirs.
 */
.nav-panel__lines {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 304px;
	height: 228px;
	background-image: url("../icons/mega-panel-lines.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	display: none;
	/* hidden as per clients request */
}

/* --- compact dropdown (Resources, Locations) --- */

.nav-panel--dropdown .nav-panel__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
}

.nav-panel--dropdown .nav-panel__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	color: var(--description);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-body);
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition);
}

/* The design: the active row takes a 10% primary tint. */
.nav-panel--dropdown .nav-panel__link:hover,
.nav-panel--dropdown .nav-panel__link:focus-visible,
.nav-panel--dropdown .is-current>.nav-panel__link {
	background-color: rgba(233, 30, 34, 0.1);
	color: var(--c-accent);
}

.nav-panel__viewall {
	padding: 16px 8px 4px;
	color: var(--description);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: var(--lh-body);
	white-space: nowrap;
	border-top: 1px solid var(--c-border);
	transition: color var(--transition);
}

.nav-panel__viewall:hover {
	color: var(--c-accent);
}

/* Buttons on the white panel need the brackets in primary, not white. */
.btn--on-panel::before {
	background-image: url("../icons/bracket-tl-primary.svg");
}

.btn--on-panel::after {
	background-image: url("../icons/bracket-br-primary.svg");
}

/* Below the container width the mega panel drops its image column. */
@media (max-width: 1300px) {
	.nav-panel--mega .nav-panel__inner {
		grid-template-columns: 300px 1fr;
		column-gap: 32px;
		padding: 32px;
	}

	.nav-panel__media {
		display: none;
	}
}

.site-header__cta {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------- burger */

/*
 * the design: a 44x44 tap target holding a 22 x 13.75
 * glyph — three bars 2.75 tall, 2.75 apart, with fully rounded ends
 * (radius 1.375). The build had 1.5px square bars 5px apart in a 24px box,
 * which read as a much lighter, wider icon than the design's.
 */
.site-header__burger {
	position: relative;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.75px;
	width: 44px;
	height: 44px;
	padding: 0;
	z-index: 210;
}

.site-header__burger-bar {
	display: block;
	width: 22px;
	height: 2.75px;
	background-color: var(--c-ink);
	border-radius: 1.375px;
	transition: transform var(--transition), opacity var(--transition);
}

/*
 * the design: the open state is its own 24x24 solid glyph,
 * flush with the 24px gutter — not the three bars rotated into a cross, which
 * came out 22 wide with rounded ends and sat 10px left of the design's mark.
 */
.site-header__burger[aria-expanded="true"] .site-header__burger-bar {
	display: none;
}

.site-header__burger[aria-expanded="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 24px;
	height: 24px;
	background-image: url("../icons/menu-close.svg");
	background-repeat: no-repeat;
	background-size: 24px 24px;
	transform: translateY(-50%);
}

/* ---------------------------------------------------------- mobile nav */

/*
 * the design: a white panel inset 16px left and right,
 * starting 88px from the top so the logo and close button stay visible over
 * the page behind it.
 */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
}

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

.mobile-nav__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity var(--transition);
}

.mobile-nav.is-open .mobile-nav__backdrop {
	opacity: 1;
}

.mobile-nav__panel {
	position: absolute;
	top: 88px;
	right: 16px;
	left: 16px;
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-height: calc(100dvh - 104px);
	padding: 32px 24px;
	overflow-y: auto;
	background-color: var(--white);
	color: var(--c-ink-dark);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--transition), transform var(--transition);
}

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

/* --- the menu list, re-laid-out from the shared walker output --- */

.nav__list--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	padding: 0;
}

/* The design: the +/- follows the label immediately; it is not pushed to the edge. */
.nav__list--mobile>.nav__item {
	position: static;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

/* The design: a rule under every top-level item except the last. */
.nav__list--mobile>.nav__item:not(:last-child)::after {
	content: "";
	order: 5;
	width: 100%;
	height: 1px;
	margin-top: 16px;
	background-color: var(--c-border);
}

.nav__list--mobile .nav__link {
	flex: 0 1 auto;
	padding: 0;
	color: var(--c-ink-dark);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: var(--lh-body);
	white-space: normal;
}

.nav__list--mobile .nav__link:hover,
.nav__list--mobile .is-current>.nav__link {
	color: var(--c-accent);
}

.nav__list--mobile .nav__toggle {
	min-width: 24px;
	min-height: 24px;
	margin-left: 4px;
	color: var(--c-ink-dark);
	font-size: var(--fs-body);
}

.nav__list--mobile>.nav__item.is-current>.nav__toggle {
	color: var(--c-accent);
}

/* The same pairing in the drawer, where the sign is a real +/- control and an
   open section is the common state rather than the exception. */
.nav__list--mobile>.nav__item--has-children.is-open>.nav__link,
.nav__list--mobile>.nav__item--has-children.is-open>.nav__toggle,
.nav__list--mobile>.nav__item:focus-within>.nav__link,
.nav__list--mobile>.nav__item:focus-within>.nav__toggle {
	color: var(--c-accent);
}

/* The panel becomes a plain in-flow block on mobile. */
.nav__list--mobile .nav-panel {
	position: static;
	order: 4;
	width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--transition-slow);
}

/*
 * The red "View All ..." button's corner brackets sit 4px outside it, and both
 * of these boxes must clip for the collapse animation — so the clip region is
 * pushed out 8px with `overflow-clip-margin`, which does exactly this without
 * touching layout. Padding and negative margins were tried first and cannot
 * work here: the negative margin shrinks the grid row by the same amount it
 * gains, so the bottom bracket stayed cropped.
 *
 * `overflow: hidden` is kept first so a browser without `clip` still collapses.
 */
.nav__list--mobile .nav-panel,
.nav__list--mobile .nav-panel__inner {
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 8px;
}

.nav__list--mobile .nav__item--has-children.is-open>.nav-panel {
	grid-template-rows: 1fr;
	transform: none;
}

/*
 * grid-template-rows:0fr clips the panel visually but leaves its links in the
 * tab order and the accessibility tree, so collapsed content is also hidden
 * with visibility — which is animatable and does remove it from both.
 */
.nav__list--mobile .nav-panel__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	padding: 0;
	visibility: hidden;
	transition: visibility var(--transition-slow);
}

.nav__list--mobile .nav__item--has-children.is-open>.nav-panel .nav-panel__inner {
	visibility: visible;
}

/*
 * On mobile the mega panel keeps only its link list and its red button — the
 * heading, description and image are desktop-only. `display: contents` lifts
 * the button out of the intro block so it can be ordered after the links, the
 * way "Menu [Expanded]" shows it.
 */
.nav__list--mobile .nav-panel__intro {
	display: contents;
}

.nav__list--mobile .nav-panel__heading,
.nav__list--mobile .nav-panel__description,
.nav__list--mobile .nav-panel__media {
	display: none;
}

.nav__list--mobile .nav-panel__list {
	order: 1;
	gap: 16px;
	padding-top: 16px;
}

.nav__list--mobile .nav-panel__cta,
.nav__list--mobile .nav-panel__viewall {
	order: 2;
}

.nav__list--mobile .nav-panel__link,
.nav__list--mobile .nav-panel--mega .nav-panel__link,
.nav__list--mobile .nav-panel--dropdown .nav-panel__link {
	display: block;
	padding: 0;
	color: var(--c-ink-dark);
	font-size: var(--fs-small);
	font-weight: 300;
	line-height: var(--lh-body);
	white-space: normal;
	background: none;
	border: 0;
}

.nav__list--mobile .nav-panel__link:hover {
	color: var(--c-accent);
	background: none;
}

.nav__list--mobile .nav-panel__arrow {
	display: none;
}

/* Both panel styles show their red CTA in the expanded group on mobile. */
.nav__list--mobile .nav-panel__cta {
	align-self: flex-start;
}

.nav__list--mobile .nav-panel__viewall {
	align-self: flex-start;
	padding: 0;
	border: 0;
}

.mobile-nav__cta {
	align-self: flex-start;
}

body.has-mobile-nav-open {
	overflow: hidden;
}

/* --------------------------------------------------------------- footer */

/*
 * the design: 64px top / 24px bottom padding, an 80px gap between the
 * link block and the copyright row, over a very faint decorative vector.
 */
.site-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--c-bg);
}

/*
 * the design: a 1440x818 shape drawn from the footer's top
 * edge and centred, so it overflows the band and is cropped by it. NOT a cover
 * fill, and it carries its own 2% opacity inside the file — the rule this
 * replaces stretched a 1440x451 export (the artwork cropped to the frame) and
 * then multiplied a second 0.02 on top, leaving it 0.04% visible.
 */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1440px;
	height: 818px;
	background-image: url("../icons/footer-shapes.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform: translateX(-50%);
	pointer-events: none;
}

.site-footer__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 80px;
	max-width: calc(var(--container-max) + var(--gutter) * 2);
	margin-inline: auto;
	padding: 64px var(--gutter) 24px;
}

.site-footer__top {
	display: flex;
	align-items: flex-start;
	gap: 104px;
}

.site-footer__logo {
	flex: 0 0 138px;
}

.site-footer__logo-img {
	width: 138px;
	height: 64px;
	object-fit: contain;
	object-position: left center;
}

.site-footer__columns {
	display: flex;
	flex: 1 1 auto;
	justify-content: space-between;
	gap: 8px;
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.footer-col--links,
.footer-col--socials {
	flex: 0 1 194px;
}

.footer-col--contact {
	flex: 0 1 276px;
}

.footer-col--socials {
	flex-basis: 148px;
}

.footer-col__title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

.footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
}

.footer__links li,
.footer__links a {
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-body);
	opacity: 0.8;
}

.footer__links a:hover {
	opacity: 1;
	color: var(--c-accent);
}

/* wp_nav_menu adds its own item classes; keep them inheriting the list rules. */
.footer__links .menu-item {
	list-style: none;
}

.footer__socials {
	display: flex;
	align-items: center;
	gap: 16px;
	list-style: none;
}

.footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--c-ink);
	opacity: 0.8;
}

.footer__social:hover {
	opacity: 1;
	color: var(--c-accent);
}

.site-footer__bottom {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--c-line);
}

.site-footer__copyright,
.site-footer__credit {
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 300;
	line-height: var(--lh-body);
	opacity: 0.8;
}

/* The design sets the whole row to whitespace-pre, so the credit keeps its two
   lines rather than wrapping mid-phrase in the narrow mobile column. */
.site-footer__credit {
	text-align: right;
	white-space: nowrap;
}

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

.site-footer__credit a:hover {
	color: var(--c-accent);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1200px) {
	.site-header__inner {
		gap: 20px;
	}

	.nav__list {
		gap: 16px;
		padding: 4px 0;
	}

	.site-footer__top {
		gap: 48px;
	}

	.site-footer__columns {
		flex-wrap: wrap;
		gap: 40px;
	}

	.footer-col--links,
	.footer-col--contact,
	.footer-col--socials {
		flex: 0 1 calc(33.333% - 27px);
	}
}

@media (max-width: 1024px) {

	.site-nav,
	.site-header__cta {
		display: none;
	}

	.site-header__burger {
		display: flex;
	}

	/*
	 * the design: 390x88 — a 342x56 row inset 24px
	 * horizontally and 16px vertically, with a 1px rule at 20% white beneath
	 * it. The logo is 122x56 and the burger's 44x44 box is flush right.
	 */
	.site-header {
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.site-header__inner {
		justify-content: space-between;
		min-height: 56px;
		padding: 16px 24px;
	}

	.site-header__logo,
	.site-header__logo-img {
		width: 122px;
	}

	.site-header__logo-img {
		height: 56px;
	}

	.site-footer__logo {
		flex: auto;
	}
}

/*
 * Mobile footer: one column throughout — logo, then the five
 * blocks stacked 48px apart. Padding 24/48/20, section gap 48, logo -> blocks
 * 40, heading -> links 16, links 8, social icons 12. The copyright row stays
 * on ONE line with the credit at the right, as the mobile frame draws it.
 */
@media (max-width: 768px) {
	.site-footer__inner {
		gap: 48px;
		padding: 48px var(--gutter) 20px;
	}

	.site-footer__top {
		flex-direction: column;
		gap: 40px;
	}

	.site-footer__columns {
		flex-direction: column;
		gap: 48px;
	}

	.footer-col--links,
	.footer-col--contact,
	.footer-col--socials {
		flex: 0 0 auto;
		width: 100%;
	}

	.footer-col {
		gap: 16px;
	}

	.footer__links {
		gap: 8px;
	}

	.footer__socials {
		gap: 12px;
	}

	/* the design on the mobile frame: 744x422 at top 655, its centre
	   135px left of the section's. */
	.site-footer::before {
		top: 655px;
		left: calc(50% - 135px);
		width: 744px;
		height: 422px;
	}
}

/*
 * The mobile frame IS 390 wide and specifies a 122x56 logo, so there is no
 * smaller step to make — this block used to shrink it to 110x50, which pulled
 * the header row down to 82 and broke the panel's 88px top offset.
 */

/* ============================================== generic inner templates ===
   page.php / single.php / archive.php / 404.php share this chrome.
   ======================================================================= */

.page-hero {
	padding: calc(var(--header-height) + 40px) 0 40px;
}

.page-hero--tall {
	padding-bottom: 96px;
}

.page-hero .container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.page-hero__title {
	font-family: var(--font-heading);
	text-transform: uppercase;
}

.page-hero__intro {
	max-width: 60ch;
	opacity: 0.8;
}

.page-body {
	padding-bottom: 80px;
}

.page-figure {
	margin: 0 0 40px;
}

.prose {
	max-width: 72ch;
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: var(--lh-body);
}

.prose>*+* {
	margin-top: 1.25em;
}

.prose h2 {
	font-size: var(--fs-h3);
}

.prose h3 {
	font-size: var(--fs-h4);
}

.prose a {
	text-decoration: underline;
}

.prose a:hover {
	color: var(--c-accent);
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

.prose li+li {
	margin-top: 0.5em;
}

.post-list {
	padding-bottom: 80px;
}

.empty-state {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 64px 0;
}

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.pagination .nav-links {
	display: flex;
	gap: 12px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--c-line);
	font-size: var(--fs-small);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background-color: var(--white);
	color: var(--c-ink-dark);
}