<div class="brut-grid">
  <div class="brut-row">
    <span class="brut-badge brut-operational"><span class="brut-dot"></span>Operational</span>
    <div class="brut-service">api.gateway.production</div>
    <div class="brut-meta">us-east-1 · 99.984% / 30d</div>
    <div class="brut-time">↑ 47d 12h 04m · last incident: 2026-03-29</div>
  </div>
  <div class="brut-row">
    <span class="brut-badge brut-degraded"><span class="brut-dot"></span>Degraded</span>
    <div class="brut-service">search.indexer.eu</div>
    <div class="brut-meta">eu-west-2 · 96.412% / 24h</div>
    <div class="brut-time">P95 latency 840ms · ETA recovery 18m</div>
  </div>
  <div class="brut-row">
    <span class="brut-badge brut-outage"><span class="brut-dot"></span>Outage</span>
    <div class="brut-service">media.transcoder.bg</div>
    <div class="brut-meta">ap-south-1 · 00.000% / 12m</div>
    <div class="brut-time">incident #4119 · on-call: m.tanaka</div>
  </div>
  <div class="brut-row">
    <span class="brut-badge brut-deploy"><span class="brut-dot"></span>Deploying</span>
    <div class="brut-service">auth.service.canary</div>
    <div class="brut-meta">v4.18.2 · 38% traffic</div>
    <div class="brut-time">commit a1f9c2e · rollback ready</div>
  </div>
</div>

.brut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: 2px solid #000;
  background: #f4f4f0;
  font-family: ui-monospace, "JetBrains Mono", monospace;
}
.brut-row {
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 24px 20px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.brut-row:hover { background: #000; color: #fff; }
.brut-row:hover .brut-time { color: #fff; }
.brut-row:hover .brut-meta { color: rgba(255,255,255,0.6); }
.brut-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  margin-bottom: 16px;
}
.brut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.brut-operational { color: #1d8f4a; background: #ddf5e3; }
.brut-operational .brut-dot { animation: brut-pulse 1.6s infinite; }
.brut-degraded { color: #b8761c; background: #fdf2d8; }
.brut-outage { color: #c0241c; background: #fde0dd; }
.brut-outage .brut-dot { animation: brut-blink 0.5s infinite; }
.brut-deploy { color: #1c4a9e; background: #dde6f7; position: relative; overflow: hidden; }
.brut-deploy::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(28,74,158,0.3), transparent);
  animation: brut-scan 1.5s linear infinite;
}
@keyframes brut-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes brut-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes brut-scan {
  0% { left: -100%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .brut-operational .brut-dot,
  .brut-outage .brut-dot,
  .brut-deploy::before { animation: none; }
}
.brut-service {
  font-family: Georgia, "Fraunces", serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.brut-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #888;
  text-transform: uppercase;
  transition: color 0.2s;
}
.brut-time {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #000;
  transition: color 0.2s;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed currentColor;
  opacity: 0.7;
}