/* ==========================================================================
   ipattern.co — the wordmark. ONE definition, linked by every page.

   Lifted from the About Me header, which was the original. Before this file
   there were three marks: IPATTERN˚ on /about and the case pages, IPATTERN.
   in mono on the home page and the showcase index, and a lowercase iPattern˚
   on the Indivesta pages.

   Self-contained on purpose. The face is pinned here rather than read from
   --font-display, because --font-display is Marcellus on the Indivesta pages
   and the wordmark must not turn into a serif when it appears there.
   Colour still follows the page: --ink is defined by all three systems.
   ========================================================================== */
.ip-logo,
.ip-logo:hover {
  --logo-face: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --logo-size: clamp(1.35rem, 1.2vw + 0.9rem, 2.1rem);
  --logo-deg:  clamp(0.65rem, 0.4vw + 0.45rem, 0.9rem);

  display: inline-flex;
  align-items: flex-start;
  color: var(--ink);
  font-family: var(--logo-face);
  font-weight: 900;
  letter-spacing: 0.15em;
  font-size: var(--logo-size);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ip-logo:hover { opacity: 0.8; }
/* The most-clicked element on the site had no press state. */
.ip-logo:active { opacity: 0.55; transition: none; }

/* The ring is set smaller and lifted, so it reads as a mark rather than a
   character that lost its baseline. */
.ip-logo .deg {
  font-size: var(--logo-deg);
  margin-top: -0.125rem;
  margin-left: 0.125rem;
  line-height: 1;
}

/* Compact variant — for placements where the page's own mark leads and this
   is the way back out, not the identity of the page. Same wordmark, quieter. */
.ip-logo--sm {
  --logo-size: 0.8125rem;
  --logo-deg: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}