:root {
  --contact-muted: color-mix(in srgb, var(--ink) 62%, transparent);
  --contact-line: color-mix(in srgb, var(--ink) 20%, transparent);
}

.contact-main { padding-top: var(--nav-h); }
.nav-links [aria-current="page"] { color: var(--vermilion); }

.contact-layout {
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  grid-template-columns: .84fr 1.16fr;
}

.contact-story {
  display: grid;
  grid-template-rows: auto minmax(320px, 38vw);
  border-right: 1px solid var(--contact-line);
}

.contact-copy { padding: clamp(68px, 8vw, 120px) 5vw 5vw; }
.contact-kicker { margin: 0 0 30px; color: var(--vermilion); font: 700 10px/1 "Courier New", monospace; letter-spacing: .16em; text-transform: uppercase; }
.contact-copy h1 { margin: 0; font-size: clamp(62px, 5.1vw, 86px); line-height: .86; letter-spacing: -.065em; }
.contact-copy > p:last-of-type { max-width: 430px; margin: 34px 0 0; color: var(--contact-muted); font-size: 16px; line-height: 1.6; }
.contact-facts { margin: 60px 0 0; border-top: 1px solid var(--contact-line); }
.contact-facts > div { display: grid; grid-template-columns: 94px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--contact-line); }
.contact-facts dt { color: var(--contact-muted); font: 10px/1.4 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.contact-facts dd { margin: 0; font-size: 15px; line-height: 1.45; }
.contact-facts a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.contact-photo { position: relative; min-height: 320px; margin: 0; overflow: hidden; }
.contact-photo::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgb(244 241 232 / .58); pointer-events: none; }
.contact-photo img { object-position: center 32%; filter: saturate(.72) contrast(1.05); }

.contact-form-wrap { align-self: center; padding: clamp(72px, 9vw, 140px) 7vw; }
.form-intro { max-width: 620px; margin-bottom: 58px; }
.form-intro h2 { margin: 0; font-size: clamp(52px, 6vw, 92px); line-height: .88; letter-spacing: -.06em; }
.form-intro p { margin: 26px 0 0; color: var(--contact-muted); font-size: 15px; line-height: 1.55; }
#contact-form { display: grid; gap: 30px; max-width: 720px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
#contact-form label { display: grid; gap: 10px; color: var(--contact-muted); font: 10px/1.3 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
#contact-form input, #contact-form textarea { width: 100%; padding: 12px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--contact-line); border-radius: 0; font: 16px/1.5 Arial, Helvetica, sans-serif; text-transform: none; }
#contact-form textarea { min-height: 150px; resize: vertical; }
#contact-form input:focus-visible, #contact-form textarea:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 4px; border-color: var(--vermilion); }
#contact-form button { width: fit-content; min-height: 50px; padding: 0 26px; color: var(--paper-soft); background: var(--vermilion); border: 1px solid var(--vermilion); cursor: pointer; font: 700 10px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
#contact-form button:hover { background: var(--ink); border-color: var(--ink); }
#contact-form button:active { transform: scale(.98); }
.form-note { margin: -14px 0 0; color: var(--contact-muted); font-size: 12px; line-height: 1.45; }
.contact-footer { color: var(--ink); background: var(--paper-soft); border-top: 1px solid var(--contact-line); }
.contact-footer .footer-mark { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .contact-copy, .contact-form-wrap { animation: contact-enter .75s cubic-bezier(.16,1,.3,1) both; }
  .contact-form-wrap { animation-delay: .1s; }
}

@keyframes contact-enter { from { opacity: 0; transform: translateY(22px); } }

@media (prefers-color-scheme: dark) {
  :root { --paper: #101816; --paper-soft: #15211f; --ink: #eceee7; --line: rgb(236 238 231 / .22); }
  .contact-photo img { filter: saturate(.65) brightness(.82) contrast(1.08); }
}

@media (max-width: 767px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-story { grid-template-rows: auto 54dvh; border-right: 0; border-bottom: 1px solid var(--contact-line); }
  .contact-copy { padding: 70px 16px 74px; }
  .contact-kicker { margin-bottom: 22px; }
  .contact-copy h1 { font-size: clamp(58px, 17vw, 76px); }
  .contact-copy > p:last-of-type { margin-top: 26px; font-size: 15px; }
  .contact-facts { margin-top: 48px; }
  .contact-facts > div { grid-template-columns: 78px 1fr; gap: 18px; }
  .contact-photo::after { inset: 10px; }
  .contact-form-wrap { padding: 88px 16px 100px; }
  .form-intro { margin-bottom: 48px; }
  .form-intro h2 { font-size: clamp(54px, 16vw, 72px); }
  .field-pair { grid-template-columns: 1fr; gap: 30px; }
  #contact-form button { width: 100%; }
}