.blog-page { background: var(--paper); }
.blog-page.menu-open { overflow: hidden; }
.blog-site-header { background: rgba(230,227,221,.98); border-color: var(--line-dark); backdrop-filter: none; }
.blog-site-header .main-nav a.active::after { transform: scaleX(1); }
.blog-telegram-link { border-color: rgba(0,125,255,.5); color: #0067d2; }
.blog-telegram-link:hover { border-color: var(--blue); background: var(--blue); }

.blog-hero { position: relative; min-height: 790px; padding: 88px 5.5vw 72px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: center; overflow: hidden; background: var(--graphite); color: white; isolation: isolate; }
.blog-hero::before { content: ""; position: absolute; z-index: -1; width: 610px; height: 610px; right: -130px; top: 70px; border: 1px solid rgba(0,125,255,.28); border-radius: 50%; box-shadow: 0 0 0 90px rgba(155,81,224,.025), 0 0 0 180px rgba(46,204,113,.018); }
.blog-hero-grid { position: absolute; z-index: -1; inset: 0; opacity: .42; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg,#000,transparent 87%); }
.blog-hero-copy { max-width: 880px; }
.blog-kicker { margin: 0; display: flex; align-items: center; gap: 12px; color: #a2acab; font: 600 8px/1 var(--mono); letter-spacing: .15em; }
.blog-kicker i { width: 33px; height: 2px; background: var(--red); }
.blog-hero h1 { margin: 43px 0 0; font-size: clamp(80px, 9.1vw, 142px); font-weight: 650; letter-spacing: -.07em; line-height: .73; }
.blog-hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(255,255,255,.7); }
.blog-hero-lead { max-width: 690px; margin: 59px 0 0; padding-left: 22px; border-left: 3px solid var(--green); color: #9aa5a2; font-size: 16px; line-height: 1.72; }
.blog-hero-status { max-width: 690px; margin-top: 37px; padding: 15px 18px; display: flex; justify-content: space-between; border: 1px solid rgba(255,255,255,.12); color: #5e6966; font: 7px/1 var(--mono); letter-spacing: .1em; }
.blog-hero-status span { color: var(--green); }
.blog-hero-status span i { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.blog-hero-status b { font-weight: 500; }
.blog-channel-card { position: relative; min-height: 420px; padding: 46px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: linear-gradient(145deg, rgba(0,125,255,.22), rgba(155,81,224,.22)); backdrop-filter: blur(15px); transition: border-color .25s, transform .25s; }
.blog-channel-card:hover { border-color: rgba(0,125,255,.8); transform: translateY(-5px); }
.blog-channel-card::before { content: ""; position: absolute; width: 330px; height: 330px; right: -145px; top: -135px; border: 1px solid rgba(247,129,239,.45); border-radius: 50%; }
.blog-channel-orbit { position: absolute; top: 42px; left: 42px; width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--pink); font: 700 11px/1 var(--mono); letter-spacing: .1em; }
.blog-channel-card small { color: var(--pink); font: 7px/1 var(--mono); letter-spacing: .15em; }
.blog-channel-card strong { margin-top: 17px; font-size: 33px; letter-spacing: -.045em; }
.blog-channel-card p { max-width: 360px; margin: 15px 0 27px; color: #9aa5a2; font-size: 13px; line-height: 1.62; }
.blog-channel-card > b { display: flex; justify-content: space-between; color: white; font: 8px/1 var(--mono); letter-spacing: .1em; }
.blog-channel-card > b i { color: var(--pink); font-size: 15px; font-style: normal; }

.blog-index { padding: 110px 5.5vw 125px; background: var(--paper-light); }
.blog-index-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.blog-index-head span, .blog-principles-head > span { color: var(--red); font: 7px/1 var(--mono); letter-spacing: .14em; }
.blog-index-head h2, .blog-principles-head h2 { margin: 15px 0 0; font-size: clamp(56px,5.2vw,80px); letter-spacing: -.06em; line-height: .96; }
.blog-index-head > p { max-width: 370px; margin: 0 0 5px; color: #626d69; font-size: 13px; line-height: 1.65; }
.blog-controls { margin-top: 59px; display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 15px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.32); }
.blog-search { min-width: 330px; display: flex; align-items: center; gap: 12px; }
.blog-search > span { color: var(--red); font-size: 20px; }
.blog-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.blog-search input::placeholder { color: #87908e; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.blog-filters button { min-height: 34px; padding: 0 13px; border: 1px solid var(--line-dark); background: transparent; color: #606a67; font: 7px/1 var(--mono); letter-spacing: .07em; cursor: pointer; }
.blog-filters button:hover, .blog-filters button.active { border-color: var(--ink); background: var(--ink); color: white; }
.blog-feed { min-height: 390px; margin-top: 28px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.blog-card { position: relative; min-height: 390px; padding: 30px; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: rgba(255,255,255,.16); transition: background .25s, transform .25s; }
.blog-card:hover { z-index: 2; background: white; transform: translateY(-4px); box-shadow: 0 22px 60px rgba(18,22,27,.08); }
.blog-card::before { content: ""; position: absolute; width: 250px; height: 250px; right: -195px; bottom: -195px; border: 1px solid var(--card-accent, var(--blue)); border-radius: 50%; opacity: .36; transition: transform .5s; }
.blog-card:hover::before { transform: scale(1.35); }
.blog-card-meta { display: flex; justify-content: space-between; color: #747e7b; font: 7px/1 var(--mono); letter-spacing: .1em; }
.blog-card-meta span:first-child { color: var(--card-accent, var(--blue)); }
.blog-card h3 { margin: 77px 0 0; font-size: clamp(25px,2vw,32px); letter-spacing: -.045em; line-height: 1.04; }
.blog-card p { margin: 19px 0 32px; color: #5b6562; font-size: 13px; line-height: 1.65; }
.blog-card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: #6c7673; font: 7px/1 var(--mono); letter-spacing: .08em; }
.blog-card-footer i { color: var(--red); font-size: 15px; font-style: normal; }
.blog-empty-state { grid-column: 1 / -1; min-height: 390px; padding: 55px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: rgba(255,255,255,.14); text-align: center; }
.blog-empty-state > span { color: var(--red); font: 7px/1 var(--mono); letter-spacing: .15em; }
.blog-empty-state h3 { margin: 31px 0 0; font-size: clamp(31px,3.4vw,52px); letter-spacing: -.05em; line-height: 1.02; }
.blog-empty-state p { max-width: 610px; margin: 17px 0 27px; color: #65706d; font-size: 13px; line-height: 1.7; }
.blog-empty-state a { padding-bottom: 6px; border-bottom: 1px solid var(--blue); color: #006bd8; font: 700 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.blog-principles { padding: 110px 5.5vw 120px; background: var(--paper); }
.blog-principles-head { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; }
.blog-principles-head h2 { margin-top: 0; }
.blog-principles-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.blog-principles-grid article { min-height: 250px; padding: 30px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.blog-principles-grid span { color: var(--red); font: 7px/1 var(--mono); }
.blog-principles-grid b { display: block; margin-top: 63px; font-size: 23px; line-height: 1.1; }
.blog-principles-grid p { margin: 17px 0 0; color: #626d69; font-size: 12px; line-height: 1.65; }

/* Article */
.article-page { background: var(--paper-light); }
.article-shell { min-height: 100svh; padding-top: 88px; }
.article-loading, .article-not-found { min-height: 650px; padding: 120px 5.5vw; display: grid; place-items: center; text-align: center; }
.article-state span { color: var(--red); font: 7px/1 var(--mono); letter-spacing: .14em; }
.article-state h1 { margin: 28px 0 0; font-size: clamp(48px,6vw,92px); letter-spacing: -.06em; line-height: .94; }
.article-state p { max-width: 590px; margin: 25px auto 30px; color: #65706d; font-size: 14px; line-height: 1.7; }
.article-state a { color: var(--blue); font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.article-hero { position: relative; padding: 115px 8vw 95px; overflow: hidden; background: var(--graphite); color: white; }
.article-hero::after { content: ""; position: absolute; width: 580px; height: 580px; right: -190px; top: -160px; border: 1px solid var(--article-accent,var(--blue)); border-radius: 50%; opacity: .32; box-shadow: 0 0 0 100px rgba(255,255,255,.015); }
.article-meta { position: relative; z-index: 1; display: flex; gap: 25px; color: #77827f; font: 7px/1 var(--mono); letter-spacing: .11em; }
.article-meta span:first-child { color: var(--article-accent,var(--green)); }
.article-hero h1 { position: relative; z-index: 1; max-width: 1120px; margin: 50px 0 0; font-size: clamp(57px,7vw,108px); line-height: .92; letter-spacing: -.065em; }
.article-dek { position: relative; z-index: 1; max-width: 730px; margin: 43px 0 0; padding-left: 20px; border-left: 3px solid var(--article-accent,var(--green)); color: #9ca6a3; font-size: 17px; line-height: 1.7; }
.article-layout { width: min(1240px,calc(100% - 11vw)); margin: 0 auto; padding: 90px 0 120px; display: grid; grid-template-columns: minmax(0,760px) 280px; justify-content: space-between; gap: 90px; }
.article-content { font-size: 18px; line-height: 1.82; }
.article-content p { margin: 0 0 31px; }
.article-content h2 { margin: 69px 0 25px; font-size: 42px; line-height: 1.02; letter-spacing: -.045em; }
.article-content blockquote { margin: 50px 0; padding: 26px 30px; border-left: 4px solid var(--article-accent,var(--green)); background: var(--paper); font-size: 23px; font-weight: 620; line-height: 1.42; }
.article-content ul { margin: 25px 0 38px; padding-left: 25px; }
.article-content li { margin: 11px 0; }
.article-aside { position: sticky; top: 115px; align-self: start; }
.article-aside-card { padding: 25px; border: 1px solid var(--line-dark); background: var(--paper); }
.article-aside-card > span { color: var(--red); font: 7px/1 var(--mono); letter-spacing: .14em; }
.article-aside-card strong { display: block; margin-top: 25px; font-size: 20px; line-height: 1.18; }
.article-aside-actions { margin-top: 24px; display: grid; gap: 8px; }
.article-aside-actions a, .article-aside-actions button { min-height: 43px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-dark); background: transparent; color: var(--ink); font: 700 8px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.article-aside-actions a:first-child { border-color: var(--blue); background: var(--blue); color: white; }
.article-telegram-embed { margin-top: 25px; }

@media (max-width: 1100px) {
  .blog-hero { grid-template-columns: 1fr .7fr; gap: 5vw; }
  .blog-channel-card { padding: 33px; }
  .blog-controls { align-items: stretch; flex-direction: column; }
  .blog-feed { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 55px; }
}

@media (max-width: 860px) {
  .blog-hero { min-height: auto; padding: 150px 24px 80px; grid-template-columns: 1fr; }
  .blog-hero h1 { font-size: clamp(75px,16vw,118px); }
  .blog-channel-card { min-height: 330px; margin-top: 30px; }
  .blog-index, .blog-principles { padding: 90px 24px; }
  .blog-controls { margin-top: 42px; }
  .blog-search { min-width: 0; }
  .blog-feed { grid-template-columns: 1fr; }
  .blog-principles-head { grid-template-columns: 1fr; gap: 26px; }
  .blog-principles-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .article-hero { padding: 100px 24px 75px; }
  .article-layout { width: calc(100% - 48px); grid-template-columns: 1fr; gap: 55px; }
  .article-aside { position: static; }
}

@media (max-width: 560px) {
  .blog-hero { padding: 125px 15px 65px; }
  .blog-hero h1 { margin-top: 37px; font-size: 69px; }
  .blog-hero-lead { margin-top: 45px; font-size: 13px; }
  .blog-hero-status { display: block; }
  .blog-hero-status b { display: block; margin-top: 12px; }
  .blog-channel-card { min-height: 310px; padding: 25px; }
  .blog-channel-orbit { top: 25px; left: 25px; width: 50px; height: 50px; }
  .blog-channel-card strong { font-size: 28px; }
  .blog-index, .blog-principles { padding: 76px 15px; }
  .blog-index-head { display: block; }
  .blog-index-head > p { margin-top: 20px; }
  .blog-index-head h2, .blog-principles-head h2 { font-size: 48px; }
  .blog-controls { padding: 12px; }
  .blog-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .blog-filters button:first-child { grid-column: 1 / -1; }
  .blog-card { min-height: 340px; padding: 24px; }
  .blog-card h3 { margin-top: 58px; }
  .blog-empty-state { min-height: 410px; padding: 28px 21px; }
  .blog-principles-grid article { min-height: 210px; padding: 25px; }
  .blog-principles-grid b { margin-top: 48px; }
  .article-hero { padding: 90px 15px 65px; }
  .article-meta { flex-wrap: wrap; gap: 12px 18px; }
  .article-hero h1 { margin-top: 38px; font-size: 49px; }
  .article-dek { margin-top: 33px; font-size: 14px; }
  .article-layout { width: calc(100% - 30px); padding: 65px 0 85px; }
  .article-content { font-size: 16px; line-height: 1.75; }
  .article-content h2 { font-size: 33px; }
  .article-content blockquote { padding: 21px; font-size: 19px; }
}