/*
 * Aetheria — design system and site shell.
 *
 * Two things about this file are deliberate and worth stating up front.
 *
 * 1. The page has one accent. Amber. The indigo, rose, mint and cyan tokens
 *    below are not a second brand colour — the particle field ships five named
 *    palettes and the case studies carry real colour specifications, so those
 *    hues are carrying data. If a value here is a hue, it means something.
 *
 * 2. The site lays out against a fixed instrument rail on the left rather than
 *    as a stack of centred sections. The rail carries the section index and the
 *    live engine readout, which is what lets every section below open
 *    differently instead of repeating one eyebrow-and-headline pattern eight
 *    times over. Below 1200px the rail folds into the header and the content
 *    takes the full width.
 */

:root {
	/* Ground */
	--ae-void: #07080b;
	--ae-deep: #0b0d13;
	--ae-panel: rgba( 20, 23, 32, 0.72 );
	--ae-panel-solid: #14171f;
	--ae-raise: rgba( 255, 255, 255, 0.04 );
	--ae-hair: rgba( 255, 255, 255, 0.09 );
	--ae-hair-2: rgba( 255, 255, 255, 0.16 );

	/* Ink — measured against both the void and the panel */
	--ae-white: #f4f6fb;
	--ae-fog: #a8b0c2;
	--ae-dim: #7c8497;

	/* The accent */
	--ae-amber: #f2b23c;
	--ae-amber-lo: #c98a1c;
	--ae-amber-glow: rgba( 242, 178, 60, 0.22 );

	/* Data channels — palettes, states, spec swatches. Not brand colours. */
	--ae-indigo: #7c83f5;
	--ae-rose: #f2758f;
	--ae-mint: #4fd1a5;
	--ae-cyan: #56c8ec;

	/* Type */
	--ae-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
	--ae-text: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
	--ae-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* One scale, base 17 / ratio ~1.3, seven steps. Nothing outside this set. */
	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: 1.0625rem;
	--t-md: 1.375rem;
	--t-lg: 1.875rem;
	--t-xl: clamp( 2.125rem, 3.6vw, 2.75rem );
	--t-2xl: clamp( 2.375rem, 4.4vw, 3.5rem );

	/* Spacing — 4px base, nothing off-grid */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
	--s-10: 8rem;

	--ae-radius: 4px;
	--ae-radius-lg: 10px;

	--ae-rail: 15rem;
	--ae-gutter: clamp( 1.25rem, 4vw, 3rem );
	--ae-max: 78rem;

	--ae-ease: cubic-bezier( 0.16, 1, 0.3, 1 );
	--ae-fast: 200ms;
	--ae-slow: 620ms;
}

/* ---------------------------------------------------------------- reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var( --ae-void );
	color: var( --ae-fog );
	font-family: var( --ae-text );
	font-size: var( --t-base );
	font-weight: 400;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

::selection {
	background: var( --ae-amber-glow );
	color: var( --ae-white );
}

img,
svg,
video,
canvas { max-width: 100%; height: auto; display: block; }

a { color: var( --ae-amber ); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var( --ae-white ); }

:focus-visible {
	outline: 2px solid var( --ae-amber );
	outline-offset: 3px;
	border-radius: 2px;
}

button { font: inherit; color: inherit; }

.ae-skip {
	position: absolute;
	left: -9999px;
	z-index: 200;
	padding: var( --s-3 ) var( --s-5 );
	background: var( --ae-amber );
	color: var( --ae-void );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
}
.ae-skip:focus { left: var( --s-4 ); top: var( --s-4 ); }

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

/* ----------------------------------------------------------- typography */

h1, h2, h3, h4, h5, h6 {
	font-family: var( --ae-display );
	font-weight: 700;
	color: var( --ae-white );
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 0 0 var( --s-4 );
}

h1 { font-size: var( --t-2xl ); font-weight: 800; }
h2 { font-size: var( --t-xl ); }
h3 { font-size: var( --t-lg ); }
h4 { font-size: var( --t-md ); letter-spacing: -0.01em; }
h5, h6 { font-size: var( --t-base ); letter-spacing: 0; }

p { margin: 0 0 var( --s-4 ); }
p:last-child { margin-bottom: 0; }

strong, b { color: var( --ae-white ); font-weight: 600; }
em, i { font-style: italic; }

.ae-lede {
	font-size: var( --t-md );
	line-height: 1.5;
	font-weight: 300;
	color: var( --ae-fog );
	max-width: 46ch;
}

