/* welcome.css: the first page (title on the left, form on the right). */

.welcome-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 20px;
}

.welcome {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 40px 0; padding-block: 8px 24px;
  min-height: calc(100vh - 150px);
  overflow-x: clip; /* the background wheel may hang off the edge, but never makes the page scroll sideways */
}

/* Left side */
.welcome-intro { flex: 1 1 520px; min-width: 0; position: relative; padding-right: 64px; }
.welcome-intro-text { position: relative; }

.welcome-title {
  font-size: clamp(3rem, 6.5vw, 5.4rem); line-height: 0.9;
  letter-spacing: 0.2em; color: var(--champagne); margin-bottom: 20px;
}
/* Upright, not italic: the thin italic strokes were hard to read (friend feedback). */
.welcome-tagline { font: 600 clamp(1.25rem, 2vw, 1.7rem)/1.3 var(--serif); margin: 0 0 14px; }
.sky-caption { font-size: 13px; margin: 28px 0 0; }

/* The real sky right now, drawn faintly on the right of the title.
   It fades out towards the left (a "mask"), so the words always sit on a
   clean background and stay easy to read. */
.sky-now {
  position: absolute; width: min(460px, 70%, 70vh); right: 0; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 80%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 80%);
}

/* Right side */
.welcome-form {
  flex: 1 1 400px; max-width: 520px;
  padding-left: 64px; border-left: 1px solid var(--line);
}
.form-footnote { font-size: 13px; margin: -12px 0 0; }
.sample-link { background: none; border: 0; padding: 0; color: var(--bone); cursor: pointer; text-align: left; font-family: var(--sans); }

/* Your account, at the top of the right side, with a line under it */
.welcome-account { padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); gap: 12px; }
.welcome-account .account-why { font-size: 15px; color: var(--bone-soft); }
.welcome-top-links { display: flex; align-items: center; gap: 12px 28px; }
.login-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); color: var(--bone); }
.welcome-account[hidden] { display: none; }
.welcome-back { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.welcome-back p { margin: 0; }
.welcome-back[hidden], #create[hidden] { display: none; }

/* Phones: stack everything, form straight after the title. */
@media (max-width: 900px) {
  .welcome-intro { padding-right: 0; }
  .welcome-form { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 40px; max-width: none; }
  .sky-now { right: -25%; width: 80%; opacity: 0.8; }
}