/* The Signature — one continuous ivory paper for the whole page, light envelope,
   and transparent gold/blush flowers beside the column on wide screens. */
:root{--bg:#faf5ea;--paper:#faf5ea}

/* Text on the light ivory envelope (the old envelope was dark, so the text was white). */
#envelope-overlay{background:var(--paper)}
#envelope-ui{color:#6b5238;text-shadow:0 1px 10px rgba(255,251,244,.95);background:radial-gradient(ellipse 55% 60% at 50% 55%,rgba(250,245,234,.8),transparent 75%)}
.env-exclusive{color:#7a5d3c;text-shadow:0 1px 10px rgba(255,251,244,.95)}
.env-hint{color:#6b5238}
#open-btn{border-color:rgba(122,93,60,.45);background:rgba(255,252,246,.7);color:#6b5238}
#skip-btn{color:#7a5d3c}

/* One paper, no stacked backgrounds: the column and the sections are see-through. */
body{background:var(--paper)}
#site{background:transparent;box-shadow:none}
.countdown-section,.story,.program,.places,.dresscode,.info,.proposal,.rsvp,footer{background:transparent}
.studio-credit{background:transparent;border-top:1px solid #cfba9833}
/* The hero film melts into the paper instead of ending in a hard edge. */
.hero-shade{background:linear-gradient(180deg,rgba(250,245,234,.8),rgba(250,245,234,.5) 27%,transparent 48%,transparent 74%,rgba(250,245,234,.75) 90%,var(--paper))}

@media (min-width:540px){
  #envelope-overlay{box-shadow:none}
  #envelope-overlay #envelope-poster,#envelope-overlay #envelope-video{
    -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 89%,transparent),linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(transparent,#000 8%,#000 89%,transparent),linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-composite:intersect}
  #site{z-index:1}
  .hero{background:transparent}
  #hero-video{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  /* Flower strips keep their proportions and sit right next to the 480 px column. */
  body::before,body::after{content:"";position:fixed;top:0;bottom:0;width:18.15vh;z-index:0;pointer-events:none;background:center/100% 100% no-repeat}
  body::before{right:calc(50% + 236px);background-image:url('../assets/flora-left.webp')}
  body::after{left:calc(50% + 236px);background-image:url('../assets/flora-right.webp')}
}