:root {
  --paper: #fbfaf7;
  --editorial-max: 1680px;
}

html,
body,
main {
  background: var(--paper);
}

.site-header {
  position: relative;
  width: 100%;
  min-height: 92px;
  margin-inline: 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--editorial-max)) / 2));
  border-bottom: 0;
  background: var(--paper);
}

.site-header::before {
  position: absolute;
  right: max(var(--gutter), calc((100vw - var(--editorial-max)) / 2));
  bottom: 0;
  left: max(var(--gutter), calc((100vw - var(--editorial-max)) / 2));
  height: 1px;
  background: rgba(17,16,14,.14);
  content: "";
}

.wordmark {
  font-size: clamp(34px, 2.55vw, 46px);
}

main {
  min-height: auto;
  padding: clamp(72px, 8vw, 138px) max(var(--gutter), calc((100vw - var(--editorial-max)) / 2)) clamp(100px, 11vw, 180px);
}

.contact-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 34px);
  max-width: var(--editorial-max);
  align-items: start;
}

.contact-intro {
  position: static;
  display: grid;
  grid-column: 1 / 6;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(14px, 1.7vw, 28px);
}

.contact-index,
.contact-intro h1,
.intro-copy {
  grid-column: 1 / -1;
}

.contact-index {
  margin-bottom: clamp(38px, 4vw, 68px);
}

.contact-index::before {
  border-radius: 0;
  transform: rotate(45deg);
}

.contact-intro h1 {
  display: block;
  max-width: 5ch;
  font-size: clamp(84px, 8.4vw, 148px);
  line-height: .88;
  letter-spacing: -.055em;
}

.contact-intro h1 span {
  display: block;
}

.contact-intro h1 span:last-child {
  margin-left: .35em;
}

.intro-copy {
  max-width: 34ch;
  margin-top: clamp(38px, 4vw, 66px);
}

.contact-still {
  grid-column: 2 / 6;
  margin: clamp(68px, 7vw, 112px) 0 0;
}

.contact-still img {
  display: block;
  width: 100%;
  height: clamp(260px, 27vw, 420px);
  object-fit: cover;
  object-position: center 78%;
  filter: saturate(.84) contrast(.97);
}

.contact-still figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.contact-panel,
.success-panel {
  grid-column: 7 / 13;
  padding-top: 0;
}

.form-kicker {
  margin-bottom: clamp(62px, 7vw, 108px);
}

form {
  gap: clamp(42px, 5vw, 68px);
}

input,
textarea {
  font-size: clamp(30px, 2.7vw, 46px);
}

.site-footer {
  position: relative;
  z-index: 2;
  min-height: 290px;
  margin-inline: 0;
  padding: 58px max(var(--gutter), calc((100vw - var(--editorial-max)) / 2));
  border-top: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: var(--ink);
}

.footer-wordmark {
  font-size: clamp(44px, 5vw, 76px);
}

.footer-note {
  color: rgba(255,255,255,.62);
  text-align: center;
}

.footer-link {
  color: #fff;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 92px;
  }

  .contact-intro,
  .contact-panel,
  .success-panel {
    grid-column: 1 / -1;
  }

  .contact-intro {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .contact-index,
  .contact-intro h1 {
    grid-column: 1 / -1;
  }

  .intro-copy {
    grid-column: 1 / 4;
  }

  .contact-still {
    grid-column: 4 / 7;
    margin-top: 42px;
  }
}

@media (max-width: 560px) {
  .site-header {
    min-height: 74px;
    padding-inline: 20px;
  }

  .site-header::before {
    right: 20px;
    left: 20px;
  }

  .wordmark {
    font-size: 34px;
  }

  main {
    padding: 54px 20px 94px;
  }

  .contact-layout {
    display: block;
  }

  .contact-intro {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .contact-index,
  .contact-intro h1,
  .intro-copy {
    grid-column: 1 / -1;
  }

  .contact-index {
    margin-bottom: 34px;
  }

  .contact-intro h1 {
    font-size: clamp(72px, 23vw, 98px);
    line-height: .9;
  }

  .intro-copy {
    margin-top: 34px;
  }

  .contact-still {
    grid-column: 2 / 5;
    margin-top: 58px;
  }

  .contact-still img {
    height: 250px;
  }

  .contact-panel,
  .success-panel {
    margin-top: 92px;
  }

  .form-kicker {
    margin-bottom: 50px;
  }

  input,
  textarea {
    font-size: 28px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    min-height: 340px;
    gap: 26px;
    align-items: start;
    padding: 58px 20px 54px;
  }

  .footer-wordmark {
    font-size: clamp(50px, 15vw, 68px);
  }

  .footer-note,
  .footer-link {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }
}