/* Shared wordmark class keeps the header and footer name identical. */
.wordmark { line-height: 1.2; }
.site-footer { gap: 12px; }
.footer-role {
  font-family: 'Jost', Arial, sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 0;
}
.social-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 5px; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--muted); transition: color .2s; }
.social-links a:hover { color: var(--fg); }
.social-links svg { display: block; }
.contact-details { display: grid; gap: 16px; margin: 42px 0 0; width: min(100%, 490px); text-align: left; }
.contact-details > div { display: grid; grid-template-columns: 82px minmax(0,1fr); align-items: baseline; gap: 22px; }
.contact-details dt { font: 400 9px/1.6 'Jost', Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.contact-details dd { margin: 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.contact-details a { padding-block: 5px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.contact-details a:hover { text-decoration-color: currentColor; }
.contact-profile { padding: 72px 4.2vw 96px; }
.contact-layout { display: grid; grid-template-columns: minmax(0,260px) minmax(0,1fr); align-items: center; gap: clamp(40px,7vw,100px); width: min(100%,900px); text-align: left; }
.contact-portrait { display: block; width: 100%; height: auto; }
.contact-information { min-width: 0; }
.contact-information .contact-eyebrow { font-weight: 400; margin: 0 0 28px; }
.contact-information .contact-details { margin: 0; width: 100%; }
@media (max-width:640px) {
  .contact-profile { padding: 42px 24px 64px; }
  .contact-layout { grid-template-columns: minmax(0,1fr); justify-items: center; gap: 36px; max-width: 440px; }
  .contact-portrait { width: 210px; max-width: 100%; }
  .contact-information { width: 100%; }
  .contact-information .contact-eyebrow { text-align: center; }
}
@media (max-width:440px) {
  .contact-details { text-align: center; gap: 23px; }
  .contact-details > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .footer-role { font-size: 8px; }
}