/* Axori Immersive — page template styles */

:root {
	--bg: #000;
	--fg: #f2f2f2;
	--mid: #a9a9a9;
	--dim: #6a6a6a;
	--faint: #333;
	--line: rgba(255, 255, 255, 0.08);
	--line-2: rgba(255, 255, 255, 0.16);
	--card: rgba(16, 16, 16, 0.92);
	--display: 'Big Shoulders Display', 'Oswald', Impact, sans-serif;
	--mono: 'Space Mono', ui-monospace, Consolas, monospace;
	--sans: 'Inter', system-ui, sans-serif;
	--slab: 'Roboto Slab', 'Roboto', Georgia, serif;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-io: cubic-bezier(0.7, 0, 0.2, 1);
}

html,
body.axi {
	margin: 0 !important;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background: var(--bg) !important;
}

body.axi {
	color: var(--fg);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	cursor: default;
}

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

/* resets use :where() so component rules below always win */
body.axi :where(p) { margin: 0; }
body.axi :where(a) { color: inherit; text-decoration: none; }
body.axi :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
body.axi :where(svg) { display: block; }

/* ---------- backdrop ---------- */
.axi-gl {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	transition: filter 1.8s var(--ease), opacity 1.8s var(--ease);
}
.axi-gl.is-loading { filter: blur(16px); opacity: 0.75; }

.axi-dots {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.075) 0.8px, transparent 0.8px);
	background-size: 4px 4px;
	-webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, rgba(0, 0, 0, 0.35) 70%);
	mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, rgba(0, 0, 0, 0.35) 70%);
}
.axi-vignette {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.75) 100%);
}

/* ---------- shared bits ---------- */
.tier-btns { display: flex; gap: 6px; }
.tier-btns button {
	height: 28px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 99px;
	font-family: var(--mono);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #8d8d8d;
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.tier-btns button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4) !important; }
.tier-btns button.on {
	color: #fff;
	background: #262626;
	border-color: rgba(255, 255, 255, 0.35) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ================= LOADER ================= */
.axi-loader {
	position: fixed;
	inset: 0;
	z-index: 50;
	font-family: var(--mono);
	transition: opacity 0.7s ease 1.1s, visibility 0s linear 1.8s;
}
.axi-entered .axi-loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* the curtain: six plain panels that lift in sequence on entry */
.ld-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}
.ld-cell {
	background: #030303;
	border-right: 1px solid rgb(var(--acc-l) / 0.045);
	transition: transform 1s var(--ease-io);
	transition-delay: calc(var(--i) * 65ms);
}
.ld-cell:last-child { border-right: 0; }
.axi-entered .ld-cell { transform: translateY(-101%); }

/* a faint column grid over the whole screen, and a breathing wash behind the
   count — the page has structure even before anything is drawn on it */
.ld-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(90% 60% at 50% 52%, rgb(var(--acc) / 0.09), transparent 72%),
		repeating-linear-gradient(90deg, rgb(var(--acc-l) / 0.035) 0 1px, transparent 1px 12.5%);
	animation: ld-breathe 5s ease-in-out infinite;
}
@keyframes ld-breathe {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

/* ---- the frame: the loader is the page, edge to edge ---- */
.ld-frame {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.6vw, 2.5rem);
	transition: opacity 0.5s var(--ease);
}
.axi-entered .ld-frame { opacity: 0; }

.ld-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: clamp(0.85rem, 1.4vw, 1.25rem);
	border-bottom: 1px solid rgb(var(--acc-l) / 0.12);
}
.ld-mark {
	font-size: clamp(12px, 1vw, 15px);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.9);
}
.ld-meta {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.35);
}

/* ---- the count: as large as the screen allows, filling as it climbs ---- */
.ld-mid {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 0;
}
.axi-loader .ld-count {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: clamp(0.4rem, 1vw, 1rem);
	margin: 0 !important;
}
/* a waterline running the full width of the screen, sitting exactly on the
   fill edge inside the numerals — so it reads as one rising level */
