science-atlas {
  --atlas-line: #24484e;
  --atlas-ice: #83f5f5;
  --atlas-muted: #b1c4c6;
  --atlas-paper: #031416;
  display: block;
  color: #f2f6f4;
  font-family: var(--science-type, Manrope, Arial, sans-serif);
  scroll-margin-top: 5rem;
}
.atlas-section {
  width: min(calc(100% - 2 * var(--science-gutter, 4vw)), 1780px);
  margin-inline: auto;
  padding-block: clamp(38px, 4.4vw, 86px) clamp(38px, 4vw, 76px);
}
.atlas-title, .atlas-readings-head h4 {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.35vw, 25px);
  margin: 0;
  text-transform: uppercase;
  color: #f3f4f2;
  font-family: var(--display);
}
.atlas-title::before, .atlas-readings-head h4::before {
  content:""; flex: none; width: clamp(32px, 3.6vw, 62px); height: 2px;
  background: #e4393c;
}
.atlas-title {
  margin-bottom: clamp(24px, 2.2vw, 42px);
  font-size: clamp(31px, 3vw, 56px);
  line-height: 1.16;
  font-weight: 440;
  letter-spacing: .055em;
}
.atlas-layout {
  display: grid; grid-template-columns: minmax(215px, .305fr) minmax(0, 1fr);
  gap: clamp(17px, 2vw, 38px); align-items: start;
}
.atlas-tabs {display: grid; gap: 0; padding: clamp(12px, 1.3vw, 24px) 0 0; border-top: 1px solid var(--atlas-line); border-radius: 7px 7px 0 0;}
.atlas-tab {
  position:relative; display:grid; grid-template-columns:2.2em minmax(0,1fr);
  gap:.65em; align-items:center; width:100%; min-height:clamp(62px,5.15vw,96px);
  padding:clamp(13px,1.15vw,22px) clamp(11px,1.6vw,29px);
  border:1px solid transparent; border-radius:5px; background:transparent;
  text-align:left; color:#e6eded; font:400 clamp(14px,1.18vw,21px)/1.3 var(--display);
  letter-spacing:.06em; text-transform:uppercase;
}
.atlas-tab::after {content:""; position:absolute; inset:auto 8px -1px; height:1px; background:var(--atlas-line);}
.atlas-tab[aria-selected="true"]::after, .atlas-tab:has(+ [aria-selected="true"])::after {opacity:0;}
.atlas-tab:hover {background:#0a2529;}
.atlas-tab[aria-selected="true"] {border-color:#66e9eb; color:white; background:linear-gradient(125deg,#073537,#061d20 62%,#064246);box-shadow:inset 0 0 18px #20b8c35c,0 0 14px #11bbcc3b;}
.atlas-tab-copy strong {font:inherit;}
.atlas-number {font:450 .93em/1 var(--science-type);color:#a6b8b7;letter-spacing:.05em;font-variant-numeric:tabular-nums;}
.atlas-tab[aria-selected="true"] .atlas-number {color:#ecfbfa;}
.atlas-panel {min-width:0;overflow:hidden; border:1px solid #2d555a;border-radius:clamp(9px,1vw,17px);background:radial-gradient(ellipse at right bottom,#09292c69,transparent 52%),var(--atlas-paper);}
.atlas-lead {position:relative;isolation:isolate;min-height:clamp(180px,15.1vw,290px);padding:clamp(19px,1.8vw,34px) clamp(22px,2.35vw,43px);display:flex;align-items:start;}
.atlas-lead img {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 46%;}
.atlas-lead::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#02131533 0%,transparent 32%,transparent 77%,var(--atlas-paper) 100%),linear-gradient(125deg,#021316bf,transparent 49%);}
.atlas-lead h4 {max-width:80%;margin:0;font:420 clamp(29px,3vw,56px)/1.17 var(--display);text-transform:uppercase;letter-spacing:.055em;text-shadow:0 1px 12px #001113;}
.atlas-insights {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:clamp(12px,1.05vw,21px) clamp(22px,2.7vw,49px) 0;}
.atlas-insight {border-left:1px solid #446368;padding-inline:clamp(15px,1.8vw,33px);}
.atlas-insight:first-child {border:0;padding-left:0;}
.atlas-insight:last-child {padding-right:0;}
.atlas-insight h5 {margin:0 0 14px;color:#eef3f2;font:450 clamp(14px,1.13vw,21px)/1.35 var(--display);letter-spacing:.105em;text-transform:uppercase;}
.atlas-insight p {margin:0;color:#cdd6d6;font-size:clamp(14px,1.01vw,19px);line-height:1.55;text-wrap:pretty;}
.atlas-action {padding:clamp(21px,1.95vw,36px) clamp(22px,2.7vw,49px) clamp(21px,2vw,38px);}
.atlas-action button {display:inline-flex;align-items:center;justify-content:center;gap:clamp(14px,1.7vw,27px);min-height:46px;padding:12px clamp(22px,2.25vw,40px);border:1px solid #77f4f5;border-radius:5px;color:#efffff;background:linear-gradient(150deg,#07353a,#031518 54%,#073439);box-shadow:inset 0 0 15px #38d7e130,0 0 12px #39d2e029;font:500 clamp(14px,1.04vw,19px)/1.35 var(--display);text-transform:uppercase;letter-spacing:.11em;}
.atlas-action button:hover {border-color:#b8ffff;box-shadow:inset 0 0 20px #2ee4ed5c,0 0 18px #28d9e240;}
.atlas-action svg {width:21px;height:21px;}
.atlas-readings {margin-top:clamp(34px,3.2vw,61px);}
.atlas-readings-head {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:clamp(14px,1.3vw,23px);}
.atlas-readings-head h4 {font-size:clamp(16px,1.35vw,25px);line-height:1.3;letter-spacing:.14em;font-weight:450;}
.atlas-controls {display:flex;gap:10px;flex:none;}
.atlas-controls[hidden] {display:none;}
.atlas-controls button,.atlas-note-art button {display:grid;place-items:center; width:40px;height:40px;border:1px solid #536a6e;border-radius:50%;background:#041115;color:#ecf5f6;}
.atlas-controls button:disabled {opacity:.37;cursor:default;}
.atlas-controls button:hover:enabled,.atlas-note-art button:hover {color:var(--atlas-ice);border-color:var(--atlas-ice);}
.atlas-controls svg,.atlas-note-art svg {width:17px;height:17px;}
.atlas-rail {
  --rail-gap:clamp(10px,.85vw,17px);
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * var(--rail-gap)) / 5);
  gap:var(--rail-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.atlas-rail::-webkit-scrollbar {display:none;}
.atlas-card {
  display:flex;flex-direction:column;align-items:stretch;overflow:hidden;scroll-snap-align:start;min-width:0;
  padding:0;border:1px solid var(--atlas-line);border-radius:clamp(5px,.65vw,11px);text-align:left;color:#f0f4f3;
  background:linear-gradient(155deg,#041316 55%,#051d20);
}
.atlas-card img,.atlas-note-art img {display:block;width:100%;height:100%;object-fit:cover;}
.atlas-card img {aspect-ratio:1.8;height:auto;mask-image:linear-gradient(black 75%,#0008);transition:filter .2s;}
.atlas-card:hover {border-color:#659a9d;}
.atlas-card:hover img {filter:brightness(1.14);}
.atlas-card-caption {display:grid;grid-template-columns:clamp(22px,1.9vw,35px) minmax(0,1fr);gap:clamp(9px,.85vw,15px);align-items:start;padding:clamp(12px,1.1vw,20px) clamp(13px,1.3vw,24px) clamp(17px,1.55vw,28px);}
.atlas-card strong {align-self:center;font:450 clamp(16px,1.35vw,25px)/1.22 var(--display);text-transform:uppercase;letter-spacing:.025em;}
.atlas-card .atlas-play {display:grid;place-items:center;aspect-ratio:1;border:1px solid #a7c0c2;border-radius:50%;color:#e8f7f8;font-size:clamp(13px,1vw,17px);line-height:1;}
.atlas-blurb {grid-column:1/-1;color:#bac9ca;font:430 clamp(13px,.94vw,17px)/1.52 var(--science-type);text-wrap:pretty;}
.atlas-tab:focus-visible,.atlas-card:focus-visible {outline:2px solid var(--atlas-ice);outline-offset:-3px;}
.atlas-note {
  padding: 0;
  width: min(640px, calc(100vw - 30px));
  max-height: calc(100dvh - 44px);
  background: #05181c;
  color: #edf7f7;
  border: 1px solid #42757b;
  border-radius: 14px;
  box-shadow: 0 25px 100px #000b;
}
.atlas-note::backdrop { background: #000b; }
.atlas-note-art { position: relative; height: clamp(115px, 20vh, 190px); }
.atlas-note-art img { mask-image: linear-gradient(black 65%, transparent); }
.atlas-note-art button { position: absolute; top: 12px; right: 12px; }
.atlas-note-copy { padding: 2px clamp(22px, 4vw, 39px) clamp(24px, 4vw, 40px); }
.atlas-note-copy h4 { margin: 7px 0 22px; font-size: clamp(28px, 3.25vw, 42px); line-height: 1.2; font-weight: 480; }
.atlas-note-copy p { margin: 0 0 14px; color: #c6d6d7; font-size: 16px; line-height: 1.65; }
.atlas-note-copy .atlas-note-type { margin: 0; color: var(--atlas-ice); font-size: 12px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; }
.atlas-citation { display: flex; align-items: center; justify-content: space-between; gap: 17px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--atlas-line); color: #c5f8f7; font-size: 14px; line-height: 1.55; }
.atlas-citation small { display: block; color: var(--atlas-muted); margin-bottom: 3px; }
.atlas-citation svg { flex: 0 0 18px; width: 18px; }
.atlas-citation:hover { color: white; text-decoration: underline; }
@media(max-width:1050px){
  .atlas-layout{grid-template-columns:minmax(170px,.3fr) minmax(0,1fr);gap:15px;}
  .atlas-insight{padding-inline:13px;}
  .atlas-insight h5{letter-spacing:.08em;}
  .atlas-tab{grid-template-columns:1.6em minmax(0,1fr);}
  .atlas-rail{grid-auto-columns:calc((100% - 3 * var(--rail-gap)) / 4);}
}
@media(max-width:820px){
  .atlas-layout{display:block;}
  .atlas-tabs{display:flex;overflow-x:auto;margin-bottom:14px;padding:2px 0 6px;gap:7px;border:0;scrollbar-width:thin;scrollbar-color:#346569 transparent;overscroll-behavior-x:contain;scroll-snap-type:x proximity;}
  .atlas-tab{flex:1 0 165px;min-height:57px;border:1px solid var(--atlas-line);padding:10px 13px;scroll-snap-align:start;}
  .atlas-tab::after{display:none;}
  .atlas-rail{grid-auto-columns:calc((100% - 2 * var(--rail-gap)) / 3);}
}
@media(max-width:600px){
  .atlas-section{padding-block:38px;}
  .atlas-title{font-size:clamp(24px,6.2vw,34px);letter-spacing:.04em;}
  .atlas-title::before,.atlas-readings-head h4::before{width:22px;}
  .atlas-lead{min-height:clamp(136px,33vw,200px);padding:18px;}
  .atlas-lead h4{max-width:88%;font-size:clamp(25px,6.3vw,35px);}
  .atlas-insights{grid-template-columns:1fr;padding:0 19px;}
  .atlas-insight,.atlas-insight:last-child{padding:14px 0;border:0;border-top:1px solid #28474a;}
  .atlas-insight:first-child{padding:13px 0 14px;border:0;}
  .atlas-insight h5{margin-bottom:6px;font-size:15px;}
  .atlas-action{padding:5px 19px 21px;}
  .atlas-rail{grid-auto-columns:66%;}
  .atlas-readings-head{gap:8px;}
  .atlas-readings-head h4{font-size:15px;letter-spacing:.09em;}
  .atlas-controls{gap:6px;}
  .atlas-controls button{width:35px;height:35px;}
  .atlas-card-caption{padding:12px 15px 19px;gap:10px;}
}
@media(prefers-reduced-motion:reduce){.atlas-card img{transition:none;}}
