/* «Маркация»: сайт как размеченная тропа. Красно-белые знаки «баллончиком» (img/mark/*.webp),
   извилистая чёрная пунктирная тропа, заголовки Unbounded, основной текст Onest.
   Подключается последним (после mobile.css) и только переопределяет цвета и детали. */
:root{
  --bg:#ffffff; --bg-2:#f6f5f2; --card:#ffffff; --ink:#1d1a16; --ink-2:#5a544b; --line:#ebe8e3; --line-2:#d9d5ce;
  --fire:#c3261c; --fire-ink:#b3221a; --fire-btn:#c3261c; --fire-soft:#fbecea; --on-fire:#ffffff;
  --plate:#ece7df; --on-plate:#1d1a16; --on-plate-2:#5a544b; --plate-hi:#b3221a;
  --disp:"Unbounded","Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --trail:url(/img/mark/trail.svg);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121110; --bg-2:#1b1a18; --card:#181715; --ink:#f3f1ed; --ink-2:#aca59a; --line:#2a2825; --line-2:#3a3733;
  --fire:#ff6b5e; --fire-ink:#ff8577; --fire-btn:#c3261c; --fire-soft:#2b1513;
  --plate:#2c2925; --on-plate:#f3f1ed; --on-plate-2:#bdb6ab; --plate-hi:#ff8577; --trail:url(/img/mark/trail-dark.svg) }}
:root[data-theme="dark"]{
  --bg:#121110; --bg-2:#1b1a18; --card:#181715; --ink:#f3f1ed; --ink-2:#aca59a; --line:#2a2825; --line-2:#3a3733;
  --fire:#ff6b5e; --fire-ink:#ff8577; --fire-btn:#c3261c; --fire-soft:#2b1513;
  --plate:#2c2925; --on-plate:#f3f1ed; --on-plate-2:#bdb6ab; --plate-hi:#ff8577; --trail:url(/img/mark/trail-dark.svg) }

/* типографика: заголовки — Unbounded, чуть меньше, чем были (шрифт широкий) */
h1,h2{font-family:var(--disp);font-weight:700;letter-spacing:-0.02em}
.hero h1{font-size:clamp(36px,4.6vw,60px);font-weight:700;letter-spacing:-0.025em;line-height:1.04}
.head h2{font-size:clamp(28px,3.2vw,42px);line-height:1.1}
.body h2,.post h2{font-size:clamp(22px,2.3vw,28px);line-height:1.2}
.mapside h2{font-size:22px;line-height:1.2}

/* знак маркации */
.logo .mk{width:34px;height:34px;transform:none;-webkit-mask:none;mask:none;background:url(/img/mark/circle.webp) center/contain no-repeat}
.mark{display:inline-block;flex:none;width:36px;height:36px;background:var(--m,url(/img/mark/circle.webp)) center/contain no-repeat}

/* кнопки, чипы — мягкие «таблетки»; без серых полос-подложек */
.btn{border-radius:999px;padding-inline:24px}
.chip{border-radius:999px}
.quick a{border-radius:999px}
.band{background:transparent;border-block:0}
.card:hover{box-shadow:none}
.fact{box-shadow:none}

/* главная: тропа слева и знаки у разделов */
.trailmain{position:relative}
#afisha{--m:url(/img/mark/bands.webp)}
#articles{--m:url(/img/mark/triangle.webp)}
#map{--m:url(/img/mark/circle-2.webp)}
.trailmain section[aria-labelledby="sub-h"]{--m:url(/img/mark/arrow.webp)}
/* тропа: --cx — центр тропы от левого края .wrap, --rw — ширина линии, --ms — размер знака.
   Широкий экран — тропа в поле слева от контента; уже — контент сдвигается и уступает ей место. */
.trailmain{--cx:-60px;--rw:48px;--ms:44px;--gap:160px}
/* один вертикальный ритм: одинаковый интервал между всеми блоками главной */
.trailmain>.hero{padding-bottom:calc(var(--gap) / 2)}
.trailmain>section{padding-block:calc(var(--gap) / 2)}
.trailmain>section:last-of-type{padding-bottom:var(--gap)}
.trailmain>.hero,.trailmain>section>.wrap{position:relative}
.trailmain::before{content:"";position:absolute;top:96px;bottom:120px;left:calc(max(0px,(100% - 1200px) / 2) + var(--cx) - var(--rw) / 2);
  width:var(--rw);background:var(--trail) center top/var(--rw) calc(var(--rw) * 320 / 72) repeat-y;pointer-events:none}
.trailmain>.hero::before,.trailmain>section:not(.tripline)>.wrap::before{content:"";position:absolute;left:calc(var(--cx) - var(--ms) / 2);top:0;
  width:var(--ms);height:var(--ms);background:var(--m,url(/img/mark/circle.webp)) center/contain no-repeat;z-index:1}
.trailmain>.hero::before{--m:url(/img/mark/circle-3.webp);width:calc(var(--ms) * 1.45);height:calc(var(--ms) * 1.45);left:calc(var(--cx) - var(--ms) * .725);top:60px}
@media (max-width:1379px){.trailmain{--cx:48px;--gap:136px}.trailmain>.hero,.trailmain>section>.wrap{padding-left:132px}}
@media (max-width:700px){.trailmain{--cx:15px;--rw:28px;--ms:28px;--gap:88px}.trailmain>.hero,.trailmain>section>.wrap{padding-left:52px}
  .trailmain>.hero::before{top:22px}.bike{width:32px;height:32px}}
/* велосипед едет по тропе вместе с прокруткой (ui.js) */
.bike{position:absolute;left:0;top:0;width:calc(var(--ms) * 1.5);height:calc(var(--ms) * 1.5);background:url(/img/mark/bike.webp) center/contain no-repeat;
  pointer-events:none;z-index:2;will-change:transform;opacity:0;transition:opacity .3s}
.bike.on{opacity:1}

/* ближайшая поездка — табличка-указатель на первом экране */
.signpost{margin-top:8px;max-width:560px}
.tl{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;padding:12px 64px 12px 12px;border:0;border-radius:10px 0 0 10px;
  background:var(--plate);color:var(--on-plate);text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 36px) 0,100% 50%,calc(100% - 36px) 100%,0 100%)}
