/* :root tokens — all nine from V1 Royal */
:root {
	--royal: #1f40c2;
	--royal-deep: #16308f;
	--royal-bright: #3f63ec;
	--ink: #14161f;
	--ink-soft: #39404f;
	--mut: #6c7384;
	--milk: rgba(248, 250, 255, 0.82);
	--milk-2: rgba(255, 255, 255, 0.9);
	--milk-line: rgba(22, 32, 80, 0.14);
	--milk-line-strong: rgba(22, 32, 80, 0.28);
	--page: #e8ecf5;
}

/* Global body base */
body {
	font-family: Archivo, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	background: var(--page);
}

/* Progress bar */
.progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--royal-bright);
	z-index: 1000;
}

/* Colophon */
.colophon {
	background: var(--royal-deep);
	color: rgba(255, 255, 255, 0.66);
}

.colophon .ci {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 24px clamp(20px, 4vw, 56px);
	font-size: 12px;
	letter-spacing: 0.04em;
	max-width: 1280px;
	margin: 0 auto;
}

.colophon a {
	color: rgba(255, 255, 255, 0.82);
}

/* Nav chrome */
nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 16px clamp(20px, 4vw, 56px);
}

nav .links {
	display: flex;
	gap: clamp(14px, 2.2vw, 34px);
	align-items: center;
}

nav .links a {
	font-family: Oswald, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: #fff;
	position: relative;
	padding: 4px 0;
	text-shadow: 0 2px 12px rgba(8, 14, 40, 0.6);
	text-decoration: none;
}

nav .links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--royal-bright);
	transition: width 0.3s;
}

nav .links a:hover::after,
nav .links a.active::after {
	width: 100%;
}

nav .links .ticket {
	background: var(--royal);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	padding: 9px 18px;
	letter-spacing: 0.16em;
	text-shadow: none;
	box-shadow: 0 10px 24px -10px rgba(31, 64, 194, 0.9);
	transition: background 0.2s;
}

nav .links .ticket:hover {
	background: var(--royal-bright);
}

nav .links .ticket::after {
	display: none;
}

@media (max-width: 760px) {

	nav .links a:not(.ticket) {
		display: none;
	}
}

/* Legal page readable measure (Surface B) */
.page:not(.home) .entry-content {
	max-width: 680px;
	margin: 0 auto;
	padding: 48px clamp(20px, 4vw, 56px);
}

/* === 404 Error page — branded royal full-bleed section === */
body.error404 .error404-hero {
	background: linear-gradient(160deg, var(--royal), var(--royal-deep));
	color: #fff;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: clamp(96px, 12vh, 140px);
}

body.error404 .error404-hero-inner {
	max-width: 640px;
	padding: 0 clamp(20px, 4vw, 56px);
}

body.error404 .error404-hero-code {
	font-family: "Bebas Neue", sans-serif;
	font-size: clamp(120px, 24vw, 280px);
	line-height: 0.9;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

body.error404 .error404-hero-headline {
	font-family: "Bebas Neue", sans-serif;
	color: #fff;
	font-size: clamp(28px, 5vw, 48px);
	margin: 0.5em 0 0.25em;
	letter-spacing: 0.04em;
}

body.error404 .error404-hero-sub {
	font-family: Archivo, sans-serif;
	color: rgba(255, 255, 255, 0.78);
	max-width: 30em;
	margin: 0 auto 2em;
}

body.error404 .error404-hero-btn {
	display: inline-block;
	background: #fff;
	color: var(--royal);
	font-family: Oswald, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 13px;
	padding: 13px 26px;
	border-radius: 40px;
	text-decoration: none;
}

body.error404 .error404-hero-btn:hover {
	background: var(--royal-bright);
	color: #fff;
}

/* === Page title strip — royal header band for non-home pages (Surface B) ===
 * margin-top (not padding-top) pushes the royal band BELOW the fixed nav so
 * the nav floats over the light --page background — that is what keeps the
 * dark nav links (below) legible. A royal band behind the nav would tank contrast.
 */
.page-hero {
	background: var(--royal);
	width: 100%;
	padding: clamp(20px, 4vh, 32px) clamp(20px, 4vw, 56px);
	margin-top: clamp(56px, 8vh, 72px);
}

.page-hero-title {
	font-family: "Bebas Neue", sans-serif;
	color: #fff;
	font-size: clamp(32px, 6vw, 56px);
	letter-spacing: 0.04em;
	margin: 0 auto;
	max-width: 680px;
}

/* === Legal typography — descendants of the existing 680px entry-content measure ===
 * Extend, never re-declare, the .page:not(.home) .entry-content base rule above.
 */

.page:not(.home) .entry-content h2 {
	font-family: "Bebas Neue", sans-serif;
	color: var(--royal);
	font-size: clamp(24px, 3vw, 32px);
	margin-top: 1.6em;
	margin-bottom: 0.4em;
}

.page:not(.home) .entry-content h3 {
	font-family: Oswald, sans-serif;
	font-size: clamp(16px, 2vw, 20px);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--royal-deep);
	margin-top: 1.4em;
	margin-bottom: 0.3em;
}

.page:not(.home) .entry-content a {
	color: var(--royal);
	text-underline-offset: 3px;
}

.page:not(.home) .entry-content a:hover {
	color: var(--royal-bright);
}

.page:not(.home) .entry-content ul,
.page:not(.home) .entry-content ol {
	padding-left: 1.6em;
	color: var(--ink-soft);
}

.page:not(.home) .entry-content li {
	margin-bottom: 0.4em;
	color: var(--ink-soft);
}

.page:not(.home) .entry-content p {
	color: var(--ink-soft);
	line-height: 1.7;
}

/* === Nav contrast on legal pages only ===
 * The global nav links are white with a text-shadow (built for the dark hero).
 * On the light --page legal pages they are invisible. This override targets
 * exactly body.page:not(.home): the front page carries .home (excluded) and
 * the 404 carries .error404, not .page (excluded — correctly keeps white nav
 * over its royal background). The .ticket is exempted via :not(.ticket) so
 * it stays royal with white text.
 */
body.page:not(.home) nav .links a:not(.ticket) {
	color: var(--ink);
	text-shadow: none;
}