/* Shared main-menu shell for the project library and About page. */
body.experience-page.hub-home {
  --bg: #050714;
  --bg-alt: #090b1b;
  --panel: rgba(7, 9, 22, 0.74);
  --panel-strong: rgba(9, 11, 27, 0.94);
  --text: #f4f6ff;
  --muted: rgba(226, 231, 250, 0.66);
  --soft: rgba(223, 230, 255, 0.52);
  background:
    radial-gradient(ellipse at 80% 8%, rgba(154, 124, 255, 0.12), transparent 36%),
    radial-gradient(ellipse at 12% 28%, rgba(120, 214, 255, 0.05), transparent 40%),
    #050714;
}

body.experience-page.hub-home::before { opacity: 0.3; }
body.experience-page.hub-home .section[id] { scroll-margin-top: 24px; }

body.experience-page.hub-home .shell { width: min(1320px, calc(100% - clamp(40px, 8.8vw, 144px))); }
body.experience-page.hub-home .site-header {
  background: rgba(5, 7, 20, 0.88);
  border-bottom-color: rgba(218, 226, 255, 0.1);
  box-shadow: none;
}
body.experience-page.hub-home .site-header .shell { min-height: 88px; padding-block: 18px; }
body.experience-page.hub-home .site-header::after { content: none; }
body.experience-page.hub-home .brand-mark {
  width: 42px;
  height: 42px;
  color: var(--xp-accent);
  background: transparent;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--xp-accent) 11%, transparent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
body.experience-page.hub-home .brand-copy strong { font-size: 0.84rem; letter-spacing: 0.13em; }
body.experience-page.hub-home .brand-copy span { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
body.experience-page.hub-home .top-nav { gap: clamp(20px, 3vw, 44px); }
body.experience-page.hub-home :is(.top-nav, .sub-nav) a {
  padding: 9px 2px;
  border-color: transparent;
  background: transparent;
  clip-path: none;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}
body.experience-page.hub-home :is(.top-nav, .sub-nav) a::after { left: 0; right: 0; }
body.experience-page.hub-home :is(.top-nav, .sub-nav) a:focus-visible { outline: 1px solid var(--xp-accent); outline-offset: 5px; }

@media (min-width: 901px) {
  body.experience-page.hub-home .site-header .shell { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; }
  body.experience-page.hub-home .brand { justify-self: start; }
  body.experience-page.hub-home .top-nav { grid-column: 2; }
}
@media (max-width: 580px) {
  body.experience-page.hub-home .section[id] { scroll-margin-top: 60px; }
  body.experience-page.hub-home .site-header .shell { align-items: flex-start; gap: 18px; }
  body.experience-page.hub-home .top-nav { width: 100%; justify-content: space-between; }
}