/* ==========================================================================
   t3ch.b3rt.dev — Engineering / Lab
   Palette: Graphite #0e1116 + Plasma Blue #3b82f6 + Dim #94a3b8
   ========================================================================== */
:root{
  --bg:#0e1116;
  --bg-2:#161a22;
  --bg-3:#1c2230;
  --ink:#e5e7eb;
  --ink-dim:#94a3b8;
  --ink-muted:#64748b;
  --accent:#3b82f6;
  --accent-2:#60a5fa;
  --accent-glow:rgba(59,130,246,.28);
  --rule:#1f2533;
  --rule-strong:#2a3142;

  --f-sans:'Public Sans','Helvetica Neue',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono','Fira Code','Courier New',monospace;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
  --space-16:64px;--space-20:80px;--space-24:96px;

  --t-fast:200ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'ss01','cv11'}

/* ---------- Top bar ---------- */
.bar{padding:14px 32px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.bar > span{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.bar nav{display:flex;gap:24px;flex-wrap:wrap}
.bar nav a{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:color var(--t-fast)}
.bar nav a:hover{color:var(--accent)}
.bar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);display:inline-block;margin-right:10px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- Hero ---------- */
.hero{padding:120px 32px 80px;max-width:1200px;margin:0 auto}
.hero .tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 24px}
.hero h1{font-size:clamp(44px,7vw,96px);line-height:1.02;letter-spacing:-.025em;font-weight:700;margin:0;color:var(--ink)}
.hero h1 .accent{color:var(--accent);text-shadow:0 0 24px var(--accent-glow)}
.hero .deck{font-size:clamp(18px,2vw,22px);line-height:1.55;max-width:64ch;color:var(--ink-dim);margin:28px 0 0;font-weight:400}
.hero .stats{display:flex;gap:48px;flex-wrap:wrap;margin-top:56px;padding-top:28px;border-top:1px solid var(--rule)}
.hero .stat .n{font-family:var(--f-mono);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.01em;display:block}
.hero .stat .l{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin-top:6px;display:block}

/* ---------- Section primitives ---------- */
.section{max-width:1200px;margin:0 auto;padding:88px 32px}
.section.band{background:var(--bg-2);max-width:none;padding:96px 32px}
.section.band > *{max-width:1200px;margin-left:auto;margin-right:auto}
.section-head{margin-bottom:48px;padding-bottom:20px;border-bottom:1px solid var(--rule-strong)}
.section-head .mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px}
.section-head h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:0;color:var(--ink)}
.section-head .lede{margin:14px 0 0;color:var(--ink-dim);font-size:17px;max-width:60ch}

/* ---------- Build log ---------- */
.log{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.log li{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule);font-size:15px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.log li.in{opacity:1;transform:none}
@media (max-width:760px){.log li{grid-template-columns:80px 1fr;gap:14px}.log li .meta{grid-column:2}}
.log .hash{font-family:var(--f-mono);font-size:12px;color:var(--accent);letter-spacing:.04em}
.log .msg{font-family:var(--f-mono);font-size:14px;color:var(--ink)}
.log .meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- Stack grid ---------- */
.stack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:760px){.stack-grid{grid-template-columns:1fr}}
.stack-card{background:var(--bg-2);border:1px solid var(--rule);border-radius:6px;padding:32px;display:flex;flex-direction:column;gap:14px;position:relative;transition:border-color var(--t-fast),transform var(--t-fast);opacity:0;transform:translateY(10px)}
.stack-card.in{opacity:1;transform:none}
.stack-card:hover{border-color:var(--accent)}
.stack-card .stack-num{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;color:var(--accent)}
.stack-card h3{font-size:22px;line-height:1.2;margin:0;letter-spacing:-.01em;font-weight:700;color:var(--ink)}
.stack-card p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.6}
.chips{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:8px 0 0}
.chips li{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--rule-strong);border-radius:999px;color:var(--ink-dim);background:var(--bg)}

/* ---------- Experiments ---------- */
.exp-list{display:grid;gap:18px}
.exp{background:var(--bg-2);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:24px 28px;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.exp.in{opacity:1;transform:none}
.exp header{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.exp h3{font-size:20px;margin:0;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.exp p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.6}
.exp footer{margin-top:14px;display:flex;gap:28px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted)}
.status{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:3px 8px;border-radius:3px;font-weight:600}
.status-live{background:rgba(59,130,246,.14);color:var(--accent-2);border:1px solid rgba(59,130,246,.4)}
.status-beta{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.4)}
.status-spec{background:rgba(148,163,184,.1);color:var(--ink-dim);border:1px solid var(--rule-strong)}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--rule);padding:24px 32px;background:var(--bg)}
.foot-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot .mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- Operating principles ---------- */
.principles{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:p}
.principles li{display:grid;grid-template-columns:80px 1fr;gap:32px;padding:32px 0;border-top:1px solid var(--rule);opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.principles li:last-child{border-bottom:1px solid var(--rule)}
.principles li.in{opacity:1;transform:none}
.principles .p-num{font-family:var(--f-mono);font-size:18px;color:var(--accent);letter-spacing:.04em}
.principles h3{font-size:20px;margin:0 0 6px;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.principles p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.6}

/* ---------- Container query ---------- */
@supports (container-type:inline-size){
  .stack-grid{container-type:inline-size}
  @container (max-width:600px){
    .stack-card{padding:24px}
  }
}

/* ---------- :has() ---------- */
.stack-card:has(.chips){padding-bottom:28px}
.log li:has(.meta){align-items:center}

/* ---------- Focus visible + selection ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--bg)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .log li,.stack-card,.exp,.principles li{opacity:1!important;transform:none!important}
  .bar .dot{animation:none!important;opacity:1!important}
}

/* ---------- Print ---------- */
@media print{
  body{background:#fff;color:#000}
  .bar,.foot,.section.band{background:#fff;border-color:#000}
  .stack-card,.exp{background:#fff;border-color:#000}
}