@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Armenian:wght@300;400;500;600&family=Noto+Serif+Armenian:wght@400;500;600&display=swap");

:root {
  --background: #f7f9fb;
  --foreground: #344452;
  --card: #ffffff;
  --card-foreground: #344452;
  --popover: #ffffff;
  --popover-foreground: #344452;
  --primary: #91adbd;
  --primary-foreground: #ffffff;
  --secondary: #eaf2f5;
  --secondary-foreground: #344452;
  --muted: #edf2f4;
  --muted-foreground: #71808c;
  --accent: #e6d7d5;
  --accent-foreground: #4f5d68;
  --destructive: #c65f69;
  --border: rgba(91, 119, 136, 0.2);
  --input: rgba(91, 119, 136, 0.24);
  --ring: #8daabc;
  --radius: 1rem;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 6px);
  --radius-md: calc(var(--radius) - 3px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 8px);
  --font-sans: "Noto Sans Armenian", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #f7f9fb; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Noto Sans Armenian", system-ui, sans-serif;
}
button, input, textarea { font: inherit; }
a { color: inherit; }

.invite-page { min-height: 100vh; overflow: hidden; background: #f7f9fb; }
.floating-nav {
  position: fixed;
  z-index: 50;
  top: 1rem;
  left: 50%;
  width: min(calc(100% - 2rem), 74rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .65rem .5rem 1rem;
  border: 1px solid rgba(76,101,117,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 16px 50px rgba(62,87,103,.12);
  backdrop-filter: blur(18px);
}
.mini-monogram {
  font-family: "Noto Serif Armenian", serif;
  font-size: 1rem;
  letter-spacing: .18em;
  color: #6f8fa2;
}
.nav-actions { display: flex; align-items: center; gap: .35rem; }
.language-toggle, .icon-control {
  min-width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 0;
  border-radius: 999px;
  color: #405563;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.language-toggle:hover, .icon-control:hover { background: rgba(115,148,166,.12); color: #66899f; }
.icon-control svg { width: 1.1rem; height: 1.1rem; }
.share-control { width: auto; padding: 0 .85rem; }
.share-control span { font-size: .82rem; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: #eef4f7;
}
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: -3; }
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.08) 44%, rgba(244,248,250,.72) 100%),
    radial-gradient(circle at 50% 30%, transparent 0 22%, rgba(255,255,255,.03) 55%, rgba(230,239,244,.22) 100%);
}
.hero-copy { text-align: center; padding: 2rem 1rem 24vh; text-shadow: 0 2px 28px rgba(255,255,255,.9); }
.eyebrow, .section-kicker {
  margin: 0 0 1.2rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 600;
  color: #6f91a6;
}
.hero h1 {
  margin: 0;
  font-family: "Noto Serif Armenian", serif;
  font-size: clamp(3.8rem, 12vw, 8.5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.05em;
  color: #344b5b;
}
.hero-date {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #526976;
  font-size: .92rem;
  letter-spacing: .08em;
}
.hero-date span { width: clamp(2rem, 8vw, 5.5rem); height: 1px; background: rgba(102,137,159,.5); }
.open-cue {
  position: absolute;
  bottom: 1.7rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: #526976;
  font-size: .78rem;
  letter-spacing: .1em;
  text-decoration: none;
}
.open-cue svg { width: 1.1rem; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(.4rem); } }

