.bl-root {
    --bl-radius-2xl: 1rem;
    --bl-radius-3xl: 1.5rem;
    --bl-shadow-lg: 0 10px 25px rgba(0,0,0,.08);
    --bl-shadow-2xl: 0 20px 45px rgba(0,0,0,.12);
}

.bl-container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem
}

.bl-section {
    padding: 5rem 0
}

.bl-center {
    text-align: center
}

.bl-mt-12 {
    margin-top: 3rem
}

.bl-dot {
    color: var(--muted);
    margin: 0 .5rem
}

.bl-text-link {
    background: none;
    border: none;
    color: var(--brand-purple);
    font-weight: 600;
    cursor: pointer;
}

    .bl-text-link:hover {
        text-decoration: underline
    }

.bl-icon-inline {
    margin-left: .5rem
}

.bl-blog-hero {
    position: relative;
    overflow: hidden;
    height: 70vh;
    padding-top: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hero-gradient);
    color: #fff;
    text-align: center;
}

.bl-hero-bg {
    position: absolute;
    inset: 0;
    opacity: .12
}

.bl-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(16px);
    background: #fff;
    animation: bl-float 8s ease-in-out infinite
}

.bl-shape-sm {
    width: 8rem;
    height: 8rem;
    top: 5rem;
    left: 5rem
}

.bl-shape-lg {
    width: 12rem;
    height: 12rem;
    bottom: 10rem;
    right: 8rem;
    filter: blur(28px)
}

.bl-shape-xs {
    width: 6rem;
    height: 6rem;
    top: 50%;
    left: 35%;
    background: var(--brand-teal);
    filter: blur(12px)
}

.bl-delay-2 {
    animation-delay: -2s
}

.bl-delay-4 {
    animation-delay: -4s
}

@keyframes bl-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-14px)
    }
}

.bl-hero-content {
    text-align: center;
    z-index: 1;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.5rem
}

.bl-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.8rem;
}

.bl-hero-title {
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    font-size: 2.75rem
}

.bl-hero-subtitle {
    font-size: 1.5rem;
    opacity: .9;
    margin-bottom: 1rem;
    font-weight: 300
}

.bl-hero-desc {
    max-width: 42rem;
    margin: 0 auto;
    opacity: .85
}

@media (min-width:768px) {
    .bl-hero-title {
        font-size: 4rem
    }

    .bl-hero-subtitle {
        font-size: 1.5rem
    }
}

.bl-categories {
    background: var(--bg)
}

.bl-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center
}

.bl-category-tag {
    border: none;
    border-radius: 9999px;
    padding: .75rem 1.25rem;
    background: var(--bg-soft);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

    .bl-category-tag:hover {
        background: color-mix(in oklab, var(--bg-soft), var(--text) 8%)
    }

    .bl-category-tag.bl-is-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    }

.bl-section-head {
    text-align: center;
    margin-bottom: 3rem
}

.bl-section-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0 0 .75rem;
    color: var(--text)
}

.bl-section-sub {
    color: var(--text-soft);
    font-size: 1.125rem
}

.bl-gradient-text {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bl-featured-card {
    background: var(--elev);
    border-radius: var(--bl-radius-3xl);
    overflow: hidden;
    box-shadow: var(--shadow); 
    position: relative;
    isolation: isolate;
}

    .bl-featured-card::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        z-index: -1;
        filter: blur(16px);
        background: radial-gradient(600px 200px at 10% 0%, color-mix(in oklab, var(--brand-blue), transparent 85%), transparent 60%), radial-gradient(600px 200px at 90% 100%, color-mix(in oklab, var(--brand-purple), transparent 85%), transparent 60%);
    }

.bl-featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0
}

@media (min-width:768px) {
    .bl-featured-grid {
        grid-template-columns: 1fr 1fr
    }
}

.bl-featured-media {
    position: relative;
    height: 16rem
}

@media (min-width:768px) {
    .bl-featured-media {
        height: auto
    }
}

.bl-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.bl-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: .35rem .75rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 700;
    color: #fff
}

.bl-badge-danger {
    background: var(--brand-red)
}

.bl-badge-primary {
    background: var(--brand-blue)
}

.bl-badge-purple {
    background: var(--brand-purple)
}

.bl-badge-teal {
    background: var(--brand-teal)
}

.bl-badge-green {
    background: #22c55e
}

.bl-featured-body {
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.bl-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-soft);
    margin-bottom: 1rem
}

.bl-chip {
    padding: .25rem .6rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700
}

.bl-chip-primary {
    background: color-mix(in oklab, var(--brand-blue) 12%, transparent);
    color: var(--brand-blue)
}

.bl-date {
    font-size: .9rem;
    color: var(--text-soft)
}

.bl-featured-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
    margin: .25rem 0 1rem
}

.bl-featured-text {
    color: var(--text-soft);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 1.5rem
}

.bl-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto; /* push footer to bottom of the card body */
}

.bl-author {
    display: flex;
    align-items: center;
    gap: .75rem
}

.bl-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    object-fit: cover
}

.bl-author-name {
    font-weight: 700;
    color: var(--text);
    margin: 0
}

.bl-author-meta {
    color: var(--text-soft);
    font-size: .875rem;
    margin: 0
}

.bl-link-button {
    background: transparent;
    border: none;
    color: var(--brand-purple);
    font-weight: 700;
    cursor: pointer;
    padding: .5rem .75rem;
    border-radius: .6rem;
    transition: background .2s ease;
}

    .bl-link-button:hover {
        background: color-mix(in oklab, var(--brand-purple) 10%, transparent)
    }


.bl-post-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr
}

@media (min-width:768px) {
    .bl-post-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (min-width:1024px) {
    .bl-post-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

.bl-blog-card {
    background: var(--elev);
    border-radius: var(--bl-radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
    height:100%; /* ensure the card stretches to the grid row height */
}

    .bl-blog-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--bl-shadow-2xl);
    }

.bl-card-media {
    position: relative;
    height: 12rem
}

.bl-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex:11 auto;  /* make body grow to fill remaining space so footer can stick to bottom */
}

.bl-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-soft);
    font-size: .8125rem;
    margin-bottom: .25rem
}

.bl-card-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text);
    margin: 0
}

.bl-card-text {
    color: var(--text-soft);
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0 0 .5rem
}

.bl-social {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--muted)
}

    .bl-social i {
        margin-left: .75rem
    }

.bl-button-gradient {
    border: none;
    border-radius: 1rem;
    padding: 1rem 2rem;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
}


.bl-highlighted-section {
    outline: 2px solid var(--brand-purple);
    background-color: color-mix(in oklab, var(--brand-purple) 12%, transparent)
}

.bl-edit-button {
    position: absolute;
    z-index: 1000
}


::-webkit-scrollbar {
    display: none
}

html, body {
    -ms-overflow-style: none;
    scrollbar-width: none
}