/* v009: one shared layout for all six landscape themes. */
.theme-page-hero {
  margin-bottom: 0;
}
.theme-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  margin: 0 calc(-1 * clamp(24px, 7vw, 112px));
  padding: 52px clamp(24px, 7vw, 112px);
  background: #fff;
}
.theme-figure {
  --theme-panel-color: #edf1e7;
  --theme-panel-opacity: .7;
  position: relative;
  isolation: isolate;
  align-self: start;
  min-width: 0;
  margin: 0;
}
.theme-figure::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -16px;
  left: -14px;
  width: calc(min(100%, 620px) + 28px);
  z-index: -1;
  border-radius: 4px;
  background: var(--theme-panel-color);
  opacity: var(--theme-panel-opacity);
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
  mask-image: linear-gradient(to right, #000, transparent);
  pointer-events: none;
}
.theme-details .rich-section h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.3;
}
.theme-diagram {
  position: relative;
  mix-blend-mode: multiply;
  container-type: inline-size;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 620 / 440;
  min-height: 300px;
  margin-top: 12px;
}
.theme-diagram > img {
  position: absolute;
  top: 4%;
  left: 0;
  width: 58%;
  height: auto;
}
.theme-caption {
  max-width: 620px;
  margin: 12px 0 0;
  color: #4e655a;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}
.trajectory-words {
  margin: 0;
  padding: 0;
  list-style: none;
}
.trajectory-word {
  position: absolute;
  right: 0;
  font-family: "Unbounded", sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--deep);
  text-wrap: balance;
}
.trajectory-word::before {
  content: "";
  position: absolute;
  top: .7em;
  left: -12px;
  width: 8px;
  border-top: 1px solid #a3b0b5;
}
/* Anchor labels to the line endings in the shared, square image crop. */
.trajectory-word-1 { left: 34%; top: calc(4% + .6cqw - .7em); }
.trajectory-word-2 { left: 39%; top: calc(4% + 5.8cqw - .7em); }
.trajectory-word-3 { left: 50%; top: calc(4% + 14.5cqw - .7em); }
.trajectory-word-4 { left: 52%; top: calc(4% + 20.3cqw - .7em); }
.trajectory-word-5 { left: 62%; top: calc(4% + 24.94cqw - .7em); }
.theme-details {
  display: grid;
  align-content: start;
  gap: 32px;
}
.theme-details .rich-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.theme-details .rich-section p {
  margin-bottom: 0;
}
.theme-sources {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  padding-top: 36px;
}
.theme-sources h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}
.theme-sources p,
.theme-sources li {
  font-size: 1rem;
  line-height: 1.6;
}
.theme-sources p {
  max-width: 540px;
  margin-bottom: 0;
  color: var(--muted);
}
.theme-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.theme-sources li + li {
  margin-top: 12px;
}
.theme-sources a {
  text-underline-offset: 4px;
  text-decoration-color: #a5b6ac;
}
.theme-sources a:hover {
  color: var(--sage-dark);
}
@media (max-width: 1100px) {
  .theme-overview { gap: 32px; }
  .trajectory-word { font-size: .6875rem; }
}
@media (max-width: 900px) {
  .theme-overview { grid-template-columns: 1fr; }
  .theme-figure::before { left: 50%; transform: translateX(-50%); }
  .theme-diagram { margin-right: auto; margin-left: auto; }
  .theme-caption { margin-right: auto; margin-left: auto; }
  .theme-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trajectory-word { font-size: .75rem; }
}
@media (max-width: 760px) {
  .theme-overview {
    margin-right: -22px;
    margin-left: -22px;
    padding: 36px 22px;
  }
  .theme-details,
  .theme-sources { grid-template-columns: 1fr; gap: 28px; }
  .theme-diagram { min-height: 230px; }
  .trajectory-word { font-size: .6875rem; }
  .trajectory-word-2,
  .trajectory-word-3 { transform: translateY(4px); }
  .trajectory-word-4 { transform: translateY(8px); }
  .trajectory-word-5 { transform: translateY(12px); }
  .theme-details .rich-section h2 { font-size: 1.25rem; }
}
@media (max-width: 380px) {
  /* Leave room when the fourth trajectory label wraps onto two lines. */
  .trajectory-word-5 { transform: translateY(30px); }
}