.ae-prose { max-width: 68ch; }
.ae-prose h2 { margin-top: var( --s-7 ); }
.ae-prose h3 { margin-top: var( --s-6 ); }
.ae-prose ul,
.ae-prose ol { margin: 0 0 var( --s-4 ); padding-left: 1.4em; }
.ae-prose li { margin-bottom: var( --s-2 ); }
.ae-prose blockquote {
	margin: var( --s-6 ) 0;
	padding-left: var( --s-5 );
	border-left: 2px solid var( --ae-amber );
	font-size: var( --t-md );
	font-weight: 300;
	color: var( --ae-white );
}
.ae-prose code {
	font-family: var( --ae-mono );
	font-size: 0.9em;
	background: var( --ae-raise );
	padding: 0.15em 0.4em;
	border-radius: 3px;
}
.ae-prose pre {
	background: var( --ae-panel-solid );
	border: 1px solid var( --ae-hair );
	padding: var( --s-5 );
	border-radius: var( --ae-radius );
	overflow-x: auto;
}
.ae-prose pre code { background: none; padding: 0; }
.ae-prose img { border-radius: var( --ae-radius ); }
.ae-prose figcaption {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	padding-top: var( --s-2 );
}
.ae-prose table { width: 100%; border-collapse: collapse; font-size: var( --t-sm ); }
.ae-prose th,
.ae-prose td { padding: var( --s-3 ); border-bottom: 1px solid var( --ae-hair ); text-align: left; }
.ae-prose th { color: var( --ae-white ); font-weight: 600; }

/*
 * Numeric readouts. The mono face earns its place by lining up digits that
 * actually change — timings, counts, spec values — not by labelling every
 * heading on the page.
 */
.ae-num {
	font-family: var( --ae-mono );
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.ae-tag {
	display: inline-block;
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.08em;
	color: var( --ae-dim );
	text-transform: uppercase;
}

/* --------------------------------------------------------------- layout */

.ae-shell {
	position: relative;
	z-index: 2;
	min-height: 100vh;
}

.ae-wrap {
	width: 100%;
	max-width: var( --ae-max );
	margin-inline: auto;
	padding-inline: var( --ae-gutter );
}

.ae-section { padding-block: var( --s-9 ); }
.ae-section--tight { padding-block: var( --s-8 ); }

@media ( min-width: 1200px ) {
	.ae-section { padding-block: var( --s-9 ); }
	.ae-section--tight { padding-block: var( --s-8 ); }
}

/* ---------------------------------------------------- the particle field */

#ae-field {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	display: block;
}

/*
 * The field lives behind everything, so nothing above it may paint an opaque
 * background of its own — that is the bug that has hidden a fixed canvas
 * before. Sections that need to sit on something solid do it with a panel.
 */
.ae-has-field .ae-shell { background: transparent; }

/*
 * Grain. Rendered as a live SVG filter element rather than a base64 data URI
 * in the stylesheet — same result, but it stays readable and it does not push
 * a kilobyte of encoded noise through the CSS parser on every page.
 */
.ae-grain {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.38;
	mix-blend-mode: overlay;
}
.ae-grain svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ the panel */

.ae-panel {
	position: relative;
	background: var( --ae-panel );
	-webkit-backdrop-filter: blur( 22px ) saturate( 165% );
	backdrop-filter: blur( 22px ) saturate( 165% );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius-lg );
}

/*
 * backdrop-filter establishes a containing block for fixed descendants.
 * Nothing position:fixed may live inside a panel; the rail and the cursor are
 * siblings of the shell for exactly this reason.
 */

.ae-panel--lit { border-color: var( --ae-hair-2 ); }

/* ------------------------------------------------------------- controls */

.ae-btn {
	display: inline-flex;
	align-items: center;
	gap: var( --s-2 );
	padding: 0.875rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var( --ae-radius );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform var( --ae-fast ) var( --ae-ease ),
	            background-color var( --ae-fast ) var( --ae-ease ),
	            border-color var( --ae-fast ) var( --ae-ease ),
	            color var( --ae-fast ) var( --ae-ease );
}

.ae-btn--solid {
	background: var( --ae-amber );
	color: var( --ae-void );
}
.ae-btn--solid:hover {
	background: #ffc95e;
	color: var( --ae-void );
	transform: translateY( -2px );
}

