.blog-index-hero{padding-bottom:2.75rem}
.blog-index-intro{max-width:720px}
.blog-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:1.25rem;padding-bottom:5rem}
.blog-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:var(--surface);transition:transform .2s,border-color .2s,background .2s}
.blog-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24);background:var(--surface-hover)}
[data-theme="light"] .blog-card:hover{border-color:rgba(0,0,0,.18)}
.blog-card-media{display:block;overflow:hidden;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.blog-card-media img{width:100%;aspect-ratio:7/4;object-fit:cover;transition:transform .45s ease}
.blog-card:hover .blog-card-media img{transform:scale(1.018)}
.blog-card-body{display:flex;flex:1;flex-direction:column;padding:clamp(1.25rem,3vw,1.8rem)}
.blog-card-meta,.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem;margin-bottom:1rem;font-family:var(--mono);font-size:.67rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.blog-card h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.03em;margin-bottom:.75rem}
.blog-card p{color:var(--sub);font-size:.92rem;line-height:1.7;margin-bottom:1.25rem}
.blog-card-link{margin-top:auto;font-size:.84rem;font-weight:750;text-decoration:underline;text-decoration-color:#62626c;text-underline-offset:4px}
.blog-card-link:hover{color:var(--text)}
.blog-evidence-link{margin:0 0 5rem;padding:1.15rem 1.25rem;border-left:2px solid var(--text);background:var(--surface);color:var(--sub)}
.blog-evidence-link a{font-weight:750;color:var(--text);text-decoration:underline;text-decoration-color:#62626c;text-underline-offset:4px}

.article-header{width:min(1040px,calc(100% - 2rem));margin:0 auto;padding:clamp(4rem,8vw,6rem) 0 2.5rem}
.article-header h1{max-width:1020px;font-size:clamp(2.15rem,5.2vw,4.3rem);line-height:1.02;letter-spacing:-.05em;margin-bottom:1.25rem;text-wrap:balance}
.article-dek{max-width:760px;color:var(--sub);font-size:clamp(1.02rem,2vw,1.24rem);line-height:1.65}
.article-meta{margin:1.4rem 0 0}
.article-meta strong{color:var(--text);font-weight:700;text-transform:none;letter-spacing:0}
.article-hero-media{width:min(1080px,calc(100% - 2rem));margin:0 auto 4rem;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:var(--surface)}
.article-hero-media img{width:100%;aspect-ratio:7/4;object-fit:cover}
.article-hero-media figcaption{padding:.75rem 1rem;border-top:1px solid var(--border);color:var(--muted);font-size:.76rem}
.article-body{width:min(74ch,calc(100% - 2rem));margin:0 auto;padding-bottom:1rem}
.article-body>p,.article-body li{color:var(--sub)}
.article-body>p{margin-bottom:1.25rem}
.article-body h2{margin:4rem 0 1.1rem;font-size:clamp(1.65rem,3.5vw,2.55rem);line-height:1.14;letter-spacing:-.035em;text-wrap:balance}
.article-body h3{margin:2.7rem 0 .75rem;font-size:clamp(1.16rem,2.3vw,1.48rem);line-height:1.3;letter-spacing:-.018em;text-wrap:balance}
.article-body ul,.article-body ol{margin:1rem 0 1.4rem;padding-left:1.2rem}
.article-body li+li{margin-top:.65rem}
.article-body strong{color:var(--text)}
.article-body a:not(.case-button){color:var(--text);font-weight:720;text-decoration:underline;text-decoration-color:#62626c;text-decoration-thickness:1px;text-underline-offset:4px}
.article-body blockquote{margin:1.4rem 0 1.6rem;padding:1.2rem 1.3rem;border-left:2px solid var(--text);background:var(--surface);color:var(--text);font-size:clamp(1rem,2vw,1.12rem);line-height:1.7}
.article-body blockquote p{color:inherit;margin:0}
.article-figure{width:min(900px,calc(100vw - 2rem));margin:1.5rem 50% 2.2rem;transform:translateX(-50%);overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.article-image-link{display:block;background:#000}
.article-image-link:focus-visible{outline-offset:-4px}
.article-figure img{width:100%;height:auto;background:var(--bg-soft)}
.article-figure figcaption{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.8rem 1rem;border-top:1px solid var(--border);color:var(--muted);font-size:.76rem;line-height:1.55}
.article-figure figcaption a{font-size:.74rem}
.article-figure-links{display:flex;gap:.8rem;flex-wrap:wrap}
.review-overview{width:min(780px,calc(100vw - 2rem))}
.review-section{scroll-margin-top:90px}
.support-method{margin:1.25rem 0 1.5rem;padding:1.2rem 1.3rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);font-family:var(--mono);font-size:.83rem;color:var(--text);line-height:1.7}
.experience-levels{display:grid;grid-template-columns:1fr;gap:.75rem;margin:1.25rem 0 1.5rem;padding:0;list-style:none}
.experience-levels li{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.experience-levels strong{display:block;margin-bottom:.25rem}
.related-article{width:min(900px,calc(100% - 2rem));margin:4rem auto;padding:clamp(1.4rem,4vw,2.25rem);border:1px solid var(--border);border-radius:22px;background:var(--surface)}
.related-article h2{font-size:clamp(1.45rem,3vw,2.2rem);line-height:1.2;letter-spacing:-.03em;margin-bottom:.65rem}
.related-article p{max-width:650px;color:var(--sub);margin-bottom:1.1rem}
.article-end-links{display:flex;gap:.65rem;flex-wrap:wrap}

@media(max-width:760px){
  .blog-grid{grid-template-columns:1fr;padding-bottom:3.5rem}
  .blog-card-media img{aspect-ratio:7/4}
  .article-header{padding-top:3.5rem}
  .article-header h1{font-size:clamp(2rem,10vw,3rem);line-height:1.04}
  .article-hero-media{margin-bottom:3rem;border-radius:18px}
  .article-body{width:min(100% - 2rem,74ch)}
  .article-body h2{margin-top:3.25rem}
  .article-figure{border-radius:15px}
  .article-figure figcaption{align-items:flex-start;flex-direction:column}
  .article-figure-links{display:grid;gap:.45rem}
  .related-article{margin:3rem auto}
}

@media(max-width:420px){
  .article-header h1{font-size:2rem}
  .article-meta{align-items:flex-start;flex-direction:column;gap:.35rem}
  .article-body blockquote{padding:1rem}
  .article-figure{width:calc(100vw - 1rem)}
  .article-end-links{display:grid}
  .article-end-links .case-button{justify-content:center;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .blog-card,.blog-card-media img{transition:none}
}