/*
 * Facade base styles.
 *
 * Everything sits in cascade layers, so any unlayered CSS (child theme,
 * Additional CSS, a client stylesheet) overrides the theme without
 * specificity fights. Components read tokens only (see inc/Tokens.php).
 */
@layer fx-reset, fx-base, fx-components, fx-sections, fx-utilities;

/* ---------- Reset ---------- */
@layer fx-reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { margin: 0; }
	h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
	ul[class], ol[class] { list-style: none; padding: 0; }
	img, svg, video, picture { display: block; max-width: 100%; height: auto; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { cursor: pointer; }
	table { border-collapse: collapse; }
}

/* ---------- Base ---------- */
@layer fx-base {
	:root {
		--fx-gutter: clamp(1.25rem, 4vw, 2.5rem);
		--fx-space-section: clamp(4rem, 9vw, 8rem);
		--fx-ease: cubic-bezier(.2, .7, .2, 1);
		scroll-padding-top: calc(var(--fx-header-h, 0px) + 1rem);
	}

	/* Colour schemes: every component reads these, never the raw palette. */
	:root, .fx-scheme-default {
		--fx-bg: var(--fx-bg-base);
		--fx-fg: var(--fx-text);
		--fx-muted: var(--fx-muted-base);
		--fx-line: var(--fx-border-base);
		--fx-link: var(--fx-primary);
		--fx-btn-bg: var(--fx-primary);
		--fx-btn-fg: var(--fx-on-primary);
		--fx-tint: var(--fx-surface);
	}
	.fx-scheme-alt {
		--fx-bg: var(--fx-surface);
		--fx-fg: var(--fx-text);
		--fx-muted: var(--fx-muted-base);
		--fx-line: var(--fx-border-base);
		--fx-link: var(--fx-primary);
		--fx-btn-bg: var(--fx-primary);
		--fx-btn-fg: var(--fx-on-primary);
		--fx-tint: var(--fx-bg-base);
	}
	.fx-scheme-dark {
		--fx-bg: var(--fx-dark);
		--fx-fg: var(--fx-on-dark);
		--fx-muted: color-mix(in srgb, var(--fx-on-dark) 75%, var(--fx-dark));
		--fx-line: color-mix(in srgb, var(--fx-on-dark) 22%, var(--fx-dark));
		--fx-link: var(--fx-on-dark);
		--fx-btn-bg: var(--fx-on-dark);
		--fx-btn-fg: var(--fx-dark);
		--fx-tint: color-mix(in srgb, var(--fx-on-dark) 8%, var(--fx-dark));
		color-scheme: dark;
	}
	.fx-scheme-accent {
		--fx-bg: var(--fx-primary);
		--fx-fg: var(--fx-on-primary);
		--fx-muted: color-mix(in srgb, var(--fx-on-primary) 85%, var(--fx-primary));
		--fx-line: color-mix(in srgb, var(--fx-on-primary) 30%, var(--fx-primary));
		--fx-link: var(--fx-on-primary);
		--fx-btn-bg: var(--fx-on-primary);
		--fx-btn-fg: var(--fx-primary);
		--fx-tint: color-mix(in srgb, var(--fx-on-primary) 10%, var(--fx-primary));
	}

	body {
		background: var(--fx-bg-base);
		color: var(--fx-text);
		font-family: var(--fx-font-body);
		font-size: var(--fx-step-0);
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
	}
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--fx-font-heading);
		font-weight: var(--fx-heading-weight);
		letter-spacing: var(--fx-heading-tracking);
		line-height: 1.15;
		text-wrap: balance;
	}
	h1 { font-size: var(--fx-step-5); line-height: 1.05; }
	h2 { font-size: var(--fx-step-4); line-height: 1.1; }
	h3 { font-size: var(--fx-step-2); }
	h4 { font-size: var(--fx-step-1); }
	p, li, figcaption { text-wrap: pretty; }

	a {
		color: var(--fx-link);
		text-decoration-thickness: .08em;
		text-underline-offset: .2em;
	}
	a:hover { text-decoration-thickness: .14em; }

	:focus-visible {
		outline: 3px solid var(--fx-link);
		outline-offset: 3px;
	}
	::selection { background: var(--fx-primary); color: var(--fx-on-primary); }
	.fx-main:focus { outline: none; }

	@media (prefers-reduced-motion: no-preference) {
		html { scroll-behavior: smooth; }
	}
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: .01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: .01ms !important;
			scroll-behavior: auto !important;
		}
	}

	.screen-reader-text {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
	}
	.fx-skip-link {
		position: absolute;
		left: 1rem;
		top: -10rem;
		z-index: 1000;
		padding: .75rem 1.25rem;
		background: var(--fx-text);
		color: var(--fx-bg-base);
		font-weight: 600;
		border-radius: var(--fx-radius);
	}
	.fx-skip-link:focus { top: 1rem; }
}

