/* XFaiR Journal — "Signal" brutalist instrument theme */
:root{
  --ink:#0b0b0c; --panel:#141416; --panel2:#1a1a1d; --bone:#f2f0ea;
  --muted:#9a988f; --dim:#c9c7c0; --line:#2a2a2e; --lime:#c6ff3d; --danger:#ff5a4d;
  --measure:70ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--bone);
  font-family:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 88% -2%, rgba(198,255,61,.055), transparent 34rem),
    var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--lime); color:var(--ink)}
a{color:inherit; text-decoration:none}
.grid-lines{position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.6;
  background-image:linear-gradient(rgba(242,240,234,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(242,240,234,.035) 1px,transparent 1px);
  background-size:46px 46px;}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
/* Film grain — same tooth as the homepage sheet. */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;}
.wrap{position:relative; z-index:1; width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,54px)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line);
  background:rgba(11,11,12,.82); backdrop-filter:blur(12px)}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-logo{height:22px; width:auto; filter:brightness(0) invert(1); flex:0 0 auto}
.brand-tag{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.nav{display:flex; align-items:center; gap:22px}
.nav a{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .15s ease}
.nav a:hover{color:var(--bone)}
.nav a.active{color:var(--lime)}
.workspace{border:1px solid var(--line); background:var(--panel); color:var(--bone);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; padding:8px 10px; border-radius:0; outline:none}
.workspace:focus{border-color:var(--lime)}
@media(max-width:720px){.nav{display:none}}

/* ---------- index masthead ---------- */
.masthead{padding:clamp(40px,7vw,86px) 0 clamp(28px,4vw,44px); border-bottom:1px solid var(--line)}
.kicker{display:flex; align-items:center; gap:12px; font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 18px}
.kicker::before{content:""; width:34px; height:1px; background:var(--lime)}
.masthead h1{margin:0; font-family:'Anton','Hanken Grotesk',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(52px,11vw,140px); line-height:.9; letter-spacing:.005em; color:var(--bone)}
.masthead h1 .dot{color:var(--lime)}
.masthead .lede{max-width:60ch; margin:22px 0 0; color:var(--dim); font-size:clamp(15px,1.6vw,18px); line-height:1.7}
.masthead .stat-row{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:26px; font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.08em; color:var(--muted)}
.masthead .stat-row b{color:var(--bone); font-weight:600}

/* ---------- ticker ---------- */
.ticker{border-bottom:1px solid var(--line); overflow:hidden; background:var(--ink);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker .track{display:inline-flex; gap:44px; white-space:nowrap; padding:11px 0; font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); animation:marquee 42s linear infinite}
.ticker .track span b{color:var(--lime); font-weight:600}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .track{animation:none}}

/* ---------- post list ---------- */
.list-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:34px 0 8px}
.list-head h2{margin:0; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.list-head .count{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted)}
.post-list{display:flex; flex-direction:column; padding-bottom:60px}
.post-card{display:grid; grid-template-columns:76px 1fr auto; gap:26px; align-items:start;
  padding:30px 8px 30px 0; border-top:1px solid var(--line); text-align:left; transition:padding .18s ease}
.post-card:hover{padding-left:14px}
.post-card:last-child{border-bottom:1px solid var(--line)}
.post-index{font-family:'Anton','Hanken Grotesk',sans-serif; font-size:40px; line-height:1; color:var(--line); transition:color .18s ease}
.post-card:hover .post-index{color:var(--lime)}
.post-body{min-width:0}
.post-meta{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.post-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--muted)}
.post-title{margin:0; font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:-.015em;
  font-size:clamp(23px,3vw,32px); line-height:1.18; color:var(--bone); transition:color .15s ease}
.post-card:hover .post-title{color:var(--lime)}
.post-summary{margin:12px 0 0; color:var(--dim); line-height:1.65; max-width:70ch; font-size:15.5px}
.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.tag{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); background:rgba(198,255,61,.05); padding:4px 8px}
.post-arrow{align-self:center; color:var(--line); font-size:26px; transition:color .18s ease,transform .18s ease}
.post-card:hover .post-arrow{color:var(--lime); transform:translateX(4px)}
@media(max-width:680px){
  .post-card{grid-template-columns:1fr; gap:12px; padding:24px 0}
  .post-index{font-size:26px}
  .post-arrow{display:none}
}

/* ---------- article ---------- */
.article{padding:clamp(34px,6vw,72px) 0 40px}
.back-link{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:34px; transition:color .15s ease}
.back-link:hover{color:var(--lime)}
.article-header{max-width:var(--measure); border-bottom:1px solid var(--line); padding-bottom:30px; margin-bottom:38px}
.article-header .kicker{margin-bottom:22px}
.article-header h1{margin:0; font-family:'Anton','Hanken Grotesk',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(34px,6vw,62px); line-height:.98; letter-spacing:.01em; color:var(--bone)}
.article-meta{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-top:24px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.article-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--muted)}

/* prose */
.prose{max-width:var(--measure); font-size:18px; line-height:1.8; color:var(--dim)}
.prose>*+*{margin-top:1.55em}
.prose p{margin:0}
.prose strong{color:var(--bone); font-weight:700}
.prose em{color:var(--bone)}
.prose a{color:var(--lime); text-decoration:none; border-bottom:1px solid rgba(198,255,61,.4); transition:border-color .15s ease}
.prose a:hover{border-color:var(--lime)}
.prose h2{margin:2.2em 0 0; font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:-.01em;
  font-size:clamp(24px,3vw,30px); line-height:1.25; color:var(--bone)}
.prose h2::before{content:""; display:block; width:28px; height:2px; background:var(--lime); margin-bottom:18px}
.prose h3{margin:1.9em 0 0; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:20px; line-height:1.3; color:var(--bone)}
.prose ul,.prose ol{margin:0; padding-left:1.3em}
.prose li{margin:.5em 0}
.prose li::marker{color:var(--lime)}
.prose blockquote{margin:0; padding:6px 0 6px 22px; border-left:2px solid var(--lime); color:var(--bone); font-size:20px; line-height:1.6}
.prose blockquote p{margin:0}
.prose hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}
.prose img{max-width:100%; height:auto; border:1px solid var(--line); display:block}
.prose figure{margin:0}
.prose figcaption{margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.prose code{font-family:'JetBrains Mono',monospace; font-size:.86em; background:var(--panel2); border:1px solid var(--line);
  padding:2px 6px; color:var(--lime)}
.prose pre{margin:0; background:var(--panel); border:1px solid var(--line); padding:20px 22px; overflow:auto;
  font-family:'JetBrains Mono',monospace; font-size:14px; line-height:1.7; color:var(--dim)}
.prose pre code{background:none; border:0; padding:0; color:inherit; font-size:inherit}
.prose pre::-webkit-scrollbar{height:8px}
.prose pre::-webkit-scrollbar-thumb{background:#3a3a40; border-radius:99px}
.prose .lede{font-size:21px; line-height:1.65; color:var(--bone)}

.article-footer{max-width:var(--measure); margin-top:56px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}
.article-footer .sig{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.pill-link{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel);
  color:var(--bone); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 15px; transition:border-color .15s ease,color .15s ease}
.pill-link:hover{border-color:var(--lime); color:var(--lime)}
.pill-link.lime{background:var(--lime); color:var(--ink); border-color:var(--lime)}
.pill-link.lime:hover{background:#b6ef2c}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:20px}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between; padding-top:26px; padding-bottom:40px}
.site-footer .sig{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.site-footer .sig b{color:var(--bone); font-weight:600}
.blink{display:inline-block; width:8px; height:15px; background:var(--lime); margin-left:2px; vertical-align:-2px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.blink{animation:none}}