.tl:hover{text-decoration:none;filter:brightness(.97)}
.tl img{width:72px;height:72px;object-fit:cover;border-radius:8px;display:block}
.tl .t{display:flex;flex-direction:column;gap:2px}
.tl .t span{font-size:14px;color:var(--on-plate-2)}
.tl .t b{font-family:var(--disp);font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.tl .t i{font-style:normal;font-size:14px;font-weight:600;color:var(--plate-hi)}
.tl .go{display:none}
@media (max-width:700px){.tl{grid-template-columns:56px minmax(0,1fr);padding-right:52px}.tl img{width:56px;height:56px}.tl .t b{font-size:16px}}

/* статьи: оглавление — маршрут со знаками на извилистой тропе */
.toc{isolation:isolate}
.toc::before{content:"";position:absolute;left:2px;top:40px;bottom:14px;width:30px;background:var(--trail) center top/30px 133px repeat-y;z-index:0}
.toc b{font-family:var(--disp);font-size:14px;color:var(--ink);margin-bottom:10px}
.toc a{position:relative;z-index:1;border-left:0;padding:7px 0 7px 42px;color:var(--ink-2);line-height:1.35}
.toc a::before{content:"";position:absolute;left:4px;top:5px;width:26px;height:26px;background:url(/img/mark/circle-2.webp) center/contain no-repeat}
.toc a:nth-of-type(3n+2)::before{background-image:url(/img/mark/circle-3.webp)}
.toc a:nth-of-type(3n)::before{background-image:url(/img/mark/circle.webp)}
.toc a:last-child::before{background-image:url(/img/mark/arrow.webp)}
.toc a:hover{color:var(--ink);text-decoration:none}
.post h2{display:flex;gap:12px;align-items:flex-start}
.post h2::before{content:"";flex:none;width:1.3em;height:1.3em;margin-top:-.05em;background:url(/img/mark/circle.webp) center/contain no-repeat}
.post:nth-of-type(3n+2) h2::before{background-image:url(/img/mark/circle-2.webp)}
.post:nth-of-type(3n) h2::before{background-image:url(/img/mark/circle-3.webp)}
@media (max-width:900px){.toc::before{display:none}}

/* игра «Велосипед на тропе» (bike-game.js) */
.bike{pointer-events:auto;cursor:pointer;border:0;padding:0;background-color:transparent;border-radius:8px}
.bike:hover{filter:drop-shadow(0 0 0 transparent) brightness(1.04)}
.bike:focus-visible{outline:3px solid var(--fire);outline-offset:3px}
html.bg-on .bike{visibility:hidden}
html.bg-lock{overflow:hidden}
.bg-root{position:fixed;inset:0;z-index:3000;pointer-events:none;transition:opacity .3s}
.bg-root.play{pointer-events:auto;cursor:crosshair;background:color-mix(in srgb,var(--bg) 18%,transparent)}
.bg-root.bye{opacity:0}
.bg-cv{position:absolute;inset:0;width:100%;height:100%}
.bg-bike{position:absolute;left:0;top:0;width:46px;height:46px;background:url(/img/mark/bike.webp) center/contain no-repeat;will-change:transform}
.bg-mark{position:absolute;left:0;top:0;width:32px;height:32px;transition:transform .25s,opacity .25s}
.bg-mark.got{opacity:0;scale:1.8}
.bg-hud{position:absolute;right:16px;top:calc(var(--hud-top,76px) + 8px);display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:999px;
  background:var(--plate);color:var(--on-plate);font:500 14px/1.2 var(--f);cursor:default}
.bg-hud b{font-family:var(--disp);font-size:16px;white-space:nowrap}
.bg-hint{color:var(--on-plate-2)}
.bg-x{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);color:var(--ink);font:600 22px/1 var(--f);cursor:pointer}
.bg-toast{position:absolute;left:50%;top:40%;translate:-50% 0;padding:16px 24px;border-radius:14px;background:var(--plate);color:var(--on-plate);
  font:700 18px/1.3 var(--disp);opacity:0;transition:opacity .3s;text-align:center;max-width:90vw}
