.blog-page{width:min(94%,1640px);margin:0 auto;padding:76px 0 70px}.blog-hero{min-height:540px;border:1px solid rgba(151,78,255,.62);border-radius:24px;overflow:hidden;position:relative;display:grid;place-items:center;text-align:center;background:linear-gradient(180deg,rgba(5,5,14,.36),rgba(7,6,18,.76)),url('./blog-hero.webp') center/cover no-repeat;box-shadow:0 0 42px rgba(119,62,255,.10)}.blog-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(130,70,255,.10),transparent 55%);pointer-events:none}.blog-hero-copy{position:relative;z-index:1;max-width:800px;padding:40px}.blog-hero h1{font-size:clamp(48px,6vw,88px);line-height:.95;margin:0 0 24px;font-weight:850;letter-spacing:-.055em}.blog-hero p{font-size:clamp(18px,1.5vw,24px);line-height:1.5;color:#c8c4d1;margin:0 auto 32px;max-width:700px}.blog-cta{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(20,18,28,.58);backdrop-filter:blur(12px);color:#fff;text-decoration:none;font-weight:750;transition:.22s}.blog-cta:hover{transform:translateY(-2px);border-color:#a963ff;box-shadow:0 0 24px rgba(143,73,255,.25)}.blog-archive{padding:88px 0 20px;scroll-margin-top:90px}.blog-archive h2{text-align:center;font-size:clamp(38px,4vw,62px);letter-spacing:-.04em;margin:0 0 48px}.blog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}.blog-card{overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(16,15,22,.70);backdrop-filter:blur(12px);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;cursor:pointer}.blog-card:hover{transform:scale(1.025);border-color:#9d55ff;box-shadow:0 0 0 1px rgba(164,91,255,.22),0 0 28px rgba(126,57,255,.22)}.blog-card img{width:100%;aspect-ratio:1.48/1;object-fit:cover;display:block}.blog-card-body{padding:18px 20px 22px}.blog-date{font-size:14px;color:#96909f;margin-bottom:12px}.blog-card h3{font-size:21px;line-height:1.25;margin:0;font-weight:780;letter-spacing:-.015em}.blog-pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:52px}.blog-page-btn{border:1px solid rgba(255,255,255,.16);background:rgba(20,19,27,.78);color:#fff;border-radius:12px;padding:11px 17px;font-weight:700;cursor:pointer}.blog-page-btn.active,.blog-page-btn:hover{border-color:#9f59ff;box-shadow:0 0 18px rgba(137,69,255,.2)}.blog-page-btn:disabled{opacity:.38;cursor:default}.hf-links>a.active{color:#c27aff!important}@media(max-width:1050px){.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-hero{min-height:450px}}@media(max-width:640px){.blog-page{width:calc(100% - 28px);padding-top:42px}.blog-hero{min-height:410px;border-radius:18px}.blog-hero-copy{padding:26px 20px}.blog-grid{grid-template-columns:1fr;gap:18px}.blog-archive{padding-top:60px}}


/* v3.16 — full-bleed editorial blog hero + archive proportions */
.blog-page{width:100%;margin:0;padding:0 0 70px}
.blog-page .blog-hero{width:100%;min-height:calc(100vh - 30px);margin-top:-86px;padding-top:86px;border:0;border-radius:0;box-shadow:none;overflow:hidden;position:relative;display:grid;place-items:center;text-align:center;background:linear-gradient(180deg,rgba(4,4,12,.34),rgba(7,6,18,.66)),url('./blog-hero.webp') center/cover no-repeat}
.blog-page .blog-hero:after{background:linear-gradient(180deg,rgba(4,4,12,.08),rgba(7,6,18,.18) 55%,rgba(7,6,18,.58));}
body:has(.blog-page) .hf-nav{position:relative;z-index:20;background:transparent!important;border-bottom-color:rgba(255,255,255,.06)!important}
.blog-page .blog-hero-copy{padding-top:70px}
.blog-archive{width:min(82%,1480px);margin:0 auto;padding:88px 0 20px}
.blog-archive h2{font-size:clamp(38px,4vw,62px);margin-bottom:52px}
.blog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 26px}
.blog-card{border-radius:16px;background:rgba(12,12,16,.76);border:1px solid rgba(255,255,255,.14)}
.blog-card img{aspect-ratio:1.52/1;object-fit:cover}
.blog-card-body{min-height:118px;padding:17px 20px 22px}
.blog-date{font-size:15px;margin-bottom:13px}
.blog-card h3{font-size:20px;line-height:1.3}
.blog-pagination{gap:18px;margin-top:58px}
.blog-page-btn{min-width:74px;height:58px;padding:0 24px;border-radius:17px;font-size:19px;background:rgba(20,19,27,.82)}
.blog-page-btn:first-child,.blog-page-btn:last-child{min-width:150px}
.blog-page-btn.active{border-color:#9f59ff;box-shadow:0 0 18px rgba(137,69,255,.2)}
@media(max-width:1050px){.blog-archive{width:min(92%,900px)}.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-page .blog-hero{min-height:72vh;margin-top:-76px;padding-top:76px}.blog-archive{width:calc(100% - 28px)}.blog-grid{grid-template-columns:1fr}.blog-pagination{gap:8px;flex-wrap:wrap}.blog-page-btn{min-width:54px;height:50px;padding:0 14px}.blog-page-btn:first-child,.blog-page-btn:last-child{min-width:112px}}

/* v3.17 — sticky blog header, subtle hero-top fade, compact shared pagination */
body:has(.blog-page) .hf-nav{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  background:linear-gradient(180deg,rgba(8,6,18,.58) 0%,rgba(8,6,18,.24) 58%,rgba(8,6,18,0) 100%)!important;
  border-bottom-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body:has(.blog-page) .hf-nav.is-scrolled{
  background:rgba(15,12,24,.76)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom-color:rgba(255,255,255,.055)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.10)!important;
}
.blog-pagination{gap:14px!important;margin-top:58px!important}
.blog-page-btn{min-width:60px!important;height:56px!important;padding:0 16px!important;border-radius:15px!important;font-size:16px!important}
.blog-page-btn:first-child,.blog-page-btn:last-child{min-width:128px!important}
@media(max-width:640px){.blog-pagination{gap:8px!important}.blog-page-btn{min-width:48px!important;height:48px!important;padding:0 12px!important;font-size:14px!important}.blog-page-btn:first-child,.blog-page-btn:last-child{min-width:100px!important}}

/* v3.18 — reusable editorial article template */
.article-page{width:100%;margin:0;padding:0 0 70px}.article-hero{min-height:680px;margin-top:-64px;padding:150px 7vw 70px;display:flex;align-items:flex-end;position:relative;background:linear-gradient(90deg,rgba(4,4,10,.74) 0%,rgba(5,4,12,.40) 52%,rgba(5,4,12,.30)),url('./blog-hero.webp') center/cover no-repeat}.article-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,4,12,.12),transparent 40%,rgba(8,6,18,.64));pointer-events:none}.article-hero-copy{position:relative;z-index:1;max-width:1040px}.article-date{font-size:15px;color:#d2ccd9;margin-bottom:18px}.article-hero h1{font-size:clamp(52px,6.4vw,104px);line-height:.96;letter-spacing:-.055em;margin:0;max-width:980px}.article-content{width:min(76%,1120px);margin:0 auto;padding:88px 0 20px;font-size:20px;line-height:1.75;color:#d4d0d9}.article-content .article-lead{font-size:clamp(22px,2vw,30px);line-height:1.55;color:#f0edf4;margin:0 0 70px}.article-content h2{font-size:clamp(34px,3.2vw,52px);line-height:1.08;color:#fff;letter-spacing:-.035em;margin:68px 0 24px}.article-content h3{font-size:clamp(25px,2.2vw,34px);line-height:1.18;color:#fff;margin:48px 0 18px}.article-content p{margin:0 0 28px}.article-content a{color:#c589ff;text-decoration-color:rgba(197,137,255,.45);text-underline-offset:4px}.article-content li{margin:12px 0}.article-content figure{margin:64px 0}.article-content figure img{width:100%;max-height:680px;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.12)}.article-content figcaption{font-size:14px;color:#89838f;margin-top:10px}.read-also{width:min(86%,1480px);margin:90px auto 0;padding-top:56px;border-top:1px solid rgba(255,255,255,.10)}.read-also-head span{font-size:12px;letter-spacing:.28em;color:#9c94a5}.read-also-head h2{font-size:clamp(36px,4vw,58px);letter-spacing:-.04em;margin:10px 0 34px}.read-also-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.read-also .blog-card{text-decoration:none;color:inherit}.read-also .blog-card img{aspect-ratio:1.55/1}.read-also .blog-card-body{min-height:112px}body:has(.article-page) .hf-nav{position:sticky!important;top:0!important;z-index:1000!important;background:linear-gradient(180deg,rgba(8,6,18,.64),rgba(8,6,18,.18) 70%,transparent)!important;border-bottom-color:transparent!important}body:has(.article-page) .hf-nav.is-scrolled{background:rgba(15,12,24,.78)!important;backdrop-filter:blur(18px)!important;border-bottom-color:rgba(255,255,255,.055)!important}@media(max-width:800px){.article-hero{min-height:560px;padding:130px 24px 48px}.article-content{width:calc(100% - 40px);padding-top:58px;font-size:18px}.read-also{width:calc(100% - 40px);margin-top:60px}.read-also-grid{grid-template-columns:1fr}}

.blog-card{text-decoration:none;color:inherit}


/* v3.19 — compact editorial typography, OrigaStock metadata, smaller Read Also */
.article-hero{min-height:610px}
.article-hero-copy{max-width:900px}
.article-hero h1{font-size:clamp(42px,5vw,76px);line-height:1.01;max-width:850px}
.article-date{font-size:14px;font-weight:650;letter-spacing:.02em;color:#d7d1dd}
.article-content{width:min(66%,900px);padding:72px 0 16px;font-size:17px;line-height:1.72;color:#d5d1da}
.article-content .article-lead{font-size:20px;line-height:1.62;margin-bottom:54px}
.article-content h2{font-size:clamp(28px,2.4vw,38px);margin:54px 0 20px}
.article-content h3{font-size:clamp(21px,1.8vw,27px);margin:38px 0 14px}
.article-content p{margin-bottom:22px}
.article-content li{margin:9px 0}
.article-content figure{margin:50px 0}
.read-also{margin-top:72px;padding-top:44px}
.read-also-head h2{font-size:clamp(28px,2.7vw,40px);margin:8px 0 28px}
.read-also-head span{font-size:11px}
.blog-date{font-size:14px;font-weight:650;letter-spacing:.01em}
@media(max-width:800px){.article-content{width:calc(100% - 40px);font-size:16px}.article-content .article-lead{font-size:18px}.article-hero h1{font-size:clamp(38px,11vw,58px)}}

/* Keep hero thumbnail dimensions responsive within the existing card layout. */
.blog-card img{height:auto}