/* floating glass nav. --gp (0..1) is set by nav-glass.js from first scroll to the top of the H1. */
:root{--gp:0;--glass-hi:rgba(255,255,255,.55);--glass-lo:rgba(255,255,255,.12);--ring:rgba(255,255,255,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass-hi:rgba(255,255,255,.12);--glass-lo:rgba(255,255,255,.03);--ring:rgba(255,255,255,.16)}}
:root[data-theme="dark"]{--glass-hi:rgba(255,255,255,.12);--glass-lo:rgba(255,255,255,.03);--ring:rgba(255,255,255,.16)}
.bar,.bar.solid,.bar.solid.dk{position:fixed !important;top:0;left:0;right:0;animation:none !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.bar .wrap{position:relative;z-index:1}
.bar .wrap::before,.bar .wrap::after{content:"";position:absolute;top:10px;bottom:10px;left:max(6px,calc(var(--gutter) - 28px));right:max(6px,calc(var(--gutter) - 28px));border-radius:999px;pointer-events:none;z-index:-1}
.bar .wrap::before{background:color-mix(in srgb,var(--surface) calc(var(--gp)*52%),transparent);-webkit-backdrop-filter:blur(calc(var(--gp)*20px)) saturate(calc(100% + var(--gp)*80%));backdrop-filter:blur(calc(var(--gp)*20px)) saturate(calc(100% + var(--gp)*80%));box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) calc(var(--gp)*7%),transparent),0 14px 34px -14px color-mix(in srgb,#000 calc(var(--gp)*34%),transparent)}
.bar .wrap::after{opacity:var(--gp);border:1px solid var(--ring);box-shadow:inset 0 1px 0 var(--glass-hi);background:linear-gradient(180deg,var(--glass-lo),transparent 65%)}
.bar.open .wrap::before,.bar.open .wrap::after{display:none}
/* pages that start over the sky photo: text, logo and button ease from cream to ink as the glass forms */
html[data-nav="sky"] .bar:not(.open){background:transparent !important;color:#fcf9f2 !important;transition:color 360ms cubic-bezier(.22,.61,.36,1) !important}
html[data-nav="sky"][data-tone="ink"] .bar:not(.open){color:var(--ink) !important}
html[data-nav="sky"] .bar.open{background:var(--surface) !important;color:var(--ink) !important}
html[data-nav="sky"] .bar:not(.open) .logo .on-sky{animation:none !important;opacity:1 !important;transition:opacity 0s !important}
html[data-nav="sky"][data-tone="ink"] .bar:not(.open) .logo .on-sky{opacity:0 !important;transition:opacity 0s linear 360ms !important}
html[data-nav="sky"] .bar:not(.open) .logo .on-light{animation:none !important;opacity:0 !important;transition:opacity 360ms cubic-bezier(.22,.61,.36,1) !important}
html[data-nav="sky"][data-tone="ink"] .bar:not(.open) .logo .on-light{opacity:1 !important}
html[data-nav="sky"] .bar:not(.open) .btn{animation:none !important;background:#fcf9f2 !important;color:#212020 !important;transition:background-color 360ms cubic-bezier(.22,.61,.36,1),color 360ms cubic-bezier(.22,.61,.36,1),transform 675ms var(--ease-soft),box-shadow 1050ms var(--ease-soft) !important}
html[data-nav="sky"][data-tone="ink"] .bar:not(.open) .btn{background:var(--ink) !important;color:var(--surface) !important}
@media (prefers-reduced-motion:reduce){html[data-nav="sky"] .bar:not(.open),html[data-nav="sky"] .bar:not(.open) .logo img,html[data-nav="sky"] .bar:not(.open) .btn{transition:none !important}}
/* paper pages: the full-width paper bar melts away as the pill forms */
html[data-nav="paper"] .bar:not(.open){background:color-mix(in srgb,var(--paper) calc((1 - var(--gp))*100%),transparent) !important}
/* home: the old full-width band and the links-after-hero rule give way to the pill */
.bar::before,.bar::after{display:none !important}
html[data-nav="sky"] .bar:not(.open) nav a.lk{opacity:calc(clamp(0,(var(--gp) - .12)/.18,1)*.86) !important;visibility:visible !important;transition:none !important}