* { box-sizing: border-box; }

html { font-size: clamp(12px, 0.96vw, 20px); }

body {
  margin: 0;
  background: #0b0b0b;
  color: #fff;
  font: 1.1rem/1.3 "DM Mono", monospace;
}

a { color: inherit; text-decoration: none; }
a:active, summary:active { opacity: .7; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
p + p { margin-top: 1.3em; }

.page {
  max-width: 66%;
  margin: 3rem auto;
  padding: 2rem;
  border: .1rem solid rgba(255, 255, 255, .25);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem 1rem;
  align-items: start;
}
.page > * { grid-column: 1 / -1; margin: 0; }
.page > .lead { grid-column: 1; grid-row: 2; }
.page > nav { grid-column: 2; grid-row: 2; }

h1 { font: bold 5.2rem/.85 "Helvetica Neue", Helvetica, Arial, sans-serif; }

h2, nav { font: 2rem/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
h2 { font-weight: normal; }

nav { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
nav [aria-current] { color: rgba(255, 255, 255, .4); }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] summary { color: rgba(255, 255, 255, .4); }
details a { display: block; color: rgba(255, 255, 255, .75); }

.text a, figcaption a { text-decoration: underline; text-underline-offset: .15em; }

.about { display: grid; grid-template-columns: 5fr 7fr; gap: 1rem; }

.clients { list-style: none; padding: 0; margin: 1.3em 0 0; }
.text > .clients:first-child { margin-top: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
}
.grid figure { margin: 0; }
.zoom { cursor: zoom-in; }
figcaption { margin-top: .5em; color: rgba(255, 255, 255, .75); }

dialog {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 3rem;
  border: 0;
  outline: 0;
  background: #000;
  cursor: zoom-out;
}
dialog img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 700px) {
  html { font-size: 14px; }
  .page {
    max-width: none;
    margin: 0;
    padding: 1rem;
    border: 0;
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
  .page > .lead, .page > nav { grid-column: 1; grid-row: auto; }
  h1 { font-size: 3.4rem; }
  nav { align-items: flex-start; text-align: left; }
  .about { grid-template-columns: 1fr; row-gap: 1.3em; }
  .grid { grid-template-columns: 1fr 1fr; }
  dialog { padding: 10px; }
}