@font-face {
	font-family: 'Terminus';
	src: url('/assets/fonts/terminus-webfont-115b1ac6fd3a8344fa557bf157fda2b7.woff2?vsn=d') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Theme colors */
	/* Only used as fallback, will be overwritten (consider editing these values in /src/scripts/modules/theme.js) */
	--main-color: #dcdcdc;
	--main-color-40: #dcdcdc8c;
	--main-color-20: #dcdcdc4d;
	--bg-color: 12, 12, 12; /* example: rgba(var(--bg-color), 0.5) to use the background-color with 50% opacity */
	--bg-opacity: 0.15;
	--selection: #4a4a4a;

	/* other */
	--warning-color: rgb(240, 86, 86);
	--info-color: #ffffff;

	--noise-opacity: 0.65;
	--background-video-opacity: 0.275;
	--grunge-overlay-opacity: 0.9;

	--tab-background-blur: 4px;

	font-size: 10px;
}

html {
	background: black;
	overflow-x: hidden;
}

body {
	color: var(--main-color);
	background:
		radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(var(--bg-color), 0.2) 250%),
		rgba(var(--bg-color), var(--bg-opacity));

	margin: 0;
	height: 100vh;
	width: 100vw;

	overflow-y: auto;
	scroll-behavior: smooth;

	font-family: 'Terminus', 'Courier New', monospace;
}

/* BACKGROUND AND OVERLAYS */
#rain-vid,
#noise-overlay,
#grunge-overlay {
	position: fixed;
	overflow: hidden;

	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	height: 100vh;
	width: 100vw;

	pointer-events: none;

	z-index: 10;

	display: none; /* Hide background videos by default, will be overwritten in effects.css if effects are not disabled */
}

#rain-vid {
	opacity: var(--background-video-opacity);
	object-fit: cover;
	z-index: -1;
}

#grunge-overlay {
	z-index: 9998;
	background: url('/assets/images/grunge-ba4824ca588cae5f949023cee6808bd6.jpg?vsn=d');
	background-size: cover;
	mix-blend-mode: color-dodge;
	opacity: var(--grunge-overlay-opacity);
}

@keyframes noise {
	0% {
		background: url('/assets/images/noise-textures/noisy-texture-200x200-1-0198c685b8692fe64d61047541aed222.png?vsn=d');
	}
	25% {
		background: url('/assets/images/noise-textures/noisy-texture-200x200-2-74bf836e2aabe1510e0db92312fa0ab7.png?vsn=d');
	}
	50% {
		background: url('/assets/images/noise-textures/noisy-texture-200x200-3-bc5d03b540cdb5663398fb30390812d1.png?vsn=d');
	}
	75% {
		background: url('/assets/images/noise-textures/noisy-texture-200x200-4-bc4eb88617410f2ab389b14edd88e12e.png?vsn=d');
	}
}

#noise-overlay {
	background-blend-mode: multiply;
	background: url('/assets/images/noise-textures/noisy-texture-200x200-1-0198c685b8692fe64d61047541aed222.png?vsn=d');
	filter: contrast(1.5) brightness(0.4) hue-rotate(90deg);
	opacity: var(--noise-opacity);

	mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 150%);
	mask-size: cover;
	mask-position: center;

	animation: noise 0.3s steps(4) infinite;
}

.snowflake {
	position: fixed;
	animation-timing-function: linear;
	z-index: -1;
	background: white;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(1px);
}

@keyframes snowflake-fall {
	0% {
		transform: translateY(-15vh);
	}
	100% {
		transform: translateY(125vh);
	}
}

@keyframes snowflake-fall-horizontal-1 {
	0% {
		transform: translateX(0) translateY(-15vh);
	}
	100% {
		transform: translateX(20vw) translateY(125vh);
	}
}

@keyframes snowflake-fall-horizontal-2 {
	0% {
		transform: translateX(0) translateY(-15vh);
	}
	100% {
		transform: translateX(-20vw) translateY(125vh);
	}
}

/* global styles | general */

::selection {
	background-color: var(--selection);
}

a {
	color: var(--main-color);
	text-decoration: underline;
}

a:hover {
	background-color: var(--main-color);
	cursor: pointer;
	color: rgba(24, 45, 75, 0.616);

	transition:
		box-shadow 0.1s,
		background-color 0s,
		color 0s;

	text-decoration: none;
}

pre,
p,
li,
h1,
h2,
h3,
h4,
td {
	margin: 0;
	font-weight: normal;
}

h4 {
	font-size: 1em;
}

p em {
	opacity: 0.7;
}

i {
	margin-right: 0.75em;
	vertical-align: middle;
}

summary {
	-webkit-user-select: none; /* Safari */
	user-select: none;
	outline: 1px solid var(--main-color);
	padding-left: 0.5em;
}

summary h2 {
	display: inline;
}

summary::marker {
	font-size: 1.5em;
}

summary:hover {
	cursor: pointer;
	background-color: var(--main-color);
	color: rgba(24, 45, 75, 0.616);
}

details[open] summary {
	margin-bottom: 0.5em;
}

details[open] summary:not(:hover) {
	background: linear-gradient(90deg, transparent -15%, rgba(var(--bg-color), 0.3) 65%);
}

#canvas {
	font-size: 1.75em;
	padding: 1.8em;
}


/* Terminal-style hamburger: matches the landing LOGIN button's box (same height, border, bg, blur). */
.mobile-menu-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 1.1em; /* same baseline as #landing-login-link */
	border: 1px solid var(--main-color);
	background: rgba(var(--bg-color), 0.55);
	backdrop-filter: blur(4px);
	color: var(--main-color);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.mobile-menu-btn:hover {
	background-color: var(--main-color);
	color: rgba(0, 0, 0, 0.75);
}

.mobile-menu-btn__line {
	display: block;
	width: 1.6em;
	height: 2px;
	background-color: currentColor;
}

@media screen and (max-width: 45em) {
	.mobile-menu-btn {
		display: flex;
	}
}

@media screen and (min-width: 45.001em) {
	.mobile-menu-btn {
		display: none !important;
	}
}

/* ──────────────────────────────────────────
   Mobile nav — slides down from under the fixed
   navbar; crisp monochrome to match the navbar
   ────────────────────────────────────────── */
#mobile-nav-overlay {
	position: fixed;
	inset: 0;
	/* above the grunge/noise overlays (9998) so the panel stays crisp,
	   yet below the navbar (9999) so the burger remains the toggle */
	z-index: 9998;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.25s, opacity 0.25s;
}

body.mobile-nav-open #mobile-nav-overlay {
	visibility: visible;
	opacity: 1;
}

#mobile-nav-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

#mobile-nav-panel {
	position: absolute;
	top: var(--navbar-h);
	left: 0;
	width: 100%;
	height: calc(100% - var(--navbar-h));
	height: calc(100dvh - var(--navbar-h));
	padding: 1.5em 1.25em 2em;
	border: none;
	background: #000;
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
	transform: translateY(-14px);
	opacity: 0;
	transition: transform 0.25s ease-out, opacity 0.2s ease-out;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	font-family: var(--font-mono);
}

body.mobile-nav-open #mobile-nav-panel {
	transform: translateY(0);
	opacity: 1;
}

.mobile-nav-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	flex: 0 0 auto;
}

.mobile-nav-panel__title {
	margin: 0;
	font-family: var(--font-accent);
	font-size: 0.72em;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.mobile-nav-panel__beta {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.15em 0.5em;
	font-size: 0.85em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
}

#mobile-nav-panel ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	flex: 0 0 auto;
}

#mobile-nav-panel .mobile-nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.85em 1em;
	font-family: var(--font-accent);
	font-size: 1.05em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#mobile-nav-panel .mobile-nav-link:hover,
#mobile-nav-panel .mobile-nav-link:active {
	background: #fff;
	color: #000;
	border-color: #fff;
	box-shadow: none;
}

/* keep the panel crisp — strip the terminal text/box glow, matching the navbar */
#mobile-nav-panel,
#mobile-nav-panel a,
#mobile-nav-panel p,
#mobile-nav-panel span {
	text-shadow: none;
}

#mobile-nav-panel .mobile-nav-link.tab-active {
	background: #fff;
	color: #000;
	border-color: #fff;
	font-weight: 700;
}

#mobile-nav-panel .mobile-nav-link__ext {
	font-size: 0.8em;
	opacity: 0.55;
}

#mobile-nav-panel .mobile-nav-link:hover .mobile-nav-link__ext,
#mobile-nav-panel .mobile-nav-link.tab-active .mobile-nav-link__ext {
	opacity: 1;
}

.mobile-nav-panel__footer {
	margin-top: auto;
	padding-top: 2em;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.mobile-nav-panel__logo {
	max-width: 110px;
	height: auto;
	opacity: 0.55;
}

/* Language picker inside the mobile menu — segmented row mirroring the nav links */
.mobile-nav-lang {
	margin-top: 1.5em;
	padding-top: 1.5em;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	flex: 0 0 auto;
}

.mobile-nav-lang__label {
	margin: 0 0 0.75em;
	font-family: var(--font-accent);
	font-size: 0.72em;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.mobile-nav-lang__options {
	display: flex;
	gap: 0.6em;
}

#mobile-nav-panel .mobile-nav-lang__item {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.85em 1em;
	font-family: var(--font-accent);
	font-size: 0.95em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#mobile-nav-panel .mobile-nav-lang__item:hover,
#mobile-nav-panel .mobile-nav-lang__item:active {
	background: #fff;
	color: #000;
	border-color: #fff;
}

#mobile-nav-panel .mobile-nav-lang__item.is-active {
	background: #fff;
	color: #000;
	border-color: #fff;
	font-weight: 700;
}

/* Socials inside the mobile menu — a stacked list, not a segmented row.
   Three names of unequal length (Discord / Instagram / YouTube) never share a
   row evenly, and full-width rows give the icons one left edge to align on. */
.mobile-nav-social {
	margin-top: 1.5em;
	padding-top: 1.5em;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	flex: 0 0 auto;
}

.mobile-nav-social__label {
	margin: 0 0 0.75em;
	font-family: var(--font-accent);
	font-size: 0.72em;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.mobile-nav-social__options {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

#mobile-nav-panel .mobile-nav-social__item {
	/* `auto` rather than `1 1 0`: down a column that would stretch the three
	   rows to fill whatever height the panel has left. */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75em;
	padding: 0.85em 1em;
	font-family: var(--font-accent);
	font-size: 0.95em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#mobile-nav-panel .mobile-nav-social__item svg {
	width: 20px;
	height: 20px;
}

#mobile-nav-panel .mobile-nav-social__item:hover,
#mobile-nav-panel .mobile-nav-social__item:active {
	background: #fff;
	color: #000;
	border-color: #fff;
}

#top-left-ui {
	position: fixed;
	top: 1.2em;
	left: max(1.2em, calc((100% - 1280px) / 2 + 1.5em));
	z-index: 20;
	font-size: 1.1em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
}

.top-left-ui__season {
	display: none;
}

.top-left-ui__beta {
	display: inline-block;
	margin-left: 0;
	padding: 0.1em 0.35em;
	font-size: 0.7em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid var(--main-color);
	background: rgba(var(--main-color), 0.08);
}

@media (min-width: 45em) {
	.top-left-ui__season {
		display: inline;
	}
	.top-left-ui__beta {
		margin-left: 0.4em;
	}
}

#terminal-prompt {
	position: fixed;
	left: 1.2em;
	bottom: 1.2em;
	z-index: 20;
	font-size: 1.1em;
	letter-spacing: 0.06em;
	pointer-events: none;
}

.terminal-cursor {
	text-decoration: underline;
	animation: cursor-pulse 1.2s steps(1) infinite;
}

#landing-publisher {
	padding: 1.5em 0 0.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	color: var(--main-color);
}

.landing-publisher__bracket {
	font-size: 1.1em;
	line-height: 1;
	opacity: 0.4;
}

