/* Grid Layout System */
.main-content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 15px;
}

/* Main Layout Grid */
main {
  margin: 15px 12px;
  margin-bottom: 75px;
  min-width: 259px;
}

/* Article Layout */
article {
  display: none;
  min-height: 100vh;
}

article.active {
  display: block;
  animation: fade 0.5s ease backwards;
}

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Section Spacing */
section {
  margin-bottom: 30px;
}

/* Content Wrapper */
.content-card {
  position: relative;
  background: var(--border-gradient-onyx);
  padding: 15px;
  border-radius: var(--radius-14);
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}