/* SledgeDev — site stylesheet. Terminal / CRT direction.
   Tokens mirror design/design-tokens.css; page styles follow the handoff. */

:root {
  --bg:#050706; --bg-alt:#070B09; --bg-panel:#0A0F0C; --bg-strip:#080C0A;
  --bg-cta:#080D0A; --bg-chrome:#0A100C;
  --line:#16211B; --line-card:#1B2721; --line-strong:#23372C; --line-dash:#24352C;
  --line-chrome:#17241D;
  --text:#C8D6CC; --text-bright:#EAF5EE; --text-read:#BACBBF; --text-muted:#93A99B;
  --text-dim:#8FA697; --text-faint:#7E9486; --text-ghost:#6F8578;
  --text-placeholder:#4A5D52; --text-comment:#4E6357;
  --accent:#00FF66; --accent-soft:#9FE8BC; --accent-hover:#B6FFD2; --accent-ink:#050706;
  --amber:#FFA92B; --amber-hover:#FFD79B; --amber-line:#3A3021; --amber-bg:#0B0A07; --amber-ink:#0B0A07;

  --font-display:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-term:'VT323','IBM Plex Mono',monospace;
  --track-label:0.16em; --track-wide:0.22em; --track-button:0.10em;

  --gutter:130px; --gutter-sm:22px; --content-w:1180px; --read-w:760px; --rail-w:220px;
  --nav-h:76px; --nav-h-sm:60px; --tap-min:44px;

  --glow:0 0 28px color-mix(in srgb, var(--accent) 35%, transparent);
  --glow-panel:0 0 80px color-mix(in srgb, var(--accent) 6%, transparent);
  --scanline:repeating-linear-gradient(to bottom,
    color-mix(in srgb,var(--accent) 5%,transparent) 0px,
    color-mix(in srgb,var(--accent) 5%,transparent) 1px, transparent 1px, transparent 4px);
  --scanline-soft:repeating-linear-gradient(to bottom,
    color-mix(in srgb,var(--accent) 4.5%,transparent) 0px,
    color-mix(in srgb,var(--accent) 4.5%,transparent) 1px, transparent 1px, transparent 5px);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
img{max-width:100%}
[hidden]{display:none!important}
::selection{background:var(--accent); color:var(--accent-ink)}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; color:var(--text-bright); margin:0}
h1{font-size:66px; line-height:1.04; letter-spacing:-2.5px}
h2{font-size:38px; line-height:1.1; letter-spacing:-1.2px}
h3{font-size:26px; line-height:1.25; letter-spacing:-0.8px; font-weight:700}
p{margin:0}
a{color:var(--accent); text-decoration:none; transition:color .12s ease}
a:hover{color:var(--accent-hover)}

.wrap{width:100%; max-width:calc(var(--content-w) + var(--gutter)*2); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow,.label{font-size:11px; letter-spacing:var(--track-label); color:var(--text-faint); text-transform:uppercase}
main{flex:1 0 auto}

/* --- scanline overlay --- */
.scanlines{position:absolute; inset:0; pointer-events:none; background:var(--scanline); opacity:.5}
.scanlines--img{opacity:.35}
.scanlines--cta{background:var(--scanline-soft); opacity:.4}

/* --- buttons --- */
.btn{display:inline-block; font-family:var(--font-body); font-size:13px; font-weight:700;
  letter-spacing:var(--track-button); padding:17px 30px; border:none; cursor:pointer;
  text-transform:uppercase; text-align:center; background:none}
.btn--primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--glow)}
.btn--primary:hover{background:var(--accent-hover); color:var(--accent-ink)}
.btn--ghost{border:1px solid var(--line-strong); color:var(--text); padding:16px 28px; font-weight:600}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.tlink{color:var(--accent); font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:600}

/* --- nav --- */
.nav{border-bottom:1px solid var(--line)}
.nav__inner{height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px}
.wordmark{font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.5px; color:var(--text-bright)}
.wordmark b{color:var(--accent); font-weight:800}
.wordmark .cur{color:var(--accent)}
.nav__links{display:flex; align-items:center; gap:36px; list-style:none; margin:0; padding:0}
.nav__links a{font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-dim); font-weight:500}
.nav__links a:hover{color:var(--text-bright)}
.nav__links a[aria-current="page"]{color:var(--accent); font-weight:600}
.nav__cta{border:1px solid var(--line-strong); color:var(--accent); font-size:11px; letter-spacing:var(--track-label);
  text-transform:uppercase; padding:11px 18px}
.nav__cta:hover{border-color:var(--accent)}
.nav__burger{display:none; width:46px; height:46px; border:1px solid var(--line-strong); background:none;
  flex-direction:column; gap:4px; align-items:center; justify-content:center; cursor:pointer}
