/* ==========================================================================
   Homelands
   The page says little on purpose. The job here is to make that restraint look
   deliberate rather than unfinished - it used to end on four empty cards
   reading "Content to be supplied verbatim", which reads as a page nobody
   finished rather than a position somebody took.
   ========================================================================== */

.hl-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #0a1512;
}
.hl-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hl-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim-deep) 6%, rgba(8, 16, 13, .55) 55%, rgba(8, 16, 13, .3));
}
.hl-hero__body {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-gutter) 46px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.hl-hero__title {
  font-size: var(--text-h1);
  line-height: 1.08;
  color: var(--color-stone-bright);
  max-width: 760px;
  text-wrap: balance;
}

/* The acknowledgment. It is a quotation, so it is set as one - no left-border
   accent bar, which is the tell that was on this page before. */
.hl-ack { margin: 0; max-width: 900px; }
.hl-ack blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-stone-bright);
  text-wrap: pretty;
}
.hl-ack blockquote::before {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-bottom: 26px;
  background: var(--color-glacier);
}
.hl-ack figcaption {
  margin-top: 20px;
  font: 400 var(--text-mono) var(--font-data);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
}

.hl-lede {
  max-width: 680px;
  margin-bottom: 28px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.hl-nations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--gap-card);
}
.hl-nation {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 28px 28px 24px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(165deg, rgba(99, 180, 171, .09), rgba(99, 180, 171, 0) 60%),
    var(--color-pool);
  border: 1px solid rgba(99, 180, 171, .14);
}
.hl-nation h3 {
  font-size: 30px;
  line-height: 1.15;
  color: var(--color-stone-bright);
}
.hl-nation__also {
  font: 400 var(--text-mono-label) var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-glacier);
}
.hl-nation p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-tertiary);
  margin-top: 3px;
}
.hl-nation__links {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
}

.hl-position {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  padding-top: 34px;
  border-top: 1px solid rgba(237, 233, 224, .14);
}
.hl-position h2 { margin-bottom: 14px; }
.hl-position h3 {
  font-size: var(--text-h3);
  color: var(--color-stone-bright);
  margin-bottom: 14px;
}
.hl-position p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 60ch;
}
.hl-position p + p { margin-top: 14px; }
.hl-position__note {
  font-family: var(--font-data) !important;
  font-size: var(--text-mono) !important;
  line-height: 1.7 !important;
  color: var(--color-mono-faint) !important;
}

@media (max-width: 900px) {
  .hl-position { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .hl-hero { min-height: 300px; }
  .hl-hero__body { padding-bottom: 32px; }
  .hl-ack blockquote { font-size: 20px; }
  .hl-nation { padding: 22px 20px 20px; }
  .hl-nation h3 { font-size: 25px; }
}