/* Burgundy botanical invitation, inspired by the supplied palette. */
:root {
  --background: 40 57% 94%;
  --foreground: 351 28% 15%;
  --card: 41 65% 97%;
  --card-foreground: 351 28% 15%;
  --primary: 353 72% 24%;
  --primary-foreground: 41 65% 97%;
  --primary-glow: 353 58% 37%;
  --primary-deep: 351 76% 13%;
  --gold: 37 42% 51%;
  --gold-light: 42 56% 76%;
  --gold-deep: 34 45% 38%;
  --accent: 351 37% 85%;
  --accent-foreground: 353 72% 24%;
  --border: 35 35% 70%;
  --ring: 37 42% 51%;
  --gradient-velvet: linear-gradient(140deg, #77151c, #4b0a13 70%, #32070f);
  --gradient-curtain: linear-gradient(90deg, #370910, #75151e 50%, #370910);
  --shadow-royal: 0 27px 70px -24px rgb(45 2 11 / 52%);
}

body { background: #420910; }

header {
  background: rgb(62 7 16 / 95%) !important;
  border-bottom: 1px solid rgb(207 162 92 / 42%);
  box-shadow: 0 8px 28px rgb(30 2 8 / 22%);
}
header nav button.font-pinyon,
header nav ul button { color: #f8ead2 !important; }
header nav ul button:hover { background: rgb(247 228 193 / 13%); color: #fff8ec !important; }
header nav button[aria-label="Toggle menu"] { color: #f8ead2; background: #650d18; border-color: #b89561; }
header nav button.font-pinyon span { color: #d9b778; }

section#home {
  background: linear-gradient(rgb(65 4 15 / 13%), rgb(65 4 15 / 18%)),
    url("./burgundy-botanical-wallpaper.webp") center top / cover no-repeat !important;
  padding: 5.5rem 0 3rem;
}
#home > .relative.z-20 {
  width: min(94vw, 700px);
  max-width: none;
  min-height: 985px;
  padding: 230px 80px 135px;
  background: url("./ivory-floral-arch.webp") center center / 100% 100% no-repeat;
  filter: drop-shadow(0 25px 32px rgb(28 3 7 / 38%));
}
#home > .relative.z-20 > * { position: relative; z-index: 1; }
#home .font-display { color: #7c2631; }
#home h1.font-pinyon { color: #711324; font-size: clamp(4.7rem, 10vw, 7.2rem); }
#home .shimmer-text { color: #711324; }
#home .font-italianno { color: #4d2630; }
#home > .relative.z-20 > p.font-italianno { max-width: 390px; }
#home .bg-card\/80,
#home .bg-card\/90 { background-color: rgb(255 248 234 / 88%); border-color: #c5a976; }

#save-the-date {
  background: linear-gradient(rgb(250 239 218 / 93%), rgb(250 239 218 / 96%)),
    url("./burgundy-botanical-wallpaper.webp") center center / cover no-repeat;
  border-top: 9px solid #a27b45;
  border-bottom: 9px solid #a27b45;
}
#save-the-date::before,
#story::before,
#venue::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgb(165 123 64 / 35%);
  pointer-events: none;
}

#story, #venue { background: #f4e9d5; }
#story::after, #venue::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 130px;
  background: url("./burgundy-botanical-wallpaper.webp") center bottom / cover no-repeat;
  opacity: .11;
  pointer-events: none;
}
#story .rounded-2xl, #venue .rounded-2xl,
#venue .rounded-3xl { background-color: #fff9ec; border-color: #c8a76b; }

#events, #wardrobe {
  background: linear-gradient(rgb(63 5 15 / 83%), rgb(63 5 15 / 90%)),
    url("./burgundy-botanical-wallpaper.webp") center top / 100% auto repeat-y;
}
#countdown .shimmer-text { color: #f8e5bf; -webkit-text-fill-color: #f8e5bf; }
#events > .container > .text-center > .font-display,
#wardrobe > .container > .text-center > .font-display { color: #e5c992; }
#events > .container > .text-center > h2,
#wardrobe > .container > .text-center > h2 { color: #fff0d8; }
#events > .container > .text-center > p,
#wardrobe > .container > .text-center > p { color: #f3e1c7; }
#events article, #wardrobe article {
  background: #fff7e9;
  border-color: #c6a16b;
  box-shadow: 0 20px 38px rgb(28 2 8 / 27%);
}
#events article img { filter: sepia(.18) saturate(.82) hue-rotate(332deg) contrast(1.04); }
#events article:hover img { filter: sepia(.12) saturate(.95) hue-rotate(332deg) contrast(1.04); }
#events article h3, #wardrobe article h3 { color: #711324; }

#thanks {
  background: linear-gradient(rgb(52 4 12 / 62%), rgb(52 4 12 / 82%)),
    url("./burgundy-botanical-wallpaper.webp") center center / cover no-repeat !important;
  border-top: 8px solid #ad8955;
}
#thanks .font-pinyon, #thanks .font-italianno { color: #fff0d9; }

/* Minimal countdown composition: four portrait cards on the venue's cream field. */
#countdown {
  min-height: 0;
  padding: clamp(4.5rem, 10vh, 6rem) 1.25rem 4rem !important;
  display: flex;
  align-items: center;
  background: #f4e9d5 !important;
}
#countdown > .container { width: 100%; max-width: 56rem; }
#countdown > .container > .text-center > *:not(:first-child) { display: none; }
#countdown > .container > .text-center > p:first-child {
  margin: 0;
  color: #8a612c;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(.65rem, 1.7vw, .82rem);
  font-weight: 600;
  letter-spacing: .38em;
  line-height: 1.5;
  text-transform: uppercase;
}
#countdown > .container > .mt-12 > .relative {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
#countdown > .container > .mt-12 .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.45rem, 3.5vw, 1.75rem);
}
#countdown > .container > .mt-12 .grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  aspect-ratio: .56;
  padding: 1rem .35rem;
  border: 1px solid rgb(165 123 64 / 38%);
  border-radius: 2.25rem;
  background: linear-gradient(150deg, #fff9ec, #f8efdf);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 12px 28px rgb(73 35 18 / 9%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  justify-content: center;
  transition: border-color .25s ease, background .25s ease;
}
#countdown > .container > .mt-12 .grid > div::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(165 123 64 / 18%);
  border-radius: 1.9rem;
  z-index: -1;
  pointer-events: none;
}
#countdown > .container > .mt-12 .grid > div:hover {
  border-color: rgb(138 97 44 / 65%);
  background: linear-gradient(150deg, #fffdf6, #fff7e9);
}
#countdown > .container > .mt-12 .grid > div > div:first-child {
  color: #711324;
  font-size: clamp(1.65rem, 5.8vw, 3.25rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 16px rgb(73 35 18 / 10%);
}
#countdown > .container > .mt-12 .grid > div > div:last-child {
  margin-top: .85rem;
  color: #8a612c;
  font-size: clamp(.52rem, 1.8vw, .78rem);
  font-weight: 600;
  letter-spacing: .2em;
}
#countdown > .container > .mt-12 > .relative > p {
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
  color: #704d2d;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(.58rem, 2vw, .82rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: .28em;
  line-height: 1.8;
  text-transform: uppercase;
}

@media (max-width: 500px) {
  #countdown { min-height: 0; padding: 4.25rem .85rem 3rem !important; }
  #countdown > .container > .mt-12 { margin-top: 2.25rem; }
  #countdown > .container > .mt-12 .grid { gap: .45rem; }
  #countdown > .container > .mt-12 .grid > div { border-radius: 1.65rem; }
  #countdown > .container > .mt-12 .grid > div::before { inset: 5px; border-radius: 1.4rem; }
  #countdown > .container > .mt-12 .grid > div > div:last-child { letter-spacing: .12em; }
  #countdown > .container > .mt-12 > .relative > p { letter-spacing: .16em; }
}

