/* Pre-rendered foil, shared by both pages. No animation loop or WebGL. */
.balloon-title img { display: block; object-fit: contain; user-select: none; }
.computer .title h1.balloon-title { margin: 0 0 6px; padding: 0; line-height: 1; }
.computer .balloon-title img { height: clamp(28px,4.9cqw,44px); width: auto; max-width: 100%; }
.media-page h1.balloon-title { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; }
.media-page .balloon-title img { width: calc(54% - 4px); height: auto; min-width: 0; }
.media-page .balloon-title img + img { width: calc(46% - 4px); }
.media-page .hero-clip:has(.balloon-title) { overflow: visible; }
@media(min-width:701px) and (max-height:850px), (min-width:701px) and (max-width:850px) {
  .computer .balloon-title img { height: 28px; }
}
@media(max-width:700px) { .computer .balloon-title img { height: 28px; } }
.screen-dialog .computer .balloon-title img { height: clamp(32px,5cqw,68px); }
@media(forced-colors:active) { .balloon-title img { forced-color-adjust: none; } }

.desktop-bar.art-bar { height: 64px; gap: 18px; }
.art-bar .desktop-brand { display: flex; min-height: 44px; }
.art-bar .bar-wordmark { display: block; width: 112px; height: 46px; object-fit: contain; }
.art-bar .theme-options { height: auto; gap: 6px; }
.art-bar .theme-options button { display: grid; place-items: center; min-height: 44px; padding: 3px 8px; border-radius: 14px; border: 1px solid transparent; }
.art-bar .theme-options img { width: 64px; height: 31px; object-fit: contain; display: block; }
.art-bar .theme-options button[aria-pressed=true] { background: var(--wash); border-color: var(--phosphor); box-shadow: inset 0 -2px var(--phosphor); }
.art-bar .theme-options button:hover { border-color: var(--phosphor); }
.art-bar .contact-link { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-left: auto; padding: 0 14px; border: 1px solid var(--mac-line); border-radius: 14px; font: 13px var(--ui); color: var(--mac-ink); text-decoration: none; }
.art-bar .contact-link:hover { border-color: var(--phosphor); color: var(--phosphor); background: var(--wash); }
.art-bar .contact-link + .theme-options { margin-left: 0; }
.painted-keycaps { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; clip-path: url(#mac-keys-mask); }
.render-failed .painted-keycaps { display: none; }
@media(max-width:700px) {
  .desktop-bar.art-bar { padding: 0 12px; gap: 10px; }
  .art-bar .bar-wordmark { width: 96px; height: 42px; }
  .art-bar .theme-options { gap: 2px; }
  .art-bar .theme-options button { padding: 3px 5px; }
  .art-bar .theme-options img { width: 52px; height: 28px; }
  .art-bar .contact-link { font-size: 12px; padding: 0 10px; }
}
@media(max-width:380px) {
  .desktop-bar.art-bar { padding: 0 10px; gap: 6px; }
  .art-bar .bar-wordmark { width: 80px; }
  .art-bar .theme-options img { width: 46px; }
  .art-bar .contact-link { padding: 0 8px; }
}

:root[data-theme=dark] .painted-keycaps { filter:brightness(.76) saturate(.85); }

/* Media destinations use the same photographed foil lettering as the page title. */
.media-page .media-link-shell {
  flex: 1;
  min-width: 200px;
  display: flex;
  position: relative;
  z-index: 1;
  transform-origin: center;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), filter .2s ease;
  will-change: transform;
}
.media-page .links { gap: 28px; align-items: center; }
.media-page .links .media-link {
  width: 100%;
  min-width: 0;
  min-height: 108px;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  overflow: visible;
  background: transparent;
  border: 0;
}
.media-page .media-link img {
  display: block;
  width: min(82%, 230px);
  height: auto;
  max-height: 96px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 1px #0b1d4633);
}
.media-page .links .media-link:hover { background: transparent; color: inherit; filter: none; }
@media (hover:hover) and (pointer:fine) {
  .media-page .media-link-shell:hover,
  .media-page .media-link-shell:focus-within {
    z-index: 3;
    transform: scale(1.04);
    filter: drop-shadow(0 8px 12px #10244824);
  }
  .media-page .media-link-shell:active { transform: scale(1.015); }
}
@media(max-width:700px) {
  .media-page .media-link-shell { min-width: 0; }
  .media-page .links { gap: 12px; }
  .media-page .links .media-link { min-height: 104px; padding: 7px 12px; }
  .media-page .media-link img { width: min(78%, 260px); max-height: 108px; }
}
@media(prefers-reduced-motion:reduce) {
  .media-page .media-link-shell { transition: none; }
  .media-page .media-link-shell:hover,
  .media-page .media-link-shell:focus-within,
  .media-page .media-link-shell:active { transform: none; filter: none; }
}