/* Neutral vector arrows render as linework, including on emoji-enabled phones. */
.thin-arrow{display:inline-block;width:20px;height:20px;flex:0 0 auto;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:square;stroke-linejoin:miter}
.desktop-nav .thin-arrow{width:14px;height:14px;margin-left:3px}
.mobile-nav .menu-home{align-items:center;min-height:48px}
.mobile-nav .menu-home .thin-arrow{width:20px;height:20px}
.mock-nav .thin-arrow{width:10px;height:10px;margin-left:3px}
.contact-links a{align-items:center}
.contact-links .thin-arrow{width:20px;height:20px}
.footer-end a[href="#home"]{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.footer .thin-arrow{width:16px;height:16px}

/* Feather the frame into its actual section colour; faces and image detail stay sharp. */
.hero-photo,
.conversation-photo,
.contact-photo{
  --photo-feather-x:9%;
  --photo-feather-y:7%;
  -webkit-mask-image:
    linear-gradient(to right,transparent,#000 var(--photo-feather-x),#000 calc(100% - var(--photo-feather-x)),transparent),
    linear-gradient(to bottom,transparent,#000 var(--photo-feather-y),#000 calc(100% - var(--photo-feather-y)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent,#000 var(--photo-feather-x),#000 calc(100% - var(--photo-feather-x)),transparent),
    linear-gradient(to bottom,transparent,#000 var(--photo-feather-y),#000 calc(100% - var(--photo-feather-y)),transparent);
  mask-composite:intersect;
}
.contact-photo{--photo-feather-x:10%;--photo-feather-y:5%}

@media(max-width:760px){
  .contact .section-title{font-size:clamp(56px,18.5vw,132px)}
  .contact .section-title span{margin-left:4vw}
  .thin-arrow{width:20px;height:20px;stroke-width:1.1}
  .hero-bottom .thin-arrow{width:18px;height:18px}
}