/* Writing index theme aligned with the main editorial site */
body.blog-index-page{background:var(--paper);color:var(--ink)}
.blog-index-page .container{width:min(calc(100% - 48px),var(--max));max-width:var(--max);padding:0;margin-inline:auto}
.blog-index-page .hero{padding:82px 0 54px;text-align:left;border-bottom:1px solid var(--line)}
.blog-index-page .hero h1{max-width:820px;margin:0 0 20px;font-family:var(--serif);font-size:clamp(58px,8vw,96px);font-weight:500;letter-spacing:-.055em;line-height:.94;text-wrap:balance}
.blog-index-page .hero p{max-width:680px;margin:0;color:#35342f;font-size:20px;line-height:1.55}
.blog-index-page .search-filter{margin:0;padding:30px 0;border-bottom:1px solid var(--line);text-align:left}
.blog-index-page .search-label{display:block;margin-bottom:9px;font-size:13px;font-weight:750}
.blog-index-page .search-bar{width:min(100%,560px);min-height:52px;padding:13px 15px;background:var(--white);border:1px solid #7b7972;border-radius:0;color:var(--ink);font:inherit}
.blog-index-page .search-bar:focus{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:1px}
.blog-index-page .filter-tags{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-top:16px}
.blog-index-page .filter-tag{padding:8px 13px;background:transparent;border:1px solid var(--line);border-radius:0;color:var(--ink);font-size:13px;cursor:pointer}
.blog-index-page .filter-tag:hover,.blog-index-page .filter-tag.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.blog-index-page .blog-posts-wrapper{counter-reset:article;gap:0;border-top:1px solid var(--ink)}
.blog-index-page .blog-card{counter-increment:article;display:block;margin:0!important;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:visible;transition:background .18s ease}
.blog-index-page .blog-card:hover{background:rgba(255,254,249,.55);border-color:var(--line);transform:none}
.blog-index-page .blog-card-content{display:grid;grid-template-columns:64px minmax(260px,1.3fr) minmax(260px,1fr);gap:18px 42px;padding:30px 0}
.blog-index-page .blog-card-content::before{content:counter(article,decimal-leading-zero);grid-column:1;grid-row:1/4;color:var(--muted);font-size:12px;font-weight:750;letter-spacing:.08em;padding-top:5px}
.blog-index-page .blog-card h2{grid-column:2;grid-row:1/4;margin:0;font-family:var(--serif);font-size:clamp(27px,3vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.blog-index-page .blog-card h2 a{color:var(--ink);text-decoration:none}
.blog-index-page .blog-card h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.blog-index-page .blog-excerpt{grid-column:3;margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.blog-index-page .blog-meta{grid-column:3;margin:0;color:var(--muted);font-size:12px}
.blog-index-page .read-more{grid-column:3;color:var(--blue);font-size:14px;font-weight:750;text-decoration:none}
.blog-index-page .read-more:hover{text-decoration:underline;text-underline-offset:4px}
.blog-index-page .blog-card-tags,.blog-index-page .floating-emoji{display:none!important}
.blog-index-page .no-results{padding:52px 24px;color:var(--muted)}
.blog-index-page footer{margin-top:74px;padding:38px 0;background:var(--ink);border:0;color:#bdb9b0}
@media(max-width:850px){
  .blog-index-page .blog-card-content{grid-template-columns:48px 1fr;gap:12px 20px}
  .blog-index-page .blog-card-content::before{grid-row:1/5}
  .blog-index-page .blog-card h2,.blog-index-page .blog-excerpt,.blog-index-page .blog-meta,.blog-index-page .read-more{grid-column:2;grid-row:auto}
}
@media(max-width:720px){
  .blog-index-page .container{width:calc(100% - 32px)}
  .blog-index-page .hero{padding:56px 0 38px}
  .blog-index-page .hero h1{font-size:clamp(50px,16vw,72px)}
  .blog-index-page .hero p{font-size:18px}
  .blog-index-page .blog-card-content{grid-template-columns:34px 1fr;gap:10px 12px;padding:25px 0}
  .blog-index-page .blog-card h2{font-size:27px}
  .blog-index-page .filter-tags{gap:6px}
  .blog-index-page .filter-tag{padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){.blog-index-page .blog-card{transition:none}}
