/*
 * Personal naming step v24.
 *
 * A short, optional identity moment between the life-role choice and question 1.
 * It inherits the Saga's editorial type, dark glass surfaces and amber focus language.
 */

.name-copy {
  bottom: clamp(38px, 7svh, 86px);
  text-align: left;
  width: min(calc(100% - 48px), 760px);
}

.name-copy .eyebrow {
  margin-bottom: 14px;
}

.name-copy h1 {
  font-family: "Newsreader Variable", Georgia, serif;
  font-size: clamp(2.7rem, 5.4vw, 4.55rem);
  font-weight: 355;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin: 0;
  max-width: 720px;
  text-shadow: 0 3px 32px rgba(0, 0, 0, 0.94);
  text-wrap: balance;
}

.name-intro {
  color: rgba(243, 240, 231, 0.82);
  font-size: clamp(0.95rem, 1.18vw, 1.08rem);
  line-height: 1.5;
  margin: 16px 0 0;
  max-width: 570px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.98);
}

.name-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 24px;
  max-width: 720px;
}

.name-field {
  display: grid;
  gap: 7px;
}

.name-field label {
  color: rgba(243, 240, 231, 0.76);
  font-family: "Antonio Variable", Arial Narrow, sans-serif;
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.name-input {
  appearance: none;
  background: rgba(7, 10, 11, 0.88);
  border: 1px solid rgba(243, 240, 231, 0.48);
  border-radius: 2px;
  color: var(--bone);
  font-family: "Newsreader Variable", Georgia, serif;
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  font-weight: 420;
  height: 60px;
  letter-spacing: -0.018em;
  outline: none;
  padding: 0 17px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  width: 100%;
}

.name-input::placeholder {
  color: rgba(243, 240, 231, 0.42);
}

.name-input:focus {
  background: rgba(12, 16, 17, 0.94);
  border-color: rgba(239, 182, 111, 0.98);
  box-shadow: 0 0 0 3px rgba(216, 161, 93, 0.16);
}

.name-submit.primary-action {
  min-height: 60px;
  white-space: nowrap;
}

.name-skip.text-action {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 2px;
}

@media (max-width: 700px) {
  .name-copy {
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
    width: calc(100% - 32px);
  }

  .name-copy .eyebrow {
    margin-bottom: 10px;
  }

  .name-copy h1 {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
    line-height: 1;
  }

  .name-intro {
    font-size: 0.92rem;
    line-height: 1.43;
    margin-top: 12px;
  }

  .name-form {
    gap: 9px;
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .name-input,
  .name-submit.primary-action {
    min-height: 56px;
    width: 100%;
  }

  .name-input {
    height: 56px;
  }

  .name-skip.text-action {
    grid-column: 1;
  }
}

@media (max-height: 720px) {
  .name-copy {
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .name-copy h1 {
    font-size: clamp(1.9rem, 7vw, 2.65rem);
  }

  .name-intro {
    margin-top: 9px;
  }

  .name-form {
    margin-top: 12px;
  }

  .name-input,
  .name-submit.primary-action {
    min-height: 50px;
  }

  .name-input {
    height: 50px;
  }

  .name-skip.text-action {
    min-height: 38px;
  }
}