/* ФАБУЛА · Медиа. Эталон: доски Media (1440) и MediaM (390).
   Шире 1280 — раскладка десктопа, 1101–1280 — сжатый десктоп, 721–1100 — столбцы в один, до 720 — телефон. */

.md-sec{padding-top:110px}
.md-head{display:grid;grid-template-columns:620px minmax(0,1fr);gap:60px;align-items:end}
.md-head>p,.md-head>div{max-width:560px}

/* первый экран: текст слева, кадр интервью справа */
.md-hero{display:grid;grid-template-columns:minmax(0,560fr) minmax(0,640fr);column-gap:80px;align-items:start;padding-top:90px;padding-bottom:88px}
.md-hero-t{display:flex;flex-direction:column;gap:26px}
.md-links{margin:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.md-hero-f{margin:0;background:none;box-shadow:none;display:flex;flex-direction:column;gap:16px}
.md-hero-img{width:100%;aspect-ratio:640 / 430;object-fit:cover;box-shadow:0 1px 2px rgba(40,30,20,.10),0 12px 28px rgba(40,30,20,.12);transform:rotate(-1deg)}
.md-hero-f figcaption{max-width:560px;padding-left:40px;display:flex;flex-direction:column;gap:10px}
.md-hero-f .acc{line-height:1.25}
.md-hero-f figcaption>a{align-self:flex-start}

/* новые разговоры: листы в два столбца, правый ниже */
.md-nw{display:flex;flex-direction:column;gap:60px}
.md-sheets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 80px;align-items:start}
.md-col{display:flex;flex-direction:column;gap:60px}
.md-col2{margin-top:130px}
.md-sh{transform:rotate(var(--r));padding:36px 40px 30px;display:flex;flex-direction:column;gap:14px}
.md-sh2{margin-left:40px}
.md-sh .h3 a{text-decoration:none;background-image:none}
.md-go{align-self:flex-start;margin-top:4px}
.md-ph{width:100%;height:280px;object-fit:cover}

/* как устроен разговор: три шага лесенкой */
.md-hw,.md-ar{margin-top:110px}
.md-hw{display:flex;flex-direction:column;gap:60px}
.md-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:36px}
.md-steps li{display:grid;grid-template-columns:50px minmax(0,1fr);gap:20px;width:min(680px,100%)}
.md-steps li:nth-child(2){margin-left:min(200px,max(0px,(100% - 680px) / 2))}
.md-steps li:nth-child(3){margin-left:min(400px,max(0px,100% - 680px))}
.md-st{display:flex;flex-direction:column;gap:6px}
.md-st .step{margin:0}
.md-when{font-size:13px;color:var(--ink-caption)}

/* архив: таблица */
.md-ar{padding-bottom:120px;display:flex;flex-direction:column;gap:44px}
.md-ar-i{display:flex;flex-direction:column;gap:14px}
.md-ar-i>a{align-self:flex-start}
.md-tbl{border-top:1px solid var(--ink)}
.md-tbl [role=row]{display:grid;grid-template-columns:110px minmax(0,1fr) 320px;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.md-tbl .th{padding:10px 0;border-bottom-color:var(--ink);color:var(--ink-caption);font-size:14px}
.md-y,.md-f{padding-top:4px}
.md-t{display:flex;flex-direction:column;gap:6px}
.md-t .cap{font-family:var(--serif)}
.md-t a{font-family:var(--serif);font-size:20px;line-height:1.3;text-decoration:none}
.md-f{display:flex;flex-direction:column;font-size:14px;line-height:1.45;color:var(--ink-muted)}

/* 1101–1360: кадр и текст делятся по ширине, колонка формата уже */
@media (max-width:1360px){
 .md-tbl [role=row]{grid-template-columns:100px minmax(0,1fr) 280px}
}
@media (max-width:1280px){
 .md-head{grid-template-columns:repeat(2,minmax(0,1fr))}
 .md-hero{column-gap:60px}
 .md-sheets{gap:0 60px}
 .md-sh2{margin-left:24px}
 .md-tbl [role=row]{grid-template-columns:90px minmax(0,1fr) 240px}
}
/* 721–1100: всё в один столбец, листы по порядку на досках телефона */
@media (max-width:1100px){
 .md-head{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
 .md-hero{grid-template-columns:minmax(0,1fr);row-gap:56px;padding-bottom:40px}
 .md-hero-t{max-width:640px}
 .md-hero-f{max-width:680px}
 .md-sheets{display:flex;flex-direction:column;gap:48px;max-width:680px}
 .md-col{display:contents}
 .md-col2{margin:0}
 .md-sh{order:var(--o)}
 .md-sh2{margin-left:0}
}
/* до 900: архив строками, как на телефоне */
@media (max-width:900px){
 .md-tbl [role=row].th{display:none}
 .md-tbl [role=row]{display:flex;flex-wrap:wrap;gap:6px 0;padding:16px 0}
 .md-y,.md-f{padding-top:0;font-size:13px;color:var(--ink-caption)}
 .md-f{display:inline;order:1}
 .md-f>span{margin-left:14px}
 .md-t{order:2;flex:0 0 100%}
}
/* телефон: доска MediaM */
@media (max-width:720px){
 .md-sec{padding-top:80px}
 .rs.md-sec{margin-top:72px}
 .md-hero{padding-top:40px;padding-bottom:0;row-gap:26px}
 .md-hero-t{gap:22px}
 .md-hero-img{aspect-ratio:350 / 236}
 .md-hero-f figcaption{padding-left:0}
 .md-hero-f .acc{line-height:1.2}
 .md-nw,.md-hw{gap:22px}
 .md-sheets{margin-top:10px;gap:22px}
 .md-sh{margin:0 -4px;padding:22px 22px 24px;gap:12px}
 .md-sh{transform:rotate(var(--rm))}
 .md-ph{height:auto;aspect-ratio:306 / 200}
 .md-steps{margin-top:10px;gap:26px}
 .md-steps li{display:flex;gap:16px;align-items:baseline;width:auto}
 .md-steps li:nth-child(2){margin-left:24px}
 .md-steps li:nth-child(3){margin-left:48px}
 .md-steps .step-n{flex:none;width:30px}
 .md-when{display:block;margin-top:2px}
 .md-when::before{content:none}
 .md-ar{padding-bottom:80px;gap:22px}
 .md-ar-i{gap:22px}
 .md-tbl{margin-top:10px}
}