.home-contact { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 100svh; gap: 0; padding: 76px 32px 24px; background: #fff; color: #242623; border: 0; overflow: hidden; }
.contact-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.home-contact a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.contact-grid > * { border-top: 1px solid #d6d9d0; padding-top: 20px; }
.contact-grid h2, .contact-grid h3 { font: 400 14px "Bitcount Grid Single", monospace; letter-spacing: .03em; color: #62675c; margin: 0 0 32px; }
.home-contact .contact-invitation { display: flex; align-items: baseline; gap: 26px; width: fit-content; font: 500 clamp(28px, 3.1vw, 52px)/1.25 "Helvetica Neue", "PingFang SC", sans-serif; letter-spacing: -.04em; padding: 0; margin-bottom: 22px; }
.contact-invitation span { color: #c1ff38; transition: transform 250ms ease; }
.contact-invitation:hover span { transform: translate(4px, -4px); }
.home-contact .contact-email { display: block; width: fit-content; font: 400 clamp(16px, 1.4vw, 22px)/1.5 "Helvetica Neue", Arial, sans-serif; color: #53594e; padding: 0; }
.contact-navigation a { display: block; width: fit-content; font: 400 18px/1.5 "Helvetica Neue", "PingFang SC", sans-serif !important; padding: 6px 0; }
.contact-profile p { font-size: 18px; line-height: 1.8; color: #53594e; margin: 0; }
.home-contact a:hover { color: #242623; text-decoration: underline; text-decoration-color: #a5d926; text-underline-offset: .2em; }
.home-contact a:focus-visible { outline: 2px solid #424d2c; outline-offset: 7px; }
.contact-art { position: relative; flex: 1; min-height: 400px; margin: -10px -32px -15px; pointer-events: none; }
.contact-art canvas { width: 100%; height: 100%; position: absolute; inset: 0; }
.contact-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 2; color: #62675c; font: 400 12px "Bitcount Grid Single", monospace; }
.contact-bottom a { padding: 12px 0; }
.visitor-info { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-top: 1px solid #d6d9d0; padding: 18px 0 8px; margin: 12px 0 22px; color: #53594e; font-family: "Bitcount Grid Single", monospace; font-size: 15px; font-weight: 400; line-height: 1.4; white-space: nowrap; overflow-x: auto; }
.visitor-info > * { flex-shrink: 0; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .visitor-info { color: #b5bbae; border-color: #54584f; }
[data-theme="dark"] .home-contact { background: #080a08; color: #f6f7f1; }
[data-theme="dark"] .contact-grid > * { border-color: #54584f; }
[data-theme="dark"] .contact-grid h2, [data-theme="dark"] .contact-grid h3 { color: #c2c7bb; }
[data-theme="dark"] .home-contact .contact-email, [data-theme="dark"] .contact-profile p, [data-theme="dark"] .contact-bottom { color: #b5bbae; }
[data-theme="dark"] .home-contact a:hover { color: #c1ff38; }
[data-theme="dark"] .home-contact a:focus-visible { outline-color: #c1ff38; }
@media(max-width: 700px) {
  .home-contact { padding: 48px 22px 20px; min-height: 100svh; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
  .contact-primary { grid-column: 1 / -1; }
  .contact-grid h2, .contact-grid h3 { margin-bottom: 20px; }
  .contact-profile p, .contact-navigation a { font-size: 15px !important; }
  .contact-art { min-height: 310px; margin-inline: -22px; }
  .contact-bottom { font-size: 10px; gap: 12px; }
}
@media(prefers-reduced-motion: reduce) { .contact-invitation span { transition: none; } }