.section-pad { padding: clamp(5rem, 11vw, 9rem) 1.25rem; }
.narrow-copy, .section-heading { width: min(100%, 45rem); margin: 0 auto; text-align: center; }
.welcome-section { position: relative; background: linear-gradient(180deg,#f8fbfc 0%,#eef5f7 100%); }
.reveal-copy h2, .countdown-section h2, .section-heading h2, .dress-card h2, .rsvp-heading h2 {
  margin: 0;
  font-family: "Noto Serif Armenian", serif;
  font-size: clamp(2.3rem, 6vw, 4.7rem);
  line-height: 1.08;
  font-weight: 400;
}
.reveal-copy > p:last-child {
  max-width: 38rem;
  margin: 2rem auto 0;
  color: #657580;
  font-family: "Noto Serif Armenian", serif;
  font-size: clamp(1.1rem, 2.2vw, 1.42rem);
  line-height: 2;
}
.constellation { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.constellation span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #9ab3c1; box-shadow: 0 0 10px #bdd0d9; }
.constellation span:nth-child(1) { left: 12%; top: 24%; }
.constellation span:nth-child(2) { left: 22%; top: 68%; }
.constellation span:nth-child(3) { right: 14%; top: 33%; }
.constellation span:nth-child(4) { right: 27%; top: 72%; }
.constellation span:nth-child(5) { left: 50%; top: 14%; }

.couple-section { background: #fffefc; }
.couple-heading { margin-bottom: 3.5rem; }
.couple-gallery {
  width: min(100%, 68rem);
  margin: 0 auto;
  display: grid;
  gap: clamp(.8rem, 2vw, 1.5rem);
}
.gallery-count-1 { width: min(100%, 35rem); grid-template-columns: 1fr; }
.gallery-count-2 { width: min(100%, 48rem); grid-template-columns: repeat(2, 1fr); }
.gallery-count-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-count-4 { grid-template-columns: repeat(4, 1fr); }
.couple-photo {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: .45rem solid rgba(255,255,255,.96);
  border-radius: 1.35rem;
  background: #edf3f5;
  box-shadow: 0 20px 55px rgba(76,104,120,.14);
}
.couple-photo:nth-child(even) { transform: translateY(1.4rem); }
.couple-photo img { width: 100%; height: 100%; object-fit: cover; }

.countdown-section { text-align: center; background: #fffefc; color: #344452; }
.countdown-section .section-kicker { color: #7f9dad; }
.countdown-grid {
  width: min(100%, 52rem);
  margin: 3.25rem auto 2.25rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(85,112,128,.18);
  border-bottom: 1px solid rgba(85,112,128,.18);
}
.countdown-cell { padding: 1.6rem .5rem; border-right: 1px solid rgba(85,112,128,.18); }
.countdown-cell:last-child { border-right: 0; }
.countdown-cell strong { display: block; font-family: "Noto Serif Armenian", serif; font-size: clamp(2rem,6vw,4.4rem); font-weight: 400; }
.countdown-cell span { display: block; margin-top: .35rem; color: #72808a; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.calendar-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #6f91a6;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(111,145,166,.45);
  padding-bottom: .25rem;
}
.calendar-link svg { width: 1rem; }

.schedule-section { background: #edf4f7; }
.timeline { width: min(100%, 66rem); margin: 4rem auto 0; }
.event-row {
  display: grid;
  grid-template-columns: 3rem 4.5rem 1fr;
  align-items: stretch;
  gap: 1rem;
  border-top: 1px solid rgba(103,137,157,.2);
  padding: 2.2rem 0;
}
.event-row:last-child { border-bottom: 1px solid rgba(103,137,157,.2); }
.event-row.has-image { grid-template-columns: 3rem 4.5rem minmax(11rem,15rem) 1fr; }
.event-number { padding-top: .3rem; color: #91a2ad; font-size: .72rem; letter-spacing: .16em; }
.event-icon { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border: 1px solid rgba(103,137,157,.34); border-radius: 50%; color: #6f91a6; background: rgba(255,255,255,.45); }
.event-icon svg { width: 1.25rem; }
.event-photo {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  align-self: center;
  border: .35rem solid rgba(255,255,255,.78);
  border-radius: 1.15rem;
  background: #dfeaec;
  box-shadow: 0 14px 38px rgba(76,104,120,.13);
}
.event-photo img { width: 100%; height: 100%; object-fit: cover; }
.event-content { display: grid; grid-template-columns: 7rem minmax(12rem,1fr) minmax(12rem,1fr) auto; align-items: center; gap: 1rem; }
.event-time { display: flex; align-items: center; gap: .4rem; color: #66899f; font-size: .85rem; }
.event-time svg { width: .95rem; }
.event-content h3 { margin: 0; font-family: "Noto Serif Armenian", serif; font-size: 1.35rem; font-weight: 400; }
.event-content p { margin: 0; color: #6d7c86; line-height: 1.6; }
.event-content a { display: inline-flex; align-items: center; gap: .4rem; color: #66899f; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.event-content a svg { width: .95rem; }

.dress-section { background: linear-gradient(145deg,#fffefd 0%,#f2f5f6 100%); color: #344452; }
.dress-card { width: min(100%, 46rem); margin: 0 auto; text-align: center; }
.dress-card .section-kicker { color: #8aa5b5; }
.dress-card > p:last-child { max-width: 38rem; margin: 1.6rem auto 0; color: #677681; font-size: 1.05rem; line-height: 1.85; }
.palette { display: flex; justify-content: center; margin-bottom: 2.4rem; }
.swatch { width: 4rem; height: 4rem; border-radius: 50%; margin-left: -0.65rem; border: 4px solid #ffffff; box-shadow: 0 10px 24px rgba(76,104,120,.12); }
.swatch:first-child { margin-left: 0; }
.swatch-navy { background: #d9e9f1; }
.swatch-burgundy { background: #eadada; }
.swatch-gold { background: #d8dde0; }
.swatch-ivory { background: #fbf8f1; }

.rsvp-section { position: relative; background: #ffffff; }
.rsvp-section::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 0,rgba(150,184,201,.18),transparent 48%); pointer-events:none; }
.rsvp-shell { position: relative; width: min(100%, 64rem); margin: 0 auto; }
.rsvp-heading { text-align: center; }
.rsvp-heading > p:last-child { margin: 1rem 0 0; color: #71808a; }
.rsvp-form { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.6rem 2rem; }
.field-group { min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field-group > label, .field-group legend { display: block; margin-bottom: .65rem; color: #4f606c; font-size: .88rem; }
.field-group input, .field-group textarea { border-radius: .85rem; border-color: rgba(103,137,157,.24); background: rgba(245,249,250,.82); color: #344452; box-shadow: none; }
.field-group input { min-height: 3.2rem; padding: 0 1rem; }
.field-group textarea { min-height: 7rem; padding: .9rem 1rem; }
.choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.radio-card {
  min-height: 3.2rem;
  display: flex !important;
  align-items: center;
  gap: .7rem;
  margin: 0 !important;
  padding: .8rem 1rem;
  border: 1px solid rgba(103,137,157,.24);
  border-radius: .85rem;
  background: rgba(245,249,250,.82);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.radio-card:hover { background: #eef5f7; border-color: rgba(103,137,157,.5); }
.submit-button { min-height: 3.6rem; margin-top: .8rem; border-radius: 999px; background: #8daaba; color: #ffffff; font-weight: 600; }
.submit-button:hover { background: #7899ac; }
.submit-button { width: 100%; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; }
.hidden { display: none !important; }
.status-message { width: min(100%,34rem); margin: 2rem auto 0; padding: 1.25rem; border-radius: 1rem; background: #eef6f8; color: #557184; text-align: center; }
.success-card { width: min(100%,34rem); margin: 3rem auto 0; padding: 2.5rem; border: 1px solid rgba(103,137,157,.25); border-radius: 1.5rem; background: rgba(246,250,251,.94); text-align: center; }
.success-card > svg { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #7d9eaf; }
.success-card h3 { margin: 0; font-family: "Noto Serif Armenian",serif; font-size: 1.6rem; font-weight: 400; }
.success-card p { color: #71808a; }
.success-card button { margin-top: .7rem; color: #405563; border-color: rgba(103,137,157,.3); }

.invite-footer { padding: 5rem 1.25rem 6rem; text-align: center; color: #344452; background: #e8f1f4; }
.footer-stars { margin-bottom: 1.2rem; letter-spacing: .6em; color: #8daaba; }
.invite-footer p { margin: 0; font-family: "Noto Serif Armenian",serif; font-size: clamp(1.35rem,4vw,2.4rem); }
.invite-footer strong { display: block; margin-top: 1rem; font-size: .9rem; font-weight: 500; letter-spacing: .05em; }

@media (max-width: 760px) {
  .floating-nav { top: .65rem; width: calc(100% - 1.2rem); }
  .share-control span { display: none; }
  .hero-copy { padding-bottom: 26vh; }
  .hero-image { object-position: center center; }
  .section-pad { padding-left: 1rem; padding-right: 1rem; }
  .countdown-cell { padding: 1.2rem .15rem; }
  .event-row { grid-template-columns: 2rem 3.3rem 1fr; gap: .6rem; }
  .event-row.has-image { grid-template-columns: 2rem 3.3rem 1fr; }
  .event-icon { width: 2.8rem; height: 2.8rem; }
  .event-row.has-image .event-photo { grid-column: 3; width: 100%; margin-bottom: .55rem; }
  .event-row.has-image .event-content { grid-column: 3; }
  .event-content { grid-template-columns: 1fr; gap: .45rem; }
  .event-content h3 { margin-top: .3rem; }
  .couple-gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery-count-1 { grid-template-columns: 1fr; width: min(88vw, 25rem); }
  .couple-photo:nth-child(even) { transform: translateY(.8rem); }
  .rsvp-form { grid-template-columns: 1fr; gap: 1.35rem; }
  .field-full { grid-column: auto; }
  .choice-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .open-cue svg { animation: none; }
}