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

.pe-in{display:flex;flex-direction:column}
.pe-bm{display:none}
.pe-head{display:grid;grid-template-columns:420px minmax(0,1fr);gap:60px}
.pe-head>p{padding-top:10px;max-width:680px}

/* первый экран: текст слева, две обложки внахлёст справа */
.pe-hero{display:grid;grid-template-columns:minmax(0,560fr) minmax(0,660fr);column-gap:60px;align-items:start;padding-top:90px;padding-bottom:166px}
.pe-hero-t{display:flex;flex-direction:column;gap:26px}
.pe-go{align-self:flex-start}
.pe-covers{container-type:inline-size;margin-top:-20px}
.pe-stack{position:relative;aspect-ratio:660 / 630}
.pe-stack img{position:absolute;width:60.61cqw;aspect-ratio:400 / 560;height:auto;object-fit:cover;box-shadow:0 1px 2px rgba(40,30,20,.10),0 12px 28px rgba(40,30,20,.12)}
.pe-c1{left:0;top:0;transform:rotate(-2deg)}
.pe-c2{left:39.39cqw;top:10.61cqw;transform:rotate(1.4deg);box-shadow:0 1px 2px rgba(40,30,20,.10),0 12px 28px rgba(40,30,20,.14)!important}
.pe-caps{display:flex;align-items:flex-start;gap:24px}
.pe-caps p{margin:0}
.pe-k1{flex:0 1 37cqw;min-width:0;margin-top:calc(14px - 10.61cqw)!important}
.pe-k2{margin-left:auto!important;margin-top:14px!important}

/* разделы */
.pe-sec .rs{padding-top:110px}
.pe-q .pe-in{gap:30px;padding-bottom:144px}
.pe-q .h2{max-width:980px}
.pe-q2{display:grid;grid-template-columns:620px minmax(0,1fr);gap:60px}
.pe-acc{margin:0;font-style:italic;font-weight:300;font-size:30px;line-height:1.3}
.pe-q2 .body{padding-top:8px}
/* пять читателей лесенкой: шаг 110 на десктопе, уже — меньше */
.pe-rd{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:20px}
.pe-rd li{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:baseline;padding-left:calc(var(--i) * clamp(0px, (100% - 700px) / 4, 110px))}
.pe-who{font-style:italic;font-weight:300;font-size:30px;line-height:1.2}

/* линия материала: пять точек на одной линии, отвод от «Ограничения» */
.pe-ar .rs{background:none;padding-top:100px}
.pe-ar .pe-in{gap:44px;padding-bottom:112px}
.pe-flow{display:flex;flex-direction:column;gap:16px}
.pe-rail,.pe-flow ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.pe-rail{position:relative;height:60px}
.pe-rail::before{content:"";position:absolute;left:8px;right:calc((100% - 80px) / 5 - 8px);top:29.6px;height:.75px;background:var(--ink)}
.pe-rail i{position:relative}
.pe-rail i::before{content:"";position:absolute;left:4.8px;top:26.8px;width:6.4px;height:6.4px;border-radius:50%;background:var(--ink)}
.pe-br{position:absolute;left:6px;top:27px;width:104px;height:18px;overflow:visible}
.pe-br path{fill:none;stroke:var(--ink);stroke-width:.75;stroke-dasharray:2 4}
.pe-flow ol{margin:0;padding:0;list-style:none}
.pe-flow li{display:flex;flex-direction:column;gap:16px}
.pe-flow .body{font-family:var(--serif);line-height:1.45}

/* номер 1: развороты зигзагом */
.pe-sp-sec .pe-in{gap:90px;padding-bottom:83px}
@media (min-width:1281px){.pe-sp-sec .pe-head{grid-template-columns:500px minmax(0,1fr)}}
.pe-sps{display:flex;flex-direction:column;gap:90px}
.pe-sp{margin:0;display:grid;grid-template-columns:minmax(0,860fr) minmax(0,360fr);gap:60px;align-items:end}
.pe-sp-r{grid-template-columns:minmax(0,360fr) minmax(0,860fr)}
.pe-sp-r img{order:2}
.pe-sp img{width:100%;height:auto;aspect-ratio:860 / 600;object-fit:cover;box-shadow:var(--shadow);transform:rotate(var(--r))}
.pe-sp figcaption{display:flex;flex-direction:column;gap:12px;padding-bottom:10px}
.pe-t{font-size:34px;line-height:1.12;letter-spacing:-.01em}
.pe-t i{font-weight:300}

/* что входит в работу */
.pe-wk .rs{background:none;padding-top:100px}
.pe-wk .pe-in{display:grid;grid-template-columns:420px minmax(0,1fr);gap:60px;padding-bottom:185px}
.pe-wk-h{display:flex;flex-direction:column;gap:22px}
.pe-wl{margin:14px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--rule);align-self:start}
.pe-wl li{display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;padding:16px 0;border-top:1px solid var(--rule)}
.pe-wl li:first-child{border-top-color:var(--ink)}
.pe-wn{font-size:18px;line-height:1.4}

