.surface-quiet,
.surface-inquiry.is-quiet {
  --ink: #1a1c1b;
  --ash: #d8d4cc;
  --chrys: #efede8;
  --pine: #2f4a38;
  color: var(--ink);
  background:
    linear-gradient(180deg, #f7f5f0, var(--chrys) 45%, #e7e2d8 120%);
  font-family: "IBM Plex Sans KR", sans-serif;
}

.surface-quiet .chrome,
.surface-inquiry.is-quiet .chrome {
  background: rgba(239, 237, 232, 0.9);
  border-bottom: 1px solid rgba(26, 28, 27, 0.08);
}

.surface-quiet h1,
.surface-quiet .wordmark,
.surface-inquiry.is-quiet h1,
.surface-inquiry.is-quiet .wordmark {
  font-family: "Hahmlet", serif;
}

.surface-quiet .wordmark,
.surface-inquiry.is-quiet .wordmark,
.surface-quiet .nav-cta,
.surface-inquiry.is-quiet .nav-cta {
  color: var(--pine);
}

.surface-quiet .nav-cta,
.surface-inquiry.is-quiet .nav-cta {
  border-color: var(--pine);
}

.surface-quiet .memorial {
  padding-top: clamp(28px, 5vw, 48px);
  border-left: 4px solid var(--pine);
  padding-left: clamp(18px, 4vw, 36px);
}

.surface-quiet .sku-hero .category {
  margin-bottom: 10px;
  color: var(--pine);
  font-family: "Syne", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.surface-quiet .sku-hero h1 {
  max-width: 14ch;
}

.surface-quiet .body {
  max-width: 40rem;
  margin-top: 18px;
  font-size: 1.08rem;
}

.surface-quiet .memorial-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(36px, 6vw, 56px);
}

.surface-quiet .memorial-gallery img {
  aspect-ratio: 4 / 3;
  background: var(--ash);
  object-fit: cover;
  filter: saturate(0.7);
}

.surface-quiet .cta,
.surface-inquiry.is-quiet button {
  margin-top: 36px;
  color: var(--chrys);
  background: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 640px) {
  .surface-quiet .memorial-gallery {
    grid-template-columns: 1fr;
  }
}