/* Shared portfolio mark on the left, section tabs right-aligned so the nav
   mirrors the left rail / content split below it. */
nav{
  display:flex;
  justify-content:space-between;
}

/* Tabs hug their labels instead of stretching to 260px. The grid keeps all
   three the same width (that of the widest label). */
.nav-tabs{
  flex:none;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}

.nav-tabs a{
  max-width:none;
  padding:0 36px;
}

/* Phones: not enough room for fixed-width pills, so let the tabs fill the
   space next to the mark again. */
@media (max-width:560px){
  .nav-tabs{
    flex:1;
    min-width:0;
  }
  .nav-tabs a{
    min-width:0;
    padding:0 8px;
  }
}

.nav-home{
  --logo-accent:#CBFF71;
  --logo-idle:var(--canvas,#D7D7D7);
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--logo-idle);
  text-decoration:none;
  transition:color .2s ease,transform .2s ease;
}

.nav-home.logo-about{--logo-accent:#FF8418}
.nav-home.logo-play{--logo-accent:#00D0FF}

.nav-home-mark{
  display:block;
  width:32px;
  height:32px;
}

.nav-home:hover{
  color:var(--logo-accent);
  transform:scale(1.05);
}

.nav-home:focus-visible{
  color:var(--logo-accent);
  outline:2px solid var(--ink,#111);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .nav-home{transition:none}
}