:root{--bg:#271c16;--panel:#382920;--ink:#fff1dc;--muted:#d6bfa6;--accent:#f0b86f;--line:#e3b78640;--accent-glow:#f0b86f99;--ink-soft:#efd6b5;--button:#edb268;--button-edge:#956536;--walnut:#774826;--walnut-edge:#4a2e17;--cream-ink:#382719;--cream-muted:#746149;--cream-accent:#96602d;--card:#fff3dc;--card-edge:#baa27d;--price-edge:#b48c5f;--pill-line:#ac805655;--cream-line:#795b3544}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 'DM Sans',sans-serif;overflow-x:clip}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:6px}img{max-width:100%;display:block}img[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;line-height:.99;letter-spacing:-.035em}h1{font-size:clamp(4.4rem,6.8vw,7.4rem)}h2{font-size:clamp(3rem,4.8vw,5.5rem)}h3{font-size:1.35rem;font-weight:500;line-height:1.3}em{color:var(--accent);font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}p{color:var(--muted)}.wrap{width:min(1320px,calc(100% - 112px));margin:auto}.section-pad{padding-block:105px}.eyebrow{font-size:.78rem;letter-spacing:.17em;font-weight:600;color:var(--accent);margin-bottom:24px}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--ink);color:var(--bg);padding:12px}.skip:focus{top:10px}header{position:absolute;inset:0 0 auto;z-index:5;display:flex;gap:30px;align-items:center;padding:24px 48px;background:linear-gradient(#1b120fd9,transparent)}.brand{display:flex;align-items:center;gap:12px;font-size:.92rem;font-weight:600;letter-spacing:.1em;line-height:1.4}.brand img{width:46px;height:46px;object-fit:contain}.brand small{display:block;font-size:.63rem;letter-spacing:.13em;color:#e2c7a8;margin-top:4px}nav{display:flex;gap:28px;font-size:.88rem;margin-left:auto}nav a:hover,.text-link:hover,footer a:hover{color:var(--accent)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--button);color:#291c14;border-radius:3px;padding:17px 24px;font-size:.94rem;font-weight:700;box-shadow:0 6px 0 var(--button-edge),0 16px 25px #0004;transition:transform .3s,box-shadow .3s}.button span{font-size:1.4rem}.button.small{padding:11px 18px;font-size:.83rem}.text-link{border-bottom:1px solid #ecd0aa88;padding-bottom:7px;font-size:.95rem}.hero{min-height:940px;min-height:max(850px,100svh);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;padding:155px 0 125px;--hero-progress:0}.hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;z-index:-3;transform:translateY(calc(var(--hero-progress)*95px)) scale(calc(1.04 + var(--hero-progress)*.1));will-change:transform}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#190f0ef0 0%,#211610bb 31%,#21171024 70%),linear-gradient(0deg,var(--bg),transparent 30%)}.hero-copy{position:relative;z-index:1;pointer-events:none}.hero-copy a{pointer-events:auto}.hero h1{max-width:760px;text-shadow:0 3px 35px #0004}.intro{font-size:1.02rem;max-width:560px;color:#efdbc2;margin-top:28px;line-height:1.8}.actions{display:flex;gap:28px;align-items:center;margin-top:33px}.fine{margin-top:22px;font-size:.8rem;color:#e0bd96}.hero-postcard{position:absolute;z-index:2;right:5%;bottom:8%;width:240px;background:#f4e3c7;padding:10px 10px 15px;box-shadow:0 25px 50px #0009;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(7deg);transition:transform .2s}.hero-postcard img{aspect-ratio:1.6;object-fit:cover}.hero-postcard span{display:block;font-family:Georgia,serif;color:#493221;font-size:1rem;line-height:1.35;padding:12px 9px 0}.hero-postcard em{color:#835525}.hero-postcard b{float:right;font-size:1.4rem}.scroll-cue{position:absolute;bottom:30px;left:56px;font-size:.7rem;letter-spacing:.15em;color:#e4c196;display:flex;gap:20px;align-items:center}.scroll-cue span{font-size:1.5rem}.proof{display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr;padding-block:36px;gap:30px;border-bottom:1px solid var(--line)}.proof div{border-right:1px solid var(--line)}.proof strong{display:block;font-size:2rem;font-family:Georgia,serif;font-weight:400;color:#f2c98e}.proof span{font-size:.8rem;display:block;color:var(--muted)}.proof div:nth-child(3) strong{font-size:1.5rem;letter-spacing:.1em;margin-block:7px}.proof small{font-size:.72rem;letter-spacing:.12em}.proof b{display:block;font-size:1.8rem;line-height:1.5}.proof b span{font-size:.72rem}.home-story{height:165vh;position:relative;margin-top:50px;--journey:0}.home-sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;display:flex;align-items:center}.porch-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;transform:scale(calc(1.04 + var(--journey)*.22)) translateX(calc(var(--journey)*-30px));will-change:transform}.scene-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#191714c9,#19171444 80%),linear-gradient(0deg,#271c1699,transparent 45%)}.statement{transform:translateY(calc(var(--journey)*-65px));will-change:transform}.statement h2{font-size:clamp(4rem,7vw,7.5rem);max-width:850px}.statement p:not(.eyebrow){margin-top:30px;color:#f4dcc0;max-width:550px;font-size:1.05rem}.scene-caption{position:absolute;bottom:35px;right:40px;font-size:.7rem;letter-spacing:.15em;color:#f0d0ac}.occasion-section{padding-block:55px;text-align:center}.occasions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.occasions a{border:1px solid var(--pill-line);border-radius:3px;padding:9px 18px;font-size:.88rem;transition:background .25s,transform .25s}.occasions a:hover{background:#eeb06b;color:#24180f;transform:translateY(-4px)}.listen{background:#eedfc6;color:var(--cream-ink);position:relative}.listen .eyebrow{color:#825020}.listen em{color:var(--cream-accent)}.listen p{color:var(--cream-muted)}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:55px}.listen .text-link{border-color:#8b623e77}.song-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px 30px;perspective:1400px}.song{background:var(--card);padding:12px 12px 24px;box-shadow:6px 8px 0 var(--card-edge),10px 18px 30px #57351822;transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s,box-shadow .3s}.song:nth-child(3n+2){margin-top:25px;margin-bottom:-25px}.song:hover{box-shadow:8px 15px 0 var(--card-edge),15px 28px 35px #57351844}.song-image{position:relative;aspect-ratio:1.45;overflow:hidden;background:#3c3025}.song-image img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .6s}.song:hover img{transform:scale(1.1)}.art-title{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px;color:#ffedcf;font:2rem/1.2 Georgia,serif;background:linear-gradient(145deg,#5a4833,#251e18)}.play{position:absolute;bottom:14px;right:14px;z-index:2;background:#f2c185;color:#342218;border-radius:50%;width:45px;height:45px;display:grid;place-items:center;padding-left:3px;box-shadow:0 4px 15px #0005}.song small{display:block;margin:20px 12px 8px;font-size:.72rem;color:#965c28;text-transform:uppercase;letter-spacing:.12em}.song h3{margin-inline:12px;font-family:Georgia,serif;font-size:1.45rem}.song p{margin:12px 12px 0;font-size:.9rem}.keepsake{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.memory-photo{margin:0 0 45px;position:relative;transform:rotate(-4deg);box-shadow:0 18px 35px #0006;border:9px solid #e7cfaa;max-width:620px}.memory-photo img{aspect-ratio:1.65;object-fit:cover}.memory-photo span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#21140ee0);padding:30px 18px 15px;font:italic 1.15rem Georgia,serif;color:#ffe9cb}.keepsake-copy p:not(.eyebrow){margin:25px 0}.keepsake-stack article{background:#4b3525;border:1px solid #af80504d;padding:36px;border-radius:3px;box-shadow:0 20px 30px #0005;position:relative;transform:rotate(5deg);margin-top:25px}.keepsake-stack article:nth-child(2){background:#61472f;transform:rotate(-4deg);margin-left:-20px}.keepsake-stack article:nth-child(3){background:#735337;transform:rotate(3deg)}.keepsake-stack span{font-size:.73rem;letter-spacing:.1em;color:#f1c98e}.keepsake-stack h3{margin:16px 0;font:1.7rem Georgia,serif}.keepsake-stack p{font-size:.96rem;color:#e8d4b9}.process{border-top:1px solid var(--line)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin-top:50px}.steps article{border-top:1px solid var(--line);padding-top:25px}.steps span{font:italic 3.3rem Georgia,serif;color:var(--accent)}.steps h3{font:1.7rem Georgia,serif;margin:18px 0}.steps p{font-size:.98rem}.pricing{background:#64432c;color:#ffedd2;box-shadow:inset 0 1px #ba855555}.price-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.price-layout>div>p:not(.eyebrow){margin-top:30px;color:var(--ink-soft)}.memorial{margin-top:45px;padding-top:25px;border-top:1px solid #dba77355;max-width:440px}.memorial h3{font:1.6rem Georgia,serif;margin-bottom:14px}.memorial p{color:var(--ink-soft)}.price-card{background:#f5e7cd;color:#382a1d;padding:38px;border-radius:3px;box-shadow:13px 16px 0 var(--price-edge),25px 30px 45px #1a0b0855;transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(2deg);transition:transform .3s}.price-title{display:flex;justify-content:space-between;gap:25px;font-size:.71rem;letter-spacing:.09em}.amount{font:6.5rem/1.5 'Libre Caslon Display',Georgia,serif;letter-spacing:-.065em}.amount small{font:1rem 'DM Sans',sans-serif;letter-spacing:0}.price-card ul{padding:20px 0;margin:0 0 15px;border-top:1px solid var(--cream-line);list-style:none}.price-card li{position:relative;padding:6px 0 6px 27px;font-size:.93rem}.price-card li:before{content:'✓';position:absolute;left:0;color:#956128}.price-card .button{width:100%;background:var(--walnut);color:#fff1d8;box-shadow:0 6px 0 var(--walnut-edge)}.price-card .guarantee{font-size:.82rem;color:#70593e;text-align:center;margin:25px 0}.addons{border-top:1px solid var(--cream-line);padding-top:16px;font-size:.84rem;line-height:2}.addons b{float:right}.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}.quotes figure{padding:30px;margin:0;background:#38281e;border:1px solid var(--line)}.quotes figure>span{color:#e4af66;letter-spacing:.15em}blockquote{margin:25px 0;font:1.4rem/1.5 Georgia,serif}figcaption{font-size:.95rem}figcaption small{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.1em}.about{display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:100px;border-top:1px solid var(--line)}.portrait{position:relative;max-width:470px;transform:rotate(-5deg);border:12px solid #dcc49f;box-shadow:20px 25px 0 #755238,25px 35px 40px #0007}.portrait img{width:100%;height:540px;object-fit:cover;object-position:center 30%}.portrait span{position:absolute;bottom:18px;left:15px;right:15px;background:#261a10d9;color:#f0d4b3;padding:12px;font-size:.7rem;letter-spacing:.1em;text-align:center}.about p:not(.eyebrow){margin-top:24px}.about .pullquote{font:italic 1.6rem/1.45 Georgia,serif;color:var(--accent);margin-bottom:25px}.faq{display:grid;grid-template-columns:1fr 1fr;gap:90px;border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{padding:25px 30px 25px 0;cursor:pointer;list-style:none;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:0;color:var(--accent);font-size:1.5rem;top:19px}details[open] summary:after{content:'−'}details p{padding-bottom:25px;font-size:.95rem}.closing{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding-block:110px;min-height:620px;display:flex;align-items:center}.closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}.closing:after{content:'';position:absolute;inset:0;background:#24190cbf;z-index:-2}.closing h2{font-size:clamp(5rem,10vw,10rem);margin-bottom:40px}.closing p:last-child{margin-top:25px;color:#f4d7b0}footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:25px;padding-block:35px}footer>div{display:flex;gap:25px;font-size:.88rem}footer p{font-size:.8rem;width:100%}
/* Large arrivals and scroll depth, with fully visible static fallbacks. */
@media(prefers-reduced-motion:no-preference){.hero-copy .eyebrow{animation:arrive 1s both}.hero h1{animation:arrive 1.25s .12s both}.hero .intro,.hero .actions,.hero .fine{animation:arrive 1.3s .3s both}.hero-postcard{animation:postcard-in 1.6s .5s both}.scroll-cue span{animation:point-down 1.5s ease-in-out 3}.motion-ready .reveal{opacity:0;translate:0 100px;transition:opacity .95s var(--delay,0ms),translate 1.15s cubic-bezier(.2,.7,.15,1) var(--delay,0ms),transform .4s}.motion-ready .reveal.seen{opacity:1;translate:0 0}.motion-ready .keepsake-stack article{translate:100px 100px}.motion-ready .keepsake-stack article.seen{translate:0 0}.motion-ready .portrait{translate:-100px 50px}.motion-ready .portrait.seen{translate:0 0}@keyframes arrive{from{opacity:0;transform:translateY(65px)}to{opacity:1;transform:translateY(0)}}@keyframes postcard-in{from{opacity:0;translate:150px 80px;rotate:20deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes point-down{50%{transform:translateY(14px)}}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}header{padding-inline:32px;gap:20px}nav{gap:20px}.hero h1{font-size:6rem}.hero-postcard{width:210px;right:4%;bottom:10%}.keepsake,.price-layout,.about,.faq{gap:55px}.proof{gap:20px}.song-grid{gap:35px 22px}.song h3{font-size:1.25rem}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}header{padding:20px;flex-wrap:wrap;gap:10px}.brand{font-size:.75rem;gap:8px}.brand img{width:34px;height:34px}.brand small{font-size:.57rem}header .button{margin-left:auto;font-size:.72rem;padding:8px 12px;gap:12px}nav{order:3;width:100%;justify-content:center;gap:26px;margin:12px 0 0;font-size:.8rem}.hero{min-height:1080px;display:block;padding:160px 0 310px}.hero h1{font-size:clamp(3.9rem,12vw,5.7rem)}.hero-scene{object-position:65% center}.hero-shade{background:linear-gradient(90deg,#190e0cbd,#21161066),linear-gradient(0deg,var(--bg),transparent 35%)}.hero-copy .eyebrow{max-width:290px;font-size:.68rem}.intro{font-size:1rem;max-width:330px}.actions{flex-wrap:wrap;gap:25px}.fine{font-size:.8rem}.hero-postcard{width:200px;right:30px;bottom:75px}.scroll-cue{left:20px;bottom:22px;font-size:.62rem}.proof{grid-template-columns:1fr 1fr;gap:25px;padding-block:30px}.proof div:nth-child(2){border:0}.proof strong{font-size:1.8rem}.proof span{font-size:.74rem}.proof b{font-size:1.5rem}.home-story{height:145svh;margin-top:25px}.home-sticky{min-height:650px}.porch-scene{object-position:60% center}.statement h2{font-size:clamp(3.9rem,12vw,5.5rem)}.statement .eyebrow{font-size:.68rem;max-width:280px}.statement p:not(.eyebrow){font-size:.98rem;max-width:330px}.scene-caption{right:20px;left:20px;bottom:25px;font-size:.6rem}.section-pad{padding-block:70px}.occasion-section{padding-block:40px}.occasions{gap:9px}.occasions a{font-size:.8rem;padding:8px 12px}.section-head{align-items:flex-start;flex-direction:column;gap:25px;margin-bottom:35px}.song-grid{grid-template-columns:1fr 1fr;gap:32px 17px}.song{padding:8px 8px 20px;box-shadow:4px 6px 0 var(--card-edge)}.song:nth-child(3n+2){margin:0}.song:nth-child(even){margin-top:25px;margin-bottom:-25px}.song h3{font-size:1.15rem;margin-inline:5px}.song p{margin-inline:5px;font-size:.85rem}.song small{font-size:.65rem;margin-inline:5px;letter-spacing:.05em}.play{width:34px;height:34px;bottom:8px;right:8px;font-size:.85rem}.art-title{font-size:1.4rem;padding:15px}.keepsake,.price-layout,.about,.faq{grid-template-columns:1fr;gap:45px}.memory-photo{margin-top:20px;max-width:95%;margin-inline:auto}.memory-photo span{font-size:.95rem}.keepsake-stack{padding:0 10px}.keepsake-stack article{padding:30px;margin-top:18px}.keepsake-stack article:nth-child(2){margin-left:0}.steps{grid-template-columns:1fr;gap:25px;margin-top:35px}.steps article{padding-left:60px;position:relative}.steps span{position:absolute;left:0;top:25px;font-size:2.5rem}.steps h3{margin-top:10px}.price-card{padding:28px;transform:none;box-shadow:7px 9px 0 var(--price-edge)}.price-title{font-size:.63rem}.amount{font-size:5.8rem}.memorial{margin-top:30px}.quotes{grid-template-columns:1fr;gap:18px;margin-top:35px}.portrait{width:85%;margin:20px auto}.portrait img{height:450px}.about>div:last-child{margin-top:20px}.faq{gap:25px}.closing{min-height:580px;padding-block:80px}.closing h2{font-size:6rem}footer>div{gap:20px}.eyebrow{font-size:.7rem}.motion-ready .reveal{translate:0 65px}.motion-ready .portrait{translate:-35px 50px}.motion-ready .keepsake-stack article{translate:35px 65px}}
@media(max-width:390px){.song-grid{grid-template-columns:1fr}.song:nth-child(even){margin:0}.song h3{font-size:1.5rem}nav{gap:19px}.brand{font-size:.67rem}header .button{font-size:.67rem}.hero h1{font-size:3.8rem}.hero{min-height:1100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.home-story{height:auto}.home-sticky{position:relative}.hero-scene,.porch-scene,.statement{transform:none!important}.reveal{opacity:1!important;translate:none!important}}

.song-image .scene-thumb{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}

/* Phone layout: let content set the height; keep portraits out from behind text. */
@media (max-width: 760px) {
  header { position:relative; inset:auto; display:flex; flex-direction:column; align-items:stretch; gap:18px; padding:22px 20px 18px; background:var(--bg); border-bottom:1px solid var(--line); }
  header .brand { font-size:.85rem; gap:12px; }
  header .brand img { width:40px; height:40px; }
  header .brand small { font-size:.68rem; }
  header>.button { display:none; }
  /* Keep the tabs on one edge-to-edge row. Below ~318px four of them no longer
     fit at .875rem, so the size eases down rather than wrapping and stranding
     the last tab on a row of its own. */
  header nav { order:initial; margin:0; width:100%; display:flex; justify-content:space-between; flex-wrap:nowrap; gap:0 10px; font-size:clamp(.75rem, 4.4vw, .875rem); line-height:1.5; overflow-x:auto; scrollbar-width:none; }
  header nav::-webkit-scrollbar { display:none; }
  header nav a { padding:6px 0; white-space:nowrap; }
  .hero { min-height:0; padding:0 0 34px; display:flex; flex-direction:column; overflow:hidden; }
  .hero-scene { position:relative; inset:auto; z-index:0; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; object-position:center; transform:none; will-change:auto; }
  .hero-shade { display:none; }
  .hero-copy { padding-top:30px; pointer-events:auto; }
  .hero-copy .eyebrow { max-width:none; font-size:.75rem; line-height:1.7; letter-spacing:.1em; margin-bottom:20px; }
  .hero h1 { font-size:clamp(2.6rem,10vw,3.65rem); line-height:1.08; letter-spacing:-.025em; text-shadow:none; max-width:580px; }
  .hero h1 br { display:none; }
  .hero .intro { font-size:1rem; line-height:1.7; max-width:none; margin-top:24px; }
  .hero .intro br { display:none; }
  .hero .actions { display:flex; flex-direction:column; align-items:flex-start; gap:24px; margin-top:26px; }
  .hero .actions .button { width:100%; min-height:52px; }
  .hero .fine { line-height:1.7; margin-top:22px; }
  .hero-postcard { display:none; }
  .scroll-cue { position:relative; inset:auto; align-self:flex-start; margin:24px 20px 0; font-size:.75rem; letter-spacing:.09em; }
  .home-story { height:auto; margin-top:25px; }
  .home-sticky { position:relative; top:auto; height:auto; min-height:0; display:flex; flex-direction:column; overflow:visible; background:#31241b; }
  .porch-scene { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; z-index:0; transform:none; will-change:auto; }
  .scene-shade { display:none; }
  .statement { padding-top:32px; padding-bottom:26px; transform:none; will-change:auto; }
  .statement .eyebrow { font-size:.75rem; line-height:1.7; letter-spacing:.1em; max-width:none; }
  .statement h2 { font-size:clamp(2.4rem,9.5vw,3.5rem); line-height:1.12; max-width:580px; letter-spacing:-.025em; }
  .statement h2 br { display:none; }
  .statement h2 em { display:block; margin-top:10px; }
  .statement p:not(.eyebrow) { font-size:1rem; line-height:1.75; max-width:none; margin-top:24px; }
  .statement p br { display:none; }
  .scene-caption { position:relative; inset:auto; align-self:flex-start; padding:0 20px 30px; font-size:.75rem; line-height:1.7; letter-spacing:.08em; }
  .song-grid { grid-template-columns:1fr; gap:30px; }
  .song:nth-child(n) { margin:0; }
  .song h3 { font-size:1.5rem; }
  .song p { font-size:1rem; }
  .song small { font-size:.8rem; }
  .price-title { flex-wrap:wrap; gap:8px; font-size:.75rem; }
  .portrait img { height:auto; max-height:none; }
  .closing { min-height:0; padding-block:65px; }
  .closing h2 { font-size:clamp(3.5rem,14vw,5.5rem); }
  /* Phones can drag any sideways overhang even with the body clipped, which
     reads as the page wobbling horizontally under your thumb. Keep the reveal
     animations purely vertical here so nothing sits past the viewport. */
  .motion-ready .reveal { translate:0 65px; }
  .motion-ready .portrait { translate:0 50px; }
  .motion-ready .keepsake-stack article { translate:0 65px; }
  html, body { overscroll-behavior-x:none; }
}

/* ===== Song cards play in place (the Jukebox's player pattern) =====
   The artwork is a button, not a link out: pressing it swaps the card face for
   a youtube-nocookie iframe, so no embed loads until someone asks for one.
   Colours are the .listen band's (walnut on cream), not the dark page shell. */
.song { display:flex; flex-direction:column; }
.song.is-playing { align-self:start; transform:none; }
.card-face, .player-face { display:flex; flex-direction:column; flex:1; }
.card-body { display:flex; flex-direction:column; flex:1; }
.card-body p { flex:1; }
.song .thumb-btn {
  width:100%; display:block; border:0; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
}
.song button:focus-visible { outline:3px solid var(--cream-accent); outline-offset:4px; }
.song .thumb-btn:hover .play, .song .thumb-btn:focus-visible .play {
  background:var(--button); transform:scale(1.08);
}
.play { transition:background .3s, transform .3s; }

.player-frame { position:relative; width:100%; aspect-ratio:16/9; background:#241a14; }
.player-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.player-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 12px 0; }
.player-title { flex:1; min-width:120px; font:1.15rem/1.3 Georgia,serif; color:var(--cream-ink); }
.equalizer { display:flex; align-items:flex-end; gap:3px; height:16px; flex-shrink:0; }
.equalizer span {
  display:block; width:3px; height:30%; border-radius:2px;
  background:linear-gradient(to top,var(--cream-accent),var(--button));
  animation:eqBounce 1.1s ease-in-out infinite;
}
.equalizer span:nth-child(1) { animation-delay:-.9s; }
.equalizer span:nth-child(2) { animation-delay:-.4s; }
.equalizer span:nth-child(3) { animation-delay:-.7s; }
.equalizer span:nth-child(4) { animation-delay:-.15s; }
@keyframes eqBounce { 0%,100% { height:22%; } 50% { height:100%; } }
.stop-btn {
  background:transparent; border:1px solid var(--pill-line); border-radius:3px;
  color:var(--cream-muted); font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:9px 15px; cursor:pointer;
  transition:border-color .3s, color .3s;
}
.stop-btn:hover, .stop-btn:focus-visible { border-color:var(--walnut); color:var(--walnut); }
.fallback-panel {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:40px 24px;
}
.fallback-panel p { font:italic 1.05rem/1.6 Georgia,serif; color:var(--cream-muted); }
.fallback-panel a { font-weight:700; font-size:.92rem; color:var(--cream-accent); border-bottom:1px solid #8b623e55; }
.fallback-panel a:hover { border-bottom-color:var(--cream-accent); }

@media (max-width:760px) {
  .player-bar { padding-top:14px; }
  .player-title { font-size:1.05rem; }
  .stop-btn { padding:11px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .equalizer span { animation:none !important; height:55%; }
  .equalizer span:nth-child(2), .equalizer span:nth-child(4) { height:90%; }
  .equalizer span:nth-child(3) { height:70%; }
}

/* ===== The WBOY feature plays in a lightbox =====
   Same player as the song cards — the iframe is only built on click and the
   bar/fallback are the shared ones — but lifted into a <dialog>, because the
   links that open it aren't cards. Cream panel so those walnut-on-cream
   player colours still read. */
.video-modal {
  width:min(940px,92vw); max-width:none; border:0; border-radius:3px;
  padding:12px 12px 20px; background:var(--card); color:var(--cream-ink);
  box-shadow:6px 8px 0 var(--card-edge),10px 24px 60px #0009;
}
.video-modal::backdrop { background:#160e0ae0; }
.video-modal-body { display:flex; flex-direction:column; }
.video-modal .player-bar { padding-inline:2px; }
.video-modal .stop-btn:focus-visible { outline:3px solid var(--cream-accent); outline-offset:3px; }
a[data-video] { cursor:pointer; }

@media (max-width:760px) {
  .video-modal { width:calc(100% - 26px); padding:8px 8px 16px; }
}

/* Original squared, raised buttons with touch-friendly press feedback. */
.button { touch-action:manipulation; }
@media (hover:hover) and (pointer:fine) {
  .button:hover { transform:translateY(-6px); box-shadow:0 12px 0 var(--button-edge),0 24px 35px #0005; }
}
.button:active { transform:translateY(3px); box-shadow:0 3px 0 var(--button-edge),0 8px 15px #0003; }
.price-card .button:active { box-shadow:0 3px 0 var(--walnut-edge),0 8px 15px #0003; }
.price-card .button:focus-visible { outline-color:var(--walnut); }

/* Frames keep phone image motion inside the repaired layout. */
.scene-frame { display:contents; }
/* <picture> is a wrapper for art direction only; it must not become a box. */
.scene-frame picture { display:contents; }
@media (max-width:760px) {
  .scene-frame { display:block; width:100%; aspect-ratio:3/2; overflow:hidden; position:relative; flex-shrink:0; }
  .scene-frame img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; }
  .hero .actions .button { min-height:56px; }
  .occasions a { display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  .mobile-motion-ready .scene-frame img {
    animation:mobile-scene-drift 12s ease-in-out infinite alternate;
    animation-play-state:paused;
    transform-origin:60% 50%;
  }
  .mobile-motion-ready .scene-frame.in-view img { animation-play-state:running; }
  .mobile-motion-ready .home-sticky .scene-frame img { animation-direction:alternate-reverse; transform-origin:40% 50%; }
  /* The hero drifts from its top edge, so the slow zoom eats foreground desk
     rather than creeping up on the headroom above Tim's head. */
  .mobile-motion-ready .hero .scene-frame img { transform-origin:50% 0; }
  .hero-copy,.closing-content { position:relative; isolation:isolate; }
  .mobile-motion-ready .hero-copy::before,.mobile-motion-ready .closing-content::before {
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at 35% 40%,#eab46a55,transparent 65%);
    animation:mobile-amber-drift 9s ease-in-out infinite alternate;
    animation-play-state:paused;
  }
  .mobile-motion-ready .hero-copy.in-view::before,.mobile-motion-ready .closing-content.in-view::before { animation-play-state:running; }
  .motion-ready .reveal {
    translate:0 72px;
    transition:opacity .8s ease var(--delay,0ms),translate 1s cubic-bezier(.16,1,.3,1) var(--delay,0ms),transform .3s;
  }
  .motion-ready .portrait { translate:0 60px; }
  .motion-ready .keepsake-stack article { translate:0 80px; }
  .motion-ready .reveal.seen { opacity:1; translate:0 0; }
  @keyframes mobile-scene-drift { from { transform:scale(1); } to { transform:scale(1.07); } }
  @keyframes mobile-amber-drift { from { opacity:.35; transform:translateX(-4%); } to { opacity:.8; transform:translateX(4%); } }
}
@media (prefers-reduced-motion:reduce) {
  .button:hover,.button:active { transform:none; }
}

/* Lead with the listener's story, then let the weekly song do the talking. */
.hero { min-height:min(780px,90svh); padding-block:145px 110px; }
.hero h1 { font-size:clamp(4.4rem,6.5vw,6.8rem); max-width:800px; }
.hero .intro { max-width:480px; font-size:1.1rem; }
.hero-postcard { width:205px; bottom:8%; }
.scroll-cue { max-width:calc(100% - 40px); line-height:1.6; }
.weekly-feature { padding-block:60px; scroll-margin-top:24px; }
.weekly-layout { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:64px; }
.weekly-copy h2 { font-size:clamp(2.8rem,4.5vw,4.8rem); line-height:1.05; }
.weekly-copy>p:not(.eyebrow) { margin:24px 0 28px; font-size:1.05rem; max-width:430px; }
.weekly-player { transform:none; padding:12px; min-width:0; }
.weekly-player .song-image { aspect-ratio:16/9; }
.weekly-player .song-image::after { content:''; position:absolute; inset:45% 0 0; z-index:1; pointer-events:none; background:linear-gradient(transparent,#20150cbd); }
.weekly-player .play { width:60px; height:60px; bottom:20px; right:20px; font-size:1.25rem; }
.weekly-play-label { position:absolute; left:22px; bottom:30px; z-index:2; color:var(--ink); font-size:1rem; font-weight:600; text-shadow:0 2px 8px #0009; }
.weekly-player .player-bar { padding-bottom:8px; }
.featured-reaction { padding-block:42px; display:grid; grid-template-columns:.6fr 1.4fr; gap:40px; align-items:center; border-bottom:1px solid var(--line); }
.featured-reaction .eyebrow { margin:0; max-width:240px; }
.featured-reaction figure { margin:0; }
.featured-reaction figure>span { color:var(--accent); letter-spacing:.15em; font-size:.85rem; }
.featured-reaction blockquote { margin:12px 0 16px; font:1.5rem/1.45 Georgia,serif; max-width:760px; }
.featured-reaction figcaption small { display:inline; margin-left:12px; }
.quotes { grid-template-columns:repeat(2,1fr); }
@media (max-width:1100px) {
  .weekly-layout { gap:36px; }
}
@media (max-width:760px) {
  .hero { min-height:0; padding:0 0 28px; }
  /* Open the phone with the photograph. Leading with copy put a screen of
     pure text first, and the 16/9 frame cropped the top of the portrait, so
     the first thing that scrolled into view was the crown of Tim's head.
     4/3 is taller than the 3:2 source, so it trims the dark left-hand wall
     instead of the figure: face, lamp, mic and window all stay whole. The
     svh cap keeps the headline and the amber button above the fold. */
  .hero>.scene-frame { order:0; margin-top:0; aspect-ratio:4/3; max-height:42svh; }
  /* studio-hero-mobile.webp is already cropped 4:3 to this framing, so the
     frame normally shows it whole. Should the svh cap ever shorten the frame,
     anchoring high keeps the headroom and takes the loss off the desk. */
  .hero .hero-scene { object-position:center 15%; }
  .hero-copy { order:1; padding-top:26px; }
  .hero h1 { font-size:clamp(2.6rem,10vw,3.65rem); line-height:1.08; }
  .hero .intro { font-size:1rem; margin-top:18px; }
  .hero-copy .eyebrow { margin-bottom:16px; }
  .hero .actions { margin-top:22px; gap:22px; }
  .hero .fine { margin-top:18px; }
  .scroll-cue { order:2; margin-top:20px; font-size:.7rem; gap:12px; }
  .weekly-feature { padding-block:36px; }
  .weekly-layout { grid-template-columns:1fr; gap:26px; }
  .weekly-copy .eyebrow { margin-bottom:14px; }
  .weekly-copy h2 { font-size:clamp(2.5rem,10vw,3.5rem); }
  .weekly-copy>p:not(.eyebrow) { font-size:1rem; margin:16px 0 20px; }
  .weekly-player { padding:8px; }
  .weekly-player .play { width:48px; height:48px; bottom:14px; right:14px; }
  .weekly-play-label { left:14px; bottom:26px; font-size:.875rem; max-width:calc(100% - 94px); line-height:1.4; }
  .featured-reaction { grid-template-columns:1fr; gap:18px; padding-block:32px; }
  .featured-reaction .eyebrow { max-width:none; }
  .featured-reaction blockquote { font-size:1.3rem; }
  .featured-reaction figcaption small { display:block; margin-left:0; }
  .quotes { grid-template-columns:1fr; }
  /* Five social links no longer fit one line on a narrow phone, and the
     body's overflow-x:clip would hide the last one rather than scroll. */
  footer>div { flex-wrap:wrap; gap:14px 18px; }
}

/* Short viewports — an older phone, but mostly the in-app browsers Facebook,
   TikTok and the Google app open links in, which keep a title bar on top and
   often a search bar over the bottom. There the full-size header spends 132px,
   a fifth of everything the visitor can see, on a logo and four tabs. Compact
   it and give the space to the photo, the headline and the button. */
@media (max-width:760px) and (max-height:700px) {
  header { padding:12px 20px 8px; gap:10px; }
  header .brand { font-size:.78rem; gap:10px; }
  header .brand img { width:32px; height:32px; }
  header .brand small { font-size:.6rem; margin-top:2px; }
  header nav { font-size:clamp(.72rem,4.1vw,.8rem); }
  header nav a { padding:4px 0; }
  .hero>.scene-frame { max-height:30svh; }
  /* The cap really does crop here, so take every pixel of it off the desk. */
  .hero .hero-scene { object-position:center top; }
  .hero-copy { padding-top:20px; }
  .hero .intro { margin-top:14px; }
}

/* Keep slow-loading embeds available while offering a direct listening link. */
.player-loading-help { flex:initial; padding:18px 12px 8px; gap:6px; }
.player-loading-help p { font: .875rem/1.5 'DM Sans',sans-serif; }
.player-loading-help a { font-size:.875rem; }

/* Keep the full-resolution weekly cover crisp and preserve its lettering. */
.weekly-player .song-image img { object-fit:contain; }
.weekly-player:hover .song-image img { transform:none; }

/* ===== Flair: the handwritten headline =====
   "song to?" inks in left to right like the pen in the hero photo, then a
   swash underlines it. The padding/negative margin gives the italic overhang
   room inside the mask so the "?" is never clipped. */
.hero h1 .ink { position:relative; white-space:nowrap; }
.hero h1 .ink em { padding:0 .12em; margin:0 -.12em; }
.ink-swash { position:absolute; left:-2%; bottom:-.14em; width:104%; height:.26em; overflow:visible; pointer-events:none; }
.ink-swash path { fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.85; }
@media (prefers-reduced-motion:no-preference) {
  .hero h1 .ink em {
    -webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 56%); mask-image:linear-gradient(90deg,#000 44%,transparent 56%);
    -webkit-mask-size:250% 100%; mask-size:250% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    animation:ink-write 1.5s .8s cubic-bezier(.45,.05,.3,1) both;
  }
  .ink-swash path { stroke-dasharray:1; stroke-dashoffset:1; animation:ink-swash .9s 2.1s cubic-bezier(.6,0,.3,1) forwards; }
  @keyframes ink-write { from { -webkit-mask-position:100% 0; mask-position:100% 0; } to { -webkit-mask-position:0 0; mask-position:0 0; } }
  @keyframes ink-swash { to { stroke-dashoffset:0; } }
}

/* ===== Flair: fireflies over the porch =====
   Built by script.js only when motion is welcome, and paused unless the porch
   is on screen. On phones the porch is a 3:2 photo above the statement, so
   they stay inside the photo. */
.fireflies { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.fireflies i {
  position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%;
  background:#ffdc96; box-shadow:0 0 6px 2px #f0b86fcc,0 0 18px 6px #f0b86f4d; opacity:0;
  animation:firefly-drift var(--d) ease-in-out var(--delay) infinite alternate,firefly-glow var(--g) ease-in-out var(--delay) infinite;
  animation-play-state:paused;
}
.fireflies.lit i { animation-play-state:running; }
@keyframes firefly-drift { to { translate:var(--dx) var(--dy); } }
@keyframes firefly-glow { 0%,100% { opacity:0; } 45%,60% { opacity:var(--o); } }
@media (max-width:760px) { .fireflies { inset:0 0 auto; aspect-ratio:3/2; z-index:1; } }

/* ===== Flair: the phone's pinned Story Room button =====
   The phone header hides its button, so without this a phone visitor has no
   way to commission a song between the hero and the closing section. It
   slides up once the hero is gone and gets out of the way for the closing
   section and footer, which carry their own. */
.mobile-cta { display:none; }
@media (max-width:760px) {
  .mobile-cta {
    display:flex; position:fixed; z-index:20; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom));
    width:auto; padding:15px 20px; box-shadow:0 5px 0 var(--button-edge),0 14px 30px #000a;
    transform:translateY(calc(100% + 40px)); visibility:hidden;
    transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;
  }
  .mobile-cta.show { transform:none; visibility:visible; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
  .mobile-cta.show ~ .now-playing { bottom:calc(88px + env(safe-area-inset-bottom)); }
}

/* ===== Flair: the now-playing pill =====
   A song keeps playing after its card scrolls away; this is the way back to
   it, and the way to stop it, from anywhere on the page. */
.now-playing {
  position:fixed; z-index:21; left:50%; bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; width:max-content; max-width:min(calc(100vw - 28px),440px);
  padding:7px 7px 7px 18px; border:1px solid var(--line); border-radius:999px;
  background:#1b120fee; color:var(--ink); box-shadow:0 14px 34px #000a; backdrop-filter:blur(8px);
  translate:-50% calc(100% + 60px); visibility:hidden;
  transition:translate .4s cubic-bezier(.2,.8,.2,1),bottom .4s,visibility 0s .4s;
}
.now-playing.show { translate:-50% 0; visibility:visible; transition:translate .4s cubic-bezier(.2,.8,.2,1),bottom .4s; }
.now-playing button { background:none; border:0; color:inherit; cursor:pointer; font-family:'DM Sans',sans-serif; }
.now-playing button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.now-playing-back { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:2px 0; }
.now-playing-back small { font-size:.6rem; font-weight:700; letter-spacing:.15em; color:var(--accent); }
.now-playing-back b { max-width:100%; font:1rem/1.3 Georgia,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.now-playing-stop { flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line) !important; font-size:.85rem; transition:background .3s; }
.now-playing-stop:hover { background:#f0b86f26; }

/* ===== Rotating reviews =====
   Jane, Dolores and Susan share the spot below the weekly song. Scripts-off
   they stack; with scripts all three sit in one grid cell (so the height is
   the tallest quote's and nothing jumps) and cross-fade. */
.reviews figure+figure { margin-top:30px; }
.reviews.rotating { display:grid; }
.reviews.rotating figure { grid-area:1/1; margin:0; opacity:0; visibility:hidden; translate:0 12px; transition:opacity .7s,translate .7s,visibility 0s .7s; }
.reviews.rotating figure.current { opacity:1; visibility:visible; translate:0 0; transition:opacity .8s .2s,translate .8s .2s; }
.review-controls { grid-area:2/1; display:flex; align-items:center; gap:4px; margin-top:14px; }
.review-dot { width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.review-dot::before { content:''; width:8px; height:8px; border-radius:50%; border:1px solid var(--accent); transition:background .3s,transform .3s; }
.review-dot[aria-current="true"]::before { background:var(--accent); transform:scale(1.2); }
.review-toggle { margin-left:10px; padding:6px 4px; border:0; background:none; color:var(--muted); font:700 .66rem 'DM Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.review-toggle:hover { color:var(--accent); }
.review-controls button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ===== "Your song, step by step" =====
   script.js adds .timeline (motion allowed only) and drives --p from 0 to 1
   as the steps scroll past; the dot rides the line and lights each step. */
.steps.timeline { position:relative; --p:0; }
.steps.timeline::before,.steps.timeline::after { content:''; position:absolute; left:0; top:0; height:1px; pointer-events:none; }
.steps.timeline::before { right:0; background:var(--line); }
.steps.timeline::after { width:calc(var(--p)*100%); background:var(--accent); box-shadow:0 0 10px var(--accent-glow); }
.steps.timeline article { border-top-color:transparent; }
.steps.timeline article>* { opacity:.38; transition:opacity .6s,color .6s,text-shadow .6s; }
.steps.timeline article.lit>* { opacity:1; }
.steps.timeline article.lit span { text-shadow:0 0 22px #f0b86f88; }
.steps>.steps-dot { position:absolute; top:0; left:calc(var(--p)*100%); width:13px; height:13px; margin:-6px 0 0 -6px; border-radius:50%; background:#ffd894; box-shadow:0 0 0 4px #f0b86f33,0 0 18px 4px var(--accent-glow); pointer-events:none; }
.steps.timeline-vertical::before,.steps.timeline-vertical::after { left:46px; width:1px; height:auto; }
.steps.timeline-vertical::before { top:0; bottom:0; right:auto; }
.steps.timeline-vertical::after { height:calc(var(--p)*100%); width:1px; }
.steps.timeline-vertical>.steps-dot { left:46px; top:calc(var(--p)*100%); margin:-6px 0 0 -6px; }

/* Audit fixes (October 2026): contrast, a 12px floor for small labels,
   44px tap targets on touch screens, and room reserved for images. */
img { height:auto; }
.keepsake-stack span { color:#f6d6a6; }

.eyebrow,.hero-copy .eyebrow,.statement .eyebrow { font-size:.8rem; letter-spacing:.12em; }
.brand small,header .brand small { font-size:.75rem; letter-spacing:.1em; }
.scroll-cue,.scene-caption,.portrait span { font-size:.78rem; letter-spacing:.1em; }
figcaption small,.proof small,.proof b span,.review-toggle { font-size:.75rem; letter-spacing:.1em; }
.proof span { font-size:.8rem; }
.keepsake-stack span { font-size:.78rem; }
.now-playing-back small { font-size:.72rem; letter-spacing:.12em; }
@media (min-width:761px) { .song small { font-size:.75rem; } }
.price-title span { font-size:.75rem; }
@media (max-width:390px) { footer .brand { font-size:.75rem; } }

@media (max-width:760px), (pointer:coarse) {
  header nav a { padding-block:12px; }
  footer>div a,.review-toggle { display:inline-flex; align-items:center; min-height:44px; margin-block:-10px; }
  .review-dot { width:44px; height:44px; margin:-8px; }
  .text-link { position:relative; z-index:1; }
  .text-link::after { content:''; position:absolute; inset:-14px -6px -10px; }
  .scroll-cue::after { content:''; position:absolute; inset:-5px -4px; }
  footer .brand { position:relative; }
  footer .brand::after { content:''; position:absolute; inset:-14px -6px; }
}

/* Polish (October 2026): tablet header and price-card labels stay on one
   line, and cream sections get the walnut focus ring (amber on cream is
   too faint to see). */
.listen a:focus-visible { outline-color:var(--cream-accent); }
@media (min-width:761px) and (max-width:1100px) {
  header { gap:20px; padding-inline:32px; }
  header nav { gap:18px; }
  header nav a,header .button,.brand small { white-space:nowrap; }
  .price-title { flex-wrap:wrap; gap:2px 25px; }
}
@media (min-width:761px) and (max-width:900px) {
  header { gap:16px; padding-inline:24px; }
  header nav { gap:14px; }
  header .button,.price-card .button { gap:14px; }
  header .brand small { letter-spacing:.06em; }
}

/* Song gallery swipes on phones (October 2026). Seven stacked cards were
   five-plus screens of scrolling, so below 760px they sit in one snap row
   with the next card peeking in. No auto-advance: a playing card must never
   slide away on its own. Desktop keeps the grid. */
.song-count { display:none; }
@media (max-width:760px) {
  .song-grid {
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%;
    gap:16px; margin-inline:-20px; padding:4px 20px 18px;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:20px;
    overscroll-behavior-x:contain; scrollbar-width:none; perspective:none;
  }
  .song-grid::-webkit-scrollbar { display:none; }
  .song-grid .song { scroll-snap-align:start; scroll-snap-stop:always; }
  .song-grid .song.is-playing { align-self:stretch; }
  /* The scroll-in reveal reads as a glitch on cards that arrive sideways. */
  .motion-ready .song-grid .song { opacity:1; translate:none; }
  .song-count {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:6px; font-size:.8rem; letter-spacing:.08em; color:var(--cream-muted);
  }
  .song-count b { color:var(--cream-accent); font-weight:700; }
}