/* site.css — layout and components. Tokens in tokens.css. */

/* ── layout ──────────────────────────────────────────────────────────── */
.container{max-width:1240px;margin:0 auto;padding:0 var(--s6)}
.section{padding:var(--s16) 0}
.row{display:flex;align-items:center}
.row-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4)}

/* ── header ──────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--hair-strong)}
.site-logo{font-weight:800;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.site-logo:hover{text-decoration:none}
.signal{color:var(--signal)}
.site-nav{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.nav-link{color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;padding:var(--s2) 0;border-bottom:2px solid transparent}
.nav-link:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--hair-strong)}
.nav-active{color:var(--ink);border-bottom-color:var(--signal)}
.nav-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:var(--s2)}

/* ── footer ──────────────────────────────────────────────────────────── */
.site-footer{border-top:2px solid var(--hair-strong);padding:var(--s8) 0;margin-top:var(--s16)}

/* ── type helpers ─────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--signal);text-transform:uppercase;margin-bottom:var(--s3)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--ink-2)}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 var(--s4)}
h1{font-size:clamp(28px,5vw,52px)}
h2{font-size:clamp(20px,3vw,32px)}
h3{font-size:18px}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn-primary{display:inline-block;font-weight:600;font-size:14px;padding:11px 18px;border:2px solid var(--signal);background:var(--signal);color:#161514;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.btn-primary:hover{background:var(--signal-hi);border-color:var(--signal-hi);text-decoration:none;color:#161514}
.btn-secondary{display:inline-block;font-weight:600;font-size:14px;padding:11px 18px;border:2px solid var(--hair-strong);color:var(--ink);text-decoration:none;cursor:pointer;background:transparent;transition:border-color .15s,background .15s}
.btn-secondary:hover{border-color:var(--ink-2);background:var(--surface);text-decoration:none;color:var(--ink)}
.link-btn{background:none;border:none;color:var(--signal);cursor:pointer;font-size:inherit;padding:0;text-decoration:underline}

/* ── chips / filters ─────────────────────────────────────────────────── */
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.chip{background:transparent;border:1px solid var(--hair-strong);color:var(--ink-2);font-size:13px;padding:5px 12px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip-active{border-color:var(--signal);color:var(--signal);background:var(--signal-wash)}
.filter-group-label{font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:var(--s2);display:block}

/* ── badges ──────────────────────────────────────────────────────────── */
.badge{font-family:var(--font-mono);font-size:11px;padding:3px 8px;border:1px solid var(--signal);color:var(--signal)}
.badge-off{border-color:var(--hair-strong);color:var(--ink-3);text-decoration:line-through}
.badge-row{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ── metric chip ─────────────────────────────────────────────────────── */
.metric-chip{font-family:var(--font-mono);font-size:12px;color:var(--signal);white-space:nowrap}

/* ── tags ────────────────────────────────────────────────────────────── */
.tag{font-family:var(--font-mono);font-size:11px;padding:3px 8px;border:1px solid var(--hair-strong);color:var(--ink-2)}
.tag-layer{border-color:var(--signal);color:var(--signal);opacity:.75}
.tag-ind{border-color:var(--hair-strong);color:var(--ink-3)}

/* ── HOMEPAGE ─────────────────────────────────────────────────────────── */
.hero-section{padding:var(--s24) 0 var(--s16)}
.hero-h1{font-size:clamp(32px,5vw,58px);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin:0 0 var(--s8);max-width:26ch}
.hero-sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s8);max-width:920px}
.hero-sub-grid p{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2)}

.section-heading-row{display:flex;flex-wrap:wrap;gap:var(--s8);align-items:flex-end;justify-content:space-between;margin-bottom:var(--s8)}
.section-heading-row h2{margin:0;font-size:clamp(22px,3vw,30px)}

/* ── MATRIX ──────────────────────────────────────────────────────────── */
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:var(--s4)}
.matrix{border-collapse:separate;border-spacing:3px;min-width:600px}
.m-fn-head,.m-layer-head{font-weight:400;font-size:11px;color:var(--ink-3);font-family:var(--font-mono);padding:0 0 var(--s2);text-align:center}
.m-fn-head{text-align:left;width:140px}
.m-fn{font-size:13px;color:var(--ink-2);font-weight:400;text-align:left;padding-right:var(--s3);white-space:nowrap;vertical-align:middle}
.m-cell{width:64px;height:36px;border:1px solid var(--hair-strong);vertical-align:middle;text-align:center;position:relative;transition:background .12s,border-color .12s}
.m-empty{background:transparent}
.m-on{background:rgba(255,86,60,.12);border-color:rgba(255,86,60,.4);cursor:pointer}
.m-on:hover,.m-on:focus-visible{background:rgba(255,86,60,.28);border-color:var(--signal);outline:none}
.m-on.m-sel{background:var(--signal);border-color:var(--signal)}
.m-on.m-dim{opacity:.2}
.m-count{font-family:var(--font-mono);font-size:13px;color:var(--signal);font-weight:700}
.m-on.m-sel .m-count{color:#161514}

.matrix-legend{display:flex;align-items:center;gap:var(--s6);margin-top:var(--s3);flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--ink-3)}
.legend-dot{width:12px;height:12px;border:1px solid}
.legend-on{background:rgba(255,86,60,.12);border-color:rgba(255,86,60,.4)}
.legend-off{background:transparent;border-color:var(--hair-strong)}

.matrix-panel{margin-top:var(--s6);border:2px solid var(--hair-strong);background:var(--surface);padding:var(--s6);min-height:120px;animation:panelIn .2s ease}

/* panel list */
.panel-list{display:flex;flex-direction:column;gap:var(--s2)}
.panel-list-item{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4);border:1px solid var(--hair-strong);cursor:pointer;transition:background .12s}
.panel-list-item:hover{background:var(--surface-2)}

/* panel detail */
.panel-detail-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.panel-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.panel-label{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;margin-bottom:var(--s2)}
.panel-heard{font-style:italic;margin:0;color:var(--ink);font-size:15px;border-left:2px solid var(--signal);padding-left:var(--s4)}
.panel-link{display:inline-block;margin-top:var(--s4);font-size:13px}

/* ── METRIC BARS ─────────────────────────────────────────────────────── */
.metric-rows{display:grid;gap:var(--s4);max-width:600px}
.metric-row{display:grid;grid-template-columns:160px 1fr 80px;gap:var(--s4);align-items:center}
.metric-label{font-size:14px;color:var(--ink-2)}
.metric-bar-track{height:6px;background:var(--hair-strong);overflow:hidden}
.metric-bar-fill{height:100%;background:var(--signal);transition:width .4s ease}
.metric-n{font-family:var(--font-mono);font-size:12px;color:var(--signal);text-align:right}

/* ── SERIES ──────────────────────────────────────────────────────────── */
.series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s6)}
.series-card{display:block;border:2px solid var(--hair-strong);padding:var(--s6);text-decoration:none;color:var(--ink);transition:border-color .15s}
.series-card:hover{border-color:var(--signal);text-decoration:none;color:var(--ink)}
.series-title{font-size:18px;font-weight:800;margin:0 0 var(--s2)}
.series-block{padding:var(--s8) 0;border-bottom:1px solid var(--hair-strong)}
.series-block:last-child{border:0}
.series-block-title{font-size:24px;margin:var(--s3) 0}
.series-meta{display:flex;gap:var(--s4);margin-bottom:var(--s2)}
.series-toc{margin:var(--s4) 0;padding-left:var(--s6);color:var(--ink-2)}
.series-toc li{margin-bottom:var(--s2)}
.series-from{border-top:1px solid var(--hair-strong);padding-top:var(--s4)}
.series-list{max-width:720px}

/* ── NOW ─────────────────────────────────────────────────────────────── */
.now-block{border-left:2px solid var(--signal);padding-left:var(--s6)}
.now-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.now-list li{color:var(--ink-2);font-size:15px;position:relative;padding-left:var(--s4)}
.now-list li::before{content:'—';position:absolute;left:0;color:var(--signal)}

/* ── SYSTEMS LIST ────────────────────────────────────────────────────── */
.systems-list{display:flex;flex-direction:column;gap:3px}
.system-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s4) var(--s4);border:1px solid var(--hair-strong);text-decoration:none;color:var(--ink);transition:background .12s,border-color .12s;flex-wrap:wrap}
.system-row:hover{background:var(--surface);border-color:var(--ink-2);text-decoration:none;color:var(--ink)}
.system-row[hidden]{display:none}
.system-row-main{flex:1;min-width:200px}
.system-row-title{font-size:16px;font-weight:600;margin-bottom:var(--s2)}
.system-row-tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.system-row-meta{display:flex;align-items:center;gap:var(--s4);flex-shrink:0;flex-wrap:wrap}
.filter-bar{margin-bottom:var(--s8);padding:var(--s6);background:var(--surface);border:1px solid var(--hair-strong)}
.empty-state{text-align:center;padding:var(--s16) var(--s6);color:var(--ink-3)}

