:root {
  --color-absolute-zero: #000000;
  --color-graphite-static: #0d0d0d;
  --color-fog-canvas: #c9c9c9;
  --font-heading: "Cabinet Grotesk", sans-serif;
  --font-body: "Switzer", sans-serif;
  --pad-x: clamp(20px, 3.4028vw, 65px);
  --section-gap: 65px;
  --element-gap: 20px;
  --wide-gap: clamp(26px, 4.375vw, 65px);
  --statement-gap: clamp(49px, 9.8611vw, 142px);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-absolute-zero);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-absolute-zero);
  color: var(--color-fog-canvas);
  font-family: var(--font-body);
  font-weight: 215;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  border-radius: 0;
}

.site-header {
  width: 100%;
  padding: 49px var(--pad-x) 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-absolute-zero);
}

.brand,
.site-nav a,
.footer-brand {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-fog-canvas);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.8vw, 26px);
}

main {
  width: 100%;
  padding: 64px var(--pad-x) 0 var(--pad-x);
  background: var(--color-absolute-zero);
}

.hero {
  display: grid;
  grid-template-columns: minmax(300px, 31.45%) minmax(0, 1fr);
  gap: var(--wide-gap);
  align-items: end;
}

.hero-copy {
  max-width: 422px;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-fog-canvas);
}

p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 215;
  letter-spacing: 0;
  color: var(--color-fog-canvas);
}

.hero-copy p {
  margin-top: var(--element-gap);
}

.outline-link {
  width: 190px;
  height: 53px;
  margin-top: var(--element-gap);
  border: 1px solid var(--color-fog-canvas);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-fog-canvas);
}

.hero-image {
  width: 100%;
  aspect-ratio: 857 / 482;
  object-fit: cover;
}

.gallery {
  margin-top: var(--section-gap);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--element-gap);
}

.gallery-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
}

.gallery-column-right {
  padding-top: var(--section-gap);
}

.work-image {
  width: 100%;
  object-fit: cover;
}

.photo-1 {
  aspect-ratio: 661 / 826;
}

.photo-2,
.photo-4 {
  aspect-ratio: 661 / 441;
}

.photo-3 {
  aspect-ratio: 661 / 496;
}

.photo-5 {
  aspect-ratio: 661 / 826;
}

.photo-6 {
  aspect-ratio: 661 / 529;
}

.statement {
  margin-top: var(--section-gap);
  display: grid;
  grid-template-columns: minmax(0, 41.88%) minmax(0, 46.35%);
  justify-content: start;
  gap: var(--statement-gap);
}

.statement p {
  max-width: 622px;
}

.site-footer {
  margin: var(--section-gap) var(--pad-x) 0 var(--pad-x);
  padding-bottom: 49px;
  background: var(--color-absolute-zero);
}

.footer-rule {
  width: 100%;
  height: 1px;
  background: var(--color-graphite-static);
}

.footer-inner {
  padding-top: 49px;
  display: grid;
  grid-template-columns: minmax(0, 522px) auto;
  justify-content: space-between;
  gap: var(--wide-gap);
}

.email-link {
  display: inline-block;
  margin-top: var(--element-gap);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 215;
  color: var(--color-fog-canvas);
}

.footer-brand {
  align-self: end;
}

@media (max-width: 980px) {
  main {
    padding-top: var(--section-gap);
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
  }

  .hero-copy {
    max-width: 560px;
  }

  .hero-image {
    aspect-ratio: 16 / 9;
  }

  .statement {
    grid-template-columns: 1fr 1fr;
    gap: 49px;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  .gallery {
    display: flex;
    flex-direction: column;
    gap: var(--element-gap);
  }

  .gallery-column {
    display: contents;
  }

  .gallery-column-right {
    padding-top: 0;
  }

  .photo-1 {
    order: 1;
  }

  .photo-4 {
    order: 2;
  }

  .photo-2 {
    order: 3;
  }

  .photo-5 {
    order: 4;
  }

  .photo-3 {
    order: 5;
  }

  .photo-6 {
    order: 6;
  }

  .statement {
    display: flex;
    flex-direction: column;
    gap: var(--element-gap);
  }

  .footer-inner {
    display: flex;
    flex-direction: column;
    gap: 49px;
  }

  .footer-brand {
    align-self: flex-start;
  }
}

@media (max-width: 360px) {
  .site-nav {
    gap: 14px;
  }
}