/* ===========================================================================
 * borgnames.com — Brand component snippets (Story 1.2)
 * ---------------------------------------------------------------------------
 * Ready-to-use wordmark + jug sizing helpers. These CONSUME the tokens in
 * brand/tokens.css and never redefine a brand value. Optional convenience —
 * a page may instead apply the tokens directly. Load AFTER tokens.css:
 *
 *     <link rel="stylesheet" href="/brand/tokens.css">
 *     <link rel="stylesheet" href="/brand/brand.css">
 *
 * Zero build, no imports. Size budget: <= 3 KB.
 * ===========================================================================*/

/* --- WORDMARK -------------------------------------------------------------
 * Pure text + style (no image). Markup:
 *
 *     <span class="bn-wordmark">borg<b>names</b>.com</span>      // small
 *     <span class="bn-wordmark bn-wordmark--lg">borg<b>names</b>.com</span>  // large
 *
 * "names" is set in the lime primary; the rest is body text. Scales from a
 * header/footer size up to a result-screen banner via the --lg modifier.
 */
.bn-wordmark {
  font-family: var(--bn-font-display);
  font-weight: var(--bn-fw-black);
  font-size: var(--bn-text-xl);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bn-text);
  white-space: nowrap;
  text-decoration: none;
}
.bn-wordmark b,
.bn-wordmark .bn-wordmark__pop {
  color: var(--bn-primary);
  font-weight: inherit;
}
.bn-wordmark--lg {
  /* Slightly smaller than the result-name display so the full domain fits on
     one line at 390px without clipping. */
  font-size: clamp(2rem, 0.6rem + 6vw, 4rem);
  letter-spacing: var(--bn-display-tracking);
}

/* --- DISPLAY NAME (the loud result treatment) ---------------------------- */
.bn-name {
  font-family: var(--bn-font-display);
  font-weight: var(--bn-display-weight);
  font-size: var(--bn-display);
  line-height: var(--bn-display-leading);
  letter-spacing: var(--bn-display-tracking);
  color: var(--bn-loud);
  text-wrap: balance;
}
.bn-name--hero { font-size: var(--bn-display-hero); }

/* --- JUG SIZING ----------------------------------------------------------- */
.bn-jug        { display: inline-block; color: var(--bn-primary); }
.bn-jug--inline { width: 1.1em; height: 1.32em; vertical-align: -0.25em; }
.bn-jug--hero   { width: clamp(140px, 46vw, 280px); height: auto; }