/* Remove classical pillars across all pages and responsive variants.
   CSS also applies when the exported Framer runtime hydrates. */
[data-framer-name="Pillar"],
img[src*="eUzRXelpQdatbNr1QN9E6PPiCeY"] {
  display: none !important;
}

/* Retire the old floral side artwork. */
[data-framer-name="Left flower"],
[data-framer-name="Right flower"] {
  display: none !important;
}

/* Keep the About composition within one viewport, with room for navigation. */
#about {
  box-sizing: border-box;
  min-height: 100svh !important;
  padding: 80px 0 64px !important;
}

#about > [data-framer-name="Content"] {
  gap: clamp(16px, 3svh, 32px) !important;
}

#about [data-framer-name="Title + Description"] {
  gap: clamp(28px, 5svh, 52px) !important;
}

#about h2 {
  font-size: clamp(30px, 5.4svh, 48px) !important;
  line-height: 1.12 !important;
}

#about [data-framer-name="Text Animation"] p {
  font-size: clamp(18px, 2.8svh, 26px) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5 !important;
}

@media (max-width: 809px) {
  #about {
    padding: 76px 0 64px !important;
  }

  #about > [data-framer-name="Content"] {
    padding: 0 24px !important;
  }

  #about h2 {
    font-size: clamp(27px, 4.5svh, 36px) !important;
  }

  #about [data-framer-name="Text Animation"] p {
    font-size: 16px !important;
  }

  #about [data-framer-name="Image 1"],
  #about [data-framer-name="Image 2"] {
    display: none !important;
  }
}

/* Frame the About copy with the supplied lotus artwork. */
#about [data-framer-name="Image 1"] img,
#about [data-framer-name="Image 2"] img {
  content: url("./images/about-lotus.png");
  filter: grayscale(1) contrast(1.08);
  object-fit: contain !important;
  object-position: center !important;
}

#about [data-framer-name="Image 1"] img {
  content: url("./images/about-radio.png");
  transform: translateY(3%) scale(1.08);
  transform-origin: center;
}

#about [data-framer-name="Image 1"] {
  transform: translateX(-56px) rotate(-3deg) !important;
}

#about [data-framer-name="Image 2"] {
  transform: translateX(28px) rotate(-8deg) !important;
}

#about [data-framer-name="Image 2"] img {
  transform: scaleX(-1);
  transform-origin: 50% 65%;
}

/* Use the supplied silver artwork for every Moments from WHYC photo frame. */
[data-framer-name="Gallery Container"] [data-framer-name="Image Frame"] img {
  content: url("./images/gallery-ornate-frame.png");
  object-fit: fill !important;
  object-position: center !important;
}

/* Remove the exported ticker strip and its attached media panel. */
[data-framer-name="Ticker Strip Container"] {
  display: none !important;
}