science-atlas {
  --atlas-line: #475458;
  --atlas-light: #f3f1eb;
  --atlas-muted: #b8c2c4;
  --atlas-gutter: clamp(24px, 6.2vw, 125px);
  display: block;
  color: var(--atlas-light);
  background: #050d11;
  font-family: var(--exhibit-sans, "Science Manrope", Arial, sans-serif);
  scroll-margin-top: 5rem;
}
.atlas-section { width: 100%; }
.atlas-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-inline: clamp(18px, 2.2vw, 48px);
  position: relative;
  background: linear-gradient(110deg, #050b0d, #071015 77%, #09151b);
}
.atlas-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.65vw, 32px);
  min-width: 0;
  min-height: clamp(83px, 7.5vw, 142px);
  padding: 12px clamp(6px, .85vw, 20px);
  color: #aeb9bc;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  transition: color .25s;
}
.atlas-tab + .atlas-tab::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 1px;
  height: 24%;
  background: #4c575a;
  transform: translateY(-50%);
}
.atlas-tab::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 1px;
  height: 2px;
  opacity: 0;
  background: radial-gradient(ellipse, #d7ffff 0 4%, #79dce3 14%, #22778399 30%, transparent 70%);
  filter: drop-shadow(0 0 4px #85eff1b3);
  transition: opacity .25s;
}
.atlas-tab[aria-selected="true"], .atlas-tab:hover { color: #fbfbf6; }
.atlas-tab[aria-selected="true"]::after { opacity: 1; }
.atlas-number {
  font: 300 clamp(32px, 3.45vw, 64px)/1 var(--exhibit-display, Georgia, serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.045em;
}
.atlas-tab-copy {
  font: 500 clamp(9px, .85vw, 15px)/1.65 var(--exhibit-sans, "Science Manrope", Arial, sans-serif);
  letter-spacing: .165em;
  text-transform: uppercase;
}
.atlas-panel:focus:not(:focus-visible), .atlas-details-heading h4:focus { outline: none; }
#science .atlas-tab:focus-visible, .atlas-panel:focus-visible { outline: 1px solid #bce0e2; outline-offset: -4px; }
.atlas-scene {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 48.5vw, 890px);
  padding: clamp(62px, 7.7vw, 150px) var(--atlas-gutter);
  overflow: hidden;
  background: linear-gradient(118deg, #060e12, #101f27);
}
.atlas-scene-image {
  z-index: -2;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
.atlas-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #040b103d, transparent 53%), linear-gradient(0deg, #040b104d, transparent 10%, transparent 95%, #050c1073);
}
.atlas-scene:not([data-exhibit="0"]) .atlas-scene-image {
  left: auto;
  width: 70%;
  object-position: center;
  mask-image: linear-gradient(90deg, transparent, black 30%);
}
.atlas-scene:not([data-exhibit="0"])::before {
  background: linear-gradient(90deg, #050d11 0%, #050d11a3 36%, transparent 60%), linear-gradient(0deg, #050d11 0%, transparent 15%, transparent 85%, #070f13b3);
}
.atlas-scene-copy { min-width: 0; width: 43%; }
.atlas-index {
  margin: 0 0 clamp(21px, 2.35vw, 48px);
  font: 450 clamp(11px, .92vw, 16px)/1.4 var(--exhibit-sans, "Science Manrope", Arial, sans-serif);
  color: #c2ccce;
  letter-spacing: .24em;
}
.atlas-heading {
  margin: 0 0 clamp(21px, 2.05vw, 42px) -.025em;
  font: 300 clamp(44px, 5.05vw, 99px)/1.04 var(--exhibit-display, Georgia, serif);
  letter-spacing: .045em;
  color: var(--atlas-light);
  text-transform: uppercase;
}
.atlas-heading span { display: block; }
.atlas-scene[data-exhibit="2"] .atlas-heading,
.atlas-scene[data-exhibit="4"] .atlas-heading { font-size: clamp(34px, 4.15vw, 80px); }
html[lang="en"] .atlas-scene[data-exhibit="1"] .atlas-heading { font-size: clamp(32px, 3.65vw, 74px); }
.atlas-summary {
  max-width: 38ch;
  margin: 0;
  color: #dde0de;
  font: 400 clamp(15px, 1.16vw, 22px)/1.55 var(--exhibit-sans, "Science Manrope", Arial, sans-serif);
  text-wrap: pretty;
}
.atlas-more, .atlas-reading-primary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: #f2f3ed;
  font: 520 clamp(11px, .93vw, 16px)/1.4 var(--exhibit-sans, "Science Manrope", Arial, sans-serif);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.atlas-more { margin-top: clamp(17px, 1.8vw, 35px); }
.atlas-more span { position: relative; }
.atlas-more span::after {
  content: "";
  position: absolute;
  inset: auto .14em -7px 0;
  height: 1px;
  background: linear-gradient(90deg, #d2d9d5, #758f94 80%, transparent);
}
.atlas-more svg, .atlas-reading-primary svg { width: 24px; height: 16px; transition: transform .25s; }
.atlas-more:hover svg, .atlas-reading-primary:hover svg { transform: translateX(4px); }
.atlas-details {
  padding: clamp(32px, 4.2vw, 80px) var(--atlas-gutter);
  border-block: 1px solid #354249;
  background: #0b151a;
  scroll-margin-top: 6rem;
}
.atlas-details[hidden] { display: none; }
.atlas-details-heading, .atlas-reading-links, .atlas-related { display: flex; gap: 20px; align-items: center; }
.atlas-details-heading { justify-content: space-between; }
.atlas-details-heading h4, .atlas-note-copy h4 {
  margin: 0;
  font: 360 clamp(30px, 3.2vw, 62px)/1.1 var(--exhibit-display, Georgia, serif);
  color: var(--atlas-light);
}
.atlas-close-details, .atlas-note-art button {
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  background: #091217df;
  color: #edece9;
  border: 1px solid #647276;
  border-radius: 50%;
}
.atlas-close-details svg, .atlas-note-art button svg { width: 18px; height: 18px; }
.atlas-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 80px);
  margin: clamp(28px, 3.1vw, 55px) 0;
}
.atlas-columns h5, .atlas-note-type, .atlas-related > span {
  margin: 0 0 10px;
  color: #c2d4d5;
  font: 560 11px/1.5 var(--exhibit-sans, "Science Manrope", Arial, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.atlas-columns p, .atlas-note-copy p { margin: 0; color: #d4dcdb; font-size: clamp(15px, 1.06vw, 19px); line-height: 1.65; }
.atlas-reading-links { justify-content: space-between; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid #354249; }
.atlas-related { flex-wrap: wrap; gap: 4px 20px; }
.atlas-related > span { margin: 0; }
.atlas-related button {
  min-height: 40px;
  padding: 5px 0;
  color: #e0e5e2;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: #627278;
  text-underline-offset: 5px;
}
.atlas-related button:hover { text-decoration-color: currentColor; }
.atlas-note {
  padding: 0;
  width: min(650px, calc(100vw - 30px));
  max-height: calc(100dvh - 44px);
  background: #0b151a;
  color: #edf1ed;
  border: 1px solid #52636a;
  box-shadow: 0 30px 95px #000a;
}
.atlas-note::backdrop { background: #01080bd6; backdrop-filter: blur(6px); }
.atlas-note-art { position: relative; height: clamp(125px, 21vh, 205px); }
.atlas-note-art img { display: block; width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(black 64%, transparent); }
.atlas-note-art button { position: absolute; top: 12px; right: 12px; }
.atlas-note-copy { padding: 6px clamp(20px, 3.4vw, 40px) clamp(25px, 3.4vw, 40px); }
.atlas-note-copy .atlas-note-type { color: #b4c5c7; font-size: 11px; font-weight: 600; }
.atlas-note-copy h4 { margin: 6px 0 20px; }
.atlas-note-copy p + p { margin-top: 12px; }
.atlas-citation { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 23px; padding-top: 16px; border-top: 1px solid var(--atlas-line); color: #dcebe9; font-size: 14px; line-height: 1.5; }
.atlas-citation small { display: block; margin-bottom: 4px; color: var(--atlas-muted); }
.atlas-citation svg { flex: 0 0 18px; width: 18px; }
.atlas-citation:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .atlas-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(165px, 1fr); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #516266 transparent; }
  .atlas-tab { scroll-snap-align: start; }
  .atlas-number { font-size: 33px; }
  .atlas-scene-copy { width: 48%; }
  .atlas-heading { font-size: clamp(33px, 5.3vw, 50px); }
}
@media (min-width: 651px) and (max-width: 960px) {
  .atlas-scene[data-exhibit="0"] .atlas-scene-image {
    inset: 50% auto auto 3%;
    height: auto;
    transform: translateY(-50%);
    mask-image: linear-gradient(90deg, transparent 22%, #0002 40%, #000 60%), linear-gradient(0deg, transparent, #000 12%, #000 87%, transparent);
    mask-composite: intersect;
  }
}
@media (max-width: 650px) {
  .atlas-tabs { padding-inline: 12px; grid-auto-columns: max(151px, 43%); }
  .atlas-tab { min-height: 78px; justify-content: flex-start; gap: 11px; padding-inline: 13px; }
  .atlas-tab-copy { font-size: 9px; }
  .atlas-scene {
    min-height: 0;
    padding: 0 0 clamp(26px, 6vw, 42px);
    flex-direction: column;
    align-items: stretch;
  }
  .atlas-scene-image, .atlas-scene:not([data-exhibit="0"]) .atlas-scene-image {
    position: relative;
    width: 100%;
    height: clamp(245px, 65vw, 350px);
    object-position: 88% center;
    mask-image: linear-gradient(black 67%, transparent);
  }
  .atlas-scene:not([data-exhibit="0"]) .atlas-scene-image { object-position: center; }
  .atlas-scene::before, .atlas-scene:not([data-exhibit="0"])::before { background: none; }
  .atlas-scene-copy { width: 100%; margin-top: -9px; padding-inline: var(--atlas-gutter); }
  .atlas-index { margin-bottom: 13px; }
  .atlas-heading { font-size: clamp(36px, 8.25vw, 55px); }
  .atlas-scene[data-exhibit="2"] .atlas-heading,
  .atlas-scene[data-exhibit="4"] .atlas-heading,
  html[lang="en"] .atlas-scene[data-exhibit="1"] .atlas-heading { font-size: clamp(29px, 7.4vw, 50px); }
  .atlas-summary { font-size: 15px; max-width: 43ch; }
  .atlas-columns { grid-template-columns: 1fr; gap: 23px; }
  .atlas-reading-links { display: grid; }
  .atlas-related { gap: 3px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-tab, .atlas-tab::after, .atlas-more svg, .atlas-reading-primary svg { transition: none; }
}