/* ---------- Components ---------- */
@layer fx-components {
	.fx-container {
		width: min(100% - 2 * var(--fx-gutter), var(--fx-container));
		margin-inline: auto;
	}

	/* Sections */
	.fx-s {
		background: var(--fx-bg);
		color: var(--fx-fg);
		padding-block: var(--fx-space-section);
	}
	.fx-space-compact { --fx-space-section: clamp(2.5rem, 5vw, 4.5rem); }
	.fx-space-none { --fx-space-section: 0px; }
	/* Two consecutive sections on the same background share one gap. */
	/* Sections that paint their own background (e.g. full-bleed hero) opt out with .fx-s--own-bg. */
	.fx-scheme-default:not(.fx-s--own-bg) + .fx-scheme-default,
	.fx-scheme-alt:not(.fx-s--own-bg) + .fx-scheme-alt,
	.fx-scheme-dark:not(.fx-s--own-bg) + .fx-scheme-dark,
	.fx-scheme-accent:not(.fx-s--own-bg) + .fx-scheme-accent { padding-top: 0; }

	/* Section heading block */
	.fx-head {
		max-width: 46rem;
		margin-bottom: clamp(2rem, 4vw, 3.5rem);
	}
	.fx-head > * + * { margin-top: 1rem; }
	.fx-head .fx-text { color: var(--fx-muted); font-size: var(--fx-step-1); line-height: 1.5; }
	.fx-text > * + * { margin-top: .9em; }

	/* Long-form text */
	.fx-prose { max-width: 44rem; }
	.fx-prose > * + * { margin-top: 1.25em; }
	.fx-prose h2 { font-size: var(--fx-step-3); margin-top: 2em; }
	.fx-prose h3 { font-size: var(--fx-step-2); margin-top: 1.75em; }
	.fx-prose h4 { margin-top: 1.5em; }
	.fx-prose :is(h2, h3, h4) + * { margin-top: .6em; }
	.fx-prose ul, .fx-prose ol { padding-left: 1.25em; }
	.fx-prose li + li { margin-top: .35em; }
	.fx-prose blockquote {
		padding-left: 1.25em;
		border-left: 3px solid var(--fx-primary);
		font-size: var(--fx-step-1);
		line-height: 1.5;
	}
	.fx-prose img { border-radius: var(--fx-radius); }
	.fx-prose figcaption, .fx-prose .wp-caption-text { margin-top: .6em; color: var(--fx-muted); font-size: var(--fx-step--1); }
	.fx-prose table { width: 100%; font-size: var(--fx-step--1); }
	.fx-prose :is(th, td) { padding: .6em .75em; border-bottom: 1px solid var(--fx-line); text-align: left; }
	.fx-prose .alignleft { float: left; margin: .3em 1.5em 1em 0; }
	.fx-prose .alignright { float: right; margin: .3em 0 1em 1.5em; }
	.fx-prose .aligncenter { margin-inline: auto; }
	.fx-prose::after { content: ""; display: table; clear: both; }

	/* Buttons */
	.fx-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .75rem 1.25rem;
	}
	.fx-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .5em;
		min-height: 2.75rem;
		padding: .65em 1.35em;
		border: 2px solid var(--fx-btn-bg);
		border-radius: var(--fx-btn-radius);
		background: var(--fx-btn-bg);
		color: var(--fx-btn-fg);
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		transition: box-shadow .2s var(--fx-ease);
	}
	/* Hover tints with the button's own text colour, so it works on every scheme. */
	.fx-btn:hover { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--fx-btn-fg) 14%, transparent); }
	.fx-btn--secondary {
		background: transparent;
		border-color: currentColor;
		color: var(--fx-fg);
	}
	.fx-btn--secondary:hover { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--fx-fg) 8%, transparent); }
	.fx-textlink {
		font-weight: 600;
		color: var(--fx-link);
		text-decoration-thickness: .1em;
	}

	/* Grids and cards */
	.fx-grid {
		display: grid;
		gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fx-grid-min, 18rem)), 1fr));
	}
	.fx-grid--2 { --fx-grid-min: 24rem; }
	.fx-grid--3 { --fx-grid-min: 18rem; }
	.fx-grid--4 { --fx-grid-min: 13.5rem; }

	.fx-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	.fx-card__media {
		overflow: hidden;
		aspect-ratio: 4 / 3;
		border-radius: var(--fx-radius);
		background: var(--fx-tint);
	}
	.fx-card--person .fx-card__media { aspect-ratio: 4 / 5; }
	.fx-card__media img { width: 100%; height: 100%; object-fit: cover; }
	.fx-card__body > * + * { margin-top: .4rem; }
	.fx-card__title { font-size: var(--fx-step-1); line-height: 1.25; }
	.fx-card__link { color: inherit; text-decoration: none; }
	.fx-card__link::after { content: ""; position: absolute; inset: 0; }
	.fx-card:hover .fx-card__link { text-decoration: underline; text-decoration-thickness: .08em; }
	.fx-card__link:focus-visible { outline: none; }
	.fx-card:has(.fx-card__link:focus-visible) {
		outline: 3px solid var(--fx-link);
		outline-offset: 6px;
		border-radius: var(--fx-radius);
	}
	.fx-card__meta, .fx-card__excerpt { color: var(--fx-muted); }
	.fx-card__meta { font-size: var(--fx-step--1); }

	/* Horizontal scroll track (carousels). Works without JS: native scroll + snap. */
	.fx-track {
		position: relative; /* contains absolutely positioned descendants (e.g. screen-reader text) so they can't widen the page */
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: var(--fx-track-item, min(85%, 24rem));
		gap: var(--fx-track-gap, clamp(1rem, 2vw, 1.5rem));
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		padding-bottom: 1rem;
	}
	.fx-track > * { scroll-snap-align: start; }
	.fx-track:focus-visible { outline-offset: 6px; }
	.fx-track-controls { display: flex; gap: .5rem; }
	.fx-track-controls[hidden] { display: none; }
	.fx-track-btn {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid var(--fx-line);
		border-radius: 50%;
		background: transparent;
		color: inherit;
	}
	.fx-track-btn::before {
		content: "";
		width: .55rem;
		height: .55rem;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		rotate: 45deg;
		translate: -2px 0;
	}
	.fx-track-btn[data-fx-prev]::before { rotate: -135deg; translate: 2px 0; }
	.fx-track-btn:hover:not(:disabled) { background: var(--fx-tint); }
	.fx-track-btn:disabled { opacity: .35; cursor: default; }

	/* Forms */
	.fx-input,
	.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
		width: 100%;
		min-height: 2.75rem;
		padding: .6rem .9rem;
		border: 1px solid var(--fx-line);
		border-radius: var(--fx-radius);
		background: var(--fx-bg);
		color: var(--fx-fg);
	}
	.fx-search { display: flex; gap: .5rem; max-width: 34rem; }
	.fx-search .fx-input { flex: 1; }
	.comment-form > p + p { margin-top: 1rem; }
	.comment-form label { display: block; margin-bottom: .35rem; font-weight: 600; }
	.comment-form .submit {
		min-height: 2.75rem;
		padding: .65em 1.35em;
		border: 0;
		border-radius: var(--fx-btn-radius);
		background: var(--fx-btn-bg);
		color: var(--fx-btn-fg);
		font-weight: 600;
	}

	/* ---------- Header ---------- */
	.fx-header {
		position: relative;
		z-index: 50;
		background: var(--fx-bg-base);
		color: var(--fx-text);
		border-bottom: 1px solid transparent;
		transition: background-color .25s var(--fx-ease), border-color .25s var(--fx-ease), color .25s var(--fx-ease);
	}
	.fx-header-sticky .fx-header {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
	}
	.fx-header.is-scrolled { border-bottom-color: var(--fx-border-base); }
	.fx-header__bar {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		min-height: 4.5rem;
		padding-block: .75rem;
	}
	.fx-brand {
		display: inline-flex;
		align-items: center;
		color: inherit;
		text-decoration: none;
		font-family: var(--fx-font-heading);
		font-weight: var(--fx-heading-weight);
		font-size: var(--fx-step-1);
		letter-spacing: var(--fx-heading-tracking);
	}
	.fx-brand__logo { width: var(--fx-logo-w, 140px); height: auto; }
	.fx-brand__logo--inverse { display: none; }

	.fx-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: .65rem;
		min-height: 2.75rem;
		margin-left: auto;
		padding: .5rem 0;
		border: 0;
		background: none;
		font-weight: 600;
	}
	.fx-burger {
		position: relative;
		width: 1.35rem;
		height: 2px;
		background: currentColor;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}

	/* Mobile: the nav is a popover panel. */
	.fx-nav {
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100dvh;
		max-height: none;
		margin: 0;
		padding: 5.5rem var(--fx-gutter) 2.5rem;
		border: 0;
		background: var(--fx-bg-base);
		color: var(--fx-text);
		overflow-y: auto;
		opacity: 0;
		translate: 0 -.5rem;
		transition: opacity .2s var(--fx-ease), translate .2s var(--fx-ease), overlay .2s allow-discrete, display .2s allow-discrete;
	}
	.fx-nav:popover-open {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
		opacity: 1;
		translate: 0 0;
	}
	@starting-style {
		.fx-nav:popover-open { opacity: 0; translate: 0 -.5rem; }
	}
	.fx-nav__close {
		position: absolute;
		top: 1.15rem;
		right: var(--fx-gutter);
		min-height: 2.75rem;
		border: 0;
		background: none;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: .2em;
	}
	.fx-nav__list {
		display: flex;
		flex-direction: column;
		gap: .15rem;
		width: 100%;
		font-family: var(--fx-font-heading);
		font-size: var(--fx-step-2);
		letter-spacing: var(--fx-heading-tracking);
	}
	.fx-nav__list a {
		display: block;
		padding: .35rem 0;
		color: inherit;
		text-decoration: none;
	}
	.fx-nav__list a:hover,
	.fx-nav__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
	.fx-nav__list .sub-menu {
		padding-left: 1rem;
		font-family: var(--fx-font-body);
		font-size: var(--fx-step-0);
		letter-spacing: 0;
	}
	.fx-nav__sub-toggle { display: none; }

	@media (min-width: 64em) {
		.fx-header__toggle, .fx-nav__close { display: none; }

		.fx-nav,
		.fx-nav[popover] {
			position: static;
			display: flex;
			align-items: center;
			gap: 2rem;
			width: auto;
			height: auto;
			margin-left: auto;
			padding: 0;
			background: none;
			color: inherit;
			overflow: visible;
			opacity: 1;
			translate: none;
		}
		.fx-nav__list {
			flex-direction: row;
			align-items: center;
			gap: 1.75rem;
			width: auto;
			font-family: inherit;
			font-size: var(--fx-step-0);
			letter-spacing: 0;
		}
		.fx-nav__list > li { position: relative; display: flex; align-items: center; }
		.fx-nav__list > li > a { padding: .5rem 0; }

		.fx-nav__sub-toggle {
			display: inline-grid;
			place-items: center;
			width: 1.75rem;
			height: 1.75rem;
			margin-left: .15rem;
			padding: 0;
			border: 0;
			background: none;
		}
		.fx-nav__sub-toggle::before {
			content: "";
			width: .4rem;
			height: .4rem;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			rotate: 45deg;
			translate: 0 -2px;
			transition: rotate .2s var(--fx-ease);
		}
		.fx-nav__sub-toggle[aria-expanded="true"]::before { rotate: 225deg; translate: 0 2px; }

		.fx-nav__list .sub-menu {
			position: absolute;
			top: 100%;
			left: -1rem;
			min-width: 15rem;
			padding: .5rem;
			border: 1px solid var(--fx-border-base);
			border-radius: var(--fx-radius);
			background: var(--fx-bg-base);
			color: var(--fx-text);
			opacity: 0;
			visibility: hidden;
			translate: 0 .35rem;
			transition: opacity .15s var(--fx-ease), translate .15s var(--fx-ease), visibility .15s;
		}
		.fx-nav__list li:hover > .sub-menu,
		.fx-nav__list li:focus-within > .sub-menu,
		.fx-nav__list li.is-open > .sub-menu { opacity: 1; visibility: visible; translate: 0 0; }
		.fx-nav__list .sub-menu a { padding: .5rem .75rem; border-radius: calc(var(--fx-radius) / 2); }
		.fx-nav__list .sub-menu a:hover { background: var(--fx-surface); text-decoration: none; }

		.fx-header--centered .fx-header__bar { flex-direction: column; gap: .5rem; padding-block: 1.25rem .5rem; }
		.fx-header--centered .fx-nav { margin-inline: auto; }
	}

	/* Transparent header over a full-bleed hero */
	.fx-header-overlay .fx-header { margin-bottom: calc(-1 * var(--fx-header-h, 4.5rem)); }
	.fx-header-overlay .fx-header:not(.is-scrolled) { background: transparent; color: var(--fx-on-dark); }
	.fx-header-overlay .fx-header:not(.is-scrolled) .fx-brand.has-inverse .fx-brand__logo { display: none; }
	.fx-header-overlay .fx-header:not(.is-scrolled) .fx-brand.has-inverse .fx-brand__logo--inverse { display: block; }
	@media (min-width: 64em) {
		/* Desktop only: on mobile the CTA sits inside the light menu panel. */
		.fx-header-overlay .fx-header:not(.is-scrolled) .fx-nav__cta { --fx-btn-bg: var(--fx-on-dark); --fx-btn-fg: var(--fx-dark); }
	}

	/* ---------- Page and article ---------- */
	.fx-page-header { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
	.fx-page-header__title { max-width: 22ch; }
	.fx-page-header__intro { max-width: 60ch; margin-top: 1rem; color: var(--fx-muted); font-size: var(--fx-step-1); }

	.fx-entry { padding-bottom: var(--fx-space-section); }
	.fx-article__header { padding-block: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem); }
	.fx-article__title, .fx-article__meta, .fx-article .fx-prose, .fx-article__tags { max-width: 44rem; margin-inline: auto; }
	.fx-article__meta { margin-top: 1rem; color: var(--fx-muted); }
	.fx-article__media { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
	.fx-article__media img { width: 100%; border-radius: var(--fx-radius-lg); }
	.fx-article__tags { margin-top: 2.5rem; color: var(--fx-muted); }

	.fx-listing { padding-bottom: var(--fx-space-section); }
	.fx-listing > * + * { margin-top: 2.5rem; }
	.fx-empty { color: var(--fx-muted); font-size: var(--fx-step-1); }

	.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
	.page-numbers {
		display: inline-grid;
		place-items: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding-inline: .75rem;
		border: 1px solid var(--fx-line);
		border-radius: var(--fx-radius);
		color: inherit;
		text-decoration: none;
	}
	.page-numbers.current { background: var(--fx-fg); border-color: var(--fx-fg); color: var(--fx-bg); }
	.page-numbers.dots { border-color: transparent; }
	.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 44rem; margin-inline: auto; }
	.post-navigation .nav-next { text-align: right; }
	.post-navigation a { color: inherit; font-weight: 600; text-decoration: none; }
	.post-navigation a:hover { text-decoration: underline; }
	.fx-postnav__label { display: block; color: var(--fx-muted); font-size: var(--fx-step--1); font-weight: 400; }

	.fx-comments { max-width: 44rem; }
	.fx-comments__list { margin-block: 1.5rem 3rem; }
	.fx-comments__list .comment-body { padding-block: 1.25rem; border-bottom: 1px solid var(--fx-line); }
	.fx-comments__list .children { padding-left: 1.5rem; list-style: none; }

	/* ---------- Footer ---------- */
	.fx-footer {
		padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
		border-top: 1px solid var(--fx-line); /* keeps a dark last section and the footer apart */
		background: var(--fx-bg);
		color: var(--fx-fg);
	}
	.fx-footer a { color: inherit; }
	.fx-footer__grid {
		display: grid;
		gap: 2.5rem;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
		margin-bottom: 1.75rem;
		padding-bottom: clamp(2.5rem, 5vw, 4rem);
		border-bottom: 1px solid var(--fx-line);
	}
	@media (min-width: 64em) {
		.fx-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); }
	}
	.fx-footer__text { max-width: 34ch; margin-top: 1.25rem; color: var(--fx-muted); }
	.fx-footer__social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; }
	.fx-widget__title { margin-bottom: 1rem; font-family: var(--fx-font-body); font-size: var(--fx-step-0); font-weight: 600; letter-spacing: 0; }
	/* Block widgets (e.g. WordPress's default Archives/Categories) get the same treatment as classic ones. */
	.fx-widget :is(h2, h3, .wp-block-heading) { margin-bottom: 1rem; font-family: var(--fx-font-body); font-size: var(--fx-step-0); font-weight: 600; letter-spacing: 0; }
	.fx-widget + .fx-widget { margin-top: 2rem; }
	.fx-widget ul { display: grid; gap: .55rem; padding: 0; list-style: none; }
	.fx-widget a { text-decoration: none; }
	.fx-widget a:hover { text-decoration: underline; }
	.fx-footer__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem 2rem;
		color: var(--fx-muted);
		font-size: var(--fx-step--1);
	}
	.fx-footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
	.fx-footer--minimal .fx-footer__social { margin-top: 0; }
}

/* ---------- Utilities / motion ---------- */
@layer fx-utilities {
	/* Optional scroll reveal (Site settings → Design → Motion). CSS only, no JS. The first section never animates (LCP). */
	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: view()) {
			.fx-motion .fx-s:not(:first-child) > .fx-container {
				animation: fx-reveal linear both;
				animation-timeline: view();
				animation-range: entry 0% cover 22%;
			}
		}
	}
	@keyframes fx-reveal {
		from { opacity: 0; translate: 0 1.75rem; }
	}
}