/* ═══════════════════════════════════════════════════════════════
   HYBRID MILES CLUB — two distinct identities, never blended.

   IDENTITY A · HMC   — :root defaults. Strictly monochrome.
                        Archivo geometric caps. Nested hairlines.
   IDENTITY B · URU   — .uru scope. Cream / Deep Ink / URU Pink.
                        Anton. Thick pink movement line.

   .uru is a *section-level* scope, so the Events page can hard-cut
   from one identity into the other without blending tokens.
   ═══════════════════════════════════════════════════════════════ */

:root {
	/* ── Identity A — HMC. Monochrome only. No accent hue. ── */
	--ground: #0b0d0f;
	--text: #ffffff;
	--muted: #a8adb2;
	--accent: var(--text); /* HMC has no colour: accent === text */

	--rule: rgba(255, 255, 255, 0.16);
	--rule-mid: rgba(255, 255, 255, 0.26);
	--rule-strong: rgba(255, 255, 255, 0.42);

	--display: "Archivo", -apple-system, "Helvetica Neue", sans-serif;
	--body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	--label-font: "Archivo", -apple-system, sans-serif;

	--display-weight: 600;
	--display-tracking: 0.015em;
	--display-lh: 1.02;

	--h1: clamp(2.6rem, 6.5vw, 5.75rem);
	--h2: clamp(1.9rem, 4vw, 3.5rem);
	--h3: clamp(1.15rem, 1.9vw, 1.6rem);

	--gutter: clamp(1.25rem, 4vw, 4rem);
	--max: 1320px;
}

/* ── Identity A, inverted band — white ground, near-black text ── */
.invert {
	--ground: #ffffff;
	--text: #0b0d0f;
	--muted: #5b6166;
	--rule: rgba(11, 13, 15, 0.16);
	--rule-mid: rgba(11, 13, 15, 0.26);
	--rule-strong: rgba(11, 13, 15, 0.42);
	background: var(--ground);
	color: var(--text);
}

/* ── Identity B — URU GAMES ─────────────────────────────────── */
/* Dark treatment, matching the sponsorship prospectus: Deep Ink
   ground with Warm Cream text — the inverse of the light card
   the brand guidelines showed. Same three brand colours either
   way, just flipped. */
.uru {
	--ground: #17232d; /* Deep Ink */
	--text: #f3ebdd; /* Warm Cream */
	--muted: rgba(243, 235, 221, 0.62);
	--accent: #d94f70; /* URU Pink */

	--rule: rgba(243, 235, 221, 0.18);
	--rule-mid: rgba(243, 235, 221, 0.28);
	--rule-strong: rgba(243, 235, 221, 0.42);

	--display: "Anton", "Arial Narrow", Impact, sans-serif;
	--display-weight: 400;
	--display-tracking: 0.01em;
	--display-lh: 0.86;

	--h1: clamp(3.25rem, 11vw, 9rem);
	--h2: clamp(2.4rem, 7vw, 5.5rem);
	--h3: clamp(1.3rem, 2.4vw, 2rem);

	background: var(--ground);
	color: var(--text);
}

/* ── Reset ──────────────────────────────────────────────────── */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "tnum" 1;
}

img {
	max-width: 100%;
	display: block;
}

/* The [hidden] attribute must always win over a class's own
   `display` declaration (e.g. `.uru-gate__choices { display: flex }`
   otherwise outranks the browser's default [hidden] rule and the
   element stays visible even after el.hidden = true). */
[hidden] {
	display: none !important;
}

a {
	color: inherit;
}

/* ── Type ───────────────────────────────────────────────────── */

.display {
	text-wrap: balance;
	font-family: var(--display);
	font-weight: var(--display-weight);
	text-transform: uppercase;
	letter-spacing: var(--display-tracking);
	line-height: var(--display-lh);
	margin: 0;
	/* A single long word (e.g. "CHALLENGES.") in a shrunk flex/grid
	   item has nowhere to shrink to — let it break as a last resort
	   instead of silently overflowing the viewport. */
	overflow-wrap: break-word;
}

h1.display {
	font-size: var(--h1);
}

/* .uru's --display-lh of 0.86 assumes a single hero line. A two-line
   h1 (e.g. "You're / in." on the confirmation page) then crowds,
   because Anton's caps stand taller than the line box. Identity A's
   1.02 is fine, so only the URU scope needs loosening. The URU Games
   h1 holds a display:block logo, so it is unaffected either way. */
