/* AVEK — public site.
   Built from the game's own identity: Rajdhani and Barlow are the typefaces Neon Bastion
   ships, the palette is sampled from assets/boot.png, and the barrier arc is the structural
   device. The game is one line you hold, with everything above it coming for you, so the
   page divides on arcs rather than rules, cards or boxes. Cyan is yours; amber is theirs. */

/* The game's own typefaces, self-hosted. Both are SIL OFL; licences sit beside them in
   fonts/. Self-hosted rather than fetched from a font CDN, because the privacy policy
   states this site embeds no third-party fonts and that should stay true. Subset to Latin,
   which takes Rajdhani from 390 KB to 15. */
@font-face { font-family: Rajdhani; src: url("/fonts/Rajdhani-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Rajdhani; src: url("/fonts/Rajdhani-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Barlow; src: url("/fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
	--void: #04070a;
	--hexline: #0c1724;
	--signal: #5ef2f0;
	--barrier: #35d6a2;
	--theirs: #d8a657;
	--paper: #d7e6f0;
	--dim: #7f9bb0;
	--measure: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--void) url("/hex.svg") repeat;
	color: var(--paper);
	font: 400 17px/1.65 Barlow, system-ui, sans-serif;
	letter-spacing: .005em;
}

/* Type scale, after Bringhurst: 1.333. 17 / 22.6 / 30 / 40 / 54. */
h1, h2, h3 { font-family: Rajdhani, system-ui, sans-serif; font-weight: 600; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2.6rem, 9vw, 3.4rem); letter-spacing: .06em; }
h2 { font-size: 1.78rem; letter-spacing: .03em; color: var(--signal); margin: 2.6em 0 .5em; }
h3 { font-size: 1.32rem; letter-spacing: .02em; margin: 2em 0 .25em; }
p, li { max-width: var(--measure); }
p { margin: 0 0 1.1em; }
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
strong { color: #fff; font-weight: 500; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; color: var(--dim); }

main { max-width: 740px; margin: auto; padding: 2.6rem 24px 96px; }

/* ---- the arc -------------------------------------------------------------
   One shallow glowing curve. It opens the page under the wordmark, and it is
   what separates sections further down, in place of a rule or a card edge. */
.arc {
	position: relative;
	width: 150%;
	margin: 0 0 0 -25%;
	height: clamp(96px, 13vw, 150px);
	border-top: 1px solid var(--signal);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	box-shadow: 0 -10px 46px -14px rgba(94, 242, 240, .55);
}
.arc--divider { height: 64px; margin-top: 4.5rem; opacity: .5; }

/* ---- hero: the boot screen, rebuilt ------------------------------------- */
.hero {
	min-height: 92svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 72px 24px 0;
	overflow: hidden;
}
.hero h1 { color: #eaf8ff; text-shadow: 0 0 28px rgba(94, 242, 240, .55); }
.hero .rule {
	width: min(560px, 86vw);
	height: 2px;
	margin: 1.15rem 0 1rem;
	background: linear-gradient(90deg, transparent 2%, var(--signal) 50%, transparent 98%);
	opacity: .85;
	box-shadow: 0 0 14px rgba(94, 242, 240, .5);
}
.hero .sub {
	font-size: clamp(1rem, 2.4vw, 1.18rem);
	color: #9dc4d6;
	letter-spacing: .05em;
	margin: 0;
	max-width: 40ch;
}
.hero .stage {
	margin-top: auto;
	width: 100%;
	max-width: 860px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hero .turret { width: clamp(104px, 15vw, 150px); height: auto; display: block; margin-bottom: -20px; }

/* ---- content below the line --------------------------------------------- */
.lede { font-size: 1.16rem; color: #c3dbe8; max-width: 58ch; }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 0 0 2.4rem; font-family: Rajdhani, sans-serif; font-size: 1.06rem; letter-spacing: .04em; }
.site-nav a { color: var(--dim); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--signal); }

/* A list of things, held apart by space rather than boxed in cards. */
.stack > * + * { margin-top: 2.1rem; }
.entry h3 { margin-top: 0; }
.entry h3 a { text-decoration: none; }
.entry p { color: var(--dim); margin-bottom: 0; }

/* Amber is the opposition's colour in the game, so it only marks what is coming. */
.ahead { border-left: 2px solid var(--theirs); padding-left: 18px; color: #e4d2ae; }
.ahead strong { color: var(--theirs); font-weight: 600; }

/* The beta page's three steps really are a sequence, so they are numbered. */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.6rem 0; }
ol.steps > li { counter-increment: step; position: relative; padding-left: 52px; margin-bottom: 1.9rem; max-width: var(--measure); }
ol.steps > li::before {
	content: counter(step);
	position: absolute; left: 0; top: -2px;
	font-family: Rajdhani, sans-serif; font-size: 1.5rem; font-weight: 700;
	color: var(--signal);
}
ol.steps > li::after {
	content: ""; position: absolute; left: 10px; top: 30px; bottom: -22px; width: 1px;
	background: linear-gradient(var(--signal), transparent); opacity: .35;
}
ol.steps > li:last-child::after { display: none; }
ol.steps strong { display: block; font-family: Rajdhani, sans-serif; font-size: 1.2rem; font-weight: 600; color: var(--signal); letter-spacing: .02em; }

/* ---- screens ------------------------------------------------------------- */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px; margin: 1.8rem 0 1rem; max-width: none; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; display: block; border: 1px solid #16293a; }
.shots figcaption { margin-top: .6rem; font-size: .86rem; line-height: 1.45; color: var(--dim); }

/* ---- support page -------------------------------------------------------- */
.faq { margin: 2rem 0; }
.faq h3 { color: var(--paper); }
.faq p { color: var(--dim); }

footer { margin-top: 5rem; padding-top: 1.4rem; border-top: 1px solid #12212e; color: var(--dim); font-size: .92rem; }
footer a { color: var(--dim); }

/* ---- motion: one moment, on load, and only if it is welcome -------------- */
@media (prefers-reduced-motion: no-preference) {
	.hero h1, .hero .rule, .hero .sub { animation: resolve .9s ease-out both; }
	.hero .rule { animation-delay: .12s; }
	.hero .sub { animation-delay: .22s; }
	.hero .stage { animation: rise 1.5s cubic-bezier(.2, .7, .3, 1) .3s both; }
}
@keyframes resolve { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
	body { font-size: 16px; }
	.hero { min-height: 88svh; }
	.hero .turret { width: 92px; height: 92px; }
	.arc { height: 78px; }
	.shots { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}