body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    background:#fff;
}

.siteHeader{
    position:sticky;
    top:0;
    z-index:100;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;

    padding:20px 48px;

    background:#fff;
    border-bottom:1px solid #e0e0e0;
}

.siteHeader__logo{
    font-weight:700;
}

.siteMenu{
    display:flex;
    gap:28px;
}

.siteMenu a{
    color:#666;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
}

.siteMenu a:hover,
.siteMenu a.current-link{
    color:#000;
}

#middle{
    min-height:70vh;
    opacity:1;
    transition:opacity .25s ease;
}

#middle.isLoading{
    opacity:.25;
}

.siteFooter{
    padding:40px 48px;
    border-top:1px solid #e0e0e0;
    color:#666;
}


/* CONTENT */

.content{
    max-width:1320px;
    margin:0 auto;
    padding:80px 48px;
}

.content h1{
    font-size:clamp(42px, 7vw, 96px);
    line-height:.95;
    margin:0 0 24px;
}

.content p{
    max-width:760px;
    font-size:18px;
    line-height:1.6;
    color:#444;
}


/* MENU PAGE */

.menuPage{
    display:grid;
    grid-template-columns:260px minmax(0, 1fr);
    gap:80px;

    max-width:1320px;
    margin:0 auto;
    padding:70px 48px;
}

.menuPage__nav,
.menuPage__content{
    min-width:0;
}


/* SPY MENU */

.spyMenu{
    position:sticky;
    top:100px;

    display:flex;
    flex-direction:column;

    padding-left:18px;
    border-left:1px solid #d8d8d8;

    font-size:16px;
    line-height:1.35;
}

.spyMenu a,
.spyMenu button{
    position:relative;

    display:block;
    width:100%;

    padding:8px 0 8px 16px;

    border:0;
    background:none;

    color:#666;
    text-decoration:none;

    font:inherit;
    font-weight:600;
    text-align:left;

    cursor:pointer;
}

.spyMenu a:hover,
.spyMenu button:hover,
.spyMenu a.active,
.spyGroup.active > button{
    color:#000;
}

.spyMenu a.active::before,
.spyGroup.active > button::before{
    content:"";
    position:absolute;
    left:-19px;
    top:0;
    bottom:0;

    width:2px;
    background:#000;
}


/* SUBMENU */

.spyGroup{
    display:flex;
    flex-direction:column;
}

.spyGroup__toggle{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.spyGroup__toggle::after{
    content:"+";
    font-size:18px;
    font-weight:400;
}

.spyGroup.open .spyGroup__toggle::after{
    content:"−";
}

.spyGroup__panel{
    display:none;
}

.spyGroup.open .spyGroup__panel{
    display:block;
}

.spyGroup__panel a{
    padding-left:32px;
    font-size:14px;
    font-weight:500;
}


/* CONTENT BLOCKS */

.contentBlock{
    min-height:70vh;
    padding-bottom:100px;
    scroll-margin-top:120px;
}

.contentBlock h2{
    margin:0 0 18px;
    font-size:48px;
    line-height:1.05;
}

.contentBlock p{
    max-width:760px;
    margin:0;
    font-size:18px;
    line-height:1.6;
    color:#444;
}


/* RESPONSIVE */

@media(max-width:1024px){

    .siteHeader{
        padding:18px 32px;
    }

    .menuPage{
        grid-template-columns:220px minmax(0, 1fr);
        gap:48px;
        padding:56px 32px;
    }

    .spyMenu{
        font-size:15px;
    }

}

@media(max-width:900px){

    .siteHeader{
        align-items:flex-start;
        flex-direction:column;
        gap:16px;
    }

    .siteMenu{
        flex-wrap:wrap;
        gap:16px 24px;
    }

    .menuPage{
        display:block;
        padding:40px 20px;
    }

    .menuPage__nav{
        display:none;
    }

    .content,
    .siteFooter{
        padding-left:20px;
        padding-right:20px;
    }

    .contentBlock{
        min-height:auto;
        padding-bottom:72px;
        scroll-margin-top:100px;
    }

    .contentBlock h2{
        font-size:32px;
    }

    .contentBlock p{
        font-size:16px;
    }

}