:root{
  --ink:#0c0d10;
  --paper:#f3efe7;
  --paper-2:#e9e3d4;
  --line:#1c1d22;
  --accent:#ff5b1f;
  --accent-2:#0a7a5a;
  --warn:#d6b400;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans:'Space Grotesk', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- topbar ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;top:0;z-index:30;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;padding-bottom:18px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:20px}
.brand-mark{
  display:inline-grid;place-items:center;
  width:30px;height:30px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:18px;
}
.brand-name i{font-style:normal;color:var(--accent)}
.nav{display:flex;align-items:center;gap:26px;font-size:15px}
.nav a{position:relative}
.nav a:not(.pill):hover::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--ink);
}
.pill{
  border:1px solid var(--ink);padding:8px 14px;border-radius:999px;
  font-family:var(--mono);font-size:13px;background:var(--ink);color:var(--paper);
  transition:transform .15s ease;
}
.pill:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--accent)}
.burger{display:none;background:none;border:0;font-size:24px;cursor:pointer}

.ticker{
  border-top:1px dashed var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--paper-2);
  font-family:var(--mono);font-size:13px;
}
.ticker-track{
  display:flex;gap:42px;white-space:nowrap;
  padding:8px 0;
  animation:tick 38s linear infinite;
}
.ticker-track span{opacity:.8}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- lede ---------- */
.lede{padding:64px 0 56px;border-bottom:1px solid var(--line)}
.grid-lede{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:end}
.kicker{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 18px;color:#5b5d63;
}
.kicker.dark{color:#c9c5b9}
h1{
  font-size:clamp(38px,5vw,68px);
  line-height:1.02;letter-spacing:-.02em;margin:0 0 18px;font-weight:700;
}
h1 span{color:var(--accent)}
.dek{font-size:18px;max-width:46ch;margin:0 0 22px;color:#2b2d33}
.dek.dark{color:#c9c5b9}
.lede-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:13px;color:#5b5d63}
.lede-meta b{color:var(--ink)}
.dot{opacity:.5}
.tag{background:var(--ink);color:var(--paper);padding:2px 8px;border-radius:3px}

/* rack illustration */
.lede-figure{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#161718 0%,#0e0f11 100%);
  color:#dcd5c4;padding:20px;
  box-shadow:8px 8px 0 var(--ink);
  position:relative;
}
.rack{display:flex;flex-direction:column;gap:6px}
.u{
  height:22px;border:1px solid #2c2d32;background:#1a1b1f;
  position:relative;display:flex;align-items:center;padding:0 10px;
  font-family:var(--mono);font-size:11px;color:#7e7d77;
}
.u::before{content:attr(data-label);}
.u-on{background:#202126;color:#cfc7b3}
.u-on::after{
  content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 10px var(--accent-2);
}
.u-warm::after{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.u-blink::after{
  content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--warn);
  animation:blink 1.2s steps(2) infinite;
}
@keyframes blink{50%{opacity:.2}}
.readout{
  margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  font-family:var(--mono);font-size:12px;
}
.readout span{display:block;opacity:.55;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.readout b{display:block;font-size:18px;color:#fff;margin-top:2px}

/* ---------- cards ---------- */
.grid-section{padding:72px 0;border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
.section-head h2{font-size:clamp(28px,3.4vw,42px);margin:0 0 6px;letter-spacing:-.02em}
.section-head p{margin:0;color:#5b5d63;max-width:46ch}

.cards{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:22px;
}
.card{
  grid-column:span 2;
  border:1px solid var(--line);background:#fff;
  padding:22px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.card-wide{grid-column:span 4;background:var(--paper-2)}
.card-quiet{background:transparent}
.ribbon{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:3px 8px;align-self:flex-start;
}
.ribbon-alt{background:var(--accent);color:#fff}
.card h3{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.01em}
.card p{margin:0;color:#3a3c42}
.card footer{margin-top:auto;display:flex;gap:8px;font-family:var(--mono);font-size:12px;color:#5b5d63}
.thumb-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.thumb{height:80px;border:1px solid var(--line)}
.t1{background:repeating-linear-gradient(45deg,#0c0d10 0 8px,#1c1d22 8px 16px)}
.t2{background:radial-gradient(circle at 30% 30%, var(--accent) 0 18%, transparent 19%), #f3efe7}
.t3{background:linear-gradient(180deg,#0a7a5a 0 40%,#f3efe7 40%)}

/* ---------- lab ---------- */
.lab{background:var(--ink);color:#dcd5c4;padding:80px 0}
.grid-lab{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:start}
.lab-side h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;margin:0 0 12px;color:#fff}
.ghost{display:inline-block;border-bottom:1px solid #6a6a6a;font-family:var(--mono);font-size:13px;padding-bottom:2px}
.ghost:hover{border-color:var(--accent);color:#fff}
.lab-list{list-style:none;margin:0;padding:0;border-top:1px solid #2c2d32}
.lab-list li{
  display:grid;grid-template-columns:60px 1fr auto;gap:18px;align-items:center;
  padding:18px 4px;border-bottom:1px solid #2c2d32;
}
.num{font-family:var(--mono);color:#6a6a6a;font-size:14px}
.lab-list b{color:#fff}
.state{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;background:#0a7a5a;color:#fff;
}
.s-warm{background:var(--accent)}
.s-cold{background:#37383d;color:#bdbab0}
.s-done{background:#bdbab0;color:#0c0d10}

/* ---------- quote ---------- */
.quote{padding:80px 0;border-bottom:1px solid var(--line);background:var(--paper-2)}
.quote blockquote{margin:0 auto;max-width:840px;text-align:center}
.quote p{font-size:clamp(22px,2.4vw,32px);line-height:1.3;letter-spacing:-.01em;margin:0 0 14px}
.quote cite{font-style:normal;font-family:var(--mono);font-size:13px;color:#5b5d63}

/* ---------- archive ---------- */
.archive{padding:72px 0;border-bottom:1px solid var(--line)}
.arc{
  width:100%;border-collapse:collapse;font-size:15px;
}
.arc th,.arc td{padding:14px 8px;border-bottom:1px solid var(--line);text-align:left}
.arc th{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#5b5d63;
}
.arc tr:hover td{background:var(--paper-2)}
.arc td:first-child,.arc td:last-child{font-family:var(--mono);font-size:13px;color:#5b5d63;width:120px}
.arc td:nth-child(3){font-family:var(--mono);font-size:13px;width:140px}

/* ---------- cta ---------- */
.cta{padding:80px 0;background:var(--ink);color:#f3efe7}
.grid-cta{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start}
.cta h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;margin:0 0 12px;color:#fff}
.cta p{color:#c9c5b9;max-width:46ch}
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#c9c5b9}
.form input,.form textarea{
  background:#1a1b1f;border:1px solid #2c2d32;color:#f3efe7;
  padding:12px 14px;font:inherit;font-family:var(--sans);
}
.form input:focus,.form textarea:focus{border-color:var(--accent);outline:0}
.form button{
  margin-top:6px;justify-self:start;
  background:var(--accent);color:#fff;border:0;padding:14px 22px;font:inherit;font-weight:700;cursor:pointer;
  transition:transform .15s ease;
}
.form button:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #fff}

/* ---------- footer ---------- */
.foot{background:var(--paper-2);padding:60px 0 24px;border-top:1px solid var(--line)}
.grid-foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;margin-bottom:36px}
.grid-foot h4{margin:0 0 10px;font-size:13px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5b5d63}
.grid-foot a{display:block;padding:3px 0}
.grid-foot a:hover{color:var(--accent)}
.brand-foot{margin-bottom:10px}
.grid-foot small{display:block;font-size:12px;color:#5b5d63;margin-top:4px}
.fineprint{
  border-top:1px solid var(--line);padding-top:18px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-family:var(--mono);font-size:12px;color:#5b5d63;
}
.status{display:inline-flex;align-items:center;gap:8px}
.status i{display:inline-block;width:8px;height:8px;background:var(--accent-2);border-radius:50%;box-shadow:0 0 8px var(--accent-2)}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav{display:none}
  .burger{display:block}
  .grid-lede,.grid-lab,.grid-cta,.grid-foot{grid-template-columns:1fr;gap:36px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card,.card-wide{grid-column:span 2}
  .section-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .card,.card-wide{grid-column:span 1}
  .arc td:first-child,.arc td:last-child,.arc td:nth-child(3){width:auto}
  .arc th:nth-child(3),.arc td:nth-child(3){display:none}
}