/* The Retro Experience.

   ZERO JavaScript, by policy. The edge serves these bytes with
   script-src 'none', so an injected <script> cannot execute even in the
   window before a defacement is noticed. Everything below is CSS: the
   scanlines, the glow, the phosphor flicker. No canvas, no framework,
   no build step - the page you read is the file on disk.

   Palette is a monochrome-monitor amber over CRT-dark, with a cyan
   secondary borrowed from 8-bit home computers. Deliberately not a
   rainbow: the machines this site is about mostly had one colour of
   light and made it count. */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --bg:#0a0b0f;
  --bg2:#10131b;
  --panel:rgba(20,24,34,.78);
  --line:rgba(255,176,0,.22);
  --line2:rgba(255,176,0,.45);
  --text:#e6e3da;
  --muted:#9a9789;
  --dim:#6b6a61;
  --amber:#ffb000;      /* the monochrome monitor */
  --cyan:#4ee0d0;       /* the home-computer second colour */
  --magenta:#ff5f8f;
  --max:1080px;
  --pixel:'Press Start 2P', ui-monospace, monospace;
  --term:'VT323', ui-monospace, monospace;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16.5px/1.7 var(--body);
  overflow-x:hidden;
  background-image:
    radial-gradient(900px 500px at 50% -10%, rgba(255,176,0,.10), transparent 60%),
    radial-gradient(700px 400px at 90% 10%, rgba(78,224,208,.06), transparent 60%);
  background-attachment:fixed;
}

/* Scanlines. A fixed overlay rather than a background so it never scrolls
   out of register with the content underneath. pointer-events:none so it
   cannot swallow a click. */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60;
  background:repeating-linear-gradient(
    180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  mix-blend-mode:multiply;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---- header ---- */
header.top{
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg,#0b0d12,rgba(10,11,15,.82));
  backdrop-filter:blur(8px);
}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:70px;gap:16px;flex-wrap:wrap}
.brand{
  font-family:var(--pixel); font-size:13px; line-height:1.5; color:var(--amber);
  text-decoration:none; letter-spacing:.5px;
  text-shadow:0 0 12px rgba(255,176,0,.55);
}
.brand small{display:block;font-family:var(--term);font-size:15px;color:var(--dim);
  letter-spacing:2px;text-shadow:none;margin-top:5px}
nav.main a{
  color:var(--muted); margin-left:20px; text-decoration:none;
  font-family:var(--term); font-size:19px; letter-spacing:1px;
}
nav.main a:hover{color:var(--amber)}

/* ---- hero ---- */
.hero{padding:74px 0 40px;position:relative}
.hero h1{
  font-family:var(--pixel); font-size:clamp(19px,3.6vw,34px); line-height:1.55;
  margin:0 0 26px; color:var(--text);
  text-shadow:0 0 18px rgba(255,176,0,.35);
}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.lead{font-size:clamp(17px,2.1vw,20px);color:var(--muted);max-width:62ch;margin:0 0 26px}
.kicker{
  font-family:var(--term); font-size:19px; letter-spacing:3px;
  text-transform:uppercase; color:var(--cyan); margin:0 0 18px;
}

/* The blinking cursor is CSS only. steps(1) so it snaps like a real
   terminal rather than fading like a web animation. */
