Bio Reveal

<details class="nuda-bio-reveal">
  <summary>
    <p class="nuda-bio-reveal__text">
      Independent product designer. I build calm, tactile interfaces
      for tools that feel like an extension of your hand. Currently
      exploring spatial UI and slow-software.
    </p>
    <span class="nuda-bio-reveal__toggle">
      <span class="nuda-bio-reveal__more">Show more</span>
      <span class="nuda-bio-reveal__less">Show less</span>
      <svg class="nuda-bio-reveal__chev" viewBox="0 0 24 24"
        width="12" height="12" fill="none" stroke="currentColor"
        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
    </span>
  </summary>
</details>

/* Bio Reveal
   Native <details> truncates the bio at 2 lines and toggles it.
   No JavaScript required. Customize: --reveal-accent, line clamp. */

.nuda-bio-reveal {
  --reveal-accent: #e4ff54;
  max-width: 320px;
  font-family: system-ui, sans-serif;
  color: #fafafa;
}

.nuda-bio-reveal > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nuda-bio-reveal > summary::-webkit-details-marker { display: none; }

.nuda-bio-reveal__text {
  margin: 0;
  font-size: 0.82rem;
  color: #a0a0a8;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
}

.nuda-bio-reveal[open] .nuda-bio-reveal__text {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

.nuda-bio-reveal__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--reveal-accent);
  align-self: flex-start;
}

.nuda-bio-reveal__less { display: none; }
.nuda-bio-reveal[open] .nuda-bio-reveal__more { display: none; }
.nuda-bio-reveal[open] .nuda-bio-reveal__less { display: inline; }

.nuda-bio-reveal__chev {
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.nuda-bio-reveal[open] .nuda-bio-reveal__chev {
  transform: rotate(180deg);
}

.nuda-bio-reveal > summary:focus-visible {
  outline: 2px solid var(--reveal-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-bio-reveal__text,
  .nuda-bio-reveal__chev { transition: none; }
}