:root { --forest:#183d30; --deep:#102b22; --clay:#b96f4d; --cream:#faf9f4; --paper:#f1ede4; --ink:#252920; --muted:#73786e; --line:rgba(37,41,32,.15); }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Nunito, "Segoe UI", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, .9fr) 1.1fr; }
.auth-story { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; color: white; overflow: hidden; }
.auth-story > img, .auth-story__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-story > img { object-fit: cover; }
.auth-story__overlay { background: linear-gradient(to top, rgba(8,31,22,.88), rgba(8,31,22,.15) 70%); }
.auth-brand { position: absolute; z-index: 2; left: 45px; top: 38px; display: flex; align-items: center; gap: 10px; }
.auth-brand svg { width: 42px; height: 42px; }
.auth-brand > span { display: grid; line-height: 1.05; }
.auth-brand strong { font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; }
.auth-brand small { margin-top: 5px; font-size: .59rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.auth-story blockquote, .auth-story > p { position: relative; z-index: 2; }
.auth-story blockquote { max-width: 580px; margin: 0 0 22px; font-family: Georgia, serif; font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.2; letter-spacing: -.025em; }
.auth-story > p { margin: 0; color: #c3d0c7; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-content { display: grid; place-items: center; padding: 45px; }
.auth-content__inner { width: min(440px, 100%); }
.back-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 65px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.auth-heading > p { margin: 0 0 12px; color: var(--forest); font-size: .65rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.auth-heading h1 { margin: 0 0 13px; color: var(--deep); font-family: Georgia, serif; font-size: clamp(2.5rem, 4vw, 3.6rem); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; }
.auth-heading > span { display: block; max-width: 380px; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.auth-alert { margin-top: 24px; padding: 12px 14px; color: #824338; background: #f3e1dc; border-left: 3px solid var(--clay); font-size: .7rem; }
.auth-alert--success { color: #183d30; background: #e2eee7; border-left-color: #39765d; }
.auth-form { display: grid; gap: 22px; margin-top: 35px; }
.auth-form > label { display: grid; gap: 7px; }
.auth-form > label > span { font-size: .7rem; font-weight: 900; }
.auth-form > label > input { width: 100%; height: 52px; padding: 0 14px; color: var(--ink); background: white; border: 1px solid var(--line); outline: 0; }
.auth-form > label > input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(24,61,48,.08); }
.auth-error { margin-top: 20px; padding: 12px 14px; color: #824338; background: #f3e1dc; border-left: 3px solid var(--clay); font-size: .7rem; }
.field { display: grid; gap: 8px; }
.field label, .field__label a, .field__label span { font-size: .7rem; font-weight: 900; }
.field__label { display: flex; justify-content: space-between; }
.field__label a { color: var(--forest); }
.field__label span { color: var(--muted); font-size: .62rem; font-weight: 600; }
.field input { width: 100%; height: 52px; padding: 0 14px; color: var(--ink); background: white; border: 1px solid var(--line); outline: 0; transition: border .2s, box-shadow .2s; }
.field input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(24,61,48,.08); }
.field small { color: #994e42; font-size: .65rem; }
.remember { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .68rem; }
.remember input { accent-color: var(--forest); }
.auth-form button, .auth-primary-link { min-height: 53px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: white; background: var(--forest); border: 0; font-size: .72rem; font-weight: 900; transition: transform .2s, background .2s; }
.auth-form button:hover, .auth-primary-link:hover { background: #24513f; transform: translateY(-2px); }
.access-note { display: grid; grid-template-columns: 28px 1fr; gap: 11px; margin-top: 28px; padding: 14px; background: var(--paper); }
.access-note > span { width: 26px; height: 26px; display: grid; place-items: center; color: var(--forest); border: 1px solid var(--line); border-radius: 50%; font-family: Georgia, serif; font-size: .75rem; }
.access-note p { margin: 0; color: var(--muted); font-size: .65rem; }
.access-note strong { display: block; color: var(--ink); }
.access-note--large { margin: 35px 0 18px; padding: 20px; }
.access-note--large p { font-size: .74rem; line-height: 1.7; }
.auth-foot { margin: 65px 0 0; color: #969a92; font-size: .6rem; text-align: center; }
.account-form { margin-top: 28px; }
.account-form > small { color: var(--muted); font-size: .66rem; }
.account-divider { height: 1px; margin: 34px 0 0; background: var(--line); }
.account-logout { margin-top: 24px; }
.account-logout button { min-height: 44px; padding: 0; color: #824338; background: transparent; border: 0; font-weight: 800; cursor: pointer; }
@media (max-width: 860px) { .auth-shell { grid-template-columns: 1fr; } .auth-story { display: none; } .auth-content { min-height: 100vh; padding: 30px 20px; } .back-link { margin-bottom: 50px; } }
@media (max-width: 420px) { .auth-content { place-items: start stretch; padding-top: 28px; } .auth-heading h1 { font-size: 2.55rem; } }