/* Shared SongMuse controls, story-specific picture groups. A picture group is
   one grid item even when two photographs tell different parts of the story. */
body.scene-page{background:#f8fafc}
.scene-page .campaign-main{position:relative;isolation:isolate}
.scene-page .campaign-image{min-width:0}
.scene-page .intro-copy h1{font-weight:750;max-width:23ch;text-wrap:balance}
.scene-page .intro-copy p{max-width:48ch;color:#4d586c}
.scene-page .occasion-art{position:relative;width:100%;min-width:0;height:320px;margin-top:22px;flex:0 0 auto}
.scene-page .occasion-art :is(.birthday-hero-art,.occasion-detail-art){display:block;position:absolute;width:100%;height:100%;min-height:0;max-width:none;max-height:none;margin:0;object-fit:cover;object-position:50% 50%;border-radius:12px;flex:none}
.scene-page main:has(#song-results:not([hidden])) .occasion-art{display:none}
.birthday-guide .occasion-image-note{font-size:14px;color:#596174;margin-top:12px}
.scene-page .campaign-content{position:relative;z-index:1}
.scene-page .birthday-guide{border-top-color:var(--scene-accent)}
.scene-page .birthday-guide-intro{max-width:82ch}
.scene-page .birthday-steps li::marker{color:var(--scene-accent)}
.scene-page .birthday-example{border-bottom-color:#d9dfe9}
.scene-page .birthday-faq summary::marker{color:var(--scene-accent)}
.scene-page .settings-row select{font-size:16px}
.occasion-elements{margin-top:24px}
.occasion-elements h3{font-size:15px;margin-bottom:10px}
.occasion-elements ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0;color:#4d586c;font-size:14px}

/* The photo grammar is shared across widths, with a smaller mobile stage. */
.scene-page[data-scene-layout="yearbook"] .occasion-art{height:350px}
.scene-page[data-scene-layout="yearbook"] .birthday-hero-art{width:88%;height:auto;aspect-ratio:3/2;inset:0 auto auto 0}
.scene-page[data-scene-layout="yearbook"] .occasion-detail-art{width:39%;height:auto;aspect-ratio:1;right:0;bottom:0;border:6px solid #f8fafc;border-radius:8px}
.scene-page[data-scene-layout="letter"] .occasion-art{height:310px}
.scene-page[data-scene-layout="letter"] .birthday-hero-art{width:89%;height:auto;aspect-ratio:3/2;right:0;top:0}
.scene-page[data-scene-layout="letter"] .occasion-detail-art{width:40%;height:auto;aspect-ratio:1;left:0;bottom:0;border:6px solid var(--scene-wash);border-radius:8px}
.scene-page[data-scene-layout="stage"] .occasion-art{height:auto;aspect-ratio:16/9}
.scene-page[data-scene-layout="stage"] .birthday-hero-art{object-position:50% 8%;border-radius:4px 4px 14px 14px}
.scene-page[data-scene-layout="mixtape"] .occasion-art{height:310px}
.scene-page[data-scene-layout="mixtape"] .birthday-hero-art{width:54%;height:auto;aspect-ratio:3/2;top:0;left:0;border-radius:4px}
.scene-page[data-scene-layout="mixtape"] .occasion-detail-art{width:43%;height:auto;aspect-ratio:1;bottom:0;right:0;border-radius:4px 4px 32px 4px}
.scene-page[data-scene-layout="invitation"] .occasion-art{background:var(--scene-wash);padding:16px;border-radius:150px 150px 16px 16px}
.scene-page[data-scene-layout="invitation"] .birthday-hero-art{position:relative;border-radius:120px 120px 8px 8px;object-position:50% 40%}
.scene-page[data-scene-layout="timeline"] .occasion-art{height:300px}
.scene-page[data-scene-layout="timeline"] .birthday-hero-art{width:67%;height:auto;aspect-ratio:3/2;top:0;left:0;border-radius:12px 12px 4px 12px}
.scene-page[data-scene-layout="timeline"] .occasion-detail-art{width:30%;height:auto;aspect-ratio:1;bottom:0;right:0;border-radius:4px 12px 12px 12px}
.scene-page[data-scene-layout="duet"] .occasion-art{width:86%;height:auto;aspect-ratio:5/4;justify-self:center;background:var(--scene-wash);border-radius:60px 12px 60px 12px;padding:10px}
.scene-page[data-scene-layout="duet"] .birthday-hero-art{position:relative;border-radius:52px 6px 52px 6px;object-position:50% 45%}
.scene-page[data-scene-layout="table"] .occasion-art{height:210px;margin:0}
.scene-page[data-scene-layout="table"] .birthday-hero-art{width:68%;height:auto;aspect-ratio:3/2;top:0;left:0;border-radius:12px 4px 12px 4px}
.scene-page[data-scene-layout="table"] .occasion-detail-art{width:27%;height:auto;aspect-ratio:1;bottom:0;right:0;border-radius:4px 12px 4px 12px}
.scene-page[data-scene-layout="care"] .occasion-art{height:320px}
.scene-page[data-scene-layout="care"] .birthday-hero-art{width:92%;height:auto;aspect-ratio:3/2;left:0;top:0;border-radius:44px 10px 10px 10px}
.scene-page[data-scene-layout="care"] .occasion-detail-art{width:39%;height:auto;aspect-ratio:1;right:0;bottom:0;border:6px solid var(--scene-wash);border-radius:12px 12px 34px 12px}
.scene-page[data-scene-layout="workshop"] .occasion-art{height:auto;aspect-ratio:4/3}
.scene-page[data-scene-layout="workshop"] .birthday-hero-art{border-radius:4px;object-position:50% 45%}
.scene-page[data-scene-layout="journey"] .occasion-art{height:auto;aspect-ratio:16/10}
.scene-page[data-scene-layout="journey"] .birthday-hero-art{border-radius:4px 4px 40px 4px;object-position:50% 40%}
.scene-page[data-scene-layout="quiet"] .occasion-art{width:86%;height:auto;aspect-ratio:4/3;align-self:center;margin-top:32px}
.scene-page[data-scene-layout="quiet"] .birthday-hero-art{border-radius:4px;object-position:50% 45%}

@media(min-width:761px){
  .scene-page .main-nav a{max-width:none;white-space:nowrap;overflow-wrap:normal}
  .scene-page .campaign-main{min-height:calc(100dvh - var(--campaign-header-height,68px));padding-top:44px;padding-bottom:32px;column-gap:56px;align-items:center}
  .scene-page .campaign-content{grid-row:1/3;align-self:center}
  .scene-page[data-scene-layout="yearbook"] .campaign-main{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
  .scene-page[data-scene-layout="yearbook"] .intro-copy h1{font-size:clamp(32px,3vw,44px);max-width:20ch}
  .scene-page[data-scene-layout="yearbook"] .campaign-image{align-self:stretch;justify-content:center}
  .scene-page[data-scene-layout="letter"] .campaign-content{grid-column:1}
  .scene-page[data-scene-layout="letter"] .campaign-image{grid-column:2;padding:28px 24px 18px;background:var(--scene-wash);border-radius:14px}
  .scene-page[data-scene-layout="letter"] .participation-section{grid-column:2}
  .scene-page[data-scene-layout="letter"] .intro-copy h1{font-size:clamp(29px,2.8vw,38px);max-width:19ch}
  .scene-page[data-scene-layout="stage"] .campaign-main{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);max-width:1240px;gap:32px;padding-inline:40px}
  .scene-page[data-scene-layout="stage"] .campaign-image{background:var(--scene-wash);border-radius:16px;padding:30px 24px 24px;align-self:stretch;justify-content:center}
  .scene-page[data-scene-layout="stage"] .intro-copy h1{max-width:18ch;font-size:clamp(32px,3.1vw,44px)}
  .scene-page[data-scene-layout="mixtape"] .campaign-main{padding-top:58px}
  .scene-page[data-scene-layout="mixtape"] .campaign-content{align-self:start;margin-top:28px}
  .scene-page[data-scene-layout="mixtape"] .intro-copy{padding-bottom:22px;border-bottom:1px solid var(--scene-accent)}
  .scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .campaign-main{grid-template-rows:auto minmax(0,1fr) auto;row-gap:20px}
  .scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .campaign-image{display:contents}
  .scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .intro-copy{grid-column:1/-1;grid-row:1;text-align:center;max-width:860px;justify-self:center}
  .scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .intro-copy h1{max-width:30ch;margin-inline:auto}
  .scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .intro-copy p{max-width:64ch;margin-inline:auto}
  .scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .occasion-art{grid-column:1;grid-row:2;margin:0;align-self:center}
  .scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .campaign-content{grid-column:2;grid-row:2;margin:0}
  .scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .participation-section{grid-column:1;grid-row:3}
  .scene-page[data-scene-layout="duet"] .intro-copy{text-align:left;justify-self:stretch}
  .scene-page[data-scene-layout="duet"] .intro-copy :is(h1,p){margin-left:0}
  .scene-page[data-scene-layout="duet"] .campaign-content{grid-column:1}
  .scene-page[data-scene-layout="duet"] .occasion-art{grid-column:2}
  .scene-page[data-scene-layout="duet"] .participation-section{grid-column:2}
  .scene-page[data-scene-layout="timeline"] .campaign-main{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .scene-page[data-scene-layout="timeline"] .intro-copy{padding-bottom:16px;border-bottom:1px solid var(--scene-accent)}
  .scene-page[data-scene-layout="table"] .campaign-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;max-width:1050px;row-gap:14px;padding-top:24px;padding-bottom:24px}
  .scene-page[data-scene-layout="table"] .campaign-image{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:32px;align-items:center}
  .scene-page[data-scene-layout="table"] .intro-copy h1{max-width:18ch}
  .scene-page[data-scene-layout="table"] .campaign-content{grid-column:1;grid-row:2;max-width:820px;width:100%;justify-self:center;background:var(--scene-wash);padding:20px;border-radius:14px}
  .scene-page[data-scene-layout="table"] .participation-section{grid-column:1;grid-row:3}
  .scene-page[data-scene-layout="table"] #idea{height:82px;min-height:82px}
  .scene-page[data-scene-layout="care"] .campaign-image{padding:30px 28px 18px;background:var(--scene-wash);border-radius:14px}
  .scene-page[data-scene-layout="care"] .intro-copy h1{font-size:clamp(29px,2.8vw,38px);max-width:20ch}
  .scene-page[data-scene-layout="workshop"] .campaign-content{grid-column:1}
  .scene-page[data-scene-layout="workshop"] .campaign-image{grid-column:2;border-top:1px solid var(--scene-accent);padding-top:26px}
  .scene-page[data-scene-layout="workshop"] .participation-section{grid-column:2}
  .scene-page[data-scene-layout="journey"] .campaign-main{grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr)}
  .scene-page[data-scene-layout="journey"] .campaign-content{grid-column:1}
  .scene-page[data-scene-layout="journey"] .campaign-image{grid-column:2}
  .scene-page[data-scene-layout="journey"] .participation-section{grid-column:2}
  .scene-page[data-scene-layout="journey"] .intro-copy h1{max-width:20ch}
  .scene-page[data-scene-layout="quiet"] .campaign-main{max-width:1080px;column-gap:72px}
  .scene-page[data-scene-layout="quiet"] .intro-copy h1{font-size:clamp(28px,2.6vw,36px);font-weight:650;max-width:23ch;line-height:1.2}
  .scene-page[data-scene-layout="quiet"] .intro-copy p{line-height:1.65}
}

/* The second fold varies with the subject, without hiding crawlable copy. */
.scene-page[data-scene-layout="yearbook"] .birthday-examples{display:grid;gap:14px}
.scene-page[data-scene-layout="yearbook"] .birthday-example{background:var(--scene-wash);padding:20px;border:0;transform:rotate(-1deg)}
.scene-page[data-scene-layout="yearbook"] .birthday-example:nth-child(2){transform:rotate(1deg)}
.scene-page:is([data-scene-layout="letter"],[data-scene-layout="care"]) .birthday-example{padding:22px 0;font-style:italic;line-height:1.8}
.scene-page[data-scene-layout="stage"] .birthday-guide-method{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.scene-page[data-scene-layout="stage"] .birthday-example{padding-block:22px;border-bottom-color:var(--scene-accent)}
.scene-page[data-scene-layout="mixtape"] .birthday-example{padding:20px;background:var(--scene-wash);border:0;margin-bottom:12px}
.scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .birthday-guide-intro{text-align:center;margin-inline:auto}
.scene-page:is([data-scene-layout="invitation"],[data-scene-layout="duet"]) .birthday-guide-intro :is(h2,p){margin-inline:auto}
.scene-page[data-scene-layout="timeline"] .birthday-steps li{padding-bottom:18px;border-bottom:1px solid #d9dfe9}
.scene-page[data-scene-layout="table"] .birthday-guide-method{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.scene-page[data-scene-layout="table"] .birthday-example{padding:20px 22px;border:0;border-radius:14px;background:var(--scene-wash);margin-bottom:12px}
.scene-page[data-scene-layout="workshop"] .birthday-steps{padding-left:28px}
.scene-page[data-scene-layout="workshop"] .birthday-example{padding:20px 0;border-block-end:1px dashed var(--scene-accent)}
.scene-page[data-scene-layout="journey"] .birthday-guide-intro{padding-bottom:28px;border-bottom:1px solid #d9dfe9}
.scene-page[data-scene-layout="quiet"] .birthday-guide{max-width:960px}
.scene-page[data-scene-layout="quiet"] .birthday-guide-method{grid-template-columns:minmax(0,1fr);gap:38px}
.scene-page[data-scene-layout="quiet"] .birthday-examples{max-width:72ch}
.scene-page[data-scene-layout="quiet"] .birthday-example{line-height:1.85}

@media(max-width:760px){
  .scene-page .campaign-main{padding-top:10px}
  .scene-page .campaign-image{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:8px 12px;align-items:center;margin:0;padding:0;background:none;border:0;border-radius:0}
  .scene-page .intro-copy{display:contents}
  .scene-page .intro-copy h1{grid-column:1/-1;grid-row:1;font-size:clamp(23px,6vw,29px);line-height:1.14;max-width:none;margin:0}
  .scene-page .intro-copy p{grid-column:1;grid-row:2;font-size:13px;line-height:1.45;max-width:none;margin:0}
  .scene-page[data-scene-layout] .occasion-art{grid-column:2;grid-row:2;width:140px;height:104px;aspect-ratio:auto;margin:0;padding:0;align-self:center;background:none;border-radius:0}
  .scene-page .occasion-art :is(.birthday-hero-art,.occasion-detail-art){border-width:3px}
  .scene-page[data-scene-layout="mixtape"] .birthday-hero-art{width:61%;top:0}
  .scene-page[data-scene-layout="mixtape"] .occasion-detail-art{width:48%;border:3px solid #f8fafc;border-radius:4px 4px 14px 4px}
  .scene-page[data-scene-layout="timeline"] .birthday-hero-art{width:75%;top:0}
  .scene-page[data-scene-layout="timeline"] .occasion-detail-art{width:34%;bottom:0;border:3px solid #f8fafc}
  .scene-page[data-scene-layout="table"] .birthday-hero-art{width:85%;top:0}
  .scene-page[data-scene-layout="table"] .occasion-detail-art{width:38%;bottom:0;border:3px solid #f8fafc}
  .scene-page[data-scene-layout="invitation"] .birthday-hero-art{position:absolute;border-radius:44px 44px 8px 8px;object-position:50% 35%}
  .scene-page[data-scene-layout="duet"] .birthday-hero-art{position:absolute;border-radius:28px 6px 28px 6px}
  .scene-page .campaign-content{padding-top:14px}
  .scene-page .birthday-guide-method{grid-template-columns:minmax(0,1fr);gap:30px}
  .scene-page .birthday-guide-intro{text-align:left}
  .scene-page .birthday-guide-intro :is(h2,p){margin-inline:0}
  .scene-page .birthday-example{transform:none!important}
  .scene-page[data-scene-layout="quiet"] .intro-copy h1{font-weight:650}
  .scene-page[data-scene-layout="quiet"] .occasion-art{width:124px;justify-self:center}
  .scene-page:is([data-scene-layout="letter"],[data-scene-layout="care"]) .campaign-image{padding:12px;background:var(--scene-wash);border-radius:12px}
  .scene-page:is([data-scene-layout="mixtape"],[data-scene-layout="workshop"],[data-scene-layout="journey"]) .campaign-image{grid-template-columns:140px minmax(0,1fr)}
  .scene-page:is([data-scene-layout="mixtape"],[data-scene-layout="workshop"],[data-scene-layout="journey"]) .intro-copy p{grid-column:2}
  .scene-page:is([data-scene-layout="mixtape"],[data-scene-layout="workshop"],[data-scene-layout="journey"]) .occasion-art{grid-column:1}
  .scene-page:is([data-scene-layout="stage"],[data-scene-layout="timeline"],[data-scene-layout="workshop"]) .campaign-image{border-bottom:1px solid var(--scene-accent);padding-bottom:10px}
  .scene-page[data-scene-layout="invitation"] .intro-copy h1{text-align:center}
  .scene-page[data-scene-layout="duet"] .intro-copy h1{padding-bottom:10px;border-bottom:1px solid var(--scene-accent)}
  .scene-page[data-scene-layout="table"] .campaign-content{background:var(--scene-wash);padding:12px;margin-top:12px;border-radius:12px}
}
@media(max-width:760px) and (max-height:680px){
  .scene-page .campaign-main{padding-top:8px}
  .scene-page .campaign-image{grid-template-columns:minmax(0,1fr) 132px;gap:6px 10px}
  .scene-page[data-scene-layout] .occasion-art{width:132px;height:90px}
  .scene-page .intro-copy h1{font-size:23px}
  .scene-page .intro-copy p{font-size:12px;line-height:1.4}
  .scene-page .campaign-content{padding-top:10px}
  .scene-page:is([data-scene-layout="mixtape"],[data-scene-layout="workshop"],[data-scene-layout="journey"]) .campaign-image{grid-template-columns:132px minmax(0,1fr)}
}