/* ── SYSTEM DETAIL ───────────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--ink-3)}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--ink)}
.detail-tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.detail-meta{margin-top:var(--s3);line-height:1.7}
.detail-half-label{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s8);flex-wrap:wrap}
.prose-grid{display:grid;gap:var(--s8);max-width:720px}
.prose-label{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;margin-bottom:var(--s3);text-transform:uppercase}
.heard{font-style:italic;margin:0;font-size:17px;border-left:2px solid var(--signal);padding-left:var(--s4);font-family:var(--font-read)}
.broke{border-left:2px solid var(--hair-strong);padding-left:var(--s4);color:var(--ink-2)}
.badge-group{margin-top:var(--s6)}

/* ── ARTICLE ─────────────────────────────────────────────────────────── */
.article-page{background:var(--bg)}
[data-mode="light"]{background:var(--bg)}
.article-container{max-width:680px;margin:0 auto;padding:var(--s12) var(--s6) var(--s24)}
.series-banner{border-left:2px solid var(--signal);padding:var(--s3) var(--s4);margin-bottom:var(--s6);background:var(--surface)}
.series-banner-title{font-weight:600;font-size:14px;display:block;margin-top:4px}
.article-meta{display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s4);flex-wrap:wrap}
.article-h1{font-size:clamp(26px,4vw,42px);line-height:1.15;margin-bottom:var(--s8);font-family:var(--font-read);font-weight:600}
.article-body{font-family:var(--font-read);font-size:18px;line-height:1.65;color:var(--ink)}
.article-body h2{font-family:var(--font-ui);font-size:22px;font-weight:800;margin:var(--s12) 0 var(--s4)}
.article-body p{margin:0 0 var(--s6)}
.code-block{background:var(--surface);border:1px solid var(--hair-strong);padding:var(--s4) var(--s6);margin:var(--s6) 0;overflow-x:auto}
.code-block code{font-family:var(--font-mono);font-size:13px;color:var(--ink-2);white-space:pre}
.article-from{margin-top:var(--s12);padding-top:var(--s8);border-top:2px solid var(--hair-strong)}

/* ── LAB ─────────────────────────────────────────────────────────────── */
.lab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4)}
.lab-item{border:1px solid var(--hair-strong);padding:var(--s6);background:var(--surface)}
.lab-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s2)}
.lab-item-title{font-size:17px;font-weight:800;margin:0}
.lab-item-foot{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s4)}
.maturity{font-family:var(--font-mono);font-size:11px;padding:3px 8px;white-space:nowrap}
.mat-proto{border:1px solid var(--hair-strong);color:var(--ink-3)}
.mat-beta{border:1px solid rgba(255,86,60,.4);color:var(--signal)}
.mat-prod{border:1px solid var(--signal);color:var(--signal);background:var(--signal-wash)}
.mat-fail{border:1px solid var(--hair-strong);color:var(--ink-3);text-decoration:line-through}

/* ── ABOUT ───────────────────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:200px 1fr;gap:var(--s16);align-items:start}
.about-portrait-col{position:sticky;top:calc(var(--s16) + 60px)}
.portrait-placeholder{width:140px;height:140px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:800;color:var(--ink-3)}
.about-prose h2{font-size:20px;margin:var(--s12) 0 var(--s3)}
.about-prose p{color:var(--ink-2);margin:0 0 var(--s4);max-width:60ch}
.timeline{display:flex;flex-direction:column;gap:0;margin-top:var(--s4);border-left:2px solid var(--hair-strong);padding-left:var(--s6)}
.timeline-item{padding-bottom:var(--s8)}
.timeline-date{font-size:12px;margin-bottom:var(--s2)}
.timeline-role{font-weight:700;font-size:16px;margin-bottom:var(--s2)}

/* ── CONTACT ─────────────────────────────────────────────────────────── */
.contact-paths{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s8)}
.path-btn{background:transparent;border:1px solid var(--hair-strong);color:var(--ink-2);font-size:14px;padding:var(--s2) var(--s4);cursor:pointer;transition:border-color .12s,color .12s}
.path-btn:hover{border-color:var(--ink-2);color:var(--ink)}
.path-active{border-color:var(--signal);color:var(--signal);background:var(--signal-wash)}
.contact-form{display:flex;flex-direction:column;gap:var(--s6)}
.form-field{display:flex;flex-direction:column;gap:var(--s2)}
.form-label{font-size:13px;font-weight:600}
.form-input{background:var(--surface);border:1px solid var(--hair-strong);color:var(--ink);font-family:var(--font-ui);font-size:15px;padding:var(--s3) var(--s4);transition:border-color .12s}
.form-input:focus{outline:none;border-color:var(--signal)}
.form-input.err{border-color:#ff563c}
.form-textarea{resize:vertical;min-height:120px}
.form-error{color:var(--signal);font-size:13px;min-height:18px}
.form-success{display:flex;align-items:center;gap:var(--s3);color:#5fd3c4;font-size:14px;padding:var(--s4) var(--s4);border:1px solid rgba(95,211,196,.3)}
.form-error-global{color:var(--signal);font-size:14px;padding:var(--s4);border:1px solid rgba(255,86,60,.3)}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-portrait-col{position:static}
  .panel-two{grid-template-columns:1fr}
  .metric-row{grid-template-columns:120px 1fr 60px}
}
@media(max-width:640px){
  .section{padding:var(--s12) 0}
  .site-nav{display:none}
  .nav-toggle{display:block}
  .site-nav.open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:var(--bg);border-bottom:2px solid var(--hair-strong);padding:var(--s4) var(--s6)}
  .m-fn{font-size:11px;width:100px}
  .metric-row{grid-template-columns:100px 1fr 50px;gap:var(--s3)}
  .hero-h1{font-size:clamp(26px,8vw,40px)}
  .system-row{flex-direction:column;align-items:flex-start}
  .system-row-meta{width:100%}
  .article-h1{font-size:clamp(24px,6vw,34px)}
  .series-grid{grid-template-columns:1fr}
  .contact-paths{flex-direction:column}
}