.bg-toast.on{opacity:1}
@media (max-width:700px){.bg-hint{display:none}.bg-hud{top:12px;right:12px}}
.bg-hud{transition:top .6s ease,right .6s ease,scale .6s ease,opacity .6s ease,padding .6s ease;transform-origin:top right}
.bg-hud .bg-hint{transition:opacity .3s}
.bg-hud.mini{top:6px;right:6px;scale:.62;opacity:.72;padding:6px 6px 6px 16px}
.bg-hud.mini .bg-hint{display:none}
.bg-hud.mini:hover{opacity:1}

/* тропа с велосипедом на больших страницах (афиша, статьи, хайки) — без знаков у разделов; на телефоне не показывается, чтобы не сужать текст */
.trailpage{--cx:-60px;--rw:48px;position:relative}
.trailpage::before{content:"";position:absolute;top:24px;bottom:80px;left:calc(var(--cx) - var(--rw) / 2);width:var(--rw);
  background:var(--trail) center top/var(--rw) calc(var(--rw) * 320 / 72) repeat-y;pointer-events:none}
main.trailpage:not(.wrap)::before{left:calc(max(0px,(100% - 1200px) / 2) + var(--cx) - var(--rw) / 2)}
.trailpage .bike{width:66px;height:66px}
@media (max-width:1379px){
  .trailpage{--cx:46px}
  main.trailpage.wrap{padding-left:132px}
  main.trailpage:not(.wrap)>.wrap,main.trailpage:not(.wrap)>section>.wrap{padding-left:132px}
}
@media (max-width:900px){.trailpage::before,.trailpage .bike{display:none}main.trailpage.wrap{padding-left:20px}
  main.trailpage:not(.wrap)>.wrap,main.trailpage:not(.wrap)>section>.wrap{padding-left:20px}}
.bg-toast b,.bg-toast span{display:block}
.bg-toast span{margin-top:6px;font:500 16px/1.35 var(--f);color:var(--on-plate-2)}