dialog#contact { color: var(--cream); background: var(--navy-2); border: 1px solid rgba(216, 192, 142, .35); border-radius: 4px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
dialog#contact::backdrop { background: rgba(8, 14, 24, .72); }
/* Without JavaScript the form is an ordinary section at the foot of the page. */
dialog#contact:not(:modal) { position: static; margin: 0 auto 60px; }
/* With JavaScript it only ever appears as a pop-up, so it never flashes at the foot of the page while scripts load. */
.js dialog#contact:not(:modal) { display: none; }
.contact-in { padding: 36px 36px 32px; position: relative; }
.contact-close { position: absolute; top: 18px; right: 20px; font-size: 12px; letter-spacing: .08em; color: var(--faint); padding: 6px; }
.contact-close:hover { color: var(--cream); }
.contact-kicker { color: var(--w5); }
#contact h2 { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.15; margin: 10px 0 8px; }
.contact-lede { color: var(--soft); font-size: 14px; margin-bottom: 24px; max-width: 40ch; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; letter-spacing: .06em; color: var(--soft); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--cream); background: rgba(246, 244, 239, .05); border: 1px solid rgba(216, 192, 142, .35); border-radius: 3px; padding: 11px 12px; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sand); outline-offset: 1px; border-color: var(--sand); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-msg { min-height: 22px; font-size: 13px; color: #F1C9A5; margin: 4px 0 10px; }
.contact-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.send { background: var(--sand); color: var(--navy); font-weight: 600; font-size: 14px; letter-spacing: .04em; padding: 12px 26px; border-radius: 3px; transition: background .2s ease; }
.send:hover { background: #E6CF9C; }
.send:disabled { opacity: .6; cursor: default; }
.contact-note { font-size: 12px; color: var(--faint); }
.contact-thanks { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.3; padding: 10px 0 20px; max-width: 22ch; }
.contact-thanks:focus { outline: none; }
.contact-thanks[hidden], #contact form[hidden] { display: none; }
@media (max-width: 480px) { .contact-in { padding: 30px 22px 24px; } }