:root {
  color-scheme: light;
  --paper: #f7f6f0;
  --ink: #193c32;
  --quiet: #687169;
  --line: #ced4c9;
  --error: #942f2a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.login-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 40px 24px; }
.login-panel { width: min(100%, 340px); }
.login-panel h1 { margin: 0 0 38px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; text-align: center; line-height: 1.2; }
.login-prefix { display: block; margin-bottom: 8px; font-size: clamp(1.4rem, 5.2vw, 1.8rem); letter-spacing: -.025em; }
town-name-rotator { position: relative; display: block; height: 1.22em; overflow: hidden; font-size: clamp(2.5rem, 9vw, 3.5rem); letter-spacing: -.04em; }
.town-current, .town-next { display: block; transition: transform 480ms cubic-bezier(.22, .7, .3, 1), opacity 480ms ease; }
.town-current { transform: translateY(0); opacity: 1; }
.town-next { position: absolute; inset: 0; transform: translateY(105%); opacity: 0; }
.is-changing .town-current { transform: translateY(-105%); opacity: 0; }
.is-changing .town-next { transform: translateY(0); opacity: 1; }
.is-resetting .town-current, .is-resetting .town-next { transition: none; }
.form-field { margin: 0 0 19px; }
.form-field label { display: block; margin-bottom: 8px; font-size: .8rem; line-height: 1.4; font-weight: 500; }
.form-field input { display: block; width: 100%; height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: #fffefa; color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: border-color 150ms, box-shadow 150ms; }
.form-field input:focus { border-color: var(--ink); box-shadow: 0 0 0 2px #193c3214; }
.form-field input[aria-invalid="true"] { border-color: var(--error); }
.field-errors { color: var(--error); font-size: .78rem; line-height: 1.5; }
.field-errors p { margin: 7px 0 0; }
password-toggle { display: none; }
.error-summary { padding: 14px 16px; margin-bottom: 22px; border: 1px solid #d7b4aa; border-radius: 4px; background: #fff9f5; color: var(--error); font-size: .8rem; line-height: 1.5; }
.error-summary h2 { margin: 0; font: inherit; font-weight: 600; }
.error-summary ul { margin: 7px 0 0; padding-left: 18px; }
.error-summary a { color: inherit; }
.login-submit { display: block; width: 100%; min-height: 50px; margin-top: 25px; padding: 12px 20px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: #fffefa; font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: background 150ms; }
.login-submit:hover { background: #284e41; }
.login-submit:focus-visible, .login-recovery:focus-visible, .login-manifesto:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.login-recovery, .login-manifesto { display: block; width: fit-content; margin: 17px auto 0; color: var(--quiet); font-size: .75rem; text-decoration: none; text-underline-offset: 3px; }
.login-manifesto { margin-top: 27px; }
.login-recovery:hover, .login-manifesto:hover { text-decoration: underline; }
@media (max-width: 380px) { .login-page { padding-inline: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }