/* ══════════════════════════════════════════════════
   BARK BALLS — BLOG STYLES
   Additive layer. Requires bark.css (tokens, nav,
   footer, buttons) to be loaded first.
   ══════════════════════════════════════════════════ */

/* ---- shared section shell (blog pages don't load the
        page-level section classes, so redeclare minimally) ---- */
.bl-sec{padding:4.5rem 7%;}
.bl-wrap{max-width:1180px;margin:0 auto;}
.bl-sec-w{background:var(--w);}
.bl-sec-iv{background:var(--iv);}

/* focus visibility for keyboard users (accessibility req) */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--b);outline-offset:2px;border-radius:2px;}

/* ---- HERO ---- */
.bl-hero{background:var(--g);padding:4.5rem 7% 4rem;position:relative;overflow:hidden;}
.bl-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 20%,rgba(212,233,16,.09) 0%,transparent 60%);pointer-events:none;}
.bl-hero-in{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.bl-hero h1{font-family:'Fraunces',serif;font-size:clamp(2.3rem,5vw,3.6rem);font-weight:900;
  color:var(--w);line-height:1.05;letter-spacing:-.025em;margin-bottom:1.1rem;}
.bl-hero p{font-size:1.1rem;color:rgba(255,255,255,.72);line-height:1.75;max-width:600px;margin:0 auto;}

/* ---- FEATURED POST ---- */
.bl-featured{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--w);
  border:2px solid var(--bdr);border-radius:12px;overflow:hidden;transition:box-shadow .2s,transform .2s;}
.bl-featured:hover{box-shadow:0 20px 50px rgba(26,92,42,.12);transform:translateY(-3px);}
.bl-featured-img{position:relative;min-height:340px;background:var(--sg);}
.bl-featured-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.bl-featured-tag{position:absolute;top:1.25rem;left:1.25rem;z-index:2;
  background:var(--y);color:var(--g);font-size:.62rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:.35rem .8rem;border-radius:3px;}
.bl-featured-body{padding:2.75rem;display:flex;flex-direction:column;justify-content:center;}
.bl-featured-eyebrow{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--b);margin-bottom:.85rem;}
.bl-featured-body h2{font-family:'Fraunces',serif;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:900;
  color:var(--g);line-height:1.15;letter-spacing:-.02em;margin-bottom:.9rem;}
.bl-featured-body p{font-size:.95rem;color:var(--mu);line-height:1.75;margin-bottom:1.5rem;}
.bl-meta{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--mu);margin-bottom:1.5rem;flex-wrap:wrap;}
.bl-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--bdr);}
@media(max-width:820px){.bl-featured{grid-template-columns:1fr;}.bl-featured-img{min-height:240px;}
  .bl-featured-body{padding:2rem;}}

/* ---- CATEGORY FILTER ---- */
.bl-filter{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:3rem;}
.bl-chip{font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:700;
  padding:.55rem 1.15rem;border-radius:100px;border:2px solid var(--bdr);background:var(--w);
  color:var(--mu);cursor:pointer;transition:all .18s;}
.bl-chip:hover{border-color:var(--b);color:var(--b);}
.bl-chip[aria-pressed="true"]{background:var(--g);border-color:var(--g);color:var(--w);}

/* ---- ARTICLE CARD GRID ---- */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.85rem;}
.bl-card{background:var(--w);border:2px solid var(--bdr);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:all .2s;}
.bl-card:hover{border-color:var(--g);transform:translateY(-4px);box-shadow:0 16px 38px rgba(26,92,42,.1);}
.bl-card-img{position:relative;aspect-ratio:16/10;background:var(--sg);overflow:hidden;}
.bl-card-img img{width:100%;height:100%;object-fit:cover;}
.bl-card-tag{position:absolute;top:.9rem;left:.9rem;background:var(--w);color:var(--g);
  font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.bl-card-body{padding:1.5rem 1.5rem 1.7rem;flex:1;display:flex;flex-direction:column;}
.bl-card-body h3{font-family:'Fraunces',serif;font-size:1.18rem;font-weight:700;color:var(--g);
  line-height:1.25;margin-bottom:.55rem;}
.bl-card-body p{font-size:.86rem;color:var(--mu);line-height:1.65;margin-bottom:1.15rem;flex:1;}
.bl-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding-top:1.15rem;border-top:1px solid var(--bdr);}
.bl-card-meta{font-size:.72rem;color:var(--mu);}
.bl-read{font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--b);
  display:inline-flex;align-items:center;gap:.35rem;transition:gap .18s;}
.bl-card:hover .bl-read{gap:.6rem;}
.bl-card.is-hidden{display:none;}
.bl-empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--mu);font-size:.95rem;display:none;}
@media(max-width:900px){.bl-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.bl-grid{grid-template-columns:1fr;}}

/* ---- NEWSLETTER CTA ---- */
.bl-news{background:var(--g);border-radius:14px;padding:3.25rem 2.5rem;text-align:center;position:relative;overflow:hidden;}
.bl-news::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(212,233,16,.1) 0%,transparent 60%);pointer-events:none;}
.bl-news-in{position:relative;z-index:1;max-width:560px;margin:0 auto;}
.bl-news h2{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:900;color:var(--w);margin-bottom:.7rem;}
.bl-news p{font-size:.95rem;color:rgba(255,255,255,.68);line-height:1.7;margin-bottom:1.75rem;}
.bl-news-form{display:grid;grid-template-columns:1fr 1fr auto;gap:.6rem;}
.bl-news-form input{padding:.9rem 1.1rem;border:2px solid rgba(255,255,255,.2);border-radius:5px;
  background:rgba(255,255,255,.07);color:var(--w);font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;}
