/* ── 01 Header — STANDARD site header (all pages except the maarch³ landing page) ──
   Based on the blog header (Figma 1:1204 / 1:1218 / 1:1269 / 1:1213), adopted site-wide:
   bar 103h #2e2e2e · logo 153×32 @ (63,34) · nav 16px @ top 37 · item lefts 918 / 1037 / 1160 / 1306 / 1402 / 1502 ·
   social icons @ 1629 (3 × 22px white circles, 17 gap) · "menu" @ 1758 · hamburger 17×13 @ 1858 (right edge 1875) */

.site-header {
    position: relative;
    z-index: 20;
    height: 103px;
    background: var(--skin-header);
}
.site-header__inner {
    width: min(1812px, calc(100% - 2 * var(--skin-edge)));   /* 63 → 1875 at 1920 */
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.site-header__logo { margin-top: 34px; }
.site-header__logo img { width: 153px; height: 32px; }

.site-header__nav ul {
    display: flex;
    align-items: center;
    margin-top: 37px;
}
.site-header__nav a {
    display: block;
    font-size: 16px;
    line-height: normal;
    text-transform: lowercase;
    color: var(--skin-white);
    transition: color .2s ease;
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible,
.site-header__nav a.is-active { color: var(--skin-nav-active); }

/* Item pitch from the Figma x positions (scales with the viewport, desktop only).
   min-width keeps the exact Figma pitch at 1920; the 18px padding floor stops items touching on
   narrower laptops (1200–1600) where the scaled pitch gets smaller than the text. */
.site-header__nav li { box-sizing: border-box; min-width: calc(var(--w, 0) * var(--u)); padding-right: 18px; }
.site-header__nav li.site-header__burger { padding-right: 0; }
.site-header__nav li:nth-child(1) { --w: 119; }   /* home     */
.site-header__nav li:nth-child(2) { --w: 123; }   /* studio   */
.site-header__nav li:nth-child(3) { --w: 146; }   /* projects */
.site-header__nav li:nth-child(4) { --w: 110; }   /* maarch3  */
.site-header__nav li:nth-child(5) { --w: 86;  }   /* blog     */
.site-header__nav li:nth-child(6) { --w: 127; }   /* contact  */
.site-header__nav li.site-header__social { --w: 129; display: flex; gap: 17px; }
.site-header__nav li.site-header__menu   { --w: 100; }

.site-header__social a {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--skin-white);
    color: #1d1d1d;
    font-size: 11px;
    line-height: 1;
}
.site-header__social a:hover,
.site-header__social a:focus-visible { background: var(--skin-nav-active); color: var(--skin-white); }
.site-header__social i { letter-spacing: 0; }

.site-header__burger a { display: flex; flex-direction: column; justify-content: space-between; width: 17px; height: 13px; }
.site-header__burger span { display: block; height: 1px; background: var(--skin-white); transition: background .2s; }
.site-header__burger a:hover span { background: var(--skin-nav-active); }

@media (max-width: 1199.98px) {
    .site-header__nav ul { gap: 22px; }
    .site-header__nav li { min-width: 0; padding-right: 0; }
    .site-header__nav li.site-header__social { gap: 10px; }
}

/* Hamburger — shown ≤ 991.98px (responsive.css hides the nav) */
.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    align-self: center;
}
.nav-toggle-line {
    display: block;
    width: 28px; height: 2px;
    background: var(--skin-white);
    border-radius: 2px;
    transition: background .2s, transform .25s, opacity .2s;
}
.nav-toggle:hover .nav-toggle-line { background: var(--skin-nav-active); }
.mm-wrapper--opened .nav-toggle .nav-toggle-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mm-wrapper--opened .nav-toggle .nav-toggle-line:nth-child(2) { opacity: 0; }
.mm-wrapper--opened .nav-toggle .nav-toggle-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }