/*
 * Divinityx Publishing Company — Production Brand Identity Lock v1.2
 * Founder-approved source artwork only. This layer replaces generated DX/text
 * identity without changing catalog logic, copy, routing, typography, colors,
 * navigation, or the established page structure.
 */
.brand {
  gap: 0;
  min-width: 260px;
}

.brand .brand-mark,
.brand > span:not(.brand-mark) {
  display: none !important;
}

.brand::before {
  content: "";
  display: block;
  width: clamp(205px, 18vw, 260px);
  aspect-ratio: 607 / 155;
  background: url("../brand/divinityx-publishing-wordmark-gold.webp") left center / contain no-repeat;
}

.brand-footer {
  display: inline-flex;
  min-width: 0;
  margin-bottom: 20px;
}

/*
 * Footer identity lock: use the founder-approved vertical corporate crest so
 * DivinityxPublishing.com and VoiceToLegacy.org present the same institutional
 * footer branding. Header and homepage identity assets remain unchanged.
 */
.brand-footer::before {
  width: clamp(150px, 14vw, 190px);
  aspect-ratio: 1 / 1;
  background-image: url("../brand/android-chrome-512x512.png");
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

.hero-monogram {
  aspect-ratio: 1.28 / 1 !important;
  width: 100%;
  min-height: 330px;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(215, 169, 61, .16), transparent 70%),
    url("../brand/divinityx-publishing-crest-gold.webp") center / 94% auto no-repeat !important;
  box-shadow: inset 0 0 80px rgba(215, 169, 61, .08), var(--shadow);
}

.hero-monogram span,
.hero-monogram small {
  display: none !important;
}

.static-brand-header {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(2, 7, 17, .94);
}

.static-brand-footer {
  padding: 42px 0 28px;
  border-top: 1px solid var(--line);
  background: #01050c;
}

@media (max-width: 1180px) {
  .brand { min-width: 220px; }
  .brand::before { width: 220px; }
}

@media (max-width: 1020px) {
  .brand { min-width: 205px; }
  .brand::before { width: 205px; }
  .hero-monogram {
    max-width: 620px;
    min-height: 300px;
    margin: auto;
    background-size: 92% auto !important;
  }
}

@media (max-width: 620px) {
  .header-inner { min-height: 76px; }
  .brand { min-width: 174px; }
  .brand::before { width: 174px; }
  .brand-footer::before { width: min(178px, 58vw); }
  .hero-monogram {
    min-height: 235px;
    aspect-ratio: 1.22 / 1 !important;
    background-size: 96% auto !important;
  }
}