:root {
      --bg: #2b1620;
      --bg2: #3d1d2b;

      --card: #efe0df;
      --card-soft: #f7ece9;

      --text: #34222b;
      --muted: #765464;
      --accent: #7a2f46;
      --accent-soft: #b98292;
      --border: #d9bfc8;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);

  background-color: #2b1620;

  background-image:
    linear-gradient(
      180deg,
      rgba(61, 29, 43, 0.75),
      rgba(43, 22, 32, 0.98)
    ),
    url("pics/flowers.png");

  background-repeat:
    no-repeat,
    repeat;

  background-size:
    cover,
    800px;

  background-position:
    center,
    top left;

  min-height: 100vh;

  padding: 44px 0;
}

    .page {
      width: min(820px, calc(100% - 56px));
      margin: 0 auto;
      background:
        linear-gradient(180deg, var(--card-soft), var(--card));

      border: 1px solid rgba(217, 191, 200, 0.8);
      border-radius: 30px;

      box-shadow:
        0 30px 90px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.45);

      overflow: hidden;
    }

    .nav {
      display: flex;
      justify-content: center;
      gap: 48px;
      padding: 34px 20px 18px;
    }

    .nav a {
      text-decoration: none;
      color: var(--muted);
      font-size: 0.82rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      transition: 0.25s ease;
    }

    .nav a:hover {
      color: var(--accent);
    }

    section {
      padding: 64px 72px;
      text-align: center;
    }

    .hero {
      padding-top: 22px;
    }

    .monogram {
      font-size: 0.9rem;
      letter-spacing: 0.42em;
      color: var(--accent);
      margin-bottom: 28px;
    }

    h1 {
      font-size: clamp(2.4rem, 6vw, 4.4rem);
      line-height: 1.05;
      font-weight: normal;
      margin: 0 0 24px;
      white-space: nowrap;
    }

    h2 {
      font-size: 2rem;
      font-weight: normal;
      margin-bottom: 20px;
    }

    .details {
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      line-height: 1.9;
      font-size: 0.95rem;
    }

    .date {
      margin-top: 34px;
      color: var(--accent);
      letter-spacing: 0.25em;
      font-size: 1rem;
    }

    .image-wrap {
      padding: 0 46px 46px;
    }

    .hero-image {
      width: 100%;
      height: 500px;
      object-fit: cover;
      display: block;

      border-radius: 22px;

      box-shadow:
        0 18px 44px rgba(52, 34, 43, 0.2);
    }

    .button {
      display: inline-block;
      margin-top: 30px;
      padding: 14px 28px;

      text-decoration: none;
      border: 1px solid var(--accent);
      border-radius: 999px;

      color: var(--accent);

      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 0.78rem;

      transition: 0.25s ease;
    }

    .button:hover {
      background: var(--accent);
      color: white;
    }

    footer {
      padding: 40px;
      text-align: center;
      color: var(--muted);
      font-size: 0.85rem;
      letter-spacing: 0.12em;
    }
	
	.countdown {
		margin-top: 32px;

		color: var(--accent);

		font-size: 1.1rem;
		font-style: italic;
		letter-spacing: 0.08em;

		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;

	opacity: 0.92;
	}

	.countdown span {
		font-size: 2.4rem;
		line-height: 1;
	}
	
	.registry-options {
  margin-top: 42px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;

  flex-wrap: wrap;
}

.registry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 220px;
  padding: 18px 34px;

  background: linear-gradient(
    180deg,
    var(--accent-soft),
    var(--accent)
  );

  color: white;
  text-decoration: none;

  border-radius: 999px;

  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  box-shadow:
    0 12px 30px rgba(122, 47, 70, 0.22);

  transition: 0.25s ease;
}

.registry-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 18px 40px rgba(122, 47, 70, 0.28);
}

.qr-link {
  display: block;
}

.qr-code {
  width: 180px;
  height: 180px;
  object-fit: contain; /* this is the important fix */
  border-radius: 24px;
  padding: 10px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 12px 30px rgba(52, 34, 43, 0.16);
}

.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 28px;
  background: rgba(20, 8, 14, 0.86);
}

.qr-modal:target {
  display: flex;
}

.qr-modal img {
  max-width: min(90vw, 520px);
  max-height: 90vh;
  object-fit: contain;

  padding: 18px;
  background: white;
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.qr-modal-close {
  position: absolute;
  top: 24px;
  right: 30px;

  color: white;
  text-decoration: none;
  font-size: 3rem;
  line-height: 1;
}

.qr-modal-backdrop {
  position: absolute;
  inset: 0;
}

.nav a.active {
  color: var(--accent);

  position: relative;
}

.nav a.active::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -10px;

  transform: translateX(-50%);

  width: 26px;
  height: 2px;

  border-radius: 999px;

  background: var(--accent-soft);

  box-shadow:
    0 0 10px rgba(185, 130, 146, 0.55);
}

.schedule {
  margin-top: 52px;

  display: flex;
  flex-direction: column;
  gap: 28px;

  max-width: 760px;
  margin-inline: auto;
}

.schedule-item {
  display: grid;
  grid-template-columns: 150px 1fr;

  gap: 28px;

  text-align: left;

  padding-bottom: 28px;

  border-bottom: 1px solid rgba(122, 47, 70, 0.12);
}

