/* ===========================================================================
   JUST CREATE — the classes page
   ========================================================================= */

.page-head { padding-block: clamp(2rem, 5vw, 3.2rem) 1.6rem; max-width: 46rem; }
.page-head h1 { margin-bottom: .3em; }
.page-head .lede { margin-bottom: .6rem; }

.month-block { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* ⚠ NO BORDER. The brush stroke IS the rule under this heading — see
   brushRules() in site.js. With both, the month sat above a painted stroke
   and a hard 2px line running the full width, which reads as a mistake
   rather than as two decisions. */
.month-head {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: var(--ocean-deep);
  margin-bottom: 1.6rem;
}

/* ---- nothing on ----------------------------------------------------------
   A real, normal state for a monthly class — not an error page. It gets the
   same care as a full one. */
.empty-state {
  background: var(--sky-wash);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 5vw, 3rem);
  max-width: 46rem;
}
.empty-state h2 { margin-bottom: .4em; }
.empty-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.2rem; }

main > .notice { margin-block: 1rem var(--rhythm); max-width: 46rem; }

@media (max-width: 520px) {
  .empty-actions .btn { flex: 1 1 auto; }
}