/* Rubik: an open paper envelope, with a photograph that can be pulled out. */
.stationery-opening {
  height:100svh;
  min-height:0;
  padding:26px 22px;
  gap:14px;
  justify-content:center;
  background:var(--paper);
  transition:opacity .4s .8s;
  isolation:isolate
}
.stationery-opening::before {
  opacity:.055;
  background-position:center 42%;
  filter:grayscale(1)
}
.entry-heading {
  position:relative;
  z-index:2;
  text-align:center;
  flex-shrink:0
}
.entry-heading h1 {
  font:400 clamp(36px,4vw,56px)/1.15 var(--serif);
  letter-spacing:-.045em;
  color:var(--wine)
}
.entry-heading h1 em {
  font-size:.8em
}
.entry-scene {
  position:relative;
  width:min(420px,80vw,calc((100svh - 270px)*.9));
  aspect-ratio:.9;
  flex-shrink:0;
  isolation:isolate
}
.entry-flowers {
  position:absolute;
  right:-5%;
  top:-2%;
  width:47%;
  height:78%;
  object-fit:contain;
  z-index:0;
  pointer-events:none;
  filter:drop-shadow(3px 5px 5px #32191218)
}
.entry-back {
  position:absolute;
  left:8%;
  top:12%;
  width:84%;
  height:85%;
  z-index:1;
  background:var(--wine) url('../images/mw-env-middle-layer.webp') center/420px auto;
  background-blend-mode:multiply;
  clip-path:polygon(0 39%,50% 0,100% 39%,100% 100%,0 100%);
  filter:drop-shadow(0 8px 12px #32191225)
}
.entry-back::before,.entry-front::before {
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/mw-env-middle-layer.webp') center/420px auto;
  filter:grayscale(1) brightness(.58) contrast(4);
  mix-blend-mode:soft-light;
  opacity:.65;
  pointer-events:none
}
.entry-lining {
  position:absolute;
  left:10.5%;
  top:16%;
  width:79%;
  height:78%;
  z-index:2;
  background:#e2dac7 url('../images/mw-env-middle-layer.webp') center/420px auto;
  background-blend-mode:multiply;
  clip-path:polygon(0 39%,50% 0,100% 39%,100% 100%,0 100%)
}
.entry-photo {
  position:absolute;
  left:18%;
  top:25%;
  width:64%;
  height:61%;
  padding:7px 7px 22px;
  border:0;
  border-radius:0;
  background:var(--paper);
  box-shadow:0 5px 12px #32191235;
  z-index:3;
  transform:translateY(calc(-1 * var(--pull,0px))) rotate(10deg);
  transform-origin:50% 80%;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .3s;
  touch-action:pinch-zoom;
  cursor:grab;
  user-select:none
}
.entry-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 32%;
  filter:grayscale(1);
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none
}
.entry-photo:hover {
  transform:translateY(-8px) rotate(7deg);
  box-shadow:0 10px 18px #32191238
}
.entry-photo.is-pulling {
  transform:translateY(calc(-1 * var(--pull,0px))) rotate(7deg);
  transition:none;
  cursor:grabbing
}
.entry-front {
  position:absolute;
  left:8%;
  top:48%;
  width:84%;
  height:49%;
  z-index:4;
  clip-path:polygon(0 0,50% 45%,100% 0,100% 100%,0 100%);
  background:#64101c url('../images/mw-env-middle-layer.webp') center/420px auto;
  background-blend-mode:multiply;
  box-shadow:inset 0 -12px 25px #32191220;
  pointer-events:none;
  transition:transform .85s
}
.entry-front::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(32deg,#32191215,transparent 50%,#fff1);
  pointer-events:none
}
.entry-seal {
  position:absolute;
  top:70.05%;
  left:50%;
  width:70px;
  height:70px;
  z-index:5;
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  background:transparent;
  filter:drop-shadow(0 4px 4px #32191255);
  cursor:pointer;
  transition:transform .3s,opacity .3s
}
.entry-seal img {
  display:block;
  width:100%;
  height:100%;
  filter:grayscale(1) sepia(1) saturate(5) hue-rotate(305deg) brightness(.66)
}
.entry-seal:hover {
  transform:translate(-50%,-50%) scale(1.06)
}
.entry-photo:focus-visible {
  outline:2px solid var(--wine);
  outline-offset:5px
}
.entry-seal:focus-visible {
  outline:2px solid var(--cream);
  outline-offset:2px;
  border-radius:50%
}
.entry-caption {
  text-align:center;
  flex-shrink:0;
  position:relative;
  z-index:6
}
.entry-hint {
  font:10px/1.5 var(--sans);
  color:var(--ink);
  margin:0 0 20px
}
.entry-caption .card-date {
  font:600 10px/1.5 var(--sans);
  letter-spacing:.15em;
  color:var(--wine);
  margin:0
}
.entry-caption #rotuloapi {
  font-size:12px;
  margin:10px 0 0
}
.entry-caption #rotuloapi:empty {
  display:none
}
.entry-message {
  font:italic 15px/1.6 var(--serif);
  margin:12px 0 16px
}
.entry-caption .btn-pre-page {
  min-width:245px;
  background:var(--paper);
  color:var(--wine);
  border:1px solid var(--wine);
  box-shadow:none;
  outline:none
}
.entry-caption .btn-pre-page:hover {
  background:var(--wine);
  color:var(--paper)
}
.entry-caption .btn-pre-page:focus-visible {
  border-width:2px;
  text-decoration:none;
  text-underline-offset:4px;
  outline:none;
  box-shadow:none
}
.stationery-opening.is-opening .entry-photo {
  transform:translateY(-44%) rotate(0);
  box-shadow:0 15px 25px #32191230
}
.stationery-opening.is-opening .entry-front {
  transform:translateY(10%)
}
.stationery-opening.is-opening .entry-seal {
  opacity:0;
  transform:translate(-50%,-50%) scale(.8)
}
/* The interior follows the same warm paper direction, retaining its interactions. */
.hero {
  background:var(--paper);
  color:var(--ink)
}
.hero::before {
  background:linear-gradient(#fffef0e8,#fffef0ed),url('../images/slider/slide-1.webp') center 40%/cover;
  opacity:1
}
.hero h1,.hero-title .kicker,.discovery-count {
  color:var(--wine)
}
.story-copy {
  background:var(--paper)
}
.reply-envelope {
  background:var(--wine);
  border-bottom-color:#321912
}
.reply-envelope>summary {
  color:var(--paper);
  background:linear-gradient(150deg,transparent 49.7%,#32191235 50%,transparent 50.3%) center/100% 100%
}
.reply-envelope:not([open])::after {
  background:linear-gradient(32deg,#32191230 49.7%,transparent 50%) left/50% 100% no-repeat,linear-gradient(-32deg,#32191230 49.7%,transparent 50%) right/50% 100% no-repeat
}
@media(max-width:760px) {
  .stationery-opening {
    padding:24px 18px;
    gap:15px
  }
  .entry-heading h1 {
    font-size:39px
  }
  .entry-scene {
    width:min(350px,84vw,calc((100svh - 270px)*.9))
  }
  .entry-photo {
    padding:6px 6px 18px
  }
  .entry-seal {
    width:62px;
    height:62px
  }
  .entry-hint {
    font-size:9px;
    margin-bottom:18px
  }
  .entry-message {
    font-size:13px;
    margin:11px 0 15px
  }
  .entry-caption .card-date {
    font-size:9px
  }
  .entry-flowers {
    right:-4%;
    width:48%
  }
}
@media(max-height:650px) {
  .stationery-opening {
    padding:14px;
    gap:10px
  }
  .entry-heading h1 {
    font-size:31px
  }
  .entry-scene {
    width:min(330px,75vw,calc((100svh - 235px)*.9))
  }
  .entry-hint {
    font-size:8px;
    margin-bottom:12px
  }
  .entry-message {
    font-size:12px;
    margin:9px 0 12px
  }
  .entry-seal {
    width:53px;
    height:53px
  }
  .entry-caption .btn-pre-page {
    min-height:44px;
    padding:10px 22px
  }
}
@media(max-height:450px) and (min-width:600px) {
  .stationery-opening {
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto 1fr;
    justify-content:center;
    align-content:center;
    align-items:center;
    gap:12px 40px;
    padding:22px
  }
  .entry-heading {
    grid-column:2;
    grid-row:1;
    align-self:end
  }
  .entry-heading h1 {
    font-size:34px
  }
  .entry-scene {
    grid-column:1;
    grid-row:1/3;
    width:min(280px,34vw,calc((100svh - 50px)*.9));
    align-self:center
  }
  .entry-caption {
    grid-column:2;
    grid-row:2;
    align-self:start
  }
  .entry-hint {
    max-width:240px;
    margin:5px auto 20px
  }
  .entry-message {
    max-width:250px
  }
  .entry-seal {
    width:55px;
    height:55px
  }
}
@media(prefers-reduced-motion:reduce) {
  .stationery-opening,.entry-photo,.entry-front,.entry-seal {
    transition:none!important;
    animation:none!important
  }
}
/* Requested floral cutout and a clean, solid opening background. */
.stationery-opening::before{content:none;display:none;background:none}
.entry-heading .entry-message{font:italic 15px/1.6 var(--serif);margin:14px auto 0;max-width:380px;color:var(--ink)}
.entry-caption .btn-pre-page{justify-content:center;gap:0;text-align:center;text-decoration:none}
.entry-caption .btn-pre-page:focus-visible{text-decoration:none;background:var(--cream);color:var(--wine);border-width:2px}
.entry-flowers{right:-13%;top:15%;width:49%;height:auto;aspect-ratio:1355/1160;object-fit:contain;transform:rotate(-5deg);z-index:0}
/* Original lower paper flap rises from both bottom corners to the MW seal. */
.entry-front{background-color:#4c0b17}
.entry-bottom-flap{position:absolute;left:8%;top:70.05%;width:84%;height:26.95%;z-index:4;clip-path:polygon(50% 0,100% 100%,0 100%);background:#701b29 url('../images/mw-env-bottom-layer.webp') center/100% 100%;background-blend-mode:multiply;pointer-events:none;transition:transform .85s}
.entry-bottom-flap::before{content:"";position:absolute;inset:0;background:url('../images/mw-env-middle-layer.webp') center/420px auto;filter:grayscale(1) brightness(.58) contrast(4);mix-blend-mode:soft-light;opacity:.65;pointer-events:none}
.stationery-opening.is-opening .entry-bottom-flap{transform:translateY(18.1818%)}
@media(max-width:760px){.entry-heading .entry-message{font-size:13px;max-width:310px;margin-top:12px}.entry-flowers{right:-9%;top:15%;width:47%;height:auto;transform:none}}
@media(max-height:650px){.entry-heading .entry-message{font-size:12px;margin-top:9px;max-width:290px}}
@media(max-height:450px) and (min-width:600px){.entry-heading .entry-message{max-width:260px}.entry-caption{padding-top:5px}}
@media(prefers-reduced-motion:reduce){.entry-bottom-flap{transition:none!important}}
.entry-caption .btn-pre-page{margin-top:18px}
@media(max-width:760px){.entry-caption .btn-pre-page{margin-top:16px}}

/* Keep the heading-to-envelope gap compact, with balanced outer padding. */
.stationery-opening{--entry-lift:32px;padding-bottom:26px}
.entry-scene{margin-top:calc(-1 * var(--entry-lift))}
@media(max-width:760px){.stationery-opening{--entry-lift:26px;padding-bottom:24px}}
@media(max-height:650px){.stationery-opening{--entry-lift:20px;padding-bottom:14px}}
@media(max-height:450px) and (min-width:600px){.stationery-opening{--entry-lift:0px;padding-bottom:22px}}

/* Hover keeps its dark background even when the opening button already has focus. */
.entry-caption .btn-pre-page:hover,
.entry-caption .btn-pre-page:focus-visible:hover {
  background:var(--wine);
  color:var(--paper);
}

/* Balance the opening vertically after removing the date. */
.entry-caption{display:flex;flex-direction:column;align-items:center;gap:16px}
.entry-caption .entry-hint{margin:0}
.entry-caption .btn-pre-page{margin-top:0}
.entry-caption #rotuloapi{margin:0}
@media(max-height:450px) and (min-width:600px){.stationery-opening{grid-template-rows:1fr 1fr}}

/* Let the extracted photograph pass in front of the heading, including while dragging. */
.entry-scene{z-index:3}

/* Burgundy outline on the entrance invitation button. */
.entry-caption .btn-pre-page,
.entry-caption .btn-pre-page:hover,
.entry-caption .btn-pre-page:focus-visible,
.entry-caption .btn-pre-page:focus-visible:hover {border-color:var(--wine)}

/* Give the invited family's name clear prominence in the opening. */
.entry-caption #rotuloapi {
  max-width:100%;
  font:500 22px/1.3 var(--serif);
  color:var(--wine);
  text-align:center;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Keep the guest name and invitation button on the same centered axis. */
.entry-caption {width:100%;max-width:520px;margin-inline:auto}
.entry-caption #rotuloapi {width:100%;margin-inline:auto;text-align:center;padding-inline:8px}