/* Shared styles for every page of msuipe.com.
   Page files keep their own layout rules in an inline <style>.
   A rule lives here only when it is identical on every page that uses it. */

:root {
  --almost-black: #161616;
  --white: #ffffff;
  --accent-orange: #ffc251;
  --accent-blue: #3543a4;
  --grain: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --font-display: 'Lexend Exa', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --accent-blue2: #7e8fff;
}

#page-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grain); opacity: 0.35; mix-blend-mode: multiply; }
.nav-dropdown { display: none; }

@media (max-width: 1080px) {
  .site-nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .site-nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .site-nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

.footer-breadcrumb { font-family: var(--font-body); font-size: 14px; line-height: 1; }
.footer-breadcrumb a { color: rgba(22, 22, 22, 0.5); text-decoration: none; transition: color 0.18s; }
.footer-breadcrumb a:hover { color: var(--almost-black); }
.footer-breadcrumb span { color: rgba(22, 22, 22, 0.5); }
.footer-links { font-family: var(--font-body); font-size: 14px; }