: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. The swash is revealed
   with a clip, not a dash offset: Chrome mis-measures pathLength under
   non-scaling-stroke on wide screens, which showed a stub of the line at its
   right end before it drew and stopped the finished line short. */
.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 { clip-path:inset(-100% 100% -100% 0); 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 { clip-path:inset(-100% 0 -100% 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; }
}

/* Jukebox invite (October 2026). The header's "Explore the jukebox" link sat
   above the grid and got skipped; this panel meets visitors after the last
   card, when they've just heard what the studio sounds like. A dark walnut
   record shelf on the cream band, so it reads as a destination, not a footnote. */
.jukebox-invite {
  display:flex; align-items:center; justify-content:space-between; gap:50px;
  margin-top:90px; padding:48px 52px; background:var(--bg); color:var(--ink);
  border-radius:3px; box-shadow:10px 12px 0 var(--card-edge),18px 26px 40px #57351833;
}
.jukebox-invite>div { max-width:720px; }
.listen .jukebox-invite .eyebrow { color:var(--accent); margin-bottom:16px; }
.jukebox-invite h3 { font:2.1rem/1.15 Georgia,serif; letter-spacing:-.02em; }
.listen .jukebox-invite em { color:var(--accent); }
.listen .jukebox-invite p:not(.eyebrow) { color:var(--muted); margin-top:16px; font-size:1rem; }
.jukebox-invite ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:22px 0 0; }
.jukebox-invite li { border:1px solid var(--line); border-radius:3px; padding:5px 12px; font-size:.78rem; color:var(--ink-soft); }
.jukebox-invite .button { flex-shrink:0; font-size:1.05rem; padding:20px 30px; }
.listen .jukebox-invite a:focus-visible { outline-color:var(--accent); }
@media (hover:hover) { .jukebox-invite .button:hover { transform:translateY(-3px); box-shadow:0 9px 0 var(--button-edge),0 20px 28px #0005; } }
@media (max-width:760px) {
  .jukebox-invite { flex-direction:column; align-items:stretch; gap:28px; margin-top:50px; padding:32px 24px; box-shadow:6px 8px 0 var(--card-edge); }
  .jukebox-invite h3 { font-size:1.6rem; }
  .jukebox-invite .button { justify-content:space-between; }
}

/* ===== Text Tim: reach line, call/email options, Story Room alternative ===== */
.reach { margin:16px 0 0; font-size:.92rem; line-height:1.5; color:var(--muted); text-align:center; }
.reach-options { margin:6px 0 0; font-size:.95rem; color:var(--muted); text-align:center; }
.reach-options a { text-decoration:underline; text-underline-offset:3px; padding:6px 2px; }
.reach-alt { margin:14px 0 0; text-align:center; }
.reach-alt .text-link { display:inline-block; }
.price-card .reach,.price-card .reach-options { color:var(--cream-muted); }
.price-card .reach-options a { color:var(--cream-ink); }
.price-card .reach-alt .text-link { color:var(--cream-ink); border-color:var(--cream-line); }
.price-card .reach-options a:focus-visible,.price-card .reach-alt a:focus-visible { outline:2px solid var(--walnut); outline-offset:3px; }
.closing .reach { color:var(--ink-soft); }
.closing .reach-options { color:var(--ink-soft); }
.closing .reach-options a { color:var(--ink); }
@media (max-width:760px) {
  .reach,.reach-options { font-size:.9rem; }
  .reach-options a { padding:12px 4px; }
  .mobile-cta { white-space:nowrap; justify-content:center; font-size:.95rem; }
  .price-card .button { font-size:.9rem; padding-inline:18px; gap:10px; }
}

/* Message me (November 2026). Messenger is the primary action on every
   commission CTA, with text and call as tappable links right under it. The
   hero now leads with the price and that button, then one line of proof
   (the old proof bar sat two screens down). */
.hero .fine { margin-top:20px; font-size:.95rem; color:var(--ink-soft); }
.hero .actions { margin-top:22px; }
.hero .reach-options { margin-top:20px; text-align:left; color:var(--ink-soft); }
.hero .reach-options a { color:var(--ink); }
.hero-proof { display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; margin-top:20px; font-size:.875rem; letter-spacing:.03em; color:var(--ink-soft); }
.hero-proof>span+span::before { content:'·'; margin-inline:12px; color:var(--accent); }
.hero-proof a { text-decoration:underline; text-underline-offset:3px; }
.hero-proof>span:last-child { color:var(--accent); letter-spacing:.12em; }
.addons small { display:block; margin-top:4px; font-size:.8rem; line-height:1.5; color:var(--cream-muted); }
@media (prefers-reduced-motion:no-preference) {
  .hero .reach-options,.hero-proof { animation:arrive 1.3s .3s both; }
}
@media (max-width:760px) {
  /* The nav row cost a sixth of the first screen and the studio name was
     14px. The row goes; the name gets its room. */
  header nav { display:none; }
  header { padding:16px 20px; }
  header .brand { font-size:1.05rem; letter-spacing:.14em; gap:14px; }
  header .brand img { width:48px; height:48px; }
  header .brand small { font-size:.75rem; }
  .hero .fine { margin-top:16px; }
  .hero .reach-options { margin-top:14px; }
  .hero .reach-options a { display:inline-block; }
  .hero-proof { margin-top:8px; font-size:.8rem; letter-spacing:0; }
  .hero-proof>span+span::before { margin-inline:8px; }
  .proof-wide { display:none; }
  .hero-proof>span:last-child { letter-spacing:.04em; }
  /* The scroll cue just below already leads to the song; on a phone the
     text and call links belong directly under the button instead. */
  .hero .actions .text-link { display:none; }
}

/* Book a callback (November 2026). The second action everywhere: an outlined
   button, so it always reads as second to the amber Message me. It opens the
   Google Calendar appointment page in a new tab. */
.button.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--accent); }
.button.ghost:active { box-shadow:inset 0 0 0 1.5px var(--accent); }
@media (hover:hover) and (pointer:fine) {
  .button.ghost:hover { transform:translateY(-3px); box-shadow:inset 0 0 0 1.5px var(--accent),0 14px 24px #0004; background:#f0b86f14; }
}
.closing .button.ghost { margin-top:22px; }
.callback { padding-block:80px 90px; }
.callback-card { max-width:720px; margin-inline:auto; padding:48px 52px; background:var(--card); box-shadow:10px 10px 0 var(--price-edge); text-align:center; }
.callback-card .eyebrow { color:var(--cream-accent); margin-bottom:16px; }
.callback-card h2 { font-size:clamp(2.2rem,3.4vw,3rem); line-height:1.1; color:var(--cream-ink); }
.callback-card p { color:var(--cream-muted); }
.callback-card h2+p { max-width:460px; margin:18px auto 28px; font-size:1.05rem; }
.callback-card .button.ghost { color:var(--cream-ink); box-shadow:inset 0 0 0 1.5px var(--walnut); }
.callback-card .button.ghost:focus-visible,.callback-alt a:focus-visible { outline-color:var(--walnut); }
.callback-alt { margin-top:22px; font-size:.95rem; }
.callback-alt a { color:var(--cream-ink); text-decoration:underline; text-underline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
  .callback-card .button.ghost:hover { box-shadow:inset 0 0 0 1.5px var(--walnut),0 14px 24px #0002; background:#77482612; }
}
@media (max-width:760px) {
  .hero .actions { gap:12px; margin-top:18px; }
  .hero .actions .button.ghost { min-height:46px; padding-block:9px; }
  .hero .reach-options { margin-top:10px; }
  .callback { padding-block:50px 60px; }
  .callback-card { padding:34px 24px; box-shadow:7px 7px 0 var(--price-edge); }
  .callback-card .button.ghost { width:100%; }
  .callback-alt a { display:inline-block; padding:12px 4px; }
  /* The pinned bar is now two buttons: Message me (wide) and Call me back. */
  .mobile-cta { padding:0; gap:10px; background:none; box-shadow:none; align-items:stretch; }
  .mobile-cta .button { padding:14px 18px; font-size:.95rem; white-space:nowrap; box-shadow:0 5px 0 var(--button-edge),0 14px 30px #000a; }
  .mobile-cta .button:first-child { flex:1; justify-content:center; gap:14px; }
  .mobile-cta .button.ghost { background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--accent),0 14px 30px #000a; }
}

/* Seven screens (November 2026). The phone page ran 14 screens and almost
   nobody reached the price. The order is now: hero, this week's song, three
   more songs, the memorial band, reviews, how-it-works + price in one
   section, callback, about, FAQ, closing. The keepsake section, the jukebox
   block and two FAQ entries are gone; the porch statement is desktop-only. */
.more-songs { padding-block:70px 80px; }
.more-songs .section-head { margin-bottom:40px; }
.more-songs h2 { font-size:clamp(2.4rem,3.6vw,3.6rem); line-height:1.1; }
.all-songs { margin-top:50px; border-top:1px solid var(--cream-line); border-bottom-color:var(--cream-line); }
.all-songs summary { color:var(--cream-ink); font-weight:600; }
.all-songs summary:after { color:var(--cream-accent); }
.all-songs summary:focus-visible { outline-color:var(--cream-accent); }
.all-songs .song-grid { padding-block:20px 50px; }

.memorial-band { background:var(--panel); border-block:1px solid var(--line); padding-block:76px; text-align:center; }
.memorial-band .wrap { max-width:760px; }
.memorial-band .eyebrow { margin-bottom:18px; }
.memorial-band h2 { font-size:clamp(2.4rem,3.8vw,3.6rem); line-height:1.12; }
.memorial-band h2+p { max-width:520px; margin:20px auto 30px; font-size:1.05rem; color:var(--ink-soft); }
.memorial-band .reach-options { margin-top:20px; color:var(--ink-soft); }
.memorial-band .reach-options a { color:var(--ink); }

.offer .price-layout { align-items:start; gap:80px; }
.offer h2 { font-size:clamp(2.6rem,4vw,4.2rem); line-height:1.05; }
.offer .steps { grid-template-columns:1fr; gap:4px; margin-top:40px; }
.offer .steps article { position:relative; padding:22px 0 22px 64px; }
.offer .steps span { position:absolute; left:0; top:18px; font-size:2.5rem; }
.offer .steps h3 { margin:0 0 8px; font-size:1.5rem; }
/* Prices and deliverables are read, not admired: the card sits square. */
.offer .price-card { transform:none; }

@media (max-width:760px) {
  .section-pad { padding-block:52px; }
  .home-story { display:none; }
  .more-songs { padding-block:40px 44px; }
  .more-songs .section-head { gap:12px; margin-bottom:20px; }
  .more-songs h2 { font-size:2.1rem; }
  .all-songs { margin-top:22px; }
  .all-songs .song-grid { padding-block:8px 18px; }
  .memorial-band { padding-block:46px; }
  .memorial-band h2 { font-size:2.3rem; }
  .memorial-band h2+p { margin:14px auto 22px; font-size:1rem; }
  .memorial-band .button { width:100%; }
  .memorial-band .reach-options { margin-top:10px; }
  .featured-reaction { padding-block:36px; gap:14px; }
  .featured-reaction blockquote { font-size:1.12rem; margin:8px 0 10px; }
  .reviews figure+figure { margin-top:22px; }
  .offer .price-layout { gap:34px; }
  .offer h2 { font-size:2.5rem; }
  .offer .steps { margin-top:22px; }
  .offer .steps article { padding-block:14px; }
  .offer .steps h3 { font-size:1.35rem; margin-bottom:4px; }
  .price-card li { padding-block:4px; }
  .amount { font-size:4.6rem; line-height:1.3; }
  .price-card .guarantee { margin:18px 0; }
  .about .pullquote { display:none; }
  .portrait { width:68%; }
  .portrait img { height:300px; object-position:center 18%; }
  .closing { padding-block:52px; }
  /* Tighter still: every one of these is height with nothing to read in it. */
  .hero .scene-frame { aspect-ratio:auto; height:230px; }
  .weekly-copy .text-link { display:none; }
  .weekly-copy>p:not(.eyebrow) { margin-bottom:0; }
  .more-songs h2 { display:none; }
  .more-songs .section-head { flex-direction:row; align-items:center; justify-content:space-between; }
  .more-songs .section-head .eyebrow { margin:0; }
  .more-songs .song p { display:none; }
  .more-songs .song { padding-bottom:16px; }
  .featured-reaction figcaption small { display:inline; margin-left:10px; }
  .callback { padding-block:36px 44px; }
  .callback-card { padding:28px 22px; }
  .about { gap:22px; }
  .portrait { width:150px; margin:0 0 0 6px; border-width:6px; transform:rotate(-3deg); box-shadow:8px 10px 0 #755238,12px 16px 22px #0006; }
  .portrait img { height:180px; }
  .portrait span { display:none; }
  .about>div:last-child { margin-top:0; }
  .about .text-link { display:inline-block; margin-top:22px; }
}

/* Callback hours (November 2026): when the owner takes calls, under the button. */
.callback-hours { margin-top:22px; font-size:.95rem; }
.callback-hours+.callback-alt { margin-top:6px; }
@media (max-width:760px) { .callback-hours+.callback-alt { margin-top:0; } }

/* Type pass (November 2026). Card and step titles were Georgia under Libre
   Caslon headings, which read as a font that failed to load: every upright
   heading is Caslon now (italics stay Georgia; Caslon has none). And nothing
   on the page is set below 14px: the audience skews older and arrives on
   phones. */
.song h3,.steps h3 { font-family:'Libre Caslon Display',Georgia,serif; font-weight:400; letter-spacing:-.01em; }
.song h3 { font-size:1.6rem; line-height:1.2; }
.offer .steps h3 { font-size:1.65rem; }
.eyebrow,.hero-copy .eyebrow,.statement .eyebrow { font-size:.875rem; letter-spacing:.11em; }
.brand small,header .brand small,figcaption small,.price-title span,.song small,.song-count,.scroll-cue,.scene-caption,.portrait span,.addons small,.price-card .guarantee { font-size:.875rem; }
.addons { font-size:.9rem; }
footer>p,.now-playing small { font-size:.875rem; }
.memorial-band h2,.callback-card h2 { text-wrap:balance; }
@media (max-width:760px) {
  .hero-proof { font-size:.875rem; }
  .hero-proof>span+span::before { margin-inline:6px; }
  .song h3 { font-size:1.5rem; }
  .offer .steps h3 { font-size:1.45rem; }
}

/* Hero rebuild (November 2026). The studio name is the headline and the
   picture is the real portrait of Tim, not the illustrated scene: most
   visitors know him, and the name used to be 14px tall. On wide screens the
   portrait holds the right half and fades into the walnut ground; on phones
   it sits above the copy with the mark laid over its corner. The postcard is
   gone, and the About section no longer repeats the photo. */
.hero h1 { max-width:none; }
.hero-question { margin-top:26px; font:italic 1.7rem/1.3 Georgia,serif; letter-spacing:-.02em; color:var(--ink); }
.hero .intro { margin-top:12px; }
@media (min-width:761px) {
  /* The portrait has little headroom, so it starts below the header row
     and the top edge is faded out rather than cropped by the nav. */
  .hero-scene { inset:60px 0 0 auto; width:48%; height:auto; object-position:center top; }
  .hero-shade { background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 52%,#271c16d9 60%,#271c1600 80%),linear-gradient(0deg,var(--bg),transparent 26%),linear-gradient(180deg,var(--bg) 0,var(--bg) 60px,transparent 120px); }
}
@media (prefers-reduced-motion:no-preference) { .hero-question { animation:arrive 1.3s .25s both; } }
.about-solo { display:block; max-width:820px; }
@media (max-width:760px) {
  /* The headline is the studio name and the shirt carries the mark, so the
     phone header (only the brand was left in it) goes. */
  header { display:none; }
  .hero .scene-frame { height:300px; }
  .hero .scene-frame::after { content:''; position:absolute; inset:auto 0 0; height:90px; background:linear-gradient(transparent,var(--bg)); pointer-events:none; }
  .hero .hero-scene { object-position:center 10%; }
  .hero-copy { padding-top:8px; }
  .hero-copy .eyebrow { display:none; }
  .hero h1 { font-size:clamp(2.5rem,11.6vw,3.2rem); white-space:nowrap; }
  .hero-question { margin-top:12px; font-size:1.25rem; }
  .hero .intro { margin-top:8px; }
}

/* The memorial band links to the dedicated memorial page (November 2026). */
.memorial-more { margin-top:22px; }
@media (max-width:760px) { .memorial-more { margin-top:16px; } }