/* Sign-in and sign-up. Requires theme.css. */

body.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }

.auth-aside {
    position: relative; overflow: hidden;
    background: var(--g-deep); color: #fff;
    padding: 56px 58px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside::before, .auth-aside::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.auth-aside::before { width: 400px; height: 400px; top: -140px; left: -90px;
    background: rgba(217,70,239,.45); animation: floatSlow 18s ease-in-out infinite; }
.auth-aside::after  { width: 440px; height: 440px; bottom: -180px; right: -120px;
    background: rgba(6,182,212,.4); animation: floatSlow 23s ease-in-out infinite reverse; }
.auth-aside > * { position: relative; z-index: 1; }

.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .mark {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(12px);
    display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff;
}
.auth-brand .name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }

.auth-pitch h2 {
    font-size: clamp(30px, 3.4vw, 44px); font-weight: 800;
    letter-spacing: -.04em; line-height: 1.1; margin: 0 0 16px; max-width: 14ch;
}
.auth-pitch p { font-size: 15.5px; color: rgba(255,255,255,.75); margin: 0;
    max-width: 42ch; line-height: 1.65; font-weight: 500; }

.auth-marks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.auth-mark {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px); border-radius: 13px; padding: 13px 17px; min-width: 128px;
}
.auth-mark .k { display: block; font-size: 11.5px; color: rgba(255,255,255,.65); font-weight: 600; }
.auth-mark .n { display: block; font-size: 19px; font-weight: 800; margin-top: 3px; letter-spacing: -.025em; }

.auth-foot-note { font-size: 12.5px; color: rgba(255,255,255,.55); font-weight: 500; }

.auth-main { display: grid; place-items: center; padding: 44px 26px; }
.auth-card { width: 100%; max-width: 396px; }
.auth-card h1 { margin: 0 0 7px; font-size: 27px; font-weight: 800; letter-spacing: -.035em; }
.auth-card .lede { margin: 0 0 28px; font-size: 14px; color: var(--muted); font-weight: 500; }
.auth-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 17px 0 7px; }
.auth-card button[type=submit] {
    width: 100%; height: 48px; margin-top: 26px;
    background: var(--g-brand); border: none; border-radius: 12px; color: #fff;
    font: 700 15px var(--font); cursor: pointer;
    box-shadow: var(--glow-i); background-size: 160% 160%;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-position .5s var(--ease-2);
}
.auth-card button[type=submit]:hover {
    transform: translateY(-2px); background-position: 100% 50%;
    box-shadow: 0 14px 36px -10px rgba(99,102,241,.7);
}
.auth-card hr { border: none; border-top: 1px solid var(--line); margin: 26px 0 4px; }
.foot { margin-top: 24px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.foot a { font-weight: 700; text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    body.auth { grid-template-columns: 1fr; }
    .auth-aside { padding: 30px 24px; }
    .auth-pitch, .auth-marks { display: none; }
    .auth-main { padding: 34px 24px 52px; }
}