:root {
  --bg:#101617;
  --surface:#171f21;
  --surface-light:#1d2729;
  --text:#f1f1e9;
  --muted:#a6b1b2;
  --faint:#78898c;
  --line:#ffffff21;
  --yellow:#edcd77;
  --ice:#b6d4d9;
  --header:86px;
  --max:1328px;
  --sans:'Manrope',Arial,sans-serif;
  --serif:'Literata',Georgia,serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:115px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
body.modal-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  border:0
}
img {
  display:block;
  width:100%;
  height:auto
}
figure,p,h1,h2,h3 {
  margin:0
}
h1,h2,h3 {
  font-weight:500;
  line-height:1.15
}
a,button {
  touch-action:manipulation
}
::selection {
  background:var(--yellow);
  color:var(--bg)
}
:focus-visible {
  outline:2px solid var(--yellow);
  outline-offset:6px
}
[hidden] {
  display:none!important
}
.container {
  width:min(var(--max),calc(100% - 112px));
  margin-inline:auto
}
.icon {
  flex-shrink:0;
  vertical-align:middle
}
.yellow {
  color:var(--yellow)
}
.tiny-label,.eyebrow {
  font-size:10px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:2px;
  text-transform:uppercase
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--muted)
}
.eyebrow>span:first-child {
  color:var(--yellow)
}
.yellow-rule {
  display:inline-block;
  width:25px;
  height:2px;
  background:var(--yellow)
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  padding:12px 20px;
  background:var(--yellow);
  color:var(--bg);
  transform:translateY(-150%);
  z-index:200
}
.skip-link:focus {
  transform:translateY(0)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:22px;
  font-size:12px;
  font-weight:600
}
.text-link .icon {
  width:19px;
  height:19px;
  color:var(--yellow);
  transition:transform .25s
}
.text-link:hover .icon {
  transform:translateX(4px)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  min-height:56px;
  padding:16px 24px;
  font-size:12px;
  font-weight:700;
  transition:background .25s,transform .25s
}
.button .icon {
  width:20px;
  height:20px
}
.button:hover {
  transform:translateY(-2px)
}
.button-yellow {
  background:var(--yellow);
  color:#151b1b
}
.button-yellow:hover {
  background:#ffdfa0
}
.button-outline {
  border:1px solid #d2d9d366;
  background:#10161733
}
.button-outline:hover {
  background:#ffffff0c
}
.section {
  padding-block:100px
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:42px
}
.section-heading h2 {
  font-size:clamp(32px,3.4vw,48px);
  letter-spacing:-1.8px;
  margin-top:20px;
  line-height:1.18
}
.section-heading>.text-link {
  margin-bottom:7px
}
.section-description {
  max-width:550px;
  color:var(--muted);
  margin-top:18px
}
/* Masthead */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:#101617f5;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}
.header-inner {
  height:var(--header);
  max-width:1600px;
  margin:auto;
  padding:0 48px;
  display:flex;
  align-items:center;
  gap:24px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex-shrink:0
}
.brand-mark {
  color:var(--yellow);
  width:29px;
  height:39px
}
.brand>span {
  font-size:27px;
  font-weight:800;
  letter-spacing:4px;
  line-height:1
}
.brand-description {
  font-size:8px;
  letter-spacing:1.5px;
  line-height:1.8;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:21px
}
.main-nav {
  display:flex;
  align-items:stretch;
  align-self:stretch;
  gap:30px;
  margin-left:auto
}
.main-nav a {
  display:flex;
  align-items:center;
  position:relative;
  font-size:11px;
  font-weight:600;
  color:#bdc4c3;
  transition:color .2s
}
.main-nav a:hover,.main-nav a[aria-current] {
  color:var(--text)
}
.main-nav a[aria-current]:after {
  content:'';
  position:absolute;
  bottom:0;
  height:2px;
  left:0;
  right:0;
  background:var(--yellow)
}
.header-north {
  display:flex;
  align-items:center;
  gap:9px;
  margin-left:25px;
  font-size:8px;
  font-weight:600;
  letter-spacing:1px
}
.header-north .icon {
  height:15px;
  width:15px;
  color:var(--yellow)
}
.north-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--yellow)
}
.menu-toggle {
  display:none;
  background:none;
  align-items:center;
  gap:8px;
  font-size:11px;
  padding:10px 0;
  margin-left:auto
}
/* Opening spread */
.hero {
  position:relative;
  isolation:isolate;
  margin:24px 24px 0;
  min-height:690px;
  overflow:hidden;
  background:#141c1d
}
.hero-image {
  position:absolute;
  inset:0 0 0 22%;
  z-index:-3;
  mask-image:linear-gradient(90deg,transparent,#000 22%)
}
.hero-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% 48%;
  filter:saturate(.64)
}
.hero:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#101617 0%,#101617f0 17%,#101617bd 32%,#10161740 55%,#10161700 78%),linear-gradient(0deg,#101617e8 0%,transparent 29%,transparent 85%,#10161755 100%)
}
.hero-grain {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.035' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}
.hero-topline {
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:27px 38px;
  color:#c1c9c7;
  font-size:8px;
  letter-spacing:1.6px
}
.hero-topline b {
  font-weight:500;
  color:var(--yellow);
  margin-left:16px
}
.hero-content {
  padding:48px 0 142px 6.8%;
  position:relative
}
.hero-content>.eyebrow {
  font-size:9px;
  letter-spacing:2px;
  color:var(--yellow);
  gap:12px
}
.hero h1 {
  font-size:clamp(80px,7.5vw,120px);
  font-weight:600;
  line-height:1.03;
  letter-spacing:-6px;
  margin:26px 0 28px
}
.hero h1>span {
  color:var(--yellow)
}
.hero-description {
  font-size:13px;
  line-height:1.85;
  color:#bbc4c2;
  max-width:380px
}
.hero .button {
  margin-top:30px;
  min-width:246px
}
.hero-bottom {
  position:absolute;
  bottom:25px;
  left:38px;
  right:38px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end
}
.scroll-prompt {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:7px;
  letter-spacing:1.6px;
  color:var(--muted);
  line-height:1.8
}
.scroll-prompt b {
  font-weight:500;
  color:var(--text)
}
.scroll-circle {
  display:flex;
  width:36px;
  height:36px;
  border:1px solid #ffffff3b;
  border-radius:50%;
  align-items:center;
  justify-content:center
}
.scroll-circle .icon {
  width:17px;
  height:17px
}
.hero-caption {
  display:grid;
  gap:3px;
  text-align:right;
  font-size:8px;
  letter-spacing:.2px;
  color:var(--muted)
}
.hero-caption>span:first-child {
  font-size:8px;
  letter-spacing:2px;
  color:var(--text)
}
.photo-credit {
  font-size:10px;
  color:var(--muted)
}
.photo-credit:hover {
  text-decoration:underline;
  text-underline-offset:3px
}
.hero-caption .photo-credit {
  font-size:8px
}
.species-strip {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1.05fr;
  padding-top:42px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line)
}
.species-strip>div+div {
  padding-left:40px;
  border-left:1px solid var(--line)
}
.species-name .tiny-label {
  color:var(--faint);
  font-size:8px;
  letter-spacing:1.7px
}
.species-name p {
  font-size:21px;
  line-height:1.4;
  margin:14px 0 5px
}
.species-name i {
  font-family:var(--serif);
  font-size:12px;
  color:var(--faint)
}
.species-strip strong {
  display:block;
  color:var(--yellow);
  font-size:47px;
  line-height:1;
  font-weight:400;
  letter-spacing:-2px;
  margin-bottom:8px
}
.species-strip>div>p {
  font-size:12px
}
.species-strip>div>a {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:8px;
  color:var(--faint);
  margin-top:11px
}
.species-strip>div>a .icon {
  height:11px;
  width:11px
}
/* Editorial cards */
.featured-stories {
  display:grid;
  grid-template-columns:1.36fr 1fr;
  gap:42px
}
.story-card {
  min-width:0
}
.story-image {
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--surface)
}
.story-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s,filter .7s;
  filter:saturate(.77)
}
.story-image:hover img {
  transform:scale(1.035);
  filter:saturate(1)
}
.round-arrow {
  position:absolute;
  right:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ffffff88;
  border-radius:50%;
  width:38px;
  height:38px;
  backdrop-filter:blur(8px);
  background:#10161733;
  color:#fff
}
.round-arrow .icon {
  width:17px;
  height:17px
}
.story-copy {
  padding-top:20px
}
.story-meta {
  display:flex;
  gap:20px;
  font-size:8px;
  font-weight:600;
  letter-spacing:1.2px;
  color:var(--faint);
  text-transform:uppercase
}
.story-meta>span:first-child {
  color:var(--yellow)
}
.story-card h3 {
  font-size:26px;
  letter-spacing:-.7px;
  margin:12px 0;
  line-height:1.24
}
.story-card h3 a:hover {
  color:var(--yellow)
}
.story-card p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  max-width:530px
}
.story-large .story-image {
  height:434px
}
.story-large .story-image img {
  object-position:50% 38%
}
.story-large h3 {
  font-size:34px;
  margin-top:14px
}
.stories-side {
  display:flex;
  flex-direction:column;
  gap:32px
}
.story-small {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:23px;
  align-items:start
}
.story-small .story-image {
  height:230px
}
.story-small .story-copy {
  padding-top:3px
}
.story-small .story-meta {
  flex-direction:column;
  gap:5px;
  font-size:8px
}
.story-small h3 {
  font-size:23px;
  line-height:1.3;
  margin-block:14px
}
.story-small p {
  font-size:11px;
  line-height:1.8
}
.climate-feature {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:620px;
  background:#17242a
}
.climate-image {
  position:absolute;
  inset:0;
  z-index:-2
}
.climate-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  filter:saturate(.7)
}
.climate-feature:after {
  position:absolute;
  inset:0;
  content:'';
  z-index:-1;
  background:linear-gradient(90deg,#0c161bf5 0%,#0e1c23c2 32%,#0d1c2444 64%,#0d1c2411),linear-gradient(0deg,#0f1b2388,transparent 50%)
}
.climate-inner {
  padding-top:84px;
  padding-bottom:70px;
  position:relative;
  min-height:620px
}
.climate-inner .eyebrow {
  color:var(--yellow)
}
.climate-inner h2 {
  font-size:clamp(40px,4.2vw,60px);
  letter-spacing:-2px;
  line-height:1.15;
  margin-block:25px
}
.climate-inner h2 em {
  font-family:var(--serif);
  font-weight:500;
  font-size:.83em;
  color:var(--ice)
}
.climate-inner>p:not(.eyebrow) {
  color:#bdcbd1;
  font-size:13px;
  line-height:1.8
}
.climate-inner .button {
  margin-top:28px
}
.climate-credit {
  position:absolute;
  bottom:25px;
  right:0
}
.climate-credit .photo-credit {
  font-size:8px;
  color:#d0d7db
}
.fact-teasers {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px
}
.fact-teasers article {
  position:relative;
  padding-top:28px;
  border-top:1px solid var(--line)
}
.fact-symbol {
  font-size:70px;
  font-weight:500;
  color:#ffffff0a;
  position:absolute;
  right:2px;
  top:15px;
  letter-spacing:-4px;
  line-height:1
}
.fact-teasers h3 {
  font-size:21px;
  line-height:1.3;
  margin-block:9px 16px;
  position:relative
}
.fact-teasers p {
  font-size:12px;
  color:var(--muted);
  max-width:320px;
  line-height:1.9
}
.fact-teasers a {
  display:inline-flex;
  gap:18px;
  align-items:center;
  font-size:10px;
  margin-top:26px;
  color:var(--yellow)
}
.fact-teasers a .icon {
  height:14px;
  width:14px
}
.gallery-preview {
  background:#141c1e;
  padding-top:70px;
  padding-bottom:30px
}
.preview-grid {
  display:grid;
  grid-template-columns:1.1fr .85fr 1.05fr .85fr;
  align-items:start;
  gap:18px
}
.preview-photo {
  position:relative;
  display:block;
  overflow:hidden
}
.preview-photo img {
  height:300px;
  object-fit:cover;
  filter:saturate(.75);
  transition:transform .7s
}
.preview-photo:hover img {
  transform:scale(1.04)
}
.preview-1 {
  margin-top:35px
}
.preview-1 img {
  height:330px
}
.preview-2 img {
  height:260px
}
.preview-3 {
  margin-top:50px
}
.preview-3 img {
  height:290px
}
.preview-photo:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 55%,#081114d9)
}
.preview-photo>span {
  position:absolute;
  z-index:1;
  bottom:17px;
  left:17px;
  right:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.preview-photo b {
  font-size:11px;
  font-weight:500
}
.preview-photo .icon {
  height:15px;
  width:15px;
  color:var(--yellow)
}
.gallery-note {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.6px;
  color:var(--faint);
  padding-top:25px
}
.closing-note {
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:25px;
  padding-block:94px 100px
}
.north-symbol {
  color:var(--yellow);
  font-size:40px;
  font-weight:400;
  line-height:1
}
.closing-note p {
  font-size:42px;
  line-height:1.2;
  letter-spacing:-1.5px
}
.closing-note em {
  font-family:var(--serif);
  font-weight:500;
  color:var(--ice)
}
.closing-note>a {
  display:inline-flex;
  align-items:center;
  gap:18px;
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}
.closing-note .icon {
  height:15px;
  width:15px;
  color:var(--yellow)
}
/* Page openings and indexes */
.page-intro {
  padding-top:36px;
  padding-bottom:45px
}
.page-breadcrumb {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:8px;
  letter-spacing:1.4px;
  color:var(--faint);
  flex-wrap:wrap
}
.page-breadcrumb a:hover {
  color:var(--yellow)
}
.intro-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  margin-top:60px
}
.page-intro h1 {
  font-size:clamp(42px,5vw,72px);
  font-weight:500;
  letter-spacing:-3px;
  line-height:1.15;
  max-width:920px
}
.intro-count {
  font-size:105px;
  font-weight:400;
  letter-spacing:-6px;
  line-height:1;
  color:#ffffff13
}
.page-intro>p {
  margin-top:25px;
  max-width:650px;
  font-size:14px;
  color:var(--muted);
  line-height:1.9
}
.article-catalog {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px 44px;
  padding-bottom:70px
}
.article-catalog .story-image {
  height:340px
}
.article-catalog .story-card:nth-child(even) {
  margin-top:70px
}
.article-catalog h3 {
  font-size:30px
}
.editorial-note {
  border-top:1px solid var(--line);
  padding-block:50px 70px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.editorial-note>.eyebrow {
  width:100%;
  color:var(--yellow)
}
.editorial-note>p {
  color:var(--muted);
  font-size:13px;
  line-height:1.9
}
.filter-bar {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:25px
}
.filter-button {
  background:none;
  border:1px solid #ffffff25;
  border-radius:25px;
  font-size:11px;
  padding:10px 19px;
  color:var(--muted);
  min-height:42px;
  transition:color .2s,background .2s,border-color .2s
}
.filter-button:hover {
  border-color:var(--yellow);
  color:var(--text)
}
.filter-button.is-active {
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--bg);
  font-weight:700
}
.filter-summary {
  font-size:10px;
  color:var(--faint);
  margin-block:25px 22px;
  letter-spacing:.4px
}
.filter-section {
  padding-bottom:75px
}
.facts-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.fact-card {
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid #ffffff08;
  padding:28px 29px 26px;
  min-height:310px;
  scroll-margin-top:130px;
  transition:background .2s
}
.fact-card:hover {
  background:#1c2729
}
.fact-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:8px;
  letter-spacing:1px;
  color:var(--faint);
  text-transform:uppercase
}
.fact-card-top>span:first-child {
  font-size:27px;
  letter-spacing:-1px;
  color:var(--yellow);
  font-weight:400
}
.fact-card h2 {
  font-size:21px;
  line-height:1.35;
  letter-spacing:-.5px;
  margin-top:26px
}
.fact-card>p {
  font-size:12px;
  color:var(--muted);
  line-height:1.85;
  margin-block:15px 25px
}
.fact-card>a {
  font-size:8px;
  color:var(--ice);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:auto;
  line-height:1.7
}
.fact-card>a .icon {
  width:12px;
  height:12px
}
.reading-banner {
  border-top:1px solid var(--line);
  padding-block:50px 75px
}
.reading-banner h2 {
  font-size:32px;
  letter-spacing:-1px;
  margin-block:16px 27px
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px 25px;
  align-items:start
}
.gallery-item {
  scroll-margin-top:120px;
  min-width:0
}
.gallery-image {
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--surface)
}
.gallery-image img {
  height:290px;
  object-fit:cover;
  transition:transform .7s;
  filter:saturate(.8)
}
.gallery-item:nth-child(3n+2) .gallery-image img {
  height:360px
}
.gallery-item:nth-child(3n) .gallery-image img {
  height:310px
}
.gallery-image:hover img {
  transform:scale(1.04)
}
.gallery-expand {
  position:absolute;
  top:14px;
  right:14px;
  background:#10161766;
  border:1px solid #ffffff4a;
  width:33px;
  height:33px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(5px)
}
.gallery-expand .icon {
  width:15px;
  height:15px
}
.photo-number {
  position:absolute;
  bottom:12px;
  left:14px;
  font-size:8px;
  letter-spacing:1.2px;
  text-shadow:0 1px 5px #000;
  background:#10161777;
  padding:4px 7px
}
.gallery-item figcaption {
  padding-top:17px
}
.gallery-item h2 {
  font-size:19px;
  letter-spacing:-.4px
}
.gallery-item figcaption p {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  margin-top:10px;
  margin-bottom:8px
}
.gallery-item .photo-credit {
  font-size:9px;
  color:var(--faint)
}
.gallery-disclaimer {
  font-size:11px;
  color:var(--faint);
  padding-bottom:65px
}
.gallery-disclaimer a {
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--ice)
}
/* Photograph viewer */
.image-viewer {
  border:1px solid #ffffff25;
  background:#101617;
  color:var(--text);
  width:min(1220px,96vw);
  max-width:96vw;
  height:94vh;
  height:94dvh;
  max-height:94dvh;
  padding:20px 30px 12px;
  overflow:auto
}
.image-viewer::backdrop {
  background:#030708ed;
  backdrop-filter:blur(12px)
}
.viewer-toolbar {
  display:flex;
  align-items:center;
  gap:25px;
  justify-content:space-between;
  min-height:40px
}
.viewer-toolbar .eyebrow {
  color:var(--yellow);
  font-size:9px
}
.viewer-toolbar [data-viewer-counter] {
  font-size:10px;
  color:var(--muted);
  margin-left:auto
}
.icon-button {
  background:none;
  padding:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  border:1px solid #ffffff35
}
.icon-button:hover {
  background:var(--surface-light);
  border-color:var(--yellow)
}
.viewer-stage {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:calc(94dvh - 225px);
  margin-top:18px;
  min-height:180px
}
.viewer-image {
  height:100%;
  width:100%;
  object-fit:contain
}
.viewer-prev,.viewer-next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#101617bb;
  border-radius:50%;
  backdrop-filter:blur(6px)
}
.viewer-prev {
  left:10px
}
.viewer-next {
  right:10px
}
.viewer-description {
  padding-top:20px;
  max-width:800px
}
.viewer-description h2 {
  font-size:23px
}
.viewer-description p {
  font-size:11px;
  color:var(--muted);
  margin-top:8px
}
.viewer-description .viewer-author {
  font-size:9px;
  color:var(--faint)
}
.viewer-hint {
  font-size:8px;
  letter-spacing:.6px;
  color:var(--faint);
  margin-top:15px;
  text-align:right
}
.viewer-hint span {
  margin-left:20px
}
/* Source register */
.source-layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:70px;
  padding-bottom:80px;
  padding-top:20px
}
.source-aside {
  position:sticky;
  top:125px;
  align-self:start
}
.source-aside>.eyebrow {
  color:var(--yellow);
  margin-bottom:20px
}
.source-aside>a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  padding:12px 0;
  border-bottom:1px solid var(--line);
  gap:15px
}
.source-aside>a .icon {
  width:12px;
  height:12px
}
.source-date {
  font-size:9px;
  color:var(--faint);
  line-height:1.9;
  margin-top:30px
}
.source-section {
  scroll-margin-top:125px;
  margin-bottom:70px
}
.source-section>h2 {
  font-size:31px;
  letter-spacing:-1px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding-bottom:30px;
  border-bottom:1px solid var(--line);
  gap:20px
}
.source-section>h2>span {
  font-size:16px;
  letter-spacing:0;
  color:var(--yellow)
}
.source-row {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:18px;
  border-bottom:1px solid var(--line);
  padding:26px 0;
  scroll-margin-top:110px
}
.source-index {
  font-size:11px;
  color:var(--faint);
  padding-top:3px
}
.source-row .eyebrow {
  font-size:8px;
  color:var(--yellow);
  letter-spacing:1px
}
.source-row h3 {
  font-size:17px;
  line-height:1.6;
  margin-top:8px;
  overflow-wrap:anywhere
}
.source-row h3 .icon {
  width:14px;
  height:14px;
  display:inline;
  margin-left:6px;
  color:var(--yellow)
}
.source-row div>p:last-child {
  font-size:11px;
  line-height:1.85;
  color:var(--muted);
  margin-top:11px
}
.source-row h3 a:hover {
  color:var(--ice)
}
.source-intro {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin-block:24px
}
.photo-source {
  display:grid;
  grid-template-columns:120px minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:20px 0;
  scroll-margin-top:120px
}
.photo-source-image img {
  width:120px;
  height:90px;
  object-fit:cover
}
.photo-source h3 {
  font-size:16px;
  line-height:1.4
}
.photo-source p {
  font-size:10px;
  color:var(--muted);
  margin-top:7px
}
.license-label {
  display:block;
  font-size:7px;
  letter-spacing:1.3px;
  color:var(--yellow);
  margin-top:8px
}
.photo-source>.text-link {
  font-size:9px;
  gap:12px
}
.photo-source>.text-link .icon {
  height:13px;
  width:13px
}
.about-project>.eyebrow {
  color:var(--yellow);
  margin-bottom:20px
}
.about-project>h2 {
  display:block;
  line-height:1.3
}
.about-project>p:not(.eyebrow) {
  font-size:13px;
  color:var(--muted);
  line-height:1.95;
  margin-block:24px
}
.about-project p a {
  color:var(--ice);
  text-decoration:underline;
  text-underline-offset:4px
}
.about-project .button {
  margin-top:10px
}
/* Long reads */
.reading-progress {
  position:fixed;
  top:var(--header);
  height:2px;
  left:0;
  right:0;
  z-index:60;
  pointer-events:none;
  background:transparent
}
.reading-progress span {
  display:block;
  height:100%;
  width:100%;
  background:var(--yellow);
  transform-origin:left;
  transform:scaleX(0)
}
.article-header {
  padding-top:35px
}
.article-heading {
  max-width:960px;
  margin-top:60px;
  margin-bottom:38px
}
.article-heading>.eyebrow {
  color:var(--yellow)
}
.article-heading h1 {
  font-size:clamp(43px,5.2vw,76px);
  line-height:1.12;
  font-weight:500;
  letter-spacing:-3px;
  margin-block:23px
}
.article-subtitle {
  max-width:680px;
  font-family:var(--serif);
  font-weight:500;
  font-size:20px;
  line-height:1.7;
  color:var(--ice)
}
.article-byline {
  display:flex;
  gap:26px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:30px;
  color:var(--faint);
  font-size:8px;
  letter-spacing:.7px
}
.article-byline>span:first-child {
  color:var(--text)
}
.article-byline>span {
  display:inline-flex;
  gap:7px;
  align-items:center
}
.article-byline .icon {
  width:12px;
  height:12px
}
.article-cover img {
  max-height:570px;
  aspect-ratio:2.2;
  object-fit:cover;
  object-position:50% 45%
}
.article-cover figcaption {
  font-size:9px;
  color:var(--faint);
  line-height:1.8;
  padding-top:12px
}
.article-cover .photo-credit {
  font-size:9px;
  margin-left:5px
}
.article-layout {
  display:grid;
  grid-template-columns:230px minmax(0,760px);
  justify-content:start;
  gap:80px;
  margin-top:65px
}
.article-toc {
  position:sticky;
  top:125px;
  align-self:start
}
.article-toc>.eyebrow {
  color:var(--yellow);
  font-size:8px;
  margin-bottom:20px
}
.article-toc nav {
  display:flex;
  flex-direction:column
}
.article-toc nav>a {
  display:flex;
  gap:13px;
  font-size:10px;
  line-height:1.8;
  color:var(--muted);
  padding:11px 0;
  border-bottom:1px solid var(--line)
}
.article-toc nav>a>span {
  font-size:8px;
  color:var(--faint);
  padding-top:2px
}
.article-toc nav>a:hover,.article-toc nav>a.is-current {
  color:var(--yellow)
}
.toc-back {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:9px;
  color:var(--faint);
  margin-top:30px
}
.toc-back .icon {
  height:15px;
  width:15px
}
.article-body {
  min-width:0;
  max-width:760px
}
.article-body>p.article-lead {
  font-size:19px;
  line-height:1.85;
  color:var(--ice);
  margin-bottom:45px;
  font-weight:400
}
.article-section {
  scroll-margin-top:120px;
  margin-bottom:42px
}
.article-section h2 {
  font-size:30px;
  line-height:1.3;
  letter-spacing:-.8px;
  margin-bottom:25px
}
.article-section>p {
  font-size:15px;
  line-height:2;
  color:#bfc8c7;
  margin-bottom:20px
}
.section-refs {
  font-size:8px;
  color:var(--faint);
  line-height:1.9;
  margin-top:8px
}
.section-refs a {
  text-decoration:underline;
  text-decoration-color:#78898c66;
  text-underline-offset:3px
}
.section-refs a:hover {
  color:var(--ice)
}
.article-callout {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:36px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:32px;
  margin-block:45px
}
.article-callout strong {
  font-weight:400;
  color:var(--yellow);
  font-size:clamp(32px,3.6vw,52px);
  line-height:1;
  letter-spacing:-2px;
  white-space:nowrap
}
.article-callout p {
  font-size:12px;
  color:var(--ice);
  line-height:1.9;
  max-width:400px
}
.article-figure {
  margin-block:45px
}
.article-figure img {
  max-height:490px;
  object-fit:cover
}
.article-figure figcaption {
  font-size:9px;
  line-height:1.9;
  color:var(--faint);
  padding-top:13px
}
.article-figure .photo-credit {
  font-size:9px
}
.article-sources {
  border-top:1px solid var(--line);
  padding-top:30px
}
.article-sources>.eyebrow {
  color:var(--yellow);
  font-size:9px
}
.article-sources ul {
  padding:0;
  list-style:none;
  margin-block:20px
}
.article-sources li {
  font-size:10px;
  color:var(--muted);
  line-height:1.9;
  padding:10px 0;
  border-bottom:1px solid #ffffff0d;
  overflow-wrap:anywhere
}
.article-sources li .icon {
  height:12px;
  width:12px;
  margin-left:4px
}
.article-sources li a:hover {
  color:var(--ice)
}
.article-sources>p:last-child {
  font-size:8px;
  color:var(--faint);
  margin-top:20px
}
.related-stories {
  margin-top:60px;
  border-top:1px solid var(--line);
  padding-top:65px
}
.related-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px
}
.related-grid .story-image {
  height:300px
}
.related-grid h3 {
  font-size:27px
}
.related-stories .section-heading h2 {
  font-size:38px
}
/* Colophon */
.site-footer {
  border-top:1px solid var(--line);
  background:#0d1314;
  padding:42px 0 24px
}
.footer-top {
  display:flex;
  align-items:center;
  gap:35px;
  padding-bottom:35px
}
.footer-top .brand>span {
  font-size:24px
}
.footer-top .brand-mark {
  width:23px;
  height:32px
}
.footer-top>p {
  font-family:var(--serif);
  font-size:14px;
  color:var(--muted)
}
.footer-top>.text-link {
  margin-left:auto;
  font-size:10px
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  font-size:8px;
  color:var(--faint)
}
.footer-bottom nav {
  display:flex;
  gap:24px;
  font-size:9px;
  color:var(--muted)
}
.footer-bottom a:hover {
  color:var(--yellow)
}
@media(min-width:1600px) {
  .hero {
    max-width:1552px;
    margin-inline:auto
  }
  .hero-content {
    padding-left:8%
  }
  .hero h1 {
    font-size:120px
  }
  .hero-image {
    left:27%
  }
}
@media(max-width:1200px) {
  .header-inner {
    padding-inline:32px;
    gap:20px
  }
  .header-north {
    display:none
  }
  .container {
    width:calc(100% - 80px)
  }
  .hero {
    margin:20px 20px 0
  }
  .hero-content {
    padding-top:55px;
    padding-left:5%
  }
  .hero h1 {
    font-size:96px
  }
  .hero-topline {
    padding-inline:30px
  }
  .featured-stories {
    grid-template-columns:1.15fr 1fr;
    gap:30px
  }
  .story-small {
    grid-template-columns:.8fr 1fr;
    gap:20px
  }
  .story-small h3 {
    font-size:21px
  }
  .story-small .story-image {
    height:225px
  }
  .story-large .story-image {
    height:400px
  }
  .species-strip>div+div {
    padding-left:25px
  }
  .story-large h3 {
    font-size:30px
  }
  .source-layout {
    gap:40px;
    grid-template-columns:180px minmax(0,1fr)
  }
  .photo-source {
    grid-template-columns:100px minmax(0,1fr);
    gap:18px
  }
  .photo-source-image img {
    width:100px;
    height:85px
  }
  .photo-source>.text-link {
    grid-column:2;
    margin-top:-12px
  }
  .article-layout {
    grid-template-columns:200px minmax(0,1fr);
    gap:50px
  }
  .fact-card {
    padding:24px
  }
  .gallery-image img {
    height:250px
  }
  .gallery-item:nth-child(3n+2) .gallery-image img {
    height:310px
  }
  .gallery-item:nth-child(3n) .gallery-image img {
    height:270px
  }
}
@media(max-width:900px) {
  :root {
    --header:76px
  }
  .container {
    width:calc(100% - 56px)
  }
  .header-inner {
    padding-inline:28px
  }
  .brand-description {
    display:none
  }
  .main-nav {
    gap:25px
  }
  .hero {
    min-height:680px;
    margin:16px 16px 0
  }
  .hero-topline {
    font-size:7px;
    padding:24px
  }
  .hero-topline b {
    display:block;
    margin-left:0;
    text-align:right
  }
  .hero-content {
    padding-top:55px;
    padding-left:6%
  }
  .hero h1 {
    font-size:85px;
    letter-spacing:-5px
  }
  .hero-image {
    left:15%
  }
  .hero-image img {
    object-position:56% center
  }
  .hero:after {
    background:linear-gradient(90deg,#101617f5,#101617c4 29%,#10161744 67%,#10161705),linear-gradient(0deg,#101617dc,transparent 40%)
  }
  .hero-description {
    font-size:12px;
    max-width:310px
  }
  .hero-content>.eyebrow {
    font-size:8px
  }
  .hero-caption {
    max-width:220px
  }
  .species-strip {
    grid-template-columns:1.2fr 1fr 1fr
  }
  .species-last {
    display:none
  }
  .species-strip>div+div {
    padding-left:26px
  }
  .species-name p {
    font-size:17px
  }
  .species-strip strong {
    font-size:42px
  }
  .species-strip>div>p {
    font-size:11px
  }
  .species-strip>div>a {
    font-size:7px;
    gap:8px
  }
  .section {
    padding-block:72px
  }
  .section-heading h2 {
    font-size:37px
  }
  .section-heading>.text-link {
    font-size:10px;
    gap:14px
  }
  .featured-stories {
    display:block
  }
  .story-large {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:30px;
    margin-bottom:40px
  }
  .story-large .story-image {
    height:310px
  }
  .story-large .story-copy {
    padding-top:5px
  }
  .story-large h3 {
    font-size:31px
  }
  .stories-side {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .story-small {
    display:block
  }
  .story-small .story-image {
    height:220px
  }
  .story-small .story-copy {
    padding-top:18px
  }
  .story-small .story-meta {
    flex-direction:row;
    gap:16px
  }
  .story-small h3 {
    font-size:24px;
    margin-block:10px
  }
  .climate-inner h2 {
    font-size:49px
  }
  .climate-feature,.climate-inner {
    min-height:570px
  }
  .fact-teasers {
    gap:25px
  }
  .fact-teasers h3 {
    font-size:18px
  }
  .fact-teasers p {
    font-size:11px
  }
  .preview-grid {
    gap:12px
  }
  .preview-photo img {
    height:220px
  }
  .preview-1 img {
    height:260px
  }
  .preview-2 img {
    height:190px
  }
  .preview-3 img {
    height:220px
  }
  .preview-photo>span {
    bottom:12px;
    left:12px;
    right:12px
  }
  .preview-photo b {
    font-size:9px
  }
  .preview-photo .icon {
    width:12px;
    height:12px
  }
  .page-intro h1 {
    font-size:55px
  }
  .intro-count {
    font-size:85px
  }
  .facts-grid {
    grid-template-columns:1fr 1fr
  }
  .gallery-grid {
    grid-template-columns:1fr 1fr;
    gap:35px 23px
  }
  .gallery-item .gallery-image img,.gallery-item:nth-child(3n+2) .gallery-image img,.gallery-item:nth-child(3n) .gallery-image img {
    height:285px
  }
  .gallery-item:nth-child(even) .gallery-image img {
    height:340px
  }
  .article-catalog {
    gap:45px 27px
  }
  .article-catalog .story-image {
    height:270px
  }
  .article-catalog h3 {
    font-size:25px
  }
  .article-catalog .story-card:nth-child(even) {
    margin-top:45px
  }
  .source-layout {
    display:block
  }
  .source-aside {
    position:static;
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    margin-bottom:40px
  }
  .source-aside>.eyebrow {
    width:100%;
    margin-bottom:0
  }
  .source-aside>a {
    font-size:10px;
    padding-block:8px
  }
  .source-aside .source-date {
    margin:0;
    width:100%;
    font-size:8px
  }
  .source-section>h2 {
    font-size:28px
  }
  .photo-source {
    grid-template-columns:120px minmax(0,1fr) auto
  }
  .photo-source-image img {
    width:120px;
    height:90px
  }
  .photo-source>.text-link {
    grid-column:auto;
    margin-top:0
  }
  .article-layout {
    display:block;
    margin-top:45px
  }
  .article-toc {
    position:static;
    border-bottom:1px solid var(--line);
    padding-bottom:25px;
    margin-bottom:35px
  }
  .article-toc nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 25px
  }
  .toc-back {
    display:none
  }
  .article-body {
    max-width:740px;
    margin-inline:auto
  }
  .article-heading h1 {
    font-size:58px
  }
  .article-subtitle {
    font-size:18px
  }
  .article-cover img {
    aspect-ratio:1.7
  }
  .article-body>p.article-lead {
    font-size:18px
  }
  .related-grid .story-image {
    height:230px
  }
  .related-grid h3 {
    font-size:24px
  }
  .footer-top {
    gap:22px;
    flex-wrap:wrap
  }
  .footer-top>p {
    font-size:12px
  }
  .footer-top>.text-link {
    font-size:9px;
    gap:10px
  }
  .footer-bottom {
    flex-wrap:wrap
  }
  .footer-bottom>span:last-child {
    display:none
  }
}
@media(max-width:600px) {
  :root {
    --header:70px
  }
  html {
    scroll-padding-top:95px
  }
  .container {
    width:calc(100% - 40px)
  }
  .header-inner {
    min-height:var(--header);
    height:auto;
    padding:13px 20px;
    flex-wrap:wrap;
    gap:0
  }
  .brand>span {
    font-size:23px;
    letter-spacing:3px
  }
  .brand-mark {
    width:23px;
    height:33px
  }
  .brand {
    gap:9px
  }
  .menu-toggle:not([hidden]) {
    display:flex
  }
  .main-nav {
    margin-left:0;
    flex-basis:100%;
    display:flex;
    gap:25px;
    border-top:1px solid var(--line);
    padding-top:17px;
    margin-top:17px;
    min-height:40px
  }
  .main-nav a {
    font-size:11px;
    padding-bottom:10px
  }
  .js .main-nav:not(.is-open) {
    display:none
  }
  .hero {
    min-height:700px;
    margin:10px 10px 0
  }
  .hero-image {
    inset:0 0 auto;
    height:470px;
    mask-image:none
  }
  .hero-image img {
    object-position:50% 50%;
    object-fit:cover;
    filter:saturate(.65) brightness(.8)
  }
  .hero:after {
    background:linear-gradient(0deg,#101617 0%,#101617 37%,#101617b5 50%,#10161710 72%,#10161744 100%)
  }
  .hero-topline {
    padding:18px 17px;
    font-size:6px;
    line-height:1.8;
    letter-spacing:1px;
    align-items:flex-start
  }
  .hero-topline>span:first-child {
    max-width:135px
  }
  .hero-topline>span:last-child {
    text-align:right
  }
  .hero-topline b {
    font-size:6px
  }
  .hero-content {
    padding:255px 20px 100px
  }
  .hero-content>.eyebrow {
    font-size:6.5px;
    letter-spacing:1.4px;
    gap:8px
  }
  .hero-content>.eyebrow .yellow-rule {
    width:19px
  }
  .hero h1 {
    font-size:clamp(56px,15vw,84px);
    letter-spacing:-3.8px;
    line-height:1.04;
    margin-block:21px
  }
  .hero-description {
    font-size:11px;
    line-height:1.9;
    max-width:290px
  }
  .hero-description br.desktop-break {
    display:none
  }
  .hero .button {
    min-height:49px;
    margin-top:24px;
    font-size:10px;
    padding:14px 19px;
    min-width:225px
  }
  .hero-bottom {
    left:20px;
    right:20px;
    bottom:20px;
    gap:12px
  }
  .scroll-prompt {
    font-size:6px;
    gap:9px;
    letter-spacing:1px
  }
  .scroll-circle {
    height:29px;
    width:29px
  }
  .scroll-circle .icon {
    width:13px;
    height:13px
  }
  .hero-caption {
    font-size:6px;
    max-width:150px
  }
  .hero-caption>span:first-child {
    font-size:6px;
    letter-spacing:1px
  }
  .hero-caption .photo-credit {
    font-size:6px
  }
  .species-strip {
    grid-template-columns:1fr 1fr;
    padding-top:28px;
    padding-bottom:25px;
    gap:0
  }
  .species-name {
    grid-column:1/-1;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:10px;
    padding-bottom:25px;
    margin-bottom:25px;
    border-bottom:1px solid var(--line)
  }
  .species-name .tiny-label {
    width:100%;
    font-size:7px
  }
  .species-name p {
    font-size:20px;
    margin:2px 0 0
  }
  .species-name i {
    font-size:11px
  }
  .species-strip>div:nth-child(2) {
    border-left:0;
    padding-left:0
  }
  .species-strip>div:nth-child(3) {
    padding-left:25px
  }
  .species-strip strong {
    font-size:42px
  }
  .species-strip>div>a {
    font-size:7px
  }
  .section {
    padding-block:58px
  }
  .section-heading {
    align-items:flex-start;
    gap:24px;
    flex-direction:column;
    margin-bottom:30px
  }
  .section-heading h2 {
    font-size:33px;
    letter-spacing:-1.3px;
    line-height:1.22;
    margin-top:15px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.6px;
    gap:10px
  }
  .section-heading>.text-link {
    font-size:10px;
    gap:16px;
    align-self:flex-end;
    margin-top:-1px;
    margin-bottom:0
  }
  .featured-stories .story-large {
    display:block;
    margin-bottom:32px
  }
  .story-large .story-image {
    height:300px
  }
  .story-large .story-copy {
    padding-top:18px
  }
  .story-large h3 {
    font-size:28px;
    margin-block:11px
  }
  .story-card p {
    font-size:11px;
    line-height:1.9
  }
  .stories-side {
    display:flex;
    gap:30px;
    flex-direction:column
  }
  .story-small {
    display:grid;
    grid-template-columns:.8fr 1fr;
    gap:20px
  }
  .story-small .story-image {
    height:210px
  }
  .story-small .story-copy {
    padding-top:0
  }
  .story-small .story-meta {
    flex-direction:column;
    gap:4px;
    font-size:7px
  }
  .story-small h3 {
    font-size:21px;
    line-height:1.3;
    margin-block:12px
  }
  .story-small p {
    font-size:10px;
    line-height:1.8
  }
  .round-arrow {
    width:30px;
    height:30px;
    bottom:12px;
    right:12px
  }
  .round-arrow .icon {
    width:14px;
    height:14px
  }
  .climate-feature,.climate-inner {
    min-height:580px
  }
  .climate-inner {
    padding-top:55px;
    padding-bottom:90px
  }
  .climate-image img {
    object-position:58% center
  }
  .climate-feature:after {
    background:linear-gradient(90deg,#0c161be8,#0d1c2477),linear-gradient(0deg,#0f1b2388,transparent 50%)
  }
  .climate-inner h2 {
    font-size:42px;
    line-height:1.2;
    letter-spacing:-1.8px;
    margin-block:25px
  }
  .climate-inner>p:not(.eyebrow) {
    font-size:11px
  }
  .climate-inner .button {
    font-size:10px;
    min-height:50px;
    gap:23px
  }
  .climate-credit {
    bottom:22px
  }
  .climate-credit .photo-credit {
    font-size:7px
  }
  .fact-teasers {
    grid-template-columns:1fr;
    gap:30px
  }
  .fact-teasers article {
    padding-top:20px
  }
  .fact-symbol {
    font-size:65px;
    right:7px;
    top:22px
  }
  .fact-teasers h3 {
    font-size:21px;
    margin-bottom:13px
  }
  .fact-teasers p {
    font-size:12px;
    max-width:290px
  }
  .fact-teasers a {
    margin-top:18px;
    font-size:10px
  }
  .preview-grid {
    grid-template-columns:1fr 1fr;
    gap:14px
  }
  .preview-photo,.preview-1,.preview-3 {
    margin-top:0
  }
  .preview-photo img,.preview-1 img,.preview-2 img,.preview-3 img {
    height:230px
  }
  .preview-1 {
    margin-top:25px
  }
  .preview-2 {
    margin-top:-25px
  }
  .preview-photo b {
    font-size:9px
  }
  .preview-photo>span {
    left:10px;
    right:10px;
    bottom:12px;
    gap:5px
  }
  .gallery-note {
    font-size:7px;
    line-height:1.9;
    gap:20px
  }
  .gallery-note>span:last-child {
    max-width:130px;
    text-align:right
  }
  .closing-note {
    padding-block:60px
  }
  .closing-note p {
    font-size:36px;
    letter-spacing:-1px
  }
  .closing-note>a {
    font-size:9px;
    gap:10px;
    text-align:center;
    max-width:260px;
    line-height:1.9
  }
  .north-symbol {
    font-size:32px
  }
  .page-intro {
    padding-top:24px;
    padding-bottom:30px
  }
  .page-breadcrumb {
    font-size:7px;
    gap:9px;
    letter-spacing:1px
  }
  .intro-heading {
    margin-top:40px;
    gap:10px;
    align-items:flex-start
  }
  .page-intro h1 {
    font-size:40px;
    letter-spacing:-1.8px;
    max-width:300px
  }
  .intro-count {
    font-size:53px;
    letter-spacing:-3px;
    margin-top:4px
  }
  .page-intro>p {
    font-size:12px;
    line-height:1.9;
    margin-top:20px
  }
  .article-catalog {
    display:block;
    padding-bottom:45px
  }
  .article-catalog .story-card,.article-catalog .story-card:nth-child(even) {
    margin-top:0;
    margin-bottom:35px
  }
  .article-catalog .story-image {
    height:270px
  }
  .article-catalog h3 {
    font-size:26px
  }
  .story-meta {
    font-size:7px;
    gap:15px
  }
  .editorial-note {
    padding-block:30px 45px;
    gap:18px
  }
  .editorial-note>p {
    font-size:11px
  }
  .editorial-note .text-link {
    font-size:10px
  }
  .filter-bar {
    gap:8px;
    padding-top:20px
  }
  .filter-button {
    font-size:10px;
    min-height:38px;
    padding:9px 14px
  }
  .filter-summary {
    font-size:9px;
    margin-block:22px 18px
  }
  .facts-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .fact-card {
    min-height:265px;
    padding:25px
  }
  .fact-card h2 {
    font-size:22px;
    margin-top:24px
  }
  .fact-card>p {
    font-size:12px
  }
  .fact-card>a {
    font-size:8px
  }
  .filter-section {
    padding-bottom:45px
  }
  .reading-banner {
    padding-block:35px 50px
  }
  .reading-banner h2 {
    font-size:28px;
    line-height:1.3;
    max-width:280px
  }
  .reading-banner .button {
    font-size:11px
  }
  .gallery-grid {
    display:block
  }
  .gallery-item {
    margin-bottom:35px
  }
  .gallery-item .gallery-image img,.gallery-item:nth-child(3n+2) .gallery-image img,.gallery-item:nth-child(3n) .gallery-image img,.gallery-item:nth-child(even) .gallery-image img {
    height:auto;
    max-height:470px;
    object-fit:cover
  }
  .gallery-item h2 {
    font-size:21px
  }
  .gallery-item figcaption p {
    font-size:11px
  }
  .gallery-disclaimer {
    font-size:10px;
    padding-bottom:45px
  }
  .image-viewer {
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    border:0;
    padding:14px
  }
  .viewer-toolbar {
    gap:10px
  }
  .viewer-toolbar .eyebrow {
    font-size:7px;
    letter-spacing:1px
  }
  .viewer-stage {
    height:calc(100dvh - 270px);
    margin-top:15px;
    min-height:150px
  }
  .viewer-prev {
    left:0
  }
  .viewer-next {
    right:0
  }
  .viewer-prev,.viewer-next {
    min-width:38px;
    min-height:38px;
    padding:7px
  }
  .viewer-description {
    padding-top:20px
  }
  .viewer-description h2 {
    font-size:22px
  }
  .viewer-description p {
    font-size:11px
  }
  .viewer-hint {
    text-align:center;
    margin-top:18px
  }
  .source-layout {
    padding-top:5px;
    padding-bottom:35px
  }
  .source-aside {
    gap:12px 18px;
    margin-bottom:35px
  }
  .source-aside>a {
    font-size:9px
  }
  .source-aside .source-date {
    font-size:8px;
    margin-top:5px
  }
  .source-section>h2 {
    font-size:25px;
    padding-bottom:22px;
    letter-spacing:-.6px
  }
  .source-row {
    grid-template-columns:23px minmax(0,1fr);
    gap:10px;
    padding-block:23px
  }
  .source-row .eyebrow {
    font-size:7px;
    letter-spacing:.7px
  }
  .source-row h3 {
    font-size:15px;
    line-height:1.6
  }
  .source-row div>p:last-child {
    font-size:10px
  }
  .source-index {
    font-size:9px
  }
  .source-section {
    margin-bottom:45px
  }
  .source-intro {
    font-size:11px
  }
  .photo-source {
    grid-template-columns:86px minmax(0,1fr);
    gap:15px
  }
  .photo-source-image img {
    width:86px;
    height:100px
  }
  .photo-source h3 {
    font-size:15px
  }
  .photo-source p {
    font-size:9px
  }
  .photo-source>.text-link {
    grid-column:2;
    font-size:8px;
    margin-top:-8px
  }
  .license-label {
    font-size:6px
  }
  .about-project>p:not(.eyebrow) {
    font-size:12px
  }
  .about-project .button {
    font-size:10px
  }
  .article-header {
    padding-top:24px
  }
  .article-heading {
    margin-top:40px;
    margin-bottom:28px
  }
  .article-heading h1 {
    font-size:41px;
    letter-spacing:-1.7px;
    line-height:1.17;
    margin-block:19px
  }
  .article-subtitle {
    font-size:16px;
    line-height:1.85
  }
  .article-byline {
    font-size:7px;
    gap:14px;
    margin-top:25px
  }
  .article-cover {
    width:100%
  }
  .article-cover img {
    aspect-ratio:1.25;
    object-position:center
  }
  .article-cover figcaption {
    padding:12px 20px 0;
    font-size:8px
  }
  .article-cover .photo-credit {
    font-size:8px;
    margin-left:0
  }
  .article-layout {
    margin-top:35px
  }
  .article-toc {
    padding-bottom:20px;
    margin-bottom:27px
  }
  .article-toc nav {
    display:flex;
    gap:0
  }
  .article-toc nav>a {
    font-size:10px;
    padding-block:9px
  }
  .article-body>p.article-lead {
    font-size:17px;
    line-height:1.9;
    margin-bottom:35px
  }
  .article-section h2 {
    font-size:26px;
    margin-bottom:20px;
    letter-spacing:-.6px;
    line-height:1.3
  }
  .article-section>p {
    font-size:14px;
    line-height:1.95;
    margin-bottom:19px
  }
  .article-section {
    margin-bottom:34px
  }
  .section-refs {
    font-size:8px
  }
  .article-callout {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding-block:28px;
    margin-block:35px
  }
  .article-callout strong {
    font-size:43px;
    letter-spacing:-1.7px
  }
  .article-callout p {
    font-size:12px
  }
  .article-figure {
    margin-block:35px
  }
  .article-figure figcaption {
    font-size:8px
  }
  .article-sources li {
    font-size:9px
  }
  .article-sources>.eyebrow {
    font-size:8px
  }
  .related-stories {
    margin-top:45px;
    padding-top:40px
  }
  .related-stories .section-heading h2 {
    font-size:31px
  }
  .related-grid {
    display:block
  }
  .related-grid .story-card {
    margin-bottom:30px
  }
  .related-grid .story-image {
    height:260px
  }
  .related-grid h3 {
    font-size:25px
  }
  .site-footer {
    padding-top:32px
  }
  .footer-top {
    gap:20px;
    padding-bottom:25px
  }
  .footer-top .brand>span {
    font-size:22px
  }
  .footer-top>p {
    font-size:10px;
    max-width:140px;
    line-height:1.8;
    margin-left:auto
  }
  .footer-top>.text-link {
    margin-left:0;
    width:100%;
    font-size:10px;
    justify-content:space-between
  }
  .footer-bottom {
    gap:18px;
    padding-top:20px;
    font-size:7px
  }
  .footer-bottom>span:first-child {
    width:100%
  }
  .footer-bottom nav {
    font-size:9px;
    gap:25px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}