:root {

  --bg: #f8f7ff;
  --paper: #fffefe;

  --ink: #35324a;
  --muted: #77728f;

  --accent: #8b78c9;
  --accent-soft: #e8e3fa;

  --line:
    rgba(83, 75, 123, 0.14);

  --shadow:
    0 22px 60px rgba(100, 93, 160, 0.14);

  --radius: 26px;

  --serif:
    "Cormorant Garamond",
    Georgia,
    serif;

  --sans:
    "Inter",
    system-ui,
    sans-serif;

  --script:
    "Great Vibes",
    cursive;
}


/* =========================
   BASIC RESET
========================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  color: var(--ink);

  background:
    var(--bg);

  font-family:
    var(--sans);

  line-height:
    1.6;

}


img {

  max-width: 100%;

  display: block;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input,
select,
textarea {

  font: inherit;

}


/* =========================
   NAVIGATION
========================= */

.topbar {

  position: fixed;

  inset:
    0 0 auto 0;

  z-index: 100;

  min-height: 68px;

  padding:
    12px
    clamp(18px, 4vw, 56px);

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 18px;

  background:
    rgba(255, 255, 255, 0.78);

  backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid
    rgba(139, 120, 201, 0.12);

}


.brand {

  font-family:
    var(--serif);

  font-size:
    28px;

  font-weight:
    700;

  color:
    var(--accent);

}


.nav {

  display: flex;

  gap: 20px;

  font-size:
    14px;

}


.nav a:hover {

  color:
    var(--accent);

}


/* =========================
   LANGUAGE SWITCH
========================= */

.language-switcher {

  display:
    inline-flex;

  gap:
    4px;

  padding:
    4px;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  background:
    var(--paper);

}


.lang-btn {

  border:
    0;

  background:
    transparent;

  border-radius:
    999px;

  padding:
    7px 10px;

  cursor:
    pointer;

  color:
    var(--muted);

  font-weight:
    600;

}


.lang-btn.active {

  background:
    var(--ink);

  color:
    white;

}


/* =========================
   HERO
========================= */

.hero {

  min-height:
    100svh;

  padding:
    120px 20px 70px;

  position:
    relative;

  display:
    grid;

  place-items:
    center;

  text-align:
    center;

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 14% 18%,
      rgba(255,255,255,.95),
      transparent 28%
    ),

    radial-gradient(
      circle at 84% 14%,
      rgba(221,236,255,.84),
      transparent 26%
    ),

    radial-gradient(
      circle at 30% 84%,
      rgba(238,227,255,.75),
      transparent 30%
    ),

    radial-gradient(
      circle at 78% 76%,
      rgba(255,255,255,.56),
      transparent 24%
    ),

    linear-gradient(
      135deg,
      #eef1ff 0%,
      #eef8ff 42%,
      #f8efff 100%
    );

}


.hero::before,
.hero::after {

  content:
    "";

  position:
    absolute;

  width:
    360px;

  height:
    360px;

  border:
    1px solid
    rgba(139,120,201,.12);

  border-radius:
    50%;

}


.hero::before {

  left:
    -120px;

  bottom:
    -110px;

}


.hero::after {

  right:
    -140px;

  top:
    110px;

}


/* Opening card */

.hero-content {

  position:
    relative;

  z-index:
    2;

  max-width:
    880px;

  width:
    100%;

  padding:
    clamp(28px, 5vw, 48px);

  border-radius:
    34px;

  background:
    rgba(255,255,255,.42);

  border:
    1px solid
    rgba(255,255,255,.55);

  box-shadow:
    0 20px 80px
    rgba(116,102,178,.10);

  backdrop-filter:
    blur(10px);

}


/* Small heading */

.eyebrow {

  margin:
    0 0 10px;

  letter-spacing:
    .22em;

  text-transform:
    uppercase;

  font-size:
    12px;

  font-weight:
    600;

  color:
    var(--accent);

}


/* Personalized guest */

.guest-greeting {

  display:
    inline-block;

  margin:
    0 0 16px;

  padding:
    8px 15px;

  border:
    1px solid
    rgba(139,120,201,.25);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.55);

}


/* Monogram */

.hero-monogram {

  margin:
    0 auto 10px;

  width:
    90px;

  height:
    90px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  font-family:
    var(--serif);

  font-size:
    30px;

  font-weight:
    700;

  color:
    var(--accent);

  border:
    1px solid
    rgba(139,120,201,.22);

  background:
    rgba(255,255,255,.55);

}


.hero-monogram span {

  font-family:
    var(--script);

  font-size:
    28px;

}


/* Couple name typography */

.hero h1,
h2,
h3 {

  font-family:
    var(--serif);

  line-height:
    1.05;

}


.hero h1.hero-names {

  margin:
    8px 0 12px;

  font-size:
    clamp(58px, 10vw, 118px);

  font-weight:
    500;

}


.hero h1.hero-names span {

  display:
    block;

}


.hero h1.hero-names
span:not(.ampersand) {

  font-family:
    var(--script);

  font-weight:
    400;

  letter-spacing:
    .01em;

  line-height:
    .95;

}


.hero h1
.ampersand {

  margin:
    8px 0 2px;

  font-family:
    var(--serif);

  font-size:
    .42em;

  font-style:
    italic;

  color:
    #7d72bd;

}


/* Romantic line */

.hero-romantic-line {

  margin:
    0 0 14px;

  font-family:
    var(--serif);

  font-size:
    clamp(
      18px,
      2.3vw,
      24px
    );

  font-style:
    italic;

  color:
    #6e67a0;

}


/* Date */

.hero-date {

  margin-top:
    10px;

  margin-bottom:
    4px;

  font-family:
    var(--serif);

  font-size:
    clamp(
      24px,
      4vw,
      36px
    );

  font-weight:
    600;

}


/* Location */

.hero-location {

  margin:
    0 0 16px;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;

  font-size:
    12px;

  color:
    var(--muted);

}


/* Invitation description */

.hero-copy {

  max-width:
    620px;

  margin:
    0 auto 28px;

  font-size:
    16px;

}


/* Buttons */

.hero-actions {

  display:
    flex;

  justify-content:
    center;

  gap:
    14px;

  flex-wrap:
    wrap;

}


/* =========================
   FLORAL DECORATION
========================= */

.floral-cluster {

  position:
    absolute;

  z-index:
    1;

  display:
    flex;

  gap:
    8px;

  color:
    rgba(133,118,201,.42);

  filter:
    drop-shadow(
      0 8px 22px
      rgba(116,102,178,.10)
    );

  pointer-events:
    none;

}


.floral-cluster span {

  display:
    inline-block;

  font-size:
    clamp(
      22px,
      4vw,
      42px
    );

  animation:
    floatFloral
    8s
    ease-in-out
    infinite;

}


.floral-cluster
span:nth-child(2) {

  animation-delay:
    1.6s;

}


.floral-cluster
span:nth-child(3) {

  animation-delay:
    3s;

}


.floral-top-left {

  left:
    5%;

  top:
    14%;

}


.floral-top-right {

  right:
    5%;

  top:
    16%;

}


.floral-bottom-left {

  left:
    8%;

  bottom:
    10%;

}


.floral-bottom-right {

  right:
    7%;

  bottom:
    12%;

}


@keyframes floatFloral {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(0deg)
      scale(1);

  }


  50% {

    transform:
      translateY(-10px)
      rotate(4deg)
      scale(1.04);

  }

}


/* =========================
   BUTTONS
========================= */

.primary-btn,
.secondary-btn {

  display:
    inline-flex;

  justify-content:
    center;

  align-items:
    center;

  min-height:
    48px;

  border-radius:
    999px;

  padding:
    0 22px;

  cursor:
    pointer;

  transition:
    transform .2s ease,
    opacity .2s ease,
    background .2s ease;

  font-weight:
    600;

}


.primary-btn {

  color:
    white;

  border:
    1px solid transparent;

  background:
    linear-gradient(
      135deg,
      #8d79cb,
      #6d8fda
    );

}


.secondary-btn {

  color:
    var(--ink);

  border:
    1px solid
    rgba(139,120,201,.28);

  background:
    rgba(255,255,255,.48);

}


.primary-btn:hover,
.secondary-btn:hover {

  transform:
    translateY(-2px);

  opacity:
    .95;

}


.primary-btn:disabled {

  opacity:
    .55;

  cursor:
    not-allowed;

  transform:
    none;

}


.full {

  width:
    100%;

}


/* =========================
   GENERAL SECTIONS
========================= */

.section {

  padding:
    clamp(
      76px,
      10vw,
      120px
    )
    clamp(
      18px,
      5vw,
      72px
    );

}


