/* BLOG — compact, readable, dark */
:root{--accent:#367362;--accent-soft:#8caf9f}

.b-hero{position:relative;overflow:hidden;min-height:64svh;display:flex;align-items:flex-end;padding:150px clamp(16px,7vw,110px) clamp(70px,9vw,130px);background:#070707;border-bottom:1px solid rgba(240,240,240,.06)}
.b-hero-grid{position:absolute;inset:0;z-index:-2;opacity:.09;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:clamp(64px,9vw,140px) clamp(64px,9vw,140px);mask-image:radial-gradient(circle at center,#000 5%,transparent 72%)}
.b-hero-aura{position:absolute;z-index:-1;right:-8%;bottom:-42%;width:min(70vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(54,115,98,.13),rgba(54,115,98,.035) 42%,transparent 70%)}
.b-hero-inner{width:100%;max-width:1120px;margin:0 auto}
.b-hero-index{margin-bottom:clamp(42px,8vw,110px);font-size:8px;letter-spacing:.42em;color:rgba(240,240,240,.22)}
.b-label{display:flex;align-items:center;gap:12px;font-size:9px;font-weight:400;letter-spacing:.5em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.b-label::before{content:'';width:28px;height:1px;background:var(--accent)}
.b-hero h1{font-size:clamp(48px,8.5vw,126px);font-weight:850;line-height:.86;letter-spacing:-.07em}
.b-hero h1 em{font-style:normal;font-weight:250;color:var(--accent-soft)}
.b-hero-copy{max-width:510px;margin-top:30px;font-size:14px;line-height:1.9;color:rgba(240,240,240,.42)}

.b-section{padding:clamp(60px,7vw,100px) clamp(16px,4vw,48px)}
.b-wrap{max-width:1120px;margin:0 auto}
.b-section-head{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:clamp(30px,4vw,52px);padding:0 0 22px;border-bottom:1px solid rgba(240,240,240,.07)}
.b-section-head .b-label{margin:0}
.b-section-head>p:last-child{max-width:390px;margin:0;font-size:12px;line-height:1.7;color:rgba(240,240,240,.32)}

/* article cards */
.b-grid{display:grid;grid-template-columns:1fr;gap:12px}
.b-card{position:relative;display:flex;flex-direction:column;min-height:270px;background:rgba(240,240,240,.008);border:1px solid rgba(240,240,240,.07);padding:28px 30px;transition:border-color .3s,background .3s,transform .35s;text-decoration:none;min-width:0}
.b-card:hover{border-color:rgba(54,115,98,.4);background:rgba(54,115,98,.03)}
.b-card:hover{transform:translateY(-4px)}
.b-card-number{position:absolute;top:20px;right:24px;font-size:10px;letter-spacing:.2em;color:rgba(140,175,159,.55)}
.b-card-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;font-size:8px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,240,240,.26)}
.b-card-cat{padding:3px 8px;border:1px solid rgba(54,115,98,.3);color:var(--accent-soft);letter-spacing:.1em}
.b-card h2{font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:#f0f0f0;margin-bottom:10px;transition:color .3s}
.b-card:hover h2{color:var(--accent-soft)}
.b-card p{font-size:13px;line-height:1.7;color:rgba(240,240,240,.46)}
.b-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);transition:gap .3s}
.b-card:hover .b-card-link{gap:12px}

/* article page */
.article{padding:120px clamp(16px,4vw,48px) clamp(80px,10vw,140px)}
.article-wrap{max-width:740px;margin:0 auto}
.article-head{margin-bottom:clamp(36px,5vw,60px);padding-bottom:clamp(24px,3vw,40px);border-bottom:1px solid rgba(240,240,240,.07)}
.article-head .label{display:flex;align-items:center;gap:10px;font-size:8px;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.article-head .label::before{content:'';width:24px;height:1px;background:var(--accent)}
.article-head h1{font-size:clamp(30px,4.4vw,54px);font-weight:800;line-height:1.08;letter-spacing:-.04em;margin-bottom:16px}
.article-head .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:10px;color:rgba(240,240,240,.32);letter-spacing:.02em}
.article-head .meta span{display:flex;align-items:center;gap:6px}
.article-author{color:var(--accent-soft);font-weight:500;border-bottom:1px solid rgba(140,175,159,.4);transition:color .2s,border-color .2s}
.article-author:hover{color:#fff;border-color:var(--accent-soft)}
.article-body{font-size:16px;line-height:1.85;color:rgba(240,240,240,.7)}
.article-body h2{font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.15;letter-spacing:-.03em;color:#f0f0f0;margin:44px 0 16px}
.article-body h3{font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:#f0f0f0;margin:32px 0 12px}
.article-body p{margin-bottom:20px}
.article-body strong{color:#f0f0f0;font-weight:500}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:22px}
.article-body li{margin-bottom:8px;line-height:1.7}
.article-body li::marker{color:var(--accent-soft)}
.article-body a{color:var(--accent-soft);border-bottom:1px solid rgba(54,115,98,.3);transition:color .2s,border-color .2s}
.article-body a:hover{color:#fff;border-color:var(--accent)}
.article-body .highlight{padding:20px 24px;border-left:2px solid var(--accent);background:rgba(54,115,98,.045);margin:28px 0;font-size:15px;line-height:1.8;color:rgba(240,240,240,.6)}
.article-body .highlight strong{color:#e0e8e4}
.article-source-note{margin-top:32px;padding-top:18px;border-top:1px solid rgba(240,240,240,.07);font-size:12px!important;line-height:1.7!important;color:rgba(240,240,240,.34)!important}
.article-sources{font-size:13px!important;color:rgba(240,240,240,.5)!important}
.article-sources li{margin-bottom:10px!important}
.article-quote{margin:28px 0;padding:22px 24px;border-left:2px solid var(--accent);background:rgba(54,115,98,.045);font-size:17px;line-height:1.75;color:rgba(240,240,240,.72)}
.article-figure{margin:34px 0}
.article-figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 35%;border:1px solid rgba(240,240,240,.07)}
.article-figure figcaption{margin-top:10px;font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,240,240,.3)}

.article-nav{margin-top:clamp(50px,7vw,90px);padding-top:clamp(24px,3vw,40px);border-top:1px solid rgba(240,240,240,.07)}
.article-nav-inner{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.article-nav-link{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid rgba(240,240,240,.07);text-decoration:none;transition:border-color .3s,background .3s;min-width:0}
.article-nav-link:hover{border-color:rgba(54,115,98,.4);background:rgba(54,115,98,.02)}
.article-nav-link span{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,240,240,.24)}
.article-nav-link b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:rgba(240,240,240,.7);transition:color .3s}
.article-nav-link:hover b{color:var(--accent-soft)}
.article-nav-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,240,240,.34);transition:color .3s}
.article-nav-back:hover{color:var(--accent-soft)}

@media(max-width:700px){
  .b-hero{min-height:72svh;padding:120px 16px 104px;background:radial-gradient(circle at 78% 24%,rgba(54,115,98,.13),transparent 38%),#070707}
  .b-hero-index{margin-bottom:56px;font-size:7px;letter-spacing:.25em}
  .b-hero h1{font-size:clamp(46px,13vw,76px)}
  .b-hero-copy{font-size:13px;margin-top:24px}
  .b-section-head{display:block}
  .b-section-head .b-label{margin-bottom:16px}
  .b-card{min-height:0;padding:22px 18px}
  .b-card{padding:22px 18px}
  .b-card h2{font-size:17px}
  .article-body{font-size:15px;line-height:1.8}
  .article-nav-inner{grid-template-columns:1fr}
  .article-body .highlight{padding:16px 18px}
}