/* ==========================================================================
   Fonts (self-hosted, from the design export)
   ========================================================================== */
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Staatliches';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/staatliches-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Staatliches';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/staatliches-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens + base
   ========================================================================== */
:root {
	--accent: #c8342e;
	--ink: #0f0b08;
	--paper: #f2e6d0;
	--paper-muted: #d9cba8;
	--paper-line: rgba(242, 230, 208, .4);
	--font-display: 'Anton', sans-serif;
	--font-body: 'Staatliches', sans-serif;
	--ease-out: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.link-underline {
	border-bottom: 1px solid var(--paper-line);
	padding-bottom: 2px;
	transition: color .3s ease, border-color .3s ease;
}
.link-underline:hover,
.link-underline:focus-visible { color: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	--ov-mult: 1;
	--word-color: rgba(242, 230, 208, .42);
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
}
.hero--bright { --ov-mult: .72; }
.hero--moody  { --ov-mult: 1; }
.hero--noir   { --ov-mult: 1.16; }
.hero--wordmark-ghost { --word-color: rgba(242, 230, 208, .42); }
.hero--wordmark-solid { --word-color: var(--paper); }

/* Background photo */
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: kenburns 22s ease-in-out infinite alternate;
}

/* Overlays */
.hero__tint,
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__tint {
	background: linear-gradient(160deg,
		rgba(200, 52, 46, calc(var(--ov-mult) * .32)),
		rgba(15, 11, 8, calc(var(--ov-mult) * .55)) 60%,
		rgba(15, 11, 8, calc(var(--ov-mult) * .85)));
	mix-blend-mode: multiply;
}
.hero__shade { background: rgba(15, 11, 8, calc(var(--ov-mult) * .22)); }

/* Nav */
.hero__nav {
	position: relative;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: clamp(20px, 3.5vw, 40px) clamp(24px, 4vw, 56px);
}
.hero__brand {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 28px);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.hero__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px clamp(18px, 3vw, 40px);
	font-size: clamp(13px, 1.4vw, 16px);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.hero__menu a { transition: opacity .3s ease; }
.hero__menu a:hover,
.hero__menu a:focus-visible { opacity: .7; }

/* Wordmark */
.hero__center {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 68vh;
	text-align: center;
}
.hero__wordmark {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(80px, 16vw, 220px);
	line-height: .86;
	letter-spacing: -.01em;
	color: var(--word-color);
	text-transform: uppercase;
}
/* Hidden until hero.js runs its intro (only when JS is on). */
.js .hero__wordmark { opacity: 0; }

/* Socials */
.hero__socials {
	position: relative;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 22px;
	padding: 0 24px clamp(28px, 4vw, 48px);
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	animation: fadeUp 1.3s var(--ease-out) .3s both;
}

/* Reduced motion: no zoom, no slide-ins. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero__img,
	.hero__socials { animation: none; }
	.js .hero__wordmark { opacity: 1; }
}