/* Flexbox stacks the project cards and gap adds space between them. */
.projects {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.projects li {
  border: 2.5px solid #eec343;
  border-radius: 8px 3px 9px 4px;
  padding: 1.1rem 1.3rem;
}

/* Alternating rotations make adjacent cards lean in opposite directions. */
.projects li:nth-child(even) {
  transform: rotate(.5deg);
}

.projects li:nth-child(odd) {
  transform: rotate(-.5deg);
}

.projects h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .2rem;
}


/* ── Methods & Components page ── */
.crumb-text {
  display:inline-block; margin-top:2.2rem;
  color:#9a9a9a; font-size:.9rem; text-decoration:none;
}
.crumb-text:hover { color:#3d3d3d; }
.spec { margin-top:1.6rem; }
.spec h1 { font-size:1.5rem; margin-bottom:.3rem; }
.spec .subtitle { color:#7c7c7c; font-style:italic; margin-bottom:1.6rem; }
.spec p { margin-bottom:1.1rem; }
.spec h2 { font-size:1.1rem; margin:1.8rem 0 .5rem; }
.spec-table { border:2.5px solid #eec343; border-radius:8px 3px 9px 4px; padding:1rem 1.2rem; }
.spec-table dt { font-weight:600; margin-top:.7rem; }
.spec-table dt:first-child { margin-top:0; }
.spec-table dd { margin-left:0; color:#5c5c5c; }
.tokens {
  border:2.5px solid #eec343; border-radius:3px 8px 4px 9px;
  padding:1rem 1.2rem; font-size:.9rem; overflow-x:auto;
  transform: rotate(-.3deg);
}
.footer-mini { margin-top:3.5rem; font-size:.9rem; }