/* Login page in the new Aisleful look: warm cream, Fraunces headings, Onest body, pill buttons. */
@font-face { font-family: Fraunces; src: url(../fonts/fraunces.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Onest; src: url(../fonts/onest.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --ink: #1D1216; --cream: #FFF3E4; --peach: #FFE3CB; --fg: #2A1A16; --mute: #64493F; --acc: #B03015; --hi: #FF9A78; --focus: #1A44B8; --ease: cubic-bezier(.2, .7, .2, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--cream); color: var(--fg); font: 1.0625rem/1.6 Onest, system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 28px 20px 64px; }
a { color: var(--acc); font-weight: 600; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.brand { background: var(--ink); color: var(--cream); border-radius: 999px; padding: 6px 18px; font: 560 1.15rem Fraunces, Georgia, serif; text-decoration: none; margin-bottom: 36px; }
.brand .dot { color: var(--hi); }
.panel { width: min(440px, 100%); background: var(--peach); border-radius: 28px; padding: 32px 28px; }
.panel[hidden] { display: none; }
h2 { font: 520 clamp(1.9rem, 6vw, 2.5rem)/1.05 Fraunces, Georgia, serif; letter-spacing: -0.022em; margin: 0 0 8px; }
h2 em { font-style: normal; background: linear-gradient(transparent 62%, var(--hi) 62%); }
.lead { color: var(--mute); margin: 0 0 18px; }
label { display: block; font-weight: 600; margin: 14px 0 4px; }
input { width: 100%; min-height: 48px; border-radius: 14px; border: 2px solid var(--mute); background: var(--cream); color: var(--fg); padding: 0 14px; font: inherit; }
input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-toggle { position: absolute; right: 4px; top: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--mute); cursor: pointer; border-radius: 999px; display: grid; place-items: center; }
.pw-toggle .eye-off, .pw-toggle.revealed .eye { display: none; }
.pw-toggle.revealed .eye-off { display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; background: var(--ink); color: var(--cream); font: 600 1rem Onest, sans-serif; cursor: pointer; transition: transform .2s var(--ease); }
.btn.full { width: 100%; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: default; }
.note { color: var(--mute); font-size: .95rem; }
.msg { padding: 12px 16px; border-radius: 14px; margin: 14px 0; font-size: .95rem; border: 2px solid var(--acc); background: var(--cream); }
.msg.ok { border-color: #45602F; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* The legal footer js/legal.js adds to every page: links on one wrapped line, cookie settings as a link, business line underneath. */
footer.site { width: min(440px, 100%); margin-top: 28px; text-align: center; font-size: .85rem; color: var(--mute); }
.footer-legal .legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 10px; }
.footer-legal .legal-links a, .footer-legal .legal-links button { color: var(--mute); font: inherit; font-weight: 500; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.footer-legal .legal-business { line-height: 1.5; }
.footer-legal .legal-business a { color: var(--mute); font-weight: 500; }