/* Responsive overrides (the design-system screens use inline styles, so these need !important) */
html,body{overflow-x:clip}
header{isolation:isolate}
img{max-width:100%}
@media (max-width:1100px){
  .yp-collage{height:calc(640px * .8)!important}
  .yp-collage-inner{transform:scale(.8)}
}
@media (max-width:860px){
  .yp-rsvp-form{order:1}
  .yp-rsvp-stack{order:2;flex-basis:100%!important;padding-top:0!important}
  .yp-hero{height:auto!important;min-height:0;padding:64px var(--gutter-page) 22px;display:flex;flex-direction:column;align-items:flex-end}
  .yp-hero-index{position:relative!important;right:auto!important;top:auto!important;width:min(350px,100%)!important}
  .yp-hero-index{order:1}
  .yp-hero-title{order:2;position:relative!important;left:auto!important;bottom:auto!important;align-self:flex-start;margin-top:18px;max-width:100%!important}
  .yp-collage{height:calc(640px * .62)!important}
  .yp-collage-inner{transform:scale(.62)}
  .yp-gallery-body{grid-template-columns:1fr!important;gap:18px!important}
  .yp-gallery-aside{border-right:none!important;padding-right:0!important;border-bottom:1px dashed var(--ink);padding-bottom:12px}
}
@media (max-width:560px){
  .yp-hide-sm{display:none}
  :root{--gutter-page:16px}
  .yp-hero{padding-top:58px}
  .yp-hero-title{max-width:100%!important}
  .yp-hero-title h1>div>div{font-size:clamp(30px,9.4vw,48px)!important}
  .yp-bigsign{padding:20px 16px 32px!important}
  .yp-bigsign a{box-shadow:10px 10px 0 var(--paper)!important}
  .yp-collage{height:calc(640px * .35)!important}
  .yp-collage-inner{transform:scale(.35)}
  .yp-gallery-hero{height:190px!important}
  .yp-gallery-hero h1,.yp-gallery-hero h1 *{font-size:clamp(56px,19vw,110px)!important}
  .yp-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 10px!important}
  .yp-lineup-title h1,.yp-lineup-title h1 *{font-size:clamp(56px,20vw,150px)!important;letter-spacing:.1em!important}
  .yp-setrow{min-height:60px!important}
  .yp-header-bar{gap:8px!important}
  .yp-nav{gap:12px!important}
  .yp-rsvp{padding:28px 16px!important}
  .yp-rsvp-stack>div{font-size:clamp(34px,10vw,52px)!important}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;animation-iteration-count:1!important}}

/* Performance: lightweight page switch (no full-page filter), pause animations that are off screen,
   keep heavy art sections in their own paint boundary, and give the sticky header its own layer. */
.yp-page{animation:yp-page-on 280ms steps(5) backwards}
@keyframes yp-page-on{0%{opacity:0;clip-path:inset(49% 0 49% 0)}60%{opacity:1;clip-path:inset(20% 0 20% 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
.yp-off,.yp-off *{animation-play-state:paused!important}
.yp-hero,.yp-collage,.yp-bigsign,.yp-gallery-hero,.yp-rsvp,.yp-page-main{contain:paint}
header{will-change:transform;backface-visibility:hidden}

/* Rendering stability: animations *inside* an SVG force the browser to redraw the entire SVG every frame,
   which on large/retina desktop screens exhausts GPU tile memory and shows up as black or missing blocks.
   Keep the one-time explosion, drop the endless per-line flicker and group drift, and let the whole SVG
   move as a single composited layer for the mouse parallax. */
svg line{animation:none!important}
svg g[style*="y2k-drift"]{animation:none!important}
svg[viewBox="0 0 1000 700"]{will-change:transform;transform:scale(1.06)}
.yp-collage{content-visibility:auto;contain-intrinsic-size:auto 640px}