/* ============================================================
   BYC 2026 - Blog index (home-2026.php) + single post
   (single-post-2026.php). Loads AFTER byc.css (tokens, atoms,
   .frame brackets, grain); the single post also loads
   byc-content.css (the .prose reading article body).

   EDITORIAL register: the index uses clean SOFT (6px) cards, not
   the product corner-bracket cards - blog posts are content, not
   instruments. The single-post FEATURED image keeps the brand
   corner-bracket .frame (like the About cover) as the one
   deliberate "brand media" moment.
   ============================================================ */

/* ---------- shared meta line (mono, dot-separated) ---------- */
.bmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);line-height:1}
.bmeta .bcat{color:var(--accent-dim)}
.bmeta .bsep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);flex:none}
.bmeta time{color:var(--text-muted)}

/* ============================================================
   BLOG INDEX
   ============================================================ */
.bloglist{padding-bottom:var(--space-20)}

/* card atom - shared by the hero, the grid and the related strip */
.bpost{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;transition:.2s ease;color:inherit;position:relative}
.bpost:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.bpost-img{display:block;background:var(--inset);overflow:hidden;
  border-bottom:1px solid var(--line)}
.bpost-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s ease}
.bpost:hover .bpost-img img{transform:scale(1.025)}
.bpost-body{padding:22px 24px 26px}
.bpost .bmeta{margin-bottom:14px}
.bpost-title{font-family:var(--sans);color:var(--text);font-weight:700;
  letter-spacing:-.02em;line-height:1.22;font-size:21px;margin:0 0 12px}
.bpost:hover .bpost-title{color:#fff}
.bpost-exc{color:var(--text-read);font-weight:var(--weight-read);
  font-size:16px;line-height:1.55;margin:0 0 18px}
.bread{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);transition:.18s}
.bread svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:.18s}
.bpost:hover .bread{color:var(--accent-dim)}
.bpost:hover .bread svg{transform:translateX(3px)}

/* HERO card (latest post): 2-col on desktop, image left */
.bpost-hero{margin-bottom:28px}
.bpost-hero .bpost-img{aspect-ratio:16/10}
@media(min-width:861px){
  .bpost-hero{display:grid;grid-template-columns:1.12fr .88fr;align-items:stretch}
  .bpost-hero .bpost-img{aspect-ratio:auto;height:100%;border-bottom:0;
    border-right:1px solid var(--line)}
  .bpost-hero .bpost-body{padding:42px 46px;display:flex;flex-direction:column;
    justify-content:center}
  .bpost-hero .bpost-title{font-size:clamp(26px,2.6vw,34px);margin-bottom:16px}
  .bpost-hero .bpost-exc{font-size:17px;margin-bottom:24px}
}

/* GRID (remaining posts) */
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bgrid .bpost-img{aspect-ratio:16/9}
@media(max-width:680px){.bgrid{grid-template-columns:1fr;gap:22px}}

/* pagination (the_posts_pagination -> .page-numbers) */
.blog-pager{margin-top:48px;display:flex;justify-content:center}
.blog-pager .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.blog-pager .page-numbers{font-family:var(--mono);font-size:var(--fs-2xs);
  letter-spacing:.06em;min-width:42px;height:42px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:6px;color:var(--text-muted);padding:0 14px;transition:.16s}
.blog-pager a.page-numbers:hover{border-color:var(--line-strong);color:var(--text)}
.blog-pager .page-numbers.current{background:var(--surface-2);color:var(--text);
  border-color:var(--line-strong)}

/* ============================================================
   SINGLE POST
   ============================================================ */
.single-post{padding-bottom:var(--space-12)}
.post-head{padding:64px 0 0}
.post-head .eyebrow{margin-bottom:18px}
.post-head .h-display{font-size:var(--display-lg);margin:0 0 18px;max-width:20ch}
.post-head .bmeta{margin:0}

/* featured-image hero: brand corner-bracket .frame (like the About cover) */
.post-figure{margin:40px 0 8px}
.post-figure .inset{background:var(--inset);border:1px solid var(--line);overflow:hidden}
.post-figure .inset img{width:100%;height:auto;display:block}

/* article body uses .prose (byc-content.css); nudge it under the hero */
.single-post .prose{padding-top:34px}

/* foot: back-to-blog link */
.post-foot{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.post-back{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);transition:.18s}
.post-back:hover{color:var(--text)}
.post-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* related posts strip */
.related{border-top:1px solid var(--line);padding-top:46px;margin-top:8px}
.related .eyebrow{margin-bottom:26px}
.related-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
.related-grid .bpost-img{aspect-ratio:16/9}
.related-grid .bpost-title{font-size:17px}
@media(max-width:760px){.related-grid{grid-template-columns:1fr;gap:18px}}

/* ---------- responsive ---------- */
@media(max-width:600px){
  .bpost-body{padding:20px 20px 24px}
  .post-head{padding-top:40px}
}

/* pulse keyframes (standing rule: every 2026 stylesheet ships them) */
@keyframes bycPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}
  50%{box-shadow:0 0 0 8px rgba(242,32,46,.07)}}