/* SEV1 website. Palette and lettering follow the in-game UI and the quest-review pages. */
@font-face { font-family: "Pixeloid"; src: url("/fonts/PixeloidSans.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Pixeloid"; src: url("/fonts/PixeloidSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Press Start"; src: url("/fonts/PressStart2P.ttf") format("truetype"); font-display: swap; }

:root {
	--bg: #0c1b21;
	--paper: #163039;
	--edge: #426069;
	--ink: #f2ead8;
	--dim: #b7c5c7;
	--mint: #95e0cd;
	--gold: #f3b95c;
	--pink: #e6a4b7;
	--alarm: #e5533d;
	--gutter: 16px;
	--wide: 1120px;
	color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 18px/1.6 "Pixeloid", ui-monospace, monospace;
	-webkit-font-smoothing: none;
	font-smooth: never;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mint); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
	font: 12px/1.4 "Press Start", monospace;
	letter-spacing: 1px;
	color: var(--gold);
	margin: 0 0 12px;
	text-transform: uppercase;
}
h1, h2, h3 { font-weight: 700; line-height: 1.25; margin: 0 0 16px; }
h2 { font-size: 36px; }
h3 { font-size: 27px; }
p { margin: 0 0 16px; }

/* Top bar */
.bar {
	position: absolute; inset: 0 0 auto; z-index: 2;
	display: flex; justify-content: flex-end; gap: 24px;
	padding: 16px var(--gutter);
	font-size: 18px;
}
.bar a { color: var(--ink); text-decoration: none; text-shadow: 0 2px 0 #000; background: rgba(7,15,19,.6); padding: 4px 10px; }
.bar a:hover { color: var(--gold); }

/* Hero: the approved key art, with the logo in the space it leaves upper left */
.hero {
	position: relative;
	min-height: min(92vh, 860px);
	display: flex; align-items: flex-end;
	background: #070f13 url("/img/keyart.webp") center / cover no-repeat;
	image-rendering: pixelated;
}
.hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(7,15,19,.15) 0%, rgba(7,15,19,.35) 45%, rgba(12,27,33,.96) 92%, var(--bg) 100%);
}
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 48px; padding-top: 96px; }
.hero .logo { width: min(460px, 78vw); margin: 0 0 16px -8px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.45)); }
.tagline { font-size: 27px; font-weight: 700; max-width: 22ch; margin-bottom: 8px; text-shadow: 0 2px 0 #000; }
.sub { color: var(--dim); max-width: 46ch; text-shadow: 0 2px 0 #000; }

/* Newsletter */
.signup { max-width: 560px; margin-top: 24px; }
.signup .row { display: flex; gap: 8px; flex-wrap: wrap; }
.signup input[type=email] {
	flex: 1 1 240px; min-width: 0;
	font: inherit; color: var(--ink);
	background: rgba(12,27,33,.92);
	border: 3px solid var(--edge); border-radius: 0;
	padding: 12px 14px;
}
.signup input[type=email]::placeholder { color: #7f9497; }
.signup button {
	font: 700 18px/1 "Pixeloid", monospace;
	color: #1b1206; background: var(--gold);
	border: 3px solid #1b1206; border-radius: 0;
	box-shadow: 0 4px 0 #8a5a17;
	padding: 14px 20px; cursor: pointer;
}
.signup button:hover { background: #ffd07e; }
.signup button:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a17; }
.signup button[disabled] { opacity: .6; cursor: progress; }
.signup .fine { font-size: 14px; color: var(--dim); margin: 10px 0 0; }
.signup .status { min-height: 1.6em; margin: 8px 0 0; color: var(--mint); }
.signup .status.err { color: var(--pink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.steam-note { margin-top: 12px; font-size: 14px; color: var(--dim); }
.steam-note b { color: var(--ink); }

/* Feature sections */
.feature { padding: 72px 0; border-top: 3px solid var(--paper); }
.feature .wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; }
.feature.flip .wrap { grid-template-columns: 1.25fr 1fr; }
.feature.flip .copy { order: 2; }
.shot {
	margin: 0;
	border: 3px solid var(--edge);
	background: var(--paper);
	box-shadow: 0 8px 0 rgba(0,0,0,.35);
}
.shot img { width: 100%; }
.shot figcaption { font-size: 14px; color: var(--dim); padding: 8px 12px; border-top: 3px solid var(--edge); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.things { list-style: none; padding: 0; margin: 0 0 16px; }
.things li { padding-left: 24px; position: relative; margin-bottom: 6px; }
.things li::before { content: "▸"; position: absolute; left: 0; color: var(--gold); }

/* Gallery */
.gallery { padding: 72px 0; border-top: 3px solid var(--paper); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.grid a { text-decoration: none; color: inherit; display: block; }
.grid a:hover .shot { border-color: var(--gold); }

/* Closing signup */
.closing { padding: 72px 0; border-top: 3px solid var(--paper); background: linear-gradient(180deg, var(--bg), #08141a); }

/* Plain pages (press kit, privacy) */
.page { padding: 96px 0 64px; }
.page .logo-small { width: 180px; margin-bottom: 24px; }
.facts { border-collapse: collapse; width: 100%; max-width: 720px; margin-bottom: 32px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 2px solid var(--paper); }
.facts th { color: var(--gold); width: 34%; font-weight: 700; }
.panel { background: var(--paper); border: 3px solid var(--edge); padding: 20px 24px; margin-bottom: 32px; max-width: 820px; }
.downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.btn {
	display: inline-block; text-decoration: none;
	font-weight: 700; color: var(--bg); background: var(--mint);
	border: 3px solid #0a3a30; box-shadow: 0 4px 0 #2f7d6b;
	padding: 10px 16px;
}
.btn:hover { color: var(--bg); background: #b9f1e2; }
.page section { margin-bottom: 48px; }
.page h2 { font-size: 27px; border-bottom: 3px solid var(--paper); padding-bottom: 8px; }

footer { border-top: 3px solid var(--paper); padding: 32px 0 48px; font-size: 14px; color: var(--dim); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer nav { display: flex; gap: 20px; }

@media (max-width: 820px) {
	h2 { font-size: 27px; }
	.tagline { font-size: 22px; }
	.feature { padding: 48px 0; }
	.feature .wrap, .feature.flip .wrap { grid-template-columns: 1fr; gap: 24px; }
	.feature.flip .copy { order: 0; }
	.trio { grid-template-columns: 1fr; }
	.grid { grid-template-columns: 1fr; }
	/* Phones: the crew walks into the portal at the top, uncovered; logo and copy follow on dark ground. */
	.hero { min-height: 0; background-position: 80% top; background-size: auto 400px; }
	.hero::after { background: linear-gradient(180deg, rgba(7,15,19,0) 0, rgba(7,15,19,.1) 230px, rgba(12,27,33,.92) 340px, var(--bg) 400px); }
	.hero .wrap { padding-top: 250px; padding-bottom: 32px; }
	.hero .logo { width: 260px; }
	.facts th { width: 40%; }
}
@media (prefers-reduced-motion: reduce) { .signup button:active { transform: none; } }