:root {
  --work-slate: #2b3536;
  --about-open-size: 30.6px;
  --about-open-tracking: 1.62px;
}
@font-face {
  font-family: "Work Light Italic";
  src: local("Calibri Light Italic"), local("Calibri-LightItalic");
  font-style: italic;
  font-weight: 300;
}
.work-panel { background: #080808; }
.work-panel::after { content: none; }
.work-intro { background: var(--work-slate); }
.work-title {
  position: absolute;
  top: 37%;
  left: 4.7%;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: .55em;
  margin: 0;
  color: #fff;
  font: 400 5.15vw/1 Arial, sans-serif;
  white-space: nowrap;
}
.work-title [aria-hidden] {
  transform: translateY(-.10em);
}
.work-title em {
  font-family: "Work Light Italic", Arial, sans-serif;
  font-size: .697em;
  transform: translateY(-.26em);
  font-weight: 300;
  font-synthesis: none;
}
.work-panel .work-photo {
  object-fit: contain;
  pointer-events: none;
}
.work-panel .a-nav img,
.work-contacts img { filter: drop-shadow(0 1px 2px #000); }
.work-controls {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
}
.work-controls #about-open {
  position: static;
  font-size: var(--about-open-size);
  letter-spacing: var(--about-open-tracking);
  pointer-events: auto;
}
.work-contacts {
  display: flex;
  align-items: center;
  color: rgb(255 255 255 / 80%);
  pointer-events: auto;
}
.work-contacts[hidden] { display: none; }
.work-contacts img { width: 46px; height: 46px; opacity: .8; }
.work-contacts:hover img { opacity: 1; }
.work-contacts::after {
  content: "";
  height: 31px;
  margin-left: 8px;
  border-left: 1px solid currentColor;
}
.about-active .work-controls { visibility: hidden; }

@media (max-width: 720px) {
  :root { --about-open-size: 20.4px; }
  .work-panel .a-nav, #s6 .a-nav { display: grid !important; gap: 6px; }
  .work-title { font-size: 7.25vw; }
}
@media (max-width: 360px) {
  :root { --about-open-size: 17px; }
  .work-controls { right: max(14px, env(safe-area-inset-right)); gap: 4px; }
  .work-panel .a-nav { left: max(14px, env(safe-area-inset-left)); gap: 2px; }
}