/* ═══════════════════════════════════════════════════════════
   GAYATHRI & NARENDRA — 2026
   Light blue · pearl · modern glass · subtle gold
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Blues */
  --blue-pale:  #eaf2fb;
  --blue-light: #c6d9f0;
  --blue:       #6b9fd4;
  --blue-mid:   #4a7abf;
  --blue-deep:  #2c5282;
  --blue-dark:  #1a3a5c;

  /* Neutrals */
  --white:   #ffffff;
  --off-white: #f8fafd;
  --text:    #1e2d3d;
  --text-soft: #4a6080;
  --ink:     #21425f;
  --ink-soft: #5a768f;
  --border:  rgba(107,159,212,0.25);

  /* Accent gold — from the wax seal + temple gilding (the one warm accent) */
  --gold:      #b1854a;
  --gold-deep: #8a6630;
  --gold-light: #d8c39b;

  /* Typography */
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;
  --script: 'Great Vibes', cursive;
  /* Telugu lettering renders with the device's own Telugu font — no web font loaded */
  --telugu: 'Telugu Sangam MN', 'Kohinoor Telugu', 'Noto Sans Telugu', 'Gautami', 'Nirmala UI', 'Cormorant Garamond', serif;

  /* Gradients */
  --grad-blue: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-mid) 50%, var(--blue) 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(220,236,252,0.5) 100%);
  --grad-gold:  linear-gradient(115deg, #7a6030 0%, #c9a55a 25%, #8aa5c4 55%, #dfc99a 80%, #7a6030 100%);

  --ease-lux:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Envelope door geometry */
  --door-x: 38.58%; --door-y: 54.13%;
  --door-w: 24.23%; --door-h: 30.08%;
  --seal: clamp(124px, 20vh, 196px);
}

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--sans);
  background: #c8dff0;
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--blue-mid); color: #fff; }
img { display: block; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════
   CINEMATIC ENVELOPE OPENING
   ═══════════════════════════════════════════════════════════ */
.cinema {
  position: fixed; inset: 0; z-index: 900; overflow: hidden;
  background: linear-gradient(170deg, #cdd9ee, #b4c8e0);
  perspective: 1050px; perspective-origin: 50% 34%;
}
.cinema.gone {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.55s var(--ease-soft), visibility 0.55s;
}

.temple-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform-origin: 50.7% 69.2%;
  will-change: transform; backface-visibility: hidden;
}
.temple-stage.zoom { animation: templeZoom 3.1s cubic-bezier(0.4,0.02,0.35,1) forwards; }
@keyframes templeZoom { to { transform: scale(4.4) translateZ(0); } }
.temple-stage.breathe { animation: templeBreathe 9s ease-in-out infinite; }
@keyframes templeBreathe { 0%,100%{ transform:scale(1.02); } 50%{ transform:scale(1.055); } }

.temple-frame { position: relative; flex-shrink: 0; height: 100%; width: 100%; }
.temple-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.doorway {
  position: absolute;
  left: var(--door-x); top: var(--door-y);
  width: var(--door-w); height: var(--door-h);
  perspective: 900px; perspective-origin: 50% 50%;
}
.door-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 62%, #f8fbff 0%, #e4edf9 32%, #c5d4e6 60%, #8aa5c4 100%);
  opacity: 0; transition: opacity 1.6s var(--ease-soft);
}
.door-glow.lit { opacity: 1; }
.door {
  position: absolute; top: 0; height: 100%; width: 50%;
  overflow: hidden; backface-visibility: hidden;
  transition: transform 1.9s var(--ease-soft);
  will-change: transform; transform: translateZ(0);
}
.door img { position: absolute; width: 825.4%; height: 332.4%; max-width: none; }
.door-l { left: 0; transform-origin: left center; }
.door-l img { left: -318.4%; top: -179.9%; }
.door-r { right: 0; transform-origin: right center; }
.door-r img { left: -418.4%; top: -179.9%; }
.door::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.9s var(--ease-soft);
}
.door-l::after { background: linear-gradient(90deg, rgba(30,60,100,0.5), transparent 70%); }
.door-r::after { background: linear-gradient(270deg, rgba(30,60,100,0.5), transparent 70%); }
.cinema.doors-open .door-l { transform: rotateY(-84deg); }
.cinema.doors-open .door-r { transform: rotateY(84deg); }
.cinema.doors-open .door::after { opacity: 1; }

