/* Keep browser-filled contact fields in the same dark palette as typed fields. */
#prototype-contact input:-webkit-autofill,
#prototype-contact input:-webkit-autofill:hover,
#prototype-contact input:-webkit-autofill:focus,
#prototype-contact input:autofill {
  -webkit-text-fill-color: #f5f3ed;
  caret-color: #f5f3ed;
  box-shadow: inset 0 0 0 1000px #202020;
  -webkit-box-shadow: inset 0 0 0 1000px #202020;
  border-color: transparent;
  background-clip: padding-box;
}

/* Keep focus inside the fields so browser outlines do not square off rounded corners. */
#prototype-contact input:focus,
#prototype-contact input:focus-visible,
#prototype-contact textarea:focus,
#prototype-contact textarea:focus-visible,
.share-name-label + input:focus,
.share-name-label + input:focus-visible {
  outline: none;
  outline-offset: 0;
}
#prototype-contact input:focus,
#prototype-contact textarea:focus { border-color: #f5f3ed80; }
.share-name-label + input:focus { border-color: #55524e; }
#share-title:focus { outline: none; }

/* White at rest; the yellow fill travels across only on interaction. */
#prototype-contact button,
#prototype-contact button:hover,
#prototype-contact button:focus-visible {
  color: #151515;
  background: #f5f3ed;
  border-color: #f5f3ed;
}
#prototype-contact button::before { background: #ffc305; }

@media (max-width: 600px) and (orientation: portrait) {
  .contact-layout { gap: 19px; }
  #prototype-contact fieldset { row-gap: 13px; }
  #prototype-contact label { position: relative; }
  #prototype-contact .contact-field-error {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    margin: 0;
    white-space: nowrap;
  }
  #prototype-contact textarea {
    resize: none;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  #prototype-contact button { margin-top: 11px; }
  .contact-share-band { gap: 11px; margin-top: 16px; padding-block: 15px; }
  .contact-share-copy p { line-height: 1.55; }
}

@media (max-width: 600px) and (orientation: portrait) and (min-height: 780px) {
  .contact-layout { gap: 26px; }
  #prototype-contact fieldset { row-gap: 17px; }
  #prototype-contact button { margin-top: 16px; }
  .contact-share-band { gap: 15px; margin-top: 23px; padding-block: 19px; }
}

@media (max-width: 600px) and (orientation: portrait) and (max-height: 730px) {
  .contact-scene { padding-top: 92px !important; }
  .contact-layout { gap: 15px; }
  .contact-copy h2 { font-size: clamp(20px, 5.3vw, 23px); line-height: 1.06; }
  .contact-copy > p:last-child { font-size: 11px; line-height: 1.4; }
  #prototype-contact fieldset { row-gap: 10px; }
  #prototype-contact button { margin-top: 8px; }
  .contact-share-band { gap: 9px; margin-top: 12px; padding-block: 12px; }
}