@font-face {
    font-family: "charter";
    src: url("fonts/charter_regular.woff2") format("woff2");
}
@font-face {
    font-family: "charter";
    src: url("fonts/charter_italic.woff2") format("woff2");
    font-style: italic;
}
@font-face {
    font-family: "charter";
    src: url("fonts/charter_bold.woff2") format("woff2");
    font-weight: bold;
}
:root { color-scheme: light dark; }
body {
    font-family: "charter", serif;
    color: light-dark(#222, #ddd);
    background-color: light-dark(#ccc, #333);
    margin: auto;
    padding-inline: 2ch;
    max-width: 66ch;
}
:any-link {
    color: unset;
    text-decoration-color: hwb(from currentColor h w b / 0.6);
}
:hover { text-decoration-style: wavy }
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h1 {
        margin-inline: auto;
        font-size: 2.5rem;
    }
    address { padding: 1ch; }
}
address ul {
    padding: 0;
    list-style: none;
}
h2 {
    font-size: unset;
    margin-block-end: unset;
    margin-block-start: 0.25rem;
    border-top: 1px solid;
}
h2 + p, h2 + article { margin-block: unset; }
main p {
    text-indent: 3ch;
    margin-block: unset;
}
article {
    margin-block: 0.5em;
    * { margin-block: unset; }
    hgroup {
        h3 { font-size: 1.5em; }
        p { text-align: end; }
    }
    > ul { padding-inline-start: 3ch; }
}
aside {
    font-style: italic;
    font-size: 0.75rem;
}
textarea {
    border: none;
    padding: unset;
    margin: 0;
    font: inherit;
    background: unset;
    color: unset;
}
@media print {
    section, article { break-inside: avoid; }
    a { text-decoration: none; }
}
@page { margin-block: auto; }