/* Film Noir Theme — high-contrast monochrome with subtle accents */
:root {
	--noir-bg: #0e0e0f;            /* deep charcoal */
	--noir-bg-2: #151516;          /* panel contrast */
	--noir-surface: #1c1c1e;       /* card surface */
	--noir-border: #2a2a2c;        /* soft borders */
	--noir-text: #e6e6e6;          /* primary text */
	--noir-text-muted: #b3b3b3;    /* secondary text */
	--noir-shadow: rgba(0,0,0,0.9); /* compensate: much stronger shadow */
	--noir-accent: #9aa0a6;        /* subtle steel accent */
	--noir-accent-2: #7a7f85;      /* alt accent */
	--noir-danger: #b33939;        /* vintage red */
	--noir-success: #5f876d;       /* muted green */
	--noir-warning: #a6864e;       /* tobacco amber */

	/* Typography scale (fluid + rem-based) */
	--noir-font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
	--noir-font-serif: "Georgia", "Times New Roman", serif;
	--noir-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	/* Use clamp for fluid type across viewport widths */
	/* Bump overall scale ~12–15% for readability */
	--noir-fs-xxs: clamp(0.72rem, 0.68rem + 0.16vw, 0.80rem);
	--noir-fs-xs:  clamp(0.84rem, 0.78rem + 0.2vw, 0.92rem);
	--noir-fs-sm:  clamp(0.98rem, 0.92rem + 0.24vw, 1.08rem);
	--noir-fs-md:  clamp(1.12rem, 1.06rem + 0.28vw, 1.24rem);
	--noir-fs-lg:  clamp(1.4rem, 1.3rem + 0.4vw, 1.6rem);
	--noir-fs-xl:  clamp(1.7rem, 1.55rem + 0.6vw, 1.98rem);
	--noir-fs-xxl: clamp(2.3rem, 2.1rem + 1.2vw, 2.9rem);

	/* Spacing scale (rem-based) */
	--noir-space-2: 0.125rem;  /* 2px */
	--noir-space-4: 0.25rem;   /* 4px */
	--noir-space-8: 0.5rem;    /* 8px */
	--noir-space-12: 0.75rem;  /* 12px */
	--noir-space-16: 1rem;     /* 16px */
	--noir-space-24: 1.5rem;   /* 24px */
	--noir-space-32: 2rem;     /* 32px */
	--noir-space-48: 3rem;     /* 48px */
}

/* Global baseline */
html { font-size: 100%; }
body {
	background: var(--noir-bg);
	color: var(--noir-text);
	font-family: var(--noir-font-sans);
	line-height: 1.6;
	font-size: var(--noir-fs-md);
}

/* Fixed background layer for map */
.noir-bg-fixed {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: url("Assetts/OverheadMAp.jpeg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: grayscale(100%) contrast(105%) brightness(90%);
}

/* Vignette overlay above the background for readability */
.noir-bg-vignette {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Darker vignette to deepen overall background */
	background: radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.85) 100%);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--noir-text);
	font-family: var(--noir-font-serif);
	letter-spacing: 0.5px;
}

/* Links — understated, no bright hues */
a { color: var(--noir-accent); text-decoration: none; }
a:hover { color: var(--noir-text); text-decoration: underline; }

/* Cards and panels */
.noir-card {
	/* Darker background to compensate for transparency elsewhere */
	background: rgba(28,28,30,0.9);
	border: 1px solid var(--noir-border);
	box-shadow: 0 8px 20px var(--noir-shadow);
	border-radius: 6px;
}

.noir-panel {
	/* Darker panel background for better contrast */
	background: rgba(21,21,22,0.86);
	border: 1px solid var(--noir-border);
	box-shadow: 0 4px 14px var(--noir-shadow);
}

/* Dividers reminiscent of film frame lines */
.noir-divider {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--noir-border), transparent);
}

/* Utility: text tones */
.noir-text-muted { color: var(--noir-text-muted); }
.noir-text-strong { color: var(--noir-text); font-weight: 600; }
.noir-text-accent { color: var(--noir-accent); }
.noir-text-danger { color: var(--noir-danger); }
.noir-text-success { color: var(--noir-success); }
.noir-text-warning { color: var(--noir-warning); }

/* Utility: padding sizes */
.p-xxs { padding: var(--noir-space-4); }
.p-xs  { padding: var(--noir-space-8); }
.p-sm  { padding: var(--noir-space-12); }
.p-md  { padding: var(--noir-space-16); }
.p-lg  { padding: var(--noir-space-24); }
.p-xl  { padding: var(--noir-space-32); }
.p-xxl { padding: var(--noir-space-48); }

/* Utility: margin sizes */
.m-xxs { margin: var(--noir-space-4); }
.m-xs  { margin: var(--noir-space-8); }
.m-sm  { margin: var(--noir-space-12); }
.m-md  { margin: var(--noir-space-16); }
.m-lg  { margin: var(--noir-space-24); }
.m-xl  { margin: var(--noir-space-32); }
.m-xxl { margin: var(--noir-space-48); }

/* Standard container widths */
.container-narrow  { max-width: 720px;  margin: 0 auto; padding: 0 var(--noir-space-16); }
.container-default { max-width: 960px;  margin: 0 auto; padding: 0 var(--noir-space-16); }
.container-wide    { max-width: 1200px; margin: 0 auto; padding: 0 var(--noir-space-16); }
.container-full    { max-width: 100%;   margin: 0 auto; padding: 0 var(--noir-space-16); }

/* Layouts */

/* Single column article layout */
.layout-single {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--noir-space-24);
}

/* Two-column: content + sidebar */
.layout-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--noir-space-24);
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
	.layout-sidebar { grid-template-columns: 1fr; }
}

/* Magazine grid for galleries */
.layout-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--noir-space-16);
}

@media (max-width: 1200px) {
	.layout-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.layout-gallery { grid-template-columns: 1fr; }
}

/* Fixed-width classic column layout */
.layout-columns-3 {
	column-count: 3;
	column-gap: var(--noir-space-24);
}

@media (max-width: 1100px) { .layout-columns-3 { column-count: 2; } }
@media (max-width: 700px)  { .layout-columns-3 { column-count: 1; } }

/* Hero section with vignette */
.noir-hero {
	position: relative;
	background: radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.7) 100%), var(--noir-bg);
	color: var(--noir-text);
}

.noir-hero .title {
	font-family: var(--noir-font-serif);
	font-size: var(--noir-fs-xxl);
}

/* Buttons */
.btn {
	display: inline-block;
	border: 1px solid var(--noir-border);
	background: var(--noir-bg-2);
	color: var(--noir-text);
	padding: 0.625rem 1rem; /* 10px 16px */
	border-radius: 4px;
}
.btn:hover { background: var(--noir-surface); }
.btn-accent { border-color: var(--noir-accent); color: var(--noir-accent); }
.btn-danger { border-color: var(--noir-danger); color: var(--noir-danger); }
.btn-success { border-color: var(--noir-success); color: var(--noir-success); }
.btn-warning { border-color: var(--noir-warning); color: var(--noir-warning); }

/* Image treatments — film grain feel */
.noir-image {
	filter: grayscale(100%) contrast(105%) brightness(95%);
}

.noir-image.vignette {
	position: relative;
}
.noir-image.vignette::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 180px rgba(0,0,0,0.65);
	pointer-events: none;
}