.landing-publisher__caption {
	font-size: 0.75em;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.6;
}

#landing-publisher img {
	height: 1.3em;
	width: auto;
	display: block;
	opacity: 0.85;
	transition: opacity 200ms ease;
}

#landing-publisher img:hover {
	opacity: 1;
}

@keyframes cursor-pulse {
	0%,
	49% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

#terminal-clock {
	letter-spacing: 0.08em;
}

/* Boot sequence: only visible when .boot-show (first visit) */
.boot-show #boot-sequence {
	display: flex !important;
	visibility: visible !important; /* override body.no-fouc so boot shows immediately */
	position: fixed;
	inset: 0;
	z-index: 999;
	align-items: center;
	justify-content: center;
	background: rgba(var(--bg-color), 0.98);
	pointer-events: none;
	animation: boot-sequence-fade 3s ease forwards;
}

.boot-frame {
	text-align: center;
	padding: 1em 2em;
	border: none;
	background: transparent;
}

.boot-logo {
	width: min(70vw, 520px);
	height: auto;
	display: block;
	filter: brightness(1.05) contrast(1.05);
	margin-bottom: 0.6em;
	animation: boot-logo-out 3s ease forwards;
}

.boot-terminal {
	opacity: 0;
	animation: boot-terminal-in 3s ease forwards;
}

.boot-terminal p {
	margin: 0.2em 0;
}

@keyframes boot-sequence-fade {
	0%,
	85% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes boot-logo-out {
	0%,
	35% {
		opacity: 1;
	}
	55%,
	100% {
		opacity: 0;
	}
}

@keyframes boot-terminal-in {
	0%,
	35% {
		opacity: 0;
	}
	55%,
	85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boot-show #boot-sequence {
		animation: none;
		opacity: 0;
		visibility: hidden;
	}
}

#toggle-effects a {
	padding: 0 0.3em;
	border: 1px solid var(--main-color);
	text-decoration: none;
}

#toggle-effects a:hover {
	background-color: var(--main-color);
	color: rgba(0, 0, 0, 0.65);
}

.tag-list {
	display: flex;
	gap: 0.5em;
	margin: 0.5em 0;
}

hr.dotted {
	border: none;
	border-top: 1px dotted var(--main-color);
	height: 1px;
	width: 100%;
}

.tooltip {
	position: absolute;
	background-color: rgba(var(--bg-color), 0.45);
	color: var(--main-color);
	padding: 5px 10px;
	border: 1px solid var(--main-color);
	font-size: 14px;
	pointer-events: none;
	white-space: nowrap;
}

/* ASCII AND INTRODUCTION */
#sub-title {
	font-size: 1em;
}

/* NAV BAR USED FOR TAB PAGES */
nav ul {
	list-style-type: none;
	display: flex;
	padding: 0;
	gap: 2.5em;
}

nav ul li a {
	padding: 0.2em 0.3em;
}

.tab-active {
	background-color: var(--main-color);
	color: rgba(24, 45, 75, 0.616);
	text-decoration: none;
}

/* PRINT ANIMATION WHEN CHANGING TABS AND ON PAGE LOAD */
.fade-in {
	opacity: 0;
}

.fade-in.visible:not(em) {
	opacity: 1;
	transform: translateY(0);
}

.fade-in.visible em {
	opacity: 0.7;
	transform: translateY(0);
}

@keyframes fade-in-anim {
	0% {
		opacity: 0.75;
		transform: scale(0.985) rotateX(-15deg);
	}
	35% {
		opacity: 0.8;
	}

	100% {
		opacity: 1;
		transform: scale(1) rotateX(0);
	}
}

.fade-in-anim:not(em) {
	animation: fade-in-anim 0.5s ease-out;
}

/* TABS */
.tabs:not(:target):not(.default-tab) {
	display: none;
}

.tabs {
	border: solid var(--main-color);
	padding: 1.5em;
	backdrop-filter: blur(var(--tab-background-blur));
	background: linear-gradient(45deg, rgba(var(--bg-color), 0.05) 70%, rgba(var(--bg-color), 0.2) 110%);
}

/* HOME TAB */
#welcome-title {
	background: linear-gradient(90deg, transparent -15%, rgba(var(--bg-color), 0.3) 65%);
	outline: 1px solid var(--main-color);
	margin-bottom: 0.5em;
	padding-left: 0.25em;
}

#update-list em::after {
	content: '\A';
	white-space: pre;
}

#update-list p:not(:last-child) {
	margin-bottom: 0.75em;
}

/* RESPONSIVENESS */
@media screen and (max-width: 45em) {
	.no-mobile {
		display: none;
	}
	nav ul {
		gap: 0.25em;
		width: 100%;
		padding: 0.25em 0;
		display: flex;
		justify-content: space-between;
	}
	#rain-vid {
		object-fit: fill;
	}
	body {
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* grid system */
	.row {
		display: block;
	}
	.row img {
		width: 100%;
	}

	/* pictures tab */
	.img-desc {
		filter: opacity(100%);
		left: 100%;
		padding: 0 0.5em;
		align-items: start;
	}
	.img-desc:hover {
		background: none;
	}
	.row-photography {
		flex-direction: column;
		display: flex;
		gap: 0;
	}
	.img-container {
		width: 50%;
	}

	/* about tab */
	.contact-link {
		margin-top: 0.5em;
	}
	.contact-link {
		margin-bottom: 0.75em;
	}
	.contact-link a {
		padding: 0.25em 0 0.25em 0;
	}
}

@media screen and (max-width: 1050px) {
	#canvas {
		padding: 0.5em;
	}
	.tabs {
		padding: 0.75em;
	}
}

@media screen and (min-width: 1600px) {
	/* Prevent the images from getting too big on wide screens */
	.row img {
		max-width: 800px;
	}
	.row {
		justify-content: left;
	}
}

@media (hover: none) {
	summary:hover {
		background-color: transparent;
		color: var(--main-color);
	}
}

/* To comply with outlinenone.com */
:focus {
	outline: 2px solid var(--main-color);
	color: var(--main-color);
	background: rgba(var(--bg-color), 0.3);

	text-decoration: none;
}

/* === DashedCard === */
.grid-row-box {
	padding: 0.5em;
	width: 100%;
	border: 1px dotted var(--main-color);
}

.grid-row-box-shrink {
	flex-shrink: 5;
}

/* === Accordion === */
.accordion {
	width: 100%;
	background: rgba(var(--bg-color), 0.5);
	/* subtle grid / terminal feel */
	background-image:
		linear-gradient(rgba(var(--main-color), 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--main-color), 0.03) 1px, transparent 1px);
	background-size: 12px 12px;
}

/* Hover state: light gray/white terminal look */
.accordion__header {
	--accordion-hover-text: rgba(40, 40, 40, 0.95);
	--accordion-hover-icon: rgba(18, 18, 18, 0.95);
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
	user-select: none;
	/* light header bar - terminal style */
	background: linear-gradient(
		180deg,
		rgba(var(--main-color), 0.18) 0%,
		rgba(var(--main-color), 0.08) 100%
	);
	border-bottom: 1px dotted var(--main-color);
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background 1s ease, color 1s ease, border-color 1s ease, box-shadow 1s ease;
}

.accordion__header::-webkit-details-marker {
	display: none;
}

/* Hover: light gray/white, scanlines, subtle noise, dark text & icon */
.accordion__header::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: url('/assets/images/noise-textures/noisy-texture-200x200-1-0198c685b8692fe64d61047541aed222.png?vsn=d');
	background-size: 200px 200px;
	transition: opacity 1s ease;
}

.accordion__header:hover {
	background:
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 1px,
			rgba(0, 0, 0, 0.06) 2px
		),
		linear-gradient(
			180deg,
			rgba(220, 220, 220, 0.5) 0%,
			rgba(200, 200, 200, 0.4) 100%
		);
	border-bottom-color: rgba(255, 255, 255, 0.6);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.accordion__header:hover::after {
	opacity: 0.12;
}

.accordion__header .accordion__title,
.accordion__header .accordion__icon {
	position: relative;
	z-index: 1;
}

.accordion__header:hover .accordion__title {
	color: var(--accordion-hover-text);
}

.accordion__header:hover .accordion__icon {
	color: var(--accordion-hover-icon);
}

.accordion__icon {
	display: inline-block;
	transition: transform 1s ease, color 1s ease;
	font-size: 1.35em;
}

.accordion[open] .accordion__icon {
	transform: rotate(90deg); /* ► becomes ▼ when rotated 90deg */
}

.accordion__content {
	min-height: 1.5em;
	/* dark content area */
	background: rgba(var(--bg-color), 0.35);
}

.accordion__content :global(p:first-child),
.accordion__content :global(ul:first-child) {
	margin-top: 0;
}

.accordion__content :global(p:last-child),
.accordion__content :global(ul:last-child) {
	margin-bottom: 0;
}

/* === Class === */
.tag {
	padding: 0.1em 0.3em;
	background: linear-gradient(90deg, transparent -5%, rgba(var(--bg-color), 0.3) 75%);
	border: 1px solid var(--main-color);
}

.tag[class*='active'] {
	--tag-color: rgb(183, 241, 95);
	--bg-alpha: rgba(0, 255, 0, 0.3);
}

.tag[class*='inactive'] {
	--tag-color: rgb(230, 114, 37);
	--bg-alpha: rgba(255, 0, 0, 0.3);
}

.tag[class*='open-source'] {
	--tag-color: rgb(179, 138, 245);
	--bg-alpha: rgba(200, 95, 241, 0.3);
}

.tag[class*='active'],
.tag[class*='inactive'],
.tag[class*='open-source'] {
	border-color: var(--tag-color);
	color: var(--tag-color);
	background: linear-gradient(90deg, transparent -5%, var(--bg-alpha) 120%);
}

.class-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(45deg, rgba(var(--bg-color), 0.1) 70%, rgba(var(--bg-color), 0.2) 110%);
	display: flex;
	flex-direction: column;
	min-height: 230px;
}

.class-card::before,
.class-card::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.class-card::before {
	background-size: cover;
	background-position: center;
	opacity: 0.18;
	filter: grayscale(1) brightness(0.9) contrast(1.1);
}

.class-card::after {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%);
}

.class-card > * {
	position: relative;
	z-index: 1;
}

.class-card__tags {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.class-card__ability {
	border: 1px solid var(--main-color);
	padding: 0.35em 0.45em;
	background: rgba(var(--bg-color), 0.35);
	margin-bottom: 0.6em;
	font-size: 0.78em;
	line-height: 1.25;
}

.class-card__ability-title,
.class-card__example-title {
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.class-card__ability-title {
	margin-bottom: 0.35em;
}

.class-card__example-title {
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}

.class-card__example-line {
	letter-spacing: 0.08em;
}

.class-card__motto {
	margin-top: auto;
	padding-top: 0.75em;
}

.class-card--blitz::before {
	background-image: url('/assets/images/classes/blitz-160e57322c2978814f6377ee29b77d18.png?vsn=d');
	background-position: 45% 40%;
	background-size: 350%;
}

.class-card--trickster::before {
	background-image: url('/assets/images/classes/trickster-4eeb17eafeffad9fae3307d1fed7593a.png?vsn=d');
	background-position: 60% 40%;
}

.class-card--controller::before {
	background-image: url('/assets/images/classes/controller-788e43081ce7a75c1f66ad3fb5961373.png?vsn=d');
	background-position: 80% 55%;
	background-size: 370%;
}

/* === AsciiTitle === */
#title {
	font-size: 1.3em;
	font-family: 'Courier New', Courier, monospace;
	-webkit-user-select: none; /* Safari */
	user-select: none;
	margin-bottom: 1em;
}

@media screen and (max-width: 1050px) {
	#title {
		font-size: 2.3vw;
		margin-bottom: 2em;
	}
}

