.workshops-page .nav .active { color: var(--art-blue); }

.workshops-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 8vw 100%,
    radial-gradient(circle at 82% 18%, rgba(228,111,82,.42), transparent 24%),
    var(--art-navy);
  color: white;
}
.workshops-hero::before {
  content: "PRACTICE";
  position: absolute;
  left: -2vw;
  bottom: -4vw;
  color: rgba(255,255,255,.05);
  font-family: Georgia, serif;
  font-size: clamp(9rem, 23vw, 25rem);
  line-height: .7;
  letter-spacing: -.09em;
}
.workshops-hero-grid {
  position: relative;
  z-index: 1;
  min-height: 790px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 5rem;
  padding-top: 5rem;
  padding-bottom: 6rem;
}
.workshops-hero h1 {
  margin: 1.5rem 0 2rem;
  max-width: 900px;
  color: white;
  font-size: clamp(3.7rem, 6.4vw, 7rem);
  line-height: .9;
}
.workshops-hero h1 em { display: block; margin-top: .14em; color: #ffd387; font-size: .78em; font-weight: 500; transform: translateX(3vw); }
.workshops-hero .lede { max-width: 720px; color: rgba(255,255,255,.84); }
.workshops-hero .eyebrow { color: #ffd387; }
.learning-motion { display: grid; gap: .8rem; transform: rotate(2deg); }
.learning-motion span { display: block; padding: 1rem 1.4rem; color: white; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 4.2rem); font-style: italic; line-height: 1; }
.learning-motion span:nth-child(1) { background: var(--art-blue); transform: translateX(-2rem) rotate(-2deg); }
.learning-motion span:nth-child(2) { background: var(--art-gold); color: var(--art-navy); transform: translateX(1.5rem) rotate(1deg); }
.learning-motion span:nth-child(3) { background: var(--art-coral); transform: translateX(-1rem) rotate(-1deg); }
.learning-motion span:nth-child(4) { border: 3px solid rgba(255,255,255,.6); transform: translateX(2.5rem) rotate(2deg); }

.workshop-premise { background: var(--art-paper); }
.workshop-premise-grid { display: grid; grid-template-columns: .2fr 1.05fr .75fr; gap: 3.5rem; align-items: start; }
.workshop-premise-grid h2 { max-width: 760px; }
.workshop-programs { overflow: hidden; background: white; }
.workshop-programs-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5rem; align-items: end; margin-bottom: 5rem; }
.workshop-programs-heading > p { max-width: 590px; color: var(--muted); font-size: 1.12rem; }
.workshop-card { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5rem; margin: 2.5rem 0; padding: 4rem; }
.workshop-title > p:last-child { max-width: 650px; }
.workshop-index { display: block; margin-bottom: 1.4rem; font-family: Georgia, serif; font-size: 3rem; font-style: italic; line-height: 1; opacity: .35; }
.workshop-label { margin: 0 0 .8rem; font-size: .76rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.workshop-card h3 { font-family: Georgia, serif; font-size: clamp(2.3rem, 4vw, 4.2rem); font-weight: 500; line-height: .98; }
.workshop-outcomes { padding-top: 1rem; }
.workshop-outcomes h4 { margin-top: 0; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; }
.workshop-outcomes ul { margin: 0; padding: 0; list-style: none; }
.workshop-outcomes li { position: relative; padding: 1rem 0 1rem 2rem; border-top: 1px solid currentColor; line-height: 1.4; }
.workshop-outcomes li::before { content: "+"; position: absolute; left: 0; font-weight: 900; }
.workshop-card-blue { background: var(--art-blue); color: white; transform: rotate(-.45deg); }
.workshop-card-blue h3 { color: white; }
.workshop-card-blue .workshop-label { color: #ffd387; }
.workshop-card-gold { margin-left: 5vw; background: var(--art-gold); color: var(--art-navy); transform: rotate(.4deg); }
.workshop-card-coral { margin-right: 5vw; background: var(--art-coral); color: white; transform: rotate(-.35deg); }
.workshop-card-coral h3 { color: white; }
.workshop-card-coral .workshop-label { color: var(--art-navy); }
.workshop-card-paper { border: 3px solid var(--art-blue); background: var(--art-paper); color: var(--art-navy); transform: rotate(.25deg); box-shadow: 18px 20px 0 var(--art-navy); }

.learning-section { padding: 8rem 0; background: var(--art-coral); color: white; }
.learning-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 7rem; align-items: start; }
.learning-heading { position: sticky; top: 9rem; }
.learning-heading h2 { color: white; }
.learning-heading > p:last-child { color: rgba(255,255,255,.82); }
.learning-heading .eyebrow { color: var(--art-navy); }
.learning-steps { margin: 0; padding: 0; list-style: none; }
.learning-steps li { display: grid; grid-template-columns: 5rem 1fr; gap: 1.4rem; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,.4); }
.learning-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.4); }
.learning-steps span { color: var(--art-navy); font-family: Georgia, serif; font-size: 2.2rem; font-style: italic; }
.learning-steps strong { display: block; color: white; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.learning-steps p { margin: .35rem 0 0; color: rgba(255,255,255,.8); }

.formats-section { background: var(--art-cream); }
.formats-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 6rem; align-items: start; }
.formats-copy { padding-top: 1.5rem; border-top: 6px solid var(--art-gold); }
.format-list { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.format-list span { padding: .55rem .85rem; border: 1px solid rgba(7,95,168,.22); border-radius: 999px; background: white; color: var(--art-blue); font-size: .86rem; font-weight: 750; }

.workshop-proof { background: white; }
.workshop-proof-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7rem; align-items: center; }
.workshop-proof blockquote { margin: 0; padding: 3rem; background: var(--art-navy); color: white; box-shadow: 20px 22px 0 var(--art-gold); transform: rotate(-1deg); }
.workshop-proof blockquote p { margin-top: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 3rem); font-style: italic; line-height: 1.15; }
.workshop-proof blockquote footer { color: #ffd387; font-size: .88rem; font-weight: 750; }

.workshop-contact { position: relative; overflow: hidden; background: var(--art-blue); color: white; text-align: center; }
.workshop-contact::before { content: "TOGETHER"; position: absolute; left: -2vw; bottom: -3vw; color: rgba(255,255,255,.07); font-family: Georgia, serif; font-size: 20vw; line-height: .7; }
.workshop-contact-inner { position: relative; z-index: 1; max-width: 980px; }
.workshop-contact h2 { color: white; }
.workshop-contact .lede { color: rgba(255,255,255,.84); }
.workshop-contact .hero-actions { justify-content: center; }

@media (max-width: 980px) {
  .workshops-hero-grid,
  .workshop-premise-grid,
  .workshop-programs-heading,
  .workshop-card,
  .learning-grid,
  .formats-grid,
  .workshop-proof-grid { grid-template-columns: 1fr; }
  .workshops-hero-grid { gap: 4rem; padding-top: 6rem; }
  .learning-motion { max-width: 660px; }
  .workshop-premise-grid { gap: 1rem; }
  .workshop-card { gap: 2rem; }
  .workshop-card-gold,
  .workshop-card-coral { margin-left: 0; margin-right: 0; }
  .learning-grid,
  .formats-grid,
  .workshop-proof-grid { gap: 4rem; }
  .learning-heading { position: static; }
}

@media (max-width: 700px) {
  .workshops-hero-grid { min-height: auto; padding: 4rem 0 5rem; }
  .workshops-hero h1 { font-size: 3.35rem; }
  .workshops-hero h1 em { transform: none; }
  .learning-motion span { font-size: 2.5rem; }
  .learning-motion span:nth-child(1),
  .learning-motion span:nth-child(2),
  .learning-motion span:nth-child(3),
  .learning-motion span:nth-child(4) { transform: none; }
  .workshop-card { padding: 2rem; transform: none; }
  .workshop-card-paper { box-shadow: 10px 12px 0 var(--art-navy); }
  .learning-steps li { grid-template-columns: 3rem 1fr; }
  .workshop-proof blockquote { padding: 2rem; box-shadow: 10px 12px 0 var(--art-gold); transform: none; }
}