@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 180ms ease-in both; }
::view-transition-new(root) { animation: page-in 280ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.writing-row[id], .blog-entry[id] { scroll-margin-top: 100px; }
.writing-row:active, .blog-read:active { opacity: .72; }
.blog-read > span { transition: transform 180ms ease-out; }
@media (hover: hover) { .blog-read:hover > span { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .writing-row, .writing-row span, .blog-read > span { transition: none !important; transform: none !important; }
}