:root {
  --bg:#050403;
  --panel-bg:rgba(8,6,4,.92);
  --ember:#F27A0C;
  --amber:#FF9A1F;
  --hot:#FFB347;
  --green:#2BFF88;
  --text:rgba(255,236,214,.88);
  --dim:rgba(255,190,120,.5);
}
html { background:var(--bg); }
body {
  margin:0; color:var(--text); font-family:var(--font-serif, Georgia, serif);
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(242,122,12,.07), transparent 60%),
    linear-gradient(rgba(242,122,12,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,122,12,.05) 1px, transparent 1px),
    linear-gradient(rgba(5,4,3,.6), rgba(5,4,3,.6)),
    url("/assets/topo-bg.jpg");
  background-size:auto, 44px 44px, 44px 44px, auto, cover;
  background-position:center top, 0 0, 0 0, 0 0, center;
  background-attachment:fixed, scroll, scroll, fixed, fixed;
  min-height:100vh;
}
@media (max-width:720px) {
  body { background-attachment:scroll; background-size:auto, 44px 44px, 44px 44px, auto, auto 130vh; }
}
/* CRT scanlines + flicker */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  animation:crt 7s infinite steps(1);
}
@keyframes crt {
  0%,100% { opacity:.85; } 92% { opacity:.85; }
  93% { opacity:.55; } 93.5% { opacity:.95; } 94% { opacity:.7; } 95% { opacity:.85; }
}
a { color:var(--amber); text-decoration:none; }
a:hover { color:#fff; }
.mono, .kicker, nav.site a, .row .date, .row .venue, .meta, .panel-bar, .statusline, a.btn, .readlink
  { font-family:var(--font-mono, "Space Mono", monospace); }

/* ---------- header ---------- */
header.site { position:sticky; top:0; z-index:20; background:#000; border-bottom:2px solid var(--ember); }
header.site .inner { max-width:1180px; margin:0 auto; padding:14px 40px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:14px; }
.brand span.nm { font-family:var(--font-display); text-transform:uppercase; font-size:19px; line-height:1; color:#fff; letter-spacing:-0.01em; }
.brand .sysid { font-family:var(--font-mono); font-size:9px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase; display:block; margin-top:5px; }
.hleft { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
nav.site { display:flex; align-items:center; }
nav.site a { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); padding:5px 18px; position:relative; border-left:1px solid rgba(242,122,12,.4); white-space:nowrap; }
nav.site a:first-child { border-left:0; padding-left:0; }
nav.site a:hover { color:#fff; text-shadow:0 0 8px rgba(242,122,12,.8); }
nav.site a.active { color:var(--amber); }
nav.site a.active::after { content:""; position:absolute; left:18px; right:18px; bottom:0; height:2px; background:var(--ember); box-shadow:0 0 6px var(--ember); }
nav.site a.active:first-child::after { left:0; }
nav.site a .arr { color:var(--green); }
.statusline { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.2em; color:var(--green); text-transform:uppercase; }
.statusline .dot { width:7px; height:7px; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ---------- stripes / chrome ---------- */
.stripes { height:10px; background:repeating-linear-gradient(-45deg, var(--ember) 0 14px, transparent 14px 28px); opacity:.85; }
.wrap { max-width:1180px; margin:0 auto; padding:0 40px; }
.kicker { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.kicker::before { content:"» "; color:var(--green); }

/* ---------- panels ---------- */
.panel { position:relative; border:2px solid var(--ember); background:var(--panel-bg); margin:64px 0 0;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  box-shadow:0 0 24px rgba(242,122,12,.12), inset 0 0 60px rgba(242,122,12,.04); }
.panel-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--ember); color:#000; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:7px 18px 7px 14px; }
.panel-bar .cell { display:flex; align-items:center; gap:10px; }
.panel-bar .sq { width:9px; height:9px; background:#000; }
.panel-bar .sq.b { animation:blink 1.4s steps(2) infinite; }
.panel-body { padding:40px; }

/* ---------- glitch headings ---------- */
.glitch { position:relative; display:inline-block; }
.glitch::before, .glitch::after { content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; pointer-events:none; }
.glitch::before { color:var(--green); z-index:-1; clip-path:inset(20% 0 55% 0); transform:translate(-3px,0); animation:gl1 4.6s infinite steps(1); opacity:0; }
.glitch::after { color:#fff; z-index:-2; clip-path:inset(60% 0 15% 0); transform:translate(3px,0); animation:gl2 5.3s infinite steps(1); opacity:0; }
@keyframes gl1 { 0%,100%{opacity:0} 10%{opacity:.9; clip-path:inset(10% 0 70% 0)} 11.5%{opacity:0} 48%{opacity:.8; clip-path:inset(45% 0 30% 0); transform:translate(-5px,-2px)} 49.5%{opacity:0} 76%{opacity:.9; clip-path:inset(70% 0 5% 0)} 77%{opacity:0} }
@keyframes gl2 { 0%,100%{opacity:0} 22%{opacity:.7; clip-path:inset(55% 0 20% 0)} 23%{opacity:0} 60%{opacity:.8; clip-path:inset(15% 0 65% 0); transform:translate(5px,2px)} 61.5%{opacity:0} 88%{opacity:.6; clip-path:inset(80% 0 2% 0)} 89%{opacity:0} }

h1.display { font-family:var(--font-display); text-transform:uppercase; line-height:.94; letter-spacing:-0.015em; color:#fff; margin:14px 0 18px; font-size:clamp(36px,6vw,68px); text-shadow:0 0 18px rgba(242,122,12,.35); }
.page-title { font-family:var(--font-display); text-transform:uppercase; line-height:.92; letter-spacing:-0.015em; color:#fff; margin:12px 0 0; font-size:clamp(34px,5vw,56px); text-shadow:0 0 18px rgba(242,122,12,.35); }

/* ---------- about ---------- */
.about-grid { display:grid; grid-template-columns:minmax(300px,1fr) minmax(320px,1.05fr); gap:56px; align-items:start; }
@media (max-width:840px){ .about-grid { grid-template-columns:1fr; } }
.bio { font-size:25px; line-height:1.62; color:var(--text); margin:24px 0 32px; max-width:620px; }
.portrait { position:relative; border:2px solid var(--ember); padding:0; margin:0; }
.portrait img { display:block; width:100%; height:auto; }
.portrait::before, .portrait::after { content:""; position:absolute; width:26px; height:26px; border:3px solid var(--green); z-index:2; }
.portrait::before { top:-8px; left:-8px; border-right:0; border-bottom:0; }
.portrait::after { bottom:-8px; right:-8px; border-left:0; border-top:0; }
.portrait figcaption { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.72); color:var(--amber); font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:6px 12px; }

/* ---------- writing list ---------- */
.rows { border-top:2px solid var(--ember); }
a.row { display:flex; align-items:baseline; gap:32px; padding:28px 22px; border-bottom:1px solid rgba(242,122,12,.35); color:var(--text); transition:background 120ms steps(2), color 120ms steps(2); }
a.row:hover { background:var(--ember); color:#000; text-shadow:none; }
a.row:hover .t { color:#000; }
.row .date { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:inherit; opacity:.6; flex:none; width:110px; }
.row .t { font-family:var(--font-display); text-transform:uppercase; line-height:.98; letter-spacing:-0.01em; font-size:clamp(22px,3vw,34px); color:#fff; flex:1; }
.row .sub { font-style:italic; font-size:15px; color:inherit; opacity:.75; flex:1.2; line-height:1.45; }
.row .venue { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:inherit; opacity:.6; flex:none; }
@media (max-width:840px){ a.row { flex-wrap:wrap; gap:8px 20px; } .row .sub { flex-basis:100%; } }

/* ---------- article ---------- */
.article-body p { font-size:19px; line-height:1.75; margin:0 0 26px; max-width:66ch; }
.article-body h2 { font-family:var(--font-mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin:52px 0 18px; font-weight:400; }
.article-body h2::before { content:"// "; color:var(--green); }
.subtitle { font-style:italic; font-size:22px; line-height:1.5; color:var(--dim); margin:0 0 40px; }
.definition { border-left:4px solid var(--ember); background:rgba(242,122,12,.06); padding:18px 24px; margin:0 0 44px; }
.definition p { font-size:24px; line-height:1.55; color:#fff; margin:0; font-style:italic; }
.readlink { display:inline-block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--hot); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; margin:10px 24px 0 0; }
.readlink:hover { color:#fff; text-shadow:0 0 8px rgba(242,122,12,.8); }
.meta { font-size:12px; letter-spacing:.06em; color:var(--dim); border-top:1px solid rgba(242,122,12,.35); padding-top:22px; margin-top:52px; line-height:2.1; }

/* ---------- footer ---------- */
footer.site { margin-top:96px; }
footer.site .bar { border-top:2px solid var(--ember); background:#000; }
footer.site .inner { max-width:1180px; margin:0 auto; padding:26px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer.site a, footer.site .sys { font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
footer.site a:hover { color:#fff; }
footer.site .sys em { color:var(--green); font-style:normal; }

/* ---------- mobile ---------- */
@media (max-width:720px) {
  header.site .inner { padding:10px 20px; gap:14px; }
  .brand img { height:24px !important; }
  .brand span.nm { font-size:16px; }
  .statusline { display:none; }
  .hleft { gap:14px; width:100%; justify-content:space-between; }
  nav.site a { font-size:11px; padding:5px 12px; }
  nav.site a:first-child { padding-left:0; }
  nav.site a.active::after { left:12px; right:12px; }
  .wrap { padding:0 18px; }
  .panel { margin-top:40px; }
  .panel-body { padding:22px 18px; }
  .bio { font-size:20px; }
  .page-title { font-size:clamp(30px,9vw,44px); }
  h1.display { font-size:clamp(30px,9.5vw,44px); }
  a.row { padding:20px 8px; }
  .row .date { width:auto; }
  .row .t { font-size:clamp(20px,6vw,28px); flex-basis:100%; }
  .subtitle { font-size:18px; margin-bottom:30px; }
  .article-body p { font-size:17px; }
  .definition p { font-size:20px; }
  .readlink { display:block; margin:14px 0 0; }
  footer.site { margin-top:56px; }
  footer.site .inner { padding:22px 18px; }
}
/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after { animation:none; }
  .glitch::before, .glitch::after { display:none; }
  .statusline .dot, .panel-bar .sq.b { animation:none; }
}