div[aria-label="Wedding invitation envelope"] { background: #490a13; }
button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"] {
  border: 2px solid #bc985f;
  box-shadow: 0 20px 65px rgb(19 2 6 / 50%);
}
button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"] img {
  width: min(80vw, 400px);
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
}
button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"]::after { color: #711324; }
div[aria-label="Wedding invitation envelope"] p:last-child { color: #f8ead2; opacity: 1 !important; }

/* A restrained shower of metallic leaf and rose-petal shapes on date reveal. */
#save-the-date > div.fixed[aria-hidden="true"] > span[class*="-top-10"] {
  --drift-mid: 20px;
  --drift-end: -28px;
  width: 9px !important;
  height: 14px !important;
  border-radius: 80% 0 75% 20% !important;
  background: linear-gradient(145deg, #fff5d9 5%, #c7a36b 85%) !important;
  box-shadow: inset -1px -1px 1px rgb(108 64 29 / 22%), 0 2px 5px rgb(58 8 17 / 14%);
  transform-origin: 50% 65%;
  animation-name: burgundy-petal-fall !important;
  animation-timing-function: cubic-bezier(.27,.35,.55,.88) !important;
}
#save-the-date > div.fixed[aria-hidden="true"] > span:nth-child(3n) {
  --drift-mid: -30px;
  --drift-end: 42px;
  width: 7px !important;
  height: 11px !important;
  background: linear-gradient(145deg, #b65e6a, #7c1a2c) !important;
}
#save-the-date > div.fixed[aria-hidden="true"] > span:nth-child(4n) {
  --drift-mid: 38px;
  --drift-end: 64px;
  width: 8px !important;
  height: 12px !important;
  background: linear-gradient(145deg, #fffdf2, #e8d6b5) !important;
}
#save-the-date > div.fixed[aria-hidden="true"] > span:nth-child(7n) {
  --drift-mid: -18px;
  --drift-end: -52px;
  width: 3px !important;
  height: 9px !important;
  border-radius: 2px !important;
  background: #d9bd83 !important;
  box-shadow: 0 0 8px rgb(255 226 168 / 65%);
}

@keyframes burgundy-petal-fall {
  0% { opacity: 0; transform: translate3d(0, -3vh, 0) rotate(0deg) rotateY(0deg); }
  12% { opacity: .92; }
  45% { transform: translate3d(var(--drift-mid), 43vh, 0) rotate(130deg) rotateY(160deg); }
  80% { opacity: .82; }
  100% { opacity: 0; transform: translate3d(var(--drift-end), 115vh, 0) rotate(380deg) rotateY(440deg); }
}

a:focus-visible, button:focus-visible { outline: 3px solid #d9b778; outline-offset: 3px; }

@media (max-width: 700px) {
  section#home { padding: 4.1rem 0 1.5rem; background-size: auto 100% !important; }
  #home > .relative.z-20 {
    width: min(98vw, 540px);
    min-height: 820px;
    padding: 170px 36px 105px;
  }
  #home h1.font-pinyon { font-size: clamp(4.3rem, 17vw, 6rem); }
  #home .font-display { font-size: .65rem; letter-spacing: .25em; }
  #save-the-date::before, #story::before, #venue::before { inset: 10px; }
  #events, #wardrobe { background-size: auto 100%; }
}

@media (max-width: 400px) {
  #home > .relative.z-20 { min-height: 745px; padding: 150px 28px 90px; }
  #home h1.font-pinyon { font-size: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  #save-the-date > div.fixed[aria-hidden="true"] { display: none; }
}

button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"]::after {
  content: "Sarravanan\A &\A Dharaniswary";
  white-space: pre;
  top: 54%;
  transform: translateY(-50%);
  font-size: clamp(1.8rem, 8vw, 3.5rem);
  line-height: 1.05;
  color: #711324;
}
#home > .relative.z-20 { min-height: 780px; }
#home h1.font-pinyon { font-size: clamp(3rem, 8vw, 6rem); }
@media (max-width: 700px) {
  #home > .relative.z-20 { min-height: 680px; padding-top: 135px; padding-bottom: 90px; }
  #home h1.font-pinyon { font-size: clamp(2.7rem, 11vw, 4.1rem); }
}
@media (max-width: 400px) { #home h1.font-pinyon { font-size: 2.7rem; } }

/* Keep address digits aligned and the heart glow within its silhouette. */
#venue .venue-address {
  font-variant-numeric: lining-nums;
  line-height: 1.6;
}
#venue .address-number { white-space: nowrap; }
#thanks .thank-you-heart {
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 14px rgb(232 204 139 / 40%));
}