/* :root {
	color-scheme: dark light;
} */

html {
	background-color: #222;
	scroll-behavior: smooth;
	/* font-size: 1px; */
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Marvel", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial,
		"Apple Color Emoji", "Segoe UI Emoji";
	font-weight: 500;
	line-height: 1.5;
	color: rgb(235, 227, 208);
	font-size: 20px;
	letter-spacing: 1px;
}

h1, h2, h3, h4 {
	font-family: "Oxanium", sans-serif;
	font-optical-sizing: auto;
	color: #FFF;
	font-size: 60px; line-height: 1;
	text-transform: uppercase;
	
	margin: 0;
	text-shadow: 0 3px 18px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,1);
}

h1 { text-align: center; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }

p {

}
.pink {
	color: rgb(255, 127, 163);
}
p.subtitle {
	text-align: center; margin: 0;
}

hr {
	display: block;
	width: 100%; height: 1px;
	padding: 0; margin: 100px 0;
	border: none; background: rgba(0,0,0,0.25);
}

hr.accent {
	margin: 20px auto;
	width: 80%;
	
	background: linear-gradient( to right, rgba(155, 0, 255, 0) 0%, rgba(255, 127, 163, 1.0) 50%, rgba(155, 0, 255, 0) 100% );
}

blockquote {
	font-family: "Oxanium", sans-serif;
	font-size: 30px; font-weight: 600; color: rgb(255, 249, 236);
	margin: 20px 50px;
}

.text-shadow {
	text-shadow: 0 3px 18px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,1);
}

  
body::before {
	content: "";
	display: block;
	pointer-events: none;
	user-select: none;           
	-webkit-user-select: none;
	-ms-user-select: none;
	touch-action: none;          
	-webkit-touch-callout: none; 
	cursor: default;
	position: fixed;
	inset: 0;
	z-index: 9999;
	opacity: 0.15;
	mix-blend-mode: overlay;
	/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='5' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' fill='white'/></svg>"); */
	background-image: url("/img/noise.png");

	
}

@keyframes bg-image-pan-up {
	from {
		background-position: center bottom;
	}
	to {
		background-position: center top;
	}
}


.bg-pattern {
	position: fixed;
	inset: 0;
	z-index: 0;
	opacity: 0.2;
	pointer-events: none;
	user-select: none;           
	-webkit-user-select: none;
	-ms-user-select: none;
	touch-action: none;          
	-webkit-touch-callout: none; 

	background-image: url("/img/gradient.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	mix-blend-mode: lighten;
	animation: bg-pattern-breathe 7s ease-in-out infinite;
	will-change: opacity, background-size;
}

@keyframes bg-pattern-breathe {
	0%,
	100% {
		opacity: 0.18;
		background-size: 180% 135%;
	}
	50% {
		opacity: 0.24;
		background-size: 200% 160%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.bg-pattern {
		animation: none;
	}
}


.glass-panel {
	/* 1. Semi-transparent background */
	background: rgba(255, 255, 255, 0.05); 
	padding: 50px; margin: 50px auto;
	/* 2. The blur effect (frosted look) */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px); /* Safari support */
	
	/* 3. Optional: border for definition */
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 15px;
	
	/* 4. Optional: shadow for depth */
	box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
}

.glass-panel.dark {
	background: rgba(20, 15, 26, 0.45); 
}

.container {
	width: 100%;
	margin-inline: auto;
}

.siteHeader,
.siteFooter {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.25 );
}

.siteFooter {
	border-top: 1px solid rgba( 0, 0, 0, 0.25 );
	border-bottom: none;
	margin-top: 100px;
	padding: 1.5rem 0;
}
.text-center {
	text-align: center;
}
.siteHeader {
	position: fixed; top: 0; left: 0; right: 0;
	height: 120px; z-index: 9998;
	/* 1. Semi-transparent background */
	background: rgba(255, 255, 255, 0.05); 
	/* 2. The blur effect (frosted look) */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px); /* Safari support */
	
		
	/* 4. Optional: shadow for depth */
	box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
}
.siteHeader .container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80%; max-width: 600px; margin: 0 auto;
}

.brand {
	text-decoration: none;
	color: inherit;
	font-weight: 700;
	letter-spacing: 0.02em;
	height: 120px;
	overflow: hidden;
}

.brand img {
	margin-top: -72px;
	
}

.nav a {
	text-decoration: none;
	color: inherit;
	opacity: 0.85;
}
.nav a[aria-current="page"] {
	opacity: 1;
}

.hero {
	position: relative;
	padding: 50px 0;
	text-align: center;
	width: 100% !important; max-width: 100%; height: 100vh;
	display: flex; flex-direction: column;align-items: center; justify-content: center;
}


.hero-bg-video-wrapper {
	position: absolute; inset: 0; overflow: hidden; z-index: -1;
}

.hero-bg-video {
	width: 100%; height: 100%; z-index: -1;
	object-fit: cover; position: absolute; inset: 0; pointer-events: none;
	opacity: 1;
	
}

.kicker {
	margin:50px 0;
	opacity: 0.75;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

.lede {
	opacity: 0.8;
	max-width: 65ch;
}

.actions {
	display: flex; align-items: center; justify-content: center; gap: 20px;
	margin: 30px;
}

.btn,
.btnSecondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 30px;
	border-radius: 5px;
	text-decoration: none;
	color: inherit; color: #FFF;
	border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
	border-color: rgba(255, 127, 163, 0.5);
}
.btn:hover,
.btnSecondary:hover {
	border-color: rgba(255, 127, 163, 1);
}
.btn {
	background: rgba(255, 127, 163, 0.1);
}
.btnSecondary {
	opacity: 0.9;
}

.pageHeader {
	padding: 2rem 0 1rem;
}

.panel {
	margin: 100px auto;
	max-width: 75%;
	border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
	border-radius: 5px;
	padding: 50px;
	background: rgba(0,0,0,0.2);
}

.controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.controls3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
	.controls,
	.controls3 {
		grid-template-columns: 1fr;
	}
}

.control label {
	display: block;
	font-size: 0.85rem;
	opacity: 0.8;
	margin-bottom: 0.35rem;
}
.control input,
.control select {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border-radius: 0.75rem;
	border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
	background: transparent;
	color: inherit;
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.card {
	grid-column: span 12;
	border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
	border-radius: 1rem;
	overflow: hidden;
	background: color-mix(in oklab, currentColor 2%, transparent);
}

.narrow {
	width: 50%; margin: 0 auto;
}

@media (min-width: 720px) {
	.card {
		grid-column: span 6;
	}
}
@media (min-width: 1024px) {
	.card {
		grid-column: span 4;
	}
}

.thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: color-mix(in oklab, currentColor 6%, transparent);
}
.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cardBody {
	padding: 0.9rem 0.9rem 1rem;
}

.cardTitle {
	margin: 0;
	font-size: 1rem;
}

.cardTitle a {
	color: inherit;
	text-decoration: none;
}

.meta {
	margin-top: 0.35rem;
}

.muted {
	opacity: 0.75;
}

.mutedLink {
	opacity: 0.75;
	color: inherit;
	text-decoration: none;
}
.mutedLink:hover {
	opacity: 1;
}

.pillRow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.65rem;
}

.pill {
	display: inline-flex;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	font-size: 0.8rem;
	text-decoration: none;
	color: inherit;
	border: 1px solid color-mix(in oklab, currentColor 14%, transparent);
	opacity: 0.9;
}

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

.linkGrid {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 0;
	display: grid;
	gap: 0.5rem;
}



section {
	width: 80%; max-width: 600px; margin: 0 auto;
}