.srp-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    padding-block: clamp(1rem, .7rem + 1vw, 1.75rem);
    transition: background-color var(--srp-transition), border-color var(--srp-transition), backdrop-filter var(--srp-transition);
}
.admin-bar .srp-header { top: 32px; }
.srp-header.is-scrolled,
.srp-header.is-open { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,8,16,.82); backdrop-filter: blur(22px); }
.srp-header__inner { display: flex; width: min(100%,calc(var(--srp-container) + (2 * var(--srp-gutter)))); min-height: 3.5rem; align-items: center; justify-content: space-between; gap: var(--srp-space-3); margin-inline: auto; padding-inline: var(--srp-gutter); }
.srp-brand { display: inline-flex; min-width: 0; align-items: center; gap: .72rem; padding: .72rem 1.05rem; border: 1px solid rgba(255,255,255,.12); border-radius: var(--srp-radius-pill); color: #fff; background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.07); font-size: var(--srp-text-sm); font-weight: 750; line-height: 1; white-space: nowrap; }
.srp-brand__portfolio { letter-spacing: -.015em; }
.srp-brand__divider { width: 1px; height: 1rem; background: rgba(255,255,255,.25); }
.srp-brand__name { color: rgba(255,255,255,.7); font-weight: 600; }
.srp-nav { display: flex; align-items: center; gap: clamp(1rem,.5rem + 1.8vw,2.4rem); font-size: var(--srp-text-sm); font-weight: 650; }
.srp-nav > a:not(.srp-button) { position: relative; color: rgba(255,255,255,.84); }
.srp-nav > a:not(.srp-button)::after { position: absolute; right: 0; bottom: -.45rem; left: 0; height: 1px; content: ""; background: var(--srp-color-lilac); transform: scaleX(0); transition: transform var(--srp-transition); }
.srp-nav > a:not(.srp-button):hover::after,
.srp-nav > a:not(.srp-button):focus-visible::after,
.srp-nav > a[aria-current="page"]::after { transform: scaleX(1); }
.srp-button--nav { min-height: 2.85rem; padding-inline: 1.35rem; }
.srp-menu-toggle { display: none; }
@media (max-width: 51.25rem) {
    .admin-bar .srp-header { top: 46px; }
    .srp-menu-toggle { position: relative; z-index: 2; display: grid; width: 3rem; height: 3rem; place-content: center; gap: .38rem; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.06); cursor: pointer; }
    .srp-menu-toggle > span:not(.srp-visually-hidden) { display: block; width: 1.15rem; height: 2px; background: #fff; transition: transform var(--srp-transition); }
    .srp-header.is-open .srp-menu-toggle > span:first-child { transform: translateY(.25rem) rotate(45deg); }
    .srp-header.is-open .srp-menu-toggle > span:nth-child(2) { transform: translateY(-.25rem) rotate(-45deg); }
    .srp-nav { position: absolute; top: 100%; right: var(--srp-gutter); left: var(--srp-gutter); display: grid; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: var(--srp-radius-md); background: rgba(14,13,23,.97); box-shadow: 0 2rem 5rem rgba(0,0,0,.32); opacity: 0; pointer-events: none; transform: translateY(-.5rem); transition: opacity var(--srp-transition),transform var(--srp-transition); }
    .srp-header.is-open .srp-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .srp-nav > a:not(.srp-button) { padding: .8rem .65rem; }
    .srp-button--nav { width: 100%; margin-top: .35rem; }
}
@media (max-width: 39.9375rem) {
    .srp-brand { gap: .5rem; padding: .68rem .82rem; }
    .srp-brand__name { font-size: .78rem; }
}
@media (max-width:22.5rem) { .srp-brand { gap: .35rem; padding-inline: .62rem; } .srp-brand__portfolio,.srp-brand__name { font-size: .67rem; } .srp-brand__divider { height: .8rem; } }