@font-face {
    font-family: Piazzolla;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/piazzolla.woff2) format("woff2");
}
@font-face {
    font-family: Piazzolla;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/piazzolla-italic.woff2) format("woff2");
}

:root {
    --primary: #1f1f1d;
    --secondary: #787670;
    --foreground: #555451;
    --background: #fff;
    --tertiary: #d9d9d6;
    --content: 620px;
    --gap: 1.75rem;
    --small: 0.833rem;
    --h1: clamp(2.074rem, 2.074rem + ((1vw - 0.2rem) * 2.146), 2.986rem);
    --h2: clamp(1.728rem, 1.728rem + ((1vw - 0.2rem) * 0.814), 2.074rem);
    --h3: clamp(1.2rem, 1.2rem + ((1vw - 0.2rem) * 1.242), 1.728rem);
    --h4: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.471), 1.2rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: var(--gap);
    background: var(--background);
    color: var(--foreground);
    font-family: Piazzolla, Georgia, serif;
    font-size: clamp(0.833rem, 0.833rem + ((1vw - 0.2rem) * 0.393), 1rem);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration-color: var(--primary);
    text-decoration-thickness: .5px;
    text-underline-offset: .1em;
}
a:hover { color: var(--secondary); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    color: var(--primary);
    font-weight: 700;
    line-height: calc(1em + 0.75rem);
    margin: 0;
}
h1 { font-size: var(--h1); line-height: calc(1em + 0.4375rem); }
h2 { font-size: var(--h2); line-height: calc(1em + 0.5rem); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

img, iframe { max-width: 100%; }
img { height: auto; }

.avatar { border-radius: 9999px; display: block; }

/* Landing page */
.home {
    min-height: calc(90vh - 2 * var(--gap));
    max-width: var(--content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.home .avatar { width: 140px; height: 140px; object-fit: cover; }
.home h1 { margin: 2.625rem 0 0.875rem; }
.home p { margin: var(--gap) 0 0; }

.social {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.social a { display: block; line-height: 0; color: var(--primary); }
.social a:hover { color: var(--secondary); }
.social svg { fill: currentColor; }

/* Posts */
.post header, .post main { max-width: var(--content); margin: 0 auto; }
.post header { padding: 1.75rem 0 3.5rem; }
.post .avatar-link { display: inline-block; line-height: 0; }
.post .avatar { width: 70px; height: 70px; object-fit: cover; }
.post-title {
    font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.471), 1.2rem);
    font-weight: 400;
    line-height: 1.75;
}
.post-meta {
    margin: 0.44rem 0 0;
    color: var(--secondary);
    font-size: var(--small);
}
.post-content { margin-top: 3.5rem; padding-bottom: 5.25rem; overflow-wrap: break-word; }
.post-content > * { margin-top: var(--gap); margin-bottom: 0; }
.post-content > :first-child { margin-top: 0; }
.post-content li + li { margin-top: 0.44rem; }

.post-content pre {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
    line-height: 1.6;
    padding: 1rem 1.25rem;
    background: #f6f6f4;
    border-radius: 4px;
    overflow-x: auto;
}
.post-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.post-content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.25rem;
    border-left: 1px solid var(--primary);
}
.post-content blockquote > * { margin: 0; }
.post-content blockquote > * + * { margin-top: 0.875rem; }
.post-content hr { border: 0; border-top: 1px solid var(--tertiary); }
.post-content figure { margin-left: 0; margin-right: 0; }
.post-content .gist { font-size: 0.85rem; line-height: 1.5; }

.post-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.post-content .wp-block-button__link {
    display: inline-block;
    background: var(--primary);
    color: var(--background);
    border-radius: 999px;
    font-size: var(--small);
    line-height: 1.5;
    padding: 8px 32px;
    text-decoration: none;
}
.post-content .wp-block-button__link:hover { background: var(--secondary); color: var(--background); }