/* ===================================================================
   OG NETWORK — the blog (/blog and /post/<slug>). Sits on top of site.css:
   same noir, same gold, same type; cards and prose are the only new parts.
   =================================================================== */
.blog-page { padding-top: var(--nav-h); }
.nav-links a.on { opacity: 1; }
.nav-links a.on::after { right: 0; }

/* ---------------- blog header ---------------- */
.blog { position: relative; z-index: 2; }
.blog-head { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 7vh, 88px) var(--pad) clamp(22px, 4vh, 40px); }
.blog-h {
  margin-top: 4px; font-size: clamp(34px, 5.4vw, 66px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.02;
  color: #fff; text-wrap: balance; max-width: 24ch;
}
.blog-head .sec-sub { max-width: 64ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(203,182,130,0.32); color: var(--pearl); font-size: 13.5px; font-weight: 700;
  background: rgba(255,255,255,0.03); transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.18s var(--ease);
}
.chip b { color: var(--muted); font-weight: 700; }
.chip:hover { border-color: rgba(203,182,130,0.7); transform: translateY(-1px); }
.chip.on { color: #16130d; border-color: transparent; background: linear-gradient(135deg, #f6e7bd, #cbb682 45%, #a7865d); }
.chip.on b { color: rgba(22,19,13,0.62); }

/* ---------------- post cards ---------------- */
.featured, .grid-wrap { max-width: calc(1180px + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.featured { margin-bottom: clamp(18px, 3vh, 30px); }
.featured[hidden] { display: none; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.pgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pgrid-3 { grid-template-columns: minmax(0, 1fr); } }
.pc {
  display: flex; flex-direction: column; position: relative; border-radius: 16px; overflow: hidden;
  background: var(--noir-3); outline: 1px solid rgba(255,255,255,0.06); outline-offset: -1px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), outline-color 0.3s var(--ease);
}
.pc:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(0,0,0,0.6); outline-color: rgba(203,182,130,0.7); }
.pc.hide { display: none; }
.pc-art { display: block; aspect-ratio: 40 / 21; background: #0b0b0b; overflow: hidden; }
.pc-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pc:hover .pc-art img { transform: scale(1.04); }
.pc-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 16px 18px 20px; }
.pc-kind { font-size: 11px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold-soft); }
.pc-title { font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.pc-ex { color: #bdb6a7; font-size: 14px; line-height: 1.55; }
.pc-meta { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }

.pc-big { flex-direction: row; }
.pc-big .pc-art { flex: 0 0 58%; aspect-ratio: 40 / 21; }
.pc-big .pc-body { justify-content: center; gap: 12px; padding: clamp(20px, 3vw, 44px); }
.pc-big .pc-title { font-size: clamp(22px, 2.8vw, 38px); letter-spacing: -0.025em; line-height: 1.08; }
.pc-big .pc-ex { font-size: 15.5px; line-height: 1.6; }
.pc-big .pc-meta { margin-top: 4px; }
@media (max-width: 820px) { .pc-big { flex-direction: column; } .pc-big .pc-art { flex: none; } }

.more-wrap { text-align: center; margin-top: clamp(24px, 4vh, 36px); }
.more-wrap button[hidden] { display: none; }
.grid-empty { text-align: center; color: var(--muted); padding: 40px 0; }
.grid-empty[hidden] { display: none; }

/* ---------------- a post ---------------- */
.post { position: relative; z-index: 2; padding-top: clamp(26px, 5vh, 56px); }
.post-head { max-width: calc(860px + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.crumb { display: flex; width: max-content; align-items: center; gap: 7px; margin-bottom: 22px; font-size: 13px; font-weight: 700; color: var(--muted); transition: color 0.2s var(--ease); }
.crumb:hover { color: var(--gold-soft); }
.post-title {
  margin-top: 4px; font-size: clamp(30px, 4.6vw, 58px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.04;
  color: #fff; text-wrap: balance;
}
.post-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--pearl); opacity: 0.85; }
.post-meta .sep { margin: 0 9px; opacity: 0.45; }
.post-lede { margin-top: 18px; max-width: 64ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: #d9d3c6; }

.post-cover {
  position: relative; overflow: hidden; border-radius: 18px; background: #000;
  width: min(960px, calc(100% - 2 * var(--pad))); margin: clamp(26px, 4vh, 40px) auto 0;
  outline: 1px solid rgba(255,255,255,0.06); outline-offset: -1px;
}
.post-cover .cover-bg { display: none; }
.post-cover .cover-main { position: relative; width: 100%; height: auto; }
.post-cover.is-portrait { aspect-ratio: 16 / 10; }
.post-cover.is-portrait .cover-bg {
  display: block; position: absolute; inset: -12%; width: 124%; max-width: none; height: 124%; object-fit: cover;
  filter: blur(34px) brightness(0.45) saturate(1.1);
}
.post-cover.is-portrait .cover-main { height: 100%; object-fit: contain; }
@media (max-width: 600px) { .post-cover.is-portrait { aspect-ratio: 4 / 5; } }

.prose {
  max-width: calc(740px + 2 * var(--pad)); margin: clamp(26px, 4vh, 44px) auto 0; padding: 0 var(--pad);
  font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.72; color: #d9d3c6; overflow-wrap: anywhere;
}
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; }
.prose p.ta-center { text-align: center; }
.prose p.ta-right { text-align: right; }
.prose p.ta-justify { text-align: justify; }
.prose h2 { margin: 1.9em 0 0.6em; font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; color: #fff; }
.prose h3 { margin: 1.6em 0 0.5em; font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: #fff; }
.prose h4 { margin: 1.5em 0 0.5em; font-size: 12.5px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold-soft); }
.prose strong { color: #fff; font-weight: 800; }
.prose u { text-decoration: underline; text-decoration-color: rgba(203,182,130,0.55); text-underline-offset: 3px; }
.prose a { color: var(--gold-soft); text-decoration: underline; text-decoration-color: rgba(203,182,130,0.45); text-underline-offset: 3px; transition: color 0.2s var(--ease); }
.prose a:hover { color: #fff; text-decoration-color: var(--gold); }
.prose a.watch {
  display: inline-flex; align-items: center; gap: 9px; margin: 2px 0; padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #16130d; text-decoration: none;
  background: linear-gradient(135deg, #f6e7bd, #cbb682 45%, #a7865d); box-shadow: 0 10px 26px rgba(203,182,130,0.22);
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}
.prose a.watch::before { content: ""; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.prose a.watch:hover { color: #16130d; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(203,182,130,0.38); }
.prose ul, .prose ol { margin: 0 0 1.3em 1.35em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--gold); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold); color: #efe9dc; font-size: 1.06em; }
.prose hr { border: 0; height: 1px; margin: 2.2em 0; background: rgba(203,182,130,0.25); }
.prose pre { overflow: auto; padding: 16px; border-radius: 12px; background: #0b0b0b; font-size: 0.9em; }
.prose figure { margin: 2em 0; }
.prose figure.rc-img img { width: 100%; height: auto; border-radius: 14px; background: var(--noir-3); }
.prose figure.rc-img.is-portrait img { width: auto; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.prose .rc-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
.yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.86; transition: opacity 0.3s var(--ease), transform 0.6s var(--ease); }
.yt:hover img { opacity: 1; transform: scale(1.02); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.yt-play svg {
  width: 76px; height: 76px; padding: 20px; border-radius: 50%;
  background: rgba(16,16,16,0.72); border: 1px solid rgba(203,182,130,0.6); box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.yt-play:hover svg { transform: scale(1.06); background: var(--gold); color: #16130d; }

.post-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  max-width: calc(740px + 2 * var(--pad)); margin: 30px auto 0; padding: 0 var(--pad);
}
.post-share::before { content: ""; flex: 0 0 100%; height: 1px; margin-bottom: 8px; background: rgba(203,182,130,0.18); }
.share-l { margin-right: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); }
.share-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(203,182,130,0.4); font-size: 13px; font-weight: 700;
  color: var(--pearl); background: rgba(255,255,255,0.03); transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.share-btn:hover { background: rgba(203,182,130,0.14); }
.share-btn.done { background: var(--gold); color: #16130d; border-color: transparent; }

/* ---------------- the watch band + more posts ---------------- */
.blog-cta { padding: clamp(40px, 7vh, 80px) var(--pad) 0; }
.blog-cta-inner {
  position: relative; overflow: hidden; max-width: 1180px; margin: 0 auto; border-radius: 22px; padding: clamp(28px, 5vw, 60px);
  background: radial-gradient(120% 140% at 90% 10%, rgba(203,182,130,0.16), rgba(203,182,130,0) 60%), linear-gradient(180deg, #17140f, #100e0c);
  border: 1px solid rgba(203,182,130,0.26);
}
.blog-cta-inner .sec-sub { max-width: 58ch; }
.blog-cta-inner .hero-cta { margin-top: 24px; }
.blog .blog-cta { margin-bottom: clamp(20px, 4vh, 40px); }
.post-more { max-width: calc(1180px + 2 * var(--pad)); margin: 0 auto; padding: clamp(40px, 7vh, 80px) var(--pad) clamp(30px, 5vh, 50px); }
.post-more .sec-head { padding: 0; }
.more-all { text-align: center; margin-top: 28px; }

/* ---------------- the home page's "From the blog" ---------------- */
.blog-home .pgrid { padding: 0 var(--pad); }

@media (prefers-reduced-motion: reduce) {
  .pc, .pc-art img, .yt img, .chip, .prose a.watch { transition: none; }
}