.light-flood {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(circle at 50.7% 69.2%, #f8fbff 0%, #e4edf9 45%, rgba(228,237,249,0) 75%);
  opacity: 0; transition: opacity 0.55s var(--ease-soft);
}
.light-flood.flood { opacity: 0.94; }

.envelope { position: absolute; inset: 0; z-index: 30; transform-style: preserve-3d; }
.env-plate {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
}
.env-sheet {
  position: absolute; inset: 0;
  background-color: #c8d8eb;
  background-image: url("assets/cover-envelope.jpg");
  background-size: cover;
  background-position: center top;
}
/* Clip paths tuned for full-viewport tall screens (apex at ~52% height) */
.env-flap, .env-flap-back {
  clip-path: polygon(0% 0%, 100% 0%, 100% 22%, 51.6% 52.5%, 50.6% 53.3%, 49.74% 53.8%, 48.9% 53.3%, 47.88% 52.5%, 0% 21.8%);
}
.env-body {
  clip-path: polygon(0% 21.5%, 47.88% 52.2%, 48.9% 53%, 49.74% 53.55%, 50.6% 53%, 51.6% 52.2%, 100% 21.8%, 100% 100%, 0% 100%);
}
.env-flap { filter: brightness(1.03) drop-shadow(0 9px 15px rgba(60,100,150,0.3)); }
.env-body { filter: brightness(0.97); }
.cover-lower {
  position: absolute; inset: 0;
  transition: transform 1.6s var(--ease-lux), opacity 1.6s var(--ease-lux);
}
.cinema.cover-down .cover-lower { transform: translateY(112%); opacity: 0.97; }
.env-flap-wrap {
  position: absolute; inset: 0;
  transform-origin: center top;
  transform-style: preserve-3d;
}
.cinema.flap-open .env-flap-wrap { animation: flapPeel 2.8s cubic-bezier(0.42,0,0.3,1) forwards; }
@keyframes flapPeel {
  0%  { transform: rotateX(0deg); }
  9%  { transform: rotateX(-5deg) scaleY(1.004); }
  22% { transform: rotateX(-21deg) scaleY(1.012); }
  55% { transform: rotateX(-88deg) scaleY(1.006); }
  84% { transform: rotateX(-152deg); }
  100%{ transform: rotateX(-168deg); }
}
.cinema.cover-down .env-flap-wrap { opacity: 0; transition: opacity 1s var(--ease-soft); }
.env-flap, .env-flap-back { backface-visibility: hidden; }
.env-flap-back {
  transform: rotateX(180deg);
  background-image: linear-gradient(178deg, #b8ccde 0%, #a8bcce 100%);
  filter: brightness(0.92);
}
.env-tuck {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  clip-path: polygon(0% 66%, 35.07% 46.5%, 48.88% 41.3%, 62.49% 46.4%, 100% 69%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, rgba(40,70,110,0.18) 47.5%, rgba(40,70,110,0.06) 100%);
}

/* ── Wax seal ── */
.seal-btn {
  position: absolute; left: 49.74%; top: 53.8%;
  transform: translate(-50%, -50%);
  width: var(--seal); height: var(--seal);
  border: 0; background: none; cursor: pointer;
  z-index: 35; border-radius: 50%;
  transition: transform 0.5s var(--ease-lux), filter 0.6s;
  animation: sealIn 1.2s 0.5s var(--ease-lux) backwards;
}
@keyframes sealIn { from { opacity:0; transform:translate(-50%,-50%) scale(0.55) rotate(-25deg); } }
/* Pulse ring invites the tap — framed around the seal already embossed in the cover photo */
.seal-btn::before {
  content: ''; position: absolute; inset: -6%; border-radius: 50%;
  border: 1.5px solid rgba(177,133,74,0.55);
  animation: sealPulse 3s ease-out infinite;
}
@keyframes sealPulse { 0%{ transform:scale(0.92);opacity:.8; } 70%,100%{ transform:scale(1.4);opacity:0; } }
.seal-glow {
  position: absolute; inset: -34%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,228,0.5) 0%, rgba(216,195,155,0.18) 42%, transparent 70%);
  animation: sealBreathe 3.4s ease-in-out infinite;
}
@keyframes sealBreathe { 0%,100%{ transform:scale(1);opacity:.55; } 50%{ transform:scale(1.14);opacity:.9; } }
.seal-svg[hidden] { display: none; }
.seal-btn:hover { transform: translate(-50%, -50%) scale(1.07); }
.seal-btn:active { transform: translate(-50%, -50%) scale(0.93); }
.seal-btn.breaking { animation: sealGive 0.9s var(--ease-lux) forwards; }
@keyframes sealGive {
  0%  { transform: translate(-50%,-50%) scale(0.93) rotate(0deg); }
  40% { transform: translate(-50%,-50%) scale(1.1) rotate(-4deg); }
  100%{ transform: translate(-50%,-50%) scale(1.04) rotate(-2deg); }
}
.wax-mono text { font-family: 'Pinyon Script', cursive; font-size: 34px; }
.seal-hint {
  position: absolute; left: 0; right: 0; top: 59.8%;
  margin-top: calc(0.52 * var(--seal) + 19.5vh);
  z-index: 35; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: clamp(0.58rem, 1.6vw, 0.7rem);
  letter-spacing: 0.34em; text-transform: uppercase; color: #2a4a6a;
  animation: hintFade 2.6s ease-in-out 1.6s infinite;
}
@keyframes hintFade { 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.seal-hint.hide { opacity: 0; animation: none; transition: opacity 0.4s; }

/* ── Scroll & Music ── */
.scroll-hint {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 800; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 22px 12px; border: 1px solid var(--border);
  background: rgba(240,246,255,0.82); border-radius: 40px;
  box-shadow: 0 6px 20px rgba(60,90,140,0.18);
  cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.7s, visibility 0.7s, transform 0.5s;
}
.scroll-hint.show { opacity: 1; visibility: visible; pointer-events: auto; }
.scroll-hint.gone { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(14px); }
.sh-text { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--blue-deep); font-weight: 500; }
.sh-chevron {
  width: 10px; height: 10px;
  border-right: 2px solid var(--blue-deep); border-bottom: 2px solid var(--blue-deep);
  transform: rotate(45deg);
  animation: shBounce 1.5s ease-in-out infinite;
}
@keyframes shBounce { 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5; } 50%{ transform:rotate(45deg) translate(3px,3px); opacity:1; } }

