/**
 * Rythme, navigation et apparition des sections.
 */

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

.home-hero{padding:12px 0 0}
.section{
  padding:clamp(64px,7.5vw,96px) 0;
  scroll-margin-top:88px;
}
.home-hero{scroll-margin-top:88px}
.section-title-row{
  margin-bottom:clamp(24px,3.6vw,40px);
  gap:clamp(20px,3vw,48px);
}
.section-head{margin-bottom:clamp(24px,3.4vw,40px);gap:clamp(16px,3vw,36px)}
.page-hero{padding:clamp(56px,8vw,92px) 0 clamp(40px,5vw,56px)}
.site-footer{padding:clamp(52px,7vw,80px) 0 32px}
.desk,.latest-grid,.atlas,.margin-notes{gap:12px}
.footer-grid{gap:clamp(28px,4vw,48px)}
.footer-bottom{margin-top:clamp(32px,4vw,48px);padding-top:22px}

.site-header{
  transition:background .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.site-header.is-scrolled{
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 6%,transparent);
}
.desktop-nav a{
  transition:background .28s ease,color .28s ease;
}
.icon-button{
  transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s ease;
}
.site-header .icon-button:hover{transform:translateY(-1px)}

.story-card,
.note-card,
.mini-card,
.atlas-row,
.related-card,
.nextprev-card,
.search-result,
a.category-lead-story .category-lead-copy,
a.category-lead-story .category-lead-art{
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,background .3s ease,border-color .35s ease;
}
.story-card:hover,
.note-card:hover{
  transform:translateY(-4px);
}
.footer-col a{
  transition:color .25s ease,padding-left .25s ease;
}
.footer-col a:hover{padding-left:4px}

html.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
html.js .reveal.is-in{
  opacity:1;
  transform:none;
}
html.js .reveal-child{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
html.js .reveal.is-in .reveal-child{
  opacity:1;
  transform:none;
}
html.js .reveal.is-in .reveal-child:nth-child(2){transition-delay:.06s}
html.js .reveal.is-in .reveal-child:nth-child(3){transition-delay:.12s}
html.js .reveal.is-in .reveal-child:nth-child(4){transition-delay:.18s}
html.js .reveal.is-in .reveal-child:nth-child(5){transition-delay:.24s}

html[data-motion="reduced"] .reveal,
html[data-motion="reduced"] .reveal-child,
body.reduce-motion .reveal,
body.reduce-motion .reveal-child{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
@media (prefers-reduced-motion: reduce){
  html.js .reveal,
  html.js .reveal-child{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media (max-width:820px){
  .section{padding:clamp(56px,12vw,80px) 0}
  html{scroll-padding-top:72px}
  .section,.home-hero{scroll-margin-top:72px}
}