/* === ClassPicker === */
/* Terminal-style class picker: details (left) + decorative bg image on card root + picker strip (bottom) */

@media (max-width: 768px) {
	.class-picker-outer > div {
		border: none;
		padding: 0;
		background: transparent;
		backdrop-filter: none;
		box-shadow: none;
	}
}

.class-picker {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: rgba(var(--bg-color), 0.5);
	background-image:
		linear-gradient(rgba(var(--main-color), 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--main-color), 0.04) 1px, transparent 1px);
	background-size: 12px 12px;
	padding: 0.6em;
}

/* Decorative class image as subtle background on card root (no img/div) */
.class-picker::before,
.class-picker::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.class-picker::before {
	background-image: var(--class-picker-bg);
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: 100% 40%;
	opacity: 0.18;
	filter: grayscale(1) brightness(0.9) contrast(1.1);
}

/* Per-class overrides for the decorative background */
.class-picker[data-class-id='blitz']::before {
	background-size: 60%;
	background-position: 115% 50%;
}

.class-picker[data-class-id='trickster']::before {
	background-size: 55%;
	background-position: 95% 35%;
}

.class-picker[data-class-id='controller']::before {
	background-size: 80%;
	background-position: 100% 55%;
}

/* 960px – 1200px: narrow desktop */
@media (max-width: 1200px) and (min-width: 961px) {
	.class-picker::before {
		background-size: 70%;
		opacity: 0.22;
	}
	.class-picker[data-class-id='blitz']::before {
		background-size: 75%;
		background-position: 50% 45%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 72%;
		background-position: 50% 45%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 85%;
		background-position: 50% 45%;
	}
}

/* 769px – 960px: tablet */
@media (max-width: 960px) and (min-width: 769px) {
	.class-picker::before {
		background-size: 95%;
		background-position: 50% 45%;
		opacity: 0.35;
	}
	.class-picker[data-class-id='blitz']::before { background-size: 100%; }
	.class-picker[data-class-id='trickster']::before { background-size: 98%; }
	.class-picker[data-class-id='controller']::before { background-size: 105%; }
}

/* 600px – 768px: large mobile / small tablet */
@media (max-width: 768px) and (min-width: 600px) {
	.class-picker::before {
		opacity: 0.75;
	}
	.class-picker[data-class-id='blitz']::before { 
		background-size: 200%;
		background-position: 35% 45%;
	}
	.class-picker[data-class-id='trickster']::before { 
		background-size: 128%; 
		background-position: 50% 45%;
	}
	.class-picker[data-class-id='controller']::before { 
		background-size: 200%;
		background-position: 50% 65%;
	 }
}

/* 465px – 599px: mobile */
@media (max-width: 599px) and (min-width: 465px) {
	.class-picker::before { opacity: 0.75; }
	.class-picker[data-class-id='blitz']::before {
		background-size: 250%;
		background-position: 42% 45%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 150%;
		background-position: 50% 100%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 260%;
		background-position: 85% 50%;
	}
}

@media (max-width: 464px) and (min-width: 460px) {
	.class-picker::before { opacity: 0.75; }
	.class-picker[data-class-id='blitz']::before {
		background-size: 250%;
		background-position: 42% 20%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 150%;
		background-position: 50% 950%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 300%;
		background-position: 85% 35%;
	}
}

@media (max-width: 459px) and (min-width: 458px) {
	.class-picker::before { opacity: 0.75; }
	.class-picker[data-class-id='blitz']::before {
		background-size: 250%;
		background-position: 42% 20%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 150%;
		background-position: 50% 600%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 300%;
		background-position: 85% 35%;
	}
}

@media (max-width: 457px) and (min-width: 455px) {
	.class-picker::before { opacity: 0.75; }
	.class-picker[data-class-id='blitz']::before {
		background-size: 250%;
		background-position: 42% 20%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 150%;
		background-position: 50% 220%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 300%;
		background-position: 85% 35%;
	}
}

@media (max-width: 454px) and (min-width: 450px) {
	.class-picker::before { opacity: 0.75; }
	.class-picker[data-class-id='blitz']::before {
		background-size: 250%;
		background-position: 42% 20%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 150%;
		background-position: 50% 200%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 300%;
		background-position: 85% 35%;
	}
}

@media (max-width: 449px) and (min-width: 440px) {
	.class-picker::before { opacity: 0.75; }
	.class-picker[data-class-id='blitz']::before {
		background-size: 250%;
		background-position: 42% 20%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 150%;
		background-position: 50% 180%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 300%;
		background-position: 85% 35%;
	}
}

@media (max-width: 439px) and (min-width: 378px) {
	.class-picker::before { opacity: 0.75; }
	.class-picker[data-class-id='blitz']::before {
		background-size: 250%;
		background-position: 42% 20%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 150%;
		background-position: 50% 120%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 300%;
		background-position: 85% 35%;
	}
}

/* ≤377px: small mobile */
@media (max-width: 377px) {
	.class-picker::before { opacity: 0.75; }
	.class-picker[data-class-id='blitz']::before {
		background-size: 320%;
		background-position: 43.5% 25%;
	}
	.class-picker[data-class-id='trickster']::before {
		background-size: 180%;
		background-position: 50% 120%;
	}
	.class-picker[data-class-id='controller']::before {
		background-size: 300%;
		background-position: 85% 45%;
	}
}

.class-picker::after {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%);
}

.class-picker__main {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 40%);
	gap: 1em;
	height: auto;
	margin-bottom: 1em;
}

@media (max-width: 768px) {
	.class-picker {
		padding: 1em 0.8em;
		gap: 1.25em;
	}
	.class-picker__strip-wrap {
		order: -1;
		margin-bottom: 0.5em;
	}
	.class-picker__strip-line {
		margin-bottom: 0.75em;
	}
	.class-picker__strip {
		column-gap: 1.5rem;
		row-gap: 0.75rem;
		padding: 0.5em 0 0.6em;
	}
	.class-picker__main {
		order: 0;
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
	}
	.class-picker__ability {
		flex-direction: column;
		align-items: center;
	}
	.class-picker__ability-icon {
		display: block;
		width: 6em;
		height: auto;
		margin-inline: auto;
	}
	.class-picker__ability-content {
		width: 100%;
	}
}

/* Inner card: details only */
.class-picker__details {
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
	align-self: start;
	background: rgba(var(--bg-color), 0.4);
	border: 1px dotted var(--main-color);
	padding: 1em 1.2em;
	overflow-y: auto;
}

.class-picker__details-inner {
	position: relative;
	z-index: 1;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.class-picker__details-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1em;
	margin-bottom: 0.25em;
}

@media (max-width: 1200px) {
	.class-picker__details-header {
		flex-direction: column;
		gap: 0.5em;
		align-items: flex-start;
	}
	.class-picker__tags {
		justify-content: flex-start;
	}
}

@media (max-width: 768px) {
	.class-picker__tags .tag {
		font-size: clamp(0.65em, 2.5vw + 0.5em, 1em);
	}
}

.class-picker__title {
	margin: 0;
	font-size: clamp(2rem, 6vw + 1.5rem, 5rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--main-color);
}

.class-picker__description {
	margin: 0 0 0.8em;
	font-size: clamp(0.85rem, 1.2vw + 0.9rem, 1.4rem);
	line-height: 1.4;
	color: rgba(var(--main-color), 0.9);
	width: 100%;
	min-width: 0;
}

/* Tags (from Class card) */
.class-picker__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: flex-start;
	flex-shrink: 0;
}

.class-picker__tags .tag {
	padding: 0.1em 0.3em;
	font-size: clamp(0.7em, 2vw + 0.6em, 1em);
	background: linear-gradient(90deg, transparent -5%, rgba(var(--bg-color), 0.3) 75%);
	border: 1px solid var(--main-color);
}

/* Ability block – terminal style */
.class-picker__ability {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	border: 1px dotted var(--main-color);
	padding: 0.5em 0.6em;
	background: rgba(var(--bg-color), 0.5);
	background-image:
		linear-gradient(rgba(var(--main-color), 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--main-color), 0.03) 1px, transparent 1px);
	background-size: 8px 8px;
	margin-bottom: 0.6em;
	font-size: clamp(0.65em, 1.5vw + 0.5em, 0.78em);
	line-height: 1.4;
	letter-spacing: 0.06em;
	min-width: 0;
}

.class-picker__ability-icon {
	flex-shrink: 0;
	width: 10em;
	height: auto;
	opacity: 0.9;
}

.class-picker__ability-content {
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.class-picker__ability-prompt {
	color: rgba(var(--main-color), 0.7);
	margin-right: 0.35em;
	font-weight: normal;
}

.class-picker__ability-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0 0 0.4em;
	font-size: clamp(1em, 2vw + 0.8em, 1.35em);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.class-picker__ability-title strong {
	color: var(--main-color);
}

.class-picker__ability-desc {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0 0 0;
	padding-bottom: 0.5em;
	border-bottom: 1px dotted rgba(var(--main-color), 0.4);
	letter-spacing: 0.06em;
}

.class-picker__ability-desc strong {
	font-style: italic;
	color: rgba(var(--main-color), 0.55);
}

/* Example block – nested terminal output */
.class-picker__ability-example {
	margin-top: 0.5em;
	padding-left: 0.5em;
	border-left: 2px solid rgba(var(--main-color), 0.5);
}

.class-picker__example-title {
	display: flex;
	align-items: baseline;
	margin: 0 0 0.35em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(var(--main-color), 0.85);
}

.class-picker__example-lines {
	margin: 0;
}

.class-picker__example-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0.2em 0 0;
	letter-spacing: 0.08em;
}

.class-picker__example-prefix {
	color: rgba(var(--main-color), 0.6);
	margin-right: 0.4em;
	flex-shrink: 0;
}

.class-picker__learn-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-bottom: 0.8em;
	font-size: 1.3rem;
	color: var(--main-color);
	text-decoration: none;
	border-bottom: 1px dotted var(--main-color);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.class-picker__learn-more:hover {
	color: rgba(220, 220, 220, 0.95);
	border-bottom-color: rgba(220, 220, 220, 0.6);
}

.class-picker__arrow {
	opacity: 0.8;
}

.class-picker__cta {
	display: inline-block;
	padding: 0.5em 1.2em;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: rgba(18, 18, 18, 0.95);
	background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.class-picker__cta:hover {
	filter: brightness(1.1);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}


/* Picker strip - inside back card, outside inner card */
.class-picker__strip-wrap {
	display: flex;
	flex-direction: column;
	column-gap: 0.5rem;
	margin: 0;
	flex-shrink: 0;
}

.class-picker__strip-line {
	border-top: 1px dotted var(--main-color);
}

.class-picker__strip {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	justify-content: left;
	align-items: center;
	padding: 0.3em 0;
}

.class-picker__thumb {
	--thumb-size: 64px;
	--thumb-bg-size: cover;
	--thumb-bg-position: center; /* e.g. 30% 50%, left top, 70% 40% */
	width: var(--thumb-size);
	height: var(--thumb-size);
	padding: 0;
	border: 2px solid rgba(var(--main-color), 0.3);
	background-image: var(--thumb-bg);
	background-repeat: no-repeat;
	background-position: var(--thumb-bg-position);
	background-size: var(--thumb-bg-size);
	background-color: rgba(var(--bg-color), 0.5);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
	flex-shrink: 0;
}

/* Per-class zoom and position for thumbnail background */
.class-picker__thumb[data-id='blitz'] {
	--thumb-bg-size: 170%;
	--thumb-bg-position: 40% 50%;
}

.class-picker__thumb[data-id='trickster'] {
	--thumb-bg-size: 110%;
	--thumb-bg-position: 50% 40%;
}

.class-picker__thumb[data-id='controller'] {
	--thumb-bg-size: 210%;
	--thumb-bg-position: 100% 50%;
}

/* Unselected: opacity 60%, 80% on hover */
.class-picker__thumb:not(.class-picker__thumb--selected) {
	filter: grayscale(1) brightness(0.7);
	opacity: 0.6;
}

.class-picker__thumb:hover:not(.class-picker__thumb--selected) {
	filter: grayscale(1) brightness(1.5) contrast(1.1);
	border-color: rgba(var(--main-color), 0.5);
	opacity: 0.8;
}

/* Selected: white image + border */
.class-picker__thumb--selected {
	filter: grayscale(1) brightness(1.8) contrast(1.1);
	opacity: 1;
	border-color: rgb(255, 255, 255);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.class-picker__thumb:focus-visible {
	outline: 2px solid var(--main-color);
	outline-offset: 2px;
}

/* === ArenaCard === */
/* Arena card: 2-col (content | image), near-black content card, sharp edges */

.arena-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
	width: 100%;
}

.arena-card + .arena-card {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--main-color-20, rgba(255, 255, 255, 0.25));
}

