/* responsive.css - tablet and phone breakpoints (loaded last) */

@media (max-width:820px){
  .wrap, .wrap.wide{max-width:100%}
  body{font-size:15px}
  .wrap > section{padding:18px 20px 12px}
}

@media (max-width:600px){
  body{font-size:13px;line-height:1.62}
  .wrap{padding:0 26px}
  .hero,.lead,.algos,.wrap > p{padding-left:4px;padding-right:4px}
  .wrap > section{padding:22px 19px 16px;margin:26px 0;box-shadow:3px 3px 0 rgba(24,21,17,.07)}
  .wrap > section:hover{transform:none;box-shadow:3px 3px 0 rgba(24,21,17,.07)}
  p{margin:.7em 0}
  h1{font-size:20px}
  .sub{font-size:12.5px}
  h2.h{font-size:14px;margin-bottom:6px;padding-bottom:6px}
  .lead{font-size:14px;line-height:1.5;margin:14px 0 4px}
  .small,.note,.proof{font-size:12px}
  .block{padding:11px 12px;margin:13px 0}
  ul{padding-left:20px}
  .cap-full{display:none}
  .cap-mini{display:inline}
  .hero{margin:18px 0 4px;padding:6px 0 20px}
  .hero-inner{gap:16px}
  .eyebrow{font-size:12px}
  .hero-title{font-size:25px;line-height:1.22}
  .hero-sub{font-size:14px}
  .herofig{margin:6px auto 4px}
  .hero .cta{gap:8px;margin-top:10px}
  .btn{font-size:12.5px;padding:10px 13px}
  header h1{padding-right:40px}

  /* top nav collapses; the header hamburger opens a side drawer */
  .navtoggle{display:flex;align-items:center;justify-content:center;right:18px}
  header h1,header .sub{padding-right:56px}
  nav.tabs2{position:static;background:transparent;border-bottom:none;height:0}
  nav.tabs2 .wrap{display:block;height:0;min-height:0;padding:0;overflow:visible}
  nav.tabs2 .navlinks{position:fixed;top:0;right:0;height:100vh;width:78%;max-width:300px;
    flex-direction:column;align-items:stretch;background:#101216;color:#f3f4f6;
    padding:58px 0 0;transform:translateX(101%);transition:transform .3s ease;
    border-left:1px solid #2c333d;box-shadow:-10px 0 30px rgba(0,0,0,.34);z-index:90}
  body.nav-open nav.tabs2 .navlinks{transform:translateX(0)}
  nav.tabs2 .navlinks a{color:#e8eaee;border-right:none;border-bottom:1px solid #242a33;
    padding:15px 24px;margin:0;background:transparent}
  nav.tabs2 .navlinks a:first-child{padding-left:24px;margin-left:0;border-right:none}
  nav.tabs2 .navlinks a:hover{background:#1c2230}
  nav.tabs2 .navlinks a.here{background:#1c2230;color:#fff}
  .navclose{display:block;position:absolute;top:8px;right:14px;all:unset;cursor:pointer;
    color:#f3f4f6;font-size:30px;line-height:1;padding:4px 10px}
  .navbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:85;
    opacity:0;visibility:hidden;transition:opacity .25s ease}
  body.nav-open .navbackdrop{opacity:1;visibility:visible}

  .twofig{gap:8px;margin:12px 0;flex-wrap:nowrap}
  .twofig figure{flex:1 1 0;min-width:0;max-width:none;margin:0;padding:6px}
  .twofig figcaption{font-size:11px}
  .algo-fig{padding:9px}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
  .gallery figure{max-width:none;margin:0;padding:5px}
  .gallery figcaption{font-size:10.5px;margin-top:4px}
  .nextlinks{grid-template-columns:1fr;gap:10px}
  .curve-legend{grid-template-columns:1fr 1fr;font-size:11px}
  .tasks button{font-size:11px;padding:5px 8px}
  .killrow{grid-template-columns:88px 1fr 44px}
  .transport{flex-wrap:wrap}
  table{font-size:11.5px}
  footer{font-size:12px}
}

@media (max-width:430px){
  body{font-size:12.5px;line-height:1.6}
  .wrap{padding:0 22px}
  .wrap > section{padding:20px 16px 14px;margin:22px 0}
  h1{font-size:18px}
  h2.h{font-size:13px}
  .lead{font-size:13px}
  .algo-tab{padding:6px 12px;font-size:12px}
  .curve-legend{grid-template-columns:1fr}
  .author{gap:10px}
  .author img{width:48px;height:48px}
}