Blog List 01

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="blog_component">
  <div class="blog_header">
    <div class="blog_headwrap">
      <p class="blog_eyebrow">Journal — N°04 / EST. 2019</p>
      <h2 class="blog_title">Notes from the studio floor</h2>
    </div>
    <a class="blog_viewall" href="#">All articles →</a>
  </div>
  <ul class="blog_grid">
    <li class="blog_card">
      <a class="blog_imglink" href="#">
        <img class="blog_img" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-blog-list-cream-editorial-1-1-12.webp" alt="Studio desk with paper swatches and brass tools" />
      </a>
      <div class="blog_meta">
        <p class="blog_category">Craft</p>
        <p class="blog_dot">·</p>
        <p class="blog_date">12 Jun 2026</p>
      </div>
      <h3 class="blog_cardtitle">Why slow production makes a sharper product</h3>
      <p class="blog_excerpt">We cut our output in half for a season and shipped the best work of the year. Here is the maths behind trading speed for intent.</p>
    </li>
    <li class="blog_card">
      <a class="blog_imglink" href="#">
        <img class="blog_img" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-blog-list-cream-editorial-1-2-13.webp" alt="Designer reviewing printed layouts on a studio wall" />
      </a>
      <div class="blog_meta">
        <p class="blog_category">Process</p>
        <p class="blog_dot">·</p>
        <p class="blog_date">03 Jun 2026</p>
      </div>
      <h3 class="blog_cardtitle">A field guide to the perfect kickoff meeting</h3>
      <p class="blog_excerpt">The first ninety minutes with a client decide the next ninety days. Six questions we now refuse to start any project without asking.</p>
    </li>
    <li class="blog_card">
      <a class="blog_imglink" href="#">
        <img class="blog_img" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-blog-list-cream-editorial-1-3-14.webp" alt="Stack of printed brand books with a red bookmark" />
      </a>
      <div class="blog_meta">
        <p class="blog_category">Strategy</p>
        <p class="blog_dot">·</p>
        <p class="blog_date">21 May 2026</p>
      </div>
      <h3 class="blog_cardtitle">The brand book nobody actually reads</h3>
      <p class="blog_excerpt">Two hundred pages of guidelines gather dust while the logo gets stretched anyway. What a living brand system looks like instead.</p>
    </li>
  </ul>
</section>

<style>
.blog_component {
  background-color:#f5f4f0;
  padding:120px 6vw;
  font-family:Georgia,'Times New Roman',serif;
  color:#3a2c22;
  box-sizing:border-box;
}

.blog_header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(58,44,34,0.2);
  padding-bottom:36px;
  margin-bottom:64px;
}

.blog_headwrap {
  max-width:640px;
}

.blog_eyebrow {
  font-family:'SF Mono',ui-monospace,Menlo,monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#c0392b;
  margin:0 0 18px 0;
}

.blog_title {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  font-size:clamp(48px,7vw,92px);
  line-height:0.94;
  letter-spacing:-0.03em;
  color:#3a2c22;
  margin:0;
}

.blog_viewall {
  font-family:'SF Mono',ui-monospace,Menlo,monospace;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#3a2c22;
  text-decoration:none;
  border:1px solid #3a2c22;
  border-radius:999px;
  padding:13px 26px;
  white-space:nowrap;
  transition:background-color .25s ease,color .25s ease;
}

.blog_grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  list-style:none;
  padding:0;
  margin:0;
}

.blog_card {
  display:flex;
  flex-direction:column;
}

.blog_imglink {
  display:block;
  overflow:hidden;
  border-radius:4px;
  margin-bottom:26px;
  background-color:#e8e5dd;
}

.blog_img {
  width:100%;
  height:280px;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}

.blog_meta {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.blog_category {
  font-family:'SF Mono',ui-monospace,Menlo,monospace;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#c0392b;
  margin:0;
}

.blog_dot {
  font-family:'SF Mono',ui-monospace,Menlo,monospace;
  font-size:11px;
  color:rgba(58,44,34,0.4);
  margin:0;
}

.blog_date {
  font-family:'SF Mono',ui-monospace,Menlo,monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(58,44,34,0.55);
  margin:0;
}

.blog_cardtitle {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  font-size:26px;
  line-height:1.12;
  letter-spacing:-0.01em;
  color:#3a2c22;
  margin:0 0 14px 0;
}

.blog_excerpt {
  font-family:Georgia,serif;
  font-size:16px;
  line-height:1.6;
  color:rgba(58,44,34,0.75);
  margin:0;
}
</style>