/* Contact links stay on the home screen, one click from the visitor. */
.home-contact {
  position: absolute; z-index: 11; left: clamp(1.5rem, 5.6vw, 7rem);
  bottom: max(6rem, 13vh); display: grid; gap: .8rem; max-width: calc(100% - 3rem);
}
.home-contact > span { color: #b4aaa2; font: 500 .65rem/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.home-contact a, .contact-email { width: fit-content; text-decoration: none; color: #e5dfd7; }
.contact-email { padding: 0; text-align: left; font: 400 clamp(.85rem, 1.2vw, 1.05rem)/1.5 var(--body); overflow-wrap: anywhere; }
.contact-email span { color: var(--red-ink); margin-left: .5rem; }
.home-contact > div { display: flex; gap: 1.5rem; font: .72rem/1.5 var(--mono); }
.home-contact > div a { color: #b4aaa2; }
.home-contact a:hover, .contact-email:hover { color: var(--red-ink); }
@media (max-width: 800px) {
  .main-menu { bottom: calc(14.5rem + env(safe-area-inset-bottom, 0px)); }
  .home-contact { left: max(1.6rem, env(safe-area-inset-left, 0px)); bottom: calc(5.3rem + env(safe-area-inset-bottom, 0px)); gap: .55rem; }
  .home-contact a, .contact-email { min-height: 44px; display: inline-flex; align-items: center; }
  .contact-email { display: block; }
  .controls > .menu-utilities { display: flex; justify-content: space-between; width: 100%; gap: .5rem; font-size: .65rem; }
  .menu-utilities > button { min-height: 44px; }
}

@media (max-height: 600px) and (min-width: 801px) {
  .main-menu { top: 42%; }
  .home-contact { bottom: 4rem; gap: .4rem; }
}
@media (max-height: 650px) and (max-width: 800px) {
  .main-menu { bottom: calc(12.5rem + env(safe-area-inset-bottom, 0px)); --menu-row: 2.8rem; }
  .home-contact { bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
  .menu-brand { font-size: 2.4rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .main-menu { top: 4.2rem; bottom: auto; }
  .home-contact { left: 52%; right: max(var(--edge), env(safe-area-inset-right, 0px)); bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); gap: .3rem; }
  .menu-brand { font-size: 2rem; }
}
