/* sarahsources. — static rebuild of the Cargo site */
:root{
  --text: rgba(0,0,0,.85);
  --pad: 1.8rem;      /* page margin */
  --gap: 2rem;        /* space between gallery images */
}
*{box-sizing:border-box}
/* Everything scales with the window, like the Cargo site did */
html{font-size:0.9vw}
@media (max-width:768px){html{font-size:max(7.5px,1.44vw)}}
body{
  margin:0;background:#fff;color:var(--text);
  /* Cargo's "Neue Haas Grotesk" is licensed to Cargo only; Helvetica Neue is its closest relative */
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:active{opacity:.7}
img{display:block;max-width:100%;height:auto}

/* Fixed header: nav + logo float above the pictures */
.site-header{position:fixed;inset:0 0 auto 0;z-index:10;pointer-events:none}
.nav{display:flex;justify-content:space-between;padding:2.5rem;font-size:1.5rem;line-height:1.2;letter-spacing:.05em}
.nav a{pointer-events:auto}
.nav a:hover{opacity:.6}
.logo{display:block;width:55%;margin:1rem auto 0;pointer-events:auto}
.logo img{width:100%}

/* Page content */
main{padding:21rem var(--pad) 0}
.tagline{
  margin:0 0 4rem;text-align:center;
  font-weight:400;font-size:1.6rem;line-height:1.1;letter-spacing:.075em;color:var(--text);
}
.tagline a{color:#000}
.tagline a:hover{opacity:.6}

.gallery{display:grid;gap:var(--gap);align-items:start}
.gallery.cols-2{grid-template-columns:repeat(2,1fr)}
.gallery.cols-1{grid-template-columns:1fr}
.gallery figure{margin:0}
.gallery img{width:100%}

.site-footer{display:flex;justify-content:center;padding:8rem var(--pad) 6rem}
.site-footer img{width:14.6%;min-width:110px}

@media (max-width:768px){
  :root{--pad:.6rem;--gap:1rem}
  .nav{padding:.8rem}
  .logo{width:88%;margin-top:4rem}
  main{padding-top:19rem}
  .site-footer img{width:23%}
}