/* Ported from app/blog/page.tsx and app/blog/[slug]/page.tsx's Tailwind
   classes into the theme's plain-CSS convention. */

.bl-head{max-width:1280px;margin:0 auto;padding:144px 24px 128px;}
@media(min-width:768px){.bl-head{padding-top:176px;}}
.bl-head-wrap{max-width:640px;}

.bl-eyebrow{color:#c9cbcf;font-size:.62rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:20px;}
.bl-h1{color:#fff;font-weight:900;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(36px,7vw,57.6px);margin-bottom:24px;}
.bl-dim{color:rgba(255,255,255,.4);}
.bl-lead{color:rgba(255,255,255,.4);font-size:.9rem;line-height:1.7;}
@media(min-width:768px){.bl-lead{font-size:1rem;}}

.bl-empty{margin-top:80px;border-radius:16px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);padding:48px;text-align:center;}
.bl-empty-h{color:rgba(255,255,255,.6);font-weight:600;margin-bottom:8px;}
.bl-empty-p{color:rgba(255,255,255,.3);font-size:.875rem;line-height:1.6;max-width:420px;margin:0 auto;}

.bl-grid{margin-top:80px;display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:768px){.bl-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.bl-grid{grid-template-columns:1fr 1fr 1fr;}}

.bl-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  text-decoration:none;transition:border-color .3s,background-color .3s;}
.bl-card:hover{border-color:rgba(201,203,207,.25);background:rgba(201,203,207,.03);}
.bl-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.bl-card-body{display:flex;flex-direction:column;flex:1;padding:28px;}
.bl-card-date{color:rgba(255,255,255,.3);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:12px;}
.bl-card-title{color:#fff;font-size:1.125rem;font-weight:700;line-height:1.35;margin-bottom:12px;
  transition:color .2s;}
.bl-card:hover .bl-card-title{color:#c9cbcf;}
.bl-card-excerpt{color:rgba(255,255,255,.4);font-size:.875rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bl-card-excerpt p{margin:0;}

/* Single post */
.bl-post{max-width:768px;margin:0 auto;padding:144px 24px 128px;}
@media(min-width:768px){.bl-post{padding-top:176px;}}
.bl-post-back{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.35);
  font-size:.8rem;font-weight:600;text-decoration:none;margin-bottom:40px;transition:color .2s;}
.bl-post-back:hover{color:#fff;}
.bl-post-date{color:rgba(255,255,255,.3);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:16px;}
.bl-post-title{color:#fff;font-weight:900;letter-spacing:-.04em;line-height:1.1;
  font-size:clamp(30px,5vw,48px);margin-bottom:40px;}
.bl-post-img{width:100%;border-radius:16px;margin-bottom:48px;border:1px solid rgba(255,255,255,.07);}

.bl-post-cta{margin-top:64px;padding:32px;border-radius:16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);text-align:center;}
.bl-post-cta-h{color:#fff;font-weight:700;font-size:1.125rem;margin-bottom:8px;}
.bl-post-cta-p{color:rgba(255,255,255,.4);font-size:.875rem;margin-bottom:24px;}
.bl-post-cta-btn{display:inline-flex;align-items:center;background:#45454a;color:#fff;
  font-size:.875rem;font-weight:700;padding:14px 28px;border-radius:999px;letter-spacing:.02em;
  text-decoration:none;transition:box-shadow .2s,transform .2s;}
.bl-post-cta-btn:hover{box-shadow:0 0 50px rgba(255,255,255,.15);transform:scale(1.03);}