.section-heading {

  max-width:
    700px;

  margin:
    0 auto 46px;

  text-align:
    center;

}


.section-heading h2,
.story-card h2 {

  margin:
    0 0 14px;

  font-size:
    clamp(
      40px,
      7vw,
      68px
    );

  font-weight:
    600;

  letter-spacing:
    -.02em;

}


.section-heading p:last-child {

  margin-bottom:
    0;

}


/* =========================
   COUNTDOWN
========================= */

.countdown-section {

  text-align:
    center;

  background:
    var(--paper);

}


.countdown {

  max-width:
    850px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    14px;

}


.count-card {

  padding:
    24px 10px;

  border:
    1px solid
    var(--line);

  border-radius:
    20px;

  background:
    var(--bg);

}


.count-card strong {

  display:
    block;

  font-family:
    var(--serif);

  font-size:
    clamp(
      36px,
      6vw,
      58px
    );

  line-height:
    1;

}


.count-card span {

  color:
    var(--muted);

  font-size:
    13px;

}


/* =========================
   WEDDING DETAILS
========================= */

.details-grid {

  max-width:
    980px;

  margin:
    0 auto 32px;

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    22px;

}


.detail-card {

  padding:
    clamp(
      28px,
      5vw,
      46px
    );

  background:
    var(--paper);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

  text-align:
    center;

}


.detail-icon {

  font-size:
    28px;

  color:
    var(--accent);

}


.detail-card h3 {

  font-size:
    34px;

  margin:
    14px 0 18px;

  color:
    #544c82;

}


.detail-card p {

  margin:
    5px 0;

}


.center {

  text-align:
    center;

}


/* =========================
   STORY
========================= */

.story-section {

  background:

    linear-gradient(
      135deg,
      #eef5ff,
      #f4edff
    );

}


.story-card {

  max-width:
    850px;

  margin:
    0 auto;

  padding:
    clamp(
      32px,
      7vw,
      70px
    );

  border-radius:
    34px;

  background:
    rgba(255,255,255,.72);

  border:
    1px solid
    rgba(255,255,255,.7);

  text-align:
    center;

}


.story-card h2 {

  color:
    #544c82;

}


.story-card
p:last-child {

  max-width:
    650px;

  margin:
    0 auto;

}


/* =========================
   GALLERY
========================= */

.gallery {

  max-width:
    1050px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1.15fr .85fr .85fr;

  gap:
    16px;

}


.gallery img {

  width:
    100%;

  height:
    380px;

  object-fit:
    cover;

  border-radius:
    22px;

  border:
    1px solid
    var(--line);

}


.gallery img:first-child {

  height:
    520px;

  grid-row:
    span 2;

}


.gallery-note {

  max-width:
    620px;

  margin:
    18px auto 0;

  text-align:
    center;

}


/* =========================
   RSVP
========================= */

.rsvp-section {

  background:
    var(--paper);

}


.rsvp-form {

  max-width:
    680px;

  margin:
    0 auto;

  padding:
    clamp(
      24px,
      5vw,
      44px
    );

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  background:
    var(--bg);

}


.rsvp-form label {

  display:
    block;

  margin-bottom:
    18px;

  font-weight:
    600;

}


.rsvp-form label span {

  display:
    block;

  margin-bottom:
    7px;

}


.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {

  width:
    100%;

  border:
    1px solid
    rgba(83,75,123,.18);

  border-radius:
    14px;

  background:
    white;

  color:
    var(--ink);

  padding:
    13px 14px;

  outline:
    none;

}


.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus {

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px
    rgba(139,120,201,.10);

}


.form-status {

  min-height:
    24px;

  margin:
    14px 0 0;

  text-align:
    center;

}


.form-status.success {

  color:
    #2f6c4f;

}


.form-status.error {

  color:
    #9b3f3f;

}


/* =========================
   MEMORY GAME
========================= */

.game-section {

  background:

    linear-gradient(
      180deg,
      #eef5ff 0%,
      #f6efff 100%
    );

}


.memory-shell {

  max-width:
    760px;

  margin:
    0 auto;

  padding:
    clamp(
      22px,
      5vw,
      38px
    );

  border-radius:
    var(--radius);

  background:
    rgba(255,255,255,.76);

  border:
    1px solid
    rgba(139,120,201,.14);

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(12px);

}


.memory-stats {

  display:
    flex;

  justify-content:
    center;

  gap:
    38px;

  margin-bottom:
    24px;

  text-align:
    center;

}


