/*
 * Aetheria — section styles.
 *
 * Every section on the home page opens with a different structure. That is the
 * point of the file. The prototype this theme is built from repeated one
 * pattern eight times — a small uppercase pill, a two-line headline with a
 * gradient clipped into the second line, and a right-aligned paragraph — and
 * once you have seen it twice you have seen the whole page. So:
 *
 *   hero          asymmetric: type against a live instrument card
 *   work          a numbered index that opens into media, not a card grid
 *   lab           a workbench with tabs, a viewport and a spec column
 *   axioms        a running numbered spread of prose, no cards at all
 *   capabilities  a real matrix table, rows against columns
 *   recognition   a ledger, then a wall of quotes at three different weights
 *   inquiry       a two-column builder
 *
 * The section label that would have been a decorative pill lives in the fixed
 * rail instead, where it does navigation work.
 */

/* ------------------------------------------------------------------ hero */

/*
 * min-width on the children is not decoration. A grid item defaults to a
 * min-width of auto — its own min-content — and the facts row underneath the
 * headline floored at three 8rem tracks, which forced the whole hero column to
 * 432px inside a 350px viewport. Measured at 390: 62px of horizontal scroll on
 * the home page, and nothing in the markup to suggest why.
 */
.ae-hero {
	padding-block: var( --s-8 ) var( --s-9 );
	display: grid;
	gap: var( --s-8 );
	align-items: center;
}
.ae-hero > * { min-width: 0; }

@media ( min-width: 62rem ) {
	.ae-hero {
		grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 0.85fr );
		gap: var( --s-9 );
		padding-block: var( --s-9 ) var( --s-10 );
		min-height: min( 84vh, 52rem );
	}
}

.ae-hero__status {
	display: inline-flex;
	align-items: center;
	gap: var( --s-3 );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ae-fog );
	margin-bottom: var( --s-5 );
}
.ae-pulse {
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var( --ae-amber );
	flex: none;
}
.ae-pulse::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var( --ae-amber );
	animation: ae-ping 2.4s var( --ae-ease ) infinite;
}
@keyframes ae-ping {
	0% { transform: scale( 1 ); opacity: 0.7; }
	80%, 100% { transform: scale( 2.6 ); opacity: 0; }
}

.ae-hero h1 { margin-bottom: var( --s-5 ); }
.ae-hero h1 .ae-hero__accent { color: var( --ae-amber ); }

.ae-hero__lede { margin-bottom: var( --s-6 ); }

.ae-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-3 );
	margin-bottom: var( --s-7 );
}

.ae-hero__facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 8rem, 100% ), 1fr ) );
	gap: var( --s-5 );
	padding-top: var( --s-5 );
	border-top: 1px solid var( --ae-hair );
	max-width: 34rem;
}
.ae-fact__value {
	font-family: var( --ae-display );
	font-weight: 800;
	font-size: var( --t-lg );
	color: var( --ae-white );
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ae-fact__value span { font-size: 0.55em; color: var( --ae-amber ); margin-left: 0.1em; }
.ae-fact__label {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	margin-top: var( --s-2 );
	line-height: 1.35;
}

/* The specimen card — a real readout of the engine running behind the page. */
.ae-specimen {
	padding: var( --s-5 );
	max-width: 27rem;
	width: 100%;
	justify-self: center;
	transform-style: preserve-3d;
	transition: transform 420ms var( --ae-ease );
}
@media ( min-width: 62rem ) {
	.ae-specimen { justify-self: end; padding: var( --s-6 ); }
	.ae-hero__stage { perspective: 1400px; }
}

.ae-specimen__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --s-3 );
	padding-bottom: var( --s-4 );
	border-bottom: 1px solid var( --ae-hair );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.ae-specimen__lamps { display: flex; gap: var( --s-1 ); }
.ae-specimen__lamps i {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	display: block;
}
.ae-specimen__lamps i:nth-child(1) { background: var( --ae-rose ); }
.ae-specimen__lamps i:nth-child(2) { background: var( --ae-amber ); }
.ae-specimen__lamps i:nth-child(3) { background: var( --ae-mint ); }

.ae-specimen__core {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var( --s-6 );
}
.ae-specimen__rings { width: 9.5rem; height: 9.5rem; }
.ae-specimen__title {
	font-family: var( --ae-display );
	font-weight: 700;
	font-size: var( --t-base );
	color: var( --ae-white );
	letter-spacing: 0.06em;
	margin-top: var( --s-4 );
	text-align: center;
}
.ae-specimen__note {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	margin-top: var( --s-2 );
	text-align: center;
}

