/* WebBoss workshop homepage. Shared inner-page styles stay in site.css. */
.workshop-home {
  --home-line: oklch(85% 0.014 70);
  --home-green: oklch(42% 0.075 140);
}
.workshop-home main { overflow: clip }
.workshop-home a:focus-visible,
.workshop-home button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
.workshop-home [id] { scroll-margin-top: 96px }
.workshop-home .nav-inner { height: 80px }
.workshop-home .textlink { font-size: .94rem; line-height: 1.5 }
.workshop-home .textlink:hover { text-decoration: underline; text-underline-offset: 5px }
.workshop-home .btn { border-radius: 6px; padding: .85rem 1.15rem }

.workshop-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: 3.5rem 3.75rem;
}
.intro-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(3.3rem, 6.5vw, 5.1rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.02;
  margin-top: 0;
}
.intro-copy h1 span { color: var(--home-green) }
.intro-deck { font-size: 1.12rem; color: var(--muted); max-width: 47ch; margin-top: 1.3rem; line-height: 1.65 }
.intro-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.8rem }
.intro-person { padding: 0 0 0 1.25rem; border-left: 1px solid var(--home-line) }
.intro-person img { width: 100%; height: 255px; object-fit: cover; object-position: center 30%; border-radius: 3px 36px 3px 3px }
.intro-person figcaption { margin-top: 1rem; font-size: .8rem; color: var(--muted); line-height: 1.65 }
.intro-person strong { display: block; color: var(--ink); font-size: 1rem; font-weight: 600 }
.intro-person figcaption a { text-decoration: underline; text-underline-offset: 3px }

.work-section { padding-block: 2.5rem 4rem; border-top: 1px solid var(--home-line) }
.work-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2rem }
.work-section-head h2,
.agency-route h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.1vw, 2.6rem); letter-spacing: -.04em; line-height: 1.1; font-weight: 650; margin-top: 0 }
.work-section-head > .textlink { flex-shrink: 0; padding-bottom: .2rem }
.project-feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); background: #eeeadd; border: 1px solid var(--home-line); border-radius: 8px; overflow: hidden }
.project-picture { display: block; overflow: hidden; background: #112d39 }
.project-picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease }
.project-picture:hover img { transform: scale(1.015) }
.feature-picture { display: flex; align-items: center; background: #11202c; padding: 2rem 0 }
.feature-picture img { height: auto; object-fit: contain }
.project-copy { padding: clamp(1.7rem, 3.5vw, 2.6rem); display: flex; flex-direction: column; align-items: flex-start }
.project-copy h3 { font-family: var(--font-display); font-size: clamp(2rem, 3.3vw, 2.8rem); line-height: 1.06; letter-spacing: -.04em; font-weight: 650; margin-top: 0 }
.project-copy p { margin-block: 1rem 1.4rem; font-size: .98rem; line-height: 1.65; color: var(--muted) }
.project-copy .textlink { margin-top: auto }
.project-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem }
.project-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--home-line) }
.project-trio .project-item { display: flex; flex-direction: column }
.project-trio .project-item-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1 }
.project-trio .textlink { margin-top: auto }
.project-trio h3 { font-size: 1.45rem }
.project-item .project-picture { aspect-ratio: 1.96; border-radius: 6px; border: 1px solid var(--home-line) }
.project-item .project-picture img { object-position: top center }
.project-item-copy { padding-top: 1.2rem }
.project-item h3 { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.2; margin-top: 0; font-weight: 650 }
.project-item p { color: var(--muted); line-height: 1.7; font-size: .98rem; margin-block: .7rem 1rem; max-width: 48ch }
.work-note { color: var(--muted); font-size: .88rem; max-width: 82ch; border-top: 1px solid var(--home-line); margin-top: 2.4rem; padding-top: 1.1rem }

