/* Font Face Definition */
@font-face {
	font-family: 'TransportMedium';
	src: url('transportm-webfont.eot');
	src: url('transportm-webfont.eot?#iefix') format('embedded-opentype'),
		 url('transportm-webfont.woff') format('woff'),
		 url('transportm-webfont.ttf') format('truetype'),
		 url('transportm-webfont.svg#TransportMedium') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	height: 100dvh; /* Dynamic viewport height for mobile browsers */
	max-height: 100vh;
	max-height: 100dvh;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	background-color: #f8f8f8;
	overflow: hidden; /* No scrolling on any device */
	overscroll-behavior: none; /* Prevent scroll bounce */
	touch-action: manipulation; /* Allow clicks but prevent scroll/zoom gestures */
}

html {
	position: fixed; /* Lock viewport on mobile */
	width: 100%;
}

body {
	position: relative;
	width: 100%;
}

/* Simple Navigation */
#site-nav {
	position: fixed;
	top: 28px;
	right: 28px;
	z-index: 1000;
	display: flex;
	gap: 24px;
}

.nav-link {
	color: #000;
	text-decoration: none;
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	position: relative;
	padding: 4px 0;
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #000;
	transition: width 0.25s ease;
}

.nav-link:hover::after {
	width: 100%;
}

/* Main Container - logo slightly above center */
#main-container {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3%;
	padding-bottom: 8%; /* Push content slightly above true center */
}

/* Title Container - identity anchor */
#title-container {
	text-align: center;
	display: grid;
	justify-items: center;
	row-gap: 0px;
	padding: clamp(40px, 6vh, 60px) 8px;
	border: 3px solid #000000;
	border-radius: 20px;
	background-color: #ffffff;
	animation: float 6s ease-in-out infinite;
}

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

#title-container h1 {
	font-family: 'TransportMedium', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(3.5rem, 6vw, 6.5rem);
	font-weight: normal;
	color: #000000;
	line-height: 1.02;
	letter-spacing: 0px;
	margin: 0;
	text-align: center;
}



/* Responsive - keep within viewport */
@media (max-width: 1200px) {
	#main-container { padding: 2.5%; padding-bottom: 10%; }
	#title-container { padding: clamp(30px, 5vh, 50px) 8px; }
}

@media (max-width: 900px) {
	#main-container { 
		height: 100vh;
		height: 100dvh; /* Dynamic viewport height for mobile */
		padding: 4% 5%;
		padding-bottom: 12%;
	}
	#title-container { 
		padding: clamp(25px, 4vh, 40px) 8px; 
	}
}

@media (max-width: 600px) {
	#site-nav { 
		top: 16px; 
		right: 16px;
		gap: 16px;
	}
	.nav-link { 
		font-size: 0.7rem; 
		letter-spacing: 1px;
	}
	#main-container { 
		height: 100vh;
		height: 100dvh; /* Dynamic viewport height for mobile */
		padding: 4%;
		padding-bottom: 15%;
	}
	#title-container { 
		padding: clamp(20px, 4vw, 28px) 10px; 
		border-radius: 12px; 
		max-width: 90vw; /* Prevent overflow */
	}
	#title-container h1 {
		font-size: clamp(2.5rem, 12vw, 4rem); /* Scale down on small screens */
	}
}