.ae-specimen__rows {
	background: rgba( 0, 0, 0, 0.36 );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	padding: var( --s-4 );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
}
.ae-specimen__row {
	display: flex;
	justify-content: space-between;
	gap: var( --s-3 );
	padding-block: 0.28rem;
	color: var( --ae-dim );
}
.ae-specimen__row b {
	font-weight: 500;
	color: var( --ae-white );
	font-variant-numeric: tabular-nums;
	text-transform: capitalize;
}

.ae-specimen__foot {
	display: flex;
	justify-content: space-between;
	gap: var( --s-3 );
	margin-top: var( --s-4 );
	padding-top: var( --s-3 );
	border-top: 1px solid var( --ae-hair );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
}
.ae-specimen__foot .is-live { color: var( --ae-mint ); }

/* ------------------------------------------------------ work — the index */

.ae-index__head {
	display: grid;
	gap: var( --s-4 );
	margin-bottom: var( --s-7 );
	align-items: end;
}
@media ( min-width: 48rem ) {
	.ae-index__head { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 22rem ); gap: var( --s-7 ); }
}
.ae-index__head p { font-size: var( --t-sm ); color: var( --ae-dim ); margin: 0; }

.ae-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-2 );
	margin-bottom: var( --s-6 );
}
.ae-filter {
	padding: 0.4rem 0.9rem;
	background: none;
	border: 1px solid var( --ae-hair );
	border-radius: 999px;
	color: var( --ae-dim );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	cursor: pointer;
	transition: color var( --ae-fast ) var( --ae-ease ), border-color var( --ae-fast ) var( --ae-ease );
}
.ae-filter:hover { color: var( --ae-white ); border-color: var( --ae-hair-2 ); }
.ae-filter[aria-pressed="true"] {
	color: var( --ae-void );
	background: var( --ae-amber );
	border-color: var( --ae-amber );
	font-weight: 600;
}

/*
 * A numbered index rather than a card grid. Each row is a link; the media
 * plate sits in the row and grows on hover, so nothing is hidden from a
 * visitor who never hovers and nothing is hidden from a crawler.
 */
.ae-rows { border-top: 1px solid var( --ae-hair ); }
.ae-rows[hidden] { display: none; }

.ae-row {
	display: grid;
	gap: var( --s-4 );
	padding-block: var( --s-5 );
	border-bottom: 1px solid var( --ae-hair );
	position: relative;
	transition: background-color var( --ae-fast ) var( --ae-ease );
}
.ae-row:hover { background: rgba( 255, 255, 255, 0.022 ); }
.ae-row.is-hidden { display: none; }

@media ( min-width: 60rem ) {
	.ae-row {
		grid-template-columns: 3.25rem minmax( 0, 1fr ) 17rem 9rem;
		align-items: center;
		gap: var( --s-5 );
		padding-block: var( --s-4 );
	}
}

.ae-row__n {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	/*
	 * An index number is still text. At rgba(255,255,255,.26) it measured
	 * 2.2:1 against the ground — decorative to the eye, unreadable to anyone
	 * who needs the contrast.
	 */
	color: var( --ae-dim );
	font-variant-numeric: tabular-nums;
	padding-top: 0.35rem;
}

.ae-row__title {
	font-family: var( --ae-display );
	font-weight: 700;
	font-size: var( --t-md );
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 var( --s-1 );
}
.ae-row__title a { color: var( --ae-white ); text-decoration: none; }
.ae-row:hover .ae-row__title a { color: var( --ae-amber ); }
.ae-row__title a::after { content: ''; position: absolute; inset: 0; }

.ae-row__meta {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-3 );
}
.ae-row__meta .is-cat { color: var( --ae-fog ); }

.ae-row__plate {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var( --ae-radius );
	border: 1px solid var( --ae-hair );
	background: var( --ae-deep );
}
.ae-row__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 720ms var( --ae-ease ), filter 720ms var( --ae-ease );
	filter: saturate( 0.82 ) brightness( 0.82 );
}
.ae-row:hover .ae-row__plate img { transform: scale( 1.06 ); filter: none; }

.ae-row__go {
	display: none;
	justify-self: end;
	align-items: center;
	gap: var( --s-2 );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ae-dim );
}
@media ( min-width: 60rem ) { .ae-row__go { display: inline-flex; } }
.ae-row:hover .ae-row__go { color: var( --ae-amber ); }

