.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 12rem);
    gap: 2rem;
    align-items: start;
}

.blog-layout > * {
    min-width: 0;
}

.blog-layout article img {
    max-width: 100%;
    height: auto;
}

/* Keep uncoloured marks on Pico's theme defaults. */
.blog-layout article mark.highlight-red {
    --blog-highlight-light: #ffd6d6;
    --blog-highlight-dark: #743b40;
}

.blog-layout article mark.highlight-orange {
    --blog-highlight-light: #ffdfb5;
    --blog-highlight-dark: #69421e;
}

.blog-layout article mark.highlight-yellow {
    --blog-highlight-light: #fff0ad;
    --blog-highlight-dark: #5c501e;
}

.blog-layout article mark.highlight-green {
    --blog-highlight-light: #c9edd5;
    --blog-highlight-dark: #285843;
}

.blog-layout article mark.highlight-blue {
    --blog-highlight-light: #cce5ff;
    --blog-highlight-dark: #294f73;
}

.blog-layout article mark.highlight-purple {
    --blog-highlight-light: #e8d5ff;
    --blog-highlight-dark: #543e72;
}

.blog-layout article mark:is(.highlight-red, .highlight-orange, .highlight-yellow, .highlight-green, .highlight-blue, .highlight-purple) {
    --pico-mark-background-color: var(--blog-highlight-light);
    --pico-mark-color: #1f2937;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .blog-layout article mark:is(.highlight-red, .highlight-orange, .highlight-yellow, .highlight-green, .highlight-blue, .highlight-purple) {
        --pico-mark-background-color: var(--blog-highlight-dark);
        --pico-mark-color: #f9fafb;
    }
}

[data-theme="dark"] .blog-layout article mark:is(.highlight-red, .highlight-orange, .highlight-yellow, .highlight-green, .highlight-blue, .highlight-purple) {
    --pico-mark-background-color: var(--blog-highlight-dark);
    --pico-mark-color: #f9fafb;
}

/* Preserve link underlines while keeping their text readable on every mark. */
.blog-layout article mark a {
    color: inherit;
    text-decoration-color: currentColor;
}

.code-block figcaption {
    margin-bottom: 0.25rem;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.875rem;
    color: var(--pico-muted-color);
}

.code-block pre {
    margin-top: 0;
}

.code-block-content {
    display: flex;
    margin-bottom: var(--pico-spacing);
    overflow-x: auto;
    border-radius: var(--pico-border-radius);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.875em;
    line-height: 1.5;
    /* Match the existing GitHub Dark highlight theme in both site themes. */
    background: #0d1117;
    color: #c9d1d9;
}

.code-block-content pre {
    flex: 1 0 auto;
    margin: 0;
    padding: 1em;
    overflow: visible;
    border-radius: 0;
    font: inherit;
    background: transparent;
    color: inherit;
}

.code-block-content pre > code {
    min-height: 1.5em;
    padding: 0;
    overflow: visible;
    font: inherit;
    background: transparent;
    color: inherit;
}

.code-line-numbers {
    position: sticky;
    left: 0;
    flex: 0 0 auto;
    min-width: 3ch;
    padding: 1em 0.75em;
    border-right: 1px solid #30363d;
    background: inherit;
    color: #8b949e;
    text-align: right;
    -webkit-user-select: none;
    user-select: none;
}

.code-line-numbers > span {
    display: block;
    height: 1.5em;
}

.code-line-numbers > span::before {
    content: attr(data-line);
}

@media (max-width: 768px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
}