@media (max-width: 768px) {
	.arena-card {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		gap: 1.5rem;
	}
	.arena-card__image-wrap {
		order: -1;
	}
}

.arena-card__content {
	font-family: var(--font-terminus), 'Courier New', monospace;
	background: rgba(var(--bg-color), 0.98);
	background-image:
		linear-gradient(rgba(var(--main-color), 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--main-color), 0.03) 1px, transparent 1px);
	background-size: 12px 12px;
	color: var(--main-color);
	padding: 2rem 1.75rem;
	border: 1px solid var(--main-color);
	border-radius: 0;
}

.arena-card__header {
	margin-bottom: 1.5rem;
}

.arena-card__title {
	margin: 0 0 0.35rem 0;
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--main-color);
}

.arena-card__subtitle {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.65;
}

.arena-card__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem 0;
}

.arena-card__bullets li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.6rem;
	font-size: 1.3rem;
	line-height: 1.5;
}

.arena-card__bullets li::before {
	content: '>';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--main-color);
	opacity: 0.7;
	font-weight: 600;
}

.arena-card__divider {
	height: 1px;
	border: none;
	background: var(--main-color);
	opacity: 0.25;
	margin: 1.5rem 0;
}

.arena-card__secondary-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
	opacity: 0.85;
}

.arena-card__secondary-bullets li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--main-color);
	opacity: 0.8;
}

.arena-card__secondary-bullets li::before {
	content: '>';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--main-color);
	opacity: 0.5;
	font-weight: 600;
}

.arena-card__details {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-family: var(--font-terminus), 'Courier New', monospace;
	font-size: 1.2rem;
}

.arena-card__detail-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.arena-card__detail-label {
	color: var(--main-color);
	opacity: 0.55;
	flex-shrink: 0;
}

.arena-card__detail-value {
	color: var(--main-color);
	text-align: right;
}

.arena-card__closing {
	margin: 0;
	font-size: 1.25rem;
	font-style: italic;
	color: var(--main-color);
	opacity: 0.6;
	font-family: var(--font-terminus), 'Courier New', monospace;
}

.arena-card__image-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--main-color);
}

.arena-card__image-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('/assets/images/noise-textures/noisy-texture-200x200-1-0198c685b8692fe64d61047541aed222.png?vsn=d');
	background-repeat: repeat;
	opacity: 0.08;
	pointer-events: none;
	mix-blend-mode: overlay;
}

.arena-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15);
}

.arena-card__logo-overlay {
	position: absolute;
	top: 1rem;
	left: 1rem;
	max-width: 70%;
	max-height: 7rem;
	object-fit: contain;
	filter: drop-shadow(0 2px 8px rgba(var(--bg-color), 0.85));
	pointer-events: none;
}

/* === RoadmapCard === */
/* Roadmap card: near-black, thin white border (low opacity), hover = full border + text opacity up. White only. */

.roadmap-card {
	background: rgba(var(--bg-color), 0.98);
	border: 1px solid var(--main-color-20, rgba(255, 255, 255, 0.25));
	border-radius: 0;
	opacity: 1;
	padding: 1.75rem 1.75rem;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.roadmap-card:hover {
	border-color: var(--main-color);
	opacity: 1;
}

.roadmap-card:hover .roadmap-card__name,
.roadmap-card:hover .roadmap-card__descriptor {
	opacity: 1;
}

.roadmap-card__name {
	margin: 0 0 0.5rem 0;
	font-size: 2rem;
	font-weight: 700;
	color: var(--main-color);
	opacity: 0.95;
	transition: opacity 0.2s ease;
	font-family: var(--font-terminus), 'Courier New', monospace;
}

.roadmap-card__descriptor {
	margin: 0 0 1rem 0;
	font-size: 1.5rem;
	line-height: 1.45;
	color: var(--main-color);
	opacity: 0.7;
	transition: opacity 0.2s ease;
	font-family: var(--font-terminus), 'Courier New', monospace;
}

.roadmap-card__descriptor:last-child {
	margin-bottom: 0;
}

.roadmap-card__status {
	display: inline-block;
	font-family: var(--font-terminus), 'Courier New', monospace;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	color: var(--main-color);
	opacity: 0.6;
	border: 1px solid var(--main-color-40, rgba(255, 255, 255, 0.4));
	padding: 0.35rem 0.75rem;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.roadmap-card:hover .roadmap-card__status {
	opacity: 0.85;
	border-color: var(--main-color);
}

/* LOCKED cards: dimmed (higher specificity so it wins) */
article.roadmap-card.roadmap-card--locked {
	opacity: 0.5 !important;
}

article.roadmap-card.roadmap-card--locked:hover {
	opacity: 0.5 !important;
}

/* === RoadmapSection === */
/* Roadmap section: id=roadmap, grid of cards, white-only */

.roadmap-section {
	width: 100%;
	font-family: var(--font-terminus), 'Courier New', monospace;
}

.roadmap-section__header {
	margin-bottom: 1.75rem;
}

.roadmap-section__title {
	margin: 0 0 0.25rem 0;
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--main-color);
}

.roadmap-section__subtitle {
	margin: 0;
	font-size: 1.2rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.6;
}

.roadmap-section__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.roadmap-section__footer {
	margin: 1.75rem 0 0 0;
	font-size: 1.25rem;
	color: var(--main-color);
	opacity: 0.5;
	font-family: var(--font-terminus), 'Courier New', monospace;
}


/* === Landing login button (added) === */
#landing-login-link {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1em;
  border: 1px solid var(--main-color);
  background: rgba(var(--bg-color), 0.55);
  backdrop-filter: blur(4px);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 1.1em;
  color: var(--main-color);
  transition: background-color 0.15s, color 0.15s;
}

#landing-login-link:hover {
  background-color: var(--main-color);
  color: rgba(0, 0, 0, 0.75);
  box-shadow: none;
}

/* Wrap so both top-right box and login button sit side by side */
#top-right-cluster {
  position: fixed;
  top: 1.2em;
  right: max(1.2em, calc((100% - 1280px) / 2 + 1.5em));
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: 0.5rem; /* space-x-2 */
}

/* Override default fixed positioning since the cluster handles it */

/* === Class picker: power icons → Heroicons swap === */
/* The wrapper is now a <div> containing 3 stacked icon spans;
   override the original <img> sizing rules and toggle visibility
   based on the parent .class-picker[data-class-id]. */
div.class-picker__ability-icon {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
  color: var(--main-color);
}

div.class-picker__ability-icon > [data-power] {
  display: none;
  align-items: center;
  justify-content: center;
}

.class-picker[data-class-id='trickster'] div.class-picker__ability-icon > [data-power='trickster'],
.class-picker[data-class-id='blitz']     div.class-picker__ability-icon > [data-power='blitz'],
.class-picker[data-class-id='controller'] div.class-picker__ability-icon > [data-power='controller'] {
  display: inline-flex;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING — global sizing tune-up
   Caps the canvas width, tones down oversized headings, and reduces vertical
   bloat so the home view fits on a typical 1080p screen without scrolling.
   ═══════════════════════════════════════════════════════════════════════════ */

#canvas {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.2em 1.5em;
  font-size: 1.4em;
}

@media screen and (max-width: 1050px) {
  #canvas {
    padding: 0.75em;
    font-size: 1.25em;
  }
}

/* ASCII title — smaller, with breathing room above and below */
#title {
  font-size: 0.95em;
  margin-top: 2em;
  margin-bottom: 1.5em;
}

@media screen and (max-width: 1050px) {
  #title {
    font-size: 1.8vw;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }
}

/* Nav tabs — slightly tighter */
nav ul {
  gap: 1.5em;
}

/* Home — Season label was text-6xl (huge). Force a sane size + cap it */
.grid-row-box p.uppercase.text-6xl {
  font-size: 1.6em;
  line-height: 1.2;
}

.grid-row-box .mt-8 {
  margin-top: 1em;
}

.grid-row-box .mt-8 p {
  font-size: 0.95em;
  line-height: 1.45;
}

/* Choose your path label */
#welcome-title {
  font-size: 1.1em;
  padding: 0.15em 0.4em;
}

/* Class cards — drop the huge title sizing, tighten min-height */
.class-card {
  min-height: 0;
  padding: 0.6em;
}

.class-card h2 {
  font-size: 1.1em !important;
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.class-card p {
  font-size: 0.78em !important;
  line-height: 1.3;
  margin-top: 0.25em;
}

.class-card .class-card__motto {
  font-size: 0.7em !important;
  padding-top: 0.4em;
  margin-top: auto;
}

/* Accordion title */
.accordion__title.text-4xl {
  font-size: 1.05em;
}

.accordion__content {
  padding: 0.5em 0.6em;
}

.accordion__content p,
.accordion__content li {
  font-size: 0.85em;
  line-height: 1.45;
}

/* Ruleset page — same accordion treatment */
.grid-row-box p.uppercase.text-4xl {
  font-size: 1.3em;
  line-height: 1.2;
}

/* Arena page — title was 3.5rem (huge) */
.arena-card__title {
  font-size: 2.2rem;
  letter-spacing: 0.06em;
}

.arena-card__subtitle {
  font-size: 0.9rem;
}

.arena-card__bullets li,
.arena-card__secondary-bullets li {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0.45rem;
  padding-left: 1.2rem;
}

.arena-card__details {
  font-size: 0.95rem;
  gap: 0.4rem;
}

.arena-card__closing {
  font-size: 0.95rem;
}

.arena-card__content {
  padding: 1.4rem 1.25rem;
}

/* Roadmap page */
.roadmap-section__title {
  font-size: 2.2rem;
  letter-spacing: 0.06em;
}

.roadmap-section__subtitle {
  font-size: 0.95rem;
}

.roadmap-card {
  padding: 1.1rem 1.2rem;
}

.roadmap-card__name {
  font-size: 1.35rem;
}

.roadmap-card__descriptor {
  font-size: 1.05rem;
  line-height: 1.4;
}

.roadmap-card__status {
  font-size: 0.85rem;
  padding: 0.25rem 0.55rem;
}

.roadmap-section__footer {
  font-size: 0.95rem;
}

/* Class picker page — tighten the giant title */
.class-picker__title {
  font-size: clamp(1.6rem, 4vw + 0.5rem, 3rem) !important;
}

.class-picker__description {
  font-size: clamp(0.8rem, 0.6vw + 0.7rem, 1.05rem) !important;
}

/* Class picker thumbnails — slightly smaller */
.class-picker__thumb {
  --thumb-size: 52px;
}

/* Make every section a touch tighter on the row gaps */
.grid-row-box {
  padding: 0.55em 0.7em;
}

/* ──────────────────────────────────────────
   Pairing — auto-playing swipe simulator
   ────────────────────────────────────────── */
.pairing-sim {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 280px;
  user-select: none;
  -webkit-user-select: none;
}

.pairing-sim__deck {
  position: relative;
  width: 100%;
  aspect-ratio: 280 / 410;
  perspective: 800px;
}

.pairing-sim__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: #0B0B0B;
  transform-origin: 50% 100%;
  transition:
    transform 600ms cubic-bezier(0.4, 0.05, 0.2, 1),
    opacity 500ms ease;
  will-change: transform, opacity;
}

