/*
 * Original Pronunciation Folio build-log components.
 * Font Awesome Free 6.5.2 subset: Icons CC BY 4.0; font SIL OFL 1.1; CSS MIT.
 * https://fontawesome.com/license/free
 */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fonts/fa-solid-900.woff2") format("woff2");
}

.fa-solid {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-rendering: auto;
}
.fa-scroll::before { content: "\f70e"; }
.fa-scale-balanced::before { content: "\f24e"; }
.fa-gears::before { content: "\f085"; }
.fa-table-columns::before { content: "\f0db"; }
.fa-link::before { content: "\f0c1"; }
.fa-bug::before { content: "\f188"; }
.fa-book-open::before { content: "\f518"; }
.fa-wand-magic-sparkles::before { content: "\e2ca"; }
.fa-globe::before { content: "\f0ac"; }
.fa-circle-check::before { content: "\f058"; }

:root {
    --blog-entry-surface: rgba(253, 252, 250, 0.72);
    --blog-entry-surface-hover: rgba(253, 252, 250, 0.9);
    --blog-entry-shadow: 0 1px 0 rgba(16, 16, 16, 0.04);
}

html[data-theme="dark"] {
    --blog-entry-surface: rgba(42, 39, 33, 0.98);
    --blog-entry-surface-hover: rgba(49, 45, 38, 0.98);
    --blog-entry-shadow: 0 1px 0 rgba(242, 235, 221, 0.06);
}

.blog-intro { max-width: 64ch; }
.blog-timeline {
    list-style: none;
    display: grid;
    gap: 1rem;
    margin: 2.2rem 0 0;
    padding: 0;
}
.blog-entry {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.15rem;
    border: 1px solid var(--stone);
    background: var(--blog-entry-surface);
    box-shadow: var(--blog-entry-shadow);
    transition: background-color 160ms ease, border-color 160ms ease;
}
.blog-entry:hover { background: var(--blog-entry-surface-hover); }
.post-marker {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--parchment);
    background: var(--tudor-red);
}
.blog-entry h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 500; }
.blog-entry h2 a { color: inherit; }
.blog-entry p { margin: 0.45rem 0 0; }
.blog-entry time, .blog-entry .entry-subject, .reading .quote-source { font-family: var(--meta); color: var(--ink-soft); font-size: 0.76rem; letter-spacing: 0.025em; }
.blog-entry .entry-subject { display: block; margin-top: 0.25rem; text-transform: uppercase; }
.reading .post-heading { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.reading .post-heading .post-marker { margin-top: 0.3rem; }
.reading .byline { margin-top: 0; }
.reading .quote-source { margin: 0.7rem 0 0; }
.reading .in-brief { border-left: 3px solid var(--gold); padding-left: 1rem; }
.reading .post-nav { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--stone); }
.reading .post-nav a { font-family: var(--meta); font-size: 0.75rem; }

@media (max-width: 520px) {
    .blog-entry { gap: 0.75rem; padding: 1rem; }
    .post-marker { width: 2.25rem; height: 2.25rem; }
    .reading .post-heading { gap: 0.75rem; }
}