/* ============================================================
   EARMOR — Blog listing page (page-blog.php)  slug: /blog/
   Design system: bg #0a0a0a / gold #F1B300 / white text
   ============================================================ */

.blog-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}
.blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.30) 45%, rgba(10,10,10,.92) 92%, #0a0a0a 100%);
    z-index: 0;
}
.blog-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 120px 24px 90px;
}
.blog-hero__kicker {
    color: #F1B300;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 8px;
    margin: 0 0 18px;
}
.blog-hero__title {
    color: #FFFFFF;
    font-size: clamp(52px, 8vw, 92px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

/* ---------- Featured + sidebar ---------- */
.blog-featured {
    background: #0a0a0a;
}
.blog-featured__inner {
    width: min(1350px, 100%);
    margin: 0 auto;
    padding: 0px 0px 0px;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 48px;
    align-items: start;
}
.blog-featured__card {
    display: block;
    text-decoration: none;
}
.blog-featured__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #141414;
}
.blog-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.blog-featured__card:hover .blog-featured__media img {
    transform: scale(1.03);
}
.blog-featured__badges {
    position: absolute;
    left: 20px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.blog-badge {
    display: inline-block;
    background: #F1B300;
    color: #0a0a0a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 7px 12px;
}
.blog-featured__date {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.blog-featured__title {
    color: #FFFFFF;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    margin: 22px 0 0;
    transition: color .2s ease;
}
.blog-featured__card:hover .blog-featured__title {
    color: #F1B300;
}

/* Sidebar panels */
.blog-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.blog-panel {
    background: #111111;
    border: 1px solid #242424;
    padding: 26px 26px 22px;
}
.blog-panel__title {
    color: #F1B300;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    margin: 0 0 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #2a2a2a;
}
.blog-topics {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-topics li {
    border-bottom: 1px solid #222222;
}
.blog-topics li:last-child {
    border-bottom: none;
}
.blog-topics a {
    display: block;
    color: #E6E6E6;
    font-size: 14px;
    text-decoration: none;
    padding: 13px 0;
    transition: color .2s ease, padding-left .2s ease;
}
.blog-topics a:hover {
    color: #F1B300;
    padding-left: 6px;
}
.blog-latest {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-latest li {
    border-bottom: 1px solid #222222;
}
.blog-latest li:last-child {
    border-bottom: none;
}
.blog-latest a {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    text-decoration: none;
}
.blog-latest__thumb {
    display: block;
    width: 92px;
    height: 68px;
    overflow: hidden;
    background: #1a1a1a;
}
.blog-latest__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.blog-latest a:hover .blog-latest__thumb img {
    transform: scale(1.06);
}
.blog-latest__text h4 {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}
.blog-latest a:hover .blog-latest__text h4 {
    color: #F1B300;
}
.blog-latest__text time {
    color: #8f8f8f;
    font-size: 11px;
}
.blog-panel__all {
    display: inline-block;
    margin-top: 16px;
    color: #F1B300;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-decoration: none;
}
.blog-panel__all:hover .arr {
    transform: translateX(4px);
}
.blog-panel__all .arr {
    display: inline-block;
    transition: transform .2s ease;
}

/* ---------- Tabs + grid ---------- */
.blog-list {
    background: #0a0a0a;
}
.blog-list__inner {
    width: min(1350px, 100%);
    margin: 0 auto;
    padding: 30px 24px 70px;
}
.blog-tabs {
    display: flex;
    justify-content: center;
    gap: 44px;
    border-bottom: 1px solid #222222;
    margin-bottom: 44px;
}
.blog-tab {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    color: #9a9a9a;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 14px 2px;
    transition: color .2s ease;
}
.blog-tab:hover {
    color: #FFFFFF;
}
.blog-tab.is-active {
    color: #F1B300;
}
.blog-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #F1B300;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.blog-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    background: #101010;
    border: 1px solid #242424;
    transition: border-color .25s ease, transform .25s ease;
}
.blog-card:hover {
    border-color: #F1B300;
    transform: translateY(-3px);
}
.blog-card--enter {
    animation: blogCardIn .35s ease both;
}
@keyframes blogCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.blog-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #161616;
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.blog-card:hover .blog-card__media img {
    transform: scale(1.05);
}
.blog-card__body {
    padding: 20px 22px 16px;
    display: flex;
    flex-direction: column;
}
.blog-card__cat {
    position: relative;
    display: inline-block;
    color: #F1B300;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-left: 18px;
    margin-bottom: 10px;
}
.blog-card__cat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 3px;
    background: #F1B300;
}
.blog-card__title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}
.blog-card__title a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color .2s ease;
}
.blog-card__title a:hover {
    color: #F1B300;
}
.blog-card__excerpt {
    color: #9a9a9a;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #8f8f8f;
    font-size: 12px;
}
.blog-card__comments {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Pagination ---------- */
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 48px;
}
.blog-page {
    appearance: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #333333;
    color: #CCCCCC;
    font-size: 13px;
    font-weight: 700;
    transition: all .2s ease;
}
.blog-page:hover {
    border-color: #F1B300;
    color: #F1B300;
}
.blog-page.is-current {
    background: #F1B300;
    border-color: #F1B300;
    color: #0a0a0a;
}

/* ---------- IPSC banner ---------- */
.blog-ipsc {
    position: relative;
    background: #0a0a0a;
    border-top: 1px solid #222222;
    overflow: hidden;
    isolation: isolate;
}
.blog-ipsc::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -30px;
    width: 220px;
    height: 220px;
    background: rgba(241,179,0,.10);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 0;
}
.blog-ipsc__inner {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 78px 24px 84px;
    text-align: center;
}
.blog-ipsc__title {
    color: #F1B300;
    font-size: clamp(30px, 4.5vw, 46px);
    font-weight: 900;
    letter-spacing: 5px;
    margin: 0 0 26px;
    text-transform: uppercase;
}
.blog-ipsc__inner p {
    color: #b5b5b5;
    font-size: 13px;
    line-height: 1.75;
    margin: 0 auto 12px;
    max-width: 780px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .blog-featured__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-hero {
        min-height: 480px;
    }
}
@media (max-width: 560px) {
    .blog-card {
        grid-template-columns: 1fr;
    }
    .blog-card__media {
        aspect-ratio: 16 / 9;
    }
    .blog-tabs {
        gap: 24px;
    }
}

