/* 01 page composition, 02 entrance and idle motion. */
html{scroll-padding-top:0}
.base-scene#beginning{scroll-margin-top:88px}
.paper-scene{color:#576743;line-height:1.4;--body:'Noto Serif SC','Songti SC',SimSun,serif}
.paper-scene .canvas{width:min(100%,calc((100svh - 134px)*16/9));max-height:none}
.paper-scene .music-player{margin:0;padding:0;max-width:none;background:none;border-radius:0;text-align:left}
.paper-scene .play-button{padding:0;grid-row:auto;grid-column:1;align-self:center}
.paper-scene .track-copy{grid-column:2}
.paper-scene .track-title,.paper-scene .track-artist{margin:0}
.paper-scene .track-artist{margin-top:7px}
.paper-scene .music-player{grid-template-rows:auto auto;gap:10px 18px}
.paper-scene .track-timeline{margin:0;grid-row:2;grid-column:1/3}
.paper-scene .track-timeline span{white-space:nowrap}
.paper-scene .music-sentence{bottom:3%;height:12%;display:grid;place-items:center;letter-spacing:.04em}
.lyrics-preview{width:100%;display:grid;gap:6px;text-align:center;line-height:1.4}
.lyric-context{font-size:clamp(11px,1cqw,15px);color:#939986;min-height:1.4em}
.lyric-current{font-size:clamp(15px,1.5cqw,23px);color:#52633e;min-height:1.4em}
.lyrics-ribbon{position:fixed;z-index:65;bottom:12px;left:50%;translate:-50% 0;max-width:calc(100vw - 28px);width:max-content;display:flex;align-items:center;gap:14px;padding:6px 17px 6px 8px;border:1px solid #dfe3d5;background:#f7f5ecf2;box-shadow:0 4px 20px #25321b20;backdrop-filter:blur(12px);border-radius:30px;color:#536442;font-size:14px;line-height:1.5}
.lyrics-ribbon[hidden]{display:none}.lyrics-ribbon p{max-width:calc(100vw - 145px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.lyrics-ribbon button,.lyrics-ribbon a{width:34px;height:34px;display:grid;place-items:center;background:none;flex-shrink:0;font-family:Arial}.lyrics-ribbon button{border:1px solid #9ea78c;border-radius:50%}
.base-scene .title-line{display:block;max-width:100%;width:calc(var(--characters)*1em);line-height:1}
.base-scene .title-line:first-child{margin-left:0}
.base-scene .title-vector{width:100%;height:auto;display:block;overflow:visible}
.base-scene .script-vector{display:inline-block;max-width:100%;vertical-align:middle;overflow:visible}
.base-scene .glyph{transform-box:fill-box}
.base-scene .hand-title,.base-scene .scene-title,.base-scene .scene-line{clip-path:none!important;transition:none}
.base-scene h1{rotate:-3deg;transform:none}
.base-scene .hero-copy h1{width:100%;max-width:440px}
.base-scene .hero-copy h1 .title-line:nth-child(2){margin-left:.45em}
.base-scene .hero-main-photo{rotate:-6deg;transform:none}
.base-scene .hero-small-photo{rotate:8deg;transform:none}
.base-scene .hero-handwriting{rotate:8deg;transform:none}
.base-scene .sunset-detail{rotate:-4deg;transform:none}
.base-scene .scene-title .title-line:nth-child(2){margin-left:.6em}
.base-idle-photo{height:100%;width:100%;position:relative;animation:photo 4.5s ease-in-out infinite}
.base-idle-photo figcaption{bottom:-28px!important}
.hero-small-photo .base-idle-photo figcaption{bottom:-23px!important}
.base-scene .reveal,.motion-ready .base-scene .reveal,.motion-ready .base-scene .reveal.is-visible{transition:none}
.base-scene .scene-background,.base-scene .promise-background{transform:none}
.base-scene .scene-caption{opacity:1}
.base-scene .card-one{rotate:-9deg;transform:none}
.base-scene .card-two{rotate:6deg;transform:none}
.base-scene .card-three{rotate:-5deg;transform:none}
.base-scene:not(.is-active) [class*='idle-'],.base-scene:not(.entrance-complete) [class*='idle-']{animation-play-state:paused}
.base-scene.is-active.entrance-complete [class*='idle-']{animation-play-state:running}
.base-scene .scroll-mark::before{animation:wiggle 2.4s ease-in-out infinite}
/* The cutout's face is at the left: the flower stays above the photo's far-right corner. */
.paper-scene .collage-flower{left:auto;right:-1%;top:1%;width:10%;height:19%;z-index:6}
.paper-scene .collage-script{margin:0;letter-spacing:normal;font-size:inherit}
.paper-scene .names-type p{line-height:1.8}
.paper-scene .names-type h2{margin:3% 0 0;font-size:1.5cqw}
.paper-scene .head{display:block}
.paper-scene .head p{position:absolute;top:calc(100% + 14px);left:0;right:0;margin:0;padding:5px 3px;text-align:center}
/* Copy lives in the courtyard's empty right edge, outside the couple's face area. */
.base-scene.promise .promise-copy{right:3.5%;top:24%;width:24%;max-width:380px}
.base-scene.promise .promise-copy h2{font-size:clamp(32px,3.5vw,62px);margin:22px 0}
.base-scene.promise .promise-copy>p:not(.eyebrow){font-size:clamp(12px,1vw,16px)}
.base-scene.promise .promise-copy .promise-names{font-size:clamp(16px,1.3vw,22px)!important;margin-top:20px}
.base-scene.promise .promise-copy h2 .title-line:nth-child(2){margin-left:0}
.base-scene.promise .promise-background{object-position:center center}
.base-scene.promise .promise-shade{background:linear-gradient(90deg,transparent 62%,#27160f9c 100%)}
.base-scene.promise .promise-seal{right:5%;bottom:7%;width:48px;height:48px;font-size:30px}
/* Show the entire source photo; a 24px sky-edge transition never reaches the faces. */
.base-scene.closing .closing-landscape{height:auto;max-width:1600px;margin:30px auto 0;mask-image:none;overflow:hidden}
.base-scene.closing .closing-landscape img{height:auto;width:100%;object-fit:contain;object-position:center}
.base-scene.closing .closing-landscape::before{content:'';position:absolute;top:0;left:0;right:0;height:24px;background:linear-gradient(#e9ecdf,transparent);pointer-events:none;z-index:1}
.base-scene.closing h2 .title-line{margin-left:auto;margin-right:auto}
.base-scene .album-heading .title-line,.base-scene .lake-heading .title-line,.base-scene .ivory-heading .title-line,.base-scene .invitation-title .title-line{margin-left:auto;margin-right:auto}
.base-scene .invitation-title .title-line:nth-child(2){margin-left:auto}
.reduced-motion .base-scene .glyph{opacity:1!important;clip-path:none!important}
.reduced-motion .base-scene [style*='transform']{opacity:1!important;transform:none!important}
@media(max-aspect-ratio:4/5){
 .paper-scene .canvas{width:100%;height:100%}
 .paper-scene .music-card{bottom:17%;height:25%}
 .paper-scene .music-people,.paper-scene .record-wrap{bottom:40%}
 .paper-scene .music-sentence{bottom:1%;height:14%}
 .lyric-context{font-size:11px}.lyric-current{font-size:14px}
 .paper-scene .collage-flower{left:auto;right:-1%;top:3%;width:19%;height:15%}
 .paper-scene .collage-script{right:0;bottom:3%;width:64%;height:12%}
 .paper-scene .names-type h2{font-size:4cqw}
 .paper-scene .story-people{width:100%}
 .paper-scene .collage-people{width:100%}
 .paper-scene .collage-photo{left:8%;width:90%;top:17%;height:39%}
 .base-scene.promise .promise-stage{min-height:0;height:100svh;background:#301812}
 .base-scene.promise .promise-background{height:62%;object-fit:contain;inset:0 0 auto;background:#301812}
 .base-scene.promise .promise-shade{background:linear-gradient(transparent 56%,#301812 62%)}
 .base-scene.promise .promise-copy{left:7%;right:7%;top:auto;bottom:4%;width:auto;max-width:none;text-align:center}
 .base-scene.promise .promise-copy h2{font-size:clamp(25px,6.8vw,39px);display:flex;justify-content:center;gap:.65em;margin:10px 0}
 .base-scene.promise .promise-copy .title-line{max-width:45%;margin:0!important}
 .base-scene.promise .promise-copy .eyebrow{font-size:10px}
 .base-scene.promise .promise-copy>p:not(.eyebrow){font-size:12px;line-height:1.8}
 .base-scene.promise .promise-copy .promise-names{font-size:17px!important;margin-top:10px}
 .base-scene.promise .promise-seal{right:5%;top:4%;bottom:auto;width:37px;height:37px;font-size:25px}
 .base-scene.closing .closing-landscape{max-width:650px}
}
@media(max-width:700px){
 .base-scene#beginning{scroll-margin-top:72px}
 .base-scene .scene-title .title-line:nth-child(2){margin-left:.3em}
 .base-scene h1 .title-line{margin-left:auto;margin-right:auto}
 .base-scene .hero-copy h1{max-width:none}
 .base-scene .hero-copy h1 .title-line:nth-child(2){margin-left:auto}
 .base-scene .hero-main-photo{rotate:-5deg}
 .base-idle-photo figcaption{bottom:-23px!important}
 .base-scene .card-one .base-idle-photo figcaption,.base-scene .card-two .base-idle-photo figcaption,.base-scene .card-three .base-idle-photo figcaption{bottom:-21px!important}
 .lyrics-ribbon{bottom:8px;gap:8px;padding-right:10px;font-size:12px}
}
@media(max-height:550px) and (min-aspect-ratio:4/5){
 .paper-scene .stage{padding:25px 5% 35px}
 .paper-scene .canvas{width:min(100%,calc((100svh - 60px)*16/9));max-width:1200px;height:auto}
 .paper-scene .track-title{font-size:12px}.paper-scene .track-artist{font-size:9px}.paper-scene .track-timeline{font-size:9px}
 .paper-scene .music-sentence{bottom:1%;height:14%}
 .lyric-context{font-size:8px}.lyric-current{font-size:11px}
 .base-scene.promise .promise-copy{top:10%;width:27%}
 .base-scene.promise .promise-copy h2{font-size:34px;margin:8px 0}
 .base-scene.promise .promise-copy .eyebrow{font-size:10px}
 .base-scene.promise .promise-copy>p:not(.eyebrow){font-size:11px;line-height:1.8}
}