/* Shared reading layout for the two annotated website examples. */
.fictional-grievance-article .fictional-profile {
  background: #edf3f6;
  border-color: #d8e2e8;
}

.fictional-grievance-article .fictional-profile > span {
  color: #806137;
}

.fictional-grievance-article .fictional-profile > div {
  border-color: #cbd8e0;
}

.fictional-grievance-article .fictional-profile strong {
  color: var(--blue);
}

.fictional-grievance-article .fictional-profile p {
  color: #4e585f;
}

.fictional-grievance-article .fictional-entry-copy p,
.fictional-grievance-article .fictional-letter > footer p {
  font-size: 16px;
  line-height: 1.65;
}

.fictional-grievance-article .fictional-entry aside {
  border-left: 2px solid #b08d57;
}

.fictional-grievance-article .fictional-entry aside > strong {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
}

.fictional-grievance-article .fictional-entry aside p {
  color: #626b72;
  font-size: 15px;
  line-height: 1.6;
}

@media (min-width: 761px) {
  .fictional-grievance-article .fictional-annotated-entries .fictional-entry {
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, .7fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0 18px;
    padding: 0;
    border: 0;
  }

  .fictional-grievance-article .fictional-annotated-entries .fictional-entry-copy {
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
    padding: 21px 0;
    border-bottom: 1px solid var(--line);
  }

  .fictional-grievance-article .fictional-annotated-entries .fictional-entry aside {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
    align-self: stretch;
    max-width: none;
    padding: 21px 17px;
    border: 0;
    border-left: 2px solid #b08d57;
    border-bottom: 1px solid rgba(176, 141, 87, .2);
    border-radius: 0;
    background: #f5f1e9;
  }

  /* Each comment shares the paragraph row, even when a left title wraps. */
  .fictional-grievance-article .fictional-annotated-entries .fictional-entry-copy > span {
    grid-row: 1;
  }

  .fictional-grievance-article .fictional-annotated-entries .fictional-entry-copy > h3 {
    grid-row: 2;
  }

  .fictional-grievance-article .fictional-annotated-entries .fictional-entry-copy > p,
  .fictional-grievance-article .fictional-annotated-entries .fictional-entry aside > p {
    grid-row: 3;
    align-self: start;
  }

  .fictional-grievance-article .fictional-annotated-entries .fictional-entry aside > strong {
    grid-row: 1 / span 2;
    align-self: start;
  }

  .fictional-grievance-article .fictional-annotated-entries .fictional-entry:not(:first-child) aside > strong {
    display: none;
  }

  .fictional-grievance-article .fictional-annotated-entries .fictional-entry:first-child aside {
    border-radius: 5px 5px 0 0;
  }

  .fictional-grievance-article .fictional-annotated-entries .fictional-entry:last-child aside {
    border-radius: 0 0 5px 5px;
  }
}

@media (max-width: 760px) {
  .fictional-grievance-article .fictional-entry-copy p,
  .fictional-grievance-article .fictional-letter > footer p,
  .fictional-grievance-article .fictional-entry aside p {
    font-size: 14px;
    line-height: 1.6;
  }
}