.ld-water {
	position: absolute;
	left: 50%;
	/* above the numerals, not behind: the opaque curtain panels sit at the
	   bottom of the loader's stacking context and would swallow it */
	z-index: 1;
	bottom: calc(var(--p, 0) * 100%);
	width: 100vw;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(var(--acc) / 0.8) 8%, rgb(var(--acc) / 0.8) 92%, transparent);
	box-shadow: 0 0 18px rgb(var(--acc) / 0.35);
	transform: translateX(-50%);
	transition: bottom 0.25s linear;
}
/* the filled side of the line carries a little light with it */
.ld-water::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 130px;
	background: linear-gradient(180deg, rgb(var(--acc) / 0.1), transparent);
}
.ld-num {
	font-family: var(--display);
	font-size: min(38vw, 52vh);
	font-weight: 700;
	line-height: 0.78;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	/* the numerals themselves are the gauge: solid up to the current value,
	   ghosted above it */
	background-image: linear-gradient(
		to top,
		rgb(var(--acc-l)) calc(var(--p, 0) * 100%),
		rgb(var(--acc-l) / 0.13) calc(var(--p, 0) * 100%)
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ld-pc {
	padding-top: 0.75em;
	font-family: ui-monospace, Consolas, monospace;
	font-size: clamp(11px, 1vw, 14px);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgb(var(--acc-l) / 0.3);
}

/* ---- the bottom: controls, state, and the bar across the full width ---- */
.ld-bot { display: flex; flex-direction: column; gap: clamp(0.85rem, 1.6vw, 1.4rem); }
.ld-opts {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2.5rem;
}
.ld-tier p,
.ld-sound p,
.axi-settings p {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 8.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.35);
	margin-bottom: 9px !important;
}
.ld-opts .tier-btns { display: flex; gap: 4px; }
.ld-opts .tier-btns button {
	padding: 7px 13px;
	/* square, like the frame — a global rule rounds buttons to a pill */
	border-radius: 0;
	border: 1px solid rgb(var(--acc-l) / 0.14);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgb(var(--acc-l) / 0.4);
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.ld-opts .tier-btns button:hover { color: rgb(var(--acc-l) / 0.8); border-color: rgb(var(--acc-l) / 0.3); }
.ld-opts .tier-btns button.on {
	color: #000;
	background: rgb(var(--acc-l));
	border-color: rgb(var(--acc-l));
}

.ld-status {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding-top: clamp(0.85rem, 1.4vw, 1.25rem);
	border-top: 1px solid rgb(var(--acc-l) / 0.12);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: 0.18em;
	color: rgb(var(--acc-l) / 0.45);
}
.ld-status span:nth-child(2) { flex: 1; }
/* the count fills the screen — repeating it here only collided with the bar's
   own label. The element stays for the script that writes to it. */
.ld-status #ld-pct { display: none; }
.ld-status .dot {
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgb(var(--acc));
	animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

/* a hairline across the whole page rather than a boxed-in button */
.ld-bar {
	position: relative !important;
	display: flex !important;
	align-items: center;
	width: 100%;
	height: 3px;
	overflow: visible;
	border: 0 !important;
	border-radius: 0;
	background: rgb(var(--acc-l) / 0.12) !important;
	cursor: default !important;
	--p: 0;
}
.ld-bar .fill {
	position: absolute;
	inset: 0;
	background: rgb(var(--acc-l));
	transform-origin: left center;
	transform: scaleX(var(--p));
	transition: transform 0.25s linear;
}
.ld-bar .txt {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.8rem);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.3em;
	color: rgb(var(--acc-l) / 0.45);
	transition: letter-spacing 0.5s var(--ease), color 0.4s;
}
.ld-bar.done { cursor: pointer !important; }
.ld-bar.done .txt { color: rgb(var(--acc)); }
.ld-bar.done:hover .txt { letter-spacing: 0.45em; }

/* ENTER arrives under the count once it lands */
.ld-enter {
	position: absolute;
	left: 50%;
	bottom: clamp(7.5rem, 16vh, 11rem);
	display: flex;
	gap: 4px;
	padding: 3px;
	border: 1px solid rgb(var(--acc-l) / 0.16);
	border-radius: 99px;
	background: rgb(0 0 0 / 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px) scale(0.92);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.axi-loader.ready .ld-enter { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.axi-entered .ld-enter { opacity: 0 !important; transform: translate(-50%, 0) scale(1.08) !important; transition-delay: 0s; }
.ld-enter button {
	height: 32px;
	padding: 0 18px;
	border-radius: 99px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	transition: background-color 0.3s, color 0.3s, letter-spacing 0.4s var(--ease);
}
.ld-enter #ld-go:hover { background: rgb(var(--acc-l) / 0.12); letter-spacing: 0.26em; }
.ld-enter #ld-vibes { color: rgb(var(--acc-l) / 0.45); }
.ld-enter #ld-vibes.on { background: rgb(var(--acc-l)); color: #000; }
.ld-enter #ld-vibes:hover { color: rgb(var(--acc-l)); }
.ld-enter #ld-vibes.on:hover { color: #000; background: rgb(var(--acc-l) / 0.85); }

/* ================= APP ================= */
.axi-app { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.axi-app > * { pointer-events: auto; }

.rv {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 1s var(--ease), transform 1.2s var(--ease);
	transition-delay: calc(1100ms + var(--d, 0) * 1ms);
}
.axi-entered .rv { opacity: 1; transform: none; }

/* left glass panel */
.axi-panel {
	position: absolute;
	top: 12px;
	left: 12px;
	bottom: 12px;
	width: calc(50% - 12px);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.055);
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
	-webkit-backdrop-filter: blur(1.5px) brightness(1.12);
	backdrop-filter: blur(1.5px) brightness(1.12);
	pointer-events: none;
}
.axi-panel > * { pointer-events: auto; }
.scanline {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0.05));
	box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
	animation: scan 8s linear infinite;
	pointer-events: none;
}
@keyframes scan {
	0% { top: 0%; opacity: 0; }
	8% { opacity: 1; }
	92% { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

.brand {
	position: absolute;
	top: 18px;
	left: 18px;
	display: flex;
	gap: 7px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.45;
	color: #eee;
}
/* the wordmark carries the corner on its own now, so it is set larger than the
   meta column beside it — em-based, so the Brand size setting still scales it */
.brand .b-l {
	text-align: right;
	font-size: 1.6em;
	line-height: 1.15;
	letter-spacing: 0.01em;
}
.brand .b-r { padding-left: 7px; border-left: 1px solid rgba(255, 255, 255, 0.5); }
.brand:hover .b-r { border-color: #fff; }

.axi-foot {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1.6;
}
.axi-foot-row { display: flex; gap: 56px; }

/* social links — they live in the menu panel, under the header rule */
.axi-soc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* one row of icons closing the menu panel, under the designs list */
.m-soc {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7px;
	padding: 16px 0 26px;
	border-top: 1px solid rgb(var(--acc) / 0.1);
}
/* icon buttons: the service name stays in the accessibility tree and in the
   tooltip, so an icon-only control is still announced and identifiable */
.axi-soc a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border: 1px solid rgb(var(--acc) / 0.12);
	border-radius: 5px;
	background: rgb(var(--acc-l) / 0.03);
	color: rgb(var(--acc-l) / 0.55);
	transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.axi-soc a svg { width: 19px; height: 19px; fill: currentColor; }
.axi-soc a:hover {
	transform: translateY(-2px);
	color: rgb(var(--acc-l));
	border-color: rgb(var(--acc) / 0.35);
	background: rgb(var(--acc-l) / 0.08);
}
.axi-soc a:focus-visible { outline: 1px solid rgb(var(--acc)); outline-offset: 2px; }

/* visually hidden, still read by screen readers */
.axi-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.axi-foot .k { color: #2f2f2f; }
.axi-foot .v {
	display: inline-block;
	color: #5c5c5c;
	transition: color 0.35s;
	background: linear-gradient(#fff, #fff) 0 100% / 0 1px no-repeat;
	transition: color 0.35s, background-size 0.5s var(--ease);
}
.axi-foot a.v:hover { color: #fff; background-size: 100% 1px; }

/* ticker */
.axi-ticker {
	position: absolute;
	top: 24px;
	right: 32px;
	width: min(340px, 42vw);
	height: 38px;
	overflow: hidden;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.55);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.axi-ticker .track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: ticker var(--dur, 26s) linear infinite;
	will-change: transform;
}
.axi-ticker .grp { display: flex; align-items: center; gap: 14px; padding-right: 14px; }
.axi-ticker .item { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.axi-ticker .big {
	font-family: var(--display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.axi-ticker .chip {
	padding: 2px 6px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.03);
	font-family: var(--mono);
	font-size: 7.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	white-space: nowrap;
}
.axi-ticker i { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.18); }
@keyframes ticker { to { transform: translateX(var(--shift, -50%)); } }

/* hero text */
.axi-hero {
	position: absolute;
	right: 62px;
	bottom: 92px;
	text-align: right;
	pointer-events: auto;
}
.axi-hero h1 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(56px, 6.2vw, 92px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.01em;
	color: #f4f4f4;
	cursor: default;
}
.axi-hero .ln { display: block; overflow: hidden; padding-top: 0.04em; }
.axi-hero .ln > span {
	display: inline-block;
	transform: translateY(108%);
	transition: transform 1.1s var(--ease);
}
.axi-hero .ln:nth-child(1) > span { transition-delay: 1350ms; }
.axi-hero .ln:nth-child(2) > span { transition-delay: 1450ms; }
.axi-entered .axi-hero .ln > span { transform: none; }
.axi-hero.swapped .ln > span { transition-delay: 0ms !important; }
.axi-hero.swapped .ln:nth-child(2) > span { transition-delay: 80ms !important; }
.axi-hero.out .ln > span { transform: translateY(-108%); transition-duration: 0.4s; transition-timing-function: var(--ease-io); }
.axi-hero.prep .ln > span { transform: translateY(108%); transition: none; }
.axi-hero.swapped .fx { transition-delay: 150ms; }
.axi-hero.out .fx,
.axi-hero.prep .fx { opacity: 0; transform: translateY(8px); transition-duration: 0.3s; transition-delay: 0s; }
.axi-hero.prep .fx { transition: none; }

.axi-hero .info {
	margin: 16px 0 8px !important;
	font-family: var(--mono);
	font-size: 8.5px;
	letter-spacing: 0.16em;
	color: #9b9b9b;
}
.axi-hero .tag {
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #d6d6d6;
}
.axi-hero .stats {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.1em;
	color: #8a8a8a;
}
.axi-hero .stats b { font-family: var(--display); font-size: 13px; color: #fff; margin-right: 3px; }
.axi-hero .stats i { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.2); }

/* dock + menu */
.axi-dock {
	position: absolute;
	right: 32px;
	bottom: 24px;
	/* above the stats block: its meters are positioned with z-index 1, which
	   would otherwise draw straight through the open menu panel */
	z-index: 40;
	display: flex;
	align-items: flex-end;
	gap: 18px;
}
.axi-gear, .axi-settings { z-index: 45; }
.wave {
	display: grid !important;
	place-items: center;
	width: 40px;
	height: 48px;
	opacity: 0.85;
	transition: opacity 0.3s, transform 0.3s var(--ease);
}
.wave canvas { display: block; width: 40px; height: 48px; }
.wave:hover { opacity: 1; }
.wave:active { transform: scale(0.92); }
@keyframes eq { 50% { transform: scaleY(1); } }

.menu {
	position: relative;
	width: 320px;
	border: 1px solid rgb(var(--acc) / 0.3);
	border-radius: 8px;
	background: rgb(var(--acc) / 0.05);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	font-family: var(--mono);
	transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease);
}
.menu.open { background: rgb(var(--acc) / 0.06); }

/* border that draws itself around the outline on open/close */
.m-border {
	position: absolute;
	inset: -0.5px;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
	overflow: visible;
	pointer-events: none;
	z-index: 3;
}
.m-border rect {
	width: calc(100% - 1.5px);
	height: calc(100% - 1.5px);
	fill: none;
	stroke: rgb(var(--acc));
	stroke-width: 1.5;
	stroke-dasharray: 3000;
	stroke-dashoffset: 3000;
	opacity: 0;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease 0.1s;
}
.menu.drawing .m-border rect { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.15s; }

.m-body { display: grid; grid-template-rows: 0fr; overflow: hidden; border-radius: 8px 8px 0 0; transition: grid-template-rows 0.7s var(--ease-io); }
.menu.open .m-body { grid-template-rows: 1fr; }
.m-inner { min-height: 0; overflow: hidden; padding: 0 24px; }
.m-inner > * { opacity: 0; transform: translateY(12px); transition: opacity 0.35s, transform 0.5s var(--ease); }
.menu.open .m-inner > * { opacity: 1; transform: none; }
.menu.open .m-inner > *:nth-child(1) { transition-delay: 0.18s; }
.menu.open .m-inner > *:nth-child(2) { transition-delay: 0.26s; }
.menu.open .m-inner > *:nth-child(3) { transition-delay: 0.34s; }

.m-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0 16px;
	border-bottom: 1px solid rgb(var(--acc) / 0.1);
}
.m-title { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.025em; color: rgb(var(--acc-l)); }
.m-sub { margin-top: 2px !important; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--acc-l) / 0.4); }
.m-chip {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgb(var(--acc) / 0.1);
	border-radius: 8px;
	background: rgb(var(--acc-l) / 0.05);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgb(var(--acc-l) / 0.4);
}

.m-content { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.m-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.m-social a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border: 1px solid rgb(var(--acc) / 0.1);
	border-radius: 6px;
	background: rgb(var(--acc-l) / 0.03);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: rgb(var(--acc-l));
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-social a i { flex: none; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--acc-l) / 0.2); transition: all 0.15s; }
.m-social a:hover { border-color: rgb(var(--acc) / 0.2); background: rgb(var(--acc-l) / 0.05); }
.m-social a:hover i { background: rgb(var(--acc-l)); }

.m-lab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px;
	border: 1px solid rgb(var(--acc) / 0.2);
	border-radius: 6px;
	background: rgb(var(--acc-l) / 0.05);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgb(var(--acc-l));
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-lab svg { width: 14px; height: 14px; fill: none; stroke: rgb(var(--acc-l) / 0.6); stroke-width: 1.5; stroke-linecap: round; transition: transform 0.3s var(--ease), stroke 0.15s; }
.m-lab:hover { border-color: rgb(var(--acc) / 0.4); background: rgb(var(--acc-l) / 0.1); }
.m-lab:hover svg { stroke: rgb(var(--acc-l)); transform: translate(2px, -2px); }

/* no border here: the header's bottom rule already separates this list, and the
   two sat on top of each other once the block between them moved away */
.m-items { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 24px; }
.m-item {
	display: flex !important;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px !important;
	border: 1px solid rgb(var(--acc) / 0.1) !important;
	border-radius: 6px;
	background: rgb(var(--acc-l) / 0.05) !important;
	text-align: left;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-item .n { font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 16px; color: rgb(var(--acc-l) / 0.2); }
.m-item .s { flex: 1; font-family: var(--mono); font-size: 18px; line-height: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--acc-l)); }
.m-item i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--acc-l) / 0.2); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.m-item:hover { border-color: rgb(var(--acc) / 0.2) !important; background: rgb(var(--acc-l) / 0.1) !important; }
.m-item:hover i { background: rgb(var(--acc-l)); box-shadow: 0 0 12px rgb(var(--acc) / 0.6); }

