/* Keep the honeypot inside the viewport in both writing directions. */
.honey {
  left: auto;
  inset-inline-start: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.honey input { max-inline-size: 1px; }

@media (max-width: 800px) {
  html { --header-height: 86px; }
  body > header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-inline: 4%; }
  header .logo { max-inline-size: 100%; }
  header .controls { min-inline-size: 0; gap: 6px; }
  #home.campaign-hero { margin-inline: 12px; padding-inline: clamp(14px, 4vw, 22px); }
  #campaignContent { grid-template-columns: minmax(0, 1fr); }
  .campaign-copy { min-inline-size: 0; }
  .campaign-copy h1 { font-size: clamp(28px, 8vw, 44px); line-height: 1.25; }
  .campaign-copy h1, .campaign-copy p, .catalog-name, .form-field { overflow-wrap: anywhere; }
  .campaign-stage { aspect-ratio: 3 / 2; }
  .campaign-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .campaign-tabs { min-inline-size: 0; flex-wrap: wrap; }
  .campaign-tabs button { padding-inline: 9px; font-size: 13px; }
  .campaign-arrows { align-self: center; }
  #about { margin-inline: 12px; padding-inline: 6%; }
  #about h2 { font-size: clamp(28px, 7vw, 34px); }
  .collection-heading > div { grid-template-columns: auto minmax(0, 1fr); }
  .collection-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-product, .catalog-tools, .form-field, .contact-grid > div { min-inline-size: 0; }
  .contact-grid a, .social-links a { overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  header .logo { width: 136px; }
  .controls button { padding-inline: 8px; }
  .campaign-bottom { grid-template-columns: minmax(0, 1fr); }
  .campaign-arrows { justify-self: end; }
  .catalog-image { height: 165px; padding: 14px 10px; }
}