/* Visibility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* Spacing rhythm — children of .flow get top-margin */
.flow > * + * { margin-block-start: var(--flow-space, var(--space-4)); }

/* Text helpers */
.text-center  { text-align: center; }
.text-balance { text-wrap: balance; }
.lede {
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--color-ink-muted);
  max-width: 64ch;
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin-bottom: var(--space-3);
}

/* Margins (top / bottom only — the cases we actually need) */
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Chips & badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  line-height: 1.4;
}
.badge--award {
  background: #fff5d7;
  color: #6b4d00;
  border: 1px solid #f1d27a;
}
.badge--lactose {
  background: #e5f2e9;
  color: #1f5733;
  border: 1px solid #b8d8c2;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth);
}
.chip:hover { border-color: var(--color-accent-strong); color: var(--color-accent-strong); }
.chip[aria-pressed="true"] {
  background: var(--color-accent-strong);
  color: #fff;
  border-color: var(--color-accent-strong);
}