.ae-btn--ghost {
	background: var( --ae-raise );
	border-color: var( --ae-hair-2 );
	color: var( --ae-white );
}
.ae-btn--ghost:hover {
	background: rgba( 255, 255, 255, 0.09 );
	border-color: var( --ae-amber );
	color: var( --ae-white );
	transform: translateY( -2px );
}

/*
 * Inline SVG with no intrinsic size fills its parent. Every icon in this theme
 * takes its box from here, once, rather than from each call site.
 */
.ae-icon {
	width: 1em;
	height: 1em;
	flex: none;
	display: inline-block;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ae-field-input {
	width: 100%;
	padding: 0.8rem 1rem;
	background: rgba( 255, 255, 255, 0.045 );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	color: var( --ae-white );
	font-family: var( --ae-text );
	font-size: var( --t-sm );
	transition: border-color var( --ae-fast ) var( --ae-ease );
}
.ae-field-input::placeholder { color: var( --ae-dim ); }
.ae-field-input:focus { border-color: var( --ae-amber ); outline: none; }
textarea.ae-field-input { resize: vertical; min-height: 6.5rem; }

.ae-label {
	display: block;
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.06em;
	color: var( --ae-fog );
	margin-bottom: var( --s-2 );
}

/* ------------------------------------------------------- header + rail */

.ae-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-block: var( --s-4 );
	transition: background-color var( --ae-slow ) var( --ae-ease ),
	            border-color var( --ae-slow ) var( --ae-ease ),
	            padding var( --ae-slow ) var( --ae-ease );
	border-bottom: 1px solid transparent;
}

.ae-header.is-stuck {
	background: rgba( 7, 8, 11, 0.86 );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
	border-bottom-color: var( --ae-hair );
	padding-block: var( --s-3 );
}

.ae-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --s-5 );
}

.ae-brand {
	display: inline-flex;
	align-items: center;
	gap: var( --s-3 );
	text-decoration: none;
	color: var( --ae-white );
}
.ae-brand__mark { width: 2.25rem; height: 2.25rem; flex: none; }
.ae-brand__name {
	font-family: var( --ae-display );
	font-weight: 800;
	font-size: var( --t-base );
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
}
.ae-brand__sub {
	display: block;
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ae-dim );
	margin-top: 0.35rem;
}
.ae-brand:hover .ae-brand__name { color: var( --ae-amber ); }

.ae-nav { display: none; }

@media ( min-width: 62rem ) {
	.ae-nav { display: block; }
	.ae-nav ul {
		display: flex;
		align-items: center;
		gap: var( --s-1 );
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.ae-nav a {
		display: block;
		padding: 0.55rem 0.9rem;
		font-size: var( --t-sm );
		font-weight: 500;
		color: var( --ae-fog );
		text-decoration: none;
		border-radius: var( --ae-radius );
		transition: color var( --ae-fast ) var( --ae-ease ), background-color var( --ae-fast ) var( --ae-ease );
	}
	.ae-nav a:hover,
	.ae-nav .current-menu-item > a,
	.ae-nav .current_page_item > a {
		color: var( --ae-white );
		background: var( --ae-raise );
	}
}

.ae-header__tools {
	display: flex;
	align-items: center;
	gap: var( --s-2 );
}

.ae-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --s-2 );
	min-width: 2.4rem;
	height: 2.4rem;
	padding-inline: 0.6rem;
	background: var( --ae-raise );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	color: var( --ae-fog );
	cursor: pointer;
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	transition: color var( --ae-fast ) var( --ae-ease ), border-color var( --ae-fast ) var( --ae-ease );
}
.ae-tool:hover { color: var( --ae-white ); border-color: var( --ae-hair-2 ); }
.ae-tool[aria-pressed="true"] { color: var( --ae-amber ); border-color: var( --ae-amber ); }

.ae-burger { display: inline-flex; }
@media ( min-width: 62rem ) { .ae-burger { display: none; } }

/*
 * Below the nav breakpoint the header bar carried a wordmark, a sub-line, two
 * sound toggles, a labelled call to action and a burger — measured at 390px it
 * overran the viewport by 153px on every page of the site. The sub-line and
 * the ambient toggle go; the call to action keeps its icon and drops its
 * label; the drawer carries the rest.
 */
@media ( max-width: 61.99rem ) {
	.ae-brand__sub { display: none; }
	.ae-header__tools [data-ae-ambient] { display: none; }
	.ae-header__tools .ae-btn { padding-inline: 0.7rem; }
	.ae-header__tools .ae-btn__label { display: none; }
}
/*
 * 390px — the common phone width — is 24.375rem, so a breakpoint at 24rem
 * misses it entirely. Measured after the first fix, the bar was still 9px
 * over; the wordmark's tracking is what closes the gap.
 */
