/* Keep the home navigation's coordinate system stable during its fade. */
@media (min-width: 431px) and (hover: hover) and (pointer: fine) {
  .home .home-navigation,
  .home .home-navigation:hover,
  .home .home-navigation:focus-within {
    width: min(448px, calc(100vw - 32px));
    transition: none;
  }
  .home .navigation-links {
    left: calc(50% + 28px);
    width: 196px;
    transition: opacity 200ms ease;
  }
}
/* Category images overlap their labels without changing the layout. */
.work-disciplines { isolation: isolate; }
.work-disciplines a { position: relative; isolation: isolate; transition: color 160ms ease; }
.work-disciplines a[href="/photography"] { --work-cover: url('/assets/2657b.png'); --preview-width: 540px; --preview-height: 360px; --preview-y: -65%; }
.work-disciplines a[href="/video"] { --work-cover: url('/assets/film-cover-ebony.png'); --preview-width: 270px; --preview-height: 380px; --preview-y: -35%; }
.work-disciplines a[href="/graphic-design"] { --work-cover: url('/assets/jmsn-cover.jpg'); --preview-width: 410px; --preview-height: 420px; --preview-y: -65%; }
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
 .work-disciplines a::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--preview-width); height: var(--preview-height);
  max-width: 92vw; max-height: 68vh;
  background: var(--work-cover) center / cover no-repeat;
  opacity: 0;
  transform: translate(-50%, var(--preview-y));
  transition: opacity 180ms ease;
  pointer-events: none;
  z-index: -1;
 }
 .work-disciplines a:hover, .work-disciplines a:focus-visible {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
  z-index: 2;
 }
 .work-disciplines a:hover::before, .work-disciplines a:focus-visible::before { opacity: 1; }
}
@media (max-width: 1100px) {
 .work-disciplines a { --preview-width: 500px; --preview-height: 240px; --preview-y: -50%; }
}
@media (prefers-reduced-motion: reduce) {
 .home .portrait, .home .navigation-links, .work-disciplines a, .work-disciplines a::before { transition: none; }
}