/* Site-wide tweaks layered over the page styles converted from the design canvas. */
html{-webkit-text-size-adjust:100%}
img,video{max-width:100%}
@media (max-width: 1100px){
  /* Landing hero: stack the tagline under the name instead of overlapping it. */
  #top{height:auto!important;padding-top:520px}
  #about{position:relative!important;padding-bottom:40px!important}
  #about p{position:static!important;width:auto!important;max-width:420px;min-width:0!important;margin-top:24px!important}
}
@media (max-width: 700px){
  #top{padding-top:470px}
  /* Project grids: single column on phones. */
  section[aria-label="Project images"]{column-count:1!important}
  section[aria-label="Project images"] > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .tile{flex-basis:100%!important;height:420px!important}
  .tile .cap{opacity:1!important;background:linear-gradient(to top,rgba(248,245,238,.92),rgba(248,245,238,0) 60%)!important;justify-content:flex-end!important}
}