/* Start to Finish inside a standard Habibi Code page (habibicode.html): the shared header from band.js on
   top, in a dark version matched to this page, and the page's container lined up with the header's
   (1240px including a 32px gutter, 20px below 820px wide). Loaded after styles.css. */

/* The band's own dark theme is warm brown-black; these are this page's colours instead. The orange
   rule under the band is kept: band.js calls it the one thing that says whose site this is. */
habibi-band {
  --band-bg: #141518;
  --band-ink: #ebe8e1;
  --band-mute: #767b82;
  --band-line: #34363b;
  --band-surface: #1c1d20;
}

.hc .page { padding: 22px 32px 32px; }

/* the line under the band: one sentence on what the page shows, and the scope under it */
.hc .hc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hc .hc-bar-text { flex: 1 1 auto; min-width: 0; }
.hc .lede {
  margin: 0;
  font: 700 clamp(19px, 2.2vw, 24px)/1.25 "Space Grotesk", var(--body);
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hc .scope { margin: 6px 0 0; font-size: 14px; min-height: 0; }

.hc .controls { margin-top: 16px; }

/* keep the page's sides on the band's at every width (styles.css drops to 16px at 900px) */
@media (max-width: 900px) {
  .hc .page { padding: 16px 32px 24px; }
}
@media (max-width: 820px) {
  .hc .page { padding-left: 20px; padding-right: 20px; }
}