/* Footer — commissions, drop list, FAQ, legal. The only forms on the site. */
.site-foot{
  border-top: 1px solid var(--hair);
  margin-top: var(--s9);
  padding-block: var(--s8) var(--s7);
  display: grid;
  /* Exactly three tracks, not auto-fit: auto-fit sized a fourth, empty column on
     wide screens, which pushed all three blocks into the left of the page. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  justify-items: center;
}
@media (max-width: 900px){ .site-foot{ grid-template-columns: minmax(0, 1fr); } }

/* Each block keeps its own comfortable measure, centred inside its track. */
.foot-block{ width: 100%; max-width: 34ch; }

.foot-block__h{ font-size: var(--t-title); margin-bottom: var(--s3); }
.foot-block__lede{ margin: 0 0 var(--s5); max-width: 40ch; }

.field{ display: block; margin-bottom: var(--s4); }
.field span{ display: block; margin-bottom: var(--s2); }
.field input,
.field textarea{
  width: 100%;
  padding: var(--s3);
  border: 1px solid var(--hair);
  background: transparent;
  font: var(--t-body)/1.4 var(--f-text);
  color: var(--ink);
}
.field input:focus,
.field textarea:focus{ outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field textarea{ resize: vertical; }

.foot-chips{ border: 0; padding: 0; margin: 0 0 var(--s5); }
.foot-chips legend{ margin-bottom: var(--s2); }
.foot-chips label{ display: inline-block; margin: 0 var(--s2) var(--s2) 0; }
.foot-chips input{ position: absolute; opacity: 0; pointer-events: none; }
.foot-chips span{
  display: inline-block;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--hair);
  cursor: pointer;
  font: 600 var(--t-micro)/1 var(--f-mono);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink-2);
}
.foot-chips input:checked + span{ background: var(--ink); border-color: var(--ink); color: var(--ground); }
.foot-chips input:focus-visible + span{ outline: 2px solid var(--ink); outline-offset: 2px; }

/* Submitting: dim the form and stop a second click landing a duplicate. */
.commission-form[aria-busy="true"],
.signup[aria-busy="true"]{ opacity: .6; pointer-events: none; }

/* Netlify injects its managed reCAPTCHA here on deploy; reserve the space so
   the submit button does not jump when it loads. Empty locally. */
.form-recaptcha{ min-height: 78px; margin-bottom: var(--s4); }
@media (max-width: 360px){ .form-recaptcha{ transform: scale(.86); transform-origin: left top; } }

.site-faq details{ border-top: 1px solid var(--hair); padding: var(--s3) 0; }
.site-faq details:last-of-type{ border-bottom: 1px solid var(--hair); }
.site-faq summary{ cursor: pointer; font-weight: 500; }
.site-faq p{ margin: var(--s3) 0 0; color: var(--ink-2); max-width: 46ch; }

.foot-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s5);
  grid-column: 1 / -1;
  padding-top: var(--s5);
  border-top: 1px solid var(--hair);
}
.foot-links a:hover{ color: var(--ink); }
.foot-fine{ grid-column: 1 / -1; margin: 0; text-align: center; }

/* The footer forms are narrow columns — keep buttons to their content. */
.site-foot .btn{ width: auto; padding-inline: var(--s6); }