/* An invitation to make flowers together, using only supplied workshop media. */
.workshop-section {
  --workshop-paper: #F3E6E7;
  --workshop-ink: #5D1451;
  width: 100%;
  margin: 0;
  padding: clamp(22.4px, 3.5vw, 50.4px) 28px;
  background: var(--workshop-paper);
  color: var(--workshop-ink);
}

.workshop-section-inner {
  display: grid;
  align-items: center;
  gap: clamp(20px, 3.15vw, 53.2px);
  max-width: 1456px;
  min-width: 0;
  margin: 0 auto;
}

.workshop-section--with-media .workshop-section-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.workshop-media,
.workshop-copy {
  min-width: 0;
}

.workshop-media {
  display: grid;
  align-items: center;
}

.workshop-media :is(video, iframe, img) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
}

.workshop-video {
  max-height: 504px;
  object-fit: contain;
  background: #FFFFFF;
}

.workshop-copy {
  max-width: 640px;
  font: 400 clamp(17px, 1.4vw, 20px)/1.5 "Big Bird", Georgia, serif;
}

.workshop-copy .workshop-eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: .04em;
}

.workshop-copy h2 {
  margin: 0 0 12px;
  font: 400 clamp(24px, 2.275vw, 33.6px)/1.25 "Big Bird", Georgia, serif;
  letter-spacing: 0;
}

.workshop-copy h2 .workshop-title-script {
  display: block;
  margin-top: .35em;
  padding: 1.8em 0 0;
  margin-bottom: -.45em;
  font: 400 clamp(26px, 2.45vw, 32.2px)/1 "Curly Story", cursive;
  letter-spacing: .04em;
  word-spacing: normal;
  text-transform: none;
}

/* Reserve the actual capital flourishes, which extend above this font's metrics. */
.workshop-title-script .curly-line {
  max-width: 100%;
}

.workshop-copy > p:not(.workshop-eyebrow) {
  margin: 0 0 16px;
}

.workshop-email-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 7px;
  padding: 10px 21px;
  border: 1px solid var(--workshop-ink);
  border-radius: 11px 5px 12px 6px;
  background: var(--workshop-ink);
  color: var(--workshop-paper);
  font: 400 16px/1.35 "Big Bird", Georgia, serif;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.workshop-email-button:is(:hover, :focus-visible) {
  background: #E7D3DB;
  color: var(--workshop-ink);
}

.workshop-email-button:focus-visible {
  outline: 2px solid var(--workshop-ink);
  outline-offset: 5px;
}

@media (max-width: 820px) {
  .workshop-section {
    padding: 22px 20px 28px;
  }

  .workshop-section--with-media .workshop-section-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .workshop-copy {
    max-width: none;
    text-align: center;
  }

  .workshop-copy h2 {
    font-size: clamp(24px, 4.2vw, 29.4px);
  }

  .workshop-copy h2 .workshop-title-script {
    font-size: clamp(26px, 5.04vw, 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workshop-email-button {
    transition: none;
  }
}

.workshop-section:not(.workshop-section--with-media) .workshop-section-inner { max-width: 840px; }
.workshop-section:not(.workshop-section--with-media) .workshop-copy { max-width: none; text-align: center; }

.workshop-media { justify-items: center; }
/* 70% of the former native media size, with the whole portrait kept visible. */
.workshop-media :is(video.workshop-video, img.workshop-photo) { width: auto; max-width: 70%; height: auto; max-height: 504px; object-fit: contain; }