/* ==========================================================================
   Contact page only. Loaded after styles.css. Tokens come from styles.css.
   The form sits inside the hero on the right, in the bordered dark panel.
   ========================================================================== */

/* the form is tall, so the copy lines up with the top of the panel, not its middle.
   The panel spans both rows. The quote sits at the foot of the left column. */
.contact-hero .ihero-inner { grid-template-columns: 5fr 6fr; grid-template-rows: auto 1fr; gap: 44px 64px; align-items: start; }
.contact-hero .ihero-copy { grid-column: 1; grid-row: 1; }
.contact-hero .formpanel { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.contact-hero .lead { font-size: clamp(19px, 1.7vw, 22px); }
.contact-hero .ticks { margin-top: 32px; font-size: 17.5px; }

.contact-host { position: relative; z-index: 4; grid-column: 1; grid-row: 2; align-self: start; display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; max-width: 560px; margin-top: 12px; padding-top: 30px; border-top: 1px solid var(--rule); }
/* the photo is a wide square, so the frame zooms in on the face */
.contact-host-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--deep); border: 1px solid var(--navy-hi); }
.contact-host-photo img { position: absolute; left: -24%; top: -24%; width: 156%; max-width: none; height: auto; }
.contact-host-photo::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; background: var(--gold); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.contact-host blockquote { font: italic 500 19px/1.5 var(--quote); color: var(--on-dark); text-wrap: pretty; }
/* the same Playfair mark as the other pull quotes. It sits above the quote, so the quote keeps its full column */
.contact-host blockquote::before { content: "\201C"; display: block; height: 30px; margin: 0 0 4px -3px; font: italic 500 48px/1 var(--quote); color: var(--gold); }
.contact-host figcaption { margin-top: 14px; font-size: 14.5px; color: var(--on-dark-muted); }
.contact-host figcaption b { display: block; margin-bottom: 2px; font: 700 19px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); }

/* what happens next */
.contact-next-head { margin-bottom: 56px; }

@media (max-width: 1080px) {
  .contact-hero .ihero-inner { column-gap: 40px; }
  .contact-host { grid-template-columns: 140px 1fr; gap: 20px; }
  .contact-host blockquote { font-size: 18px; }
}
@media (max-width: 900px) {
  .contact-hero .ihero-inner { grid-template-columns: 1fr; grid-template-rows: none; gap: 40px; padding-top: calc(var(--nav-h) + 44px); }
  .contact-hero .ihero-copy, .contact-hero .formpanel, .contact-host { grid-column: 1; grid-row: auto; }
  .contact-host { max-width: 600px; }
}
/* on phones the panel runs edge to edge. That rule is in styles.css */
@media (max-width: 640px) {
  .contact-hero .ihero-inner { gap: 32px; padding-bottom: calc(var(--cut) + 36px); }
  .contact-host { grid-template-columns: 112px 1fr; padding-top: 26px; }
  .contact-next-head { margin-bottom: 40px; }
}