/* =============================================
   Root Markup Styles
   ============================================= */

:root {
    --root-text-size: 16rem;
    --root-text-line: 1.6;
    --root-text-spacing: -0.01em;
    --root-flow-space: 24rem;
    --root-heading-space: 35rem;
    --root-border-color: rgba(var(--primary-rgb), 18%);
    --root-muted-color: rgba(var(--default-rgb), 60%);
}

/* =============================================
   Headings
   ============================================= */

:where(h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class])) {
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-top: 0;
    margin-bottom: 35rem;
    text-wrap: balance;
}

:where(* + h1:not([class]), * + h2:not([class]), * + h3:not([class]), * + h4:not([class]), * + h5:not([class]), * + h6:not([class])) {
    margin-top: var(--root-heading-space);
}

:where(h1:not([class])) {
    text-transform: uppercase;
}

:where(h2:not([class])) {
    font-size: 36rem !important;
}

:where(h3:not([class])) {
    font-size: 24rem !important;
}

:where(h4:not([class])) {
    font-size: 22rem !important;
}

:where(h5:not([class])) {
    font-size: 18rem !important;
    line-height: 1.3;
}

:where(h6:not([class])) {
    font-size: 14rem !important;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* =============================================
   Text
   ============================================= */

:where(p:not([class])) {
    margin-top: 0;
    margin-bottom: var(--root-flow-space);
    font-weight: 300;
    font-size: var(--root-text-size);
    line-height: var(--root-text-line);
    letter-spacing: var(--root-text-spacing);
}

:where(a:not([class])) {
    color: rgba(var(--primary-rgb), 1);
    text-decoration: underline;
    text-decoration-thickness: max(1px, 1rem);
    text-underline-offset: 3rem;
    transition: opacity .2s ease, text-decoration-color .2s ease;
}

:where(a:not([class]):hover) {
    opacity: .72;
}

:where(b, strong) {
    font-weight: 500;
}

:where(u, .underline) {
    text-decoration-line: underline;
    text-decoration-thickness: max(1px, .06em);
    text-underline-offset: .18em;
}

/* =============================================
   Lists
   ============================================= */

:where(ul:not([class]), ol:not([class])) {
    display: block;
    margin-top: 0;
    margin-bottom: var(--root-flow-space);
    padding-inline-start: 28rem;
    font-size: var(--root-text-size);
    line-height: var(--root-text-line);
    letter-spacing: var(--root-text-spacing);
}

:where(ul:not([class])) {
    list-style: disc;
}

:where(ol:not([class])) {
    list-style: decimal;
}

:where(ul:not([class]) ul) {
    list-style: circle;
}

:where(ul:not([class]) ul ul) {
    list-style: square;
}

:where(ol:not([class]) ol) {
    list-style: lower-alpha;
}

:where(ol:not([class]) ol ol) {
    list-style: lower-roman;
}

:where(ul:not([class]) li, ol:not([class]) li) {
    padding-inline-start: 4rem;
}

:where(ul:not([class]) li::marker, ol:not([class]) li::marker) {
    color: rgba(var(--primary-rgb), 1);
}

:where(ul:not([class]) li + li, ol:not([class]) li + li) {
    margin-top: 8rem;
}

:where(ul:not([class]) li > ul, ul:not([class]) li > ol, ol:not([class]) li > ul, ol:not([class]) li > ol) {
    margin-top: 10rem;
    margin-bottom: 0;
}

.article-content-text ul:not([class]) > li > p:not([class]),
.article-content-text ol:not([class]) > li > p:not([class]) {
    margin-top: 0;
    margin-bottom: 0;
}

/* =============================================
   Quotes
   ============================================= */

:where(blockquote:not([class])) {
    margin-top: 0;
    margin-bottom: var(--root-flow-space);
    border-left: max(2px, 2rem) solid rgba(var(--primary-rgb), 1);
    padding: 4rem 0 4rem 24rem;
    font-weight: 300;
    font-size: 20rem;
    line-height: 1.45;
    letter-spacing: -0.03em;
}

:where(blockquote:not([class]) > :last-child) {
    margin-bottom: 0;
}

:where(cite) {
    display: block;
    margin-top: 14rem;
    color: var(--root-muted-color);
    font-size: 14rem;
    line-height: 1.4;
    font-style: normal;
}

/* =============================================
   Media
   ============================================= */

:where(figure:not([class])) {
    display: block;
    margin-top: 0;
    margin-bottom: var(--root-flow-space);
}

:where(img:not([class]), figure:not([class]) img) {
    height: auto;
    max-width: 100%;
}

:where(figcaption:not([class]), figcapture:not([class])) {
    display: block;
    margin-top: 12rem;
    color: var(--root-muted-color);
    font-size: 12rem;
    line-height: 1.4;
    letter-spacing: .01em;
}

/* =============================================
   Tables
   ============================================= */

:where(table:not([class])) {
    display: block;
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--root-flow-space);
    overflow-x: auto;
    border-collapse: collapse;
    border-spacing: 0;
    -webkit-overflow-scrolling: touch;
}

:where(table:not([class]) caption) {
    margin-bottom: 12rem;
    color: var(--root-muted-color);
    font-size: 12rem;
    line-height: 1.4;
    text-align: left;
}

:where(table:not([class]) th, table:not([class]) td) {
    min-width: 160rem;
    border: max(1px, 1rem) solid var(--root-border-color);
    padding: 14rem 16rem;
    text-align: left;
    vertical-align: top;
}

:where(table:not([class]) th) {
    background: rgba(var(--primary-rgb), 5%);
    font-weight: 500;
}

:where(table:not([class]) tbody tr:nth-child(even)) {
    background: rgba(var(--primary-rgb), 2.5%);
}

/* =============================================
   Separators
   ============================================= */

:where(hr:not([class])) {
    height: max(1px, 1rem);
    margin: 40rem 0;
    border: 0;
    background: var(--root-border-color);
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 1199.98px) {
    :root {
        --root-heading-space: 30rem;
    }
}

@media (max-width: 769.98px) {
    :root {
        --root-text-size: 15rem;
        --root-flow-space: 20rem;
        --root-heading-space: 28rem;
    }

    :where(h1:not([class])) {
        font-size: 36rem;
    }

    :where(h2:not([class])) {
        font-size: 22rem !important;
    }

    :where(h3:not([class])) {
        font-size: 20rem !important;
    }

    :where(h4:not([class])) {
        font-size: 18rem !important;
    }

    :where(h5:not([class])) {
        font-size: 16rem !important;
    }

    :where(h6:not([class])) {
        font-size: 12rem !important;
    }

    :where(blockquote:not([class])) {
        font-size: 18rem !important;
        padding-left: 18rem;
    }

    :where(table:not([class]) th, table:not([class]) td) {
        min-width: 140rem;
        padding: 12rem;
    }
}

@media (max-width: 609.98px) {
    :root {
        --root-flow-space: 18rem;
        --root-heading-space: 24rem;
    }

    :where(h1:not([class])) {
        font-size: 36rem !important;
    }

    :where(h2:not([class])) {
        font-size: 22rem !important;
    }

    :where(h3:not([class])) {
        font-size: 20rem !important;
    }

    :where(ul:not([class]), ol:not([class])) {
        padding-inline-start: 22rem !important;
    }
}