.header{padding:1em 4em;background-color:var(--background-cut);isolation:isolate;box-shadow:var(--box-shadow-main);width:100vw;z-index:1;.inner{max-width:var(--desktop-max-width);font-size:1.5em;display:grid;grid-template-columns:3fr 1fr;margin:0 auto;.logo{white-space:nowrap;font-size:1.5em;span{font-size:.7em}img{margin-right:2px}}}header.floating{position:fixed;top:0;left:0;visibility:hidden;background:var(--background-cut);padding:.25em 4em;color:var(--text);width:100%;isolation:isolate;box-shadow:var(--box-shadow-main);background:linear-gradient(90deg,var(--background-cut) 0,rgb(from var(--background-cut) r g b/.8) 25%,var(--background-cut) 100%);will-change:transform;transform:translateY(-100%);transition:transform .2s ease-out;&.visible{transform:translateY(0);visibility:visible}.inner{display:grid;text-align:left;grid-template-columns:3fr 1fr;font-size:1em;margin:0 auto;.logo-wrapper{margin:auto 0;.logo{font-size:1em}}}}}@media (max-width:768px) and (orientation:portrait){.header{padding:1em 0;.inner{text-align:center;display:block}header.floating{padding:.25em .5em}.logo-wrapper{margin-bottom:.5em}}}.nav-bar{display:inline-flex;flex-direction:row;margin:auto 0;.nav{text-align:center;vertical-align:middle;min-width:5em;border-radius:1px;&:hover{font-weight:700}svg{height:16px;vertical-align:middle;margin-right:4px}}}@media (max-width:768px) and (orientation:portrait){.nav-bar{display:inline-flex;flex-direction:row;font-size:.9em;.nav{min-width:4em;svg{height:.9em}}}}svg{height:1em;fill:var(--text)}