/* =========================================
   PAGES.CSS — about.html + contact.html
   Layout sections deux colonnes
   ========================================= */

main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 120px var(--pad-x) 80px;
}

footer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px var(--pad-x) 32px;
}

/* ── SECTIONS — grille deux colonnes ─────── */
.section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 48px 0;
}

.section-label {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.section-body {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 38ch;
}
.section-body em { font-style: italic; }
.section-body a {
  border-bottom: 1px solid var(--ink);
  transition: opacity 0.2s ease;
}
.section-body a:hover { opacity: 0.5; }

/* ── RESPONSIVE TABLET ──────────────────── */
@media (max-width: 1024px) {
  :root { --pad-x: 32px; }
  main { padding-top: 100px; }
}

/* ── RESPONSIVE MOBILE ──────────────────── */
@media (max-width: 720px) {
  main { padding: 90px var(--pad-x) 40px; }

  .section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0;
  }
  .section-body { font-size: 18px; }
}