nav ul.menu li a:hover {
	background-color: #555;
}

/* Image grid specific styles (kept here so the page can override global styles) */
:root{
	/* Layer 1 (base) - set this to a color or use --bg-layer1-image */
	--bg-layer1: #2b2b2b;
	--bg-layer1-image: none; /* e.g. url('../media/texture1.png') */
	/* Layer 2 (panel overlay inside centered box) */
	--bg-layer2: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05));
	--bg-layer2-image: none; /* e.g. url('../media/panel-texture.png') */
	--grid-width: 960px; /* max width of the centered box */
	--grid-gap: 14px;
	--tile-radius: 8px;
}

/* Center and stack top-level elements */
body{
	margin:0;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background-color: var(--bg-layer1);
	background-image: var(--bg-layer1-image);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #eee;
	display:flex;
	flex-direction:column;
	align-items:center; /* center children horizontally */
	min-height:100vh;
	box-sizing:border-box;
}

/* Center the nav */
nav{
	width:100%;
	display:flex;
	justify-content:center;
}

nav ul.menu{
	display:flex;
	gap:8px;
	padding:0 12px;
}

/* Centered box with two-layer background: outer panel and inner textured layer */
.grid-panel-wrap{
	width:100%;
	display:flex;
	justify-content:center;
	padding:40px 20px;
	box-sizing:border-box;
}
.grid-panel{
	width:100%;
	max-width: var(--grid-width);
	background: var(--bg-layer2);
	background-image: var(--bg-layer2-image), var(--bg-layer2);
	background-size: cover, auto;
	background-repeat: no-repeat, repeat;
	border-radius: 12px;
	padding:22px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.02);
	margin: 0 auto;
	box-sizing:border-box;
	text-align:center;
}

.grid-panel h1{ margin-top:0; }

/* Responsive grid */
.image-grid{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--grid-gap);
	align-items:center;
}

.grid-item{
	position:relative;
	overflow:hidden;
	border-radius: var(--tile-radius);
	min-height:120px;
}
.grid-item a{
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	color:inherit;
}
.grid-item img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition: transform .35s ease, filter .25s ease;
	display:block;
}

/* dim on hover, slight zoom for emphasis */
.grid-item:hover img,
.grid-item:focus-within img{
	filter: brightness(.6) saturate(.95) contrast(.98);
	transform: scale(1.03);
}

/* Optional caption overlay */
.grid-caption{
	position:absolute;
	left:0; right:0; bottom:8px;
	padding:8px 12px;
	color:#fff;
	font-weight:600;
	text-shadow:0 2px 6px rgba(0,0,0,0.6);
	pointer-events:none;
	opacity:0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
	text-align:center;
}
.grid-item:hover .grid-caption,
.grid-item:focus-within .grid-caption{
	opacity:1;
	transform:none;
}

/* accessible focus style for keyboard users */
.grid-item a:focus{
	outline: 3px solid rgba(255,255,255,0.12);
	outline-offset: 3px;
}

@media (max-width:520px){
	:root{ --grid-gap:10px; }
	.grid-caption{ font-size:13px; }
}