/* DRAG 2.56.1: clear title actions and a distinct reading surface. */
.detail-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 24px;
  margin-bottom: 22px;
}
.detail-title > :first-child { flex: 1 1 300px; min-width: 0; }
.detail-title .dossier-name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 16px;
}
.detail-title .dossier-name-line h1 { margin: 0; }
.detail-title .dossier-name-line .eyebrow { display: inline-block; max-width: 100%; }
.detail-title .dossier-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  padding-block: 4px;
}
.detail-title .dossier-title-actions > * { margin: 0; }
.article-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.article-actions > * { margin-block: 0; }
.organization-hero > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  min-width: 0;
}
.organization-hero > div > :is(.eyebrow, h1, .lead) {
  flex-basis: 100%;
  min-width: 0;
}
.organization-hero > div > :is(.eyebrow, h1, .lead) { margin-block: 0; }
.organization-hero > div > .lead { margin-bottom: 8px; }
.organization-hero > div > :is(.collection-form, .collection-button) { margin: 0; }
#article-reading,
.dossier-body > #biography,
.organization-page > .organization-story {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin-block: 28px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--wine);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 8px 28px #28131c06;
}
.organization-page > .organization-story { max-width: 900px; margin-inline: auto; }
#article-reading > :first-child,
.dossier-body > #biography > :first-child,
.organization-story > :first-child { margin-top: 0; }
#article-reading > :last-child,
.dossier-body > #biography > :last-child,
.organization-story > :last-child { margin-bottom: 0; }
#article-reading :is(h2, h3),
.dossier-body > #biography :is(h2, h3),
.organization-story > h2,
.organization-story > .prose :is(h2, h3) {
  line-height: 1.25;
  text-wrap: balance;
  scroll-margin-top: 28px;
}
#article-reading h2,
.dossier-body > #biography h2,
.organization-story > h2,
.organization-story > .prose h2 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
#article-reading :is(table, pre),
.dossier-body > #biography :is(table, pre) { max-width: 100%; }
html[data-theme="dark"] :is(#article-reading, .dossier-body > #biography, .organization-story) {
  border-top-color: var(--theme-link, var(--wine));
  box-shadow: none;
}
@media (max-width: 600px) {
  .detail-title { gap: 18px; }
  .detail-title > :first-child { flex-basis: 100%; }
  .detail-title .dossier-title-actions { width: 100%; padding: 0; }
  #article-reading, .dossier-body > #biography, .organization-page > .organization-story {
    padding: 20px 16px;
    margin-block: 22px;
    border-radius: 8px;
  }
}
