/* ════════════════════════════════════════════════════════════════
   Zajuga · blog (added 2026-10-14)
   Loaded AFTER shared-shell.css and sage.css by /blog/index.html and
   every post. Uses the shared tokens only — no new colours — so the
   blog re-tones with the rest of the site.
   ════════════════════════════════════════════════════════════════ */

/* ── Circle tag ── one pill per post, coloured by its circle. */
.circle-tag{display:inline-flex; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--z-text); background:var(--z-bg-3); border:1px solid var(--z-line); border-radius:999px; padding:.34rem .8rem .34rem .65rem; white-space:nowrap}
.circle-tag:before{content:""; width:9px; height:9px; border-radius:50%; background:var(--circle, var(--z-anchor)); flex:0 0 9px}
.circle-tag[data-circle="Spirit"]{--circle:var(--c-spirit)}
.circle-tag[data-circle="Mind"]{--circle:var(--c-mind)}
.circle-tag[data-circle="Body"]{--circle:var(--c-body)}
.circle-tag[data-circle="Family"]{--circle:var(--c-family)}
.circle-tag[data-circle="Work"]{--circle:var(--c-work)}
.circle-tag[data-circle="Money"]{--circle:var(--c-money)}
.circle-tag[data-circle="Vault"]{--circle:var(--c-vault)}
.circle-tag[data-circle="Voice"]{--circle:var(--c-voice)}

/* ── Index: post cards ── */
.blog-list{padding:64px 0 104px}
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}
.post-card{display:flex; flex-direction:column; gap:14px; background:var(--z-bg-3); border:1px solid var(--z-line); border-radius:20px; padding:28px 26px; transition:transform .3s, border-color .3s}
.post-card:hover{transform:translateY(-4px); border-color:var(--z-anchor)}
.post-card .meta{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.post-card time{font-size:.82rem; color:var(--z-text-faint)}
.post-card h2{font-size:1.45rem; line-height:1.15; color:var(--z-text)}
.post-card h2 a:hover{color:var(--z-anchor-soft); text-decoration:underline; text-underline-offset:3px}
.post-card p{font-size:.97rem; color:var(--z-text-muted); flex:1}
.post-card .read-more{font-weight:600; font-size:.92rem; color:var(--z-gold-text-strong); align-self:flex-start}
.post-card .read-more:hover{color:var(--z-anchor)}
.blog-empty{max-width:520px; margin:0 auto; text-align:center; padding:56px 28px; border:1px dashed var(--z-line-strong); border-radius:22px; background:var(--z-bg-3)}
.blog-empty h2{font-size:1.7rem; font-style:italic; margin-bottom:10px}
.blog-empty p{color:var(--z-text-muted)}
.blog-empty .btn{margin-top:22px}

/* ── Post page ── */
.post-head{padding:72px 0 40px; background:linear-gradient(180deg,var(--z-bg),var(--z-bg-2)); border-bottom:1px solid var(--z-line)}
.post-head .back{display:inline-block; font-size:.86rem; font-weight:600; color:var(--z-gold-text-strong); margin-bottom:22px}
.post-head .back:hover{color:var(--z-anchor)}
.post-head h1{font-size:clamp(2.2rem,5.4vw,3.6rem); font-style:italic; color:var(--z-text); margin:16px 0 14px}
.post-head .summary{font-size:1.15rem; color:var(--z-text-muted); max-width:60ch}
.post-head .byline{margin-top:20px; font-size:.9rem; color:var(--z-text-faint)}
.post-head .byline strong{color:var(--z-text); font-weight:600}
.narrow{max-width:740px; margin:0 auto; padding-left:28px; padding-right:28px}

.post-body{padding:52px 0 24px; font-size:1.08rem; line-height:1.75; color:var(--z-text)}
.post-body > * + *{margin-top:1.15em}
.post-body h2{font-size:1.75rem; line-height:1.2; margin-top:1.9em}
.post-body h3{font-size:1.3rem; line-height:1.25; margin-top:1.6em}
.post-body ul,.post-body ol{padding-left:1.4em}
.post-body li + li{margin-top:.45em}
.post-body a{color:var(--z-gold-text-strong); text-decoration:underline; text-underline-offset:3px}
.post-body a:hover{color:var(--z-anchor)}
.post-body blockquote{border-left:3px solid var(--z-gold); padding:.2em 0 .2em 1.1em; font-family:"Fraunces",serif; font-style:italic; font-size:1.2rem; color:var(--z-text-muted)}
.post-body img{max-width:100%; height:auto; border-radius:16px}

.post-faq{padding:28px 0 8px}
.post-faq h2{font-size:1.75rem; margin-bottom:18px}
.post-faq details{border-top:1px solid var(--z-line); padding:18px 0}
.post-faq details:last-of-type{border-bottom:1px solid var(--z-line)}
.post-faq summary{cursor:pointer; font-weight:600; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:16px}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary:after{content:"+"; font-size:1.3rem; line-height:1; color:var(--z-gold-text-strong)}
.post-faq details[open] summary:after{content:"\2212"}
.post-faq details p{margin-top:10px; color:var(--z-text-muted); line-height:1.7}

.post-cta{margin:48px 0 96px; padding:36px 32px; border-radius:22px; background:linear-gradient(160deg,var(--z-anchor),var(--z-anchor-deep)); color:var(--z-text-on-anchor); text-align:center}
.post-cta h2{font-size:1.9rem; font-style:italic; color:var(--z-text-on-anchor); margin-bottom:10px}
.post-cta p{color:var(--z-text-muted-on-anchor); max-width:44ch; margin:0 auto 22px}
.post-cta .employers{margin:26px auto 0; padding-top:20px; border-top:1px solid var(--z-line-on-anchor); font-size:.95rem; max-width:none}
.post-cta .employers a{color:var(--z-gold); font-weight:600; text-decoration:underline; text-underline-offset:3px}

@media(max-width:600px){
  .narrow{padding-left:16px; padding-right:16px}
  .post-head{padding:52px 0 32px}
  .blog-list{padding:44px 0 72px}
  .post-grid{grid-template-columns:1fr}
  .post-cta{padding:30px 20px}
}