/* DerDenker 1.1.8 — editorial longread layer.
   Two-width system only: a calm 840px reading column and a 1040px breakout
   column for featured images, editorial figures and deliberately wide tables.
   Scoped to .article-page / .article-body so other templates keep their own grid. */

:root {
  --dd-reading: 840px;
  --dd-breakout: 1040px;
  --dd-visual: var(--dd-breakout); /* compatibility alias for 1.1.3 markup */
  --dd-article-text: #253744;
  --dd-soft: #f1efe9;
}

/* ---------- Article frame ---------- */
.article-page {
  padding: 34px 0 24px;
}

.article-header .meta {
  margin-bottom: 10px;
  font-size: 10.5px;
  letter-spacing: .10em;
}

.article-header h1 {
  max-width: 900px;
  margin-bottom: 12px;
  font-size: clamp(34px,3.4vw,48px);
  line-height: 1.08;
}

.article-deck {
  max-width: 820px;
  font-size: 19px;
  line-height: 1.48;
}

.article-image {
  width: min(var(--dd-breakout),calc(100% - 48px));
  margin: 22px auto 28px;
}

.article-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 4px;
}

/* ---------- Reading rhythm ---------- */
.article-body .content {
  color: var(--dd-article-text);
  font: 400 17.5px/1.56 var(--sans);
  letter-spacing: -.004em;
}

.article-body .content > :first-child {
  margin-top: 0;
}

.article-body .content p {
  margin: 0 0 .70em;
}

.article-body .content p:empty {
  display: none;
}

.article-body .content h2 {
  margin: 1.42em 0 .38em;
  font: 700 28px/1.14 var(--serif);
  letter-spacing: -.018em;
}

.article-body .content h3 {
  margin: 1.48em 0 .34em;
  font: 700 19.5px/1.25 var(--serif);
  letter-spacing: -.012em;
}

.article-body .content h4 {
  margin: 1.15em 0 .38em;
  font: 700 17px/1.35 var(--sans);
}

.article-body .content ul,
.article-body .content ol {
  margin: .25em 0 .82em;
  padding-left: 1.25em;
}

.article-body .content li {
  margin-bottom: .24em;
}

.article-body .content li > p {
  margin-bottom: .3em;
}

.article-body .content strong {
  color: var(--ink);
}

.article-body .content a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Lead / section helpers for longreads ---------- */
.article-body .content .dd-lead {
  margin: 0 0 1.15em;
  color: var(--ink);
  font: 400 20px/1.52 var(--sans);
  letter-spacing: -.008em;
}

.article-body .content .dd-kicker {
  margin: 2.35em 0 .22em;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font: 800 13.5px/1.3 var(--sans);
  letter-spacing: .075em;
  text-transform: uppercase;
}

/* A kicker and its chapter title form one visual unit. */
.article-body .content .dd-kicker + h2 {
  margin-top: 0;
}

.article-body .content .dd-section-rule {
  width: 82px;
  height: 1px;
  margin: 28px 0 20px;
  border: 0;
  background: var(--ink);
  opacity: .32;
}

/* A short sentence or result that should interrupt the scroll without becoming a box. */
.article-body .content .dd-pullquote {
  margin: 30px 0 32px;
  padding: 22px 0 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: 700 clamp(25px,3vw,34px)/1.18 var(--serif);
  letter-spacing: -.02em;
}

.article-body .content .dd-pullquote small {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font: 500 13.5px/1.48 var(--sans);
  letter-spacing: .02em;
}

/* Compact evidence/caveat note. */
.article-body .content .dd-note {
  margin: 22px 0 24px;
  padding: 15px 18px;
  border-left: 3px solid var(--accent);
  background: #f6f4ef;
  color: #43515d;
  font-size: 15px;
  line-height: 1.55;
}

.article-body .content .dd-note > :last-child {
  margin-bottom: 0;
}

/* One or more headline numbers, used sparingly. */
.article-body .content .dd-statline {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin: 26px 0 28px;
}

