:root{
  --b0024-bg:#0b1220;
  --b0024-surface:#0f1a2f;
  --b0024-ink:#e5e7eb;
  --b0024-muted:#a7b0c0;
  --b0024-accent:#fb923c;
  --b0024-border:rgba(251,146,60,.22);
}

body.theme-b0024{
  background:var(--b0024-bg);
  color:var(--b0024-ink);
}

.b0024-hero{
  background: linear-gradient(135deg, rgba(251,146,60,.18), rgba(15,26,47,0));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.b0024-surface{
  background: var(--b0024-surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}

.b0024-masonry{
  column-count: 3;
  column-gap: 1rem;
}

.b0024-masonry .card{
  break-inside: avoid;
  margin-bottom: 1rem;
  border-color: rgba(255,255,255,.08);
}

.b0024-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.15rem .5rem;
  border-radius:999px;
  border: 1px solid var(--b0024-border);
  color: var(--b0024-muted);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Required footer skeleton uses .container */
#footer .container{
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

.social [class^="icon-"]::before,
.social [class*=" icon-"]::before{
  content:"";
  display:inline-block;
  width:.75rem;
  height:.75rem;
  border-radius:999px;
  background: var(--b0024-accent);
  opacity:.85;
}

@media (max-width: 992px){
  .b0024-masonry{ column-count: 2; }
}

@media (max-width: 576px){
  .b0024-masonry{ column-count: 1; }
}