.music-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 950;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(240,246,255,0.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s, transform 0.3s;
  box-shadow: 0 4px 14px rgba(60,90,140,0.18);
}
.music-btn.show { opacity: 1; visibility: visible; }
.music-btn:hover { transform: scale(1.08); }
.music-ico { display: flex; align-items: flex-end; gap: 2.5px; height: 15px; }
.music-ico i { display: block; width: 2.5px; border-radius: 2px; background: var(--blue-deep); height: 5px; animation: bars 1.05s ease-in-out infinite; }
.music-ico i:nth-child(1){ animation-delay:0s; }
.music-ico i:nth-child(2){ animation-delay:.18s; }
.music-ico i:nth-child(3){ animation-delay:.36s; }
.music-ico i:nth-child(4){ animation-delay:.52s; }
@keyframes bars { 0%,100%{ height:4px; } 50%{ height:15px; } }
.music-btn.muted .music-ico i { animation: none; height: 4px; opacity: 0.4; }
.music-btn.muted::after {
  content: ''; position: absolute; left: 9px; right: 9px; top: 50%;
  height: 1px; background: var(--blue-deep); transform: rotate(-38deg);
}

/* ── Petals canvas ── */
#petals { position: fixed; inset: 0; z-index: 5; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   MAIN SITE
   ═══════════════════════════════════════════════════════════ */
.site {
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s var(--ease-soft), visibility 0.7s;
  position: relative;
}
.site.visible { opacity: 1; visibility: visible; }

/* Global watercolor background */
.site::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url('assets/bg-watercolor.jpg') center center / cover no-repeat;
}
/* Subtle tint overlay so text sections stay readable */
.site::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(240, 247, 255, 0.18);
}

/* Reveal animation */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 1s var(--ease-lux), transform 1s var(--ease-lux);
}
.reveal.in { opacity: 1; transform: none; }

/* Glass cards */
.glass {
  background: var(--grad-glass);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(60,100,160,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Shared section layout */
.section {
  position: relative; max-width: 1100px; margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 40px);
  text-align: center;
}
/* Telugu section kicker — traditional lettering above each title (device Telugu font, no web font) */
.eyebrow, .kicker {
  font-family: var(--telugu); font-weight: 500;
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  color: var(--gold-deep); letter-spacing: 0.01em;
  margin-bottom: 9px; line-height: 1.35;
}
.section-mark {
  display: block; width: clamp(104px, 28vw, 128px); height: 15px;
  margin: 12px auto 0;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cline x1='2' y1='10' x2='46' y2='10' stroke='%23b1854a' stroke-width='1'/%3E%3Ccircle cx='46' cy='10' r='1.6' fill='%23b1854a'/%3E%3Cpath d='M60 3 L67 10 L60 17 L53 10 Z' fill='none' stroke='%23b1854a' stroke-width='1.4'/%3E%3Ccircle cx='74' cy='10' r='1.6' fill='%23b1854a'/%3E%3Cline x1='74' y1='10' x2='118' y2='10' stroke='%23b1854a' stroke-width='1'/%3E%3C/svg%3E");
}
.section-title {
  position: relative;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.8vw, 3.2rem); color: var(--blue-dark);
  letter-spacing: 0.02em; line-height: 1.2;
  padding-bottom: 18px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.section-title::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56px; height: 1px; background: var(--gold); opacity: 0.55;
}

/* ═══════════════ HERO ═══════════════ */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(72px, 12vh, 120px) 24px clamp(88px, 14vh, 128px);
  /* Watercolor ground with a soft luminous veil — texture stays visible, center stays legible */
  background:
    radial-gradient(135% 92% at 50% 40%, rgba(255,255,255,0.46) 0%, rgba(236,244,252,0.30) 42%, rgba(197,219,240,0.42) 78%, rgba(176,202,230,0.55) 100%),
    url('assets/bg-watercolor.jpg') center / cover no-repeat;
}
.hero-content { position: relative; z-index: 2; width: 100%; max-width: 620px; }

