/* A full-bleed portrait emerging through light. Only this chapter owns these timings.
   Palette: lake #143c4f, mist #e6eee7, ivory #faf4e8, gold #c8ab6e.
   Cormorant introduces, Pinyon signs, EB Garamond tells their story.
   The scene stays in normal flow; time, never scroll distance, opens it. */
#story[data-couple-scene]{--couple-reveal:1;--couple-ink:#143c4f;--couple-paper:#faf4e8;position:relative;isolation:isolate;padding:0;background:var(--couple-paper);overflow:clip;color:var(--couple-ink)}
#story[data-couple-scene] .story-folio{display:block;position:relative;width:100%;max-width:none;margin:0;container-type:normal;filter:none}
#story[data-couple-scene] .story-folio::before{content:none}
#story[data-couple-scene] .couple-reveal{position:relative;isolation:isolate;width:100%;height:clamp(680px,66vw,980px);margin:0;padding:0;overflow:hidden;background:linear-gradient(180deg,#faf4e8,#eff0e5 40%,#dce5dc 72%,#faf4e8)}
#story[data-couple-scene] .couple-reveal::before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,#faf4e8 0%,#faf4e8bf 13%,#faf4e800 32%,transparent 64%,#faf4e83d 76%,#faf4e8d9 91%,#faf4e8 100%)}
#story[data-couple-scene] .finale-heading{position:absolute;z-index:4;top:clamp(39px,4.5vw,66px);inset-inline:24px;width:auto;max-width:760px;margin:0 auto;text-align:center;color:var(--couple-ink)}
#story[data-couple-scene] .couple-prelude{margin:0 0 7px;font:italic 400 clamp(15px,1.4vw,19px)/1.4 var(--font-body);color:#547073;text-shadow:0 1px 10px #fffef4}
#invitation-page #story[data-couple-scene] h2{margin:0;font:400 clamp(36px,4.1vw,59px)/1.1 var(--font-display);letter-spacing:-.025em;color:var(--couple-ink);text-shadow:0 2px 18px #fffdf0;overflow-wrap:anywhere}
#story[data-couple-scene] .couple-portrait{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:hidden;transform:none;clip-path:none;mask-image:linear-gradient(to top,#000 0%,#000 calc(var(--couple-reveal)*135% - 22%),transparent calc(var(--couple-reveal)*135% + 15%));background:transparent}
#story[data-couple-scene] .couple-portrait-fallback,#story[data-couple-scene] .story-art #story-photo{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 50%;transform:none;filter:none;transition:opacity .45s ease}
#story[data-couple-scene] .couple-portrait-fallback{opacity:1}
#story[data-couple-scene] .story-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;box-shadow:none;opacity:0;background:#e6eee7;transition:opacity .45s ease}
#story[data-couple-scene][data-couple-photo="custom"] .story-art{opacity:1}
#story[data-couple-scene][data-couple-photo="custom"] .couple-portrait-fallback{opacity:0;visibility:hidden}
#story[data-couple-scene][data-couple-photo="custom"] .story-art #story-photo{object-fit:contain}
#story[data-couple-scene] .couple-names{position:absolute;z-index:4;bottom:10.5%;inset-inline:22px;display:flex;align-items:center;justify-content:center;gap:clamp(13px,2.5vw,38px);max-width:950px;margin:auto;opacity:clamp(0,calc((var(--couple-reveal) - .38)*2.25),1);transform:translate3d(0,calc((1 - var(--couple-reveal))*24px),0);text-shadow:0 2px 20px #faf4e8,0 1px 6px #faf4e8}
#story[data-couple-scene] .couple-name{position:relative;min-width:0;max-width:43%;padding:7px 0;margin:0;font:400 clamp(55px,6vw,88px)/1.14 var(--font-script);color:var(--couple-ink);overflow-wrap:anywhere;text-wrap:balance;transform:none;text-align:center}
#story[data-couple-scene] .couple-name[data-couple-name="long"]{font-size:clamp(44px,4.3vw,62px);line-height:1.18}
#story[data-couple-scene] .couple-amp{position:relative;flex:0 0 auto;align-self:center;font:italic 400 clamp(25px,3vw,38px)/1 var(--font-display);color:#9b7839}
#story[data-couple-scene] .story-copy{position:relative;z-index:3;width:100%;max-width:660px;min-height:0;padding:0 38px 77px;margin:0 auto;text-align:center}
#story[data-couple-scene] .couple-thread{display:block;width:1px;height:39px;margin:0 auto 24px;background:linear-gradient(transparent,#c8ab6e)}
#story[data-couple-scene] .story-copy>p[data-bind="story.text"]{font:400 clamp(19px,1.9vw,23px)/1.65 var(--font-body);color:#3f6065;margin:0 auto 24px;white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}
#story[data-couple-scene] #story-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:7px 25px;font:italic 400 15px/1.5 var(--font-body);margin:0 0 21px;color:#6a7970}
#story[data-couple-scene] #story-tags>span+span::before{content:"·";color:#a4884d;margin-right:25px}
#story[data-couple-scene] #story-tags:empty{display:none}
#story[data-couple-scene] .story-hashtag{margin:0;font:400 15px/1.5 var(--font-body);color:#8b703e;overflow-wrap:anywhere}
@media(max-width:699px){
  #story[data-couple-scene] .couple-reveal{height:clamp(615px,160vw,790px)}
  #story[data-couple-scene] .finale-heading{top:36px;inset-inline:20px}
  #story[data-couple-scene] .couple-prelude{font-size:15px;margin-bottom:6px}
  #invitation-page #story[data-couple-scene] h2{font-size:clamp(34px,8.8vw,44px)}
  #story[data-couple-scene] .couple-names{bottom:12%;inset-inline:21px;gap:17px}
  #story[data-couple-scene] .couple-name{font-size:clamp(45px,12vw,65px)}
  #story[data-couple-scene] .couple-name[data-couple-name="long"]{font-size:clamp(31px,8vw,44px)}
  #story[data-couple-scene] .couple-amp{font-size:26px}
  #story[data-couple-scene] .story-copy{max-width:495px;padding:0 35px 56px}
  #story[data-couple-scene] .couple-thread{height:31px;margin-bottom:24px}
  #story[data-couple-scene] .story-copy>p[data-bind="story.text"]{font-size:19px;line-height:1.6;margin-bottom:23px}
  #story[data-couple-scene] #story-tags{font-size:14px;gap:5px 18px}
  #story[data-couple-scene] #story-tags>span+span::before{margin-right:18px}
  #story[data-couple-scene] .story-hashtag{font-size:14px}
}
@media(max-width:359px){
  #story[data-couple-scene] .couple-reveal{height:590px}
  #story[data-couple-scene] .couple-names{inset-inline:17px;gap:11px}
  #story[data-couple-scene] .couple-name{font-size:43px}
  #story[data-couple-scene] .couple-name[data-couple-name="long"]{font-size:27px}
  #story[data-couple-scene] .story-copy{padding-inline:27px}
}
@media(prefers-reduced-motion:reduce){
  #story[data-couple-scene]{--couple-reveal:1!important}
  #story[data-couple-scene] .couple-portrait{mask-image:none}
}
@media print{
  #story[data-couple-scene]{--couple-reveal:1!important;break-inside:avoid}
  #story[data-couple-scene] .couple-portrait{mask-image:none}
  #story[data-couple-scene] .couple-reveal{height:650px}
}