.article-body .content .dd-statline > div {
  flex: 1;
  min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.article-body .content .dd-statline strong {
  display: block;
  margin-bottom: 4px;
  font: 700 clamp(28px,3vw,40px)/1 var(--serif);
  letter-spacing: -.025em;
}

.article-body .content .dd-statline span {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ---------- Images / figures ---------- */
.article-body .content figure {
  margin-top: 24px;
  margin-bottom: 26px;
}

/* Deliberately wider than the reading column: editorial visual break. */
.article-body .content figure.dd-wide,
.article-body .content .wp-block-image.alignwide,
.article-body .content .wp-block-table.alignwide {
  width: min(var(--dd-breakout),calc(100vw - 48px));
  max-width: none;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}

.article-body .content figure.dd-wide img,
.article-body .content .wp-block-image.alignwide img {
  display: block;
  width: 100%;
  height: auto;
}

.article-body .content figcaption {
  margin-top: 7px;
  color: var(--muted);
  font: 12px/1.45 var(--sans);
}

/* ---------- Tables as editorial data elements ---------- */
.article-body .content .wp-block-table,
.article-body .content .dd-data-table {
  margin: 24px 0 28px;
  overflow-x: auto;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.article-body .content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  line-height: 1.42;
}

.article-body .content th {
  padding: 10px 11px;
  border-bottom: 1px solid #cfd2d0;
  color: var(--ink);
  background: #f5f3ee;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.article-body .content td {
  padding: 9px 11px;
  border-bottom: 1px solid #e4e1da;
}

.article-body .content tbody tr:last-child td {
  border-bottom: 0;
}

.article-body .content td strong {
  font-weight: 700;
}

/* Retain classic quote styling, but keep it compact. */
.article-body .content blockquote:not(.dd-pullquote) {
  margin: 24px 0 26px;
  padding: 13px 18px;
  font-size: 20px;
  line-height: 1.42;
}

.more-reading {
  padding-top: 26px;
}

@media (max-width: 900px) {
  .article-body .content figure.dd-wide,
  .article-body .content .wp-block-image.alignwide,
  .article-body .content .wp-block-table.alignwide {
    width: calc(100vw - 40px);
  }
}

@media (max-width: 700px) {
  :root { --dd-reading: 100%; }

  .article-page {
    padding-top: 24px;
  }

  .dd-reading {
    width: calc(100% - 36px);
  }

  .article-header h1 {
    font-size: 31px;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .article-deck {
    font-size: 17px;
    line-height: 1.48;
  }

  .article-image {
    width: calc(100% - 36px);
    margin: 18px auto 22px;
  }

  .article-body .content {
    font-size: 16.5px;
    line-height: 1.54;
  }

  .article-body .content p {
    margin-bottom: .68em;
  }

  .article-body .content h2 {
    margin-top: 1.40em;
    margin-bottom: .38em;
    font-size: 24px;
    line-height: 1.15;
  }

  .article-body .content h3 {
    margin-top: 1.32em;
    font-size: 18.5px;
  }

  .article-body .content .dd-lead {
    font-size: 18px;
    line-height: 1.48;
  }

  .article-body .content .dd-kicker {
    margin-top: 2.10em;
    padding-top: 10px;
    font-size: 12.5px;
    letter-spacing: .07em;
  }

  .article-body .content .dd-pullquote {
    margin: 24px 0 26px;
    padding: 17px 0 16px;
    font-size: 25px;
  }

  .article-body .content .dd-note {
    margin: 19px 0 21px;
    padding: 13px 15px;
    font-size: 14.5px;
  }

  .article-body .content .dd-statline {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin: 21px 0 23px;
  }

  .article-body .content .dd-statline > div {
    padding: 14px;
  }

  .article-body .content .dd-statline strong {
    font-size: 29px;
  }

  .article-body .content figure {
    margin-top: 21px;
    margin-bottom: 23px;
  }

  .article-body .content figure.dd-wide,
  .article-body .content .wp-block-image.alignwide,
  .article-body .content .wp-block-table.alignwide {
    width: calc(100vw - 24px);
  }

  .article-body .content table {
    font-size: 13px;
  }

  .article-body .content th,
  .article-body .content td {
    padding: 8px 9px;
  }
}

@media (max-width: 430px) {
  .article-body .content .dd-statline {
    grid-template-columns: 1fr;
  }
}

/* Compatibility with the first Trump longread HTML package. */
.article-body .content .dd-article-lead {
  margin: 0 0 1.15em;
  color: var(--ink);
  font: 400 20px/1.52 var(--sans);
  letter-spacing: -.008em;
}
.article-body .content figure.dd-article-visual--wide {
  width: min(var(--dd-breakout),calc(100vw - 48px));
  max-width: none;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}
.article-body .content > table {
  margin: 24px 0 28px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
@media (max-width: 900px) {
  .article-body .content figure.dd-article-visual--wide { width: calc(100vw - 40px); }
}
@media (max-width: 700px) {
  .article-body .content .dd-article-lead { font-size: 18px; line-height: 1.48; }
  .article-body .content figure.dd-article-visual--wide { width: calc(100vw - 24px); }
}

/* ---------- 1.1.8: final editorial components ---------- */
/* Emphasis without turning whole paragraphs into heavy bold blocks. */
.article-body .content .dd-keyline {
  margin: 17px 0 21px;
  padding: 2px 0 2px 15px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font: 650 18.5px/1.45 var(--sans);
  letter-spacing: -.008em;
}

/* Compact metrics: visible, but quieter than cards or infographics. */
.article-body .content .dd-metric-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 13px 0 19px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.article-body .content .dd-metric-line span {
  white-space: nowrap;
}

.article-body .content .dd-metric-line strong {
  margin-left: 4px;
  color: var(--ink);
  font-size: 16px;
}

/* Raw data stays available without forcing every reader through it. */
.article-body .content .dd-details {
  margin: 13px 0 25px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.article-body .content .dd-details summary {
  padding: 11px 2px;
  color: var(--accent);
  cursor: pointer;
  font: 750 13px/1.35 var(--sans);
  letter-spacing: .015em;
}

.article-body .content .dd-details[open] summary {
  border-bottom: 1px solid var(--line);
}

.article-body .content .dd-details .dd-data-table {
  margin: 12px 0 14px;
  border-top-width: 1px;
}

/* A single practical prompt panel replaces a stack of quote boxes. */
.article-body .content .dd-prompt-list {
  margin: 19px 0 23px;
  padding: 16px 20px 14px;
  border-left: 3px solid var(--accent);
  background: #f6f4ef;
}

.article-body .content .dd-prompt-list ol {
  margin: 0;
  padding-left: 1.35em;
}

.article-body .content .dd-prompt-list li {
  margin: 0 0 .62em;
  padding-left: .25em;
}

.article-body .content .dd-prompt-list li:last-child {
  margin-bottom: 0;
}

/* Two competing starting hypotheses in the conclusion. */
.article-body .content .dd-hypotheses {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  margin: 18px 0 22px;
}

.article-body .content .dd-hypotheses > div {
  padding-top: 11px;
  border-top: 2px solid var(--ink);
}

.article-body .content .dd-hypotheses span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font: 800 11px/1.2 var(--sans);
  letter-spacing: .10em;
}

.article-body .content .dd-hypotheses strong {
  display: block;
  font: 700 18px/1.38 var(--serif);
  letter-spacing: -.01em;
}

/* Five observed dimensions: one editorial band, not five pseudo paragraphs. */
.article-body .content .dd-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 0;
  margin: 17px 0 23px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: 700 17.5px/1.35 var(--serif);
}

.article-body .content .dd-keywords span:not(:last-child)::after {
  content: "·";
  margin: 0 10px;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 400;
}

.article-body .content .dd-note--caveat {
  background: #f8f6f1;
}

/* Editorial signature rather than another heading. */
.article-body .content .dd-signoff {
  margin: 34px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font: 800 11.5px/1.45 var(--sans);
  letter-spacing: .085em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .article-body .content .dd-keyline {
    margin: 15px 0 18px;
    padding-left: 12px;
    font-size: 17px;
  }

  .article-body .content .dd-metric-line {
    gap: 5px 13px;
    font-size: 13px;
  }

  .article-body .content .dd-hypotheses {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .article-body .content .dd-hypotheses strong {
    font-size: 17px;
  }

  .article-body .content .dd-keywords {
    font-size: 16.5px;
  }

  .article-body .content .dd-prompt-list {
    padding: 14px 16px 13px;
  }
}