/* Telugu blessing + gold ornament */
.hero-kicker {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: clamp(18px, 3.5vh, 30px);
}
.telugu-blessing {
  font-family: var(--telugu); font-weight: 500;
  font-size: clamp(1.1rem, 3.6vw, 1.55rem);
  color: var(--gold-deep); letter-spacing: 0.02em; line-height: 1.3;
}
.orn-mark { width: clamp(108px, 30vw, 136px); height: auto; overflow: visible; }
.orn-mark line { stroke: var(--gold); stroke-width: 1; opacity: 0.85; }
.orn-mark path { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.orn-mark circle { fill: var(--gold); }

.hero-invite {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(0.98rem, 2.4vw, 1.18rem);
  color: var(--ink-soft, #5a768f); line-height: 1.6;
  max-width: 24ch; margin: 0 auto clamp(14px, 3vh, 22px);
}
.hero-names {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; margin-bottom: clamp(22px, 4.5vh, 34px);
}
.hero-name {
  font-family: var(--script);
  font-size: clamp(3.4rem, 15vw, 5.6rem);
  line-height: 1.28; padding: 0.06em 0.12em;
  color: #21425f;
  background: linear-gradient(176deg, #2c5282 0%, #21425f 55%, #1a3a5c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(130,165,210,0.3));
}
@supports not (-webkit-background-clip: text) {
  .hero-name { -webkit-text-fill-color: unset; color: #21425f; }
}
.hero-amp {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  color: var(--gold); line-height: 1; margin: -2px 0;
}

.hero-date-bar {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 16px 30px; position: relative;
}
.hero-date-bar::before, .hero-date-bar::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 46px; height: 1px; background: var(--gold); opacity: 0.6;
}
.hero-date-bar::before { top: 0; }
.hero-date-bar::after { bottom: 0; }
.hdb-main {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 3vw, 1.4rem); letter-spacing: 0.04em;
  color: var(--blue-dark);
}
.hdb-sub {
  font-family: var(--sans); font-size: clamp(0.72rem, 1.9vw, 0.84rem);
  letter-spacing: 0.04em; color: var(--text-soft);
}

.hero-scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 2;
}
.sc-line {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, rgba(110,150,195,0.7));
  position: relative; overflow: hidden; margin: 0 auto;
}
.sc-line::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: rgba(110,150,195,0.9);
  animation: cueDrop 2.2s var(--ease-lux) infinite;
}
@keyframes cueDrop { to { top: 110%; } }

/* ═══════════════ HERO COUNTDOWN ═══════════════ */
.hero-countdown {
  display: inline-flex; align-items: stretch; justify-content: center;
  margin-top: clamp(26px, 5vh, 40px);
  padding: 4px; border-radius: 16px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 10px 30px rgba(80,120,175,0.18);
}
.hcd-unit {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px; min-width: 60px; position: relative;
}
.hcd-unit + .hcd-unit::before {
  content: ''; position: absolute; left: 0; top: 20%; height: 60%;
  width: 1px; background: rgba(107,159,212,0.28);
}
.hcd-num {
  font-family: var(--serif); font-variant-numeric: lining-nums;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 600; line-height: 1; color: var(--blue-dark);
}
.hcd-label {
  display: block; margin-top: 5px;
  font-family: var(--sans); font-size: 0.52rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--blue-mid); font-weight: 600;
}

/* ═══════════════ COUPLE ═══════════════ */
.couple-section { max-width: 760px; }
.couple-photo {
  width: clamp(230px, 64vw, 300px); margin: 0 auto clamp(26px, 5vw, 38px);
  position: relative; padding: 9px;
  border-radius: 40px 40px 22px 22px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(177,133,74,0.35);
  box-shadow: 0 22px 50px rgba(60,100,160,0.22);
}
.couple-photo img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
  border-radius: 33px 33px 15px 15px;
  display: block;
}
.couple-pair {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(14px, 3vw, 30px);
  max-width: 640px; margin: 0 auto;
}
.person { text-align: center; }
.person-name {
  font-family: var(--script); font-size: clamp(2rem, 7vw, 2.9rem);
  font-weight: 400; color: var(--blue-dark); line-height: 1.25;
  padding-top: 0.06em; margin-bottom: 8px;
}
.person-of {
  font-family: var(--serif); font-style: italic; font-size: 0.98rem;
  color: var(--gold-deep); margin-bottom: 5px;
}
.person-parents {
  font-family: var(--serif); font-style: italic; font-size: clamp(0.92rem, 2.3vw, 1.02rem);
  line-height: 1.6; color: var(--text-soft);
}
.pair-amp {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--gold); align-self: center;
}

/* ═══════════════ COUNTDOWN ═══════════════ */
.countdown-section { background: none; }
.countdown-label {
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--blue-mid); margin-bottom: 36px; font-weight: 500;
}
.countdown {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(8px, 2.5vw, 24px); flex-wrap: wrap;
}
.cd-unit {
  min-width: clamp(72px, 15vw, 120px);
  padding: clamp(16px, 2.5vw, 28px) clamp(8px, 1.5vw, 16px);
  border-radius: 16px; text-align: center;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 8px 24px rgba(60,100,160,0.08);
  opacity: 0; transform: translateY(24px) scale(0.95);
}
.countdown.in .cd-unit { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-lux), transform 0.9s var(--ease-lux); }
.countdown.in .cd-unit:nth-of-type(2){ transition-delay:.12s; }
.countdown.in .cd-unit:nth-of-type(3){ transition-delay:.24s; }
.countdown.in .cd-unit:nth-of-type(4){ transition-delay:.36s; }
.countdown.in .cd-unit:hover { transform: translateY(-6px); }
.cd-num {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 6.5vw, 3.8rem); line-height: 1;
  background: var(--grad-blue); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5s linear infinite;
  font-variant-numeric: tabular-nums;
}
.cd-num.tick { animation: shimmer 5s linear infinite, numPop 0.4s var(--ease-lux); }
@keyframes numPop { 0%{ transform:translateY(-8px);opacity:.3; } 100%{ transform:none;opacity:1; } }
.cd-label { display: block; margin-top: 10px; font-family: var(--sans); font-size: clamp(0.55rem, 1.3vw, 0.68rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue-mid); font-weight: 500; }
.cd-sep { font-size: clamp(1.6rem, 4vw, 2.4rem); color: rgba(107,159,212,0.45); padding-top: clamp(18px, 2.5vw, 30px); }

