.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-16);
  z-index: calc(var(--z-nav) + 10);
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.skip-link:focus {
  top: var(--spacing-8);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

.section--lg {
  padding-block: calc(var(--space-section) * 1.3);
}

.section--surface {
  background: var(--surface-card-surface);
  border-top: 1px solid var(--surface-elevated-border);
  border-bottom: 1px solid var(--surface-elevated-border);
}

@media (max-width: 1023px) {
  :root {
    --container-pad: var(--spacing-20);
    --space-section: var(--spacing-80, var(--section-gap));
  }
}

@media (max-width: 767px) {
  :root {
    --container-pad: var(--container-pad-m);
    --space-section: var(--space-section-m);
  }
}