/* Reading relationships, not a second visual theme. The chapter/prose gaps
   are measured from Benji's current articles; hierarchy comes from each text.
   Keep this scoped away from the homepage, exhibits' internals and tool UI. */
.original img {display:block;max-width:100%;height:auto;margin:24px auto;}
.original {overflow-wrap:anywhere;}
.original iframe,.original video {max-width:100%;}
.original table {display:block;overflow-x:auto;}
.page > .original.article-reading {
  display:flow-root;
  min-width:0;
  font:460 14px/20px var(--ds-font);
  letter-spacing:var(--ds-tracking);
  overflow-wrap:break-word;
}
.page > .original.article-reading > .article-title {
  margin:0;
  padding:0;
  font:500 14px/20px var(--ds-font);
  letter-spacing:var(--ds-tracking);
  text-wrap:pretty;
}
.page > .original.article-reading > p {
  margin:16px 0 0;
  padding:0;
  font-size:14px;
  line-height:20px;
}
.page > .original.article-reading > .article-title + p {margin-top:24px;}
.page > .original.article-reading > .article-title + .article-date {
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
  line-height:20px;
}
.page > .original.article-reading > .article-date + p {margin-top:24px;}

/* A major turn in the argument gets the long lead-in and trailing rule.
   The following paragraph contributes16px: glyph-to-glyph gap34.55px. */
.page > .original.article-reading > .article-chapter {
  display:flex;align-items:center;gap:8px;
  margin:0;padding:54.45px 0 17.55px;
  font:600 14px/normal var(--ds-font);
  letter-spacing:-.13008px;
  text-wrap:pretty;
  break-after:avoid;
}
.page > .original.article-reading > .article-chapter::after {
  content:'';display:block;flex:1;min-width:24px;height:1px;
  background:var(--rule);transform:translateY(1.55px);
}
.page > .original.article-reading > .article-opening-heading {
  display:block;margin:24px 0 0;padding:0;
  font:500 14px/20px var(--ds-font);
  letter-spacing:var(--ds-tracking);
}
.page > .original.article-reading > .article-opening-heading::after {content:none;}
.page > .original.article-reading > .article-subheading {
  display:block;margin:32px 0 0;padding:0;
  font:500 14px/20px var(--ds-font);
  letter-spacing:var(--ds-tracking);
  text-wrap:pretty;
  break-after:avoid;
}
.page > .original.article-reading > .article-subheading::after {content:none;}
.page > .original.article-reading > .article-chapter + .article-subheading {margin-top:16px;}
.page > .original.article-reading > .article-deck {
  margin:0;
  color:var(--muted);
  font:460 14px/20px var(--ds-font);
}
.page > .original.article-reading > .article-deck + p {margin-top:24px;}
.page > .original.article-reading .article-summary-group {margin-top:24px;}
.page > .original.article-reading .article-summary-group > p {margin:0;line-height:20px;}
.page > .original.article-reading .article-summary-group > .article-example-label {font-weight:500;}
.page > .original.article-reading .article-summary-group > p + p {margin-top:8px;}

/* Each illustration and its explanation are one reading unit. No cropping,
   automatic caption detection or new gallery controls. */
.page > .original.article-reading > :is(img,video,iframe),
.page > .original.article-reading .article-figure {
  display:block;max-width:100%;margin:32px 0;
  break-inside:avoid;
}
.page > .original.article-reading .article-figure > :is(img,video,iframe) {
  display:block;max-width:100%;height:auto;margin:0;
  border:0;border-radius:0;
}
.page > .original.article-reading .article-figure > .article-example-label {
  margin:0 0 12px;padding:0;
  font:500 14px/20px var(--ds-font);
}
.page > .original.article-reading .article-caption {
  max-width:none;margin:12px 0 0;padding:0;
  font:460 12px/16px var(--ds-font);
  letter-spacing:var(--ds-tracking);
  color:var(--muted);text-align:center;
}
.page > .original.article-reading .article-caption > em {font-style:normal;}
.page > .original.article-reading .article-caption a {display:inline;}
.page > .original.article-reading > .article-chapter + .article-figure {margin-top:16px;}