.nav__burger span{width:18px; height:1px; background:var(--accent)}

/* --- sections --- */
.section{padding-block:100px}
.section--tight{padding-block:64px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:44px}
.sec-head__title{display:flex; align-items:baseline; gap:16px}
.sec-num{font-family:var(--font-display); font-weight:800; color:var(--accent); font-size:20px}
.sec-head h2{font-size:36px}

/* --- hero --- */
.hero{padding-block:88px 72px}
.hero__grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.hero h1{text-shadow:var(--glow)}
.hero__sub{color:var(--text-muted); font-size:17px; line-height:1.7; margin-top:26px; max-width:44ch}
.hero__cta{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap}
.hero__meta{margin-top:40px; display:flex; gap:28px; flex-wrap:wrap}
.hero__meta .stat b{font-family:var(--font-display); font-size:28px; color:var(--text-bright); display:block}
.hero__meta .stat span{font-size:11px; letter-spacing:var(--track-label); color:var(--text-faint); text-transform:uppercase}

/* --- terminal --- */
.term{border:1px solid var(--line-strong); background:var(--bg-alt); position:relative; box-shadow:var(--glow-panel)}
.term__bar{height:38px; background:var(--bg-chrome); border-bottom:1px solid var(--line-chrome);
  display:flex; align-items:center; gap:8px; padding:0 14px}
.term__dot{width:9px; height:9px; background:#2D3D34; display:inline-block}
.term__dot--live{background:var(--accent)}
.term__title{margin-left:12px; font-size:11px; letter-spacing:var(--track-button); color:var(--text-faint); text-transform:uppercase}
.term__body{position:relative; padding:22px 24px; font-family:var(--font-term); font-size:21px; line-height:1.5; color:var(--text-ghost)}
.term__body .p{color:var(--accent)}
.term__body .o{color:var(--text-ghost)}
.term__body .b{color:var(--accent-soft)}
.cursor{display:inline-block; width:.6em; height:1.05em; background:var(--accent); vertical-align:-2px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* --- capability strip --- */
.strip{background:var(--bg-strip); border-block:1px solid var(--line)}
.strip__inner{display:flex; flex-wrap:wrap; gap:32px 56px; padding-block:26px; justify-content:center}
.strip__item{font-size:11px; letter-spacing:var(--track-wide); color:var(--text-faint); text-transform:uppercase}

/* --- cards / grids --- */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
.card{border:1px solid var(--line-card); background:var(--bg-panel); padding:34px 36px;
  display:flex; flex-direction:column; gap:14px}
.card h3{color:var(--text-bright)}
.card__meta{font-size:11px; letter-spacing:var(--track-label); color:var(--text-faint); text-transform:uppercase}
.card__body{font-size:14px; line-height:1.7; color:var(--text-muted)}
.card__link{margin-top:auto; padding-top:8px}
.card--feature{grid-column:1/-1; flex-direction:row; gap:0; padding:0}
.card--feature .card__copy{flex:0 0 56%; padding:38px; border-right:1px solid var(--line-card); display:flex; flex-direction:column; gap:16px}
.card--feature .well{flex:1; min-height:280px}

/* --- image placeholder well --- */
.well{position:relative; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; min-height:220px}
.well__label{border:1px dashed var(--line-dash); padding:10px 16px; font-size:11px; letter-spacing:.2em;
  color:var(--text-placeholder); text-transform:uppercase; position:relative; z-index:1}

/* --- tags / chips --- */
.tags{display:flex; flex-wrap:wrap; gap:10px}
.tag{border:1px solid var(--line-strong); padding:7px 12px; font-size:11px; letter-spacing:.12em;
  color:var(--text-dim); text-transform:uppercase; background:none; cursor:default}
.chip{border:1px solid var(--line-strong); padding:13px 20px; font-size:12px; letter-spacing:.12em;
  color:var(--text-dim); text-transform:uppercase; background:none; cursor:pointer}
.chip[aria-current="true"],.chip:hover{border-color:var(--accent); color:var(--accent)}

/* --- notes / archive rows --- */
.notes-list{display:flex; flex-direction:column}
.note-row{display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:baseline;
  padding-block:24px; border-bottom:1px solid var(--line)}
.note-row__date{font-size:12px; letter-spacing:.12em; color:var(--text-faint); text-transform:uppercase}
.note-row__title{font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text-bright); letter-spacing:-.4px}
.note-row a:hover .note-row__title{color:var(--accent)}
.note-row__meta{font-size:11px; letter-spacing:.12em; color:var(--text-faint); text-transform:uppercase}

/* --- research (amber scope) --- */
.amber{--accent:var(--amber); --accent-hover:var(--amber-hover); --accent-ink:var(--amber-ink);
  --line-strong:var(--amber-line); background:var(--amber-bg)}
.amber .sec-num,.amber .tlink{color:var(--amber)}
.status{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber)}

