/* =============================================================================
   BLOG SINGLE — EDITORIAL THEME  ("bse" = blog single editorial)
   A distinct dark forest-green + gold reading experience for individual
   Journal articles, layered on top of blog.css. Everything is scoped under
   .bse-page so it cannot leak into blog.php, the homepage, or anywhere else.
   Reuses the existing dynamic markup in blog-single.php (blog-crumbs,
   blog-meta, blog-body, blog-aside, faq-accordion, blog-related, etc.) —
   no PHP structure was renamed, only re-skinned.
   ========================================================================= */

.bse-page {
    --bse-void:       #0a1710;
    --bse-forest:     #0f2118;
    --bse-forest-2:   #13291d;
    --bse-sand:       #cdbf9d;
    --bse-sand-2:     #d8cdb1;
    --bse-cream:      #f2ede0;
    --bse-sage:       #bfc6b6;
    --bse-ink:        #16301f;
    --bse-gold:       #c7a565;
    --bse-gold-lt:    #e4c88f;
    --bse-gold-line:  rgba(199, 165, 101, .28);
    --bse-hair:       rgba(242, 237, 224, .14);
    --bse-serif:      'NanumMyeongjo';
    --bse-read:       'Newsreader', Georgia, serif;
    --bse-sans:       'Jost', Arial, sans-serif;

    background: var(--bse-forest);
    color: var(--bse-cream);
    font-family: var(--bse-read);
    padding: 56rem 0 60rem;
}

/* ---------------------------------------------------------------- crumbs */
.bse-page .blog-crumbs {
    max-width: 1000rem;
    margin: 0 auto 40rem;
    padding: 0 24rem;
    font-family: var(--bse-sans);
    font-size: max(11px, 13rem);
    letter-spacing: 1.2px;
    color: var(--bse-sage);
}
.bse-page .blog-crumbs a { color: var(--bse-sand-2); }
.bse-page .blog-crumbs a:hover { color: var(--bse-gold-lt); }
.bse-page .blog-crumbs span { color: var(--bse-gold-line); margin: 0 4px; }

/* ------------------------------------------------------------------ head */
.bse-page .blog-single-head { padding: 0 24rem; }

.bse-page .blog-meta {
    font-family: var(--bse-sans);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bse-sage);
    gap: 14rem;
}
.bse-page .blog-meta span { color: var(--bse-sage); }
.bse-page .blog-cat {
    color: var(--bse-gold);
    border-color: var(--bse-gold-line);
}
.bse-page .blog-cat:hover { color: var(--bse-gold-lt); border-color: var(--bse-gold-lt); }

.bse-page .blog-single-head h1 .text-inner {
    font-family: var(--bse-serif);
    font-weight: 400;
    font-style: normal;
    color: var(--bse-cream);
    line-height: 1.2em;
}
.bse-page .blog-single-head h1 em {
    font-style: italic;
    color: var(--bse-gold-lt);
    font-weight: 400;
}

/* Quick-answer callout — repurposes the post excerpt as an AEO-friendly,
   front-loaded direct-answer box instead of a plain standfirst paragraph. */
.bse-page .blog-standfirst {
    max-width: 760rem;
    text-align: left;
    margin: 34rem auto 0;
    border: 1px solid var(--bse-gold-line);
    padding: 26rem 30rem;
    position: relative;
    background: linear-gradient(180deg, rgba(199, 165, 101, .07), transparent);
    font-family: var(--bse-read);
    font-size: max(15px, 17rem);
    color: var(--bse-sand-2);
    opacity: 1;
    line-height: 165%;
}
.bse-page .blog-standfirst::before {
    content: "The Short Answer";
    position: absolute;
    top: -11rem;
    left: 30rem;
    background: var(--bse-forest);
    padding: 0 10rem;
    font-family: var(--bse-sans);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bse-gold);
}

/* ---------------------------------------------------------- stat strip -- */
.bse-stats {
    max-width: 1300rem;
    margin: 56rem auto 0;
    padding: 26rem 24rem;
    background: var(--bse-forest-2);
    border-top: 1px solid var(--bse-hair);
    border-bottom: 1px solid var(--bse-hair);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.bse-stat { text-align: center; padding: 0 10rem; border-left: 1px solid var(--bse-hair); }
.bse-stat:first-child { border-left: 0; }
.bse-stat-num {
    display: block;
    font-family: var(--bse-serif);
    font-size: max(20px, 26rem);
    color: var(--bse-gold-lt);
    margin-bottom: 4rem;
}
.bse-stat-label {
    font-family: var(--bse-sans);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bse-sage);
}

/* -------------------------------------------------------------- media -- */
.bse-page .blog-single-media {
    margin-top: 70rem;
    border: 1px solid var(--bse-hair);
}

/* ------------------------------------------------------------ layout --- */
.bse-page .blog-single-layout { padding: 0 24rem; margin-top: 80rem; }

