/* Sign in, create account and password pages (auth.html), in the site's field-journal look.
   Welcome panel: the Studio photo fills it as a slowly drifting background under a deep forest fade, with the
   ✳ eyebrow and title over it. Form: a framed card with the hard offset shadow, framed inputs that take an orange
   stamp while typing, and a full-width hard-shadow button. On phones and small tablets the form comes first.
   Every rule is scoped to .auth-page. */
.auth-page{min-height:calc(100svh - var(--nav-height,88px));background:var(--cream)}
.auth-page .auth-story{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:clamp(40px,6vw,72px) var(--gutter);background:var(--forest);color:var(--cream);overflow:hidden}
.auth-page .auth-story>.visual-media{position:absolute;inset:0;z-index:-2;height:auto;margin:0}
.auth-page .auth-story>.visual-media img,.auth-page .auth-story>.visual-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.95);animation:auth-drift 22s ease-out both}
.auth-page .auth-story::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1b2a1e33 0%,#1b2a1e1a 35%,#1b2a1ec7 72%,#1b2a1ef2 100%)}
.auth-page .auth-story::after{content:"";position:absolute;inset:clamp(12px,1.6vw,22px);z-index:-1;border:1px solid #fcf9f240;pointer-events:none}
.auth-page .auth-story .eyebrow{display:flex;align-items:center;gap:10px;margin:0;color:var(--gold,#e6cf95)}
.auth-page .auth-story .eyebrow::before{content:"✳";color:var(--orange);font-size:15px;letter-spacing:0}
.auth-page .auth-story h1{max-width:12ch;margin:0;color:var(--cream);font-size:clamp(2.4rem,4.6vw,5rem);line-height:1;text-wrap:balance}
.auth-page .auth-story p:last-child{max-width:38ch;margin:0;color:#fcf9f2d9;font-size:15px;line-height:1.6}
.auth-page .auth-story>*:not(.visual-media){animation:auth-rise .9s cubic-bezier(.22,1,.36,1) both}
.auth-page .auth-story h1{animation-delay:.1s}.auth-page .auth-story p:last-child{animation-delay:.2s}
/* Form card */
.auth-page .auth-form-wrap{align-self:center;justify-self:center;width:min(100% - 2*var(--gutter),520px);margin:clamp(28px,5vw,64px) 0;padding:clamp(24px,3vw,40px);border:1px solid var(--forest);border-radius:3px;background:#fffdf8;box-shadow:8px 8px 0 var(--forest);animation:auth-rise .8s cubic-bezier(.22,1,.36,1) .05s both}
.auth-page .auth-form-wrap>.eyebrow{display:flex;align-items:center;gap:10px;color:var(--green)}
.auth-page .auth-form-wrap>.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange)}
.auth-page .auth-form-wrap h2{margin:6px 0 18px;font-size:clamp(28px,3vw,40px);line-height:1.05}
.auth-page .google-button{display:flex;justify-content:center;gap:12px;width:100%;border:1px solid var(--forest);border-radius:2px;background:#fff;color:var(--forest);box-shadow:3px 3px 0 #1b2a1e33;transition:translate .2s,box-shadow .2s}
.auth-page .google-button:hover{translate:-2px -2px;box-shadow:5px 5px 0 var(--orange)}
.auth-page .identity-choice .small-copy{display:flex;align-items:center;gap:12px;color:var(--muted)}
.auth-page .identity-choice .small-copy::before,.auth-page .identity-choice .small-copy::after{content:"";flex:1;height:1px;background:#1b2a1e26}
.auth-page #auth-form input{border:1px solid #1b2a1e59;border-radius:2px;background:#fff;transition:border-color .2s,box-shadow .2s}
.auth-page #auth-form input:focus{outline:none;border-color:var(--forest);box-shadow:3px 3px 0 var(--orange)}
.auth-page #auth-form>.button{justify-content:center;width:100%;border:1px solid var(--forest);border-radius:2px;box-shadow:4px 4px 0 var(--forest);transition:translate .2s,box-shadow .2s}
.auth-page #auth-form>.button:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--forest)}
.auth-page #auth-form>.button:active{translate:2px 2px;box-shadow:1px 1px 0 var(--forest)}
.auth-page .auth-form-wrap>p a{text-decoration-color:var(--orange);text-underline-offset:3px}
.auth-page .auth-form-wrap>.text-link{margin-top:12px}
@keyframes auth-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes auth-drift{from{transform:scale(1.08)}to{transform:scale(1)}}
/* Desktop: the welcome panel stays in view (one screen high) while the longer forms scroll beside it. */
@media(min-width:851px){.auth-page .auth-story{position:sticky;top:var(--nav-height,88px);align-self:start;height:calc(100svh - var(--nav-height,88px))}}
/* Phones and small tablets: the form first, the welcome panel after it as a shorter photo band. */
@media(max-width:850px){
  .auth-page{display:flex;flex-direction:column}
  .auth-page .auth-form-wrap{order:-1;width:min(100% - 2*var(--gutter),560px);margin:20px auto 28px;box-shadow:5px 5px 0 var(--forest)}
  .auth-page .auth-story{min-height:300px}
  .auth-page .auth-story>p:last-child{display:block}
  .auth-page .auth-story::before{background:linear-gradient(180deg,#1b2a1e26 0%,#1b2a1e8c 38%,#1b2a1ee0 70%,#1b2a1ef7 100%)}
  .auth-page .auth-story h1{font-size:clamp(2rem,9vw,3rem)}
}
@media(prefers-reduced-motion:reduce){.auth-page *{animation:none!important}}
html.reduce-motion .auth-page *{animation:none!important}