/* ==================================================================
   FOXALIA — blog.css
   Blog : liste et recherche (blog.php), lecture (article.php).
   Chargé uniquement sur ces pages (voir $page['styles']).
================================================================== */

/* ---------- En-tête + recherche ---------- */
.bhero { padding-bottom: 40px; }
.bhero__grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.bhero__intro { max-width: 680px; }
.bhero__intro .page-hero__lead { margin-bottom: 0; }
.bhero__stats { display: flex; margin: 0; padding: 0; list-style: none; }
.bhero__stats li { display: grid; gap: 2px; padding: 4px 22px; border-left: 1px solid var(--color-border-strong); }
.bhero__stats strong { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.bhero__stats span { color: var(--color-muted); font-size: 12.5px; }

.bsearch {
    position: relative;
    margin-top: 34px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    background: var(--color-glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: var(--shadow-md);
}
.bsearch__field { position: relative; display: flex; align-items: center; gap: 8px; }
.bsearch__icon { position: absolute; left: 18px; width: 22px; height: 22px; color: var(--color-muted); pointer-events: none; }
.bsearch__input {
    flex: 1;
    min-width: 0;
    height: 60px;
    padding: 0 56px 0 54px;
    border: 1px solid var(--color-border-strong);
    border-radius: 16px;
    background: var(--color-surface);
    color: var(--color-text);
    font: 500 17px/1 var(--font-body);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.bsearch__input::-webkit-search-cancel-button { display: none; }
.bsearch__input::placeholder { color: color-mix(in srgb, var(--color-muted) 80%, transparent); font-weight: 400; }
.bsearch__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent); }
.bsearch__clear, .bsearch__kbd { position: absolute; top: 50%; transform: translateY(-50%); }
.bsearch__clear {
    right: 56px;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-soft);
    color: var(--color-muted);
}
.bsearch__clear[hidden] { display: none; }
.bsearch__clear:hover { color: var(--color-text); }
.bsearch__clear .icon { width: 16px; height: 16px; }
.bsearch__kbd {
    right: 16px;
    display: none;
    min-width: 28px;
    padding: 3px 8px;
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: 7px;
    color: var(--color-muted);
    font: 600 12px/1.4 var(--font-body);
    text-align: center;
}
.bsearch.is-live .bsearch__kbd { display: block; }
.bsearch.is-live .bsearch__submit { display: none; }
.bsearch.is-live .bsearch__input { padding-right: 100px; }
.bsearch:not(.is-live) .bsearch__clear { display: none; }
.bsearch__submit { height: 60px; padding: 0 22px; border-radius: 16px; }

.bsearch__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.bsearch__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.bchip {
    --tone-a: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-muted);
    font: 600 13.5px/1 var(--font-display);
    transition: all .2s var(--ease);
}
.bchip > .icon { width: 16px; height: 16px; }
.bchip__dot { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -4px; border-radius: 50%; background: linear-gradient(135deg, var(--tone-a), var(--tone-b)); color: #fff; }
.bchip__dot .icon { width: 13px; height: 13px; }
.bchip__count { min-width: 24px; padding: 4px 7px; border-radius: var(--radius-pill); background: var(--color-surface-soft); font-size: 11.5px; text-align: center; }
.bchip:hover { border-color: color-mix(in srgb, var(--tone-a) 50%, var(--color-border-strong)); color: var(--color-text); }
.bchip.is-active { border-color: transparent; background: var(--color-text); color: var(--color-bg); }
.bchip.is-active .bchip__count { background: color-mix(in srgb, var(--color-bg) 18%, transparent); }
.bchip.is-empty { opacity: .45; }

.bsort { position: relative; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--color-muted); font-size: 13px; }
.bsort select {
    height: 38px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font: 600 13.5px/1 var(--font-display);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.bsort .icon { position: absolute; right: 12px; width: 15px; height: 15px; pointer-events: none; }

.bsearch__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 0 4px; color: var(--color-muted); font-size: 13px; }
.bsearch__hint > span { margin-right: 2px; }
.btag {
    display: inline-flex;
    padding: 3px 10px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    font: 500 12.5px/1.5 var(--font-body);
    transition: all .2s var(--ease);
}
.btag:hover { border-style: solid; border-color: var(--color-primary); color: var(--color-primary); }
.bsearch__status { padding: 0 4px; color: var(--color-primary); font-size: 13px; font-weight: 600; }
.bsearch__status:not(:empty) { margin-top: 10px; }

