#hero.invitation-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
  min-height: 800px;
  padding: max(105px, env(safe-area-inset-top)) max(7vw, calc((100vw - 1240px) / 2)) 40px;
  color: #543d47;
  isolation: isolate;
  background: transparent;
}
#hero.invitation-showcase::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #f7eee7f5 0%, #f7eee7eb 30%, #f7eee790 49%, transparent 68%),
    url('../assets/homepage-lotus-dew.webp') 78% 43% / cover no-repeat;
  mask-image: linear-gradient(#000 0%, #000 84%, transparent 100%);
}
#hero.invitation-showcase::after {
  content: ''; display: none; position: absolute; inset: auto 0 0; height: 110px; pointer-events: none;
  background: radial-gradient(circle at 12% 8%, #fff0d357, transparent 30%),
    linear-gradient(#3f253014, #5b3c486b 38%, #68464fb8);
  background-size: 100% 100svh;
  mask-image: linear-gradient(transparent, #000);
}
.showcase-copy { max-width: 650px; }
#hero h1 {
  font: 500 clamp(2.6rem, 4.6vw, 4.6rem)/1.06 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -.025em;
  text-wrap: balance;
}
#hero h1 em { font-weight: 500; color: #885b69; }
.showcase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 36px; }
.showcase-actions p { font-size: .78rem; line-height: 1.6; color: #715663; }
.showcase-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  min-height: 50px; padding: 14px 25px; border-radius: 13px;
  background: #71505c; color: #fff9f3; text-decoration: none;
  font-size: .875rem; font-weight: 600;
  box-shadow: 0 8px 20px #61404d20;
}
.showcase-primary:hover { background: #5d3e49; }
.showcase-object { position: relative; margin: 0; justify-self: center; text-align: center; animation: showcase-arrive .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes showcase-arrive {
  from { opacity: .85; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.atelier-phone {
  position: relative; display: block; width: clamp(300px, calc((100svh - 280px) * .46), 340px);
  padding: 5px; border-radius: 43px; isolation: isolate;
  background: linear-gradient(105deg, #a7a6a3, #f8f7f3 3%, #d6d5d1 7%, #e6e5e1 88%, #fff 96%, #9d9d9b);
  box-shadow: 1px 1px 0 #777873, 3px 3px 0 #ededeb, 5px 5px 0 #9b9c98,
    8px 8px 0 #deded9, 10px 10px 0 #777973,
    16px 24px 34px #463e3e16, 26px 40px 58px #48383e12,
    inset 0 1px 1px #fff;
  transform: perspective(1400px) rotateX(10deg) rotateY(-12deg) rotateZ(-4deg) skewX(-16deg);
  translate: 0 -8px;
  touch-action: pan-y;
}
.atelier-phone::before {
  content: ''; position: absolute; z-index: -1; inset: 4px;
  border-radius: 42px; border: 1px solid #ffffffc0; pointer-events: none;
}
.phone-hit { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.atelier-screen {
  display: block; position: relative; aspect-ratio: 448 / 780;
  box-sizing: content-box;
  overflow: hidden; border: 3px solid #383937; border-radius: 38px;
  background: #e9e0d0; isolation: isolate;
}
.atelier-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.showcase-video.is-ready:not(.is-static) { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .showcase-video { transition: opacity .25s ease; }
}
.phone-glass {
  position: absolute; inset: 12px; border-radius: 38px; pointer-events: none;
  background: linear-gradient(113deg, #fff8ee0d 0%, #fff8ee00 37%);
  box-shadow: inset 1px 1px 0 #fff8ee35;
}
.phone-hardware { position: absolute; inset: 0; pointer-events: none; }
.phone-hardware::before, .phone-hardware::after {
  content: ''; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #686a67, #efefeb, #a7a9a4);
}
.phone-hardware::before { width: 22px; height: 3px; bottom: -6px; left: 46%; background: #565955; box-shadow: -35px 0 0 #858782, 35px 0 0 #858782; }
.phone-hardware::after { width: 4px; height: 42px; top: 130px; right: -9px; box-shadow: 0 53px 0 #b5b7b0; }
.showcase-object figcaption { position: relative; isolation: isolate; margin-top: 40px; }
.showcase-object figcaption::before {
  content: ''; position: absolute; inset: -20px -35px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse, #f7eee7f5 0%, #f7eee7e6 35%, #f7eee780 58%, transparent 73%);
}
.showcase-object figcaption::after {
  content: ''; position: absolute; z-index: -1; top: -32px; left: 5%; right: 5%; height: 20px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, #55414a30 0%, #55414a16 38%, transparent 72%);
  filter: blur(3px);
}
.showcase-object figcaption p { font-size: .72rem; color: #70535e; letter-spacing: .025em; }
.showcase-open {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: .85rem; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.showcase-playback {
  display: block; margin: 2px auto 0; padding: 10px 14px; min-height: 44px;
  border: 0; background: transparent; color: #70535e; font: inherit; font-size: .7rem;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.showcase-playback[hidden] { display: none; }
#hero :focus-visible { outline: 2px solid #714854; outline-offset: 6px; }
body.hero-in-view nav {
  background: linear-gradient(#f7eee7f5, #f4e6e0d9 75%, #f4e6e000);
  backdrop-filter: none;
}
body.hero-in-view nav .logo, body.hero-in-view nav .nav-links a,
body.hero-in-view nav .nav-tagline { color: #543d47; text-shadow: none; }
body.hero-in-view #invitation-rose { visibility: hidden; pointer-events: none; }
@media (max-width: 768px) {
  #hero.invitation-showcase::after { display: block; }
  #hero.invitation-showcase {
    grid-template-columns: minmax(0, 1fr); gap: 36px; min-height: 0;
    padding: max(105px, calc(env(safe-area-inset-top) + 85px)) 24px 54px;
  }
  #hero.invitation-showcase::before {
    background: linear-gradient(#f7eee7f5 0%, #f7eee7ed 24%, #f7eee750 40%, transparent 53%),
      url('../assets/homepage-lotus-dew.webp') 50% 55% / cover no-repeat;
  }
  .showcase-copy { text-align: center; margin: 0 auto; max-width: 490px; }
  #hero h1 { font-size: clamp(2.25rem, 8.4vw, 3.3rem); line-height: 1.07; }
  .showcase-actions { justify-content: center; gap: 12px; margin-top: 24px; }
  .showcase-actions p { flex-basis: 100%; }
  .atelier-phone { width: clamp(200px, 58vw, 248px); border-radius: 37px; transform: perspective(1200px) rotateY(-8deg) rotateZ(-2deg) skewX(-8deg); padding: 4px; }
  .atelier-screen { border-radius: 32px; }
  .phone-glass { inset: 9px; border-radius: 31px; }
  .showcase-object figcaption { margin-top: 36px; }
}
@media (hover: none) {
  .showcase-object { animation: none; }
}
@media (min-width: 769px) and (max-height: 760px) {
  #hero.invitation-showcase { min-height: 0; padding-top: 110px; padding-bottom: 60px; }
  .showcase-copy { align-self: start; }
  .atelier-phone { width: 300px; }
}
@media (min-width: 769px) and (max-height: 500px) {
  #hero h1 { font-size: clamp(2rem, 4.3vw, 2.6rem); }
  .showcase-actions { margin-top: 20px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-object { animation: none; }
  .atelier-phone { transform: none; }
}