:root{
	--bg:#0b1220;
	--bg-2:#191d24;
	--fg:#e6eef8;
	--muted:#9fb0c8;
	--accent:#6ee7b7;
	--card:#0f1728; /* Using this for the content background */
	--link-color:#6b9fff; /* New subtle blue color for links */
}
*{box-sizing:border-box}
html,body{
	height:100%;
	background: linear-gradient(141deg, var(--bg) 51%, var(--bg-2) 75%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}
body{
	margin:0;
	font-family:Inter, Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
	color:var(--fg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}
/* Accessibility helpers */
.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}
.visually-hidden{display:none}

/* Reset and sensible defaults for lists and sections */
ul,ol{margin:0 0 1rem 0;padding-left:1.15rem}
li{margin:0.25rem 0}
section,header,footer,main,nav{display:block}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.brand{color:var(--fg);text-decoration:none;font-weight:700;font-size:1.05rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:0.5rem}
.nav a{color:var(--muted);text-decoration:none;padding:0.45rem 0.6rem;border-radius:6px}
.nav a:hover{color:var(--fg);background:rgba(255,255,255,0.02)}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--fg);padding:0.35rem 0.6rem;border-radius:6px}
.site-header{
	border-bottom: 1px solid rgba(255,255,255,0.03);
	padding: 0.6rem 0;
	position: relative;
	background: var(--bg);
	z-index: 100;
}
.hero{padding:2.5rem 0}
.hero h1{margin:0 0 0.25rem 0;font-size:clamp(1.6rem,3.8vw,2.6rem)}
.lead{color:var(--muted);margin:0 0 1.25rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.card{display:block;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:10px;color:var(--fg);text-decoration:none;border:1px solid rgba(255,255,255,0.02);transition:transform .15s ease,box-shadow .15s ease}
.card strong{display:block;font-size:1rem}
.card span{display:block;color:var(--muted);font-size:0.9rem;margin-top:0.45rem}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 20px rgba(2,6,23,0.6)}
.main-content{padding-bottom:3rem}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:1rem 0;margin-top:2rem;color:var(--muted)}

/* footer contact links */
.site-footer .footer-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.site-footer .footer-links li{margin:0}
.site-footer .footer-links a{color:var(--muted);text-decoration:none;border-bottom:1px dashed transparent;padding-bottom:2px}
.site-footer .footer-links a:hover{color:var(--fg);border-bottom-color:rgba(255,255,255,0.06)}
.site-footer small{display:block;margin-top:0.6rem;color:var(--muted)}

/* --- MODIFIED Page content styling --- */
.content{
	background: var(--card); /* Set background to match cards */
	padding: 1.5rem; /* Increased padding */
	border-radius: 10px;
	width: 85%; /* Set width */
	margin: 0 auto; /* Center the block */
	border: 1px solid rgba(255,255,255,0.02);
	position: relative;
	z-index: 1;
}
.section-title{margin:0 0 0.5rem 0}

/* responsive nav */
@media (max-width:800px){
	.nav{display:none}
	.nav.open{
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%; /* Position it right below the header */
		background: var(--bg);
		padding: 0.75rem;
		border-bottom: 1px solid rgba(255,255,255,0.08);
		box-shadow: 0 4px 12px rgba(0,0,0,0.2);
		z-index: 1000; /* Ensure it appears above other content */
	}
	.nav.open ul{
		flex-direction: column;
		gap: 0.5rem;
	}
	.nav.open ul li {
		margin: 0;
	}
	.nav.open ul li a {
		display: block;
		padding: 0.75rem 1rem;
		border-radius: 6px;
		transition: all 0.2s ease;
	}
	.nav.open ul li a:hover {
		background: rgba(255,255,255,0.05);
		transform: translateX(4px);
	}
	.nav-toggle{
		display: inline-block;
		cursor: pointer;
		transition: opacity 0.2s ease;
	}
	.nav-toggle:hover {
		opacity: 0.8;
	}

	/* Make content full-width on mobile */
	.content {
		width: 100%;
		padding: 1rem;
	}
}

/* --- Responsive iframe container --- */
.embed-wrap {
    width: 100%;
    max-width: 100%;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
    margin: 1rem 0;
}
.embed-inner {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    width: 100%;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
}
.embed-inner iframe,
.embed-inner object {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Link styling */
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 1px solid transparent;
}

a:hover {
    color: var(--fg);
    border-bottom-color: var(--link-color);
}

/* Lists styling improvement */
.main-content ul {
    margin-bottom: 1.5rem;
}

.main-content ul li {
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* Section spacing improvement */
.main-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.main-content p {
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

/* --- NEW: Slide Navigation List Styles --- */
.slide-nav {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.slide-nav li {
	margin: 0;
}
.slide-nav a {
	display: block;
	padding: 0.5rem 0.8rem;
	background: var(--bg-2);
	color: var(--muted);
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.04);
	transition: background 0.15s ease, color 0.15s ease;
	cursor: pointer;
}
.slide-nav a:hover {
	background: var(--bg);
	color: var(--fg);
}
.slide-nav a.active {
	background: var(--accent);
	color: var(--bg);
	font-weight: 600;
	border-color: var(--accent);
}

/* Form styling (no longer used on slides, but kept for rulebook if added later) */
.drive-form{display:flex;gap:0.5rem;margin-bottom:0.75rem; width: 100%;}
.drive-form input{flex:1;padding:0.55rem;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--fg)}
.drive-form button{padding:0.55rem 0.8rem;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:var(--accent);color:#022;cursor:pointer}

.muted{color:var(--muted)}

/* Code / pre formatting */
pre{background:rgba(255,255,255,0.02);padding:0.75rem;border-radius:6px;overflow:auto;border:1px solid rgba(255,255,255,0.02);font-size:0.95rem}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;color:var(--fg)}

/* Recordings page styles */
.recordings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

.recording-card {
    background: var(--bg-2);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.recording-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: var(--bg);
    overflow: hidden;
}

.thumbnail-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.play-overlay i {
    font-size: 3rem;
    color: white;
    opacity: 0.9;
}

.thumbnail-link:hover .thumbnail {
    transform: scale(1.05);
}

.thumbnail-link:hover .play-overlay {
    opacity: 1;
}

.recording-info {
    padding: 1.2rem;
}

.recording-info h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--fg);
}

.recording-description {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0;
}

@media (max-width: 640px) {
    .recordings-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .recording-card {
        max-width: 500px;
        margin: 0 auto;
    }
}

/* footer icons and link alignment */
.site-footer .footer-links li i{margin-left:0.45rem;color:var(--accent);font-size:1.05rem}
.site-footer .footer-links a{display:inline-flex;align-items:center;gap:0.35rem}

/* small screen tweaks */
@media (max-width:520px){
	.container{padding:0.75rem}
	.grid{gap:0.6rem}
	.card{padding:0.8rem}
	.content { padding: 1rem; } /* Adjust padding for small screens */
	.slide-nav a { padding: 0.4rem 0.7rem; font-size: 0.9rem; }
}