/* v17: listening labels and three personal invitations.
   Text stays in HTML. Physical objects stay attached to their own link. */
.music-scene { min-height:0; aspect-ratio:auto; }
.music-stage { position:relative; isolation:isolate; min-height:clamp(0px,58vw,835.2px); }
.music-stage::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:9% 9% 7% 11%; background:#f3ecdf;
  clip-path:polygon(1% 2%,99% 0,98% 97%,74% 99%,49% 97%,23% 100%,0 97%);
}
.music-intro h2 em,.little-copy h2 em { color:#9d6177; }
.song-copy>span { color:#6e5b57; }
.ep-print>.hand,.shopping-print figcaption { color:#715c56; }
.music-service-note { position:relative; z-index:3; width:72%; margin:0 auto; padding:4px 0 42px; }
.music-service-note>p { color:#f3ecdf; font-size:32px; line-height:1.1; margin:0 0 14px 7px; }
.music-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.music-service {
  position:relative; isolation:isolate; min-width:0; min-height:80px;
  display:flex; align-items:center; gap:13px; padding:18px 22px;
  color:#382b2d; background:url('../assets/perf/paper-wide-v1.webp') center/100% 100% no-repeat;
  filter:drop-shadow(1px 4px 3px #24192130);
  transition:transform .18s ease,filter .18s ease;
}
.music-service--spotify { transform:rotate(-1.8deg); }
.music-service--apple { transform:rotate(.8deg); }
.music-service--yandex { transform:rotate(-.7deg); }
.music-service>img { width:24px; height:24px; flex:none; }
.music-service>span { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.music-service strong { font-size:17px; line-height:1.2; letter-spacing:-.03em; font-weight:600; }
.music-service small { font-size:12px; line-height:1.2; color:#655451; }
.music-service>.icon { width:16px; height:16px; color:#654955; }
.music-service:hover { transform:translateY(-3px) rotate(0); filter:drop-shadow(1px 7px 4px #24192140); }
.music-service:focus-visible { outline:3px solid #392532; outline-offset:4px; }

.footer-v17 { display:block; min-height:0; padding:55px var(--gutter) 25px; margin-top:-8px; background:#2b1722 url('../assets/perf/plum-soft-desktop-v1.webp') center/cover no-repeat; }
.footer-v17 .footer-copy { padding:0; }
.footer-v17 .footer-copy h2 { font-size:clamp(44px,5.3vw,75px); white-space:normal; }
.footer-invitation { font-size:clamp(17px,1.5vw,21px); line-height:1.4; color:#e9dddc; margin-top:15px; letter-spacing:-.02em; }
.footer-v17 .social-keepsakes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; width:auto; max-width:none; margin-top:30px; }
.footer-v17 .social-card {
  display:flex; flex-direction:column; min-width:0; gap:0; padding:0 8px 8px;
  position:relative; font-size:inherit; color:#382b2d; line-height:1.2;
  transition:transform .2s ease; text-decoration:none;
}
.social-object { height:205px; display:flex; align-items:flex-end; justify-content:center; padding:0 15px; position:relative; z-index:2; pointer-events:none; }
.social-object img { width:auto; height:auto; max-height:195px; max-width:245px; object-fit:contain; }
.social-card--tiktok .social-object img { max-height:210px; max-width:175px; }
.social-card--facebook .social-object img { max-width:190px; max-height:180px; }
.social-label {
  position:relative; display:block; width:100%; min-height:137px;
  padding:24px 28px 26px; margin-top:-8px;
  background:url('../assets/perf/paper-wide-v1.webp') center/100% 100% no-repeat;
  filter:drop-shadow(1px 5px 4px #100b164d);
}
.social-title { font-size:clamp(22px,2.1vw,30px); line-height:1.15; letter-spacing:-.04em; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer-v17 .social-title .icon { width:20px; height:20px; color:#72525f; }
.social-caption { display:block; margin-top:10px; font-size:27px; line-height:1.05; color:#72525f; }
.social-card--tiktok .social-label { transform:rotate(-2deg); }
.social-card--youtube .social-label { transform:rotate(.8deg); }
.social-card--facebook .social-label { transform:rotate(-1deg); }
.footer-v17 .social-card:hover { color:#382b2d; transform:translateY(-4px); }
.footer-v17 .social-card:focus-visible { outline:3px solid #e4b4c3; outline-offset:5px; border-radius:4px; }
.footer-signoff { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:25px; }
.footer-v17 .signature { margin:0; font-size:72px; }
.footer-v17 .key-tag-wrap { position:relative; width:260px; max-width:50%; height:auto; aspect-ratio:1586/992; margin:0; transform:rotate(3deg); flex:none; container-type:inline-size; }
.footer-v17 .key-tag-wrap>.hand { left:46%; top:38%; width:45%; font-size:18px; font-size:7cqi; line-height:.95; white-space:normal; transform:rotate(10deg); color:#655451; }
.footer-v17 .key-tag-wrap .tag-line { display:block; white-space:nowrap; }
.footer-v17 .key-tag-wrap .tag-line--last { padding-left:3%; }
.footer-v17 .key-tag-wrap .heart { width:15px; height:19px; }
.footer-utility { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; border-top:1px solid #f3ecdf29; padding-top:10px; font-size:13px; line-height:1.3; color:#e0cdd5; }
.footer-utility a { display:flex; align-items:center; gap:8px; min-height:44px; }
.footer-utility a:hover { color:#f3ecdf; text-decoration:underline; text-underline-offset:4px; }
.personal-note,.key-tag-wrap { touch-action:manipulation; }

@media(max-width:1100px) and (min-width:701px) {
  .music-service-note { width:80%; padding-bottom:32px; }
  .music-services { gap:10px; }
  .music-service { gap:9px; padding:17px 16px; }
  .music-service strong { font-size:15px; }
  .music-service>.icon { width:14px; height:14px; }
  .footer-v17 .social-keepsakes { gap:14px; }
  .social-object { height:170px; padding:0 5px; }
  .social-object img { max-width:190px; max-height:155px; }
  .social-card--tiktok .social-object img { max-width:125px; max-height:165px; }
  .social-card--facebook .social-object img { max-width:150px; max-height:145px; }
  .social-label { padding:21px 19px; min-height:137px; }
  .social-caption { font-size:24px; }
}
@media(max-width:700px) {
  .music-stage { min-height:0; aspect-ratio:846/1859; }
  .music-stage::before { inset:5% 7% 3% 7%; clip-path:polygon(2% 1%,98% 0,99% 98%,72% 100%,48% 98%,24% 100%,1% 98%); }
  .music-scene { margin-bottom:0; }
  .music-service-note { width:auto; margin:0 24px; padding:15px 0 42px; }
  .music-service-note>p { font-size:29px; margin-left:6px; margin-bottom:13px; }
  .music-services { grid-template-columns:1fr; gap:7px; max-width:420px; margin-inline:auto; }
  .music-service { min-height:74px; padding:17px 24px; gap:15px; }
  .music-service strong { font-size:17px; }
  .music-service small { font-size:12px; }
  .music-service--spotify { transform:rotate(-1deg); }
  .music-service--apple { transform:rotate(.7deg); }
  .music-service--yandex { transform:rotate(-.5deg); }
  .music-service>.icon { width:17px; height:17px; }
  .footer-v17 { padding:40px 24px 15px; margin-top:-5px; background-image:url('../assets/perf/plum-soft-mobile-v1.webp'); }
  .footer-v17 .footer-copy h2 { font-size:45px; }
  .footer-invitation { font-size:17px; margin-top:12px; }
  .footer-v17 .social-keepsakes { display:flex; flex-direction:column; gap:14px; margin-top:25px; width:auto; max-width:none; }
  .footer-v17 .social-card { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:0; min-height:124px; padding:0; }
  .social-object { height:124px; padding:0; align-items:center; }
  .social-object img { max-width:122px; max-height:112px; }
  .social-card--tiktok .social-object img { max-width:108px; max-height:135px; }
  .social-card--facebook .social-object img { max-width:116px; max-height:111px; }
  .social-label { min-height:120px; margin:0; padding:21px 19px 20px 23px; }
  .social-title { font-size:23px; gap:8px; }
  .footer-v17 .social-title .icon { width:17px; height:17px; }
  .social-caption { font-size:23px; margin-top:8px; line-height:1.02; }
  .footer-signoff { margin-top:18px; gap:20px; }
  .footer-v17 .signature { font-size:62px; }
  .footer-v17 .key-tag-wrap { width:210px; max-width:62%; margin:0; }
  .footer-v17 .key-tag-wrap>.hand { left:46%; top:38%; width:45%; font-size:15px; font-size:clamp(13px,7cqi,15px); }
  .footer-utility { margin-top:12px; font-size:12px; }

  /* iOS Safari can inflate text inside narrow visual columns. Keep each live
     caption tied to its photographed paper instead of letting it resize the
     grid or drift beyond the prop. */
  .little-scene .personal-note {
    min-width:0; max-width:100%; justify-self:end; contain:inline-size;
  }
  .little-scene .pink-note {
    width:100%; max-width:100%; height:auto; padding:0;
    aspect-ratio:1448/1086; container-type:inline-size;
  }
  .little-scene .pink-note-material {
    inset:0; width:100%; max-width:100%; height:100%; object-fit:contain;
  }
  .little-scene .pink-note>p {
    position:absolute; left:14%; top:39%; width:74%; max-width:none; margin:0;
    font-size:18px; font-size:clamp(16px,11.2cqi,19px); line-height:1.02; white-space:nowrap;
  }
  .footer-v17 .footer-signoff { width:100%; min-width:0; }
  .footer-v17 .key-tag-wrap { flex:0 1 210px; min-width:0; }
  .footer-v17 .key-tag-wrap>.hand {
    max-width:none; line-height:.95;
  }
  .footer-v17 .footer-utility a { font-size:12px; white-space:nowrap; }
}
@media(max-width:380px) {
  .music-service-note { margin-inline:21px; }
  .footer-v17 { padding-inline:21px; }
  .footer-v17 .social-card { grid-template-columns:96px minmax(0,1fr); }
  .social-card--tiktok .social-object img { max-width:94px; max-height:120px; }
  .social-object img { max-width:106px; }
  .social-card--facebook .social-object img { max-width:100px; }
  .social-label { padding-inline:18px; }
  .social-title { font-size:21px; }
  .social-caption { font-size:22px; }
  .footer-v17 .key-tag-wrap>.hand { font-size:13px; font-size:clamp(13px,7cqi,15px); }
}
@media(prefers-reduced-motion:reduce) {
  .music-service,.footer-v17 .social-card { transition:none; }
  .music-service:hover,.footer-v17 .social-card:hover { transform:none; }
}