/* The crochet frame and the workshop panel share the same outer edges. */
.home-about {
  box-sizing: border-box;
  width: calc(100% - var(--home-section-gutter, 24px) - var(--home-section-gutter, 24px));
  margin: 0 auto;
  border: 24px solid transparent;
  border-image: url('/assets/brand/home-about-crochet-lilac.svg') 32 round;
  padding: 28px clamp(20px, 3vw, 44px);
  background: var(--home-paper, #F3F0E4);
  color: var(--home-ink, #000000);
}
.home-about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
}
.home-about-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  width: 100%;
  max-width: 480px;
  min-width: 0;
  padding: 14px 12px 20px;
  justify-self: center;
}
.home-polaroid {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 9px 9px 30px;
  border: 1px solid #DFD1B9;
  background:
    linear-gradient(135deg, #FFFCF299, #E4D5B12E),
    repeating-linear-gradient(0deg, #70522C04 0 1px, transparent 1px 3px),
    #F7F0DF;
  box-shadow: 0 1px 2px #6B4C2926, 0 7px 16px #5D3D241A;
  transform: rotate(-3deg);
}
.home-polaroid:nth-child(2n) { margin-top: 26px; transform: rotate(3deg); }
.home-polaroid:nth-child(3n) { transform: rotate(2deg); }
.home-polaroid:nth-child(4n) { transform: rotate(-2deg); }
.home-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--polaroid-position, center);
  border: 1px solid #6B4C2926;
  /* A lightly faded, warm print keeps skin and flower colors recognizable. */
  filter: sepia(.12) saturate(.88) contrast(.94) brightness(1.03);
}
.home-polaroid figcaption {
  margin: 12px 0 -18px;
  text-align: center;
  font: 400 13px/1.4 var(--brand-support-font, "Big Bird", Georgia, serif);
}
.home-about-collage--single { grid-template-columns: minmax(0, 1fr); max-width: 280px; }
.home-about-collage--single .home-polaroid img { aspect-ratio: 3 / 4; object-fit: contain; }
.home-about-copy {
  min-width: 0;
  max-width: 44ch;
  font: 400 clamp(18px, 1.5vw, 21px)/1.55 var(--brand-support-font, "Big Bird", Georgia, serif);
}
.home-about-copy h2 {
  margin: 0 0 8px;
  font: inherit;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.25;
}
.home-about-copy p { margin: 0; }
.home-about-copy .home-about-pronunciation {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
}
/* Center the visible Big Bird lettering, including its empty font descent. */
@media (min-width: 821px) {
  .home-about-copy { transform: translateY(-.22em); }
}
@media (max-width: 820px) {
  .home-about { border-width: 18px; padding: 20px 18px 28px; }
  .home-about-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-about-copy { width: 100%; max-width: 38ch; margin: 0 auto; text-align: center; }
  .home-about-copy h2 { font-size: 32px; }
  .home-about-copy .home-about-pronunciation { margin-bottom: 16px; }
}
@media (max-width: 420px) {
  .home-about { border-width: 16px; padding-inline: 14px; }
  .home-about-collage { gap: 12px; padding: 6px; }
  .home-polaroid { padding: 7px 7px 24px; }
}
@media (max-width: 540px) {
  /* Portraits stay large enough to read instead of shrinking to tiny thumbnails. */
  .home-about-collage {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    max-width: 270px;
    padding: 12px 10px 16px;
  }
  .home-polaroid { width: 100%; }
  .home-polaroid:nth-child(2n) { margin-top: 0; }
}