/* The active destination carries its heading inside the navigation. */
.site-header{grid-template-rows:26px 54px;padding-top:10px;padding-bottom:12px}
.site-nav{min-height:54px;align-items:center;gap:clamp(14px,1.8vw,28px)}
.site-nav .nav-destination{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;padding:0;border:0;white-space:nowrap;text-shadow:none;transition:color .3s}
.site-nav .nav-destination:hover,.site-nav .nav-destination[aria-current=page]{border:0}
.nav-overline{font-family:inherit;font-size:8px;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .25s}
.site-nav .nav-label{display:block;font-size:12px;line-height:1.05;font-weight:300;letter-spacing:.17em;text-transform:uppercase;transition:font-size .3s,letter-spacing .3s,color .3s}
.site-nav .nav-destination:is([aria-current=page],.nav-entering):not(.nav-leaving) .nav-label{font-family:Allura,cursive;font-size:42px;letter-spacing:0;text-transform:none;color:#eee1f5}
.site-nav .nav-destination:is([aria-current=page],.nav-entering):not(.nav-leaving) .nav-overline{max-height:15px;opacity:1}
.site-nav .nav-destination.nav-leaving .nav-label{font-family:inherit;font-size:12px;letter-spacing:.17em;text-transform:uppercase}
.site-nav .nav-destination:focus-visible{outline:2px solid #e1c7ee;outline-offset:5px;border-radius:10px}
.workshop .site-nav .nav-destination:is([aria-current=page],.nav-entering):not(.nav-leaving) .nav-label{color:#f1e3ce}
@media(min-width:721px) and (max-width:1050px){.site-header{grid-template-rows:42px 54px}.site-nav{grid-column:1/3;justify-self:center;width:100%}}
@media(max-width:720px){
 .site-header{grid-template-rows:auto 53px;gap:6px 5px;padding:12px 0}
 .site-nav:not(.open){display:flex;grid-column:1;grid-row:2;justify-self:start;width:auto;min-height:53px;padding:0}
 .site-nav:not(.open)>a:not([aria-current=page]){display:none}
 .site-nav .nav-destination{min-height:48px;align-items:flex-start;padding:0 3px}
 .site-nav .nav-destination[aria-current=page] .nav-label{font-size:36px}
 .site-nav .nav-overline{font-size:7px}
 .site-nav.open{grid-column:1/3;grid-row:3;gap:4px;padding:10px 0}
 .site-nav.open .nav-destination{align-items:center}
 .site-nav.open .nav-label{font-size:14px}
 .site-nav.open .demo-nav{text-align:center}
 .menu-toggle{align-self:center}
}
.motion-off .nav-label,.motion-off .nav-overline{transition:none}
@media(prefers-reduced-motion:reduce){.nav-label,.nav-overline{transition:none!important}}