/* vovan.io — site-wide LAYOUT only; every colour/font comes from the design-system tokens
   (vovan-io_style/vovan-io.css). Shared by every page. */
.wrap{ max-width:960px; min-height:100vh; display:flex; flex-direction:column; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
         padding-bottom:16px; border-bottom:1px solid var(--line-2); position:relative; z-index:20; }
.topbar .nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
a.brand{ text-decoration:none; }
.main{ flex:1; display:flex; align-items:center; padding:48px 0; }
.main .hud-panel{ width:100%; margin:0; padding:34px 28px 36px; }
.greet{ margin:0; }
.greet .accent{ color:var(--accent); }

/* ---------- dropdown (Projects ▾) ---------- */
.dropdown{ position:relative; }
.dropdown > .btn .caret{ display:inline-block; margin-left:6px; font-size:.9em; transition:transform .12s; }
.dropdown.open > .btn .caret{ transform:rotate(180deg); }
.dropdown.open > .btn{ color:var(--text); border-color:var(--accent); background:var(--surface-2); }
.dropdown-menu{ display:none; position:absolute; top:100%; left:0; z-index:30; min-width:220px;
                padding-top:6px; /* hover bridge between button and menu */ }
.dropdown-menu .menu-box{ position:relative; background:var(--surface); border:1px solid var(--line);
                          padding:6px; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.dropdown-menu .menu-box::before,.dropdown-menu .menu-box::after{ content:""; position:absolute; width:10px; height:10px; pointer-events:none; }
.dropdown-menu .menu-box::before{ top:-1px; left:-1px; border-top:var(--bracket-w) solid var(--bracket); border-left:var(--bracket-w) solid var(--bracket); }
.dropdown-menu .menu-box::after{ bottom:-1px; right:-1px; border-bottom:var(--bracket-w) solid var(--bracket); border-right:var(--bracket-w) solid var(--bracket); }
.dropdown.open > .dropdown-menu{ display:block; }
@media (hover:hover){ .dropdown:hover > .dropdown-menu{ display:block; } }
.dropdown-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; font-family:var(--f-display);
                font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
                color:var(--text-dim); white-space:nowrap; transition:background .1s,color .1s; }
.dropdown-item::before{ content:"\25B8"; color:var(--accent); }
.dropdown-item:hover,.dropdown-item:focus-visible{ background:var(--surface-2); color:var(--text);
                box-shadow:inset 3px 0 0 var(--accent); outline:none; }
.dropdown-item[aria-current="page"]{ color:var(--accent); }
@media (max-width:520px){ .dropdown-menu{ left:0; right:auto; min-width:200px; } }