.pairing-sim__card:nth-child(1) { transform: translateY(0) scale(1); }
.pairing-sim__card:nth-child(2) { transform: translateY(8px) scale(0.97); opacity: 0.85; }
.pairing-sim__card:nth-child(3) { transform: translateY(16px) scale(0.94); opacity: 0.7; }

.pairing-sim__card--pass {
  transform: translate3d(-160%, -10%, 0) rotate(-18deg) !important;
  opacity: 0 !important;
}

.pairing-sim__card--like {
  transform: translate3d(160%, -10%, 0) rotate(18deg) !important;
  opacity: 0 !important;
}

.pairing-sim__avatar {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  font-size: 22px;
  text-transform: uppercase;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.pairing-sim__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pairing-sim__clan {
  color: rgba(255, 255, 255, 0.65);
}

.pairing-sim__user {
  color: rgb(255, 255, 255);
}

.pairing-sim__crest {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.7;
}

.pairing-sim__sub-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

.pairing-sim__stats {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 8px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: 10px;
}

.pairing-sim__stats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pairing-sim__stats li span {
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pairing-sim__stats li strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.pairing-sim__belt--blue   { color: #3b82f6 !important; text-transform: uppercase; }
.pairing-sim__belt--purple { color: #a855f7 !important; text-transform: uppercase; }
.pairing-sim__belt--brown  { color: #8b5a2b !important; text-transform: uppercase; }
.pairing-sim__belt--black  { color: #71717a !important; text-transform: uppercase; }

.pairing-sim__bio {
  margin: 16px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pairing-sim__warn,
.pairing-sim__ok {
  margin-top: auto;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.pairing-sim__warn {
  color: rgba(252, 211, 77, 0.85);
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.pairing-sim__ok {
  color: rgba(110, 231, 183, 0.9);
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.pairing-sim__pre-like {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 3px 8px;
  background: rgba(110, 231, 183, 0.95);
  color: #0c0c0c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 1;
}

.pairing-sim__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
  margin-top: 1em;
}

.pairing-sim__btn {
  width: 2.4em;
  height: 2.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--main-color-40);
  font-size: 1.15em;
  line-height: 1;
  color: var(--main-color-40);
  transition:
    transform 250ms ease,
    color 250ms ease,
    border-color 250ms ease,
    background 250ms ease;
}

.pairing-sim__btn--like {
  color: #f87474;
}

.is-passing .pairing-sim__btn--pass,
.is-liking .pairing-sim__btn--like {
  transform: scale(1.15);
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.05);
}

.pairing-sim__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: rgba(12, 12, 12, 0.92);
  border: 1px solid var(--main-color);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 350ms ease, transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.pairing-sim__overlay.is-active {
  opacity: 1;
  transform: scale(1);
}

.pairing-sim__overlay-title {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--main-color);
}

.pairing-sim__overlay-meta {
  font-size: 0.85em;
  color: var(--main-color-40);
}

.pairing-sim__overlay-line {
  font-size: 0.75em;
  letter-spacing: 0.15em;
}

.pairing-sim__caption {
  margin-top: 0.85em;
  text-align: center;
  font-size: 0.75em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--main-color-40);
}

@media (prefers-reduced-motion: reduce) {
  .pairing-sim__card,
  .pairing-sim__overlay,
  .pairing-sim__btn { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   HOME LANDING — fixed navbar + hero
   Ported from ff/improve-landing-desgin, recolored to this site's monochrome
   scheme (white / grey on near-black). The branch's violet/acid-green/orange
   accents collapse onto --main-color (#dcdcdc) + pure white; --bone is the
   near-white reading text. Drives the navbar + hero only — the sub-pages share
   this layout's navbar but keep their own content styles.
   ════════════════════════════════════════════════════════════════════════ */

/* === Self-hosted OFL faces (served from /assets/fonts) — role-based system:
   Space Grotesk (display), Space Mono (body/HUD), Bodoni Moda (serif),
   Chakra Petch (squared HUD accent). All SIL OFL 1.1. === */
@font-face {
	font-family: 'Space Grotesk';
	src: url('/assets/fonts/space-grotesk-300-700-87c506d88b9f587f0e2292bc271f5083.woff2?vsn=d') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Space Mono';
	src: url('/assets/fonts/space-mono-400-049dfc5919c21896a13296775d80b8c0.woff2?vsn=d') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Space Mono';
	src: url('/assets/fonts/space-mono-700-e5e908997a453e21f2fe41cb72e186d2.woff2?vsn=d') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Space Mono';
	src: url('/assets/fonts/space-mono-italic-400-11404aac0afac59385cec0591f762c17.woff2?vsn=d') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Bodoni Moda';
	src: url('/assets/fonts/bodoni-moda-400-900-0492c86153615ad16cfd36af4eca123a.woff2?vsn=d') format('woff2');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Bodoni Moda';
	src: url('/assets/fonts/bodoni-moda-italic-400-900-3d6740166d538ea280da5db026bac48d.woff2?vsn=d') format('woff2');
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Chakra Petch';
	src: url('/assets/fonts/chakra-petch-400-f34dba119079e4c75db2ce3eb7f8c727.woff2?vsn=d') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Chakra Petch';
	src: url('/assets/fonts/chakra-petch-700-56706b63a0f0391ea247202feebe2a68.woff2?vsn=d') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-display: 'Space Grotesk', 'Arial Narrow', system-ui, sans-serif;
	--font-mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
	--font-serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
	--font-accent: 'Chakra Petch', var(--font-mono);
	/* near-white reading text — one notch brighter than --main-color (#dcdcdc) */
	--bone: #ececec;
	--navbar-h: 72px;
}

/* make room for the fixed navbar on every landing page — border-box so the
   72px offset is absorbed within the existing body { height: 100vh } instead of
   stacking on top of it (would otherwise leave ~72px of dead scroll below) */
body {
	box-sizing: border-box;
	padding-top: var(--navbar-h);
}

/* ──────────────────────────────────────────
   Fixed top navbar (replaces the season label,
   top-right cluster and tab row)
   ────────────────────────────────────────── */
#landing-navbar {
	/* monochrome tokens: black field, white text, light-grey hover inversion */
	--nav-bg: #000;
	--nav-edge: transparent;
	--nav-fg: #fff;
	--nav-fg-muted: rgba(255, 255, 255, 0.5);
	--nav-hover-bg: var(--main-color);
	--nav-hover-fg: #000;
	--nav-logo-bg: #000;
	--nav-beta: var(--main-color-40);
	--nav-cta-bg: #fff;
	--nav-cta-fg: #000;
	--nav-cta-hover-bg: #000;
	--nav-cta-hover-fg: #fff;
	--nav-icon-hover-bg: var(--main-color);
	--nav-icon-hover-fg: #000;
	--nav-burger-fg: var(--main-color);
	--nav-divider: var(--main-color-40);

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999; /* above the full-screen grunge overlay (9998) */
	height: var(--navbar-h);
	display: flex;
	align-items: stretch;
	background: var(--nav-bg);
	box-shadow: inset 0 -1px 0 0 var(--nav-edge);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	#landing-navbar,
	#landing-navbar a,
	#landing-navbar span,
	#landing-navbar button {
		transition-duration: 0.01ms !important;
	}
}

/* Crisp navbar — no terminal glow on this bar */
#landing-navbar,
#landing-navbar a,
#landing-navbar span,
#landing-navbar button {
	text-shadow: none;
}

.navbar__logo {
	flex-shrink: 0;
	width: var(--navbar-h);
	height: var(--navbar-h);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nav-logo-bg);
	text-decoration: none;
	transition: background-color 0.25s ease;
}

#landing-navbar .navbar__logo:hover,
#landing-navbar .navbar__logo:focus,
#landing-navbar .navbar__logo:active {
	background: var(--nav-logo-bg);
	outline: none;
	box-shadow: none;
}

#landing-navbar .navbar__logo:focus-visible {
	outline: 2px solid var(--main-color);
	outline-offset: 2px;
}

.navbar__logo-mark {
	width: 62%;
	height: 62%;
	object-fit: contain;
	/* apple-touch-icon is a light mark on a black square; `screen` over the black
	   tile keeps the mark and drops the square into the bar. */
	mix-blend-mode: screen;
}

.navbar__beta {
	display: none;
	align-items: center;
	padding: 0 0.85em;
	font-family: var(--font-accent);
	font-size: 0.62em;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--nav-beta);
	flex-shrink: 0;
	transition: color 0.25s ease;
}

@media (min-width: 64em) {
	.navbar__beta {
		display: flex;
	}
}

.navbar__nav {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 2.5em;
	display: none;
}

@media (min-width: 64em) {
	.navbar__nav {
		display: flex;
		align-items: stretch;
	}
}

.navbar__links {
	display: flex;
	align-items: center;
	gap: 1.5em;
	margin: 0;
	padding: 0 0.5em;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	min-width: 0;
}

.navbar__links::-webkit-scrollbar {
	display: none;
}

.navbar__links li {
	display: flex;
}

.navbar__link {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0;
	white-space: nowrap;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.08em;
	font-family: var(--font-mono);
	font-size: 1.45em;
	color: var(--nav-fg);
	transition: background-color 0.25s ease, color 0.25s ease;
}

#landing-navbar .navbar__link:hover,
#landing-navbar .navbar__link.is-active {
	background: var(--nav-hover-bg);
	color: var(--nav-hover-fg);
	box-shadow: none;
}

.navbar__ext {
	font-size: 0.85em;
	color: var(--nav-fg-muted);
}

.navbar__link:hover .navbar__ext,
.navbar__link.is-active .navbar__ext {
	color: var(--nav-hover-fg);
}

.navbar__right {
	display: flex;
	align-items: stretch;
	flex-shrink: 0;
	margin-left: auto;
}

.navbar__lang {
	display: none;
	align-items: center;
	padding: 0 0.5em;
}

@media (min-width: 64em) {
	.navbar__lang {
		display: flex;
	}
}

.lang-picker {
	position: relative;
}

.lang-picker__toggle {
	display: flex;
	align-items: center;
	gap: 0.45em;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--nav-fg);
	font: inherit;
	font-size: 1.45em;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.lang-picker__toggle:hover,
.lang-picker__toggle[aria-expanded="true"] {
	background: var(--nav-hover-bg);
	color: var(--nav-hover-fg);
}

.lang-picker__chevron {
	flex-shrink: 0;
	width: 1.3em;
	height: auto;
	transition: transform 0.15s;
}

.lang-picker__chevron path {
	fill: currentColor;
}

.lang-picker__toggle[aria-expanded="true"] .lang-picker__chevron {
	transform: rotate(180deg);
}

.lang-picker__menu {
	position: absolute;
	top: calc(100% + 0.4em);
	right: 0;
	z-index: 50;
	min-width: 12rem;
	max-height: 25rem;
	overflow-y: auto;
	background: var(--nav-bg);
	border: 1px solid var(--nav-divider);
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.lang-picker__menu[hidden] {
	display: none;
}

.lang-picker__item {
	display: block;
	padding: 0.75em 1.1em;
	color: var(--nav-fg);
	font-family: var(--font-mono);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	border-bottom: 1px solid var(--nav-divider);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.lang-picker__item:last-child {
	border-bottom: none;
}

#landing-navbar .lang-picker__item:hover,
#landing-navbar .lang-picker__item:focus-visible,
#landing-navbar .lang-picker__item.is-active {
	background: var(--nav-hover-bg);
	color: var(--nav-hover-fg);
	outline: none;
	box-shadow: none;
}

.navbar__social {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--navbar-h);
	padding: 0;
	color: var(--nav-fg);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.navbar__social svg {
	width: 20px;
	height: 20px;
}

#landing-navbar .navbar__social:hover {
	background: var(--nav-icon-hover-bg);
	color: var(--nav-icon-hover-fg);
	box-shadow: none;
}

