:root{--paper:#EEE8DC;--paper-2:#E3DBC9;--ink:#181510;--ink-2:#433E33;--line:rgba(24,21,16,.16);--accent:#B4502A;--accent-dk:#7E3014;--fd:"Fraunces",Georgia,serif;--fb:"Manrope",system-ui,sans-serif;--fm:"Space Mono",monospace}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--fb);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:76px 76px}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
.mono{font-family:var(--fm);font-size:.7rem;letter-spacing:.09em}
::selection{background:var(--accent);color:var(--paper)}

.login-body{min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:76px 76px}
.lx{position:absolute;font-family:var(--fm);color:var(--accent);font-size:16px}
.lx.a{top:14%;left:12%}.lx.b{top:22%;right:14%}.lx.c{bottom:18%;left:20%}.lx.d{bottom:12%;right:18%}

.login-wrap{width:min(430px,92vw);text-align:center;padding:40px 0}
.brand{font-family:var(--fd);font-weight:640;font-size:1.6rem}
.brand i{color:var(--accent);font-style:italic;margin:0 2px}
.brand sup{font-size:.5em;color:var(--accent)}
.login-sub{color:var(--ink-2);margin:10px 0 30px}

.login-card{border:1px solid var(--ink);background:var(--paper-2);box-shadow:8px 8px 0 var(--ink);padding:26px 26px 22px;text-align:left}
.login-card.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.lc-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:20px;color:var(--ink-2)}

.lfield{display:block;margin-bottom:18px;color:var(--ink-2)}
.lfield input{width:100%;margin-top:8px;padding:12px 14px;font-family:var(--fm);font-size:.95rem;letter-spacing:.05em;background:var(--paper);border:1px solid var(--ink);color:var(--ink);transition:.25s}
.lfield input:focus{outline:none;border-color:var(--accent);box-shadow:4px 4px 0 var(--accent)}

.lerror{color:var(--accent-dk);margin:-6px 0 14px;font-weight:700}

.lbtn{width:100%;padding:15px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-family:var(--fm);font-size:.78rem;letter-spacing:.14em;transition:.25s}
.lbtn:hover{background:var(--accent);border-color:var(--accent);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink-2)}

.lc-foot{display:flex;justify-content:space-between;margin-top:18px;padding-top:12px;border-top:1px dashed rgba(24,21,16,.4);color:var(--ink-2);font-size:.58rem}

.hint{margin-top:26px;padding:13px 16px;border:1px dashed rgba(24,21,16,.45);color:var(--ink-2);font-size:.62rem;line-height:2}
.hint b{color:var(--accent-dk)}
.hint i{font-style:normal;color:var(--accent)}
.back{display:inline-block;margin-top:20px;color:var(--ink-2)}
.back:hover{color:var(--accent)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}