/* Contact page. Uses the template's tokens (--black, --white, --dore, --body-text-grey) and type. */
:root { color-scheme: dark; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 10px 16px; background: var(--white); color: var(--black); }
.skip-link:focus-visible { top: 16px; outline: 2px solid var(--dore); }

.js-anim [data-reveal], .js-anim [data-portrait-inner], .js-anim [data-split] { opacity: 0; }

.contact-grid { align-items: start; }
.contact-portrait { overflow: hidden; width: 100%; }
.spotlight-inner { position: relative; transform-origin: center bottom; }

/* Spotlight portrait (reworked from the prototype Ayo liked, in the site's gold): a dimmed black-and-white
   portrait, and a gold-toned copy shown only inside a soft circle of light that follows the cursor
   (contact.js sets --x, --y and the radius --r; without JavaScript the light rests on his face). */
.spotlight { --x: 56%; --y: 40%; --r: 170px; position: relative; background: radial-gradient(ellipse 62% 58% at 54% 46%, #16110a, var(--black) 72%); }
.spotlight-base, .spotlight-gold { display: block; width: 100%; height: auto; }
.spotlight-base { position: relative; z-index: 1; filter: grayscale(1) contrast(1.15) brightness(.5); }
.spotlight-gold {
  position: absolute; inset: 0; z-index: 2; height: 100%;
  filter: grayscale(1) sepia(1) saturate(2.3) hue-rotate(-10deg) brightness(1.2) contrast(1.15);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 50%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 50%, transparent 100%);
}
.spotlight-aura { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle calc(var(--r) * 2.2) at var(--x) var(--y), rgba(195, 156, 93, .38), rgba(150, 104, 40, .12) 45%, transparent 75%); pointer-events: none; }
.spotlight-beams { position: absolute; inset: 0; z-index: 3; overflow: hidden; mix-blend-mode: screen; pointer-events: none; }
.spotlight-beams i { position: absolute; top: -10%; width: 1px; height: 120%; background: linear-gradient(to bottom, transparent, rgba(195, 156, 93, .5) 42%, rgba(255, 228, 176, .75) 50%, rgba(195, 156, 93, .5) 58%, transparent); opacity: 0; transform: translateX(-30px) rotate(7deg); animation: spotlight-beam 7.6s ease-in-out infinite; }
.spotlight-beams i:nth-child(1) { left: 20%; }
.spotlight-beams i:nth-child(2) { left: 57%; animation-delay: -2.6s; }
.spotlight-beams i:nth-child(3) { left: 83%; animation-delay: -5.1s; }
.spotlight:not(.is-visible) .spotlight-beams i { animation-play-state: paused; }
@keyframes spotlight-beam {
  0% { opacity: 0; transform: translateX(-30px) rotate(7deg); }
  40% { opacity: .8; }
  70% { opacity: .25; }
  100% { opacity: 0; transform: translateX(40px) rotate(7deg); }
}
.contact-title { text-wrap: balance; }
.contact-title .line { overflow: hidden; padding-bottom: 0.04em; }

.contact-details { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 24px; margin-bottom: 40px; }
.contact-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--body-text-grey); transform-origin: left center; }
.contact-detail p { margin-bottom: 0; overflow-wrap: anywhere; }
.contact-notes { padding-top: 0; }
.contact-notes .contact-detail p { color: var(--body-text-grey); }
.contact-detail a, .contact-content p a { color: inherit; text-decoration: underline; text-underline-offset: 4px; transition: color .3s ease; touch-action: manipulation; }
.contact-detail a:hover, .contact-content p a:hover { color: var(--dore); }

.contact-form { display: grid; gap: 4px; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-field { min-width: 0; }
.contact-form .text-field { color: inherit; margin-bottom: 4px; transition: border-color .3s ease; }
.contact-form .text-field:hover { border-color: var(--white); }
.contact-form .text-field:focus-visible { border-color: var(--dore); outline: 2px solid var(--dore); outline-offset: 2px; }
.contact-form .text-field[aria-invalid="true"] { border-color: #ff9a8a; }
.contact-form select.text-field { background-color: var(--black); color: var(--white); height: auto; min-height: 44px; }
.contact-form select.text-field option { background-color: var(--black); color: var(--white); }
.contact-form textarea.text-field { min-height: 140px; resize: vertical; }
.contact-error { min-height: 1.4em; margin: 0 0 8px; font-size: 1rem; color: #ff9a8a; }

.contact-submit { margin-top: 8px; }
.contact-form .w-form-done { color: var(--black); }

@media screen and (max-width: 767px) {
  .contact-row, .contact-details { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact-details { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-beams i { animation: none; opacity: .35; transform: rotate(7deg); }
}