.blogs-page { min-height: 100vh; }
.blogs-page .page-glow { pointer-events: none; }
.blogs-main { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 56px 0 96px; }
.blogs-intro { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.blogs-eyebrow, .blog-kicker { margin: 0 0 14px; color: #ff686f; font-size: 11px; font-weight: 750; letter-spacing: 2px; }
.blogs-intro h1, .blog-article h1 { margin: 0; font-size: clamp(38px, 6vw, 66px); line-height: 1.02; letter-spacing: -.065em; }
.blogs-intro h1 span, .blog-article h1 span { color: var(--red); }
.blogs-intro > p:last-child { max-width: 660px; margin: 18px auto 0; color: #c8c0c1; font-size: 17px; line-height: 1.7; }
.blogs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.blog-card {
  min-width: 0;
  min-height: 245px;
  padding: clamp(22px, 4vw, 34px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 19px;
  background:
    radial-gradient(ellipse at 100% 0, rgba(255,16,24,.12), transparent 44%),
    linear-gradient(145deg, rgba(34,12,14,.86), rgba(11,7,7,.96));
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.blog-card:hover { transform: translateY(-4px); border-color: rgba(255,66,74,.48); box-shadow: 0 22px 48px rgba(0,0,0,.28); }
.blog-card-category { margin: 0 0 12px; color: #ff777d; font-size: 10px; font-weight: 750; letter-spacing: 1.5px; text-transform: uppercase; }
.blog-card h2 { margin: 0; font-size: clamp(20px, 2.6vw, 27px); letter-spacing: -.7px; line-height: 1.2; }
.blog-card > p:not(.blog-card-category) { margin: 13px 0 20px; color: #bbb3b4; font-size: 14px; line-height: 1.7; }
.blog-read-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #fff; font-size: 13px; font-weight: 700; }
.blog-read-link svg { width: 16px; height: 16px; color: #ff656c; transition: transform .2s ease; }
.blog-card:hover .blog-read-link svg { transform: translateX(4px); }

.blog-article { width: min(790px, calc(100% - 48px)); margin: 0 auto; padding: 45px 0 100px; }
.blog-breadcrumbs { margin-bottom: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: #aaa1a2; font-size: 12px; }
.blog-breadcrumbs a { color: #e7e1e2; }
.blog-breadcrumbs a:hover { color: #ff777d; }
.blog-breadcrumbs span[aria-hidden="true"] { color: #ff5a62; }
.blog-article-header { margin-bottom: 30px; padding: clamp(24px, 5vw, 42px); border: 1px solid rgba(255,55,64,.25); border-radius: 21px; background: radial-gradient(ellipse at 90% 0, rgba(255,16,24,.16), transparent 44%), linear-gradient(145deg, #18090b, #0b0707); }
.blog-article-header h1 { font-size: clamp(36px, 6vw, 58px); }
.blog-article-summary { margin: 19px 0 0; color: #d0c8c9; font-size: clamp(16px, 2vw, 19px); line-height: 1.7; }
.blog-byline { margin: 20px 0 0; color: #9e9697; font-size: 12px; }
.blog-body { color: #d0c9ca; font-size: 16px; line-height: 1.85; }
.blog-body h2 { margin: 38px 0 12px; color: #fff; font-size: clamp(23px, 3.5vw, 30px); letter-spacing: -.6px; line-height: 1.2; }
.blog-body h3 { margin: 26px 0 8px; color: #fff; font-size: 19px; line-height: 1.35; }
.blog-body p { margin: 0 0 17px; }
.blog-body ul, .blog-body ol { margin: 0 0 20px; padding-left: 23px; }
.blog-body li { margin: 7px 0; padding-left: 4px; }
.blog-body li::marker { color: #ff5962; }
.blog-body strong { color: #fff; }
.blog-callout { margin: 28px 0; padding: 20px 22px; border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; background: rgba(255,16,24,.07); color: #e7dfe0; }
.blog-cta { margin-top: 40px; padding: clamp(22px, 4vw, 32px); border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: linear-gradient(130deg, rgba(36,8,10,.94), rgba(12,7,7,.96)); }
.blog-cta h2 { margin: 0 0 9px; color: #fff; font-size: 24px; }
.blog-cta p { margin: 0 0 18px; color: #c2babb; font-size: 14px; line-height: 1.7; }
.blog-cta .button { min-height: 48px; height: auto; font-size: 14px; }
.blog-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.blog-related h2 { margin: 0 0 12px; font-size: 18px; }
.blog-related a { display: inline-flex; align-items: center; gap: 7px; margin: 0 18px 10px 0; color: #ff858a; font-size: 14px; font-weight: 650; }
.blog-related a:hover { color: #fff; }
.blog-related svg { width: 15px; }
.blogs-footer { width: min(1120px, calc(100% - 48px)); min-height: 82px; margin: 0 auto; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.12); color: #a9a1a2; font-size: 12px; }
.blogs-footer a { color: #fff; font-weight: 650; }
.blogs-footer b { padding: 0 3px; color: var(--red); }

@media (max-width: 760px) {
  .blogs-main { width: min(100% - 36px, 620px); padding: 36px 0 65px; }
  .blogs-intro { margin-bottom: 28px; text-align: left; }
  .blogs-intro h1 { font-size: clamp(38px, 10vw, 54px); }
  .blogs-intro > p:last-child { margin: 14px 0 0; font-size: 15px; }
  .blogs-grid { grid-template-columns: 1fr; gap: 13px; }
  .blog-card { min-height: 0; padding: 23px; }
  .blog-card h2 { font-size: 23px; }
  .blog-article { width: min(100% - 36px, 620px); padding: 28px 0 70px; }
  .blog-breadcrumbs { margin-bottom: 22px; }
  .blog-article-header { margin-bottom: 24px; padding: 23px 20px; border-radius: 17px; }
  .blog-article-header h1 { font-size: clamp(34px, 9vw, 48px); }
  .blog-article-summary { font-size: 16px; }
  .blog-body { font-size: 15px; line-height: 1.78; }
  .blog-body h2 { margin-top: 30px; }
  .blogs-footer { width: calc(100% - 36px); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-read-link svg { transition: none; }
}