:root {
  --workshops-paper: #faf8f2;
  --workshops-ink: #101010;
  --workshops-pink: #f50083;
  --workshops-yellow: #ffd629;
  --workshops-copy: "Montserrat", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; background: var(--workshops-paper); }
body { margin: 0; overflow-x: hidden; background: var(--workshops-paper); color: var(--workshops-ink); font-family: var(--workshops-copy); }
.workshops-page { padding: clamp(62px, 7.8vw, 120px) 0 clamp(54px, 7vw, 106px); }
.workshops-shell { width: min(980px, calc(100% - 64px)); margin-inline: auto; }

.workshops-introduction h1,
.workshop-process h2,
.workshop-host h2,
.workshop-signup a {
  font-family: var(--workshops-copy);
  font-weight: 800;
}
.workshops-introduction h1 {
  margin: 0 0 clamp(42px, 5.2vw, 80px);
  font-size: clamp(48px, 4.6vw, 72px);
  line-height: .98;
  text-align: center;
}
.workshops-introduction-grid {
  display: grid;
  grid-template-columns: minmax(250px, .79fr) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(52px, 7.3vw, 112px);
}
.workshops-introduction-copy { max-width: 360px; font-size: clamp(18px, 1.42vw, 22px); line-height: 1.28; }
.workshops-introduction-copy p { margin: 0 0 21px; }

.workshop-gallery { min-width: 0; touch-action: pan-y; }
.workshop-gallery-track { min-height: 0; overflow: hidden; }
.gallery-slide { display: none; aspect-ratio: 1.57 / 1; overflow: hidden; background: #ede8db; }
.gallery-slide.is-active { display: block; }
.gallery-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-placeholder { display: grid; place-items: center; padding: 28px; background: repeating-linear-gradient(-45deg, #f2ead7 0 13px, #e8dfcb 13px 26px); color: #635e55; text-align: center; font-size: 14px; line-height: 1.35; }
.gallery-dots { display: flex; justify-content: center; gap: 10px; min-height: 12px; margin-top: 14px; }
.gallery-dots[hidden] { display: none; }
.gallery-dots button { width: 10px; height: 10px; padding: 0; border: 1px solid var(--workshops-ink); border-radius: 50%; background: transparent; cursor: pointer; }
.gallery-dots button.active { border-color: var(--workshops-pink); background: var(--workshops-pink); }

.workshop-process { padding-top: clamp(70px, 8.7vw, 134px); }
.workshop-process h2 { margin: 0 0 clamp(38px, 4.3vw, 66px); color: var(--workshops-pink); font-size: clamp(40px, 4.35vw, 68px); line-height: 1; text-align: center; }
.workshop-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4.2vw, 64px); }
.workshop-step span { display: block; margin-bottom: 8px; color: var(--workshops-pink); font-size: clamp(44px, 4.8vw, 74px); font-weight: 900; line-height: .85; }
.workshop-step p { margin: 0; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.28; }

.workshop-host { display: grid; grid-template-columns: 31% 1fr; gap: clamp(26px, 3vw, 46px); align-items: stretch; margin-top: clamp(58px, 6.6vw, 102px); padding: clamp(16px, 1.4vw, 22px) clamp(20px, 2.2vw, 34px); background: var(--workshops-yellow); }
.workshop-host-photo { width: 100%; height: 100%; min-height: 175px; object-fit: cover; }
.workshop-host-copy { align-self: center; }
.workshop-host h2 { margin: 0 0 10px; font-size: clamp(30px, 3.05vw, 47px); line-height: .94; }
.workshop-host p { max-width: 680px; margin: 0; font-size: clamp(18px, 1.4vw, 22px); font-weight: 400; line-height: 1.4; }
.workshop-host-link { display: inline-block; margin-top: 18px; border-bottom: 2px solid currentColor; color: inherit; font-size: clamp(18px, 1.4vw, 22px); font-weight: 900; line-height: 1.05; text-decoration: none; text-transform: uppercase; }

.workshop-signup { padding-top: clamp(36px, 4.2vw, 64px); text-align: center; }
.workshop-signup a { display: inline-block; padding: 14px 22px 13px; background: var(--workshops-pink); color: #fff; font-size: clamp(20px, 1.9vw, 29px); line-height: 1; text-decoration: none; text-transform: uppercase; }
.workshop-signup a:hover, .workshop-signup a:focus-visible { background: #d9006f; }

@media (max-width: 740px) {
  .workshops-page { padding-top: 54px; }
  .workshops-shell { width: min(100% - 36px, 980px); }
  .workshops-introduction h1 { text-align: left; }
  .workshops-introduction-grid { grid-template-columns: 1fr; gap: 28px; }
  .workshops-introduction-copy { max-width: 100%; }
  .workshop-process { padding-top: 70px; }
  .workshop-process h2 { text-align: left; }
  .workshop-steps { grid-template-columns: repeat(2, 1fr); gap: 38px 26px; }
  .workshop-host { grid-template-columns: 1fr; gap: 20px; }
  .workshop-host-photo { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
}

@media (max-width: 430px) {
  .workshop-steps { grid-template-columns: 1fr; gap: 28px; }
  .workshop-step { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; }
  .workshop-step span { margin: 0; font-size: 44px; }
  .workshop-signup a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }