.vp-blog-index { background: #fff; color: var(--vp-color-grey-900); }
.vp-blog-index__content { width: calc(100% - 10rem); max-width: none; margin-inline: auto; padding-top: clamp(2rem, 3vw, 3rem); padding-bottom: clamp(6rem, 10vw, 10rem); }
.vp-blog-index__header { margin-bottom: clamp(5rem, 7vw, 7rem); }
.vp-blog-index__header h1 { margin: 0; font: 400 3.5rem/1 var(--vp-font-heading); letter-spacing: -.055em; }
.vp-blog-index__header p { margin: 1.5rem 0 0; color: #666; font: 400 1rem/1.5 var(--vp-font-body); }
.vp-blog-index__featured { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(25rem, 1fr); gap: clamp(3rem, 5vw, 6rem); align-items: center; margin-bottom: clamp(5rem, 8vw, 8rem); }
.vp-blog-index__featured-image, .vp-blog-index__card-image { display: block; overflow: hidden; border-radius: 1rem; background: #efefef; }
.vp-blog-index__featured-image { aspect-ratio: 1.45; }
.vp-blog-index__featured-image img, .vp-blog-index__card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--vp-ease-standard); }
.vp-blog-index__featured:hover img, .vp-blog-index__card:hover img { transform: scale(1.035); }
.vp-blog-index__featured-content h2, .vp-blog-index__card h2 { margin: 0; font-family: var(--vp-font-heading); font-weight: 400; letter-spacing: -.04em; }
.vp-blog-index__featured-content h2 { max-width: 38rem; font-size: clamp(2rem, 3.1vw, 3.25rem); line-height: 1.06; }
.vp-blog-index a { color: inherit; text-decoration: none; }
.vp-blog-index__featured-content > p { max-width: 40rem; margin: 1.5rem 0 0; color: #666; font: 400 1rem/1.6 var(--vp-font-body); }
.vp-blog-index__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.75rem; color: #777; font: 400 .875rem/1.4 var(--vp-font-body); }
.vp-blog-index__meta i { font-style: normal; color: #aaa; }
.vp-blog-index__avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.vp-blog-index__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 5rem) 2.5rem; }
.vp-blog-index__card { padding-bottom: 1.5rem; border-bottom: 1px solid #e6e6e6; }
.vp-blog-index__card-image { aspect-ratio: 1.34; }
.vp-blog-index__card h2 { margin-top: 1.5rem; font-size: clamp(1.35rem, 1.65vw, 1.75rem); line-height: 1.18; }
.vp-blog-index__card .vp-blog-index__meta { margin-top: .8rem; font-size: .8125rem; }
.vp-blog-index__card .vp-blog-index__avatar { width: 1.5rem; height: 1.5rem; }
.vp-blog-index__empty { margin: 0; color: #666; font: 400 1rem/1.5 var(--vp-font-body); }
@media (max-width: 60rem) { .vp-blog-index__featured { grid-template-columns: 1fr; gap: 2rem; } .vp-blog-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .vp-blog-index__content { width: calc(100% - 2.5rem); padding-top: 1.5rem; padding-bottom: 5rem; } .vp-blog-index__header { margin-bottom: 4rem; } .vp-blog-index__header h1 { font-size: clamp(2.8rem, 13vw, 3.5rem); } .vp-blog-index__featured { margin-bottom: 4rem; } .vp-blog-index__grid { grid-template-columns: 1fr; gap: 3rem; } }

.vp-blog-article { background: #fff; color: var(--vp-color-grey-900); }
.vp-blog-article__content { width: calc(100% - 10rem); max-width: none; margin-inline: auto; padding-top: clamp(1.5rem, 2vw, 2rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.vp-breadcrumbs { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.5rem; color: #888; font: 400 .875rem/1.3 var(--vp-font-body); }
.vp-breadcrumbs a { color: inherit; text-decoration: none; }
.vp-breadcrumbs a:hover, .vp-breadcrumbs a:focus-visible { color: var(--vp-color-red); }
.vp-breadcrumbs span:last-child { overflow: hidden; color: #aaa; text-overflow: ellipsis; white-space: nowrap; }
.vp-blog-article__hero { position: relative; min-height: clamp(28rem, 42vw, 38rem); overflow: hidden; border-radius: 1rem; isolation: isolate; }
.vp-blog-article__hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vp-blog-article__hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 0%) 28%, rgb(0 0 0 / 78%) 100%); }
.vp-blog-article__hero-copy { position: absolute; right: clamp(1.5rem, 3vw, 3.5rem); bottom: clamp(1.5rem, 3vw, 3.5rem); left: clamp(1.5rem, 3vw, 3.5rem); color: #fff; }
.vp-blog-article__hero-copy > p:first-child { margin: 0 0 1rem; color: #fff; font: 500 1rem/1.2 var(--vp-font-body); }
.vp-blog-article__hero-copy h1 { max-width: 72rem; margin: 0; color: #fff; font: 400 56px/1.02 var(--vp-font-heading); letter-spacing: -.055em; }
.vp-blog-article__hero-excerpt { max-width: 70rem; margin: 1rem 0 0; color: rgb(255 255 255 / 88%); font: 400 1rem/1.5 var(--vp-font-body); }
.vp-blog-article__hero .vp-blog-index__meta { margin-top: 1.25rem; color: #fff; }
.vp-blog-article__hero .vp-blog-index__meta i { color: rgb(255 255 255 / 70%); }
.vp-blog-article__body { max-width: 72rem; margin: clamp(3rem, 5vw, 5rem) auto 0; color: #444; font: 400 1.125rem/1.65 var(--vp-font-body); }
.vp-blog-article__body > * { margin-top: 0; margin-bottom: 1.5rem; }
.vp-blog-article__body h2, .vp-blog-article__body h3 { margin-top: 3rem; color: var(--vp-color-grey-900); font-family: var(--vp-font-heading); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.vp-blog-article__body h2 { font-size: 2.25rem; }.vp-blog-article__body h3 { font-size: 1.75rem; }
.vp-blog-article__body img { max-width: 100%; height: auto; border-radius: .75rem; }
.vp-blog-related { padding-bottom: clamp(4rem, 7vw, 7rem); }
.vp-blog-related h2 { margin: 0 0 2rem; font: 400 clamp(2rem, 3vw, 3rem)/1.1 var(--vp-font-heading); letter-spacing: -.04em; }
.vp-blog-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.vp-blog-related__image { display: block; aspect-ratio: 1.45; overflow: hidden; border-radius: .75rem; background: #eee; }
.vp-blog-related__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--vp-ease-standard); }
.vp-blog-related__card:hover .vp-blog-related__image img { transform: scale(1.035); }
.vp-blog-related__card h3 { margin: 1rem 0 0; font: 400 1.25rem/1.2 var(--vp-font-heading); letter-spacing: -.025em; }
.vp-blog-related__card a { color: inherit; text-decoration: none; }
.vp-blog-related__card .vp-blog-index__meta { margin-top: .75rem; font-size: .75rem; }
@media (max-width: 40rem) { .vp-blog-article__content { width: calc(100% - 2.5rem); padding-top: 5rem; padding-bottom: 5rem; } .vp-blog-article__body { font-size: 1rem; } }
@media (max-width: 40rem) { .vp-blog-article__content { width: calc(100% - 2.5rem); padding-top: 1rem; padding-bottom: 4rem; } .vp-breadcrumbs { margin-bottom: 1rem; font-size: .75rem; } .vp-blog-article__hero { min-height: 30rem; border-radius: 1rem; } .vp-blog-article__hero-copy { right: 1.5rem; bottom: 1.5rem; left: 1.5rem; } .vp-blog-article__hero-copy h1 { font-size: 2.1rem; line-height: 1.04; } .vp-blog-article__hero-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: .875rem; } .vp-blog-article__body { width: 100%; max-width: none; margin-top: 2.5rem; font-size: 1rem; } .vp-blog-related { width: calc(100% - 2.5rem); } .vp-blog-related__grid { grid-template-columns: 1fr; gap: 2rem; } }