/* ============================================================
   MONO THEME — black & white foundation, sparing accent.
   Clean · lightweight · subtle sheen. Override after main.css.
   ============================================================ */

:root {
	--black:    #0a0a0b;   /* page base — near-black */
	--panel:    #121214;   /* raised panels */
	--panel-2:  #18181b;   /* alt / inputs */
	--line:     rgba(255,255,255,0.10);
	--line-2:   rgba(255,255,255,0.18);
	--white:    #f4f4f5;   /* primary text / headings */
	--grey:     #a1a1aa;   /* secondary text */
	--grey-dim: #71717a;   /* tertiary / disabled */
	--accent:   #e5e7eb;   /* near-white accent (used sparingly) */
	--sheen:    rgba(255,255,255,0.06);
}

/* ---------- Base ---------- */
html, body { background: var(--black) !important; }
body, input, select, textarea { color: var(--grey) !important; }
h1,h2,h3,h4,h5,h6,
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a { color: var(--white) !important; letter-spacing: 0.01em; }
a { color: var(--white) !important; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: #ffffff !important; opacity: 0.7; }

/* ---------- Main content ---------- */
#main, #main > *, #main > section, #main > .inner { background: var(--black) !important; }
#main > section:nth-child(even) { background: var(--panel) !important; }

/* ---------- Banner: subtle sheen gradient instead of photo wash ---------- */
#banner.major:before, #banner.style2:before {
	background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0)) !important;
}
#banner h1, #banner p { color: #ffffff !important; }
#banner h1 { text-shadow: 0 1px 30px rgba(255,255,255,0.08); }

/* ---------- TILES (homepage) — kill the colors, go mono ---------- */
#one.tiles article { background: var(--panel) !important; }
/* the colored overlay each tile uses */
#one.tiles article > .image:before {
	background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(0,0,0,0.55)) !important;
	opacity: 1 !important;
}
/* desaturate the tile background images to greyscale for the mono look */
#one.tiles article .image img {
	filter: grayscale(100%) contrast(1.05) brightness(0.7) !important;
	transition: filter .35s ease, transform .35s ease !important;
}
#one.tiles article:hover .image img {
	filter: grayscale(100%) contrast(1.1) brightness(0.9) !important;
	transform: scale(1.03) !important;
}
/* thin sheen line on tile hover */
#one.tiles article { border: 1px solid transparent !important; transition: border-color .3s ease; }
#one.tiles article:hover { border-color: var(--line-2) !important; }

/* ---------- Spotlights (projects/about) — greyscale images ---------- */
#two { background: var(--panel) !important; }
.spotlights > section { background: var(--panel) !important; }
.spotlights > section > .image img {
	filter: grayscale(100%) contrast(1.05) brightness(0.75) !important;
	transition: filter .35s ease !important;
}
.spotlights > section:hover > .image img {
	filter: grayscale(100%) contrast(1.1) brightness(0.92) !important;
}
.spotlights > section > .content { background: var(--panel) !important; color: var(--grey) !important; }

/* ---------- Contact ---------- */
#contact { background: var(--panel) !important; }

/* ---------- Inputs ---------- */
input[type="text"],input[type="password"],input[type="email"],
input[type="tel"],input[type="search"],input[type="url"],select,textarea {
	background: var(--panel-2) !important;
	border: 1px solid var(--line) !important;
	color: var(--white) !important;
}
input::placeholder, textarea::placeholder { color: var(--grey-dim) !important; }
label { color: var(--grey) !important; }

/* ---------- Buttons: outlined, sheen on hover ---------- */
input[type="submit"],input[type="reset"],input[type="button"],button,.button {
	background: transparent !important;
	box-shadow: inset 0 0 0 1px var(--line-2) !important;
	color: var(--white) !important;
	letter-spacing: 0.15em !important;
	transition: box-shadow .25s ease, background .25s ease, color .25s ease !important;
}
input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,button:hover,.button:hover {
	box-shadow: inset 0 0 0 1px #ffffff !important;
	background: var(--sheen) !important;
	color: #ffffff !important;
}
/* primary button = solid white (the one place high contrast earns attention) */
input[type="submit"].primary,input[type="reset"].primary,input[type="button"].primary,button.primary,.button.primary {
	background: #ffffff !important;
	color: #0a0a0b !important;
	box-shadow: none !important;
}
input[type="submit"].primary:hover,button.primary:hover,.button.primary:hover {
	background: var(--grey) !important;
	color: #0a0a0b !important;
}
.button.disabled,.button:disabled {
	background: transparent !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07) !important;
	color: var(--grey-dim) !important;
	opacity: 0.6;
}

/* ---------- Header / logo ---------- */
#header { background: rgba(10,10,11,0.92) !important; backdrop-filter: blur(8px); }
#header.alt { background: transparent !important; backdrop-filter: none; }
#header .logo strong { background: var(--white) !important; color: var(--black) !important; }

/* ---------- Menu ---------- */
#menu { background: var(--panel) !important; }
#menu .links a { border-color: var(--line) !important; color: var(--white) !important; }
#menu .links a:hover { color: #ffffff !important; opacity: 0.7; }

