.whisper-outcome {
  position: relative;
  overflow: hidden;
  padding: 110px 6vw;
  color: #fff8dc;
  background:
    radial-gradient(circle at 8% 8%, rgba(235, 107, 210, .35), transparent 24%),
    radial-gradient(circle at 88% 34%, rgba(94, 126, 255, .38), transparent 27%),
    #19122d;
}

.whisper-outcome::before {
  content: "✦   ♪   ✧   ♫   ✦";
  position: absolute;
  inset: 34px 6vw auto;
  color: #f3ee83;
  font: 700 12px/1 "Space Mono", monospace;
  letter-spacing: 2.2vw;
  opacity: .8;
}

.outcome-intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 8vw;
  align-items: end;
  margin-bottom: 68px;
}

.outcome-intro h2,
.journey-heading h2 {
  margin: 14px 0 0;
  font: 900 clamp(52px, 7.5vw, 118px)/.86 "Archivo Black", sans-serif;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.outcome-intro h2 {
  color: #f3ee83;
  text-shadow: 6px 6px 0 #7a55d0;
}

.outcome-intro p,
.journey-heading p {
  margin: 0;
  max-width: 700px;
  font-size: clamp(17px, 1.7vw, 25px);
  line-height: 1.65;
}

.outcome-hero,
.outcome-gallery figure {
  margin: 0;
  overflow: hidden;
  border: 3px solid #f3ee83;
  border-radius: 28px;
  background: #0b0912;
  box-shadow: 10px 10px 0 #7a55d0;
}

.outcome-hero img {
  display: block;
  width: 100%;
  min-height: 430px;
  max-height: 720px;
  object-fit: cover;
}

.outcome-hero figcaption,
.outcome-gallery figcaption {
  padding: 14px 18px;
  color: #19122d;
  background: #f3ee83;
  font: 700 9px/1.4 "Space Mono", monospace;
  letter-spacing: .08em;
}

.outcome-gallery {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 22px;
  margin-top: 38px;
}

.outcome-gallery figure:nth-child(2) {
  border-color: #f5acd1;
  box-shadow: 10px 10px 0 #f5acd1;
}

.outcome-gallery figure:nth-child(2) figcaption { background: #f5acd1; }
.outcome-gallery .wide { grid-column: 1 / -1; }
.outcome-gallery img {
  display: block;
  width: 100%;
  height: 430px;
  object-fit: cover;
}
.outcome-gallery .wide img { height: min(62vw, 760px); }

.journey-heading {
  display: grid;
  grid-template-columns: .45fr 1.15fr .9fr;
  gap: 30px;
  align-items: end;
  margin: 135px 0 52px;
}

.journey-heading h2 {
  color: #bcebd5;
  font-size: clamp(42px, 5.8vw, 88px);
}

.journey-heading p { font-size: 16px; }

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.journey-grid article {
  display: grid;
  grid-template-rows: 300px 1fr;
  overflow: hidden;
  color: #251744;
  border: 3px solid #8061d3;
  border-radius: 26px;
  background: #c9b7ff;
  box-shadow: 8px 8px 0 #8061d3;
}

.journey-grid article:nth-child(2) {
  background: #f5acd1;
  box-shadow: 8px 8px 0 #f5acd1;
}

.journey-grid img {
  width: 100%;
  height: 100%;
  padding: 18px;
  object-fit: contain;
  background: #09070e;
}

.journey-grid article > div { padding: 28px; }
.journey-grid b { font: 700 10px "Space Mono", monospace; }
.journey-grid h3 {
  margin: 13px 0;
  font: 900 clamp(25px, 2.5vw, 39px)/.95 "Archivo Black", sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.journey-grid p { margin: 0; font-size: 14px; line-height: 1.7; }

.journey-grid .journey-finale {
  grid-template-rows: 300px 1fr;
  color: #251744;
  background: #bcebd5;
  box-shadow: 8px 8px 0 #bcebd5;
}

.journey-finale > span {
  display: grid;
  place-items: center;
  color: #f3ee83;
  background:
    radial-gradient(circle at center, #e65fc4 0 18%, transparent 18.5%),
    linear-gradient(145deg, #433188, #5a7ee8);
  font: 900 150px/1 Georgia, serif;
  text-shadow: 6px 6px 0 #251744;
}

@media (max-width: 900px) {
  .whisper-outcome { padding: 90px 6vw; }
  .outcome-intro,
  .journey-heading { grid-template-columns: 1fr; gap: 28px; }
  .outcome-gallery { grid-template-columns: 1fr; }
  .outcome-gallery .wide { grid-column: auto; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-grid article { grid-template-columns: .85fr 1.15fr; grid-template-rows: minmax(320px, auto); }
  .journey-finale > span { min-height: 320px; }
}

@media (max-width: 620px) {
  .whisper-outcome { padding: 76px 5vw; }
  .outcome-hero,
  .outcome-gallery figure { border-radius: 18px; box-shadow: 6px 6px 0 #7a55d0; }
  .outcome-hero img { min-height: 260px; }
  .outcome-gallery img,
  .outcome-gallery .wide img { height: 68vw; }
  .journey-heading { margin-top: 95px; }
  .journey-grid article { grid-template-columns: 1fr; grid-template-rows: 270px auto; }
  .journey-finale > span { min-height: 270px; }
}

/* V4.5 / READABLE TYPE SCALE */
.outcome-label, .journey-grid b { font-size: 11px; line-height: 1.45; }
.journey-grid p { font-size: 15px; }

/* V4.28 / WHISPER PROJECT FILM */
.whisper-film {
  padding: clamp(72px, 8vw, 120px) 6vw;
  display: grid;
  grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  color: #fff8e7;
  background:
    radial-gradient(circle at 15% 24%, rgba(245,172,209,.28), transparent 28%),
    linear-gradient(145deg, #20153c, #493884 58%, #6a55bb);
  border-block: 3px solid #8061d3;
}

.whisper-film-copy > span {
  display: inline-block;
  padding: 7px 10px;
  color: #251744;
  background: #f3ee83;
  border-radius: 999px;
  font: 700 10px/1 "Space Mono", monospace;
  letter-spacing: .08em;
}

.whisper-film-copy h2 {
  margin: 28px 0 22px;
  color: #fff8e7;
  font: 400 clamp(48px, 6vw, 92px)/.82 "Nighty Preview", "Archivo Black", sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.whisper-film-copy p {
  max-width: 470px;
  margin: 0;
  color: rgba(255,248,231,.78);
  font-size: 15px;
  line-height: 1.7;
}

.whisper-film-frame {
  margin: 0;
  overflow: hidden;
  border: 3px solid #c9b7ff;
  border-radius: 24px;
  background: #09070e;
  box-shadow: 9px 9px 0 #bcebd5;
}

.whisper-film-frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: #09070e;
}

.whisper-film-frame figcaption {
  padding: 12px 15px;
  color: #fff8e7;
  border-top: 1px solid rgba(255,255,255,.28);
  font: 700 10px/1.4 "Space Mono", monospace;
  letter-spacing: .05em;
}

@media (max-width: 800px) {
  .whisper-film { grid-template-columns: 1fr; padding: 68px 5vw 76px; gap: 34px; }
  .whisper-film-copy h2 { font-size: clamp(48px, 14vw, 68px); }
  .whisper-film-copy p { max-width: none; font-size: 14px; }
  .whisper-film-frame { border-radius: 17px; box-shadow: 6px 6px 0 #bcebd5; }
  .whisper-film-frame figcaption { font-size: 9px; }
}