.agency-route { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-block: 2.5rem; margin-bottom: 4rem; border-block: 1px solid var(--home-line) }
.agency-route h2 { font-size: 1.85rem; max-width: 22ch }
.agency-route p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-bottom: .8rem }
.fieldnotes-section { padding-block: 3.75rem; background: #eeeee4; border-block: 1px solid var(--home-line) }
.fieldnotes-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5rem }
.featured-note { padding-right: 2.5rem; border-right: 1px solid var(--home-line) }
.fieldnotes-grid h3 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 650; line-height: 1.12; letter-spacing: -.035em; margin-top: 0 }
.featured-note h3 a:hover { color: var(--accent) }
.fieldnotes-grid p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-block: 1rem 1.2rem; max-width: 44ch }
.latest-section { padding-block: 3.5rem 1rem }
.latest-head { margin-bottom: .9rem }
.latest-intro { color: var(--muted); font-size: .95rem; margin-bottom: 1.8rem }
.workshop-home .post-list { margin-top: 0 }
.workshop-home .post { padding-block: 1.4rem }
.workshop-home .post-tags { display: none }
.workshop-home .post-snip { display: none }
.workshop-home .feed-list .post { grid-template-columns: 150px minmax(0, 1fr); gap: 1.8rem }
.workshop-home .post-title { font-size: 1.17rem; font-weight: 600 }
.workshop-home #contact { padding-block: 3.5rem }
.workshop-home .contact { border-radius: 8px; padding: clamp(1.6rem, 4vw, 3rem) }
.workshop-home .contact::before { display: none }
.workshop-home .contact h2 { font-size: clamp(2rem, 3.3vw, 2.6rem) }
.workshop-home .contact .lead { font-size: 1.05rem }
.workshop-home .contact .textlink { font-size: .85rem }
.workshop-home .form-status { color: var(--on-dark-mut) }
.workshop-home .footer { padding-block: 2.5rem 1.5rem }

@media (max-width: 900px) {
  .workshop-intro { grid-template-columns: minmax(0, 1fr) 215px; gap: 2rem }
  .intro-person img { height: 220px }
  .intro-copy h1 { font-size: clamp(3rem, 6.5vw, 4.5rem) }
  .intro-deck { font-size: 1.02rem }
  .intro-actions { gap: 1rem }
  .project-feature { grid-template-columns: 1.1fr 1fr }
  .project-copy { padding: 1.5rem }
  .project-copy h3 { font-size: 2rem }
}
@media (max-width: 760px) {
  .workshop-home .nav-inner { height: 72px }
  .workshop-intro { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.25rem 2.5rem }
  .intro-copy h1 { font-size: clamp(2.6rem, 11vw, 4.7rem); letter-spacing: -.035em }
  .intro-deck { max-width: 46ch }
  .intro-person { display: flex; align-items: center; gap: 1rem; padding-left: 0; border-left: 0 }
  .intro-person img { width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0 }
  .intro-person figcaption { margin-top: 0; font-size: .74rem }
  .intro-person strong { font-size: .94rem }
  .work-section { padding-block: 2rem 2.5rem }
  .work-section-head { align-items: flex-start; flex-direction: column; gap: .9rem; margin-bottom: 1.5rem }
  .work-section-head h2 { font-size: 2rem }
  .project-feature { grid-template-columns: 1fr }
  .feature-picture { padding: 0; aspect-ratio: 2.2 }
  .project-copy { padding: 1.5rem }
  .project-copy h3 br { display: none }
  .project-copy h3 { font-size: 2.1rem; margin-top: 0 }
  .project-pair { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem }
  .project-trio { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; padding-top: 2rem }
  .project-trio h3 { font-size: 1.7rem }
  .project-item-copy { padding-top: 1rem }
  .project-item p { max-width: none }
  .work-note { margin-top: 2rem }
  .agency-route { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 2rem; margin-bottom: 2.5rem }
  .agency-route h2 { font-size: 1.85rem }
  .fieldnotes-section { padding-block: 2.5rem }
  .fieldnotes-grid { grid-template-columns: 1fr; gap: 2rem }
  .featured-note { border-right: 0; border-bottom: 1px solid var(--home-line); padding: 0 0 2rem }
  .fieldnotes-grid h3 { font-size: 2rem }
  .latest-section { padding-top: 2.5rem }
  .workshop-home .feed-list .post { grid-template-columns: 1fr; gap: .5rem }
  .workshop-home #contact { padding-block: 2.5rem }
}
@media (prefers-reduced-motion: reduce) {
  .workshop-home *, .workshop-home *::before, .workshop-home *::after { transition: none !important }
}