/* ---------- Footer ---------- */
#footer { background: var(--panel) !important; }
#footer .copyright li { color: var(--grey-dim) !important; border-color: var(--line) !important; }
#footer .icons a { color: var(--grey) !important; }
#footer .icons a:hover { color: #ffffff !important; }

/* ---------- Accent underline under section headers ---------- */
header.major > :first-child:after { background: var(--white) !important; opacity: 0.85; }

/* ---------- Icon circles ---------- */
.icon.alt:before { background: var(--panel-2) !important; color: var(--white) !important; box-shadow: inset 0 0 0 1px var(--line); }

hr { border-bottom-color: var(--line) !important; }

/* ---------- KILL the per-tile colored overlays → uniform dark ---------- */
.tiles article:before { background-color: var(--black) !important; }
.tiles article:nth-child(6n - 5):before,
.tiles article:nth-child(6n - 4):before,
.tiles article:nth-child(6n - 3):before,
.tiles article:nth-child(6n - 2):before,
.tiles article:nth-child(6n - 1):before,
.tiles article:nth-child(6n):before {
	background-color: #0a0a0b !important;
}
/* tile overlay opacity: let the greyscale image show faintly through */
.tiles article .image:before {
	opacity: 0.55 !important;
	background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(0,0,0,0.6)) !important;
}
/* the colored :before that sits over content — make it a dark sheen */
.tiles article:before {
	opacity: 0.78 !important;
	background: linear-gradient(180deg, rgba(10,10,11,0.55), rgba(10,10,11,0.9)) !important;
}

/* ---------- Banner: greyscale the photo + dark wash for B&W consistency ---------- */
#banner {
	background-image:
		linear-gradient(180deg, rgba(10,10,11,0.55), rgba(10,10,11,0.85)),
		url("../../images/banner.jpg") !important;
	background-blend-mode: saturation, normal !important;
}
#banner:after {
	content: '';
	position: absolute; inset: 0;
	background: rgba(10,10,11,0.35);
	backdrop-filter: grayscale(100%);
	-webkit-backdrop-filter: grayscale(100%);
	pointer-events: none;
}
#banner > .inner { position: relative; z-index: 1; }

/* ---------- Inner-page banners (style1–6): kill colored washes → dark ---------- */
#banner.style1:after,
#banner.style2:after,
#banner.style3:after,
#banner.style4:after,
#banner.style5:after,
#banner.style6:after {
	background-color: #0a0a0b !important;
	background: linear-gradient(180deg, rgba(10,10,11,0.55), rgba(10,10,11,0.85)) !important;
}
/* greyscale the inner-page banner image too */
#banner.style2 .image img,
#banner .image img {
	filter: grayscale(100%) contrast(1.05) brightness(0.7) !important;
}

/* ---------- Banner headings: make them BRIGHT and commanding ---------- */
#banner h1 {
	color: #ffffff !important;
	opacity: 1 !important;
	font-weight: 800 !important;
	text-shadow: 0 2px 40px rgba(255,255,255,0.18), 0 1px 4px rgba(0,0,0,0.5) !important;
}
#banner .content p,
#banner > .inner .content p {
	color: #ffffff !important;
	opacity: 0.92 !important;
}
/* lighten the banner wash slightly so headings sit on a less muddy base */
#banner.style1:after,#banner.style2:after,#banner.style3:after,
#banner.style4:after,#banner.style5:after,#banner.style6:after {
	background: linear-gradient(180deg, rgba(10,10,11,0.40), rgba(10,10,11,0.75)) !important;
}
#banner {
	background-image:
		linear-gradient(180deg, rgba(10,10,11,0.40), rgba(10,10,11,0.72)),
		url("../../images/banner.jpg") !important;
}
/* the white underline under banner headings — make it crisp white, full opacity */
#banner header.major > :first-child:after,
header.major > :first-child:after {
	background-color: #ffffff !important;
	opacity: 1 !important;
	height: 3px !important;
}

/* ---------- FORCE banner headings bright (beats preload + inheritance) ---------- */
#banner > .inner header.major h1,
#banner .inner h1,
#banner h1,
body #banner h1 {
	color: #ffffff !important;
	opacity: 1 !important;
	-webkit-text-fill-color: #ffffff !important;
	font-weight: 800 !important;
	text-shadow: 0 0 1px rgba(255,255,255,0.4), 0 2px 30px rgba(255,255,255,0.15) !important;
}
/* ensure the inner wrapper isn't holding a dim opacity once loaded */
#banner > .inner { opacity: 1 !important; }

/* ---------- Banner heading: maximum presence (glow + scale) ---------- */
#banner h1 {
	font-size: 3.6em !important;
	letter-spacing: 0.01em !important;
	text-shadow:
		0 0 20px rgba(255,255,255,0.25),
		0 0 2px rgba(255,255,255,0.6) !important;
	background: linear-gradient(180deg, #ffffff 0%, #d4d4d8 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
/* darken the banner image a touch more so the glowing heading pops against it */
#banner {
	background-image:
		linear-gradient(180deg, rgba(10,10,11,0.55), rgba(10,10,11,0.82)),
		url("../../images/banner.jpg") !important;
}