.dossier-page {
  max-inline-size: 920px;
}

.simple-page .dossier-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin: 0 0 18px;
  font: 700 11px/1.1 var(--news-font);
  text-transform: uppercase;
}

.simple-page .dossier-breadcrumbs a {
  margin-inline-end: 0;
}

.dossier-header {
  border-block: 4px solid var(--ink);
  padding-block: 14px 12px;
  margin-block-end: 18px;
}

.dossier-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font: 900 13px/1 var(--news-font);
  letter-spacing: .04em;
}

.dossier-header h1 {
  margin: 0;
  font: 900 clamp(44px, 9vw, 88px)/.88 var(--display-font);
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.dossier-deck {
  max-inline-size: 760px;
  margin: 9px 0 0;
  font: 700 17px/1.15 var(--news-font);
}

.dossier-section {
  margin-block: 22px;
  border-block-start: 2px solid var(--ink);
  padding-block-start: 7px;
}

.dossier-section > h2 {
  margin: 0 0 9px;
  font: 900 18px/1 var(--display-font);
  letter-spacing: -.02em;
}

.dossier-stories,
.dossier-directory,
.dossier-related {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dossier-story {
  padding-block: 8px 10px;
  border-block-end: 1px solid var(--rule-light);
}

.dossier-story h3,
.dossier-cartoon h3 {
  margin: 2px 0 0;
  font: 900 20px/1.02 var(--news-font);
}

.dossier-date,
.dossier-source {
  margin: 0;
  color: var(--muted);
  font: 700 10px/1.2 var(--micro-font);
  text-transform: uppercase;
}

.dossier-cartoons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.dossier-cartoon img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.dossier-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font: 900 15px/1.1 var(--news-font);
  text-transform: uppercase;
}

.dossier-directory li {
  padding-block: 9px;
  border-block-end: 1px solid var(--rule-light);
}

.dossier-directory a {
  display: block;
  font: 900 22px/1 var(--display-font);
  text-transform: uppercase;
}

.dossier-directory span {
  display: block;
  margin-block-start: 3px;
  font: 700 13px/1.2 var(--news-font);
}

@media (max-width: 700px) {
  .dossier-page { padding: 18px 10px; }
  .dossier-header h1 { font-size: clamp(42px, 16vw, 68px); }
  .dossier-deck { font-size: 16px; }
  .dossier-story h3, .dossier-cartoon h3 { font-size: 18px; }
}