/* home designs, under the section list — same menu on every page */
.m-vars { padding: 0 0 20px; }
/* .m-vars-k is a <p>, and home.css resets those with `body.axi :where(p)` (0,1,1),
   so this margin needs the parent class to outrank the reset */
.m-vars .m-vars-k {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgb(var(--acc-l) / 0.2);
}
.m-vars-k em { font-family: ui-monospace, Consolas, monospace; font-style: normal; }
.m-vars-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.m-var {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border: 1px solid rgb(var(--acc) / 0.1);
	border-radius: 6px;
	background: rgb(var(--acc-l) / 0.03);
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-var .n { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: rgb(var(--acc-l) / 0.25); }
.m-var .s {
	flex: 1;
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgb(var(--acc-l) / 0.75);
}
.m-var i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--acc-l) / 0.2); transition: all 0.15s; }
.m-var:hover { border-color: rgb(var(--acc) / 0.25); background: rgb(var(--acc-l) / 0.08); }
.m-var:hover .s { color: rgb(var(--acc-l)); }
.m-var:hover i { background: rgb(var(--acc-l)); box-shadow: 0 0 12px rgb(var(--acc) / 0.6); }
/* the design you are already looking at */
.m-var.on { border-color: rgb(var(--acc) / 0.45); background: rgb(var(--acc) / 0.12); cursor: default; }
.m-var.on .s { color: rgb(var(--acc-l)); }
.m-var.on i { background: rgb(var(--acc)); box-shadow: 0 0 10px rgb(var(--acc) / 0.7); }
@media (max-width: 420px) {
	.m-vars-list { grid-template-columns: 1fr; }
}

/* the whole bar is the toggle */
.m-bar {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 56px;
	padding: 0 8px 0 24px !important;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-bar-l { display: flex; align-items: center; gap: 12px; }
.m-bar .idx { font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 20px; color: rgb(var(--acc-l) / 0.4); }
.m-bar .lbl { font-family: var(--mono); font-size: 18px; line-height: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--acc-l)); }
.m-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background: rgb(var(--acc-l));
	transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.m-toggle svg { width: 16px; height: 16px; fill: #060606; transform: rotate(-135deg); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.m-bar:hover .m-toggle svg { transform: rotate(-45deg); }
.m-bar:active .m-toggle { transform: scale(0.92); }
.menu.open .m-toggle svg { transform: rotate(0deg); }
.menu.open .m-bar:hover .m-toggle svg { transform: rotate(90deg); }

/* settings gear */
.axi-gear {
	position: absolute !important;
	right: 0;
	top: 50%;
	display: grid !important;
	place-items: center;
	width: 26px;
	height: 30px;
	margin-top: -15px !important;
	border-radius: 4px 0 0 4px;
	background: #ececec !important;
	transition: width 0.4s var(--ease), background-color 0.3s;
}
.axi-gear svg { width: 15px; height: 15px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; transition: transform 0.8s var(--ease); }
.axi-gear:hover { width: 32px; background: #fff !important; }
.axi-gear:hover svg,
.axi-gear.on svg { transform: rotate(120deg); }

.axi-settings {
	position: absolute;
	right: 48px;
	top: 50%;
	width: 252px;
	padding: 0 12px;
	border: 1px solid rgb(var(--acc) / 0.14);
	border-radius: 6px;
	background: rgba(18, 18, 18, 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-family: var(--mono);
	opacity: 0;
	visibility: hidden;
	transform: translate(14px, -50%) scale(0.98);
	transform-origin: right center;
	transition: opacity 0.35s, transform 0.55s var(--ease), visibility 0s linear 0.55s;
}
.axi-settings.open { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.axi-settings > * { opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s var(--ease); }
.axi-settings.open > * { opacity: 1; transform: none; }
.axi-settings.open > *:nth-child(2) { transition-delay: 0.06s; }
.axi-settings.open > *:nth-child(3) { transition-delay: 0.12s; }
.axi-settings.open > *:nth-child(4) { transition-delay: 0.18s; }
.axi-settings.open > *:nth-child(5) { transition-delay: 0.24s; }

.s-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 16px 2px 12px;
	border-bottom: 1px solid var(--line);
}
.s-title { font-size: 14px; font-weight: 700; color: rgb(var(--acc-l)); }
.s-sub { margin-top: 2px !important; font-size: 7px; letter-spacing: 0.14em; color: #6a6a6a; }

.s-sec { padding: 14px 0 4px; }
.s-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px !important;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #bdbdbd;
}
.s-label span { color: #555; font-weight: 400; }
.s-label em { margin-left: auto; font-style: normal; font-weight: 400; font-size: 7px; color: #555; }

.s-swatches {
	display: flex;
	justify-content: space-between;
	padding: 6px 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.03);
}
.s-swatches button {
	display: grid !important;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid transparent !important;
	border-radius: 4px;
	transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease);
}
.s-swatches i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgb(var(--sw));
	box-shadow: 0 0 10px rgb(var(--sw) / 0.6);
	transition: transform 0.3s var(--ease);
}
.s-swatches button:hover { background: rgba(255, 255, 255, 0.06); }
.s-swatches button:hover i { transform: scale(1.3); }
.s-swatches button.on { border-color: rgb(var(--sw) / 0.9) !important; background: rgba(255, 255, 255, 0.05); }

.s-tracks { display: flex; flex-direction: column; gap: 6px; }
.s-track {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.02) !important;
	text-align: left;
	transition: background-color 0.3s, border-color 0.3s;
}
.s-track b { display: block; font-size: 11px; font-weight: 700; color: #cfcfcf; }
.s-track small { display: block; margin-top: 2px; font-size: 6.5px; letter-spacing: 0.1em; color: #5a5a5a; }
.s-track:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
.s-track.on { background: rgba(255, 255, 255, 0.08) !important; border-color: rgb(var(--acc) / 0.25) !important; }
.s-track.on b { color: rgb(var(--acc-l)); }
.s-track .eq { display: flex; align-items: center; gap: 2px; height: 12px; opacity: 0; transition: opacity 0.3s; }
.s-track .eq i { width: 2px; height: 10px; background: rgb(var(--acc)); transform: scaleY(0.4); }
.s-track.on .eq { opacity: 1; }
.axi-sound .s-track.on .eq i { animation: eq 0.8s ease-in-out infinite; }
.axi-sound .s-track.on .eq i:nth-child(2) { animation-delay: -0.3s; }
.axi-sound .s-track.on .eq i:nth-child(3) { animation-delay: -0.55s; }

.s-seg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	padding: 2px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.03);
}
.s-seg button {
	height: 28px;
	border-radius: 3px;
	font-size: 9px;
	font-weight: 700;
	color: #6a6a6a;
	transition: color 0.3s, background-color 0.3s;
}
.s-seg button:hover { color: #ddd; }
.s-seg button.on { background: rgba(255, 255, 255, 0.1); color: rgb(var(--acc-l)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }

.s-foot {
	margin-top: 14px !important;
	padding: 12px 0 14px;
	border-top: 1px solid var(--line);
	text-align: center;
	font-size: 7px;
	letter-spacing: 0.3em;
	color: #4a4a4a;
}

/* ================= THEME (accent colour from settings) ================= */
:root { --acc: 255 255 255; --acc-l: 255 255 255; }
body.axi { transition: background-color 0.6s; }
.axi-panel { background: linear-gradient(180deg, rgb(var(--acc) / 0.04), rgb(var(--acc) / 0.012)); border-color: rgb(var(--acc) / 0.07); }
.scanline { background: linear-gradient(90deg, transparent, rgb(var(--acc) / 0.4) 40%, rgb(var(--acc) / 0.05)); box-shadow: 0 0 18px rgb(var(--acc) / 0.2); }
.brand { color: rgb(var(--acc-l)); }
.brand .b-r { border-color: rgb(var(--acc) / 0.5); }
.axi-ticker { border-color: rgb(var(--acc) / 0.1); }
.axi-ticker .big { color: rgb(var(--acc-l)); }
.axi-ticker .chip { border-color: rgb(var(--acc) / 0.14); color: rgb(var(--acc) / 0.45); }
.axi-ticker i { background: rgb(var(--acc) / 0.2); }
.axi-hero h1 { color: rgb(var(--acc-l)); }
.axi-hero .info { color: rgb(var(--acc) / 0.6); }
.axi-hero .tag { color: rgb(var(--acc-l) / 0.85); }
.axi-hero .stats b { color: rgb(var(--acc-l)); }
.hud-status i { background: rgb(var(--acc)); box-shadow: 0 0 8px rgb(var(--acc) / 0.8); }
.hud-status { color: rgb(var(--acc-l) / 0.85); }
.hud-rows .v { color: rgb(var(--acc-l)); }
.hud-fig i { background: rgb(var(--acc) / 0.55); }
.axi-hud:hover .hud-fig i { background: rgb(var(--acc) / 0.9); }
.axi-gear { background: rgb(var(--acc-l)) !important; }
.axi-foot .v { color: rgb(var(--acc-l)); }
.axi-foot a.v { background-image: linear-gradient(rgb(var(--acc)), rgb(var(--acc))); }
@media (min-width: 1100px) {
	.axi-hero .ln > span {
		background-image: linear-gradient(180deg,
			rgb(var(--acc) / 0.12) 0%, rgb(var(--acc) / 0.12) 38%,
			rgb(var(--acc) / 0.6) 46%, rgb(var(--acc-l)) 50%, rgb(var(--acc) / 0.6) 54%,
			rgb(var(--acc) / 0.12) 62%, rgb(var(--acc) / 0.12) 100%);
	}
	.axi-hero .info { color: rgb(var(--acc) / 0.35); }
	.axi-hero .tag { color: rgb(var(--acc-l) / 0.55); }
	.axi-foot .k { color: rgb(var(--acc-l) / 0.4); }
	.axi-settings { width: 300px; right: 52px; }
}

/* developer stats HUD (desktop only) */
/* ---------- developer stats: a small terminal window ---------- */
/* No card: the stats sit straight on the page like the copy in the left panel.
   What gives the block presence instead is drawn detail — corner brackets, a
   spine rule down the left, a dashed rule in the header and lit meters. */
.axi-hud {
	position: relative;
	display: none;
	padding: 16px 18px 16px 20px;
	font-family: var(--mono);
	background: none;
}
/* technical-drawing corner brackets, top-left and bottom-right */
.axi-hud::before,
.axi-hud::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	pointer-events: none;
	border: 1px solid rgb(var(--acc) / 0.45);
	transition: border-color 0.5s var(--ease), width 0.5s var(--ease), height 0.5s var(--ease);
}
.axi-hud::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.axi-hud::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.axi-hud:hover::before,
.axi-hud:hover::after { width: 26px; height: 26px; border-color: rgb(var(--acc) / 0.85); }

/* title row: label, dashed rule, live status */
.hud-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid rgb(var(--acc) / 0.12);
	background: none;
}
.hud-bar::after {
	content: '';
	order: 1;
	flex: 1 1 auto;
	min-width: 14px;
	height: 1px;
	background: repeating-linear-gradient(90deg, rgb(var(--acc-l) / 0.22) 0 2px, transparent 2px 6px);
}
.hud-bar .hud-status { order: 2; }
.hud-name {
	flex: none;
	overflow: hidden;
	max-width: 58%;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgb(var(--acc-l) / 0.4);
}
/* colours for these come from the theme block above, so only geometry here */
.hud-status { display: flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; }
.hud-status i {
	position: relative;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	animation: pulse 1.6s ease-in-out infinite;
}
/* a ring expanding out of the status dot */
.hud-status i::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1px solid rgb(var(--acc) / 0.55);
	animation: hud-ring 2.4s var(--ease) infinite;
}
@keyframes hud-ring {
	0% { transform: scale(0.5); opacity: 0.9; }
	70%, 100% { transform: scale(2.1); opacity: 0; }
}
@keyframes pulse { 50% { opacity: 0.25; box-shadow: none; } }

