/* .brand — the Gould mark and name, in the header and the mobile menu
   (spec decisions 13, 31, 67 item 5). Stand-in until the SVG lockup:
   v23's PNG mark plus the name as text in Archivo, v23's wordmark font.
   The name sits on one line when it fits; on a row too narrow it wraps to
   GOULD / FASTENERS, left aligned beside the mark. The row (header, menu
   top) keeps --space-lg clear before ☰ or ✕ and is the `brand-row`
   container, so the phone size follows the row, not the window. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4xs);          /* v23 .1rem */
  min-inline-size: 0;             /* lets the name wrap instead of pushing ☰ / ✕ */
  color: inherit;
  text-decoration: none;
}

.brand__mark {
  flex: none;
  inline-size: var(--space-xl-2xl); /* v23 66px, 48px on phones (decision 12) */
  block-size: var(--space-xl-2xl);
  object-fit: contain;
}

/* The SVG lockup, when Mitchell's file is in (decision 13): same height, its own width */
.brand__lockup {
  block-size: var(--space-xl-2xl);
  inline-size: auto;
}

.brand__name {
  font-family: var(--font-secondary);
  font-size: var(--step-2);        /* decision 61 item 12; v23 1.65–2.05rem */
  font-weight: var(--fw-semi-bold);
  line-height: var(--heading-line-height);
  letter-spacing: -0.018em;
}

/* Phone-wide rows: v23's smaller phone name (1.12rem); 20px fits one line
   on a 375px phone with room to spare (decision 67 item 5). */
@container brand-row (width < 720px) {
  .brand__name {
    font-size: var(--step-1);
  }
}