/* Contact page (/contact/): Jim's design of 2026-10-15 (swops-contact.html), its own rules only;
   the page also loads site.css and swops.css. Additions at the end: the Turnstile check, field errors,
   the spam trap and the no-JavaScript note. */
.contact-page{padding:72px 0 88px}
.contact-layout{display:grid;grid-template-columns:.96fr 1.04fr;grid-template-rows:auto 1fr;grid-template-areas:"intro form" "art form";column-gap:84px;align-items:start}
.contact-copy{grid-area:intro;padding-top:14px;min-width:0}
.contact-copy .eyebrow{margin-bottom:24px}
.contact-copy h1{font-size:clamp(47px,4.8vw,66px);line-height:1.04;letter-spacing:-.055em;font-weight:500;margin:0 0 24px;color:#1c2922}
.contact-copy h1 span{display:block;color:#6a8257}
.contact-copy .lead{font-size:17px;line-height:1.7;max-width:375px;margin:0;text-wrap:pretty}
.contact-illustration{grid-area:art;width:calc(100% + 30px);max-width:540px;margin:18px 0 0 -18px;aspect-ratio:1.4;overflow:hidden;mix-blend-mode:multiply;align-self:center}
.contact-illustration img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.contact-form{grid-area:form;min-width:0;background:#fff;border:1px solid #e0e6d9;border-radius:24px;padding:34px 36px 30px;box-shadow:0 12px 38px -32px #263b273d}
.contact-form-intro{margin-bottom:28px}
.contact-form-intro h2{font-size:28px;line-height:1.2;letter-spacing:-.035em;margin:0 0 9px}
.contact-form-intro p{font-size:13px;line-height:1.6;color:#697267;margin:0}
.contact-topics{border:0;padding:0;margin:0 0 25px;min-width:0}
.contact-topics legend{padding:0;margin-bottom:10px;font-size:13px;font-weight:550;line-height:1.4}
.contact-topic-options{display:grid;grid-template-columns:1.32fr .85fr 1.25fr;gap:8px}
.contact-topic{position:relative;min-width:0;cursor:pointer}
.contact-topic input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.contact-topic span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:43px;height:100%;padding:9px 8px;border:1px solid #e0e6da;border-radius:10px;background:#fff;color:#5d6857;font-size:12px;line-height:1.35;transition:background .15s ease,border-color .15s ease}
.contact-topic input:checked+span{background:#edf6e1;border-color:#a7c97b;color:#304924;font-weight:550;box-shadow:inset 0 0 0 .5px #a7c97b}
.contact-topic input:focus-visible+span{outline:3px solid #63854f;outline-offset:3px}
.contact-topic:hover span{border-color:#a6b795}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-field{min-width:0}
.contact-field label{display:block;font-size:13px;font-weight:550;line-height:1.4;margin-bottom:9px}
.contact-field input,.contact-field textarea{display:block;width:100%;min-width:0;border:1px solid #dce3d6;border-radius:10px;padding:13px 14px;background:#fafbf7;color:#1c2922;font:400 15px/1.5 'DM Sans',system-ui,sans-serif;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;-webkit-appearance:none;appearance:none}
.contact-field input{height:50px}
.contact-field textarea{min-height:158px;resize:vertical}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#7d8678;opacity:1}
.contact-field input:focus,.contact-field textarea:focus{outline:none;background:#fff;border-color:#789b4d;box-shadow:0 0 0 3px #c6f47c42}
.contact-message{margin-top:24px}
.contact-hint{font-size:12px;line-height:1.5;color:#697267;margin:9px 0 0;min-height:36px}
.contact-send{width:100%;margin-top:21px;border:0;min-height:54px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:100px;background:#c6f47c;color:#1c2922;font:550 14px/1.4 'DM Sans',system-ui,sans-serif;padding:16px 24px;transition:background .16s ease}
.contact-send:hover{background:#b9ea6b}
.contact-send:disabled{cursor:wait;opacity:.7}
.contact-send svg{width:19px;height:19px;flex-shrink:0}
.contact-reply{margin:16px 0 0;text-align:center;font-size:11px;line-height:1.7;color:#697267}
.contact-reply a{text-decoration:underline;text-underline-offset:3px;margin-left:5px}
.contact-status{font-size:13px;line-height:1.55;margin:18px 0 0;padding:12px 15px;border-radius:10px}
.contact-status[data-kind=success]{color:#36552b;background:#eef5e5}
.contact-status[data-kind=error]{color:#87452f;background:#fff2e9}
.contact-status[hidden]{display:none}
@media(max-width:1100px){.contact-layout{column-gap:42px;grid-template-columns:.9fr 1.1fr}.contact-form{padding:30px 28px 26px}.contact-copy h1{font-size:clamp(44px,4.8vw,60px)}.contact-topic-options{gap:6px}.contact-topic span{font-size:11px;padding:9px 6px}.contact-fields{gap:14px}.contact-illustration{width:calc(100% + 14px);margin-left:-9px}}
@media(max-width:850px){.contact-page{padding:46px 0 60px}.contact-layout{max-width:680px;grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"intro" "form" "art";row-gap:30px}.contact-copy{padding-top:0}.contact-copy .eyebrow{margin-bottom:18px}.contact-copy h1{font-size:56px;margin-bottom:20px}.contact-copy .lead{max-width:470px;font-size:16px}.contact-form{padding:32px}.contact-form-intro{margin-bottom:26px}.contact-topic span{font-size:12px}.contact-illustration{width:100%;max-width:430px;justify-self:center;margin:0;aspect-ratio:1.4}}
@media(max-width:540px){.contact-page{padding:34px 0 44px}.contact-layout{row-gap:26px}.contact-copy h1{font-size:clamp(38px,10.6vw,52px)}.contact-copy .lead{font-size:15px;max-width:330px}.contact-form{padding:26px 20px 24px;border-radius:20px}.contact-form-intro h2{font-size:26px}.contact-form-intro p{font-size:12px}.contact-form-intro{margin-bottom:24px}.contact-topics{margin-bottom:22px}.contact-topic-options{grid-template-columns:1.25fr .85fr 1.25fr;gap:6px}.contact-topic span{font-size:11px;padding:8px 5px;min-height:45px}.contact-fields{grid-template-columns:1fr;gap:20px}.contact-field input,.contact-field textarea{font-size:16px}.contact-message{margin-top:20px}.contact-field textarea{min-height:150px}.contact-hint{font-size:11px;min-height:33px}.contact-send{margin-top:18px}.contact-reply{font-size:10px}.contact-illustration{max-width:360px}}
@media(prefers-reduced-motion:reduce){.contact-field input,.contact-field textarea,.contact-topic span,.contact-send{transition:none}}
/* Repo additions */
.contact-turnstile{display:flex;justify-content:center}
.contact-turnstile iframe{margin-top:18px}
.contact-field input[aria-invalid=true],.contact-field textarea[aria-invalid=true]{border-color:#c0794f;box-shadow:0 0 0 3px #f3d6c47a}
.contact-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-noscript{margin:18px 0 0;font-size:13px;line-height:1.55;color:#87452f}
/* Support topic: points to the Support center first (Jim 2026-10-15; renamed from Help centre 2026-10-16) */
.contact-support-note{margin:-11px 0 24px;padding:13px 15px;border-radius:10px;background:#f1f6ea;font-size:13px;line-height:1.55;color:#36552b;animation:contact-note-in .2s ease-out}
.contact-support-note[hidden]{display:none}
.contact-support-note a{display:inline-block;font-weight:550;text-decoration:underline;text-underline-offset:3px}
@keyframes contact-note-in{from{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.contact-support-note{animation:none}}