html, body {
	height: 100%;
}

body {
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	color: #333;
	background-color: #b6b6b6;
	/* body scrolls/pans; .stage carries the background so it never drifts out of sync with the icons.
	   (Note: intentionally not flexbox-centered here - justify-content:center on an overflowing flex
	   container can clip/hide the start of the scrollable area on touch browsers.) */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	/* stop swipes from being swallowed by the browser's own back/forward or pull-to-refresh gestures */
	overscroll-behavior: contain;
}

/* The icon coordinates below were authored against the background at its native,
   unscaled resolution (1 image pixel = 1 CSS pixel) - the shelf art and icon
   artwork only line up at that exact size, so .stage must never scale it. */
.stage {
	position: relative;
	width: 3840px;
	height: 2160px;
	margin: 0 auto;
	background-image: url('/files/assets/main/img/mainbg-XL-V2.webp');
	background-repeat: no-repeat;
	background-size: auto;
}

.fixed-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.fixed-container a {
	pointer-events: auto;
}

.fixed-container img {
	position: absolute;
	display: block;
}

.mobile-nav {
	display: none;
}

/* Below phone-ish widths, swap the desktop shelf artwork for a simple tappable
   menu instead of forcing the full-size graphics into a pannable space. */
@media (max-width: 768px) {
	html, body {
		height: auto;
	}

	body {
		overflow: visible;
	}

	.stage {
		display: none;
	}

	.mobile-nav {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		max-width: 640px;
		margin: 0 auto;
		padding: 24px 16px 40px;
	}

	.mobile-nav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		text-decoration: none;
		color: #222;
		background: #fff;
		border-radius: 14px;
		padding: 10px 10px 14px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
		transition: transform 0.12s ease, box-shadow 0.12s ease;
	}

	.mobile-nav__item img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		display: block;
		margin-bottom: 8px;
	}

	.mobile-nav__item span {
		font-weight: 600;
		font-size: 0.95em;
		letter-spacing: 0.02em;
	}

	.mobile-nav__item:active {
		transform: scale(0.96);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	}
}


#about {
	position: absolute;
	top: 130px;
	left: 43px;
}

#art {
	position: absolute;
	top: 140px;
	left: 436px;
}

#photos {
	position: absolute;
	top: 132px;
	left: 831px;
}

#videos {
	position: absolute;
	top: 132px;
	left: 1204px;
}

#library {
	position: absolute;
	top: 134px;
	left: 1598px;
}

#music {
	position: absolute;
	top: 722px;
	left: 202px;
}

#mixtapes {
	position: absolute;
	top: 700px;
	left: 795px;
}

#words {
	position: absolute;
	top: 691px;
	left: 1330px;
}

.hover-about {
	position: absolute !important;
	top: 90px !important;
	left: 43px !important;
}

.hover-art {
	position: absolute !important;
	top: 70px !important;
	left: 436px !important;
}

.hover-photos {
	position: absolute !important;
	top: 70px !important;
	left: 831px !important;
}

.hover-videos {
	position: absolute !important;
	top: 70px !important;
	left: 1226px !important;
}

.hover-library {
	position: absolute !important;
	top: 65px !important;
	left: 1550px !important;
}

.hover-music {
	position: absolute !important;
	top: 460px !important;
	left: 202px !important;
}

.hover-mixtapes {
	position: absolute !important;
	top: 460px !important;
	left: 800px !important;
}

.hover-words {
	position: absolute !important;
	top: 460px !important;
	left: 1340px !important;
}

/* Hover/touch affordance: desktop gets a hover/focus glow, touch devices get a
   gentle idle pulse (no :hover exists) so tappable regions are discoverable. */
.hover-element img {
	transition: transform 0.15s ease, filter 0.15s ease;
}

.hover-element:hover img,
.hover-element:focus-visible img,
.hover-element.is-active img {
	transform: scale(1.04);
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.hover-element:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 8px;
}

@media (hover: none) and (pointer: coarse) {
	.hover-element img {
		animation: ofp-tap-hint 2.6s ease-in-out infinite;
	}

	.hover-element.is-active img {
		animation: none;
	}
}

@keyframes ofp-tap-hint {

	0%,
	100% {
		filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
	}

	50% {
		filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hover-element img {
		animation: none !important;
		transition: none !important;
	}
}

.red-large-font {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5em;
    color: red;
}