.blog-article{padding:clamp(28px,5vw,64px) 20px 90px}
.blog-article-inner{max-width:720px;margin:0 auto}
.blog-back{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:26px;letter-spacing:.02em}
.blog-back:hover{color:var(--teal)}
.blog-article .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 14px}
.blog-article h1{font-size:clamp(30px,4.6vw,44px);line-height:1.18;letter-spacing:-.01em;margin:0 0 18px;font-weight:700;color:var(--ink)}
.blog-meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin:0}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
.blog-rule{height:3px;width:60px;background:linear-gradient(90deg,var(--gold),transparent);margin:30px 0 6px;border-radius:3px}
.blog-body{font-size:18.5px;line-height:1.85;color:#28322b}
.blog-body>p:first-of-type{font-size:20.5px;line-height:1.72;color:var(--ink)}
.blog-body p{margin:1.25em 0}
.blog-body h2{font-size:clamp(22px,3vw,27px);line-height:1.3;margin:1.9em 0 .5em;font-weight:700;color:var(--ink);position:relative;padding-top:.55em}
.blog-body h2::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--gold);border-radius:3px}
.blog-body h3{font-size:20px;margin:1.5em 0 .35em;font-weight:700;color:var(--ink)}
.blog-body ul,.blog-body ol{padding-left:1.3em;margin:1.15em 0}
.blog-body li{margin:.5em 0;line-height:1.8}
.blog-body li::marker{color:var(--teal)}
.blog-body a{color:var(--teal);text-underline-offset:3px}
.blog-body strong{color:var(--ink)}
.blog-body blockquote{margin:1.6em 0;padding:.15em 0 .15em 22px;border-left:3px solid var(--gold);color:var(--muted);font-size:19px}
.blog-body hr{border:0;height:1px;background:var(--line);margin:2.4em auto;width:66%}
.blog-cta{margin-top:52px;padding-top:30px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap}
.blog-index{max-width:1040px;margin:0 auto;padding:clamp(28px,5vw,64px) 20px 90px}
.blog-masthead{max-width:680px;margin:0 0 46px}
.blog-masthead .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 12px}
.blog-masthead h1{font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.015em;margin:0 0 14px;color:var(--ink)}
.blog-masthead .lead{font-size:18px;color:var(--muted);margin:0;line-height:1.7}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.blog-card{position:relative;display:flex;flex-direction:column;padding:26px 24px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-decoration:none;color:inherit;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease}
.blog-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.blog-card:hover::before{transform:scaleX(1)}
.blog-card-kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 12px}
.blog-card h2{font-size:20px;line-height:1.32;margin:0 0 10px;color:var(--ink)}
.blog-card p{font-size:14.5px;color:var(--muted);margin:0 0 16px;line-height:1.65;flex:1}
.blog-card-more{font-size:13.5px;font-weight:600;color:var(--teal)}
@media(max-width:560px){.blog-body{font-size:17.5px}.blog-body>p:first-of-type{font-size:19px}}
.notice-band{text-align:center}
/* Motion Kit css-native reveal (ported from motion-kit-starter css-native-motion.ts):
   blog index cards fade in on scroll — OPACITY ONLY, so the card's hover-lift
   transform stays free of the scroll-linked animation. PE-guarded (base state fully
   visible; hidden only inside the @supports + prefers-reduced-motion:no-preference). */
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
.blog-card{opacity:0;animation:mkx-blog-fade linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
@keyframes mkx-blog-fade{from{opacity:0}to{opacity:1}}
}}