.quote-page,
.quotes-index {
  max-inline-size: 860px;
  margin-inline: auto;
  padding: 10px 14px 40px;
}

.quote-home {
  margin: 0 0 18px;
  font: 700 10px/1 var(--micro-font);
  text-transform: uppercase;
}

.quote-kicker {
  margin: 0 0 7px;
  color: var(--accent);
  font: 900 12px/1 var(--micro-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.quote-kicker a { color: inherit; text-decoration: none; }

.quote-header,
.quotes-index-header {
  border-block: 5px solid var(--ink);
  padding: 13px 0 15px;
}

.quote-header h1,
.quotes-index-header h1 {
  margin: 0;
  font: 900 clamp(34px, 8vw, 68px)/0.92 var(--display-font);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.quote-kind-label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 8px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 900 11px/1 var(--micro-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quotes-index-dek {
  max-inline-size: 760px;
  margin: 14px 0 0;
  font: 700 18px/1.25 var(--news-font);
}

.quote-figure {
  margin: 26px 0 8px;
  padding: 22px 20px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--paper);
}

.quote-text {
  margin: 0;
  font: 700 clamp(20px, 3.4vw, 30px)/1.3 var(--news-font);
  letter-spacing: -0.01em;
}

.quote-text-counter {
  font-size: clamp(17px, 2.8vw, 24px);
}

.quote-byline {
  margin: 14px 0 0;
  font: 700 12px/1.5 var(--micro-font);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quote-date-note {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.quote-attribution-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-inline-start: 4px solid var(--accent);
  background: #faf7f2;
  font: 400 13px/1.5 var(--news-font);
}

.quote-context-section p {
  margin: 18px 0 0;
  font: 400 16px/1.55 var(--news-font);
}

.quote-counterpoint {
  margin: 26px 0 0;
  padding: 20px;
  border-block: 3px solid var(--ink);
}

.quote-sources-section {
  margin: 26px 0 0;
}

.quote-sources-section h2,
.quote-related h2 {
  margin: 0 0 12px;
  font: 900 14px/1 var(--micro-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quote-source-link {
  display: block;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.quote-source-link strong {
  display: block;
  color: var(--accent);
  font: 900 11px/1.4 var(--micro-font);
  letter-spacing: 0.1em;
}
.quote-source-title { display: block; font: 700 15px/1.35 var(--news-font); margin-block-start: 4px; }
.quote-source-publisher { display: block; color: var(--muted); font: 400 12px/1.4 var(--news-font); }
.quote-source-locator { color: var(--muted); font: 400 12px/1.4 var(--news-font); }

.quote-correction {
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 2px solid var(--accent);
  font: 400 14px/1.5 var(--news-font);
}

.quote-related { margin: 26px 0 0; }
.quote-related ul { margin: 0; padding: 0; list-style: none; }
.quote-related li { margin: 0 0 10px; }
.quote-related a { font: 700 16px/1.3 var(--news-font); color: var(--ink); }
.quote-related-speaker {
  display: block;
  color: var(--muted);
  font: 700 11px/1.4 var(--micro-font);
  text-transform: uppercase;
}

.quote-withdrawn {
  margin: 20px 0;
  padding: 20px;
  border: 3px solid var(--ink);
}


.quotes-list { margin: 24px 0 0; }
.quotes-item {
  padding: 18px 0;
  border-block-end: 2px solid var(--ink);
}
.quotes-item h2 {
  margin: 0 0 8px;
  font: 900 clamp(22px, 4vw, 34px)/1 var(--display-font);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.quotes-item h2 a { color: var(--ink); text-decoration: none; }
.quotes-item h2 a:hover { color: var(--accent); }
.quotes-item-first h2 { font-size: clamp(28px, 5.5vw, 44px); }
.quotes-quote {
  margin: 0 0 8px;
  font: 400 15px/1.5 var(--news-font);
  color: #222;
}
.quotes-byline {
  margin: 0;
  color: var(--muted);
  font: 700 11px/1.4 var(--micro-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .quote-figure { padding: 16px 14px; }
}