:root {
  --paper: #f8f2e9;
  --paper-warm: #fbf7f0;
  --ink: #6c5d4b;
  --brown: #876a49;
  --taupe: #c2a177;
  --green: #748367;
  --gold: #d3b678;
  --shadow: 0 18px 38px rgba(94, 75, 54, 0.17);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Montserrat", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input {
  font: inherit;
}

button {
  touch-action: manipulation;
}

body.modal-open {
  overflow: hidden;
}

.wedding-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(34px, 5vw, 78px) 20px;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.58) 0 22%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(115deg, rgba(248, 239, 225, 0.5), rgba(255, 252, 247, 0.32)),
    url("assets/wedding-floral-background.png") center / cover no-repeat,
    linear-gradient(115deg, #f3eadc 0%, #fbf7f0 32%, #f6eddf 100%);
}

.content {
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  text-align: center;
  padding: clamp(18px, 4vw, 34px) 0;
}

.kicker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin: 0 0 clamp(18px, 2.6vw, 30px);
}

.kicker span {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: clamp(0.74rem, 1.35vw, 1.05rem);
  color: #76624f;
}

.kicker strong {
  position: relative;
  font-family: "Great Vibes", cursive;
  font-size: clamp(4.3rem, 8.5vw, 7rem);
  line-height: 0.8;
  font-weight: 400;
  color: #9a744d;
}

.kicker strong::after {
  content: "";
  position: absolute;
  left: 72%;
  top: 48%;
  width: clamp(80px, 14vw, 168px);
  height: 31px;
  border-bottom: 2px solid #a77b51;
  border-radius: 0 0 80% 0;
}

.kicker strong::before {
  content: "♡";
  position: absolute;
  left: calc(72% + clamp(78px, 11vw, 122px));
  top: 28%;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: #9a744d;
}

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3rem, 7vw, 5.95rem);
  font-weight: 500;
  line-height: 0.95;
  text-transform: uppercase;
  color: #6b5a47;
}

.ornament,
.footer-ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: clamp(20px, 3vw, 32px) auto clamp(16px, 2.8vw, 28px);
}

.ornament span,
.footer-ornament span {
  width: clamp(74px, 11vw, 158px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #b88b5f 35%, #b88b5f 65%, transparent);
}

.ornament i,
.footer-ornament i {
  font-style: normal;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  color: #a87a4e;
}

.date {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  margin: 0 0 clamp(70px, 8vw, 92px);
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.23em;
  font-size: clamp(1.15rem, 2.4vw, 2rem);
}

.date time {
  white-space: nowrap;
}

.date-leaves {
  position: relative;
  width: clamp(78px, 11vw, 134px);
  height: 30px;
}

.date-leaves::before,
.date-leaves::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #7d8b70;
}

.date-leaves::after {
  width: 18px;
  height: 18px;
  top: 4px;
  left: 16%;
  border-radius: 100% 0 100% 0;
  background: #7d8b70;
  box-shadow:
    24px -8px 0 #7d8b70,
    48px -2px 0 #7d8b70,
    24px 13px 0 #7d8b70,
    48px 9px 0 #7d8b70;
  transform: rotate(34deg) scale(0.7);
}

.date-leaves.left {
  transform: scaleX(-1);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
  margin: 0 auto clamp(30px, 5vw, 50px);
}

.count-card {
  position: relative;
  min-height: clamp(170px, 20vw, 235px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: clamp(42px, 5vw, 58px) 16px 28px;
  border-radius: 8px;
  background: rgba(250, 246, 238, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
}

.count-card strong {
  display: block;
  width: 100%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.7rem, 7vw, 6.2rem);
  font-weight: 400;
  line-height: 0.8;
  color: #756750;
  font-variant-numeric: tabular-nums;
}

.count-card span {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--green);
  font-size: clamp(0.75rem, 1.5vw, 1.05rem);
  font-weight: 400;
}

