*,::after,::before{box-sizing:border-box}
html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}


:root {
    --bg-color: #f7f5ed;
    --bg-accent: #bdbbad;
    --bg-highlight: #fff;
    --color: #111111;
    --highlight: #000;
    --text-width: 44rem;
    --full-bleed: 57rem;
    --space: 2vw;
    --defocus-opacity: .7;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --bg-accent: #404040;
        --bg-highlight: #000000;
        --color: #e7e7e7;
        --highlight: #a9f9dd;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--color);
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.5rem;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    border-bottom: solid 1px var(--bg-accent);
    color: var(--highlight);
    font-weight: normal;
    padding: 1rem 2rem 0.5rem 2rem;
    margin: 0 var(--space);
    max-width: var(--full-bleed);
}

h4, h5, h6 {
    font-size: 1rem;
    text-transform: uppercase;
}

p {
    max-width: var(--text-width);
    margin: 0 var(--space);
    padding: 1em 2rem;
}

div.sidebar {
    background-color: var(--bg-color);
    position: absolute;
    float: left;
    left: var(--text-width);
    margin: 0 var(--space);
    padding: 1em 1em;
    width: calc(var(--full-bleed) - var(--text-width));
}

.heading-index {
    opacity: var(--defocus-opacity);
    display: block;
}

ul.index {
    margin: 0;
    padding: 0;
}

ul.index li {
    opacity: var(--defocus-opacity);
    list-style-type: none;
    padding: 0;
    border-left: solid 1px var(--bg-accent);
}

dl.metadata dt {
    text-transform: capitalize;
    opacity: var(--defocus-opacity);
}

dl.metadata dd {
    margin-inline-start: .5em;
    opacity: var(--defocus-opacity);
}

div.index {
    background-color: var(--bg-color);
    position: absolute;
    float: left;
    left: var(--text-width);
    margin: 0 var(--space);
    padding: 1em 0;
    width: calc(var(--full-bleed) - var(--text-width));
}

li p {
    margin: 0;
    padding: 0;
}

li ul, li ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

:is(body, article) > p:has(+ ul) {
    margin-bottom: 0;
    padding-bottom: 0;
}

p + ul {
    margin-top: 0;
    padding-top: 0;
}

blockquote {
    background-color: var(--bg-highlight);
    max-width: var(--full-bleed);
    overflow: auto;
    padding: 0.5em 2rem;
    margin: 0.5em var(--space);
}

pre {
    background-color: var(--bg-highlight);
    max-width: var(--full-bleed);
    overflow: auto;
    padding: 0.5em 2rem;
    margin: 0.5em var(--space);
    font-family: 'Berkeley Mono', monospace;
    font-size: 1rem;
}

p:has(img) {
    margin: 0;
    padding: 0;
}

img {
    max-width: var(--full-bleed);
    margin: 1rem 2rem;
}

code {
    font-family: 'Berkeley Mono', monospace;
    font-size: .9rem;
}

ul, ol {
    max-width: var(--text-width);
    margin: 0 var(--space);
    padding: 1rem 2rem;
}

li > ul {
    margin: 0 0;
}

table {
    background-color: var(--bg-highlight);
    font-family: 'Berkeley Mono', monospace;
    font-size: .9rem;
    width: var(--full-bleed);
    margin: 0 var(--space);
    padding: 1rem 2rem;
}

table th {
    border-bottom: solid 1px var(--bg-accent);
}

a:link, a:visited {
    border-bottom: solid 1px var(--bg-accent);
    color: var(--highlight);
    text-decoration: none;
}

a:active, a:hover {
    background-color: var(--bg-highlight);
    border-bottom-width: 1px;
}

.sitemap-meta {
    font-size: .7em;
}

.frontispiece {
    /* color: var(--highlight); */
    margin-top: var(--space);
    padding-top: 1em;
    max-width: var(--text-width);
}

.fin {
    max-width: var(--full-bleed);
    text-align: right;
    padding-right: 1rem;
}