/* body — scrolls if someone adds many rows, so the block keeps its height */
.hud-win { position: relative; padding: 16px 0 0 16px; overflow-y: auto; scrollbar-width: none; }
/* the spine: a hairline down the left that fades out at the bottom */
.hud-win::before {
	content: '';
	position: absolute;
	top: 16px;
	bottom: 6px;
	left: 0;
	width: 1px;
	background: linear-gradient(180deg, rgb(var(--acc) / 0.55), rgb(var(--acc) / 0.06));
}
.hud-win::-webkit-scrollbar { display: none; }
.hud-bar { flex: none; }
/* the two headline figures — the numbers carry the block now */
.hud-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; counter-reset: fig; }
.hud-fig { position: relative; padding-bottom: 11px; }
/* an index numeral in the corner, like a plate number on a drawing */
.hud-fig::before {
	counter-increment: fig;
	content: '0' counter(fig);
	position: absolute;
	top: 1px;
	right: 0;
	font-size: 8px;
	letter-spacing: 0.1em;
	color: rgb(var(--acc-l) / 0.22);
}
.hud-fig b {
	display: block;
	font-family: var(--display);
	font-size: 46px;
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -0.01em;
	/* the same vertical sheen the hero headline uses, so the two sides rhyme */
	background-image: linear-gradient(180deg,
		rgb(var(--acc) / 0.45) 0%, rgb(var(--acc) / 0.45) 34%,
		rgb(var(--acc-l)) 50%,
		rgb(var(--acc) / 0.45) 66%, rgb(var(--acc) / 0.45) 100%);
	background-size: 100% 300%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: hud-sheen 7s linear infinite;
}
@keyframes hud-sheen {
	from { background-position: 0 100%; }
	to { background-position: 0 -200%; }
}
@media (prefers-reduced-motion: reduce) {
	.hud-fig b { animation: none; background-position: 0 50%; }
}
.hud-fig span {
	display: block;
	margin-top: 7px;
	font-size: 8.5px;
	letter-spacing: 0.18em;
	color: rgb(var(--acc-l) / 0.4);
}
/* meter, still driven by the Projects/Years bar settings */
.hud-fig::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgb(var(--acc-l) / 0.08);
}
.hud-fig i {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.6s var(--ease) 1.8s, background 0.4s;
}
.axi-entered .hud-fig i { transform: scaleX(var(--w)); }
/* a lit tip at the end of each meter */
.hud-fig i::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	transform: translate(50%, -50%);
	background: rgb(var(--acc-l));
	box-shadow: 0 0 9px rgb(var(--acc) / 0.9);
}


/* output rows — the leader is its own element, so nothing has to sit on an
   opaque background to mask it (which would defeat the glass) */