/* The lead case study gets a full-bleed plate above the index. */
.ae-feature {
	position: relative;
	display: grid;
	gap: var( --s-5 );
	margin-bottom: var( --s-8 );
	overflow: hidden;
	border-radius: var( --ae-radius-lg );
	border: 1px solid var( --ae-hair );
}
@media ( min-width: 60rem ) {
	.ae-feature { grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr ); gap: 0; }
}
.ae-feature__plate { position: relative; aspect-ratio: 16 / 10; background: var( --ae-deep ); }
.ae-feature__plate img { width: 100%; height: 100%; object-fit: cover; }
@media ( min-width: 60rem ) {
	/*
	 * Above the split point the row is as tall as the body column, which is
	 * taller than a 16:10 plate — so the aspect box left a black band under the
	 * image. Fill the row and crop.
	 */
	.ae-feature__plate { aspect-ratio: auto; min-height: 100%; }
	.ae-feature__plate img { position: absolute; inset: 0; }
}
.ae-feature__body {
	padding: var( --s-5 );
	background: var( --ae-panel );
	-webkit-backdrop-filter: blur( 22px );
	backdrop-filter: blur( 22px );
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var( --s-4 );
}
@media ( min-width: 60rem ) { .ae-feature__body { padding: var( --s-7 ); } }
.ae-feature__body h3 { margin: 0; }
.ae-feature__body h3 a { color: var( --ae-white ); text-decoration: none; }
.ae-feature__body h3 a:hover { color: var( --ae-amber ); }
.ae-feature__body p { font-size: var( --t-sm ); margin: 0; }

.ae-metrics {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 7rem, 100% ), 1fr ) );
	gap: var( --s-4 );
	padding-top: var( --s-4 );
	border-top: 1px solid var( --ae-hair );
}
.ae-metric__value {
	font-family: var( --ae-mono );
	font-weight: 600;
	font-size: var( --t-base );
	color: var( --ae-amber );
	font-variant-numeric: tabular-nums;
}
.ae-metric__label {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	margin-top: 0.15rem;
	line-height: 1.35;
}

.ae-pills { display: flex; flex-wrap: wrap; gap: var( --s-2 ); }
.ae-pill {
	padding: 0.24rem 0.6rem;
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-fog );
}

/* ------------------------------------------------------------- the lab */

.ae-lab { display: grid; gap: var( --s-6 ); }

.ae-lab__intro { max-width: 44rem; }
.ae-lab__intro h2 { margin-bottom: var( --s-3 ); }
.ae-lab__intro p { font-size: var( --t-sm ); color: var( --ae-dim ); }

.ae-lab__frame { padding: var( --s-5 ); }
@media ( min-width: 62rem ) { .ae-lab__frame { padding: var( --s-7 ); } }

.ae-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-2 );
	padding-bottom: var( --s-5 );
	margin-bottom: var( --s-6 );
	border-bottom: 1px solid var( --ae-hair );
}
.ae-tab {
	display: inline-flex;
	align-items: center;
	gap: var( --s-2 );
	padding: 0.55rem 1rem;
	background: var( --ae-raise );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	color: var( --ae-dim );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	cursor: pointer;
	transition: color var( --ae-fast ) var( --ae-ease ), border-color var( --ae-fast ) var( --ae-ease );
}
.ae-tab:hover { color: var( --ae-white ); }
.ae-tab[aria-selected="true"] {
	color: var( --ae-amber );
	border-color: var( --ae-amber );
	background: rgba( 242, 178, 60, 0.08 );
	font-weight: 600;
}

.ae-panel-body[hidden] { display: none; }

.ae-lab__split { display: grid; gap: var( --s-6 ); }
@media ( min-width: 62rem ) {
	.ae-lab__split { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); gap: var( --s-7 ); }
}

.ae-presets {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 9.5rem, 100% ), 1fr ) );
	gap: var( --s-3 );
}
/* Five across the full frame, so the section ends level instead of leaving a
 * third of its width empty below the readout. */
