/* ============================================================
   BASE — container, typography helpers, shared utilities
   ============================================================ */

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 40px;
}

/* ── Section ── */
.section {
  padding-block: var(--sp-2xl);
}

.section--flush-top { padding-top: 0; }

/* ── Section Header (always centred) ── */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--sp-lg);
}

.section-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);   /* large + all-caps = muted OK at this size */
  margin-bottom: var(--sp-sm);
}

.section-tag::before {
  content: '—  ';
  opacity: 0.5;
}

.section-tag::after {
  content: '  —';
  opacity: 0.5;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: var(--sp-sm);
}

.section-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-sec);
}

/* ── Divider ── */
.divider {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin-inline: auto;
  margin-block: var(--sp-sm);
  opacity: 0.4;
}

/* ── Visibility helpers for scroll animations ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive breakpoints ── */
@media (max-width: 960px) {
  .container { padding-inline: 24px; }
  .section   { padding-block: var(--sp-xl); }
}

@media (max-width: 640px) {
  .container { padding-inline: 18px; }
  .section   { padding-block: var(--sp-lg); }
  .section-title { font-size: clamp(28px, 7vw, 40px); }
}