/* Blog: article text and article cards. Loaded after service.css, so it reuses its colours and spacing. */
.hero.article h1{font-size:5vw;line-height:1.05;max-width:70vw}
.bmeta{font-size:1vw;color:var(--mute);letter-spacing:.02em;margin-top:2vw}
.post{max-width:58vw}
.post h2{font-size:2.3vw;line-height:1.2;margin:3.4vw 0 1.2vw}
.post h2:first-child{margin-top:0}
.post p,.post li{font-size:1.3vw;line-height:1.75;color:var(--mute)}
.post p{margin-bottom:1.3vw}
.post ul{list-style:disc;padding-left:1.4em;margin:0 0 1.6vw}
.post li{margin-bottom:.6vw}
.post li::marker{color:var(--o1)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vw}
.bcard{display:flex;flex-direction:column;gap:1vw;border:1px solid var(--line);border-radius:.6vw;padding:2vw;transition:background .4s,border-color .4s}
.bcard .bmeta{margin:0}
.bcard h3{font-size:1.7vw;line-height:1.2}
.bcard p{font-size:1.1vw;line-height:1.55;color:var(--mute);flex:1}
.bcard .bmore{font-size:1.1vw;color:var(--o1);transition:color .4s}
.bcard:hover{background:linear-gradient(90deg,var(--o1),var(--o2));border-color:transparent}
.bcard:hover p,.bcard:hover .bmeta,.bcard:hover .bmore{color:#fff}
@media (max-width:1025px){
  .hero.article h1{font-size:8vw;max-width:100%}
  .bmeta{font-size:2.2vw}
  .post{max-width:100%}
  .post h2{font-size:4.4vw}
  .post p,.post li{font-size:2.8vw}
  .bgrid{grid-template-columns:1fr 1fr;gap:2.4vw}
  .bcard{padding:3.4vw;gap:2vw;border-radius:1.2vw}
  .bcard h3{font-size:3.6vw}
  .bcard p,.bcard .bmore{font-size:2.5vw}
}
@media (max-width:640px){
  .hero.article h1{font-size:10vw}
  .bmeta{font-size:3.6vw}
  .post h2{font-size:6.4vw;margin:9vw 0 3vw}
  .post p,.post li{font-size:4.2vw}
  .post p{margin-bottom:4vw}
  .bgrid{grid-template-columns:1fr;gap:4vw}
  .bcard{padding:5vw;gap:3vw;border-radius:2vw}
  .bcard h3{font-size:5.8vw}
  .bcard p,.bcard .bmore{font-size:4vw}
}