/* Neutral editorial frame; each project supplies its own colour. */
:root {
  --ink: #191919;
  --paper: #f6f4f0;
  --plum: #526a6e;
  --rose: #526a6e;
  --blush: #d9e1e0;
  --peach: #ece9e3;
  --line: #2c2c2a;
  --muted: #676764;
  --kirsch: #b84c45;
  --rewind: #2f747a;
}

body {
  background: var(--paper);
}

.project-intro h2,
.about h2,
.contact h2,
.case-notes h3,
.process h3,
.feature-copy h3,
.system-copy h3,
.stamp b,
.project-number,
.metrics strong {
  font-family: "Libre Caslon Display", Georgia, serif;
}

.nav {
  height: 72px;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.monogram {
  border-color: var(--line);
}

.monogram span + span {
  background: var(--ink);
  color: var(--paper);
}

.pill {
  border-color: var(--line);
}

.pill:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.hero {
  min-height: calc(88vh - 72px);
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.hero-meta {
  border-color: rgba(25, 25, 25, .35);
}

.hero h1 {
  line-height: .8;
}

.hero h1 em {
  font-family: "Libre Caslon Display", Georgia, serif;
  color: var(--plum);
}

.hero h1 span {
  color: var(--plum);
}

.stamp {
  width: 218px;
  min-height: 106px;
  aspect-ratio: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.stamp b {
  color: var(--plum);
}

.marquee {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.section-head b {
  display: inline;
  width: auto;
  height: auto;
  margin-left: .35rem;
  border-radius: 0;
  background: transparent;
  color: var(--plum);
}

.case-study:not(.rewind-study) .project-client span,
.case-study:not(.rewind-study) .project-intro h2 em {
  color: var(--kirsch);
}

.rewind-study .project-client span,
.rewind-study .project-intro h2 em {
  color: var(--rewind);
}

.deliverables {
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.deliverables span {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: .7rem 1.1rem .7rem 0;
  margin-right: 1.1rem;
}

.deliverables span:last-child {
  border-right: 0;
}

.email-feature {
  padding: 3rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

.email-feature .feature-copy {
  grid-template-columns: .5fr 1.3fr 1fr;
}

.social-feature {
  padding: clamp(1.5rem, 4vw, 4rem);
  background: #eeeae5;
  border-left: 5px solid var(--kirsch);
}

.social-feature .feature-copy {
  display: grid;
  grid-template-columns: .45fr 1.35fr;
  max-width: 58rem;
}

.social-feature .feature-copy > p:not(.eyebrow) {
  grid-column: 2;
}

.social-feature .feature-copy h3,
.product-content-feature .feature-copy h3 {
  font-family: "Archivo", sans-serif;
  font-size: clamp(2rem, 3.7vw, 3.9rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.05em;
}

.case-notes > div:nth-child(2) {
  background: transparent;
}

.rewind-study {
  border-top-width: 1px;
}

.project-number {
  background: var(--paper);
  color: var(--rewind);
}

.metrics {
  border-right: 0;
  border-left: 0;
}

.metrics strong {
  color: var(--rewind);
}

.rewind-feature {
  background: var(--rewind);
}

.phone-frame,
.published-story,
.story-frame {
  padding: .35rem;
  border-radius: 0;
  box-shadow: none;
}

.phone-frame video,
.published-story img,
.story-frame video {
  border-radius: 0;
}

.product-content-feature {
  padding: 3.5rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

.system-feature {
  padding: clamp(2rem, 5vw, 5rem) 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
}

.system-feature figure {
  padding: .7rem;
  border: 1px solid #aabfc0;
  box-shadow: none;
}

.rewind-notes {
  grid-template-columns: .85fr 1.15fr;
}

.rewind-notes > div:nth-child(3) {
  display: grid;
  grid-template-columns: .34fr .66fr;
  grid-column: 1 / -1;
  column-gap: 2rem;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.rewind-notes > div:nth-child(3) h3 {
  margin-top: .3rem;
}

.rewind-notes > div:nth-child(3) p:last-child {
  grid-column: 2;
}

.process-grid {
  display: block;
  border-top: 1px solid var(--line);
}

.process-grid > div,
.process-grid > div:nth-child(2),
.process-grid > div:nth-child(3) {
  display: grid;
  grid-template-columns: 5rem 1fr 1fr;
  gap: 2rem;
  align-items: baseline;
  min-height: 0;
  padding: 1.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  transform: none;
}

.process h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.process-grid span {
  color: var(--plum);
}

.about h2 em {
  color: var(--plum);
}

.skills {
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.skills span,
.skills span:nth-child(even) {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
}

.skills span:last-child {
  border-right: 0;
}

.contact {
  background: var(--ink);
  border-top: 7px solid var(--plum);
}

.contact em {
  color: #c8d7d6;
}

.contact-link {
  border-color: #c8d7d6;
}

.feature-copy > p:not(.eyebrow),
.system-copy > p:not(.eyebrow) {
  font-size: 1rem;
}

.email-series figcaption,
.social-pair figcaption,
.rewind-showcase figcaption,
.system-feature figcaption,
.product-content-grid figcaption,
.metrics span {
  font-size: .75rem;
}

@media (max-width: 900px) {
  .email-feature .feature-copy,
  .social-feature .feature-copy {
    grid-template-columns: 1fr 1.7fr;
  }
}

@media (max-width: 760px) {
  .nav {
    height: 68px;
  }

  .hero {
    min-height: calc(100svh - 68px);
  }

  .deliverables {
    border-bottom: 0;
  }

  .deliverables span {
    width: 50%;
    margin: 0;
    padding: .7rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .deliverables span:nth-child(even) {
    border-right: 0;
  }

  .social-feature {
    border-left: 0;
    border-top: 5px solid var(--kirsch);
  }

  .rewind-notes,
  .rewind-notes > div:nth-child(3) {
    display: block;
  }

  .process-grid > div,
  .process-grid > div:nth-child(2),
  .process-grid > div:nth-child(3) {
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
  }

  .process-grid > div p {
    grid-column: 2;
  }

  .product-content-feature {
    margin-right: 0;
    margin-left: 0;
    padding: 2.5rem 0 0;
  }

  .skills {
    border-bottom: 0;
  }

  .skills span,
  .skills span:nth-child(even) {
    border-bottom: 1px solid var(--line);
  }
}