/* Tables */
.noir-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--noir-surface);
}
.noir-table th, .noir-table td {
	border: 1px solid var(--noir-border);
	padding: 0.625rem 0.75rem; /* 10px 12px */
}
.noir-table thead th {
	background: var(--noir-bg-2);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Forms */
.noir-input, .noir-select, .noir-textarea {
	width: 100%;
	background: var(--noir-bg-2);
	color: var(--noir-text);
	border: 1px solid var(--noir-border);
	border-radius: 4px;
	padding: 0.625rem 0.75rem; /* 10px 12px */
}
.noir-input:focus, .noir-select:focus, .noir-textarea:focus {
	outline: none;
	border-color: var(--noir-accent);
	box-shadow: 0 0 0 3px rgba(154,160,166,0.15);
}

/* Shadows and frames to evoke classic cinema */
.frame-soft {
	box-shadow: 0 10px 24px var(--noir-shadow);
}
.frame-hard {
	box-shadow: 0 18px 36px rgba(0,0,0,0.8);
}

/* Typography utilities */
.fs-xxs { font-size: var(--noir-fs-xxs); }
.fs-xs  { font-size: var(--noir-fs-xs); }
.fs-sm  { font-size: var(--noir-fs-sm); }
.fs-md  { font-size: var(--noir-fs-md); }
.fs-lg  { font-size: var(--noir-fs-lg); }
.fs-xl  { font-size: var(--noir-fs-xl); }
.fs-xxl { font-size: var(--noir-fs-xxl); }

/* Horizontal slider baseline using CSS Scroll Snap */
.slider-root {
	height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	/*background: var(--noir-shadow);*/
	color: var(--noir-text);
	position: relative;
	z-index: 3; /* above background */
}
.noir-parallax {
	position: fixed;
	inset: 0;
	z-index: 4; /* ensure above slider content */
	pointer-events: none;
}
.splat {
	position: absolute;
	fill: #ffffff;
	opacity: 0.2; /* slightly stronger for visibility */
	filter: drop-shadow(0 2px 6px rgba(255,255,255,0.25));
	mix-blend-mode: screen; /* brighten over dark background */
	animation-name: splatFloat;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
.splat--slow { animation-duration: 18s; animation-delay: 0.8s; }
.splat--medium { animation-duration: 12s; animation-delay: 0.4s; }
.splat--fast { animation-duration: 8s; animation-delay: 0.2s; }

@keyframes splatFloat {
	0%   { transform: translate3d(0, -6px, 0); }
	50%  { transform: translate3d(0, 6px, 0); }
	100% { transform: translate3d(0, -6px, 0); }
}


.slider-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	display: flex;
	gap: 0;
	-webkit-overflow-scrolling: touch;
	/* Firefox scrollbar styling */
	scrollbar-width: thin;
	scrollbar-color: var(--noir-border) rgba(16,16,18,0.6);
}

/* WebKit-based browsers (Chrome, Edge, Safari) scrollbar styling */
.slider-viewport::-webkit-scrollbar {
	height: 10px; /* horizontal scrollbar height */
}
.slider-viewport::-webkit-scrollbar-track {
	background: rgba(16,16,18,0.6); /* dark track to match theme */
	border-radius: 10px;
}
.slider-viewport::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(42,42,44,0.9), rgba(28,28,30,0.9));
	border: 1px solid var(--noir-border);
	border-radius: 10px;
}
.slider-viewport::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, rgba(54,54,56,0.95), rgba(32,32,34,0.95));
}

.slide {
	scroll-snap-align: start;
	flex: 0 0 100vw;
	height: calc(100vh - 120px); /* header/footer approx */
	display: grid;
	place-items: center;
	padding: var(--noir-space-32);
}

.slide-inner {
	width: min(90%, 90%);
	/* Darker inner surface to improve legibility over the map */
	background: rgba(28,28,30,0.82);
	/* Subtle rounded corners for a refined look */
	border-radius: 10px;
	overflow: hidden;
}

/* Make the main sliding sections fully transparent */
.slide.bg-1 { background: transparent; }
.slide.bg-2 { background: transparent; }
.slide.bg-3 { background: transparent; }

/* Header and footer controls */
.slider-header, .slider-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--noir-space-16) var(--noir-space-24);
	border-bottom: 1px solid var(--noir-border);
}
.slider-footer { border-top: 1px solid var(--noir-border); border-bottom: none; }

.slider-nav { display: flex; gap: var(--noir-space-12); }
.slider-logo { 
	display: block; 
	width: 100px; 
	height: 100px; 
	/* Darker shadow, offset down-right for emphasis */
	filter: drop-shadow(6px 8px 18px rgba(0,0,0,0.78));
}

/* Floating, responsive logo (~18% of viewport width) */
.slider-logo--floating {
	position: fixed;
	z-index: 5; /* keep logo on top */
	top: 7vh; /* add ~5% more vertical margin */
	left: 7vw; /* add ~5% more horizontal margin */
	width: clamp(120px, 18vw, 420px);
	height: auto;
	opacity: 0.92;
	pointer-events: none; /* decorative */
	/* Stronger, offset down-right shadow for floating logo */
	filter: drop-shadow(8px 12px 26px rgba(0,0,0,0.8));
}
.slider-dot {
	width: 10px; height: 10px; border-radius: 999px;
	background: var(--noir-border);
}
.slider-dot.active { background: var(--noir-accent); }

/* Helper for centered serif titles */
.noir-title {
	font-family: var(--noir-font-serif);
	font-size: var(--noir-fs-xxl);
	letter-spacing: 0.5px;
	text-align: center;
}

/* TV frame overlay: TV image above screen content (video/images) */
.tv-frame {
	position: relative;
	display: block;
	max-width: 900px;
	margin: 0 auto;
}
.tv-overlay {
	position: relative;
	z-index: 3; /* sits above the screen content */
	pointer-events: none;
	display: block;
	width: 100%;
	height: auto;
}
.tv-screen {
	position: absolute;
	/* Placeholder alignment — adjust to match your TV graphic */
	top: 14%;
	left: 9%;
	width: 82%;
	height: 68%;
	z-index: 2; /* below the overlay */
	overflow: hidden;
	border-radius: 10px;
	box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}
.tv-screen video,
.tv-screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}