/* signin.html, after app.css: its own type scale, not the page's (spec 2 covers app.css) */
body.signin { min-height: 100vh; display: flex; flex-direction: column; }
.signin-top { padding: 24px 32px 0; }
.signin-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: var(--ink-1); }
.signin-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--series-1), var(--series-3)); }
.signin-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 24px 32px 32px; }
.signin-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px 0; }
.signin-hero { text-align: center; max-width: 560px; margin-bottom: 32px; text-wrap: balance;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.signin-hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ink-1); margin-bottom: 16px; }
.signin-hero p { font-size: 18px; line-height: 1.4; color: var(--ink-2); }
.signin-card { width: 100%; max-width: 440px; padding: 28px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line);
  border-radius: 20px; }
.signin-card h2 { font-size: 18px; margin-bottom: 12px; overflow-wrap: anywhere; }
.signin-ways { display: flex; flex-direction: column; gap: 12px; }
.signin-btn, .signin-email input, .signin-email .btn { min-height: 46px; padding: 10px 16px; font-size: 15px; border-radius: 10px; }
.signin-btn { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  background: var(--chip); border-color: transparent; }
.signin-icon { width: 18px; height: 18px; flex: none; }
.signin-email { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.signin-email input { background: var(--page); }
.signin-primary { background: var(--ink-1); color: var(--page); border-color: transparent; font-weight: 500; }
.signin-primary:hover { opacity: 0.9; border-color: transparent; }
.signin-or { text-align: center; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.signin-photo { border-radius: 20px; min-height: 480px; background: var(--chip) url("signin-photo.jpg") 30% center / cover no-repeat; }  /* Tim Bish, unsplash.com/photos/kf97kfjlkHM, Unsplash License */
@media (max-width: 899px) {
  .signin-layout { grid-template-columns: 1fr; padding: 16px; }
  .signin-photo { display: none; }
  .signin-top { padding: 16px 16px 0; }
}