:root{
    --portal-navy:#10263b;
    --portal-navy-2:#1b3b57;
    --portal-gold:#c99546;
    --portal-gold-dark:#9d6d2a;
    --portal-wrap:min(1220px,calc(100% - 34px));
}

.portal-wrap{
    width:var(--portal-wrap);
    margin:0 auto;
}

.site-head{
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:1px solid rgba(201,149,70,.18);
    background:rgba(252,249,245,.93);
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
}

.site-head__in{
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}

.brand-area{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:4px;
    min-width:0;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.brand-mark{
    position:relative;
    width:48px;
    height:48px;
    flex:0 0 48px;
    border:1px solid #dfbd84;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--portal-gold-dark);
    font-family:Georgia,serif;
    font-size:26px;
    font-style:italic;
    background:#fffaf3;
    box-shadow:0 7px 20px rgba(201,149,70,.12);
}

.brand-mark:after{
    content:"♡";
    position:absolute;
    right:-5px;
    top:-6px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--portal-gold);
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:11px;
    font-style:normal;
    display:flex;
    align-items:center;
    justify-content:center;
}

.brand small{
    display:block;
    margin-bottom:2px;
    color:#9b8c83;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.brand strong{
    display:block;
    font-family:Georgia,serif;
    font-size:19px;
    color:var(--portal-navy);
    white-space:nowrap;
}

.head-links{
    display:flex;
    align-items:center;
    gap:10px;
}

.head-link{
    padding:10px 12px;
    border-radius:999px;
    color:#4d4548;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.head-link:hover{
    background:#fff;
}

.portal-btn{
    min-height:44px;
    padding:0 18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid transparent;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:700;
    text-decoration:none;
    transition:.16s ease;
    white-space:nowrap;
}

.portal-btn:hover{
    transform:translateY(-1px);
}

.portal-btn-main{
    color:#fff;
    background:linear-gradient(135deg,var(--portal-navy),var(--portal-navy-2));
    box-shadow:0 12px 25px rgba(16,38,59,.18);
}

.portal-btn-light{
    background:#fff;
    color:var(--portal-navy);
    border-color:#dacbbf;
}

.site-visitor-mini{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border:1px solid #e4d8ce;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#827579;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    white-space:nowrap;
}

.site-visitor-mini strong{
    color:var(--portal-navy);
    font-size:12px;
}

.site-visitor-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#46a66b;
    box-shadow:0 0 0 3px rgba(70,166,107,.13);
}

.site-visitor-mini--header{
    margin-left:60px;
    padding:3px 8px;
    font-size:10px;
    background:transparent;
    border-color:rgba(201,149,70,.24);
}

.site-visitor-mini--header strong{
    font-size:11px;
}

@media(max-width:780px){
    :root{--portal-wrap:min(100% - 22px,100%)}

    .site-head__in{min-height:78px}
    .brand-area{gap:2px}

    .site-visitor-mini--header{
        margin-left:50px;
        padding:2px 6px;
        font-size:9px;
        gap:5px;
    }

    .site-visitor-mini--header strong{font-size:10px}
    .brand strong{font-size:16px}

    .head-link{display:none}

    .brand small{
        display:block;
        margin-bottom:1px;
        font-size:8px;
        line-height:1.1;
        letter-spacing:.06em;
        white-space:nowrap;
    }

    .head-links{gap:7px}

    .head-links .portal-btn{
        padding:0 13px;
        min-height:40px;
        font-size:12px;
    }
}

@media(max-width:480px){
    .brand-mark{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    .brand small{
        display:block;
        font-size:7.5px;
        line-height:1.05;
    }

    .site-visitor-mini--header{
        margin-left:49px;
        border:0;
        padding:0;
        background:transparent;
    }

    .site-visitor-mini--header span:first-child{display:none}

    .site-head__in{gap:8px}

    .brand{
        gap:8px;
        min-width:0;
    }

    .brand span:last-child{
        min-width:0;
        max-width:145px;
    }

    .brand strong{
        font-size:13.5px;
        line-height:1.05;
        white-space:normal;
    }

    .brand-area{
        flex:1 1 auto;
        min-width:0;
    }

    .head-links{
        gap:5px;
        flex:0 0 auto;
    }

    .head-links .portal-btn-light{display:inline-flex}

    .head-links .portal-btn{
        min-height:36px;
        padding:0 7px;
        font-size:10px;
        line-height:1.05;
    }

    .site-head__in{min-height:72px}
}

@media(max-width:390px){
    .brand-mark{
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:22px;
    }

    .brand span:last-child{max-width:118px}
    .brand small{font-size:7px}
    .brand strong{
        font-size:12px;
        line-height:1.02;
    }
    .head-links{gap:4px}

    .head-links .portal-btn{
        min-height:34px;
        padding:0 6px;
        font-size:9.5px;
    }
}
