/* Goosy Apps mark: the goose sits in its own medallion so it stays legible on any page or theme background. */
.brand-medal {
  position: relative; display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  width: var(--medal, 54px); height: var(--medal, 54px); border-radius: 50%;
  background: linear-gradient(#fff 0 62%, #E5F2EC 62%);
  box-shadow: 0 0 0 2.5px var(--ink), 0 6px 14px -8px #1F2A4488;
}
.brand-medal img { width: 86%; height: 86%; margin: 14% 0 0 4%; transition: transform .4s cubic-bezier(.3,1.8,.5,1); }
.wordmark:hover .brand-medal img { transform: rotate(-10deg) translateY(-2px); }

.wordmark { gap: 11px; letter-spacing: normal; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1; }
.wordmark-text b { font: 800 31px/.86 var(--display); letter-spacing: -.6px; }
.wordmark-text small { margin-top: 5px; padding-left: 2px; font: 900 11px/1 var(--body); letter-spacing: 5.2px; text-transform: uppercase; color: var(--muted); }
.studio-footer .wordmark { --medal: 50px; }
.studio-footer .wordmark-text b { font-size: 28px; }

/* Family switcher: icons keep a white backdrop even on the coloured thumb. */
.audience-chip {
  display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--ink);
}
.audience-buttons .audience-chip img { width: 40px; height: 40px; margin-top: 4px; }
.audience-buttons > button[aria-pressed=false] .audience-chip { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent); }

html[data-theme] .brand-medal { box-shadow: 0 0 0 2.5px var(--line), 0 6px 14px -8px #0008; }
html[data-theme=neon] .brand-medal { box-shadow: 0 0 0 2.5px #6A5BC9; }
html[data-theme] .audience-chip { box-shadow: 0 0 0 2px var(--line); }

@media (max-width: 650px) {
  .studio-header .wordmark { --medal: 44px; gap: 9px; }
  .wordmark-text b { font-size: 26px; }
  .wordmark-text small { font-size: 10px; letter-spacing: 4.4px; }
  .audience-chip { width: 38px; height: 38px; }
  .audience-buttons .audience-chip img { width: 33px; height: 33px; }
}
@media (max-width: 380px) {
  .audience-chip { width: 32px; height: 32px; }
  .audience-buttons .audience-chip img { width: 28px; height: 28px; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .brand-medal img { transition: none; } }