.ae-presets--wide {
	margin-top: var( --s-6 );
	padding-top: var( --s-6 );
	border-top: 1px solid var( --ae-hair );
}
@media ( min-width: 62rem ) {
	.ae-presets--wide { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
}
.ae-preset {
	display: flex;
	flex-direction: column;
	gap: var( --s-2 );
	padding: var( --s-4 );
	text-align: left;
	background: var( --ae-raise );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	cursor: pointer;
	transition: border-color var( --ae-fast ) var( --ae-ease ), background-color var( --ae-fast ) var( --ae-ease );
}
.ae-preset:hover { border-color: var( --ae-hair-2 ); }
.ae-preset[aria-pressed="true"] { border-color: var( --ae-amber ); background: rgba( 242, 178, 60, 0.07 ); }
.ae-preset__name {
	font-family: var( --ae-display );
	font-weight: 700;
	font-size: var( --t-sm );
	color: var( --ae-white );
	letter-spacing: 0.02em;
}
.ae-preset[aria-pressed="true"] .ae-preset__name { color: var( --ae-amber ); }
/*
 * The selected preset tints its own panel amber, which lifts the composited
 * ground and drops --ae-dim to 4.43:1 on that one card. Measured, not guessed.
 */
.ae-preset__note {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-fog );
	line-height: 1.4;
}
.ae-swatches { display: flex; gap: 3px; margin-top: auto; }
.ae-swatches i { width: 1.1rem; height: 0.32rem; border-radius: 1px; display: block; }

.ae-readout {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	overflow: hidden;
}
.ae-readout__row {
	display: flex;
	justify-content: space-between;
	gap: var( --s-3 );
	padding: 0.55rem var( --s-4 );
	border-bottom: 1px solid var( --ae-hair );
	color: var( --ae-dim );
}
.ae-readout__row:last-child { border-bottom: 0; }
.ae-readout__row b {
	font-weight: 500;
	color: var( --ae-white );
	font-variant-numeric: tabular-nums;
	text-transform: capitalize;
}

/* Kinetic type specimen */
.ae-specimen-type {
	display: grid;
	place-items: center;
	min-height: 12rem;
	padding: var( --s-6 ) var( --s-4 );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	background: rgba( 0, 0, 0, 0.28 );
	overflow: hidden;
}
.ae-specimen-type output {
	font-family: var( --ae-display );
	font-size: clamp( 1.5rem, 5vw, 3rem );
	line-height: 1.05;
	color: var( --ae-white );
	text-align: center;
	word-break: break-word;
}
.ae-specimen-type.is-lit output { text-shadow: 0 0 26px rgba( 242, 178, 60, 0.55 ); color: var( --ae-amber ); }

.ae-sliders { display: grid; gap: var( --s-4 ); }
.ae-slider__head {
	display: flex;
	justify-content: space-between;
	gap: var( --s-3 );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	margin-bottom: var( --s-2 );
}
.ae-slider__head b { color: var( --ae-amber ); font-weight: 600; font-variant-numeric: tabular-nums; }
.ae-sliders input[type="range"] { width: 100%; accent-color: var( --ae-amber ); cursor: pointer; }

/* Holographic refraction plate */
.ae-holo {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var( --ae-radius-lg );
	border: 1px solid var( --ae-hair-2 );
	overflow: hidden;
	background:
		radial-gradient( at 22% 18%, rgba( 242, 178, 60, 0.5 ) 0, transparent 52% ),
		radial-gradient( at 82% 26%, rgba( 124, 131, 245, 0.42 ) 0, transparent 54% ),
		radial-gradient( at 48% 88%, rgba( 242, 117, 143, 0.34 ) 0, transparent 56% ),
		var( --ae-deep );
	transition: transform 300ms var( --ae-ease );
	transform-style: preserve-3d;
}
.ae-holo__sheen {
	position: absolute;
	inset: -20%;
	background: linear-gradient( 115deg, transparent 38%, rgba( 255, 255, 255, 0.42 ) 50%, transparent 62% );
	mix-blend-mode: overlay;
}
.ae-holo__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient( to right, rgba( 255, 255, 255, 0.07 ) 1px, transparent 1px ),
		linear-gradient( to bottom, rgba( 255, 255, 255, 0.07 ) 1px, transparent 1px );
	background-size: 2.25rem 2.25rem;
}

/* Audio bench */
.ae-audio { display: grid; gap: var( --s-3 ); }
.ae-audio__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --s-3 );
	width: 100%;
	padding: var( --s-4 );
	background: var( --ae-raise );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	color: var( --ae-white );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	cursor: pointer;
	text-align: left;
	transition: border-color var( --ae-fast ) var( --ae-ease );
}
.ae-audio__btn:hover { border-color: var( --ae-amber ); }
.ae-audio__btn span:last-child { color: var( --ae-dim ); }

/* ---------------------------------------------------- axioms — a spread */