.hud-rows { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.hud-rows li {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-bottom: 8px;
}
.hud-rows .k { flex: none; font-size: 9.5px; letter-spacing: 0.06em; color: rgb(var(--acc-l) / 0.45); }
.hud-rows .d {
	flex: 1 1 auto;
	min-width: 12px;
	height: 1px;
	transform: translateY(-3px);
	background: repeating-linear-gradient(90deg, rgb(var(--acc-l) / 0.18) 0 1px, transparent 1px 4px);
}
.hud-rows .v {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}
/* second group: plain text values, smaller and no meter */
.hud-rows-s { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(var(--acc) / 0.1); gap: 9px; }
.hud-rows-s li { padding-bottom: 0; transition: transform 0.35s var(--ease); }
.hud-rows-s li:hover { transform: translateX(3px); }
.hud-rows-s li:hover .k { color: rgb(var(--acc-l) / 0.8); }
.hud-rows-s li:hover .d { background: repeating-linear-gradient(90deg, rgb(var(--acc) / 0.55) 0 1px, transparent 1px 4px); }
.hud-rows .k, .hud-rows .d { transition: color 0.3s, background 0.3s; }
/* these values are free text from wp-admin, so they wrap instead of running
   past the window edge; the leader shrinks to make room */
.hud-rows-s .v {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: anywhere;
	color: rgb(var(--acc-l) / 0.8);
}
.hud-rows-s .k { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hud-rows .d { min-width: 10px; flex-shrink: 1; }
/* thin meter under the two numbers, driven by the bar settings */

/* ================= DESKTOP (reference layout at full width) ================= */
@media (min-width: 1100px) {
	.axi-panel { top: 12px; left: 12px; bottom: 12px; width: calc(50% - 12px); }
	.brand { top: 20px; left: 28px; font-size: 13px; line-height: 1.5; gap: 9px; }
	.brand .b-r { padding-left: 9px; }

	.axi-foot { left: 28px; right: 28px; bottom: 20px; gap: 16px; font-size: 15px; line-height: 24px; }
	.axi-foot-row { gap: 80px; }
	.axi-foot .k { color: rgb(var(--acc-l) / 0.4); }
	.axi-foot .v { color: rgb(var(--acc-l)); }

	/* ticker spans the right half */
	.axi-ticker {
		top: 32px;
		left: calc(50% + 40px);
		right: 40px;
		width: auto;
		height: 48px;
	}
	.axi-ticker .big { font-size: 22px; }
	.axi-ticker .chip { font-size: 9.5px; }
	.axi-ticker .grp { gap: 18px; padding-right: 18px; }
	.axi-ticker i { height: 20px; }

	/* title: left middle, dim with a scanning light */
	.axi-hero {
		left: 5.55vw;
		right: auto;
		top: 36vh;
		bottom: auto;
		text-align: left;
	}
	.axi-hero h1 { font-size: clamp(60px, 4.9vw, 92px); line-height: 0.9; letter-spacing: 0.01em; font-weight: 700; }
	.axi-hero .ln > span {
		color: transparent;
		background-image: linear-gradient(180deg,
			rgb(var(--acc) / 0.12) 0%, rgb(var(--acc) / 0.12) 38%,
			rgb(var(--acc) / 0.6) 46%, rgb(var(--acc-l)) 50%, rgb(var(--acc) / 0.6) 54%,
			rgb(var(--acc) / 0.12) 62%, rgb(var(--acc) / 0.12) 100%);
		background-size: 100% 400%;
		-webkit-background-clip: text;
		background-clip: text;
		animation: title-scan 6s linear infinite;
	}
	.axi-hero .ln:nth-child(2) > span { animation-delay: 0.35s; }
	.axi-hero .info-wrap { position: relative; margin: 24px 0 0 64px; }
	.axi-hero .info-wrap::before {
		content: '';
		position: absolute;
		left: -64px;
		top: 7px;
		width: 48px;
		height: 1px;
		background: rgba(255, 255, 255, 0.3);
	}
	.axi-hero .info { margin: 0 0 8px !important; font-family: var(--sans); font-size: 9px; letter-spacing: 0.1em; color: rgb(var(--acc) / 0.35); }
	.axi-hero .tag { font-size: 11px; line-height: 18px; font-weight: 400; letter-spacing: 0.02em; color: rgb(var(--acc-l) / 0.55); }
	.axi-hero .stats { display: none !important; }

	/* Right edge lines up with the dock/menu (both 41px in), and the window is
	   centred vertically with auto margins rather than a transform — .rv owns
	   transform for the entrance. The height cap keeps it clear of the dock on
	   short screens, and the body scrolls if the rows outgrow it. */
	.axi-hud {
		display: flex;
		flex-direction: column;
		position: absolute;
		/* well clear of the dock's 41px, and it scales with the viewport so wide
		   screens give it proportionally more room */
		right: clamp(80px, 10vw, 190px);
		top: 0;
		bottom: 0;
		width: 340px;
		height: fit-content;
		max-height: min(64vh, calc(100vh - 250px));
		margin: auto 0;
	}

	.axi-dock { right: 41px; bottom: 33px; gap: 16px; align-items: center; }
	.axi-dock .wave { align-self: flex-end; margin-bottom: 4px; }
}
@keyframes title-scan {
	from { background-position: 0 100%; }
	to { background-position: 0 0; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
	.axi-panel { width: calc(42% - 12px); }
	.axi-foot-row { flex-direction: column; gap: 10px; }
}

@media (max-width: 767px) {
	/* the frame keeps its shape; the curtain and the count shrink */
	.ld-grid { grid-template-columns: repeat(3, 1fr); }
	.ld-cell:nth-child(n + 4) { display: none; }
	.ld-num { font-size: min(56vw, 34vh); }
	.ld-veil { background-size: auto, 25% 100%; }
	.ld-opts { gap: 1.15rem 1.5rem; }
	.ld-enter { bottom: clamp(9rem, 22vh, 13rem); }

	.axi-panel { top: 8px; left: 8px; right: 8px; bottom: 8px; width: auto; }
	.axi-foot { display: none; }
	.brand { top: 16px; left: 16px; }
	.axi-ticker { top: 64px; left: 8px; right: 8px; width: auto; }
	.axi-hero { right: 24px; left: 24px; bottom: 96px; }
	.axi-hero h1 { font-size: 58px; }
	.axi-dock { right: 16px; left: 16px; bottom: 16px; justify-content: flex-end; }
	.menu { width: min(320px, calc(100vw - 88px)); }
	.m-inner { padding: 0 16px; }
	.m-head { padding: 16px 0 12px; }
	.m-item { padding: 12px !important; }
	.m-bar { padding-left: 16px !important; }
	.axi-settings { right: 34px; width: min(252px, calc(100vw - 50px)); }
}

@media (prefers-reduced-motion: reduce) {
	.scanline, .axi-ticker .track, .ld-scan { animation: none; }
}

/* ================= WORD GLOBE (Home "Globe" variant) ================= */
.axi-app > .axi-globe {
	position: absolute;
	top: 50%;
	right: 5vw;                        /* breathing room on the right */
	z-index: 1;
	width: clamp(520px, 50vw, 800px);  /* a little larger than the reference */
	aspect-ratio: 1;
	pointer-events: none;
}
.axi-globe canvas { display: block; width: 100%; height: 100%; }
.axi-globe.rv { transform: translateY(calc(-50% + 14px)); }
.axi-entered .axi-globe.rv { transform: translateY(-50%); }
@media (max-width: 1024px) {
	/* tablet: large and faded, tucked into the bottom-right corner */
	.axi-app > .axi-globe { top: auto; right: -58vw; bottom: -74vw; width: 100vw; }
	.axi-globe.rv, .axi-entered .axi-globe.rv { transform: none; }
	.axi-entered .axi-globe.rv { opacity: 0.55; }
}
@media (max-width: 640px) {
	.axi-app > .axi-globe { display: none; }
}

/* ================= PAGE-TO-PAGE ================= */
/* no loader when arriving from another page in the same visit */
.axi-skip-loader .axi-loader { display: none; }
.axi-skip-loader .rv { transition-delay: calc(150ms + var(--d, 0) * 0.4ms); }
.axi-skip-loader .axi-hero .ln:nth-child(1) > span { transition-delay: 300ms; }
.axi-skip-loader .axi-hero .ln:nth-child(2) > span { transition-delay: 400ms; }
/* fade out before navigating */
.axi-leaving .axi-app,
.axi-leaving .axi-gl { opacity: 0; filter: blur(8px); transition: opacity 0.45s ease, filter 0.45s ease; }

/* ================= DESIGN CONTROLS (wp-admin → Axori Home → Design) =================
   Each --s-* is a multiplier (1 = default size). --bg is the page background. */
.ld-cell { background: var(--bg); }
.axi-vignette { background: radial-gradient(ellipse at center, transparent 45%, color-mix(in srgb, var(--bg) 75%, transparent) 100%); }

.brand { font-size: calc(11px * var(--s-brand, 1)); }
.axi-foot { font-size: calc(11.5px * var(--s-footer, 1)); }
.axi-ticker .big { font-size: calc(19px * var(--s-ticker, 1)); }
.axi-ticker .chip { font-size: calc(7.5px * var(--s-ticker, 1)); }
.axi-hero h1 { font-size: calc(clamp(56px, 6.2vw, 92px) * var(--s-title, 1)); }
.axi-hero .info { font-size: calc(8.5px * var(--s-info, 1)); }
.axi-hero .tag { font-size: calc(10.5px * var(--s-text, 1)); }
.axi-hero .stats { font-size: calc(8px * var(--s-stats, 1)); }
.axi-hero .stats b { font-size: calc(13px * var(--s-stats, 1)); }
.hud-name { font-size: calc(9px * var(--s-stats, 1)); }
.hud-status { font-size: calc(8px * var(--s-stats, 1)); }
.hud-fig b { font-size: calc(46px * var(--s-stats, 1)); }
.hud-fig span { font-size: calc(8.5px * var(--s-stats, 1)); }
.hud-rows .k { font-size: calc(9.5px * var(--s-stats, 1)); }
.hud-rows .v { font-size: calc(13px * var(--s-stats, 1)); }
.hud-rows-s .v { font-size: calc(10px * var(--s-stats, 1)); }
.axi-hud { width: calc(340px * max(1, var(--s-stats, 1))); }
.m-title { font-size: calc(20px * var(--s-menu, 1)); line-height: calc(28px * var(--s-menu, 1)); }
.m-sub { font-size: calc(10px * var(--s-menu, 1)); }
.m-social a, .m-lab { font-size: calc(12px * var(--s-menu, 1)); }
.m-item .n { font-size: calc(12px * var(--s-menu, 1)); }
.m-item .s { font-size: calc(18px * var(--s-menu, 1)); line-height: calc(28px * var(--s-menu, 1)); }
.m-bar .idx { font-size: calc(14px * var(--s-menu, 1)); }
.m-bar .lbl { font-size: calc(18px * var(--s-menu, 1)); line-height: calc(28px * var(--s-menu, 1)); }

@media (min-width: 1100px) {
	.brand { font-size: calc(13px * var(--s-brand, 1)); }
	.axi-foot { font-size: calc(15px * var(--s-footer, 1)); }
	.axi-ticker .big { font-size: calc(22px * var(--s-ticker, 1)); }
	.axi-ticker .chip { font-size: calc(9.5px * var(--s-ticker, 1)); }
	.axi-hero h1 { font-size: calc(clamp(60px, 4.9vw, 92px) * var(--s-title, 1)); }
	.axi-hero .info { font-size: calc(9px * var(--s-info, 1)); }
	.axi-hero .tag { font-size: calc(11px * var(--s-text, 1)); line-height: calc(18px * var(--s-text, 1)); }
}
@media (max-width: 767px) {
	.axi-hero h1 { font-size: calc(58px * var(--s-title, 1)); }
}


/* ================================================================
   HERO COPY — the treatment that started on the Five design and now
   applies to every home page: an outline/solid headline lockup, a
   rule growing out of the info label, the tag in the sans face
   behind an accent rule, and the stats under a divider.
   ================================================================ */
.axi-hero h1 { line-height: 0.82; }
/* first line hollow, second line solid: the pair reads as one lockup */
.axi-hero .ln:first-child > span {
	-webkit-text-stroke: 1px rgb(var(--acc-l) / 0.75);
	color: transparent;
	background: none;
	-webkit-text-fill-color: transparent;
}
.axi-hero .ln:nth-child(2) > span { color: rgb(var(--acc-l)); }

.axi-hero .info {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	letter-spacing: 0.34em;
	color: rgb(var(--acc) / 0.75);
}
/* a short rule that grows out of the label */
.axi-hero .info::after {
	content: '';
	width: 54px;
	height: 1px;
	background: linear-gradient(90deg, rgb(var(--acc) / 0.7), transparent);
}

.axi-hero .tag {
	position: relative;
	padding: 14px 0 14px 18px;
	border-left: 1px solid rgb(var(--acc) / 0.35);
	font-family: var(--sans);
	font-weight: 300;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.75;
}
.axi-hero .stats {
	gap: 22px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgb(var(--acc-l) / 0.1);
}
.axi-hero .stats b { font-family: var(--display); font-size: 1.5em; }


/* ================================================================
   TOP SLIDER BAND — the full-width ticker that started on the Five
   design, now shared by any home page carrying .axi-band (Five and
   Particles). Other designs keep the short corner strip.
   ================================================================ */
@media (min-width: 1100px) {
	.axi-band .axi-ticker {
		top: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 46px;
		border-top: 0;
		border-bottom: 1px solid rgb(var(--acc) / 0.14);
		background: linear-gradient(180deg, rgb(var(--acc) / 0.07), transparent);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	}
	/* the panel and the stats block start below the band */
	.axi-band .axi-panel { top: 58px; }
	.axi-band .axi-hud { top: 46px; }
}
.axi-band .axi-ticker .item { gap: 14px; }
.axi-band .axi-ticker .big {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.42em;
	text-transform: uppercase;
}
.axi-band .axi-ticker .chip {
	padding: 3px 9px;
	border-radius: 0;
	border-color: rgb(var(--acc) / 0.3);
	font-size: 8.5px;
	letter-spacing: 0.24em;
	color: rgb(var(--acc-l) / 0.5);
}
.axi-band .axi-ticker i { width: 3px; height: 3px; border-radius: 0; transform: rotate(45deg); }
@media (max-width: 1099px) {
	.axi-band .axi-ticker .big { font-size: 11px; letter-spacing: 0.3em; }
}


/* ================================================================
   REARRANGED HOME LAYOUTS
   .axi-topmenu  menu at the top, opening downward
   .axi-out      footer bottom right, ticker in the bottom-left glass
   .axi-vp / .axi-vc then only set where the menu sits horizontally.
   ================================================================ */
@media (min-width: 1100px) {
	/* top edge lines up with the brand wordmark on the other side */
	.axi-topmenu .axi-dock {
		top: 32px;
		bottom: auto;
		align-items: flex-start;
	}
	.axi-vp .axi-dock { right: 41px; }
	/* Globe: the menu sits in the middle of the top edge rather than in a
	   corner. Centred by stretching the dock across the page and centring its
	   contents — .rv owns the dock's transform for the entrance, so a
	   translateX(-50%) would be wiped the moment the page lands. The stretched
	   box must not swallow clicks meant for the page behind it. */
	.axi-v4 .axi-dock {
		left: 0;
		right: 0;
		justify-content: center;
		pointer-events: none;
	}
	.axi-v4 .axi-dock > * { pointer-events: auto; }
	/* sits wholly inside the glass panel, against its right edge, instead of
	   straddling the centre line */
	.axi-vc .axi-dock { left: auto; right: calc(50% + 28px); }
	.axi-topmenu .axi-dock .wave { align-self: flex-start; margin-bottom: 0; margin-top: 4px; }

	/* the bar is above the panel now, so the menu opens downward */
	.axi-topmenu .menu { display: flex; flex-direction: column-reverse; }
	/* opening downward from the top, the panel would run off the bottom of the
	   screen, so it is capped and scrolls instead */
	.axi-topmenu .menu.open .m-inner {
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		scrollbar-width: none;
	}
	.axi-topmenu .menu.open .m-inner::-webkit-scrollbar { display: none; }
	.axi-topmenu .m-body { border-radius: 0 0 8px 8px; }
	.axi-topmenu .m-bar { border-radius: 8px 8px 0 0 !important; }
	.axi-topmenu .menu.open .m-bar { border-radius: 8px 8px 0 0 !important; }

	/* The stats stay put when the menu opens. On Particles the open panel does
	   cross them, but it has its own glass and sits above — an overlay, not a
	   reason to blank the page behind it. */

	/* footer moves out of the panel to the bottom right, right-aligned */
	.axi-out .axi-foot-fixed {
		left: auto;
		right: 41px;
		bottom: 33px;
		z-index: 30;
		align-items: flex-end;
		text-align: right;
	}
	.axi-out .axi-foot-fixed .axi-foot-row { justify-content: flex-end; }

	/* the ticker leaves the top for the bottom left, so the panel starts high again */
	.axi-out .axi-panel { top: 12px; }
	/* centred in the viewport, like the hero copy opposite it */
	.axi-topmenu .axi-hud { top: 0; bottom: 0; }
	/* bottom bar over the left half only: from the left edge to the centre,
	   frosted glass that thins out toward the middle of the screen */
	.axi-out .axi-ticker {
		/* sits in the bottom of the glass, inset by a pixel so it never spills
		   past the panel's edge or its 6px corner */
		top: auto;
		bottom: 13px;
		left: 13px;
		right: 50%;
		width: auto;
		height: 52px;
		border-bottom: 0;
		border-top: 1px solid rgb(var(--acc) / 0.12);
		border-radius: 0 0 5px 5px;
		background: linear-gradient(90deg, rgb(var(--acc) / 0.09), rgb(var(--acc) / 0.03) 70%, transparent);
		-webkit-backdrop-filter: blur(14px) saturate(1.1);
		backdrop-filter: blur(14px) saturate(1.1);
		-webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
		mask-image: linear-gradient(90deg, #000 78%, transparent);
	}
	/* the panel keeps its full height, so its glass sits behind the bar */
	.axi-out .axi-panel { bottom: 12px; }
}
/* below the desktop layout the footer returns to the bottom left */
@media (max-width: 1099px) {
	.axi-out .axi-foot-fixed { left: 16px; right: 16px; bottom: 16px; z-index: 30; }
}


/* ================================================================
   TOP-RIGHT CLUSTER — social icons plus a contact button, used by the
   CRT design where the menu sits in the middle of the top edge.
   ================================================================ */
.axi-topright {
	position: absolute;
	top: 32px;
	right: 41px;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 10px;
}
.axi-soc-top { gap: 6px; }
.axi-soc-top a { padding: 10px; border-radius: 5px; }
.axi-soc-top a svg { width: 17px; height: 17px; }

/* the same button language as the blog's READ POST / ALL POSTS controls */
/* filled by default; hovering hollows it out rather than filling it in */
.axi-topright .axi-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 12px 18px;
	border: 1px solid rgb(var(--acc-l));
	border-radius: 5px;
	background: rgb(var(--acc-l));
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #000;
	transition: color 0.3s, border-color 0.3s, background 0.3s, gap 0.4s var(--ease);
}
.axi-topright .axi-cta i { font-style: normal; transition: transform 0.4s var(--ease); }
.axi-topright .axi-cta:hover {
	gap: 1rem;
	color: rgb(var(--acc-l));
	background: rgb(var(--acc) / 0.08);
	border-color: rgb(var(--acc) / 0.55);
}
.axi-topright .axi-cta:hover i { transform: translateX(2px); }
.axi-topright .axi-cta:focus-visible { outline: 1px solid rgb(var(--acc)); outline-offset: 3px; }

/* on narrow screens the cluster drops the icons and keeps the button */
@media (max-width: 1099px) {
	.axi-topright { top: 20px; right: 16px; }
	.axi-soc-top { display: none; }
	.axi-topright .axi-cta { padding: 9px 13px; font-size: 10px; letter-spacing: 0.16em; }
	/* without the desktop band the ticker sits in this same row, so it drops
	   below the button rather than running underneath it */
	.axi-vc .axi-ticker { top: 74px; }
}




/* ================================================================
   HOME FOUR (.axi-v4) — the word globe is small, monochrome and very
   quiet, so the left column answers it in the same register: mono
   metadata rows with dotted leaders (as in the stats block), a
   bordered chip rather than a filled tag, and the house
   outline + solid headline at a restrained size.
   ================================================================ */
.axi-v4 .axi-panel {
	pointer-events: none;
	border: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.axi-v4 .axi-ticker,
.axi-v4 .scanline { display: none; }
/* the box the column rules are painted on (their positions are set at desktop) */
.axi-v4 .axi-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
/* the dock is centred on the top edge — see the .axi-v4 rule in the
   REARRANGED HOME LAYOUTS block above, which owns its position */

/* ---- lockup ---- */
.axi-v4 .axi-hero { left: 28px; right: calc(50% + 12px); width: auto; max-width: none; }

/* a bordered chip, in the language of the ticker chips and filter chips */
.axi-v4 .h4-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 40px !important;
	padding: 8px 15px;
	border: 1px solid rgb(var(--acc) / 0.3);
	background: rgb(var(--acc) / 0.05);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.75);
}
.axi-v4 .h4-pill::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgb(var(--acc));
	box-shadow: 0 0 8px rgb(var(--acc) / 0.8);
}

/* restrained headline, flush left, keeping the outline + solid pairing */
.axi-v4 .axi-hero h1 { line-height: 0.86; }
.axi-v4 .axi-hero .ln > span { font-size: clamp(40px, 5vw, 78px); }

/* notes as one quiet mono row under the lockup */
.axi-v4 .h4-note {
	display: inline-block;
	margin-top: 42px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.32);
}
.axi-v4 .h4-note-r { margin-left: 12px; }
/* the pair reads as one line in a 367px column at this tracking */
.axi-v4 .h4-note { letter-spacing: 0.18em; }
.axi-v4 .h4-note-r::before { content: '/ '; color: rgb(var(--acc) / 0.5); }

