/* ============================================================
   Clotho v2 — geek.css (Lab — page-geek)
   Styles plus techniques pour le Lab
============================================================ */

.geek-hero {
  background: var(--aubergine);
  color: var(--paper);
  padding: var(--sp-9) 0 var(--sp-7);
}
.geek-hero .kicker { color: var(--ochre); display: block; margin-bottom: var(--sp-3); }
.geek-title {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--paper);
  margin: 0 0 var(--sp-4);
}
.geek-desc {
  font-family: var(--ff-serif);
  font-size: var(--fs-md);
  color: rgba(244,239,230,0.7);
  margin: 0;
  max-width: 60ch;
}

.geek-content { padding: var(--sp-8) 0; }
.geek-content pre {
  background: var(--aubergine);
  color: var(--paper);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  overflow-x: auto;
}

.geek-strip {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: var(--sp-6) 0;
}
.geek-strip span {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.geek-strip strong { color: var(--ochre); font-weight: 500; }

/* Benchmarks */
.benchmark-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  margin: var(--sp-5) 0;
}
.benchmark-table th,
.benchmark-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.benchmark-table th {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}