/* Site-local styles for agentictokyo. pkg/design's design.css (tokens +
   brain theme + base reset) loads first; this layers the header + landing
   chrome on top, using design tokens so it recolours with the theme. */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
}

.site-wordmark {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
}

.site-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.lang-switch {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.lang-switch:hover {
  color: var(--text-primary);
  background: var(--bg-tag);
}

.landing {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.landing-title {
  font-family: var(--font-family-display);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.05;
  margin: 0 0 var(--space-lg);
  color: var(--text-primary);
}

.landing-lede {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
}

.landing-note {
  color: var(--text-faint);
  margin: 0;
}