/* ═══════════════ EVENTS ═══════════════ */
.events-section { max-width: 1100px; }

/* Day tabs */
.day-tabs {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.day-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 32px; border-radius: 16px; border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.55); cursor: pointer;
  transition: all 0.3s var(--ease-lux); font-family: var(--sans);
  min-width: 120px;
}
.day-tab.active {
  background: var(--grad-blue); border-color: transparent;
  box-shadow: 0 8px 24px rgba(44,82,130,0.3);
}
.day-tab-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-mid);
  transition: color 0.3s;
}
.day-tab.active .day-tab-badge { color: rgba(255,255,255,0.75); }
.day-tab-date {
  font-size: 0.88rem; font-weight: 500; color: var(--blue-dark);
  transition: color 0.3s;
}
.day-tab.active .day-tab-date { color: #fff; }
.day-tab:not(.active):hover { border-color: var(--blue-mid); transform: translateY(-2px); }

.events-panel { transition: opacity 0.3s; }
.events-panel.hidden { display: none; }

.events-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.5vw, 24px); margin-bottom: 0;
}
.event-tile {
  border-radius: 18px; overflow: hidden;
  padding: clamp(20px, 3vw, 28px);
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s;
  transition-delay: var(--delay, 0s);
  display: flex; flex-direction: column; gap: 10px;
}
.event-tile:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(60,100,160,0.15); }
.highlight-tile {
  background: linear-gradient(135deg, rgba(44,82,130,0.15) 0%, rgba(107,159,212,0.2) 100%);
  border-color: rgba(107,159,212,0.5);
}

.et-date {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--grad-blue); color: #fff;
  padding: 10px 14px; border-radius: 12px;
  width: fit-content;
  box-shadow: 0 8px 20px rgba(44,82,130,0.3);
}
.highlight-date { background: linear-gradient(135deg, #1a3a5c, #4a7abf); }
.et-d { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.et-m { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.25em; opacity: 0.88; font-weight: 500; }
.et-body { flex: 1; text-align: left; }
.et-tag { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue-mid); font-weight: 600; }
.et-title { font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 1.6rem); font-weight: 500; color: var(--blue-dark); margin: 4px 0 6px; }
.et-time { font-family: var(--sans); font-size: 0.88rem; font-weight: 500; color: var(--text-soft); }
.et-venue { font-family: var(--sans); font-size: 0.82rem; color: var(--text-soft); line-height: 1.5; margin-top: 4px; }
.et-actions { display: flex; gap: 8px; margin-top: 14px; }

.btn-sm {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 20px; text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-sm:hover { transform: translateY(-2px); }
.btn-blue {
  background: var(--grad-blue); color: #fff;
  box-shadow: 0 4px 12px rgba(44,82,130,0.28);
}
.btn-blue:hover { box-shadow: 0 8px 20px rgba(44,82,130,0.38); }
.btn-outline { border: 1px solid var(--border); color: var(--blue-deep); background: transparent; }
.btn-outline:hover { background: rgba(107,159,212,0.08); }

/* ═══════════════ SCHEDULE (compact event list) ═══════════════ */
.schedule {
  border-radius: 18px; padding: 6px clamp(10px, 3vw, 22px);
  max-width: 600px; margin: 0 auto;
}
.sched-item {
  display: grid; grid-template-columns: 76px 1fr auto;
  align-items: center; gap: 0 14px;
  padding: 18px 6px; border-bottom: 1px solid rgba(107,159,212,0.16);
  transition: background 0.2s;
}
.sched-item:last-child { border-bottom: none; }
/* Muhurtham — the one sacred peak gets the gold treatment */
.sched-item--highlight {
  margin: 4px -14px; padding: 18px 20px; border-bottom: none;
  background: linear-gradient(100deg, rgba(177,133,74,0.12), rgba(216,195,155,0.06));
  border: 1px solid rgba(177,133,74,0.35);
  border-radius: 14px;
}
.sched-time {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 500;
  color: var(--blue-mid); text-align: right; white-space: nowrap;
}
.sched-item--highlight .sched-time { color: var(--gold-deep); }
.sched-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue-mid); margin: 0 auto;
  box-shadow: 0 0 0 3px rgba(107,159,212,0.22);
}
.sched-dot--gold {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(177,133,74,0.22);
}
.sched-body { text-align: left; }
.sched-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--blue-dark); }
.sched-item--highlight .sched-name { color: var(--gold-deep); }
.sched-sacred {
  font-family: var(--serif); font-style: italic; font-size: 0.82rem;
  color: var(--gold); margin-top: 2px;
}
.sched-cal { flex-shrink: 0; }

