/* Original user-supplied SVG geometry, separated into three independently lit masks. */
.brand { gap: .65rem; }
/* Give the navigation mark more presence without increasing the header height. */
.site-header .brand { font-size: 1.475rem; gap: .8125rem; }
.site-header .brand-symbol { width: 2.5rem; height: 2.5rem; }
@media (max-width: 560px) { .site-header .brand { font-size: 1.25rem; gap: .625rem; }.site-header .brand-symbol { width: 2.1875rem; height: 2.1875rem; } }
.brand-symbol, .brand-coin, .brand-hearted { display: block; flex: none; background-repeat: no-repeat; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.brand-symbol { width: 2rem; height: 2rem; mask-image: url('../branding/heart.svg'); -webkit-mask-image: url('../branding/heart.svg'); }
.brand-wordmark { display: flex; align-items: center; gap: .12em; }
.brand-coin { width: 2.26em; height: .9em; mask-image: url('../branding/coin.svg'); -webkit-mask-image: url('../branding/coin.svg'); }
.brand-hearted { width: 4.08em; height: .9em; mask-image: url('../branding/hearted.svg'); -webkit-mask-image: url('../branding/hearted.svg'); }
.brand-symbol, .brand-hearted { background-image: linear-gradient(110deg, transparent 43%, #fff6d8cc 49%, #ffffffed 50%, #fff6d855 52%, transparent 58%), linear-gradient(180deg, #b47b20 0%, #d7a642 30%, #ffe4a0 55%, #c78f2b 78%, #e7bf65 100%); }
.brand-coin { background-image: linear-gradient(110deg, transparent 43%, #ffffffaa 49%, #ffffff 50%, #ffffff44 52%, transparent 58%), linear-gradient(180deg, #57616c 0%, #89949f 35%, #d2d9df 68%, #f3f6f8 100%); }
html[data-theme="light"] .brand-coin { background-image: linear-gradient(110deg, transparent 43%, #c8d1da88 49%, #e3e9eeaa 50%, #a5b1bc33 52%, transparent 58%), linear-gradient(180deg, #080c11 0%, #20272f 35%, #525f6a 67%, #151c24 100%); }
.brand-symbol, .brand-coin, .brand-hearted { background-size: 280% 100%, 100% 100%; background-position: 180% 0, 0 0; animation: brand-light 10s ease-in-out infinite; }
.brand-symbol { animation-delay: -3.5s; }
.brand-hearted { animation-delay: -.5s; }
@keyframes brand-light { 0%, 55% { background-position: 180% 0, 0 0; } 85%, 100% { background-position: -80% 0, 0 0; } }
html[data-motion="paused"] .brand-symbol, html[data-motion="paused"] .brand-coin, html[data-motion="paused"] .brand-hearted { animation-play-state: paused; }
@media (max-width: 560px) { .brand { gap: .5rem; }.brand-symbol { width: 1.75rem; height: 1.75rem; } }
@media (prefers-reduced-motion: reduce) { .brand-symbol, .brand-coin, .brand-hearted { animation: none; background-image: linear-gradient(180deg, #b47b20, #ffe4a0 55%, #c78f2b); }.brand-coin { background-image: linear-gradient(180deg, #57616c, #f3f6f8); }html[data-theme="light"] .brand-coin { background-image: linear-gradient(180deg, #080c11, #525f6a 67%, #151c24); } }
@media (forced-colors: active) { .brand-symbol, .brand-coin, .brand-hearted { background: LinkText; forced-color-adjust: none; animation: none; } }
/* Deeper gold keeps the same metal legible against light navigation surfaces. */
html[data-theme="light"] .brand-symbol, html[data-theme="light"] .brand-hearted { background-image: linear-gradient(110deg, transparent 43%, #fff0bd66 49%, #fff7d499 50%, #fff0bd33 52%, transparent 58%), linear-gradient(180deg, #845313 0%, #b78226 30%, #c89c45 55%, #996217 78%, #b8842c 100%); }
@media (prefers-reduced-motion: reduce) { html[data-theme="light"] .brand-symbol, html[data-theme="light"] .brand-hearted { background-image: linear-gradient(180deg, #845313, #c89c45 55%, #996217); } }
@media (forced-colors: active) { html[data-theme] .brand-symbol, html[data-theme] .brand-coin, html[data-theme] .brand-hearted { background: LinkText; } }
/* Static gradients must stay inside the mask when the sweep is disabled. */
@media (prefers-reduced-motion: reduce) { .brand-symbol, .brand-coin, .brand-hearted { background-position: 0 0; background-size: 100% 100%; } }