/* ds/ is copied from vocalchess-design by .eleventy.js; it does not exist in src/. */
@import url("ds/index.css");

:focus-visible { border-radius: var(--radius-xs); }

.wrap { max-width: var(--width-content); margin: 0 auto; padding: 0 var(--pad-page); }
.prose { max-width: var(--width-prose); }
.caps { font: var(--text-caps); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-accent); }

.topbar { position: sticky; top: 0; z-index: 20; background: rgba(248, 243, 232, .86); backdrop-filter: var(--blur-panel); border-bottom: 1px solid var(--border-hairline); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-5); font: var(--weight-display) var(--size-24)/1 var(--font-display); color: var(--text-primary); border: 0; }
.brand img { border-radius: var(--radius-xs); }
.brand-accent { color: var(--accent); }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-7); }
.nav a { font: var(--text-label); color: var(--text-secondary); border: 0; }
.nav a:hover { color: var(--text-primary); }
.footer { margin-top: var(--gap-section); border-top: 1px solid var(--border-hairline); background: var(--surface-sunken); color: var(--text-muted); font: var(--text-body-sm); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-10); padding-bottom: var(--space-10); }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-12); align-items: center; padding-top: var(--space-13); padding-bottom: var(--space-12); }
.hero h1 { font: var(--text-display-1); letter-spacing: var(--track-tight); text-wrap: balance; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-7); }
.lede { font: var(--text-body-lg); color: var(--text-secondary); max-width: 42ch; }
.button { display: inline-flex; align-items: center; height: 52px; padding: 0 var(--space-8); border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent); font: var(--weight-semibold) var(--size-16)/1 var(--font-ui); border: 0; }
.button:hover { background: var(--accent-hover); color: var(--on-accent); }
.button-note { font: var(--text-label); color: var(--text-muted); }
.soon { display: inline-flex; align-items: center; gap: var(--space-4); height: 44px; padding: 0 var(--space-7); border-radius: var(--radius-pill); background: var(--accent-quiet); color: var(--text-accent); font: var(--text-label); }

.panel { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-7); background: var(--surface-canvas); border-radius: var(--radius-panel); box-shadow: var(--shadow-3); }
.voice-bar { display: flex; align-items: center; gap: 14px; padding: 10px 8px 8px 14px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); }
.voice-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.features { padding-top: var(--space-12); }
.features h2 { font: var(--text-display-3); letter-spacing: var(--track-tight); margin-bottom: var(--space-9); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--pad-panel); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.card h3 { font: var(--text-title-3); }
.card h3 + p { font: var(--text-body-sm); color: var(--text-secondary); }

.page-hero { padding-top: var(--space-12); padding-bottom: var(--space-9); }
.page-hero h1 { font: var(--text-display-2); letter-spacing: var(--track-tight); margin-top: var(--space-4); }
.updated { margin-top: var(--space-5); font: var(--text-body-sm); color: var(--text-muted); }
.page-body h2 { font: var(--text-title-2); margin: var(--space-11) 0 var(--space-5); }
.page-body h3 { font: var(--text-title-3); margin: var(--space-9) 0 var(--space-4); }
.page-body p, .page-body ul { margin: 0 0 var(--space-6); color: var(--text-secondary); }
.page-body li { margin-bottom: var(--space-3); }
.page-body code { font: var(--text-mono); color: var(--text-primary); }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-10); padding-top: var(--space-11); }
  .hero h1 { font: var(--text-display-2); }
  .grid { grid-template-columns: 1fr; }
  .page-hero h1 { font: var(--text-display-3); }
  .wrap { padding-left: var(--space-6); padding-right: var(--space-6); }
}