.post-meta {
  box-sizing: border-box;
  display: grid;
  justify-items: end;
  width: fit-content;
  max-width: min(100%, 23rem);
  margin: 0 0 2.25rem auto;
  padding: 0;
  text-align: right;
  color: #5f5b54;
}

.post-meta time,
.post-jovian-date {
  display: block;
  grid-area: 1 / 1;
  transition: opacity 320ms ease;
}

.post-meta time {
  font-size: 0.86rem;
  opacity: 1;
}

.post-meta.has-jovian time {
  animation: post-date-alternate 12s ease-in-out infinite;
}

.post-jovian-date {
  color: #7a746a;
  font-family: "Songti SC", "STSong", serif;
  font-size: 0.86rem;
  line-height: 1.45;
  opacity: 0;
}

.post-meta.has-jovian .post-jovian-date {
  animation: post-jovian-alternate 12s ease-in-out infinite;
}

.post-meta.has-jovian:hover time,
.post-meta.has-jovian:focus-within time,
.post-meta.has-jovian:active time {
  animation: none;
  opacity: 0;
}

.post-meta.has-jovian:hover .post-jovian-date,
.post-meta.has-jovian:focus-within .post-jovian-date,
.post-meta.has-jovian:active .post-jovian-date {
  animation: none;
  opacity: 1;
}

html:has(body[a="dark"]) .post-meta {
  color: #c9c3ba;
}

html:has(body[a="dark"]) .post-jovian-date {
  color: #aaa49a;
}

@media (prefers-color-scheme: dark) {
  html:has(body[a="auto"]) .post-meta {
    color: #c9c3ba;
  }

  html:has(body[a="auto"]) .post-jovian-date {
    color: #aaa49a;
  }
}

@keyframes post-date-alternate {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes post-jovian-alternate {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .post-meta time,
  .post-jovian-date {
    animation: none;
    transition: none;
  }

  .post-meta.has-jovian .post-jovian-date {
    display: none;
  }
}