@font-face {
	font-family: "Cinzel";
	src: url("./media/fonts/Cinzel-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "Noto Serif";
	src: url("./media/fonts/NotoSerif-Regular.ttf") format("truetype");
	font-display: swap;
}

:root {
	color-scheme: dark;
	--ink: #efe0c6;
	--ink-soft: rgba(239, 224, 198, 0.78);
	--muted: rgba(239, 224, 198, 0.55);
	--panel: rgba(16, 9, 7, 0.9);
	--ember: #e8742a;
	--blood: #9c1a12;
	--gold: #d1a24a;
	--line: rgba(209, 162, 74, 0.6);
	--line-soft: rgba(209, 162, 74, 0.22);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
	background:
		radial-gradient(ellipse at top, rgba(120, 36, 12, 0.35), rgba(8, 5, 4, 0.98) 60%),
		linear-gradient(180deg, #120907 0%, #050303 100%);
	color: var(--ink);
	font-family: "Noto Serif", Georgia, serif;
	font-size: 17px;
	line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: var(--gold); }

h1, h2, h3, .eyebrow, .cta, .platform, .dl-cta, summary {
	font-family: "Cinzel", "Times New Roman", serif;
	letter-spacing: 0.06em;
}

h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--gold); margin: 0.2em 0 0.5em; font-weight: 400; }

.site-shell { max-width: 1240px; margin: 0 auto; padding: 0 24px 48px; }

.eyebrow { color: var(--ember); font-size: 0.85rem; text-transform: uppercase; margin: 0; }

/* Hero */
.hero {
	position: relative;
	min-height: min(86vh, 860px);
	display: grid;
	align-items: end;
	margin: 0 -24px;
	padding: 0 24px 56px;
	overflow: hidden;
}

.hero-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 3, 3, 0.15) 0%, rgba(5, 3, 3, 0.55) 55%, #070404 100%);
	z-index: 1;
}

.hero-copy { position: relative; z-index: 2; max-width: 760px; }

.hero-logo { width: min(560px, 90%); margin: 8px 0 4px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.8)); }

h1 { margin: 0; }

.lede { font-size: 1.15rem; color: var(--ink); text-shadow: 0 2px 8px #000; }

.hero-actions, .player-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }

.cta {
	display: inline-block;
	padding: 12px 26px;
	border: 1px solid var(--line);
	background: rgba(14, 8, 6, 0.8);
	color: var(--ink);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.9rem;
	transition: background 0.2s, border-color 0.2s;
}

.cta:hover { border-color: var(--ember); background: rgba(70, 20, 8, 0.85); }

.cta.primary { background: linear-gradient(180deg, #b23a14, #6e140c); border-color: var(--gold); }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.hero-stats div { border-top: 1px solid var(--line); padding-top: 10px; }

.hero-stats span { display: block; color: var(--gold); font-family: "Cinzel", serif; font-size: 0.8rem; text-transform: uppercase; }

.hero-stats strong { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }

.divider { text-align: center; color: var(--gold); margin: 48px 0; position: relative; }

.divider::before, .divider::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 40%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line));
}

.divider::before { left: 0; }

.divider::after { right: 0; transform: scaleX(-1); }

/* Sections */
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.feature-strip article, .server-card, .download-card {
	background: var(--panel);
	border: 1px solid var(--line-soft);
	padding: 26px 28px;
}

.feature-strip h2 { font-size: 1.25rem; }

.feature-strip p { color: var(--ink-soft); margin: 0; }

.showcase, .server-section, .intro-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: center; margin: 56px 0; }

.intro-section { grid-template-columns: 1fr 1.8fr; }

.showcase-panel img, .gallery img, .intro-video { border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }

.intro-video { width: 100%; background: #000; }

.bullet-points { padding-left: 1.1em; color: var(--ink-soft); }

.bullet-points li::marker { color: var(--ember); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; }

.gallery figure { margin: 0; }

.gallery figcaption { color: var(--muted); font-size: 0.9rem; padding-top: 8px; text-align: center; }

/* Server */
.steps { padding-left: 1.3em; color: var(--ink-soft); }

.steps li { margin-bottom: 6px; }

.server-card dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 16px 0; }

.server-card dt { color: var(--gold); font-family: "Cinzel", serif; font-size: 0.85rem; text-transform: uppercase; align-self: center; }

.server-card dd { margin: 0; }

code { font-family: "DejaVu Sans Mono", Consolas, monospace; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line-soft); padding: 3px 9px; font-size: 1.05rem; color: #ffd99a; }

.copy { margin-left: 8px; background: transparent; border: 1px solid var(--line-soft); color: var(--ink-soft); padding: 3px 10px; cursor: pointer; font: inherit; font-size: 0.8rem; }

.copy:hover { border-color: var(--ember); }

.muted { color: var(--muted); font-size: 0.9rem; }

details { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }

summary { cursor: pointer; color: var(--gold); font-size: 0.9rem; }

details p { color: var(--ink-soft); font-size: 0.95rem; }

/* Downloads */
.downloads-intro { text-align: center; max-width: 640px; margin: 0 auto 26px; }

.downloads-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.download-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); transition: border-color 0.2s, transform 0.2s; }

.download-card:hover { border-color: var(--ember); transform: translateY(-3px); }

.platform { font-size: 1.4rem; color: var(--gold); }

.dl-detail { color: var(--ember); font-size: 0.9rem; }

.dl-copy { color: var(--ink-soft); font-size: 0.92rem; flex: 1; word-break: break-word; }

.dl-cta { text-transform: uppercase; font-size: 0.85rem; margin-top: 10px; }

.site-footer { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 56px; }

@media (max-width: 900px) {
	.feature-strip, .gallery, .downloads-grid, .hero-stats { grid-template-columns: 1fr; }
	.showcase, .server-section, .intro-section { grid-template-columns: 1fr; }
	.hero { min-height: min(70vh, 640px); }
}