:root{
	--text-color:#ffffff;
	--muted: rgba(255,255,255,0.85);
	--nav-gap: 1.25rem;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:var(--text-color);
	background-image: url('../background.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

.top-notice{
	background: rgba(0,0,0,0.55);
	color:var(--muted);
	text-align:center;
	padding:0.6rem 1rem;
	font-weight:600;
	font-size:0.95rem;
}

.site-header{
	/* use the same image so the header matches the page background */
	background-image: url('../background.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
	background-repeat:no-repeat;
	background-color: #252525;
	background-blend-mode: overlay;
	padding:0.75rem 1rem;
}

.main-nav{
	display:flex;
	gap:var(--nav-gap);
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}

.main-nav a{
	color:var(--text-color);
	text-decoration:none;
	padding:0.5rem 0.75rem;
	border-radius:6px;
	transition:background 160ms ease, transform 120ms ease;
}
.main-nav a:hover{background:rgba(255,255,255,0.08);transform:translateY(-2px)}

.coming-soon{
	color:var(--muted);
	padding:0.5rem 0.75rem;
	font-style:italic;
	opacity:0.95;
}

.content{
	flex:1;
	display:flex;
	align-items:stretch;
	justify-content:center;
	padding:0;
	background-color:#000;
	background-image: url('../background.jpg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.hero{
	width:100%;
	flex:1 1 auto;
	background-image: url('background.jpg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(37, 37, 37);
	padding:0;
	position:relative;
}

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

.site-footer{
	background-image: url('../background.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: bottom center;
	background-repeat:no-repeat;
	background-color: rgba(0,0,0,0.35);
	background-blend-mode: overlay;
	padding:1rem;
	border-top:1px solid rgba(255,255,255,0.06);
}
.footer-nav{
	display:flex;
	gap:1rem;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	margin-bottom:0.5rem;
}
.footer-nav a{color:var(--text-color);text-decoration:none;padding:0.25rem 0.5rem}
.footer-nav a:hover{text-decoration:underline}

.muted{opacity:0.9;font-weight:500}

@media (max-width:900px){
	.main-nav{gap:0.9rem}
	.top-notice{font-size:0.95rem;padding:0.5rem 0.75rem}
	.site-header{padding:0.6rem 0.75rem}
	.site-footer{padding:0.75rem}
	.hero{min-height:48vh}
}

@media (max-width:600px){
    /* Stack nav items for easier tapping on small screens */
    .main-nav{flex-direction:column;align-items:stretch;gap:0}
    .main-nav a,
    .main-nav .coming-soon{display:block;max-width:420px;margin:0.25rem auto;text-align:center;border-radius:6px;padding:0.9rem 0}

    /* Footer links stacked and centered */
    .footer-nav{flex-direction:column;gap:0}
    .footer-nav a{display:block;max-width:420px;margin:0.25rem auto;text-align:center;padding:0.75rem 0;border-radius:6px}

    /* Reduce hero height so background 'contain' doesn't leave large gap */
    .hero{min-height:45vh;background-position:center top}

    /* Reduce chrome padding */
    .content{padding:0}
    .top-notice{font-size:0.9rem;padding:0.45rem}

    /* Improve tap target and readable sizes */
    body{font-size:16px}
}