@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

:root {
    --measure: 75ch;
    --ratio: 1.4;
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1em;
    --s1: 1.4em;
    --s2: calc( var(--ratio) * var(--s1));
    --s3: calc( var(--ratio) * var(--ratio) * var(--s1));
    --s4: calc( var(--ratio) *  var(--ratio) * var(--ratio) * var(--s1));
    --s5: calc( var(--ratio) *  var(--ratio) * var(--ratio) * var(--ratio) * var(--s1));

    --ink: #000;
    --canvas: #efefef;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: calc(1rem + .4vw);
    color: var(--ink);
    background-color: var(--canvas);
}

body {
    font-family: 'Playfair Display', serif;
    margin: var(--s0);
}

main * + * {
    margin-top: var(--s0);
}

header {
    display: flex;
    align-items: flex-end;
    gap: var(--s-1);
    margin-bottom: var(--s2);
}

header .site__logo {
    max-width: var(--s4);
    max-height: var(--s4);
    object-fit: contain;
}

header .site__name {
    font-size: var(--s2);
}

header .site__motto {
    font-size: var(--s-1);
}

footer {
    margin-top: var(--s2);
}

footer .copyright {
    text-align: center;
    margin-top: var(--s0);
}

main {
    max-width: var(--measure);
    margin-right: auto;
    margin-left: auto;
    margin-top: var(--s0);
    margin-bottom: var(--s0);
    line-height: var(--ratio);
}

blockquote {
    font-style: italic;
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--s1);
    margin-bottom: var(--s1);
}

blockquote * + * {
    margin-top: 0;
}

abbr {
    font-variant: small-caps;
}

ul, ol {
    margin-left: 4ch;
}

h1 {
    font-variant: small-caps;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--s0);
}

main.stack {
    gap: var(--s2);
}

.note__label {
    font-variant: small-caps;
}

.note {
    font-size: var(--s-1);
}

.lead {
    margin-top: var(--s-1);
}