/* Shared cards for discovery and the next reads below an individual account. */
.story-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.story-card { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 0; border-top: 3px solid #002A60; background: white; color: #002A60; }
.story-card .story-card-profile { display: block; color: inherit; text-decoration: none; }
.story-card.has-photo .story-card-profile { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 16px; }
.story-card .story-card-photo { display: block; width: 160px; height: 160px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0; border-radius: 5px; background: transparent; object-fit: cover; }
.story-card .story-card-photo.is-context-photo { object-fit: cover; }
.story-card .story-card-profile h3 { font: 750 24px/1.25 "Overpass", sans-serif; letter-spacing: normal; margin: 0 0 5px; overflow-wrap: anywhere; }
.story-card .story-card-profile:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.story-card .browse-overview-location { margin: 0; font: 400 13px/1.5 "Inter", sans-serif; color: #456382; }
.story-card .browse-overview-age { margin: 4px 0 0; font: 400 12px/1.5 "Inter", sans-serif; color: #456382; }
.story-card .story-card-copy { display: block; flex: 1; padding: 20px 0 22px; }
.story-card .story-card-occupation { min-height: 2.8em; margin: 0 0 6px; color: #002A60; font: 650 16px/1.4 "Inter", sans-serif; letter-spacing: normal; overflow-wrap: anywhere; }
.story-card .story-card-copy .browse-story-deck { margin: 0; color: #456382; font: 400 14px/1.6 "Inter", sans-serif; }
.story-card.is-text-only .story-card-copy .browse-story-deck { font-size: 16px; }
.story-card .story-card-income { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: auto 0 0; padding: 10px 12px; border: 0; border-radius: 5px; background: #e3f1fb; box-sizing: border-box; }
.story-card .story-card-income > span { color: #456382; font: 400 11px/1.5 "Inter", sans-serif; }
.story-card .story-card-income strong { color: #002A60; font: 650 18px/1.4 "Inter", sans-serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.story-card footer { display: flex; padding-top: 14px; }
.story-card footer .browse-story-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #002A60; font: 650 14px/1.5 "Inter", sans-serif; text-decoration: none; }
.story-card footer .browse-story-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.story-card footer .browse-story-link img { width: 20px; height: 20px; }
.story-card .story-card-reason { margin: 0 0 16px; color: #94400f; font: 650 13px/1.5 "Inter", sans-serif; }
.reader-more-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.reader-more-header h2 { margin: 0; }
.reader-more-header > p { color: #456382; font: 400 15px/1.6 "Inter", sans-serif; margin: 0; }
.reader-explore-all { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 24px; color: #002A60; font: 650 16px/1.5 "Inter", sans-serif; text-underline-offset: 4px; }
.reader-explore-all img { width: 20px; height: 20px; }
.story-card a:focus-visible, .reader-explore-all:focus-visible { outline: 3px solid #E04E04; outline-offset: 3px; }
/* Income supports the question or life-path passage rather than leading it. */
.browse-question-card .browse-current-income strong, .browse-path-stage .browse-stage-income strong { font-size: 18px; line-height: 1.4; }
.browse-question-card .browse-current-income, .browse-path-stage .browse-stage-income { padding: 10px 12px; background: #e3f1fb; }
.browse-question-card .browse-story-deck { font-size: 15px; }
.browse-path-photo, .browse-question-photo { width: 160px; height: 160px; max-width: 100%; aspect-ratio: 1 / 1; background: transparent; object-fit: cover; }
.browse-path-photo.is-context-photo, .browse-question-photo.is-context-photo { object-fit: cover; }
@media (max-width: 1180px) {
  .story-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .story-card-grid { grid-template-columns: 1fr; gap: 20px; }
  .story-card { padding: 16px; }
  .story-card .story-card-profile h3 { font-size: 24px; }
}

.story-card .browse-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; }

.story-card .story-card-profile > div { min-width: 0; padding: 0; }
.browse-tools:has(.browse-sort[hidden]) .browse-search { max-width: none; }

/* Clip the original photograph to an approved subject without stretching it. */
.photo-display-crop { position: relative; display: block; overflow: hidden; }
.photo-display-crop > img.photo-crop-image {
  position: absolute; inset: auto; top: 0; left: var(--photo-crop-left);
  width: var(--photo-crop-width); max-width: none; height: auto; min-height: 0;
  aspect-ratio: auto; margin: 0; border-radius: 0; background: none;
  object-fit: initial; transform: translateY(var(--photo-crop-top));
}
.story-gallery-lead .gallery-cropped-photo,
.gallery-thumb .gallery-cropped-photo,
.hero-portrait .hero-cropped-photo { width: 100%; height: 100%; }

.reader-related-group + .reader-related-group { margin-top: 36px; }

@media (max-width: 380px) {
  .story-card.has-photo .story-card-profile { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .story-card .story-card-photo { width: 112px; height: 112px; }
  .story-card .story-card-profile h3 { font-size: 22px; }
}
@media (max-width: 300px) {
  .story-card.has-photo .story-card-profile { display: block; }
  .story-card .story-card-photo { margin-bottom: 12px; }
}