.home-icon { display: block; width: 44px; height: 48px; }
.blog-nav, .cv-nav { gap: 8px; }
.blog-nav .nav-illustration, .cv-nav .nav-illustration { display: block; width: 36px; height: 42px; flex: none; }
/* The original SVG files are retained alongside these animated versions. */
.home-door { transform-origin: 39px 60px; transition: transform .35s ease; }
.home-lit { opacity: 0; transition: opacity .35s ease; }
.wordmark:is(:hover, :focus-visible) .home-lit { opacity: 1; }
.wordmark:is(:hover, :focus-visible) .home-door { transform: scaleX(.35); }
.writing-pen { transition: transform .35s ease; }
.writing-line { stroke-dasharray: 32; stroke-dashoffset: 0; }
.blog-nav:is(:hover, :focus-visible) .writing-pen { animation: pen-write .8s ease-in-out; }
.blog-nav:is(:hover, :focus-visible) .writing-line { animation: line-write .8s ease-in-out; }
@keyframes pen-write { 0% { transform: translateX(-24px); } 100% { transform: translateX(0); } }
@keyframes line-write { 0% { stroke-dashoffset: 32; } 100% { stroke-dashoffset: 0; } }
.cv-front { transform-origin: 32px 58px; transition: transform .38s ease; }
.cv-nav:is(:hover, :focus-visible) .cv-front { transform: scaleY(.2); }
@media (prefers-reduced-motion: reduce) {
  .home-door, .home-lit, .writing-pen, .cv-front { transition: none; }
  .blog-nav:is(:hover, :focus-visible) .writing-pen, .blog-nav:is(:hover, :focus-visible) .writing-line { animation: none; }
  .wordmark:is(:hover, :focus-visible) .home-door, .cv-nav:is(:hover, :focus-visible) .cv-front { transform: none; }
  .wordmark:is(:hover, :focus-visible) .home-lit { opacity: 0; }
}

@media (max-width: 600px) {
  .blog-nav, .cv-nav { gap: 4px; }
  .blog-nav .nav-illustration, .cv-nav .nav-illustration { width: 30px; }
}