/* BEERUS Contact — image-led contact page */
.contact-page{
  background:#111;
  color:#d8ff00;
  overflow:hidden;
}
.contact-page .site-header{
  grid-template-columns:30px repeat(3,minmax(0,1fr));
}
.contact-page .brand,
.contact-page .nav a{
  background:rgba(15,15,15,.94);
  color:#d8ff00;
  border:1px solid rgba(216,255,0,.18);
}
.contact-page .nav a:hover,
.contact-page .nav a[aria-current="true"]{
  background:#d8ff00;
  color:#0f0f0f;
  border-color:#d8ff00;
}
.contact-page .nav a[aria-current="true"]{background:rgba(216,255,0,.72);}
.contact-page .nav a[aria-current="true"]:hover{background:#d8ff00;}

.contact-main,
.contact-hero{
  width:100%;
  height:100svh;
  min-height:100svh;
}
.contact-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#4c4c4c;
}
.contact-hero picture{position:absolute;inset:0;z-index:-2}.contact-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  z-index:-2;
}
.contact-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.08) 100%);
  z-index:-1;
  pointer-events:none;
}

/* Handwritten links */
.contact-links{
  position:absolute;
  z-index:4;
  top:10.5%;
  right:10.5%;
  width:min(34vw,470px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:31px;
  color:#d8ff00;
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-size:clamp(22px,2.05vw,39px);
  line-height:.92;
  font-weight:500;
  letter-spacing:-.055em;
  transform:rotate(-1deg);
}
.contact-link{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:max-content;
  color:#d8ff00;
  text-decoration:none;
  transition:transform .2s ease;
}
.contact-link:hover{transform:rotate(-1deg) translateX(3px);}
.contact-arrow{
  display:inline-block;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.9em;
  line-height:.95;
  letter-spacing:0;
  transform:translateY(1px);
}
.contact-link:not(.contact-link--stupid):after{
  content:"";
  position:absolute;
  left:34px;
  right:-10px;
  bottom:-9px;
  height:3px;
  border-radius:50%;
  background:#d8ff00;
  transform:rotate(-1deg) skewX(-14deg);
}
.contact-link:not(.contact-link--stupid):before{
  content:"";
  position:absolute;
  left:46px;
  right:0;
  bottom:-13px;
  height:2px;
  border-radius:50%;
  background:#d8ff00;
  opacity:.9;
  transform:rotate(1deg) skewX(-18deg);
}
.contact-link--linkedin{transform:rotate(.5deg);}
.contact-link--linkedin:hover{transform:rotate(0deg) translateX(3px);}

/* The circled 'stupid' option */
.contact-link--stupid{
  margin-top:2px;
  padding:11px 25px 15px 25px;
  margin-left:20px;
  transform:rotate(-2deg);
}
.contact-link--stupid:hover{transform:rotate(-2deg) translateX(3px);}
.contact-link--stupid:before,
.contact-link--stupid:after{
  content:"";
  position:absolute;
  pointer-events:none;
  border:2px solid #d8ff00;
  border-radius:50%;
}
.contact-link--stupid:before{
  inset:-11px -25px -12px -18px;
  transform:rotate(-3deg);
}
.contact-link--stupid:after{
  inset:-6px -19px -17px -25px;
  transform:rotate(3deg);
  opacity:.8;
}
.stupid-copy{display:block;}
.contact-link--stupid .contact-arrow{margin-top:2px;}

.contact-back,
.contact-year{
  position:absolute;
  z-index:5;
  bottom:3.4%;
  color:#d8ff00;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.025em;
}
.contact-back{left:3%;}
.contact-year{right:3%;}
.contact-year span{
  display:block;
  width:72px;
  height:2px;
  margin:7px 0 0 auto;
  background:#d8ff00;
  transform:rotate(-2deg);
}

@media(max-width:900px){
  .contact-page .site-header{grid-template-columns:28px repeat(3,minmax(0,1fr));}
  .contact-page .nav a{font-size:9px;}
  .contact-links{
    top:15%;
    right:7%;
    width:auto;
    gap:27px;
    font-size:clamp(20px,5.2vw,31px);
  }
  .contact-link--stupid{margin-left:12px;padding:9px 20px 12px 20px;}
  .contact-back,.contact-year{bottom:3%;font-size:9px;}
}

@media(max-width:560px){
  .contact-image{object-position:52% center;}
  .contact-links{
    top:15%;
    right:6%;
    gap:25px;
    font-size:clamp(19px,6vw,27px);
  }
  .contact-link{gap:9px;}
  .contact-link:not(.contact-link--stupid):after{left:28px;right:-7px;bottom:-7px;height:2px;}
  .contact-link:not(.contact-link--stupid):before{left:38px;bottom:-10px;height:1.5px;}
  .contact-link--stupid{margin-left:7px;padding:8px 17px 10px 17px;}
  .contact-link--stupid:before{inset:-8px -16px -10px -12px;}
  .contact-link--stupid:after{inset:-4px -12px -13px -16px;}
  .contact-back{left:18px;bottom:22px;}
  .contact-year{right:18px;bottom:22px;}
}