/* Peanut Junior — blog stylesheet. Shared by blog/index.html and every post.
   Tokens mirror the marketing landing page (marketing/index.html) so the blog
   is visually one with the site. Content-first: classes (not inline styles) so
   adding a post is copy-a-file-and-write. */

/* ===== TOKENS (from the landing page) ===== */
:root{
  --pj-accent:#D45E97; --pj-accent-deep:#A23E86; --pj-violet:#7E5BD0; --pj-violet-deep:#6442C0;
  --pj-tint:#F7E6F1; --pj-tint-violet:#F3EEFC;
  --pj-canvas:#FCF5FA; --pj-surface:#FFFDFE; --pj-surface-alt:#FBF7FA;
  --pj-ink:#382A3D; --pj-ink-soft:#8A7488; --pj-ink-faint:#BCA9BB; --pj-on-accent:#FFFFFF;
  --pj-line:#EFE1EC;
  --pj-gradient:linear-gradient(135deg, var(--pj-accent), var(--pj-violet));
  --pj-gradient-warm:linear-gradient(120deg, var(--pj-accent), var(--pj-accent-deep));
  --pj-font-display:"Fraunces","Georgia","Times New Roman",serif;
  --pj-font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pj-radius-sm:14px; --pj-radius-md:20px; --pj-radius-lg:26px; --pj-radius-pill:999px;
  --pj-shadow-soft:0 1px 2px rgba(56,42,61,.04), 0 8px 24px rgba(56,42,61,.07);
  --pj-shadow-lift:0 2px 6px rgba(56,42,61,.06), 0 20px 48px rgba(56,42,61,.13);
  --pj-shadow-accent:0 8px 20px rgba(212,94,151,.35);
}

/* ===== BASE ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--pj-font-body); color:var(--pj-ink);
  background:radial-gradient(1200px 760px at 50% -8%, #FBEBE0 0%, transparent 56%), var(--pj-canvas);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{display:block; max-width:100%;}
:focus-visible{outline:2px solid var(--pj-accent); outline-offset:2px; border-radius:6px;}
::selection{background:var(--pj-tint); color:var(--pj-accent-deep);}

/* ===== HEADER (matches landing) ===== */
.blog-header{position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:13px clamp(18px,5vw,40px);
  background:rgba(255,253,254,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--pj-line);}
.blog-brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none;}
.blog-brand img{width:32px; height:32px; border-radius:9px; box-shadow:0 4px 12px rgba(212,94,151,.30);}
.blog-brand span{font-family:var(--pj-font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--pj-ink);}
.blog-nav{display:flex; align-items:center; gap:6px;}
.blog-nav__link{text-decoration:none; font-weight:600; font-size:14px; color:var(--pj-ink-soft);
  padding:10px 12px; border-radius:var(--pj-radius-pill); transition:color .18s ease;}
.blog-nav__link:hover{color:var(--pj-accent-deep);}
.blog-nav__cta{text-decoration:none; font-weight:700; font-size:13.5px; line-height:1; color:var(--pj-on-accent);
  background:var(--pj-gradient-warm); box-shadow:var(--pj-shadow-accent); padding:11px 17px;
  border-radius:var(--pj-radius-pill); white-space:nowrap; transition:transform .12s ease,filter .18s ease;}
.blog-nav__cta:hover{filter:brightness(1.04);}
.blog-nav__cta:active{transform:scale(.97);}

/* ===== LAYOUT ===== */
.blog-wrap{max-width:1120px; margin:0 auto; padding:clamp(28px,5vw,56px) clamp(20px,5vw,40px);}
.blog-kicker{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pj-accent-deep); margin:0 0 12px;}
.blog-hero__title{font-family:var(--pj-font-display); font-weight:600; font-size:clamp(30px,5.5vw,46px); line-height:1.08; letter-spacing:-.02em; color:var(--pj-ink); margin:0 0 14px;}
.blog-lead{font-size:clamp(15px,2vw,18px); line-height:1.6; color:var(--pj-ink-soft); max-width:44ch; margin:0;}

/* ===== POST LIST ===== */
.post-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:clamp(28px,4vw,44px);}
@media(min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.post-grid{grid-template-columns:repeat(3,1fr);}}
.post-card{display:flex; flex-direction:column; background:var(--pj-surface); border:1px solid var(--pj-line);
  border-radius:var(--pj-radius-lg); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--pj-shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease;}
