/* ─── Hero ───────────────────────────────────────────────────── */
.hero { margin-bottom: 28px; max-width: 720px; }

.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.hero h1 em {
  font-style: normal;
  color: var(--rust);
  position: relative;
}
/* underscore the emphasized word like a hand-marked correction */
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0.07em;
  height: 2px;
  background: var(--rust);
  opacity: 0.6;
}

.hero p {
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 620px;
  line-height: 1.65;
}
.hero p code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--blueprint);
  background: transparent;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 1px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-theme="light"] .hero p code { color: var(--blueprint-lo); }