/* Temptation Designs — blog engagement (share / like / views)
   Loaded only by blog post pages, alongside /blog/engage.js.
   Uses the site design tokens from /assets/site.css (defined there:
   --ink, --muted, --paper, --surface, --line, --gold, --gold2).
   Counts come from the first-party /api endpoints (see _worker.js).
   Display rule: counts stay hidden until a post passes 25 views;
   the like button works at all times. */

.engage{
  margin-top:3rem;padding:1.4rem 1.5rem;
  background:var(--surface);
  border:1px solid var(--line);border-top:4px solid var(--gold);
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;
}
.engage-title{
  font-family:Bebas,Impact,sans-serif;font-weight:400;letter-spacing:.05em;
  font-size:1.4rem;line-height:1;margin-right:auto;color:var(--ink);
}
.engage-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.engage-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem .95rem;border-radius:3px;cursor:pointer;
  background:transparent;border:1px solid var(--line);
  color:var(--ink);font-family:Mont,ui-sans-serif,sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
.engage-btn:hover{border-color:var(--gold);color:var(--gold)}
.engage-like.is-liked{background:var(--gold);border-color:var(--gold);color:#fffdf6}
.engage-like.is-liked:hover{color:#fffdf6}
.engage-counts{width:100%;color:var(--muted);font-size:.92rem;font-weight:600;margin:0}
.engage-counts[hidden]{display:none}