.page-nav,.next-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.page-nav a,.next-nav a{font:500 10px "IBM Plex Mono";letter-spacing:.13em;text-decoration:none;text-transform:uppercase}
.page-nav a:hover,.page-nav a:focus-visible,.next-nav a:hover,.next-nav a:focus-visible,.tool-nav a:hover,.tool-nav a:focus-visible{color:#e3a371}
.page-nav a:focus-visible,.next-nav a:focus-visible,.tool-nav a:focus-visible,.wordmark:focus-visible,.page-footer a:focus-visible,.next-footer a:focus-visible,.tool-footer a:focus-visible{outline:2px solid #e77832;outline-offset:5px}

.blueprint-example{grid-column:1/-1;width:min(100%,780px);margin:26px auto 0;border:1px solid #4c6472;background:#07131c;box-shadow:0 24px 70px #02080c80}
.blueprint-example a{display:block;padding:12px;text-decoration:none}
.blueprint-example img{display:block;width:100%;height:auto;background:#07131c}
.blueprint-example figcaption{display:flex;justify-content:space-between;gap:24px;padding:17px 20px;border-top:1px solid #4c6472;color:#a8b6bc;font:500 11px/1.5 "IBM Plex Mono";letter-spacing:.11em;text-transform:uppercase}
.blueprint-example figcaption strong{color:#e3a371;font-weight:500}
.blueprint-example a:focus-visible{outline:2px solid #e77832;outline-offset:5px}

@media(max-width:900px){
  .tool-nav a:first-child,.tool-nav a:nth-child(2){display:none}
}

@media(max-width:800px){
  .page-nav a:nth-child(2),.page-nav a:nth-child(4),.next-nav a:nth-child(2),.next-nav a:nth-child(4){display:none}
}

@media(max-width:650px){
  .page-nav,.next-nav{gap:15px}
  .page-nav a,.next-nav a{font-size:8px}
  .page-nav a:first-child,.next-nav a:first-child{display:none}
  .blueprint-example{margin-top:12px}
  .blueprint-example a{padding:7px}
  .blueprint-example figcaption{display:block;padding:14px 15px;font-size:10px}
  .blueprint-example figcaption span{display:block;margin-top:6px}
}