/* Fable's contact sea: teal-to-amber linework on black. */
.invitation { position: relative; isolation: isolate; overflow: hidden; padding-block: 90px; }
.contact-sea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .6; z-index: -1; mask-image: linear-gradient(to right, #000 0%, #0009 45%, #0002 100%); }
#contact { display: grid; grid-template-columns: .95fr 1fr; gap: 32px 100px; }
.contact-heading { grid-column: 1; grid-row: 1; }
.contact-heading h2 { font-size: clamp(48px, 5.4vw, 76px); margin-top: 25px; }
.contact-heading h2 > span { color: var(--text); }
.contact-heading .eyebrow { color: var(--amber); }
.contact-heading > p:last-child { font-size: 16px; }
.contact-layout { display: contents; }
.contact-form-wrap { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.contact-aside { grid-column: 1; grid-row: 2; }
.contact-label { font-size: 11px; }
.contact-open { max-width: 360px; font-size: 13px; }
.contact-social { margin-top: 24px; }
.invitation .form input, .invitation .form textarea { background: #000; border-color: #383838; border-radius: 4px; }
.invitation .form input:focus, .invitation .form textarea:focus { background: #000; border-color: var(--amber); }
.invitation .form :focus-visible, .invitation a:focus-visible { outline-color: var(--amber); }
.invitation .form textarea { min-height: 190px; }
.invitation .button-light { background: var(--amber); color: #000; }
.invitation .button-light:hover { background: #f3bd16; }
.invitation .interest-options a { background: #000; border-color: #383838; font-size: 11px; padding: 9px 15px; }
.invitation .interest-options a:hover, .invitation .interest-options a.selected { color: #000; background: var(--amber); border-color: var(--amber); }
.invitation .inquiry-selection, .invitation .status[data-state='sent'] { color: var(--amber); }
@media (max-width: 1100px) {
  #contact { gap: 30px 50px; }
  .contact-sea { opacity: .8; mask-image: linear-gradient(to right, #000 0%, #000b 48%, #0003 100%); }
}
@media (max-width: 900px) {
  #contact { display: block; max-width: 700px; }
  .invitation { padding-block: 64px; }
  .contact-heading h2 { font-size: clamp(49px, 8vw, 66px); }
  .contact-form-wrap { margin-top: 32px; }
  .contact-aside { margin-top: 40px; }
  .contact-sea { opacity: .9; mask-image: none; }
  .contact-heading, .contact-aside, .invitation .form label, .invitation .status, .inquiry-selection { text-shadow: 0 1px 5px #000, 0 0 12px #000; }
}
@media (max-width: 370px) {
  .contact-heading h2 { font-size: 43px; }
}