/* ============================================================
   Mountain Motors — night showroom.
   Editorial / architectural: sharp geometry (no radii), hairline
   rules, a refined type system (Satoshi display at medium weight,
   Fragment Mono for the technical layer, one Newsreader italic
   accent), hierarchy from scale + tracking + case, not heavy bold.
   ============================================================ */

@font-face {
	font-family: 'Satoshi';
	src: url('/fonts/Satoshi-Variable.woff2') format('woff2-variations');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Satoshi';
	src: url('/fonts/Satoshi-VariableItalic.woff2') format('woff2-variations');
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Fragment Mono';
	src: url('/fonts/FragmentMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Newsreader';
	src: url('/fonts/Newsreader-Italic.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

:root {
	--bg: #0a0e14;
	--bg-2: #0c111a;
	--surface: #10161f;
	--surface-2: #141b26;
	--ink: #eef1f5;
	--ink-2: #9aa5b3;
	--ink-3: #616c7a;
	--line: rgba(150, 178, 210, 0.13);
	--line-2: rgba(150, 178, 210, 0.2);
	--line-soft: rgba(150, 178, 210, 0.07);
	--beam: #4cb8f0;
	--beam-soft: #82ccf5;
	--beam-ghost: rgba(76, 184, 240, 0.1);
	--good: #56c98a;
	--wrap: 1240px;
	--sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--ease: cubic-bezier(0.2, 0.8, 0.25, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--sans);
	font-weight: 430;
	background: var(--bg);
	color: var(--ink);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(76, 184, 240, 0.26); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(20px, 5vw, 52px); }

/* ---------- shared type atoms ---------- */
.eyebrow, .mono-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* ---------- header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(10, 14, 20, 0.86);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; gap: 30px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { color: var(--beam); display: grid; place-items: center; }
.brand .word { font-weight: 560; letter-spacing: 0.02em; font-size: 16px; line-height: 1; }
.brand small {
	display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 400;
	letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px;
}
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; color: var(--ink-2); font-weight: 460; }
.nav a { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; }
.nav a:hover { color: var(--ink); border-color: var(--line-2); }
.header-cta {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 10px 18px; background: var(--beam); color: #04121c; border: 1px solid var(--beam);
	transition: background 0.15s, color 0.15s;
}
.header-cta:hover { background: transparent; color: var(--beam); }

/* ---------- hero ---------- */
.hero {
	position: relative; overflow: hidden;
	padding: clamp(64px, 10vw, 120px) 0 clamp(44px, 6vw, 80px);
	background:
		radial-gradient(58% 80% at 8% -6%, rgba(76, 184, 240, 0.11), transparent 58%),
		var(--bg);
	border-bottom: 1px solid var(--line-soft);
}
.hero .eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; color: var(--beam); }
.hero .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--beam); opacity: 0.7; }
.hero h1 {
	font-weight: 500;
	font-size: clamp(2.3rem, 5vw, 4rem);
	letter-spacing: -0.04em;
	line-height: 1.03;
	max-width: 15ch;
	text-wrap: balance;
}
.hero h1 .accent { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.hero p {
	margin-top: 22px; color: var(--ink-2); max-width: 52ch;
	font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 430; line-height: 1.62;
}
.hero-stats { display: flex; margin-top: 52px; border-top: 1px solid var(--line); max-width: 620px; }
.hero-stats .s { padding: 22px 34px 4px; border-left: 1px solid var(--line); flex: 1; }
.hero-stats .s:first-child { padding-left: 0; border-left: none; }
.hero-stats .s .n { font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 520; letter-spacing: -0.03em; line-height: 1; }
.hero-stats .s .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; }

/* ---------- section head ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: clamp(50px, 7vw, 84px) 0 6px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); }
.section-head h2 { font-weight: 520; font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -0.025em; }
.section-head .count { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-3); }

/* ---------- filters ---------- */
.filters { display: flex; gap: 0; flex-wrap: wrap; margin: 22px 0 30px; }
.filters button {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ink-3); background: transparent; border: none; border-bottom: 1px solid transparent;
	padding: 9px 16px; cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.filters button:hover { color: var(--ink); }
.filters button.active { color: var(--beam); border-bottom-color: var(--beam); }

/* ---------- inventory grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); padding-bottom: 0; }
.grid .card { background: var(--bg); }
.card {
	border: none; overflow: hidden; display: flex; flex-direction: column;
	transition: background 0.2s var(--ease);
}
.card:hover { background: var(--surface); }
.card .thumb { position: relative; aspect-ratio: 16 / 10; background: #070b11; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02); transition: transform 0.5s var(--ease); }
.card:hover .thumb img { transform: scale(1.035); }
.card .badges { position: absolute; top: 0; left: 0; display: flex; gap: 0; flex-wrap: wrap; }
.badge {
	font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 5px 9px; background: rgba(10, 14, 20, 0.86); color: var(--ink-2);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.badge.cpo { color: var(--beam-soft); }
.badge.hist { color: var(--good); }
.card .body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card .name { font-size: 1.08rem; font-weight: 530; letter-spacing: -0.015em; line-height: 1.25; }
.card .trim { font-family: var(--mono); color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 7px; }
.card .specs { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); }
.card .foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 18px; }
.card .price { font-family: var(--mono); font-size: 1.15rem; letter-spacing: -0.01em; color: var(--ink); }
.card .view { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--beam); display: inline-flex; align-items: center; gap: 6px; }
.card .view .arr { transition: transform 0.15s var(--ease); }
.card:hover .view .arr { transform: translateX(4px); }

/* ---------- VDP ---------- */
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 24px 0 0; display: flex; gap: 10px; }
.crumb a:hover { color: var(--beam); }
.vdp { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 60px); padding: 26px 0 44px; align-items: start; }
.vdp-media { position: relative; overflow: hidden; border: 1px solid var(--line); background: #070b11; }
.vdp-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vdp-media .badges { position: absolute; top: 0; left: 0; display: flex; }
.vdp-head h1 { font-weight: 500; font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.08; }
.vdp-head .sub { font-family: var(--mono); color: var(--ink-3); margin-top: 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.vdp-price { display: flex; align-items: baseline; gap: 14px; margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.vdp-price .p { font-family: var(--mono); font-size: 2rem; letter-spacing: -0.02em; }
.vdp-price .m { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); }
.vdp-cta { display: flex; gap: 0; flex-wrap: wrap; margin: 0 0 30px; border: 1px solid var(--line); }
.btn {
	font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 15px 24px; cursor: pointer; border: none; background: transparent; color: var(--ink);
	display: inline-flex; align-items: center; gap: 9px; transition: background 0.15s, color 0.15s; flex: 1; justify-content: center;
}
.btn.primary { background: var(--beam); color: #04121c; }
.btn.primary:hover { background: var(--beam-soft); }
.btn.ghost { border-left: 1px solid var(--line); }
.btn.ghost:hover { color: var(--beam); background: var(--surface); }

.panel { border: 1px solid var(--line); padding: 24px 24px 26px; margin-top: 18px; background: var(--bg-2); }
.panel h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.spec-grid .kv { background: var(--bg-2); padding: 14px 16px; }
.spec-grid .kv .k { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; }
.spec-grid .kv .v { font-size: 0.98rem; font-weight: 500; margin-top: 6px; letter-spacing: -0.01em; }
.features { display: flex; flex-wrap: wrap; gap: 8px; }
.features span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-soft); padding: 7px 11px; }

/* history */
.history-summary { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.history-summary .h { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink-2); }
.history-summary .h .ic { width: 24px; height: 24px; display: grid; place-items: center; background: var(--beam-ghost); color: var(--beam); font-family: var(--mono); font-size: 11px; flex: 0 0 auto; }
.timeline { position: relative; margin-left: 5px; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 1px; background: var(--line); }
.event { position: relative; padding: 0 0 20px; }
.event:last-child { padding-bottom: 0; }
.event::before { content: ''; position: absolute; left: -24px; top: 5px; width: 7px; height: 7px; background: var(--beam); transform: translateX(-3px); }
.event .when { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--beam-soft); display: flex; gap: 12px; }
.event .when .mi { color: var(--ink-3); }
.event ul { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.event ul li { font-size: 0.92rem; color: var(--ink-2); padding-left: 15px; position: relative; }
.event ul li::before { content: '—'; position: absolute; left: 0; color: var(--ink-3); }
.history-empty { color: var(--ink-2); font-size: 0.94rem; line-height: 1.6; }
.history-empty .cta { color: var(--beam-soft); }
.report-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--beam); border-bottom: 1px solid var(--line); padding-bottom: 5px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: 48px 0; margin-top: 48px; color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.site-footer .disc { max-width: 62ch; line-height: 1.7; text-transform: none; letter-spacing: 0.02em; }

@media (max-width: 900px) {
	.vdp { grid-template-columns: 1fr; }
	.spec-grid { grid-template-columns: 1fr; }
	.nav { display: none; }
	.hero-stats .s { padding-inline: 20px; }
}