body {
  margin: 0;
  font-family: "Lora", serif; /* Default body font */
  background-color: #f5f5dc; /* A subtle off-white for aged paper look */
  color: black;
  line-height: 1.6;
}

img {
  filter: grayscale(100%); /* Apply grayscale to all images by default */
}

.font-serif {
  font-family: "Playfair Display", serif;
}

.font-sans {
  font-family: "Lora", sans-serif; /* Used for smaller, sans-serif elements */
}

.container {
  min-height: 100vh;
  background-color: #f5f5dc;
  color: black;
  font-family: "Lora", serif;
  padding: 1rem; /* p-4 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  border: 2px solid black;
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  max-width: 1280px; /* max-w-screen-xl */
}

@media (min-width: 768px) {
  /* md breakpoint */
  .container {
    padding: 2rem; /* md:p-8 */
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .container {
    padding: 3rem; /* lg:p-12 */
  }
}

.header {
  text-align: center;
  margin-bottom: 2rem; /* mb-8 */
  border-bottom: 4px solid black;
  padding-bottom: 1rem; /* pb-4 */
}

.header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem; /* text-sm */
  margin-bottom: 0.5rem; /* mb-2 */
}

.main-title {
  font-size: 3.75rem; /* text-6xl */
  font-family: "Playfair Display", serif;
  font-weight: 800; /* font-extrabold */
  letter-spacing: -0.05em; /* tracking-tighter */
  line-height: 1; /* leading-none */
  text-transform: uppercase;
}

@media (min-width: 768px) {
  /* md breakpoint */
  .main-title {
    font-size: 4.5rem; /* md:text-7xl */
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .main-title {
    font-size: 5rem; /* lg:text-8xl */
  }
}

.subtitle {
  font-size: 1.25rem; /* text-xl */
  margin-top: 0.5rem; /* mt-2 */
  font-family: "Lora", sans-serif;
  font-style: italic;
}

@media (min-width: 768px) {
  /* md breakpoint */
  .subtitle {
    font-size: 1.5rem; /* md:text-2xl */
  }
}

.logo-wrapper {
  margin-top: 1.5rem; /* mt-6 */
  display: flex;
  justify-content: center;
}

.logo {
  width: 10rem; /* w-40 */
  height: 10rem; /* h-40 */
  object-fit: contain;
  border: 2px solid black;
  padding: 0.5rem; /* p-2 */
  animation: spin 10s linear infinite; /* Added animation */
}

@media (min-width: 768px) {
  /* md breakpoint */
  .logo {
    width: 13rem; /* md:w-52 */
    height: 13rem; /* md:h-52 */
  }
}

/* Keyframe animation for spinning */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.main-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
  border-bottom: 4px solid black;
  padding-bottom: 2rem; /* pb-8 */
}

@media (min-width: 768px) {
  /* md breakpoint */
  .main-content {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    gap: 3rem; /* md:gap-12 */
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .main-content {
    grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
  }
}

.article-section {
  padding-bottom: 1rem; /* pb-4 */
}

.article-section:not(.no-border-right) {
  /* Apply border to all except the last one in a row */
  border-right: 2px solid black;
  padding-right: 1rem; /* pr-4 */
}

@media (min-width: 768px) {
  /* md breakpoint */
  .article-section:not(.no-border-right) {
    padding-right: 1.5rem; /* md:pr-6 */
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .article-section:not(.no-border-right) {
    border-right: 2px solid black; /* Re-add border for consistency in 3-column layout */
    padding-right: 2rem; /* lg:pr-8 */
  }
  .main-content > .article-section:nth-child(3n) {
    /* Remove border for every 3rd child in lg */
    border-right: none;
    padding-right: 0;
  }
}

/* Ensure the last section in a 2-column layout doesn't have a right border */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-content > .article-section:nth-child(2n) {
    border-right: none;
    padding-right: 0;
  }
}

.article-title {
  font-size: 1.875rem; /* text-3xl */
  font-family: "Playfair Display", serif;
  font-weight: 700; /* font-bold */
  margin-bottom: 1rem; /* mb-4 */
  line-height: 1.25; /* leading-tight */
}

.article-text {
  font-size: 0.875rem; /* text-sm */
  line-height: 1.625; /* leading-relaxed */
  font-family: "Lora", sans-serif;
  margin-bottom: 1rem; /* mb-4 */
}

.article-image {
  width: 100%; /* w-full */
  height: auto; /* h-auto */
  object-fit: cover;
  margin-bottom: 1rem; /* mb-4 */
  border: 1px solid black;
}

.image-center {
  display: flex;
  justify-content: center;
  margin-top: 1rem; /* my-4 */
  margin-bottom: 1rem; /* my-4 */
}

.small-image {
  width: 7rem; /* w-28 */
  height: 7rem; /* h-28 */
  object-fit: contain;
  border: 1px solid black;
}

@media (min-width: 768px) {
  /* md breakpoint */
  .small-image {
    width: 9rem; /* md:w-36 */
    height: 9rem; /* md:h-36 */
  }
}

.medium-image {
  width: 11rem; /* w-36 */
  height: 11rem; /* h-36 */
  object-fit: contain;
  border: 1px solid black;
}

@media (min-width: 768px) {
  /* md breakpoint */
  .medium-image {
    width: 14rem; /* md:w-44 */
    height: 14rem; /* md:h-44 */
  }
}

.highlight {
  background-color: #fef08a; /* bg-yellow-200 */
  padding-left: 0.25rem; /* px-1 */
  padding-right: 0.25rem; /* px-1 */
}

.sub-article-title {
  font-size: 1.5rem; /* text-2xl */
  font-family: "Playfair Display", serif;
  font-weight: 700; /* font-bold */
  margin-bottom: 0.75rem; /* mb-3 */
  line-height: 1.25; /* leading-tight */
}

.pilluminati-banner {
  margin-top: 3rem; /* mt-12 */
  text-align: center;
  border-top: 4px solid black;
  padding-top: 1.5rem; /* pt-6 */
}

.pilluminati-text {
  font-size: 4.5rem; /* text-7xl */
  font-family: "Playfair Display", serif;
  font-weight: 800; /* font-extrabold */
  letter-spacing: -0.05em; /* tracking-tighter */
  line-height: 1; /* leading-none */
  background-color: #fef08a; /* bg-yellow-200 */
  display: inline-block;
  padding: 0.75rem 1.5rem; /* px-6 py-3 */
  transform: rotate(-3deg); /* -rotate-3 */
  border: 2px solid black;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

@media (min-width: 768px) {
  /* md breakpoint */
  .pilluminati-text {
    font-size: 6rem; /* md:text-8xl */
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .pilluminati-text {
    font-size: 8rem; /* lg:text-9xl */
  }
}

.pilluminati-slogan {
  margin-top: 1.5rem; /* mt-6 */
  font-size: 1.25rem; /* text-xl */
  font-family: "Playfair Display", serif;
  font-weight: 700; /* font-bold */
}

@media (min-width: 768px) {
  /* md breakpoint */
  .pilluminati-slogan {
    font-size: 1.5rem; /* md:text-2xl */
  }
}

.pilluminati-link {
  margin-top: 1rem; /* mt-4 */
  font-size: 0.875rem; /* text-sm */
  font-family: "Lora", sans-serif;
}

.underline-link {
  text-decoration: underline;
  font-weight: 700; /* font-bold */
}

.footer {
  text-align: center;
  margin-top: 2rem; /* mt-8 */
  font-size: 0.75rem; /* text-xs */
  color: #4a5568; /* text-gray-700 */
  font-family: "Lora", sans-serif;
}