.blog-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.blog-fold {
  display: grid;
  grid-template-rows: minmax(285px, .82fr) minmax(360px, 1.18fr);
  min-height: calc(100svh - 76px);
  max-height: 920px;
}

.blog-intro__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  height: 100%;
  padding-block: 46px;
}

.blog-intro h1 {
  margin: 22px 0 0;
  font-size: clamp(60px, 5.7vw, 84px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}

.blog-intro__statement { padding-left: 7%; }
.blog-intro__statement > p { max-width: 31em; margin: 0; color: var(--zone-text); font-size: clamp(21px, 1.65vw, 27px); line-height: 1.7; }
.blog-intro__statement nav { display: flex; flex-wrap: wrap; gap: 5px 20px; margin-top: 20px; color: var(--zone-muted); font-size: 13px; line-height: 1.7; }
.blog-intro__statement nav strong { color: var(--zone-text); font-weight: 500; }
.blog-intro__statement nav a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--zone-line); }
.blog-intro__statement nav a:hover, .blog-intro__statement nav a:focus-visible { color: var(--zone-orange); text-decoration-color: var(--zone-orange); }

.blog-featured { min-height: 0; border-top: 1px solid var(--zone-line); }
.blog-featured__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); height: 100%; border-inline: 1px solid var(--zone-line); }
.blog-lead, .blog-brief { position: relative; min-width: 0; padding: 30px 34px; background: var(--zone-surface); }
.blog-lead { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; background: var(--zone-warm); }
.blog-lead::after { content: ""; position: absolute; right: 34px; bottom: 34px; width: 54px; height: 54px; border: 1px solid rgba(255, 90, 31, .36); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255, 90, 31, .04), 0 0 0 36px rgba(255, 90, 31, .025); }
.blog-item-meta { display: flex; justify-content: space-between; color: var(--zone-muted); font-size: 12px; }
.blog-item-meta span:last-child { color: var(--zone-orange); font-weight: 500; }
.blog-lead > div:nth-child(2) { position: relative; z-index: 1; max-width: 580px; }
.blog-lead > div:nth-child(2) > p:first-child { color: var(--zone-orange); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.blog-lead h3 { margin: 16px 0 14px; font-size: clamp(32px, 3vw, 46px); font-weight: 600; line-height: 1.2; }
.blog-lead > div:nth-child(2) > p:last-child { margin: 0; color: var(--zone-muted); font-size: 14px; }
.blog-lead > span { position: absolute; right: 38px; top: 46%; color: var(--zone-orange); font: 400 28px/1 var(--zone-font-latin); }
.blog-brief { display: flex; flex-direction: column; justify-content: flex-end; border-left: 1px solid var(--zone-line); }
.blog-brief:nth-child(3), .blog-brief:nth-child(4) { border-top: 1px solid var(--zone-line); }
.blog-brief p { margin: 0 0 auto; color: var(--zone-orange); font-size: 12px; font-weight: 500; }
.blog-brief h3 { margin: 28px 0 14px; font-size: 21px; font-weight: 500; line-height: 1.35; }
.blog-brief > span { color: var(--zone-muted); font-size: 12px; }

.blog-stream { padding: 120px 0; scroll-margin-top: 76px; }
.blog-stream__title { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 46px; }
.blog-stream__title .zone-kicker { margin-bottom: 24px; }
.blog-stream__title h2, .blog-method h2 { margin: 0; font-size: clamp(36px, 3vw, 44px); font-weight: 600; line-height: 1.24; }
.blog-stream__title > p { margin: 0 0 7px; color: var(--zone-muted); font-size: 13px; }
.blog-controls { display: grid; grid-template-columns: minmax(280px, 390px) minmax(0, 1fr); gap: 24px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid var(--zone-text); }
.blog-search { position: relative; display: block; }
.blog-search input { width: 100%; height: 48px; padding: 0 48px 0 15px; border: 1px solid var(--zone-line); border-radius: var(--zone-radius-control); background: var(--zone-surface); color: var(--zone-text); font: 400 14px/1.2 var(--zone-font-zh); }
.blog-search input:focus { border-color: var(--zone-orange); outline: 3px solid rgba(255, 90, 31, .12); }
.blog-search > span:last-child { position: absolute; top: 50%; right: 16px; color: var(--zone-orange); font: 500 22px/1 var(--zone-font-latin); transform: translateY(-50%); }
.blog-filters { display: flex; justify-content: flex-end; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.blog-filters::-webkit-scrollbar { display: none; }
.blog-filters button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--zone-radius-control); background: transparent; color: var(--zone-muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.blog-filters button:hover, .blog-filters button:focus-visible { color: var(--zone-text); border-color: var(--zone-line); }
.blog-filters button.is-active { border-color: var(--zone-orange); background: var(--zone-orange); color: #fff; }
.blog-index__header, .blog-index__row { display: grid; grid-template-columns: 110px 190px minmax(0, 1fr) 100px; gap: 28px; align-items: center; }
.blog-index__header { min-height: 58px; border-bottom: 1px solid var(--zone-line); color: var(--zone-muted); font-size: 11px; font-weight: 500; }
.blog-index__row { min-height: 106px; border-bottom: 1px solid var(--zone-line); color: var(--zone-muted); font-size: 13px; }
.blog-index__row[hidden] { display: none; }
.blog-index__row h3 { margin: 0; color: var(--zone-text); font-size: 18px; font-weight: 500; line-height: 1.5; }
.blog-index__row > span:last-child { justify-self: start; padding: 4px 9px; border: 1px solid var(--zone-line); border-radius: 999px; font-size: 11px; white-space: nowrap; }
.blog-empty { margin: 0; padding: 56px 0; border-bottom: 1px solid var(--zone-line); color: var(--zone-muted); text-align: center; }

.blog-method { padding: 88px 0; border-top: 1px solid var(--zone-line); background: var(--zone-surface); }
.blog-method__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); gap: 80px; align-items: end; }
.blog-method .zone-kicker { margin-bottom: 22px; }
.blog-method__inner > p { margin: 0; color: var(--zone-muted); font-size: 14px; line-height: 1.8; }

@media (max-width: 1080px) {
  .blog-fold { min-height: 0; max-height: none; grid-template-rows: auto auto; }
  .blog-intro__grid { min-height: 420px; }
  .blog-featured__grid { min-height: 610px; }
  .blog-controls { grid-template-columns: 1fr; }
  .blog-filters { justify-content: flex-start; }
}

@media (max-width: 820px) {
  .blog-intro__grid { grid-template-columns: 1fr; gap: 46px; min-height: 0; padding-block: 72px 68px; }
  .blog-intro__statement { padding-left: 0; }
  .blog-featured__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; min-height: 0; }
  .blog-lead { grid-column: 1 / -1; grid-row: auto; min-height: 420px; }
  .blog-brief { min-height: 220px; border-top: 1px solid var(--zone-line); }
  .blog-brief:nth-child(4) { grid-column: 1 / -1; }
  .blog-stream { padding: 96px 0; }
  .blog-index__header { display: none; }
  .blog-index__row { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px 22px; padding: 24px 0; }
  .blog-index__row h3 { grid-column: 1 / -1; grid-row: 1; padding-right: 70px; }
  .blog-index__row > span:nth-child(1) { grid-column: 1; grid-row: 2; }
  .blog-index__row > span:nth-child(2) { grid-column: 2; grid-row: 2; }
  .blog-index__row > span:last-child { grid-column: 3; grid-row: 2; }
  .blog-method__inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 560px) {
  .blog-intro__grid { gap: 36px; padding-block: 62px 56px; }
  .blog-intro h1 { margin-top: 16px; font-size: 52px; }
  .blog-intro__statement > p { font-size: 19px; }
  .blog-featured__grid { grid-template-columns: 1fr; border-inline: 0; }
  .blog-lead { min-height: 380px; padding: 28px 24px; }
  .blog-lead > span { right: 24px; }
  .blog-brief, .blog-brief:nth-child(4) { grid-column: auto; min-height: 200px; padding: 26px 24px; border-left: 0; }
  .blog-stream { padding: 76px 0; }
  .blog-stream__title { align-items: flex-start; flex-direction: column; gap: 16px; }
  .blog-stream__title h2, .blog-method h2 { font-size: 34px; }
  .blog-filters { margin-right: -18px; padding-right: 18px; }
  .blog-index__row { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .blog-index__row h3 { padding-right: 0; }
  .blog-index__row > span:nth-child(1) { display: none; }
  .blog-index__row > span:nth-child(2) { grid-column: 1; }
  .blog-index__row > span:last-child { grid-column: 2; }
  .blog-method { padding: 70px 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }