.auth-gate { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto 1fr; padding: clamp(28px, 5vw, 72px); background: #18231d; color: #f8f7f0; overflow: hidden; }
.auth-gate::before { content: ""; position: absolute; width: 52vw; height: 52vw; right: -18vw; bottom: -28vw; border: 1px solid #d9f25f; border-radius: 47% 53% 42% 58%; transform: rotate(-18deg); box-shadow: 0 0 0 9vw #ff6b4a; opacity: .9; }
.auth-gate.hidden { display: none; }
.auth-mark { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.auth-mark > span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50% 48% 53% 44%; background: #d9f25f; color: #18231d; font: 700 31px var(--serif); }
.auth-mark small { font: 500 10px/1.45 var(--mono); letter-spacing: .2em; }
.auth-copy { align-self: center; max-width: 510px; position: relative; z-index: 1; }
.auth-copy h2 { margin: 20px 0; font: 600 clamp(38px, 5vw, 68px)/1.1 var(--serif); letter-spacing: -.04em; }
.auth-copy > p:last-child { color: #aeb8b1; font: 500 13px/1.8 var(--serif); }
.auth-form { align-self: center; justify-self: end; width: min(430px, 100%); padding: clamp(26px, 4vw, 48px); background: #f1f0e8; color: #18231d; border: 1px solid #d9f25f; box-shadow: 12px 12px 0 #d9f25f; position: relative; z-index: 2; }
.auth-form label { display: block; margin: 0 0 26px; font: 600 12px var(--serif); }
.auth-form input { width: 100%; margin-top: 8px; padding: 13px 3px; border: 0; border-bottom: 1px solid #18231d; background: transparent; outline: none; font: 500 14px var(--mono); }
.auth-form input:focus { border-bottom: 3px solid #ff6b4a; }
.auth-form .primary { width: 100%; margin-top: 6px; }
.auth-error { min-height: 18px; color: #ad3f2d; font-size: 10px; }
.auth-index { position: absolute; right: 4vw; top: 4vh; color: #d9f25f; font: 300 clamp(80px, 13vw, 180px)/.7 var(--mono); opacity: .12; text-align: right; }
.auth-index i { font-size: .12em; letter-spacing: .4em; }
@media (max-width: 820px) { .auth-gate { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 22px; } .auth-copy { align-self: end; } .auth-copy h2 { font-size: 34px; margin: 10px 0; } .auth-form { align-self: start; justify-self: stretch; } }