.blog-detail-page {
    background:
        radial-gradient(circle at top left, rgba(214, 231, 226, 0.68), transparent 34%),
        linear-gradient(180deg, #f8f2e8 0%, #f7f9f7 48%, #ffffff 100%);
}

.blog-detail-hero {
    background: linear-gradient(135deg, #f5eee3 0%, #fffdf8 44%, #eef5f4 100%);
    box-shadow: 0 28px 64px rgba(15, 34, 30, 0.08);
}

.blog-detail-badge {
    background: rgba(11, 94, 76, 0.08);
    color: #0b5e4c;
    border: 1px solid rgba(11, 94, 76, 0.14);
}

.blog-detail-top-author {
    color: #153931;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.blog-detail-top-author:hover {
    color: #0b5e4c;
}

.blog-detail-title {
    color: #182724;
    letter-spacing: -0.04em;
    max-width: none;
    width: 100%;
}

.blog-detail-lead {
    color: #314541;
    font-size: clamp(1.18rem, 1.08rem + 0.28vw, 1.34rem);
    line-height: 1.8;
    max-width: 64rem;
}

.blog-detail-top-meta {
    color: #6b7a75;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.blog-detail-inline-author {
    color: #153931;
    font-weight: 600;
    text-decoration: none;
}

.blog-detail-inline-author:hover {
    color: #0b5e4c;
}

.blog-detail-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.blog-detail-meta-separator {
    color: #9aac9f;
}

.blog-detail-hero-media {
    border-radius: 2rem;
    overflow: hidden;
    background: rgba(10, 30, 28, 0.08);
}

.blog-detail-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.blog-detail-main {
    min-width: 0;
    width: 100%;
}

.blog-detail-content-block + .blog-detail-content-block {
    margin-top: 2.5rem;
}

.blog-block-richtext .blog-article-content {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(20, 41, 36, 0.07);
    border-radius: 2rem;
    box-shadow: 0 20px 42px rgba(15, 34, 30, 0.06);
    padding: 2.25rem 2.5rem;
}

.blog-article-content {
    color: #182724;
    font-size: clamp(1.14rem, 1.05rem + 0.24vw, 1.28rem);
    line-height: 1.95;
    font-weight: 400;
}

.blog-article-content > *:first-child {
    margin-top: 0;
}

.blog-article-content > *:last-child {
    margin-bottom: 0;
}

.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
    color: #13211e;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-top: 2.5rem;
    margin-bottom: 1.1rem;
}

.blog-article-content h2 {
    font-size: clamp(1.6rem, 1.42rem + 0.58vw, 2.05rem);
}

.blog-article-content h3 {
    font-size: clamp(1.35rem, 1.18rem + 0.5vw, 1.8rem);
}

.blog-article-content p,
.blog-article-content ul,
.blog-article-content ol,
.blog-article-content blockquote {
    margin-bottom: 1.5rem;
}

.blog-article-content p {
    font-size: clamp(1.08rem, 1.02rem + 0.12vw, 1.17rem);
}

.blog-article-content ul,
.blog-article-content ol,
.blog-article-content li {
    font-size: clamp(1.04rem, 0.99rem + 0.1vw, 1.12rem);
}

.blog-article-content ul,
.blog-article-content ol {
    padding-left: 1.35rem;
}

.blog-article-content li + li {
    margin-top: 0.45rem;
}

.blog-article-content a {
    color: #0b5e4c;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.blog-article-content strong,
.blog-article-content b {
    color: #13211e;
    font-weight: 700;
}

.blog-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 1.5rem;
}

.blog-article-content blockquote {
    margin-left: 0;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid rgba(11, 94, 76, 0.28);
    border-radius: 1.25rem;
    background: rgba(11, 94, 76, 0.05);
    color: #233632;
}

.blog-author-card {
    border-radius: 2rem;
    background: linear-gradient(145deg, #f5eee3 0%, #f8faf8 100%);
    box-shadow: 0 28px 60px rgba(15, 34, 30, 0.08);
}

.blog-author-card-inner {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
}

.blog-author-avatar-wrap {
    flex: 0 0 auto;
}

.blog-author-avatar {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 12px 24px rgba(15, 34, 30, 0.14);
}

.blog-author-body {
    min-width: 0;
}

.blog-author-eyebrow {
    color: #6b7a75;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.blog-author-name {
    color: #182724;
    font-size: clamp(1.6rem, 1.4rem + 0.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.blog-author-name a {
    color: inherit;
    text-decoration: none;
}

.blog-author-name a:hover {
    color: #0b5e4c;
}

.blog-author-bio {
    color: #263935;
    line-height: 1.75;
}

.blog-author-bio > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199.98px) {
    .blog-detail-title {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .blog-detail-hero {
        border-radius: 1.5rem !important;
        padding: 1.5rem !important;
    }

    .blog-article-content {
        font-size: 1.06rem;
        line-height: 1.85;
    }

    .blog-article-content p {
        font-size: 1.04rem;
    }

    .blog-article-content ul,
    .blog-article-content ol,
    .blog-article-content li {
        font-size: 1.01rem;
    }

    .blog-block-richtext .blog-article-content {
        border-radius: 1.5rem;
        padding: 1.5rem 1.25rem;
    }

    .blog-sidebar-card {
        border-radius: 1.35rem;
    }

    .blog-author-card-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.5rem;
    }

    .blog-author-avatar {
        width: 88px;
        height: 88px;
    }
}