@font-face { font-family: 'AXION Article'; src: url('../fonts/manrope-latin-variable.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
.blog-article { background: #fff; color: #152038; font-family: 'AXION Article', sans-serif; }
.blog-article .modern-header { background: #0c172d; }
.blog-article .modern-header__inner { min-height: 5.5rem; }
.blog-article .modern-button--primary { background: #527a20; }
@media(max-width:1100px) { .blog-article .modern-header__actions { display: none; } .blog-article .modern-header__inner { grid-template-columns: minmax(0,1fr) auto; } .blog-article .modern-brand { width: 12rem; } .blog-article .modern-nav-toggle { grid-column: 2; grid-row: 1; } }
.blog-article .modern-kicker { color: #527a20; }
.article-heading { padding-top: 8rem; padding-bottom: 2.5rem; }
.article-breadcrumbs { display: flex; flex-wrap: wrap; gap: .65rem; color: #637086; font-size: .8rem; margin-bottom: 3.5rem; }
.article-breadcrumbs a { color: inherit; text-decoration: none; }
.blog-article .article-heading h1 { max-width: 19ch; font-size: clamp(2.5rem,5.2vw,4.75rem); line-height: 1.08; font-weight: 650; margin: 1rem 0 1.5rem; }
.article-lead { max-width: 46rem; font-size: clamp(1.05rem,1.7vw,1.3rem); color: #637086; line-height: 1.65; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.7rem; font-size: .8rem; color: #637086; }
.article-preview { background: #eef3e7; color: #486b1e; border-radius: 2rem; padding: .35rem .8rem; }
.article-cover { margin-top: 0; margin-bottom: 3.5rem; }
.article-cover img { width: 100%; height: clamp(15rem,35vw,29rem); object-fit: cover; object-position: center 55%; border-radius: 1.4rem; }
.article-cover figcaption { color: #637086; font-size: .75rem; margin-top: .75rem; }
.article-layout { display: grid; grid-template-columns: 16rem minmax(0,46rem); gap: clamp(2rem,6vw,6rem); justify-content: start; }
.article-index nav { position: sticky; top: 7rem; border-top: 1px solid #dfe4ea; padding-top: 1.5rem; }
.article-index a { display: block; color: #536071; text-decoration: none; font-size: .9rem; padding: .65rem 0; }
.article-index a:hover, .article-breadcrumbs a:hover { color: #527a20; text-decoration: underline; }
.article-body { min-width: 0; font-size: 1.05rem; line-height: 1.85; color: #536071; }
.article-body .article-intro { font-size: 1.2rem; color: #253149; margin-top: 0; }
.article-body section { scroll-margin-top: 7rem; margin-top: 2.7rem; }
.blog-article .article-body h2 { font-size: clamp(1.6rem,2.6vw,2.1rem); font-weight: 650; line-height: 1.2; color: #152038; margin-bottom: 1rem; }
.article-body p { margin: 0 0 1.25rem; }
.article-body blockquote { border-left: 3px solid #527a20; margin: 2.5rem 0; padding: 1.5rem 1.8rem; background: #f3f6ef; color: #253149; font-size: 1.35rem; line-height: 1.6; border-radius: 0 .7rem .7rem 0; }
.article-body ul { padding-left: 1.3rem; }
.article-body li { margin-bottom: .9rem; }
.article-note { padding: 1.3rem; border: 1px solid #dfe4ea; border-radius: .8rem; font-size: .85rem; margin-top: 2rem; }
.article-note p { margin: .4rem 0 0; }
.article-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid #dfe4ea; padding-top: 1.5rem; margin-top: 2rem; font-size: .8rem; }
.article-end a { color: #527a20; font-weight: 750; }
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: #f1f5eb; border: 1px solid #dce5d0; border-radius: 1.2rem; padding: 2.5rem; margin-top: 4rem; margin-bottom: 4rem; }
.blog-article .article-cta h2 { font-size: clamp(1.8rem,3vw,2.6rem); max-width: 20ch; font-weight: 650; }
.article-cta p:not(.modern-kicker) { color: #637086; }
.article-cta .modern-button { flex-shrink: 0; }
.blog-article a:focus-visible { outline: 3px solid #527a20; outline-offset: 4px; }
@media(max-width:800px) { .article-layout { grid-template-columns: minmax(0,1fr); gap: 1.5rem; } .article-index nav { position: static; border-bottom: 1px solid #dfe4ea; padding-bottom: 1rem; } .article-cta { flex-direction: column; align-items: flex-start; padding: 1.5rem; } .article-heading { padding-top: 7rem; } .article-breadcrumbs { margin-bottom: 2rem; } .article-cover { margin-bottom: 2rem; } }
.article-body .article-gallery { margin: 32px 0; }
.article-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.article-gallery__thumb { display: block; position: relative; overflow: hidden; border-radius: 16px; background: #eef1e9; border: 1px solid #dce2d6; }
.article-gallery__thumb:only-child { grid-column: 1 / -1; }
.article-body .article-gallery__thumb :is(img,video) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; }
.article-gallery__thumb:focus-visible, .article-gallery__dialog button:focus-visible { outline: 3px solid #87af4d; outline-offset: 4px; }
.article-gallery__badge { position: absolute; bottom: 12px; left: 12px; border-radius: 999px; background: #020d27; color: white; padding: 8px 14px; font-weight: 700; }
.article-body .article-gallery__dialog { position: fixed; inset: 0; margin: auto; padding: 8px; width: min(1440px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; background: #071229; color: white; border: 1px solid #536078; border-radius: 18px; }
.article-gallery__dialog::backdrop { background: rgb(2 8 22 / 88%); }
.article-gallery__toolbar { position: absolute; inset: 14px 14px auto; z-index: 2; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.article-gallery__toolbar > * { pointer-events: auto; }
.article-body .article-gallery__toolbar p { border-radius: 999px; padding: 5px 12px; background: rgb(2 8 22 / 80%); font-size: 13px; }
.article-gallery__navigation button { position: absolute; top: 45%; z-index: 2; }
.article-gallery__navigation [data-article-step="-1"] { left: 14px; }
.article-gallery__navigation [data-article-step="1"] { right: 14px; }
.article-body .article-gallery__dialog p { color: #fff; margin: 0; }
.article-gallery__dialog button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; padding: 0; border: 1px solid #768294; color: white; background: rgb(2 8 22 / 85%); font: inherit; font-size: 30px; line-height: 1; cursor: pointer; }
.article-gallery__dialog button:hover { background: #416218; }
.article-gallery__stage { display: grid; place-items: center; margin: 0; min-height: 150px; }
.article-body .article-gallery__stage :is(img,video) { display: block; width: 100%; height: calc(100dvh - 92px); object-fit: contain; margin: 0; }
.article-body .article-gallery__caption { margin: 6px 8px 0; font-size: 13px; line-height: 1.5; max-height: 3em; overflow-y: auto; overflow-wrap: anywhere; }
.article-gallery__caption:empty { display: none; }
@media (max-width: 600px) {
  .article-gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .article-body .article-gallery__dialog { padding: 4px; width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .article-gallery__toolbar { inset: 10px 10px auto; }
  .article-gallery__navigation [data-article-step="-1"] { left: 8px; }
  .article-gallery__navigation [data-article-step="1"] { right: 8px; }
}