# Density Labs Blog

Field reports from shipping AI to production. Case studies, technical breakdowns, and frank assessments of what works and what doesn't.

<section class="blog-hero">
  <div class="container">
    <div class="breadcrumb">
      <a href="/">Density Labs</a> <span>/</span> <span>Blog</span>
    </div>
    <h1 class="blog-h1">Field reports from <span class="accent">shipping AI to production</span>.</h1>
    <p class="blog-lede">
      Case studies, technical breakdowns, and frank assessments of what works and what doesn't
      when mid market companies build AI capability with embedded engineering teams.
      Written by the Density Labs engineering team.
    </p>
  </div>
</section>

<section class="blog-list-section">
  <div class="container">
    
      <p class="blog-empty">More articles coming soon.</p>
    
      <div class="post-list">
        
        <article class="post-card">
          <a href="" class="post-card-link">
            <div class="post-card-meta">
              <span class="post-card-date"></span>
              <span class="post-card-cat"></span>
              <span class="post-card-read"> read</span>
            </div>
            <h2 class="post-card-title"></h2>
            
              <p class="post-card-subtitle"></p>
            
              <p class="post-card-subtitle"></p>
            
            <div class="post-card-cta">Read article →</div>
          </a>
        </article>
        
      </div>
    
  </div>
</section>

<style>
.blog-hero {
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--line);
}
.blog-hero .breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 28px;
}
.blog-hero .breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.blog-hero .breadcrumb a:hover { color: var(--red); }
.blog-hero .breadcrumb span { color: var(--red); margin-right: 12px; margin-left: 12px; }
.blog-hero .breadcrumb span:last-child { color: var(--ink-soft); }

.blog-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 920px;
}
.blog-h1 .accent { color: var(--red); }

.blog-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 760px;
}

.blog-list-section { padding: 80px 0 120px; }

.post-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
}

.post-card {
  border-bottom: 1px solid var(--line);
}

.post-card:first-child { border-top: 1px solid var(--line); }

.post-card-link {
  display: block;
  padding: 40px 0;
  text-decoration: none;
  color: inherit;
  transition: padding 0.25s;
}

.post-card-link:hover {
  padding-left: 16px;
}

.post-card-link:hover .post-card-cta {
  color: var(--red);
}

.post-card-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.post-card-date { color: var(--red); font-weight: 500; }
.post-card-cat { color: var(--ink-muted); }
.post-card-read { color: var(--ink-faint); }

.post-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}

.post-card-subtitle {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.post-card-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  transition: color 0.2s;
}

.blog-empty {
  text-align: center;
  font-size: 17px;
  color: var(--ink-muted);
  padding: 60px 0;
}
</style>