/* ===== single / page (chi-tiet) layout ===== */
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted-2);margin-bottom:18px;flex-wrap:wrap}
.crumbs a{color:var(--muted-2)}
.crumbs a:hover{color:var(--green-d)}
.crumbs .cur{color:var(--ink)}

.art{max-width:760px;margin:0 auto}
.art-cat{display:inline-flex;align-items:center;gap:7px;background:#e8f7ef;color:var(--green-d);font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;margin-bottom:16px}
.art h1{margin:0 0 18px;font-family:var(--serif);font-weight:700;font-size:clamp(27px,5vw,42px);line-height:1.22;color:var(--ink);text-wrap:pretty}

.art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid rgba(23,33,29,.1)}
.author{display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#12b075,#0c8a5b);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.aname{font-size:13.5px;font-weight:700;color:var(--ink)}
.adate{font-size:12px;font-weight:500;color:var(--muted-2)}
.art-actions{display:flex;align-items:center;gap:8px}
.act{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-2);color:#3a4a42;font-size:13px;font-weight:600;padding:9px 14px;border-radius:11px;cursor:pointer}
.act.icon{width:40px;height:40px;padding:0;justify-content:center;color:var(--green-d)}
.act.saved{background:#e8f7ef;border-color:rgba(18,176,117,.4);color:var(--green-d)}

.art-cover{position:relative;height:min(52vw,400px);border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#1a5c42,#0c8a5b);display:flex;align-items:center;justify-content:center;margin-bottom:10px;background-size:cover;background-position:center}
.art-cover span{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(18px,3.4vw,26px);color:rgba(255,255,255,.92);text-align:center;padding:0 24px}
.art-caption{font-size:12px;color:var(--faint);margin-bottom:30px}

.art-tags{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0;padding-top:24px;border-top:1px solid rgba(23,33,29,.1)}
.art-tags a{font-size:13px;font-weight:600;color:#3a4a42;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:8px 14px}
.art-tags a:hover{border-color:rgba(18,176,117,.45);color:var(--green-d)}

.share-cta{background:linear-gradient(158deg,#12b075,#0c8a5b);border-radius:20px;padding:24px 22px;color:#fff;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 18px 40px -22px rgba(8,96,61,.6)}
.share-copy{flex:1;min-width:200px}
.share-title{font-family:var(--serif);font-weight:700;font-size:19px;margin-bottom:4px}
.share-copy p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.9)}
.share-btns{display:flex;gap:9px}
.share-btns button{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;padding:11px 18px;border-radius:12px;cursor:pointer}
.btn-white{background:#fff;color:var(--green-d);border:0}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}

/* related */
.related{margin-top:44px;max-width:760px;margin-left:auto;margin-right:auto}
.related-grid{display:grid;grid-template-columns:1fr;gap:14px}
.rel{display:block}
.rel-cover{height:120px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:44px;opacity:.95;background-size:cover;background-position:center}
.rel-info{padding:14px 15px 16px}
.rel-info .tag{font-size:11.5px;font-weight:700;color:var(--green-d);margin-bottom:5px}
.rel-info h3{margin:0;font-size:15px;font-weight:700;line-height:1.36;color:var(--ink);text-wrap:pretty}
.rel-info h3 a{color:inherit}
@media(min-width:680px){.related-grid{grid-template-columns:1fr 1fr}}

/* page (static) uses .art + .prose; comments */
.comments{max-width:760px;margin:44px auto 0}
.comments h2{font-family:var(--serif);font-size:22px;margin:0 0 18px}
.comment-list{list-style:none;margin:0 0 24px;padding:0}
.comment-list li{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.comment-list .comment-author{font-weight:700;font-size:14px}
.comment-list .comment-meta{font-size:12px;color:var(--muted-2);margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;font-size:14px;margin-bottom:12px;background:#fff}
.comment-form textarea{min-height:120px}