@font-face {
  font-family: Chivo;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/chivo-900.woff2") format("woff2");
}
@font-face {
  font-family: Chewy;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/chewy-400.woff2") format("woff2");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/manrope-500.woff2") format("woff2");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/manrope-700.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --night: #120816;
  --ink: #1a1024;
  --cream: #f6f1e7;
  --sun: #ffc43d;
  --canyon: #ff6b3d;
  --trail: #3ddc97;
  --sky: #4cc9f0;
  --pink: #ff4d8d;
  --muted: #ddd4ea;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 8% -10%, #4a2168 0%, transparent 58%),
    radial-gradient(720px 420px at 110% 8%, #6a3014 0%, transparent 52%),
    var(--night);
  color: var(--cream);
  font-family: Manrope, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.45;
}

img { max-width: 100%; }

h1, h2, .mark {
  font-family: Chivo, sans-serif;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(3.1rem, 7vw, 6.4rem);
  color: var(--sun);
}

h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  color: var(--cream);
}

p { margin: 0; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: 12px;
  top: 8px;
  transform: translateY(-140%);
  background: var(--sun);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  z-index: 30;
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--night) 78%, transparent);
  backdrop-filter: blur(12px);
}

.mark {
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--cream);
}

.controls, .scene-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.controls button,
.scene-nav button,
.cta,
.fake-btn {
  font: inherit;
  cursor: pointer;
  border: 3px solid var(--ink);
  border-radius: 999px;
  min-height: 44px;
  padding: 8px 16px;
}

.controls button,
.scene-nav button {
  background: transparent;
  color: var(--cream);
}

.scene-nav button[aria-pressed="true"] {
  background: var(--sun);
  color: var(--ink);
  translate: 0 -6px;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 12px 0 64px;
}

.hero-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(1.35);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
}

.sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.doodle {
  position: absolute;
  opacity: 0;
  transform: var(--from);
  transition:
    transform 0.95s cubic-bezier(0.16, 1.35, 0.3, 1),
    opacity 0.35s ease;
  transition-delay: var(--d, 0s);
  filter: drop-shadow(4px 6px 0 rgb(0 0 0 / 0.25));
}

body.is-set .doodle {
  opacity: 1;
  transform: var(--at, translate(0, 0));
}

.sun { top: 6%; left: 4%; --from: translate(-30vw, -20vh) rotate(-24deg); --d: 0.05s; }
.cloud { top: 14%; right: 8%; --from: translate(24vw, -18vh) rotate(12deg); --d: 0.15s; }
.cactus { bottom: 8%; left: 3%; --from: translate(-16vw, 24vh) rotate(-8deg); --d: 0.22s; }
.jeep { bottom: 12%; right: 6%; --from: translate(30vw, 16vh) rotate(8deg); --d: 0.28s; }
.tower { top: 42%; left: 8%; --from: translate(-10vw, 30vh); --d: 0.34s; }
.plane { top: 22%; left: 42%; --from: translate(40vw, -30vh) rotate(18deg); --d: 0.12s; }

body[data-scene="signup"] .plane { --at: translate(0, 0) rotate(-8deg); }
body[data-scene="event"] .jeep { --at: translate(-8vw, -6vh) rotate(-6deg); }
body[data-scene="event"] .cactus { --at: translate(6vw, -4vh) rotate(8deg); }
body[data-scene="invite"] .tower { --at: translate(10vw, -8vh) rotate(-8deg); }
body[data-scene="invite"] .cloud { --at: translate(-6vw, 4vh) rotate(-6deg); }
body[data-scene="rsvp"] .plane { --at: translate(-18vw, 10vh) rotate(-16deg); }
body[data-scene="rsvp"] .sun { --at: translate(8vw, 4vh) rotate(16deg); }
body[data-scene="more"] .jeep { --at: translate(-14vw, -10vh) rotate(-4deg); }
body[data-scene="more"] .sun { --at: translate(4vw, 8vh) rotate(-8deg); }

.wrap {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: 36px;
  align-items: center;
}

.lede { max-width: 38rem; font-size: 1.15rem; }

.stage {
  display: grid;
  gap: 14px;
  justify-items: center;
  overflow: hidden;
  padding: 22px 6px 4px;
}

.deck {
  position: relative;
  width: 100%;
  min-height: 560px;
}

.deck::before,
.deck::after {
  content: "";
  position: absolute;
  inset: 18px 10px 8px;
  border: 4px solid var(--ink);
  border-radius: 36px 42px 30px 38px;
}

.deck::before {
  background: var(--sky);
  transform: rotate(6deg) translate(16px, 8px);
}

.deck::after {
  background: var(--canyon);
  transform: rotate(-5deg) translate(-14px, 14px);
}

