/* Shared presentation. Custom hero rendering and timing remain in sa-hero.css. */
:root {
	--sa-bg:#050c16;
	--sa-surface:#0b1724;
	--sa-text:#e5f1f8;
	--sa-muted:#a5bbca;
	--sa-accent:#8dd8ee;
	--sa-border:rgba(139,191,216,.22);
	--sa-border-active:#79c8e0;
	--sa-radius:5px;
	--sa-shadow:0 16px 40px rgba(0,0,0,.2);
}

.sa-skip-link {
	position:fixed;
	top:12px;
	left:16px;
	z-index:11000;
	padding:10px 16px;
	transform:translateY(-180%);
	background:var(--sa-surface);
	color:var(--sa-text);
	border:1px solid var(--sa-accent);
}

.sa-skip-link:focus {
	transform:none;
}

/* Header and HUD: preserve the mechanical silhouette, improve contrast and touch targets. */
.sa-site-brand {
	position:absolute;
	top:28px;
	left:max(24px,calc((100vw - 1200px)/2));
	display:inline-flex;
	align-items:center;
	gap:12px;
	min-height:48px;
	color:var(--sa-text)!important;
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.14em;
	text-decoration:none;
}

.sa-site-brand img {
	width:42px;
	height:42px;
	object-fit:contain;
}

#header > a.sa-site-brand {
	display:inline-flex;
	margin:0;
	padding:0;
	line-height:1.4;
}

#header {
	pointer-events:none!important;
}

#header > a {
	pointer-events:auto;
}

#header > a[href="#menu"] {
	text-shadow:none;
	box-shadow:none!important;
}

.hud-menu-border, #header > a[href="#menu"]:hover .hud-menu-border {
	filter:none;
}

.hud-menu-border path {
	stroke:#73b4ca;
	stroke-width:1;
}

#menu {
	top:88px!important;
	right:32px!important;
	width:208px!important;
	height:auto!important;
	max-height:calc(100svh - 104px);
	padding:0;
	overflow-y:auto!important;
	transition:opacity .18s;
}

#menu::before {
	background:#416478;
	filter:none;
}

#menu::after {
	background:#091522;
}

#menu .hud-menu-list {
	position:relative!important;
	top:0!important;
	padding:12px 10px 22px!important;
}

#menu .hud-menu-list a {
	padding:12px 16px!important;
	min-height:44px!important;
	text-align:left!important;
	font-size:.83rem;
	text-shadow:none;
	border-radius:2px;
}

#menu .hud-menu-list a:hover, #menu .hud-menu-list a:focus-visible, #menu .hud-menu-list a[aria-current="page"] {
	color:#e9faff!important;
	background:#173144!important;
	text-shadow:none;
}

body.hud-menu-ready #menu:not(.is-open) {
	visibility:hidden!important;
}

body:not(.hud-menu-ready) #menu {
	opacity:1;
	pointer-events:auto;
}

body:not(.hud-menu-ready) #menu .hud-menu-list li {
	opacity:1;
	transform:none!important;
}

a:focus-visible, button:focus-visible, input:focus-visible {
	outline:2px solid var(--sa-accent);
	outline-offset:4px;
}

#header > a[href="#menu"]:focus-visible {
	filter:brightness(1.5);
}

