/* Keep the existing panorama behind the story, independent of the photo collection below. */
#about.about-world {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #eaf3f9;
  box-shadow: none;
}
#about .about-world-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 530px);
  align-content: center;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: none;
  min-height: max(850px, 100svh);
  margin: 0;
  padding: 152px 5.8% 82px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #d9eafa;
  box-shadow: none;
}
#about .about-world-panorama {
  position: absolute;
  z-index: -1;
  inset: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
#about .about-world-panorama > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 35% center;
}
#about .about-world-panorama::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #eaf5ff24, transparent 24%, transparent 82%, #eaf3f93d),
    linear-gradient(90deg, transparent 40%, #e8f6ff14);
}
#about .about-world-panorama figcaption {
  position: absolute;
  left: 5.8%;
  bottom: 25px;
  max-width: 88%;
  padding: 7px 13px;
  border: 1px solid #ffffffa6;
  border-radius: 30px;
  color: #214967;
  background: #eff8ffd9;
  font-size: 9px;
  letter-spacing: .025em;
  line-height: 1.6;
}
#about .about-world-story {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  justify-self: end;
  width: 100%;
  max-width: 530px;
  min-width: 0;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid #ffffffe0;
  border-radius: 32px;
  /* Readable fallback for browsers without backdrop-filter. */
  background: #edf6fbeb;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #a1d2f45c,
    0 24px 70px #103a6026, 0 3px 14px #ffffff2b;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #about .about-world-story {
    background: linear-gradient(135deg, #ffffffa3 0%, #edf8ff70 48%, #f6fbff8f 100%);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
  }
}
#about .about-world-story::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, #ffffff52 0%, transparent 27%, transparent 78%, #b2e0ff26);
}
#about .about-world-brand {
  width: 206px;
  max-width: 75%;
  margin-bottom: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#about .about-world-brand img { width: 100%; height: auto; }
#about .about-world-story .eyebrow { color: #305870; font-size: 9px; letter-spacing: .17em; }
#about .about-world-story h2 {
  margin: 15px 0 4px;
  color: #0b2d46;
  font-size: clamp(33px, 3vw, 46px);
  line-height: 1.12;
  letter-spacing: -.045em;
  text-wrap: balance;
}
#about .about-world-story h2 em { color: #0963a2; font-style: normal; }
#about .about-world-story p:not(.eyebrow) {
  margin-top: 23px;
  color: #173b55;
  font-size: 14px;
  line-height: 1.85;
}
#about .editorial-story-signature {
  width: 100%;
  margin-top: 27px;
  padding-top: 19px;
  border-top: 1px solid #527e9c42;
  color: #305a77;
  font-size: 10px;
  letter-spacing: .03em;
  line-height: 1.6;
}
@media (max-width: 1100px) {
  #about .about-world-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 490px);
    padding: 150px 4.5% 80px;
    gap: 18px;
  }
  #about .about-world-panorama > img { object-position: 29% center; }
  #about .about-world-story { padding: 31px; }
  #about .about-world-story h2 { font-size: 38px; }
}
@media (max-width: 800px) {
  #about .about-world-hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 185px 6% 80px;
  }
  #about .about-world-story {
    grid-column: 1;
    max-width: 540px;
    background: linear-gradient(135deg, #ffffffb5, #eff8ff9e 55%, #f6fbffb3);
  }
  #about .about-world-panorama > img { object-position: 28% center; }
  #about .about-world-panorama figcaption { left: 6%; }
}
@media (max-width: 650px) {
  #about .about-world-hero {
    min-height: 100svh;
    padding: 190px 5% 74px;
  }
  #about .about-world-panorama > img { object-position: 26% center; }
  #about .about-world-story {
    justify-self: center;
    padding: 27px 24px;
    border-radius: 25px;
  }
  #about .about-world-brand { width: 184px; margin-bottom: 29px; }
  #about .about-world-story .eyebrow { font-size: 8px; }
  #about .about-world-story h2 { font-size: clamp(28px, 7.8vw, 38px); }
  #about .about-world-story p:not(.eyebrow) { font-size: 14px; line-height: 1.85; margin-top: 21px; }
  #about .editorial-story-signature { font-size: 9px; line-height: 1.75; }
  #about .about-world-panorama figcaption { left: 5%; bottom: 21px; font-size: 8px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #about .about-world-story { background: #f1f7fbf2; }
}
@media (prefers-reduced-transparency: reduce) {
  #about .about-world-story { background: #f1f7fb; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #about .about-world-hero { animation: none; }
}
