.article-header{background:var(--paper);border-bottom:1px solid var(--line)}.article-header .nav-wrap{height:90px}.back-link{margin-left:auto;color:var(--ink);font-size:12px;text-decoration:none}.article-phone{margin-left:35px;color:var(--ink);font-size:13px;font-weight:650;text-decoration:none}.article-hero{padding:85px 0 65px;background:linear-gradient(135deg,#eff4ed,#dcebe4)}.article-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:85px}.article-hero h1{margin:22px 0 28px;font-family:var(--serif);font-size:clamp(58px,6vw,88px);font-weight:400;line-height:.95;letter-spacing:-.05em}.article-hero h1 em{color:var(--green-2);font-weight:400}.article-hero p{max-width:580px;color:#5d706b;font-size:18px}.article-meta{display:flex;gap:30px;margin-top:36px;color:#6f817c;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.article-hero figure{margin:0}.article-hero figure img{width:100%;height:500px;object-fit:cover;border-radius:240px 240px 10px 10px}.valgus-hero figure img{object-position:center}.article-hero figcaption,.wide-figure figcaption{margin-top:10px;color:#73827f;font-size:9px}.article-layout{display:grid;grid-template-columns:260px minmax(0,720px);gap:100px;justify-content:center;padding-top:95px;padding-bottom:120px}.article-toc{position:sticky;top:30px;display:grid;gap:5px;padding:24px;border:1px solid var(--line)}.article-toc>span{margin-bottom:12px;color:#788883;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.article-toc>a{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--serif);font-size:15px;text-decoration:none}.article-toc .button{margin-top:20px;min-height:48px}.article-content .lead{font-family:var(--serif);font-size:26px;line-height:1.55}.article-content section{padding-top:70px}.content-number{display:block;margin-bottom:10px;color:var(--coral);font-size:10px;letter-spacing:.15em}.article-content h2{font-family:var(--serif);font-size:46px;font-weight:400;line-height:1.12;letter-spacing:-.03em}.article-content h3{font-family:var(--serif);font-size:21px;font-weight:400}.article-content p{color:#445e59;font-size:16px;line-height:1.85}.article-content blockquote{margin:35px 0;padding:28px 32px;border:0;border-left:3px solid var(--coral);background:var(--mint)}.article-content blockquote b{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.article-content blockquote p{margin:8px 0 0;font-family:var(--serif);font-size:20px;line-height:1.5}.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:35px 0;background:var(--line)}.fact-strip div{padding:24px;background:var(--paper)}.fact-strip b,.fact-strip span{display:block}.fact-strip b{color:var(--coral);font-family:var(--serif);font-size:36px}.fact-strip span{font-size:10px}.wide-figure{margin:70px 0 10px}.wide-figure img{width:100%;max-height:460px;object-fit:cover}.risk-list{margin:35px 0;border-top:1px solid var(--line)}.risk-list>div{display:grid;grid-template-columns:45px 1fr;gap:15px;padding:24px 0;border-bottom:1px solid var(--line)}.risk-list>div>span{color:var(--coral);font-size:9px}.risk-list h3{margin:0 0 8px}.risk-list p{margin:0;font-size:14px}.chain-infographic{display:flex;align-items:center;justify-content:space-between;margin:38px 0;padding:30px;background:var(--green);color:#fff}.chain-infographic div{text-align:center}.chain-infographic b,.chain-infographic span{display:block}.chain-infographic b{font-family:var(--serif);font-size:18px}.chain-infographic span{color:var(--mint-2);font-size:9px}.chain-infographic i{color:var(--coral);font-style:normal}.step-diagram{display:grid;grid-template-columns:repeat(3,1fr);margin:35px 0;border:1px solid var(--line)}.step-diagram div{padding:24px;border-right:1px solid var(--line)}.step-diagram div:last-child{border:0}.step-diagram span,.step-diagram b,.step-diagram small{display:block}.step-diagram span{color:var(--coral);font-size:9px}.step-diagram b{margin-top:24px;font-family:var(--serif);font-size:19px}.step-diagram small{color:#7c8b87}.article-cta-box{margin-top:80px;padding:45px;background:var(--green);color:#fff}.article-cta-box>span{color:var(--mint-2);font-size:9px;letter-spacing:.13em;text-transform:uppercase}.article-cta-box h2{font-size:36px}.article-footer{padding:55px 0;background:#0d2c28}.article-footer a{display:flex;justify-content:space-between;color:#fff;font-family:var(--serif);font-size:25px;text-decoration:none}.article-footer span{color:var(--coral)}
@media(max-width:760px){.article-header .nav-wrap{height:74px}.back-link{margin-left:auto}.article-phone{display:none}.article-hero{padding:55px 0}.article-hero-grid{grid-template-columns:1fr;gap:40px}.article-hero h1{font-size:50px}.article-hero p{font-size:15px}.article-hero figure img{height:380px}.article-layout{grid-template-columns:1fr;padding-top:65px;padding-bottom:80px}.article-layout aside{display:none}.article-content .lead{font-size:22px}.article-content section{padding-top:52px}.article-content h2{font-size:36px}.fact-strip{grid-template-columns:1fr}.chain-infographic{padding:22px 12px}.chain-infographic b{font-size:14px}.step-diagram{grid-template-columns:1fr}.step-diagram div{border-right:0;border-bottom:1px solid var(--line)}.article-cta-box{padding:30px 24px}.article-cta-box h2{font-size:30px}.article-footer a{font-size:19px}}

/* Production editorial polish */
body { font-size: 17px; }
.article-header { position: relative; z-index: 20; background: color-mix(in oklch,var(--paper) 94%,var(--white)); }
.article-header .nav-wrap { height: 104px; }
.back-link { padding: 12px 0; font-size: 15px; font-weight: 650; }
.article-phone { font-size: 16px; font-weight: 750; }
.article-hero { position: relative; overflow: hidden; padding: 108px 0 84px; background: #e6eee8; }
.article-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: 32%; top: -310px; border: 1px solid color-mix(in oklch,var(--green) 14%,transparent); border-radius: 50%; }
.article-hero-grid { position: relative; grid-template-columns: minmax(0,1.04fr) minmax(390px,.76fr); gap: clamp(60px,7vw,120px); }
.article-hero .kicker { font-size: 13px; }
.article-hero h1 { margin: 28px 0 34px; font-size: clamp(60px,6.2vw,92px); line-height: .96; }
.article-hero p { max-width: 630px; color: #425d57; font-size: 19px; line-height: 1.7; }
.article-meta { gap: 24px; margin-top: 42px; font-size: 12px; letter-spacing: .08em; }
.article-hero figure { position: relative; }
.article-hero figure::before { content: ""; position: absolute; inset: -18px 18px 34px -18px; border: 1px solid color-mix(in oklch,var(--green) 22%,transparent); border-radius: 235px 235px 18px 18px; }
.article-hero figure img { position: relative; height: min(580px,60vw); min-height: 480px; border-radius: 225px 225px 14px 14px; box-shadow: 0 30px 75px color-mix(in oklch,var(--green-deep) 18%,transparent); }
.article-hero figcaption,.wide-figure figcaption { position: relative; margin-top: 14px; color: #5d716c; font-size: 12px; line-height: 1.55; }
.article-layout { grid-template-columns: 280px minmax(0,760px); gap: clamp(65px,7vw,120px); padding-top: 110px; }
.article-toc { gap: 2px; padding: 28px 26px; border: 0; border-top: 1px solid var(--green); border-bottom: 1px solid var(--line); background: color-mix(in oklch,var(--mint) 40%,var(--paper)); }
.article-toc>span { margin-bottom: 16px; font-size: 12px; }
.article-toc>a { padding: 12px 0; font-size: 17px; line-height: 1.25; }
.article-toc .button { min-height: 54px; font-family: var(--sans); font-size: 14px; }
.article-toc .button { color: var(--white); background: var(--green); }
.valgus-hero h1 { font-size: clamp(50px,4.4vw,68px); }
.article-content .lead { margin-top: 0; font-size: 29px; line-height: 1.48; color: var(--ink); }
.article-content section { padding-top: 84px; }
.content-number { margin-bottom: 14px; color: var(--coral-deep); font-size: 12px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.article-content h2 { margin: 0 0 28px; font-size: clamp(42px,4vw,54px); line-height: 1.08; }
.article-content h3 { margin: 36px 0 10px; font-size: 26px; }
.article-content p { color: #36534d; font-size: 18px; line-height: 1.82; }
.article-content blockquote { margin: 42px 0; padding: 34px 38px; border-left-width: 2px; background: color-mix(in oklch,var(--mint) 68%,var(--paper)); }
.article-content blockquote b { font-size: 12px; }
.article-content blockquote p { font-size: 23px; line-height: 1.48; }
.wide-figure { margin: 78px 0 22px; }
.wide-figure img { max-height: 520px; object-position: center; }
.portrait-figure img { object-position: center 60%; }
.article-cta-box { position: relative; overflow: hidden; margin-top: 96px; padding: 54px; background: var(--night, #0d2c28); }
.article-cta-box::after { content: ""; position: absolute; width: 240px; height: 240px; right: -105px; bottom: -125px; border: 1px solid color-mix(in oklch,var(--mint) 35%,transparent); border-radius: 50%; }
.article-cta-box>span { font-size: 12px; }
.article-cta-box h2 { position: relative; z-index: 1; max-width: 580px; margin: 18px 0 30px; font-size: 42px; line-height: 1.08; }
.article-cta-box .button { position: relative; z-index: 1; min-height: 58px; font-size: 15px; }
.article-footer { padding: 62px 0; }
.article-footer a { align-items: center; gap: 28px; font-size: 28px; }
.article-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.article-footer .article-legal-links a { display: inline; color: #b7cbc5; font-family: var(--sans); font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.article-legal-links small { margin-left: auto; color: #fff; font-size: 11px; line-height: 1.5; }
a:focus-visible,button:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.dysplasia-hero h1 { font-size: clamp(54px,5.25vw,78px); }
.dysplasia-hero figure img { object-position: center; }
.article-sources { margin-top: 20px; padding-top: 84px; border-top: 1px solid var(--line); }
.article-sources ul { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.article-sources li { border-bottom: 1px solid var(--line); }
.article-sources a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; color: var(--green-deep); font-size: 16px; font-weight: 650; text-decoration: none; }
.article-sources a::after { content: "↗"; flex: 0 0 auto; color: var(--coral); font-size: 18px; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.article-sources a:hover::after { transform: translate(3px,-3px); }
.article-content .medical-note { margin-top: 28px; color: color-mix(in oklch,var(--green-deep) 62%,transparent); font-size: 14px; line-height: 1.65; }

@media(max-width:900px){
  .article-hero-grid { grid-template-columns: 1fr 330px; gap: 40px; }
  .article-hero h1 { font-size: 58px; }
  .article-layout { grid-template-columns: 220px minmax(0,1fr); gap: 55px; }
}

@media(max-width:760px){
  body { font-size: 16px; }
  .article-header .nav-wrap { height: 82px; gap: 16px; }
  .article-header .brand { min-width: 0; }
  .article-header .brand small { display: none; }
  .article-header .brand b { white-space: nowrap; font-size: 14px; }
  .back-link { white-space: nowrap; font-size: 0; }
  .back-link::after { content: "Материалы"; font-size: 12px; }
  .article-hero { padding: 64px 0 70px; }
  .article-hero::before { width: 330px; height: 330px; right: -180px; top: 20px; }
  .article-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .article-hero h1 { font-size: clamp(48px,14vw,64px); }
  .valgus-hero h1 { font-size: clamp(38px,10.5vw,48px); }
  .dysplasia-hero h1 { font-size: clamp(42px,11.5vw,54px); }
  .article-hero p { font-size: 17px; line-height: 1.65; }
  .article-meta { flex-wrap: wrap; margin-top: 30px; font-size: 11px; }
  .article-hero figure::before { inset: -10px 10px 24px -10px; }
  .article-hero figure img { height: 430px; min-height: 0; }
  .article-layout { grid-template-columns: 1fr; padding-top: 72px; padding-bottom: 88px; }
  .article-content .lead { font-size: 24px; line-height: 1.5; }
  .article-content section { padding-top: 68px; }
  .article-content h2 { font-size: clamp(38px,11vw,48px); }
  .article-content h3 { font-size: 24px; }
  .article-content p { font-size: 17px; line-height: 1.76; }
  .article-content blockquote { padding: 28px 24px; }
  .article-content blockquote p { font-size: 21px; }
  .wide-figure { margin: 58px 0 18px; }
  .wide-figure img { min-height: 320px; object-fit: cover; }
  .article-cta-box { margin-top: 72px; padding: 38px 28px; }
  .article-cta-box h2 { font-size: 34px; }
  .article-footer a { font-size: 21px; line-height: 1.3; }
  .article-legal-links { align-items: flex-start; flex-direction: column; }
  .article-legal-links small { margin-left: 0; }
  .article-sources a { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-sources a::after { transition: none; }
}