.details {
  display: grid;
  margin-inline: auto;
  margin-top: calc(-1 * var(--space-large));
  position: relative;
  width: min(100%, 44em);
}

.details details summary {
  align-items: start;
  cursor: pointer;
  display: flex;
  justify-content: start;
  list-style: none;
  padding-block: var(--space-large);
  padding-left: var(--space-large);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.details details summary p {
  font-size: var(--font-size-x-large);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  margin-block: -0.2875em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--text-decoration-thickness);
  text-underline-offset: var(--text-underline-offset);
  text-wrap: pretty;
}

.details details summary:before {
  background: url('/assets/images/general/icon-details.svg') center / 100% auto no-repeat;
  content: '';
  height: 1.35em;
  left: 0;
  position: absolute;
  top: 1.875em;
  transition: transform var(--transition);
  width: 1.35em;
}

.details details summary::-webkit-details-marker {
  display: none;
}

.details details article {
  display: grid;
  gap: var(--space-large);
  padding-bottom: var(--space-large);
  padding-left: var(--space-large);
}

.details details article p,
.details details article ul {
  font-size: var(--font-size-large);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.35em;
  margin-top: -0.575em;
  text-wrap: pretty;
}

.details details article ul {
  display: grid;
  gap: 0.1625em;
  list-style: disc;
  padding-left: 1em;
}

.details details[open] summary:before {
  transform: rotate(90deg);
}

.details details:not(:last-child) {
  border-bottom: max(1px, 0.05em) solid oklch(var(--oklch-ink) / 0.1);
}



@media(hover: hover) {

  .details details summary p {
    transition:
      color var(--transition),
      text-decoration-color var(--transition)
    ;
  }

  .details details:not([open]) summary:hover p {
    color: var(--color-blue);
    text-decoration-color: var(--color-blue);
  }

}



@media(min-width: 64em) {

  .details {
    margin-inline: initial;
    width: auto;
  }

  .details details summary {
    padding-left: 0;
  }

  .details details summary {
    padding-left: 0;
  }

  .details details summary:before {
    left: auto;
    margin-right: 0.65em;
    right: 100%;
    width: 1.35em;
  }

  .details details article {
    padding-left: 0;
  }

}



@media(prefers-color-scheme: dark) {

  .details details summary:before {
    background-image: url('/assets/images/general/icon-details-dark.svg');
  }

}