.ae-axioms__opening {
	max-width: 40ch;
	font-family: var( --ae-display );
	font-weight: 700;
	font-size: var( --t-lg );
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var( --ae-white );
	margin-bottom: var( --s-8 );
}
.ae-axioms__opening em { font-style: normal; color: var( --ae-amber ); }

.ae-axioms__spread { columns: 1; }
@media ( min-width: 60rem ) { .ae-axioms__spread { columns: 2; column-gap: var( --s-9 ); } }

.ae-axiom {
	break-inside: avoid;
	margin-bottom: var( --s-7 );
	padding-left: 3.25rem;
	position: relative;
}
.ae-axiom__n {
	position: absolute;
	left: 0;
	top: 0.15rem;
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-amber );
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}
.ae-axiom h3 {
	font-size: var( --t-md );
	margin-bottom: var( --s-3 );
}
.ae-axiom p { font-size: var( --t-sm ); margin: 0; }

/* ------------------------------------------------ capabilities — matrix */

.ae-matrix__head {
	display: grid;
	gap: var( --s-4 );
	align-items: end;
	margin-bottom: var( --s-6 );
}
@media ( min-width: 48rem ) {
	.ae-matrix__head { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 24rem ); gap: var( --s-7 ); }
}
.ae-matrix__head p { font-size: var( --t-sm ); color: var( --ae-dim ); margin: 0; }

.ae-matrix-scroll { overflow-x: auto; }

.ae-matrix {
	width: 100%;
	min-width: 44rem;
	border-collapse: collapse;
	text-align: left;
}
.ae-matrix thead th {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ae-dim );
	padding: 0 var( --s-4 ) var( --s-3 );
	border-bottom: 1px solid var( --ae-hair-2 );
	vertical-align: bottom;
}
.ae-matrix thead th:first-child { padding-left: 0; }
.ae-matrix tbody td {
	padding: var( --s-5 ) var( --s-4 );
	border-bottom: 1px solid var( --ae-hair );
	vertical-align: top;
	font-size: var( --t-sm );
}
.ae-matrix tbody td:first-child { padding-left: 0; }
.ae-matrix tbody tr:hover { background: rgba( 255, 255, 255, 0.022 ); }

.ae-matrix__n {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	display: block;
	margin-bottom: var( --s-2 );
}
.ae-matrix__name {
	font-family: var( --ae-display );
	font-weight: 700;
	font-size: var( --t-base );
	color: var( --ae-white );
	letter-spacing: -0.01em;
	line-height: 1.2;
	display: block;
	margin-bottom: var( --s-2 );
}
.ae-matrix__desc { color: var( --ae-fog ); font-size: var( --t-sm ); max-width: 30ch; }

.ae-checks { list-style: none; margin: 0; padding: 0; }
.ae-checks li {
	display: flex;
	gap: var( --s-2 );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-fog );
	margin-bottom: var( --s-2 );
	line-height: 1.4;
}
.ae-checks .ae-icon { color: var( --ae-mint ); margin-top: 0.2em; }

.ae-matrix .ae-pills { max-width: 14rem; }

.ae-matrix__ask {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var( --ae-hair );
	background: var( --ae-raise );
	color: var( --ae-fog );
	cursor: pointer;
	transition: background-color var( --ae-fast ) var( --ae-ease ), color var( --ae-fast ) var( --ae-ease );
}
.ae-matrix tr:hover .ae-matrix__ask { background: var( --ae-amber ); color: var( --ae-void ); border-color: var( --ae-amber ); }

/* ------------------------------------------------------- recognition --- */

.ae-ledger {
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius-lg );
	overflow: hidden;
}
.ae-ledger__row {
	display: grid;
	gap: var( --s-2 ) var( --s-5 );
	padding: var( --s-5 );
	border-bottom: 1px solid var( --ae-hair );
	transition: background-color var( --ae-fast ) var( --ae-ease );
}
.ae-ledger__row:last-child { border-bottom: 0; }
.ae-ledger__row:hover { background: rgba( 255, 255, 255, 0.025 ); }
@media ( min-width: 54rem ) {
	.ae-ledger__row {
		grid-template-columns: 4.5rem minmax( 0, 1fr ) 14rem;
		align-items: center;
	}
}
.ae-ledger__year {
	font-family: var( --ae-mono );
	font-weight: 600;
	font-size: var( --t-sm );
	color: var( --ae-amber );
	font-variant-numeric: tabular-nums;
}
.ae-ledger__title {
	font-family: var( --ae-display );
	font-weight: 700;
	font-size: var( --t-base );
	color: var( --ae-white );
	margin: 0 0 0.15rem;
	line-height: 1.25;
}
.ae-ledger__meta { font-family: var( --ae-mono ); font-size: var( --t-xs ); color: var( --ae-dim ); }
.ae-ledger__for {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-fog );
	justify-self: start;
	padding: 0.24rem 0.6rem;
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
}
@media ( min-width: 54rem ) { .ae-ledger__for { justify-self: end; } }

