/* ===================== BLOG PAGE ===================== */
/* dark segmented control on a light header (personas default to white) */
.blog-page{
  --seg-border:#0d0d0d;
  --seg-text:#0d0d0d;
  --seg-active-bg:#0d0d0d;
  --seg-active-text:#ffffff;
}

/* ---- top bar (nav only; posts start right after) ---- */
.blog-top{background:#fff;padding-bottom:6px;}
.blog-top .nav{
  position:relative;width:100%;height:auto;
  padding:22px 30px 0;overflow:visible;
}
.blog-head{width:1280px;margin:44px auto 0;}
.blog-eyebrow{
  display:inline-block;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--grey);transition:color .25s;
}
.blog-eyebrow:hover{color:var(--orange);}
.blog-title{
  font-size:72px;font-weight:700;letter-spacing:-2px;line-height:1;
  margin-top:16px;color:var(--black);
}
.blog-sub{margin-top:18px;max-width:620px;font-size:18px;line-height:28px;color:#555;}

/* ---- feed ---- */
.blog-feed{background:#fff;padding:28px 80px 72px;}
.blog-list{max-width:720px;margin:0 auto;}
.blog-status{text-align:center;color:var(--grey);padding:70px 0;font-size:16px;}
.blog-status a{color:var(--orange);}
.blog-more{
  display:block;max-width:720px;margin:10px auto 0;text-align:center;
  padding:16px;border:1px solid #e6e6e6;border-radius:14px;
  color:var(--black);font-weight:500;
  transition:background .25s,color .25s,border-color .25s;
}
.blog-more:hover{background:var(--black);color:#fff;border-color:var(--black);}

/* ---- post card ---- */
.post{
  background:#fff;border:1px solid #ececec;border-radius:18px;overflow:hidden;
  margin-bottom:22px;transition:box-shadow .3s cubic-bezier(.2,.75,.25,1),transform .3s;
}
.post:hover{box-shadow:0 16px 44px rgba(0,0,0,.08);transform:translateY(-2px);}

.post-media{display:grid;gap:2px;position:relative;background:#f0f0f0;}
.post-media .pm{background-size:cover;background-position:center;display:block;position:relative;}
.post-media.count-1{grid-template-columns:1fr;}
.post-media.count-1 .pm{height:420px;}
.post-media.count-2{grid-template-columns:1fr 1fr;}
.post-media.count-2 .pm{height:260px;}
.post-media.count-3{grid-template-columns:1fr 1fr;}
.post-media.count-3 .pm{height:180px;}
.post-media.count-3 .pm:first-child{grid-row:span 2;height:362px;}
.post-media.count-4{grid-template-columns:1fr 1fr;}
.post-media.count-4 .pm{height:180px;}
.post-media-empty{
  height:120px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:#111;color:#fff;font-size:14px;letter-spacing:.4px;
}
.post-plus{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);color:#fff;font-size:22px;font-weight:600;
}
.post-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:rgba(13,13,13,.5);
  transition:background .25s;
}
.post-media:hover .post-play{background:rgba(13,13,13,.72);}
.post-play::after{
  content:'';position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;
}
.post-media-empty .post-play{position:static;transform:none;width:44px;height:44px;}
.post-media-empty .post-play::after{border-width:8px 0 8px 13px;}

.post-body{padding:20px 22px 16px;}
.post-fwd{
  display:inline-block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--grey);margin-bottom:8px;
}
.post-text{
  font-size:15.5px;line-height:24px;color:#1a1a1a;white-space:pre-wrap;word-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:14;overflow:hidden;
}
.post-text b{font-weight:700;}
.post-text a{color:var(--orange);text-decoration:none;}
.post-text a:hover{text-decoration:underline;}
.post-meta{
  display:flex;align-items:center;gap:14px;margin-top:14px;
  font-size:13px;color:var(--grey);
}
.post-views{display:inline-flex;align-items:center;gap:5px;}
.post-views svg{display:block;opacity:.7;}
.post-open{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  color:var(--black);font-weight:500;transition:color .25s;
}
.post-open:hover{color:var(--orange);}
.post-open svg{display:block;}

/* ---- mobile ---- */
@media (max-width:760px){
  .blog-top{padding-bottom:4px;}
  .blog-top .nav{
    flex-direction:column;align-items:stretch;height:auto;gap:20px;padding:20px 16px 0;
  }
  .blog-head{width:auto;margin:26px 0 0;padding:0 20px;}
  .blog-title{font-size:40px;letter-spacing:-1px;}
  .blog-sub{font-size:16px;line-height:26px;}
  .blog-feed{padding:32px 16px 50px;}
  .blog-list,.blog-more{max-width:none;}
  .post-media.count-1 .pm{height:300px;}
  .post-media.count-2 .pm,.post-media.count-4 .pm{height:150px;}
  .post-media.count-3 .pm{height:150px;}
  .post-media.count-3 .pm:first-child{height:302px;}
}