/* ── Sage Six · identity ────────────────────────────────────────────────
   The compact lockup reads "Sage" followed by the inverted-six mark itself;
   the logo replaces the written word "Six" instead of sitting redundantly
   beside it. "Learning Systems LLC" continues in the same serif voice and on
   the same optical line. The mark is drawn once in public/sage-six-mark.svg and placed
   here with <use>.

   The link retains a 44px touch target inside the 48px follow bar, while the
   visible lockup stays quiet enough to remain subordinate to the page.

   The bench (tools/logo_specimens.py, tools/build-logo-preview.py) still
   draws every candidate the mark was chosen from, and the paint rules it
   needs are kept at the bottom of this sheet so it keeps working.          */

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: 2px;
}

.brand__name-mark {
  flex: none;
  height: 1em;
  width: auto;
  aspect-ratio: 24.4 / 35.635;
  color: var(--ink);
  overflow: visible;
  transform: none;
}

.brand__words {
  --brand-type-size: clamp(1rem, 0.96rem + 0.12vw, 1.125rem);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.52em;
  min-width: 0;
  font-family: var(--serif);
  font-size: var(--brand-type-size);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
}

.brand__name {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  font: inherit;
  white-space: nowrap;
}

.brand__suffix {
  display: inline-block;
  font: inherit;
  color: var(--grey);
  white-space: nowrap;
  transform: none;
}

/* ── bench-only: paint rules for the generated mark candidates ────────── */

.s6-dm {
  display: block;
  height: var(--s6-size, 44px);
  width: auto;
  color: var(--ink);
}

.s6-ink { fill: currentColor; }

.s6-cut {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 8;
}

.s6-back { color: var(--grey-2); }

.s6-hair {
  fill: none;
  stroke: var(--grey-2);
  stroke-width: 0.8;
}

.s6-lockup { display: inline-flex; align-items: center; gap: 0.85rem; }
.s6-lockup__rule { align-self: stretch; width: 1px; background: var(--hair); }
.s6-lockup__words { display: flex; flex-direction: column; gap: 0.18rem; }

.s6-row { display: flex; align-items: flex-end; gap: 2.5rem; flex-wrap: wrap; }
.s6-scale { display: flex; align-items: flex-end; gap: 2.25rem; }
.s6-scale__cell { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.s6-scale__n {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--grey);
}

/* the bench pages still reference the old wordmark classes */
.wordmark { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.wordmark-mark { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.wordmark-suffix {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grey);
}