/* defaults */
:root {
    font-family: '-apple-system', 'Helvetica', sans-serif;
    font-size: 18px;
}

/* default font-family rules */
:where(html, body) { font-family: inherit; }
:where(p, strong, b, em, i, mark, small, time, span) { font-family: inherit; }
:where(ol, ul, li, dl, dd, blockquote, q, cite, th, td, caption) { font-family: inherit; }
:where(label, input, textarea, select, button) { font-family: inherit; }
:where(h1, h2, h3, h4, h5, h6) { font-family: inherit; }

/* default font-size rules */
:where(html, body) { font-size: inherit; }
:where(p, strong, b, em, i, mark, small, time, span) { font-size: inherit; }
:where(ol, ul, li, dl, dd, blockquote, q, cite, th, td, caption) { font-size: inherit; }
:where(label, input, textarea, select, button) { font-size: inherit; }
:where(h1) { font-size: 1.8rem; }
:where(h6) { font-size: 1rem; }

/* default font-weight rules */
:where(html, body) { font-weight: inherit; }
:where(p, strong, b, em, i, mark, small, time, span) { font-weight: inherit; }
:where(ol, ul, li, dl, dd, blockquote, q, cite, th, td, caption) { font-weight: inherit; }
:where(label, input, textarea, select, button) { font-weight: inherit; }
:where(h1, h2, h3, h4, h5, h6) { font-weight: 700; }
:where(dl dt) { font-weight: 600; }

/* default typography whitespace styles */
:where(h1, h2, h3, h4, h5, h6, p) { margin-bottom: 0.5rem; }
:where(p) { margin-bottom: 0.5rem; }
:where(p:empty) { display: none; }
:where(p:last-of-type) { margin-bottom: 0; }
:where(h1, h2, h3, h4, h5, h6, p) { overflow-x: scroll; }
:where(p) + :where(h2, h3, h4, h5, h6) { margin-top: 1rem; }

/* links styles */
:where(a, a:hover) { text-decoration: none; }
:where(a) { box-shadow: inset 0 var(--underline-offset, -0.2em) var(--link-underline-color); }
:where(a:hover) { box-shadow: inset 0 var(--underline-offset-hover, -0.5em) var(--link-underline-color); }
:where(a, a:hover) { transition: box-shadow 0.25s ease-in-out; }

/* list styles */
:where(ul, ol) { margin-top: var(--gutter-1x, 15px); margin-bottom: var(--gutter-1x, 15px); }
:where(ul li) { margin-left: 2.0ch; }
:where(ol) {
    list-style: none;
    padding-left: unset;
    counter-reset: ordered-list;
}
:where(ol > li) {
    position: relative;
    padding-left: 4ch;
    counter-increment: ordered-list;
}
:where(ol > li)::before {
    /* ordered list markers */
    content: counter(ordered-list) ".";
    position: absolute;
    left: 0;
    width: 4ch;
    text-align: left;
    font-weight: 500;
}
:where(dl, dl *) {
    color: inherit;
    margin-bottom: var(--gutter-1x, 15px);
}
:where(dl dt) {
    font-weight: 600;
    margin-bottom: 10px;
}

/* blockquote styles */
:where(blockquote) {
    background-color: var(--accent-color);
    margin: var(--gutter-1x, 15px) 0;
    padding: var(--gutter-width) calc(var(--gutter-width) * 2);
    border-left: var(--gutter-width) solid var(--accent-shade);
}
:where(blockquote) :where(a, a:hover) {
    font-weight: 600;
    box-shadow: none;
}

/* sub/sup styles */
:where(sup, sub) { line-height: 0; }
:where(sup) { vertical-align: super; }
:where(sup a, sup a:hover) {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}

/* code styles */
:where(pre) { tab-size: 4; }
:where(pre:has(code)) {
    -webkit-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    max-width: var(--max-width, inherit);
    margin: var(--gutter-1x, 15px) 0;
    padding: var(--gutter-1x, 15px);
    overflow-x: scroll;
    font-size: 1.0rem;
    background-color: rgba(0,0,0,0.75);
    color: rgba(255,255,255,1.0);
}
:where(pre):has(code) :where(code) {
    max-width: inherit;
}
:where(code) {
    white-space: pre;
    tab-size: inherit;
}
:where(code):not(pre code) {
    padding: 0 0.20em;
    border-radius: 0.10em;
    background-color: var(--accent-shade);
}
:where(pre code) .ln {
    display: none;
}

/* Custom Styles */
:where([data-hyper-mention],[hyper-mention]) {
    font-weight: 600;
    color: var(--text-color-alt);
}

.footnotes { margin: var(--gutter-2x) 0 0; }