:root {
    --ap-font-family: 'FF Mark', Arial, sans-serif;
    --ap-font-size-body: 17px;
    --ap-line-height-body: 1.5;
    --ap-color-body: #040505;

    --ap-page-max-width: 1440px;
    --ap-rail-width: 306px;
    --ap-rail-column-gap: 74px;
    --ap-sticky-offset: calc(var(--rlp-sticky-header-offset, 24px) + 16px);

    --ap-gutter-xs: 12px;
    --ap-gutter-sm: 42px;
    --ap-gutter-md: 36px;
    --ap-gutter-lg: 44px;
    --ap-gutter-xl: 125px;
    --ap-gutter-xxl: 72px;

    --ap-body-gutter: 60px;
    --ap-body-gutter-lg: 100px;

    --ap-content-pad: 0px;
    --ap-content-max: none;
}

body {
    font-family: var(--ap-font-family);
    font-size: var(--ap-font-size-body);
    line-height: var(--ap-line-height-body);
    color: var(--ap-color-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cmp-container--fixed {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 600px) {
    .cmp-container--fixed {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .cmp-container--fixed {
        max-width: 720px;
    }
}
@media (min-width: 1024px) {
    .cmp-container--fixed {
        max-width: 960px;
    }
}
@media (min-width: 1366px) {
    .cmp-container--fixed {
        max-width: 1140px;
    }
}
@media (min-width: 1440px) {
    .cmp-container--fixed {
        max-width: 1320px;
    }
}

.cmp-container--article-layout > .container > .cmp-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.cmp-container--article-layout > .new {
    display: none;
}

.cmp-container--article-layout > .container > .cmp-container > .container > .cmp-container {
    display: flex;
    flex-direction: column;
}

/* Column is explicit because site.css makes every .cmp-container a flex row. */
.cmp-container--article-layout {
    display: flex;
    flex-direction: column;
    max-width: var(--ap-page-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ap-gutter-xs);
    padding-right: var(--ap-gutter-xs);
}

@media (min-width: 600px) {
    .cmp-container--article-layout {
        padding-left: var(--ap-gutter-sm);
        padding-right: var(--ap-gutter-sm);
    }
}
@media (min-width: 768px) {
    .cmp-container--article-layout {
        padding-left: var(--ap-gutter-md);
        padding-right: var(--ap-gutter-md);
    }
}
@media (min-width: 1024px) {
    .cmp-container--article-layout {
        padding-left: var(--ap-gutter-lg);
        padding-right: var(--ap-gutter-lg);
    }
}
@media (min-width: 1366px) {
    .cmp-container--article-layout {
        padding-left: var(--ap-gutter-xl);
        padding-right: var(--ap-gutter-xl);
    }
}
@media (min-width: 1440px) {
    .cmp-container--article-layout {
        padding-left: var(--ap-gutter-xxl);
        padding-right: var(--ap-gutter-xxl);
    }
}

@media (min-width: 1024px) {
    :root {
        --ap-content-pad: var(--ap-body-gutter-lg);
    }
}
@media (min-width: 1025px) {
    :root {
        --ap-content-pad: var(--ap-body-gutter);
    }
}
@media (min-width: 1366px) {
    :root {
        --ap-content-pad: 0px;
    }
}
@media (min-width: 1440px) {
    :root {
        --ap-content-pad: var(--ap-body-gutter);
    }
}

/* Mirrors rlp-article-aspot's .layout-container so the modules never outgrow the aspot: it caps on
   Constellation's $container-max-widths and breakpoints, so this uses that scale, not the file's. */
@media (min-width: 576px) {
    :root {
        --ap-content-max: 540px;
    }
}
@media (min-width: 768px) {
    :root {
        --ap-content-max: 720px;
    }
}
/* Releases the 720 cap; above 992 the body container is always narrower than 960, so it never binds. */
@media (min-width: 992px) {
    :root {
        --ap-content-max: 960px;
    }
}

/* article-content only, so the aspot above it stays flush with the body. One declaration reads the
   tokens above instead of repeating this selector per breakpoint. */
.cmp-container--article-layout > .container > .cmp-container > .container > .cmp-container {
    padding-left: var(--ap-content-pad);
    padding-right: var(--ap-content-pad);
    max-width: var(--ap-content-max);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1025px) {
    .cmp-container--article-layout {
        display: grid;
        grid-template-columns: var(--ap-rail-width) 1fr;
        column-gap: var(--ap-rail-column-gap);
        align-items: start;
    }

    .cmp-container--article-layout > .breadcrumb {
        grid-column: 1 / -1;
    }

    .cmp-container--article-layout > .leftrailcontainer {
        grid-column: 1;
        position: sticky;
        top: var(--ap-sticky-offset);
        align-self: start;
    }

    .cmp-container--article-layout > .container {
        grid-column: 2;
        min-width: 0;
    }
}

@media (min-width: 1440px) {
    .cmp-container--article-layout {
        column-gap: 134px;
    }
}

.cmp-container--article-layout {
    margin-bottom: 48px;
}

@media (min-width: 1366px) {
    .cmp-container--article-layout {
        margin-bottom: 80px;
    }
}