.card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #fff7ea;
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 34px 46px 28px 40px;
  box-shadow: 8px 10px 0 var(--sun);
  opacity: 0;
  z-index: 1;
  transform: translateX(42%) rotate(11deg) scale(0.92);
  transition:
    transform 0.7s cubic-bezier(0.18, 1.25, 0.32, 1),
    opacity 0.35s ease;
}

.card.is-on {
  opacity: 1;
  z-index: 3;
  transform: rotate(-2.5deg) scale(1);
}

.card.is-leaving {
  opacity: 1;
  z-index: 4;
  transform: translateX(-78%) rotate(-16deg) scale(0.88);
}

.card.no-move { transition: none; }

.card-art {
  width: 100%;
  height: 132px;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 24px 28px 46% 40%;
}

.card-face {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.card h3 {
  margin: 0;
  font-family: Chewy, cursive;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
}

.hint, .us-note, .count-label {
  margin: 0;
  font-family: Chewy, cursive;
  font-size: 1.05rem;
}

.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px 20px 14px 22px;
  font-family: Chewy, cursive;
  font-size: 0.95rem;
  color: var(--canyon);
}

.chip-tilt { rotate: -1.5deg; }

.field {
  min-height: 1.35em;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.2;
  word-break: break-word;
}

.field.is-typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 2px;
  background: var(--ink);
  vertical-align: -1px;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

.fake-btn {
  align-self: flex-start;
  background: var(--sun);
  color: var(--ink);
  font-family: Chewy, cursive;
  font-size: 1.35rem;
  box-shadow: 4px 5px 0 var(--ink);
}

.fake-btn.big {
  align-self: stretch;
  background: var(--trail);
  font-size: 1.7rem;
  padding: 14px 16px;
}

.guest-line {
  align-self: flex-start;
  margin: 0;
  padding: 4px 12px;
  background: var(--pink);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-family: Chewy, cursive;
  font-size: 1.2rem;
  rotate: -2deg;
}

.t-tab:not([aria-selected="true"]):hover { color: var(--sun); }
.t-tabs { margin: 2px 0; }
.t-tab {
  height: 40px;
  font-family: Chewy, cursive;
  font-size: 1.15rem;
}
.t-tabs-pill { height: 40px; top: 3px; }

.burst {
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--sun);
  border-radius: 14px 18px 12px 20px;
  font-family: Chewy, cursive;
  font-size: 1.05rem;
}

.rsvp-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: Chewy, cursive;
  font-size: 1.4rem;
}

.t-success-check { width: 42px; height: 42px; color: #0c7a42; }
.t-success-check svg { width: 42px; height: 42px; }

.count-block { display: flex; align-items: baseline; gap: 10px; }
.t-digit-group {
  min-height: 3.2rem;
  font-family: Chivo, sans-serif;
  font-weight: 900;
  font-size: 3.4rem;
  letter-spacing: -0.05em;
  color: var(--canyon);
}

.more-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.more-lines li {
  padding: 4px 8px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 12px;
  font-family: Chewy, cursive;
}

.caption {
  margin: 0;
  min-height: 2.6em;
  text-align: center;
  font-family: Chewy, cursive;
  font-size: 1.25rem;
  color: var(--cream);
}

.band.split, .band.close {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 72px 0;
}

.band.split {
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: 36px;
  align-items: center;
}

.band.flip { grid-template-columns: 1fr minmax(220px, 380px); }
.band.flip .polaroid { order: 2; }

.polaroid {
  margin: 0;
  padding: 12px 12px 28px;
  background: #fff7ea;
  border: 4px solid var(--ink);
  border-radius: 18px 28px 16px 24px;
  box-shadow: 10px 12px 0 var(--pink);
  rotate: -3deg;
}
.polaroid.mint { box-shadow: 10px 12px 0 var(--trail); rotate: 3deg; }
.polaroid img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 12px;
}

