#page-body {
    max-width:1220px;
    margin:0 auto;
    padding:70px 30px 90px;
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:45px
}
#page-title {
    grid-column:1/-1;
    font-size:clamp(38px,5vw,68px);
    margin:10px 0 15px
}
#side-bar {
    align-self:start;
    position:sticky;
    top:125px;
    padding:12px 0;
    border:1px solid var(--line);
    border-radius:18px;
    background:#17191c
}
.side-section {
    padding:13px 18px;
    font-size:12px;
    line-height:1.5
}
.side-section+.side-section {
    border-top:1px solid var(--line)
}
.bookmark-link:hover {
    color:var(--orange)
}
#main-page {
    min-width:0;
    line-height:1.85;
    font-size:15px;
    color:#b3b7bb;
    overflow-wrap:anywhere
}
#main-page a {
    color:var(--orange);
    text-decoration:underline;
    text-underline-offset:4px
}
.body-header {
    font-size:23px;
    color:var(--ink);
    letter-spacing:-.04em;
    line-height:1.3;
    margin:12px 0 16px;
    scroll-margin-top:125px
}
#copyright-notice {
    padding:30px 0 0;
    border-top:1px solid var(--line);
    font-size:12px;
    color:var(--muted)
}
@media(max-width:760px) {
    #page-body {
        padding:40px 24px;
        grid-template-columns:minmax(0,1fr);
        gap:28px
    }
    #page-title {
        font-size:40px
    }
    #side-bar {
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr
    }
    #main-page {
        font-size:14px
    }
    .side-section {
        font-size:11px;
        padding:12px
    }
    .body-header {
        font-size:22px
    }
    .header .text-link {
        font-size:10px;
        gap:8px
    }
}
