*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--cream);font-family:var(--font);overflow-x:hidden}
img{display:block;max-width:100%}
.blog-main{padding:clamp(120px,15vw,190px) 20px clamp(90px,12vw,150px)}
.blog-shell{width:min(1240px,100%);margin-inline:auto}
.blog-back{display:inline-flex;align-items:center;min-height:40px;margin-bottom:clamp(38px,5vw,62px);padding:0 15px;
  border:1px solid var(--cream-10);border-radius:999px;color:var(--cream-50);font-size:14px;text-decoration:none;
  transition:color .3s,border-color .3s,background .3s}
.blog-back:hover,.blog-back:focus-visible{color:var(--cream);border-color:var(--cream-30);background:var(--cream-10)}
.blog-kicker{color:var(--red-edge);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.blog-title{margin-top:22px;max-width:11ch;font-size:clamp(52px,9vw,118px);font-weight:700;letter-spacing:-.06em;line-height:.88}
.blog-lead{margin-top:30px;max-width:55ch;color:var(--cream-50);font-size:clamp(17px,1.6vw,21px);font-weight:300;line-height:1.5}
.blog-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,28px);margin-top:clamp(60px,9vw,110px)}
.blog-grid .post{aspect-ratio:4/5}
.blog-empty{margin-top:70px;padding-top:30px;border-top:1px solid var(--cream-10);color:var(--cream-30);font-size:14px}
@media(min-width:720px){.blog-main{padding-inline:5vw}.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-grid .post{aspect-ratio:16/12}}