* {
  box-sizing:border-box;
}

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

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

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

.work-directory-page {
  padding-top:var(--header-height);
}

.work-directory {
  width:100%;
  height:calc(100svh - var(--header-height));
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:calc(50svh - var(--header-height)) 50svh;
  gap:0;
}

.work-directory-link {
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--black);
  font-size:clamp(42px, 14vw, 64px);
  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:first-child span {
  transform:translateY(calc(var(--header-height) / -2));
}

.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: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;
}

.footer {
  width:100%;
  min-height:360px;
  margin:0 auto;
  padding:48px var(--page-margin, 20px) 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:42px;
  color:var(--gray, #777);
}

.footer::before {
  display:none;
}

.footer-main {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.footer-divider {
  width:1px;
  height:28px;
  background:currentColor;
}

.footer-social,
.footer-social img {
  width:28px;
  height:28px;
}

.footer-name,
.footer-email {
  font-size:22px;
  white-space:nowrap;
}

.footer-copyright {
  margin:0;
  font-size:20px;
}

.image-lightbox[hidden] {
  display:none;
}

.image-lightbox {
  position:fixed;
  inset:0;
  z-index:10000;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgb(255 255 255 / 96%);
}

.image-lightbox-image {
  width:auto;
  height:auto;
  max-width:calc(100vw - 48px);
  max-height:calc(100vh - 48px);
  object-fit:contain;
}