.auth-page {
  min-height: 100vh;
  background: var(--color-bg, #f0efe9);
  color: var(--color-primary, #0f1923);
}

.auth-shell {
  width: min(520px, calc(100vw - 40px));
  margin: clamp(42px, 8vw, 96px) auto 0;
}

.auth-kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: var(--type-meta, 12px);
  letter-spacing: var(--tracking-kicker, 0.06em);
  text-transform: uppercase;
  color: var(--color-subtext, #6b7280);
}

.auth-title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: 0;
}

.auth-summary {
  margin: 0 0 24px;
  max-width: 36rem;
  color: var(--color-subtext, #6b7280);
  font-size: var(--type-body, 0.9375rem);
  line-height: var(--leading-body, 1.55);
}

.auth-panel {
  padding: 22px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d1cec8);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(15, 25, 35, 0.08);
}

.auth-panel-note {
  margin: 0;
  color: var(--color-subtext, #6b7280);
  font-size: var(--type-body-small, 0.875rem);
  line-height: var(--leading-body, 1.55);
}

.auth-footer {
  width: min(520px, calc(100vw - 40px));
  margin: 18px auto 0;
  color: var(--color-subtext, #6b7280);
  font-family: var(--font-mono);
  font-size: var(--type-meta, 12px);
  line-height: var(--leading-meta, 1.35);
}