/* ============================================================
   VERITIDE BRAND MARK — site-wide
   Linked immediately before </head> on every page so it wins
   the cascade against each page's inline <style> block.

   Markup contract:
     <span class="vbrand vbrand--light|--dark" style="--vmark-h:30px">
       <span class="vbrand-mk">
         <img class="vmark" src="...">   three <i class="vpl">
       </span>
       <span class="vbrand-tx"> b.vgold-text + span.vsub </span>
     </span>

   Two artwork files, not one: the glow version assumes darkness
   behind it and turns to a smudge on ivory, so light surfaces get
   the flat gold-on-white render instead.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap');

@keyframes vt-sweep{
  0%{background-position:220% 0}
  100%{background-position:-120% 0}
}

/* pulses travel out along the three bars to their end circles.
   --x0/--x1 are set per dot in the markup, measured from the artwork. */
@keyframes vt-pulse{
  0%{left:var(--x0);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{left:var(--x1);opacity:0}
}

.vbrand{display:flex;align-items:center;gap:11px;line-height:1;text-decoration:none}
.vbrand-mk{position:relative;display:inline-block;line-height:0;flex:none}
.vbrand-tx{display:block;line-height:1.05}

/* height-driven so the mark optically matches the wordmark;
   width follows the aspect ratio. Override with --vmark-h. */
.vbrand .vmark{display:block;height:var(--vmark-h,30px);width:auto;flex:none}
.vbrand[style*="flex-direction:column"] .vmark{height:var(--vmark-h,62px)}

.vpl{
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  transform:translate(-50%,-50%);
  animation:vt-pulse 2.6s ease-in-out infinite;
  pointer-events:none;
}
.vbrand[style*="flex-direction:column"] .vpl{width:6px;height:6px}

/* both the wordmark and HEALTH carry the shimmer */
.vgold-text,
.vsub{
  display:block;
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-weight:500;
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:vt-sweep 4s linear infinite;
}
.vgold-text{text-transform:none}
.vsub{font-size:9px;letter-spacing:4.2px;margin-top:3px;animation-delay:.35s}

/* --- ivory / light backgrounds ---------------------------------
   Sampled from the gold-on-white artwork. Highlight capped at
   #E8C88E: anything brighter sits within ~1.3:1 of the ivory header
   and the wordmark disappears for part of every sweep. No light
   text-shadow — with -webkit-text-fill-color transparent it renders
   through the glyph and tints the letters. */
.vbrand--light .vgold-text,
.vbrand--light .vsub{
  color:#A8842F;
  background-image:linear-gradient(100deg,#A76B15 16%,#C69A4A 34%,#E8C88E 48%,#C69A4A 62%,#A76B15 84%);
}
.vbrand--light .vpl{background:#E8C88E;box-shadow:0 0 5px 2px rgba(232,200,142,.8)}

/* --- charcoal / dark backgrounds -------------------------------
   Sampled from the glow artwork's highlight range so the wordmark
   reads as the same metal as the mark beside it. */
.vbrand--dark .vgold-text,
.vbrand--dark .vsub{
  color:#FDE97E;
  background-image:linear-gradient(100deg,#F6BE42 14%,#FDE97E 32%,#FEFAC1 48%,#FDE97E 64%,#F6BE42 86%);
}
.vbrand--dark .vgold-text{text-shadow:0 1px 2px rgba(0,0,0,.5)}
.vbrand--dark .vpl{background:#FEFAC1;box-shadow:0 0 6px 3px rgba(253,233,126,.95)}

@media (prefers-reduced-motion:reduce){
  .vgold-text,.vsub{animation:none;background-position:50% 0}
  .vpl{animation:none;left:var(--x1);opacity:.9}
}

/* belt and braces: an earlier PNG-based swap painted a second mark
   through these pseudo-elements. Rules are removed from responsive.css
   and gold-theme.css, but this kills any copy that resurfaces. */
.brand::before,.brand::after,
.rail-brand::before,.rail-brand::after,
.mark::before,.mark::after{content:none !important;background-image:none !important}