/* The Courtyard: traditional invitation geometry, photo-led rather than illustration-led. */
.site-header{
  height:78px;
  padding:0 var(--space);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--ivory);
  border-bottom:1px solid #d9cfba;
  position:relative;
  z-index:2
}
.wordmark{
  font:2rem var(--display);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.2rem
}
.wordmark span{
  font:1.2rem var(--serif);
  color:#8b6b35
}
.site-header nav{
  display:flex;
  align-items:center;
  gap:2.1rem;
  font:1.05rem var(--serif);
  font-weight:600
}
.site-header nav a{
  display:inline-flex;
  align-items:center;
  text-decoration:none
}
.site-header nav a:hover{
  color:#83612f
}
.nav-rsvp{
  border:1px solid var(--forest);
  padding:0 1.3rem
}
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:760px;
  background:var(--forest);
  color:var(--ivory);
  overflow:hidden
}
.hero-copy{
  text-align:center;
  align-self:center;
  padding:2.8rem 2rem 3.2rem;
  position:relative
}
.hero-copy>.ganesh{
  width:50px;
  height:50px
}
.invocation{
  font-size:.86rem;
  line-height:1.8;
  color:var(--gold-light);
  margin:.4rem 0 2rem
}
.hero-copy .eyebrow{
  font-size:.8rem;
  color:#e4ddc9;
  letter-spacing:.12em;
  margin-bottom:1.2rem
}
.hero h1{
  font:clamp(5rem,7.6vw,8.2rem)/.85 var(--display);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:.6rem 0 .7rem
}
.hero h1 i{
  font:italic 2.2rem/1 var(--serif);
  color:var(--gold-light);
  margin:.2rem 0 .8rem
}
.hero-invite{
  font:1.15rem var(--serif);
  margin:1.5rem 0 0
}
.hero .ornament{
  margin:1.15rem auto
}
.hero-date{
  font:1.7rem var(--serif);
  margin-bottom:.8rem
}
.hero-date span{
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.15em;
  margin:0 .5rem
}
.hero-venue{
  font:1rem/1.7 var(--body);
  color:#e0dece
}
.hero-image{
  position:relative;
  min-width:0;
  overflow:hidden
}
.hero-image>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  position:absolute
}
.hero-image:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#0c241c88,transparent 40%)
}
.hero-image-frame{
  position:absolute;
  inset:22px;
  border:1px solid #ebdab788;
  z-index:1;
  pointer-events:none
}
.image-caption{
  position:absolute;
  bottom:2.5rem;
  left:0;
  right:0;
  text-align:center;
  z-index:1;
  font:2.4rem var(--display);
  color:#fff3d9
}
.welcome{
  position:relative;
  overflow:hidden;
  text-align:center;
  background-image:url('grain.svg')
}
.welcome h2{
  max-width:650px;
  margin:auto
}
.hindi-line{
  color:#826339;
  font-size:1rem;
  margin-bottom:1.4rem
}
.welcome .intro{
  font:1.3rem/1.6 var(--serif);
  max-width:47ch;
  margin:1.6rem auto
}
.welcome .ornament{
  margin:2rem auto
}
.families{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:2rem;
  align-items:center;
  max-width:960px;
  margin:2.4rem auto
}
.family-role{
  font:1rem var(--serif);
  margin:0 0 .5rem;
  color:var(--muted)
}
.families h3{
  font-size:2.35rem;
  margin-bottom:.7rem
}
.families p:last-child{
  font-size:.85rem
}
.family-and{
  font:3.5rem var(--display);
  color:#8b6b35
}
.elders{
  max-width:60ch;
  margin:1rem auto 0;
  font:1rem/1.6 var(--serif);
  color:var(--muted)
}
.welcome-botanical{
  position:absolute;
  width:155px;
  height:270px;
  color:#80977f;
  opacity:.4;
  bottom:2rem
}
.botanical-left{
  left:-25px;
  transform:rotate(10deg)
}
.botanical-right{
  right:-25px;
  transform:scaleX(-1) rotate(10deg)
}
.date-section{
  background:var(--paper);
  display:grid;
  grid-template-columns:minmax(250px,380px) minmax(0,1fr);
  align-items:center;
  gap:clamp(3rem,8vw,8rem);
  padding-left:clamp(2rem,12vw,12rem);
  padding-right:clamp(2rem,12vw,12rem)
}
.date-photo{
  border-radius:48% 48% 0 0;
  padding:12px;
  border:1px solid #ac996b;
  position:relative
}
.date-photo:after{
  content:'';
  position:absolute;
  inset:20px;
  border:1px solid #ded2b5;
  border-radius:48% 48% 0 0;
  pointer-events:none
}
.date-photo img{
  border-radius:48% 48% 0 0;
  aspect-ratio:3/4;
  object-fit:cover;
  width:100%
}
.date-copy{
  text-align:center
}
.date-copy>p:not(.eyebrow){
  font:1.1rem/1.6 var(--serif);
  margin:1.2rem auto
}
.date-copy h2{
  font-size:clamp(2.4rem,3.6vw,3.8rem)
}
.scratch-wrap{
  width:min(100%,350px);
  height:120px;
  position:relative;
  margin:1.5rem auto .2rem;
  background:var(--ivory);
  border:1px solid var(--gold)
}
.revealed-date{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:.5rem
}
.revealed-date span{
  font:1.45rem var(--display)
}
.revealed-date strong{
  font:2rem var(--serif)
}
#scratch{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:pan-y;
  cursor:crosshair;
  display:none
}
.reveal-date{
  font-size:.95rem
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:1.7rem 0 2rem
}
.countdown>div{
  border-right:1px solid #bdb496;
  display:flex;
  flex-direction:column;
  align-items:center
}
.countdown>div:last-child{
  border:0
}
.countdown b{
  font:2.5rem/1.1 var(--serif);
  font-variant-numeric:tabular-nums
}
.countdown span{
  font:400 .8rem var(--serif);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:.6rem
}
.story-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3.5vw,3.5rem)
}
.story-photo{
  padding:9px 9px 35px;
  background:#fffef8;
  box-shadow:0 3px 12px #173e3614;
  transform:rotate(-3deg);
  margin-bottom:2rem
}
.story-chapter:nth-child(2){
  padding-top:3rem
}
.story-chapter:nth-child(2) .story-photo{
  transform:rotate(2deg)
}
.story-chapter:nth-child(3) .story-photo{
  transform:rotate(-1deg)
}
.story-photo img{
  aspect-ratio:4/5;
  object-fit:cover;
  width:100%
}
.chapter-mark{
  font:1rem var(--serif);
  color:#88662f;
  display:block;
  margin:.5rem 0
}
.story-chapter h3{
  font-size:2rem;
  margin-bottom:1rem
}
.story-chapter>p{
  font-size:.92rem;
  color:var(--muted);
  line-height:1.8;
  max-width:36ch
}
.celebrations{
  background:#e9eee5;
  text-align:center
}
.celebrations .section-heading>.lotus{
  margin-bottom:1.5rem
}
.events-grid{
  max-width:1220px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem 2rem;
  margin:auto;
  text-align:left
}
.event-card{
  min-width:0;
  background:var(--ivory);
  border:1px solid #c3cdbd;
  display:flex;
  flex-direction:column
}
.event-photo{
  height:220px;
  position:relative;
  overflow:hidden
}
.event-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 44%
}
.event-photo:after{
  content:'';
  inset:0;
  position:absolute;
  background:linear-gradient(0deg,#112d2288,transparent 70%)
}
.event-date{
  position:absolute;
  z-index:1;
  top:14px;
  left:14px;
  background:var(--ivory);
  color:var(--forest);
  width:56px;
  height:67px;
  text-align:center;
  font:1rem var(--serif);
  text-transform:uppercase;
  line-height:1.2;
  padding-top:6px
}
.event-date b{
  display:block;
  font-size:1.95rem;
  font-weight:500
}
.event-hindi{
  position:absolute;
  bottom:1rem;
  left:1.5rem;
  font-size:1rem;
  color:#fff7e6;
  z-index:1
}
.event-info{
  padding:1.5rem 1.6rem;
  flex:1;
  display:flex;
  flex-direction:column
}
.event-day{
  font:500 .95rem var(--serif);
  color:#5c6658;
  margin-bottom:.65rem
}
.event-info h3{
  font-size:2.5rem
}
.event-time{
  font:1.1rem var(--serif);
  margin:.5rem 0 1.2rem
}
.event-description{
  font:.88rem/1.8 var(--body);
  color:#4f5a4d;
  flex:1;
  margin-bottom:1.5rem
}
.venue-name{
  font:600 1.2rem var(--serif);
  margin-bottom:.5rem
}
.dress{
  font:.8rem/1.5 var(--body);
  color:#65705f;
  min-height:2.4em
}
.event-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #d5d6c6;
  padding-top:.6rem
}
.calendar-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  min-height:44px
}
.calendar-icon:hover{
  color:#8b6b35
}
.celebrations>.button{
  margin-top:1rem
}
.photo-interlude{
  position:relative;
  min-height:480px;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--forest-dark);
  color:var(--ivory)
}
.photo-interlude>img{
  height:100%;
  width:100%;
  max-height:600px;
  object-fit:cover;
  object-position:center 35%;
  filter:brightness(.85)
}
.photo-interlude>div{
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:3rem 2rem
}
.photo-interlude p{
  font:3rem/1.2 var(--serif)
}
.photo-interlude p span{
  font:4.3rem/1.4 var(--display);
  color:var(--gold-light)
}
.interlude-caption{
  font:.9rem var(--serif);
  letter-spacing:.08em
}
.travel{
  text-align:center
}
.travel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
  max-width:1100px;
  margin:0 auto 2.5rem;
  text-align:left
}
.travel-grid h3{
  font-size:1.9rem;
  margin-bottom:1rem
}
.travel-grid p{
  font-size:.9rem;
  color:var(--muted)
}
.memories{
  background:var(--paper);
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:3rem;
  align-items:center;
  overflow:hidden
}
.memories h2{
  font-size:3.5rem;
  margin-bottom:1.5rem
}
.memories-title>p:last-child{
  font:1.1rem/1.6 var(--serif)
}
.memory-strip{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
  align-items:center
}
.memory-strip img{
  aspect-ratio:3/4;
  object-fit:cover;
  width:100%
}
.memory-strip img:nth-child(2){
  margin-top:3rem
}
.blessings{
  text-align:center
}
.blessings .section-heading>.lotus{
  margin-bottom:1rem
}
.blessing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
  max-width:1100px;
  margin:0 auto 2.5rem
}
.blessing{
  margin:0;
  text-align:center;
  padding:1.5rem .6rem;
  border-top:1px solid var(--gold)
}
.blessing>span{
  font:4rem/1 var(--display);
  color:#92713a
}
.blessing p{
  font:1.3rem/1.65 var(--serif);
  overflow-wrap:anywhere
}
.blessing cite{
  font:normal .9rem var(--body);
  color:var(--muted)
}
.rsvp{
  background:var(--paper);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center
}
.rsvp-art{
  border:1px solid #b5a379;
  min-height:580px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
  overflow:hidden
}
.rsvp-art>.branch{
  position:absolute;
  width:210px;
  height:390px;
  left:-70px;
  top:20px;
  color:#80977f;
  opacity:.7
}
.rsvp-art>p{
  font-size:2.6rem;
  color:#8c723e;
  position:relative
}
.rsvp-art>span{
  font:3.3rem/1.2 var(--serif);
  text-align:center;
  position:relative
}
.rsvp-content>p:not(.eyebrow){
  font:1.2rem/1.5 var(--serif);
  margin:1.5rem 0
}
.rsvp-content h2{
  font-size:3.8rem
}
.share{
  text-align:center;
  padding-top:4rem;
  padding-bottom:4rem
}
.share h2{
  font-size:3rem
}
.share-actions{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin:2rem 0 0
}
.share #share-status{
  font-size:.9rem;
  margin-top:1rem
}
.footer{
  position:relative;
  text-align:center;
  background:var(--forest);
  color:var(--ivory);
  padding:4rem 1.5rem 5.5rem
}
.footer>.ganesh{
  margin-bottom:1rem
}
.footer>p:first-of-type{
  font:1.4rem var(--serif)
}
.footer-names{
  font:clamp(3.5rem,6vw,6rem)/1.3 var(--display);
  color:#f7f0dc
}
.hashtag{
  font:1.1rem var(--serif);
  color:var(--gold-light);
  margin:1rem 0
}
.footer-thanks{
  font-size:.85rem;
  color:#e0e1d4
}
.footer .text-link{
  font-size:1rem;
  color:var(--gold-light)
}
.demo-notice{
  font:.76rem/1.7 var(--body);
  color:#d0d8cc;
  margin:2.5rem 0 1.5rem
}
.seller-credit{
  font:.8rem var(--serif);
  color:#d1d8cb
}
.seller-credit>span{
  margin:0 .6rem;
  color:var(--gold)
}
.gate{
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  inset:0;
  padding:1rem;
  margin:0;
  border:0;
  overflow:auto;
  background:var(--forest);
  color:var(--ivory);
  text-align:center;
  z-index:50
}
.gate::backdrop{
  background:var(--forest)
}
.gate[open]{
  display:flex;
  align-items:center;
  justify-content:center
}
.gate-inner{
  padding:1.3rem;
  position:relative;
  z-index:1;
  width:min(620px,100%);
  margin:auto
}
.gate-inner .ganesh{
  width:48px;
  height:48px
}
.gate-inner .invocation{
  margin:.1rem 0 1.6rem
}
.gate-kicker{
  font:.85rem var(--serif);
  text-transform:uppercase;
  letter-spacing:.22em;
  margin:0 0 1rem
}
.gate-monogram{
  font:7rem/.9 var(--display);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:105px;
  color:#f0e4c7
}
.gate-monogram>span{
  font:2.5rem var(--serif)
}
.gate-inner>.ornament{
  margin:.8rem auto 1.1rem
}
.gate h2{
  font:2.6rem/1.1 var(--serif);
  letter-spacing:-.02em
}
.gate-names{
  font:2.1rem var(--display);
  margin:1.1rem 0 .4rem
}
.gate-date{
  font:1.1rem var(--serif);
  margin-bottom:1.8rem
}
.gate-date>span{
  display:block;
  font-size:.9rem;
  margin-top:.3rem;
  color:#cfd6c6
}
.gate-note{
  font:.8rem var(--serif);
  margin:1.5rem 0 0;
  color:#d5dac9
}
.gate-leaf{
  position:absolute;
  width:calc(50% - 1.1rem);
  top:1rem;
  bottom:1rem;
  border:1px solid #c7a36775;
  pointer-events:none;
  display:flex;
  align-items:center;
  padding:1rem
}
.gate-leaf:after{
  content:'';
  position:absolute;
  inset:8px;
  border:1px solid #c7a36733
}
.gate-leaf-left{
  left:1rem;
  justify-content:flex-start
}
.gate-leaf-right{
  right:1rem;
  justify-content:flex-end
}
.gate-leaf>.branch{
  width:200px;
  height:370px;
  color:#9eaa85;
  opacity:.3
}
.gate-leaf-right>.branch{
  transform:scaleX(-1)
}
.gate-opening{
  animation:gate-fade .65s var(--ease) forwards
}
.gate-opening .gate-leaf-left{
  animation:door-left .65s var(--ease) forwards
}
.gate-opening .gate-leaf-right{
  animation:door-right .65s var(--ease) forwards
}
.gate-opening .gate-inner{
  animation:gate-fade .4s var(--ease) forwards
}
@keyframes door-left{
  to{
    transform:translateX(-85%)
  }
}
@keyframes door-right{
  to{
    transform:translateX(85%)
  }
}
@keyframes gate-fade{
  to{
    opacity:0
  }
}
.petals{
  pointer-events:none;
  position:absolute;
  inset:0;
  overflow:hidden
}
.petals i{
  width:10px;
  height:17px;
  position:absolute;
  top:-30px;
  left:var(--x);
  background:#e2d0a0;
  border-radius:70% 5% 70% 10%;
  opacity:0;
  animation:petal-fall 4.8s var(--delay) ease-in-out 1
}
.petals i:nth-child(1){
  --x:6%;
  --delay:.2s
}
.petals i:nth-child(2){
  --x:23%;
  --delay:.8s
}
.petals i:nth-child(3){
  --x:40%;
  --delay:1.3s
}
.petals i:nth-child(4){
  --x:56%;
  --delay:.5s
}
.petals i:nth-child(5){
  --x:74%;
  --delay:1.6s
}
.petals i:nth-child(6){
  --x:91%;
  --delay:1s
}
@keyframes petal-fall{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) rotate(0)
  }
  10%,80%{
    opacity:.6
  }
  100%{
    transform:translate3d(55px,740px,0) rotate(220deg);
    opacity:0
  }
}
body:not(.invitation-open) .petals i{
  animation-play-state:paused
}
@media(min-width:1600px){
  .hero{
    min-height:900px
  }
  .hero-copy{
    padding:4rem
  }
  .hero h1{
    font-size:9rem
  }
}
@media(max-width:1000px){
  .hero{
    min-height:720px
  }
  .hero h1{
    font-size:6rem
  }
  .hero-copy{
    padding:2rem 1rem
  }
  .events-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .date-section{
    padding-left:3rem;
    padding-right:3rem;
    gap:3rem
  }
  .rsvp{
    gap:3rem
  }
  .rsvp-art{
    min-height:550px
  }
  .rsvp-art>span{
    font-size:2.7rem
  }
  .memories{
    grid-template-columns:1fr;
    gap:1.5rem
  }
  .memories-title{
    text-align:center
  }
  .memory-strip{
    max-width:850px;
    width:100%;
    margin:auto
  }
  .travel-grid{
    gap:1.5rem
  }
  .blessing-grid{
    gap:1.2rem
  }
}
@media(max-width:650px){
  .site-header{
    height:64px;
    padding:0 1.4rem
  }
  .wordmark{
    font-size:1.8rem
  }
  .site-header nav{
    gap:1.1rem;
    font-size:1rem
  }
  .site-header nav a:nth-child(2){
    display:none
  }
  .nav-rsvp{
    padding:0 .8rem
  }
  .hero{
    display:block;
    min-height:810px;
    color:#fff7e8
  }
  .hero-image{
    position:absolute;
    inset:0;
    z-index:0
  }
  .hero-image>img{
    object-position:center center
  }
  .hero-image:after{
    background:linear-gradient(0deg,#0a241cf2 0%,#102d28bc 35%,#102d2822 85%)
  }
  .hero-image-frame{
    inset:14px
  }
  .image-caption{
    display:none
  }
  .hero-copy{
    z-index:1;
    min-height:810px;
    padding:1.6rem 1.5rem 2.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end
  }
  .hero-copy>.ganesh{
    position:absolute;
    top:1.4rem;
    width:42px;
    height:42px;
    color:#f2dab0
  }
  .hero-copy>.invocation{
    position:absolute;
    top:4rem;
    margin:0;
    font-size:.78rem;
    color:#fff3d8;
    text-shadow:0 1px 8px #061b12
  }
  .hero-copy>.eyebrow{
    margin-top:18rem;
    margin-bottom:1rem;
    color:#f6ecd4;
    text-shadow:0 1px 8px #061b12
  }
  .hero h1{
    font-size:5.4rem;
    line-height:.8;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:.65rem;
    row-gap:.35rem;
    max-width:360px;
    width:100%;
    padding:0;
    display:grid;
    grid-template-columns:1fr auto 1fr
  }
  .hero h1>span:first-child{
    grid-column:1/-1
  }
  .hero h1 i{
    grid-column:1;
    justify-self:end;
    font-size:1.8rem;
    margin:0 .1rem 0 0;
    align-self:center
  }
  .hero h1>span:last-child{
    grid-column:2/-1;
    justify-self:start
  }
  .hero-invite{
    font-size:.98rem;
    margin:1.4rem 0 0;
    max-width:30ch
  }
  .hero .ornament{
    margin:.75rem auto
  }
  .hero-date{
    font-size:1.65rem;
    margin-bottom:.6rem
  }
  .hero-date span{
    font-size:.9rem
  }
  .hero-venue{
    font-size:.83rem;
    line-height:1.5;
    margin-bottom:.7rem
  }
  .welcome h2{
    font-size:2.65rem
  }
  .welcome .intro{
    font-size:1.2rem
  }
  .families{
    display:flex;
    flex-direction:column;
    gap:.9rem;
    margin:2rem auto
  }
  .family-and{
    font-size:2.6rem;
    line-height:1
  }
  .families h3{
    font-size:2rem
  }
  .families p:last-child{
    font-size:.84rem;
    margin-bottom:.2rem
  }
  .welcome-botanical{
    width:105px;
    height:200px;
    bottom:1rem;
    opacity:.25
  }
  .elders{
    font-size:.95rem
  }
  .date-section{
    display:flex;
    flex-direction:column;
    gap:2.2rem;
    padding:3.5rem 1.4rem
  }
  .date-photo{
    width:230px
  }
  .date-copy{
    width:100%
  }
  .date-copy .eyebrow{
    font-size:.76rem
  }
  .date-copy h2{
    font-size:2.6rem
  }
  .countdown{
    max-width:390px;
    margin:1.7rem auto 2rem
  }
  .countdown b{
    font-size:2.3rem
  }
  .countdown span{
    font-size:.72rem
  }
  .story-grid{
    grid-template-columns:1fr;
    gap:2.7rem;
    max-width:380px
  }
  .story-chapter:nth-child(2){
    padding-top:0
  }
  .story-photo{
    margin:0 .8rem 1.5rem
  }
  .story-photo img{
    aspect-ratio:4/4.5
  }
  .story-chapter h3{
    text-align:center;
    font-size:2rem
  }
  .chapter-mark{
    text-align:center
  }
  .story-chapter>p{
    text-align:center;
    max-width:36ch;
    margin:0 auto
  }
  .celebrations .section-heading h2{
    font-size:2.65rem
  }
  .events-grid{
    grid-template-columns:1fr;
    gap:1.8rem;
    max-width:420px
  }
  .event-photo{
    height:245px
  }
  .event-info{
    padding:1.4rem 1.5rem
  }
  .event-info h3{
    font-size:2.7rem
  }
  .event-description{
    min-height:auto
  }
  .dress{
    min-height:auto;
    margin-bottom:1.3rem
  }
  .event-day{
    font-size:1.03rem
  }
  .photo-interlude{
    grid-template-columns:1fr
  }
  .photo-interlude>img{
    max-height:450px;
    height:450px
  }
  .photo-interlude>div{
    padding:3rem 1.5rem
  }
  .photo-interlude p{
    font-size:2.5rem
  }
  .photo-interlude p span{
    font-size:3.7rem
  }
  .travel-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
    max-width:380px
  }
  .travel-grid h3{
    font-size:1.8rem;
    margin-bottom:.8rem
  }
  .travel-grid p{
    margin:0
  }
  .memories h2{
    font-size:2.6rem
  }
  .memory-strip{
    grid-template-columns:1fr 1fr;
    gap:.75rem
  }
  .memory-strip img:nth-child(3){
    display:none
  }
  .memory-strip img:nth-child(2){
    margin-top:2.5rem
  }
  .blessing-grid{
    grid-template-columns:1fr;
    gap:.8rem;
    max-width:380px;
    margin-bottom:1.5rem
  }
  .blessing{
    padding:1.2rem .4rem
  }
  .blessing p{
    font-size:1.25rem
  }
  .rsvp{
    grid-template-columns:1fr;
    gap:2.5rem
  }
  .rsvp-art{
    min-height:320px
  }
  .rsvp-art>span{
    font-size:2.6rem
  }
  .rsvp-art>.branch{
    height:300px;
    width:170px;
    left:-50px;
    top:0
  }
  .rsvp-art>p{
    font-size:2rem;
    margin-bottom:1rem
  }
  .rsvp-art>.ornament{
    margin:.8rem auto 0
  }
  .rsvp-content h2{
    font-size:3.2rem
  }
  .rsvp-content>.eyebrow{
    margin-bottom:.7rem
  }
  .rsvp-content>.form{
    max-width:none
  }
  .rsvp-content>p:not(.eyebrow){
    font-size:1.1rem
  }
  .share{
    padding-bottom:3rem
  }
  .share h2{
    font-size:2.7rem
  }
  .share-actions{
    flex-direction:column;
    max-width:320px;
    margin:1.5rem auto 0;
    gap:.8rem
  }
  .footer{
    padding-top:3rem
  }
  .footer-names{
    font-size:3.5rem
  }
  .footer .ganesh{
    width:50px;
    height:50px
  }
  .gate-inner{
    padding:.5rem
  }
  .gate-leaf{
    top:.7rem;
    bottom:.7rem;
    width:calc(50% - .8rem)
  }
  .gate-leaf-left{
    left:.7rem
  }
  .gate-leaf-right{
    right:.7rem
  }
  .gate-leaf>.branch{
    width:100px;
    height:240px;
    opacity:.17
  }
  .gate h2{
    font-size:2.35rem
  }
  .gate-note{
    font-size:.76rem
  }
  .gate-monogram{
    font-size:6.7rem
  }
  .gate-date{
    font-size:1.05rem
  }
  .gate-inner .invocation{
    margin-bottom:1.4rem
  }
}
@media(max-width:370px){
  .hero h1{
    font-size:4.7rem
  }
  .hero h1 i{
    font-size:1.6rem
  }
  .hero-copy>.eyebrow{
    font-size:.73rem
  }
  .hero-date{
    font-size:1.5rem
  }
  .gate h2{
    font-size:2.05rem
  }
  .gate-names{
    font-size:1.9rem
  }
  .gate-kicker{
    font-size:.76rem
  }
  .gate-date{
    font-size:.95rem
  }
  .gate-inner .ganesh{
    width:40px;
    height:40px
  }
  .gate-monogram{
    font-size:6rem;
    min-height:90px
  }
}
@media(max-height:700px){
  .gate-inner{
    padding:.4rem
  }
  .gate-inner .ganesh{
    height:38px;
    width:38px
  }
  .gate-inner .invocation{
    margin-bottom:.8rem
  }
  .gate-monogram{
    font-size:5rem;
    min-height:70px
  }
  .gate h2{
    font-size:2.1rem
  }
  .gate-note{
    margin-top:.8rem
  }
  .gate-date{
    margin-bottom:1rem
  }
  .gate-names{
    margin-top:.6rem
  }
  .gate-kicker{
    margin-bottom:.5rem
  }
  .gate-inner .ornament{
    margin:.5rem auto
  }
}
/* Keep the two door panels from drawing a seam through the typography. */
#couple-names:focus-visible{outline:none}
.gate-leaf-left{
  border-right-color:transparent
}
.gate-leaf-right{
  border-left-color:transparent
}
.gate-leaf-left:after{
  border-right-color:transparent
}
.gate-leaf-right:after{
  border-left-color:transparent
}
@media(max-width:650px){
  .hero h1{
    display:flex;
    flex-direction:column;
    font-size:5.2rem;
    gap:.1rem
  }
  .hero h1 i{
    font-size:1.5rem;
    margin:.05rem 0 .2rem;
    align-self:center
  }
  .hero h1>span:last-child{
    align-self:center
  }
}

/* Centre the desktop writing in its half of the cover. */
@media(min-width:900px){.fabric-cover.fabric-cover .booklet-face{grid-template-rows:minmax(0,1fr)}.fabric-cover.fabric-cover .booklet-face .cover-content{position:absolute;grid-column:auto;grid-row:auto;top:calc(50% - 16px);left:75%;width:min(50%,540px);margin:0;align-items:center;text-align:center;transform:translate(-50%,-50%)}}
@media(min-width:900px) and (max-height:450px){.fabric-cover.fabric-cover .booklet-face{grid-template-columns:1fr 1.1fr;padding-left:7vw;padding-right:7vw;gap:5vw}.fabric-cover.fabric-cover .booklet-face .cover-crest{height:75%}}