:root {
  --maroon: #300308;
  --silver: #cfc8c3;
  --ivory: #fff7ef;
  --nav: #fff;
  --home-progress: 0;
}

@font-face {
  font-family: AmoresaLocal;
  src: url("assets/fonts/amoresa-regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: TheSeasonsLocal;
  src: url("assets/fonts/the-seasons-light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: CinzelLocal;
  src: url("assets/fonts/cinzel-regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: CinzelLocal;
  src: url("assets/fonts/cinzel-medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: LoraLocal;
  src: url("assets/fonts/lora-regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: LoraLocal;
  src: url("assets/fonts/lora-medium.ttf") format("truetype");
  font-weight: 500;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #160104; color: var(--ivory); }
body { margin: 0; min-height: 100vh; overflow-x: clip; background: #160104; font-family: LoraLocal, Georgia, serif; }
button, a, input, textarea { font: inherit; }
a[href^="tel"], a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }

.phone-shell { width: min(100%, 390px); min-height: 100vh; margin: 0 auto; overflow-x: clip; background: var(--maroon); box-shadow: 0 0 70px rgba(0,0,0,.5); }
.invitation { opacity: 0; transition: opacity .7s ease .35s; }
body.opened .invitation { opacity: 1; }
.page-stack { padding-bottom: 68px; }
.view { display: none; }
.view.active { display: block; }

.hero-card {
  position: sticky;
  top: 0;
  z-index: 1;
  height: min(100vh, 844px);
  overflow: hidden;
  background: var(--maroon);
  text-align: center;
}

.songket { position: absolute; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: calc(1 - min(var(--home-progress) * 1.18, 1)); filter: blur(calc(var(--home-progress) * 2.5px)); transition: opacity .08s linear; }
.songket.bottom { mix-blend-mode: screen; }
.crest { position: absolute; left: 50%; top: 24.5%; width: 50%; opacity: calc(1 - min(var(--home-progress) * 1.35, 1)); transform: translateX(-50%) translateY(calc(var(--home-progress) * -185px)) scale(calc(1 - var(--home-progress) * .96)); transform-origin: center top; filter: blur(calc(var(--home-progress) * 2px)); transition: opacity .08s linear; }
.script { position: absolute; left: 50%; top: 25%; width: max-content; max-width: 92%; margin: 0; transform: translateX(-50%); font-family: AmoresaLocal, Georgia, serif; font-size: clamp(37px, 10vw, 43px); color: var(--silver); opacity: calc(1 - min(var(--home-progress) * 1.6, 1)); filter: blur(calc(var(--home-progress) * 2px)); transition: opacity .08s linear; }
h1 { position: absolute; left: 50%; top: 66.4%; width: max-content; max-width: 92%; margin: 0; transform: translateX(-50%); font-family: TheSeasonsLocal, CinzelLocal, serif; font-size: clamp(24px, 7vw, 28px); font-weight: 300; color: var(--silver); text-transform: uppercase; opacity: calc(1 - min(var(--home-progress) * 1.6, 1)); filter: blur(calc(var(--home-progress) * 2px)); transition: opacity .08s linear; }
.date { position: absolute; left: 50%; top: 73.8%; width: max-content; max-width: 92%; margin: 0; transform: translateX(-50%); color: var(--silver); font-size: 16px; text-align: center; opacity: calc(1 - min(var(--home-progress) * 1.6, 1)); filter: blur(calc(var(--home-progress) * 2px)); transition: opacity .08s linear; }

.details, .page {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 74px);
  padding: 48px 20px;
  text-align: center;
  background: var(--maroon);
}

#home .details {
  margin-top: -12vh;
  opacity: clamp(0, calc((var(--home-progress) - .18) * 1.8), 1);
}

.bismillah { display: block; width: 42%; min-width: 140px; margin: 18px auto; }
.line { width: 48%; max-width: 180px; display: block; margin: -8px auto; }
p { margin: 13px auto; max-width: 34ch; line-height: 1.45; }
.names { font-family: TheSeasonsLocal, Georgia, serif; font-size: 22px; line-height: 1.25; color: var(--silver); }
.names span, small { color: var(--silver); }
.bold { font-weight: 600; color: var(--ivory); }
.divider { width: 90px; margin: 5px auto; display: block; opacity: .9; }
.ring { width: 48px; margin: 6px auto 4px; display: block; opacity: .92; }
.section-label { font-family: TheSeasonsLocal, CinzelLocal, serif; font-size: 21px; color: var(--silver); }
.wide-art { width: 105%; margin: 20px -2.5% 0; display: block; }
.schedule-box { width: min(100%, 320px); margin: 24px auto 18px; padding: 8px 10px 13px; border: 1px solid rgba(207,200,195,.72); border-radius: 6px; }
.schedule-box .section-label { margin: 0 auto 8px; }
.schedule-box .schedule { margin: 0; padding-top: 9px; border-top: 8px solid transparent; border-image: url("assets/songket-top.png") 120 round; }
.schedule { font-size: 14px; line-height: 1.6; }
.polaroid { display: block; width: min(76%, 296px); margin: 28px auto; padding: 0; background: transparent; object-fit: contain; }
.smoke-wish { position: relative; min-height: 235px; display: grid; place-items: center; margin: 20px -20px 0; overflow: hidden; }
.smoke-wish img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-wish-slider { position: relative; z-index: 2; width: 100%; min-height: 112px; display: grid; place-items: center; margin-top: 20px; }
.home-wish-slider.is-changing .wish-preview { animation: cloudWishFade .72s ease both; }
.wish-preview { width: 100%; color: #1c1010; background: transparent; padding: 20px 74px; margin: 0; font-size: 13px; line-height: 1.25; text-align: center; }
.wish-preview p { margin: 0 auto 16px; max-width: 23ch; line-height: 1.25; }
.wish-preview strong { font-weight: 400; }
@keyframes cloudWishFade {
  0% { opacity: 0; filter: blur(5px); transform: translateY(4px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.image-button { border: 0; background: transparent; padding: 0; cursor: pointer; }
.image-button img { max-width: 245px; width: 70%; }

h2 { margin: 58px -8px 58px; font-family: TheSeasonsLocal, CinzelLocal, serif; font-size: clamp(62px, 18vw, 76px); font-weight: 300; color: var(--silver); line-height: .92; text-transform: uppercase; }
.contact-page { padding-inline: 22px; }
.contact-page a { display: grid; align-items: center; grid-template-columns: 1fr 160px; gap: 14px; color: var(--silver); text-decoration: none; font-family: TheSeasonsLocal, Georgia, serif; font-size: 25px; line-height: 1.12; margin: 54px auto; text-align: left; }
.contact-page a:nth-of-type(2) { grid-template-columns: 160px 1fr; text-align: left; }
.contact-page a:nth-of-type(2) img { order: -1; }
.contact-page a:nth-of-type(3) { grid-template-columns: 1fr 160px; }
.contact-page a img { display: block; width: 160px; height: 160px; margin: 0; border-radius: 50%; object-fit: cover; }
.map { width: 100%; height: 230px; border: 0; margin: 0 auto 28px; background: #efeef0; }
.map-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 260px; margin: 32px auto 16px; }
.map-actions a { color: var(--ivory); text-decoration: none; display: grid; gap: 8px; place-items: center; }
.map-actions img { width: 74px; height: 74px; object-fit: contain; }
.wish-list { display: grid; gap: 36px; margin-bottom: 34px; }
.wish-card { color: var(--silver); font-family: TheSeasonsLocal, Georgia, serif; font-size: 28px; line-height: 1.18; }
.wish-divider { display: block; width: 225px; max-width: 68%; margin: 0 auto 26px; opacity: .85; }
.wish-card strong { display: block; margin-bottom: 16px; font-weight: 400; }
.wish-card p { max-width: 14ch; margin: 0 auto; font: inherit; line-height: inherit; }
.plain-button, .wish-form button { min-height: 44px; border: 1px solid rgba(255,255,255,.4); border-radius: 22px; padding: 0 22px; background: var(--ivory); color: #6e5b5b; cursor: pointer; }
.gallery-page { padding-inline: 14px; }
.gallery-page h2 { margin-bottom: 32px; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.gallery-grid button { border: 0; padding: 0; background: transparent; overflow: hidden; border-radius: 8px; cursor: pointer; }
.gallery-grid button:first-child { grid-column: span 2; width: 78%; justify-self: center; border-radius: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.gallery-grid button:first-child img { aspect-ratio: auto; object-fit: contain; }
.calendar-art { width: 86%; display: block; margin: 26px auto 30px; }
.qr { width: min(78%, 274px); display: block; margin: 30px auto; }
#calendar p, #salam p { font-family: TheSeasonsLocal, Georgia, serif; color: var(--silver); font-size: 26px; line-height: 1.16; max-width: 16ch; }
#salam p { max-width: 19ch; font-size: 24px; }

.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; width: min(100%, 390px); height: 68px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(7,1fr); background: var(--nav); color: #050505; border-top: 1px solid #ddd; }
.bottom-nav button { min-width: 0; border: 0; padding: 4px 0 3px; background: transparent; color: #050505; display: grid; place-items: center; align-content: center; gap: 1px; font-family: CinzelLocal, Georgia, serif; font-size: 10px; line-height: 12px; letter-spacing: 0; cursor: pointer; outline: none; }
.bottom-nav button.active { background: rgba(0,0,0,.05); }
.bottom-nav button:focus-visible { box-shadow: inset 0 0 0 1px rgba(0,0,0,.24); }
.bottom-nav img { width: 30px; height: 30px; object-fit: contain; }

.seal-screen { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; background: #120103; transition: opacity .45s ease .9s, visibility .45s ease .9s; }
body.opened .seal-screen { opacity: 0; visibility: hidden; }
.seal-trigger { position: relative; width: min(100%,390px); height: 100vh; border: 0; padding: 0; overflow: hidden; background: var(--maroon); cursor: pointer; }
.panel { position: absolute; inset-block: 0; width: 50%; overflow: hidden; transition: transform .95s cubic-bezier(.72,0,.2,1); }
.panel.left { left: 0; }
.panel.right { right: 0; }
.panel img { position: absolute; top: 0; width: auto; max-width: none; height: 100%; display: block; }
.panel.left img { left: calc(100% - 30.75vh); }
.panel.right img { left: calc(-30.75vh); }
.wax-seal { --wax-size: clamp(136px, 39vw, 154px); position: absolute; z-index: 3; left: 50%; top: 50%; width: var(--wax-size); height: var(--wax-size); overflow: hidden; transform: translate(-50%, -50%); transition: transform .7s ease, opacity .45s ease; }
.wax-seal img { position: absolute; width: calc(var(--wax-size) * 1.776); left: calc(var(--wax-size) * -.332); top: calc(var(--wax-size) * -1.072); display: block; }
body.opened .panel.left { transform: translateX(-105%); }
body.opened .panel.right { transform: translateX(105%); }
body.opened .wax-seal { opacity: 0; transform: translate(-50%, -50%) scale(.74); }

dialog { color: var(--ivory); border: 1px solid rgba(201,196,188,.35); border-radius: 6px; background: #220205; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
dialog::backdrop { background: rgba(0,0,0,.76); }
.lightbox { width: min(94vw,680px); padding: 42px 12px 12px; }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.chooser, .wish-dialog { width: min(92vw,340px); padding: 46px 18px 18px; text-align: center; }
.chooser a { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid rgba(201,196,188,.35); border-radius: 5px; background: rgba(255,255,255,.08); color: var(--ivory); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.close-modal { position: absolute; right: 10px; top: 9px; border: 1px solid rgba(201,196,188,.3); border-radius: 5px; background: rgba(255,255,255,.08); color: var(--ivory); padding: 6px 10px; cursor: pointer; }
.wish-form { display: grid; gap: 12px; text-align: left; }
.wish-form label { color: var(--silver); font-size: 14px; }
.wish-form input, .wish-form textarea { width: 100%; margin-top: 6px; border: 1px solid rgba(201,196,188,.34); border-radius: 5px; padding: 12px; background: rgba(18,1,3,.44); color: var(--ivory); }

@media (max-width: 350px) {
  .bottom-nav { height: 64px; }
  .page-stack { padding-bottom: 64px; }
  .bottom-nav button { font-size: 8.5px; letter-spacing: 0; }
  .bottom-nav img { width: 27px; height: 27px; }
  h2 { font-size: 57px; margin-top: 52px; }
  .contact-page a { grid-template-columns: 1fr 130px; font-size: 20px; margin: 45px auto; }
  .contact-page a:nth-of-type(2) { grid-template-columns: 130px 1fr; }
  .contact-page a:nth-of-type(3) { grid-template-columns: 1fr 130px; }
  .contact-page a img { width: 130px; height: 130px; }
  #calendar p, #salam p { font-size: 22px; }
  .wish-card { min-height: 330px; font-size: 25px; }
  .wish-preview { padding-inline: 56px; font-size: 12px; }
}