/* ---------- À la une ---------- */
.blogx { padding-top: 24px; }
.bfront { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-bottom: 64px; }
.bfront[hidden], .barchive[hidden], .bresults[hidden], .bempty[hidden], .bmonth[hidden], .bcard[hidden] { display: none; }
.bfeature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bfeature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bfeature__cover { position: relative; min-height: 320px; }
.bfeature__media {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(60% 80% at 85% 10%, rgba(255, 255, 255, .35), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 16px),
        linear-gradient(150deg, var(--tone-a), var(--tone-b));
    color: #fff;
}
.bfeature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bfeature__media__art {
    display: grid;
    place-items: center;
    width: 128px; height: 128px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 36px;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .55);
    transition: transform .6s var(--ease);
}
.bfeature__media__art .icon { width: 44%; height: 44%; }
.bfeature:hover .bfeature__media__art { transform: scale(1.06) rotate(-5deg); }
.bfeature__flag {
    position: absolute;
    top: 16px; left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .94);
    color: #0b1124;
    font: 700 12px/1 var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bfeature__flag .icon { width: 14px; height: 14px; color: var(--tone-a); }
.bfeature__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 32px; }
.bfeature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-muted); font-size: 13px; }
.bfeature__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.18; }
.bfeature__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bfeature__excerpt { color: var(--color-muted); font-size: 15px; line-height: 1.65; }

.brubrics { padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.brubrics__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 600 14px/1.3 var(--font-display); }
.brubrics__title .icon { width: 18px; height: 18px; color: var(--color-primary); }
.brubrics__grid { display: grid; gap: 8px; }
.brubric {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 10px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.brubric:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--tone-a) 45%, var(--color-border)); }
.brubric__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--tone-a), var(--tone-b)); color: #fff; }
.brubric__icon .icon { width: 19px; height: 19px; }
.brubric__label { font: 600 14.5px/1.2 var(--font-display); }
.brubric__count { color: var(--color-muted); font-size: 12.5px; }

