/* Дизайн-система «Алтай-Гид». Один источник правды для всех страниц. Правится здесь, а не в отдельных файлах — иначе страницы разъедутся. */ :root{ /* палитра снята с топографической карты, а не с интерфейсного набора */ --paper:#DEDDD3; /* бумага двухкилометровки */ --plate:#E9E8E0; /* плашки, светлее бумаги */ --ink:#14181A; /* чёрная печать */ --ink2:#4A5250; --faint:#7E837D; --contour:#7A5832; /* утолщённая горизонталь */ --contour2:#A08256; /* обычная горизонталь */ --forest:#98A68C; /* заливка леса */ --water:#5E90AC; /* вода */ --route:#C6302B; /* маркировка маршрута */ --night:#0F1413; /* ночной регистр */ --night2:#18201E; --din:"DIN Condensed","DIN Alternate","Helvetica Neue Condensed Bold","Arial Narrow",sans-serif; --serif:"PT Serif",Georgia,serif; --sans:"PT Sans","Helvetica Neue",Helvetica,sans-serif; --mono:"PT Mono",Menlo,Monaco,monospace; --e:cubic-bezier(.2,.7,.3,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif); font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} :focus-visible{outline:2px solid var(--route);outline-offset:3px} .w{max-width:1180px;margin:0 auto;padding:0 26px} /* отметка — заменяет декоративные 01/02/03: несёт высоту или километр */ .mark{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint)} /* Зерно печати: у карты есть фактура бумаги, у экрана её нет — возвращаем. Было mix-blend-mode:multiply поверх SVG-турбулентности. Слой на весь экран с блендингом заставляет браузер пересчитывать наложение всего кадра при каждой прокрутке — на слабой машине это и есть рывки. Готовый тайл чёрного зерна с альфой даёт то же потемнение обычным наложением и стоит один композитный слой. */ body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none; opacity:.09;background-image:url("grain.png");background-size:128px 128px} /* ─────────── шапка ─────────── */ .top{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s var(--e)} .top .w{display:flex;align-items:center;gap:22px;height:60px} .top.stuck{background:rgba(222,221,211,.95);border-bottom:1px solid rgba(122,88,50,.28)} .brand{font-family:var(--din);font-weight:700;font-size:24px;letter-spacing:.06em; text-transform:uppercase;color:var(--paper);transition:color .3s var(--e);white-space:nowrap} .brand i{font-style:normal;color:var(--route)} .top.stuck .brand{color:var(--ink)} .nav{display:flex;gap:20px;margin-left:auto;font-family:var(--din);font-size:16px; letter-spacing:.07em;text-transform:uppercase;color:rgba(222,221,211,.78);transition:color .3s var(--e)} .top.stuck .nav{color:var(--ink2)} .nav a:hover{color:var(--route)} @media(max-width:920px){.nav{display:none}} /* ─────────── герой: горизонтали, прочерченные поверх снимка ─────────── */ .hero{position:relative;min-height:96svh;display:flex;align-items:flex-end; background:var(--night);overflow:hidden} /* снимок занимает правую часть кадра и растворяется в ночи к левому краю */ .hero-photo{position:absolute;inset:0;z-index:1;opacity:0; animation:ph 1.6s var(--e) .35s forwards} @keyframes ph{to{opacity:1}} .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 42%; filter:brightness(.86) saturate(.8) contrast(1.05); transform:scale(1.04);will-change:transform} .hero-photo::after{content:"";position:absolute;inset:0; background:linear-gradient(96deg,var(--night) 0%,rgba(15,20,19,.93) 17%,rgba(15,20,19,.60) 32%, rgba(15,20,19,.16) 50%,rgba(15,20,19,.02) 70%,rgba(15,20,19,.16) 100%)} /* горизонтали идут поверх и карты, и снимка — это и есть связка. Слева они густые (это карта), справа тают в живом кадре: карта переходит в местность. */ #map{position:absolute;inset:0;width:100%;height:100%;z-index:2; -webkit-mask-image:linear-gradient(96deg,#000 0%,#000 38%,rgba(0,0,0,.43) 60%,rgba(0,0,0,.23) 100%); mask-image:linear-gradient(96deg,#000 0%,#000 38%,rgba(0,0,0,.43) 60%,rgba(0,0,0,.23) 100%)} .hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(180deg,rgba(15,20,19,.42) 0%,transparent 20%,transparent 55%,rgba(15,20,19,.66) 100%)} @media(max-width:900px){ /* на телефоне снимок уходит в фон целиком, иначе текст не читается */ .hero-photo::after{background:linear-gradient(180deg,rgba(15,20,19,.72) 0%,rgba(15,20,19,.42) 40%,rgba(15,20,19,.88) 100%)} #map{-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 70%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 70%)} } .hero-in{position:relative;z-index:4;padding:0 0 46px;width:100%;color:var(--paper)} /* отметка на снимке — как аннотация на планшете */ .pinpoint{position:absolute;right:9%;top:31%;z-index:3;color:var(--paper); opacity:0;transform:translateY(8px);transition:opacity .7s var(--e),transform .7s var(--e)} .pinpoint.on{opacity:1;transform:none} .pinpoint::before{content:"";position:absolute;left:-27px;top:8px;width:19px;height:19px; border-left:1.5px solid var(--route);border-bottom:1.5px solid var(--route)} .pinpoint b{display:block;font-family:var(--din);font-weight:700;font-size:23px; text-transform:uppercase;letter-spacing:.03em;line-height:1} .pinpoint s{display:block;text-decoration:none;font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;color:#B9C2BA;margin-top:5px} @media(max-width:1080px){.pinpoint{display:none}} .legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:#8DA396;margin-bottom:26px;display:flex;flex-wrap:wrap;gap:18px; opacity:0;animation:fd .8s var(--e) 1.9s forwards} .legend span{display:flex;align-items:center;gap:7px} .legend i{width:16px;height:0;border-top:2px solid currentColor;display:block} .legend .r{color:var(--route)} .legend .c{color:var(--contour2)} h1{font-family:var(--din);font-weight:700;text-transform:uppercase; font-size:clamp(50px,10vw,140px);line-height:.92;letter-spacing:.004em;margin:0 0 22px} h1 span{display:block;overflow:hidden;padding:.09em 0 .04em;margin:-.09em 0 -.04em} h1 span b{display:block;font-weight:700;transform:translateY(104%);animation:up 1s var(--e) forwards} h1 span:nth-child(2) b{animation-delay:.09s} @keyframes up{to{transform:none}} @keyframes fd{to{opacity:1}} .lead{font-size:19px;max-width:44ch;color:#CFD3C9;margin:0 0 30px; opacity:0;animation:fd .9s var(--e) .5s forwards} .lead b{color:var(--paper);font-weight:400;border-bottom:1px solid var(--route);padding-bottom:1px} .quick{display:flex;flex-wrap:wrap;gap:0;opacity:0;animation:fd .9s var(--e) .7s forwards; border:1px solid rgba(222,221,211,.24)} .quick a{font-family:var(--sans);font-size:14.5px;padding:11px 18px; border-right:1px solid rgba(222,221,211,.24);transition:.2s var(--e)} .quick a:last-child{border-right:0} .quick a:hover{background:var(--route);color:#fff} @media(max-width:760px){.quick{border:0}.quick a{border:1px solid rgba(222,221,211,.24);margin:0 -1px -1px 0}} /* ─────────── планка поиска ─────────── */ .bar{background:var(--night2);border-top:1px solid rgba(222,221,211,.16);position:relative;z-index:4} .bar .w{display:flex;align-items:stretch;gap:0} .bar input{flex:1;height:66px;background:none;border:0;outline:0;color:var(--paper); font-family:var(--sans);font-size:16.5px;padding:0 4px} .bar input::placeholder{color:#6F7B74} .bar .ic{display:flex;align-items:center;color:#6F7B74;padding-right:12px} .bar .go{font-family:var(--din);font-size:17px;letter-spacing:.09em;text-transform:uppercase; color:var(--paper);background:var(--route);padding:0 26px;display:flex;align-items:center;transition:.2s} .bar .go:hover{background:#A5251F} /* счётчики — как отметки на полях карты */ .tally{border-bottom:1px solid rgba(122,88,50,.3)} .tally .w{display:grid;grid-template-columns:repeat(5,1fr)} .tally div{padding:16px 0 15px;border-right:1px solid rgba(122,88,50,.22)} .tally div:last-child{border-right:0} .tally div:not(:first-child){padding-left:20px} .tally b{font-family:var(--din);font-weight:700;font-size:38px;line-height:1;display:block; font-variant-numeric:tabular-nums} .tally span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} @media(max-width:800px){.tally .w{grid-template-columns:repeat(3,1fr)} .tally div:nth-child(3){border-right:0} .tally div:nth-child(n+4){border-top:1px solid rgba(122,88,50,.22)}} @media(max-width:440px){.tally .w{grid-template-columns:repeat(2,1fr)}.tally div:nth-child(5){display:none}} /* ─────────── разделитель-горизонтали ─────────── */ .rule{display:block;width:100%;height:46px;opacity:.75} /* ─────────── секции ─────────── */ section{padding:66px 0} .sh{margin-bottom:32px;max-width:60ch} .sh .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase; color:var(--contour);margin-bottom:12px} .sh h2{font-family:var(--din);font-weight:700;text-transform:uppercase; font-size:clamp(34px,5.4vw,64px);line-height:.9;letter-spacing:.006em;margin:0} .sh p{margin:14px 0 0;color:var(--ink2);font-size:17px} .more{font-family:var(--din);font-size:16px;letter-spacing:.08em;text-transform:uppercase; color:var(--contour);border-bottom:1px solid rgba(122,88,50,.4);padding-bottom:2px} .more:hover{color:var(--route);border-color:var(--route)} .shrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} /* ─────────── «сейчас» — ночной регистр ─────────── */ .now{background:var(--night);color:#D5DAD0;position:relative;overflow:hidden} .now canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.30} .now .w{position:relative;padding-top:52px;padding-bottom:56px} .now .lab{color:#8DA396} .now h2{color:var(--paper)} .nowhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:26px} .pin{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px; letter-spacing:.15em;text-transform:uppercase;color:var(--route)} .pin i{width:9px;height:9px;border-radius:50%;background:var(--route);animation:pl 2.4s ease-in-out infinite} @keyframes pl{0%,100%{box-shadow:0 0 0 0 rgba(198,48,43,.55)}70%{box-shadow:0 0 0 9px rgba(198,48,43,0)}} .nowhead b{font-family:var(--din);font-weight:700;font-size:30px;text-transform:uppercase;color:var(--paper)} .nowhead em{font-style:normal;font-family:var(--mono);font-size:11px;color:#6F7B74;margin-left:auto} .dials{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(222,221,211,.18);margin-bottom:20px} @media(max-width:660px){.dials{grid-template-columns:repeat(2,1fr)}} .dial{padding:16px 18px;border-right:1px solid rgba(222,221,211,.18)} .dial:last-child{border-right:0} @media(max-width:660px){.dial:nth-child(2){border-right:0}.dial:nth-child(n+3){border-top:1px solid rgba(222,221,211,.18)}} .dial i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:#7E8B84;margin-bottom:7px} .dial b{font-family:var(--din);font-weight:700;font-size:34px;line-height:1;display:block; color:var(--paper);font-variant-numeric:tabular-nums} .dial s{display:block;text-decoration:none;font-family:var(--sans);font-size:12.5px;color:#8B968F;margin-top:3px} .states{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(222,221,211,.18)} @media(max-width:660px){.states{grid-template-columns:1fr}} .stt{padding:17px 19px;border-right:1px solid rgba(222,221,211,.18)} .stt:last-child{border-right:0} .stt h4{margin:0 0 11px;font-family:var(--mono);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:#8DA396;font-weight:400} .stt.no h4{color:#6F7B74} .stt ul{margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:14.5px;color:#AFBAB2} .stt li{padding:5px 0;opacity:0;transform:translateX(-9px);transition:.5s var(--e)} .stt li.on{opacity:1;transform:none} .stt.no li{color:#78837C} .tip{margin-top:20px;padding-top:18px;border-top:1px solid rgba(222,221,211,.18); display:flex;gap:16px;align-items:flex-start;font-size:16.5px;color:#C6CDC4} .tip b{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase; color:var(--route);flex-shrink:0;padding-top:5px;white-space:nowrap} /* ─────────── три вопроса ─────────── */ .starts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(122,88,50,.3)} @media(max-width:860px){.starts{grid-template-columns:1fr}} .start{padding:24px 24px 22px 0;border-right:1px solid rgba(122,88,50,.22);position:relative;transition:.25s var(--e)} .start:last-child{border-right:0} .start:not(:first-child){padding-left:24px} .start:hover{background:rgba(152,166,140,.16)} .start::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--route); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)} .start:hover::before{transform:scaleX(1)} .start h3{font-family:var(--din);font-weight:700;font-size:27px;text-transform:uppercase; line-height:.96;margin:11px 0 9px} .start p{margin:0 0 14px;font-size:15.5px;color:var(--ink2)} .start ul{margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:14.5px} .start li{padding:6px 0;border-top:1px solid rgba(122,88,50,.18);display:flex; justify-content:space-between;gap:12px;color:var(--contour)} .start li em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint)} /* ─────────── ярлыки ─────────── */ .chips{display:flex;flex-wrap:wrap;gap:0;margin-bottom:22px;border:1px solid rgba(122,88,50,.3)} .chip{font-family:var(--sans);font-size:14px;padding:9px 17px;color:var(--ink2); border-right:1px solid rgba(122,88,50,.22);transition:.2s} .chip:last-child{border-right:0} .chip:hover{background:rgba(152,166,140,.3)} .chip.on{background:var(--ink);color:var(--paper)} @media(max-width:700px){.chips{border:0}.chip{border:1px solid rgba(122,88,50,.3);margin:0 -1px -1px 0}} /* ─────────── места ─────────── */ .item{display:grid;grid-template-columns:230px 1fr 292px;border-top:1px solid rgba(122,88,50,.3); transition:.25s var(--e)} .item:last-of-type{border-bottom:1px solid rgba(122,88,50,.3)} .item:hover{background:rgba(152,166,140,.16)} .item .ph{position:relative;aspect-ratio:3/2;overflow:hidden;margin:16px 0 16px 0; filter:saturate(.86) contrast(1.03)} .item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)} .item:hover .ph img{transform:scale(1.05)} .item .ph b{position:absolute;left:0;top:0;background:var(--route);color:#fff; font-family:var(--mono);font-size:10.5px;padding:4px 9px} .bd{padding:20px 26px} .bd h3{font-family:var(--din);font-weight:700;font-size:30px;text-transform:uppercase; line-height:.96;margin:0 0 6px} .bd .where{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:11px} .bd p{margin:0;font-size:16px;color:var(--ink2)} .tg{display:flex;gap:14px;flex-wrap:wrap;margin-top:13px;font-family:var(--mono); font-size:10.5px;letter-spacing:.05em;color:var(--contour)} /* Паспорт места. Подпись и шкала стоят в одной строке по краям колонки, значение идёт под ними от того же левого края — строка читается как запись в легенде карты. Раньше подпись жалась к шкале, а значение висело во второй колонке с пустотой слева, и ряды выглядели съехавшими. */ .spec{padding:20px 0 20px 24px;border-left:1px solid rgba(122,88,50,.22); display:flex;flex-direction:column;justify-content:center;gap:11px} .sp{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center} .sp + .sp{border-top:1px dotted rgba(122,88,50,.32);padding-top:11px} .sp i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--faint)} /* шкала как масштабная линейка карты, а не индикатор загрузки */ .scale{display:flex;gap:2px;align-items:center;justify-self:end} .scale u{width:13px;height:8px;border:1px solid rgba(122,88,50,.5);display:block; background:transparent;transition:background .4s var(--e)} .scale.f u.on{background:var(--contour)} .scale.wt u.on{background:var(--water);border-color:rgba(94,144,172,.6)} .scale.r u.on{background:var(--route);border-color:rgba(198,48,43,.6)} .sp em{font-style:normal;font-family:var(--sans);font-size:13.5px;line-height:1.35; color:var(--ink2);grid-column:1/-1} @media(max-width:980px){ .item{grid-template-columns:1fr} .item .ph{aspect-ratio:16/7;margin:0} .spec{border-left:0;border-top:1px solid rgba(122,88,50,.22);padding:18px 0} } /* ─────────── маршруты ─────────── */ .routes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:860px){.routes{grid-template-columns:1fr}} .rt{position:relative;min-height:300px;display:flex;align-items:flex-end;overflow:hidden; color:var(--paper);transition:.3s var(--e)} .rt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:saturate(.8) contrast(1.05);transition:transform .8s var(--e)} .rt::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,20,19,0) 30%,rgba(15,20,19,.9) 100%)} .rt:hover img{transform:scale(1.07)} .rt div{position:relative;z-index:2;padding:22px} .rt .d{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--route);margin-bottom:9px} .rt h3{font-family:var(--din);font-weight:700;font-size:30px;text-transform:uppercase; line-height:.94;margin:0 0 6px} .rt p{margin:0;font-size:15px;color:#C6CDC4} /* ─────────── практика ─────────── */ .pr{display:grid;grid-template-columns:1fr auto auto;gap:26px;align-items:center;padding:20px 0; border-top:1px solid rgba(122,88,50,.3);transition:.2s var(--e)} .pr:last-child{border-bottom:1px solid rgba(122,88,50,.3)} .pr:hover{background:rgba(152,166,140,.16);padding-left:12px} .pr h3{font-family:var(--din);font-weight:700;font-size:25px;text-transform:uppercase;line-height:1;margin:0 0 5px} .pr p{margin:0;font-size:15.5px;color:var(--ink2)} .pr .n{font-family:var(--mono);font-size:11.5px;color:var(--contour);white-space:nowrap} .pr .go{font-family:var(--din);font-size:22px;color:var(--faint);transition:.2s var(--e)} .pr:hover .go{color:var(--route);transform:translateX(5px)} @media(max-width:620px){.pr{grid-template-columns:1fr auto}.pr .go{display:none}} /* ─────────── каталог ─────────── */ .cat{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px} .cd{transition:.25s var(--e)} .cd .ph{aspect-ratio:16/10;overflow:hidden;filter:saturate(.86) contrast(1.03)} .cd .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)} .cd:hover .ph img{transform:scale(1.06)} .cd h3{font-family:var(--din);font-weight:700;font-size:24px;text-transform:uppercase; line-height:1;margin:14px 0 6px} .cd p{margin:0;font-size:15px;color:var(--ink2)} .cd .m{margin-top:11px;padding-top:9px;border-top:1px solid rgba(122,88,50,.3); display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--faint)} .cd .m b{color:var(--route);font-weight:400} /* ─────────── трансфер ─────────── */ .tr{background:var(--ink);color:#D5DAD0;padding:38px 40px} @media(max-width:640px){.tr{padding:26px 22px}} .tr .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:12px} .tr h2{font-family:var(--din);font-weight:700;font-size:clamp(30px,4.4vw,50px);text-transform:uppercase; line-height:.92;margin:0;color:var(--paper)} .tr .own{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--route);border:1px solid rgba(198,48,43,.5);padding:5px 11px} .tr .note{margin:0 0 24px;font-size:16.5px;color:#AFBAB2;max-width:58ch} .tr .note b{color:var(--paper);font-weight:400;border-bottom:1px solid var(--route)} .dirs{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid rgba(222,221,211,.18)} @media(max-width:740px){.dirs{grid-template-columns:1fr}} .dir{padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center; border-right:1px solid rgba(222,221,211,.18);border-bottom:1px solid rgba(222,221,211,.18);transition:.2s} .dir:nth-child(2n){border-right:0} .dir:nth-last-child(-n+2){border-bottom:0} @media(max-width:740px){.dir{border-right:0}.dir:last-child{border-bottom:0}} .dir:hover{background:rgba(198,48,43,.13)} .dir b{font-family:var(--sans);font-size:15.5px;color:var(--paper);font-weight:700;display:block} .dir s{display:block;text-decoration:none;font-family:var(--mono);font-size:10.5px;color:#7E8B84;margin-top:3px} .dir em{font-style:normal;font-family:var(--din);font-size:26px;color:var(--route);white-space:nowrap} /* ─────────── продукция ─────────── */ .prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));border-top:1px solid rgba(122,88,50,.3)} .pd{padding:18px 20px 20px 0;border-right:1px solid rgba(122,88,50,.22); border-bottom:1px solid rgba(122,88,50,.22);transition:.2s} .pd:not(:first-child){padding-left:20px} .pd:hover{background:rgba(152,166,140,.2)} /* Снимок в карточке продукта: категорию узнают в лицо раньше, чем читают название. */ .pd .ph{aspect-ratio:4/3;overflow:hidden;margin:0 0 13px; background:rgba(122,88,50,.09);filter:saturate(.86) contrast(1.03)} .pd .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)} .pd:hover .ph img{transform:scale(1.05)} .pd h3{font-family:var(--din);font-weight:700;font-size:23px;text-transform:uppercase;line-height:1;margin:0 0 7px} .pd p{margin:0;font-size:14.5px;color:var(--ink2)} .pd .s{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--faint)} .pd.hot .s{color:var(--route)} /* Правила для .m тут не было вовсе: место и цена слипались в «тракта600–1 200 ₽/кг». */ .pd .m{margin-top:10px;padding-top:9px;border-top:1px solid rgba(122,88,50,.3); display:flex;flex-wrap:wrap;gap:3px 12px;justify-content:space-between;align-items:baseline; font-family:var(--mono);font-size:10.5px;line-height:1.45;color:var(--faint)} .pd .m b{color:var(--route);font-weight:400;white-space:nowrap} /* ─────────── андрей ─────────── */ .who{display:grid;grid-template-columns:290px 1fr;gap:40px;align-items:center; border-top:1px solid rgba(122,88,50,.3);border-bottom:1px solid rgba(122,88,50,.3);padding:34px 0} @media(max-width:820px){.who{grid-template-columns:1fr;gap:24px}} .who img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.8) contrast(1.05)} .who blockquote{margin:0;font-size:clamp(21px,2.6vw,30px);line-height:1.35} .who .facts{display:flex;flex-wrap:wrap;gap:34px;margin-top:24px;padding-top:20px; border-top:1px solid rgba(122,88,50,.22)} .who .facts b{font-family:var(--din);font-weight:700;font-size:34px;line-height:1;display:block; font-variant-numeric:tabular-nums} .who .facts span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} /* ─────────── партнёрам ─────────── */ .ptn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px; border:1px solid rgba(122,88,50,.4);padding:28px 30px} .ptn h3{font-family:var(--din);font-weight:700;font-size:30px;text-transform:uppercase;line-height:1;margin:0 0 7px} .ptn p{margin:0;font-size:16px;color:var(--ink2);max-width:58ch} .btn{font-family:var(--din);font-size:19px;letter-spacing:.07em;text-transform:uppercase; background:var(--route);color:#fff;padding:14px 28px;transition:.2s var(--e)} .btn:hover{background:#A5251F} /* ─────────── подвал ─────────── */ footer{background:var(--night);color:#8B968F;margin-top:60px;padding:48px 0 38px;font-family:var(--sans)} .fmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px; padding-bottom:30px;border-bottom:1px solid rgba(222,221,211,.16)} .fmap h4{margin:0 0 11px;font-family:var(--mono);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:#8DA396;font-weight:400} .fmap a{display:block;padding:4px 0;font-size:14.5px} .fmap a:hover{color:var(--route)} .fbot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-top:24px} .fbot small{font-family:var(--mono);font-size:10px;color:#5F6A64;max-width:64ch;line-height:1.8} .rv{opacity:0;transform:translateY(20px);transition:opacity .65s var(--e),transform .65s var(--e)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} h1 span b{transform:none} .lead,.quick,.legend{opacity:1} .stt li{opacity:1;transform:none} } /* ─────────── профиль высот (трансфер, туры) ─────────── */ .profwrap{border-top:1px solid rgba(122,88,50,.3);border-bottom:1px solid rgba(122,88,50,.3);padding:8px 0 4px} .profwrap.dark{border-color:rgba(222,221,211,.18)} canvas.profile{display:block;width:100%;height:168px} @media(max-width:640px){canvas.profile{height:132px}} .profhead{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline; font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--faint);padding-bottom:6px} .profwrap.dark .profhead{color:#7E8B84} /* ═══════════════ СТАТЬЯ ═══════════════ */ .art{max-width:760px;margin:0 auto;padding:0 26px} .art-hero{position:relative;background:var(--night);overflow:hidden;min-height:58svh; display:flex;align-items:flex-end} .art-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .art-hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,20,19,.55) 0%,rgba(15,20,19,.15) 35%,rgba(15,20,19,.92) 100%)} /* width:100% обязателен: .art-hero — флекс-контейнер, и без него блок сжимается по длине заголовка. Из-за этого левый край h1 гулял от страницы к странице и не совпадал с колонкой текста под героем. */ .art-hero .art{position:relative;z-index:2;width:100%; padding-top:120px;padding-bottom:40px;color:var(--paper)} /* Хабы разделов берут широкую колонку: там под заголовком не статья, а сетка. */ .art-hero.wide .art{max-width:1180px} .art-hero h1{font-family:var(--din);font-weight:700;text-transform:uppercase; font-size:clamp(31px,5.2vw,62px);line-height:.94;letter-spacing:.005em;margin:0 0 16px} .crumbs{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:#8DA396;margin-bottom:20px} .crumbs a:hover{color:var(--route)} .crumbs span{color:#5F6A64;margin:0 6px} .art-meta{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:#9FB0A7} .art-meta b{color:var(--route);font-weight:400} .art-body{padding:44px 26px 20px;font-size:18px;line-height:1.7} .art-body p{margin:0 0 20px} .art-body h2{font-family:var(--din);font-weight:700;text-transform:uppercase; font-size:clamp(25px,3.6vw,38px);line-height:.96;letter-spacing:.005em;margin:44px 0 16px} .art-body h3{font-family:var(--din);font-weight:700;text-transform:uppercase; font-size:22px;line-height:1;margin:32px 0 12px} .art-body ul,.art-body ol{margin:0 0 20px;padding-left:22px} .art-body li{margin-bottom:8px} .art-body a{color:var(--contour);border-bottom:1px solid rgba(122,88,50,.4)} .art-body a:hover{color:var(--route);border-color:var(--route)} .art-body img{width:100%;margin:8px 0 6px} .art-body figure{margin:28px 0} .art-body figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; color:var(--faint);margin-top:7px} .art-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px} .art-body th,.art-body td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid rgba(122,88,50,.28)} .art-body th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);font-weight:400} .art-body td:last-child,.art-body th:last-child{text-align:right;padding-right:0} /* Те же таблицы в разделах, где нет узкой колонки статьи: сводка маршрутов, километры тракта, обратный отсчёт сроков. Правая колонка не прижимается — в хабах она содержательная, а не итоговая цифра. */ .w>table{width:100%;border-collapse:collapse;margin:0;font-size:15.5px; border-top:1px solid rgba(122,88,50,.3)} .w>table th,.w>table td{text-align:left;padding:12px 16px 12px 0;vertical-align:top; border-bottom:1px solid rgba(122,88,50,.28)} .w>table tr:first-child th{font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--faint);font-weight:400} .w>table th{font-family:var(--din);font-weight:700;font-size:19px;text-transform:uppercase; line-height:1.1;white-space:nowrap;padding-right:24px} .w>table a{color:var(--contour);border-bottom:1px solid rgba(122,88,50,.4)} .w>table a:hover{color:var(--route);border-color:var(--route)} @media(max-width:700px){ .w>table th{font-size:16px;white-space:normal;padding-right:14px} .w>table td{font-size:14.5px} } /* врезка голосом Андрея — обязательный слот статьи */ .say{border-left:3px solid var(--route);background:var(--plate);padding:20px 24px;margin:28px 0} .say .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--route);margin-bottom:9px} .say p{margin:0;font-size:18px;line-height:1.55} .say p+p{margin-top:12px} .say.todo{border-left-style:dashed;background:transparent} .say.todo p{color:var(--faint);font-style:italic} /* предупреждение */ .warn{border:1px solid rgba(198,48,43,.4);background:rgba(198,48,43,.05);padding:18px 22px;margin:28px 0} .warn .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--route);margin-bottom:8px} .warn p{margin:0;font-size:16.5px} /* итог и оглавление */ .toc{border-top:1px solid rgba(122,88,50,.3);border-bottom:1px solid rgba(122,88,50,.3); padding:16px 0;margin:0 0 32px} .toc b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--faint);margin-bottom:10px} .toc ol{margin:0;padding-left:20px;font-family:var(--sans);font-size:15px} .toc li{margin-bottom:5px} /* карточки статей в блоге и в подвале статьи */ .posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px} .post{display:block;transition:.25s var(--e)} .post .ph{aspect-ratio:1200/630;overflow:hidden;background:var(--night)} .post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)} .post:hover .ph img{transform:scale(1.05)} .post h3{font-family:var(--din);font-weight:700;font-size:23px;text-transform:uppercase; line-height:1;margin:13px 0 7px} .post p{margin:0;font-size:15px;color:var(--ink2)} .post .m{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--faint)} .post:hover h3{color:var(--route)} /* служебные страницы */ .plain{max-width:760px;margin:0 auto;padding:120px 26px 60px} .plain h1{font-family:var(--din);font-weight:700;text-transform:uppercase; font-size:clamp(34px,5vw,58px);line-height:.94;margin:0 0 20px} .plain h2{font-family:var(--din);font-weight:700;text-transform:uppercase; font-size:24px;margin:34px 0 12px} .plain p,.plain li{font-size:16.5px} .plain ul,.plain ol{padding-left:22px} .e404{min-height:78svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .e404 .code{font-family:var(--din);font-weight:700;font-size:clamp(90px,20vw,220px); line-height:.8;color:var(--route);margin:0 0 10px} /* ═══════════════════════════════════════════════════════════════════ ХАБЫ РАЗДЕЛОВ. Части, которые раньше жили в