/* --------------------------------------------------------------------------
   Fixed contact tab — Footer Fix Position.png
   Reuse the Home contact treatment on every content page.

   Footer Fix Position.png is a 1080x125 reference strip.  Keep the strip's
   actual height, artwork scale, bottom inset, and soft alpha ramp so the
   contact tab lands in the same place at every viewport width.
   -------------------------------------------------------------------------- */
.site-contact{
  position:fixed;
  z-index:40;
  right:0;
  bottom:0;
  left:50%;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  width:min(1080px,100%);
  height:125px;
  min-height:125px;
  padding:0 clamp(1rem,5vw,3.25rem) calc(13px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(0,0,0,.004),rgba(0,0,0,.996));
  pointer-events:none;
}

.site-contact[hidden]{display:none}
.site-contact__label,
.site-contact__social{pointer-events:auto}

.site-contact__label{
  display:block;
  /* Decorative artwork is 20% smaller; links retain their full hit area. */
  width:min(113px,27.2vw);
  height:auto;
}

.site-contact__social{
  display:flex;
  align-items:center;
  /* The artwork is 80% of its hit area; close the visual gap without
     making the 50px click targets touch each other. */
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.site-contact__link{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:50%;
  transition:transform .2s ease,filter .2s ease;
}

.site-contact__link img{
  display:block;
  width:80%;
  height:80%;
  object-fit:contain;
}

/* Use the isolated transparent Linktree mark.  Cropping it from the opaque
   footer reference left a visible black square whenever artwork sat behind
   the fixed contact strip. */
.social-icon--linktree{
  display:block;
  width:40px;
  height:40px;
  background-image:url("../img/ui-set-6/Social Media Icon_LT-round.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.site-contact__link:hover,
.site-contact__link:focus-visible{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.12);
}

.site-contact__link:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

/* Keep the fixed tab from covering the last row or the work copy. */
#screen-unit > .wrap,
#screen-cat > .wrap,
#screen-work > .work{
  padding-bottom:calc(125px + env(safe-area-inset-bottom,0px));
}

/* Work pages already contain the long-form contact block; the fixed tab is
   its compact replacement and avoids rendering the same links twice. */
#screen-work .social,
#screen-work .contact{
  display:none;
}

@media (max-width:600px){
  .site-contact{
    height:125px;
    min-height:125px;
    padding-inline:1rem;
  }

  .site-contact__label{width:min(113px,24.8vw)}
  /* Keep the recommended 8px separation between mobile hit targets. */
  .site-contact__social{gap:8px}
  .site-contact__link{width:50px;height:50px}
}

/* Foldable cover screens can be only 280px wide.  Four 44px touch targets
   fit comfortably, but the decorative CONTACT lockup cannot share that row
   without pushing the last links beyond the viewport. */
@media (max-width:420px){
  .site-contact{justify-content:center;padding-inline:1rem}
  .site-contact__label{display:none}
  .site-contact__social{gap:8px}
  .site-contact__link{width:44px;height:44px}
  .social-icon--linktree{width:35px;height:35px}
}

@media (prefers-reduced-motion:reduce){
  .site-contact__link{transition:none}
}