/* Portraits are the composition; there is no enclosing white heart panel. */
.wall { display:flex; flex-direction:column; align-items:center; padding:25px 24px 18px; background:radial-gradient(ellipse at 8% 15%,#e8f0f9b3,transparent 55%),radial-gradient(ellipse at 92% 75%,#f7d3df8c,transparent 55%),#fff8f9; }
.wall .ambient-decor { opacity:.3; }
.wall-heading { flex-shrink:0; text-align:center; position:relative; z-index:2; }
.wall-heading p { margin:0 0 9px; color:#b58c9b; font-size:9px; letter-spacing:3px; }
.wall-heading h2 { margin:0; font:500 30px/1.3 "Songti SC","STSong",serif; color:#98536e; letter-spacing:4px; }
.heart-wall { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; width:min(100%,1100px); gap:12px; z-index:1; }
.heart-scene { width:min(calc(50% - 6px),calc(100svh - 150px)); aspect-ratio:1; position:relative; flex-shrink:0; container-type:inline-size; }
.heart-label { position:absolute; top:0; left:50%; transform:translateX(-50%); color:#b1788c; font-size:2cqw; line-height:1.4; letter-spacing:.25cqw; white-space:nowrap; }
.heart-label::before { content:""; display:inline-block; width:.6cqw; height:.6cqw; border-radius:50%; margin-right:1cqw; background:#d9a6b7; vertical-align:middle; }
.is-male .heart-label { color:#869eae; }
.is-male .heart-label::before { background:#a6becb; }
.heart-person { position:absolute; display:block; min-width:0; padding:0; overflow:hidden; border:1px solid #ffffffeb; border-radius:.7cqw; background:#f1e6eb; box-shadow:0 .5cqw 1.4cqw #84576d15; transition:opacity .8s var(--soft-ease) var(--tile-delay,0ms),translate .95s var(--soft-ease) var(--tile-delay,0ms),scale .25s var(--soft-ease),box-shadow .25s ease; }
.heart-person img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.heart-person strong { position:absolute; left:0; right:0; bottom:0; display:block; margin:0; padding:1.3cqw .3cqw .5cqw; font-size:1.4cqw; font-weight:400; line-height:1.2; color:#fff; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:linear-gradient(transparent,#3f293b9e); }
.wall:not(.is-visible) .heart-person { opacity:0; translate:0 8px; }
.heart-person:active { scale:1.04; }
@media(hover:hover) { .heart-person:hover { scale:1.12; z-index:3; box-shadow:0 4px 18px #84576d40; } }
.heart-person:focus-visible { z-index:4; outline:2px solid #b96d8d; outline-offset:2px; }
.wall-footer { width:min(100%,1100px); position:relative; flex-shrink:0; padding-top:6px; text-align:center; z-index:1; }
.wall-footer p { margin:0; font-size:9px; letter-spacing:2px; color:#b393a2; }
.wall-footer > span { position:absolute; right:0; top:5px; color:#c3a9b5; font-size:9px; letter-spacing:1px; }
.wall-footer i { font-style:normal; opacity:.5; margin:0 4px; }
.details-dialog .details-portrait { display:block; width:100%; height:190px; max-height:28svh; margin-top:16px; border-radius:12px; background:#f4e6ed; object-fit:contain; }
@media(max-width:700px) {
  .wall { padding:max(19px,env(safe-area-inset-top)) 12px max(13px,env(safe-area-inset-bottom)); }
  .wall-heading p { margin-bottom:6px; font-size:7px; letter-spacing:2px; }
  .wall-heading h2 { font-size:25px; letter-spacing:3px; }
  .heart-wall { flex-direction:column; gap:9px; }
  .heart-scene { width:min(calc(100vw - 36px),calc((100svh - 135px) / 2)); }
  .heart-label { font-size:2.4cqw; }
  .wall-footer p { font-size:8px; letter-spacing:1.5px; }
  .wall-footer > span { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
  .screen:not(.is-visible) .hero-copy > *,
  .screen:not(.is-visible) :is(.guests-header,.card-stage,.card-navigation,.next-screen-cue,.wall-heading,.heart-wall,.wall-footer),
  .wall:not(.is-visible) .heart-person { opacity:1; translate:none; }
}