/* Stable, visible defaults. Bundled GSAP and Motion progressively enhance them. */
.motion-ready .hero-title-block > *,
.motion-ready .hero-aside > *,
.motion-ready .listing-hero-copy > *,
.motion-ready .contact-hero-copy > *,
.motion-ready .project-hero-copy > *,
.motion-ready .reveal-item:not(.is-filtering-out) {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
  transition: none;
}
.motion-ready .hero-media,
.motion-ready .listing-hero img { animation: none; }
.skip-link { position: fixed; top: 12px; left: var(--page-x); z-index: 80; padding: 14px 20px; background: var(--surface); color: var(--accent); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
main:focus { outline: none; }
.reading-progress { position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: 3px; background: var(--wine); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.hero-playback { position: absolute; right: var(--page-x); bottom: 32px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 50%; background: rgb(0 0 0 / 32%); color: white; }
.hero-playback[hidden] { display: none; }
.hero-playback .play-icon, .hero-playback[aria-pressed='true'] .pause-icon { display: none; }
.hero-playback[aria-pressed='true'] .play-icon { display: block; }
.hero-playback:focus-visible { outline: 2px solid white; outline-offset: 5px; }
.hero-playback:disabled { display: none; }
.hero { min-height: calc(100svh - 32px); }
.hero h1 { font-size: 5.5rem; }
.mobile-panel { overflow-y: auto; overscroll-behavior: contain; background: var(--accent); }
.mobile-panel a { font-size: 3rem; }
.menu-open .mobile-panel { transition-duration: 450ms, 240ms, 450ms, 0s; }
.mobile-panel a:focus-visible { outline: 1px solid currentColor; outline-offset: -6px; }
@media (max-width: 1100px) {
  .hero h1 { font-size: 4rem; }
}
@media (max-width: 820px) {
  .hero h1 { font-size: 3.25rem; }
  .mobile-panel a { font-size: 2.75rem; }
}
@media (max-width: 430px) {
  .hero h1 { font-size: 2.75rem; }
  .hero-playback { bottom: 18px; }
  .mobile-panel a { font-size: 2.375rem; }
}
@media (max-height: 560px) {
  .mobile-panel { align-content: start; padding-top: 140px; }
  .mobile-panel a { min-height: 52px; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .post-card-media img, .project-info { transform: none !important; }
}