/* BLOG (THM Huade v2). Variables from shared/tokens.css only. Classes prefixed .blog- */
.blog-root{color:var(--ink);font-family:var(--font-body);background:var(--bg);overflow-x:clip}
.blog-root *,.blog-root *::before,.blog-root *::after{box-sizing:border-box}
.blog-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.blog-root a{color:inherit}
.blog-ic{width:1.1em;height:1.1em;flex:none}
.blog-kicker{display:inline-block;font:700 var(--fs-xs)/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.blog-meta{display:block;font-size:var(--fs-sm);color:var(--muted);letter-spacing:.02em}
.blog-meta.is-dark{color:var(--steel)}

/* ---------- index head ---------- */
.blog-head{position:relative;padding:var(--s7) 0 var(--s6);background:var(--grad-hero);color:#fff;overflow:hidden;isolation:isolate}
.blog-head-bg{position:absolute;inset:-20%;z-index:-1;background:
 repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 38px),
 radial-gradient(500px 300px at 15% 100%,rgba(255,154,61,.22),transparent 70%);transform:translateZ(0)}
.blog-h1{font:700 var(--fs-hero)/1.04 var(--font-head);margin:var(--s3) 0 var(--s3);letter-spacing:-.02em}
.blog-h1 small{display:block;font-size:var(--fs-lg);font-weight:500;color:var(--accent-2);letter-spacing:0;margin-top:var(--s2)}
.blog-lead{max-width:60ch;color:var(--steel);font-size:var(--fs-lg);line-height:1.5;margin:0}
.blog-crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s5)}
.blog-crumbs.is-dark{color:var(--steel)}
.blog-crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.blog-crumbs a:hover{color:var(--accent)}
.blog-head .blog-crumbs{color:var(--steel)}

/* ---------- filter ---------- */
.blog-filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s5) 0 var(--s6)}
.blog-filter-l{font:600 var(--fs-sm)/1 var(--font-head);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.blog-chips{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s2) 2px;margin:0 -2px;scrollbar-width:none;max-width:100%}
.blog-chips::-webkit-scrollbar{display:none}
.blog-chip{flex:none;display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border-radius:999px;text-decoration:none;font:600 var(--fs-sm)/1 var(--font-head);
 background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--sh-1);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur)}
.blog-chip b{font-weight:600;font-size:var(--fs-xs);color:var(--muted)}
.blog-chip:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.blog-chip.is-on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.blog-chip.is-on b{color:var(--accent-2)}

/* ---------- featured (layered 3D) ---------- */
.blog-feature-wrap{perspective:var(--persp);margin-bottom:var(--s7)}
.blog-feature{position:relative;display:grid;grid-template-columns:1fr;transform-style:preserve-3d;transition:transform .2s var(--ease);will-change:transform}
.blog-feature-plate{position:absolute;inset:var(--s4) calc(var(--s4)*-1) calc(var(--s4)*-1) var(--s4);border-radius:var(--r-xl);background:var(--grad-hero);transform:translateZ(-50px);box-shadow:var(--sh-3)}
.blog-feature-media{position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:16/9;background:var(--grad-metal);transform:translateZ(0)}
.blog-feature-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.blog-feature:hover .blog-feature-img{transform:scale(1.04)}
.blog-feature-panel{position:relative;margin:calc(var(--s7)*-1) var(--s3) 0;padding:var(--s5);border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--sh-3);transform:translateZ(60px)}
.blog-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 var(--fs-xs)/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--sh-glow);margin-bottom:var(--s3)}
.blog-feature-title{font:700 var(--fs-xl)/1.15 var(--font-head);margin:var(--s2) 0 var(--s3);letter-spacing:-.01em}
.blog-feature-title a{text-decoration:none}
.blog-feature-title a:hover{color:var(--accent)}
.blog-feature-text{margin:0 0 var(--s4);color:var(--ink-2);line-height:1.6}
.blog-btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:999px;background:var(--accent);color:var(--accent-ink)!important;text-decoration:none;font:600 var(--fs-md)/1 var(--font-head);box-shadow:var(--sh-glow);transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.blog-btn:hover{transform:translateY(-2px) scale(1.02)}