@media ( max-width: 30rem ) {
	.ae-header__bar { gap: var( --s-3 ); }
	.ae-brand { gap: var( --s-2 ); }
	.ae-brand__name { font-size: var( --t-sm ); letter-spacing: 0.14em; }
	.ae-brand__mark { width: 2rem; height: 2rem; }
}
@media ( max-width: 22rem ) {
	.ae-header__tools [data-ae-mute] { display: none; }
}

/* The drawer carries what the bar had to drop. */
.ae-drawer__cta {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: var( --s-4 );
}

.ae-drawer {
	display: none;
	margin-top: var( --s-4 );
	padding: var( --s-4 );
}
.ae-drawer.is-open { display: block; }
.ae-drawer ul { list-style: none; margin: 0; padding: 0; }
.ae-drawer a {
	display: flex;
	justify-content: space-between;
	padding: var( --s-3 ) var( --s-2 );
	color: var( --ae-white );
	text-decoration: none;
	border-bottom: 1px solid var( --ae-hair );
	font-size: var( --t-sm );
}
.ae-drawer li:last-child a { border-bottom: 0; }

/*
 * The instrument rail. Fixed, left, desktop only. It is the theme's structural
 * signature: it holds the section index and the live engine telemetry, which
 * is why no section below needs a decorative eyebrow of its own.
 */
.ae-rail { display: none; }

@media ( min-width: 1200px ) {
	.ae-rail {
		display: flex;
		flex-direction: column;
		gap: var( --s-6 );
		position: fixed;
		top: 50%;
		left: var( --s-6 );
		transform: translateY( -50% );
		width: var( --ae-rail );
		z-index: 30;
	}

	.ae-rail__index { list-style: none; margin: 0; padding: 0; }
	.ae-rail__index a {
		display: grid;
		grid-template-columns: 2.25rem 1fr;
		align-items: baseline;
		gap: var( --s-2 );
		padding: 0.3rem 0;
		font-family: var( --ae-mono );
		font-size: var( --t-xs );
		letter-spacing: 0.04em;
		color: var( --ae-dim );
		text-decoration: none;
		transition: color var( --ae-fast ) var( --ae-ease );
	}
	.ae-rail__index a::before {
		content: attr( data-n );
		/* Same rule as every other index number here: it is text, so it has to
		 * carry text contrast, not decorative contrast. */
		color: var( --ae-dim );
		font-variant-numeric: tabular-nums;
	}
	.ae-rail__index a:hover { color: var( --ae-white ); }
	.ae-rail__index a.is-current { color: var( --ae-amber ); }
	.ae-rail__index a.is-current::before { color: var( --ae-amber ); }

	.ae-rail__readout {
		border-top: 1px solid var( --ae-hair );
		padding-top: var( --s-4 );
		font-family: var( --ae-mono );
		font-size: var( --t-xs );
		color: var( --ae-dim );
	}
	.ae-rail__row {
		display: flex;
		justify-content: space-between;
		gap: var( --s-2 );
		padding-block: 0.2rem;
	}
	.ae-rail__row b {
		font-weight: 500;
		color: var( --ae-fog );
		font-variant-numeric: tabular-nums;
	}

	/* Content clears the rail rather than sliding under it. */
	.ae-shell { padding-left: calc( var( --ae-rail ) + var( --s-8 ) ); }
	.ae-wrap { margin-inline: 0 auto; }
}

@media ( min-width: 1500px ) {
	.ae-rail { left: var( --s-8 ); }
}

/* --------------------------------------------------------- custom cursor */

.ae-cursor,
.ae-cursor__aura { display: none; }

