/* ==========================================================================
   Narratiq — layout.css
   Containers, page wrappers, section variants, section headers, grids.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout containers
   -------------------------------------------------------------------------- */
.container    { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-md { max-width: 860px;  margin: 0 auto; }
.container-sm { max-width: 700px;  margin: 0 auto; }

/* Prose / legal / resource page wrappers */
.page-content         { max-width: 860px; margin: 0 auto; padding: 56px 24px 96px; }
.page-content--narrow { max-width: 740px; margin: 0 auto; padding: 64px 24px 96px; }

/* Fixed nav is 64px tall; push main content below it */
.main-padded { padding-top: 64px; }

/* Back-link wrapper above page titles */
.breadcrumb { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section        { padding: 100px 24px; }
.section--light { background: #FAFAF8; }
.section--white { background: #fff; }
.section--dark  { background: var(--ink-950); position: relative; overflow: hidden; }

.section-header          { text-align: center; margin-bottom: 64px; }
.section-header--compact { text-align: center; margin-bottom: 56px; }

/* section-label inside a header always gets its bottom spacing */
.section-header .section-label,
.section-header--compact .section-label { margin-bottom: 12px; }

.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.section-title--mb { margin-bottom: 14px; }

.section-sub          { font-size: 17px; color: #6B7280; }
.section-sub--centered { max-width: 460px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr;        gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }