/* Kosmograd interface layer — shared by the home, devlog, and press pages. */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
	--kg-display: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kg-void: #0a0d10;
	--kg-void-raised: #12171c;
	--kg-panel: #171d23;
	--kg-panel-light: #f6f7f5;
	--kg-ink: #171c20;
	--kg-muted: #65717a;
	--kg-line: #c7ced0;
	--kg-accent: #e5544f;
	--kg-accent-deep: #c6312f;
	--kg-lunar: #d7d8d2;
	--rl-red: #c6312f;
}

/* ── Base typography ────────────────────────────────────────────────── */
/* The in-game HUD typeface carries the site’s hierarchy; body text stays conventional and readable. */
h1, h2, .hero-title, .section-title {
	font-family: var(--kg-display);
	font-weight: 700;
}

.kg-kicker,
.kg-label {
	color: var(--kg-accent);
	font-family: var(--kg-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ── Page shells ────────────────────────────────────────────────────── */
.kg-page-shell {
	background: #e8ebe8;
	color: var(--kg-ink);
}

.kg-hero {
	position: relative;
	overflow: hidden;
	background: var(--kg-void) !important;
	border-bottom: 1px solid #2a2f33;
}
.kg-hero .container { position: relative; }
.kg-hero .hero-title { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: .04em; margin-bottom: .6rem; }
.kg-hero .hero-subtitle { color: #b7c3c8; font-size: 1rem; }

/* ── Panels, copy & lists (press kit, etc.) ────────────────────────────── */
.kg-panel {
	background: var(--kg-panel-light);
	border: 1px solid var(--kg-line);
	border-radius: 0;
}
.kg-panel > .card-body { padding: clamp(1.25rem, 3vw, 2rem); }

.kg-panel-title {
	font-family: var(--kg-display);
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 700;
	letter-spacing: .035em;
	color: var(--kg-ink);
	margin: 0;
}

.kg-copy { color: #3e4a51; line-height: 1.7; }
.kg-copy a, .kg-text-link { color: #b02a28; font-weight: 650; }
.kg-copy a:hover, .kg-text-link:hover { color: #8f1f1e; }

.kg-facts { margin: 0; }
.kg-facts > div { padding: .8rem 0; border-bottom: 1px solid var(--kg-line); }
.kg-facts > div:last-child { border-bottom: 0; }
.kg-facts dt { color: var(--kg-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kg-facts dd { color: var(--kg-ink); margin: .18rem 0 0; }

.kg-feature-list { list-style: none; margin: 0; padding: 0; }
.kg-feature-list li { border-bottom: 1px solid var(--kg-line); color: #344047; padding: .8rem 0 .8rem 1.3rem; position: relative; }
.kg-feature-list li:last-child { border-bottom: 0; }
.kg-feature-list li::before { content: '+'; color: var(--kg-accent-deep); font-weight: 800; left: 0; position: absolute; }
.kg-feature-list strong { color: var(--kg-ink); }

.kg-asset-stage {
	align-items: center;
	background: #0e1317;
	border: 1px solid #334149;
	display: flex;
	height: 180px;
	justify-content: center;
	padding: 1.5rem;
}
.kg-asset-stage--light { background: #e9ece9; }
.kg-asset-stage img { max-height: 130px; max-width: 100%; object-fit: contain; }

.kg-screenshot-grid img { aspect-ratio: 16 / 9; border: 1px solid #56636a; object-fit: cover; width: 100%; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.kg-button {
	background: var(--kg-void);
	border: 1px solid var(--kg-void);
	border-radius: 0;
	color: #fff;
	font-family: var(--kg-display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	padding: .6rem .8rem;
	text-transform: uppercase;
}
.kg-button:hover { background: #2a343b; border-color: #2a343b; color: #fff; }

/* Navbar CTA - kept in the same accent family as every other interactive
   element on the site, instead of a competing orange accent. */
.rl-nav-cta {
	background: transparent;
	border: 1px solid #56636a;
	border-radius: 2px;
	color: #fff !important;
	font-family: var(--kg-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .02em;
	transition: background .15s ease, border-color .15s ease;
}
.rl-nav-cta:hover {
	background: #2a343b;
	border-color: #8a969c;
	color: #fff !important;
}

/* ── Devlog entries & rail ──────────────────────────────────────────── */
/* Compact, forum-like devlog feed. */
.kg-devlog-section { padding: 2.5rem 0 4rem; }
.kg-devlog-stream { border-top: 2px solid #25343b; }
.kg-devlog-entry {
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--kg-line);
	border-top: 0;
	box-shadow: none;
	margin: 0;
	padding: 1.35rem 1.5rem;
	position: relative;
}
.kg-devlog-entry::before { background: var(--kg-accent-deep); content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 4px; }
.kg-devlog-entry:nth-child(3n + 2)::before { background: var(--kg-accent); }
.kg-devlog-entry:nth-child(3n)::before { background: #8e9da4; }
.kg-devlog-entry-header { border: 0; margin: 0 0 .6rem; padding: 0; }
.kg-devlog-entry-title { color: var(--kg-ink); font-family: var(--kg-display); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 700; line-height: 1.3; margin: 0 0 .4rem; }
.kg-devlog-entry-meta { color: var(--kg-muted); font-size: .8rem; gap: .5rem; text-transform: uppercase; letter-spacing: .04em; }
.kg-devlog-entry .devlog-content { color: #3e4a51; font-size: .97rem; line-height: 1.6; }
.kg-devlog-entry .devlog-content p { color: inherit; margin: 0; }
.kg-devlog-entry .devlog-content p,
.kg-devlog-entry .devlog-content li { font-size: 1rem; }
.kg-devlog-entry .devlog-content h5 {
	color: var(--kg-ink);
	font-family: var(--kg-display);
	font-size: clamp(1.35rem, 2.4vw, 1.65rem);
	font-weight: 700;
	letter-spacing: .02em;
	margin: 2.1rem 0 .9rem;
}
.kg-devlog-entry .devlog-content h5:first-child { margin-top: 0; }
.kg-devlog-entry .devlog-footer { border: 0; color: var(--kg-muted); margin: .8rem 0 0; padding: 0; }
.kg-devlog-entry .devlog-footer img { display: none; }

/* A single, "solo" article page can sit a little more spaciously than a
   compact list entry. */
.kg-devlog-entry--solo { padding: 2rem 2.25rem; }

.kg-devlog-rail { border-left: 1px solid #9ca7aa; padding-left: 1.5rem; }
.kg-rail-block { border-bottom: 1px solid #9ca7aa; padding: 0 0 1.2rem; margin-bottom: 1.2rem; }
.kg-rail-block:last-child { border-bottom: 0; }
.kg-rail-title { color: var(--kg-ink); font-family: var(--kg-display); font-size: .85rem; letter-spacing: .05em; }
.kg-progress { background: #c7ced0; border-radius: 0; height: 5px; }
.kg-progress .progress-bar { background: var(--kg-accent-deep) !important; }

/* ── Homepage: dark devlog feed & dispatch cards ────────────
   The devlog teaser + roadmap share the void-black surface; dispatch
   cards are styled dark unconditionally since every page that uses them
   (homepage feed, devlog index) is dark by default. */
.kg-home-feed { background: var(--kg-void-raised); padding: 4rem 0; }
.kg-home-feed .kg-kicker { color: var(--kg-accent); }
.kg-section-heading { color: var(--kg-ink); font-family: var(--kg-display); font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 700; letter-spacing: .03em; }
.kg-home-feed .kg-section-heading { color: #eff5f6; }

.kg-dispatch-card {
	background: var(--kg-panel);
	border-bottom: 1px solid #2a333a;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 72px 1fr auto;
	padding: 1.5rem 1.25rem;
	text-decoration: none;
	transition: background .12s ease, transform .12s ease;
}
.kg-dispatch-card:first-of-type { border-top: 2px solid var(--kg-accent-deep); }
.kg-dispatch-card:hover { background: #1c242b; transform: translateX(4px); }
.kg-dispatch-index { color: var(--kg-accent-deep); font-family: var(--kg-display); font-size: .95rem; letter-spacing: .08em; padding-top: .3rem; }
.kg-dispatch-card h3 { color: #eff5f6; font-family: var(--kg-display); font-size: 1.2rem; font-weight: 700; margin: 0 0 .5rem; }
.kg-dispatch-card p { color: #8fa2a9; font-size: 1rem; line-height: 1.6; margin: 0; }
.kg-dispatch-meta { color: #8fa2a9; font-size: .85rem; letter-spacing: .05em; padding-top: .3rem; text-transform: uppercase; white-space: nowrap; }
.kg-dispatch-card .kg-dispatch-index::after {
	color: var(--kg-accent-deep);
	content: '\2192';
	display: block;
	font-size: 1.1rem;
	margin-top: .5rem;
	opacity: 0;
	transition: opacity .12s ease, transform .12s ease;
	transform: translateX(-4px);
}
.kg-dispatch-card:hover .kg-dispatch-index::after { opacity: 1; transform: translateX(0); }

.kg-home-feed .kg-button { background: var(--kg-void); border-color: var(--kg-void); }
.kg-home-feed .kg-button:hover { background: #2a343b; border-color: #2a343b; color: #fff; }

/* Index page: give the list a little more room to breathe than the
   compact homepage teaser. */
.kg-devlog-stream--index .kg-dispatch-card { padding: 1.75rem 1.5rem; }

/* ── Brand & navbar ─────────────────────────────────────────────────── */
.rl-brand {
	align-items: center;
	display: inline-flex;
	font-family: var(--kg-display);
	font-size: 1rem;
	gap: .55rem;
	letter-spacing: .03em;
	opacity: .92;
}
.rl-brand-mark { color: var(--rl-red); }
.rl-brand-icon { height: 26px; width: 26px; }

/* Nav links share the Onest display face with the brand mark and headings. */
.navbar-nav .nav-link {
	font-family: var(--kg-display);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Bottom nav bar - a mobile-only pattern used on "solo" pages (e.g.
   individual devlog posts): on phones the page starts right at the header,
   itch.io-style, with a fixed bottom bar instead of the top navbar. At
   desktop widths this reverts to the normal top navbar - a bottom tab bar
   is a thumb-reach affordance that doesn't belong on a wide screen. */
body.kg-solo-page {
	padding-bottom: 3.75rem;
}
body.kg-solo-page #navbar-container {
	display: none;
}
.rl-bottom-nav {
	background: #121212;
	border-top: 1px solid #2c2c2c;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	left: 0;
	padding: .7rem .5rem;
	position: fixed;
	right: 0;
	z-index: 1030;
}
.rl-bottom-nav-link {
	color: var(--kg-lunar);
	font-family: var(--kg-display);
	font-size: .8rem;
	letter-spacing: .02em;
	padding: .3rem .6rem;
	text-align: center;
	text-decoration: none;
	transition: color .1s ease;
}
.rl-bottom-nav-link:hover,
.rl-bottom-nav-link.active {
	color: var(--kg-accent);
}
.rl-bottom-nav-cta {
	border: 1px solid #56636a;
	border-radius: 2px;
	color: #fff;
}
.rl-bottom-nav-cta:hover {
	background: #2a343b;
	color: #fff;
}


@media (min-width: 768px) {
	body.kg-solo-page {
		padding-bottom: 0;
	}
	body.kg-solo-page #navbar-container {
		display: block;
	}
	body.kg-solo-page .rl-bottom-nav {
		display: none;
	}
}

/* ── Devlog post: scannable blocks ──────────────────────────────────── */
.kg-devlog-entry .devlog-content .kg-lede { font-size: 1.2rem; font-weight: 600; line-height: 1.5; margin-bottom: 1.25rem; }
.kg-figure { margin: 0 0 1.5rem; }
.kg-figure img { border: 1px solid #56636a; display: block; width: 100%; }
.kg-figure figcaption { color: var(--kg-muted); font-size: .82rem; margin-top: .4rem; }
.kg-tldr { background: rgba(255, 255, 255, .04); border-left: 3px solid var(--kg-accent); margin: 0 0 1.5rem; padding: 1rem 1.25rem; }
.kg-tldr ul { list-style: none; margin: 0; padding: 0; }
.kg-tldr li { margin: .35rem 0; }
.kg-compare { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
.kg-compare-card { border: 1px solid #3a484f; padding: 1rem; }
.kg-compare-card--good { border-color: var(--kg-accent); }
.kg-compare-card h6 { color: #eff5f6; font-family: var(--kg-display); font-size: 1.05rem; font-weight: 700; margin: .5rem 0 .25rem; }
.kg-compare-card p { font-size: .92rem !important; }
.kg-tag { border: 1px solid #56636a; color: #b7c4c9; display: inline-block; font-size: .75rem; letter-spacing: .05em; padding: .15rem .55rem; text-transform: uppercase; }
.kg-compare-card--good .kg-tag { border-color: var(--kg-accent); color: var(--kg-accent); }
.kg-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.kg-callout { border-left: 3px solid var(--kg-accent); font-weight: 600; margin: 0 0 1.5rem !important; padding: .25rem 0 .25rem 1rem; }
.kg-pullquote { border-top: 1px solid #3a484f; border-bottom: 1px solid #3a484f; color: #eff5f6; font-family: var(--kg-display); font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; line-height: 1.4; margin: 2rem 0; padding: 1.25rem 0; }
.kg-cta { align-items: center; background: rgba(255, 255, 255, .04); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; }
@media (max-width: 575px) { .kg-compare { grid-template-columns: 1fr; } }

/* ── Dark-mode overrides (press-kit, devlog pages via the theme toggle) ─ */
body.dark-mode .kg-page-shell { background-color: #101519 !important; color: #e2e9eb; }
body.dark-mode .kg-panel { background: #171e23 !important; border-color: #3a484f !important;  }
body.dark-mode .kg-panel-title, body.dark-mode .kg-facts dd, body.dark-mode .kg-feature-list strong, body.dark-mode .kg-rail-title, body.dark-mode .kg-devlog-entry-title, body.dark-mode .kg-section-heading { color: #eff5f6 !important; }
body.dark-mode .kg-copy, body.dark-mode .kg-feature-list li, body.dark-mode .kg-devlog-entry .devlog-content { color: #b9c6cb !important; }
body.dark-mode .kg-devlog-entry .devlog-content h5 { color: #eff5f6 !important; }
body.dark-mode .kg-copy a, body.dark-mode .kg-text-link { color: var(--kg-accent) !important; }
body.dark-mode .kg-copy a:hover, body.dark-mode .kg-text-link:hover { color: #fff !important; }
body.dark-mode .kg-label { color: #8fa2a9 !important; }
body.dark-mode .kg-facts > div, body.dark-mode .kg-feature-list li, body.dark-mode .kg-devlog-entry, body.dark-mode .kg-devlog-stream, body.dark-mode .kg-devlog-rail, body.dark-mode .kg-rail-block { border-color: #3a484f !important; }
body.dark-mode .kg-devlog-entry { background: #171e23 !important; }
body.dark-mode .kg-facts dt, body.dark-mode .kg-devlog-entry-meta { color: #8fa2a9 !important; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.kg-devlog-rail { border-left: 0; border-top: 1px solid #9ca7aa; margin-top: 2rem; padding: 1.5rem 0 0; }
}
@media (max-width: 767px) {
	.kg-hero { padding: 3rem 0 !important; }
	.kg-devlog-entry { padding: 1.15rem 1.25rem; }
	.kg-devlog-entry--solo { padding: 1.5rem 1.25rem; }
	.kg-dispatch-card { grid-template-columns: 52px 1fr; padding: 1.25rem 1rem; }
	.kg-dispatch-meta { grid-column: 2; padding-top: 0; }
}


/* ══ Studio site layer ═══════════════════════════════════════════════════
   Everything below styles the Redshift Labs pages (rl-*). Onest carries the
   voice, JetBrains Mono is the "lab notation" for metadata. */
:root {
	--rl-body: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--rl-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--rl-line: #232a30;
	--rl-text: #aab3b8;
	--rl-nav-h: 64px;
}

/* ── Global details ─────────────────────────────────────────────────── */
body { font-family: var(--rl-body); font-weight: 400; -webkit-font-smoothing: antialiased; }
h3, h4, h5, h6 { font-family: var(--rl-body); }
h1, h2, h3, .rl-h2 { letter-spacing: -.02em; }
::selection { background: var(--rl-red); color: #fff; }
html { scrollbar-color: #2e363c var(--kg-void); scrollbar-width: thin; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
section[id] { scroll-margin-top: calc(var(--rl-nav-h) + 3.5rem); }
a:focus-visible, button:focus-visible, .rl-btn:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--kg-accent);
	outline-offset: 3px;
}

/* Film grain over every page: keeps the flat darks from looking digital. */
body::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	content: '';
	inset: 0;
	opacity: .05;
	pointer-events: none;
	position: fixed;
	z-index: 2000;
}

/* Metadata speaks mono. */
.rl-eyebrow, .rl-card-meta, .rl-tags span, .rl-person .rl-role, .rl-note,
.rl-footer-copy, .rl-subnav a, .kg-kicker, .kg-label, .rl-readout {
	font-family: var(--rl-mono);
	font-weight: 500;
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
/* Sticky, reserved height so nothing jumps while the component loads. */
#navbar-container { min-height: var(--rl-nav-h); position: sticky; top: 0; z-index: 1030; }
#navbar-container .navbar {
	animation: rl-fade-in .35s ease both;
	background: rgba(10, 13, 16, .82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rl-line);
	min-height: var(--rl-nav-h);
	transition: background .25s ease, border-color .25s ease;
}
/* Pages that open on a hero: the bar floats over it until you scroll. */
body.rl-overlay-nav #navbar-container { margin-bottom: calc(-1 * var(--rl-nav-h)); }
body.rl-overlay-nav:not(.rl-scrolled) #navbar-container .navbar {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: transparent;
}
@media (max-width: 991px) {
	#navbar-container .navbar-collapse.show,
	#navbar-container .navbar-collapse.collapsing { background: rgba(10, 13, 16, .97); margin: .5rem -.75rem 0; padding: .5rem .75rem 1rem; }
}
.rl-brand { font-weight: 700; letter-spacing: -.01em; opacity: 1; }
.rl-brand-logo { display: block; height: 28px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); width: auto; }
.navbar-brand:hover .rl-brand-logo { transform: rotate(-8deg) scale(1.06); }
.navbar-nav .nav-link { color: #aab3b8; font-weight: 500; position: relative; }
.navbar-nav .nav-link:hover { color: #fff; }
.navbar-nav .nav-link.active { color: #fff; }
.navbar-nav .nav-link.active::after {
	background: var(--rl-red);
	border-radius: 50%;
	bottom: .15rem;
	content: '';
	height: 4px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 4px;
}
@media (max-width: 991px) { .navbar-nav .nav-link.active::after { left: -.6rem; top: 50%; bottom: auto; transform: translateY(-50%); } }
.navbar-toggler { border: 1px solid #3a3f44; border-radius: 2px; padding: .4rem .6rem; }
.navbar-toggler:focus, .navbar-toggler:focus-visible { box-shadow: 0 0 0 2px rgba(229, 84, 79, .35); outline: none; }
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%23e5544f' stroke-width='2' stroke-linecap='round' d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E");
	height: 1.15em;
	width: 1.15em;
}
@keyframes rl-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Buttons ────────────────────────────────────────────────────────── */
.rl-btn {
	align-items: center;
	background: rgba(10, 13, 16, .35);
	border: 1px solid #4a5157;
	border-radius: 2px;
	color: #fff;
	display: inline-flex;
	font-family: var(--rl-body);
	font-size: .95rem;
	font-weight: 600;
	gap: .5rem;
	padding: .75rem 1.4rem;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rl-btn:hover { background: #22282d; border-color: #8a9299; color: #fff; }
.rl-btn--primary { background: var(--rl-red); border-color: var(--rl-red); }
.rl-btn--primary:hover { background: #a92826; border-color: #a92826; }
.rl-btn--primary::after { content: '\2192'; transition: transform .2s ease; }
.rl-btn--primary:hover::after { transform: translateX(3px); }
.rl-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── Sections & type ────────────────────────────────────────────────── */
.rl-section { background: var(--kg-void); border-bottom: 1px solid #1a2025; padding: clamp(3.5rem, 8vw, 6rem) 0; position: relative; }
.rl-section--raised { background: var(--kg-void-raised); }
.rl-eyebrow { align-items: center; color: var(--kg-accent); display: inline-flex; font-size: .75rem; gap: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.rl-eyebrow::before { background: currentColor; content: ''; height: 1px; width: 1.5rem; }
.rl-h2 { color: #f2f3f3; font-family: var(--kg-display); font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; line-height: 1.15; margin: 0 0 1rem; }
.rl-lede { color: var(--rl-text); font-size: 1.15rem; line-height: 1.6; max-width: 40rem; }
.rl-text { color: var(--rl-text); line-height: 1.7; }
.rl-more { color: var(--kg-accent); font-weight: 600; text-decoration: none; }
.rl-more:hover { color: #fff; }
.rl-note { color: #8f9aa0; font-size: .75rem; letter-spacing: .08em; margin: 1rem 0 0; text-transform: uppercase; }

/* ── Heroes ─────────────────────────────────────────────────────────── */
.rl-game-hero, .rl-hero { overflow: hidden; position: relative; }
.rl-game-hero { background: var(--kg-void); padding: calc(var(--rl-nav-h) + clamp(4rem, 10vw, 8rem)) 0 clamp(3rem, 6vw, 4.5rem); }
/* Screenshot drifts very slowly behind a vignette and a faint red horizon. */
.rl-game-hero::before {
	background: url('../images/o9DtpA.png') center / cover no-repeat;
	content: '';
	inset: -3%;
	position: absolute;
}
.rl-game-hero::after {
	background:
		radial-gradient(120% 70% at 50% 110%, rgba(198, 49, 47, .22), transparent 60%),
		linear-gradient(90deg, rgba(10, 13, 16, .92) 0%, rgba(10, 13, 16, .55) 60%, rgba(10, 13, 16, .35) 100%),
		linear-gradient(180deg, rgba(10, 13, 16, .6) 0%, transparent 30%, rgba(10, 13, 16, .98) 100%);
	content: '';
	inset: 0;
	position: absolute;
}
.rl-game-hero .container { position: relative; z-index: 1; }
.rl-game-hero h1 { color: #fff; font-size: clamp(3rem, 10vw, 6.5rem); font-weight: 800; letter-spacing: .02em; line-height: .95; margin: .5rem 0 1rem; text-transform: uppercase; }
.rl-game-hero .rl-lede { color: #d6dbdd; margin-bottom: 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
	.rl-game-hero::before { animation: rl-drift 40s ease-in-out infinite alternate; }
}
@keyframes rl-drift {
	from { transform: scale(1.02) translate3d(0, 0, 0); }
	to { transform: scale(1.1) translate3d(-2%, -1.5%, 0); }
}

.rl-hero { background: radial-gradient(90% 80% at 85% 0%, rgba(198, 49, 47, .16), transparent 60%), var(--kg-void); padding: calc(var(--rl-nav-h) + clamp(3.5rem, 9vw, 7rem)) 0 clamp(3rem, 6vw, 4.5rem); }
.rl-hero h1 { color: #fff; font-size: clamp(2.6rem, 7.5vw, 5rem); font-weight: 800; line-height: 1.02; margin: .75rem 0 1.25rem; }
.rl-hero h1 span { color: var(--rl-red); }
.rl-hero .rl-lede { margin-bottom: 0; }

/* Colony status readout: a small, live line from the game's world. */
.rl-readout {
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: #8f9aa0;
	display: flex;
	flex-wrap: wrap;
	font-size: .72rem;
	gap: .4rem 1.75rem;
	letter-spacing: .1em;
	margin-top: clamp(2.5rem, 6vw, 4rem);
	max-width: 36rem;
	padding-top: 1rem;
	text-transform: uppercase;
}
.rl-readout span { align-items: center; display: inline-flex; gap: .5rem; }
.rl-readout b { color: #d6dbdd; font-variant-numeric: tabular-nums; font-weight: 500; }
.rl-readout .rl-dot { background: #6fcf8e; border-radius: 50%; box-shadow: 0 0 8px rgba(111, 207, 142, .7); height: 6px; width: 6px; }
.rl-readout.is-storm b { color: var(--kg-accent); }
@media (prefers-reduced-motion: no-preference) {
	.rl-readout.is-storm b { animation: rl-blink .5s steps(2) 6; }
}
@keyframes rl-blink { 50% { opacity: 0; } }

.rl-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.rl-tags span { background: rgba(10, 13, 16, .4); border: 1px solid #3a4248; color: #cfd5d8; font-size: .7rem; letter-spacing: .1em; padding: .35rem .7rem; text-transform: uppercase; }

/* ── USPs: open columns, numbered, rule fills red on hover ──────────── */
.rl-usps { counter-reset: usp; display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(3, 1fr); }
.rl-usp { border-top: 1px solid #2e363c; counter-increment: usp; padding-top: 1.5rem; position: relative; }
.rl-usp::before {
	background: var(--rl-red);
	content: '';
	height: 2px;
	left: 0;
	position: absolute;
	top: -1px;
	transition: width .5s cubic-bezier(.2, .8, .2, 1);
	width: 2.5rem;
}
.rl-usp:hover::before { width: 100%; }
.rl-usp::after {
	color: #56626a;
	content: counter(usp, decimal-leading-zero);
	font-family: var(--rl-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	position: absolute;
	right: 0;
	top: 1.5rem;
}
.rl-usp-icon { color: var(--kg-accent); height: 30px; margin-bottom: 1.1rem; width: 30px; }
.rl-usp h3 { color: #f2f3f3; font-family: var(--kg-display); font-size: 1.3rem; font-weight: 700; margin: 0 0 .6rem; }
.rl-usp p { color: var(--rl-text); line-height: 1.65; margin: 0; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.rl-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.rl-cards--2 { grid-template-columns: repeat(2, 1fr); }
.rl-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%), var(--kg-panel);
	border: 1px solid var(--rl-line);
	color: inherit;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}
.rl-card:hover { border-color: #3d464d; color: inherit; }
.rl-card h3 {
	align-self: flex-start;
	background: linear-gradient(var(--rl-red), var(--rl-red)) 0 100% / 0 2px no-repeat;
	color: #f2f3f3;
	font-family: var(--kg-display);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 .7rem;
	padding-bottom: .15rem;
	transition: background-size .35s ease;
}
.rl-card:hover h3 { background-size: 100% 2px; }
.rl-card p { color: #97a3a9; flex: 1; line-height: 1.6; margin: 0 0 1.1rem; }
.rl-card-meta { align-items: center; color: #7f8b91; display: flex; font-size: .7rem; gap: .5rem; letter-spacing: .1em; text-transform: uppercase; }
.rl-card-meta::after { color: var(--kg-accent); content: '\2192'; font-size: .9rem; opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; }
.rl-card:hover .rl-card-meta::after { opacity: 1; transform: translateX(0); }

/* Wide image card (articles). */
.rl-card--article { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; padding: 0; }
.rl-card--article .rl-card-media { overflow: hidden; }
.rl-card--article img { display: block; height: 100%; min-height: 240px; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); width: 100%; }
.rl-card--article:hover img { transform: scale(1.04); }
.rl-card--article .rl-card-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.rl-card--article h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: .6rem; }

/* Research is its own strand, visually distinct from the Kosmograd devlog. */
.rl-research .rl-eyebrow { color: #7fb8e6; }
.rl-card--research { border-color: #22303c; }
.rl-card--research:hover { border-color: #3c5468; }
.rl-card--research h3 { background-image: linear-gradient(#7fb8e6, #7fb8e6); }
.rl-card--research .rl-card-meta::after { color: #7fb8e6; }

/* ── Kosmograd page ─────────────────────────────────────────────────── */
.rl-subnav { background: rgba(18, 23, 28, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rl-line); position: sticky; top: var(--rl-nav-h); z-index: 1000; }
.rl-subnav .container { display: flex; gap: 1.75rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.rl-subnav a { color: #8f9aa0; font-size: .72rem; letter-spacing: .12em; padding: 1rem 0; text-decoration: none; text-transform: uppercase; }
.rl-subnav a:hover { color: #fff; }
.rl-trailer {
	align-items: center;
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, .02) 12px 13px), var(--kg-panel);
	border: 1px solid var(--rl-line);
	color: #7f8b91;
	display: flex;
	font-family: var(--rl-mono);
	font-size: .75rem;
	justify-content: center;
	letter-spacing: .12em;
	text-transform: uppercase;
	width: 100%;
}
.rl-pillars { display: grid; gap: 3rem 3.5rem; grid-template-columns: repeat(2, 1fr); }
.rl-pillars h3 { color: #f2f3f3; font-family: var(--kg-display); font-size: 1.35rem; font-weight: 700; margin: 0 0 .6rem; }
.rl-pillars h3::before { background: var(--rl-red); content: ''; display: block; height: 2px; margin-bottom: 1rem; width: 2.5rem; }
.rl-pillars p { color: var(--rl-text); line-height: 1.7; margin: 0; }
.rl-pillar-wide { border-left: 2px solid var(--rl-red); grid-column: 1 / -1; padding-left: 1.5rem; }
.rl-pillar-wide h3::before { display: none; }
.rl-checklist { counter-reset: check; display: grid; gap: 0 3rem; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
.rl-checklist li { border-top: 1px solid var(--rl-line); counter-increment: check; padding: 1.1rem 0 1.1rem 2.5rem; position: relative; }
.rl-checklist li::before { color: var(--kg-accent); content: counter(check, decimal-leading-zero); font-family: var(--rl-mono); font-size: .75rem; left: 0; position: absolute; top: 1.35rem; }
.rl-checklist strong { color: #f2f3f3; display: block; font-family: var(--kg-display); font-size: 1.05rem; font-weight: 700; margin-bottom: .2rem; }
.rl-checklist span { color: var(--rl-text); line-height: 1.55; }

/* Screenshots: click to enlarge. */
.rl-shots { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
.rl-shot { margin: 0; }
.rl-shot button { background: none; border: 1px solid var(--rl-line); cursor: zoom-in; display: block; overflow: hidden; padding: 0; width: 100%; }
.rl-shot img { aspect-ratio: 16 / 9; display: block; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); width: 100%; }
.rl-shot button:hover img { transform: scale(1.03); }
.rl-shot figcaption { color: #7f8b91; font-family: var(--rl-mono); font-size: .7rem; letter-spacing: .1em; margin-top: .6rem; text-transform: uppercase; }
.rl-lightbox { background: transparent; border: 0; max-height: 92vh; max-width: min(1400px, 94vw); padding: 0; }
.rl-lightbox::backdrop { background: rgba(5, 7, 9, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rl-lightbox img { display: block; max-height: 86vh; max-width: 100%; }
.rl-lightbox p { color: #8f9aa0; font-family: var(--rl-mono); font-size: .72rem; letter-spacing: .1em; margin: .75rem 0 0; text-align: center; text-transform: uppercase; }

/* ── Team ───────────────────────────────────────────────────────────── */
.rl-team { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(3, 1fr); }
.rl-person { border-top: 1px solid #2e363c; padding-top: 1.25rem; position: relative; }
.rl-person::before { background: var(--rl-red); content: ''; height: 2px; left: 0; position: absolute; top: -1px; width: 2.5rem; }
.rl-person h3 { color: #f2f3f3; font-family: var(--kg-display); font-size: 1.35rem; font-weight: 700; margin: 0 0 .35rem; }
.rl-person .rl-role { color: var(--kg-accent); font-size: .68rem; letter-spacing: .1em; margin-bottom: .8rem; text-transform: uppercase; }
.rl-person p { color: var(--rl-text); line-height: 1.6; margin: 0; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.rl-footer { background: var(--kg-void); border-top: 1px solid var(--rl-line); padding: clamp(3rem, 7vw, 5rem) 0 2rem; }
.rl-footer-sign {
	color: #f2f3f3;
	font-family: var(--kg-display);
	font-size: clamp(1.9rem, 5.5vw, 4rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.02;
	margin: 0 0 clamp(2.5rem, 6vw, 4rem);
	max-width: 16ch;
	opacity: .9;
}
.rl-footer-sign span { color: var(--rl-red); }
.rl-footer-row { align-items: center; border-top: 1px solid var(--rl-line); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-top: 1.5rem; }
.rl-footer-brand { align-items: center; color: #f2f3f3; display: inline-flex; font-weight: 700; gap: .5rem; text-decoration: none; }
.rl-footer-brand:hover { color: #fff; }
.rl-footer-brand img { height: 22px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); width: auto; }
.rl-footer-brand:hover img { transform: rotate(-8deg); }
.rl-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.rl-footer-links a { color: #8f9aa0; font-size: .9rem; text-decoration: none; }
.rl-footer-links a:hover { color: #fff; }
.rl-footer-copy { color: #5d686e; font-size: .7rem; letter-spacing: .1em; margin: 0; text-transform: uppercase; }

/* ── 404 ────────────────────────────────────────────────────────────── */
.rl-404 { align-items: center; display: flex; min-height: 100vh; }
.rl-404 .rl-code { color: var(--kg-accent); font-family: var(--rl-mono); font-size: .8rem; letter-spacing: .14em; }

/* ── Scroll reveal (hidden state is only ever added by JS) ──────────── */
.rl-reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rl-delay, 0s); }
.rl-reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.rl-cards, .rl-cards--2, .rl-usps, .rl-pillars, .rl-shots, .rl-team, .rl-checklist, .rl-card--article { grid-template-columns: 1fr; }
	.rl-card--article img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
	.rl-footer-row { align-items: flex-start; flex-direction: column; }
	/* Narrow screens lose the side-to-side fade, so darken the art evenly. */
	.rl-game-hero::before { opacity: .45; }

	/* Phones get the skim version: headlines and visuals, with the long copy
	   either dropped (when it repeats nearby content) or folded away. */
	.rl-section { padding: 2.75rem 0; }
	.rl-game-hero { padding-top: calc(var(--rl-nav-h) + 3rem); }
	.rl-tags span:nth-child(n + 4),
	.rl-readout span:nth-child(2) { display: none; }
	.rl-readout { margin-top: 2rem; }
	.rl-hide-sm { display: none !important; }

	/* USPs collapse to a compact icon + title list. */
	.rl-usps { gap: 0; }
	.rl-usp { align-items: center; display: flex; gap: 1rem; padding: 1rem 0; }
	.rl-usp::after, .rl-usp p { display: none; }
	.rl-usp-icon { flex: none; height: 24px; margin: 0; width: 24px; }
	.rl-usp h3 { font-size: 1.1rem; margin: 0; }

	/* Cards keep title + meta; excerpts go, except a short one on articles. */
	.rl-card p { display: none; }
	.rl-card--article p { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden; }
	.rl-card h3 { margin-bottom: .5rem; }

	/* Gameplay pillars become an accordion (see setupPillars in site.js). */
	.rl-pillars { gap: 0; }
	.rl-pillar { border-top: 1px solid var(--rl-line); }
	.rl-pillar-wide { border-left: 0; padding-left: 0; }
	.rl-pillars .rl-pillar h3::before { display: none; }
	.rl-pillar summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; padding: 1rem 0; }
	.rl-pillar summary::after { color: var(--kg-accent); content: '+'; font-family: var(--rl-mono); font-size: 1.1rem; }
	.rl-pillar[open] summary::after { content: '\2212'; }
	.rl-pillar summary h3 { font-size: 1.1rem; margin: 0; }
	.rl-pillar p { padding-bottom: 1.1rem; }

	/* Screenshots become a swipeable strip instead of a tall stack. */
	.rl-shots { display: flex; gap: .75rem; margin: 0 -.75rem; overflow-x: auto; padding: 0 .75rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.rl-shots::-webkit-scrollbar { display: none; }
	.rl-shot { flex: 0 0 85%; scroll-snap-align: start; }

	/* Team: names and roles only. */
	.rl-team { gap: 1.25rem; }
	.rl-person p:not(.rl-role) { display: none; }
	.rl-person .rl-role { margin: 0; }

	.rl-footer-sign { font-size: 1.75rem; margin-bottom: 2rem; }
}

/* Pillar summaries only act as toggles on phones. */
.rl-pillar summary { list-style: none; }
.rl-pillar summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) { .rl-pillar summary { cursor: default; display: block; pointer-events: none; } }

/* ── Devlog index ───────────────────────────────────────────────────── */
.rl-devlog-list { display: grid; gap: 1rem; }
.rl-devlog-list .rl-card h3 { font-size: 1.35rem; }
.rl-devlog-list .rl-card-meta::after { display: none; }
.rl-devlog-aside { position: sticky; top: calc(var(--rl-nav-h) + 2rem); }