/* ============================================================================
   SpectrumB Brand Kit V1.0 — logo layer
   Loaded after style.css so the lockup geometry wins over the older rules.

   Scope: brand tokens and the logo lockup only. Typography is deliberately NOT
   touched here — the site keeps its original system font stack, sizes and
   weights from style.css. Colours and page structure are likewise unchanged;
   the kit palette is added alongside the live theme as reference tokens.
   ========================================================================== */

:root {
  /* Kit palette — reference tokens. The live theme still runs on --ink /
     --coffee / --accent / --peach; only --brand-orange is shared (identical
     value), the rest are here for brand-correct surfaces and artwork plates. */
  --brand-orange: #E05A01;   /* Signal Orange — primary accent, CTAs   */
  --brand-sienna: #A0562E;   /* Sienna        — logo B, print          */
  --brand-bunker: #372B22;   /* Bunker Brown  — logo S, surfaces       */
  --brand-night:  #0E0D0B;   /* Night         — base background        */
  --brand-concrete:#BFBFBF;  /* Concrete      — neutral logo field     */
  --brand-bone:   #F2EFEA;   /* Bone          — text on dark           */

  /* Logo metrics. Clearspace is the height of the B bowl, which measures
     ~0.36 of the full mark height in the supplied artwork. */
  --brand-mark-h: 38px;
  --brand-clearspace: calc(var(--brand-mark-h) * 0.36);
}

/* --- Logo lockup -----------------------------------------------------------
   Horizontal lockup, per §01 of the kit: mark, then the wordmark artwork with
   a small tag beneath it. Both the mark and the wordmark are placed as supplied
   artwork — the kit forbids retyping either in a font. "Hub" is a product
   designation, not part of the wordmark, so it sits in the tag slot the kit
   reserves for taglines.                                                     */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-clearspace);
  padding: calc(var(--brand-clearspace) * 0.5) 0;
  text-decoration: none;
  color: var(--fg);
}

.brand-mark {
  display: block;
  flex: none;
  height: var(--brand-mark-h);
  width: auto;
  /* Kit rule: no outlines, drop shadows, glows or gradients on the mark. */
  filter: none;
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Wordmark minimum size is 20px — do not scale this below it. */
.brand-wordmark {
  display: block;
  flex: none;
  height: 20px;
  width: auto;
}

/* Tag sits in the kit's tactical-label style (uppercase, wide tracking) but
   uses the stack the rest of the site already uses for mono text — no webfont. */
.brand-tag {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Footer: stacked lockup, sized so the wordmark inside it clears the 20px
   minimum (the wordmark occupies ~0.2 of the artwork's height). */
.foot-lockup {
  display: block;
  height: 104px;
  width: auto;
  margin: 0 auto 18px;
}

/* Below 32px the orange B stops resolving, so the kit calls for the solid mono
   mark instead. The mark simply holds its minimum size and the tag drops away
   first. */
@media (max-width: 720px) {
  :root { --brand-mark-h: 32px; }
  .brand-tag { display: none; }
}