/* Private editorial preview. No files here are part of the public site build. */
.preview-ribbon {
  position: relative;
  z-index: 10;
  padding: 7px 18px;
  background: #c45135;
  color: #fff;
  text-align: center;
  font: 700 .75rem/1.4 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.profile-page .page-heading,
.compass-page .page-heading { padding-bottom: 20px; }

.profile-page .page-heading h1,
.compass-page .page-heading h1 { max-width: 750px; }

.profile-deck {
  max-width: 650px;
  font: 400 clamp(1.15rem, 2vw, 1.4rem)/1.42 var(--display);
  color: var(--pine);
}

.profile-page .page-heading .meta,
.compass-page .page-heading .meta { margin-top: 20px; }

.series-intro {
  max-width: 68ch;
  margin: 0 0 30px;
  padding: 17px 21px;
  border-left: 3px solid var(--brick);
  background: #f2ede1;
  font: .95rem/1.58 var(--sans);
}
.series-intro .series-intro-label {
  margin: 0 0 8px;
  color: var(--brick);
  font: 700 .7rem/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.series-intro p:last-child { margin: 0; }

.profile-prose { max-width: none; }
.profile-prose > p { max-width: 68ch; }

.profile-photo {
  float: right;
  width: min(31%, 220px);
  margin: 2px 0 22px 28px;
}

.profile-photo img { aspect-ratio: 2 / 3; object-fit: cover; }
.profile-photo figcaption { font-size: .72rem; }

.context-photo {
  clear: both;
  width: min(100%, 500px);
  margin: 26px 0 30px;
}
.context-photo img { width: 100%; height: auto; }
.context-photo figcaption { max-width: 68ch; font: .78rem/1.55 var(--sans); }

.profile-pullquote {
  clear: both;
  max-width: 640px;
  margin: 38px 0 38px 36px;
  padding: 24px 30px 22px;
  background: #eae3d3;
  border-top: 4px solid var(--brick);
  box-shadow: 8px 8px 0 #d9d0bd;
}

.pullquote-label,
.pullquote-credit {
  display: block;
  color: var(--stone);
  font: 700 .7rem/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.prose .profile-pullquote blockquote {
  margin: 12px 0 14px;
  padding: 0;
  border: 0;
  color: var(--pine);
  font: italic 400 clamp(1.6rem, 3.1vw, 2.15rem)/1.22 var(--display);
}

.profile-related {
  clear: both;
  margin-top: 36px;
  padding: 20px 22px;
  border-left: 4px solid var(--brick);
  background: #eae3d3;
  font-family: var(--sans);
  font-size: 1rem;
}

.compass-page .prose { max-width: 68ch; }
.compass-page .prose h2 {
  margin: 42px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #bcb5a5;
}
.compass-answer { padding: 17px 0 18px; border-bottom: 1px solid #d4ccbc; }
.compass-answer h3 { margin: 0 0 10px; font: 600 1.24rem/1.35 var(--display); }
.question-number { color: var(--brick); font: 700 .72rem var(--sans); margin-right: 5px; }
.compass-answer .answer-choice { margin: 0 0 9px; color: var(--pine); font: 700 .82rem var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.compass-answer .answer-comment { margin: 0; }

@media (max-width: 620px) {
  .profile-photo { float: none; width: min(65%, 300px); margin: 0 0 26px; }
  .profile-pullquote { margin: 32px 8px 36px 0; padding: 22px 21px; }
}