/* BSRV blog post — rebuilt layout. Loaded by blog/post.php. */
:root{
  --bx-ink:#0a1410; --bx-ink2:#2b3a34; --bx-muted:#6b7b74;
  --bx-em:#0d9268; --bx-em2:#34d399; --bx-deep:#03110c;
  --bx-line:rgba(13,146,104,.14); --bx-paper:#fbfcfc;
  --bx-shadow:0 1px 2px rgba(6,22,16,.04),0 12px 34px -16px rgba(6,22,16,.26);
}

/* kill the old chrome */
.ph, .post-cover{display:none!important}
.post-content{max-width:none!important;margin:0!important;padding:0!important}
body{background:var(--bx-paper)}

/* ══ progress ══ */
#bx-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,#0d9268,#34d399,#6ee7b7);transition:width .08s linear}

/* ══ hero: the cover photo IS the hero ══════════════════════════════
   The image is never cropped. Its own aspect ratio sets the hero height,
   so the whole picture is visible on every screen. Wide enough and the
   title sits over the bottom of it; narrower than that and the title
   stacks underneath instead, because overlaying a 200px-tall strip on a
   phone would bury both the photo and the words. */
.bx-hero{position:relative;overflow:hidden;background:var(--bx-deep);display:block}
.bx-hero img{position:relative;display:block;width:100%;height:auto;
  object-fit:contain;transform:none}
