.portfolio-header {
    padding: 4rem 2rem 2rem 3rem;
  }
  
  .portfolio-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .portfolio-header p {
    font-size: 1.125rem;
    color: #333;
    max-width: 700px;
  }
  
  .category {
    margin-top: 4rem;
    padding: 3rem;
  }
  
  .category h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--clr4);
  }
  








  /* --------------------- CVE LIST --------------------- */
.cve-list-section{
  /* background: color-mix(in srgb, #000 35%, transparent); */
  background-color: beige;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 16px;
  padding: 22px;
  margin: 0 3rem;
}

.cve-list-section h2{
  margin: 0 0 14px;
  color: var(--clr4);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.cve-list-head{
  display: grid;
  grid-template-columns: 1.35fr .85fr 1.25fr .85fr;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);

  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 62%, transparent);
}

.cve-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.cve-item{
  display: grid;
  grid-template-columns: 1.35fr .85fr 1.25fr .85fr;
  gap: 12px;
  align-items: center;

  padding: 12px 12px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 12px;

  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.cve-item:last-child{
  border-bottom: none;
}

.cve-item:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.cve-id{
  font-weight: 850;
  color: var(--clr4);
  text-decoration: none;
  line-height: 1.2;
}

.cve-id:hover{
  text-decoration: underline;
}

.cve-id--plain{
  font-weight: 850;
  color: var(--clr4);
}

.cve-platform,
.cve-vendor,
.cve-date{
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-weight: 650;
  font-size: 0.95rem;
}

/* Unknown/unpublished rows */
.cve-item--unknown{
  opacity: .75;
}

/* Mobile: stack rows, keep labels */
@media (max-width: 760px){
  .cve-list-section{
    margin: 0 1rem;
    padding: 18px;
  }

  .cve-list-head{
    display: none;
  }

  .cve-item{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 12px;
  }

  .cve-platform::before,
  .cve-vendor::before,
  .cve-date::before{
    content: attr(data-label) " · ";
    color: color-mix(in srgb, currentColor 55%, transparent);
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
  }
}

  









.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.45;
}








/* --------------------- NON-CVE LIST  --------------------- */

.noncve-list-section{
  /* zet dit gelijk aan je cve-list-section achtergrond */
  background-color: beige;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 16px;
  padding: 22px;
  margin: 18px 3rem 0; /* onder de CVE lijst */
}

.noncve-list-section h2{
  margin: 0 0 14px;
  color: var(--clr4);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

/* header row */
.noncve-list-head{
  display: grid;
  grid-template-columns: 1.55fr .85fr 1.25fr .85fr; /* Title iets breder */
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);

  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 62%, transparent);
}

.noncve-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* row */
.noncve-item{
  display: grid;
  grid-template-columns: 1.55fr .85fr 1.25fr .85fr;
  gap: 12px;
  align-items: center;

  padding: 12px 12px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 12px;

  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.noncve-item:last-child{
  border-bottom: none;
}

.noncve-item:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, currentColor 7%, transparent);
}

/* title */
.noncve-title{
  font-weight: 850;
  color: var(--clr4);
  text-decoration: none;
  line-height: 1.2;
}

.noncve-title:hover{
  text-decoration: underline;
}

.noncve-title--plain{
  font-weight: 850;
  color: var(--clr4);
}

/* columns */
.noncve-platform,
.noncve-vendor{
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-weight: 650;
  font-size: 0.95rem;
}

/* credit column (link or plain text) */
.noncve-credit{
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
}

.noncve-credit:hover{
  text-decoration: underline;
}

.noncve-credit--plain{
  text-decoration: none;
}

/* Unknown/unpublished rows */
.noncve-item--unknown{
  opacity: .75;
}

/* Mobile: stack rows, keep labels */
@media (max-width: 760px){
  .noncve-list-section{
    margin: 18px 1rem 0;
    padding: 18px;
  }

  .noncve-list-head{
    display: none;
  }

  .noncve-item{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 12px;
  }

  .noncve-platform::before,
  .noncve-vendor::before,
  .noncve-credit::before{
    content: attr(data-label) " · ";
    color: color-mix(in srgb, currentColor 55%, transparent);
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
  }
}








/* --------------------- certifications,work and education   ----------- -*/

  .we-stack{
    --we-accent: var(--clr4, #ff5b57);

    --b: color-mix(in srgb, currentColor 14%, transparent);
    --b2: color-mix(in srgb, currentColor 22%, transparent);
    --bg: color-mix(in srgb, currentColor 6%, transparent);
    --bg2: color-mix(in srgb, currentColor 9%, transparent);

    --muted: color-mix(in srgb, currentColor 62%, transparent);
    --muted2: color-mix(in srgb, currentColor 48%, transparent);
  }

  .we-stack .we-accent{ color: var(--we-accent); }

  /* Subsections under the main category title */
  .we-group{
    margin-top: 18px;
  }

  .we-heading{
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted2);
  }

  .we-card{
    position: relative;
    border: 1px solid var(--b);
    border-radius: 14px;
    padding: 14px 14px 13px;
    background: var(--bg);
    margin: 0 0 12px;
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
  }

  /* Left accent stripe */
  .we-card::before{
    content:"";
    position:absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: var(--we-accent);
    opacity: .9;
  }

  .we-card:hover{
    transform: translateY(-2px);
    border-color: var(--b2);
    background: var(--bg2);
  }

  .we-role{
    font-weight: 850;
    font-size: 16px;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .we-org{
    margin-top: 4px;
    font-size: 14px;
    font-weight: 650;
    color: var(--muted);
    line-height: 1.3;
  }

  .we-meta{
    margin-top: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted2);
  }

  .we-note{
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.45;
  }