/* 1101–1280: разделы поровну */
@media (max-width:1280px){
 .pe-head,.pe-q2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pe-wk .pe-in{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
 .pe-wl li{grid-template-columns:200px minmax(0,1fr)}
 .pe-t{font-size:30px;line-height:1.14}
}
/* 721–1100: всё в один столбец */
@media (max-width:1100px){
 .pe-head,.pe-q2{grid-template-columns:minmax(0,1fr);gap:22px}
 .pe-head>p,.pe-q2 .body{padding-top:0}
 .pe-hero{grid-template-columns:minmax(0,1fr);row-gap:56px;padding-bottom:40px}
 .pe-hero-t{max-width:640px}
 .pe-covers{max-width:600px;margin-top:0}
 .pe-q .pe-in{padding-bottom:0}
 .pe-q2{max-width:680px}
 .pe-rd li{grid-template-columns:220px minmax(0,1fr);gap:20px}
 .pe-ar .rs,.pe-wk .rs,.pe-sp-sec .rs,.pe-q .rs{padding-top:80px;margin-top:72px}
 .pe-ar .rs,.pe-wk .rs{background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22168%22%20height%3D%2222%22%20viewBox%3D%220%200%20168%2022%22%3E%3Cpath%20d%3D%22M4%2013.2%20C%2026%209.6%2C%2048%208.4%2C%2070%2010.6%20C%2092%2012.8%2C%20112%2014.6%2C%20134%2011.4%20C%20146%209.6%2C%20156%207.6%2C%20164%208.4%20C%20156%209.4%2C%20146%2011.6%2C%20134%2013.4%20C%20112%2016.8%2C%2092%2015.2%2C%2070%2013%20C%2048%2010.9%2C%2026%2011.8%2C%204%2013.2%20Z%22%20fill%3D%22%238f8c86%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%224%22%20r%3D%221.6%22%20fill%3D%22%238f8c86%22%2F%3E%3C%2Fsvg%3E') center top / 168px 22px no-repeat}
 .pe-ar .pe-in,.pe-sp-sec .pe-in{padding-bottom:0}
 .pe-ar .pe-in,.pe-sp-sec .pe-in,.pe-wk .pe-in{gap:36px}
 /* линия материала вертикально, как на телефоне */
 .pe-rail{display:none}
 .pe-flow ol{display:block;max-width:680px}
 .pe-flow li{position:relative;margin-left:4px;padding:0 0 26px 26px;gap:4px}
 .pe-flow li::before{content:"";position:absolute;left:-.4px;top:14px;bottom:-14px;width:.75px;background:var(--ink)}
 .pe-flow li::after{content:"";position:absolute;left:-3.6px;top:11px;width:6.4px;height:6.4px;border-radius:50%;background:var(--ink)}
 .pe-flow li:last-child::before{content:none}
 .pe-sps{gap:56px;max-width:680px}
 .pe-sp,.pe-sp-r{grid-template-columns:minmax(0,1fr);gap:16px}
 .pe-sp-r img{order:0}
 .pe-sp figcaption{padding-bottom:0;gap:8px}
 .pe-wk .pe-in{display:flex;padding-bottom:120px}
 .pe-wl{margin-top:0;max-width:680px;width:100%}
}
/* телефон: доски PeriodikaM и PeriodikaM2 */
@media (max-width:720px){
 .pe-bm{display:inline}
 .pe-hero{padding-top:40px;padding-bottom:8px;row-gap:26px}
 .pe-hero-t{gap:22px}
 .pe-covers{margin-top:0}
 .pe-stack{aspect-ratio:350 / 340}
 .pe-stack img{width:57.14cqw;aspect-ratio:200 / 280}
 .pe-c2{left:41.71cqw;top:14.29cqw;box-shadow:0 1px 2px rgba(40,30,20,.10),0 12px 28px rgba(40,30,20,.12)!important}
 .pe-caps{margin-top:22px;flex-direction:column;gap:10px}
 .pe-k1{flex:none;margin-top:0!important}
 .pe-k2{margin:0!important}
 .pe-ar .rs,.pe-wk .rs,.pe-sp-sec .rs,.pe-q .rs{margin-top:72px}
 .pe-in,.pe-ar .pe-in,.pe-sp-sec .pe-in,.pe-wk .pe-in{gap:22px}
 .pe-acc{line-height:1.25}
 .pe-rd{margin-top:14px;gap:22px}
 .pe-rd li{display:flex;flex-direction:column;gap:4px;padding-left:calc(var(--i) * 24px)}
 .pe-flow{margin-top:14px}
 .pe-ar .pe-in{padding-bottom:80px}
 .pe-flow .body{line-height:1.55}
 .pe-sp-sec .rs{margin-top:0}
 .pe-sps{margin-top:16px;gap:48px}
 .pe-sp,.pe-sp-r{gap:14px}
 .pe-sp img{box-shadow:0 1px 2px rgba(40,30,20,.10),0 12px 28px rgba(40,30,20,.12)}
 .pe-t{font-size:30px}
 .pe-wk .pe-in{padding-bottom:80px}
 .pe-wl{margin-top:10px}
 .pe-wl li{display:flex;flex-direction:column;gap:6px;padding:14px 0 16px}
}