/* story — text + photo split. */
.story__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
/* One column when there is no photo, so the copy is not stranded in half the
   width with an empty cell beside it. */
.story__inner:not(:has(.story__side)) { grid-template-columns: minmax(0, 72ch); }

.story__text { display: flex; flex-direction: column; align-items: flex-start; }
.story__body { color: var(--text-muted); text-wrap: pretty; }
.story__body + .story__body { margin-top: 1em; }

.story__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: var(--gray-200) center / cover no-repeat;
}

/* The side column as a labelled list rather than a photo. Top-aligned, because
   a list of seven rows beside three paragraphs should start where they start. */
.story__inner:has(.story__list) { align-items: start; }

/* Photo above list in one side column — Pastel #16. Only this modifier is new;
   a side column holding just a photo or just a list is untouched. The photo is
   shorter than the 4:3 it uses alone, so the pair does not tower over the copy
   beside it. */
.story__side--stack { display: grid; gap: 28px; align-content: start; }
.story__side--stack .story__photo { aspect-ratio: 16 / 10; }
.story__list-head { color: var(--text-subtle); margin: 0 0 20px; }
.story__list-items { margin: 0; }
.story__list-row {
  display: grid;
  grid-template-columns: minmax(88px, 22%) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.story__list-row:last-child { border-bottom: 1px solid var(--rule); }

/* With a thumbnail the row gains a third track in front. The label column
   keeps its width so a list that has pictures and one that does not still
   read as the same component. */
.story__list-row--thumbed { grid-template-columns: 64px minmax(72px, 20%) 1fr; }
.story__list-thumb {
  display: block;
  width: 64px;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  background: var(--gray-100) center / cover no-repeat;
  align-self: start;
}
.tone--navy .story__list-thumb { background-color: #ffffff1f; }
.story__list-label { margin: 0; font-weight: 600; }
.story__list-body { margin: 0; color: var(--text-muted); }

@media (max-width: 767px) {
  .story__list-row { grid-template-columns: 1fr; gap: 4px; }
  /* Narrow: the picture leads and the text stacks beside it, rather than the
     thumbnail being dropped — it is the reason the row exists now. */
  .story__list-row--thumbed { grid-template-columns: 52px 1fr; gap: 4px 12px; }
  .story__list-row--thumbed .story__list-thumb { width: 52px; grid-row: 1 / 3; }
}

@media (max-width: 767px) {
  .story__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------------------------
   Rate-card header row.  Pastel #108.

   A list used as a rate card has a first row that names the columns rather
   than being an entry, and it rendered identically to the rows beneath, so it
   read as the first item.

   Opt-in through the block, NOT applied to every story list: /about/ uses the
   same list for Ballpark Enhancements, where the first row is a real entry and
   a navy band across "Turf" would be wrong.
--------------------------------------------------------------------------- */
.story__list-items--headed .story__list-row { padding-left: 16px; padding-right: 16px; }
.story__list-items--headed .story__list-row:first-child {
  background: var(--color-navy);
  color: var(--color-white);
  border-bottom: 0;
}
.story__list-items--headed .story__list-row:first-child .story__list-label,
.story__list-items--headed .story__list-row:first-child .story__list-body {
  color: inherit;
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--fs-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
}