/*
 * A wall of quotes at three weights rather than three identical cards. The
 * first is the loud one; the others sit back.
 */
.ae-wall { display: grid; gap: var( --s-5 ); margin-top: var( --s-8 ); }
@media ( min-width: 60rem ) {
	.ae-wall { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: var( --s-6 ); align-items: start; }
	.ae-quote:first-child { grid-column: span 2; }
}

.ae-quote { padding: var( --s-5 ); }
@media ( min-width: 60rem ) { .ae-quote:first-child { padding: var( --s-7 ); } }

.ae-quote blockquote {
	margin: 0 0 var( --s-5 );
	font-size: var( --t-base );
	font-weight: 300;
	line-height: 1.5;
	color: var( --ae-white );
}
@media ( min-width: 60rem ) {
	.ae-quote:first-child blockquote {
		font-family: var( --ae-display );
		font-weight: 700;
		font-size: var( --t-lg );
		line-height: 1.22;
		letter-spacing: -0.02em;
	}
}

.ae-quote__by {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --s-3 );
	padding-top: var( --s-4 );
	border-top: 1px solid var( --ae-hair );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
}
.ae-quote__who { color: var( --ae-white ); font-weight: 500; }
.ae-quote__role { color: var( --ae-dim ); display: block; margin-top: 0.15rem; font-weight: 400; }
.ae-quote__impact { color: var( --ae-mint ); text-align: right; }

/* --------------------------------------------------------- the inquiry */

.ae-inquiry { padding: var( --s-6 ); }
@media ( min-width: 62rem ) { .ae-inquiry { padding: var( --s-9 ); } }

.ae-inquiry__grid { display: grid; gap: var( --s-8 ); }
@media ( min-width: 62rem ) {
	.ae-inquiry__grid { grid-template-columns: minmax( 0, 0.82fr ) minmax( 0, 1.18fr ); gap: var( --s-9 ); align-items: start; }
}

.ae-dispatch {
	margin-top: var( --s-6 );
	padding: var( --s-5 );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
}
.ae-dispatch__row {
	display: flex;
	justify-content: space-between;
	gap: var( --s-3 );
	padding-block: 0.3rem;
	color: var( --ae-dim );
	flex-wrap: wrap;
}
.ae-dispatch__row b { font-weight: 500; color: var( --ae-white ); }
.ae-dispatch__row a { color: var( --ae-amber ); text-decoration: none; }

.ae-form { display: grid; gap: var( --s-6 ); }
.ae-form__block { display: grid; gap: var( --s-3 ); }

.ae-scope { display: flex; flex-wrap: wrap; gap: var( --s-2 ); }
.ae-scope__opt {
	padding: 0.5rem 0.9rem;
	background: var( --ae-raise );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	color: var( --ae-fog );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	cursor: pointer;
	transition: color var( --ae-fast ) var( --ae-ease ), border-color var( --ae-fast ) var( --ae-ease );
}
.ae-scope__opt:hover { color: var( --ae-white ); border-color: var( --ae-hair-2 ); }
.ae-scope__opt[aria-pressed="true"] {
	background: var( --ae-amber );
	border-color: var( --ae-amber );
	color: var( --ae-void );
	font-weight: 600;
}

.ae-budget {
	padding: var( --s-5 );
	border: 1px solid var( --ae-hair );
	border-radius: var( --ae-radius );
	background: rgba( 255, 255, 255, 0.022 );
}
.ae-budget__head {
	display: flex;
	justify-content: space-between;
	gap: var( --s-3 );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-fog );
	margin-bottom: var( --s-3 );
	flex-wrap: wrap;
}
.ae-budget__head b { color: var( --ae-amber ); font-size: var( --t-sm ); font-variant-numeric: tabular-nums; }
.ae-budget input[type="range"] { width: 100%; accent-color: var( --ae-amber ); cursor: pointer; }
.ae-budget__foot {
	display: flex;
	justify-content: space-between;
	gap: var( --s-3 );
	flex-wrap: wrap;
	margin-top: var( --s-3 );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
}
.ae-budget__foot b { color: var( --ae-white ); font-weight: 500; }

