/* ============================================================
   SITE TITLE — the "beatconfused.com" wordmark at the top of every tool
   page (and the 404 page), styled exactly like the home page's own h1 and
   linking back to it, so home is one click away from the top as well as
   from the footer. Deliberately the same colour in every link state
   (unvisited, visited, hover, active): it should read as the site's
   title, not as a blue/purple hyperlink.

   Loaded by every page with a "?v=" query string (see the caching notes
   in CLAUDE.md) — bump it on every page if this file changes.
   ============================================================ */
.site-title {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
}

.site-title,
.site-title:link,
.site-title:visited,
.site-title:hover,
.site-title:focus,
.site-title:active {
  color: #262220;
  text-decoration: none;
}

/* On narrow screens the centered title spans most of the width, so drop
   it below the fixed top-right language switcher instead of under it. */
@media (max-width: 720px) {
  .site-title {
    margin-top: 1.25rem;
  }
}

.site-title:focus-visible {
  outline: 2px solid rgba(163, 86, 34, 0.9);
  outline-offset: 4px;
  border-radius: 0.3rem;
}