@media ( pointer: fine ) and ( prefers-reduced-motion: no-preference ) {
	.ae-has-cursor.ae-cursor-live .ae-cursor,
	.ae-has-cursor.ae-cursor-live .ae-cursor__aura {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		pointer-events: none;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		will-change: transform;
	}
	.ae-cursor {
		width: 10px;
		height: 10px;
		margin: -5px 0 0 -5px;
		background: var( --ae-amber );
		font-family: var( --ae-mono );
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.08em;
		color: transparent;
		transition: width 260ms var( --ae-ease ), height 260ms var( --ae-ease ),
		            margin 260ms var( --ae-ease ), background-color 260ms var( --ae-ease ),
		            color 260ms var( --ae-ease ), opacity 200ms linear;
	}
	.ae-cursor__aura {
		width: 34px;
		height: 34px;
		margin: -17px 0 0 -17px;
		background: rgba( 124, 131, 245, 0.16 );
		filter: blur( 7px );
		transition: width 320ms var( --ae-ease ), height 320ms var( --ae-ease ),
		            margin 320ms var( --ae-ease ), opacity 200ms linear;
	}
	.ae-cursor.is-link { width: 42px; height: 42px; margin: -21px 0 0 -21px; background: rgba( 255, 255, 255, 0.14 ); }
	.ae-cursor.is-plate {
		width: 74px;
		height: 74px;
		margin: -37px 0 0 -37px;
		background: var( --ae-white );
		color: var( --ae-void );
	}
	.ae-cursor.is-off,
	.ae-cursor.is-off + .ae-cursor__aura { opacity: 0; }

	/*
	 * Hide the native pointer only over the theme's own content, and only once
	 * the replacement is actually running. It must never reach wp-admin, the
	 * login form, or a field the visitor is typing into.
	 */
	.ae-has-cursor.ae-cursor-live .ae-shell,
	.ae-has-cursor.ae-cursor-live .ae-shell a,
	.ae-has-cursor.ae-cursor-live .ae-shell button { cursor: none; }
	.ae-has-cursor.ae-cursor-live input,
	.ae-has-cursor.ae-cursor-live textarea,
	.ae-has-cursor.ae-cursor-live select { cursor: auto; }
}

/* ------------------------------------------------------------- reveal --- */

.ae-js .ae-reveal {
	opacity: 0;
	transform: translateY( 18px );
	transition: opacity var( --ae-slow ) var( --ae-ease ), transform var( --ae-slow ) var( --ae-ease );
}
.ae-js .ae-reveal.is-in { opacity: 1; transform: none; }

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	.ae-js .ae-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

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

.ae-footer {
	position: relative;
	z-index: 2;
	margin-top: var( --s-9 );
	border-top: 1px solid var( --ae-hair );
	background: rgba( 6, 7, 10, 0.9 );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
	padding-block: var( --s-8 ) var( --s-6 );
}

.ae-clocks {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 10rem, 100% ), 1fr ) );
	gap: 1px;
	background: var( --ae-hair );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	overflow: hidden;
	margin-bottom: var( --s-8 );
}
.ae-clock {
	background: var( --ae-void );
	padding: var( --s-4 ) var( --s-5 );
}
.ae-clock__city {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ae-dim );
}
.ae-clock__time {
	font-family: var( --ae-mono );
	font-variant-numeric: tabular-nums;
	font-size: var( --t-md );
	font-weight: 500;
	color: var( --ae-white );
	margin-top: var( --s-1 );
	line-height: 1.2;
}
.ae-clock__role {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	margin-top: var( --s-1 );
}
.ae-clock__role.is-live { color: var( --ae-mint ); }

.ae-footer__cols {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 11.5rem, 100% ), 1fr ) );
	gap: var( --s-6 ) var( --s-7 );
	align-items: start;
}

.ae-widget-title,
.ae-footer__cols h2 {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ae-dim );
	margin-bottom: var( --s-3 );
}
.ae-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.ae-footer__cols li { margin-bottom: var( --s-2 ); }
.ae-footer__cols a {
	color: var( --ae-fog );
	text-decoration: none;
	font-size: var( --t-sm );
}
.ae-footer__cols a:hover { color: var( --ae-amber ); }
.ae-footer__cols p { font-size: var( --t-sm ); }

.ae-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --s-4 );
	margin-top: var( --s-8 );
	padding-top: var( --s-5 );
	border-top: 1px solid var( --ae-hair );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
}

/* -------------------------------------------------------------- utility */

.ae-hr { border: 0; border-top: 1px solid var( --ae-hair ); margin: var( --s-7 ) 0; }

.ae-embed { position: relative; margin-block: var( --s-5 ); }
.ae-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var( --ae-radius ); }

.ae-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-2 );
	margin-top: var( --s-8 );
	font-family: var( --ae-mono );
	font-size: var( --t-sm );
}
.ae-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.5rem;
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	color: var( --ae-fog );
	text-decoration: none;
}
.ae-pagination .page-numbers.current,
.ae-pagination .page-numbers:hover { border-color: var( --ae-amber ); color: var( --ae-amber ); }