.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.chapter-number {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chapter-label {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.status-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.lost {
  color: #8c2f1b;
  background: #fff0e8;
}
.check-mark {
  color: var(--green);
}
.message {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
  font-size: 14px;
}
.message > span:not(.message-avatar) {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 18px 21px;
  box-shadow: 0 8px 22px #33281f14;
}
.message-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: #dac2a9;
  font: 500 20px var(--display);
}
.message-in {
  bottom: 20%;
  left: 0%;
  rotate: -5deg;
}
.message-in > span:not(.message-avatar) {
  background: var(--paper);
  border-radius: 21px 21px 21px 5px;
}
.message-in .icon {
  color: var(--coral);
  width: 18px;
  height: 18px;
}
.message-out {
  bottom: 7%;
  right: 0%;
  rotate: 4deg;
}
.message-out > span:not(.message-avatar) {
  background: var(--teal);
  color: var(--paper);
  border-radius: 21px 21px 5px 21px;
}
.message-out .message-avatar {
  background: #e4d6b9;
}
.message-out .icon {
  width: 17px;
  height: 17px;
}
.reunion-badge {
  position: absolute;
  left: 7%;
  right: -1%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 21px;
  background: var(--paper);
  border-radius: 24px;
  rotate: -3deg;
  box-shadow: 0 12px 30px #33281f16;
}
.reunion-badge strong {
  font: 500 24px var(--display);
}
.reunion-badge div > span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.reunion-badge > .icon {
  margin-left: auto;
}
.story-caption {
  display: block;
  text-align: center;
  padding: 24px;
  font-size: 12px;
  color: var(--muted);
}