<div class="dm-mocha-bg">
  <article class="dm-mocha">
    <div class="dm-mocha__meta">FEATURED · 4 MIN READ</div>
    <h3 class="dm-mocha__title">The art of restraint</h3>
    <p class="dm-mocha__body">
      In the long view, less surface area means fewer maintenance burdens. Choose carefully what you
      build.
    </p>
    <div class="dm-mocha__author">
      <span class="dm-mocha__avatar">M</span>
      <span>Marcus Rivera</span>
    </div>
  </article>
</div>

.dm-mocha-bg { padding: 28px; border-radius: 16px; background: #1c1410; }
.dm-mocha {
  background: #2a1f18;
  border: 1px solid #3d2c20;
  border-radius: 10px;
  padding: 18px 22px;
  color: #f5e6d3;
}
.dm-mocha__meta {
  font: 700 10px ui-monospace, monospace;
  color: #c9a961;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.dm-mocha__title { margin: 0 0 8px; font: 700 16px/1.3 ui-serif, Georgia; color: #fff8ed; }
.dm-mocha__body  { margin: 0 0 14px; font: 12.5px/1.65 ui-serif, Georgia; color: #d6c4ab; font-style: italic; }
.dm-mocha__author {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px system-ui, sans-serif;
  color: #c9a961;
  padding-top: 12px;
  border-top: 1px solid #3d2c20;
}
.dm-mocha__avatar {
  width: 22px; height: 22px;
  background: #c9a961;
  color: #1c1410;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11px system-ui, sans-serif;
}