/* Pacesetter site chrome. All values resolve to --29d-* tokens. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--29d-bg);
  color: var(--29d-text-1);
  font-family: var(--29d-font-ui);
  font-feature-settings: var(--29d-font-features);
  font-size: var(--29d-body-size);
  line-height: var(--29d-body-lh);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--29d-blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--29d-page-pad); }

.topbar {
  border-bottom: 1px solid var(--29d-border);
  background: var(--29d-surface);
  position: sticky; top: 0; z-index: 20;
}
.topbar-inner {
  max-width: 960px; margin: 0 auto; padding: var(--29d-s-3) var(--29d-page-pad);
  display: flex; align-items: center; gap: var(--29d-s-4); flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: var(--29d-s-2); }
.brand-name { font-family: var(--29d-font-display); font-weight: 800; font-size: var(--29d-text-lg); color: var(--29d-text-1); }
.brand-sub { font-size: var(--29d-text-xs); color: var(--29d-text-3); letter-spacing: .02em; }
.nav { display: flex; gap: var(--29d-s-4); margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--29d-text-2); font-size: var(--29d-text-sm); font-weight: 600; }
.nav a[aria-current="page"] { color: var(--29d-coral-600); }
.theme-btn { margin-left: var(--29d-s-2); }

.hero { padding: var(--29d-s-12) 0 var(--29d-s-8); }
.hero h1 {
  font-family: var(--29d-font-display); font-weight: 800;
  font-size: var(--29d-text-4xl); line-height: var(--29d-lh-4xl);
  margin: var(--29d-s-3) 0 var(--29d-s-4);
}
.hero .lede { font-size: var(--29d-text-lg); line-height: var(--29d-lh-lg); color: var(--29d-text-2); max-width: 42rem; margin: 0; }
.eyebrow {
  font-family: var(--29d-font-mono); font-size: var(--29d-text-xs);
  text-transform: uppercase; letter-spacing: .12em; color: var(--29d-coral-600); font-weight: 700;
}
.closing-line {
  font-family: var(--29d-font-display); font-weight: 800;
  font-size: var(--29d-text-2xl); line-height: var(--29d-lh-2xl);
  padding: var(--29d-s-8) 0;
}
section.block { padding: var(--29d-s-8) 0; border-top: 1px solid var(--29d-border); }
section.block h2 { font-size: var(--29d-text-xl); line-height: var(--29d-lh-xl); margin: 0 0 var(--29d-s-3); }
section.block h3 { font-size: var(--29d-text-md); margin: 0 0 var(--29d-s-2); }
section.block p { color: var(--29d-text-2); max-width: 44rem; }
.grid { display: grid; gap: var(--29d-s-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.card-pad { padding: var(--29d-card-pad); }
.card-pad p { margin: 0; color: var(--29d-text-2); }
.card-pad h3 { margin-top: 0; }
.stack { display: grid; gap: var(--29d-s-4); }
.muted { color: var(--29d-text-3); }
.small { font-size: var(--29d-text-sm); }
.tnum { font-variant-numeric: tabular-nums; }

.loop { display: flex; gap: var(--29d-s-2); flex-wrap: wrap; align-items: center; }
.loop-step {
  border: 1px solid var(--29d-border); border-radius: var(--29d-r-3);
  background: var(--29d-surface); padding: var(--29d-s-2) var(--29d-s-3);
  font-weight: 600; font-size: var(--29d-text-sm);
}
.loop-arrow { color: var(--29d-text-3); font-weight: 700; }

.board-group { margin-bottom: var(--29d-s-6); }
.board-group h3 {
  font-family: var(--29d-font-mono); font-size: var(--29d-text-xs); text-transform: uppercase;
  letter-spacing: .12em; color: var(--29d-text-3); margin: 0 0 var(--29d-s-3);
}
.work-item {
  display: flex; gap: var(--29d-s-3); align-items: flex-start;
  padding: var(--29d-s-3) 0; border-top: 1px solid var(--29d-border);
}
.work-item:first-of-type { border-top: none; }
.work-item .wi-body { flex: 1; min-width: 0; }
.work-item .wi-title { font-weight: 600; }
.work-item .wi-detail { color: var(--29d-text-2); font-size: var(--29d-text-sm); margin-top: var(--29d-s-1); }
.work-item .wi-meta { color: var(--29d-text-3); font-size: var(--29d-text-xs); margin-top: var(--29d-s-1); }
.fb-item { padding: var(--29d-s-3) 0; border-top: 1px solid var(--29d-border); }
.fb-item:first-of-type { border-top: none; }
.fb-item .fb-text { white-space: pre-wrap; }
.fb-item .fb-meta { display: flex; gap: var(--29d-s-2); align-items: center; flex-wrap: wrap; margin-top: var(--29d-s-2); }
.state-badge { flex-shrink: 0; margin-top: var(--29d-s-1); }

.yap-box { width: 100%; min-height: 96px; resize: vertical; }
.yap-row { display: flex; gap: var(--29d-s-2); align-items: center; flex-wrap: wrap; margin-top: var(--29d-s-3); }
.rec-dot {
  width: 10px; height: 10px; border-radius: var(--29d-pill);
  background: var(--29d-red-500); display: none;
}
.rec-on .rec-dot { display: inline-block; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec-on .rec-dot { animation: none; } }
.status-line { min-height: 1.4em; }

footer.site {
  border-top: 1px solid var(--29d-border); margin-top: var(--29d-s-12);
  padding: var(--29d-s-6) 0 var(--29d-s-12); color: var(--29d-text-3); font-size: var(--29d-text-sm);
}
.pace-strip {
  display: flex; gap: var(--29d-s-4); align-items: center; flex-wrap: wrap;
  background: var(--29d-sunken); border-bottom: 1px solid var(--29d-border);
  padding: var(--29d-s-2) var(--29d-page-pad); font-size: var(--29d-text-sm);
}
.pace-strip-label {
  font-family: var(--29d-font-mono); font-size: var(--29d-text-xs); text-transform: uppercase;
  letter-spacing: .12em; color: var(--29d-text-3); font-weight: 700;
}
.pace-strip a { color: var(--29d-text-2); font-weight: 600; }
.gate-wrap { max-width: 420px; margin: 0 auto; padding: var(--29d-s-12) var(--29d-page-pad); }
.gate-card { padding: var(--29d-card-pad); }
.gate-card h1 { font-family: var(--29d-font-display); font-size: var(--29d-text-2xl); margin: 0 0 var(--29d-s-2); }
.gate-card p { color: var(--29d-text-2); margin: 0 0 var(--29d-s-4); }
.gate-err { color: var(--29d-red-600); font-size: var(--29d-text-sm); min-height: 1.4em; margin-top: var(--29d-s-2); }