@media (min-width: 48em) {
	.navbar__social {
		display: flex;
	}
}

.navbar__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(200px, 22vw, 300px);
	flex-shrink: 0;
	padding: 0 1em;
	background: var(--nav-cta-bg);
	color: var(--nav-cta-fg);
	border: 1px solid transparent;
	font-family: var(--font-mono);
	font-weight: bold;
	font-size: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

#landing-navbar .navbar__cta:hover {
	background: var(--nav-cta-hover-bg);
	color: var(--nav-cta-hover-fg);
	border-color: var(--nav-cta-hover-fg);
	box-shadow: none;
}

@media (max-width: 30em) {
	.navbar__cta {
		width: auto;
		padding: 0 1em;
	}
}

.navbar__burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: var(--navbar-h);
	height: var(--navbar-h);
	flex-shrink: 0;
	background: transparent;
	border: none;
	border-left: 1px solid var(--nav-divider);
	color: var(--nav-burger-fg);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* hover fill only on real pointer devices — on touch it sticks after a tap
   and leaves the washed-out grey block behind */
@media (hover: hover) {
	#landing-navbar .navbar__burger:hover {
		background: var(--nav-icon-hover-bg);
		color: var(--nav-icon-hover-fg);
		box-shadow: none;
	}
}

/* Open state: drop the fill, brighten to pure white and morph the three
   lines into a crisp X so the burger doubles as a clear close affordance */
body.mobile-nav-open .navbar__burger {
	background: transparent;
	color: #fff;
}

body.mobile-nav-open .navbar__burger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

body.mobile-nav-open .navbar__burger-line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.4);
}

body.mobile-nav-open .navbar__burger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.navbar__burger-line {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.navbar__burger-line {
		transition: none;
	}
}

@media (min-width: 64em) {
	.navbar__burger {
		display: none;
	}
}

/* ──────────────────────────────────────────
   Hero — looping fight feed, code stream and
   headline lockup, full-bleed under the navbar
   ────────────────────────────────────────── */
.hero {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	/* hero + fixed navbar always fill exactly one viewport */
	min-height: calc(100vh - var(--navbar-h) - 1px);
	min-height: calc(100svh - var(--navbar-h) - 1px);
	background: #050505;
	overflow: hidden;
}

/* the home page is just the hero: let its #canvas span the full viewport so the
   hero's edges line up with the fixed navbar. Scoped via :has(.hero) so the
   sibling landing pages keep #canvas centered + max-width. */
#canvas:has(.hero) {
	max-width: none;
	padding: 0;
}

/* the home page (the only landing page with a .hero) drops the "[ by Livecomp ]"
   attribution footer — the sub-pages keep it */
#canvas:has(.hero) #landing-publisher {
	display: none;
}

.hero__stage {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 30% 20%, var(--main-color-20), transparent 60%),
		linear-gradient(160deg, #0b0b0b 0%, #050505 70%);
}

.hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.12) brightness(0.85);
	pointer-events: none;
}

/* Desktop shows the landscape feed; the portrait capture is mobile-only and
   revealed at the <=768px breakpoint below. */
.hero__video--mobile {
	display: none;
}

.hero__grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(var(--main-color-20) 1px, transparent 1px),
		linear-gradient(90deg, var(--main-color-20) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(ellipse at 40% 40%, #000 30%, transparent 80%);
	pointer-events: none;
}

/* Right-edge code stream — a "render/simulation log" scrolling over the feed. */
.hero__code {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: clamp(13rem, 24vw, 30rem);
	overflow: hidden;
	opacity: 0.28;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.55) 55%);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

/* "reading head" — a soft highlight band sweeps down the code */
.hero__code::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -8%;
	height: 2.6rem;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.22), transparent);
	pointer-events: none;
	animation: hero-code-read 4.5s linear infinite;
}

@keyframes hero-code-read {
	0% { top: -8%; opacity: 0; }
	12% { opacity: 1; }
	88% { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

.hero__code-stream {
	margin: 0;
	padding: 0 1rem 0 1.4rem;
	font-family: var(--font-mono), ui-monospace, monospace;
	font-size: 1.35rem;
	line-height: 1.5;
	tab-size: 2;
	color: #f4f4f0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
	white-space: pre;
	will-change: transform;
	animation: hero-code-scroll 24s linear infinite;
}

.hero__code-stream code {
	font: inherit;
}

@keyframes hero-code-scroll {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__code-stream,
	.hero__code::after {
		animation: none;
	}
	.hero__code::after {
		display: none;
	}
}

/* bottom scrim keeps the over-video lockup legible */
.hero__stage::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		0deg,
		rgba(5, 5, 5, 0.92) 0%,
		rgba(5, 5, 5, 0.55) 32%,
		rgba(5, 5, 5, 0) 60%
	);
}

.hero__cap {
	position: absolute;
	top: 1.2rem;
	left: 1.4rem;
	z-index: 2;
	margin: 0;
	font-family: var(--font-accent);
	font-size: 0.95rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--main-color);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* Watch the full video ------------------------------------------------------
   The stage itself links to the YouTube cut, and on a fine pointer the native
   cursor is replaced by a label naming the destination. The affordance is the
   cursor, so the hero gains a second action without gaining a second button
   next to the Play Now CTA.
   Everything here is gated on (hover: hover) and (pointer: fine): a touch
   device has no hover to reveal the label, and a full-bleed tap target over
   the hero would swallow taps meant for the page. */
.hero__watch,
.hero__cursor {
	display: none;
}

/* Named for assistive tech, which never sees the cursor label. */
.hero__watch-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.hero__watch {
		display: block;
		position: absolute;
		inset: 0;
		/* Under the controls at z-index 2, so the pause button, the CTA and
		   the ruleset link keep taking their own clicks. */
		z-index: 1;
		cursor: none;
	}

	/* The global `a:hover` inverts an anchor into a solid --main-color block
	   AND forces `cursor: pointer`. This anchor is the whole stage, so that
	   rule washed the entire hero out and handed the arrow back the instant
	   the pointer crossed it — the two things the floating label is meant to
	   replace. Both are cancelled here, and both must be repeated under
	   `:hover`: `a:hover` scores (0,1,1) and outranks a bare `.hero__watch`
	   at (0,1,0), so the declarations in the block above lose while hovered,
	   which is the only time they matter. */
	.hero__watch,
	.hero__watch:hover,
	.hero__watch:focus {
		background-color: transparent;
		cursor: none;
	}

	/* Keyboard focus needs a mark of its own — the pointer is hidden here and
	   the link has no painted body to highlight. */
	.hero__watch:focus-visible {
		outline: 2px solid var(--bone);
		outline-offset: -8px;
	}

	/* Everything painted over the stage that is not a control passes its
	   pointer through to the link beneath. Without this the native arrow came
	   back the moment the pointer crossed the headline, the corner caption or
	   the publisher badge — and the label went with it, because leaving the
	   anchor fires `mouseleave`. Handing those pixels back to the link keeps
	   the cursor hidden and the label held, and a click there opens the
	   video, which is what the label has been promising all along. Costs text
	   selection on the headline and the publisher logo's hover brighten;
	   neither is prose and neither was clickable.
	   Note `.hero__actions` is deliberately not listed: re-enabling the row
	   would light up the gap between the two links as well. */
	.hero__lockup,
	.hero__cap,
	.hero__publisher {
		pointer-events: none;
	}

	/* The two real controls in the lockup take their pointer events back.
	   Hovering them is the one moment the native cursor is meant to return —
	   the JS hides the label on the same `mouseleave`. */
	.hero__cta,
	.hero__ruleset {
		pointer-events: auto;
	}

	.hero__cursor {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9990;
		align-items: center;
		gap: 0.9rem;
		padding: 0.7rem 1.25rem;
		border: 1px solid var(--bone);
		background: rgba(8, 8, 8, 0.72);
		font-family: var(--font-accent);
		font-size: 1.05rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--bone);
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transition: opacity 140ms ease-out;
		will-change: transform;
	}

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

	.hero__cursor-glyph {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0.5rem 0 0.5rem 0.85rem;
		border-color: transparent transparent transparent var(--bone);
	}

	.hero__cursor-text {
		padding-left: 0.9rem;
		border-left: 1px solid var(--main-color-40);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__cursor {
		transition: none;
	}
}

.hero__pause {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 6.2rem;
	height: 6.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 2px solid #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.hero__pause:hover {
	background: rgba(5, 5, 5, 0.4);
}

.hero__pause:focus-visible {
	outline: 2px solid var(--main-color);
	outline-offset: 3px;
}

.hero__pause-icon--play {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.9rem 0 0.9rem 1.5rem;
	border-color: transparent transparent transparent #fff;
}

.hero__pause-icon--pause {
	display: none;
	align-items: center;
	gap: 0.5rem;
}

.hero__pause-icon--pause::before,
.hero__pause-icon--pause::after {
	content: "";
	display: block;
	width: 0.5rem;
	height: 1.9rem;
	background: #fff;
}

.hero__pause.is-playing .hero__pause-icon--play {
	display: none;
}

.hero__pause.is-playing .hero__pause-icon--pause {
	display: flex;
}

.hero__lockup {
	position: absolute;
	left: 0;
	bottom: clamp(1.5rem, 5vh, 4rem);
	z-index: 2;
	max-width: min(52rem, 92%);
	padding: 2rem 2rem 2.4rem 3rem;
	color: var(--bone);
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.4rem;
	font-family: var(--font-mono);
	font-size: 1.2rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bone);
}

.hero__beta {
	font-family: var(--font-accent);
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	color: var(--main-color);
}

.hero__headline {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(3rem, 5.2vw, 5rem);
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--bone);
	animation: hero-headline-cut 0.01s steps(1) 0.3s backwards;
}

@keyframes hero-headline-cut {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* inline PHYRENA wordmark standing in for the word in the headline */
.hero__headline-logo {
	display: inline-block;
	height: 0.75em;
	aspect-ratio: 2029 / 356;
	vertical-align: baseline;
	background-color: #fff;
	-webkit-mask: url('/images/phyrena-logo-9d672d6ffae38a43ff087c27902ff9b9.png?vsn=d') center / contain no-repeat;
	mask: url('/images/phyrena-logo-9d672d6ffae38a43ff087c27902ff9b9.png?vsn=d') center / contain no-repeat;
}

.hero__support {
	margin: 0.9rem 0 0;
	max-width: 40rem;
	font-family: var(--font-mono);
	font-size: 1.15rem;
	line-height: 1.45;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bone);
}

.hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6rem 2rem;
	margin-top: 2.2rem;
}

/* primary CTA — the single largest white mass in the viewport */
.hero__cta {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	padding: 1.2rem 2.4rem;
	background: #fff;
	color: #050505;
	border: 2px solid #fff;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hero__cta-label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hero .hero__cta:hover,
.hero .hero__cta:focus-visible {
	background: #050505;
	color: #fff;
	box-shadow: none;
}

.hero .hero__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.hero .hero__cta:focus:not(:focus-visible) {
	outline: none;
	background: #fff;
	color: #050505;
	box-shadow: none;
}

/* secondary text link — quiet grey, never inverts */
.hero__ruleset {
	font-family: var(--font-mono);
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--main-color);
	text-decoration: none;
	border-bottom: 1px solid var(--main-color-40);
	padding-bottom: 0.15rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.hero .hero__ruleset:hover,
.hero .hero__ruleset:focus-visible {
	color: var(--bone);
	border-bottom-color: var(--bone);
	background: transparent;
	box-shadow: none;
}

.hero .hero__ruleset:focus-visible {
	outline: 2px solid var(--bone);
	outline-offset: 4px;
}

.hero .hero__ruleset:focus:not(:focus-visible) {
	outline: none;
	background: transparent;
	color: var(--bone);
}

/* "[ by Livecomp ]" attribution, anchored to the hero's bottom-right corner so it
   balances the bottom-left lockup. Mirrors the global #landing-publisher styling. */
.hero__publisher {
	position: absolute;
	right: clamp(1.4rem, 3vw, 3rem);
	bottom: clamp(1.5rem, 5vh, 4rem);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--main-color);
}

