/* Myndzet brand: logo + wordmark colours that follow the page theme.
   The mark is inline SVG painted with these variables, so every theme gets a version
   tuned to its own background (deeper tones on light themes, bright neon on dark ones).
   Colours are drawn from each theme's own accent palette (sage, lavender, teal, mint) so the logo sits inside the site's look; contrast against each page colour was checked (mark parts about 3:1 or better). */
:root,html[data-theme="default"]{--mz-a:#3F8C7E;--mz-b:#6F82CF;--mz-c:#8466C8;--mz-d:#7A66C8;--mz-ray:#AE7F18;--mz-ink:#45424F}
html[data-theme="dark"]{--mz-a:#8FC7B0;--mz-b:#8CA0DA;--mz-c:#B49CE0;--mz-d:#9A8CD8;--mz-ray:#E8B85C;--mz-ink:#E0DAE8}
html[data-theme="space"]{--mz-a:#7EDCDC;--mz-b:#8FA8F0;--mz-c:#C29AF0;--mz-d:#9A92F0;--mz-ray:#EFC14E;--mz-ink:#E8E2FF}
html[data-theme="arcade"]{--mz-a:#5CF2C2;--mz-b:#7C9BFF;--mz-c:#B08CFF;--mz-d:#9B7BFF;--mz-ray:#FFD65C;--mz-ink:#F4F1FF}

.mz-lockup{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:var(--mz-ink);line-height:1}
.mz-mark{height:2.15em;width:auto;aspect-ratio:304/480;flex:none;display:block;overflow:visible}
.mz-word{font-family:"Lexend","Nunito",-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:.045em;text-transform:uppercase;font-size:1em;color:var(--mz-ink)}
.mz-word i{font-style:normal;color:var(--mz-c);background:linear-gradient(90deg,var(--mz-a),var(--mz-c));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (forced-colors:active){.mz-word i{-webkit-text-fill-color:currentColor;background:none}}

/* sizes */
.brand.mz-lockup,.nav-brand.mz-lockup{font-size:22px;gap:.5em}            /* header: mark ~47px tall */
@media (max-width:600px){.brand.mz-lockup,.nav-brand.mz-lockup{font-size:19px}}
.mz-lockup.mz-lg{font-size:22px}
.mz-lockup.mz-xl{font-size:36px;flex-direction:column;gap:.45em}
.mz-lockup.mz-xl .mz-mark{height:3.4em}
.mz-lockup.mz-xl .mz-word{font-size:.8em}

/* One small moment: the bulb "switches on" when a page loads (skipped for reduced motion) */
@keyframes mzSwitchOn{0%{filter:drop-shadow(0 0 0 transparent);opacity:.55}45%{opacity:1;filter:drop-shadow(0 0 9px var(--mz-ray))}100%{filter:drop-shadow(0 0 0 transparent);opacity:1}}
.mz-lockup .mz-mark{animation:mzSwitchOn 1.5s .25s ease-out both}
@media (prefers-reduced-motion:reduce){.mz-lockup .mz-mark{animation:none}}