.uru h1.display {
	line-height: 1.05;
}
h2.display {
	font-size: var(--h2);
	/* Same fix as h3 below: in a narrow .split column, h2 can wrap to
	   3 lines too (e.g. "Not your average / hybrid race." on URU
	   Games) — 0.86 is too tight once that happens. */
	line-height: 1.05;
}
h3.display {
	font-size: var(--h3);
	/* --display-lh (0.86 in .uru) is tuned for single huge hero lines —
	   too tight for h3's smaller, more often multi-line headings, where
	   Anton's tall caps overflow the line box and overlap the next line. */
	line-height: 1.05;
}

/* Small labels — same face, light weight, very wide tracking. */
.label {
	font-family: var(--label-font);
	font-size: 0.6875rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	line-height: 1.4;
	color: var(--muted);
	margin: 0;
}

.uru .label {
	font-weight: 500;
	letter-spacing: 0.22em;
}

.label--strong {
	color: var(--text);
}

.uru .label--accent {
	color: var(--accent);
}

/* "— CLUB —" : a label with a hairline either side, as in the logo. */
.label--ruled {
	display: flex;
	align-items: center;
	gap: 1rem;
	/* No white-space: nowrap — a longer label (e.g. a full date)
	   needs to be free to wrap onto a second line on narrow
	   viewports rather than force horizontal overflow. */
}

.label--ruled::before,
.label--ruled::after {
	content: "";
	height: 1px;
	background: var(--rule-mid);
	flex: 1 1 auto;
	min-width: 1.5rem;
}

.lede {
	text-wrap: pretty;
	font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
	line-height: 1.55;
	max-width: 38ch;
	margin: 0;
	font-weight: 300;
	color: var(--text);
}

.prose {
	text-wrap: pretty;
	max-width: 60ch;
	color: var(--muted);
}

.prose p + p {
	margin-top: 1.15em;
}

.prose strong {
	color: var(--text);
	font-weight: 500;
}

/* ── Layout ─────────────────────────────────────────────────── */

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

.section {
	padding-block: clamp(2rem, 4.5vw, 3.75rem);
	background: var(--ground);
	color: var(--text);
}

.split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.eyebrow {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--rule);
}

.eyebrow__num {
	font-family: var(--label-font);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--text);
}

.uru .eyebrow__num {
	color: var(--accent);
}

/* ═══ IDENTITY A · signature graphic — nested hairlines ═══════ */

/* Sets of 3–5 tightly spaced hairlines, used as dividers. */
.rules {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	border: 0;
}

.rules i {
	display: block;
	height: 1px;
	background: var(--rule);
}

.rules i:nth-child(2) {
	background: var(--rule-mid);
}
.rules i:nth-child(3) {
	background: var(--rule-strong);
}
.rules i:nth-child(4) {
	background: var(--rule-mid);
}
.rules i:nth-child(5) {
	background: var(--rule);
}