/* Content surfaces. Hero destinations have their own styles. */
.vs-cta, .trailer-panel, .staff-card {
	border:1px solid var(--sa-border);
	border-radius:var(--sa-radius);
	background:linear-gradient(145deg,#102031,#0a1522);
	box-shadow:inset 0 1px rgba(214,239,255,.035);
	color:var(--sa-text);
}

.vs-cta {
	margin:0;
	transition:background .18s,border-color .18s;
}

.vs-cta::before, .trailer-panel::before, .staff-card::before {
	content:none;
}

.vs-cta:hover, .staff-card:hover {
	transform:none;
	border-color:var(--sa-border);
	box-shadow:inset 0 1px rgba(214,239,255,.035);
}

a.vs-cta[href]:hover, a.vs-cta[href]:focus-visible {
	background:linear-gradient(145deg,#173247,#0e2030);
	border-color:var(--sa-border-active);
	box-shadow:none;
}

.vs-cta strong {
	color:var(--sa-text)!important;
	font-size:1rem;
	letter-spacing:.09em;
	line-height:1.5;
}

.vs-cta em {
	color:var(--sa-muted);
	font-size:.85rem;
	line-height:1.65;
}

.sa-eyebrow {
	display:block;
	margin:0 0 12px;
	color:var(--sa-accent);
	font-size:.68rem;
	font-weight:500;
	letter-spacing:.18em;
	text-transform:uppercase;
}

.sa-text-link {
	color:var(--sa-accent);
	text-underline-offset:4px;
}

/* Lower homepage: retain the hero transition, then settle into quieter panels. */
#one > .inner, #two > .inner, #three > .inner {
	width:min(1200px,calc(100% - 64px));
}

#one.wrapper, #three.wrapper {
	padding:clamp(52px,6vw,88px) 0;
	background-color:var(--sa-bg);
}

#one::before, #three::before {
	content:none;
}

#one .grid-style {
	display:grid;
	grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
	gap:32px;
	margin:0;
	align-items:stretch;
}

#one .grid-style > * {
	width:100%;
	min-width:0;
	padding:0;
}

#one .vs-cta-list {
	display:grid;
	gap:10px;
}

#one .vs-cta {
	width:100%;
	min-height:76px;
	padding:16px 48px 16px 22px;
}

#one .vs-cta strong, #one .vs-cta em {
	text-align:left;
}

#one a.vs-cta::after {
	content:"\2197";
	right:20px;
	color:var(--sa-accent);
	font-size:1.1rem;
}

#one .trailer-panel {
	height:auto;
	padding:clamp(22px,3vw,34px);
	text-align:right;
}

#one .trailer-panel h2 {
	margin:0 0 24px;
	font-size:1.5rem;
	color:var(--sa-text)!important;
	text-align:right;
	transform:none;
}

#one .trailer-panel .sa-eyebrow {
	margin-bottom:8px;
}

#one .trailer-panel iframe {
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	transform:none;
	border:1px solid var(--sa-border);
	border-radius:3px;
	background:#030912;
	box-shadow:none;
}

.sa-trailer-fallback {
	margin:18px 0 0;
	font-size:.8rem;
}

.sa-trailer-fallback a {
	color:var(--sa-accent)!important;
	text-underline-offset:4px;
}

#two.wrapper {
	padding:32px 0;
	border-block:1px solid var(--sa-border);
	background-attachment:scroll;
}

#two .youtube-banner {
	width:100%!important;
	max-width:none;
	min-height:100px;
	padding:26px 32px;
}

#three .section-heading {
	margin:0 0 32px;
	text-align:center;
}

#three .section-heading h2 {
	margin:0 0 8px;
	color:var(--sa-text);
	font-size:1.6rem;
	letter-spacing:.04em;
}

#three .section-heading p {
	margin:0;
	color:var(--sa-muted);
	font-size:.9rem;
}

#three .gallery {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:16px;
	margin:0;
}

#three .gallery > * {
	width:100%;
	min-width:0;
	padding:0;
}

.staff-card {
	min-height:116px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:24px 16px;
}

.staff-card strong {
	color:var(--sa-text)!important;
	font-size:1.05rem;
	letter-spacing:.07em;
}

.staff-card .role {
	animation:none;
	text-shadow:none;
	font-size:.78rem;
}

/* Interior pages share a masthead and footer, with distinct content grids. */
body.sa-inner-page {
	background:radial-gradient(ellipse at 50% 0,rgba(43,108,146,.12),transparent 600px),var(--sa-bg);
	color:var(--sa-text);
}

.sa-inner-page #header {
	position:absolute;
	top:0;
	height:104px;
	overflow:visible;
}

#download-page, #donate-page {
	width:min(1200px,calc(100% - 64px));
	margin:0 auto;
	padding:154px 0 80px;
}

