/* ==========================================================================
   LAYOUT.CSS
   The centralized "app-like" container ("Linktree killer" feel) that wraps
   every section, plus the shared section spacing rhythm.
   ========================================================================== */

.app {
  width: 100%;
  max-width: var(--container-max-width);
  background-color: var(--color-brand-light);
  min-height: 100vh;
  box-shadow: var(--shadow-2xl);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Generic horizontal padding + bottom spacing shared by most sections */
.section {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-bottom: 4rem;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-heading);
  text-align: center;
  margin-bottom: 2rem;
}

.section-title--lg {
  font-size: 1.875rem;
}

.section-title--md {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}