.dock.modern-dock { --nav-width: calc(100vw - 32px); --nav-art: url('assets/work/25.png'); z-index: 2147483647; top: 16px; left: 16px; width: var(--nav-width); height: calc(var(--nav-width) * .01608); min-height: 32px; border: 0; }
.modern-dock nav { filter: invert(1); }
.modern-dock.landing-dock, .modern-dock.inversion-dock { mix-blend-mode: difference; }
.modern-dock.inversion-dock { pointer-events: none; }
.modern-dock.inversion-dock[hidden] { display: none; }
.modern-dock nav > * { color: transparent; font-size: 0; height: 100%; background-image: var(--nav-art); background-size: var(--nav-width) auto; background-repeat: no-repeat; }
.modern-dock .brand { left: 0; width: 12.2%; background-position: 0 0; }
.modern-dock .index { left: auto; right: 17%; width: 7.8%; background-position: calc(var(--nav-width) * -.663) 0; }
.modern-dock .playground { left: auto; right: 0; width: 14%; background-position: calc(var(--nav-width) * -.77) 0; }
/* ABOUT drops down under BAD STUDIO; its padding bridges the gap so hover is not lost. */
.modern-dock .about-link { left: 0; top: 85%; width: 7.1%; height: calc(100% + var(--nav-width) * .008); padding-top: calc(var(--nav-width) * .008); background-origin: content-box; background-clip: content-box; background-position: calc(var(--nav-width) * -.9293) 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.modern-dock .brand:hover ~ .about-link, .modern-dock .about-link:hover, .modern-dock .about-link:focus-visible, .modern-dock .brand:focus-visible ~ .about-link { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.modern-dock nav > *::before { content: none; }
@media (max-width: 900px) {
  .dock.modern-dock { top: 12px; left: 12px; width: calc(100% - 24px); height: 28px; min-height: 28px; }
  .modern-dock nav { display: flex; align-items: flex-start; gap: clamp(10px, 2vw, 22px); }
  .dock.modern-dock nav > * { position: static; width: auto; height: auto; color: #000; font-size: clamp(11px, 2.8vw, 21px); font-weight: 700; letter-spacing: -.065em; text-decoration: none; white-space: nowrap; background: none; }
  .modern-dock .brand { margin-right: auto; }
  .dock.modern-dock nav > .about-link { position: absolute; left: 0; top: 100%; padding-top: 6px; }
}