.access-page { margin: 0; color: #10211f; background: #f7f4ec; font: 1rem/1.6 "Avenir Next", Avenir, sans-serif; }
.access-main { width: min(100% - 48px, 460px); margin: clamp(40px, 12vh, 120px) auto; }
.access-brand { display: flex; gap: 16px; align-items: center; color: #0d3934; text-decoration: none; font-weight: 800; }
.access-brand span { font-weight: 500; }
.access-main h1 { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.15; letter-spacing: -.025em; margin: 48px 0 20px; }
.access-main p { color: #4c5f5b; }
.access-main form { display: grid; margin-top: 32px; }
.access-main label { font-weight: 600; margin: 16px 0 6px; }
.access-main input { box-sizing: border-box; min-width: 0; width: 100%; padding: 13px; border: 1px solid #71817b; border-radius: 8px; background: #fffefa; color: #10211f; font: inherit; caret-color: #0d3934; }
.access-main button { margin-top: 28px; padding: 14px; border: 0; border-radius: 8px; background: #0d3934; color: #fffefa; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s ease-out; }
.access-main button:hover { background: #082b28; }
.access-main button:disabled { opacity: .65; cursor: wait; }
.access-main :focus-visible { outline: 3px solid #0d3934; outline-offset: 4px; }
.access-main ::selection { background: #b7e6cf; color: #10211f; }
.access-help { font-size: .875rem; margin-top: 32px; }
#login-status { min-height: 1.6em; color: #8a3226; margin: 12px 0 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .access-main button { transition: none; } }