/* Shared by /login/ and /signup/ (0.1.1013): one copy, so the two auth pages
   cannot drift apart. */
/* 0.1.1012, owner-chosen (split login concept): the form on the left, the
   homepage hero footage in a rounded frame on the right. The form, its copy and
   every script hook are unchanged; this only lays a second column beside it.
   On a phone the panel is hidden (0.1.1018). The poster
   paints first, so a slow connection still shows the same frame. */
.auth-media{position:relative;flex:1 1 50%;min-height:220px;margin:var(--space-24) var(--space-24) var(--space-24) 0;
  border-radius:16px;overflow:hidden;background:#241a15 url('/hero_poster.jpg?v=0.1.1022') center/cover no-repeat}
.auth-media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.auth-media-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,11,.10) 40%,rgba(20,14,11,.72) 100%)}
.auth-media-copy{position:absolute;left:40px;right:40px;bottom:40px;color:var(--white)}
.auth-media-copy p{font-family:var(--font-display);font-size:34px;line-height:1.2;margin:0 0 10px;max-width:16ch;text-wrap:balance}
.auth-media-copy span{font-size:var(--text-body);color:rgba(255,255,255,.82)}
@media (min-width:901px){
  body{flex-direction:row}
  body > .grid{flex:1 1 50%;min-width:0}
}
/* 0.1.1018, owner-set: phones get the form alone. The page's inline script
   only gives the video a source above 900px, so nothing is downloaded here. */
@media (max-width:900px){
  .auth-media{display:none}
}
@media (prefers-reduced-motion:reduce){.auth-media-video{display:none}}