/* Canonical Coffee navigation interaction, shared without changing its values. */
.topic-nav a:hover { color: inherit; }
.topic-nav > span { color: var(--mint); }

.topic-nav a,
.topic-page + .site-footer nav a,
.canonical-footer nav a {
  position: relative;
  padding-bottom: 5px;
}

.topic-nav a::after,
.topic-page + .site-footer nav a::after,
.canonical-footer nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.topic-nav a:hover::after,
.topic-nav a:focus-visible::after,
.topic-page + .site-footer nav a:hover::after,
.topic-page + .site-footer nav a:focus-visible::after,
.canonical-footer nav a:hover::after,
.canonical-footer nav a:focus-visible::after {
  transform: scaleX(1);
}

.topic-page + .site-footer,
.canonical-footer { align-items: flex-end; }

/* Homepage desktop hero: photo begins at the header rule and ends at the
   navigation rule below it. Only the photo panel is extended; the copy and
   navigation geometry stay untouched. */
@media (min-width: 901px) {
  .hero-scene .hero-art {
    margin-top: -70px;
    margin-bottom: -80px;
    transform: none;
  }
}

@media (max-width: 620px) {
  .topic-page + .site-footer,
  .canonical-footer { align-items: flex-start; }
}