@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@400;600;800&display=swap');

:root { --bg:#050505; --paper:#f5f5f5; --muted:rgba(255,255,255,.5); --soft:rgba(255,255,255,.75); --line:rgba(255,255,255,.18); --accent:#fff; --red:#f0796e; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; min-height:100%; }
body { min-height:100dvh; overflow-x:hidden; overflow-y:auto; background:var(--bg); color:var(--paper); font-family:Montserrat,Arial,sans-serif; }
.noise { position:fixed; inset:0; opacity:.035; pointer-events:none; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.login-shell { width:100%; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); }
.brand-panel { min-height:100dvh; padding:clamp(26px,4vh,44px) clamp(28px,4vw,54px); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); position:relative; overflow:hidden; background:radial-gradient(circle at 72% 45%,rgba(255,255,255,.1),transparent 38%),var(--bg); animation:panelReveal .85s ease both; }
.brand-panel:after { content:'P'; position:absolute; right:-.08em; bottom:-.35em; font-size:55vw; line-height:.7; font-weight:800; color:rgba(255,255,255,.035); pointer-events:none; }
.brand,.back,a { color:inherit; }
.brand { position:relative; z-index:1; animation:fadeUp .7s .05s ease both; text-decoration:none; font-size:15px; font-weight:800; letter-spacing:.18em; }
.brand span { color:var(--accent); }
.brand-copy { position:relative; z-index:1; max-width:610px; animation:fadeUp .8s .18s ease both; }
.eyebrow { margin:0 0 14px; color:var(--muted); font:500 10px/1.4 ui-monospace,'Courier New',monospace; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(58px,7.5vw,112px); line-height:.84; letter-spacing:-.07em; font-weight:800; }
h1 em { color:var(--paper); font-family:'EB Garamond',Georgia,serif; font-size:1.08em; font-weight:400; letter-spacing:-.04em; }
.manifesto { max-width:440px; margin:28px 0 0; color:var(--soft); font-family:'EB Garamond',Georgia,serif; font-size:1.2rem; line-height:1.45; }
.brand-meta { position:relative; z-index:1; display:flex; gap:28px; color:rgba(255,255,255,.38); font:400 10px ui-monospace,'Courier New',monospace; letter-spacing:.12em; }
.form-panel { min-height:100dvh; display:grid; place-items:center; padding:48px clamp(28px,6vw,8vw); border-left:1px solid rgba(255,255,255,.04); background:#111110; color:var(--paper); }
.form-wrap { width:min(100%,430px); animation:fadeUp .75s .22s ease both; }
.form-panel .eyebrow { margin-bottom:14px; }
h2 { margin:0; font-size:clamp(32px,3.6vw,46px); line-height:1; letter-spacing:-.055em; }
.intro { margin:11px 0 28px; color:var(--muted); font-family:'EB Garamond',Georgia,serif; font-size:1.15rem; }
form label,.password-heading { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.input-wrap { margin-top:7px; border-bottom:1px solid var(--line); transition:border-color .2s; }
.input-wrap:focus-within { border-color:var(--paper); }
input[type=email],input[type=password],input[type=text] { width:100%; border:0; outline:0; padding:12px 0; background:transparent; color:var(--paper); font:400 14px Montserrat,sans-serif; }
input::placeholder { color:rgba(255,255,255,.32); }
.error { min-height:14px; margin:4px 0 8px; color:var(--red); font-size:10px; }
.password-heading { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.password-heading a,.signup a { color:var(--paper); text-underline-offset:3px; }
.password-input { display:flex; align-items:center; }
.password-input button { border:0; background:none; padding:8px 0 8px 15px; cursor:pointer; color:var(--muted); font:500 10px ui-monospace,'Courier New',monospace; letter-spacing:.1em; }
.remember { display:flex; gap:9px; align-items:center; margin:5px 0 20px; color:var(--muted); font-size:10px; font-weight:400; text-transform:none; letter-spacing:0; }
.remember input { accent-color:var(--paper); width:14px; height:14px; }
.submit { width:100%; border:1px solid var(--paper); background:var(--paper); color:var(--bg); padding:15px 18px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font:600 10px Montserrat,sans-serif; letter-spacing:.1em; transition:transform .2s,background .2s,color .2s; }
.submit:hover { transform:translateY(-2px); background:transparent; color:var(--paper); }
.submit span:last-child { font-size:18px; }
.status { min-height:20px; margin:14px 0 0; font-size:10px; color:var(--soft); }
.status.success { color:#b9df67; }
.signup { margin:18px 0 0; color:var(--muted); font-size:10px; }
.back { display:inline-block; margin-top:22px; color:var(--muted); font:500 10px ui-monospace,'Courier New',monospace; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.back:hover { color:var(--paper); }
@keyframes panelReveal { from { opacity:0; transform:scale(1.015); } to { opacity:1; transform:none; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media (max-width:900px) { .login-shell { grid-template-rows:auto auto; grid-template-columns:1fr; } .brand-panel { min-height:280px; height:36dvh; max-height:360px; padding:20px 24px; border-right:0; border-bottom:1px solid var(--line); } .brand-copy .eyebrow { margin-bottom:8px; } h1 { font-size:clamp(44px,13vw,78px); } .manifesto { display:none; } .brand-meta { font-size:9px; } .form-panel { min-height:64dvh; padding:36px 24px 44px; } .intro { margin-bottom:18px; } .input-wrap input { padding:9px 0; } .error { min-height:10px; margin:3px 0 6px; } .remember { margin:4px 0 14px; } .submit { padding:13px 16px; } .signup { margin-top:13px; } .back { margin-top:14px; } }
@media (max-width:520px) { .brand-panel { min-height:235px; height:34dvh; padding:18px 20px; } .form-panel { padding:32px 20px 40px; } .form-wrap { width:100%; } }
@media (min-width:901px) { body { overflow:hidden; } .form-panel { padding-top:clamp(16px,3vh,48px); padding-bottom:clamp(16px,3vh,48px); } }
@media (min-width:901px) and (max-height:720px) { .brand-panel { padding-top:24px; padding-bottom:24px; } .manifesto { margin-top:18px; font-size:1.05rem; } .form-panel { padding-top:16px; padding-bottom:16px; } .intro { margin-top:8px; margin-bottom:18px; } .input-wrap input { padding:9px 0; } .error { min-height:9px; margin:2px 0 5px; } .remember { margin-bottom:12px; } .back { margin-top:14px; } .signup { margin-top:12px; } }
@media (prefers-reduced-motion:reduce) { .brand-panel,.brand,.brand-copy,.form-wrap { animation:none; } }