.download-header, .donate-header {
	width:100%;
	margin:0 auto 44px;
	padding:0;
	text-align:center;
}

.download-header h1, .donate-header h1 {
	margin:0;
	color:var(--sa-text);
	font-size:clamp(1.8rem,3.3vw,2.6rem);
	font-weight:400;
	line-height:1.3;
	letter-spacing:.04em;
	text-transform:none;
	text-shadow:none;
	overflow-wrap:break-word;
}

.download-subtitle, .donate-contact {
	color:var(--sa-muted);
	font-size:.95rem;
	line-height:1.8;
	text-shadow:none;
	animation:none;
}

.sa-page-note {
	color:var(--sa-muted);
	font-size:.8rem;
	line-height:1.75;
}

.sa-inner-page h2, .sa-inner-page .vs-cta h2 {
	color:var(--sa-text);
	text-shadow:none;
}

#footer {
	padding:32px max(24px,calc((100% - 1200px)/2));
	background:#040a12;
	border-top:1px solid var(--sa-border);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	text-align:left;
}

#footer .copyright {
	margin:0;
	color:var(--sa-muted);
	font-size:.75rem;
	text-align:left;
}

.sa-footer-links {
	display:flex;
	flex-wrap:wrap;
	gap:8px 24px;
}

#footer a {
	display:inline-flex;
	align-items:center;
	min-height:44px;
	color:var(--sa-muted);
	font-size:.75rem;
	text-decoration:none;
}

#footer a:hover {
	color:var(--sa-accent);
}

/* Direct-file navigation messages; no effect on served account endpoints. */
.sa-preview-dialog {
	width:min(420px,calc(100% - 32px));
	padding:28px;
	border:1px solid var(--sa-border-active);
	background:var(--sa-surface);
	color:var(--sa-text);
}

.sa-preview-dialog::backdrop {
	background:rgba(0,4,12,.7);
}

.sa-preview-dialog h2 {
	color:var(--sa-text);
	font-size:1.3rem;
}

.sa-preview-dialog p {
	margin-bottom:20px;
	line-height:1.65;
}

.sa-preview-dialog button {
	color:var(--sa-text)!important;
	border:1px solid var(--sa-border-active);
	background:#12354b;
}

@media (max-width:980px) {
	#one .grid-style {
		grid-template-columns:minmax(0,1fr);
		gap:24px;
	}

	#three .gallery {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

}

@media (max-width:600px) {
	#one > .inner, #two > .inner, #three > .inner, #download-page, #donate-page {
		width:calc(100% - 32px);
	}

	#download-page, #donate-page {
		padding-top:124px;
		padding-bottom:48px;
	}

	.sa-site-brand {
		top:20px;
		left:16px;
		gap:8px;
		font-size:.63rem;
		letter-spacing:.08em;
	}

	.sa-site-brand img {
		width:32px;
		height:32px;
	}

	#header > a[href="#menu"] {
		top:22px!important;
		right:16px!important;
		width:100px;
		height:44px;
		gap:8px;
		font-size:.78rem;
	}

	#menu {
		top:74px!important;
		right:16px!important;
		max-height:calc(100svh - 90px);
	}

	#one .vs-cta {
		padding-left:18px;
	}

	#two .youtube-banner {
		padding:24px 20px;
	}

	#two .vs-cta strong {
		font-size:.95rem;
		letter-spacing:.04em;
	}

	#three .gallery {
		gap:12px;
	}

	.staff-card strong {
		font-size:.88rem;
		letter-spacing:.02em;
	}

	#footer {
		flex-direction:column;
		align-items:flex-start;
		padding:24px 20px;
		gap:8px;
	}

}

@media (prefers-reduced-motion:reduce) {
	html {
		scroll-behavior:auto;
	}

	.vs-cta, .trailer-panel, .staff-card, .download-subtitle, .donate-contact, #header, #header > a[href="#menu"], #menu, #menu .hud-menu-list li {
		animation:none!important;
		transition:none!important;
	}

}