/* "Become a Member" banner (Patreon). Markup: static/index.html (Pulse, About) and server.py (_MEMBER_BANNER, blog).
   Stacks into a card when its own width is under 560px (container query), not the viewport. */
/* No margin here: it would override Tailwind's space-y-* (zero-specificity :where) on Pulse. */
.member { container-type:inline-size; }
.member-card {
  --m-bg:#f5d35b; --m-ink:#1f1a0e; --m-soft:rgba(255,255,255,0.42);
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px;
  background:var(--m-bg); color:var(--m-ink); border-radius:20px; padding:22px 22px 24px;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.dark .member-card { --m-bg:#ebc94f; }
.member-card > * { position:relative; z-index:1; }
.member-bars { position:absolute; right:14px; bottom:-14px; display:flex; align-items:flex-end; gap:10px; z-index:0; pointer-events:none; }
.member-bars span { display:block; width:36px; border-radius:18px; background:var(--m-soft); }
.member-bars span:nth-child(1) { height:72px; }
.member-bars span:nth-child(2) { height:110px; }
.member-bars span:nth-child(3) { height:96px; }
.member-eyebrow { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.72; }
.member-eyebrow svg { width:24px; height:19px; flex-shrink:0; opacity:1; }
.member-title { font-size:28px; line-height:1.1; font-weight:800; letter-spacing:-0.02em; margin-top:-4px; }
.member-text { font-size:14px; line-height:1.5; font-weight:500; opacity:0.85; max-width:34rem; }
.member-tiers { display:flex; flex-wrap:wrap; gap:8px; }
.member-tier { display:inline-flex; align-items:center; gap:5px; background:var(--m-soft); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:700; white-space:nowrap; }
.member-tier b { font-weight:700; opacity:0.6; }
.member-cta {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--m-ink); color:var(--m-bg); border-radius:999px; padding:13px 24px;
  font-size:15px; font-weight:700; white-space:nowrap; transition:transform .15s ease;
}
.member-card:hover .member-cta { transform:translateX(2px); }
.member-card:focus-visible { outline:3px solid var(--m-ink); outline-offset:3px; }
@container (min-width:560px) {
  .member-card { display:grid; grid-template-columns:1fr auto; column-gap:24px; row-gap:12px; padding:26px 28px; }
  .member-card > :not(.member-cta):not(.member-bars) { grid-column:1; }
  .member-cta { grid-column:2; grid-row:1 / span 4; align-self:center; box-shadow:0 8px 20px rgba(31,26,14,0.25); }
  .member-title { font-size:32px; }
  .member-bars { right:22px; }
  .member-bars span { width:44px; }
  .member-bars span:nth-child(1) { height:96px; }
  .member-bars span:nth-child(2) { height:150px; }
  .member-bars span:nth-child(3) { height:200px; }
}