/* Every invitation cover opens the same fitted preview dialog. The solid
   control stays legible independently of the invitation artwork beneath it. */
.hero .hero-cover::after{display:none}
.hero .hero-cover .hero-play,
.work-grid .work-card .work-cover-cta{
  inset-inline:10px;bottom:20px;width:auto;max-width:none;margin:0;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:9px;min-height:44px;padding:9px 10px;border:1px solid var(--theme-rule,#d6bfc0);
  border-radius:9px;background:var(--theme-surface,#fffdfa);color:var(--theme-accent,#60212c);
  box-shadow:0 3px 12px var(--theme-shadow-a26,#24181b26);font:500 12px/1.5 var(--body);
  text-align:center;pointer-events:none;z-index:2;
}
.hero .hero-cover .hero-play .play-circle,
.work-grid .work-card .work-cover-cta .play-circle{
  display:grid;place-items:center;flex:none;width:27px;height:27px;
  border:0;background:var(--theme-brand-deep,#60212c);color:var(--theme-on-brand,#fffdfa);box-shadow:none;
}
.hero .hero-cover .hero-play .ui-icon,
.work-grid .work-card .work-cover-cta .ui-icon{width:13px;height:13px;fill:currentColor;stroke:none}
.hero-cover:focus-visible,.work-cover:focus-visible{outline:3px solid var(--theme-accent,#60212c);outline-offset:-4px}
.hero-cover:focus-visible .hero-play,.work-cover:focus-visible .work-cover-cta{box-shadow:0 0 0 3px var(--theme-page,#fffdfa),0 0 0 5px var(--theme-accent,#60212c)}

/* Card content can wrap freely. Row siblings share the same lower edge, with
   the complete tags and action group anchored below the longest description. */
.work-page .work-grid{align-items:stretch}
.work-page .work-grid .work-card{display:flex;flex-direction:column}
.work-page .work-grid .work-info{flex:1;display:flex;flex-direction:column;min-width:0}
.work-page .work-grid .work-tags{margin-block-start:auto;padding-block-start:12px}
.work-page .work-grid .work-actions{margin-block-start:18px}
@media(max-width:760px){
  .collection .work-grid{align-items:stretch}
  .collection .work-grid .work-card{display:flex;flex-direction:column}
  .collection .work-grid .work-info{flex:1;display:flex;flex-direction:column;min-width:0}
  .collection .work-grid .work-tags{margin-block-start:auto;padding-block-start:12px}
  .collection .work-grid .work-actions{margin-block-start:15px}
  /* The cover button remains the full phone-sized touch target. Its decorative
     cue follows the miniature screen width instead of becoming another card. */
  .hero .hero-live-media,.work-grid .work-media{container-type:inline-size}
  .hero .hero-cover .hero-play,
  .work-grid .work-card .work-cover .work-cover-cta{
    inset-inline:0;bottom:clamp(12px,7cqi,19px);width:max-content;
    max-width:calc(100% - 12px);margin-inline:auto;min-height:0;
    flex-direction:row;gap:clamp(4px,2.5cqi,7px);padding:4px 6px;
    border-radius:7px;font-size:clamp(8px,5.5cqi,11px);line-height:1.4;
  }
  .hero .hero-cover .hero-play .play-circle,
  .work-grid .work-card .work-cover .work-cover-cta .play-circle{
    width:clamp(14px,9cqi,21px);height:clamp(14px,9cqi,21px);
  }
  .hero .hero-cover .hero-play .ui-icon,
  .work-grid .work-card .work-cover .work-cover-cta .ui-icon{
    width:clamp(7px,4.5cqi,10px);height:clamp(7px,4.5cqi,10px);
  }
}
@media(hover:hover) and (pointer:fine){
  .hero-cover:hover .hero-play,.work-cover:hover .work-cover-cta{background:var(--theme-raised,#f7eeeb);border-color:var(--theme-accent,#60212c)}
}

/* Selection is claret; preview stays ivory. Motion decorates the border/play
   badge only, so labels, hit areas and neighbouring cards never shift. */
.work-grid .work-actions .preview-action,
.room-actions .preview-action{position:relative;background:var(--theme-surface,#fffdfa);color:var(--theme-accent,#60212c);border-color:var(--theme-rule,#b88c94);isolation:isolate}
.work-grid .work-actions .button[data-design-order]{background:var(--theme-brand,#60212c);border-color:var(--theme-accent,#60212c);color:var(--theme-on-brand,#fffdfa)}
.work-grid .work-actions .preview-action .ui-icon.play{fill:currentColor;stroke:none;width:15px;height:15px}
.preview-action::after{content:'';position:absolute;inset:-1px;border:1px solid var(--theme-accent,#8d4b5b);border-radius:inherit;pointer-events:none;opacity:0;transform:scale(1)}
.hero-play .play-circle,.work-cover-cta .play-circle{position:relative}
.hero-play .play-circle::after,.work-cover-cta .play-circle::after{content:'';position:absolute;inset:-2px;border:1.5px solid var(--theme-accent,#60212c);border-radius:50%;pointer-events:none;opacity:0;transform:scale(1)}
.preview-action[data-preview-cue]::after{animation:preview-border-breathe 3.2s cubic-bezier(.25,.6,.3,1) infinite;animation-play-state:paused}
.hero-play[data-preview-cue] .play-circle::after,.work-cover-cta[data-preview-cue] .play-circle::after{animation:preview-play-breathe 3.2s cubic-bezier(.25,.6,.3,1) infinite;animation-play-state:paused}
html[data-preview-motion=on] .preview-action[data-preview-cue]::after,
html[data-preview-motion=on] .hero-play[data-preview-cue] .play-circle::after,
html[data-preview-motion=on] .work-cover-cta[data-preview-cue] .play-circle::after{animation-play-state:running}
body:has(dialog[open]) .preview-action::after,
body:has(dialog[open]) .hero-play .play-circle::after,
body:has(dialog[open]) .work-cover-cta .play-circle::after{animation-play-state:paused!important}
.preview-action:focus-visible::after,.hero-cover:focus-visible .play-circle::after,.work-cover:focus-visible .play-circle::after{animation:none!important;opacity:0}
@keyframes preview-border-breathe{0%,8%{opacity:0;transform:scale(1)}25%{opacity:.42;transform:scale(1.006,1.018)}56%,100%{opacity:0;transform:scale(1.025,1.08)}}
@keyframes preview-play-breathe{0%,8%{opacity:0;transform:scale(.96)}22%{opacity:.62;transform:scale(1.04)}55%,100%{opacity:0;transform:scale(1.38)}}
@media(hover:hover) and (pointer:fine){
 .work-grid .work-actions .preview-action:hover,.room-actions .preview-action:hover{background:var(--theme-raised,#f7eeeb);border-color:var(--theme-accent,#60212c);color:var(--theme-accent,#60212c)}
 .work-grid .work-actions .button[data-design-order]:hover{background:var(--theme-brand,#481821);border-color:var(--theme-accent,#481821);color:var(--theme-on-brand,#fffdfa)}
 .preview-action:hover::after,.hero-cover:hover .play-circle::after,.work-cover:hover .play-circle::after{animation:none!important;opacity:0}
}
@media(prefers-reduced-motion:reduce){.preview-action::after,.hero-play .play-circle::after,.work-cover-cta .play-circle::after{animation:none!important;opacity:0}}
/* Continue the original wide/narrow, narrow/wide editorial rhythm. */
@media(min-width:761px){
 .collection #workGrid>.work-card:nth-child(4n+1){grid-column:span 7;padding-top:0}
 .collection #workGrid>.work-card:nth-child(4n+2){grid-column:span 5;padding-top:120px}
 .collection #workGrid>.work-card:nth-child(4n+3){grid-column:span 5;padding-top:0}
 .collection #workGrid>.work-card:nth-child(4n+4){grid-column:span 7;padding-top:80px}
 .collection #workGrid>.work-card .work-paper{width:65%;max-width:255px}
 .collection #workGrid>.work-card:is(:nth-child(4n+1),:nth-child(4n+4)) .work-paper{width:58%;max-width:295px}
 .collection #workGrid>.work-card .work-visual.is-live .work-paper{width:73%;max-width:310px}
 .collection #workGrid>.work-card .work-actions{flex-direction:row}
 .collection #workGrid>.work-card .work-actions .button{flex:1}
}
@media(min-width:761px) and (max-width:1100px){
 .collection #workGrid>.work-card .work-paper{width:73%}
 .collection #workGrid>.work-card:is(:nth-child(4n+1),:nth-child(4n+4)) .work-paper{width:65%}
 .collection #workGrid>.work-card .work-visual.is-live .work-paper{width:73%}
 .collection #workGrid>.work-card .work-actions{flex-direction:column}
 .collection #workGrid>.work-card .work-actions .button{flex:auto}
}