/* relay-architecture.css */
.relay-architecture {
  background: var(--ink-950);
}
.relay-architecture .arch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 880px) { .relay-architecture .arch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .relay-architecture .arch-grid { grid-template-columns: repeat(3, 1fr); } }

.arch-card {
  background: var(--ink-900);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
  position: relative;
}
.arch-card .id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}
.arch-card h4 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-0);
}
.arch-card p { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-100); }
.arch-card code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--ink-700);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink-0);
}
.arch-card .meta {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--ink-500);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-300);
}

.timeline {
  margin-top: var(--space-9);
  display: grid;
  gap: var(--space-3);
}
.timeline .row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  align-items: baseline;
}
.timeline .row .when {
  color: var(--ink-300);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.timeline .row .what { color: var(--ink-100); }
.timeline .row.now .when { color: var(--signal); }
.timeline .row.now .what::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--signal); margin-right: 8px; vertical-align: middle; }