/* ───────────────────────────────────────────────────────────────────── REACH · общий лист стилей макета-рыбы По «Дизайн-система-журнала_2026-09-20.md». Агент контента, 20.09.2026. Шрифты подключаются в страницы. ───────────────────────────────────────────────────────────────────── */ :root{ --paper:#f7f8fa; /* холодная бумага */ --ink:#12161d; --mut:#5b6673; --rule:#d8dde3; --red:#c8553d; --navy:#0a1322; --navy-2:#152438; --gold:#8cdafa; /* акцент тёмных полос — тот же, что на обложке */ --pale:#eef1f5; /* плашка светлее бумаги */ /* шкала модели — канон */ --organic:#2f8f5b; --neutral:#8a857f; --effort:#b8860b; --conflict:#c0392b; --frame:14px; --pad:44px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:90px} body{background:var(--paper);color:var(--ink); font:400 17px/1.62 "PT Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:inherit} /* ── рамка накладкой: четыре полосы поверх, страница едет под ними ───── */ .fr{position:fixed;z-index:60;pointer-events:none;background:var(--paper)} .fr::after{content:"";position:absolute;background:var(--rule)} .fr-t{top:0;left:0;right:0;height:var(--frame)} .fr-t::after{left:0;right:0;bottom:0;height:1px} .fr-b{bottom:0;left:0;right:0;height:var(--frame)} .fr-b::after{left:0;right:0;top:0;height:1px} .fr-l{top:0;bottom:0;left:0;width:var(--frame)} .fr-l::after{top:0;bottom:0;right:0;width:1px} .fr-r{top:0;bottom:0;right:0;width:var(--frame)} .fr-r::after{top:0;bottom:0;left:0;width:1px} /* ── типографика ─────────────────────────────────────────────────────── */ .rub{font-family:"PT Sans Narrow",Arial Narrow,sans-serif;font-weight:700; font-size:11.5px;line-height:1.3;letter-spacing:.26em;text-transform:uppercase;color:var(--mut)} h1{font-family:"Playfair Display",Georgia,serif;font-weight:700; font-size:clamp(38px,4.4vw,64px);line-height:1.06;letter-spacing:-.015em} h2{font-family:"Playfair Display",Georgia,serif;font-weight:700; font-size:clamp(28px,2.8vw,40px);line-height:1.12;letter-spacing:-.01em} h3{font-family:"Playfair Display",Georgia,serif;font-weight:700; font-size:26px;line-height:1.18} h4{font-family:"Playfair Display",Georgia,serif;font-weight:400; font-size:21px;line-height:1.25} /* переносов на сайте нет, но длинное слово не должно распирать колонку */ h1,h2,h3,h4{overflow-wrap:break-word} /* висячие строки в заголовках: браузер сам выравнивает строки по длине и не оставляет одно слово внизу. Для лидов и подписей — мягкий вариант, он только запрещает одиночное слово в последней строке. */ h1,h2,h3,h4{text-wrap:balance} .lead,.note,.cap,figcaption,.teaser{text-wrap:pretty} .lead{font-size:20px;line-height:1.5;max-width:52ch;text-align:left} body{hyphens:none} .mut{color:var(--mut)} p+p{margin-top:14px} .col{max-width:52ch} .cap{margin-top:12px;font-family:"PT Sans Narrow",sans-serif;font-size:12.5px; letter-spacing:.06em;color:var(--mut);font-style:italic} /* ── шапка ───────────────────────────────────────────────────────────── */ /* шапка остаётся наверху при прокрутке: липкая, с бумажной подложкой, чтобы текст статьи не просвечивал сквозь неё. В прокрутке набор поджимается и появляется тонкая линия-граница. */ header.top,.top{position:sticky;top:var(--frame);z-index:50;background:var(--paper); padding:calc(var(--frame) + 8px) var(--pad) 14px; transition:padding .25s ease,box-shadow .25s ease} .top.stuck{padding-top:11px;padding-bottom:11px; box-shadow:0 1px 0 var(--rule),0 10px 22px rgba(18,22,29,.07)} .top-in{max-width:1240px;margin:0 auto;display:flex;align-items:baseline; justify-content:space-between;gap:24px} .brand{font-family:"Playfair Display",Georgia,serif;font-weight:700; font-size:22px;letter-spacing:-.03em;text-decoration:none} .brand small{font-family:"PT Sans Narrow",sans-serif;font-weight:700;font-size:10px; letter-spacing:.3em;color:var(--mut);display:block;margin-top:2px} nav.main{display:flex;gap:30px;align-items:baseline} nav.main>*{font-family:"PT Sans Narrow",Arial Narrow,sans-serif;font-weight:700; font-size:13px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--mut)} nav.main a:hover{color:var(--ink)} nav.main .here{color:var(--ink)} /* Заголовок подменю — ссылка на раздел: клик ведёт на страницу раздела, выпадающий список остаётся для выбора конкретной страницы. */ .subnav{position:relative} .subnav>.sub-head{text-decoration:none} .subnav>button,.subnav>.sub-head{font-family:"PT Sans Narrow",Arial Narrow,sans-serif;font-weight:700; font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut); background:none;border:0;cursor:pointer;display:inline-flex;gap:7px;align-items:center;padding:0} .subnav>button:hover,.subnav>.sub-head:hover,.subnav.here>button,.subnav.here>.sub-head{color:var(--ink)} .subnav>button .tri,.subnav>.sub-head .tri{font-size:9px;transform:translateY(-1px)} .subnav ul{position:absolute;left:-16px;top:calc(100% + 12px);min-width:max-content; background:var(--paper);border:1px solid var(--rule);padding:6px 0; list-style:none;opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:40} .subnav:hover ul,.subnav.open ul{opacity:1;visibility:visible;transform:none} .subnav li a{display:block;padding:9px 22px;text-decoration:none;color:var(--ink); font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:18px; letter-spacing:0;text-transform:none;white-space:nowrap} .subnav li a:hover{background:var(--pale)} .lang{font-family:"PT Sans Narrow",sans-serif;font-weight:700;font-size:12px; letter-spacing:.2em;color:var(--mut)} .lang b{color:var(--ink);font-weight:700} .burger{display:none;border:0;background:none;cursor:pointer;padding:6px 0} .burger i{display:block;width:24px;height:1px;background:var(--ink);margin:6px 0} /* ── первый экран: половина на половину, по Economist ─────────────────── */ .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;min-height:clamp(520px,74vh,760px); margin-top:clamp(28px,5vh,60px)} .hero-words{background:var(--pale);display:flex;flex-direction:column;justify-content:center; padding:clamp(40px,5.4vw,78px) clamp(32px,4.4vw,66px); margin-left:var(--pad);border-right:1px solid var(--rule)} .hero-words .rub{margin-bottom:22px} .hero-words h1{margin-bottom:26px;font-size:clamp(34px,3.6vw,54px); overflow-wrap:break-word} .hero-words .lead{color:#3c4653} .hero-words .note{margin-top:30px;font-family:"PT Sans Narrow",sans-serif;font-weight:700; font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut)} .hero-pic{position:relative;overflow:hidden;margin-right:var(--frame);background:var(--pale)} .hero-pic img{width:100%;height:100%;object-fit:cover; filter:saturate(.62) contrast(1.04) brightness(.96);transition:filter .6s ease} .hero-pic:hover img{filter:none} /* фон блока — ровно тот же тёмно-синий, что и заставка ролика: поля сверху и снизу сливаются с кадром, границы не видно. Объём даёт общее свечение поверх обоих слоёв, а не разный фон у кадра и у полей. */ .hero-film{position:relative;background:#101d2e; overflow:hidden;margin-right:var(--frame)} /* ролик лежит под затемнением и кнопкой: пока не нажали, виден кадр-заставка */ /* кадр вписывается целиком: окно первого экрана почти квадратное, а ролик широкий — при обрезке по краям съедало бы длинные слова */ .hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; background:transparent} .hero-film .grain{position:absolute;inset:0;z-index:1;pointer-events:none; transition:opacity .4s ease; background:radial-gradient(90% 70% at 62% 40%,rgba(120,170,220,.20),transparent 62%)} .hero-film.playing .grain,.hero-film.playing .play{opacity:0;pointer-events:none} /* кнопка стоит ниже середины, чтобы не наезжать на марку в кадре-заставке */ .play{position:absolute;inset:0;z-index:2;display:grid;place-items:center; padding-top:34%;border:0;background:none; cursor:pointer;color:#f4f1e9;transition:opacity .4s ease} .play span{display:grid;place-items:center;width:84px;height:84px;border-radius:50%; border:1px solid rgba(244,241,233,.55);background:rgba(10,19,34,.35); font-size:20px;transition:background .25s ease,border-color .25s ease} .play:hover span{background:rgba(232,201,138,.18);border-color:var(--gold)} .film-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 26px; font-family:"PT Sans Narrow",sans-serif;font-weight:700;font-size:11.5px; letter-spacing:.26em;text-transform:uppercase;color:#9fb2c6; border-top:1px solid rgba(244,241,233,.18);background:rgba(6,12,21,.5)} /* ── полоса ──────────────────────────────────────────────────────────── */ .band{padding:clamp(56px,8vh,104px) var(--pad)} .band.tight{padding-top:clamp(34px,5vh,60px)} .wrap{max-width:1240px;margin:0 auto} .band-head{max-width:62ch;margin-bottom:clamp(34px,5vh,56px)} .band-head .rub{margin-bottom:18px} .band-head h2{margin-bottom:16px} .band-head p{color:var(--mut);max-width:56ch} .hr{height:1px;background:var(--rule);max-width:1240px;margin:0 auto} /* ── кнопки ──────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px; margin-top:22px;padding:13px 16px 13px 20px;border:1px solid var(--ink); text-decoration:none;color:var(--ink);background:none;cursor:pointer; font-family:"PT Sans Narrow",sans-serif;font-weight:700;font-size:13px; letter-spacing:.18em;text-transform:uppercase;transition:background .2s,color .2s} .btn:hover{background:var(--ink);color:var(--paper)} .btn.ghost{border-color:var(--rule);color:var(--mut)} .btn.ghost:hover{background:none;border-color:var(--ink);color:var(--ink)} .btn .ar{font-size:15px} .btns{display:flex;flex-wrap:wrap;gap:16px} /* ── тёмный разворот ─────────────────────────────────────────────────── */ .dark{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-2) 58%,#060c15 100%); color:#f4f1e9;margin:0 var(--frame)} .dark .rub{color:var(--gold)} .dark h2,.dark h3{color:#f4f1e9} .dark p,.dark .band-head p{color:#c2d0de} .dark .btn{border-color:rgba(244,241,233,.6);color:#f4f1e9} .dark .btn:hover{background:#f4f1e9;color:var(--navy)} /* ── врезка-цитата ───────────────────────────────────────────────────── */ /* Врезка набирается по левому краю: на узкой мерке выключка по формату растягивает пробелы, и после короткой строки получается дыра в полстроки. Мерка чуть шире, переносы мягкие — длинное слово уходит на строку целиком. */ .pull{margin:clamp(40px,6vh,72px) 0;padding:0 0 0 28px;border-left:2px solid var(--red); font-family:"PT Serif",Georgia,serif;font-style:italic;font-size:clamp(21px,2vw,26px); line-height:1.4;max-width:38ch;text-align:left;text-wrap:pretty} /* ── блок «Далее» ────────────────────────────────────────────────────── */ .next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--rule);border-top:1px solid var(--rule)} .next a{background:var(--paper);padding:30px 26px 34px;text-decoration:none;transition:background .2s} .next a:hover{background:var(--pale)} .next .rub{margin-bottom:10px} .next h3{font-size:23px} footer.foot{padding:26px var(--pad) calc(var(--frame) + 26px); font-family:"PT Sans Narrow",sans-serif;font-size:11.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--mut)} footer.foot .wrap{display:flex;justify-content:space-between;gap:20px} /* ── кольцо курсора (проба, решение Романа не принято) ───────────────── */ #ring{position:fixed;top:0;left:0;width:54px;height:54px;border-radius:50%; border:1.5px solid var(--red);mix-blend-mode:difference;pointer-events:none;z-index:9999; opacity:0;will-change:transform; transition:opacity .35s ease,width .28s ease,height .28s ease,border-width .28s ease} #ring.on{opacity:1} #ring.big{width:86px;height:86px;border-width:1px} /* ── «живой» кадр: короткий mp4 на месте снимка, играет один раз ─────── */ .livev{position:relative;display:block;overflow:hidden} .livev>img{width:100%;display:block} .livev>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .45s ease} .livev.on>video{opacity:1} .livev.fit>video{object-fit:contain} /* рисунок на белом ложится на бумагу умножением, без подложки */ .livev.ink{mix-blend-mode:multiply} /* ── кадр в край: выходит за поля страницы на всю ширину окна ─────────── */ .bleed{width:100vw;margin-left:50%;transform:translateX(-50%);position:relative} .bleed.inset{width:calc(100vw - var(--frame)*2)} /* ── разворот-заставка статьи: длинный горизонтальный кадр ───────────── */ .opener{position:relative;margin-top:clamp(24px,4vh,46px);overflow:hidden;background:var(--pale)} .opener .shot{aspect-ratio:21/9;max-height:74vh} .opener .shot img,.opener .shot video{width:100%;height:100%;object-fit:cover} .opener-words{max-width:1240px;margin:0 auto;padding:clamp(28px,4.4vh,54px) var(--pad) 0} .opener-words .rub{margin-bottom:16px} .opener-words h1{margin-bottom:20px;max-width:18ch} .opener-words .lead{color:#3c4653} .opener-meta{max-width:1240px;margin:0 auto;padding:14px var(--pad) 0; display:flex;gap:26px;flex-wrap:wrap; font-family:"PT Sans Narrow",sans-serif;font-weight:700;font-size:11.5px; letter-spacing:.24em;text-transform:uppercase;color:var(--mut)} /* ── колонка статьи ────────────────────────────────────────────────── Правило Романа: основной текст набирается по двум краям. Колонка стоит по центру полосы и шире газетной меры — справа от неё изображения нет, значит воздух распределяется поровну, а не копится с одной стороны. */ .article{max-width:920px;margin:0 auto;padding:0 var(--pad)} .article p,.article li,.article blockquote{text-align:justify;hyphens:none} /* врезка внутри статьи — по левому краю, выключка её растягивает */ .article blockquote.pull,.band blockquote.pull{text-align:left} .article h2,.article h3,.article h4,.article .rub,.article figcaption, .article .cap,.article .lead{text-align:left} .article h2{margin:clamp(40px,5.4vh,64px) 0 14px} .article h3{margin:clamp(28px,3.6vh,40px) 0 10px} .article p{margin-top:14px} .article .first::first-letter{float:left;font-family:"Playfair Display",Georgia,serif; font-weight:700;font-size:4.1em;line-height:.82;padding:.05em .1em 0 0;color:var(--ink)} .article figure{margin:clamp(34px,4.6vh,54px) 0} .article figure img{width:100%} /* ── журнальные тизеры: сетка будущих статей ─────────────────────────── */ .teasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0; border-top:1px solid var(--ink);border-left:1px solid var(--rule)} .teaser{display:flex;flex-direction:column;text-decoration:none;background:var(--paper); border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:0 0 26px;transition:background .25s ease} .teaser:hover{background:var(--pale)} .teaser .shot{aspect-ratio:16/10;overflow:hidden;background:var(--pale); border-bottom:1px solid var(--rule)} .teaser .shot img,.teaser .shot video{width:100%;height:100%;object-fit:cover; filter:saturate(.62) contrast(1.04) brightness(.96);transition:filter .5s ease,transform .8s ease} .teaser .shot.draw img{object-fit:contain;filter:none;padding:14px;background:var(--paper)} .teaser:hover .shot img{filter:none} .teaser:hover .shot.draw img{transform:scale(1.02)} .teaser .in-pad{padding:24px 26px 0} .teaser .num{font-family:"PT Sans Narrow",sans-serif;font-weight:700;font-size:11.5px; letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:10px} .teaser h3{margin-bottom:10px} .teaser p{font-size:16px;line-height:1.52;color:var(--mut);margin-bottom:auto} .teaser .more{display:inline-block;margin-top:18px; font-family:"PT Sans Narrow",sans-serif;font-weight:700;font-size:12.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--ink); border-bottom:1px solid var(--red);padding-bottom:3px} /* ── половина на половину внутри статьи: текст и снимок поровну ──────── */ .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,3.4vw,54px);align-items:center} .grid2.wide-pic{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .grid2 .txt>*{max-width:46ch} .grid2 .txt h2{margin-bottom:16px} .grid2 .txt p+p{margin-top:14px} .grid2 figure{margin:0} .grid2 figure img{width:100%} /* ── появление блоков при прокрутке ──────────────────────────────────── */ .rise{opacity:0;transform:translateY(18px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .rise.in{opacity:1;transform:none} /* ── телефон ─────────────────────────────────────────────────────────── */ @media(max-width:980px){ :root{--pad:18px} .hero{grid-template-columns:1fr;min-height:0} .hero-words{margin-left:0;border-right:0;border-bottom:1px solid var(--rule);padding:34px 22px 40px} .hero-film,.hero-pic{margin-right:0;aspect-ratio:16/9} .next{grid-template-columns:1fr} nav.main,.lang{display:none} .burger{display:block} footer.foot .wrap{flex-direction:column;gap:8px} .pull{margin:34px 0;padding-left:18px} .teasers{grid-template-columns:1fr;border-left:0} .teaser{border-right:0} .grid2,.grid2.wide-pic{grid-template-columns:1fr;gap:24px} .opener .shot{aspect-ratio:3/2;max-height:none} .article{max-width:none} } @media(hover:none),(pointer:coarse){#ring{display:none}} @media(prefers-reduced-motion:reduce){ #ring{display:none} html{scroll-behavior:auto} .rise{opacity:1;transform:none;transition:none} } /* ── полоса брендов ────────────────────────────────────────────────────── Механика перенесена с личного сайта: лента едет справа налево, в ней два одинаковых набора логотипов, поэтому шов не виден. По краям маска в прозрачность, при наведении лента останавливается. */ /* полоса стоит на бумаге страницы, без своей подложки и рамки — как на личном сайте: там она читается воздухом между блоками */ .brands{background:transparent} .marq{position:relative;overflow:hidden;padding:26px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .marq-track{display:flex;width:max-content;animation:marq linear infinite} .marq:hover .marq-track{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .bmark{flex:0 0 auto;display:flex;flex-direction:column;align-items:center; justify-content:center;height:44px;padding:0 42px} .bmark img{max-height:36px;width:auto;opacity:.84;mix-blend-mode:multiply; filter:grayscale(1) contrast(1.05) brightness(.95)} .bmark.sm img{max-height:26px;max-width:200px} .bword{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:18px; letter-spacing:.02em;text-transform:uppercase;color:var(--ink);opacity:.86; white-space:nowrap;line-height:1} .bnote{font-family:"PT Sans Narrow",sans-serif;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--mut);margin-top:5px;white-space:nowrap} @media(max-width:780px){ .bmark{height:36px;padding:0 24px} .bmark img{max-height:26px}.bmark.sm img{max-height:20px;max-width:150px} .bword{font-size:15px}.bnote{font-size:9px} } @media(prefers-reduced-motion:reduce){ .marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none} .marq-track{animation:none} } /* ── блок лекции ────────────────────────────────────────────────────── Тот же приём, что на «Программах»: слева текст на светлом, справа тёмный кадр с круглой кнопкой. Ролик лежит на YouTube, поэтому до нажатия здесь только снимок: ничего лишнего не грузится и никто посетителя не считает, пока он сам не нажал. */ .hero.lecture{min-height:clamp(440px,60vh,640px)} /* кнопка по центру кадра: на «Программах» она опущена под слово REACH, здесь опускать не под что */ .hero.lecture .play{padding-top:0} .hero.lecture .hero-words h2{margin-bottom:26px;font-size:clamp(30px,3.1vw,46px); font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.08} .hero-film .film-poster{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;opacity:.9;transition:opacity .3s ease} .hero-film:hover .film-poster{opacity:1} .hero-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .hero-film.playing .film-poster{opacity:0;pointer-events:none}