@font-face { font-family: Cooper; src: url("assets/fonts/Cooper_BT-LIGHT.font.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: block; }
@font-face { font-family: Cooper; src: url("assets/fonts/Cooper_BT-BOLD.font.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DM_Sans-REGULAR.font.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DM_Sans-BOLD.font.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: Brittany; src: url("assets/fonts/Brittany-REGULAR.woff2") format("woff2"); }
@font-face { font-family: "Canva Sans"; src: url("assets/fonts/Canva_Sans-REGULAR.font.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: Arimo; src: url("assets/fonts/Arimo-REGULAR.font.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: Arimo; src: url("assets/fonts/Arimo-BOLD.font.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }

:root {
  --green: #8ebd90;
  --cream: #fcf9f2;
  --ink: #171c27;
  --pink: #cd76a2;
  --yellow: #ffeaab;
  --design-width: 1366;
  --page-height: min(100vh, calc(100vw * 768 / 1366));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); overflow-x: hidden; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", Arial, sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
.invitation { width: 100%; }
.page { position: relative; width: 100%; height: min(100vh, 56.2225vw); min-height: 0; overflow: hidden; isolation: isolate; }
.page-canvas { position: absolute; inset: 0 auto auto 0; width: 1366px; height: 768px; transform-origin: top left; }
.page--hero, .page--rsvp { background: var(--green); }
.page--expect, .page--thanks { background: var(--cream); }
.asset { position: absolute; display: block; pointer-events: none; user-select: none; }

/* The artwork is authored on a 1366 x 768 canvas. On wider screens it remains
   centered and on smaller screens each page scales as one coherent composition. */
.page > * { --scale: max(1, min(100vw / 1366, 100vh / 768)); }
.page--hero .page-canvas > *:not(.asset) { position: absolute; }
.hero-number-balloons { left: 296px; top: 14px; width: 230px; height: 290px; object-fit: contain; }
.hero-copy { left: 545px; top: 72px; width: 780px; margin: 0; white-space: nowrap; color: var(--yellow); font: 300 93px/1 Cooper, serif; letter-spacing: -4px; }
.hero-subtitle { top: 195px; left: 278px; width: 810px; height: 117px; margin: 0; color: var(--cream); font: 400 33.3333px/1.2 "DM Sans", sans-serif; text-align: center; letter-spacing: -1.6667px; }
.hero-date { left: 77px; bottom: 77px; width: 298px; margin: 0; color: var(--cream); font: 400 25.3334px/1.1 "DM Sans", sans-serif; text-align: center; letter-spacing: -1.2667px; }
.hero-location { right: 77px; bottom: 75px; width: 298px; margin: 0; color: var(--cream); font: 400 26.6667px/1.1 "DM Sans", sans-serif; text-align: center; letter-spacing: -1.3333px; }
.hero-date strong, .hero-location strong { font-weight: 700; }
.count-button { border: 0; cursor: pointer; color: var(--ink); background: var(--pink); font-family: Cooper, Georgia, serif; font-weight: 700; transition: transform .2s ease, filter .2s ease; }
.count-button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.hero-count { left: 495px; bottom: 76px; width: 375px; height: 66px; border-radius: 40px; background: var(--cream); font-size: 27px; z-index: 3; }
.hero-daisy--large { left: -30px; top: -30px; width: 290px; height: 340px; object-fit: fill; }
.hero-flower-left { left: 150px; top: 235px; width: 181px; height: 270px; object-fit: fill; }
.hero-flower-left--second { left: 265px; top: 250px; }
.hero-flower-right { left: -20px; top: 460px; width: 150px; height: 320px; object-fit: fill; }
.hero-flower-right--second { left: 0px; top: 480px; }
.hero-disco { left: 1145px; top: -35px; width: 225px; height: 310px; object-fit: fill; }
.hero-purple-flower { left: 1180px; top: 220px; width: 250px; height: 260px; object-fit: fill; }
.hero-big-daisy { left: 1020px; top: 290px; width: 280px; height: 280px; object-fit: fill; }
.hero-confetti--left { left: -20px; top: 120px; width: 250px; height: 400px; }
.hero-confetti--right { left: 1150px; top: 130px; width: 230px; height: 370px; }
.hero-speech { left: 830px; top: 270px; width: 220px; height: 211px; object-fit: fill; transform: rotate(15deg); }
.hero-speech-text { left: 860px; top: 330px; width: 160px; margin: 0; color: var(--ink); font: 400 32px/1.2 Brittany, cursive; text-align: center; transform: rotate(14deg); }
.hero-arrow {
  left: 854px; top: 501px; width: 189px; height: 147px;
  background-color: #face62;
  -webkit-mask: url("assets/MAFZYvMR-Go.svg") no-repeat center / contain;
  mask: url("assets/MAFZYvMR-Go.svg") no-repeat center / contain;
  transform: scaleX(-1);
}
.hero-yellow-arrow { left: 335px; top: 545px; width: 150px; height: 110px; object-fit: fill; transform: rotate(35deg); }
.hero-party-hat { left: 702.5px; top: 210px; width: 115px; height: 170px; object-fit: fill; z-index: 2; transform: rotate(23deg); }
.hero-person { left: 532.5px; top: 285px; width: 300px; height: 345px; object-fit: cover; z-index: 1; }

/* Keep the authored canvas centered at desktop widths. Height is capped at
   the canvas's native 768px here since the canvas itself stops growing past
   1366px wide — without the cap, the vw-based height above would keep
   growing and leave empty space below the fixed-size canvas. */
@media (min-width: 1366px) {
  .page { width: 100%; height: 768px; margin-inline: 0; }
  .page-canvas { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 1365px) {
  .page-canvas { transform: scale(calc(100vw / 1366px)); }
}

.page--expect h1, .page--thanks h1 { position: absolute; margin: 0; color: var(--green); font: 300 73px/1 Cooper, serif; letter-spacing: -3.7px; text-align: center; }
.page--expect h1 { top: 77px; left: 247px; width: 870px; font-size: 73.3333px; line-height: 1.2; letter-spacing: -3.6667px; }
.expect-grid { position: absolute; top: 202px; left: 77px; display: grid; grid-template-columns: repeat(3, 380px); column-gap: 37px; }
.expect-card { width: 380px; height: 489px; overflow: hidden; border-radius: 33px; text-align: center; }
.expect-card--pink { background: var(--pink); }
.expect-card--green { background: var(--green); }
.expect-card--outline { border: 4px solid #000; background: transparent; }
.card-visual { height: 388px; display: flex; justify-content: center; align-items: center; }
.card-visual img { object-fit: fill; }
.expect-card--pink .card-visual img { width: 290px; height: 307px; }
.expect-card--green .card-visual img { width: 310px; height: 262px; }
.expect-card--outline .card-visual { height: 388px; align-items: flex-start; padding-top: 47px; }
.expect-card--outline .card-visual img { width: 363px; height: 292px; }
.expect-card p { margin: 15px 12px 0; font: 400 24px/1.2 "DM Sans", sans-serif; letter-spacing: -1.2px; }
.expect-card--outline p { margin-top: 15px; font-size: 21.3333px; }

.page--rsvp { display: flex; align-items: flex-start; }
.rsvp-intro { position: absolute; left: 77px; top: 77px; width: 427px; height: 650px; }
.rsvp-intro h1 { margin: 0; color: var(--cream); font: 300 73.3333px/1 Cooper, serif; letter-spacing: -3.6667px; }
.rsvp-intro > p { margin: 26px 0 0; font: 400 26.6667px/1.3 "DM Sans", sans-serif; letter-spacing: -1.3333px; }
.rsvp-intro img { position: absolute; left: 110px; top: 213px; width: 375px; height: 478px; object-fit: fill; }
.rsvp-form { position: absolute; top: 33px; right: 77px; width: 631px; height: 702px; padding: 16px 29px 20px; border-radius: 16px; background: var(--cream); font-family: Arimo, Georgia, serif; }
.rsvp-form > label, .rsvp-form legend { display: block; margin: 0 0 8px; color: var(--ink); font: 700 15.2778px/1.1 Arimo, Georgia, serif; }
.rsvp-form input[type="text"] { display: block; width: 100%; height: 40px; margin: 0 0 29px; border: 1px solid #777; border-radius: 8px; background: transparent; padding: 7px 10px; outline-color: var(--pink); }
.rsvp-form fieldset { margin: 0 0 30px; padding: 0; border: 0; }
.rsvp-form fieldset legend { padding: 0; }
.choice { position: relative; display: flex; align-items: center; width: 100%; height: 46px; margin: 7px 0; padding: 0 11px; border-radius: 8px; background: #e0dcda; font: 400 15.2778px/1 Arimo, Georgia, serif; cursor: pointer; }
.choice input { appearance: none; width: 16px; height: 16px; margin: 0 7px 0 1px; border: 1px solid #555; border-radius: 4px; background: transparent; }
.choice input:checked { border-color: var(--pink); background: var(--pink); box-shadow: inset 0 0 0 3px #dedad9; }
.rsvp-form fieldset:first-of-type .choice input { border-radius: 50%; }
.rsvp-form fieldset:first-of-type .choice input:checked { box-shadow: inset 0 0 0 4px #dedad9; }
.rsvp-form > label[for="other"] { margin-top: 0; }
.rsvp-form #other { margin-bottom: 13px; }
.rsvp-form button { width: 100%; height: 45px; border-radius: 30px; font-size: 17.8241px; }
.rsvp-form small { display: block; margin-top: 8px; color: #555; font: 400 10px/1 Arimo, Georgia, serif; text-align: center; }
.form-status { min-height: 18px; margin: 5px 0 0; color: var(--pink); font: 700 13px/1 Arimo, Georgia, serif; text-align: center; }
.rsvp-thanks { display: none; margin: 0; height: 100%; align-items: center; justify-content: center; text-align: center; color: var(--pink); font: 300 73.3333px/1.1 Cooper, serif; letter-spacing: -3.6667px; }
.rsvp-form.submitted .rsvp-fields { display: none; }
.rsvp-form.submitted .rsvp-thanks { display: flex; }

/* Password gate, shared by the site login and (loosely) the dashboard login. */
.login-page { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background: var(--green); font-family: "DM Sans", Arial, sans-serif; }
.login-card { width: 100%; max-width: 480px; padding: 0 24px; text-align: center; }
.login-card h1 { margin: 0 0 32px; color: var(--cream); font: 300 73.3333px/1 Cooper, serif; letter-spacing: -3.6667px; }
.login-card input[type="password"] { display: block; width: 100%; height: 56px; margin: 0 0 20px; border: 1px solid #777; border-radius: 12px; background: var(--cream); padding: 10px 16px; font: 400 20px/1.1 Arimo, Georgia, serif; outline-color: var(--pink); }
.login-card .login-button { width: 100%; height: 60px; border-radius: 30px; font-size: 22px; }
.login-card .login-error { min-height: 20px; margin: 12px 0 0; color: var(--pink); font: 700 15px/1 Arimo, Georgia, serif; }

.page--thanks h1 { top: 76px; left: 55px; width: 1212px; font-size: 133.333px; line-height: 1.2; letter-spacing: -6.6667px; }
.page--thanks .page-canvas > p { position: absolute; top: 617px; left: 276px; width: 815px; margin: 0; font: 400 26.6667px/1.3 "DM Sans", sans-serif; text-align: center; letter-spacing: -1.3333px; }
.thanks-balloons { position: absolute; left: 376px; top: 95px; width: 614px; height: 560px; object-fit: fill; image-rendering: auto; animation: balloon-float 4s ease-in-out infinite; }
@keyframes balloon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.thanks-confetti { position: absolute; }
.thanks-confetti--left { left: 1064px; top: -76px; width: 378px; height: 609px; transform: rotate(90deg) scaleX(-1); }
.thanks-confetti--right { left: -76px; top: -76px; width: 378px; height: 609px; transform: rotate(90deg); }


@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Mobile layout for What to expect / Thanks. RSVP has its own wider breakpoint below. */
@media (max-width: 640px) {
  .page--expect, .page--thanks {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
  }
  .page--expect .page-canvas,
  .page--thanks .page-canvas {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    transform: none !important;
    padding: 32px 20px;
  }

  /* What to expect */
  .page--expect h1 {
    position: static;
    width: auto;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -1.5px;
    margin: 0 0 24px;
  }
  .expect-grid {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
  }
  .expect-card { width: 100%; height: auto; }
  .card-visual { height: auto; padding: 20px 0; }
  .expect-card--outline .card-visual { height: auto; padding-top: 20px; }
  .expect-card--pink .card-visual img,
  .expect-card--green .card-visual img,
  .expect-card--outline .card-visual img {
    width: 50%;
    max-width: 160px;
    height: auto;
  }
  .expect-card p {
    margin: 0 12px 20px;
    font-size: 16px;
    letter-spacing: normal;
  }

  /* Thanks, party people! */
  .page--thanks .page-canvas { position: relative; }
  .page--thanks h1 {
    position: static;
    width: auto;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1.5px;
    margin: 0 0 16px;
  }
  .page--thanks .page-canvas > p {
    position: static;
    width: 100%;
    margin: 16px 0 0;
    font-size: 16px;
  }
  .thanks-balloons {
    position: static;
    display: block;
    width: 55%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
  }
  .thanks-confetti--right { display: none; }
  .thanks-confetti--left {
    position: absolute;
    left: auto;
    right: -10px;
    top: -10px;
    width: 120px;
    height: auto;
    opacity: .8;
    z-index: 1;
  }
}

/* Are you in? switches to a stacked layout earlier than the other sections. */
@media (max-width: 860px) {
  .page--rsvp {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
  }
  .page--rsvp .page-canvas {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    transform: none !important;
    padding: 32px 20px;
  }
  .rsvp-intro {
    position: static;
    width: 100%;
    height: auto;
    text-align: center;
  }
  .rsvp-intro h1 { font-size: 32px; }
  .rsvp-intro > p { font-size: 16px; }
  .rsvp-intro img {
    position: static;
    display: block;
    width: 50%;
    max-width: 180px;
    height: auto;
    margin: 20px auto 0;
  }
  .rsvp-form {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 24px;
    padding: 20px 16px 24px;
  }
  .rsvp-thanks {
    height: auto;
    padding: 40px 0;
    font-size: 40px;
  }
  .login-card h1 { font-size: 48px; }
  .rsvp-form input[type="text"] { font-size: 16px; }
}

/* Header crops in on mobile instead of shrinking the whole wide canvas: hides
   most of the left-side flower gif, leaves part of the disco ball visible on
   the right (both nudged inward so more of them show), and moves the
   date/location below the CTA button so they aren't cropped off the edges. */
@media (max-width: 640px) {
  .page--hero {
    height: calc(82.5806vw + 10px);
  }
  .page--hero .page-canvas {
    transform: scale(calc(100vw / 930px)) translateX(-240px);
  }
  .hero-disco { left: 1100px; }
  .hero-daisy--large { left: 15px; }
  .hero-date { top: 700px; bottom: auto; left: 380px; right: auto; }
  .hero-location { top: 700px; bottom: auto; left: 718px; right: auto; }
}