:root {
  /* Bootstrap primary palette */
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-primary-hover: #0b5ed7;

  /* Core colors */
  --primary-bg: var(--bs-primary);
  --dark-text: #222;
  --light-gray: #f5f5f5;
  --border-gray: #ddd;

  /* Font stacks */
  --serif-font: 'Bodoni MT', serif;
  --sans-serif-font: 'Carlito', sans-serif;
}

/* Global typography */
body {
  font-family: var(--serif-font);
  line-height: 1.6;
  color: var(--dark-text);
  background-color: var(--light-gray);
}

/* Headings and key UI elements use sans-serif */
h1, h2, h3, h4, h5, h6,
.nav-link, .brand-logo, .section-title {
  font-family: var(--sans-serif-font);
}

/* Top bar */
.top-bar {
  font-size: 0.875rem;
  background: #fff;
  border-bottom: 1px solid var(--border-gray);
}

/* Images */
.img-top-articles {
  width: 100%;
  height: auto;
}
.img-article {
  width: 100px;
  height: auto;
}

/* Sidebar background */
.bg-mediapart-sidebar {
  background-color: #f2f9ff;
}

/* Metadata styling */
.metadata {
  font-size: x-small;
}

/* Navbar customization */
.navbar-dark .navbar-nav .nav-link {
  font-weight: 500;
  color: #f8f9fa;
  padding: 0.75rem 1rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
  background: rgba(255,255,255,0.1);
}

/* Promo items */
.promo-item h6 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.promo-item p {
  font-size: 0.8rem;
  margin: 0;
}

/* Lead article */
.lead-article h1 {
  font-size: 1.75rem;
  font-weight: 600;
}
.lead-article .lead {
  font-size: 1rem;
}

/* Section titles */
.section-title {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: .1em;
  color: var(--primary-bg);
}
.subsection-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: .5rem;
}

/* News cards */
.card-news {
  border: none;
}
.card-news img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.card-news .card-body {
  padding: .75rem;
}

/* Footer */
.footer {
  background: #212529;
  color: #adb5bd;
  font-size: .875rem;
}
.footer a {
  color: #adb5bd;
  text-decoration: none;
}
.footer a:hover {
  color: #fff;
}
.footer .footer-heading {
  color: #fff;
  font-weight: 600;
  margin-bottom: .75rem;
}

/* Circular buttons */
.btn-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  padding: 0;
}

/* Fixed-size thumbnails */
.list-article-img-wrapper {
  flex: 0 0 120px;
  overflow: hidden;
}
.list-article-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}
.list-article {
  align-items: flex-start;
}
.list-article-content h6 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}