.bse-page .blog-body { color: var(--bse-sand-2); }
.bse-page .blog-body > p:first-of-type {
    font-size: max(17px, 20rem);
    color: var(--bse-cream);
}
.bse-page .blog-body > p:first-of-type::first-letter {
    font-family: var(--bse-serif);
    font-size: 3.4em;
    float: left;
    line-height: .82;
    padding: 6rem 10rem 0 0;
    color: var(--bse-gold);
}
.bse-page .blog-body h2 {
    font-family: var(--bse-serif);
    color: var(--bse-cream);
    border-top: 1px solid var(--bse-hair);
    padding-top: 36rem;
}
.bse-page .blog-body h3 {
    font-family: var(--bse-serif);
    font-style: italic;
    color: var(--bse-gold-lt);
}
.bse-page .blog-body h4 { color: var(--bse-gold); }
.bse-page .blog-body strong { color: var(--bse-cream); font-weight: 600; }
.bse-page .blog-body a { color: var(--bse-gold-lt); text-decoration-color: var(--bse-gold-line); }
.bse-page .blog-body a:hover { color: var(--bse-gold); }
.bse-page .blog-body ul li::before,
.bse-page .blog-body ol li::before { color: var(--bse-gold); }
.bse-page .blog-body hr { background: var(--bse-hair); }
.bse-page .blog-body table th,
.bse-page .blog-body table td { border-bottom-color: var(--bse-hair); }
.bse-page .blog-body table th { color: var(--bse-gold); }

/* pull-quote treatment for blockquotes inside CMS content, on a sand band */
.bse-page .blog-body blockquote {
    border-left: 0;
    color: var(--bse-ink);
    background: var(--bse-sand);
    margin: 56rem calc(-1 * 24rem) 56rem;
    padding: 50rem 60rem;
    text-align: center;
    font-family: var(--bse-serif);
    font-style: italic;
    font-size: max(20px, 28rem);
}
@media (max-width: 1023px) { .bse-page .blog-body blockquote { margin: 46px 0; padding: 36px 24px; } }

/* -------------------------------------------------------------- aside -- */
.bse-page .blog-aside-inner { border-left-color: var(--bse-hair); }
.bse-page .blog-aside-label { color: var(--bse-gold); }
.bse-page .blog-share ul li a,
.bse-page .blog-tags ul li a { color: var(--bse-sand-2); }
.bse-page .blog-share ul li a:hover { color: var(--bse-gold-lt); }
.bse-page .blog-tags ul li a { border-color: var(--bse-gold-line); }
.bse-page .blog-tags ul li a:hover { color: var(--bse-gold-lt); border-color: var(--bse-gold-lt); }
.bse-page .blog-aside-cta {
    border: 1px solid var(--bse-gold-line);
    padding: 22rem;
}
.bse-page .blog-aside-cta p { color: var(--bse-sand-2); }
.bse-page .blog-aside-cta .link-flash { color: var(--bse-gold-lt); }

/* ---------------------------------------------------------------- FAQ -- */
.bse-page .blog-faq { padding: 0 24rem; }
.bse-page .blog-faq .es-h2,
.bse-page .blog-related .es-h2 { color: var(--bse-cream); font-family: var(--bse-serif);font-size:40px; }
.bse-page .faq-accordion details { border-top-color: var(--bse-hair); }
.bse-page .faq-accordion details:last-child { border-bottom-color: var(--bse-hair); }
.bse-page .faq-accordion summary { color: var(--bse-cream); font-family: var(--bse-serif); }
.bse-page .faq-accordion summary:hover { color: var(--bse-gold-lt); }
.bse-page .faq-accordion summary::after { color: var(--bse-gold); }
.bse-page .faq-accordion .faq-answer p { color: var(--bse-sand-2); }

/* --------------------------------------------------------- prev / next -- */
.bse-page .blog-adjacent { padding: 0 24rem; border-top-color: var(--bse-hair); }
.bse-page .blog-adjacent a { color: var(--bse-cream); }
.bse-page .blog-adjacent a span { color: var(--bse-gold); }
.bse-page .blog-adjacent a:hover strong { color: var(--bse-gold-lt); }

/* ------------------------------------------------------------- related -- */
.bse-page .blog-related { padding: 0 24rem; }
.bse-page .blog-card { background: var(--bse-forest-2); border: 1px solid var(--bse-hair); padding: 18rem; }
.bse-page .blog-card .blog-cat { color: var(--bse-gold); }
.bse-page .blog-card h3 a { color: var(--bse-cream); }
.bse-page .blog-card h3 a:hover { color: var(--bse-gold-lt); }
.bse-page .blog-card p { color: var(--bse-sand-2); }

/* --------------------------------------------------------- closing CTA -- */
.bse-cta {
    margin-top: 110rem;
    padding: 70rem 24rem;
    text-align: center;
    background: var(--bse-forest-2);
    border-top: 1px solid var(--bse-hair);
}
.bse-cta h2 {
    font-family: var(--bse-serif);
    color: var(--bse-cream);
    font-size: max(24px, 34rem);
    margin: 0 0 40rem;
    letter-spacing: 0.01rem;
}
.bse-cta p { color: var(--bse-sage); max-width: 660rem; margin: 0 auto 30rem; font-family: var(--bse-read); }
.bse-cta-row { display: flex; gap: 16rem; justify-content: center; flex-wrap: wrap; }
.bse-btn {
    display: inline-block;
    font-family: var(--bse-sans);
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 15rem 28rem;
    border: 1px solid var(--bse-gold);
    color: var(--bse-gold-lt);
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}
.bse-btn:hover { background: var(--bse-gold); color: var(--bse-void); }
.bse-btn.is-quiet { border-color: var(--bse-hair); color: var(--bse-sand-2); }
.bse-btn.is-quiet:hover { background: transparent; border-color: var(--bse-gold); color: var(--bse-gold-lt); }

@media (max-width: 720px) {
    .bse-stats { grid-template-columns: repeat(2, 1fr); gap: 20rem 0; }
    .bse-stat { border-left: 0; }
}