Two-tier invitation header with a monogram and music

One file, zero dependencies, “use client” for scroll, the counter, the scroll spy and music. A position:fixed <header> (placement=static puts it in the flow for previews); the [data-part=veil] backdrop with backdrop-filter appears on data-scrolled (scrollY>40, first read from rAF) and when the menu is open. A 1fr auto 1fr grid: the date with the day counter (setInterval once a minute, empty on the server), the monogram (split on “ & ”, the ampersand takes the accent), tools; sections are a second row with ::before dots. Folding without re-layout: the centre monogram is absolute in the row and fades (opacity), [data-part=brand-small] fades in on the left where the date fades out, the sections rise via transform:translateY with a negative margin-bottom — all transitions, hence smooth. The active section comes from an IntersectionObserver on the anchors (rootMargin -40 %/-55 %), aria-current and a scaleX underline. Music is <audio loop preload=none>, play() only on click (browsers block autoplay), aria-pressed, the four lines in the pill breathe via keyframes with staggered delays, the label switches to “Playing”. Below 56rem links and the button move into [data-part=sheet] behind the “Menu” button (aria-expanded). Palette --vibeui-navbar-025-* is neutral: ink and paper via light-dark(), the site colours come through the accent, ink and background props; dark theme via .dark/[data-theme] or tone. Cormorant Garamond and Manrope come via <link precedence> from Google Fonts with Georgia and system fallbacks. accent and background override colours, prefers-reduced-motion disables animations.