/* FreeWill Notes — blog styles. Inherits tokens from styles.css (--ink, --teal,
   --green, --gold, --muted, --paper, --card, --line, --radius, --shadow). */

.blog-hero{padding:52px 0 8px}
.blog-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;margin:0 0 14px;letter-spacing:-.01em}
.blog-hero .lead{max-width:640px}

/* Category chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:9px 16px;font-weight:750;font-size:.86rem;
  background:var(--card);border:1px solid var(--line);color:#31516f;cursor:pointer;transition:all .15s ease}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.active{background:var(--teal);border-color:var(--teal);color:#fff}

/* Featured post */
.featured{margin-top:22px}
.featured-card{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit}
.featured-card img{width:100%;height:100%;min-height:280px;object-fit:cover}
.featured-body{padding:34px 34px 32px;display:flex;flex-direction:column;justify-content:center}
.featured-flag{display:inline-flex;align-self:flex-start;background:var(--gold);color:#3a2a08;font-weight:900;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:6px 12px;margin-bottom:14px}
.featured-body h2{font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.12;margin:0 0 12px;letter-spacing:-.01em}
.featured-body p{color:var(--muted);margin:0 0 20px;font-size:1.05rem}
.post-cat{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;font-weight:900;color:var(--teal);margin:0 0 8px}
.post-date{color:var(--muted);font-size:.85rem;font-weight:600}

/* Post grid */
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-card img{width:100%;height:200px;object-fit:cover}
.post-card .pc-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card h3{margin:0;font-size:1.22rem;line-height:1.22;letter-spacing:-.01em}
.post-card .pc-excerpt{color:var(--muted);margin:0;flex:1}
.section-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--muted);margin:40px 0 0}
.empty-note{color:var(--muted);padding:30px 0}

/* Individual post */
.post-article{width:min(760px,calc(100% - 32px));margin:0 auto;padding:44px 0 10px}
.post-article .post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.post-article h1{font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.015em;margin:6px 0 12px}
.post-article .post-sub{font-size:1.2rem;color:var(--muted);margin:0 0 26px;line-height:1.5}
.post-hero{width:100%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:32px}
.post-hero img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.post-body{font-size:1.1rem;line-height:1.72;color:#232c39}
.post-body h2{font-size:1.55rem;letter-spacing:-.01em;margin:36px 0 12px}
.post-body h3{font-size:1.2rem;margin:28px 0 10px}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin:6px 0}
.post-body img{width:100%;border-radius:18px;margin:22px 0}
.post-body blockquote{margin:22px 0;padding:6px 22px;border-left:3px solid var(--teal);color:var(--muted);font-style:italic}
.post-body a{color:var(--green);font-weight:700}

/* CTA block */
.cta-block{margin:40px 0 8px;background:var(--soft-green);border:1px solid #d7ecdf;border-radius:var(--radius);padding:30px 32px}
.cta-block h3{margin:0 0 10px;font-size:1.4rem;letter-spacing:-.01em}
.cta-block p{margin:0 0 20px;color:#33604a}

/* Related posts */
.related{margin:48px 0 8px;border-top:1px solid var(--line);padding-top:28px}
.related h3{margin:0 0 18px;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

@media (max-width:820px){
  .featured-card{grid-template-columns:1fr}
  .featured-card img{min-height:220px}
  .post-grid,.related-grid{grid-template-columns:1fr}
}