.ae-form__pair { display: grid; gap: var( --s-4 ); }
@media ( min-width: 40rem ) { .ae-form__pair { grid-template-columns: 1fr 1fr; } }

.ae-form__submit { width: 100%; justify-content: center; padding-block: 1rem; }

.ae-form__status {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	line-height: 1.5;
	padding: var( --s-3 ) var( --s-4 );
	border-radius: var( --ae-radius );
	border: 1px solid transparent;
}
.ae-form__status:empty { display: none; }
.ae-form__status.is-error { color: var( --ae-rose ); border-color: rgba( 242, 117, 143, 0.4 ); background: rgba( 242, 117, 143, 0.08 ); }
.ae-form__status.is-working { color: var( --ae-fog ); border-color: var( --ae-hair ); }

.ae-sent {
	padding: var( --s-7 ) var( --s-5 );
	text-align: center;
	border: 1px solid rgba( 79, 209, 165, 0.34 );
	background: rgba( 79, 209, 165, 0.07 );
	border-radius: var( --ae-radius-lg );
}
.ae-sent h3 { margin-bottom: var( --s-3 ); }
.ae-sent p { font-size: var( --t-sm ); max-width: 40ch; margin-inline: auto; }
.ae-sent__mark {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto var( --s-5 );
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba( 79, 209, 165, 0.18 );
	color: var( --ae-mint );
	font-size: var( --t-md );
}

/* Honeypot — present for bots, gone for everyone else. */
.ae-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------- inner page furniture */

.ae-page-head {
	padding-block: var( --s-8 ) var( --s-6 );
	border-bottom: 1px solid var( --ae-hair );
	margin-bottom: var( --s-8 );
}
.ae-page-head h1 { font-size: var( --t-xl ); margin-bottom: var( --s-3 ); }
.ae-page-head p { font-size: var( --t-sm ); color: var( --ae-dim ); margin: 0; max-width: 60ch; }

.ae-crumbs {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	margin-bottom: var( --s-4 );
}
.ae-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var( --s-2 ); margin: 0; padding: 0; }
.ae-crumbs li::after { content: '/'; margin-left: var( --s-2 ); color: rgba( 255, 255, 255, 0.24 ); }
.ae-crumbs li:last-child::after { content: none; }
.ae-crumbs a { color: var( --ae-fog ); text-decoration: none; }
.ae-crumbs a:hover { color: var( --ae-amber ); }

.ae-case__hero {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var( --ae-radius-lg );
	overflow: hidden;
	border: 1px solid var( --ae-hair );
	margin-bottom: var( --s-7 );
	background: var( --ae-deep );
}
.ae-case__hero img { width: 100%; height: 100%; object-fit: cover; }

.ae-case__body { display: grid; gap: var( --s-7 ); }
@media ( min-width: 62rem ) {
	.ae-case__body { grid-template-columns: minmax( 0, 1fr ) 17rem; gap: var( --s-9 ); align-items: start; }
}

.ae-case__aside { display: grid; gap: var( --s-6 ); position: sticky; top: 6rem; }
.ae-case__aside h2 {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ae-dim );
	margin-bottom: var( --s-3 );
}
.ae-case__aside dl { margin: 0; font-size: var( --t-sm ); }
.ae-case__aside dt {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-dim );
	margin-top: var( --s-3 );
}
.ae-case__aside dt:first-child { margin-top: 0; }
.ae-case__aside dd { margin: 0.15rem 0 0; color: var( --ae-white ); }

.ae-palette { display: grid; gap: var( --s-2 ); }
.ae-palette__chip {
	display: flex;
	align-items: center;
	gap: var( --s-3 );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	color: var( --ae-fog );
}
.ae-palette__chip i {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 3px;
	border: 1px solid var( --ae-hair-2 );
	flex: none;
	display: block;
}
.ae-palette__hex { color: var( --ae-dim ); margin-left: auto; }

