body.contact-site{margin:0}
body.contact-site>.skip{position:fixed;left:12px;top:12px;transform:translateY(-200%);padding:12px;z-index:1200;background:inherit;color:inherit}
body.contact-site>.skip:focus{transform:none}
body.contact-site main.contact-page{width:min(100% - 40px,44rem);margin:clamp(32px,7vw,88px) auto 80px;padding:0;box-sizing:border-box}
.contact-page h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.1;max-width:15ch;margin:0 0 24px;text-wrap:balance}
.contact-page .contact-intro{max-width:55ch;line-height:1.7;margin:0 0 36px}
.contact-page p{color:inherit;opacity:1}
body.contact-site .km-header{padding:24px 20px;margin:0}
.contact-page form{max-width:36rem;margin:0}
.contact-page .contact-field{display:grid;gap:8px;margin:0 0 24px}
.contact-page label{display:block;font:inherit;font-size:.95rem;font-weight:600}
.contact-page input:not([type=hidden]),.contact-page textarea{box-sizing:border-box;display:block;width:100%;max-width:100%;min-height:48px;border:1px solid currentColor;border-radius:0;padding:12px;background:transparent;color:inherit;font:inherit;line-height:1.5;box-shadow:none}
.contact-page textarea{min-height:180px;resize:vertical}
.contact-page .contact-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-page button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;border:1px solid currentColor;border-radius:0;padding:10px 24px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.contact-page button:disabled{cursor:wait;opacity:.55}
.contact-page input:focus-visible,.contact-page textarea:focus-visible,.contact-page button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.contact-page .contact-privacy{font-size:.85rem;line-height:1.6;max-width:60ch;margin:24px 0}
.contact-page [role=status]{min-height:1.5em;line-height:1.6;max-width:55ch;margin:20px 0}
.contact-page button[hidden]{display:none}
/* Contact footers have their own bounded layout, independent of home wrappers. */
body.contact-site footer.contact-footer{box-sizing:border-box;width:min(calc(100% - 40px),44rem);max-width:none;margin:0 auto 48px;padding:0;border:0;color:inherit}
body.contact-site footer.contact-footer>.wrap{width:100%;max-width:none;margin:0;padding:0}
body.contact-site footer.contact-footer :is(div,span,p,nav){min-width:0;max-width:100%}
body.contact-site footer.contact-footer> :first-child{margin-top:0}
body.contact-site footer.contact-footer a{color:inherit;white-space:normal;overflow-wrap:anywhere}
body.contact-site footer.contact-footer nav a{display:inline-flex;align-items:center;min-height:44px}
body.contact-site footer.contact-footer nav{gap:6px 24px}
@media(max-width:540px){body.contact-site main.contact-page{width:calc(100% - 40px);margin-top:36px}.contact-page input,.contact-page textarea{font-size:16px}}

/* Contact is part of the host publication, with its own type and action colour. */
.contact-page :is(h1,p,label,button){overflow-wrap:anywhere}
.contact-page form,.contact-page .contact-field{min-width:0;max-width:100%}
.contact-page button{white-space:normal;background:var(--contact-accent,currentColor);border-color:var(--contact-accent,currentColor);color:var(--contact-on-accent,#fff)}
.contact-page button:hover:not(:disabled){filter:brightness(.9)}
.contact-page :is(input,textarea):focus-visible{outline-color:var(--contact-accent,currentColor)}
.contact-page .contact-privacy{color:inherit}
body.contact-site>.wrap main.contact-page,body.contact-site>.wrap footer.contact-footer{width:min(100%,44rem)}

body.contact-site{--contact-accent:#151515;--contact-on-accent:#f2f2f2}