@font-face { font-family: "VT323"; src: url("fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  --ground: #14110D; --panel: #1E1A14; --rule: #3A3326; --amber: #F2B45A; --sand: #D8B979; --chalk: #EDE6D6;
  --olive: #7D8F5A; --olive-dark: #5B5A3C; --red: #9C3B2E; --orange: #C8552A; --cyan: #5FD3E0; --muted: #A89A7A;
  --term: "VT323", "Courier New", ui-monospace, monospace; --paper: Georgia, "Times New Roman", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--sand); font: 17px/1.55 var(--paper); padding-inline: 16px; }
body::before {   /* dust: a fixed grain over everything, faint */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--chalk); }
img { max-width: 100%; height: auto; display: block; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.wrap { max-width: 1080px; margin: 0 auto; }
header.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; padding-block: 28px 14px;
             border-bottom: 1px solid var(--rule); }
header.top .logo img { width: min(420px, 78vw); }
header.top .stamp { font: 20px/1.1 var(--term); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 22px/1 var(--term); text-transform: uppercase; letter-spacing: .05em; }
nav a { text-decoration: none; color: var(--sand); }
nav a[aria-current] { color: var(--amber); }
.crt-toggle { font: 18px/1 var(--term); background: none; border: 1px solid var(--rule); color: var(--muted); padding: 4px 8px; cursor: pointer; }
h1, h2, h3 { font-family: var(--term); font-weight: 400; color: var(--chalk); text-wrap: balance; letter-spacing: .02em; }
h1 { font-size: clamp(40px, 7vw, 68px); line-height: .95; margin: 0 0 10px; }
h2 { font-size: clamp(30px, 4.4vw, 42px); line-height: 1; margin: 0 0 6px; }
h3 { font-size: 26px; line-height: 1.05; margin: 0 0 4px; }
.kicker { font: 20px/1 var(--term); color: var(--olive); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.kicker.red { color: var(--orange); }
section { padding-block: 44px; border-bottom: 1px solid var(--rule); }
p { max-width: 64ch; margin: 0 0 12px; }
.lede { font-size: 20px; color: var(--chalk); }
.dim { color: var(--muted); }

/* the hero: the painting from the title screen, the line, and the status terminal */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .hero > div:last-child { order: -1; } }
.frame { position: relative; border: 1px solid var(--rule); background: #000; }
.frame .label { position: absolute; left: 0; top: 0; font: 17px/1 var(--term); color: var(--ground); background: var(--sand); padding: 3px 7px;
                letter-spacing: .05em; }
.terminal { background: #0E0C09; border: 1px solid var(--rule); padding: 16px 18px; font: 22px/1.25 var(--term); color: var(--amber); position: relative; }
.terminal .row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dotted #3a2f1c; padding-block: 2px; }
.terminal .row span:last-child { color: var(--chalk); font-variant-numeric: tabular-nums; text-align: right; }
.terminal .warn span:last-child { color: var(--orange); }
.terminal .note { margin-top: 14px; color: var(--sand); font-size: 21px; }
.terminal .note b { color: var(--muted); font-weight: 400; display: block; font-size: 17px; letter-spacing: .06em; }
.cursor::after { content: "_"; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* CRT: discreet, optional, on frames and terminals only; weaker on phones */
.crt .hero .frame::after, .crt .terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.crt .terminal { text-shadow: 0 0 6px rgba(242,180,90,.35); }
@media (max-width: 600px) { .crt .hero .frame::after { opacity: .5; } }
.gallery figure:hover img { animation: jolt .28s steps(2) 1; }
@keyframes jolt { 0% { transform: translate(0,0); } 50% { transform: translate(-2px,1px); filter: saturate(1.4); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gallery figure:hover img, .cursor::after { animation: none; } }

/* field footage */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
figure { margin: 0; }
figcaption { font-size: 15.5px; color: var(--muted); padding-top: 8px; }
figcaption b { font: 19px/1 var(--term); color: var(--sand); font-weight: 400; letter-spacing: .04em; margin-right: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
.logline { font: 21px/1.2 var(--term); color: var(--amber); border-left: 3px solid var(--red); padding: 4px 0 4px 10px; margin: 10px 0; }

/* case files */
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.file { background: #E4D6B4; color: #2B2418; padding: 16px 18px 14px; position: relative; border-top: 6px solid var(--swatch, #6F7458);
        box-shadow: 3px 3px 0 #0006; }
.file h3 { color: #1E1912; font-size: 27px; }
.file .meta { font: 17px/1 var(--term); letter-spacing: .06em; text-transform: uppercase; color: #6C5D40; margin-bottom: 8px; }
.file p { font-size: 15.5px; margin: 0 0 8px; }
.file dt { font: 17px/1 var(--term); text-transform: uppercase; color: #6C5D40; letter-spacing: .05em; margin-top: 8px; }
.file dd { margin: 2px 0 0; font-size: 15.5px; }
.redact { background: #1E1912; color: transparent; cursor: pointer; border-radius: 1px; user-select: none; }
.redact:focus-visible { outline: 2px solid var(--orange); }
.redact.open { background: none; color: inherit; user-select: auto; cursor: auto; }
.stamp-mark { position: absolute; right: 12px; top: 10px; font: 18px/1 var(--term); color: var(--red); border: 2px solid var(--red);
              padding: 2px 6px; transform: rotate(4deg); opacity: .8; letter-spacing: .08em; }

/* dossiers */
.dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.dossier { display: grid; grid-template-columns: 116px 1fr; gap: 14px; background: var(--panel); border: 1px solid var(--rule); padding: 12px; }
.dossier img { width: 116px; height: 142px; background: #000; }
.dossier p { font-size: 15px; margin: 0 0 6px; }
.dossier .voice { font: 18px/1.1 var(--term); color: var(--olive); }

/* atlas */
.atlas { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; }
@media (max-width: 820px) { .atlas { grid-template-columns: 1fr; } }
.places { list-style: none; margin: 0; padding: 0; columns: 2 220px; column-gap: 24px; }
.places li { break-inside: avoid; padding: 0 0 10px; font-size: 15px; }
.places li b { font: 20px/1 var(--term); color: var(--chalk); font-weight: 400; display: block; letter-spacing: .03em; }

/* devlog */
.log { display: grid; gap: 14px; }
.entry { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
@media (max-width: 560px) { .entry { grid-template-columns: 1fr; gap: 2px; } }
.entry .v { font: 22px/1.1 var(--term); color: var(--amber); }
.entry .v small { display: block; color: var(--muted); font-size: 17px; }
.status { font: 22px/1.2 var(--term); color: var(--chalk); border: 1px dashed var(--olive); padding: 12px 14px; max-width: 64ch; }
.status b { color: var(--orange); font-weight: 400; }
footer { padding-block: 34px 60px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
         font: 18px/1.2 var(--term); color: var(--muted); }
footer img { width: 120px; }