/* =============================================================================
   Monochrome — Typography
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mono-font-sans);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--mono-text);
    margin: 0 0 .5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); letter-spacing: -.03em; font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 1rem + .4vw, 1.375rem); }
h5 { font-size: 1.125rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

p {
    margin: 0 0 1.25em;
    text-wrap: pretty;
}

strong, b { font-weight: 700; }
em, i     { font-style: italic; }

small { font-size: .875em; color: var(--mono-muted); }

code, kbd, pre, samp {
    font-family: var(--mono-font-mono);
    font-size: .92em;
}

code {
    background: var(--mono-surface);
    padding: .15em .4em;
    border-radius: var(--mono-radius-sm);
    border: 1px solid var(--mono-border);
}

pre {
    padding: 1.25rem 1.5rem;
    background: var(--mono-surface);
    border: 1px solid var(--mono-border);
    border-radius: var(--mono-radius);
    overflow-x: auto;
    line-height: 1.5;
}
pre code {
    background: none;
    padding: 0;
    border: 0;
    border-radius: 0;
}

blockquote {
    margin: 2rem 0;
    padding: 1rem 0 1rem 1.5rem;
    border-left: 3px solid var(--mono-text);
    font-size: 1.15em;
    font-style: italic;
    color: var(--mono-text);
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; margin-top: .75rem; font-size: .875rem; font-style: normal; color: var(--mono-muted); }

ul, ol { padding-left: 1.25rem; margin: 0 0 1.25em; }
li + li { margin-top: .25rem; }

dl { margin: 0 0 1.5em; }
dt { font-weight: 600; }
dd { margin: 0 0 1em; color: var(--mono-muted); }

.entry-content a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--mono-border); transition: color .2s var(--mono-easing), text-decoration-color .2s var(--mono-easing); }
.entry-content a:hover { text-decoration-color: currentColor; }

.lead {
    font-size: 1.25rem;
    color: var(--mono-muted);
    line-height: 1.5;
}

.eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mono-muted);
}