.memory-stats span {

  display:
    block;

  font-size:
    12px;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

  color:
    var(--muted);

}


.memory-stats strong {

  display:
    block;

  margin-top:
    4px;

  font-family:
    var(--serif);

  font-size:
    32px;

}


.memory-board {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    12px;

}


.memory-card {

  aspect-ratio:
    1 / 1;

  border:
    0;

  padding:
    0;

  background:
    transparent;

  perspective:
    900px;

  cursor:
    pointer;

}


.memory-card-inner {

  position:
    relative;

  display:
    block;

  width:
    100%;

  height:
    100%;

  transition:
    transform .45s ease;

  transform-style:
    preserve-3d;

}


.memory-card.flipped
.memory-card-inner,

.memory-card.matched
.memory-card-inner {

  transform:
    rotateY(180deg);

}


.memory-card-front,
.memory-card-back {

  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    18px;

  backface-visibility:
    hidden;

  border:
    1px solid
    rgba(139,120,201,.18);

  box-shadow:
    0 12px 24px
    rgba(98,88,155,.08);

}


.memory-card-front {

  background:

    linear-gradient(
      145deg,
      #dfeaff,
      #eadffd
    );

  color:
    #7f70b6;

  font-size:
    clamp(
      26px,
      5vw,
      44px
    );

}


.memory-card-back {

  transform:
    rotateY(180deg);

  background:
    rgba(255,255,255,.94);

  color:
    #7564b4;

  font-size:
    clamp(
      28px,
      6vw,
      48px
    );

}


.memory-card.matched
.memory-card-back {

  box-shadow:

    0 0 0 3px
    rgba(149,133,214,.13),

    0 14px 30px
    rgba(98,88,155,.12);

}


.memory-actions {

  margin-top:
    22px;

}


.memory-complete {

  margin-top:
    24px;

  padding:
    20px;

  text-align:
    center;

  border-radius:
    18px;

  background:

    linear-gradient(
      135deg,
      rgba(231,241,255,.9),
      rgba(241,231,255,.9)
    );

}


.memory-complete h3 {

  margin:
    0 0 8px;

  font-size:
    30px;

  color:
    #544c82;

}


.memory-complete p {

  margin:
    0;

}


/* =========================
   FOOTER
========================= */

footer {

  padding:
    54px 20px 60px;

  background:

    linear-gradient(
      135deg,
      #3f3b63,
      #514874
    );

  color:
    white;

  text-align:
    center;

}


footer p {

  margin:
    4px 0;

}


footer .muted {

  color:
    rgba(255,255,255,.68);

}


/* =========================
   UTILITIES
========================= */

.muted {

  color:
    var(--muted);

}


.hidden {

  display:
    none !important;

}


/* Scroll animations */

.reveal {

  opacity:
    0;

  transform:
    translateY(18px);

  transition:

    opacity
    .7s ease,

    transform
    .7s ease;

}


.reveal.visible {

  opacity:
    1;

  transform:
    translateY(0);

}


/* =========================
   TABLET
========================= */

@media
(max-width: 760px) {

  .nav {

    display:
      none;

  }


  .countdown {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .details-grid {

    grid-template-columns:
      1fr;

  }


  .gallery {

    grid-template-columns:
      1fr 1fr;

  }


  .gallery img,
  .gallery img:first-child {

    height:
      300px;

    grid-row:
      auto;

  }


  .gallery
  img:first-child {

    grid-column:
      span 2;

    height:
      390px;

  }


  .hero-content {

    padding:
      26px 18px 32px;

  }


  .floral-top-left,
  .floral-top-right {

    top:
      9%;

  }


  .floral-bottom-left,
  .floral-bottom-right {

    bottom:
      7%;

  }

}


/* =========================
   MOBILE
========================= */

@media
(max-width: 520px) {

  .memory-board {

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

  }


  .floral-cluster {

    opacity:
      .65;

  }

}


@media
(max-width: 460px) {

  .topbar {

    padding-inline:
      14px;

  }


  .hero {

    padding-inline:
      16px;

  }


  .section {

    padding-inline:
      16px;

  }


  .gallery {

    grid-template-columns:
      1fr;

  }


  .gallery img,
  .gallery img:first-child {

    grid-column:
      auto;

    height:
      300px;

  }


  .hero-monogram {

    width:
      76px;

    height:
      76px;

    font-size:
      25px;

  }

}