/* ============================================================
   Bri'Lasha Blog — shared post stylesheet
   Used by all individual blog post pages under /blog/*.html
   Index page (/blog/index.html) has its own inline grid styles.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#080808;--ink:#101010;--panel:#161616;
  --line:rgba(78,205,196,.18);
  --teal:#4ecdc4;--gold:#d8b56d;--coral:#ff7a6b;--cream:#f6f1e8;
  --white:#fff;--text:#dcd6c9;--muted:#9b9b9b;--warn:#ffb86b
}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.78;-webkit-font-smoothing:antialiased;font-size:17px
}
a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold)}

.nav{position:sticky;top:0;z-index:20;background:rgba(8,8,8,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(78,205,196,.14)}
.nav-inner{max-width:780px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-back{font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:600;text-decoration:none}
.nav-back:hover{color:var(--teal)}
.nav-brand{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:var(--gold);text-decoration:none}

.hero{padding:60px 24px 36px;max-width:780px;margin:0 auto;text-align:center}
.hero .tag{display:inline-block;font-family:Montserrat,sans-serif;font-size:10.5px;letter-spacing:4px;text-transform:uppercase;color:var(--coral);font-weight:800;margin-bottom:18px}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,5.6vw,64px);line-height:1.04;font-weight:500;color:#fff;margin-bottom:18px;letter-spacing:-.5px}
.hero h1 em{color:var(--gold);font-style:italic}
.byline{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:700;padding-top:22px;border-top:1px solid var(--line);margin-top:24px}
.byline span{color:var(--text)}

article.post{max-width:740px;margin:30px auto 80px;padding:0 24px}
article.post p{margin:0 0 22px;color:var(--text);font-size:17.5px;line-height:1.78}
article.post p.lede{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--cream);line-height:1.5;margin-bottom:30px;padding-left:18px;border-left:3px solid var(--gold)}
article.post h2{font-family:'Cormorant Garamond',serif;font-size:38px;line-height:1.1;font-weight:500;color:#fff;margin:48px 0 18px;letter-spacing:-.4px}
article.post h2 em{color:var(--gold);font-style:italic}
article.post h3{font-family:Inter,sans-serif;font-size:22px;font-weight:700;color:#fff;margin:32px 0 14px}
article.post ul,article.post ol{margin:0 0 22px;padding-left:26px;color:var(--text);font-size:17.5px}
article.post li{margin-bottom:10px;line-height:1.7}
article.post strong{color:#fff}
article.post em{color:var(--cream)}

.box{padding:24px 28px;border-radius:10px;margin:30px 0;font-size:16px}
.box.good{background:linear-gradient(135deg,rgba(78,205,196,.10),rgba(78,205,196,.04));border:1px solid rgba(78,205,196,.4)}
.box.bad{background:linear-gradient(135deg,rgba(255,184,107,.10),rgba(255,184,107,.04));border:1px solid rgba(255,184,107,.4)}
.box.ugly{background:linear-gradient(135deg,rgba(255,122,107,.10),rgba(255,122,107,.04));border:1px solid rgba(255,122,107,.4)}
.box .lbl{font-family:Montserrat,sans-serif;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;font-weight:900;margin-bottom:8px;display:block}
.box.good .lbl{color:var(--teal)}
.box.bad .lbl{color:var(--warn)}
.box.ugly .lbl{color:var(--coral)}

.callout{padding:20px 24px;border-left:3px solid var(--gold);background:rgba(216,181,109,.06);margin:26px 0;font-size:16px;color:var(--cream);font-style:italic;font-family:'Cormorant Garamond',serif;line-height:1.55}

.faq{margin:60px 0 30px}
.faq h2{margin-bottom:24px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px 26px;margin-bottom:14px}
.faq-item h4{font-family:Inter,sans-serif;font-size:18px;font-weight:600;color:#fff;margin-bottom:10px}
.faq-item p{font-size:16px;color:var(--text);margin:0}

.sources{margin:50px 0 30px;padding:28px;background:rgba(216,181,109,.04);border:1px solid rgba(216,181,109,.18);border-radius:10px}
.sources h3{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:18px}
.sources ol{padding-left:22px;font-size:14.5px;color:var(--text)}
.sources li{margin-bottom:10px;line-height:1.55}
.sources li a{color:var(--teal);font-style:italic}

.disclosure{margin:30px 0;padding:18px 22px;background:rgba(255,122,107,.06);border:1px solid rgba(255,122,107,.25);border-radius:8px;font-size:14px;color:var(--cream)}
.disclosure strong{color:var(--coral)}

.cta-block{margin:50px 0 30px;padding:36px 30px;background:linear-gradient(135deg,#1a1004,#0c0c0c,#1a1004);border:1px solid rgba(216,181,109,.4);border-radius:12px;text-align:center}
.cta-block h3{font-family:'Cormorant Garamond',serif;font-size:34px;color:#fff;font-weight:500;margin-bottom:12px}
.cta-block h3 em{color:var(--gold);font-style:italic}
.cta-block p{color:var(--cream);margin-bottom:24px;font-size:16px}
.cta-btn{display:inline-block;background:linear-gradient(180deg,var(--gold),#bc9a55);color:var(--black);font-family:Montserrat,sans-serif;font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;font-weight:900;padding:18px 36px;border-radius:6px;text-decoration:none}

.credentials{margin:60px 0 30px;padding:26px;background:rgba(20,20,20,.6);border:1px solid var(--line);border-radius:10px;font-size:14.5px}
.credentials .lbl{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:10px;display:block}
.credentials p{font-size:14.5px;color:var(--text);margin:0;line-height:1.6}
.credentials strong{color:#fff}

footer{padding:40px 24px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:12px}
footer a{color:var(--teal)}

@media(max-width:600px){
  body{font-size:16px}
  article.post p,article.post ul,article.post ol{font-size:16.5px}
  article.post h2{font-size:30px}
  article.post h3{font-size:20px}
  article.post p.lede{font-size:19px}
}