/* the shared info/tag/stats lines give way to the intro above */
.axi-v4 .axi-hero .info-wrap,
.axi-v4 .axi-hero .stats { display: none; }

/* ---- three columns: portrait | content | globe ---- */
.axi-v4 {
	--h4-gut: 0px;               /* column gutter (set at desktop) */
	--h4-col: 28px;              /* content column start (overridden at desktop) */
	--h4-w: min(42%, 380px);
}
.axi-v4 .h4-portrait {
	position: absolute;
	z-index: 4;
	overflow: hidden;
	display: block;
	pointer-events: auto;
}
.axi-v4 .h4-portrait canvas { display: block; width: 100%; height: 100%; }
/* Print language rather than CRT: scanlines would beat against the halftone
   grid, so the wash is an ink vignette that sinks the dots into the page. */
.axi-v4 .h4-portrait-scan {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 78% at 50% 42%, transparent 38%, rgb(var(--bg) / 0.55) 82%, rgb(var(--bg) / 0.92) 100%),
		linear-gradient(180deg, rgb(var(--bg) / 0.6) 0%, transparent 16% 78%, rgb(var(--bg) / 0.85) 100%);
}

@media (min-width: 1100px) {
	/* Three equal thirds, each inset by a gutter and divided by full-height
	   rules: 1 portrait · 2 content · 3 globe. */
	.axi-v4 {
		--h4-gut: 30px;
		--h4-col: calc(33.333% + var(--h4-gut));
		--h4-w: calc(33.333% - var(--h4-gut) * 2);
	}

	.axi-v4 .h4-portrait {
		display: block;
		left: var(--h4-gut);
		width: calc(33.333% - var(--h4-gut) * 2);
		top: 50%;
		height: 72vh;
		transform: translateY(-50%);
	}
	/* vertically centred in its column, with auto margins rather than a
	   transform (.rv animates transform for the entrance) */
	.axi-v4 .axi-hero {
		left: var(--h4-col);
		right: auto;
		width: var(--h4-w);
		top: 0;
		bottom: 0;
		height: fit-content;
		margin: auto 0;
	}
	/* the globe leaves its own right-hand placement for column three; it is
	   sized freely and hung off that column's centre line, so it can grow
	   well past the third without dragging the rules with it */
	.axi-v4 { --h4-globe: clamp(560px, 44vw, 960px); }
	.axi-v4 .axi-app > .axi-globe {
		left: auto;
		right: -2vw;               /* a hair of bleed, as on the globe home */
		width: var(--h4-globe);
		/* the globe is wider than its third, so it is clipped back to the
		   divider: its left edge sits at 102vw - width, and column three
		   starts at 66.667vw + gutter, hence the offset below */
		clip-path: inset(0 0 0 calc(var(--h4-globe) - 35.333vw + var(--h4-gut)));
		/* the shared .rv entrance leaves a 14px offset in the transform, so the
		   centring is done with top instead and the transform is dropped */
		top: calc(50% - var(--h4-globe) / 2);
	}
	.axi-v4 .axi-globe.rv,
	.axi-v4 .axi-entered .axi-globe.rv { transform: none; }

	/* the dividing rules — the panel is only a positioning box on this design,
	   so it goes full-bleed and its thirds line up with the real columns */
	.axi-v4 .axi-panel { top: 0; left: 0; right: 0; bottom: 0; width: auto; }
	.axi-v4 .axi-panel::after {
		background:
			linear-gradient(90deg, transparent calc(33.333% - 1px), rgb(var(--acc-l) / 0.16) 33.333%, transparent calc(33.333% + 1px)),
			linear-gradient(90deg, transparent calc(66.667% - 1px), rgb(var(--acc-l) / 0.16) 66.667%, transparent calc(66.667% + 1px));
	}
	.axi-v4 .axi-hero .ln > span { font-size: clamp(40px, 5vw, 78px); }
}
/* ---- Home Four: wrapping headline and the full-width action ---- */
/* the line boxes clip by default for the reveal; Four allows wrapping so a
   longer headline flows instead of being cut off */