.bx-hero .bx-scrim,.bx-hero .bx-grain{position:absolute;inset:0;z-index:1;pointer-events:none}
.bx-hero .bx-grain{opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top,transparent 35%,#000 100%);
          mask-image:linear-gradient(to top,transparent 35%,#000 100%)}
.bx-hero-in{position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;
  padding:26px 22px 34px}

/* ── Stacked: the photo whole, the words on a panel beneath it ── */
.bx-hero .bx-scrim{background:
    linear-gradient(to top,rgba(3,17,12,.5) 0%,transparent 42%),
    radial-gradient(ellipse 80% 55% at 78% 6%,rgba(16,185,129,.2) 0%,transparent 66%)}
.bx-hero-in{background:
    radial-gradient(ellipse 90% 150% at 85% 0%,rgba(16,185,129,.22) 0%,transparent 62%),
    linear-gradient(to bottom,rgba(3,17,12,.92),#03110c 55%)}

/* ── Wide screens: enough height to set the title over the picture ── */
@media(min-width:901px){
  .bx-hero-in{position:absolute;left:0;right:0;bottom:0;background:none;
    padding:0 28px clamp(34px,4vw,56px)}
  .bx-hero-in > *{max-width:1120px;margin-left:auto;margin-right:auto}
  .bx-hero .bx-scrim{background:
    linear-gradient(to right,rgba(3,17,12,.94) 0%,rgba(3,17,12,.86) 32%,
                    rgba(3,17,12,.54) 54%,rgba(3,17,12,.18) 76%,rgba(3,17,12,.03) 100%),
    linear-gradient(to top,rgba(3,17,12,.96) 0%,rgba(3,17,12,.72) 30%,
                    rgba(3,17,12,.3) 60%,rgba(3,17,12,.06) 86%,transparent 100%),
    radial-gradient(ellipse 70% 56% at 82% 4%,rgba(16,185,129,.3) 0%,transparent 64%)}
}

.bx-crumb{display:inline-flex;align-items:center;gap:7px;padding:7px 15px 7px 11px;
  border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.88);text-decoration:none;
  backdrop-filter:blur(8px);transition:background .25s,transform .25s}
.bx-crumb:hover{background:rgba(255,255,255,.18);transform:translateX(-3px)}
.bx-crumb svg{width:14px;height:14px}
.bx-chip{display:inline-block;margin-left:9px;padding:6px 14px;border-radius:999px;
  background:rgba(52,211,153,.18);border:1px solid rgba(52,211,153,.4);color:#6ee7b7;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(8px)}
.bx-hero-in .bx-crumb,.bx-hero-in .bx-chip{position:relative}
.bx-title{font-family:'Poppins',sans-serif;font-weight:800;color:#fff;
  font-size:clamp(28px,4.3vw,50px);line-height:1.08;letter-spacing:-.03em;
  margin:22px 0 0;max-width:22ch;text-wrap:balance;
  text-shadow:0 2px 28px rgba(0,0,0,.4)}
.bx-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px;
  font-size:13.4px;color:rgba(255,255,255,.66)}
.bx-meta b{color:#fff;font-weight:700}
.bx-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:14px;color:#03110c;
  background:linear-gradient(135deg,#6ee7b7,#34d399);
  box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.bx-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ══ two-column editorial body ══ */
.bx-wrap{max-width:1120px;margin:0 auto;padding:clamp(38px,5vw,66px) 28px 0;
  display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
@media(min-width:1024px){
  .bx-wrap{grid-template-columns:186px minmax(0,1fr);gap:58px}
  .bx-rail{position:sticky;top:92px}
}
.bx-rail{display:flex;flex-direction:column;gap:18px}
.bx-rail-h{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bx-muted)}
.bx-share{display:flex;flex-wrap:wrap;gap:8px}
@media(min-width:1024px){.bx-share{flex-direction:column}}
.bx-share a,.bx-share button{display:inline-flex;align-items:center;gap:9px;
  padding:10px 14px;border-radius:12px;font-size:12.8px;font-weight:700;cursor:pointer;
  border:1px solid var(--bx-line);background:#fff;color:var(--bx-ink2);text-decoration:none;
  box-shadow:var(--bx-shadow);
  transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .24s,color .24s}
.bx-share a:hover,.bx-share button:hover{transform:translateY(-2px);
  border-color:rgba(13,146,104,.45);color:var(--bx-em)}
.bx-share svg{width:15px;height:15px;flex-shrink:0}

/* ══ article ══ */
.bx-article{min-width:0;max-width:720px}
.bx-article .post-body{font-size:18px!important;line-height:1.78!important;
  color:var(--bx-ink2)!important}
.bx-article .post-body > p:first-of-type{font-size:21px;line-height:1.62;
  color:var(--bx-ink);font-weight:450;letter-spacing:-.008em}
.bx-article .post-body p{margin-bottom:1.3em!important}
.bx-article .post-body h2{font-family:'Poppins',sans-serif;border-left:0!important;
  padding:0!important;font-size:1.52em!important;font-weight:800!important;
  color:var(--bx-ink)!important;letter-spacing:-.025em;margin:2em 0 .6em!important;
  line-height:1.22}
.bx-article .post-body h3{font-size:1.18em!important;color:var(--bx-ink)!important;
  margin:1.7em 0 .45em!important;letter-spacing:-.015em}
.bx-article .post-body ul,.bx-article .post-body ol{margin:0 0 1.3em 1.25em!important}
.bx-article .post-body li{margin-bottom:.5em!important}
.bx-article .post-body li::marker{color:var(--bx-em);font-weight:700}
.bx-article .post-body blockquote{border:1px solid var(--bx-line)!important;
  border-left:3px solid var(--bx-em2)!important;border-radius:0 16px 16px 0!important;
  background:linear-gradient(135deg,#ecfdf5,#f6fefb)!important;color:#065f46!important;
  font-style:normal!important;font-weight:500;padding:20px 24px!important}
.bx-article .post-body img{border-radius:18px!important;box-shadow:var(--bx-shadow)!important}
.bx-article .post-body a{color:var(--bx-em)!important;font-weight:600;
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.bx-article .post-body strong{color:var(--bx-ink)!important}

/* ══ cards below ══ */
.bx-article .author-box,.bx-article .comments-section{border-radius:20px!important;
  border:1px solid var(--bx-line)!important;box-shadow:var(--bx-shadow)!important;
  background:#fff!important;padding:24px!important;margin-top:26px!important}
.bx-article .share-bar{display:none!important}   /* lives in the rail now */
.sec-eyebrow{font-size:10.5px!important;font-weight:800!important;letter-spacing:.13em!important;
  text-transform:uppercase;color:var(--bx-em)!important}
.sec-title{font-family:'Poppins',sans-serif;font-weight:800;color:var(--bx-ink);
  letter-spacing:-.022em;margin-top:6px!important}
.cf-field input,.cf-field textarea{border-radius:12px!important;
  border:1px solid var(--bx-line)!important;transition:border-color .22s,box-shadow .22s}
.cf-field input:focus,.cf-field textarea:focus{outline:none;
  border-color:rgba(13,146,104,.55)!important;box-shadow:0 0 0 3px rgba(13,146,104,.12)!important}

/* ══ related ══ */
.related-section{max-width:1120px;margin:64px auto 0!important;padding:0 28px 70px!important}
.related-grid{gap:20px!important}
.related-grid > a{border-radius:20px!important;overflow:hidden;background:#fff;display:block;
  border:1px solid var(--bx-line)!important;box-shadow:var(--bx-shadow)!important;
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s,border-color .34s}
.related-grid > a:hover{transform:translateY(-5px);
  box-shadow:0 14px 40px -14px rgba(13,146,104,.4)!important;
  border-color:rgba(13,146,104,.34)!important}
.related-cover{overflow:hidden}
.related-cover img{transition:transform .55s cubic-bezier(.22,1,.36,1)}
.related-grid > a:hover .related-cover img{transform:scale(1.06)}
.related-title-text{font-family:'Poppins',sans-serif;font-weight:700;color:var(--bx-ink);
  letter-spacing:-.015em}
.related-cat{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bx-em)}

@media(prefers-reduced-motion:reduce){
  .bx-crumb,.bx-share a,.bx-share button,.related-grid > a,.related-cover img{transition:none!important}
}