/* Every invitation chapter is one screen, including in an in-app browser. */
html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden; overflow: clip;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.app {
  height: 100vh; height: 100svh;
  min-height: 0; max-height: 100svh;
  overflow: hidden; overflow: clip;
  touch-action: pan-x pinch-zoom;
}
.top {
  top: max(18px, calc(env(safe-area-inset-top) + 10px));
  left: 24px; right: 24px; height: 38px;
}
.monogram { font-size: 35px; }
.bottom {
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 24px; right: 24px; height: 44px;
}
.chapter {
  bottom: max(68px, calc(env(safe-area-inset-bottom) + 57px));
  font-size: 10px; line-height: 1.5; letter-spacing: 1.2px;
}
html[lang=ta] .chapter { font-size: 11px; letter-spacing: 0; }
.scene {
  inset: max(76px, calc(env(safe-area-inset-top) + 64px)) 30px
    max(96px, calc(env(safe-area-inset-bottom) + 85px));
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center;
  overflow: hidden; overflow: clip;
  overscroll-behavior: none;
  container-type: size;
}
.scene::before { display: none; }
.scene-inner {
  width: calc(100% - 6px); min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(5px, 1.2cqh, 12px);
  transform: scale(var(--scene-scale, 1));
  transform-origin: center;
}
.scene-inner > * { flex: 0 0 auto; margin: 0 !important; max-width: 100%; }
.scene-inner > .eyebrow { max-width: 100%; }
.scene-inner .eyebrow, .scene-inner .small {
  font-size: 11px; line-height: 1.65; letter-spacing: 1.6px;
}
.scene-inner .display {
  font-size: clamp(35px, 16cqw, 66px); line-height: 1.08;
}
.scene-inner .cover-title { font-size: clamp(39px, 18cqw, 70px); line-height: 1.06; }
.scene-inner .names {
  font-size: clamp(58px, 26cqw, 103px); line-height: 1.08;
  padding: .02em .1em .09em; letter-spacing: -1px;
}
.scene-inner .copy {
  max-width: 100%; font-size: clamp(13px, 4.1cqw, 16px);
  line-height: 1.65;
}
.scene-inner .rule { width: 66px; height: 1px; margin: 3px 0 !important; }
.scene-inner .date-pill { font-size: 11px; line-height: 1.7; letter-spacing: 2px; }
.scene-inner .seal {
  width: min(185px, 52cqw, 31cqh);
  height: auto; aspect-ratio: 200 / 180;
  max-width: none;
}
.scene-inner .seal .heart-caption { top: 45%; font-size: 9px; }
.scene-inner .seal::before { top: 15%; left: calc(50% - 10px); font-size: 20px; }
.scene-inner .amp { height: 30px; font-size: 0; line-height: 0; }
.scene-inner .love-thread { height: 30px; }
.scene-inner .rings { width: 155px; height: 76px; }
.scene-inner .ring { width: 58px; height: 58px; top: 9px; left: 20px; border-width: 4px; }
.scene-inner .ring.second { top: 15px; left: 73px; }
.scene-inner .diamond { width: 15px; height: 15px; left: 18px; top: -14px; }
.scene-inner .storyline { font-size: 12px; line-height: 1.65; }
.scene-inner .faith-word {
  font-size: clamp(21px, 7cqw, 25px); line-height: 1.4; letter-spacing: 0;
}
.scene-inner .bigdate { font-size: clamp(48px, 10.5cqh, 78px); line-height: 1; }
.scene-inner .month { font-size: 12px; line-height: 1.5; letter-spacing: 3px; }
.scene-inner .time { font-size: 17px; line-height: 1.6; }
.scene-inner .details { padding-top: 11px; max-width: 100%; }
.scene-inner .details h3 { font-size: 23px; line-height: 1.3; margin: 0 0 6px; }
.scene-inner .details p { font-size: 12px; line-height: 1.65; margin: 3px 0; }
.scene-inner .cta {
  padding: 12px 20px; font-size: 11px; line-height: 1.5;
  letter-spacing: 1.1px; border-radius: 28px;
}
.scene:nth-of-type(4) .scene-inner > .copy { font-size: 13px !important; }
.scene-inner .endmark { height: clamp(42px, 11cqh, 72px); font-size: 0; line-height: 0; display: flex; align-items: center; justify-content: center; }
.scene-inner .endmark svg { display: block; height: 100%; width: 95px; }
.scene:nth-of-type(5) .display { font-size: clamp(34px, 13cqw, 58px); line-height: 1.08; }
.scene-inner #replay { padding: 9px 17px !important; font-size: 10px; }

html[lang=ta] .scene-inner .display {
  font-size: clamp(23px, 8.7cqw, 33px); line-height: 1.5;
}
html[lang=ta] .scene-inner .cover-title { font-size: clamp(25px, 9cqw, 35px); line-height: 1.6; }
html[lang=ta] .scene-inner .names {
  font-size: clamp(33px, 12.2cqw, 46px); line-height: 1.55; letter-spacing: 0;
}
html[lang=ta] .scene-inner .copy {
  font-size: clamp(12px, 4cqw, 14px); line-height: 1.8;
}
html[lang=ta] .scene-inner .eyebrow,
html[lang=ta] .scene-inner .small { font-size: 11px; line-height: 1.8; letter-spacing: 0; }
html[lang=ta] .scene-inner .storyline { font-size: 12px; line-height: 1.8; }
html[lang=ta] .scene-inner .faith-word { font-size: clamp(22px, 7.3cqw, 27px); line-height: 1.5; }
html[lang=ta] .scene-inner .month, html[lang=ta] .scene-inner .date-pill { font-size: 12px; letter-spacing: 0; }
html[lang=ta] .scene-inner .time { font-size: 16px; line-height: 1.6; }
html[lang=ta] .scene-inner .details h3 { font-size: 23px; }
html[lang=ta] .scene-inner .details p { font-size: 12px; line-height: 1.65; }
html[lang=ta] .scene-inner .cta { font-size: 11px; line-height: 1.6; letter-spacing: 0; }
html[lang=ta] .scene-inner .seal .heart-caption { top: 44%; font-size: 9px; }
html[lang=ta] .scene:nth-of-type(5) .display { font-size: clamp(22px, 8cqw, 30px); line-height: 1.6; }

@media (max-height: 640px) {
  .top { top: max(13px, env(safe-area-inset-top)); }
  .scene { top: max(65px, calc(env(safe-area-inset-top) + 51px)); bottom: max(83px, calc(env(safe-area-inset-bottom) + 72px)); }
  .chapter { bottom: max(59px, calc(env(safe-area-inset-bottom) + 48px)); }
  .bottom { bottom: max(7px, env(safe-area-inset-bottom)); }
  .scene-inner { gap: 5px; }
  .scene-inner .rings { height: 63px; }
  .scene-inner .ring { width: 50px; height: 50px; }
  .scene-inner .ring.second { left: 66px; top: 11px; }
  .scene-inner .endmark { height: 42px; }
  .scene-inner .seal { width: min(140px, 46cqw, 28cqh); }
  .scene-inner .eyebrow { font-size: 10px; }
  .scene-inner .details { padding-top: 8px; }
  .scene-inner .details h3 { font-size: 21px; margin-bottom: 3px; }
  .scene-inner .details p { font-size: 11.5px; }
  .scene-inner .copy { font-size: 13px; line-height: 1.6; }
  html[lang=ta] .scene-inner .copy { font-size: 12px; line-height: 1.7; }
  html[lang=ta] .scene-inner .details p { font-size: 11.5px; }
  html[lang=ta] .scene-inner .storyline { font-size: 11px; }
  html[lang=ta] .scene-inner .details h3 { font-size: 21px; }
}
@media (max-width: 360px) {
  .scene { left: 23px; right: 23px; }
  .top, .bottom { left: 20px; right: 20px; }
}