.future-magazine {
  --future-blue: #3bb3e5;
  --future-pink: #e6007e;
  --future-line: rgba(255, 255, 255, .14);
  --future-muted: #c2c9d2;
  padding: clamp(2rem, 6vw, 5rem) 0 clamp(4rem, 9vw, 8rem);
  background: radial-gradient(ellipse at 80% 4%, #231022 0, transparent 34rem), #0d0f13;
}

.future-cover,
.future-chapter {
  scroll-margin-top: 5.5rem;
}

.future-cover,
.future-chapter,
.future-closing {
  width: min(74rem, calc(100% - 2.5rem));
  margin-inline: auto;
}

.future-cover {
  border-top: 1px solid var(--future-line);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2.75rem, 7vw, 5.5rem);
}

.future-preface {
  border-top: 0;
  padding-top: 0;
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.future-kicker {
  margin: 0;
  color: var(--future-blue);
  font: 700 .8rem/1.5 Montserrat, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.future-cover h2,
.future-chapter h3,
.future-trends h4,
.future-closing > p {
  color: #fff;
  font-family: Rajdhani, system-ui, sans-serif;
  font-weight: 700;
  margin: 0;
}

.future-cover h2 {
  max-width: 18ch;
  margin-block: .7rem 1rem;
  font-size: clamp(2.65rem, 7vw, 6.25rem);
  line-height: .94;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.future-cover h2 span {
  color: var(--future-blue);
}

.future-deck,
.future-intro {
  max-width: 64ch;
  margin: 0;
  line-height: 1.7;
}

.future-deck {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 600;
}

.future-intro {
  margin-top: .65rem;
  color: var(--future-muted);
}

.future-index {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}

.future-index a {
  border: 1px solid var(--future-line);
  border-radius: 999px;
  padding: .65rem .9rem;
  color: #fff;
  font-size: .78rem;
  text-decoration: none;
}

.future-index a:hover,
.future-index a:focus-visible {
  border-color: var(--future-blue);
  outline: 2px solid transparent;
  background: #142630;
}

.future-chapter + .future-chapter {
  margin-top: clamp(2.5rem, 7vw, 5rem);
}

.future-chapter-header {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  overflow: hidden;
  min-height: clamp(15rem, 34vw, 25rem);
  border: 1px solid var(--future-line);
  border-radius: 1.25rem;
  background: #171b23;
}

.future-chapter-header img,
.future-chapter-header::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.future-chapter-header img {
  object-fit: cover;
  object-position: center 48%;
}

.future-chapter-header::after {
  content: "";
  background: linear-gradient(0deg, rgba(8, 11, 17, .98), rgba(8, 11, 17, .65) 33%, transparent 75%);
}

.future-chapter-heading {
  z-index: 1;
  padding: clamp(1.1rem, 4vw, 2.8rem);
}

.future-chapter h3 {
  margin-top: .25rem;
  font-size: clamp(1.8rem, 4vw, 3.35rem);
  line-height: 1;
  text-wrap: balance;
}

.future-trends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.future-trends li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: clamp(.65rem, 2vw, 1.1rem);
  padding: clamp(1rem, 3vw, 1.8rem);
  border: 1px solid var(--future-line);
  border-radius: 1rem;
  background: #141820;
}

.future-trends li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.future-number {
  color: #ff81bb;
  font: 700 1.25rem/1.25 Rajdhani, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.future-trends h4 {
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  line-height: 1.12;
}

.future-trends p {
  max-width: 68ch;
  margin: .55rem 0 0;
  color: var(--future-muted);
  font-size: .95rem;
  line-height: 1.65;
}

.future-closing {
  margin-top: clamp(2.5rem, 7vw, 5rem);
  border-left: 3px solid var(--future-pink);
  border-radius: 0 1rem 1rem 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: linear-gradient(125deg, #211522, #141820);
}

.future-closing > p {
  max-width: 42ch;
  margin-top: .45rem;
  font-size: clamp(1.45rem, 3.3vw, 2.65rem);
  line-height: 1.15;
}

@media (max-width: 42rem) {
  .future-trends {
    grid-template-columns: minmax(0, 1fr);
  }
}