/* Blog — Multan Cycling Club */
.page-blog{background:var(--bone)}
.blog-hero,.post__hero{background:var(--cobalt);color:var(--bone);border-bottom:var(--bw) solid var(--ink);
  padding:clamp(108px,15vh,170px) 0 clamp(44px,6vh,72px);position:relative;overflow:hidden}
.blog-hero::after,.post__hero::after{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:radial-gradient(rgba(255,244,227,.85) 1.6px,transparent 1.7px);background-size:18px 18px}
.blog-hero .wrap,.post__hero .wrap{position:relative;z-index:1}
.blog-hero__title{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;margin:.1em 0 .4em;
  font-size:clamp(2.8rem,9vw,7rem);text-shadow:5px 5px 0 var(--ink)}
.blog-hero__title em{font-style:italic;color:var(--lime)}

/* date chips */
.date-chip{display:inline-block;background:var(--lime);color:var(--ink);border:2.5px solid var(--ink);border-radius:100px;
  padding:.2rem .8rem;font-family:var(--display);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
.date-chip--tbc{background:var(--paper);color:#6B6459;font-weight:700;letter-spacing:.06em}

/* index cards */
.post-list{display:grid;gap:1.2rem}
.post-card{display:grid;grid-template-columns:300px 1fr;gap:1.4rem;background:var(--paper);border:var(--bw) solid var(--ink);
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.post-card:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)}
.post-card__media{position:relative;display:block;background:var(--bone);border-right:var(--bw) solid var(--ink)}
.post-card__media img{width:100%;height:100%;object-fit:cover;min-height:190px}
.post-card__n{position:absolute;top:.6rem;left:.6rem;background:var(--ink);color:var(--lime);border-radius:10px;
  padding:.1rem .55rem;font-family:var(--display);font-weight:800;font-size:1.1rem}
.post-card__body{padding:1.3rem 1.5rem 1.4rem 0}
.post-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.6rem}
.post-card__tag{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;
  background:var(--pink);color:var(--paper);border:2.5px solid var(--ink);border-radius:100px;padding:.15rem .7rem}
.post-card h2{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.02;margin-bottom:.45rem}
.post-card p{color:#4A443D;margin:0 0 .9rem;font-size:.97rem;max-width:68ch}
.post-card__go{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;
  border-bottom:3px solid var(--lime)}
.post-card__go span{display:inline-block;transition:transform .3s var(--ease)}
.post-card:hover .post-card__go span{transform:translateX(5px)}

/* article */
.post__hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.94;
  font-size:clamp(2.1rem,5.4vw,4.4rem);margin:.5rem 0 .7rem;max-width:22ch;text-shadow:4px 4px 0 var(--ink)}
.post__back{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.84rem;color:var(--lime)}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.post__sep{opacity:.5}
.post__tag{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;
  border:2.5px solid var(--bone);border-radius:100px;padding:.15rem .7rem}
.post__dek{margin:1rem 0 0;max-width:62ch;font-size:1.08rem;color:rgba(255,244,227,.92)}
.post__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(1.6rem,4vw,3.4rem);
  padding-block:clamp(2.4rem,6vh,4.4rem)}
.post__body{max-width:68ch;font-size:1.06rem}
.post__body h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1;margin:2.2rem 0 .7rem}
.post__body h2:first-child{margin-top:0}
.post__body p{margin:0 0 1.1rem;color:#2A2622}
.post__body p:first-of-type{font-size:1.14rem}
.post__aside{align-self:start;position:sticky;top:96px;display:grid;gap:.7rem}
.post__notes{background:var(--lime);border:var(--bw) solid var(--ink);border-radius:20px;padding:1.2rem;box-shadow:var(--shadow)}
.post__notes h3{font-size:1.3rem;margin-bottom:.5rem}
.post__notes ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem;font-size:.94rem}
.post__cta{width:100%}
.post__gallery{padding-bottom:clamp(2rem,5vh,3.4rem)}
.post__gallery h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.5rem;margin:0 0 1rem}
.post__strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem}
.post__strip img,.post__strip video{width:100%;aspect-ratio:4/3;object-fit:cover;border:var(--bw) solid var(--ink);
  border-radius:16px;box-shadow:4px 4px 0 var(--ink);background:var(--bone)}
.post__strip .soon{grid-column:1/-1;background:var(--paper);border:var(--bw) dashed var(--ink);border-radius:18px;
  padding:1.4rem;color:#4A443D}
.post__nav{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;padding-bottom:clamp(2.6rem,7vh,5rem)}
.pn{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:18px;padding:1rem 1.2rem;
  box-shadow:4px 4px 0 var(--ink);font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.1;
  transition:transform .2s var(--ease)}
.pn:hover{transform:translate(-3px,-3px)}
.pn span{display:block;font-size:.76rem;letter-spacing:.16em;color:var(--pink);margin-bottom:.25rem}
.pn--next{background:var(--lime)}

@media (max-width:980px){
  .post__grid{grid-template-columns:1fr}
  .post__aside{position:static;grid-template-columns:1fr;max-width:520px}
}
@media (max-width:760px){
  .post-card{grid-template-columns:1fr}
  .post-card__media{border-right:0;border-bottom:var(--bw) solid var(--ink)}
  .post-card__media img{min-height:170px;max-height:230px}
  .post-card__body{padding:1.1rem 1.2rem 1.3rem}
  .post__nav{grid-template-columns:1fr}
  .post__body{font-size:1.02rem}
}