/* Garden editorial identity: peacock teal, sage, ivory and copper. */
:root {
  --background: 44 45% 96%;
  --foreground: 190 39% 18%;
  --card: 42 54% 98%;
  --card-foreground: 190 39% 18%;
  --popover: 42 54% 98%;
  --popover-foreground: 190 39% 18%;
  --primary: 190 62% 17%;
  --primary-foreground: 44 45% 96%;
  --primary-glow: 186 40% 33%;
  --primary-deep: 190 65% 13%;
  --secondary: 134 21% 80%;
  --secondary-foreground: 190 62% 17%;
  --gold: 15 42% 56%;
  --gold-light: 30 47% 78%;
  --gold-deep: 15 45% 43%;
  --muted: 128 20% 89%;
  --muted-foreground: 190 23% 38%;
  --accent: 136 22% 84%;
  --accent-foreground: 190 62% 17%;
  --border: 133 20% 74%;
  --input: 133 20% 74%;
  --ring: 15 42% 56%;
  --gradient-velvet: linear-gradient(145deg, #16464d 0%, #103c45 54%, #0b2f38 100%);
  --gradient-gold: linear-gradient(135deg, #e8c8b5 0%, #c2775b 52%, #9c5c49 100%);
  --gradient-ivory: linear-gradient(180deg, #f8f5ee 0%, #f1f2e8 100%);
  --gradient-blush: linear-gradient(135deg, #e8eee9 0%, #f4f1e9 55%, #dce7e5 100%);
  --gradient-curtain: linear-gradient(90deg, #0b2f38, #1d5359 50%, #0b2f38);
  --gradient-wax: radial-gradient(circle at 35% 30%, #d99a7d, #a85c4e 70%);
  --shadow-royal: 0 24px 60px -22px rgb(16 60 69 / 30%);
  --shadow-gold: 0 12px 34px -14px rgb(194 119 91 / 35%);
  --shadow-soft: 0 12px 36px -20px rgb(16 60 69 / 23%);
  --shadow-glow-gold: 0 0 30px rgb(194 119 91 / 28%);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background: #f8f5ee;
}

h1, h2, h3, h4,
.font-pinyon,
.font-script {
  font-family: "Playfair Display", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -.045em;
}

.font-italianno {
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: -.025em;
}

.font-display {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: .21em;
}

.font-serif-elegant {
  font-family: Georgia, serif;
  letter-spacing: -.015em;
}

.shimmer-text {
  background: none;
  color: hsl(var(--primary));
  -webkit-text-fill-color: currentColor;
  animation: none;
}

#thanks .shimmer-text { color: #f5eee2; }

.velvet-texture {
  background: linear-gradient(145deg, #194d53, #0c323b 70%);
}

.velvet-texture::before {
  background-image: linear-gradient(120deg, rgb(255 255 255 / 3%), transparent 55%);
}

section[id] { scroll-margin-top: 5rem; }

section[id] h2.font-pinyon {
  font-size: clamp(2.85rem, 7vw, 5.2rem);
  line-height: 1.12;
  max-width: 100%;
  overflow-wrap: anywhere;
}

section[id] h3.font-pinyon {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
}

section[id] .font-italianno {
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  line-height: 1.55;
}

section[id] .font-serif-elegant { line-height: 1.7; }

header nav button.font-pinyon {
  font-size: 1.5rem;
  letter-spacing: -.04em;
}

header nav button.font-pinyon span { color: #c2775b; }

section#home {
  min-height: 100svh;
  background: linear-gradient(180deg, rgb(248 245 238 / 86%), rgb(248 245 238 / 74%) 55%, rgb(248 245 238 / 86%)),
    url("./udaipur-lake-editorial.webp") center center / cover no-repeat !important;
}

#home h1.font-pinyon {
  font-size: clamp(4.7rem, 14vw, 8.5rem);
  line-height: 1;
  letter-spacing: -.07em;
}

#home .shimmer-text { color: #103c45; }

#home > div[aria-hidden="true"]:has(img[src*="diya-"]),
section > div[aria-hidden="true"]:has(img[src*="diya-"]) {
  display: none;
}

div[aria-label="Wedding invitation envelope"] {
  background: #f7f3eb;
}

div[aria-label="Wedding invitation envelope"] > div:first-child {
  background-image: none !important;
}

button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"] {
  position: relative;
  border: 1px solid #d4d6c7;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 28px 70px -25px rgb(16 60 69 / 34%);
}

button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"] img {
  width: min(84vw, 440px);
  height: min(68vh, 640px);
  object-fit: cover;
  object-position: center;
}

button[aria-label="Open Sarravanan and Dharaniswary wedding invitation"]::after {
  content: "Sarravanan  &  Dharaniswary";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 43%;
  color: #103c45;
  font: 500 clamp(2rem, 7vw, 3.4rem)/1.15 "Playfair Display", Georgia, serif;
  letter-spacing: -.07em;
  text-align: center;
  text-shadow: 0 2px 18px #f7f3eb;
}

div[aria-label="Wedding invitation envelope"] p:last-child {
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

#save-the-date {
  background: linear-gradient(115deg, rgb(248 245 238 / 96%), rgb(236 242 235 / 92%)),
    url("./garden-invitation-arch.webp") right center / 45% auto no-repeat;
}

#story { background: #eef2eb; }
#events { background: #e6eee8; }
#venue { background: #e8f0ee; }
#wardrobe { background: #f8f5ee; }

#events img { filter: saturate(.9); }

#events .rounded-2xl,
#story .rounded-2xl,
#wardrobe .rounded-2xl,
#venue .rounded-2xl,
#venue .rounded-3xl {
  border-radius: 1rem;
}

#events .bg-card\/90,
#story .bg-card\/85,
#wardrobe .bg-card\/90 {
  background-color: rgb(255 253 248 / 94%);
}

#thanks {
  background: linear-gradient(rgb(10 47 56 / 89%), rgb(10 47 56 / 95%)),
    url("./udaipur-lake-editorial.webp") center bottom / cover no-repeat !important;
}

#thanks .font-pinyon,
#thanks .font-italianno { color: #f7f3eb; }

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

@media (max-width: 640px) {
  #home { background-position: 52% center !important; }
  #home .relative.z-20 { padding-top: 7rem; }
  #save-the-date { background-image: var(--gradient-ivory); }
  section[id] h2.font-pinyon { font-size: clamp(2.65rem, 11vw, 3.8rem); }
  #home h1.font-pinyon { font-size: clamp(4.3rem, 20vw, 6rem); }
}