.rules--divide {
	margin-block: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* Speed streaks — hairlines trailing off the end of a headline. */
.streakline {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.streaks {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 auto;
	min-width: 3rem;
	padding-top: 0.35em;
}

.streaks i {
	display: block;
	height: 1px;
	background: var(--rule-mid);
}

.streaks i:nth-child(1) {
	width: 100%;
}
.streaks i:nth-child(2) {
	width: 78%;
}
.streaks i:nth-child(3) {
	width: 92%;
}
.streaks i:nth-child(4) {
	width: 56%;
}

/* Track-bend motif — nested lanes, very low opacity, behind heroes. */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--ground);
	color: var(--text);
	min-height: min(70vh, 620px);
	display: flex;
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.hero__bend {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(120%, 1500px);
	background-image: url("track-bend.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 118%;
	opacity: 0.16;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	width: 100%;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.hero__foot {
	margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
	justify-content: space-between;
}

.hero__logo {
	height: clamp(56px, 9vw, 116px);
	width: auto;
	margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.uru-logo {
	width: clamp(260px, 32vw, 460px);
	height: auto;
}

/* URU Games hero — a full-bleed animated line-art motif runs behind
   the logo/copy, edge to edge of the viewport regardless of .wrap's
   own max-width: the course line draws itself in, then a marker
   keeps looping along it. Purely decorative, sits behind the copy. */
.uru-hero {
	position: relative;
	overflow: hidden;
}

.uru-hero__content {
	position: relative;
}

.uru-hero__art {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: auto;
	transform: translate(-50%, -50%);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.uru-hero__line {
	stroke: var(--accent);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: uru-hero-draw 2.4s ease-out 0.4s forwards;
}

.uru-hero__waypoint {
	fill: var(--accent);
	opacity: 0.35;
}

.uru-hero__dot {
	fill: var(--accent);
	opacity: 0;
	animation: uru-hero-dot-in 0.3s ease-out 2.8s forwards;
}

@keyframes uru-hero-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes uru-hero-dot-in {
	to {
		opacity: 1;
	}
}

@media (max-width: 900px) {
	.uru-hero__art {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.uru-hero__line {
		animation: none;
		stroke-dashoffset: 0;
	}
	.uru-hero__dot {
		animation: none;
		opacity: 1;
	}
}

/* Ambassador invite hero (uru-games-<slug>.html, generated by
   build.py). Copy on the left, the ambassador's cutout on
   the right standing in front of a URU Pink disc, the same device as
   the printed ambassador posters. Every portrait ships at 800×1000
   with the face at the same size and height, so the disc sits behind
   the head identically on every page. */
.invite {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}

.invite__logo {
	display: block;
	width: clamp(180px, 15vw, 230px);
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.uru .invite__title {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	font-size: clamp(2.2rem, 4.2vw, 3.9rem);
	max-width: 14ch;
}

.invite__name {
	color: var(--accent);
}

.invite__lede {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	font-weight: 400;
	max-width: 32ch;
}

.invite__portrait {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 440px;
	justify-self: end;
}

.invite__portrait::before {
	content: "";
	position: absolute;
	left: 12.5%;
	top: 12%;
	width: 75%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--accent);
}

.invite__portrait img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.invite__portrait figcaption {
	position: relative;
	margin-top: -1.5rem;
	text-align: center;
}

/* If the caption wraps, break at the dot, never inside a name. */
.invite__portrait figcaption span {
	white-space: nowrap;
}

@media (max-width: 900px) {
	/* Small gap: the portrait already carries clear space above the
	   head, so the grid gap would double it. */
	.invite {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}
	/* Stacked, the invite reads in the same order as on desktop: the
	   headline and Register button first, the ambassador below. */
	.invite__portrait {
		max-width: 320px;
		justify-self: start;
		margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
	}
}

.route-map {
	width: 100%;
	height: auto;
	border: 1px solid var(--rule);
}

/* ═══ IDENTITY B · signature graphic — the movement line ══════ */

/* Thick, smooth, long-wavelength S-curve bleeding off both edges. */
.movement {
	display: block;
	width: 100%;
	height: clamp(48px, 6vw, 88px);
	border: 0;
	margin: 0;
	background-image: url("movement-line.svg");
	background-repeat: repeat-x;
	background-position: center;
	background-size: auto 100%;
}

/* The hard cut from HMC into URU. */
.cut {
	background: var(--ground);
}

/* ── Buttons & links ────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	font-family: var(--label-font);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-decoration: none;
	padding: 1.15rem 2.25rem;
	border: 1px solid var(--text);
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: background 0.15s linear, color 0.15s linear;
}

.btn:hover,
.btn:focus-visible {
	background: var(--text);
	color: var(--ground);
}

/* URU buttons are solid pink. */
.uru .btn {
	font-family: var(--body);
	font-weight: 700;
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
}

.uru .btn:hover,
.uru .btn:focus-visible {
	background: transparent;
	color: var(--accent);
}

.btn--block {
	width: 100%;
}

.textlink {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--rule-strong);
	padding-bottom: 1px;
	transition: border-color 0.15s linear;
}

.textlink:hover,
.textlink:focus-visible {
	border-bottom-color: var(--text);
}

.uru .textlink {
	border-bottom-color: var(--accent);
}

.textlink--quiet {
	font-family: var(--label-font);
	font-size: 0.6875rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: var(--muted);
}

/* ── Header ─────────────────────────────────────────────────── */

.site-head {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #0b0d0f;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.site-head__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 1rem var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 0.75rem;
	gap: 2rem;
}

.site-head__cta {
	white-space: nowrap;
}

.brandmark {
	display: block;
	text-decoration: none;
	flex: 0 0 auto;
}

.brandmark img {
	display: block;
	height: clamp(30px, 3.6vw, 42px);
	width: auto;
}

.nav {
	display: flex;
	gap: clamp(0.9rem, 2.1vw, 2.1rem);
	align-items: center;
	flex-wrap: wrap;
}

.nav a {
	font-family: var(--label-font);
	font-size: 0.6875rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	text-decoration: none;
	color: #a8adb2;
	padding-block: 0.3rem;
	border-bottom: 1px solid transparent;
	transition: color 0.15s linear, border-color 0.15s linear;
}

.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"] {
	color: #fff;
	border-bottom-color: #fff;
}

/* ── Stat strip ─────────────────────────────────────────────── */

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.stat {
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(0.85rem, 1.5vw, 1.5rem);
	border-left: 1px solid var(--rule);
	/* Grid items default to min-width: auto, so a wide .stat__num
	   (e.g. "177+") can force this past its 1fr track on narrow
	   viewports and push the whole page into horizontal scroll. */
	min-width: 0;
}

.stat:first-child {
	border-left: 0;
}

.stat__num {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--text);
	margin-bottom: 0.85rem;
}

/* ── Cards / rows ───────────────────────────────────────────── */

.roster {
	border-top: 1px solid var(--rule);
}

.person {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(1rem, 3vw, 2rem);
	padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}

.person__name {
	font-family: var(--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(1.15rem, 2vw, 1.65rem);
	line-height: 1.1;
	margin: 0;
}

.person__note {
	margin: 0;
	color: var(--muted);
	font-size: 0.9375rem;
}

/* ── Runs (The Club) ────────────────────────────────────────── */

.runs {
	border-top: 1px solid var(--rule);
}

.run {
	display: grid;
	grid-template-columns: minmax(6rem, 12%) minmax(6rem, 14%) 1fr;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-block: clamp(1rem, 2vw, 1.5rem);
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}

.run__day {
	font-family: var(--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	margin: 0;
}

.run__time {
	font-family: var(--body);
	font-variant-numeric: tabular-nums;
	margin: 0;
	color: var(--text);
}

.run__where {
	margin: 0;
	color: var(--muted);
}

/* ── Partners ───────────────────────────────────────────────── */

.tier {
	padding-block: clamp(1.25rem, 3vw, 2.1rem);
	border-bottom: 1px solid var(--rule);
}

.tier:first-of-type {
	border-top: 1px solid var(--rule);
}

.tier__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
}

.slots {
	display: grid;
	gap: 1px;
	background: var(--rule);
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.slots--title {
	grid-template-columns: minmax(0, 1fr);
}

.slot {
	background: var(--ground);
	aspect-ratio: 16 / 7;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	font-family: var(--label-font);
	font-size: 0.625rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	text-align: center;
	padding: 1rem;
}

.slots--title .slot {
	aspect-ratio: 16 / 4;
}

/* ── Course steps (URU) ─────────────────────────────────────── */

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--rule);
}

.step {
	padding: clamp(1rem, 2vw, 1.6rem);
	border-left: 1px solid var(--rule);
}

.step:first-child {
	border-left: 0;
}

/* Sequence variant — 7 cards, so the last row is always ragged.
   Hairlines are drawn by each card as a right+bottom box-shadow
   rather than by a gap showing the container's background: adjacent
   shadows land on the shared edge (no doubling) and empty trailing
   cells paint nothing, so a part-filled last row leaves no slab.
   Columns are pinned rather than auto-fit so the split stays a
   deliberate 4 + 3. Doubled class beats the .steps column overrides
   in the media queries further down the file. */
.steps.steps--seq {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}

.steps.steps--seq .step {
	border: 0;
	min-width: 0;
	box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
}

@media (max-width: 1000px) {
	.steps.steps--seq {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.steps.steps--seq {
		grid-template-columns: 1fr;
	}
}

/* Two cards side by side (the category self-selection pair). */
.steps.steps--seq.steps--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
	.steps.steps--seq.steps--pair {
		grid-template-columns: 1fr;
	}
}

.step__spec {
	margin: 0 0 0.5rem;
	font-family: var(--label-font);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

/* Standard sits quieter than Elite, so the pink reads as the harder
   category rather than as two competing specs. */
.step__spec--std {
	margin-bottom: 0.2rem;
	color: var(--muted);
}

.step__num {
	font-family: var(--display);
	font-size: 1.25rem;
	color: var(--accent);
	display: block;
	margin-bottom: 0.9rem;
}

.step__name {
	font-family: var(--display);
	font-weight: var(--display-weight);
	text-transform: uppercase;
	font-size: clamp(1.1rem, 1.9vw, 1.5rem);
	line-height: 1;
	margin: 0 0 0.7rem;
}

.step__body {
	text-wrap: pretty;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

/* ── Registration bands (URU) ───────────────────────────────── */

.band {
	padding-block: clamp(1.75rem, 4vw, 3rem);
	background: var(--ground);
}

.band__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
	align-items: center;
}

/* ── Category comparison table (URU) ────────────────────────── */

.compare__wrap {
	overflow-x: auto;
}

.compare {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

/* The caption doubles as the key for the shorthand in the cells. */
.compare__key {
	text-wrap: pretty;
	caption-side: top;
	text-align: left;
	max-width: 70ch;
	margin-bottom: 1rem;
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.compare__key strong {
	color: var(--text);
	font-weight: 500;
}

.compare th,
.compare td {
	padding: 0.85rem 1.25rem 0.85rem 0;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: baseline;
}

.compare thead th {
	font-family: var(--label-font);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--text);
	border-bottom-color: var(--rule-strong);
	padding-bottom: 0.75rem;
}

.compare tbody th {
	font-weight: 400;
	color: var(--muted);
	padding-right: 2rem;
}

.compare td {
	color: var(--text);
	font-feature-settings: "tnum" 1;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
	border-bottom: 0;
}

/* ── FAQ — native <details>, no JS ──────────────────────────── */

.faq {
	border-top: 1px solid var(--rule);
	max-width: 72ch;
}

.faq details {
	border-bottom: 1px solid var(--rule);
}

.faq summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	color: var(--text);
	transition: color 0.15s linear;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--accent);
}

.faq details[open] summary::after {
	content: "–";
}

.faq summary:hover,
.faq summary:focus-visible {
	color: var(--accent);
}

.faq__body {
	text-wrap: pretty;
	margin: 0;
	padding: 0 0 1.35rem;
	max-width: 62ch;
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.band__detail {
	text-wrap: pretty;
	margin: 0;
	color: var(--text);
	font-size: 0.9375rem;
	line-height: 1.9;
}

.band__detail span {
	color: var(--muted);
}

.band__time {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--label-font);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--accent);
}

/* ── Facts list ─────────────────────────────────────────────── */

.facts {
	border-top: 1px solid var(--rule);
	margin: 0;
}

.fact {
	display: grid;
	grid-template-columns: minmax(8rem, 20%) 1fr;
	gap: 1.5rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}

.fact__val {
	margin: 0;
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	color: var(--text);
}

.fact__val--big {
	font-family: var(--display);
	font-weight: var(--display-weight);
	text-transform: uppercase;
	font-size: clamp(1.2rem, 2.4vw, 1.85rem);
	line-height: 1.05;
}

/* ── Notes / callouts ───────────────────────────────────────── */

.note {
	text-wrap: pretty;
	border-left: 1px solid var(--rule-strong);
	padding: 0.25rem 0 0.25rem 1.5rem;
	max-width: 70ch;
	color: var(--muted);
	font-size: 0.9375rem;
	margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
}

.uru .note {
	border-left-color: var(--accent);
}

/* ── Terms intro — denser than the marketing hero pattern;
   this is a reference document, not a hero moment. ──────────── */

.terms-intro h1.display {
	line-height: 1.35;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.terms-intro .facts {
	margin-top: 0;
}

.terms-intro .fact {
	padding-block: 0.65rem;
}

.terms-intro .lede {
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

.terms-intro .note {
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ── Legal / Terms content ─────────────────────────────────── */

.legal {
	max-width: 68ch;
}

.legal-section {
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 1px solid var(--rule);
}

.legal-section:first-child {
	padding-top: 0;
}

.legal-section:last-child {
	border-bottom: none;
}

.legal-section__title {
	font-family: var(--label-font);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0 0 1rem;
}

.legal p {
	text-wrap: pretty;
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin: 0;
}

.legal p + p,
.legal p + ul,
.legal ul + p {
	margin-top: 0.85em;
}

.legal ul {
	list-style: disc;
	margin: 0.65rem 0 0;
	padding-left: 1.35rem;
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.legal ul li + li {
	margin-top: 0.35rem;
}

.legal-checklist {
	list-style: none !important;
	margin: 0.85rem 0 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.legal-checklist li + li {
	margin-top: 0;
}

.signup {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
	max-width: 34rem;
}

.signup input {
	flex: 1 1 14rem;
	background: transparent;
	border: 1px solid var(--rule-strong);
	color: var(--text);
	font-family: var(--body);
	font-size: 0.9375rem;
	padding: 1rem 1.15rem;
}

.signup input::placeholder {
	color: var(--muted);
}

.signup input:focus-visible {
	outline: none;
	border-color: var(--text);
}

/* ── Steps list (Thank You) ─────────────────────────────────── */

.next {
	counter-reset: step;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.next li {
	counter-increment: step;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--rule);
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1.5rem;
	align-items: baseline;
}

.next li::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--display);
	font-weight: var(--display-weight);
	color: var(--accent);
	font-size: 1.05rem;
}

.next h3 {
	font-family: var(--label-font);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
}

.next p {
	margin: 0;
	color: var(--muted);
	font-size: 0.9375rem;
}

/* ── Footer ─────────────────────────────────────────────────── */

.site-foot {
	background: #0b0d0f;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.site-foot__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
	align-items: flex-start;
}

.site-foot address {
	font-style: normal;
	font-size: 0.9375rem;
	color: #a8adb2;
	line-height: 1.75;
}

.site-foot .label {
	color: #fff;
	margin-bottom: 0.85rem;
}

.site-foot .textlink {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.42);
}

/* ── Utilities ──────────────────────────────────────────────── */

.mt-l {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.skip {
	position: absolute;
	left: -9999px;
}

.skip:focus {
	left: var(--gutter);
	top: 0.5rem;
	z-index: 100;
	background: #fff;
	color: #0b0d0f;
	padding: 0.75rem 1.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1000px) {
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.step:nth-child(3) {
		border-left: 0;
	}
	.step:nth-child(n + 3) {
		border-top: 1px solid var(--rule);
	}
	.band__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.split {
		grid-template-columns: 1fr;
	}
	.stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.stat:nth-child(3) {
		border-left: 0;
	}
	.stat:nth-child(n + 3) {
		border-top: 1px solid var(--rule);
	}
	.person,
	.run {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

@media (max-width: 640px) {
	.steps {
		grid-template-columns: 1fr;
	}
	.step {
		border-left: 0;
	}
	.step + .step {
		border-top: 1px solid var(--rule);
	}
	.fact {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}
	.site-head__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
	}
	/* Decorative only (aria-hidden) — dropped at narrow widths so a
	   long headline word is never forced to compete with its
	   min-width for space and overflow the viewport. */
	.streaks {
		display: none;
	}
	.streakline > * {
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		transition: none !important;
	}
}

/* ── URU header variant (Thank You) ─────────────────────────── */
.site-head--uru {
	background: #17232d;
	border-bottom-color: rgba(243, 235, 221, 0.18);
}

.site-head--uru .label {
	color: #d94f70;
}

/* Ambassador social handle — small uppercase, spaced from credentials */
.person__handle {
	display: inline-block;
	margin-top: 0.6rem;
	font-family: var(--label-font);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-bottom-color: var(--rule-strong);
}

/* Partner tier benefit lists (real sponsorship-prospectus content) */
.tier__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.6rem 2.5rem;
}

.tier__benefits li {
	position: relative;
	padding-left: 1.25rem;
	font-size: 0.9375rem;
	color: var(--muted);
	line-height: 1.5;
}

.tier__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.65rem;
	height: 1px;
	background: var(--text);
}

/* ── Co-brand credit (HMC × LIFTR on URU GAMES pages) ───────── */
.cobrand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.75rem;
}

.cobrand__x {
	color: var(--muted);
	font-size: 0.75rem;
}

.cobrand__logo {
	height: 1rem;
	width: auto;
}

.cobrand__logo--liftr {
	height: 0.8125rem;
}

/* ── Registration band index + tag badges ──────────────────── */
.band__head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.band__index {
	font-family: var(--display);
	font-size: 1rem;
	color: var(--accent);
}

.band__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.tag {
	display: inline-block;
	border: 1px solid var(--rule-strong);
	padding: 0.3rem 0.65rem;
	font-family: var(--label-font);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ── Partner CTA (mirrors .callout pattern, URU-scoped) ─────── */
.partner-cta {
	border: 1px solid var(--accent);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: center;
	justify-content: space-between;
}

/* ── Event cards (Events index page) ────────────────────────── */
.event-cards {
	display: grid;
	/* min(300px, 100%) — same 300px floor on normal screens, but
	   never wider than the container itself on very narrow ones. */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}

.event-card {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	/* Grid items default to a content-based min-width, which can
	   override the track's own minmax() on very narrow viewports. */
	min-width: 0;
}

.event-card__meta {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.event-card__name {
	font-family: var(--display);
	font-weight: var(--display-weight);
	text-transform: uppercase;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.05;
	margin: 0;
}

.event-card__body {
	margin: 0;
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.event-card__spacer {
	flex: 1 1 auto;
}

.event-card__link {
	font-family: var(--label-font);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
	border-bottom: 1px solid var(--rule-strong);
	align-self: flex-start;
	padding-bottom: 1px;
	transition: border-color 0.15s linear;
}

.event-card__link:hover,
.event-card__link:focus-visible {
	border-bottom-color: var(--text);
}

/* Home stats bar — 3 columns (blueprint's condensed stat strip) */
.stats--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* ── URU Games entry gate — local-riddle unlock ──────────────
   Carries the .uru class, so it wears the URU identity (Deep
   Ink / Warm Cream / URU Pink, Anton display) from the first
   screen: the lockup on top, the hero's course line drawing
   itself in behind. Neon glitch on unlock is a transient
   filter effect only — not a new permanent hue. ── */

.uru-gate {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: var(--ground);
	color: var(--text);
	text-align: center;
	overflow-y: auto;
	transition: opacity 0.6s ease;
}

/* Short laptop screens: drop the line and shrink the lockup so the
   riddle and all three answers still fit without overlap. */
@media (max-height: 780px) {
	.uru-gate__art {
		display: none;
	}
	.uru-gate__logo {
		width: 130px;
		margin-bottom: 0.75rem;
	}
}

.uru-gate.is-fading {
	opacity: 0;
	pointer-events: none;
}

body.uru-gate-active {
	overflow: hidden;
}

/* Runs along the foot of the screen, clear of the riddle text. */
.uru-gate__art {
	position: absolute;
	left: 0;
	bottom: 2vh;
	width: 100%;
	height: clamp(120px, 20vh, 220px);
	opacity: 0.35;
	pointer-events: none;
}

.uru-gate__panel {
	position: relative;
	width: 100%;
	max-width: 34rem;
}

.uru-gate__logo {
	display: block;
	width: clamp(150px, 16vw, 200px);
	height: auto;
	margin: 0 auto clamp(1.25rem, 3vh, 2rem);
}

.uru-gate__title {
	font-family: var(--display);
	font-weight: var(--display-weight);
	text-transform: uppercase;
	letter-spacing: var(--display-tracking);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.02;
	margin: 0 0 1.5rem;
}

.uru-gate__accent {
	color: var(--accent);
}

.uru-gate__prompt {
	font-weight: 600;
	margin: 0 0 1rem;
}

.uru-gate__riddle {
	font-style: italic;
	color: var(--muted);
	line-height: 1.6;
	margin: 0 0 2rem;
}

.uru-gate__choices {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.uru-gate__choice {
	font: inherit;
	padding: 0.85rem 1.25rem;
	border: 1px solid var(--rule);
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		transform 0.2s ease;
}

.uru-gate__choice:hover,
.uru-gate__choice:focus-visible {
	border-color: var(--accent);
	background: rgba(217, 79, 112, 0.12);
}

.uru-gate__choice.is-wrong {
	animation: uru-gate-shake 0.4s ease;
	border-color: #d94f4f;
}

.uru-gate__feedback {
	min-height: 1.2em;
	font-size: 0.9rem;
	color: var(--muted);
}

.uru-gate__result {
	font-family: var(--display);
	text-transform: uppercase;
	color: var(--accent);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.2;
	margin: 0;
}

.uru-gate.is-unlocking .uru-gate__panel {
	animation: uru-gate-glitch 0.5s steps(2, end);
}

@keyframes uru-gate-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-6px);
	}
	75% {
		transform: translateX(6px);
	}
}

@keyframes uru-gate-glitch {
	0% {
		transform: translate(0, 0);
		filter: hue-rotate(0deg);
	}
	20% {
		transform: translate(-3px, 2px);
		filter: hue-rotate(30deg);
	}
	40% {
		transform: translate(3px, -2px);
		filter: hue-rotate(-20deg);
	}
	60% {
		transform: translate(-2px, -2px);
		filter: hue-rotate(15deg);
	}
	80% {
		transform: translate(2px, 2px);
		filter: hue-rotate(-10deg);
	}
	100% {
		transform: translate(0, 0);
		filter: hue-rotate(0deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.uru-gate,
	.uru-gate__choice,
	.uru-gate.is-unlocking .uru-gate__panel {
		animation: none !important;
		transition: none !important;
	}
}

/* ── Registration modal — terms gate before checkout ─────────
   Own light-on-dark scope (cream panel over the dark .uru page)
   so nested .btn/.textlink read against the panel's background,
   not the page's. ── */

.reg-modal {
	position: fixed;
	inset: 0;
	z-index: 850;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(11, 13, 15, 0.72);
}

.reg-modal[hidden] {
	display: none;
}

body.reg-modal-active {
	overflow: hidden;
}

.reg-modal__panel {
	--ground: #f3ebdd;
	--text: #17232d;
	--muted: rgba(23, 35, 45, 0.65);
	--accent: #d94f70;
	--rule: rgba(23, 35, 45, 0.16);
	--rule-mid: rgba(23, 35, 45, 0.26);
	--rule-strong: rgba(23, 35, 45, 0.42);
	position: relative;
	max-width: 28rem;
	width: 100%;
	background: var(--ground);
	color: var(--text);
	padding: clamp(1.75rem, 4vw, 2.5rem);
}

.reg-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.reg-modal__title {
	font-size: clamp(1.35rem, 3.5vw, 1.75rem);
	margin: 0 0 1rem;
	padding-right: 1.5rem;
}

.reg-modal__body {
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
}

.reg-modal__check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text);
	margin: 0 0 1.5rem;
}

.reg-modal__check input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	accent-color: var(--accent);
}

.reg-modal__continue[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Scroll reveal (reveal.js) ────────────────────────────────
   Opacity only — deliberately never touches transform, so it
   can't fight with parallax.js's own transform on the same
   heading elements. reveal.js itself no-ops under reduced
   motion, so no matching override is needed here. ── */
.reveal {
	opacity: 0;
	transition: opacity 0.7s ease;
}

.reveal.is-visible {
	opacity: 1;
}

/* ── Facebook-ad landing page (uru-games-join.html) ─────────────────────
   The header is already sticky site-wide; here it carries only the
   mark and a Register button, and stays one row on phones so the
   button is always in reach while scrolling. ── */
.site-head--land .site-head__cta {
	padding: 0.85rem 1.5rem;
	background: #d94f70;
	border-color: #d94f70;
	color: #f3ebdd;
}

.site-head--land .site-head__cta:hover,
.site-head--land .site-head__cta:focus-visible {
	background: #f3ebdd;
	border-color: #f3ebdd;
	color: #17232d;
}

@media (max-width: 640px) {
	.site-head--land .site-head__inner {
		flex-direction: row;
		align-items: center;
	}
	.site-head--land .site-head__cta {
		padding: 0.75rem 1.1rem;
	}
}

/* ── Movement standards page (movement-standards.html) ───────────
   One section per movement: spec table (reuses .compare), start and
   movement lists side by side, then the two verdict boxes. The
   "no rep" box carries URU Pink so a judge's eye lands on it. ── */
.uru .std__title {
	font-size: clamp(2.4rem, 6vw, 4.5rem);
}

.std__lede {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	max-width: 52ch;
	font-weight: 400;
}

.std-jump {
	list-style: none;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
	font-size: 0.9375rem;
}

.std-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.std-list li {
	position: relative;
	padding-left: 1.25rem;
	margin-bottom: 0.55rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.std-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.74em;
	width: 0.65rem;
	height: 2px;
	background: var(--accent);
}

.std-list--rules {
	max-width: 70ch;
	color: var(--muted);
}

.std-list--rules strong {
	color: var(--text);
	font-weight: 600;
}

.uru .std h2.display {
	font-size: clamp(2rem, 5vw, 3.75rem);
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.std__spec {
	max-width: 40rem;
}

.std__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.std__head {
	margin: 0 0 0.85rem;
}

.std-box {
	padding: clamp(1rem, 2vw, 1.5rem);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--text);
}

.std-box p:not(.label) {
	margin: 0 0 0.6rem;
	line-height: 1.55;
}

.std-box p:last-child {
	margin-bottom: 0;
}

.std-box--norep {
	border-left-color: var(--accent);
	background: rgba(217, 79, 112, 0.08);
}

.std-box--norep .std__head {
	color: var(--accent);
}

.std-cue {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

.std-cue__words {
	font-family: var(--display);
	text-transform: uppercase;
	letter-spacing: var(--display-tracking);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.05;
	color: var(--accent);
}

.std-card td,
.std-card tbody th {
	vertical-align: top;
	line-height: 1.5;
}

.std-card tbody th {
	color: var(--text);
	font-weight: 500;
	min-width: 9rem;
}

.std-card__cue {
	font-family: var(--display);
	text-transform: uppercase;
	color: var(--accent) !important;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.std__cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.std-card__cue {
		white-space: normal;
	}
}

/* Judges card on phones: each movement becomes its own stacked
   block, labelled from data-label, instead of a sideways scroll. */
@media (max-width: 760px) {
	.std-card thead {
		display: none;
	}
	.std-card,
	.std-card tbody,
	.std-card tr,
	.std-card th,
	.std-card td {
		display: block;
		width: 100%;
	}
	.std-card tr {
		padding: 1rem 0;
		border-bottom: 1px solid var(--rule);
	}
	.std-card tbody th,
	.std-card td {
		border-bottom: 0;
		padding: 0.25rem 0;
	}
	.std-card tbody th {
		font-size: 1.05rem;
		padding-bottom: 0.5rem;
	}
	.std-card td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--label-font);
		font-size: 0.6875rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 0.2rem;
	}
	.std-card .std-card__cue::before {
		font-family: var(--label-font);
		text-transform: uppercase;
	}
}

/* Phones: once the judges-card table is display:block, its caption
   keeps table-caption sizing and shrinks to a narrow column. Make it
   an ordinary full-width block. */
@media (max-width: 760px) {
	.std-card caption {
		display: block;
		width: 100%;
		max-width: none;
	}
}