.axi-v4 .axi-hero .ln { overflow: visible; }
.axi-v4 .axi-hero .ln > span { white-space: normal; display: inline-block; }
.axi-v4 .axi-hero h1 { margin-bottom: 10px; }

/* the button breaks out of the column's gutter so its edges meet the two
   divider rules, spanning the full third */
.axi-v4 .h4-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: auto;
	margin-top: 52px;
	margin-left: calc(-1 * var(--h4-gut));
	margin-right: calc(-1 * var(--h4-gut));
	padding: 18px 20px;
	/* same value as the column rules, so the button reads as part of the grid */
	border: 1px solid rgb(var(--acc-l) / 0.16);
	background: rgb(var(--acc) / 0.04);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.85);
	transition: color 0.35s, border-color 0.35s, background 0.35s;
}
.axi-v4 .h4-cta svg {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	transition: transform 0.45s var(--ease);
}
.axi-v4 .h4-cta:hover {
	color: #000;
	background: rgb(var(--acc-l));
	border-color: rgb(var(--acc-l));
}
.axi-v4 .h4-cta:hover svg { transform: translateX(6px); }
.axi-v4 .h4-cta:focus-visible { outline: 1px solid rgb(var(--acc)); outline-offset: 3px; }

/* ---- Home Four: contact + clock at the foot of the portrait column ---- */
.axi-v4 .h4-foot {
	left: 28px;
	right: auto;
	bottom: 26px;
	z-index: 5;
}
.axi-v4 .h4-foot .axi-foot-row { gap: 40px; }
@media (min-width: 1100px) {
	.axi-v4 .h4-foot {
		left: var(--h4-gut);
		right: auto;
		max-width: calc(33.333% - var(--h4-gut) * 2);
	}
}

/* Below the three-column breakpoint there is no room for columns, so Four
   stacks: the halftone portrait becomes a full-bleed backdrop and the lockup
   sits over it, bottom-left, the way the other variants read on a phone. */
@media (max-width: 1099px) {
	.axi-v4 .axi-hero {
		left: 24px;
		right: 24px;
		top: auto;
		/* clear of the stacked contact/clock block below it */
		bottom: 215px;
		margin: 0;
		text-align: left;
	}
	.axi-v4 .h4-portrait {
		inset: 0;
		width: auto;
		height: auto;
		opacity: 0.9;
		z-index: 0;
	}
	/* the vignette turns into a bottom wash so the copy stays readable */
	.axi-v4 .h4-portrait-scan {
		background: linear-gradient(180deg, rgb(var(--bg) / 0.55) 0%, transparent 26% 46%, rgb(var(--bg) / 0.96) 92%);
	}
	/* nothing to align to without the column rules */
	.axi-v4 .h4-cta { margin-left: 0; margin-right: 0; margin-top: 34px; }
	.axi-v4 .h4-foot { left: 24px; bottom: 84px; }
}
@media (max-width: 767px) {
	.axi-v4 .axi-hero { bottom: 108px; }
	.axi-v4 .h4-pill { margin-bottom: 26px !important; }
	.axi-v4 .h4-cta { margin-top: 24px; padding: 15px 16px; }
	/* the notes pair no longer fits on one line, so it stacks tightly
	   instead of inheriting the full gap twice */
	.axi-v4 .h4-note { margin-top: 22px; }
	.axi-v4 .h4-note-r { margin-top: 4px; margin-left: 0; }
}