.bl-news-form input::placeholder{color:rgba(255,255,255,.4);}
.bl-news-form input:focus{outline:none;border-color:var(--y);}
.bl-news .form-success{display:none;color:var(--w);}
.bl-news .form-success h3{font-family:'Fraunces',serif;font-size:1.4rem;margin-bottom:.4rem;}
.bl-news .form-success p{color:rgba(255,255,255,.65);margin:0;}
@media(max-width:600px){.bl-news-form{grid-template-columns:1fr;}}

/* ---- FINAL CTA STRIP ---- */
.bl-cta{background:var(--gd);padding:5rem 7%;text-align:center;position:relative;overflow:hidden;}
.bl-cta::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(212,233,16,.08) 0%,transparent 62%);pointer-events:none;}
.bl-cta-in{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.bl-cta h2{font-family:'Fraunces',serif;font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:900;
  color:var(--w);line-height:1.08;letter-spacing:-.02em;margin-bottom:1rem;}
.bl-cta p{color:rgba(255,255,255,.68);font-size:1rem;margin-bottom:2rem;line-height:1.7;}
.bl-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ══════════════════════════════════════════════════
   ARTICLE PAGE
   ══════════════════════════════════════════════════ */
.art-head{background:var(--iv);padding:2.5rem 7% 0;}
.art-head-in{max-width:760px;margin:0 auto;}
.bl-crumb{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--mu);margin-bottom:1.5rem;flex-wrap:wrap;}
.bl-crumb a{color:var(--b);font-weight:700;}
.bl-crumb a:hover{text-decoration:underline;}
.bl-crumb .sep{color:var(--bdr);}
.art-cat{display:inline-block;background:var(--y);color:var(--g);font-size:.64rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:.32rem .8rem;border-radius:3px;margin-bottom:1.1rem;}
.art-head h1{font-family:'Fraunces',serif;font-size:clamp(2rem,4.2vw,3rem);font-weight:900;color:var(--g);
  line-height:1.1;letter-spacing:-.025em;margin-bottom:1.1rem;}
.art-head .bl-meta{margin-bottom:2.25rem;}
.art-hero-img{max-width:960px;margin:0 auto;padding:0 7%;}
.art-hero-img img{width:100%;border-radius:12px;aspect-ratio:16/9;object-fit:cover;background:var(--sg);
  margin-top:-.5rem;}

/* article body — comfortable reading width */
.art-body{max-width:720px;margin:0 auto;padding:3.5rem 7% 4rem;}
.art-body p{font-size:1.05rem;color:var(--tx);line-height:1.85;margin-bottom:1.4rem;}
.art-body h2{font-family:'Fraunces',serif;font-size:1.7rem;font-weight:900;color:var(--g);
  line-height:1.2;letter-spacing:-.01em;margin:2.75rem 0 1rem;scroll-margin-top:90px;}
.art-body h3{font-family:'Fraunces',serif;font-size:1.22rem;font-weight:700;color:var(--tx);
  line-height:1.3;margin:2rem 0 .75rem;scroll-margin-top:90px;}
.art-body ul,.art-body ol{margin:0 0 1.4rem 1.3rem;}
.art-body li{font-size:1.05rem;color:var(--tx);line-height:1.8;margin-bottom:.5rem;padding-left:.3rem;}
.art-body a:not(.btn){color:var(--bd);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.art-body a:not(.btn):hover{color:var(--g);}
.art-body strong{color:var(--tx);font-weight:700;}

/* table of contents */
.art-toc{background:var(--iv);border:1px solid var(--bdr);border-radius:10px;padding:1.5rem 1.75rem;margin-bottom:2.5rem;}
.art-toc-title{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu);margin-bottom:.85rem;}
.art-toc ol{margin:0 0 0 1.1rem;}
.art-toc li{font-size:.9rem;line-height:1.6;margin-bottom:.4rem;color:var(--mu);}
.art-toc a{color:var(--b);font-weight:600;text-decoration:none;}
.art-toc a:hover{text-decoration:underline;}

/* mission / impact callout */
.art-callout{background:var(--bll);border-left:4px solid var(--b);border-radius:8px;
  padding:1.85rem 2rem;margin:2.5rem 0;}
.art-callout h3{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700;color:var(--g);
  margin:0 0 .5rem;}
.art-callout p{font-size:.95rem;color:var(--tx);line-height:1.75;margin:0;}
.art-callout p + p{margin-top:.75rem;}

/* inline article CTA buttons row */
.art-btns{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--bdr);}

/* related posts */
.bl-related h2{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:900;color:var(--g);
  text-align:center;margin-bottom:2.25rem;letter-spacing:-.01em;}

/* FAQ inside article */
.art-faq details{border-bottom:1px solid var(--bdr);padding:1.15rem 0;}
.art-faq summary{font-family:'Fraunces',serif;font-size:1.02rem;font-weight:700;color:var(--g);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.art-faq summary::-webkit-details-marker{display:none;}
.art-faq summary::after{content:'+';font-size:1.4rem;font-weight:400;color:var(--b);flex-shrink:0;
  transition:transform .2s;}
.art-faq details[open] summary::after{transform:rotate(45deg);}
.art-faq details p{font-size:.95rem;color:var(--mu);line-height:1.75;margin-top:.8rem;}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}