/* =========================================================
   05-brand-header.css — BRAND HEADER COMPONENT
   Logo uses inline SVG so "AstroDev" renders with only
   A and D capitalised — font-variant tricks alone can't
   override Cinzel Decorative's all-caps design.
   Depends on: 01-tokens.css
   ========================================================= */

.brand-header {
  text-align: center;
  padding-top: var(--sp-12);
  margin-bottom: var(--sp-8);
}

.brand-header__eyebrow {
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  letter-spacing: 0.42em;
  color: var(--clr-gold-400);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

/* ── SVG Logo wrapper ──
   The actual "AstroDev" text is rendered as an inline SVG
   inside the HTML so we have full control over each glyph. */
.brand-header__logo-wrap {
  display: inline-block;
  filter: drop-shadow(0 0 28px rgba(200,137,10,.55));
  margin-bottom: var(--sp-1);
}

.brand-header__logo-svg {
  width: clamp(260px, 72vw, 560px);
  height: auto;
  overflow: visible;
}

.brand-header__tld {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-base), 2.5vw, 1.4rem);
  font-weight: 600;
  color: var(--clr-gold-400);
  letter-spacing: 0.22em;
  margin-top: 0;
}

/* Ornamental divider */
.brand-header__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: min(480px, 90%);
  margin: var(--sp-4) auto;
}
.brand-header__divider::before,
.brand-header__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-gold-600), transparent);
}
.brand-header__divider-star { color: var(--clr-gold-200); font-size: var(--fs-base); }

.brand-header__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  letter-spacing: 0.32em;
  color: var(--clr-muted);
  text-transform: uppercase;
}