/* Native asset links use the existing fit/zoom viewer. Keep captions outside
   the hit area and preserve each illustration's current place in the flow. */
.page > .original.article-reading > .article-image-link {margin:32px 0;}
.page > .original.article-reading .article-figure > .article-image-link {margin:0;}
.page > .original.article-reading .article-image-link > img {display:block;max-width:100%;height:auto;margin:0;}
.page > .original.article-reading .article-image-hint {
  margin-top:8px;font:460 12px/16px var(--ds-font);color:var(--muted);text-decoration:none;
}
.page > .original.article-reading .article-image-link:focus-visible {outline:2px solid var(--focus);outline-offset:4px;}

/* Lists remain prose; give long items a deliberate gap rather than empty p's. */
.page > .original.article-reading > :is(ol,ul) {margin:16px 0 0;padding-left:20px;}
.page > .original.article-reading > :is(ol,ul) > li {margin:0;padding-left:0;}
.page > .original.article-reading > :is(ol,ul) > li + li {margin-top:16px;}
.page > .original.article-reading > :is(ol,ul) > li > p {margin:0;line-height:20px;}
.page > .original.article-reading > :is(ol,ul) > li > p + p {margin-top:16px;}
.page > .original.article-reading > table {margin:32px 0 0;}
.page > .original.article-reading > table + p {margin-top:12px;font-size:12px;line-height:16px;color:var(--muted);}
.page > .original.article-reading .pullquote {margin:32px 0;}
.page > .original.article-reading .pullquote blockquote p {margin:0;line-height:20px;}
.page > .original.article-reading .pullquote > .article-caption {padding-left:16px;text-align:left;}
.page > .original.article-reading > .article-source-note {
  margin-top:32px;font:460 12px/18px var(--ds-font);color:var(--muted);
}

/* Retained video labels belong with their existing archive notice. They are
   records of missing embeds, not empty article sections or playback controls. */
.page > .original.article-reading > .article-missing-media {
  margin:32px 0;padding-left:16px;border-left:1px solid var(--rule);
}
.page > .original.article-reading .article-media-note {
  margin:0;color:var(--muted);font:460 12px/18px var(--ds-font);
}
.page > .original.article-reading .article-media-references {
  list-style:none;margin:12px 0 0;padding:0;
}
.page > .original.article-reading .article-media-references > li {
  margin:0;padding:0;font:460 14px/20px var(--ds-font);
}
.page > .original.article-reading .article-media-references > li + li {margin-top:8px;}
.page > .original.article-reading .article-media-references strong {font-weight:500;}

/* One introduction, demonstration and takeaway per scenario. Explanations
   stay still; screen, audio and timeline behavior remain owned by the player. */
.page > .original.article-reading .speech-scenarios {margin-top:32px;}
.page > .original.article-reading .speech-scenario {margin:0;}
.page > .original.article-reading .speech-scenario + .speech-scenario {margin-top:48px;}
.page > .original.article-reading .speech-scenario > h3 {
  margin:0;padding:0;font:500 14px/20px var(--ds-font);letter-spacing:var(--ds-tracking);
}
.page > .original.article-reading .speech-scenario > p {margin:16px 0 0;font-size:14px;line-height:20px;}
.page > .original.article-reading .speech-scenario > .speech-playback {margin-top:32px;}
.page > .original.article-reading .speech-scenarios > p {margin:24px 0 0;line-height:20px;}
.page > .original.article-reading .speech-scenarios > .speech-source-note {font-size:12px;line-height:18px;color:var(--muted);}

@media print {
 .page > .original.article-reading p {orphans:3;widows:3;}
 .page > .original.article-reading .article-caption {break-before:avoid;}
}