/* Material surfaces: printed stock, a quiet grid, and dark enamel. */
.site-header {
  background-color: #f1eee8;
  background-image: url("assets/paper-grain.webp");
  border-bottom: 1px solid rgba(38, 27, 25, .25);
  box-shadow: none;
}

.hero.paper {
  position: relative;
  background-color: #efece5;
  background-image:
    linear-gradient(rgba(38, 27, 25, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 27, 25, .055) 1px, transparent 1px),
    url("assets/paper-grain.webp");
  background-size: 40px 40px, 40px 40px, 384px 384px;
  background-position: -1px -1px, -1px -1px, 0 0;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--gutter);
  width: clamp(44px, 5vw, 76px);
  height: 5px;
  background: var(--accent);
}
.hero-title-wrap { position: relative; z-index: 1; }

.challenge.dark-paper {
  background-color: #261b19;
  background-image: url("assets/enamel-grain.webp");
  background-size: 384px 384px;
  box-shadow: none;
}
.challenge .problem-stage { background: transparent; }
.problem-scroll-ready .challenge.dark-paper { background-image: none; }
.problem-scroll-ready .challenge .problem-stage {
  background-image: url("assets/enamel-grain.webp");
  background-size: 384px 384px;
}
.challenge .problem-emphasis { text-shadow: 0 1px 0 rgba(0, 0, 0, .22); }

.capacity.paper {
  background-color: #f2efe9;
  background-image: url("assets/paper-grain.webp");
  background-size: 384px 384px;
}

.approach.paper {
  background-color: #dce4d8;
  background-image: url("assets/paper-grain.webp");
  background-size: 384px 384px;
  box-shadow: none;
}
.approach-steps .step-number {
  display: grid;
  place-items: center;
  width: 43px;
  height: 39px;
  padding: 0;
  background: #cbd8c8;
  color: #3d5e48;
  border: 1px solid rgba(38, 27, 25, .14);
  box-shadow: inset 1px 2px 2px rgba(38, 27, 25, .10), 1px 1px 0 rgba(255, 255, 255, .6);
}

.case-study.paper {
  background-color: #f2efe9;
  background-image: url("assets/paper-grain.webp");
  background-size: 384px 384px;
}

.closing.dark-paper {
  background-color: #261b19;
  background-image: url("assets/enamel-grain.webp");
  background-size: 384px 384px;
}
.nav-contact.compact-cta,
.closing .primary-link.compact-cta,
#baseline-email-form .primary-link,
#email-form-success .primary-link,
.close-dialog {
  border-radius: 6px;
}
.nav-contact.compact-cta,
.closing .primary-link.compact-cta {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), inset 0 -2px 0 rgba(0,0,0,.22);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-contact.compact-cta:active,
.closing .primary-link.compact-cta:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.2);
}
@media (max-width: 760px) {
  .hero.paper { background-size: 32px 32px, 32px 32px, 384px 384px; }
  .approach-steps .step-number { width: 33px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-contact.compact-cta,
  .closing .primary-link.compact-cta { transition: none; }
}