/* Webovation mega menu: brand-constant across every page theme */
.mm{
  --mm-bg:rgba(10,14,30,.93); --mm-panel:#0A0E1E; --mm-card:#121833; --mm-line:rgba(255,255,255,.09);
  --mm-ink:#EEF0FF; --mm-ink2:#9AA3C7; --mm-accent:#6F7DFF; --mm-accent2:#B6BEFF; --mm-accent-ink:#0A0E1E;
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 12px); left:0; right:0; z-index:60;
  padding-inline:clamp(12px,3vw,40px); pointer-events:none;
  font-family:"Figtree","Onest",system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--mm-ink);
}
.mm *{box-sizing:border-box}
.mm-bar{pointer-events:auto; max-width:1180px; margin:0 auto; height:58px; display:flex; align-items:center; gap:10px;
  padding:0 8px 0 18px; border-radius:999px; background:var(--mm-bg); border:1px solid var(--mm-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 12px 40px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.mm-logo{display:flex; align-items:center; gap:11px; color:var(--mm-ink); text-decoration:none; font:700 18px/1 "Bricolage Grotesque","Figtree",system-ui,sans-serif; letter-spacing:-.025em; margin-right:auto; perspective:320px}
.mm-name{white-space:nowrap; color:#fff; font-family:"Chakra Petch","Figtree",system-ui,sans-serif; font-weight:700; font-size:25px; letter-spacing:0}

/* the WO monogram, cut from the glass artwork: see through, not white */
.wo{flex:none; width:76px; height:41px; margin-block:-3px;
  background:url("/assets/wo-mark.0927adcd.webp") center/contain no-repeat;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), filter .35s;
  filter:drop-shadow(0 1px 6px rgba(150,180,255,.20))}
.mm-logo:hover .wo{transform:translateY(-1px) scale(1.04); filter:drop-shadow(0 2px 10px rgba(170,200,255,.34))}
.mm-nav{display:flex; gap:2px}
.mm-trig{appearance:none; border:0; background:transparent; color:var(--mm-ink2); font-family:inherit; font-weight:500; font-size:15px; line-height:1;
  padding:12px 14px; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:color .2s, background .2s}
.mm-trig i{width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .3s cubic-bezier(.2,.7,.1,1)}
.mm-trig:hover,.mm-trig[aria-expanded="true"]{color:var(--mm-ink); background:rgba(255,255,255,.07)}
.mm-trig[aria-expanded="true"] i{transform:translateY(1px) rotate(225deg)}
.mm-plain{color:var(--mm-ink2); text-decoration:none; font-family:inherit; font-weight:500; font-size:15px; line-height:1; padding:12px 14px; border-radius:999px; transition:color .2s, background .2s}
.mm-plain:hover,.mm-plain[aria-current="page"]{color:var(--mm-ink); background:rgba(255,255,255,.07)}
.mm-all{display:inline-block; margin:2px 0 4px 12px; font-size:13px; font-weight:600; color:var(--mm-accent2); text-decoration:none}
.mm-all:hover{text-decoration:underline}
.mm-person{display:flex; align-items:center; gap:12px; margin-top:6px; border-top:1px solid var(--mm-line); border-radius:0 0 12px 12px}
.mm-person img{width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px var(--mm-accent)}
.mm-cta{margin-left:8px; background:var(--mm-accent); color:var(--mm-accent-ink); text-decoration:none; font-family:inherit; font-weight:600; font-size:14px; line-height:1;
  padding:13px 18px; border-radius:999px; white-space:nowrap; transition:background .2s, transform .3s}
.mm-cta:hover{background:var(--mm-accent2)}
.mm-cta:active{transform:scale(.97)}
.mm-burger{display:none; appearance:none; border:0; background:rgba(255,255,255,.07); color:var(--mm-ink); border-radius:999px; height:42px; padding:0 14px; cursor:pointer; align-items:center; gap:8px; font-family:inherit; font-weight:600; font-size:14px; position:relative}
.mm-burger span{display:block; width:14px; height:1.5px; background:currentColor; position:absolute; left:14px; transition:transform .3s}
.mm-burger span:first-child{top:17px} .mm-burger span:nth-child(2){top:24px}
.mm-burger b{font-weight:600; padding-left:22px}
.mm-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mm-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.mm :focus-visible{outline:2px solid var(--mm-accent2); outline-offset:2px}

/* panel */
.mm-panel{pointer-events:auto; max-width:1180px; margin:10px auto 0; perspective:1400px}
.mm-inner{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0; background:var(--mm-panel); border:1px solid var(--mm-line); border-radius:24px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7); transform-origin:50% 0; animation:mm-in .5s cubic-bezier(.2,.7,.1,1) both}
@keyframes mm-in{from{transform:rotateX(-14deg) translateY(-10px) scale(.98)}to{transform:none}}
.mm-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:22px}
.mm-col{padding:8px; border-radius:16px; transition:opacity .3s}
.mm-cols.has-focus .mm-col:not(.is-focus){opacity:.55}
.mm-cols.has-focus .mm-col:hover{opacity:1}
.mm-col .mm-h{margin:4px 10px 12px; font:500 11px/1 "JetBrains Mono",ui-monospace,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--mm-ink2)}
.mm-city{display:grid; grid-template-columns:78px 1fr; align-items:start; gap:0 6px; padding:6px 0; border-top:1px solid var(--mm-line)}
.mm-city:first-of-type{border-top:0}
.mm-city .mm-ch{margin:0; padding:11px 0 0 10px; font-family:inherit; font-weight:600; font-size:13px; line-height:1; color:var(--mm-ink2)}
.mm-city .mm-link{grid-column:2}
.mm-link{display:block; position:relative; padding:12px 12px; border-radius:12px; color:var(--mm-ink); text-decoration:none;
  transform-style:preserve-3d; transition:background .25s, transform .35s cubic-bezier(.2,.7,.1,1), box-shadow .3s; will-change:transform}
