.crumbs{font-size:.82rem; color:#6b604c; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.crumbs a{color:#6b604c; text-decoration:none} .crumbs a:hover{color:var(--gold)}

.post-hero{background:#EBDDC8; padding-block:48px 0}
.post-hero .wrap{max-width:860px}
.post-hero h1{font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.45; margin-block:12px 18px}
.post-meta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:.88rem; color:#4a4337}
.post-meta .blog-tag{background:var(--olive); color:#fff; border-radius:999px; padding:3px 12px; font-size:.8rem}
.post-cover{max-width:1060px; margin:36px auto 0; padding-inline:20px; position:relative; z-index:1; margin-bottom:-120px}
.post-cover img{width:100%; aspect-ratio:16/8; object-fit:cover; object-position:center 35%; border-radius:4px; box-shadow:0 30px 60px -36px rgba(60,45,20,.5)}
@media (max-width:640px){ .post-cover img{aspect-ratio:4/3} }
.post-body-wrap{padding-top:168px}
.post-layout{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:56px; max-width:1060px; margin-inline:auto; padding-inline:20px; align-items:start}
@media (max-width:900px){ .post-layout{grid-template-columns:1fr; gap:32px} .post-aside{order:-1} }
.post-aside{position:sticky; top:96px; display:flex; flex-direction:column; gap:20px}
@media (max-width:900px){ .post-aside{position:static} }
.toc{border:1px solid var(--border); border-radius:4px; padding:20px; background:var(--card-bg)}
.toc h4{font-size:.9rem; color:var(--gold); margin-bottom:10px}
.toc ol{margin:0; padding-inline-start:18px; display:flex; flex-direction:column; gap:8px; font-size:.9rem}
.toc a{color:var(--fg); text-decoration:none; opacity:.85} .toc a:hover{color:var(--gold); opacity:1}
.share{display:flex; gap:10px; align-items:center; font-size:.88rem}
.share a,.share button{width:40px; height:40px; border-radius:50%; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; color:var(--olive); background:var(--card-bg); cursor:pointer; transition:background .2s, color .2s, border-color .2s}
.share a:hover,.share button:hover{background:var(--gold); color:#fff; border-color:var(--gold)}
.share svg{width:18px; height:18px}
.article{font-size:1.06rem; line-height:2.05}
.article > p + p{margin-top:16px}
.article h2{font-size:clamp(1.35rem,2.6vw,1.7rem); margin-top:44px; margin-bottom:14px; scroll-margin-top:96px}
.article ul{padding-inline-start:22px; margin-block:12px; display:flex; flex-direction:column; gap:6px}
.tldr{background:var(--sand); border-radius:4px; padding:22px 24px; margin-bottom:32px}
.tldr h4{font-size:.95rem; color:var(--olive); margin-bottom:8px}
.tldr ul{margin:0}
.art-steps{list-style:none; padding:0 !important; counter-reset:s; gap:16px !important; display:flex; flex-direction:column; font-weight:400}
.art-steps li{counter-increment:s; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; background:var(--card-bg); border:1px solid var(--border); border-radius:4px; padding:16px 18px; line-height:1.85}
.art-steps li::before{content:counter(s); width:36px; height:36px; border-radius:50%; background:var(--gold); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.95rem; line-height:1}
.art-steps b{display:block}
.callout{display:flex; gap:12px; border:1px solid rgba(178,141,74,.5); background:#FBF8F2; border-radius:4px; padding:18px 20px; margin-top:36px; font-size:.98rem; line-height:1.9}
.callout .ic{width:22px; height:22px; color:var(--gold); flex:none; margin-top:4px}
.callout b{display:block; color:var(--olive)}
.prod-box{display:grid; grid-template-columns:110px minmax(0,1fr); gap:20px; align-items:center; margin-top:40px; background:var(--olive); color:#F0ECDF; border-radius:4px; padding:20px}
.prod-box .pt{aspect-ratio:4/5; border-radius:60px 60px 4px 4px; overflow:hidden; background:#F1E9DC}
.prod-box .pt img{width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply}
.prod-box span{font-size:.82rem; color:var(--sand); font-weight:700}
.prod-box h3{color:#fff; font-size:1.15rem; margin-block:2px 4px}
.prod-box p{font-size:.92rem; opacity:.9; line-height:1.8}
.prod-box .btn{margin-top:12px; padding:9px 18px; min-height:40px; font-size:.88rem}
.author{display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; align-items:center; border-block:1px solid var(--border); padding-block:22px; margin-top:44px}
.author img{width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center top}
.author span{font-size:.82rem; color:var(--gold); font-weight:700}
.author b{display:block; font-size:1.02rem}
.author p{font-size:.88rem; opacity:.78}
.refs{margin-top:28px; font-size:.88rem; opacity:.85}
.refs h4{font-size:.95rem; margin-bottom:8px}
.blog-reviewer{font-size:.84rem; color:#6b604c; opacity:1 !important}
.blog-reviewer b{color:var(--olive)}