/* Page-level layout primitives shared by every page. */

.section {
  max-width: calc(var(--max) + var(--pad)*2);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* A full-width horizontal band of content: the gutter-limited container plus
   the vertical section rhythm. index.html repeated this as an inline style on
   every top-level section, which put the padding out of reach of any media
   query — the whole point of --gap-sec is that it comes down on a phone. */
.band {
  max-width: calc(var(--max) + var(--pad)*2);
  margin: 0 auto;
  padding: var(--gap-sec) var(--pad);
}

/* Small uppercase label above a section heading. Appeared inline six times on
   index.html alone, each with the same five declarations. */
.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 12px;
}

.divider { height: 1px; background: var(--light-gray); width: 100%; }

/* ── SECTION HEADER ── */
.s-title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: var(--step-4);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--black);
}
/* Section subtitle. index.html declared a 20px/1.5 variant but never applied the
   class; community.html is the only page that renders .s-sub, so its values are
   the ones that were actually on screen and they are kept here. */
.s-sub {
  font-family: var(--font-soft);
  font-size: var(--step-1);
  color: var(--gray);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 600px;
}