<details class="acc-fold" name="acc-fold" open>
  <summary>Origami</summary>
  <p>The art of folding paper into expressive form. Single sheet, no cuts, no glue.</p>
</details>
<details class="acc-fold" name="acc-fold">
  <summary>Letterpress</summary>
  <p>Type pressed into thick cotton stock leaves a tactile bite that catches light.</p>
</details>
<details class="acc-fold" name="acc-fold">
  <summary>Saddle Stitch</summary>
  <p>Two staples through the fold of a folio. Quick, cheap, beautiful for short runs.</p>
</details>

.acc-fold {
  background: linear-gradient(180deg, #f0eeff, #e6e2f5);
  color: #15151d; margin-bottom: 8px;
  border: 1px solid rgba(21,21,29,0.12);
  perspective: 800px; transform-style: preserve-3d;
}
.acc-fold summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; position: relative;
  border-bottom: 1px solid transparent;
  transform-origin: bottom; transition: border-color .25s;
}
.acc-fold summary::-webkit-details-marker { display: none; }
.acc-fold summary::after {
  content: '▾'; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); color: #9c7bd6;
  transition: transform .35s;
}
.acc-fold p {
  margin: 0; padding: 14px 16px;
  font: 12px/1.6 system-ui;
  background: linear-gradient(180deg, #faf8ff, #ece8f5);
  transform-origin: top; transform: rotateX(-90deg);
  transition: transform .45s cubic-bezier(.3,1,.3,1);
  box-shadow: inset 0 1px 0 rgba(21,21,29,0.08);
}
.acc-fold[open] summary { border-bottom-color: rgba(21,21,29,0.12); }
.acc-fold[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.acc-fold[open] p { transform: rotateX(0); }