.brand{position:relative;gap:14px;padding:6px 12px 6px 7px;border-radius:18px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);transition:transform .28s,background .28s,box-shadow .28s}
.brand:hover{transform:translateY(-3px) rotate(-1deg);background:rgba(255,255,255,.3);box-shadow:0 10px 30px rgba(7,26,53,.14)}
.brand span{position:relative;width:48px;height:48px;font:700 14px var(--mono);letter-spacing:-.08em;background:linear-gradient(135deg,#f8df84 0 48%,#a995e8 48%);border:2px solid var(--navy);border-radius:15px;box-shadow:4px 4px 0 var(--navy);overflow:hidden}
.brand span:after{content:"";position:absolute;inset:-60% -20%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);transform:translateX(-100%);animation:brand-shine 5s ease-in-out infinite}
.brand b{font-size:17px;letter-spacing:-.025em;white-space:nowrap}
.site-header.scrolled .brand{background:rgba(255,255,255,.7)}
.youtube-card{background:linear-gradient(135deg,#fff0ed,#f6b8b1)}
@keyframes brand-shine{0%,65%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
@media(max-width:640px){.brand{padding-right:7px}.brand span{width:44px;height:44px}.brand b{display:none}}
@media(prefers-reduced-motion:reduce){.brand span:after{animation:none}}

/* MP identity mark */
.brand span {
  overflow: visible;
  background: var(--navy);
  border-radius: 50%;
  color: transparent;
  box-shadow: 4px 4px 0 #a995e8;
}

.brand span::before {
  content: "MP";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: 750 14px var(--mono);
  letter-spacing: -.09em;
}

.brand span::after {
  content: "✦";
  position: absolute;
  inset: auto;
  right: -9px;
  top: -11px;
  width: auto;
  height: auto;
  color: #f5c94f;
  background: none;
  font-size: 16px;
  line-height: 1;
  text-shadow: -34px 34px 0 #a995e8, 1px 40px 0 #f5b4ab;
  transform: none;
  animation: mp-sparks 2.5s ease-in-out infinite;
}

@keyframes mp-sparks {
  0%, 100% { transform: rotate(-10deg) scale(.8); opacity: .65; }
  50% { transform: rotate(12deg) scale(1.25); opacity: 1; }
}

/* Hand-drawn dual-passport vignette */
.about-page .page-hero h1,
.about-page .page-hero .page-lede { max-width: 58%; }

.passport-pair {
  position: absolute;
  z-index: 2;
  right: 6vw;
  bottom: 11%;
  width: 330px;
  height: 245px;
}

.passport {
  position: absolute;
  box-sizing: border-box;
  width: 148px;
  height: 198px;
  padding: 17px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--navy);
  border-radius: 8px 11px 9px 6px;
  color: #f8df84;
  text-align: center;
  box-shadow: 7px 9px 0 rgba(7, 26, 53, .15);
  background-image: repeating-linear-gradient(102deg, transparent 0 12px, rgba(255,255,255,.035) 13px 14px);
}

.passport::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(248, 223, 132, .45);
  border-radius: 5px;
}

.passport span,
.passport small {
  position: relative;
  z-index: 1;
  font: 600 7px/1.35 var(--mono);
  letter-spacing: .08em;
}

.passport b {
  font: 400 25px/1.25 serif;
  text-shadow: 0 1px rgba(255,255,255,.25);
}

.passport i {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 6px;
  font-style: normal;
  font-size: 15px;
}

.italy-passport {
  left: 20px;
  top: 10px;
  background-color: #84233a;
  transform: rotate(-8deg);
}

.macedonia-passport {
  right: 18px;
  top: 30px;
  background-color: #a02532;
  transform: rotate(7deg);
}

.passport-pair > p {
  position: absolute;
  right: 3px;
  bottom: 0;
  margin: 0;
  font: 600 21px "Caveat", cursive;
  transform: rotate(-3deg);
}

.passport-pair > p::before { content: "↖ "; }

@media (max-width: 900px) {
  .about-page .page-hero h1,
  .about-page .page-hero .page-lede { max-width: 52%; }
  .passport-pair { right: 2vw; transform: scale(.84); transform-origin: right center; }
}

@media (max-width: 640px) {
  .about-page .page-hero h1,
  .about-page .page-hero .page-lede { max-width: none; }
  .passport-pair {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 25px auto -30px;
    transform: scale(.78);
    transform-origin: top center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand span::after { animation: none; }
}

/* Brighter, less corporate MP signature */
.brand span{
  background:conic-gradient(from 210deg,#f6c84f,#f39a9f,#a995e8,#79cbb8,#74bde1,#f6c84f);
  border:2px solid rgba(255,255,255,.9);
  border-radius:17px 50% 42% 50%;
  box-shadow:3px 4px 0 #725fb4,0 0 0 2px rgba(7,26,53,.12);
  transform:rotate(-4deg);
}
.brand span::before{color:#283458;text-shadow:0 1px rgba(255,255,255,.7);font-size:15px}
.brand:hover span{animation:mp-wiggle .55s ease}
@keyframes mp-wiggle{30%{transform:rotate(5deg) scale(1.08)}70%{transform:rotate(-7deg) scale(1.03)}}

/* More passport-like proportions, embossing and placement */
.passport-pair{top:7%;bottom:auto;height:270px}
.passport{
  width:145px;height:202px;padding:18px 12px 15px;
  border:1px solid rgba(48,11,22,.75);
  border-radius:5px 9px 7px 4px;
  color:#d9bd66;
  box-shadow:7px 9px 0 rgba(7,26,53,.13),inset 0 0 28px rgba(30,2,10,.25);
  background-image:repeating-linear-gradient(112deg,transparent 0 8px,rgba(255,255,255,.025) 9px 10px);
}
.passport::before{
  content:"★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★";
  position:absolute;left:18px;right:18px;top:51px;
  font:500 5px/1 var(--mono);letter-spacing:3px;color:rgba(226,199,107,.72)
}
.passport::after{inset:8px;border-color:rgba(226,199,107,.35)}
.passport span{max-width:112px;font-size:6.5px;line-height:1.25}
.passport b{font-size:29px;line-height:1.12;margin-top:12px;color:#e0c268}
.passport small{font-size:7px;letter-spacing:.13em}
.passport i{right:10px;bottom:8px;font-size:13px;filter:saturate(.75)}
.italy-passport{left:15px;top:0;background-color:#6f1830;transform:rotate(-7deg)}
.macedonia-passport{right:12px;top:13px;background-color:#941e2c;transform:rotate(6deg)}
.passport-pair>p{right:14px;bottom:0;white-space:nowrap}
@media(max-width:900px){.passport-pair{top:5%}}
@media(max-width:640px){.passport-pair{top:auto;margin-top:12px;margin-bottom:-35px;height:275px}.passport-pair>p{bottom:0}}

/* Rocket home mark */
.brand {
  gap: 0;
  padding: 10px 15px;
  border: 1px solid rgba(7, 26, 53, .09);
  border-radius: 999px;
}

.brand span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  overflow: visible;
  color: transparent;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.brand span::before {
  content: "⌂";
  position: static;
  display: block;
  color: currentColor;
  background: none;
  font: 700 24px/1 var(--sans);
  text-shadow: none;
  transform: none;
  filter: none;
}

.brand span::after { display: none; }
.brand:hover span { animation: home-icon-lift .38s ease; }

@keyframes home-icon-lift {
  45% { transform: translateY(-3px) scale(1.08); }
}

.brand span {
  width: 50px;
  height: 50px;
  overflow: visible;
  color: transparent;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(7, 26, 53, .13);
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(7, 26, 53, .1);
  transform: none;
}

.brand span::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: url("https://em-content.zobj.net/source/noto-emoji-animations/344/rocket_1f680.gif") center / contain no-repeat;
  transform: scale(1.08);
  filter: drop-shadow(1px 3px 1px rgba(7, 26, 53, .2));
}

.brand span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -19px;
  width: 18px;
  height: 32px;
  background:
    radial-gradient(ellipse at 50% 5%, #fff7b2 0 16%, #ffd43b 17% 38%, #ff6a36 42% 65%, transparent 69%),
    linear-gradient(to bottom, #ffef74, #ff7b36 55%, transparent);
  border-radius: 50% 50% 65% 65%;
  opacity: 0;
  transform: translateX(-50%) scaleY(.25);
  transform-origin: top;
  animation: none;
  filter: drop-shadow(0 7px 7px rgba(255, 92, 34, .75));
}

.brand b {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.035em;
}

.brand:hover span { animation: rocket-idle .55s ease; }
.brand.is-launching { pointer-events: none; }
.brand.is-launching { filter: drop-shadow(0 0 8px rgba(255, 145, 45, .25)); }
.brand.is-launching span { animation: rocket-ignite .16s ease-in-out 3, rocket-launch .78s .42s cubic-bezier(.42, 0, .9, .45) forwards; }
.brand.is-launching span::before { animation: rocket-thrust .1s ease-in-out infinite alternate; }
.brand.is-launching span::after { opacity: 1; animation: rocket-flame .085s ease-in-out infinite alternate; }

@keyframes rocket-idle {
  40% { transform: translate(2px, -2px) rotate(4deg); }
  70% { transform: translate(-1px, 1px) rotate(-2deg); }
}

@keyframes rocket-launch {
  0% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(0, -5px) rotate(-2deg) scale(1.05); }
  100% { transform: translate(115px, -145px) rotate(9deg) scale(.38); opacity: 0; }
}

@keyframes rocket-ignite {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-2px, 1px) rotate(-2deg); }
  75% { transform: translate(2px, -1px) rotate(2deg); }
}

@keyframes rocket-thrust {
  from { transform: translate(0, 0) scale(1.08); }
  to { transform: translate(1px, -2px) scale(1.13); filter: drop-shadow(0 0 8px rgba(255, 120, 35, .72)); }
}

@keyframes rocket-flame {
  from { transform: translateX(-50%) scale(.82, .7); opacity: .78; }
  to { transform: translateX(-50%) scale(1.12, 1.45); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .brand:hover span,
  .brand.is-launching span,
  .brand.is-launching span::after { animation: none; }
}

@media (max-width: 640px) {
  .brand b { display: block; font-size: 15px; }
}

/* Final compact home icon */
.brand span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.brand span::before {
  content: "⌂";
  position: static;
  display: block;
  color: currentColor;
  background: none;
  font: 700 24px/1 var(--sans);
  text-shadow: none;
  transform: none;
  filter: none;
}
.brand span::after { display: none; }

/* More prominent primary navigation */
.site-header,
.site-header.scrolled {
  padding-top: 20px;
  padding-bottom: 20px;
  transition: background-color .3s, backdrop-filter .3s, border-color .3s;
}
.command-nav,
.site-header.scrolled .command-nav {
  flex-shrink: 0;
  box-sizing: border-box;
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  gap: 27px;
  padding: 4px 12px;
  font-size: 14px;
}
.command-nav a,
.site-header.scrolled .command-nav a {
  padding: 11px 1px;
  font-size: inherit;
  line-height: 1;
  font-weight: 650;
}
.nav-prompt { font-size: 11px; }

.brand b { color: #d9ad37; }
.brand span::before { color: #d9ad37; }

@media (min-width: 1001px) {
  .command-nav { translate: 0 -4px; }
}

@media (max-width: 1100px) {
  .command-nav { gap: 17px; font-size: 12.5px; }
}

@media (max-width: 1000px) {
  .command-nav,
  .site-header.scrolled .command-nav {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}