:root {
  --type-display: Butler, serif;
  --type-editorial: 'Instrument Serif', serif;
  --type-interface: Syne, sans-serif;
  --tone-paper: #f0eee5;
  --tone-ink: #20231e;
  --tone-muted: #64675e;
  --tone-line: #c8c9bc;
  --tone-clay: #b75e3d;
  --tone-note: #e5d8ad;
  --tone-sage: #d9dfd3;
  --tone-moss: #304036;
  --tone-bark: #574b42;
  --tone-stone: #d7d6cd;
  --tone-sea-glass: #c9d6d1;
  --tone-putty: #ded9ce;
  --tone-linen: #ddd9d0;
  --tone-coral: #de906f;
  --tone-porcelain: #faf8f1;
  --tone-footer-line: #667067;
  --tone-footer-text: #bbb9ad;
  --shadow-paper: 0 .75rem 2rem rgb(45 38 27 / 10%);
  --rhythm-1: clamp(.5rem, .4rem + .3vw, .75rem);
  --rhythm-2: clamp(.75rem, .65rem + .4vw, 1.125rem);
  --rhythm-3: clamp(1rem, .8rem + .8vw, 1.75rem);
  --rhythm-4: clamp(1.5rem, 1.15rem + 1.2vw, 2.5rem);
  --rhythm-5: clamp(2rem, 1.4rem + 2vw, 3.75rem);
  --rhythm-6: clamp(3rem, 2rem + 3vw, 5.5rem);
  --rhythm-7: clamp(4rem, 2.8rem + 4vw, 7rem);
  --rhythm-8: clamp(5rem, 3rem + 6vw, 9rem);
  --page-gutter: clamp(1.25rem, 4.4vw, 5.5rem);
  --content-width: 103rem;
  --paper: var(--tone-paper);
  --ink: var(--tone-ink);
  --muted: var(--tone-muted);
  --line: var(--tone-line);
  --rust: var(--tone-clay);
  --note: var(--tone-note);
  --display: var(--type-display);
  --serif: var(--type-editorial);
  --sans: var(--type-interface);
}

.shell {
  width: min(calc(100% - var(--page-gutter) - var(--page-gutter)), var(--content-width));
  margin-inline: auto;
}

.preview-ribbon {
  background: var(--tone-sage);
  border-color: var(--tone-line);
  color: var(--tone-ink);
}

.footer {
  background: var(--tone-moss);
}

.skip-link {
  background: var(--tone-ink);
  color: var(--tone-paper);
}

.hero-photo {
  background: var(--tone-porcelain);
  box-shadow: var(--shadow-paper);
}

.image-wrap {
  background: var(--tone-stone);
}

.placeholder-wish {
  background: var(--tone-putty);
  color: var(--tone-bark);
}

.placeholder-masco {
  background: var(--tone-stone);
  color: var(--tone-moss);
}

.placeholder-photo {
  background: var(--tone-sea-glass);
  color: var(--tone-moss);
}

.placeholder-barber {
  background: var(--tone-linen);
  color: var(--tone-ink);
}

.mabgate-images .process {
  border-color: var(--tone-porcelain);
  box-shadow: var(--shadow-paper);
}

.footer-email {
  border-color: var(--tone-footer-line);
}

.footer-bottom {
  border-color: var(--tone-footer-line);
}

.footer .eyebrow,
.footer-email:hover {
  color: var(--tone-coral);
}

.font-credit {
  color: var(--tone-footer-text);
}

.font-credit a {
  border-color: var(--tone-footer-line);
}

@media (min-width: 901px) {
  .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    column-gap: clamp(2rem, 6.3vw, 8rem);
    padding-block: var(--rhythm-7) var(--rhythm-8);
  }

  .hero-photo {
    transform: rotate(1.4deg) translateY(var(--rhythm-2));
  }

  .section-heading {
    gap: var(--rhythm-5);
  }

  .project-layout {
    grid-template-columns: repeat(16, minmax(0, 1fr));
    column-gap: var(--rhythm-3);
    row-gap: var(--rhythm-8);
    padding-block: var(--rhythm-7) var(--rhythm-8);
  }

  .project-20i {
    grid-column: 1 / 11;
  }

  .project-wish {
    grid-column: 13 / 17;
    margin-top: clamp(8rem, 13vw, 15rem);
  }

  .project-mci {
    grid-column: 6 / 17;
  }

  .project-masco {
    grid-column: 1 / 6;
    margin-top: var(--rhythm-8);
  }

  .project-mabgate {
    grid-column: 1 / 14;
  }

  .project-photo {
    grid-column: 7 / 17;
  }

  .project-mabgate .project-caption {
    max-width: 68%;
  }

  .website-item {
    grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr);
    gap: var(--rhythm-6);
    padding-block: var(--rhythm-5);
  }

  .board-forge .website-image {
    width: 88%;
  }

  .barber-site {
    grid-template-columns: minmax(18rem, .74fr) minmax(0, 1.26fr);
  }

  .barber-site .website-image {
    width: 92%;
    justify-self: end;
  }

  .website-text {
    align-self: end;
    padding-bottom: var(--rhythm-2);
  }
}