* {
  box-sizing:border-box;
}

:root {
  --black:#000;
  --white:#fff;
  --header-height:80px;
}

html,
body {
  margin:0;
  min-height:100%;
}

body {
  background:var(--white);
  color:var(--black);
  font-family:"futura-pt-condensed", sans-serif;
}

.work-directory {
  width:1680px;
  max-width:100%;
  height:880px;
  margin:0 auto;
  position:relative;
}

.work-directory-link {
  position:absolute;
  top:0;
  width:840px;
  height:880px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--black);
  font-size:clamp(54px, 4.05vw, 68px);
  font-style:italic;
  font-weight:400;
  line-height:1;
  text-align:center;
  text-decoration:none;
  background:var(--white);
  overflow:hidden;
  isolation:isolate;
  transition:color 180ms ease 280ms;
}

.work-directory-link span {
  position:relative;
  z-index:3;
}

.work-directory-link::before {
  content:"";
  position:absolute;
  z-index:1;
  right:0;
  bottom:0;
  left:0;
  height:106%;
  background:var(--black);
  transform:translateY(110%);
  transition:transform 760ms cubic-bezier(.22, .72, .2, 1);
}

.work-directory-link::after {
  content:"";
  position:absolute;
  z-index:2;
  left:-15%;
  bottom:-22%;
  width:130%;
  height:20%;
  background:var(--black);
  border-radius:50%;
  transform:translateX(-2%) rotate(-1deg);
  transition:bottom 760ms cubic-bezier(.22, .72, .2, 1);
  animation:work-fluid-wave 1.8s ease-in-out infinite alternate;
}

.work-directory-link:first-child {
  left:0;
}

.work-directory-link:last-child {
  left:840px;
}

.work-directory-link:visited,
.work-directory-link:hover,
.work-directory-link:active {
  color:var(--black);
  text-decoration:none;
}

.work-directory-link:hover,
.work-directory-link:focus-visible,
.work-directory-link:active {
  color:var(--white);
}

.work-directory-link:hover::before,
.work-directory-link:focus-visible::before,
.work-directory-link:active::before {
  transform:translateY(0);
}

.work-directory-link:hover::after,
.work-directory-link:focus-visible::after,
.work-directory-link:active::after {
  bottom:87%;
}

@keyframes work-fluid-wave {
  from {
    border-radius:46% 54% 48% 52%;
    transform:translateX(-2%) rotate(-1deg);
  }

  to {
    border-radius:55% 45% 57% 43%;
    transform:translateX(2%) rotate(1deg);
  }
}

.work-directory-link:focus-visible {
  outline:2px solid var(--white);
  outline-offset:-12px;
}

.work-directory-page .footer {
  margin-top:0;
}

@media screen and (max-width:1679px) and (min-height:501px) {
  .work-directory {
    width:100%;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:center;
  }

  .work-directory-link,
  .work-directory-link:first-child,
  .work-directory-link:last-child {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    height:880px;
    aspect-ratio:auto;
  }
}