/* ---------- Frise par mois ---------- */
.barchive__title, .bresults__title { margin-bottom: 26px; font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); font-weight: 700; letter-spacing: -.025em; }
.bresults__title q { color: var(--color-primary); quotes: "« " " »"; }
.bresults__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bmonth { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.bmonth__label {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
    display: grid;
    padding: 2px 24px 40px 0;
}
.bmonth__name { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.bmonth__year { margin-top: 2px; color: transparent; font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -.05em; line-height: 1; -webkit-text-stroke: 1.2px var(--color-border-strong); }
.bmonth__count { margin-top: 10px; color: var(--color-muted); font-size: 12.5px; }
.bmonth__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 16px;
    padding: 0 0 48px 32px;
    border-left: 2px solid var(--color-border);
}
.bmonth__list::before {
    content: "";
    position: absolute;
    top: 6px; left: -8px;
    width: 14px; height: 14px;
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    background: var(--gradient-brand);
    box-shadow: 0 0 0 1px var(--color-border-strong);
}
.bmonth:last-child .bmonth__list { padding-bottom: 8px; }

/* Fiche « ticket » : talon daté + corps */
.bcard {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bcard--live:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone-a) 35%, var(--color-border)); box-shadow: var(--shadow-md); }
.bcard__stamp {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 17px 0 0 17px;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 10px),
        linear-gradient(170deg, var(--tone-a), var(--tone-b));
    color: #fff;
}
.bcard__stamp::before, .bcard__stamp::after { /* encoches du ticket */
    content: "";
    position: absolute;
    right: -9px;
    width: 16px; height: 16px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg);
}
.bcard__stamp::before { top: -9px; }
.bcard__stamp::after { bottom: -9px; }
.bcard__day { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.bcard__mon { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.bcard__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border-left: 2px dashed var(--color-border); }
.bcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bcard__cat { display: inline-flex; align-items: center; gap: 5px; color: var(--tone-a); font: 600 12px/1 var(--font-display); }
.bcard__cat .icon { width: 14px; height: 14px; }
.bcard__soon { padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bcard__title { padding-right: 30px; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.bcard:not(.bcard--live) .bcard__title { padding-right: 0; }
.bcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bcard__excerpt { display: -webkit-box; overflow: hidden; color: var(--color-muted); font-size: 13.5px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bcard__snippet { padding: 8px 10px; border-radius: 10px; background: var(--color-surface-soft); color: var(--color-muted); font-size: 13px; line-height: 1.5; }
.bcard__snippet[hidden] { display: none; }
.bcard__snippet-label { margin-right: 4px; color: var(--color-text); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.bcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 4px; }
.bcard__read { display: inline-flex; align-items: center; gap: 7px; color: var(--color-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.read-gauge { display: inline-flex; gap: 2px; }
.read-gauge i { width: 4px; height: 10px; border-radius: 2px; background: linear-gradient(var(--tone-a), var(--tone-b)); opacity: .75; }
.bcard__tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: color-mix(in srgb, var(--color-muted) 85%, transparent); font-size: 12px; }
.bcard__tags li.is-hit { color: var(--tone-a); font-weight: 600; }
.bcard__go {
    position: absolute;
    top: 14px; right: 14px;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--color-surface-soft);
    color: var(--color-muted);
    transition: all .3s var(--ease);
}
.bcard__go .icon { width: 15px; height: 15px; }
.bcard--live:hover .bcard__go { background: linear-gradient(135deg, var(--tone-a), var(--tone-b)); color: #fff; transform: rotate(-35deg); }
.bcard mark {
    padding: 0 2px;
    border-radius: 4px;
    background: color-mix(in srgb, #facc15 45%, transparent);
    color: inherit;
}

/* Résultats : même fiche que la frise, en grille */
.bresults__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Aucun résultat */
.bempty { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin: 8px auto 24px; padding: 40px 28px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); text-align: center; }
.bempty__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--color-surface-soft); color: var(--color-primary); }
.bempty__icon .icon { width: 26px; height: 26px; }
.bempty__title { font: 700 19px/1.3 var(--font-display); }
.bempty__text { color: var(--color-muted); font-size: 14px; }
.bempty__text[hidden] { display: none; }
.bempty__text .btag { margin-left: 4px; border-style: solid; color: var(--color-primary); font-weight: 600; }
.bempty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* ---------- Article : en-tête ---------- */
.read-progress { position: fixed; inset: 0 0 auto; z-index: 120; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--gradient-brand); transform: scaleX(0); transform-origin: 0 50%; }

.ahero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--header-h) + 40px) 0 56px;
    background:
        radial-gradient(50% 90% at 90% 0%, rgba(255, 255, 255, .22), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 18px),
        linear-gradient(140deg, color-mix(in srgb, var(--tone-a) 88%, #0b1124), color-mix(in srgb, var(--tone-b) 80%, #0b1124));
    color: #fff;
}
.ahero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ahero__glyph { position: absolute; right: -40px; bottom: -70px; width: 420px; height: 420px; color: rgba(255, 255, 255, .1); transform: rotate(-12deg); }
.ahero__glyph .icon { width: 100%; height: 100%; stroke-width: 1.1; }
.ahero__inner { max-width: 900px; }
.ahero .breadcrumb ol, .ahero .breadcrumb a { color: rgba(255, 255, 255, .75); }
.ahero .breadcrumb a:hover { color: #fff; }
.ahero .breadcrumb [aria-current] { display: inline-block; max-width: 34ch; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ahero__cat { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14); font: 600 12.5px/1 var(--font-display); transition: background-color .2s var(--ease); }
.ahero__cat:hover { background: rgba(255, 255, 255, .24); }
.ahero__cat .icon { width: 15px; height: 15px; }
.ahero__title { margin-top: 16px; font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.ahero__lead { max-width: 680px; margin-top: 16px; color: rgba(255, 255, 255, .86); font-size: 17px; line-height: 1.65; }
.ahero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 13.5px; }
.ahero__author { display: inline-flex; align-items: center; gap: 10px; }
.ahero__author strong { display: block; font-family: var(--font-display); font-size: 14px; }
.ahero__author small { display: block; color: rgba(255, 255, 255, .75); font-size: 12px; }
.ahero__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--tone-a); font: 800 15px/1 var(--font-display); }
.ahero__fact { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .88); }
.ahero__fact .icon { width: 16px; height: 16px; opacity: .8; }
.ahero__meta .share { margin-left: auto; }
.ahero__meta .share__toggle { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; }
.ahero__meta .share__menu { color: var(--color-text); }
.ahero .demo-notice { max-width: 680px; }

