/* Commission photography and a direct conversation with the maker. */
.commission-hero { padding: calc(var(--head-h) + 40px) 0 56px; }
.commission-hero-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.commission-intro h1 { font: 800 clamp(2.2rem, 4.6vw, 4.8rem)/1.02 var(--display); text-transform: uppercase; color: var(--ink); letter-spacing: -.025em; }
.commission-intro .lede { font-size: 1.25rem; line-height: 1.5; margin-top: 24px; max-width: 46ch; }
.commission-intro .hero-actions { opacity: 1; animation: none; }
.commission-caption { margin-top: 24px; color: var(--muted); font-size: 1rem; }
.commission-hero-photo button, .commission-detail-photo button { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.commission-hero-photo img, .commission-detail-photo img { width: 100%; height: auto; border-radius: 3px; }
.commission-hero-photo figcaption, .commission-detail-photo figcaption { margin-top: 12px; font-size: .98rem; color: var(--muted); }
.commission-story { background: var(--paper-deep); }
.commission-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.commission-options-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.commission-options-grid > div { border-top: 1px solid var(--line); padding-top: 24px; }
.commission-options-grid h3 { font: 700 1.2rem/1.3 var(--display); color: var(--green); }
.commission-options-grid p { margin-top: 16px; max-width: 42ch; }
.commission-enquiry { background: var(--paper-deep); scroll-margin-top: var(--head-h); }
.commission-enquiry-copy > p { margin-top: 22px; max-width: 52ch; }
.commission-enquiry-copy a, .commission-form-privacy a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.commission-process { counter-reset: commission-step; margin-top: 32px; }
.commission-process li { position: relative; padding: 20px 0 20px 52px; border-top: 1px solid var(--line); counter-increment: commission-step; }
.commission-process li::before { content: counter(commission-step, decimal-leading-zero); position: absolute; left: 0; top: 21px; font: 700 1.1rem var(--display); color: var(--green); }
.commission-process h3 { font: 700 1rem/1.4 var(--display); }
.commission-process p { margin-top: 8px; }
.commission-form-privacy { font-size: .92rem; color: var(--muted); }
@media (max-width: 900px) {
  .commission-hero-grid, .commission-story-grid { grid-template-columns: 1fr; }
  .commission-intro h1 { max-width: 18ch; }
  .commission-hero-photo { margin-top: 8px; }
  .commission-options-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .commission-intro .hero-actions .btn { width: 100%; text-align: center; }
  .commission-hero { padding-bottom: 40px; }
}