.badge {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(70px, 8vw, 92px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(72, 59, 45, 0.27);
}

.badge svg {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-green {
  background: linear-gradient(145deg, #899579, #69785e);
}

.badge-brown {
  background: linear-gradient(145deg, #92764f, #6f563c);
}

.badge-sand {
  background: linear-gradient(145deg, #d2b286, #b89465);
}

.badge-gold {
  background: linear-gradient(145deg, #dcc48c, #c19d59);
}

.closing {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  line-height: 1.1;
  color: #a67a51;
}

.footer-ornament {
  margin-top: 22px;
}

.footer-ornament span {
  width: 70px;
}

.floral-corner,
.floral-sprig,
.gold-dust {
  display: none;
}

.floral-corner {
  position: absolute;
  z-index: 1;
  width: clamp(250px, 29vw, 440px);
  aspect-ratio: 1;
  pointer-events: none;
}

.corner-top-left {
  top: -38px;
  left: -38px;
}

.corner-bottom-right {
  right: -46px;
  bottom: -52px;
  transform: rotate(180deg);
}

.rose,
.leaf,
.blossom {
  position: absolute;
  display: block;
}

.rose {
  border-radius: 50%;
  filter: drop-shadow(0 12px 14px rgba(87, 67, 43, 0.17));
}

.rose.large {
  width: 42%;
  aspect-ratio: 1;
  left: 3%;
  top: 19%;
}

.rose.medium {
  width: 29%;
  aspect-ratio: 1;
  left: 36%;
  top: 4%;
}

.rose.small {
  width: 22%;
  aspect-ratio: 1;
  left: 61%;
  top: 0;
}

.rose-cream {
  background:
    radial-gradient(circle at 52% 50%, #d6b985 0 8%, transparent 9%),
    repeating-radial-gradient(circle at 52% 50%, rgba(255,255,255,0.95) 0 8%, #eadcc5 9% 16%, #fff9ef 17% 22%);
}

.rose-taupe {
  background:
    radial-gradient(circle at 48% 48%, #8e6e48 0 8%, transparent 9%),
    repeating-radial-gradient(circle at 48% 48%, #c5a57b 0 9%, #a57d55 10% 17%, #dec9a9 18% 23%);
}

.rose-cocoa {
  background:
    radial-gradient(circle at 50% 50%, #785a3c 0 7%, transparent 8%),
    repeating-radial-gradient(circle at 50% 50%, #b68d63 0 9%, #8e6b49 10% 18%, #d5b891 19% 24%);
}

.leaf {
  width: 18%;
  aspect-ratio: 1.55;
  border-radius: 100% 0 100% 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.26), transparent 45%),
    #79836d;
  opacity: 0.86;
}

.leaf::after {
  content: "";
  position: absolute;
  inset: 50% 7% auto 9%;
  height: 1px;
  background: rgba(255, 255, 255, 0.42);
  transform: rotate(-18deg);
}

.leaf-a {
  left: 4%;
  top: 4%;
  transform: rotate(-34deg);
}

.leaf-b {
  left: 0;
  top: 51%;
  transform: rotate(52deg);
}

.leaf-c {
  left: 55%;
  top: 21%;
  transform: rotate(24deg);
}

.leaf-d {
  left: 70%;
  top: 42%;
  transform: rotate(76deg);
}

.blossom {
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #caa574 0 13%, transparent 14%),
    radial-gradient(circle at 50% 9%, #fff9ef 0 17%, transparent 18%),
    radial-gradient(circle at 91% 50%, #fff9ef 0 17%, transparent 18%),
    radial-gradient(circle at 50% 91%, #fff9ef 0 17%, transparent 18%),
    radial-gradient(circle at 9% 50%, #fff9ef 0 17%, transparent 18%);
}

.blossom-a {
  left: 49%;
  top: 40%;
}

.blossom-b {
  left: 25%;
  top: 64%;
  transform: scale(0.8);
}

.floral-sprig {
  position: absolute;
  right: -8px;
  top: 33%;
  width: 130px;
  height: 220px;
  z-index: 1;
  pointer-events: none;
}

.floral-sprig::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 10px;
  width: 2px;
  height: 165px;
  background: rgba(125, 139, 112, 0.7);
  transform: rotate(-18deg);
}

.floral-sprig span {
  position: absolute;
  width: 54px;
  height: 34px;
  border-radius: 100% 0 100% 0;
  background: #89927b;
  opacity: 0.75;
}

.floral-sprig span:nth-child(1) { top: 7px; left: 34px; transform: rotate(18deg); }
.floral-sprig span:nth-child(2) { top: 62px; left: 60px; transform: rotate(46deg); }
.floral-sprig span:nth-child(3) { top: 115px; left: 23px; transform: rotate(-28deg); }
.floral-sprig span:nth-child(4) { top: 154px; left: 74px; transform: rotate(48deg); }

.gold-dust {
  position: absolute;
  z-index: 0;
  width: 160px;
  height: 520px;
  background-image:
    radial-gradient(circle, rgba(202, 157, 82, 0.72) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(202, 157, 82, 0.47) 0 1.2px, transparent 1.8px);
  background-size: 54px 62px, 37px 44px;
  opacity: 0.65;
}

.dust-left {
  left: 5%;
  bottom: 17%;
  transform: rotate(-14deg);
}

.dust-right {
  right: 3%;
  top: 9%;
  transform: rotate(13deg);
}

@media (max-width: 860px) {
  .wedding-page {
    align-items: start;
    padding-top: 72px;
  }

  .countdown {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    row-gap: 58px;
    max-width: 620px;
  }

  .date {
    flex-wrap: wrap;
    row-gap: 8px;
    margin-bottom: 74px;
  }

  .date-leaves {
    width: 82px;
  }
}

@media (max-width: 560px) {
  .wedding-page {
    background-position: center, center, left top, center;
    padding: max(68px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .content {
    padding-top: 28px;
  }

  .kicker {
    flex-direction: column;
    gap: 12px;
  }

  .kicker strong {
    line-height: 1;
  }

  .kicker strong::before,
  .kicker strong::after {
    display: none;
  }

  h1 {
    font-size: clamp(2.55rem, 15vw, 4rem);
  }

  .date {
    letter-spacing: 0.15em;
  }

  .date-leaves {
    display: none;
  }

  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 430px;
    column-gap: 12px;
    row-gap: 46px;
  }

  .count-card {
    min-height: 146px;
    gap: 12px;
    padding: 38px 8px 20px;
  }

  .count-card strong {
    font-size: clamp(3.1rem, 18vw, 4.4rem);
  }

  .count-card span {
    font-size: clamp(0.63rem, 3vw, 0.76rem);
    letter-spacing: 0.16em;
  }

  .badge {
    width: 66px;
  }

  .corner-top-left,
  .corner-bottom-right {
    width: 260px;
  }

  .floral-sprig,
  .gold-dust {
    display: none;
  }
}

.login-trigger {
  position: fixed;
  top: max(clamp(16px, 3vw, 28px), env(safe-area-inset-top));
  right: max(clamp(16px, 3vw, 30px), env(safe-area-inset-right));
  z-index: 10;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(135, 106, 73, 0.34);
  border-radius: 999px;
  background: rgba(251, 247, 240, 0.82);
  color: #6b5a47;
  box-shadow: 0 10px 24px rgba(94, 75, 54, 0.14);
  backdrop-filter: blur(8px);
  font: 500 0.78rem/1 "Montserrat", Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.login-trigger:hover,
.login-trigger:focus-visible,
.login-submit:hover,
.login-submit:focus-visible,
.dialog-close:hover,
.dialog-close:focus-visible {
  border-color: rgba(116, 131, 103, 0.78);
  outline: none;
}

.login-dialog {
  width: min(390px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  max-height: calc(100svh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

.login-dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
}

.login-dialog::backdrop {
  background: rgba(70, 55, 38, 0.34);
  backdrop-filter: blur(3px);
}

.login-box {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  background: rgba(251, 247, 240, 0.96);
  box-shadow: var(--shadow);
}

.login-box h2 {
  margin: 0 30px 2px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 500;
  color: #6b5a47;
}

.login-box label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  color: var(--green);
}

.login-box input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(135, 106, 73, 0.28);
  border-radius: 6px;
  background: #fffaf2;
  color: var(--ink);
  font: 400 1rem/1.2 "Montserrat", Arial, sans-serif;
}

.login-box input:focus {
  border-color: var(--green);
  outline: 3px solid rgba(116, 131, 103, 0.17);
}

.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(135, 106, 73, 0.22);
  border-radius: 50%;
  background: rgba(255, 250, 242, 0.72);
  color: #876a49;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.login-submit {
  min-height: 46px;
  border: 1px solid rgba(116, 131, 103, 0.46);
  border-radius: 999px;
  background: linear-gradient(145deg, #899579, #69785e);
  color: #fff;
  font: 500 0.78rem/1 "Montserrat", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.login-error {
  margin: -4px 0 0;
  color: #9a4f3f;
  font-size: 0.88rem;
}

.guest-details {
  width: min(780px, 100%);
  margin: 0 auto 24px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(250, 246, 238, 0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
}

.guest-details h2 {
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: #6b5a47;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.detail-grid article {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px 14px;
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.72);
  border: 1px solid rgba(135, 106, 73, 0.16);
}

.detail-grid span {
  color: var(--green);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.detail-grid strong {
  color: #756750;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.08;
}

@media (max-width: 680px) {
  .login-trigger {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 380px) {
  .wedding-page { padding-inline: 10px; }
  .countdown { column-gap: 8px; }
  .count-card span { letter-spacing: 0.1em; }
  .login-box { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}