/* ---------- Category archive (category.php) ---------- */
.cat-hero {
    min-height: 420px;
}
.cat-hero .blog-hero__inner {
    padding: 90px 24px 70px;
}
.cat-hero__title {
    color: #FFFFFF;
    font-size: clamp(36px, 5vw, 62px);
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0 0 14px;
    text-transform: uppercase;
}
.cat-hero__count {
    color: #b5b5b5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    margin: 0;
}
.cat-grid {
    margin-top: 6px;
}
.cat-pagination {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}
.cat-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    margin: 0 5px;
    border: 1px solid #333333;
    color: #CCCCCC;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
}
.cat-pagination .page-numbers.current {
    background: #F1B300;
    border-color: #F1B300;
    color: #0a0a0a;
}
.cat-pagination .page-numbers:hover:not(.current) {
    border-color: #F1B300;
    color: #F1B300;
}
.cat-empty {
    color: #8f8f8f;
    text-align: center;
    padding: 70px 0;
    font-size: 14px;
}
/* ============================================================
   EARMOR — Single Post (Blog Detail)  single.php  [editorial v2]
   ============================================================ */
.article-page { background:#0a0a0a; }

/* Breadcrumb（hero 下方，与正文 1350 容器对齐） */
.article-crumbs { background:#0a0a0a; border-bottom:1px solid #1c1c1c; }
.article-crumbs__inner {
    width:min(1350px,100%); margin:0 auto; padding:16px 0;
    display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    font-size:16px; letter-spacing:1px;
}
.article-crumbs a { color:#9a9a9a; text-decoration:none; transition:color .2s ease; }
.article-crumbs a:hover { color:#F1B300; }
.article-crumbs__sep { color:#ffffff; font-size:14px; font-weight:700; padding:0 2px; opacity:.9; }
.article-crumbs__cur { color:#fff; font-weight:700; }

/* Reading progress bar */
.article-progress { position:fixed; top:0; left:0; right:0; height:3px; background:rgba(241,179,0,.10); z-index:1200; }
.article-progress > span { display:block; height:100%; width:0; background:#F1B300; box-shadow:0 0 10px rgba(241,179,0,.7); transition:width .1s linear; }

/* Hero */
.article-hero {
    position:relative; min-height:500px; display:flex; align-items:center; justify-content:center;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    overflow:hidden; isolation:isolate; text-align:center;
}
.article-hero::before {
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,.30) 35%, rgba(10,10,10,.85) 82%, #0a0a0a 100%);
}
.article-hero__motif {
    position:absolute; inset:0; z-index:0;
    background-image:radial-gradient(120% 80% at 50% -10%, rgba(241,179,0,.16), rgba(241,179,0,0) 60%);
}
.article-hero--plain::after {
    content:""; position:absolute; inset:0; z-index:0;
    background:radial-gradient(120% 90% at 50% 0%, rgba(241,179,0,.14), rgba(241,179,0,0) 55%), #0d0d0d;
}
.article-hero__inner { position:relative; z-index:2; padding:130px 24px 90px; width:min(940px,100%); }
.article-hero__kicker {
    display:inline-block; position:relative; color:#F1B300; font-size:12px; font-weight:800;
    letter-spacing:4px; text-transform:uppercase; padding:7px 18px 7px 16px; margin:0 0 22px;
    border:1px solid rgba(241,179,0,.55); background:rgba(241,179,0,.06);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.article-hero__title {
    color:#fff; font-size:clamp(34px,5.2vw,64px); font-weight:900; line-height:1.04;
    letter-spacing:.3px; margin:0 0 22px; text-shadow:0 2px 28px rgba(0,0,0,.6);
}
.article-hero__meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; color:#cfcfcf; font-size:13px; letter-spacing:1px; }
.article-hero__author { color:#fff; font-weight:700; }
.article-hero__dot { color:#555; }
.article-hero__read { color:#F1B300; font-weight:800; letter-spacing:2px; }
.article-hero__scroll {
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:rgba(255,255,255,.55); font-size:10px; letter-spacing:3px;
}
.article-hero__scroll span { width:1px; height:34px; background:linear-gradient(180deg,#F1B300,rgba(241,179,0,0)); animation:earmorScroll 1.8s ease-in-out infinite; }
@keyframes earmorScroll { 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* Body prose */
.article-body { background:#0a0a0a; }
.article-body__inner { width:min(760px,100%); margin:0 auto; padding:54px 24px 24px; }
.article-body__inner > * { color:#cfcfcf; font-size:16px; line-height:1.9; }
.article-body__inner p { margin:0 0 22px; }
.article-body__inner p:first-of-type { font-size:19px; line-height:1.8; color:#e8e8e8; }
/* 防御：编辑器若开启「首字下沉」(has-drop-cap)，文章正文内一律不生效 */
.article-body__inner p.has-drop-cap:not(:focus)::first-letter {
    float:none; font-size:inherit; font-weight:inherit; line-height:inherit;
    margin:0; text-transform:none; color:inherit; font-family:inherit;
}
.article-body__inner h2 {
    color:#fff; font-size:27px; font-weight:800; letter-spacing:.5px; margin:44px 0 18px;
    padding-left:18px; border-left:3px solid #F1B300; position:relative;
}
.article-body__inner h3 { color:#fff; font-size:21px; font-weight:800; margin:32px 0 14px; }
.article-body__inner h4 { color:#fff; font-size:17px; font-weight:700; margin:26px 0 12px; }
.article-body__inner a { color:#F1B300; text-decoration:none; border-bottom:1px solid rgba(241,179,0,.4); transition:border-color .2s ease; }
.article-body__inner a:hover { border-color:#F1B300; }
.article-body__inner strong { color:#fff; }
.article-body__inner blockquote {
    margin:30px 0; padding:20px 26px; background:#131313; border-left:3px solid #F1B300;
    color:#e2e2e2; font-style:italic; font-size:18px; line-height:1.7; position:relative;
}
.article-body__inner blockquote::before { content:"\201C"; position:absolute; top:-6px; left:12px; font-size:54px; color:rgba(241,179,0,.25); font-family:Georgia,serif; }
.article-body__inner img { max-width:100%; height:auto; display:block; margin:30px auto; border:1px solid #1f1f1f; }
.article-body__inner figure { margin:30px 0; }
.article-body__inner figcaption { color:#8f8f8f; font-size:12px; text-align:center; margin-top:8px; }
.article-body__inner ul, .article-body__inner ol { margin:0 0 22px; padding-left:24px; }
.article-body__inner li { margin:8px 0; }
.article-body__inner li::marker { color:#F1B300; }
.article-body__inner pre { background:#141414; border:1px solid #242424; padding:18px; overflow:auto; color:#d6d6d6; font-size:14px; }
.article-body__inner code { background:#1a1a1a; padding:2px 6px; color:#F1B300; font-size:.9em; }
.article-body__inner hr { border:none; border-top:1px solid #222; margin:36px 0; }
.article-pages { text-align:center; color:#8f8f8f; font-size:13px; margin-top:24px; }

/* Byline strip removed in v4 — moved to right rail SHARE THIS */
.article-share { margin-left:auto; display:flex; align-items:center; gap:8px; }
.article-share--rail { margin-left:0; margin-top:4px; display:flex; flex-wrap:wrap; gap:8px; }
.article-share--rail .article-share__btn { width:34px; height:34px; }
.article-share__btn {
    width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid #2a2a2a; color:#cfcfcf; background:#0e0e0e; text-decoration:none;
    transition:all .2s ease; cursor:pointer;
}
.article-share__btn:hover { border-color:#F1B300; color:#F1B300; background:rgba(241,179,0,.08); }
.article-share__btn--copy.is-copied { border-color:#F1B300; color:#0a0a0a; background:#F1B300; }

/* Tags + back */
.article-foot { background:#0a0a0a; border-top:1px solid #1c1c1c; }
.article-foot__inner { width:min(820px,100%); margin:0 auto; padding:30px 24px 10px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.article-tags { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.article-tags__label { color:#8f8f8f; font-size:11px; font-weight:800; letter-spacing:3px; }
.article-tag { display:inline-block; border:1px solid #2c2c2c; color:#cfcfcf; font-size:12px; padding:6px 12px; text-decoration:none; transition:all .2s ease; }
.article-tag:hover { border-color:#F1B300; color:#F1B300; }
.article-back { color:#F1B300; font-size:12px; font-weight:800; letter-spacing:2px; text-decoration:none; }
.article-back .arr { display:inline-block; transition:transform .2s ease; }
.article-back:hover .arr { transform:translateX(-4px); }

/* Prev / Next pager */
.article-pager { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:min(1280px,100%); margin:0 auto; padding:40px 24px; border-top:1px solid #1c1c1c; }
.article-pager__link { display:flex; flex-direction:column; gap:7px; padding:20px 22px; text-decoration:none; background:#0d0d0d; border:1px solid #1d1d1d; transition:all .22s ease; }
.article-pager__link--next { text-align:right; align-items:flex-end; }
.article-pager__link:hover { border-color:#F1B300; transform:translateY(-3px); background:rgba(241,179,0,.04); box-shadow:0 14px 30px rgba(0,0,0,.45); }
.article-pager__dir { color:#F1B300; font-size:11px; font-weight:800; letter-spacing:2px; }
.article-pager__title { color:#fff; font-size:16px; font-weight:700; line-height:1.4; max-width:34ch; }
.article-pager__link--ghost { background:none; border:none; }

/* Related */
.article-related { background:#0a0a0a; border-top:1px solid #1c1c1c; }
.article-related__inner { width:min(1350px,100%); margin:0 auto; padding:64px 24px 30px; }
.article-related__title { color:#fff; text-align:center; font-size:clamp(26px,3.5vw,38px); font-weight:900; letter-spacing:4px; margin:0 0 40px; text-transform:uppercase; }
.article-related__title::after { content:""; display:block; width:54px; height:3px; background:#F1B300; margin:16px auto 0; }
.article-related__grid.blog-grid { grid-template-columns:repeat(4,1fr); gap:22px; margin-top:0; }
.article-related__grid .blog-card { grid-template-columns:1fr; }
.article-related__grid .blog-card__media { width:100%; aspect-ratio:16 / 10; }
.article-related__grid .blog-card__media img { height:100%; }
.article-related__grid .blog-card__body { width:100%; }
.article-related__more { text-align:center; margin-top:38px; }
.article-related__more-link { display:inline-block; color:#F1B300; font-size:12px; font-weight:800; letter-spacing:3px; text-decoration:none; border:1px solid rgba(241,179,0,.4); padding:12px 26px; transition:all .2s ease; }
.article-related__more-link:hover { background:#F1B300; color:#0a0a0a; }

/* Card hover (global, also improves listing grid) */
.blog-card { background:#0e0e0e; border:1px solid #1c1c1c; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.blog-card__media { display:block; overflow:hidden; }
.blog-card__media img { width:100%; height:200px; object-fit:cover; display:block; transition:transform .55s ease; }
.blog-card:hover { transform:translateY(-6px); border-color:rgba(241,179,0,.55); box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(241,179,0,.18); }
.blog-card:hover .blog-card__media img { transform:scale(1.06); }
.blog-card__cat { color:#F1B300; }

@media (max-width:1100px){ .article-related__grid.blog-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:980px){
    .article-hero { min-height:400px; }
    .article-hero__inner { padding:96px 24px 64px; }
}
@media (max-width:680px){
    .article-pager { grid-template-columns:1fr; }
    .article-pager__link--next { text-align:left; align-items:flex-start; }
    .article-body__inner { padding:40px 18px 24px; }
    .article-related__grid.blog-grid { grid-template-columns:1fr; }
}

/* ============================================================
   EARMOR — Article side rails (TOC + right aside)  [layout v3]
   ============================================================ */
html { scroll-behavior: smooth; }
.article-layout {
    width:min(1350px,100%); margin:0 auto;
    display:grid; grid-template-columns:220px minmax(0,1fr) 300px; gap:40px;
    padding:0 0px; align-items:start;
}
.article-layout .article-body__inner { width:100%; margin:0; padding:54px 0 24px; min-width:0; }
.article-layout--no-toc { grid-template-columns:minmax(0,1fr) 300px; }

/* Left TOC */
.article-toc { position:sticky; top:90px; align-self:start; }
.article-toc__title { color:#F1B300; font-size:11px; font-weight:800; letter-spacing:3px; margin:0 0 14px; padding-left:14px; border-left:3px solid #F1B300; }
.article-toc__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.article-toc__link { display:block; color:#9a9a9a; font-size:13px; line-height:1.4; padding:8px 14px; text-decoration:none; border-left:2px solid #222; transition:color .2s, border-color .2s, background .2s; }
.article-toc__link:hover { color:#fff; border-left-color:#F1B300; }
.article-toc__link.is-active { color:#F1B300; border-left-color:#F1B300; background:rgba(241,179,0,.06); }

/* Right aside */
.article-aside { position:sticky; top:90px; align-self:start; display:flex; flex-direction:column; gap:24px; }
.aside-card { background:#0d0d0d; border:1px solid #1d1d1d; border-left:3px solid #F1B300; padding:18px; }
.aside-card__title { color:#fff; font-size:13px; font-weight:800; letter-spacing:3px; margin:0 0 14px; }
.aside-card__title--mt { margin-top:22px; }
.aside-post { display:flex; gap:12px; align-items:center; text-decoration:none; padding:9px 0; border-bottom:1px solid #161616; }
.aside-post:last-child { border-bottom:none; padding-bottom:0; }
.aside-post__img { width:60px; height:60px; object-fit:cover; flex:0 0 auto; border:1px solid #2a2a2a; }
.aside-post__title { color:#cfcfcf; font-size:13px; line-height:1.45; transition:color .2s; }
.aside-post:hover .aside-post__title { color:#F1B300; }
.aside-tags { display:flex; flex-wrap:wrap; gap:8px; }
.aside-tag { display:inline-block; border:1px solid #2c2c2c; color:#cfcfcf; font-size:11px; padding:5px 10px; text-decoration:none; transition:all .2s; }
.aside-tag:hover { border-color:#F1B300; color:#F1B300; }
.aside-tag--empty { color:#6f6f6f; border-color:#1c1c1c; }
.aside-social { display:flex; gap:10px; }
.aside-social__btn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #2a2a2a; color:#cfcfcf; text-decoration:none; transition:all .2s; }
.aside-social__btn:hover { border-color:#F1B300; color:#F1B300; background:rgba(241,179,0,.08); }

@media (max-width:1099px){
    .article-layout { grid-template-columns:1fr; gap:0; padding:0 18px; }
    .article-crumbs__inner { padding:14px 18px; }
    .article-toc { display:none; }
    .article-aside { position:static; margin-top:24px; }
    .article-layout .article-body__inner { padding:40px 0 24px; }
}