/* Shared navigation follows the 3DGS page's right-aligned links and icon menu. */
.vsl-nav {
  --nav-text:#dedede; --nav-active:#fff;
  box-sizing:border-box; position:fixed; top:0; left:0; right:0; width:100%; height:82px; z-index:1000;
  display:flex; align-items:center; gap:24px; padding:0 5%; margin:0; max-width:none; border-radius:0;
  color:var(--nav-text); background:transparent; border:0;
  font:400 11px/1.4 'DM Sans','Noto Sans TC',sans-serif; letter-spacing:.06em;
}
.vsl-nav-light { --nav-text:#666; --nav-active:#171717; }
.vsl-nav.is-scrolled { background:rgba(10,10,10,.94); box-shadow:none; backdrop-filter:blur(20px); }
.vsl-nav-light.is-scrolled { background:rgba(246,244,239,.96); box-shadow:none; }
.vsl-nav .vsl-brand { display:block; margin-right:auto; flex:0 0 auto; width:125px; }
.vsl-nav .vsl-brand img { display:block; width:125px; height:auto; max-width:none; }
.vsl-nav .vsl-links { display:flex; align-items:center; justify-content:flex-end; gap:clamp(18px,2.2vw,32px); }
.vsl-nav .vsl-links a { color:var(--nav-text); font:inherit; letter-spacing:inherit; text-decoration:none; padding:0; border:0; background:none; transition:color .25s; white-space:nowrap; }
.vsl-nav .vsl-links a:hover,.vsl-nav .vsl-links a[aria-current] { color:var(--nav-active); }
.vsl-nav .lang-switch { display:flex; align-items:center; gap:0; margin:0; }
.vsl-nav .lang-switch button { min-width:0; border:0; border-radius:0; background:none; color:var(--nav-text); padding:6px 8px; font:inherit; font-size:10px; cursor:pointer; }
.vsl-nav .lang-switch button+button{position:relative;border-left:0}
.vsl-nav .lang-switch button+button::before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;transform:translateY(-50%);background:currentColor;opacity:.2;pointer-events:none}
.vsl-nav .lang-switch button.active,.vsl-nav .lang-switch button[aria-pressed=true] { color:var(--nav-active); }
.vsl-nav .vsl-menu-toggle { display:none; border:0; background:none; color:inherit; padding:0; width:44px; min-height:44px; cursor:pointer; align-items:center; justify-content:flex-end; }
.vsl-menu-icon { position:relative; display:block; width:22px; height:16px; }
.vsl-menu-icon i { position:absolute; left:0; width:22px; height:1px; background:currentColor; transition:transform .2s,top .2s; }
.vsl-menu-icon i:first-child { top:4px; }.vsl-menu-icon i:last-child { top:12px; }
.vsl-menu-toggle[aria-expanded=true] i:first-child { top:8px; transform:rotate(45deg); }
.vsl-menu-toggle[aria-expanded=true] i:last-child { top:8px; transform:rotate(-45deg); }
.vsl-site-menu { position:fixed; right:5%; top:80px; width:min(280px,90vw); box-sizing:border-box; max-height:calc(100dvh - 120px); overflow-y:auto; overscroll-behavior:contain; z-index:999; padding:12px; border:1px solid #ffffff24; border-radius:22px; background:#0a0a0ce8; backdrop-filter:blur(20px); box-shadow:0 24px 70px #0008; font:400 13px/1.4 'DM Sans','Noto Sans TC',sans-serif; }
.vsl-site-menu[hidden] { display:none; }
.vsl-site-menu a { display:block; border-radius:12px; padding:12px 16px; color:#bbb; text-decoration:none; }
.vsl-site-menu a:hover,.vsl-site-menu a:focus-visible,.vsl-site-menu a[aria-current] { background:#ffffff0b; color:#fff; }
.vsl-nav a:focus-visible,.vsl-nav button:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.vsl-case-tools.mag-bar { top:82px; height:44px; }
.vsl-case-tools .bar-logo { display:none; }
.vsl-viewer-page .explore-header { top:82px; }
.vsl-viewer-page #modelStage>header { top:82px; }
.filterbar { overflow-x:auto; scrollbar-width:none; }.filterbar::-webkit-scrollbar { display:none; }
.filterbar .filter:focus-visible { outline:2px solid #9a7556; outline-offset:3px; }
@media(max-width:700px) {
 .vsl-nav { height:68px; gap:16px; }
 .vsl-nav .vsl-links { display:none; }
 .vsl-nav .vsl-menu-toggle { display:flex; }
 .vsl-nav .lang-switch button { min-height:44px; }
 .vsl-site-menu { top:70px; }
 .vsl-case-tools.mag-bar { top:68px; }
 .vsl-viewer-page .explore-header,.vsl-viewer-page #modelStage>header { top:68px; }
}
@media(min-width:701px) { .vsl-site-menu { display:none!important; } }
@media print { .vsl-nav,.vsl-site-menu { display:none!important; } }
@media(prefers-reduced-motion:reduce) { .vsl-menu-icon i,.vsl-nav .vsl-links a { transition:none; } }

/* Preserve legibility over photographic covers. */
.vsl-nav:not(.vsl-nav-light) { text-shadow:0 1px 8px #0009; }
.vsl-nav:not(.vsl-nav-light)::before { content:""; position:absolute; z-index:-1; inset:0 0 -20px; background:linear-gradient(#0005,transparent); pointer-events:none; }

.vsl-marker-page main { padding-top:68px; }
@media print { .vsl-marker-page main { padding-top:0; } }

/* Restore the original homepage mobile header; desktop metrics stay unchanged. */
@media(max-width:700px){
 .vsl-nav{height:80px;gap:14px;padding:0 4%;}
 .vsl-nav .vsl-brand{width:auto;}
 .vsl-nav .vsl-brand img{width:auto;height:27.6px;}
 .vsl-nav .lang-switch button{font-size:10.5px;padding:5px;}
 .vsl-nav .vsl-menu-toggle{width:44px;min-height:44px;justify-content:center;}
 .vsl-menu-icon{width:34px;height:24px;}
 .vsl-menu-icon i{width:34px;}
 .vsl-menu-icon i:first-child{top:2px;}
 .vsl-menu-icon:before{content:"";position:absolute;left:0;top:11px;width:34px;height:1px;background:currentColor;transition:opacity .3s;}
 .vsl-menu-icon i:last-child{top:20px;}
 .vsl-menu-toggle[aria-expanded=true] i:first-child,.vsl-menu-toggle[aria-expanded=true] i:last-child{top:11px;}
 .vsl-menu-toggle[aria-expanded=true] .vsl-menu-icon:before{opacity:0;}
 .vsl-site-menu{left:0;right:0;top:80px;width:100%;padding:0;max-height:calc(100dvh - 80px);border:0;border-radius:0;background:rgba(14,12,10,.96);box-shadow:none;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
 .vsl-site-menu a{border-radius:0;padding:16px 24px;min-height:56px;border-top:1px solid rgba(255,255,255,.1);font:400 18px/1.35 'Noto Serif TC',serif;letter-spacing:.08em;color:#fafaf8;text-align:left;}
 .case-index{--case-nav-height:80px;}
}
@media(prefers-reduced-motion:reduce){.vsl-menu-icon:before{transition:none;}}

/* Translucent black architectural directory. Shared by the three existing header variants. */
@media(max-width:700px){
 body .vsl-nav:has(.vsl-menu-toggle[aria-expanded=true]){
  --nav-text:#ded9d1;--nav-active:#fff;
  background:rgba(12,12,12,.76);color:#f4f0e9;text-shadow:none;box-shadow:none;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 }
 body .vsl-nav:has(.vsl-menu-toggle[aria-expanded=true])::before{display:none;}
 body .vsl-nav:has(.vsl-menu-toggle[aria-expanded=true]) .vsl-brand img{filter:brightness(0) invert(1);opacity:.94;}
 body #vsl-site-menu{
  left:0;right:0;top:80px;width:100%;max-height:calc(100dvh - 80px);
  padding:20px 7% 30px;border:0;border-radius:0 0 22px 22px;
  background:linear-gradient(125deg,rgba(12,12,12,.76) 35%,rgba(20,19,18,.82));
  box-shadow:0 20px 35px #00000026;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  counter-reset:directory;animation:vsl-directory-in .32s ease-out both;
 }
 .vsl-site-menu::before{
  content:"EXPLORE VISULOMA";display:block;padding:0 0 20px;
  color:#b2a89b;font:400 9px/1.4 'DM Sans',sans-serif;letter-spacing:.22em;
 }
 body .vsl-site-menu a{
  position:relative;display:flex;align-items:center;gap:18px;box-sizing:border-box;
  min-height:68px;padding:16px 4px;border:0;border-top:1px solid #ffffff24;
  border-radius:0;background:transparent;color:#f4f0e9;text-shadow:none;
  font:400 clamp(18px,3.4vw,22px)/1.35 'Noto Serif TC',serif;
  letter-spacing:.08em;text-align:left;
  transition:color .2s,background .2s;
 }
 .vsl-site-menu a::before{
  counter-increment:directory;content:counter(directory,decimal-leading-zero);
  flex:0 0 18px;color:#b9aa96;font:400 10px/1 'DM Sans',sans-serif;letter-spacing:.04em;
 }
 .vsl-site-menu a::after{
  content:"";display:block;margin-left:auto;width:20px;height:20px;flex:0 0 20px;color:#c9b79f;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2018%2018%206M6%206h12v12'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2018%2018%206M6%206h12v12'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s;
 }
 .vsl-site-menu a:last-child{border-bottom:1px solid #ffffff24;}
 body .vsl-site-menu a:hover,body .vsl-site-menu a:focus-visible,body .vsl-site-menu a[aria-current]{
  background:#ffffff0c;color:#fff;
 }
 .vsl-site-menu a:focus-visible{outline:1px solid #c9b79f;outline-offset:-1px;}
 .vsl-site-menu a:hover::after{transform:translate(2px,-2px);}
}
@keyframes vsl-directory-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:700px) and (max-height:600px){
 body #vsl-site-menu{padding-top:12px;padding-bottom:18px;}
 .vsl-site-menu::before{padding-bottom:12px;}
 body .vsl-site-menu a{min-height:58px;padding-top:12px;padding-bottom:12px;}
}
@media(prefers-reduced-motion:reduce){
 body #vsl-site-menu{animation:none;}.vsl-site-menu a,.vsl-site-menu a::after{transition:none;}
}