/* Shared navigation stays available without changing the vault story's geometry. */
:root{--vault-header-height:92px;--vault-preview-height:0px;--vault-dock-clearance:116px}
html{scroll-padding-top:calc(var(--vault-header-height) + 20px);scroll-padding-bottom:var(--vault-dock-clearance)}
body .site-header,body.home-page .site-header{position:sticky;top:0;left:auto;right:auto;height:var(--vault-header-height);z-index:60;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transition:box-shadow .25s,border-color .25s}
body .site-header.is-scrolled{box-shadow:0 7px 30px #110b2229;border-bottom-color:#a18aba55}
body.home-page .site-header.is-scrolled{box-shadow:0 7px 30px #37205c12;border-bottom-color:#cfc0e7}
body.home-page .vault-story{margin-top:calc(-1 * (var(--vault-header-height) + var(--vault-preview-height)))}
body .article-aside{top:calc(var(--vault-header-height) + 24px)}
body .nav-links{max-height:calc(100dvh - var(--vault-header-height));overflow-y:auto;overscroll-behavior:contain}
body .application-dock{position:fixed;z-index:50;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);display:flex;align-items:center;gap:18px;padding:12px 14px 12px 18px;background:linear-gradient(120deg,#fcfafff5,#f0e9fcf5);border:1px solid #cabbe6;border-radius:18px;box-shadow:0 14px 50px #21123835,inset 0 1px 0 #fff;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);animation:dock-arrive .25s ease-out}
body .application-dock[hidden]{display:none}
.dock-symbol{display:grid;place-items:center;flex:0 0 36px;height:36px;border:1px solid #cbbbea;border-radius:11px;background:linear-gradient(145deg,#fff,#e1d4f7);color:#7347ba;font-size:22px;box-shadow:inset 0 1px #fff}
.dock-copy{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.dock-copy strong{font-size:14px;color:#322448;font-weight:600;white-space:nowrap}
.dock-copy>span{font-size:12px;color:#6e5f7d}
body .application-dock .button{flex:none;min-height:48px;gap:20px;padding:11px 20px;font-size:14px;border-radius:11px;white-space:normal;text-align:center}
body .key-toast{bottom:calc(var(--vault-dock-clearance) + env(safe-area-inset-bottom))}
@keyframes dock-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:960px){body .nav-links{top:100%}}
@media(max-width:760px){
 :root{--vault-header-height:76px;--vault-preview-height:0px;--vault-dock-clearance:104px}
 body .application-dock{bottom:max(12px,env(safe-area-inset-bottom));max-width:none;width:calc(100% - 24px);padding:11px;gap:10px;border-radius:15px}
 .dock-symbol{display:none}
 .dock-copy{flex:1}
 .dock-copy strong{font-size:12px;line-height:1.35;max-width:none}
 .dock-copy>span{display:none}
 body .application-dock .button{min-height:46px;padding:10px 11px;gap:0;font-size:13px;white-space:nowrap}
 body .application-dock .button>span{display:none}
 body .site-header .nav{gap:10px}
}
@media(max-width:370px){
 body .site-header .nav{width:calc(100% - 24px);gap:8px}
 body .site-header .brand{gap:7px}
 body .site-header .brand-name small{font-size:8px;letter-spacing:.06em}
 body .site-header .brand-name>span{font-size:19px}
 body .site-header .mark{width:29px;height:29px;font-size:18px}
 body .site-header .nav-actions{gap:6px}
 body .site-header .nav-actions .button.primary{display:flex;min-width:49px;padding:8px 9px}
 body .site-header .menu-toggle{padding:8px 9px;font-size:12px}
 body .application-dock{width:calc(100% - 16px);padding:8px;gap:6px}
 body .application-dock .button{font-size:12px;padding:10px 8px;gap:0}
 .dock-copy strong{max-width:none}
}
@media(prefers-reduced-motion:reduce){body .site-header{transition:none}body .application-dock{animation:none}}
@media print{body .site-header,body .application-dock{display:none}body.home-page .vault-story{margin-top:0}}

/* Preserve readability below phone width, including heavily enlarged text. */
@media(max-width:319px){body .application-dock{flex-wrap:wrap;justify-content:center}.dock-copy{flex-basis:100%;text-align:center}body .application-dock .button{width:100%}}

/* Keep the normal headline on one line; wrap the dock before enlarged text collides. */
body .application-dock{flex-wrap:wrap}
body .application-dock .dock-copy{flex:1 0 auto}
body .application-dock .button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){body .application-dock .dock-copy{flex:1 0 max-content}body .application-dock .button{flex:1 0 max-content}.dock-copy strong{white-space:normal}}