/* The blog preview reuses the landing's header, footer, font and buttons. */
.blog-index-page{background:#fff;color:var(--color-ink)}
.blog-index-page main{overflow:clip}
.blog-index-intro{padding:88px 0 74px;text-align:center}
.blog-index-intro .section-pill{margin-bottom:28px}
.blog-index-intro h1{max-width:920px;margin:0 auto;font-size:clamp(46px,4.5vw,62px);font-weight:400;line-height:1.01;text-wrap:balance}
.blog-index-intro h1 span{display:block}
.blog-index-intro h1 span:last-child{color:var(--color-hero-muted)}
.blog-index-intro p{max-width:550px;margin:25px auto 0;color:#777;font-size:17px;line-height:1.55}
.blog-explore{padding-bottom:80px}
.blog-filters{display:flex;align-items:stretch;justify-content:center;gap:32px;overflow-x:auto;margin:0 0 39px;padding:0 6px;border-bottom:1px solid #e5e5e2;scrollbar-width:none}
.blog-filters::-webkit-scrollbar{display:none}
.blog-filters button{position:relative;flex:none;min-height:54px;padding:0 2px 16px;border:0;background:none;color:#8a8a8a;cursor:pointer;font-size:14px;font-weight:500;white-space:nowrap;transition:color .2s}
.blog-filters button::after{position:absolute;right:0;bottom:-1px;left:0;height:2px;background:transparent;content:"";transition:background .2s}
.blog-filters button:hover,.blog-filters button[aria-pressed=true]{color:var(--color-ink)}
.blog-filters button[aria-pressed=true]::after{background:var(--color-ink)}
.blog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.blog-card[hidden]{display:none}
.blog-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #e4e4e1;border-radius:21px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.blog-card:has(a:hover){border-color:#cbcbc7;box-shadow:0 14px 35px rgba(47,47,47,.08);transform:translateY(-3px)}
.blog-card-image{position:relative;display:grid;place-items:center;flex:none;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(145deg,#e9eae7,#d4d7d3);color:#898d87}
.blog-card-image--photo{aspect-ratio:16/9}
.blog-card-image--photo img{display:block;width:100%;height:100%;object-fit:cover}
.blog-card:nth-child(3n+2) .blog-card-image{background:linear-gradient(135deg,#e6e7e4,#cfd2d0)}
.blog-card:nth-child(3n+3) .blog-card-image{background:linear-gradient(155deg,#ecece9,#d7d8d3)}
.blog-card-image[href]{transition:filter .2s}
.blog-card-image[href]:hover{filter:brightness(.97)}
.blog-placeholder-frame{position:absolute;inset:16px;border:1px solid rgba(255,255,255,.72);border-radius:13px;pointer-events:none}
.blog-placeholder-caption{font-size:11px;font-weight:600;text-transform:uppercase}
.blog-card-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-height:275px;padding:26px 27px 27px}
.blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-bottom:23px}
.blog-category{display:inline-flex;align-items:center;min-height:29px;padding:5px 11px;border:1px solid #ddd;border-radius:999px;background:#ddd;color:#000;font-size:11px;font-weight:600;line-height:1.2}
.blog-reading{color:#8b8b8b;font-size:11px;white-space:nowrap}
.blog-card h2{margin:0;font-size:25px;font-weight:400;line-height:1.18;text-wrap:balance}
.blog-card h2 a{transition:color .2s}
.blog-card h2 a:hover{color:#777}
.blog-card-body>p{margin:12px 0 0;color:#7a7a7a;font-size:14px;line-height:1.55}
.blog-card-action{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:37px;margin-top:auto;padding:6px 17px;border:1px solid #cfcfcb;border-radius:999px;color:#484848;font-size:12px;font-weight:500;line-height:1.2;transition:background .2s,color .2s,border-color .2s}
.blog-card-action:not(.is-pending){margin-top:auto}
.blog-card-body>p+.blog-card-action{margin-top:28px}
.blog-card-action:not(.is-pending):hover{border-color:var(--color-ink);background:var(--color-ink);color:#fff}
.blog-card-action.is-pending{border-color:#e1e1de;color:#999}
.blog-card-action span{font-size:16px;line-height:1}
.blog-index-page a:focus-visible,.blog-index-page button:focus-visible{outline:2px solid var(--color-ink);outline-offset:4px}

@media(max-width:1050px){
  .blog-filters{justify-content:flex-start;gap:26px}
  .blog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .blog-card-body{padding:22px}
}
@media(max-width:760px){
  .blog-index-intro{padding:68px 0 58px}
  .blog-index-intro h1{font-size:clamp(42px,7.5vw,56px)}
}
@media(max-width:600px){
  .blog-index-intro{padding:55px 0 51px}
  .blog-index-intro .section-pill{margin-bottom:23px}
  .blog-index-intro h1{font-size:clamp(38px,11vw,44px);line-height:1.03}
  .blog-index-intro p{margin-top:19px;font-size:15px}
  .blog-explore{padding-bottom:58px}
  .blog-filters{gap:23px;margin-bottom:29px;padding:0 2px}
  .blog-filters button{min-height:49px;padding-bottom:13px;font-size:13px}
  .blog-card-grid{grid-template-columns:1fr;gap:22px}
  .blog-card{border-radius:19px}
  .blog-card-image{aspect-ratio:16/10}
  .blog-card-image--photo{aspect-ratio:16/9}
  .blog-card-body{min-height:245px;padding:23px}
  .blog-card-meta{margin-bottom:21px}
  .blog-card h2{font-size:27px}
}