/* Site chrome: footer, hero, generic page sections — shared across all pages. */

.lang-switch { display: flex; gap: 6px; }
.lang-switch button {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-faint);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.lang-switch button:hover { background: var(--surface-sunken); color: var(--ink); }
.lang-switch button.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.lang-switch--fixed {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 20;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--dark-bg);
  color: var(--dark-ink-muted);
  padding-block: var(--space-6);
  margin-top: var(--space-7);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-footer__note {
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  max-width: 46ch;
}

.hstry-mark-inline {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  /* justify-content: space-between only pushes this to the far end while it shares a line
     with .site-footer__note. Once the note wraps to its own line on narrow screens, that
     leaves this as the sole item on its line, and space-between then sits it at the line's
     start (left) instead of the end. margin-left: auto keeps it pinned right in both cases. */
  margin-left: auto;
  --hstry-inset: 0;
  /* Fixed rem sizes instead of the vw-based defaults: vw is resolved against the real
     viewport regardless of any local zoom/transform, so a zoom() shrink here drifted out
     of proportion between icon and wordmark on iPadOS Safari. */
  --hstry-mark-size: 4.5rem;
  --hstry-word-size: 1.5rem;
  --hstry-gap: 0.3rem;
}

.hero {
  padding-block: var(--space-7) var(--space-6);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--space-4);
}

.hero__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw + 1rem, var(--text-2xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 18ch;
}

.hero__lede {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 56ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.section {
  padding-block: var(--space-6);
}

.section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

.section__intro {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  max-width: 60ch;
}