.contact-page { max-width: 820px; padding-top: 56px; }
.contact-page h1 { font-size: clamp(38px, 6vw, 60px); }
.contact-intro { margin: 24px 0 32px; color: var(--muted); }
.contact-form { border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.contact-form label { display: block; font-weight: 600; margin-bottom: 20px; }
.contact-form :is(input,select,textarea) { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--paper); color: var(--ink); font: 400 16px/1.5 'DM Sans',sans-serif; }
.contact-form textarea { resize: vertical; }
.contact-form :is(input,select,textarea,button):focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; }
.contact-form :is(#contact-hint,.contact-privacy) { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.contact-form a { text-decoration: underline; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-page [hidden] { display: none !important; }
.contact-error { color: var(--danger,#a33b2b); margin-bottom: 16px; }
[data-theme="dark"] .contact-error { color: var(--danger,#f0b69a); }
.contact-form #contact-status { color: var(--muted); font-size: 14px; }
.contact-form .button { border: 0; font-family: inherit; cursor: pointer; }
.contact-form .button:disabled { opacity: .6; cursor: wait; }
.contact-success { padding: 28px; border: 1px solid var(--line); border-radius: 14px; }
.contact-success p { margin: 18px 0 24px; color: var(--muted); }
@media(max-width:420px) { .contact-form,.contact-success { padding: 20px; } }