@layer base, layout, components, pages;
@layer pages {
/* writeups.css — page-specific */

.writeups {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.writeup {
  display: block;
  padding: 14px;
  border-radius: 12px;
  background: rgba(18, 24, 31, 0.85);
  border: 1px solid rgba(97, 218, 251, 0.16);
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  text-decoration: none;
}

.writeup:hover {
  border-color: rgba(97, 218, 251, 0.28);
  text-decoration: none;
}

.writeup__title {
  font-weight: 700;
  color: #61dafb;
  margin-bottom: 6px;
}

/* Featured card should span full row */
.card--featured {
  grid-column: 1 / -1;
}

/* Subtle “featured” styling (keeps your aesthetic) */
.card--featured {
  border: 1px solid rgba(97, 218, 251, 0.35);
  box-shadow: 0 0 22px rgba(97, 218, 251, 0.08);
}

.writeup__meta {
  opacity: 0.92;
  color: #f5f5f5;
  line-height: 1.5;
}
}