/* ═══════════════ VENUE + DRESS CODE (combined) ═══════════════ */
.venue-dress-section { max-width: 1060px; }
.vd-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 32px); align-items: start;
}
.vd-venue, .vd-dress {
  border-radius: 20px; padding: clamp(24px, 3.5vw, 40px);
  display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.vd-title {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 500; color: var(--blue-dark);
}
.venue-address { font-family: var(--sans); font-size: 0.92rem; color: var(--text-soft); line-height: 1.7; }
.venue-note { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--text-soft); line-height: 1.6; }
.btn-full {
  display: block; font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-decoration: none;
  padding: 13px 20px; border-radius: 12px; text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-full.btn-blue { background: var(--grad-blue); color: #fff; box-shadow: 0 6px 18px rgba(44,82,130,0.28); }
.btn-full.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(44,82,130,0.36); }
.venue-map-embed {
  min-height: 190px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(177,133,74,0.25);
  background: var(--blue-light);
}
.venue-map-embed iframe { width: 100%; height: 100%; min-height: 190px; border: 0; display: block; }

/* Dress list */
.dress-list { display: flex; flex-direction: column; gap: 0; }
.dress-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid rgba(107,159,212,0.12);
}
.dress-row:last-child { border-bottom: none; }
.dress-row-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.dress-row-body { display: flex; flex-direction: column; gap: 3px; }
.dress-row-event { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--blue-dark); margin-bottom: 1px; }
.dress-row-event .dr-day { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gold-deep); margin-left: 7px; }
.dress-row-detail { font-family: var(--sans); font-size: 0.88rem; color: var(--text); }
.dress-row-theme {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 600;
  color: var(--blue-deep); margin-bottom: 1px;
}
.dress-row-theme .sw {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.sw-haldi { background: linear-gradient(135deg, #f6c343 0%, #f08a24 100%); }
.sw-mehndi { background: linear-gradient(135deg, #8a9a5b 0%, #5c6e38 100%); }

/* RSVP progressive disclosure */
.rsvp-events-wrap { transition: opacity 0.35s; }
.rsvp-events-wrap.hidden { display: none; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ═══════════════ DRESS CODE (legacy — kept for old refs) ═══════════════ */
.dress-section { max-width: 900px; }
.dress-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 24px); }
.dress-card {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(24px, 3.5vw, 36px) clamp(16px, 2.5vw, 24px);
  border-radius: 18px; text-align: center;
  transition: transform 0.5s var(--ease-lux);
  transition-delay: var(--delay, 0s);
}
.dress-card:hover { transform: translateY(-6px); }
.dress-icon { font-size: 2.2rem; margin-bottom: 12px; }
.dress-event { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-mid); margin-bottom: 10px; }
.dress-suggestion { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--blue-dark); line-height: 1.5; }
.dress-suggestion span { display: block; font-size: 0.88rem; color: var(--text-soft); font-style: italic; margin-top: 4px; }
.dress-gender { display: block; font-size: 0.82rem; color: var(--blue-mid); font-style: normal; font-weight: 500; margin-top: 5px; }

/* ═══════════════ RSVP ═══════════════ */
.rsvp-section { max-width: 700px; }
.rsvp-sub { font-family: var(--sans); font-size: 0.95rem; color: var(--text-soft); margin-top: -28px; margin-bottom: 36px; }
.rsvp-sub strong { color: var(--blue-deep); }

.rsvp-form {
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px; text-align: left;
  display: flex; flex-direction: column; gap: 20px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { position: relative; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 18px 16px 8px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(107,159,212,0.35);
  border-radius: 12px;
  font-family: var(--sans); font-size: 0.95rem; color: var(--text);
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none; resize: none;
  appearance: none; -webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--blue-mid);
  box-shadow: 0 0 0 3px rgba(107,159,212,0.18);
  background: rgba(255,255,255,0.88);
}
.form-group label {
  position: absolute; left: 16px; top: 14px;
  font-family: var(--sans); font-size: 0.88rem; color: var(--text-soft);
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s, color 0.2s;
}
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label,
.form-group select:focus ~ label,
.form-group select:valid ~ label {
  top: 5px; font-size: 0.72rem; color: var(--blue-mid); font-weight: 500;
}
.form-group textarea { min-height: 90px; padding-top: 24px; }

.form-field-label { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; color: var(--text-soft); letter-spacing: 0.04em; }

/* Radio pills */
.radio-group, .check-group { display: flex; flex-wrap: wrap; gap: 10px; }
.check-group--sub { margin-top: 4px; padding: 12px 14px; background: rgba(255,255,255,0.35); border-radius: 14px; border: 1px solid var(--border); }
.check-day-label { width: 100%; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-mid); margin-bottom: 2px; }
.check-pill--highlight span { font-weight: 700; }
.check-pill--highlight { border-color: var(--blue-mid); background: rgba(107,159,212,0.15); }
.check-pill--highlight:has(input:checked) { background: var(--blue-deep); border-color: var(--blue-deep); }
.check-pill--day { background: rgba(255,255,255,0.75); }
.check-pill--day:has(input:checked) { background: var(--blue); border-color: var(--blue); }
.radio-pill, .check-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 30px; cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.6);
  font-family: var(--sans); font-size: 0.88rem; color: var(--text);
  transition: all 0.25s;
  user-select: none;
}
.radio-pill input, .check-pill input { display: none; }
.radio-pill:has(input:checked),
.check-pill:has(input:checked) {
  background: var(--blue-mid); color: #fff;
  border-color: var(--blue-mid);
  box-shadow: 0 4px 12px rgba(74,122,191,0.3);
}
.radio-pill:hover, .check-pill:hover { border-color: var(--blue-mid); }

