/* Anima Games — blog styles. Layers on styles.css tokens. */

/* cyan "explore" chip — mirrors the content email */
.chip{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:#04201f;background:var(--grad-crystal);padding:5px 13px;border-radius:3px}

/* ---------- listing ---------- */
.blog-head{text-align:center;padding:132px 28px 20px}
.blog-head h1.h{font-family:var(--font-display);font-weight:900;color:var(--c-ice);font-size:clamp(2.2rem,5vw,3.2rem)}
.blog-list{padding:40px 0 96px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.post-card{display:flex;flex-direction:column;background:var(--grad-stone);border:var(--frame-gold);border-radius:8px;
  overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.post-card:hover{transform:translateY(-4px);border-color:var(--c-gold);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.pc-thumb{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid rgba(166,145,29,.2)}
.pc-thumb img{width:100%;height:100%;object-fit:cover}
.pc-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-body h2{font-family:var(--font-display);font-weight:900;color:var(--c-ice);font-size:1.3rem;line-height:1.15;margin-top:4px}
.pc-body p{font-size:.98rem;color:var(--c-steel);flex:1}
.pc-meta{font-family:var(--font-display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-crystal)}

/* ---------- single post ---------- */
.post{max-width:768px;margin:0 auto;padding:120px 28px 40px}
.post-back{display:inline-block;font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-steel-dim);margin-bottom:22px}
.post-back:hover{color:var(--c-crystal)}
.post .chip{margin-bottom:14px}
.post-title{font-family:var(--font-display);font-weight:900;color:var(--c-ice);line-height:1.08;
  font-size:clamp(2rem,5vw,3rem);margin:6px 0 12px}
.post-meta{font-family:var(--font-display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-steel-dim)}
.post-hero{margin:28px 0 8px;border-radius:8px;overflow:hidden;border:var(--frame-gold);box-shadow:0 18px 50px rgba(0,0,0,.5)}

/* ---------- prose ---------- */
.prose{margin-top:26px;font-family:var(--font-body);font-size:1.18rem;line-height:1.75;color:var(--c-steel)}
.prose p{margin:0 0 20px}
.prose h2{font-family:var(--font-display);font-weight:700;color:var(--c-ice);font-size:1.7rem;margin:38px 0 14px}
.prose h3{font-family:var(--font-display);font-weight:700;color:var(--c-ice);font-size:1.32rem;margin:30px 0 10px}
.prose h4{font-family:var(--font-alt);font-weight:600;color:var(--c-ice);font-size:1.1rem;margin:24px 0 8px}
.prose a{color:var(--c-crystal);border-bottom:1px solid rgba(91,245,249,.3)}
.prose a:hover{border-bottom-color:var(--c-crystal)}
.prose em{color:var(--c-ice);font-style:italic}
.prose strong{color:var(--c-ice);font-weight:700}
.prose ul,.prose ol{margin:0 0 20px;padding-left:26px}
.prose li{margin:6px 0}
.prose img{border-radius:6px;border:var(--frame-gold);margin:24px 0}
.prose hr{border:0;height:1px;background:var(--grad-rule);margin:34px 0}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:var(--c-stone-lo);
  border:1px solid var(--c-stone-hi);border-radius:4px;padding:1px 6px;color:var(--c-crystal)}
.prose pre{background:var(--c-stone-lo);border:1px solid var(--c-stone-hi);border-radius:8px;padding:18px 20px;overflow:auto;margin:0 0 22px}
.prose pre code{background:none;border:0;padding:0;color:var(--c-steel)}

/* read-aloud / boxed text (from Markdown blockquotes) — matches the email */
.prose blockquote.readaloud{border-left:3px solid var(--c-gold);background:#0c1413;
  padding:18px 22px;margin:0 0 24px;font-style:italic;color:#c9d9d6;border-radius:0 6px 6px 0}

/* ---------- post CTA ---------- */
.post-cta{margin-top:44px;padding-top:30px;border-top:1px solid rgba(166,145,29,.22);text-align:center}
.post-cta-lead{font-family:var(--font-display);color:var(--c-ice);font-size:1.15rem;margin-bottom:18px}
.post-rail{margin-top:18px;font-size:.95rem;color:var(--c-steel-dim)}
.post-rail a{color:var(--c-crystal)}

@media(max-width:560px){.blog-head{padding-top:104px}.post{padding-top:100px}}