/* ---------- grid + tilt cards ---------- */
.blog-grid{display:grid;grid-template-columns:1fr;gap:var(--s5);perspective:var(--persp)}
.blog-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;transform-style:preserve-3d;transition:transform .2s var(--ease),box-shadow var(--dur) var(--ease);will-change:transform}
.blog-card:hover{box-shadow:var(--sh-3)}
.blog-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px 200px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 70%);opacity:0;transition:opacity var(--dur)}
.blog-card:hover::after{opacity:1}
.blog-card-media{display:block;aspect-ratio:16/9;background:var(--grad-metal);overflow:hidden}
.blog-card-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.blog-card:hover .blog-card-img{transform:scale(1.06)}
.blog-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--steel-2);background:var(--grad-metal)}
.blog-ph-ic{width:30%;max-width:96px;height:auto}
.blog-card-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);flex:1;transform:translateZ(24px)}
.blog-card-title{font:600 var(--fs-lg)/1.25 var(--font-head);margin:0;overflow-wrap:anywhere}
.blog-card-title a{text-decoration:none}
.blog-card-title a:hover{color:var(--accent)}
.blog-card-text{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-more{margin-top:auto;padding-top:var(--s2);display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font:600 var(--fs-sm)/1 var(--font-head);color:var(--accent)!important;text-decoration:none}
.blog-more .blog-ic{transition:transform var(--dur) var(--ease)}
.blog-card:hover .blog-more .blog-ic,.blog-feature:hover .blog-btn .blog-ic{transform:translateX(4px)}

/* ---------- pager ---------- */
.blog-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s3);margin:var(--s7) 0 var(--s8)}
.blog-pg-nums{display:flex;gap:var(--s2);align-items:center}
.blog-pg-n,.blog-pg-step{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--s3);border-radius:var(--r-md);text-decoration:none;font:600 var(--fs-sm)/1 var(--font-head);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
a.blog-pg-n:hover,a.blog-pg-step:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--accent)}
.blog-pg-n.is-cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:var(--sh-glow)}
.blog-pg-step.is-off{opacity:.4}
.blog-pg-gap{color:var(--muted)}

/* ---------- post: hero ---------- */
.blog-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.blog-progress i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.blog-hero{position:relative;background:var(--grad-hero);color:#fff;overflow:hidden;isolation:isolate;padding:var(--s6) 0 var(--s8);perspective:var(--persp)}
.blog-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.blog-hero-back{position:absolute;left:-5%;top:-10%;width:110%;height:120%;object-fit:cover;filter:blur(22px) saturate(1.2) brightness(.45);transform:translate3d(0,var(--py,0px),0) scale(1.1);will-change:transform}
.blog-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,21,48,.35),rgba(11,21,48,.8) 100%)}
.blog-hero-glow{position:absolute;right:-10%;top:-30%;width:70%;aspect-ratio:1;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,106,26,.35),transparent 65%);transform:translate3d(0,var(--py,0px),0)}
.blog-hero-in{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center}
.blog-post-title{font:700 var(--fs-2xl)/1.1 var(--font-head);letter-spacing:-.015em;margin:var(--s3) 0 0;overflow-wrap:anywhere}
.blog-hero-card{margin:0;position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3),0 0 0 1px var(--glass-edge);transform-style:preserve-3d;transition:transform .2s var(--ease);background:var(--grad-metal);aspect-ratio:16/9}
.blog-hero-card img{display:block;width:100%;height:100%;object-fit:cover}
.blog-hero-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 40%)}

/* ---------- post: body ---------- */
.blog-post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);padding-top:var(--s6);padding-bottom:var(--s7)}
.blog-article{min-width:0;max-width:72ch;width:100%;margin:0 auto}
.blog-toc-box{background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);padding:0 var(--s4)}
.blog-toc-box summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font:700 var(--fs-sm)/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.blog-toc ol{list-style:none;margin:0;padding:0 0 var(--s4);display:grid;gap:2px;max-height:50vh;overflow:auto}
.blog-toc li a{display:block;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;font-size:var(--fs-sm);line-height:1.35;color:var(--ink-2);border-left:2px solid transparent;overflow-wrap:anywhere}
.blog-toc li.l3 a{padding-left:28px;color:var(--muted)}
.blog-toc li a:hover{background:var(--bg-2)}
.blog-toc li a.is-on{border-left-color:var(--accent);background:var(--bg-2);color:var(--ink);font-weight:600}
.blog-prose{font-size:1.0625rem;line-height:1.8;color:var(--ink-2);overflow-wrap:anywhere}
.blog-prose>:first-child{margin-top:0}
.blog-prose p{margin:0 0 1.25em}
.blog-prose h2,.blog-prose h3,.blog-prose h4{font-family:var(--font-head);color:var(--ink);line-height:1.2;scroll-margin-top:90px;letter-spacing:-.01em}
.blog-prose h2{font-size:var(--fs-xl);margin:1.8em 0 .6em;padding-top:.4em;border-top:1px solid var(--line)}
.blog-prose h3{font-size:var(--fs-lg);margin:1.5em 0 .5em}
.blog-prose h4{font-size:var(--fs-md);margin:1.3em 0 .4em}
.blog-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.blog-prose ul,.blog-prose ol{padding-left:1.4em;margin:0 0 1.25em}
.blog-prose li{margin:.35em 0}
.blog-prose li::marker{color:var(--accent)}
.blog-prose img{max-width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--sh-2);margin:1em 0;display:block}
.blog-prose figure{margin:1.5em 0}
.blog-prose blockquote{margin:1.5em 0;padding:var(--s4) var(--s5);border-left:4px solid var(--accent);background:var(--bg-2);border-radius:0 var(--r-md) var(--r-md) 0}
.blog-prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:var(--fs-sm);margin:1.5em 0}
.blog-prose th,.blog-prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;min-width:96px}
.blog-prose th{background:var(--bg-2);font-family:var(--font-head);color:var(--ink)}
.blog-prose iframe,.blog-prose video{max-width:100%}
.blog-prose pre{overflow-x:auto;padding:var(--s4);background:var(--bg-2);border-radius:var(--r-md)}

.blog-prevnext{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s7)}
.blog-pn{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4) var(--s5);min-height:44px;border-radius:var(--r-lg);text-decoration:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.blog-pn:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.blog-pn span{font:600 var(--fs-xs)/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.blog-pn b{font:600 var(--fs-md)/1.3 var(--font-head);overflow-wrap:anywhere}
.blog-pn.is-next{text-align:right}

.blog-related{background:var(--bg-2);padding:var(--s8) 0}
.blog-h2{font:700 var(--fs-2xl)/1.1 var(--font-head);margin:var(--s3) 0 var(--s6)}

/* ---------- breakpoints ---------- */
@media (min-width:700px){
 .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .blog-prevnext{grid-template-columns:1fr 1fr}
 .blog-feature-panel{margin:calc(var(--s8)*-1) var(--s6) 0;padding:var(--s6)}
 .blog-feature-title{font-size:var(--fs-2xl)}
}
@media (min-width:1000px){
 .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .blog-feature{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
 .blog-feature-media{grid-column:1/9;grid-row:1}
 .blog-feature-panel{grid-column:7/13;grid-row:1;margin:var(--s7) 0 0}
 .blog-hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
 .blog-head{padding:var(--s8) 0 var(--s7)}
}
@media (min-width:1100px){
 .blog-post-grid:has(.blog-toc){grid-template-columns:280px minmax(0,72ch);justify-content:center;gap:var(--s7)}
 .blog-toc{position:sticky;top:96px;align-self:start;order:-1}
 .blog-article{margin:0}
}
@media (max-width:1099px){.blog-toc-box:not([open]) summary{border-bottom:0}}
@media (prefers-reduced-motion:reduce){
 .blog-root *{transition:none!important;animation:none!important}
 .blog-hero-back,.blog-hero-glow{transform:none!important}
}