/* --- CTA / contact band --- */
.band{position:relative; background:var(--bg-cta); border-block:1px solid var(--line); overflow:hidden}
.band__inner{position:relative; z-index:1; padding-block:88px; display:flex; flex-direction:column; gap:24px; align-items:flex-start}
.band h2{font-size:40px}

/* --- forms --- */
.field-group{display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.field-group label{font-size:11px; letter-spacing:var(--track-label); color:var(--text-faint); text-transform:uppercase}
.field{width:100%; height:50px; background:var(--bg-alt); border:1px solid var(--line-strong); color:var(--text);
  font-family:var(--font-body); font-size:14px; padding:0 16px}
textarea.field{height:auto; padding:14px 16px; line-height:1.7; resize:vertical}
.field:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* --- article / post --- */
.post-head{padding-block:80px 40px; border-bottom:1px solid var(--line)}
.post-head h1{font-size:52px; letter-spacing:-2px; max-width:20ch}
.post-head__meta{display:flex; gap:20px; margin-top:24px; font-size:12px; letter-spacing:.12em;
  color:var(--text-faint); text-transform:uppercase; flex-wrap:wrap}
.post-body{display:grid; grid-template-columns:var(--rail-w) minmax(0,var(--read-w)); gap:80px; padding-block:64px}
.toc{position:sticky; top:96px; align-self:start; font-size:12px; line-height:2; height:max-content}
.toc a{color:var(--text-dim); display:block}
.toc a:hover{color:var(--accent)}
.prose{max-width:var(--read-w); color:var(--text-read); font-size:17px; line-height:1.85}
.prose h2{font-size:28px; letter-spacing:-1px; margin:48px 0 18px; color:var(--text-bright)}
.prose h3{font-size:21px; margin:36px 0 14px}
.prose p{margin:0 0 22px}
.prose ul,.prose ol{margin:0 0 22px; padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{text-decoration:underline; text-underline-offset:3px}
.prose code{font-family:var(--font-body); font-size:14px; background:var(--bg-alt); border:1px solid var(--line);
  padding:2px 6px; color:var(--accent-soft)}
.prose pre{background:var(--bg-alt); border:1px solid var(--line-strong); padding:20px; overflow-x:auto; margin:0 0 24px}
.prose pre code{background:none; border:none; padding:0; color:var(--accent-soft); font-size:14px; line-height:1.6}
.prose blockquote{border-left:2px solid var(--accent); margin:0 0 24px; padding-left:20px; color:var(--text-muted)}

/* --- meta bar (project) --- */
.metabar{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; border-block:1px solid var(--line); padding-block:28px}
.metabar__cell span{font-size:11px; letter-spacing:.16em; color:var(--text-faint); text-transform:uppercase; display:block; margin-bottom:6px}
.metabar__cell b{font-family:var(--font-body); font-weight:600; color:var(--text-bright); font-size:14px}

/* --- footer --- */
.footer{flex-shrink:0; border-top:1px solid var(--line); padding-block:48px; margin-top:auto}
.footer__inner{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start}
.footer__links{display:flex; gap:28px; flex-wrap:wrap}
.footer__links a{font-size:12px; letter-spacing:.12em; color:var(--text-dim); text-transform:uppercase}
.footer__fine{font-size:11px; letter-spacing:.1em; color:var(--text-ghost); text-transform:uppercase; margin-top:20px}

/* --- utilities --- */
.stack-sm{display:flex; flex-direction:column; gap:12px}
.mt-auto{margin-top:auto}
.divider{height:1px; background:var(--line); border:0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .cursor{animation:none}
}

/* --- responsive --- */
@media (max-width:900px){
  :root{--gutter:var(--gutter-sm); --nav-h:var(--nav-h-sm)}
  h1{font-size:38px; letter-spacing:-1.6px}
  h2{font-size:27px; letter-spacing:-1px}
  .hero__grid{grid-template-columns:1fr; gap:40px}
  .grid-2,.grid-3{grid-template-columns:1fr; gap:24px}
  .card--feature{flex-direction:column}
  .card--feature .card__copy{flex:none; border-right:none; border-bottom:1px solid var(--line-card)}
  .metabar{grid-template-columns:repeat(2,1fr)}
  .post-body{grid-template-columns:1fr; gap:0}
  .toc{display:none}
  .post-head h1{font-size:34px}
  .section{padding-block:56px}
  .nav__links{display:none}
  .nav__burger{display:flex}
  .btn{display:block; width:100%}
  .hero__cta{flex-direction:column; align-items:stretch}
  .note-row{grid-template-columns:1fr; gap:6px}
}