.ae-gallery { display: grid; gap: var( --s-4 ); margin-top: var( --s-7 ); }
@media ( min-width: 48rem ) { .ae-gallery { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
.ae-gallery figure { margin: 0; }
.ae-gallery img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var( --ae-radius );
	border: 1px solid var( --ae-hair );
}

.ae-cards { display: grid; gap: var( --s-5 ); }
@media ( min-width: 48rem ) { .ae-cards { grid-template-columns: repeat( auto-fill, minmax( min( 17rem, 100% ), 1fr ) ); } }

.ae-card { padding: var( --s-5 ); display: flex; flex-direction: column; gap: var( --s-3 ); }
.ae-card h2, .ae-card h3 { font-size: var( --t-md ); margin: 0; }
.ae-card h2 a, .ae-card h3 a { color: var( --ae-white ); text-decoration: none; }
.ae-card h2 a:hover, .ae-card h3 a:hover { color: var( --ae-amber ); }
.ae-card p { font-size: var( --t-sm ); margin: 0; }
.ae-card__date { font-family: var( --ae-mono ); font-size: var( --t-xs ); color: var( --ae-dim ); }
.ae-card__thumb {
	aspect-ratio: 16 / 10;
	border-radius: var( --ae-radius );
	overflow: hidden;
	border: 1px solid var( --ae-hair );
	margin: calc( var( --s-5 ) * -1 ) calc( var( --s-5 ) * -1 ) 0;
	border-radius: var( --ae-radius-lg ) var( --ae-radius-lg ) 0 0;
	border-width: 0 0 1px;
}
.ae-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.ae-empty {
	padding: var( --s-8 ) var( --s-5 );
	text-align: center;
	border: 1px dashed var( --ae-hair-2 );
	border-radius: var( --ae-radius-lg );
}
.ae-empty p { color: var( --ae-dim ); font-size: var( --t-sm ); }

/* ------------------------------------------------------------- comments */

.ae-comments { margin-top: var( --s-9 ); padding-top: var( --s-7 ); border-top: 1px solid var( --ae-hair ); }
.ae-comments h2 { font-size: var( --t-md ); margin-bottom: var( --s-5 ); }
.ae-comments ol { list-style: none; margin: 0; padding: 0; }
.ae-comments .children { list-style: none; margin: var( --s-4 ) 0 0 var( --s-5 ); padding: 0; border-left: 1px solid var( --ae-hair ); padding-left: var( --s-5 ); }
.ae-comments .comment-body { padding-block: var( --s-4 ); border-bottom: 1px solid var( --ae-hair ); }
.ae-comments .comment-meta { font-family: var( --ae-mono ); font-size: var( --t-xs ); color: var( --ae-dim ); margin-bottom: var( --s-2 ); }
.ae-comments .comment-author .fn { color: var( --ae-white ); font-style: normal; font-weight: 600; }
.ae-comments .comment-author img { border-radius: 50%; margin-right: var( --s-2 ); vertical-align: middle; }
.ae-comments .reply { font-family: var( --ae-mono ); font-size: var( --t-xs ); }
.ae-comments .comment-respond { margin-top: var( --s-6 ); }
.ae-comments .comment-form { display: grid; gap: var( --s-4 ); }
.ae-comments .comment-form input[type="text"],
.ae-comments .comment-form input[type="email"],
.ae-comments .comment-form input[type="url"],
.ae-comments .comment-form textarea {
	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 );
}
.ae-comments .comment-form label { font-family: var( --ae-mono ); font-size: var( --t-xs ); color: var( --ae-fog ); display: block; margin-bottom: var( --s-2 ); }
.ae-comments .comment-form .submit {
	justify-self: start;
	padding: 0.875rem 1.5rem;
	background: var( --ae-amber );
	color: var( --ae-void );
	border: 0;
	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;
	cursor: pointer;
}
.ae-comments .comment-notes,
.ae-comments .form-submit + p { font-size: var( --t-xs ); color: var( --ae-dim ); }

/* --------------------------------------------------------------- search */

.ae-searchform { display: flex; gap: var( --s-2 ); max-width: 28rem; }
.ae-searchform input[type="search"] {
	flex: 1;
	padding: 0.7rem 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 );
}
.ae-searchform button {
	padding: 0.7rem 1.1rem;
	background: var( --ae-raise );
	border: 1px solid var( --ae-hair-2 );
	border-radius: var( --ae-radius );
	color: var( --ae-white );
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	cursor: pointer;
}

/* ------------------------------------------------------------------ 404 */

.ae-404 { padding-block: var( --s-9 ); max-width: 46rem; }
.ae-404 h1 { margin-bottom: var( --s-4 ); }
.ae-404__code {
	font-family: var( --ae-mono );
	font-size: var( --t-xs );
	letter-spacing: 0.18em;
	color: var( --ae-amber );
	text-transform: uppercase;
	margin-bottom: var( --s-4 );
}