/* ============================================================
   cameo.name — site.css (2026-11 refresh)
   Terminal DNA, readable body. No external requests.
   style.css is left untouched for the 1337 playtest page.
   ============================================================ */

@font-face{
  font-family:'VT323'; font-style:normal; font-weight:400; font-display:swap;
  src:url('vt323-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Share Tech Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('share-tech-mono-latin-400-normal.woff2') format('woff2');
}

:root{
  --bg:      #0b0c0b;
  --bg-2:    #131512;
  --ink:     #ecefe8;   /* body text: warm off-white, ~16:1 on bg */
  --ink-2:   #a9b0a5;   /* secondary text, ~8:1 */
  --ink-3:   #6f766c;   /* tertiary / meta */
  --line:    #2a2e28;
  --acid:    #c8ff5a;   /* phosphor lime — the signature */
  --hot:     #ff3b5c;   /* punk red — LIVE / urgent only */
  --mono:    'Share Tech Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --display: 'VT323', ui-monospace, monospace;
  --sans:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.6 var(--sans);
}
::selection{ background:var(--acid); color:#000; }

a{ color:var(--acid); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(200,255,90,.4); }
a:hover{ color:#fff; text-decoration-color:#fff; }
a:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; background:var(--acid); color:#000; padding:6px 10px; z-index:100; }

/* subtle scanlines — decorative only, never over text contrast */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 1px, transparent 1px 3px);
  opacity:.018;
}

.wrap{ max-width:880px; margin:0 auto; padding:0 20px; }

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  font:13px/1 var(--mono); color:var(--ink-3);
  letter-spacing:.04em;
}
.topbar .wrap{ display:flex; gap:12px; justify-content:space-between; align-items:center; min-height:44px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
.topbar a{ color:var(--ink-2); text-decoration:none; }
.topbar a:hover{ color:var(--acid); }
.topbar .home{ color:var(--acid); font-family:var(--display); font-size:22px; letter-spacing:.06em; }
.topbar nav{ display:flex; flex-wrap:wrap; gap:4px 18px; text-transform:uppercase; }

/* ---------- hero ---------- */
.hero{ padding:56px 0 36px; }
.kicker{ font:13px/1.4 var(--mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; margin:0 0 14px; }
.kicker .p{ color:var(--acid); }
.name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(64px, 15vw, 132px); line-height:.82;
  color:var(--acid); margin:0 0 22px; letter-spacing:.01em;
  text-shadow:0 0 18px rgba(200,255,90,.18);
}
.cursor{ color:var(--acid); }
@media (prefers-reduced-motion:no-preference){ .cursor{ animation:blink 1.1s steps(1) infinite; } }
@keyframes blink{ 50%{ opacity:0; } }

.roles{ font:15px/1.5 var(--mono); color:var(--ink-2); margin:0 0 22px; text-transform:uppercase; letter-spacing:.06em; }
.roles span + span::before{ content:" / "; color:var(--ink-3); }
.lede{ font-size:clamp(20px, 2.6vw, 25px); line-height:1.4; max-width:30em; margin:0 0 26px; color:var(--ink); font-weight:500; }
.lede em{ font-style:normal; color:var(--acid); }

.cta{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-block; font:14px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em;
  padding:13px 16px; border:1px solid var(--acid); color:var(--acid); text-decoration:none;
}
.btn:hover{ background:var(--acid); color:#000; }
.btn.solid{ background:var(--acid); color:#000; }
.btn.solid:hover{ background:#fff; border-color:#fff; }

/* ---------- live status strip ---------- */
.live{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  border:1px solid var(--line); border-left:3px solid var(--hot);
  background:var(--bg-2); padding:12px 16px; margin:8px 0 0;
  font:14px/1.5 var(--mono);
}
.live .tag{ color:var(--hot); text-transform:uppercase; letter-spacing:.12em; }
.live .tag::before{ content:"● "; }
@media (prefers-reduced-motion:no-preference){ .live .tag::before{ animation:blink 1.6s steps(1) infinite; } }

/* ---------- sections ---------- */
section{ padding:44px 0 8px; }
.sec-h{
  display:flex; align-items:baseline; gap:12px;
  font:14px/1 var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2);
  margin:0 0 22px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.sec-h .n{ color:var(--acid); }
.sec-h .meta{ margin-left:auto; color:var(--ink-3); letter-spacing:.06em; font-size:12px; }

/* process table — "how busy is she" */
.ps{ width:100%; border-collapse:collapse; font:14px/1.45 var(--mono); }
.ps th{ text-align:left; color:var(--ink-3); font-weight:400; text-transform:uppercase; letter-spacing:.08em; font-size:12px; padding:0 10px 8px 0; }
.ps td{ padding:9px 10px 9px 0; border-top:1px dashed var(--line); vertical-align:top; }
.ps td:first-child{ color:var(--ink); }
.ps .role{ color:var(--ink-2); }
.st{ white-space:nowrap; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.st.live-s{ color:var(--hot); }
.st.dev{ color:var(--acid); }
.st.out{ color:var(--ink-2); }
.st.ongoing{ color:#7fd6ff; }

/* feature card (1337) */
.feature{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:0;
  border:1px solid var(--line); background:var(--bg-2); margin-bottom:22px; align-items:start;
}
.feature img{ width:100%; height:auto; object-fit:cover; object-position:50% 30%; display:block; aspect-ratio:1/1; }
.feature .body{ padding:24px 24px 22px; }

.card{ border:1px solid var(--line); background:var(--bg-2); padding:22px 24px; }
.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }

.org{ font:12px/1.4 var(--mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; margin:0 0 6px; }
.card h3, .feature h3{
  font-family:var(--display); font-weight:400; font-size:38px; line-height:.95;
  color:var(--acid); margin:0 0 10px;
}
.card p, .feature p{ margin:0 0 12px; color:var(--ink); font-size:16px; }
.card p.dim, .feature p.dim{ color:var(--ink-2); font-size:15px; }
.links{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font:13px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.links a{ text-decoration:none; }
.links a::after{ content:" →"; }
.links a:hover{ text-decoration:underline; }

/* principles */
.rules{ list-style:none; margin:0; padding:0; counter-reset:r; display:grid; gap:14px; }
.rules li{ counter-increment:r; padding-left:44px; position:relative; }
.rules li::before{ content:counter(r, decimal-leading-zero); position:absolute; left:0; top:1px; font:14px var(--mono); color:var(--acid); }
.rules b{ color:var(--ink); font-weight:600; }
.rules li span{ color:var(--ink-2); }

/* small lists */
.kv{ list-style:none; margin:0; padding:0; font-size:16px; }
.kv li{ padding:8px 0; border-top:1px dashed var(--line); display:flex; gap:14px; flex-wrap:wrap; }
.kv li:first-child{ border-top:0; }
.kv .k{ font:12px/1.9 var(--mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; min-width:150px; }
.kv .v{ flex:1; min-width:220px; color:var(--ink-2); }
.kv .v a{ color:var(--acid); }

/* contact */
.contact{ border:1px solid var(--acid); padding:26px 24px; background:linear-gradient(180deg, rgba(200,255,90,.05), transparent 60%); }
.contact h3{ font-family:var(--display); font-weight:400; font-size:44px; line-height:.95; color:var(--acid); margin:0 0 10px; }
.contact p{ margin:0 0 18px; max-width:36em; }
.contact .cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:24px; padding-top:20px; border-top:1px dashed var(--line); }
.contact h4{ font:12px/1.4 var(--mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; margin:0 0 8px; font-weight:400; }
.contact ul{ list-style:none; margin:0; padding:0; font-size:15px; }
.contact li{ padding:3px 0; }
.contact li small{ color:var(--ink-3); font-size:13px; }

/* subpage headers */
.page-h{ padding:48px 0 10px; }
.page-h h1{ font-family:var(--display); font-weight:400; font-size:clamp(48px, 10vw, 84px); line-height:.88; color:var(--acid); margin:0 0 14px; }
.page-h .sub{ color:var(--ink-2); font-size:18px; max-width:34em; margin:0; }
.prose p{ max-width:40em; }
.prose h2:not(.sec-h){ font-family:var(--display); font-weight:400; font-size:34px; color:var(--acid); margin:34px 0 8px; line-height:1; }

/* footer */
footer{ margin-top:56px; border-top:1px solid var(--line); padding:26px 0 48px; font:13px/1.7 var(--mono); color:var(--ink-3); }
footer a{ color:var(--ink-2); }
footer .row{ display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:space-between; }
.eof{ color:var(--acid); font-family:var(--display); font-size:20px; margin-top:14px; }

@media (max-width:720px){
  body{ font-size:16px; }
  .hero{ padding:38px 0 26px; }
  .feature{ grid-template-columns:1fr; }
  .feature img{ aspect-ratio:16/10; }
  .grid{ grid-template-columns:1fr; }
  .contact .cols{ grid-template-columns:1fr; }
  .ps .role, .ps th.role{ display:none; }
  .topbar nav{ gap:4px 14px; }
}
@media print{
  body::after{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ---------- press ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.q{ margin:0; border-top:3px solid var(--acid); background:var(--bg-2); padding:20px 20px 18px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
.q blockquote{ margin:0; font-size:19px; line-height:1.35; font-weight:500; color:var(--ink); }
.q figcaption{ font:12px/1.5 var(--mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; }
.press-more{ margin-top:18px; }

/* ---------- bio ---------- */
.bio{ display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:28px; align-items:start; }
.portrait{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid var(--line); }
.bio p{ margin:0 0 14px; max-width:40em; }
.bio .org{ margin-top:4px; }
.bio-short{ color:var(--ink-2); }

@media (max-width:720px){
  .quotes{ grid-template-columns:1fr; }
  .bio{ grid-template-columns:1fr; }
  .portrait{ max-width:260px; }
}