/* ============================================================
   BLOG  (/blog/, /blog/<slug>/, /blog/tag/<t>/)
   ============================================================ */

/* ---------- shared hero (archive + tag) ---------- */
.bl-hero{position:relative;background:var(--ink);color:#fff;padding:clamp(120px,16vh,168px) 0 clamp(44px,6vw,64px);overflow:hidden}
.bl-hero-glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:900px;height:620px;background:radial-gradient(ellipse at center,rgba(228,106,44,.2),transparent 62%);pointer-events:none}
.bl-hero-inner{position:relative;max-width:780px}
.bl-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:#cfcfd6;margin:0 0 18px}
.bl-h1{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.02;font-size:clamp(2.4rem,5.5vw,4rem);margin:0 0 20px}
.bl-lead{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.6;color:#c4c4cc;max-width:620px;margin:0}
.bl-lead-link{color:var(--volt);font-weight:600;text-decoration:none;white-space:nowrap}
.bl-lead-link:hover{text-decoration:underline}

/* ---------- archive list ---------- */
.bl-list-sec{background:var(--ink);color:#fff;padding:clamp(40px,6vw,72px) 0 clamp(80px,10vw,120px)}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.bl-card{position:relative;display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 22px;transition:border-color .2s,transform .2s,background .2s}
.bl-card:hover{border-color:rgba(228,106,44,.5);transform:translateY(-3px);background:var(--ink-3)}
.bl-card-link{position:absolute;inset:0;z-index:1}
.bl-card-body{flex:1}
.bl-card-meta{font-family:var(--display);font-weight:500;font-size:.78rem;color:#8a8a94;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.bl-card-title{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.18;font-size:1.32rem;margin:0 0 12px;color:#fff}
.bl-card:hover .bl-card-title{color:var(--volt)}
.bl-card-excerpt{color:#a6a6b0;font-size:.96rem;line-height:1.55;margin:0 0 20px}
.bl-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.bl-card-tag{font-size:.72rem;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#c4c4cc;border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.bl-card-more{position:relative;z-index:2;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--volt)}
.bl-card-more .arr{transition:transform .2s;display:inline-block}
.bl-card:hover .bl-card-more .arr{transform:translateX(3px)}
.bl-empty{color:#a6a6b0;font-size:1.05rem}

.bl-pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:48px}
.bl-page-btn{font-family:var(--display);font-weight:600;color:#fff;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:10px 20px;transition:border-color .2s,color .2s}
.bl-page-btn:hover{border-color:var(--volt);color:var(--volt)}
.bl-page-count{color:#8a8a94;font-size:.9rem}

/* ---------- archive CTA ---------- */
.bl-cta,.bp-cta{position:relative;background:var(--ink-2);color:#fff;padding:clamp(70px,9vw,110px) 0;overflow:hidden;text-align:center;border-top:1px solid var(--line)}
.bl-cta-glow,.bp-cta-glow{position:absolute;bottom:-45%;left:50%;transform:translateX(-50%);width:820px;height:540px;background:radial-gradient(ellipse at center,rgba(228,106,44,.18),transparent 62%);pointer-events:none}
.bl-cta-inner,.bp-cta-inner{position:relative;max-width:640px;margin:0 auto}
.bl-cta h2,.bp-cta h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,4vw,2.9rem);margin:0 0 15px}
.bl-cta p,.bp-cta p{color:#c4c4cc;font-size:1.05rem;line-height:1.55;margin:0 0 28px}
.bl-cta-btns,.bp-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- post hero ---------- */
.bp-hero{position:relative;background:var(--ink);color:#fff;padding:clamp(118px,15vh,160px) 0 clamp(40px,5vw,56px);overflow:hidden}
.bp-hero-glow{position:absolute;top:-35%;left:50%;transform:translateX(-50%);width:820px;height:560px;background:radial-gradient(ellipse at center,rgba(228,106,44,.16),transparent 62%);pointer-events:none}
.bp-hero-inner{position:relative;max-width:760px}
.bp-back{margin:0 0 22px}
.bp-back a{font-family:var(--display);font-weight:600;font-size:.86rem;color:#cfcfd6;text-decoration:none;transition:color .2s}
.bp-back a:hover{color:var(--volt)}
.bp-meta{font-family:var(--display);font-weight:500;font-size:.82rem;color:#9a9aa4;text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px}
.bp-title{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.05;font-size:clamp(2.1rem,4.6vw,3.4rem);margin:0 0 20px}
.bp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.bp-tag{font-size:.74rem;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#c4c4cc;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;transition:border-color .2s,color .2s}
.bp-tag:hover{border-color:var(--volt);color:var(--volt)}
.bp-img-wrap{margin-top:-30px}
.bp-img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}

/* ---------- post body (paper, readable) ---------- */
.bp-body{background:var(--paper);color:var(--ink);padding:clamp(56px,7vw,88px) 0}
.bp-body-inner{max-width:720px}
.bp-summary{background:#fff;border:1px solid var(--line-dark);border-left:4px solid var(--volt);border-radius:14px;padding:22px 26px;margin:0 0 40px}
.bp-summary-label{font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--volt-deep);margin:0 0 8px}
.bp-summary p:last-child{margin:0;font-size:1.12rem;line-height:1.62;color:var(--ink)}
.prose{font-size:1.12rem;line-height:1.72;color:#26251f}
.prose>p:first-child{font-size:1.24rem;line-height:1.62;color:var(--ink)}
.prose h2{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.15;font-size:clamp(1.5rem,2.6vw,1.95rem);margin:2.4em 0 .7em;color:var(--ink)}
.prose h3{font-family:var(--display);font-weight:700;line-height:1.2;font-size:1.28rem;margin:1.9em 0 .6em;color:var(--ink)}
.prose p{margin:0 0 1.25em}
.prose a{color:var(--volt-deep);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.prose a:hover{color:var(--volt)}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.3em}
.prose li{margin:0 0 .55em;padding-left:.2em}
.prose li::marker{color:var(--volt)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--volt);font-size:1.15rem;line-height:1.6;color:#3a382f}
.prose blockquote p{margin:0}
.prose img{max-width:100%;height:auto;border-radius:14px;margin:1.6em 0}
.prose code{background:rgba(10,10,11,.06);border:1px solid var(--line-dark);border-radius:6px;padding:1px 6px;font-size:.92em}
.prose hr{border:0;border-top:1px solid var(--line-dark);margin:2.4em 0}

/* ---------- post FAQ accordion ---------- */
.bp-faq{margin-top:56px;border-top:1px solid var(--line-dark);padding-top:44px}
.bp-faq>h2{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0 0 24px;color:var(--ink)}
.bp-faq-list{display:flex;flex-direction:column;gap:12px}
.bp-faq-item{background:#fff;border:1px solid var(--line-dark);border-radius:14px;overflow:hidden}
.bp-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.bp-faq-item summary::-webkit-details-marker{display:none}
.bp-faq-item summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--volt);transition:transform .2s;line-height:1}
.bp-faq-item[open] summary::after{transform:rotate(45deg)}
.bp-faq-body{padding:0 20px 20px}
.bp-faq-body p{margin:0;color:#41403a;line-height:1.6}

/* ---------- author card ---------- */
.bp-author{display:flex;gap:16px;align-items:flex-start;margin-top:48px;padding:24px;background:#fff;border:1px solid var(--line-dark);border-radius:var(--r)}
.bp-author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;object-position:top}
.bp-author-name{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:0 0 4px;color:var(--ink)}
.bp-author-bio{margin:0;font-size:.94rem;line-height:1.55;color:#54524a}
.bp-author-bio a{color:var(--volt-deep);text-decoration:underline;text-underline-offset:2px;font-weight:500}

@media (max-width:560px){
  .bp-author{flex-direction:column;gap:12px}
  .bl-pagination{flex-wrap:wrap}
}