/* Event attendance — simple Day 1 / Day 2 / All checklist */
.evt-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.evt-choice {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,0.6);
  transition: background 0.2s, border-color 0.2s; user-select: none;
}
.evt-choice:hover { border-color: var(--blue-mid); }
.evt-choice input { display: none; }
.evt-choice::before {
  content: ''; flex-shrink: 0; margin-top: 1px;
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--blue); background: rgba(255,255,255,0.85);
  transition: background 0.2s, border-color 0.2s;
}
.evt-choice:has(input:checked) { border-color: var(--blue-mid); background: rgba(107,159,212,0.14); }
.evt-choice:has(input:checked)::before {
  border-color: var(--blue-mid);
  background: var(--blue-mid)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}
.evt-choice-text { display: flex; flex-direction: column; gap: 2px; }
.evt-choice-main { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--blue-dark); }
.evt-choice-sub { font-family: var(--sans); font-size: 0.8rem; color: var(--text-soft); line-height: 1.4; }

.btn-submit {
  width: 100%; padding: 16px 32px;
  background: var(--grad-blue); color: #fff;
  border: none; border-radius: 14px; cursor: pointer;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(44,82,130,0.3);
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
  position: relative; overflow: hidden;
}
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(44,82,130,0.38); }
.btn-submit:active { transform: translateY(-1px); }
.btn-submit.loading { opacity: 0.7; pointer-events: none; }
.submit-loading { display: none; }
.btn-submit.loading .submit-text { display: none; }
.btn-submit.loading .submit-loading { display: inline; }

.rsvp-success {
  padding: 48px 32px; text-align: center;
}
.success-icon { font-size: 3rem; margin-bottom: 16px; }
.rsvp-success h3 { font-family: var(--serif); font-size: 2rem; color: var(--blue-dark); margin-bottom: 12px; }
.rsvp-success p { font-family: var(--sans); color: var(--text-soft); font-size: 1rem; line-height: 1.7; }

/* ═══════════════ BLESSING ═══════════════ */
.blessing-section { max-width: 700px; }
.blessing-inner {
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
  border-radius: 24px; text-align: center;
}
.om-symbol { font-family: var(--telugu); font-size: clamp(2.2rem, 5vw, 3rem); color: var(--gold); margin-bottom: 22px; line-height: 1; }
.blessing-quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 4.6vw, 1.8rem); font-weight: 400;
  color: var(--blue-dark); line-height: 1.5; margin-bottom: 26px;
  text-wrap: balance;
}
.blessing-sub { font-family: var(--sans); font-size: 0.98rem; color: var(--text-soft); line-height: 1.8; }

/* ═══════════════ FOOTER ═══════════════ */
.footer {
  text-align: center; padding: clamp(56px, 8vw, 100px) 24px clamp(40px, 6vw, 72px);
  background: linear-gradient(180deg, transparent 0%, rgba(44,82,130,0.06) 100%);
  border-top: 1px solid var(--border);
}
.footer-mono {
  font-family: var(--serif); font-size: 2rem; color: var(--blue-deep);
  letter-spacing: 0.14em; margin-bottom: 10px; font-weight: 400;
}
.footer-mono span { color: var(--gold); display: inline-block; animation: heartBeat 2.4s ease-in-out infinite; }
@keyframes heartBeat { 0%,100%{ transform:scale(1); } 12%{ transform:scale(1.18); } 24%{ transform:scale(1); } 36%{ transform:scale(1.12); } 48%{ transform:scale(1); } }
.footer-names { font-family: var(--script); font-size: 2rem; font-weight: 400; letter-spacing: 0.02em; color: var(--blue-dark); margin-bottom: 10px; }
.footer-date { font-family: var(--serif); font-size: 1.05rem; font-style: italic; letter-spacing: 0.02em; color: var(--blue-mid); font-weight: 500; margin-bottom: 6px; }
.footer-venue { font-family: var(--sans); font-size: 0.8rem; color: var(--text-soft); letter-spacing: 0.1em; margin-bottom: 28px; }
.footer-love { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: rgba(107,159,212,0.6); }

/* ═══════════════ RESPONSIVE ═══════════════ */
/* ═══ RESPONSIVE — mobile-first breakpoints ═══ */

