/* Blog */

/* Blog: Emerald #004E45, Neon canopy #DEFFAF, Red dune #801620, Plasma #FFC6FF */
.blog-page {
    --emerald: #004E45;
    --canopy: #DEFFAF;
    --dune: #801620;
    --plasma: #FFC6FF;
    background: #ffffff;
    color: var(--emerald);
}
.blog-page ::selection {
    background: var(--emerald);
    color: var(--canopy);
}
.blog-hero {
    background: var(--emerald);
    color: var(--canopy);
    padding: 3.5rem 0 2.75rem;
}
.blog-hero h1,
.blog-hero h2,
html.dark .blog-hero h1,
html.dark .blog-hero h2 {
    color: var(--canopy);
}
.blog-hero__kicker {
    color: var(--plasma);
    letter-spacing: 0.22em;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.blog-hero__lede {
    color: var(--canopy);
    font-size: 0.95rem;
}
.blog-feed,
.blog-post-body {
    background: #ffffff;
    color: #111;
    padding: 2.5rem 0 4.5rem;
}
html.dark .blog-feed,
html.dark .blog-post-body {
    background: #121014;
    color: #D6D0C8;
}
.blog-post-body__inner {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 768px) {
    .blog-post-body__inner {
        padding: 0 3rem;
    }
}
.blog-feed__empty-title { color: var(--dune); }
.blog-feed__empty-copy { color: var(--emerald); }
.blog-card h3,
.blog-card h3 a,
html.dark .blog-card h3,
html.dark .blog-card h3 a {
    color: var(--emerald);
}
.blog-card h3 a:hover,
html.dark .blog-card h3 a:hover {
    color: var(--dune);
}
.blog-card p { color: var(--emerald); }
.blog-card__meta {
    color: var(--dune);
    border-color: rgba(128, 22, 32, 0.28);
}
.blog-card__author { color: var(--dune); }
.blog-card__placeholder {
    background: var(--canopy);
    border: 1px solid var(--emerald);
    color: var(--emerald);
}
.blog-card img {
    outline: 1px solid #e5e5e5;
}
.blog-prose {
    color: #111;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
}
html.dark .blog-prose {
    color: #D6D0C8;
}
.blog-prose p,
.blog-prose li,
.blog-prose span,
.blog-prose blockquote {
    color: inherit;
}
.blog-prose p {
    margin: 0 0 1.15rem;
}
.blog-prose h1,
.blog-prose h2,
.blog-prose h3,
.blog-prose h4,
.blog-prose h5,
.blog-prose h6,
html.dark .blog-prose h1,
html.dark .blog-prose h2,
html.dark .blog-prose h3,
html.dark .blog-prose h4,
html.dark .blog-prose h5,
html.dark .blog-prose h6 {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #111;
    margin: 2.1rem 0 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e7eb;
    line-height: 1.2;
}
html.dark .blog-prose h1,
html.dark .blog-prose h2,
html.dark .blog-prose h3,
html.dark .blog-prose h4,
html.dark .blog-prose h5,
html.dark .blog-prose h6 {
    color: #D6D0C8;
    border-bottom-color: #3A353C;
}
.blog-prose a,
html.dark .blog-prose a,
html.dark .blog-prose a:hover {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid #FF6464;
    padding-bottom: 1px;
}
.blog-prose a.text-xs,
.blog-prose a.align-super,
.blog-prose sup a {
    border-bottom: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: #FF3B1F;
    vertical-align: super;
}
.blog-prose img {
    outline: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    height: auto;
}
.blog-prose blockquote {
    border-left: none;
    border-top: 2px solid #111;
    padding: 1rem 0 0;
    margin: 1.75rem 0;
}
html.dark .blog-prose blockquote {
    border-top-color: #D6D0C8;
}
.blog-prose ul,
.blog-prose ol {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.blog-prose li {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.85rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    letter-spacing: 0;
}
html.dark .blog-prose li {
    border-bottom-color: #3A353C;
}
.blog-prose strong {
    font-weight: 700;
    border-bottom: 2px solid #FF6464;
    padding-bottom: 1px;
}
.blog-prose li:nth-child(5n + 1) strong { border-bottom-color: #FF6464; }
.blog-prose li:nth-child(5n + 2) strong { border-bottom-color: #50A8EB; }
.blog-prose li:nth-child(5n + 3) strong { border-bottom-color: #D193FF; }
.blog-prose li:nth-child(5n + 4) strong { border-bottom-color: #92DBFF; }
.blog-prose li:nth-child(5n + 5) strong { border-bottom-color: #FF9F43; }
.blog-prose p strong { border-bottom-color: #FF9F43; }
.blog-prose tbody tr:nth-child(5n + 1) td:first-child { box-shadow: inset 0 -2px 0 #FF6464; }
.blog-prose tbody tr:nth-child(5n + 2) td:first-child { box-shadow: inset 0 -2px 0 #50A8EB; }
.blog-prose tbody tr:nth-child(5n + 3) td:first-child { box-shadow: inset 0 -2px 0 #D193FF; }
.blog-prose tbody tr:nth-child(5n + 4) td:first-child { box-shadow: inset 0 -2px 0 #92DBFF; }
.blog-prose tbody tr:nth-child(5n + 5) td:first-child { box-shadow: inset 0 -2px 0 #FF9F43; }
.blog-prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.03em;
    margin: 0;
    min-width: 0;
}
.blog-prose .overflow-x-auto {
    overflow-x: auto;
    margin: 0 0 2rem;
}
.blog-prose th,
.blog-prose td {
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: transparent;
    padding: 0.7rem 0.9rem 0.7rem 0;
    text-align: left;
    color: inherit;
    vertical-align: top;
}
html.dark .blog-prose th,
html.dark .blog-prose td {
    border-bottom-color: #3A353C;
}
.blog-prose thead th {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF3B1F;
}
.blog-prose tbody tr:hover td {
    color: #FF6464;
}
.blog-prose [class*="rounded"] {
    border-radius: 0;
}
.blog-prose [class*="shadow"] {
    box-shadow: none;
}
.blog-prose [class*="bg-gray"],
.blog-prose [class*="bg-v-yellow"],
.blog-prose [class*="bg-black"] {
    background: transparent;
}
.blog-prose > div[class*="bg-"],
.blog-prose > div[class*="border"] {
    border: none;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}
.blog-prose [class*="border-l-4"],
.blog-prose [class*="border-v-yellow"] {
    border-left: none;
    border-top: 2px solid #111;
    border-radius: 0;
    padding: 1rem 0;
    margin: 1.75rem 0;
}
html.dark .blog-prose [class*="border-l-4"],
html.dark .blog-prose [class*="border-v-yellow"] {
    border-top-color: #D6D0C8;
}
.blog-prose .font-grotesk {
    font-family: 'JetBrains Mono', monospace;
}
.blog-prose .text-v-gray,
.blog-prose .text-v-black,
.blog-prose .text-v-green,
.blog-prose .text-gray-500 {
    color: inherit;
}
.blog-post-body__rule {
    border-top: 1px solid #e5e5e5;
}
.blog-back {
    color: #111;
    border-bottom: 2px solid #FF6464;
}
html.dark .blog-back,
html.dark .blog-back:hover {
    color: #D6D0C8;
}

/* Page overrides */
    .blog-page { --emerald:#004E45; --canopy:#DEFFAF; --dune:#801620; --plasma:#FFC6FF; }
    .blog-hero {
        background: #004E45;
        color: #DEFFAF;
        padding: 3.5rem 0 2.75rem;
    }
    .blog-hero h1, html.dark .blog-hero h1 { color: #DEFFAF; }
    .blog-hero__kicker {
        color: #FFC6FF;
        letter-spacing: 0.22em;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 1.25rem;
    }
    .blog-hero__lede { color: #DEFFAF; }
    .blog-feed {
        background: #ffffff;
        color: #004E45;
        padding: 3.5rem 0 6rem;
    }
    html.dark .blog-feed { background: #ffffff; color: #004E45; }
    .blog-feed h3,
    .blog-feed h3 a,
    html.dark .blog-feed h3,
    html.dark .blog-feed h3 a { color: #004E45; }
    .blog-card p { color: #004E45; }
    .blog-card__meta,
    .blog-card__author,
    .blog-feed__empty-title { color: #801620; }
    .blog-feed__empty-copy { color: #004E45; }
    .blog-card__meta { border-color: rgba(128, 22, 32, 0.28); }
    .blog-card__placeholder {
        background: #DEFFAF;
        border: 1px solid #004E45;
        color: #004E45;
    }
    .blog-hero {
        background: #004E45;
        color: #DEFFAF;
    }
    .blog-hero h1, html.dark .blog-hero h1 { color: #DEFFAF; }
    .blog-hero__kicker { color: #FFC6FF; }
    .blog-hero__lede { color: #DEFFAF; }