.post-card:hover{transform:translateY(-3px); box-shadow:var(--pj-shadow-lift);}
.post-card__cover{aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--pj-tint-violet);}
.post-card__body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.post-card__meta{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--pj-ink-faint);}
.post-card__title{font-family:var(--pj-font-display); font-weight:600; font-size:20px; line-height:1.25; color:var(--pj-ink); margin:0;}
.post-card__excerpt{font-size:14.5px; line-height:1.55; color:var(--pj-ink-soft); margin:0;}
.post-card__more{margin-top:auto; padding-top:10px; font-weight:700; font-size:13.5px; color:var(--pj-accent-deep);}

/* Empty state (no posts yet) */
.blog-empty{margin-top:clamp(28px,4vw,44px); background:var(--pj-surface); border:1px dashed var(--pj-line);
  border-radius:var(--pj-radius-lg); padding:clamp(32px,6vw,56px); text-align:center;}
.blog-empty__t{font-family:var(--pj-font-display); font-weight:600; font-size:22px; color:var(--pj-ink); margin:0 0 8px;}
.blog-empty__p{font-size:15px; line-height:1.6; color:var(--pj-ink-soft); margin:0 auto; max-width:40ch;}

/* ===== ARTICLE (single post) ===== */
.article{max-width:720px; margin:0 auto; padding:clamp(24px,4vw,44px) clamp(20px,5vw,32px);}
.article__back{display:inline-block; font-size:13.5px; font-weight:600; color:var(--pj-ink-soft); text-decoration:none; margin-bottom:18px;}
.article__back:hover{color:var(--pj-accent-deep);}
.article__meta{font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--pj-accent-deep); margin:0 0 12px;}
.article h1{font-family:var(--pj-font-display); font-weight:600; font-size:clamp(28px,5vw,42px); line-height:1.12; letter-spacing:-.02em; color:var(--pj-ink); margin:0 0 14px;}
.article__byline{font-size:14px; color:var(--pj-ink-soft); margin:0 0 26px;}
.article__cover{width:100%; border-radius:var(--pj-radius-lg); margin:0 0 28px; border:1px solid var(--pj-line);}
.article__body{font-size:17px; line-height:1.72; color:var(--pj-ink);}
.article__body p{margin:0 0 20px;}
.article__body h2{font-family:var(--pj-font-display); font-weight:600; font-size:26px; line-height:1.2; letter-spacing:-.01em; margin:34px 0 12px;}
.article__body h3{font-weight:700; font-size:19px; margin:26px 0 10px;}
.article__body a{color:var(--pj-accent-deep); text-decoration:underline; text-underline-offset:2px; font-weight:600;}
.article__body ul,.article__body ol{margin:0 0 20px; padding-left:22px;}
.article__body li{margin:0 0 8px;}
.article__body img{width:100%; border-radius:var(--pj-radius-md); margin:24px 0; border:1px solid var(--pj-line);}
.article__body blockquote{margin:24px 0; padding:4px 0 4px 18px; border-left:3px solid var(--pj-accent);
  font-family:var(--pj-font-display); font-style:italic; font-size:19px; color:var(--pj-ink); line-height:1.5;}
.article__cta{margin:40px 0 8px; padding:24px; background:linear-gradient(120deg, var(--pj-tint), var(--pj-tint-violet));
  border:1px solid var(--pj-line); border-radius:var(--pj-radius-lg); text-align:center;}
.article__cta p{margin:0 0 14px; font-size:15.5px; color:var(--pj-ink); font-weight:500;}
.article__cta a{display:inline-block; text-decoration:none; font-weight:700; font-size:14px; color:var(--pj-on-accent);
  background:var(--pj-gradient-warm); box-shadow:var(--pj-shadow-accent); padding:12px 22px; border-radius:var(--pj-radius-pill);}

/* ===== FOOTER (matches landing) ===== */
.blog-footer{border-top:1px solid var(--pj-line); padding:clamp(32px,5vw,48px) clamp(20px,5vw,40px);}
.blog-footer__in{max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;}
.blog-footer__brand{display:flex; align-items:center; gap:11px;}
.blog-footer__brand img{width:30px; height:30px; border-radius:9px; box-shadow:0 3px 9px rgba(212,94,151,.26);}
.blog-footer__name{font-family:var(--pj-font-display); font-weight:600; font-size:16px; color:var(--pj-ink); line-height:1.1;}
.blog-footer__tag{font-size:11.5px; color:var(--pj-ink-soft); margin-top:1px;}
.blog-footer__links{display:flex; align-items:center; gap:22px; font-size:13px; color:var(--pj-ink-soft); flex-wrap:wrap;}
.blog-footer__links a{text-decoration:none; color:inherit; font-weight:500;}
.blog-footer__links a:hover{color:var(--pj-accent-deep);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .post-card,.blog-nav__cta{transition:none;}
}