a { color: var(--cobalt); text-underline-offset: 3px; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(16px, 4vw, 56px);
}
.brand { font: 500 20px/1.2 var(--serif); text-decoration: none; }
.langs { display: flex; gap: 4px; }
.langs button {
  background: none; border: 0; padding: 4px 10px; cursor: pointer; border-radius: 3px;
  color: var(--ink-soft); font-weight: 500; font-size: 14px;
}
.langs button[aria-pressed="true"] { background: var(--cobalt); color: var(--on-cobalt); }

.panel { width: min(26rem, calc(100% - 32px)); margin: clamp(16px, 8vh, 72px) auto 48px; }
h1 { margin: 0 0 24px; font: 400 clamp(30px, 4vw, 40px)/1.15 var(--serif); color: var(--cobalt); }
label { display: block; margin-bottom: 6px; font-weight: 500; }
input {
  display: block; width: 100%; height: 48px; padding: 0 12px; margin-bottom: 18px;
  background: #fff; border: 2px solid var(--cobalt); border-radius: 3px;
}
.field-hint { margin: -12px 0 18px; font-size: 14px; color: var(--ink-soft); }
.error { margin: 0 0 14px; color: var(--madder); font-weight: 500; }
button[type="submit"] {
  width: 100%; height: 50px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--cobalt); color: var(--on-cobalt); font-weight: 600;
}
button[type="submit"]:hover:not(:disabled) { background: var(--cobalt-deep); }
button[type="submit"]:disabled { opacity: .55; cursor: progress; }
.switch { margin: 18px 0 6px; }
@media (pointer: coarse) {
  input { font-size: 16px; }
  .langs button { min-height: 36px; min-width: 36px; }
}
.guest { margin: 0; }