/* ---------------------------------------------------------------
   Home stage. One viewport, never scrolls, at any size.
   --------------------------------------------------------------- */

html.is-home,
html.is-home body {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

.stage-shell {
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.stage-shell .topbar {
	flex: 0 0 auto;
	position: relative;
	width: min(100% - 2 * var(--space-md), 1180px);
	margin-inline: auto;
}

/* Avatar / figure toggle in the bar ------------------------------ */

.figure-toggle {
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
	margin-inline-start: clamp(14px, 2.4vw, 30px);
}

.figure-toggle button {
	padding: 4px 11px;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.figure-toggle button:hover {
	color: var(--ink);
}

.figure-toggle button[aria-pressed="true"] {
	color: var(--ink);
	border-color: var(--accent);
}

/* The stage ------------------------------------------------------ */

.stage {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 1.4vh, 18px);
	padding-block: clamp(8px, 2vh, 26px);
	width: min(100% - 2 * var(--space-md), 1180px);
	margin-inline: auto;
	position: relative;
}

/* Soft ground the figure stands on. Not a decorative gradient:
   it is the only depth cue on an otherwise flat page. */
.stage::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(74vh, 88vw);
	aspect-ratio: 1;
	transform: translate(-50%, -46%);
	background: radial-gradient(circle, rgba(47, 166, 166, 0.07) 0%, rgba(47, 166, 166, 0) 68%);
	pointer-events: none;
}

/* Selected design, read above the figure ------------------------- */

.stage__meta {
	flex: 0 0 auto;
	text-align: center;
	position: relative;
	transition: opacity 0.26s ease;
}

.stage__meta.is-swapping {
	opacity: 0;
}

.stage__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(20px, 3.4vh, 34px);
	line-height: 1.1;
	margin-bottom: 0.35em;
}

.stage__spec {
	font-size: clamp(10px, 1.5vh, 12px);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.7;
}

.stage__spec span {
	white-space: nowrap;
}

.stage__spec span + span::before {
	content: "/";
	margin-inline: 0.7em;
	color: var(--line);
}

/* Figure + arrows ------------------------------------------------ */

.stage__row {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 2vw, 34px);
}

.stage__figure {
	flex: 0 1 auto;
	min-height: 0;
	height: 100%;
	display: grid;
	place-items: center;
	transition: opacity 0.26s ease;
}

.stage__figure.is-swapping {
	opacity: 0;
}

.stage__figure svg,
.stage__figure img {
	height: 100%;
	width: auto;
	max-width: min(66vw, 520px);
	object-fit: contain;
}

.arrow {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: clamp(38px, 5.4vh, 46px);
	aspect-ratio: 1;
	padding: 0;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.arrow:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.arrow svg {
	width: 40%;
	height: 40%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Colour swatches ------------------------------------------------ */

.stage__colours {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.swatch {
	width: clamp(18px, 2.6vh, 22px);
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--swatch, var(--ink));
	cursor: pointer;
	box-shadow: 0 0 0 0 var(--accent);
	transition: box-shadow 0.18s ease;
}

.swatch[aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

/* Call to action ------------------------------------------------- */

.cta-band {
	flex: 0 0 auto;
	border-top: 1px solid var(--line);
	padding-block: clamp(10px, 2.2vh, 20px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: min(100% - 2 * var(--space-md), 1180px);
	margin-inline: auto;
}

.cta-band .btn {
	padding-block: clamp(10px, 1.7vh, 14px);
}

.cta-note {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.cta-note a {
	color: var(--muted);
}

/* Counter -------------------------------------------------------- */

.stage__count {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--muted);
}

/* Short viewports: drop the spec lines before anything overflows. */
@media (max-height: 620px) {
	.stage__spec {
		display: none;
	}

	.stage__count {
		display: none;
	}
}

@media (max-width: 620px) {
	.stage__row {
		gap: 2px;
	}

	.stage__figure svg {
		max-width: 72vw;
	}

	.arrow {
		width: 36px;
	}

	.cta-note {
		font-size: 10px;
	}
}

/* No JS: the stage still shows the first design, fully readable. */
.no-js .arrow,
.no-js .swatch,
.no-js .figure-toggle {
	display: none;
}