/* Shared header geometry and vector icons for every page. */
:root{--header-x:4.4%;--header-y:28px;--header-bottom:28px;--header-row:52px;--brand-width:108px}
.header,.site-header{position:fixed;inset:0 0 auto;height:calc(var(--header-y) + var(--header-row) + var(--header-bottom));padding:var(--header-y) var(--header-x) var(--header-bottom);align-items:center;box-sizing:border-box;background:linear-gradient(#08090980,transparent)}
.logo,.brand{position:absolute;left:var(--header-x);top:var(--header-y);display:block;width:var(--brand-width);height:calc(var(--brand-width)*197/500);margin:0;padding:0;line-height:0;flex:none;transform:none}
.logo img,.brand img{display:block;width:100%;height:100%;object-fit:contain}
.header-note,.header-label{position:absolute;left:50%;top:calc(var(--header-y) + var(--header-row)/2);transform:translate(-50%,-50%);white-space:nowrap}
.header-actions,.site-header>.back{margin-left:auto}
.ui-arrow{display:block;width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.projects-nav .ui-arrow{width:12px;height:12px}
.scroll-note .ui-arrow,.site-footer .ui-arrow{width:14px;height:14px}
@media(max-width:1100px){.header-note,.header-label{display:none}}
@media(max-width:600px){:root{--header-x:6%;--header-y:22px;--header-bottom:22px;--header-row:41px;--brand-width:88px}}
@media(max-width:380px){:root{--brand-width:80px}}
@media(max-width:600px) and (max-height:680px){:root{--header-y:14px}}
@media(min-width:601px) and (max-height:650px){:root{--header-y:14px;--header-bottom:14px}}