/* Expandable personal story in the existing about section. */
.almont-refined #o-mne .almont-story {
  max-width: 780px;
  margin-top: 22px;
  border: 1px solid #ffffff1b;
  border-radius: 12px;
  background: #17181d;
  overflow: visible;
}

.almont-refined #o-mne .almont-story > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 15px 20px;
  list-style: none;
  cursor: pointer;
  border-radius: 11px;
}

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

.almont-story-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 16px;
  min-width: 0;
}

.almont-story-heading > strong {
  color: #e1d4c2;
  font-size: 15px;
  font-weight: 600;
}

.almont-story-heading > span {
  color: #aaaab4;
  font-size: 12px;
  line-height: 1.6;
}

.almont-story > summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--almont-orange, #f5aa3b);
  font-size: 23px;
  line-height: 1;
}

.almont-story[open] > summary::after {
  content: '−';
}

.almont-refined #o-mne .almont-story > summary:hover {
  background: #ffffff05;
}

.almont-refined #o-mne .almont-story > summary:focus-visible {
  outline: 3px solid var(--almont-orange, #f5aa3b);
  outline-offset: 4px;
}

.almont-story-content {
  padding: 20px;
  border-top: 1px solid #ffffff13;
}

.almont-refined .almont-story-content > p {
  margin: 0;
  max-width: 700px;
  color: #b6b6c0;
  font-size: 14px;
  line-height: 1.85;
  overflow-wrap: break-word;
}

.almont-refined .almont-story-content > p + p {
  margin-top: 15px;
}

@media (max-width: 767px) {
  .almont-refined #o-mne .almont-story > summary {
    min-height: 64px;
    padding: 14px 16px;
  }

  .almont-story-heading {
    display: block;
  }

  .almont-story-heading > span {
    display: block;
    margin-top: 3px;
  }

  .almont-story-content {
    padding: 17px 16px;
  }
}