.hero__publisher-bracket {
	font-size: 1.6rem;
	line-height: 1;
	opacity: 0.4;
}

.hero__publisher-caption {
	font-family: var(--font-mono);
	font-size: 1rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* higher specificity than Tailwind's .h-8/.w-auto on the <.livecomp_logo> img */
.hero__publisher img {
	height: 2.4rem;
	width: auto;
	display: block;
	opacity: 0.85;
	transition: opacity 200ms ease;
}

.hero__publisher:hover img {
	opacity: 1;
}

@media (max-width: 768px) {
	.hero {
		flex-direction: column;
		/* fill the viewport (minus the fixed navbar) like desktop, so the
		   video stage is full screen height instead of a 60vh band */
	}

	/* swap the landscape desktop feed for the portrait mobile capture */
	.hero__video--desktop {
		display: none;
	}

	.hero__video--mobile {
		display: block;
	}

	.hero__lockup {
		padding: 1.5rem 1.4rem 1.8rem;
		max-width: 100%;
		/* the lockup goes full-width here, so lift it clear of the publisher
		   mark that stays pinned to the bottom-right corner */
		bottom: 4.5rem;
	}

	.hero__headline {
		font-size: clamp(2rem, 8vw, 2.8rem);
	}

	/* keep the attribution in the bottom-right corner, tucked into its own
	   strip below the lifted lockup so it never overlaps the CTAs */
	.hero__publisher {
		right: 1.2rem;
		bottom: 1.1rem;
	}

	.hero__publisher img {
		height: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__headline {
		animation: none;
	}
}

/* ===========================================================================
   EVENTS — the public funnel: /events, /events/:id, /events/checkout/:id

   The one part of the landing site that takes money, so it stays visually in
   the family (terminus mono, square borders, --main-color on --bg-color) but
   reads denser and calmer than the marketing tabs: a card here is a decision,
   not a pitch.
   =========================================================================== */

.events-head {
	margin-bottom: 2.5rem;
}

.events-head__title {
	margin: 0 0 0.35rem 0;
	font-size: clamp(2.6rem, 7vw, 3.5rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--main-color);
}

.events-head__subtitle {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.65;
}

.events-section + .events-section {
	margin-top: 3rem;
}

/* The board's two states read as one strip of terminal switches: the open one
   is inverted the way the navbar marks its own page, the other stays dim.
   Same type as the section labels they replace — this is still a label, it
   just answers back. */

.events-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--main-color-20, rgba(220, 220, 220, 0.3));
	padding-bottom: 0.75rem;
}

.events-tab {
	padding: 0.35rem 0.7rem;
	font-size: 1.1rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.55;
	text-decoration: none;
	border: 1px solid transparent;
	transition:
		opacity 0.15s ease,
		border-color 0.15s ease;
}

.events-tab:hover,
.events-tab:focus-visible {
	opacity: 0.9;
	border-color: var(--main-color-20, rgba(220, 220, 220, 0.3));
}

.events-tab.is-active {
	opacity: 1;
	font-weight: 700;
	color: rgb(var(--bg-color));
	background: var(--main-color);
	border-color: var(--main-color);
}

.events-empty {
	border: 1px dashed var(--main-color-40, rgba(220, 220, 220, 0.55));
	padding: 2.5rem 1.5rem;
	text-align: center;
	font-family: var(--font-terminus), 'Courier New', monospace;
	font-size: 1.3rem;
	color: var(--main-color);
	opacity: 0.7;
}

.events-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 1.5rem;
}

/* --- event card ---------------------------------------------------------- */

.event-card {
	display: block;
}

.event-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--main-color);
	background: rgba(var(--bg-color), 0.98);
	color: var(--main-color);
	text-decoration: none;
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}

.event-card__link:hover,
.event-card__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px var(--main-color-40, rgba(220, 220, 220, 0.35));
}

.event-card__poster {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(var(--bg-color), 1);
	border-bottom: 1px solid var(--main-color-20, rgba(220, 220, 220, 0.3));
	display: flex;
	align-items: center;
	justify-content: center;
}

.event-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.35) contrast(1.05);
}

.event-card__poster-fallback {
	font-size: 4rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0.25;
}

/* Bottom-left, and big enough to read as the card's mark rather than a
   watermark: this is the event's own identity, the one thing on the poster
   the audience already recognises from Instagram. Left, because a photo's
   subject tends to sit centre-right and the lower-left corner is the quietest
   ground on most of these covers.

   Capped on both axes — the marks range from squarish badges (PRACA's round
   seal) to wide wordmarks (GEN's) — so neither shape sprawls. The shadow is
   for the bright covers: a white wordmark over a lit gym floor has nothing to
   sit against otherwise. */

.event-card__logo {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	max-height: 5.5rem;
	max-width: 45%;
	object-fit: contain;
	object-position: left bottom;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.event-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.9rem;
	padding: 1.4rem 1.35rem 1.2rem;
	font-family: var(--font-terminus), 'Courier New', monospace;
}

.event-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 1.05rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.event-card__arena {
	opacity: 0.65;
}

/* Sized by height with a width cap, so the wide wordmarks (GEN, DOJO) and the
   squarer seals (PRACA) stay inside one band and no lockup crowds the state
   pill it shares the line with. Left-aligned inside its box: the assets carry
   different amounts of transparent padding, and what should line up with the
   card's left edge is the visible ink, not the frame. */

.event-card__arena-logo {
	height: 2.5rem;
	width: auto;
	max-width: 55%;
	object-fit: contain;
	object-position: left center;
	opacity: 0.92;
}

/* Per-asset heights, because the marks are not interchangeable shapes: GEN's
   lettering sits inside 30% vertical padding, PRACA's seal inside 16%, DOJO's
   inside 10%, and GEN runs widest. These land their ink in one band. */

.event-card__arena-logo--gen {
	height: 2.75rem;
}

.event-card__arena-logo--praca {
	height: 2.6rem;
}

.event-card__arena-logo--dojo {
	height: 2.3rem;
}

.event-card__state {
	border: 1px solid currentColor;
	padding: 0.15rem 0.5rem;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.event-card__state.is-open {
	color: #5fd08a;
}

.event-card__state.is-soon {
	color: var(--main-color);
	opacity: 0.7;
}

.event-card__state.is-closed {
	color: var(--warning-color);
}

.event-card__title {
	margin: 0;
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.event-card__details {
	margin: 0;
	display: grid;
	gap: 0.35rem;
	font-size: 1.25rem;
}

.event-card__detail-row {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
}

.event-card__detail-row dt {
	opacity: 0.55;
	min-width: 8.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 1.05rem;
}

.event-card__detail-row dd {
	margin: 0;
}

.event-card__foot {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--main-color-20, rgba(220, 220, 220, 0.3));
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	font-size: 1.2rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.event-card__cta {
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* --- fought cards -------------------------------------------------------- */

/* The history tab runs the same grid as the board above it — the poster is
   the proof, and a four-column row of dates was not carrying it. What marks a
   card as over is the grey: the cover drains, the pill goes quiet, and the
   frame stays put, because there is nothing here to click. */

.event-card--fought .event-card__image {
	filter: grayscale(1) contrast(0.95);
	opacity: 0.7;
}

/* Same frame as a live card, minus everything that promises a destination. */

.event-card__link--static {
	cursor: default;
}

.event-card__link--static:hover {
	transform: none;
	box-shadow: none;
}

.event-card__state.is-done {
	color: var(--main-color);
	opacity: 0.55;
}

/* The champion band takes the slot the CTA vacated: the crest is the only
   colour left on a card that has gone grey, which is exactly the emphasis a
   winning clan deserves on a board of finished nights. Wraps to two lines on
   a narrow card rather than squeezing the name. */

.event-card__champion {
	justify-content: space-between;
	flex-wrap: wrap;
}

.event-card__champion-label {
	opacity: 0.55;
	font-size: 1.05rem;
	letter-spacing: 0.12em;
}

.event-card__champion-clan {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.event-card__champion-crest {
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
}

.event-card__champion-tag {
	font-weight: 700;
	letter-spacing: 0.1em;
}

.event-card__champion-name {
	opacity: 0.65;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- single event page --------------------------------------------------- *
 *
 * The one screen on the site that takes money, so it reads in the hero's
 * own type rather than the sub-pages' Terminus: Space Grotesk for what is
 * being bought — the name, the date, the price, the button — and Space
 * Mono for the facts and the form. Two columns from 1024px: the card on the
 * left (name, poster, when and where), the panel that enters it on the
 * right, stretched to the same height so the total and the button always
 * close the panel at the bottom edge rather than leaving a hole under the
 * form. Below that the same markup stacks, identity first.
 */

#event {
	font-family: var(--font-mono);
	color: var(--bone);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.event-back {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.6rem;
	font-size: 1.15rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.65;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.event-back:hover,
.event-back:focus-visible {
	opacity: 1;
	background: none;
	color: var(--bone);
}

.event-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: stretch;
}

/* Two columns only once the poster is wide enough for the form to fit its
   height; narrower than this the stacked phone layout (with its sticky pay
   bar) reads better than two columns of different lengths. */
@media (min-width: 1180px) {
	.event-page {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: 2.4rem;
	}
}

.event-page__card {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	min-width: 0;
}

.event-page__header {
	display: grid;
	gap: 0.9rem;
}

/* The chip alone above the title: it sits at the start of its own line
   rather than out on the right, where it used to balance the arena's
   name. */
.event-page__state {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.2rem;
	font-size: 1.15rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--main-color);
}

.event-page__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(3.6rem, 5.4vw, 5.6rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	overflow-wrap: anywhere;
}

/* A fixed 16:9 frame whatever shape the poster file is: the page has to
   look the same from card to card, and a tall poster must not push the
   facts and the form below the fold. */
.event-page__poster {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--main-color);
	background: #000;
}

.event-page__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.25) contrast(1.05);
}

.event-page__logo {
	position: absolute;
	left: 1.2rem;
	bottom: 1.2rem;
	max-height: 5.5rem;
	max-width: 40%;
	object-fit: contain;
	object-position: left bottom;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

/* The date stub — the page's one inverted block. The date is the fact a
   fighter plans around, so it is the biggest number on the card, and the
   where/when sits beside it in the same frame. */
.event-page__facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	border: 1px solid var(--main-color);
}

.event-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 8.4rem;
	padding: 1.2rem;
	background: #fff;
	color: #050505;
}

.event-date__day {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 4.2rem;
	line-height: 1;
	letter-spacing: -0.02em;
}

.event-date__month {
	margin-top: 0.3rem;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.event-page__where {
	margin: 0;
	padding: 1.1rem 1.4rem;
	display: grid;
	align-content: center;
	gap: 0.5rem;
	min-width: 0;
	font-size: 1.3rem;
}

.event-page__where > div {
	display: grid;
	/* Wide enough for "Clã vencedor" on one line. */
	grid-template-columns: 10rem minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
}

.event-page__where dt {
	font-size: 1.05rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.6;
}

.event-page__where dd {
	margin: 0;
	color: #fff;
	overflow-wrap: anywhere;
}

@media (max-width: 420px) {
	.event-page__where > div {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}
}

/* The phone-only bar that keeps the price and the way in under the thumb.
   `sticky` at the bottom of the card column: it pins to the bottom of the
   screen for as long as any of the card is in view, then rides away with
   the card as the form scrolls in — no script, and never over the form's
   own button. */
.event-page__jump {
	display: none;
}

@media (max-width: 1179px) {
	.event-page__jump {
		display: none;
	}
}

.event-page__panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--main-color);
	background: rgba(var(--bg-color), 0.98);
}

/* A card that cannot be entered has nothing to fill a column with: the
   notice keeps its own height at the top rather than floating in the
   middle of an empty frame. */
.event-page__panel:has(.event-closed) {
	align-self: start;
}

.event-closed {
	margin: auto;
	max-width: 42ch;
	padding: 2.4rem 1.6rem;
	font-size: 1.3rem;
	line-height: 1.6;
	text-align: center;
	opacity: 0.85;
}

/* --- the pay-first form -------------------------------------------------- *
 *
 * A column that fills its panel: the fields at the top, the total and the
 * button pinned to the bottom (`margin-top: auto` on the checkout block),
 * so the price and the way to pay close the panel on every screen.
 */

.entry-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 1.6rem;
	/* Even inset all round: the head is the panel's title bar, and the mark
	   beside it needs the same room off the frame as the fields below. */
	padding: 1.8rem;
}

.entry-form__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.4rem;
}

.entry-form__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--main-color);
}

.entry-form__logo {
	flex: none;
	max-height: 4.2rem;
	max-width: 28%;
	object-fit: contain;
	object-position: right top;
}

.entry-form__notice,
.entry-form__error {
	padding: 0.9rem 1.1rem;
	border: 1px solid currentColor;
	font-size: 1.2rem;
	line-height: 1.5;
}

.entry-form__notice {
	color: var(--main-color);
}

.entry-form__error {
	color: var(--warning-color);
}

.entry-form__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 1.8rem;
	/* Where the phone's jump bar lands: clear of the fixed navbar. */
	scroll-margin-top: calc(var(--navbar-h, 72px) + 1.5rem);
}

.entry-form__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.2rem;
}

/* Two fields abreast once there is room: the short ones pair off (name and
   NIF, birth date and weight) and everything that reads as a statement —
   the email, the switches, the code, the hints — keeps the whole width. */
@media (min-width: 560px) {
	.entry-form__fields {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.2rem 1.4rem;
	}

	.entry-form__fields > .entry-form__hint,
	.entry-form__fields > .entry-form__choice,
	.entry-form__fields > .entry-form__discount-ok,
	.entry-form__fields > .entry-form__discount-bad,
	.entry-form__fields > .entry-form__field--wide {
		grid-column: 1 / -1;
	}

	/* Weight stands beside the birth date: its label keeps the top line with
	   "Date of birth", and its box drops by the caps row so it lands on the
	   same line as the day, month and year boxes. */
	.entry-form__birth + .entry-form__field > input {
		margin-top: var(--entry-date-caps);
	}
}

.entry-form__field {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	min-width: 0;
}

/* The field's own cap label only: the date cells are <label>s too, and the
   letter-spacing and the 0.8 opacity were reaching their boxes — three
   spaced-out, dimmed inputs next to a tight, bright one. */
.entry-form__field > label,
.entry-form__field-label,
.entry-form__choice legend {
	font-size: 1.1rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.8;
}

/* 16px in the boxes — under that, a phone zooms the whole page in the
   moment a field is tapped, and the buyer has to pinch their way back to
   the button. */
.entry-form__field input,
.entry-form__date input {
	appearance: none;
	-moz-appearance: textfield;
	width: 100%;
	min-height: 4.6rem;
	box-sizing: border-box;
	padding: 0.9rem 1.1rem;
	background: #000;
	border: 1px solid var(--main-color-40, rgba(220, 220, 220, 0.55));
	border-radius: 0;
	color: #fff;
	color-scheme: dark;
	font-family: inherit;
	font-size: 1.6rem;
	line-height: 1.2;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.entry-form__field input::placeholder,
.entry-form__date input::placeholder {
	color: var(--main-color);
	opacity: 0.35;
}

.entry-form__field input:focus,
.entry-form__date input:focus {
	outline: none;
	border-color: #fff;
	box-shadow: inset 0 0 0 1px #fff;
}

.entry-form__field:has(.entry-form__field-error) input {
	border-color: var(--warning-color);
}

/* Spinners on a birth year are three hundred clicks of nothing. */
.entry-form__field input::-webkit-outer-spin-button,
.entry-form__field input::-webkit-inner-spin-button,
.entry-form__date input::-webkit-outer-spin-button,
.entry-form__date input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.entry-form__date {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 0.6rem;
}

/* The height the DAY/MONTH/YEAR caps and their gap add above the three
   boxes — the one number the field beside them is offset by, so the two
   rows of boxes sit on the same line. */
.entry-form__fields {
	--entry-date-caps: calc(0.95rem * 1.2 + 0.4rem);
}

.entry-form__date-cell {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

/* Each box says what it wants above itself: the placeholder inside it
   disappears the moment somebody starts typing, which is exactly when they
   are deciding whether this box is the day or the month. */
.entry-form__date-label {
	font-size: 0.95rem;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.55;
}

.entry-form__field-error {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.4;
	color: var(--warning-color);
}

.entry-form__hint {
	margin: -0.4rem 0 0 0;
	font-size: 1.1rem;
	line-height: 1.45;
	opacity: 0.55;
}

/* Segmented switches: on a phone a 14px radio dot is a miss waiting to
   happen, and three answers read better as three buttons with one lit. The
   real radio stays underneath, full-size and invisible, so keyboards and
   screen readers get the native control. */
.entry-form__choice {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.entry-form__choice legend {
	padding: 0;
	margin-bottom: 0.5rem;
}

.entry-form__options {
	display: flex;
}

.entry-form__radio {
	position: relative;
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4.6rem;
	padding: 0 0.5rem;
	border: 1px solid var(--main-color-40, rgba(220, 220, 220, 0.55));
	font-size: 1.15rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	color: var(--bone);
	cursor: pointer;
	user-select: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}

.entry-form__radio + .entry-form__radio {
	margin-left: -1px;
}

.entry-form__radio input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.entry-form__radio:hover {
	border-color: var(--main-color);
	z-index: 1;
}

.entry-form__radio:has(input:checked) {
	background: #fff;
	border-color: #fff;
	color: #050505;
	z-index: 2;
}

.entry-form__radio:has(input:focus-visible) {
	outline: 2px solid #fff;
	outline-offset: 2px;
	z-index: 3;
}

.entry-form__discount-ok,
.entry-form__discount-bad {
	margin: -0.4rem 0 0 0;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.entry-form__discount-ok {
	color: #5fd08a;
}

.entry-form__discount-bad {
	color: var(--warning-color);
}

/* Euros lead. The token line stays, small, because it is what the receipt
   and the fine print will say. */
.entry-form__checkout {
	margin-top: auto;
	display: grid;
	gap: 1.2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--main-color-20, rgba(220, 220, 220, 0.3));
}

.entry-form__price {
	display: grid;
	gap: 0.5rem;
}

.entry-form__price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: 1.1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--main-color);
	opacity: 0.7;
}

.entry-form__price-row.is-total {
	opacity: 1;
	color: #fff;
}

.entry-form__total {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 3.4rem;
	line-height: 1;
	letter-spacing: -0.01em;
}

.entry-form__price-note {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.45;
	opacity: 0.55;
}

/* The same white block as the hero's "Play now": the largest white mass on
   the screen is the thing to press. */
.entry-form__submit {
	appearance: none;
	width: 100%;
	min-height: 5.4rem;
	padding: 1.2rem 1.4rem;
	border: 2px solid #fff;
	border-radius: 0;
	background: #fff;
	color: #050505;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.entry-form__submit:hover,
.entry-form__submit:focus-visible {
	background: #050505;
	color: #fff;
}

.entry-form__submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.entry-form__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.entry-form__fineprint {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
	opacity: 0.5;
}

/* --- the form at the card's height ---------------------------------------- *
 *
 * On a desktop the panel must end where the date stub ends: the poster and
 * the stub are the whole left column, and a form that runs a screen past
 * them reads as a page with a hole in it. Everything here is rhythm, not
 * type — boxes stay 16px so no tablet zooms on focus — and the two switch
 * rows share a line. Below 1024px the phone rhythm above applies.
 */

@media (min-width: 1180px) {
	.entry-form {
		gap: 1rem;
		padding: 1.4rem 1.6rem 1.2rem;
	}

	.entry-form__title {
		margin-bottom: 0.2rem;
	}

	.entry-form__logo {
		max-height: 3rem;
	}

	.entry-form__body {
		gap: 1rem;
	}

	.entry-form__fields {
		gap: 0.7rem 1.2rem;
	}

	.entry-form__field {
		gap: 0.3rem;
	}

	.entry-form__field label,
	.entry-form__field-label,
	.entry-form__choice legend {
		font-size: 1rem;
	}

	.entry-form__choice legend {
		margin-bottom: 0.3rem;
	}

	.entry-form__field input,
	.entry-form__date input {
		min-height: 3.8rem;
		padding: 0.5rem 0.9rem;
	}

	.entry-form__date {
		gap: 0.5rem;
	}

	.entry-form__date-cell {
		gap: 0.3rem;
	}

	.entry-form__date-label {
		font-size: 0.9rem;
	}

	.entry-form__hint {
		margin-top: -0.35rem;
		font-size: 1rem;
		line-height: 1.35;
	}

	/* Division and Gi/No-Gi side by side: five answers on one line. */
	.entry-form__fields > .entry-form__choice {
		grid-column: auto;
	}

	.entry-form__radio {
		min-height: 3.8rem;
		padding: 0 0.3rem;
		font-size: 1rem;
		letter-spacing: 0;
	}

	.entry-form__checkout {
		gap: 0.7rem;
		padding-top: 1rem;
	}

	.entry-form__price {
		gap: 0.2rem;
	}

	.entry-form__price-row {
		font-size: 1.05rem;
	}

	.entry-form__total {
		font-size: 2.6rem;
	}

	.entry-form__submit {
		min-height: 4.4rem;
		padding: 0.9rem 1.4rem;
		font-size: 1.5rem;
	}
}

/* Up to 1280 the poster is a little shorter and the panel a little
   narrower: the boxes lose 2px each so the columns still end together, and
   "Gi ou No-Gi" only fits its third of half a row at 9px. Above that the
   chips go back to 10px. */
@media (min-width: 1180px) and (max-width: 1279px) {
	.entry-form__field input,
	.entry-form__date input,
	.entry-form__radio {
		min-height: 3.6rem;
	}

	.entry-form__radio {
		font-size: 0.9rem;
	}
}

/* --- checkout return ----------------------------------------------------- */

.checkout-done {
	max-width: 60ch;
	margin: 0 auto;
	padding: 2.5rem 1.75rem;
	border: 1px solid var(--main-color);
	background: rgba(var(--bg-color), 0.98);
	font-family: var(--font-terminus), 'Courier New', monospace;
	color: var(--main-color);
	text-align: center;
}

.checkout-done__eyebrow {
	margin: 0 0 0.75rem 0;
	font-size: 1.1rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.55;
}

.checkout-done__title {
	margin: 0 0 0.4rem 0;
	font-size: clamp(2.6rem, 8vw, 3.6rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.checkout-done__event {
	margin: 0 0 1.5rem 0;
	font-size: 1.5rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}

.checkout-done__body {
	margin: 0 0 1.75rem 0;
	font-size: 1.35rem;
	line-height: 1.6;
	opacity: 0.85;
}

.checkout-done__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 1.5rem;
}

.checkout-done__cta {
	display: inline-block;
	border: 1px solid var(--main-color);
	background: var(--main-color);
	color: rgb(var(--bg-color));
	padding: 0.8rem 2rem;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.checkout-done__link,
.checkout-done__support a {
	color: var(--main-color);
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
}

.checkout-done__support {
	margin: 0;
	font-size: 1.15rem;
	opacity: 0.6;
}

/* The state pill also appears outside .event-card__meta (on the event page),
   where it would not inherit the uppercasing. */
.event-card__state {
	text-transform: uppercase;
}