/* ---------- Article : lecture ---------- */
.aread { padding-top: 56px; }
.aread__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.atoc { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 12px; }
.atoc__card { padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.atoc__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--color-muted); font: 600 12.5px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.atoc__title .icon { width: 16px; height: 16px; }
.atoc__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.atoc__list a {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 7px 8px 7px 10px;
    border-radius: 10px;
    color: var(--color-muted);
    font-size: 13.5px;
    line-height: 1.4;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.atoc__list a:hover { background: var(--color-surface); color: var(--color-text); }
.atoc__list a::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; border-radius: 3px; background: transparent; transition: background-color .2s var(--ease); }
.atoc__list a.is-current { background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.atoc__list a.is-current::before { background: var(--gradient-brand); }
.atoc__list a.is-read .atoc__num { color: var(--color-green); }
.atoc__num { flex-shrink: 0; color: color-mix(in srgb, var(--color-muted) 70%, transparent); font: 600 11.5px/1.75 var(--font-display); }
.atoc__left { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 12.5px; }
.atoc__left .icon { width: 15px; height: 15px; }
.atoc__back { display: inline-flex; align-items: center; gap: 6px; padding-left: 6px; color: var(--color-muted); font-size: 13.5px; font-weight: 500; }
.atoc__back:hover { color: var(--color-primary); }
.atoc__back .icon { width: 16px; height: 16px; }

.prose { max-width: 740px; font-size: 17px; line-height: 1.8; }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 52px; font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { margin-top: 32px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.prose > h2 + *, .prose > h3 + * { margin-top: 14px; }
.prose p, .prose li { color: color-mix(in srgb, var(--color-text) 86%, transparent); }
.prose > ul:not([class]), .prose > ol:not([class]) { display: grid; gap: 8px; padding-left: 0; list-style: none; }
.prose > ul:not([class]) li { position: relative; padding-left: 26px; }
.prose > ul:not([class]) li::before { content: ""; position: absolute; top: .72em; left: 6px; width: 8px; height: 8px; border-radius: 3px; background: var(--gradient-brand); transform: rotate(45deg); }
.prose > ol:not([class]) { counter-reset: li; }
.prose > ol:not([class]) li { position: relative; padding-left: 34px; counter-increment: li; }
.prose > ol:not([class]) li::before { content: counter(li); position: absolute; top: .2em; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--color-surface-soft); font: 700 12px/1 var(--font-display); }
.prose :not(pre) > code { padding: .12em .4em; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface-soft); font: 500 .86em/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.prose strong { color: var(--color-text); }

.takeaways { padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)), color-mix(in srgb, #b44df0 6%, var(--color-surface))); }
.takeaways__title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 700 15px/1.3 var(--font-display); }
.takeaways__title .icon { width: 18px; height: 18px; color: var(--color-primary); }
.takeaways ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.takeaways li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.6; }
.takeaways li::before { content: "→"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }

.code-block { margin-inline: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; background: #0d1328; box-shadow: var(--shadow-md); }
.code-block__bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #a3acc4; font-size: 12px; }
.code-block__lang { padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #e6e9f5; font-weight: 700; letter-spacing: .06em; }
.code-block__caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-block__copy { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: #a3acc4; font-size: 12px; font-weight: 600; transition: all .2s var(--ease); }
.code-block__copy:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.code-block__copy.is-copied { color: #4ade80; }
.code-block__copy .icon { width: 14px; height: 14px; }
.code-block pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: #e6e9f5; font: 13.5px/1.7 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; tab-size: 4; }
.tok-com { color: #7a86a8; font-style: italic; }
.tok-str { color: #a5e3a0; }
.tok-var { color: #8fb8ff; }
.tok-kw  { color: #e79bff; }
.tok-tag { color: #ff9e7a; }
.tok-num { color: #ffcf70; }

.callout {
    --callout-border: color-mix(in srgb, var(--callout-c) 30%, var(--color-border));
    --callout-bg: color-mix(in srgb, var(--callout-c) 7%, var(--color-surface));
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--callout-border);
    border-radius: 16px;
    background: var(--callout-bg);
    font-size: 15px;
    line-height: 1.65;
}
.callout--tip  { --callout-c: #0f9f6e; }
.callout--warn { --callout-c: #d97706; }
.callout--info { --callout-c: #2f6bff; }
.callout__icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; background: var(--callout-c); color: #fff; }
.callout__icon .icon { width: 18px; height: 18px; }
.callout__title { margin-bottom: 2px; color: var(--color-text); font: 600 15px/1.4 var(--font-display); }

.prose-check { display: grid; gap: 10px; margin: 0; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); list-style: none; }
.prose-check li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.55; }
.prose-check .icon { flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: var(--color-green); color: #fff; stroke-width: 2.6; }

.prose-quote { position: relative; margin: 36px 0 0; padding: 4px 64px 4px 28px; border-left: 3px solid; border-image: var(--gradient-brand) 1; }
.prose-quote > .icon { position: absolute; top: -10px; right: 0; width: 52px; height: 52px; color: var(--color-border-strong); }
.prose-quote p { color: var(--color-text); font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.45; }
.prose-quote cite { display: block; margin-top: 8px; color: var(--color-muted); font-size: 14px; font-style: normal; }

.prose__foot { display: grid; gap: 22px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.prose__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.author-card { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.author-card__avatar { flex-shrink: 0; width: 52px; height: 52px; background: var(--gradient-brand); color: #fff; font-size: 17px; }
.author-card__name { font: 700 15px/1.3 var(--font-display); }
.author-card__text { color: var(--color-muted); font-size: 14px; line-height: 1.55; }
.author-card .btn { flex-shrink: 0; margin-left: auto; }
.apager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.apager__link { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.apager__link:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.apager__link small { display: inline-flex; align-items: center; gap: 4px; color: var(--color-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.apager__link small .icon { width: 14px; height: 14px; }
.apager__link strong { font-family: var(--font-display); font-size: 14.5px; line-height: 1.35; }
.apager__link--next { grid-column: 2; text-align: right; }
.apager__link--next small { justify-content: flex-end; }
.arelated { padding-top: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .bmonth__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
    .bhero__grid { flex-direction: column; align-items: flex-start; }
    .bhero__stats li:first-child { padding-left: 0; border-left: 0; }
    .bfront { grid-template-columns: minmax(0, 1fr); }
    .brubrics__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .aread__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .atoc { position: static; }
    .atoc__back, .atoc__left { display: none; }
}
@media (max-width: 767px) {
    .bsearch { margin-top: 26px; padding: 10px; border-radius: 20px; }
    .bsearch__input { height: 54px; padding-left: 46px; font-size: 16px; }
    .bsearch__icon { left: 15px; }
    .bsearch.is-live .bsearch__kbd { display: none; }
    .bsearch.is-live .bsearch__input { padding-right: 50px; }
    .bsearch__clear { right: 12px; }
    .bsearch__submit { height: 54px; padding: 0 14px; }
    .bsearch__bar { flex-direction: column; align-items: stretch; }
    .bsearch__cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px; padding: 2px 10px 6px; scrollbar-width: none; }
    .bchip { flex-shrink: 0; }
    .bsort select { flex: 1; }
    .bhero__stats li { padding: 4px 14px; }
    .bhero__stats strong { font-size: 18px; }
    .bfront { margin-bottom: 44px; }
    .bfeature { grid-template-columns: minmax(0, 1fr); }
    .bfeature__cover { min-height: 190px; }
    .bfeature__body { padding: 22px; }
    .bmonth { grid-template-columns: minmax(0, 1fr); }
    .bmonth__label { position: static; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; padding: 0 0 16px; }
    .bmonth__year { font-size: 26px; }
    .bmonth__count { margin: 0; }
    .bmonth__list { padding: 0 0 36px 18px; }
    .bresults__list { grid-template-columns: minmax(0, 1fr); }
    .bresults__head { flex-direction: column; gap: 0; }
    .bresults__head .chip-btn { margin-bottom: 18px; }
    .bcard { grid-template-columns: 58px minmax(0, 1fr); }
    .bcard__day { font-size: 22px; }
    .bcard__body { padding: 14px; }
    .ahero { padding-bottom: 40px; }
    .ahero__glyph { right: -60px; bottom: -40px; width: 260px; height: 260px; }
    .ahero__meta .share { margin-left: 0; }
    .prose { font-size: 16px; }
    .code-block pre { padding: 14px; font-size: 12.5px; }
    .prose-quote { padding-right: 0; }
    .prose-quote > .icon { display: none; }
    .author-card { flex-wrap: wrap; }
    .author-card .btn { margin-left: 68px; }
    .apager { grid-template-columns: minmax(0, 1fr); }
    .apager__link--next { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .bfeature, .bcard, .brubric, .bcard__go, .bfeature__media__art { transition: none; }
}