.mm-link.mm-sm{padding:9px 12px}
.mm-link:hover,.mm-link:focus-visible,.mm-link.is-live{background:var(--mm-card); box-shadow:0 14px 30px -18px rgba(0,0,0,.8), inset 0 0 0 1px rgba(111,125,255,.25)}
.mm-t{display:block; font-family:inherit; font-weight:600; font-size:15px; line-height:1.3; font-family:inherit}
.mm-d{display:block; font-size:13px; line-height:1.4; color:var(--mm-ink2); margin-top:3px}
.mm-link[aria-current="page"] .mm-t::after{content:""; display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%; background:var(--mm-accent); box-shadow:0 0 0 3px rgba(111,125,255,.25); vertical-align:2px}
.mm-link::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px; background:var(--mm-accent); transform:scaleY(0); transition:transform .3s}
.mm-link:hover::before,.mm-link.is-live::before{transform:scaleY(1)}
.mm-audit{display:block; position:relative; margin-top:14px; padding:18px; border-radius:16px; text-decoration:none; color:var(--mm-accent-ink);
  background:linear-gradient(135deg,var(--mm-accent2),var(--mm-accent)); transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.mm-audit .mm-d{color:rgba(10,14,30,.75)}
.mm-audit .mm-go{position:absolute; right:16px; top:14px; font-size:20px; transition:transform .3s}
.mm-audit:hover .mm-go{transform:translateX(4px)}

/* 3D stage */
.mm-stage{position:relative; background:radial-gradient(120% 90% at 50% 40%,#18204A 0%,#0A0E1E 70%); border-left:1px solid var(--mm-line); min-height:360px}
.mm-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab}
.mm-canvas:active{cursor:grabbing}
.mm-cap{position:absolute; left:20px; right:20px; bottom:18px; pointer-events:none}
.mm-cap b{display:block; font:700 18px/1.2 "Bricolage Grotesque","Figtree",sans-serif; letter-spacing:-.01em}
.mm-cap span{display:block; font:400 12px/1.5 "JetBrains Mono",ui-monospace,monospace; color:var(--mm-ink2); margin-top:4px}
.mm-scrim{position:fixed; inset:0; z-index:55; background:rgba(5,8,18,.35); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}

@media (max-width:980px){
  .mm-inner{grid-template-columns:1fr}
  .mm-stage{min-height:200px; border-left:0; border-bottom:1px solid var(--mm-line); order:-1}
}
@media (max-width:860px){
  .mm-nav{display:none}
  .mm-burger{display:flex}
  .mm-cta{padding:12px 14px; font-size:13px}
  .mm-panel{max-height:calc(100svh - 90px); overflow:auto; border-radius:24px}
  .mm-cols{grid-template-columns:1fr; padding:12px}
  .mm-cols.has-focus .mm-col:not(.is-focus){opacity:1}
  .mm-stage{min-height:170px}
}
@media (max-width:620px){
  .mm-name{display:none}
}
@media (max-width:420px){
  .mm-city{grid-template-columns:1fr}
  .mm-city .mm-link{grid-column:1}
  .mm-city .mm-ch{padding:6px 0 4px 12px}
}
@media (prefers-reduced-motion:reduce){
  .mm-inner{animation:none}
  .mm-link,.mm-audit{transition:none}
}

/* shared footer links */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;width:100%;order:-1;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 18%,transparent)}
.foot-links a{color:inherit;text-decoration:none;opacity:.85}
.foot-links a:hover{opacity:1;text-decoration:underline}

/* on phones, calm full-screen 3D scenes so copy stays readable */
@media (max-width:900px){#world:not([data-inline]){opacity:.5}}

/* pinned 3D labels stay hidden until their scene positions them */
#rankTag,#pin,#cityTag,.town,#boatTag,#hubTag,#searchTag,.layer-tag,.coin-tag,.tier-tag,.node-tag,#frame{opacity:0}

@media (prefers-reduced-motion:reduce){.mm-logo:hover .wo{transform:none}}

/* the article byline links to the author page */
a.author{color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:currentColor; opacity:.9; transition:opacity .2s}
a.author:hover{opacity:1}