/* A-SYNC // LIMINAL PROTOCOL — website. Same look as the game's UI (Source/AsyncLiminal/Public/UI/AsyncUI.h). */
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "VT323"; src: url("/fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }

:root {
	--amber: #ecbe52;
	--amber-dim: #96722e;
	--paper: #eee8d6;
	--paper-dim: #a8a292;
	--mute: #68645a;
	--ink: #0d0c08;
	--line: rgba(255, 230, 180, 0.14);
	--display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, monospace;
	--osd: "VT323", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); }
body { margin: 0; font: 400 16px/1.65 var(--mono); }
a { color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--paper); }
img { max-width: 100%; display: block; }

/* Faint scanlines over everything, like the visor. */
body::after {
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
}

.wrap { width: min(1120px, 100% - 48px); margin: 0 auto; }
.label { font: 400 12px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); }

/* ---------------------------------------------------------------- Top bar */
.top { position: absolute; inset: 0 0 auto; z-index: 5; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; }
.top nav a { margin-left: 22px; font: 400 13px var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--paper-dim); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { color: var(--amber); }
.rec { font: 28px/1 var(--osd); color: var(--paper); letter-spacing: 0.06em; }
.rec::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; background: #e0291e; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; min-height: min(92vh, 880px); display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 5, 3, 0.92) 0%, rgba(5, 5, 3, 0.55) 55%, rgba(5, 5, 3, 0.2) 100%), linear-gradient(0deg, var(--ink) 0%, transparent 40%); }
.hero .wrap { position: relative; z-index: 2; padding: 120px 0 72px; }
.logo { width: min(620px, 100%); aspect-ratio: 2048 / 600; background: var(--amber); -webkit-mask: url("/assets/logo.png") center / contain no-repeat; mask: url("/assets/logo.png") center / contain no-repeat; filter: drop-shadow(3px 0 0 rgba(255, 40, 20, 0.35)) drop-shadow(-3px 0 0 rgba(30, 120, 255, 0.35)); }
.hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tagline { max-width: 560px; margin: 28px 0 0; font: 600 clamp(26px, 3.4vw, 38px)/1.12 var(--display); color: var(--paper); text-transform: uppercase; letter-spacing: 0.02em; }
.hero p.lead { max-width: 560px; color: var(--paper-dim); margin: 18px 0 0; }
.status { display: inline-flex; gap: 12px; align-items: center; margin-top: 30px; padding: 10px 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); font: 400 13px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.status b { color: var(--amber); font-weight: 400; }
.osd { position: absolute; z-index: 2; right: 32px; bottom: 28px; text-align: right; font: 30px/1 var(--osd); color: var(--paper); text-shadow: 2px 0 rgba(255, 40, 20, 0.4), -2px 0 rgba(30, 120, 255, 0.4); }

/* ---------------------------------------------------------------- Sections */
section { padding: 88px 0; border-bottom: 1px solid var(--line); }
h2 { margin: 10px 0 18px; font: 600 clamp(32px, 4vw, 46px)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.intro { max-width: 720px; color: var(--paper-dim); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin-top: 44px; background: var(--line); border: 1px solid var(--line); }
.features article { background: var(--ink); padding: 26px 24px 30px; }
.features h3 { margin: 12px 0 8px; font: 600 24px/1.1 var(--display); text-transform: uppercase; color: var(--paper); }
.features p { margin: 0; font-size: 14px; color: var(--paper-dim); }
.features .label { color: var(--amber-dim); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 40px; }
.gallery figure { margin: 0; position: relative; border: 1px solid var(--line); }
.gallery figcaption { position: absolute; left: 12px; bottom: 10px; font: 22px/1 var(--osd); color: var(--paper); text-shadow: 0 1px 2px #000; }

/* ---------------------------------------------------------------- Legal pages */
.doc { padding: 140px 0 80px; }
.doc .wrap { max-width: 820px; }
.doc h1 { margin: 10px 0 6px; font: 600 clamp(36px, 5vw, 54px)/1.05 var(--display); text-transform: uppercase; }
.doc .meta { color: var(--mute); font-size: 13px; letter-spacing: 0.08em; }
.doc h2 { margin: 56px 0 14px; font-size: 30px; }
.doc h3 { margin: 30px 0 8px; font: 600 21px/1.2 var(--display); text-transform: uppercase; color: var(--amber); letter-spacing: 0.03em; }
.doc p, .doc li { color: #d9d3c2; font-size: 15px; }
.doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc .summary { border: 1px solid var(--line); border-left: 3px solid var(--amber); padding: 18px 22px; background: rgba(255, 230, 180, 0.03); }
.table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13.5px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 12px; border-bottom: 1px solid var(--line); }
.table th { font: 400 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
.table td:first-child { color: var(--paper); width: 24%; }
.table td { color: #cfc9b8; }
.fill { background: rgba(236, 190, 82, 0.18); color: var(--amber); padding: 0 4px; }

/* ---------------------------------------------------------------- Footer */
footer { padding: 40px 0 60px; color: var(--mute); font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; }
footer a { color: var(--paper-dim); }

@media (max-width: 640px) {
	.top nav a { margin-left: 14px; }
	.osd { display: none; }
	.table td:first-child { width: auto; }
}