/* ── Hero section ── */
.hero {
  min-height: 100svh;
  background: #C5E8FF;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-h);
  padding-bottom: 5rem;
}

/* ── Hero inner: centered column ── */
.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  max-width: var(--max-width);
  padding: 0 1.5rem;
}

/* ── Hero content (text) ── */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

/* ── Main pill title ── */
.hero-title-pill {
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem 2.8rem;
  font-family: var(--font-fredoka);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--black);
}

.hero-title-pill .title-line-1 {
  display: block;
  color: var(--orange);
}

.hero-title-pill .title-line-2 {
  display: block;
  color: var(--purple);
}

.hero-title-pill .title-line-3 {
  display: block;
  color: var(--black);
  font-size: 0.42em;
  letter-spacing: 0.08em;
}

/* ── Hero tagline ── */
.hero-tagline {
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-nunito);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.2rem);
  padding: 0.4rem 1.4rem;
  border: 2.5px solid var(--black);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

/* ── Hero photos row ── */
.hero-photos {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
}

/* ── Polaroid cards ── */
.polaroid {
  background: var(--white);
  padding: 10px 10px 48px;
  border: 1.5px solid #d4d0c8;
  box-shadow: 6px 6px 20px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.1);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.polaroid--left  { transform: rotate(-3deg); }
.polaroid--right { transform: rotate(2.5deg); }

.polaroid:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 8px 10px 28px rgba(0,0,0,0.28);
  z-index: 2;
  position: relative;
}

.hero-photo {
  width: 190px;
  height: 280px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.polaroid-name {
  font-family: var(--font-marker);
  font-size: 1.35rem;
  color: #333;
  margin-top: 10px;
  text-align: center;
  line-height: 1;
}

/* ── Marquee ── */
.marquee-wrap {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  overflow: hidden;
  background: var(--yellow);
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
  padding: 0.45rem 0;
  z-index: 5;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
  gap: 0;
}

.marquee-track span {
  font-family: var(--font-fredoka);
  font-size: 1.15rem;
  color: var(--black);
  white-space: nowrap;
  padding: 0 1.5rem;
  letter-spacing: 0.04em;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ── Torn edge ── */
.torn-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
}

.torn-edge--below {
  bottom: -1px;
  background: var(--cream);
  clip-path: polygon(
    0% 100%, 2% 20%, 5% 80%, 8% 10%, 11% 70%,
    14% 0%, 17% 65%, 20% 15%, 23% 75%, 26% 5%,
    29% 60%, 32% 20%, 35% 80%, 38% 0%, 41% 70%,
    44% 20%, 47% 90%, 50% 10%, 53% 75%, 56% 5%,
    59% 65%, 62% 25%, 65% 85%, 68% 10%, 71% 70%,
    74% 0%, 77% 60%, 80% 20%, 83% 80%, 86% 15%,
    89% 65%, 92% 5%, 95% 75%, 98% 15%, 100% 50%, 100% 100%
  );
}

/* ── About section layout ── */
.about {
  background: var(--cream);
  padding-top: 6rem;
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  align-items: start;
}

.about-text .section-banner {
  margin-bottom: 2rem;
}

.about-decoration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-photo {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-md);
  border: 3px solid var(--black);
  box-shadow: var(--shadow-lg);
  display: block;
}

/* ── Dates section ── */
.dates {
  background: var(--purple);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.dates::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(0,0,0,0.05) 20px,
    rgba(0,0,0,0.05) 21px
  );
  pointer-events: none;
}

.dates-card {
  background: var(--white);
  border: 3px solid var(--black);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.dates-range {
  font-family: var(--font-fredoka);
  font-size: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
  color: var(--purple);
  letter-spacing: 0.02em;
}

.dates-sub {
  font-family: var(--font-nunito);
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  margin: 0.5rem 0;
  color: var(--black);
}

.dates-note {
  text-align: center;
  font-family: var(--font-nunito);
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  margin-top: 0;
}

/* ── Pricing section ── */
.pricing {
  background: var(--cream);
}

/* ── Join section ── */
.join {
  background: var(--green);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.join-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.join-copy {
  font-size: 1.2rem;
  max-width: 500px;
  line-height: 1.7;
  font-weight: 600;
}

/* Join section clipart */
.clipart {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.clipart--join-star1  { top: 10%; right: 8%;  font-size: 3rem;   transform: rotate(20deg); }
.clipart--join-star2  { bottom: 20%; left: 5%; font-size: 2.5rem; transform: rotate(-12deg); }
.clipart--join-balloon{ top: 15%; left: 7%;   font-size: 4rem;   transform: rotate(5deg); }