.stickers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stickers li {
  padding: 10px 14px;
  background: var(--sun);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px 20px 14px 22px;
  font-weight: 700;
  max-width: 100%;
}
.stickers li:nth-child(2) { background: var(--sky); rotate: -2deg; }
.stickers li:nth-child(3) { background: var(--trail); rotate: 1.5deg; }
.stickers li:nth-child(4) { background: #fff7ea; rotate: -1deg; }
.stickers li:nth-child(5) { background: var(--canyon); rotate: 2deg; }
.stickers li:nth-child(6) { background: var(--pink); rotate: -1.5deg; }

.close { text-align: center; padding-bottom: 28px; }
.close .lede { margin: 0 auto 22px; }
.fine {
  margin: 72px auto 48px;
  max-width: 28rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.72rem;
}

.cta {
  display: inline-block;
  background: var(--sun);
  color: var(--ink);
  text-decoration: none;
  font-family: Chivo, sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  padding: 12px 26px;
  box-shadow: 6px 7px 0 var(--pink);
}

.miss main {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 32px 16px;
  text-align: center;
}

@keyframes hop {
  0% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-16px) rotate(-7deg); }
  70% { transform: translateY(3px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes sticker-pop {
  0% { opacity: 0; scale: 0.35; translate: 0 28px; }
  55% { opacity: 1; scale: 1.14; translate: 0 -12px; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes cta-press {
  0% { scale: 1.14; }
  35% { scale: 0.9; }
  70% { scale: 1.2; }
  100% { scale: 1.14; }
}

@keyframes wash-pop {
  from { opacity: 0.08; scale: 1.05; }
  to { opacity: 0.34; scale: 1; }
}

.hero-wash.is-pop { animation: wash-pop 0.6s ease-out; }

@media (prefers-reduced-motion: no-preference) {
  .fake-btn.is-jump,
  .controls button:active,
  .scene-nav button:active {
    animation: hop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
  }

  .stickers li {
    opacity: 0;
    scale: 0.35;
  }
  .stickers li.is-in {
    opacity: 1;
    scale: 1;
    transition:
      scale var(--pop-dur, 0.32s) cubic-bezier(0.22, 1.55, 0.36, 1),
      translate var(--pop-dur, 0.32s) cubic-bezier(0.22, 1.55, 0.36, 1);
    animation: sticker-pop 0.55s cubic-bezier(0.2, 1.45, 0.32, 1) backwards;
  }
  .stickers li.is-in:hover {
    scale: var(--pop, 1.1);
    translate: 0 var(--lift, -6px);
  }
  .stickers li:nth-child(2).is-in { animation-delay: 70ms; }
  .stickers li:nth-child(3).is-in { animation-delay: 140ms; }
  .stickers li:nth-child(4).is-in { animation-delay: 210ms; }
  .stickers li:nth-child(5).is-in { animation-delay: 280ms; }
  .stickers li:nth-child(6).is-in { animation-delay: 350ms; }
  .stickers li[data-pop="1"] { --pop: 1.06; --lift: -3px; --pop-dur: 0.2s; }
  .stickers li[data-pop="2"] { --pop: 1.15; --lift: -9px; --pop-dur: 0.4s; }
  .stickers li[data-pop="3"] { --pop: 1.09; --lift: -5px; --pop-dur: 0.26s; }
  .stickers li[data-pop="4"] { --pop: 1.18; --lift: -11px; --pop-dur: 0.5s; }
  .stickers li[data-pop="5"] { --pop: 1.08; --lift: -4px; --pop-dur: 0.24s; }
  .stickers li[data-pop="6"] { --pop: 1.16; --lift: -8px; --pop-dur: 0.44s; }
  .stickers li[data-pop="7"] { --pop: 1.11; --lift: -6px; --pop-dur: 0.32s; }
  .stickers li[data-pop="8"] { --pop: 1.2; --lift: -12px; --pop-dur: 0.54s; }
  .stickers li[data-pop="9"] { --pop: 1.07; --lift: -4px; --pop-dur: 0.22s; }
  .stickers li[data-pop="10"] { --pop: 1.13; --lift: -7px; --pop-dur: 0.36s; }
  .stickers li[data-pop="11"] { --pop: 1.17; --lift: -10px; --pop-dur: 0.46s; }

  .cta {
    transition: scale 0.35s cubic-bezier(0.22, 1.55, 0.36, 1);
  }
  .cta:hover,
  .cta:focus-visible {
    scale: 1.14;
  }
  .cta:active {
    animation: cta-press 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes sticker-in {
      from { opacity: 0; transform: translateY(36px) rotate(-8deg); }
    }
    .polaroid {
      animation: sticker-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@media (max-width: 860px) {
  .hero-grid,
  .band.split,
  .band.flip {
    grid-template-columns: 1fr;
  }
  .band.flip .polaroid { order: 0; }
  .tower, .cloud { display: none; }
  .deck { min-height: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .doodle {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .card,
  .hero-wash,
  .fake-btn,
  .cta,
  .controls button,
  .scene-nav button,
  .stickers li,
  .polaroid {
    animation: none;
    transition: none;
  }
  .card { opacity: 0; transform: none; }
  .card.is-on { opacity: 1; }
  .card.is-leaving { opacity: 0; }
  .field.is-typing::after { animation: none; }
  .scene-nav button[aria-pressed="true"] { translate: none; }
  [data-pause] { display: none; }
}