.cursor{display:inline-block;width:.62em;height:1.05em;vertical-align:-2px;
  background:var(--amber);animation:blink 1.06s steps(1) infinite;
  box-shadow:0 0 10px rgba(255,176,0,.8)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.btn{
  display:inline-block;padding:12px 20px;border:1px solid var(--line2);
  color:var(--amber);text-decoration:none;font-family:var(--term);font-size:20px;
  letter-spacing:1.5px;margin:0 10px 10px 0;background:rgba(255,176,0,.05);
}
.btn:hover{background:rgba(255,176,0,.14);box-shadow:0 0 18px rgba(255,176,0,.25)}
.btn.alt{border-color:rgba(78,224,208,.45);color:var(--cyan);background:rgba(78,224,208,.05)}
.btn.alt:hover{background:rgba(78,224,208,.13);box-shadow:0 0 18px rgba(78,224,208,.22)}

/* ---- the loading bar: a stripe of 8-bit colour, pure CSS ---- */
.loader{display:flex;height:16px;margin:40px 0 0;border:1px solid var(--line);
  background:#07080c}
.loader i{flex:1}
.loader i:nth-child(8n+1){background:#ffb000}
.loader i:nth-child(8n+2){background:#4ee0d0}
.loader i:nth-child(8n+3){background:#ff5f8f}
.loader i:nth-child(8n+4){background:#7b71d6}
.loader i:nth-child(8n+5){background:#8ee65a}
.loader i:nth-child(8n+6){background:#ffffff}
.loader i:nth-child(8n+7){background:#ff8a3d}
.loader i:nth-child(8n){background:#3a6ea5}

/* ---- sections ---- */
section{padding:58px 0;border-top:1px solid rgba(255,176,0,.12)}
h2{font-family:var(--pixel);font-size:clamp(14px,2vw,18px);line-height:1.6;
  margin:0 0 12px;color:var(--amber);text-shadow:0 0 14px rgba(255,176,0,.3)}
p.sub{color:var(--muted);max-width:66ch;margin:0 0 30px}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  border:1px solid var(--line);background:var(--panel);padding:22px;
  position:relative;
}
.card:hover{border-color:var(--line2);box-shadow:0 0 26px rgba(255,176,0,.10)}
.card .tag{font-family:var(--term);font-size:17px;letter-spacing:2px;
  text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:9px}
.card h3{font-family:var(--body);font-weight:600;font-size:17.5px;margin:0 0 9px;color:var(--text)}
.card p{margin:0;color:var(--muted);font-size:15px}

/* ---- the spec block, styled like a machine's data plate ---- */
.plate{border:1px solid var(--line);background:#07080c;padding:20px 22px;
  font-family:var(--term);font-size:19px;line-height:1.85;color:var(--muted);
  overflow-x:auto}
.plate b{color:var(--amber);font-weight:400;display:inline-block;min-width:15ch}
.plate .ok{color:var(--cyan)}

footer{border-top:1px solid var(--line);padding:38px 0 60px;color:var(--dim);font-size:14.5px}
footer a{color:var(--muted)}
footer .note{margin-top:12px;font-size:13px;color:var(--dim);max-width:70ch}

a{color:var(--cyan)}
a:hover{color:var(--amber)}

@media (max-width:620px){
  .hero{padding:48px 0 30px}
  nav.main a{margin:0 16px 0 0;display:inline-block}
  .plate b{min-width:auto;display:block;margin-top:8px}
}
@media (prefers-reduced-motion: reduce){
  .cursor{animation:none}
}

/* Utility classes, not inline styles.
   The CSP is script-src 'none' AND style-src 'self', which blocks inline style=""
   attributes outright - the browser strips them and the layout silently degrades.
   A local file server sends no CSP, so this is invisible until the page is loaded
   from the edge. Caught here by reading the deployed page's console, which is the
   only place it shows up. */
.mt{margin-top:26px}
.strong{color:var(--text)}

/* ---- gameplay captures ----
   image-rendering:pixelated is load-bearing: the GIFs ship at the C64's native
   432x262 and the browser scales them up. Smoothing a 16-colour bitmap is the one
   thing that would make this look wrong, and it is also what browsers do by
   default. Shipping native + scaling here is smaller on the wire AND sharper than
   shipping a pre-scaled file. */
figure.crt{margin:0}
figure.crt img{
  display:block;width:100%;height:auto;
  image-rendering:pixelated; image-rendering:crisp-edges;
  border:1px solid var(--line2);
  background:#000;
  box-shadow:0 0 34px rgba(255,176,0,.14), inset 0 0 60px rgba(0,0,0,.6);
}
figure.crt figcaption{
  font-family:var(--term);font-size:17px;color:var(--dim);
  margin-top:10px;letter-spacing:.6px;
}
figure.crt.wide{max-width:660px;margin:34px 0 0}

.feature{display:grid;gap:28px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.feature-body h3{font-family:var(--body);font-weight:600;font-size:21px;margin:8px 0 12px;color:var(--text)}
.feature-body p{color:var(--muted);margin:0 0 14px}
.feature-body .tag{font-family:var(--term);font-size:17px;letter-spacing:2px;
  text-transform:uppercase;color:var(--cyan)}
h2.mt2{margin-top:56px}

@media (max-width:760px){ .feature{grid-template-columns:1fr} }

/* ---- masthead banner ----
   The artwork already carries the wordmark AND the tagline, so it is the identity
   and the <h1> below it stays the editorial promise rather than repeating the name.
   Not cropped: the wordmark sits in the vertical middle band, and the precedent in
   this estate is that a short centre crop decapitates exactly that. Width/height are
   set so the page does not reflow as it loads. */
.banner{padding:26px 0 0}
.banner img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);
  box-shadow:0 0 40px rgba(255,176,0,.10);
}
.banner + .hero{padding-top:38px}
@media (max-width:620px){ .banner{padding-top:16px} }