/* --- Closers Coffee --------------------------------------------------------
   Ported from designs/Closers Coffee.dc.html. Namespaced .cf-* under .p-coffee.

   Signature moment: the fresh pot. Steam rises off the hero mug and off a
   just-posted card, and the newest post carries a pour-in glow.
   -------------------------------------------------------------------------- */

@keyframes cf-steam {
  0%   { transform: translateY(0) scale(.7); opacity: 0; }
  25%  { opacity: .45; }
  100% { transform: translateY(-42px) scale(1.7); opacity: 0; }
}

.p-coffee { max-width: 1180px; margin: 0 auto; padding: 28px 32px 64px; }

/* --- Hero ------------------------------------------------------------------ */
.cf-hero {
  position: relative; overflow: hidden; border-radius: 20px; padding: 26px 30px;
  background: var(--bg-1); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.cf-hero-glow { position: absolute; top: -100px; right: -50px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--amber-soft) 0%, transparent 62%); }
.cf-mug { position: relative; flex: none; width: 86px; height: 86px; }
.cf-mug .steam { position: absolute; border-radius: 50%; background: var(--ink-4); filter: blur(4px); }
.cf-mug .steam:nth-child(1) { left: 22px; top: 4px; width: 12px; height: 12px; animation: cf-steam 3s 0s linear infinite; }
.cf-mug .steam:nth-child(2) { left: 40px; top: -2px; width: 9px;  height: 9px;  animation: cf-steam 3.6s 1.1s linear infinite; }
.cf-mug .steam:nth-child(3) { left: 56px; top: 6px;  width: 10px; height: 10px; animation: cf-steam 3.2s 2s linear infinite; }
.cf-hero-main { flex: 1; min-width: 240px; position: relative; }
.cf-kicker { font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: .17em; color: var(--amber); }
.cf-h1 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 8px 0 0; color: var(--ink); }
.cf-lede { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); max-width: 560px; line-height: 1.55; }
.cf-fresh { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 11px; border-radius: 999px; background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; color: var(--amber); }
.cf-fresh i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: none; animation: da-pulse 1.8s ease-in-out infinite; }

/* --- Bar ------------------------------------------------------------------- */
.cf-bar { display: flex; align-items: center; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.cf-seg { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line-2); }
.cf-seg a {
  display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 8px;
  color: var(--ink-3); text-decoration: none;
  font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: .05em; font-weight: 500;
}
.cf-seg a.is-on { background: var(--brand); color: var(--on-brand); box-shadow: 0 2px 0 var(--edge); }
.cf-bar .sp { flex: 1; }
.cf-new {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 17px;
  border: none; border-radius: 10px; background: var(--brand); color: var(--on-brand);
  box-shadow: 0 4px 0 var(--edge); cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .05em;
}
.cf-new:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.cf-new:hover { color: var(--on-brand); }

/* --- Layout ---------------------------------------------------------------- */
.cf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cf-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cf-card + .cf-card { margin-top: 16px; }
.cf-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 11px; border-bottom: 1px solid var(--line); }
.cf-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.cf-card-head .meta { margin-left: auto; font-family: ui-monospace, monospace; font-size: 10px; color: var(--ink-4); }

/* --- Posts ----------------------------------------------------------------- */
.cf-post { position: relative; padding: 15px 18px; border-bottom: 1px solid var(--line); transition: background 120ms; }
.cf-post:last-child { border-bottom: none; }
.cf-post:hover { background: var(--bg-2); }
/* The freshest post gets the pour-in glow, once, at the top of the feed. */
.cf-post.is-fresh { background: linear-gradient(90deg, var(--amber-soft), transparent 60%); box-shadow: inset 3px 0 0 var(--amber); }
.cf-post-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.cf-av { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line-2); font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3); }
.cf-av.me { background: var(--brand-soft); border-color: rgba(239, 89, 32,.35); color: var(--brand-2); }
.cf-by { font-size: 13px; font-weight: 650; color: var(--ink); }
.cf-by .you { font-family: ui-monospace, monospace; font-size: 10px; color: var(--green); margin-left: 5px; }
.cf-when { font-family: ui-monospace, monospace; font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.cf-chip { margin-left: auto; font-family: ui-monospace, monospace; font-size: 10px; padding: 3px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink-3); text-decoration: none; }
.cf-chip:hover { border-color: var(--brand); color: var(--brand-2); }
.cf-title { font-size: 15px; font-weight: 700; line-height: 1.35; }
.cf-title a { color: var(--ink); text-decoration: none; }
.cf-title a:hover { color: var(--brand-2); }
.cf-body { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin-top: 6px; }
.cf-foot { display: flex; align-items: center; gap: 14px; margin-top: 11px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-4); }
.cf-vote { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink-3); cursor: pointer; font-family: inherit; font-size: 11px; }
.cf-vote.voted { background: var(--brand-soft); border-color: rgba(239, 89, 32,.35); color: var(--brand-2); }
.cf-vote.own { cursor: default; opacity: .7; }
.cf-pin { font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; background: var(--amber-soft); color: var(--amber); }

/* --- Communities ----------------------------------------------------------- */
.cf-comm { display: flex; align-items: center; gap: 11px; padding: 11px 18px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.cf-comm:last-child { border-bottom: none; }
.cf-comm:hover { background: var(--bg-2); }
.cf-comm-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-comm-n { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }
.cf-empty { padding: 22px 18px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-4); line-height: 1.6; }

@media (max-width: 960px) { .cf-cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .p-coffee { padding: 18px 16px 48px; } .cf-h1 { font-size: 24px; } .cf-mug { display: none; } }