/* A photographic welcome paired with the Studio's original illustrated identity. */
.auth-page { background: #f8f5ee; }
.auth-page .login-shell { min-height: 100svh; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.auth-page .login-intro {
  display: flex;
  min-height: 800px;
  padding: 42px clamp(32px, 4.6vw, 80px) 34px;
  background: #262332;
}
.auth-page .login-photo { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
.auth-page .login-intro::before {
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(15, 20, 37, .74) 0%, rgba(21, 22, 36, .36) 40%, rgba(20, 22, 33, .03) 65%, rgba(13, 18, 30, .86) 100%);
}
.auth-page .login-intro::after { inset: 18px; z-index: -1; width: auto; height: auto; border: 1px solid rgba(255, 237, 206, .22); border-radius: 0; pointer-events: none; }
.auth-page .brand-light { gap: 12px; }
.auth-page .brand-light .brand-mark { width: 46px; height: 46px; }
.auth-page .brand-light strong { font-size: .73rem; letter-spacing: .1em; }
.auth-page .brand-light small { color: #efcf95; font-size: .95rem; }
.auth-page .login-story { margin-top: 76px; margin-bottom: auto; }
.auth-page .login-story .kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: #f1d29c; font-size: .63rem; letter-spacing: .2em; }
.auth-page .kicker > span { width: 28px; height: 1px; background: currentColor; }
.auth-page .login-intro h1 { margin: 0 0 22px; font-size: clamp(2.35rem, 3.55vw, 4rem); line-height: 1.13; font-weight: 600; letter-spacing: -.035em; }
.auth-page .login-intro h1 em { display: inline-block; color: #f5d59c; font-size: 1.12em; line-height: 1.1; }
.auth-page .login-story > p:last-child { margin: 0; color: #f3e8df; font-size: .92rem; line-height: 1.8; }
.auth-page .login-location { display: flex; align-items: center; gap: 14px; margin-top: 220px; }
.auth-page .login-location-line { height: 32px; width: 1px; flex-shrink: 0; background: #e0b76d; }
.auth-page .login-location p { margin: 0; color: #fff3df; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.auth-page .login-location p > span { padding: 0 5px; color: #edc986; }
.auth-page .login-location small { display: block; margin-top: 8px; color: #dfd5c9; font-size: .7rem; font-weight: 400; letter-spacing: .01em; text-transform: none; }
.auth-page .login-panel { min-width: 0; padding: 34px clamp(28px, 5vw, 88px); background: radial-gradient(ellipse at 50% 0%, #fffdf8, transparent 65%), #f8f5ee; }
.auth-page .login-panel::before { top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient(180deg, #cba461, #e3d7bf); }
.auth-page .login-panel-inner { width: min(390px, 100%); }
.auth-page .login-identity { margin: 0 auto 32px; text-align: center; }
.auth-page .login-identity img { display: block; width: 230px; max-width: 100%; height: auto; margin: 0 auto -3px; mix-blend-mode: multiply; }
.auth-page .login-identity p { margin: 0; color: var(--navy); font-family: var(--font-brand); font-size: 1.65rem; font-weight: 600; letter-spacing: .01em; }
.auth-page .login-identity p > span { font-family: var(--font-body); font-size: .58rem; letter-spacing: .12em; }
.auth-page .login-identity small { display: block; margin-top: 7px; color: #786c5b; font-family: var(--font-body); font-size: .56rem; font-weight: 700; letter-spacing: .23em; text-transform: uppercase; }
.auth-page .login-card { width: 100%; padding: 28px 0 0; border: 0; border-top: 1px solid #dcd0bb; border-radius: 0; background: transparent; box-shadow: none; }
.auth-page .login-card::before { display: none; }
.auth-page .login-card .eyebrow { font-size: .57rem; letter-spacing: .15em; color: #8a651e; }
.auth-page .login-card .eyebrow span { padding: 0 7px; color: #b7a991; }
.auth-page .login-card h2 { margin: 9px 0 12px; font-size: 2.6rem; font-weight: 600; letter-spacing: -.035em; }
.auth-page .login-card .muted { margin: 0 0 25px; color: #736d66; font-size: .84rem; line-height: 1.7; }
.auth-page .login-card label { margin: 18px 0; gap: 9px; color: #423e37; font-size: .61rem; letter-spacing: .1em; }
.auth-page .login-card input { width: 100%; min-width: 0; min-height: 49px; padding: 12px 14px; border-color: #d9cfbf; border-radius: 5px; background: #fffdf9; font-size: 16px; }
.auth-page .login-card input:focus-visible { outline: 2px solid #ad792c; outline-offset: 3px; }
.auth-page .login-card .btn { min-height: 51px; margin-top: 8px; padding: 14px 19px; justify-content: space-between; border: 1px solid var(--navy); border-radius: 5px; background: var(--navy); color: #fffaf1; font-size: .68rem; letter-spacing: .075em; box-shadow: 0 5px 12px #1b1f3212; }
.auth-page .login-card .btn:hover { background: #30364f; border-color: #30364f; transform: translateY(-1px); }
.auth-page .login-card .btn span { color: #e8c487; font-size: 1.25rem; font-weight: 400; line-height: 1; }
.auth-page .support { margin-top: 20px; color: #797168; font-size: .68rem; line-height: 1.6; }
.auth-page .login-access-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 28px 0 0; color: #827869; font-size: .59rem; line-height: 1.5; text-align: center; }
.auth-page .login-access-note svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (min-width: 981px) and (min-height: 950px) {
  .auth-page .login-story { margin-top: 110px; }
}
@media (max-width: 980px) {
  .auth-page .login-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-page .login-intro { min-height: 300px; padding: 28px 38px; }
  .auth-page .login-photo { object-position: center 58%; }
  .auth-page .login-intro::before { background: linear-gradient(90deg, #111626d9, #171c2a38); }
  .auth-page .login-intro::after { inset: 12px; }
  .auth-page .login-story { margin: 32px 0 8px; }
  .auth-page .login-story .kicker, .auth-page .login-story > p:last-child, .auth-page .login-location { display: none; }
  .auth-page .login-intro h1 { margin: 0; font-size: 2.45rem; }
  .auth-page .login-panel { padding: 28px 28px 32px; }
  .auth-page .login-panel::before { width: 100%; height: 2px; }
  .auth-page .login-identity { margin-bottom: 23px; }
  .auth-page .login-identity img { width: 175px; }
  .auth-page .login-identity p { font-size: 1.45rem; }
  .auth-page .login-card { padding-top: 24px; }
}
@media (max-width: 480px) {
  .auth-page .login-intro { min-height: 238px; padding: 25px 28px; }
  .auth-page .brand-light .brand-mark { width: 36px; height: 36px; }
  .auth-page .brand-light strong { font-size: .62rem; }
  .auth-page .brand-light small { font-size: .82rem; }
  .auth-page .login-story { margin-top: 30px; }
  .auth-page .login-intro h1 { font-size: clamp(1.7rem, 7.1vw, 2.15rem); }
  .auth-page .login-panel { padding: 20px 26px 28px; }
  .auth-page .login-identity img { width: 150px; }
  .auth-page .login-card h2 { font-size: 2.2rem; }
  .auth-page .login-access-note { margin-top: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-page button, .auth-page input { transition: none; }
  .auth-page .login-card .btn:hover { transform: none; }
}