.schedule-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.schedule-time {
  color: var(--accent);

  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  padding-top: 4px;
}

.schedule-details h3 {
  margin: 0 0 10px;

  font-size: 1.25rem;
  font-weight: normal;
}

.schedule-details p {
  margin: 0;

  line-height: 1.8;
  color: var(--muted);
}

@media (max-width: 700px) {

  .schedule-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .schedule-time {
    font-size: 0.9rem;
  }
}

.bg-floral-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);

  width: min(980px, calc(100% - 28px));
  height: 220px;

  object-fit: cover;
  object-position: top center;

  opacity: 0.22;

  pointer-events: none;
  user-select: none;

  z-index: 1;
}

.page {
  position: relative;
  z-index: 2;
}

.story-section {
  margin-top: 56px;

  display: flex;
  flex-direction: column;
  gap: 56px;
}

.story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 42px;
  align-items: center;
}

.story-row.reverse .story-text {
  order: 2;
}

.story-row.reverse .story-image {
  order: 1;
}

.story-text {
  text-align: left;
}

.story-text h3 {
  margin-top: 0;

  font-size: 1.8rem;
  font-weight: normal;

  color: var(--accent);
}

.story-text p {
  line-height: 1.9;
  color: var(--muted);
}

.story-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.16);
}

.gallery-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.gallery-trigger img,
.gallery-trigger video {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}

.gallery-trigger span {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(43, 22, 32, 0.78);
  color: white;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18);
}

.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  background: rgba(20, 8, 14, 0.9);
  padding: 72px 28px 36px;
  overflow-y: auto;
}

.gallery-modal.open {
  display: block;
}

.gallery-content {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}

.gallery-content img,
.gallery-content video {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 20px;
  background: white;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.24);
  transition: 0.25s ease;
}

#proposal-gallery .gallery-content {
  display: flex;
  justify-content: center;
}

#proposal-gallery .gallery-content video {
  width: min(90vw, 900px);
  height: auto;
  max-height: 85vh;
  object-fit: contain;
}

.gallery-content img:hover,
.gallery-content video:hover {
  transform: scale(1.02);
}

.gallery-close {
  position: fixed;
  top: 22px;
  right: 30px;
  z-index: 1000;
  border: none;
  background: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
}

.gallery-tile {
  display: block;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 28px;
  background: rgba(20, 8, 14, 0.92);
}

.image-lightbox:target {
  display: flex;
}

.image-lightbox img {
  position: relative;
  z-index: 2;

  max-width: 92vw;
  max-height: 88vh;

  object-fit: contain;

  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
}

.external-form-card {
  max-width: 560px;
  margin: 34px auto 0;
  padding: 42px 32px;

  border-radius: 28px;
  background: rgba(255,255,255,0.35);

  box-shadow: 0 18px 40px rgba(52, 34, 43, 0.12);
}

.mini-story-section {
  margin-top: 36px;
}

.mini-story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.mini-story-text {
  text-align: left;
}

.mini-story-text h3 {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: normal;
  color: var(--accent);
}

.mini-story-text p {
  line-height: 1.8;
  color: var(--muted);
}

.mini-story-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.14);
}

.mini-story-image {
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
}


    @media (max-width: 700px) {
      body {
        padding: 30px 0;
      }

      .page {
        width: calc(100% - 40px);
        border-radius: 24px;
      }

      section {
        padding: 52px 26px;
      }

      .image-wrap {
        padding: 0 20px 28px;
      }

      .hero-image {
        height: 340px;
        border-radius: 18px;
      }

      h1 {
        font-size: clamp(2rem, 10vw, 3rem);
        white-space: normal;
      }

      .nav {
        gap: 24px;
        flex-wrap: wrap;
      }
	  
	  .story-row {
		  grid-template-columns: 1fr;
	  }

	  .story-row.reverse .story-text,
	  .story-row.reverse .story-image {
		order: unset;
	  }

	  .story-image img {
		height: 300px;
	  }
	  
	  .gallery-trigger img,
	  .gallery-trigger video {
		width: 100%;
		height: auto;
		max-height: 260px;
		object-fit: contain;
		border-radius: 18px;
	  }
	  
	  .gallery-trigger span {
		position: static;
		transform: none;
		display: inline-block;
		margin-top: 14px;
	  }

	  .gallery-modal {
		padding: 68px 18px 28px;
	  }
	  
	  .story-row {
		gap: 24px;
	  }

		.gallery-trigger img,
		.gallery-trigger video {
			width: 100%;
			height: auto;
			max-height: 240px;
			object-fit: contain;
			background: rgba(255,255,255,0.18);
			border-radius: 18px;
		}
	  
	  .story-image {
		text-align: center;
	  }  
	  .story-image img{
		width: 100%;
		height: 340px;
		object-fit: cover;
	  }	  
	 
	  .mini-story-row {
		grid-template-columns: 1fr;
		gap: 24px;
	  }
	  .mini-story-image {
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
	  }
	  .mini-story-image img {
		width: 100%;
		height: 340px;
		object-fit: cover;
	  }
    }