* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 16px; line-height: 1.4; min-height: 100%;}
body {background: white; color: #101010; font-family: sans-serif; padding: 1rem; display: flex; flex-direction: column; min-height: 100svh;}
a {color: rgb(16, 16, 16, 0.6);}
a:hover {color: #101010;}
img {max-width: 100%; display: block;}
.header {display: flex; justify-content: space-between;}
.footer {font-style: italic;}
.header ul {display: none; gap: 1.5rem; margin-right: 3rem;}
.menuopen .header ul {display: flex;}
.header ul li {list-style: none;}
.header a, .footer a {text-decoration: none; }
.header > a, .footer > div a {color: #101010;}
.header input {
    border: 0; 
    width: 3rem; 
    height: 3rem; 
    color: transparent; 
    overflow: hidden; 
    background: url(/img/menu.svg) center center / 2rem auto no-repeat;
    position: absolute;
    top: 0.2rem;
    right: 0.5rem;
    cursor: pointer;
}
.menuopen .header input {background-image: url(/img/close.svg);}
.main {margin: calc(2.5vw + 5rem) auto calc(2.5vw + 7rem); max-width: 50rem; flex-grow: 1;}
.main ul, .main ol {margin-left: 2em;}
.main ul:not(:last-child), .main ol:not(:last-child), .main p:not(:last-child) {margin-bottom: 1.4em;}
h1 {font-size: 2.25rem;}
h2 {font-size: 1.75rem;}
h3 {font-size: 1.25rem;}
h1, h2, h3 {margin-bottom: 0.75em;line-height: 1.2;}
blockquote {font-size: 175%; font-style: italic; margin-block: 1.2em; line-height: 1.2;}
hr {height: 1px; border: 0; background: #101010; margin-block: 2em;}
h1 + p > img {margin-block: -0.35rem 1.4rem;}

.person {margin-block: 3em;}
.person > div:nth-child(1) img {margin-bottom: 1em; width: 20em;}

@media only screen and (max-width: 700px) {
    .header, .header ul {flex-direction: column; gap: 0;}
    .header ul {padding-block: 0.5em; display: none;}
    .header ul li a {display: block; padding-block: 0.25em;}
    .main {margin-top: 4rem;}
    .header input {display: block;}
    .menuopen .header ul {display: block;}
}