/* Hallmark · macrostructure: editorial-split · tone: austere-corporate · anchor hue: red-black */
:root{
  --ink:#17100f; --ink-soft:#3a3230; --muted:#6f6560; --line:#e3d9d3;
  --paper:#faf7f2; --panel:#ffffff; --maroon:#7a1220; --red:#c8102e; --red-tint:#f6e7e6;
  --serif:"Fraunces",Georgia,serif; --sans:"Archivo",Arial,sans-serif; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;font:15px/1.6 var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* left — brand panel */
.brand-panel{background:var(--ink);color:#e7d9d5;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.brand-panel::after{content:"";position:absolute;right:-80px;bottom:-80px;width:340px;height:340px;border:1.5px solid #3a2c29;border-radius:50%;pointer-events:none}
.brand-panel::before{content:"";position:absolute;right:-20px;bottom:60px;width:200px;height:200px;border:1.5px solid #2e2220;border-radius:50%;pointer-events:none}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 18px var(--serif);color:#fff;position:relative;z-index:1}
.brand-mark{width:30px;height:30px}
.brand small{display:block;font:500 11px var(--sans);color:#9c8f88;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.brand-mid{position:relative;z-index:1;max-width:24em}
.brand-mid .eyebrow{color:#e2a7a7;text-transform:uppercase;letter-spacing:.18em;font:600 11.5px var(--sans);display:flex;align-items:center;gap:9px}
.brand-mid .eyebrow::before{content:"";width:24px;height:1.5px;background:var(--red)}
.brand-mid h1{font:600 clamp(26px,2.8vw,38px)/1.12 var(--serif);color:#fff;margin:16px 0 0;letter-spacing:-.01em}
.brand-mid p{color:#c6b6af;font-size:15px;margin:18px 0 0}
.brand-foot{position:relative;z-index:1;font:500 12.5px var(--sans);color:#8a7b74;letter-spacing:.04em}

/* right — form panel */
.form-panel{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,64px)}
.login{width:100%;max-width:400px}
.login .eyebrow{color:var(--maroon);text-transform:uppercase;letter-spacing:.16em;font:600 11px var(--sans);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.login .eyebrow::before{content:"";width:20px;height:1.5px;background:var(--red)}
.login h2{font:600 30px/1.1 var(--serif);margin:0 0 8px;letter-spacing:-.01em}
.login .sub{color:var(--muted);font-size:14px;margin:0 0 30px}
label{display:block;font:600 11px var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
input{width:100%;border:1px solid #cfc4bd;padding:12px 13px;margin:7px 0 18px;font:14.5px var(--sans);border-radius:3px;background:#fff;transition:border-color .16s}
input:focus{border-color:var(--red);outline:none}
button{width:100%;border:1.5px solid var(--ink);background:var(--ink);color:#fff;padding:13px;cursor:pointer;font:600 13.5px var(--sans);border-radius:3px;transition:all .16s var(--ease)}
button:hover{background:var(--red);border-color:var(--red)}
.error{background:var(--red-tint);color:var(--maroon);border-left:3px solid var(--red);padding:12px 14px;font:600 13px var(--sans);margin-bottom:20px;border-radius:0 3px 3px 0}
.back{display:inline-block;margin-top:22px;font:500 13px var(--sans);color:var(--muted);text-decoration:none}
.back:hover{color:var(--red)}

@media(max-width:820px){
  body{grid-template-columns:1fr}
  .brand-panel{min-height:38vh;padding-bottom:44px}
  .brand-mid p{display:none}
  .brand-foot{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}