/* Banner lettering is cut from one sprite (assets/work/25.png, 3669 x 59 px).
   Word spans in sprite px: BAD STUDIO 0-444, WORKS 2436-2714, PLAYGROUND 2825-3330, ABOUT 3410-3669. */
.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 nav > *::before { content: none; }
/* Desktop: the sprite spans the full banner, so each word sits where it was drawn,
   except ABOUT, which is moved left of WORKS with the same gap as WORKS–PLAYGROUND. */
.modern-dock .brand { left: 0; width: 12.2%; background-position: 0 0; }
.modern-dock .about-link { left: 64.9%; width: 7.1%; background-position: calc(var(--nav-width) * -.9294) 0; }
.modern-dock .index { left: 75.2%; width: 7.8%; background-position: calc(var(--nav-width) * -.663) 0; }
.modern-dock .playground { left: 86%; width: 14%; background-position: calc(var(--nav-width) * -.77) 0; }

/* Phones and tablets (mockup): BAD STUDIO on the left; WORKS, PLAYGROUND, ABOUT on the
   right, with ABOUT last. 16px side margins like the homepage tiles; word sizes and gaps
   scale with the screen width so the proportions match the mockup. */
@media (max-width: 900px) {
  .dock.modern-dock { --k: calc((100vw - 32px) / 1953); --gap: calc((100vw - 32px) * .054); top: 16px; left: 16px; width: calc(100% - 32px); height: calc(59 * var(--k)); min-height: 0; }
  .modern-dock nav { display: flex; align-items: flex-start; gap: var(--gap); }
  .dock.modern-dock nav > * { position: static; flex: none; height: calc(59 * var(--k)); background-size: calc(3669 * var(--k)) auto; }
  .dock.modern-dock .brand { width: calc(444 * var(--k)); margin-right: auto; background-position: 0 0; }
  .dock.modern-dock .index { width: calc(279 * var(--k)); background-position: calc(-2436 * var(--k)) 0; }
  .dock.modern-dock .playground { width: calc(506 * var(--k)); background-position: calc(-2825 * var(--k)) 0; }
  .dock.modern-dock .about-link { order: 1; width: calc(259 * var(--k)); background-position: calc(-3410 * var(--k)) 0; }
}