/* The public landing page's gold mark and struck-metal wordmark. */
.brand-logo {
  display: flex; align-items: center; gap: 14px; width: 100%;
  container-type: inline-size; font-family: 'Oswald', sans-serif;
  text-decoration: none; position: relative;
}
.brand-logo .logo-mark {
  position: relative; width: clamp(42px, 16cqi, 54px); height: clamp(42px, 16cqi, 54px);
  flex: none; display: grid; place-items: center;
  filter: drop-shadow(0 0 10px rgba(244,197,66,.5));
  animation: brandLogoPulse 3.2s ease-in-out infinite;
}
.brand-logo .logo-mark svg { width: 96%; height: 96%; overflow: visible; display: block; }
.brand-logo .logo-mark::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(244,197,66,.20), transparent 70%);
}
.brand-logo .ark-glint { transform-box: fill-box; transform-origin: center; animation: brandArkGlint 5s ease-in-out infinite; }
.brand-logo .logo-word { display: flex; flex-direction: column; line-height: 1; }
.brand-logo .logo-word b {
  font-weight: 700; font-size: clamp(18px, 7.1cqi, 26px); letter-spacing: clamp(2px, .9cqi, 3.4px); text-transform: uppercase;
  background: linear-gradient(180deg, #fff8d8 0%, #ffe9a8 22%, #f4c542 48%, #c8890c 76%, #9a6a08 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #f4c542;
  filter: drop-shadow(0 -1px 0 rgba(255,250,220,.45)) drop-shadow(0 1.5px 0 rgba(90,58,4,.95)) drop-shadow(0 3px 1px rgba(0,0,0,.55)) drop-shadow(0 6px 12px rgba(0,0,0,.45));
  white-space: nowrap;
}
.brand-logo .logo-word i {
  font-style: normal; font-size: 11px; letter-spacing: clamp(6px, 2.2cqi, 8.5px);
  color: #8b93a1; text-transform: uppercase; margin-top: 6px;
}
.brand-logo:focus-visible { outline: 2px solid #ffdf91; outline-offset: 6px; border-radius: 4px; }
@keyframes brandLogoPulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(244,197,66,.45)); } 50% { filter: drop-shadow(0 0 18px rgba(244,197,66,.9)); } }
@keyframes brandArkGlint { 0%,70%,100% { transform: translateX(-30px) skewX(-18deg); opacity: 0; } 76% { opacity: .75; } 90% { transform: translateX(52px) skewX(-18deg); opacity: 0; } }
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .brand-logo .logo-word b { background: none; color: #f4c542; -webkit-text-fill-color: #f4c542; }
}
@media(prefers-reduced-motion:reduce) { .brand-logo .logo-mark, .brand-logo .ark-glint { animation: none; } }