/* ── 480px and below (small phones) ── */
@media (max-width: 480px) {
  .section { padding: 56px 18px; }
  .section-title { margin-bottom: 28px; }

  /* Schedule */
  .sched-item { grid-template-columns: 64px 1fr auto; gap: 0 10px; padding: 15px 8px; }
  .sched-time { font-size: 0.88rem; }
  .sched-name { font-size: 1rem; }
  .sched-cal { font-size: 0.58rem; padding: 6px 10px; }

  /* Venue + Dress combined */
  .vd-grid { grid-template-columns: 1fr; }
  .vd-venue, .vd-dress { padding: 20px 18px; }
  .venue-map-embed { min-height: 180px; }

  /* Hero */
  .hero { padding: 64px 22px 84px; }
  .hero-name { font-size: clamp(3.2rem, 17vw, 4.6rem); }
  .hcd-unit { padding: 9px 12px; min-width: 52px; }

  /* Couple */
  .person-name { font-size: 1.9rem; }
  .person-parents { font-size: 0.9rem; }

  /* Countdown */
  .cd-sep { display: none; }
  .countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
  .cd-unit { min-width: 0; padding: 12px 4px; }
  .cd-num { font-size: clamp(1.4rem, 8vw, 2rem); }
  .cd-label { font-size: 0.5rem; letter-spacing: 0.2em; }

  /* Events */
  .day-badge { font-size: 0.7rem; padding: 5px 14px; }
  .day-date { font-size: 0.75rem; }
  .events-row { grid-template-columns: 1fr; gap: 14px; }
  .event-tile { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px 16px; }
  .et-date { padding: 8px 10px; }
  .et-d { font-size: 1.5rem; }
  .et-m { font-size: 0.55rem; }
  .et-title { font-size: 1.15rem; }
  .et-time { font-size: 0.8rem; }
  .et-tag { font-size: 0.58rem; }
  .et-actions { margin-top: 10px; gap: 6px; flex-wrap: wrap; }
  .btn-sm { font-size: 0.62rem; padding: 7px 12px; }

  /* Venue */
  .venue-card { grid-template-columns: 1fr; }
  .venue-info { padding: 22px 20px; gap: 12px; }
  .venue-map-embed { border-radius: 0 0 20px 20px; min-height: 200px; }
  .venue-name { font-size: 1.3rem; }

  /* Dress code */
  .dress-grid { grid-template-columns: 1fr; gap: 14px; }
  .dress-card { padding: 22px 18px; flex-direction: row; align-items: flex-start; gap: 14px; text-align: left; }
  .dress-icon { font-size: 1.6rem; margin-bottom: 0; flex-shrink: 0; }
  .dress-event { font-size: 0.72rem; margin-bottom: 6px; }
  .dress-suggestion { font-size: 1rem; }
  .dress-gender { font-size: 0.76rem; }

  /* RSVP */
  .rsvp-form { padding: 22px 18px; }
  .form-row { grid-template-columns: 1fr; }
  .check-pill { padding: 8px 14px; font-size: 0.82rem; }
  .check-pill--highlight span { font-size: 0.82rem; }

  /* Footer */
  .footer-names { font-size: 1.2rem; }
  .footer-note { font-size: 0.72rem; }
}

/* ── 600px and below ── */
@media (max-width: 600px) {
  .section { padding: 60px 20px; }
  .cd-sep { display: none; }
  .countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
  .cd-unit { min-width: 0; padding: 14px 6px; }
  .cd-num { font-size: clamp(1.5rem, 7.5vw, 2.2rem); }
  .events-row { grid-template-columns: 1fr; gap: 14px; }
  .event-tile { flex-direction: row; align-items: flex-start; gap: 14px; }
  .hero-date-bar { flex-direction: column; gap: 6px; }
  .hdb-dot { display: none; }
  .venue-card { grid-template-columns: 1fr; }
  .venue-map-embed { border-radius: 0 0 20px 20px; min-height: 200px; }
  .dress-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── 860px and below (tablets) ── */
@media (max-width: 860px) {
  .couple-pair { grid-template-columns: 1fr; gap: 10px; }
  .pair-amp { padding: 6px 0; }
  .events-row { grid-template-columns: 1fr; }
  .event-tile { flex-direction: row; align-items: flex-start; gap: 16px; }
  .et-body { text-align: left; }
  .vd-grid { grid-template-columns: 1fr; }
  .venue-map-embed { min-height: 220px; }
  .dress-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; }
  .temple-stage.breathe, .seal-glow, .music-ico i { animation: none !important; }
  .cinema.flap-open .env-flap-wrap { animation-duration: 1.6s !important; }
  .temple-stage.zoom { animation-duration: 1.2s !important; }
  .door { transition-duration: 1.1s !important; }
  .cover-lower { transition-duration: 1.5s !important; }
  #petals { display: none; }
  html { scroll-behavior: auto; }
  .hero-name { animation: none; -webkit-text-fill-color: #dce8f8; }
  .cd-unit { opacity: 1; transform: none; }
}
/* Failsafe */
@keyframes failsafeHide { to { opacity:0; visibility:hidden; pointer-events:none; } }
@keyframes failsafeShow { to { opacity:1; visibility:visible; } }
html:not(.js-ok) .cinema { animation: failsafeHide 1.5s ease 14s forwards; }
html:not(.js-ok) .site   { animation: failsafeShow 1.5s ease 14.5s forwards; }
html:not(.js-ok) .site .reveal { opacity:1!important; transform:none!important; }
html:not(.js-ok) body { overflow: auto !important; }