.blog-page {
  --blog-bright: #c1ffd7;
  --blog-surface: #f7faf6;
  --blog-card-border: #d5e7dc;
  --blog-shadow: 0 15px 45px #123c2710;
  background: var(--blog-surface);
}

.blog-hero, .article-cover {
  position: relative;
  isolation: isolate;
  color: #f1fff5;
  background:
    radial-gradient(ellipse at 82% 6%, #40886666, transparent 53%),
    radial-gradient(ellipse at 56% 114%, #17684a80, transparent 66%),
    linear-gradient(115deg, #0b241c, #102f24 49%, #155139);
}

.blog-hero::before, .article-cover::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, #b7f9cf15 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, #b7f9cf15 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(ellipse at 85% 50%, #000, transparent 72%);
  pointer-events: none;
  content: "";
}

.blog-hero-inner, .article-cover-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.8vw, 67px);
  padding-block: clamp(47px, 7vw, 94px);
}

.blog-hero-copy, .article-cover-copy { min-width: 0; }
.blog-hero-copy .eyebrow, .article-cover-copy .eyebrow { color: var(--blog-bright); }
.blog-hero h1, .article-cover h1 { font-weight: 760; text-wrap: balance; }
.blog-hero h1 {
  margin-top: 14px;
  max-width: 17ch;
  font-size: clamp(2.65rem, 5.65vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -.061em;
}
.blog-hero h1 em { font-style: normal; color: var(--blog-bright); }
.blog-hero .deck, .article-cover .deck { color: #dcede2; font-size: clamp(.97rem, 1.45vw, 1.12rem); }
.blog-hero .deck { margin-top: 19px; max-width: 48ch; }
.blog-hero .actions { margin-top: 28px; }
.blog-hero .actions > a { min-width: 0; }
.blog-hero-image {
  position: relative;
  min-width: 0;
  aspect-ratio: 1.38;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  border: 1px solid #ddffed52;
  background:
    radial-gradient(ellipse at 86% 22%, #559b73 0%, transparent 42%),
    linear-gradient(143deg, #1d5b43, #0a3025 85%);
  box-shadow: 0 22px 62px #021b1160;
}
.blog-hero-image > img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.blog-hero-image > .blog-art { width: 100%; min-height: 100%; aspect-ratio: auto; }
.blog-hero-image::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #f5fffd21;
  pointer-events: none;
  content: "";
}

.blog-library { background: var(--blog-surface); }
.blog-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.blog-library-head .deck { max-width: 63ch; margin-top: 8px; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.blog-filters[hidden], .blog-card[hidden] { display: none; }
.blog-filters button {
  padding: 8px 13px;
  min-height: 44px;
  border: 1px solid #cadfd2;
  border-radius: 99px;
  background: #fbfdf9;
  color: #2b5947;
  font: inherit;
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.blog-filters button:hover { background: #e4f4e9; border-color: #91baa4; }
.blog-filters button[aria-pressed="true"] { color: #f7fff8; background: #164e39; border-color: #164e39; }
.blog-filters button[aria-pressed="true"]:hover { background: #0f412e; }
.blog-results-status:not(:empty) { margin: -12px 0 14px; color: var(--muted); font-size: .87rem; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.9vw, 24px);
}
.blog-card {
  display: flex;
  min-width: 0;
  border: 1px solid var(--blog-card-border);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 21px #17482c0d;
}
.blog-card:hover { border-color: #98bba6; box-shadow: var(--blog-shadow); }
.blog-card-link {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  border-radius: inherit;
}
.blog-card-link:focus-visible { outline-offset: 3px; }
.blog-card-link > .blog-art { border-radius: 16px 16px 0 0; }
.blog-card-body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  min-width: 0;
  padding: clamp(17px, 2.15vw, 24px);
  gap: 11px;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: #456459;
  font-size: .77rem;
  font-weight: 660;
}
.blog-card-meta > :first-child { color: #25654a; font-weight: 760; }
.blog-card-body h3 {
  font-size: clamp(1.2rem, 2.17vw, 1.55rem);
  line-height: 1.16;
  letter-spacing: -.036em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.blog-card-body p { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.blog-card-next {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  align-self: end;
  gap: 7px;
  color: #176044;
  font-size: .85rem;
  font-weight: 750;
}
.blog-card-link:hover .blog-card-next, .blog-card-link:focus-visible .blog-card-next { text-decoration: underline; }

.blog-art {
  --art-line: #b7efcd32;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  aspect-ratio: 2.5;
  background:
    radial-gradient(ellipse at 88% 4%, #43956d 0%, transparent 72%),
    linear-gradient(120deg, #0b3325, #205b42);
}
.blog-art::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--art-line) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(0deg, var(--art-line) 0 1px, transparent 1px 27px);
  mask-image: radial-gradient(ellipse at 60% 47%, #000, transparent 80%);
  content: "";
}
.blog-art i { position: absolute; display: block; }
.blog-art-trend {
  background: radial-gradient(ellipse at 85% 0%, #61ad85 0, transparent 70%), linear-gradient(135deg, #0c382b 10%, #1d563d);
}
.blog-art-trend i:first-child, .blog-art-trend i:nth-child(2) { inset: 12% 11% 13%; }
.blog-art-trend i:first-child {
  background: linear-gradient(#c1ffcf68, #c1ffcf09);
  clip-path: polygon(0 83%, 13% 70%, 25% 79%, 42% 45%, 54% 53%, 69% 22%, 80% 33%, 100% 5%, 100% 100%, 0 100%);
}
.blog-art-trend i:nth-child(2) {
  background: linear-gradient(98deg, #9be5b6, #e1ffef);
  clip-path: polygon(0 81%, 13% 68%, 25% 77%, 42% 43%, 54% 51%, 69% 20%, 80% 31%, 100% 3%, 100% 7%, 80% 35%, 69% 24%, 54% 55%, 42% 47%, 25% 81%, 13% 72%, 0 85%);
}
.blog-art-trend i:nth-child(3), .blog-art-trend i:nth-child(4) {
  width: 6px; height: 6px; border-radius: 50%; background: #e6fff0; box-shadow: 0 0 0 4px #c1f7d04d;
}
.blog-art-trend i:nth-child(3) { left: 44%; top: 45%; }
.blog-art-trend i:nth-child(4) { left: 72%; top: 36%; }

.blog-art-ledger {
  --art-line: #d0edc630;
  background: radial-gradient(ellipse at 89% 15%, #769568 0, transparent 60%), linear-gradient(119deg, #203a2c, #3a6249);
}
.blog-art-ledger i {
  left: 13%;
  right: 13%;
  height: 13%;
  border: 1px solid #caf2d34a;
  border-radius: 5px;
  background: linear-gradient(90deg, #c0ffd478, #a8edc00c 68%);
}
.blog-art-ledger i:first-child { top: 19%; right: 36%; }
.blog-art-ledger i:nth-child(2) { top: 36%; right: 25%; }
.blog-art-ledger i:nth-child(3) { top: 53%; right: 43%; }
.blog-art-ledger i:nth-child(4) { top: 70%; background: linear-gradient(90deg, #d8f6bcb5, #b3f1b652); }

.blog-art-bars {
  background: radial-gradient(ellipse at 89% 11%, #327b69 0, transparent 69%), linear-gradient(120deg, #0a3230, #1c5750);
}
.blog-art-bars i {
  bottom: 14%;
  width: 15%;
  border: 1px solid #c5f4db62;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(0deg, #5ba68842, #b7f6cdba);
}
.blog-art-bars i:first-child { left: 14%; height: 29%; }
.blog-art-bars i:nth-child(2) { left: 33%; height: 46%; }
.blog-art-bars i:nth-child(3) { left: 52%; height: 40%; }
.blog-art-bars i:nth-child(4) { left: 71%; height: 66%; background: linear-gradient(0deg, #5bb69b6b, #d8fbe0); }

.blog-art-rings {
  background: radial-gradient(ellipse at 80% 25%, #619574 0, transparent 58%), linear-gradient(125deg, #123b30, #235e46);
}
.blog-art-rings i { aspect-ratio: 1; border-radius: 50%; }
.blog-art-rings i:first-child, .blog-art-rings i:nth-child(2) {
  top: 14%;
  height: 72%;
  border: clamp(3px, .6vw, 8px) solid #c1f7db8c;
  border-right-color: #a1f3c429;
  background: #daffe035;
}
.blog-art-rings i:first-child { left: 27%; transform: rotate(-23deg); }
.blog-art-rings i:nth-child(2) { right: 27%; transform: rotate(29deg); }
.blog-art-rings i:nth-child(3), .blog-art-rings i:nth-child(4) { width: 6px; background: #c9f9dc; }
.blog-art-rings i:nth-child(3) { left: 15%; top: 31%; }
.blog-art-rings i:nth-child(4) { right: 15%; bottom: 27%; }

.blog-art-grid i {
  width: 32%;
  height: 27%;
  border: 1px solid #c0efce62;
  border-radius: 6px;
  background: linear-gradient(145deg, #d4ffdd62, #c0eadc1a);
  box-shadow: inset 0 1px #edffef3b;
}
.blog-art-grid i:first-child, .blog-art-grid i:nth-child(3) { left: 16%; }
.blog-art-grid i:nth-child(2), .blog-art-grid i:nth-child(4) { right: 16%; }
.blog-art-grid i:first-child, .blog-art-grid i:nth-child(2) { top: 19%; }
.blog-art-grid i:nth-child(3), .blog-art-grid i:nth-child(4) { bottom: 19%; }
.blog-art-grid i:nth-child(4) { background: linear-gradient(100deg, #d4ffe0a2, #9fe3b969); }

.blog-toolkit {
  padding-block: clamp(38px, 6vw, 66px);
  background: radial-gradient(ellipse at 94% 8%, #d8f5e4, transparent 72%), #eaf4ea;
  border-block: 1px solid #d1e6d9;
}
.blog-toolkit h2, .blog-related h2 { font-size: clamp(1.85rem, 3.7vw, 2.8rem); text-wrap: balance; }
.blog-toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 23px;
}
.blog-toolkit-grid > a {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 16px 17px;
  border-radius: 11px;
  border: 1px solid #cae2d2;
  background: #ffffff9c;
  text-decoration: none;
  font-weight: 730;
}
.blog-toolkit-grid a h3 { color: #174b37; font-size: 1.11rem; letter-spacing: -.021em; }
.blog-toolkit-grid a p { color: var(--muted); font-size: .91rem; font-weight: 450; }
.blog-toolkit-grid a:hover { border-color: #85ae97; background: #fff; text-decoration: underline; }

.article-cover-inner {
  grid-template-columns: minmax(0, 1fr) minmax(200px, .41fr);
  align-items: end;
  padding-block: clamp(35px, 6.4vw, 84px);
}
.article-cover .breadcrumb { margin-bottom: clamp(18px, 3vw, 32px); }
.article-cover h1 {
  max-width: 26ch;
  margin-top: 9px;
  font-size: clamp(2.22rem, 5.15vw, 4.35rem);
  line-height: 1.06;
  letter-spacing: -.062em;
}
.article-cover .deck { max-width: 63ch; }
.article-cover .blog-art {
  align-self: center;
  aspect-ratio: 1.32;
  border: 1px solid #c0efce5e;
  border-radius: 16px;
  box-shadow: 0 16px 50px #031f1645;
}
.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 19px;
  color: #cfe9d9;
  font-size: .82rem;
  font-weight: 590;
}
.article-byline a { color: #eaffef; }
.article-byline time { white-space: nowrap; }
.blog-reading {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(205px, 265px);
  justify-content: space-between;
  align-items: start;
  gap: clamp(24px, 6vw, 90px);
  padding-block: clamp(30px, 6vw, 74px);
}
.blog-story { grid-area: 1 / 1; min-width: 0; color: #233d32; overflow-wrap: anywhere; }
.blog-story p, .blog-story li { font-size: clamp(.98rem, 1.45vw, 1.06rem); line-height: 1.73; }
.blog-story p + p, .blog-story section > * + *, .blog-story ul + *, .blog-story ol + * { margin-top: .95rem; }
.blog-story ul, .blog-story ol { padding-inline-start: 1.3em; }
.blog-story li + li { margin-top: .34em; }
.blog-story p a, .blog-story li a, .blog-story td a { color: #146347; font-weight: 630; text-decoration-thickness: .07em; }
.blog-story p a:hover, .blog-story li a:hover, .blog-story td a:hover { text-decoration-thickness: .14em; }
.blog-story > :is(p:first-child, .blog-lede) { color: #133b2c; font-size: clamp(1.16rem, 2.15vw, 1.48rem); line-height: 1.5; font-weight: 590; }
.blog-story section { scroll-margin-top: 17px; }
.blog-story > section + section, .blog-story > p + section { margin-top: clamp(27px, 4.5vw, 51px); }
.blog-story h2 { color: var(--ink); font-size: clamp(1.58rem, 3.28vw, 2.48rem); letter-spacing: -.043em; text-wrap: balance; }
.blog-story h3 { color: var(--ink); font-size: clamp(1.13rem, 2.25vw, 1.47rem); letter-spacing: -.03em; }
.blog-table {
  overflow-x: auto;
  border: 1px solid var(--blog-card-border);
  border-radius: 10px;
  background: white;
}
.blog-story table, .blog-table table { width: 100%; border-collapse: collapse; font-size: .91rem; }
.blog-story table { font-variant-numeric: tabular-nums; }
.blog-story table caption {
  padding: 12px 15px;
  color: #315a47;
  background: #f4f9f5;
  text-align: left;
  font-weight: 685;
}
.blog-story th, .blog-story td { padding: 11px clamp(9px, 1.4vw, 15px); border-bottom: 1px solid #dce9df; vertical-align: top; text-align: left; line-height: 1.45; }
.blog-story th { color: #144e39; background: #e8f4eb; font-weight: 740; }
.blog-story td { color: #284639; background: #fff; }
.blog-story tr:nth-child(even) td { background: #f8fcf8; }
.blog-story tbody tr:last-child > * { border-bottom: 0; }
.blog-story .blog-table:focus-visible { outline-offset: 2px; }

.blog-aside {
  grid-area: 1 / 2;
  display: grid;
  align-content: start;
  gap: 13px;
  position: sticky;
  top: 16px;
  min-width: 0;
}
.blog-aside nav, .blog-aside section, .blog-aside details {
  padding: 17px;
  border: 1px solid var(--blog-card-border);
  border-radius: 12px;
  background: #fdfefd;
  box-shadow: 0 6px 19px #17482c08;
}
.blog-aside details > nav { border: 0; box-shadow: none; padding: 8px 0 0; }
.blog-aside h2, .blog-aside h3 { color: var(--ink); font-size: 1.13rem; letter-spacing: -.025em; }
.blog-aside nav :is(ul, ol) { list-style: none; padding: 0; margin-top: 8px; }
.blog-aside nav li + li { margin-top: 3px; }
.blog-aside nav a {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding-block: 3px;
  color: #2b5e48;
  font-size: .86rem;
  line-height: 1.35;
  text-decoration-thickness: .07em;
  text-decoration-color: #96b6a4;
}
.blog-aside nav a:hover { text-decoration-color: currentColor; }
.blog-aside summary { cursor: pointer; font-weight: 720; }
.blog-aside section { background: linear-gradient(142deg, white, #e5f6e9); }
.blog-aside section p { margin-top: 7px; color: var(--muted); font-size: .88rem; }
.blog-aside .cta { margin-top: 12px; padding-inline: 11px; }

.blog-related {
  padding-block: clamp(35px, 6.1vw, 70px);
  border-top: 1px solid var(--blog-card-border);
  background: #ebf4ec;
}
.blog-related .blog-grid { margin-top: 22px; }

@media (max-width: 920px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-reading { gap: clamp(19px, 3.3vw, 35px); }
}
@media (max-width: 740px) {
  .blog-hero-inner, .article-cover-inner, .blog-reading { grid-template-columns: minmax(0, 1fr); }
  .blog-hero-inner { gap: 23px; padding-block: 37px; }
  .blog-hero h1 { font-size: clamp(2.58rem, 8vw, 4.35rem); }
  .blog-hero .actions { margin-top: 18px; }
  .blog-hero-image { max-height: 340px; aspect-ratio: 1.67; }
  .article-cover-inner { gap: 18px; }
  .article-cover .blog-art { aspect-ratio: 3.65; }
  .article-cover .breadcrumb { margin-bottom: 17px; }
  .blog-aside, .blog-story { grid-area: auto; }
  .blog-aside { position: static; }
  .blog-aside nav a { min-height: 36px; }
  .blog-toolkit-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 520px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-card-link > .blog-art { aspect-ratio: 2.7; }
  .blog-library-head { gap: 13px; }
  .blog-filters { gap: 5px; }
  .blog-filters button { padding-inline: 10px; }
  .blog-table table { min-width: 370px; }
}
@media (max-width: 360px) {
  .blog-hero .actions .cta { font-size: .87rem; padding-inline: 11px; }
  .blog-hero h1 { font-size: 2.48rem; }
  .article-cover h1 { font-size: 2.2rem; }
}
@media (forced-colors: active) {
  .blog-filters button[aria-pressed="true"] { border-width: 2px; border-color: Highlight; }
  .blog-card { border-color: CanvasText; }
}