:root { color-scheme: light; --ink:#171715; --muted:#77766f; --line:#deded8; --serif:'minion-pro','EB Garamond',Georgia,serif; --sans:'proxima-nova','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; display:grid; place-items:center; padding:32px 22px; background:#fafaf8; color:var(--ink); }
.gate { width:min(100%,430px); text-align:center; }
.brand { display:inline-block; width:150px; margin:0 auto 76px; }
.brand img { width:100%; height:auto; }
.eyebrow { margin:0 0 14px; color:var(--muted); text-transform:uppercase; }
h1 { margin:0; }
.intro { margin:19px 0 0; color:#595851; }
.login { margin:61px auto 0; max-width:340px; text-align:left; }
.login label { display:block; margin-bottom:10px; color:#56554f; }
.password-row { display:flex; border-bottom:1px solid #98978e; }
input { min-width:0; flex:1; height:48px; padding:0 10px 0 0; border:0; outline:0; background:transparent; color:var(--ink); }
input::placeholder { color:#a2a198; }
input:focus-visible { outline:1px solid var(--ink); outline-offset:2px; }
button { min-width:72px; border:0; background:transparent; color:var(--ink); cursor:pointer; }
button:hover { color:var(--muted); }
.error { margin:12px 0 0; color:#a12828; }
.rule { display:block; width:36px; height:1px; margin:72px auto 0; background:var(--line); }
.logout { min-height:44px; margin-top:40px; text-decoration:underline; text-underline-offset:4px; }
@media (max-width:600px) { .brand { margin-bottom:61px; } .login { margin-top:50px; } .rule { margin-top:58px; } }