.auth-page { min-height: calc(100vh - 44px); display: flex; flex-direction: column; }
.auth-page main { flex: 1; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 9%; align-items: start; max-width: 1000px; margin: 0 auto; padding: 76px 0 70px; }
.auth-story { padding-top: 40px; }
.auth-story h2 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.2; letter-spacing: -1.5px; margin-bottom: 23px; }
.auth-story h2 em { color: var(--wine); }
.story-description { max-width: 325px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.auth-envelope { position: relative; width: 285px; margin: 76px 0 0 18px; transform: rotate(-7deg); }
.auth-envelope svg { position: relative; display: block; width: 100%; filter: drop-shadow(0 9px 6px #352c2910); }
.envelope-letter { position: absolute; z-index: 1; left: 13%; top: -25px; width: 75%; height: 106px; padding: 17px 25px; background: #fffdf6; box-shadow: 0 -3px 12px #352c290a; }
.envelope-letter span { color: var(--blue); font: 31px "Caveat", cursive; }
.envelope-letter i { display: block; height: 1px; background: #cbd0cf; margin-top: 10px; }
.envelope-letter i:last-child { width: 60%; }
.auth-envelope > p { margin: 26px 0 0; font: 27px/1.2 "Caveat", cursive; color: var(--blue); text-align: center; transform: rotate(3deg); }
.auth-paper { position: relative; min-width: 0; background: #fffdf6; padding: 38px 38px 28px; border: 1px solid #e7ded0; box-shadow: 6px 7px 0 #ece5d8, 0 15px 35px #352c2910; }
.auth-paper .paper-clip { left: auto; right: 28px; }
.auth-paper .eyebrow { font-size: 10px; margin: 0 0 15px; }
.auth-paper h1 { font-size: 40px; letter-spacing: -1.4px; line-height: 1.15; margin: 0 0 14px; }
.auth-intro { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
.auth-field { margin-bottom: 21px; }
.auth-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.auth-field input { display: block; width: 100%; min-width: 0; min-height: 49px; padding: 10px 12px; border: 1px solid #b9afa1; border-radius: 2px; background: #fffef9; color: var(--ink); font: inherit; font-size: 16px; }
.auth-field input:hover { border-color: #887769; }
.auth-field input:focus-visible, .auth-form button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.auth-help { margin-top: 7px; font-size: 11px; color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
.auth-help ul { padding-left: 16px; margin: 0; }
.auth-help li { padding-left: 2px; margin-bottom: 3px; }
.auth-errors { padding: 12px 14px; border-left: 3px solid var(--wine); background: #f4e7e4; color: #7a2d3d; margin: 0 0 22px; font-size: 13px; }
.auth-paper .errorlist { padding: 0; margin: 7px 0 0; list-style: none; font-size: 12px; color: #8d293a; line-height: 1.6; }
.auth-errors .errorlist { margin: 0; }
.auth-field.has-error input { border-color: #8d293a; }
.auth-form .primary-link, .auth-return { width: 100%; border: 0; font-family: inherit; cursor: pointer; }
.auth-switch { margin: 24px 0 0; border-top: 1px solid var(--rule); padding-top: 20px; color: var(--muted); font-size: 12px; text-align: center; }
.auth-switch a { color: var(--wine); font-weight: 600; }
.auth-household-note { margin: 0 0 22px; padding: 13px 0 0; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.7; color: var(--muted); }

@media (max-width: 1050px) {
    .auth-layout { gap: 6%; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
    .auth-envelope { width: 235px; margin-left: 0; }
    .auth-paper { padding: 34px 28px 26px; }
    .auth-paper h1 { font-size: 36px; }
}
@media (max-width: 760px) {
    .auth-page { min-height: calc(100vh - 24px); }
    .auth-layout { grid-template-columns: minmax(0, 440px); justify-content: center; padding: 44px 0 42px; }
    .auth-story { display: none; }
    .auth-paper { padding: 34px 26px 27px; }
    .auth-paper h1 { font-size: 36px; }
    .auth-paper .eyebrow { font-size: 10px; }
    .auth-intro { font-size: 14px; }
    .auth-field label { font-size: 14px; }
    .auth-help { font-size: 12px; }
}
@media (max-width: 390px) {
    .auth-page { min-height: calc(100vh - 16px); }
    .auth-layout { padding: 35px 0; }
    .auth-paper { padding: 31px 17px 24px; }
    .auth-paper h1 { font-size: 31px; }
    .auth-form .primary-link, .auth-return { padding-left: 17px; padding-right: 17px; gap: 14px; }
    .auth-switch { font-size: 12px; }
}