:root {
  --paper: #f4efe5;
  --surface: #fffdf8;
  --ink: #292b26;
  --ink-muted: #6f7068;
  --line: #d8d0c2;
  --sage: #667b68;
  --sage-dark: #526554;
  --sage-pale: #dde5dc;
  --rose: #a46560;
  --error: #a53e37;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
svg { width: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.auth-page { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr); min-height: 100vh; }
.auth-intro { position: relative; display: flex; min-height: 600px; flex-direction: column; overflow: hidden; padding: 36px clamp(30px, 7vw, 110px); background: #e9e2d5; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--sage); color: #fff; }
.brand strong { display: block; font: 600 21px/1 var(--serif); }.brand small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.intro-copy { position: relative; z-index: 1; max-width: 490px; margin: auto 0; }.eyebrow { margin: 0 0 10px; color: var(--rose); font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }.intro-copy h1, .auth-card h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; }.intro-copy h1 { font-size: clamp(44px, 5vw, 72px); line-height: .98; }.intro-copy > p:last-child { max-width: 390px; margin: 22px 0 0; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.branch-mark { position: absolute; right: -75px; bottom: -68px; width: min(47vw, 530px); height: min(47vw, 530px); border: 1px solid rgba(102, 123, 104, .24); border-radius: 50%; }.branch-mark::before, .branch-mark::after { position: absolute; content: ""; background: rgba(102, 123, 104, .28); }.branch-mark::before { top: 17%; bottom: 0; left: 50%; width: 1px; }.branch-mark::after { top: 41%; left: 16%; width: 68%; height: 1px; }.branch-mark span { position: absolute; display: block; width: 16px; height: 16px; border: 4px solid #e9e2d5; border-radius: 50%; background: var(--sage); }.branch-mark span:nth-child(1) { top: 13%; left: calc(50% - 8px); }.branch-mark span:nth-child(2) { top: 37%; left: 12%; }.branch-mark span:nth-child(3) { top: 37%; right: 12%; }.branch-mark span:nth-child(4) { bottom: 21%; left: 30%; }.branch-mark span:nth-child(5) { right: 30%; bottom: 21%; }
.intro-footnote { position: relative; z-index: 1; margin: 0; color: var(--ink-muted); font-size: 11px; }
.auth-panel { display: grid; place-items: center; padding: 32px; background: var(--surface); }.auth-card { width: min(100%, 400px); }.auth-card h2 { font-size: clamp(35px, 4vw, 48px); line-height: 1.02; }.auth-subtitle { max-width: 360px; margin: 14px 0 30px; color: var(--ink-muted); font-size: 14px; line-height: 1.55; }
.auth-form { display: grid; gap: 17px; }.auth-form label { display: grid; gap: 7px; color: var(--ink-muted); font-size: 12px; font-weight: 650; }.auth-form input { min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 16px var(--sans); transition: border-color 120ms ease, background-color 120ms ease; }.auth-form input:hover { border-color: #aaa294; }.auth-form input:focus-visible { border-color: var(--sage); outline: 2px solid rgba(102, 123, 104, .25); outline-offset: 2px; }.form-hint { margin: -5px 0 1px; color: var(--ink-muted); font-size: 11px; line-height: 1.45; }.primary-button { min-height: 48px; margin-top: 5px; border: 1px solid var(--sage); border-radius: 8px; background: var(--sage); color: #fff; cursor: pointer; font-weight: 700; transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease; }.primary-button:hover { border-color: var(--sage-dark); background: var(--sage-dark); }.primary-button:active { transform: scale(.99); }.primary-button:focus-visible { outline: 3px solid rgba(102, 123, 104, .28); outline-offset: 3px; }.form-message { margin: 0 0 18px; padding: 11px 12px; border-radius: 8px; font-size: 12px; line-height: 1.45; }.form-message.is-error { background: #f9e7e5; color: #83332e; }.form-message.is-info { background: var(--sage-pale); color: var(--sage-dark); }
@media (max-width: 760px) { .auth-page { display: block; }.auth-intro { min-height: 290px; padding: 25px 24px; }.intro-copy { margin: auto 0 0; }.intro-copy .eyebrow, .intro-copy > p:last-child { display: none; }.intro-copy h1 { max-width: 290px; font-size: 41px; }.branch-mark { right: -54px; bottom: -88px; width: 290px; height: 290px; }.auth-panel { min-height: calc(100vh - 290px); padding: 38px 24px; }.auth-card { width: 100%; max-width: 460px; }.auth-card h2 { font-size: 39px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }