main{min-height:60vh}
section{padding:34px 0}
.sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
h1,h2,h3{margin:0}
h1{font-size:40px;line-height:1.1;letter-spacing:-.7px;margin:0 0 10px}
h2{font-size:26px;letter-spacing:-.3px}
.lead{color:var(--sub);font-size:17px;margin:0;max-width:100%;line-height:1.55}
.asideList .asideItem .chips {margin: 0 0 7px;}
.asideItem span.chip.alt {display: block!important;}
.subhead{margin:0;color:var(--muted);max-width:100%;line-height:1.55}
.card{background:rgba(16,27,53,.72);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:16px;box-shadow:0 10px 22px rgba(0,0,0,.25)}
.card.soft{border-radius:var(--radius2);box-shadow:var(--shadow);background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(34,197,94,.08)),rgba(16,27,53,.72)}
.hero{padding:34px 0 22px}
.heroTop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--sub);font-size:13px;width:fit-content}
.pill .dot{width:8px;height:8px;border-radius:99px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 0 4px rgba(14,165,233,.12)}
.controls{margin-top:14px;padding:14px;border-radius:var(--radius2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.controlRow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.controlGroup{display:flex;flex-direction:column;gap:6px}
.controlGroup label{font-size:12px;color:var(--muted)}
.controlGroup input,.controlGroup select{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgb(21 41 53);color:var(--text);min-width:190px;outline:0}
.controlGroup input::placeholder{color:rgba(156,163,175,.85)}
.controlGrow{flex:1;min-width:260px}
.controlMeta{margin-top:10px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.grid{display:grid;gap:14px}
.grid.cols3{grid-template-columns:repeat(3,1fr)}
.grid.cols2{grid-template-columns:repeat(2,1fr)}
.post{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);transition:transform .12s ease,border-color .12s ease,background .12s ease;height:100%;position:relative;overflow:hidden}
.post:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.055)}
.postTop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:var(--text);white-space:nowrap}
.chip.alt{background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.3)}
.postTitle{font-size:16px;letter-spacing:-.2px;line-height:1.25;margin-top:4px}
.postExcerpt{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.postMeta{display:flex;gap:10px;flex-wrap:wrap;color:rgba(169,180,208,.85);font-size:12px;margin-top:2px}
.postMeta span{display:inline-flex;align-items:center;gap:6px}
.metaDot{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.25)}
.postCta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.more{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:13px;color:var(--sub);opacity:.98}
.more span{width:22px;height:22px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.readtime{color:var(--muted);font-size:12px;font-weight:600}
.featured{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;align-items:stretch}
.featuredMain{padding:18px;border-radius:var(--radius2);border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(34,197,94,.09)),rgba(16,27,53,.72);box-shadow:var(--shadow);position:relative;overflow:hidden}
.featuredMain:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 25% 25%,rgba(14,165,233,.26),transparent 40%),radial-gradient(circle at 75% 35%,rgba(34,197,94,.18),transparent 42%);filter:blur(10px);opacity:.85;pointer-events:none}
.featuredMain>*{position:relative;z-index:2}
.featuredKicker{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.featuredMain h2{font-size:22px}
.featuredMain p{margin:10px 0 0;color:var(--sub);max-width:90ch}
.featuredAside{height:100%}
.asideList{display:grid;gap:12px}
.asideItem{padding:14px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.asideItem h3{font-size:14px;margin:0 0 6px}
.asideItem p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.asideItem a{display:inline-flex;margin-top:10px;font-weight:700;font-size:13px;opacity:.98}
.asideItem a:hover{text-decoration:underline}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border-radius:var(--radius2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.pageBtns{display:flex;gap:8px;flex-wrap:wrap}
.pageInfo{color:var(--muted);font-size:12px}

/* Post template additions (non-destructive) */
.breadcrumbs{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.breadcrumbs a{color:rgba(255,255,255,.86); text-decoration:none}
.breadcrumbs a:hover{color:var(--accent)}
.postLayout{display:grid; grid-template-columns: 1.35fr .65fr; gap:18px; align-items:start}
.articleCard{padding:18px; border-radius: var(--radius2); border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04)}
.articleHeader h1{margin:10px 0 8px 0; font-size: clamp(28px, 4vw, 44px); line-height:1.08}
.postMeta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--muted); font-size:12px}
.postMeta .dotSep{opacity:.55}
.cover{margin-top:14px; border-radius: 18px; overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.cover img{width:100%; display:block; height:auto}
.articleBody{margin-top:14px; color: rgba(255,255,255,.92)}
.articleBody h2{margin:22px 0 10px 0; font-size:22px}
.articleBody h3{margin:18px 0 8px 0; font-size:18px}
.articleBody p{margin:10px 0; line-height:1.7; color: rgba(255,255,255,.88)}
.articleBody ul{margin:10px 0 10px 18px}
.articleBody li{margin:8px 0; line-height:1.6; color: rgba(255,255,255,.86)}
.callout{margin:16px 0; padding:14px; border-radius: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(14,165,233,.12)}
.toc a{display:block; padding:8px 10px; border-radius:12px; text-decoration:none; color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); margin-top:8px}
.toc a:hover{border-color: rgba(59,130,246,.5); color: #fff}
.shareRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.shareRow a{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius: 14px; text-decoration:none; color: rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18)}
.shareRow a:hover{border-color: rgba(59,130,246,.55)}
.relatedGrid{margin-top:16px}
.relatedGrid .post{height:100%}
.relatedGrid a.btn.ghost {
    margin: 15px 0 0;
}
@media (max-width: 980px){
    .postLayout{grid-template-columns: 1fr}
}

@media screen and (max-width:767px) {
.featured {
    grid-template-columns: none;
}  
.controlGroup input, .controlGroup select {
    min-width: 100%;
    outline: 0;
    width: 100%;
}
.controlGroup {
    width: 100%;
}
.grid.cols3 {
    grid-template-columns: none;
}
.grid.cols2 {
    grid-template-columns: none;
}
}