/* ==========================================================================
   Chi'Ella — THE JOURNAL (blog)
   Loaded after fixes.css on /blog and every post. Everything here is scoped to
   blog classes so it cannot reach the rest of the site.
   ========================================================================== */

/* ---------- index: filter chips ---------- */
.bl-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 38px}
.bl-chip{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid rgba(217,190,130,.34);
  border-radius:40px;padding:10px 20px;cursor:pointer;transition:.25s}
.bl-chip:hover{color:var(--gold-2);border-color:var(--gold)}
.bl-chip.on{background:var(--gold);border-color:var(--gold);color:#14120f;font-weight:600}

/* ---------- index: cards ---------- */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 12px 34px rgba(11,10,14,.07);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.bl-card:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(11,10,14,.14)}
.bl-card.hide{display:none}
.bl-img{aspect-ratio:16/10;overflow:hidden;background:#14120f}
.bl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bl-card:hover .bl-img img{transform:scale(1.06)}
.bl-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.bl-cat{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-2);display:flex;align-items:center;gap:9px}
.bl-cat i{font-style:normal;opacity:.45}
.bl-card h2{font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.28;margin:12px 0 10px;color:var(--ink)}
.bl-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 18px}
.bl-go{margin-top:auto;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-2);font-weight:500}
.bl-count{text-align:center;font-family:var(--sans);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:34px 0 0}

@media(max-width:980px){.bl-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:640px){
  .bl-grid{grid-template-columns:1fr;gap:18px}
  .bl-card h2{font-size:19px}
  .bl-bar{gap:8px}
  .bl-chip{font-size:11.5px;padding:9px 15px}
}

/* ---------- a post ---------- */
.post-hero{position:relative;isolation:isolate;padding:150px 0 62px;overflow:hidden;color:#fff}
.post-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--phero-img,none);background-size:cover;background-position:center;
  opacity:.5;transform:scale(1.04)}
.post-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,16,.80),rgba(14,13,16,.62) 42%,rgba(14,13,16,.94))}
.post-hero > .wrap{position:relative;z-index:2}
.post-hero h1{font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(28px,4.6vw,50px);line-height:1.14;margin:16px 0 0;max-width:19ch}
.post-meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:18px 0 0;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.post-meta i{font-style:normal;opacity:.45}

.post-wrap{max-width:760px}
.post-body{padding:56px 0 20px}
.post-intro{font-family:var(--serif);font-size:clamp(19px,2.3vw,24px);line-height:1.6;
  color:var(--ink);margin:0 0 34px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.post-body h2{font-family:var(--serif);font-size:clamp(22px,2.8vw,29px);font-weight:400;
  line-height:1.3;color:var(--ink);margin:44px 0 14px}
.post-body p{font-size:16.5px;line-height:1.85;color:#3d3a44;margin:0 0 18px}
.post-body ul{margin:0 0 22px;padding-left:0;list-style:none}
.post-body ul li{position:relative;padding-left:26px;margin-bottom:11px;
  font-size:16px;line-height:1.75;color:#3d3a44}
.post-body ul li::before{content:"";position:absolute;left:4px;top:11px;
  width:7px;height:7px;border-radius:50%;background:var(--gold)}
.post-body blockquote{margin:28px 0;padding:20px 24px;border-left:3px solid var(--gold);
  background:rgba(184,144,74,.06);font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink)}

/* in-article call to action */
.post-cta{margin:52px 0 0;padding:32px;border:1px solid rgba(184,144,74,.34);border-radius:18px;
  background:linear-gradient(160deg,rgba(184,144,74,.09),rgba(184,144,74,.03))}
.post-cta h3{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 10px;color:var(--ink)}
.post-cta p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 20px}
.post-cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* previous / next */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:48px 0 0}
.post-nav a{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:14px;
  text-decoration:none;transition:.3s;background:#fff}
.post-nav a:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 32px rgba(11,10,14,.09)}
.post-nav i{display:block;font-style:normal;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);margin-bottom:8px}
.post-nav b{font-family:var(--serif);font-size:16.5px;font-weight:400;line-height:1.35;color:var(--ink)}
.post-nav .pn-next{text-align:right}

/* read next */
.post-rel{margin:56px 0 20px}
.post-rel h3{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 20px;color:var(--ink)}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rel-card{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);
  border-radius:14px;text-decoration:none;background:#fff;transition:.3s}
.rel-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.rel-card img{width:84px;height:64px;object-fit:cover;border-radius:9px;flex:0 0 auto}
.rel-card i{display:block;font-style:normal;font-family:var(--sans);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:5px}
.rel-card b{font-family:var(--serif);font-size:15px;font-weight:400;line-height:1.35;color:var(--ink)}

@media(max-width:760px){
  .post-hero{padding:118px 0 46px}
  .post-body{padding:38px 0 12px}
  .post-body p{font-size:16px}
  .post-cta{padding:24px 20px}
  .post-cta-row .btn{width:100%;justify-content:center}
  .post-nav{grid-template-columns:1fr}
  .post-nav .pn-next{text-align:left}
  .rel-grid{grid-template-columns:1fr}
}

/* --- the way out of a post: real buttons, not a 12px breadcrumb (2026-08-15) --- */
.post-exit{display:flex;gap:14px;flex-wrap:wrap;margin:44px 0 8px;
  padding-top:26px;border-top:1px solid rgba(20,19,23,.12)}
.post-exit .btn{min-height:56px;font-size:16px;font-weight:700;padding:16px 28px}
@media(max-width:700px){
  .post-exit{flex-direction:column}
  .post-exit .btn{width:100%;justify-content:center}
}