:root{
  --terra:#B5623C; --terra-d:#8F4A2C; --ochre:#C89A3C; --ochre-l:#D8AE5A;
  --graph:#2E2A26; --graph2:#514B44; --cream:#F4EDE1; --card:#FBF6EC; --sand:#E8DCC6;
  --track:#C9B79A; --khaki:#6E7A50; --ink:#2E2A26; --ink2:#5B534A; --dim:#948A7B; --line:#E4D8C1;
  --d:'Unbounded',system-ui,sans-serif; --b:'PT Serif',Georgia,serif; --mono:'Courier New',ui-monospace,monospace;
  --shadow:0 1px 0 rgba(46,42,38,.03),0 14px 34px rgba(46,42,38,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--b);color:var(--ink);background:var(--cream);line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--d);font-weight:600;margin:0;line-height:1.15}

/* masthead */
.mast{background:var(--graph);color:#fff;position:sticky;top:0;z-index:60;box-shadow:0 2px 18px rgba(46,42,38,.22)}
.mast .row{display:flex;align-items:center;gap:20px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand .mk{width:42px;height:42px;flex:0 0 auto}
.brand b{font-family:var(--d);font-weight:700;font-size:1.2rem;letter-spacing:1px;line-height:1;color:#fff}
.brand small{display:block;font-family:var(--b);font-size:.72rem;color:var(--ochre-l);margin-top:3px;letter-spacing:.5px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{padding:8px 13px;border-radius:8px;font-family:var(--d);font-weight:400;font-size:.82rem;color:#e6ddce;transition:.15s}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a.cta{background:var(--terra);color:#fff}
.nav a.cta:hover{background:var(--terra-d)}
.search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border-radius:9px;padding:7px 12px;color:#fff}
.search input{background:transparent;border:0;color:#fff;font-family:var(--b);font-size:.9rem;outline:none;width:150px}
.search input::placeholder{color:#b7ad9c}

/* ===== HERO — одинокий путник на горизонте ===== */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#E6C79A 0%,#E9D3AE 42%,var(--cream) 100%)}
.hero .scene{position:relative;width:100%;height:clamp(300px,44vh,440px);display:block}
.hero .layer{position:absolute;left:0;right:0;bottom:0;width:100%;will-change:transform}
.hero .copy{position:absolute;left:0;right:0;top:clamp(38px,8vh,74px);text-align:center;padding:0 20px;z-index:5}
.hero .copy .k{display:inline-block;background:rgba(46,42,38,.82);color:var(--ochre-l);font-family:var(--d);font-weight:400;font-size:.66rem;text-transform:uppercase;letter-spacing:3px;padding:6px 16px;border-radius:2px}
.hero .copy h1{font-size:clamp(2rem,5.4vw,3.6rem);color:var(--graph);margin:.34em 0 .16em;letter-spacing:1px;text-shadow:0 2px 20px rgba(244,237,225,.6)}
.hero .copy p{color:var(--terra-d);font-size:clamp(1rem,1.7vw,1.25rem);font-style:italic;margin:0;font-family:var(--b)}
.hero-fade{opacity:0;transform:translateY(14px);animation:heroIn 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.hero-fade.d1{animation-delay:.15s}.hero-fade.d2{animation-delay:.45s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* stats bar */
.stats{background:var(--graph2);color:#fff}
.stats .row{display:flex;flex-wrap:wrap;gap:6px 30px;padding:11px 0;font-size:.84rem;align-items:center}
.stats b{font-family:var(--d);font-weight:600;color:var(--ochre-l)}
.stats .on{margin-left:auto;color:#cabfae}
.stats .on i{color:#B9C78F;font-style:normal}

/* свежие темы — лента у старта */
.board{padding:30px 0 50px}
.fresh{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:18px 22px;margin-bottom:34px;box-shadow:var(--shadow)}
.fresh h3{font-family:var(--d);font-size:.9rem;color:var(--terra-d);margin-bottom:14px;display:flex;align-items:center;gap:9px;letter-spacing:.5px}
.fresh h3::before{content:"➤";color:var(--ochre)}
.fresh .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px 24px}
.fresh a{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line)}
.fresh a .av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--sand)}
.fresh a .t{min-width:0}
.fresh a .t b{display:block;font-family:var(--b);font-size:.9rem;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fresh a:hover .t b{color:var(--terra)}
.fresh a .t span{font-size:.74rem;color:var(--dim)}

.route-intro{text-align:center;margin:8px 0 40px}
.route-intro h2{font-size:clamp(1.4rem,3vw,2rem);color:var(--graph);letter-spacing:.5px}
.route-intro span{color:var(--dim);font-family:var(--b);font-style:italic}

/* ============================================================
   ВЕРТИКАЛЬНЫЙ ТАЙМЛАЙН-МАРШРУТ (главная фича)
   ============================================================ */
.route{position:relative;max-width:860px;margin:0 auto;padding:10px 0 20px}
/* базовая линия трека */
.route::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;
  background:repeating-linear-gradient(var(--track) 0 8px,transparent 8px 16px);z-index:0}
/* прочерченная (пройденная) часть — рисуется JS через --progress */
.route::after{content:"";position:absolute;left:50%;top:0;width:3px;margin-left:-1.5px;
  height:var(--progress,0%);background:linear-gradient(180deg,var(--terra),var(--ochre));
  box-shadow:0 0 10px rgba(181,98,60,.4);z-index:1;transition:height .25s ease-out;border-radius:2px}

/* веха-этап */
.stage{position:relative;text-align:center;margin:52px 0 30px;z-index:3;opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.stage.in{opacity:1;transform:none}
.stage:first-child{margin-top:14px}
.stage-node{width:60px;height:60px;margin:0 auto;border-radius:50%;background:var(--graph);color:var(--ochre-l);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  border:4px solid var(--cream);box-shadow:0 0 0 3px var(--track),0 8px 22px rgba(46,42,38,.22)}
.stage-cap{margin-top:14px;max-width:520px;margin-left:auto;margin-right:auto}
.stage-k{display:inline-block;font-family:var(--d);font-size:.62rem;text-transform:uppercase;letter-spacing:2.5px;color:var(--terra);margin-bottom:6px}
.stage-cap h2{font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--graph);letter-spacing:.5px}
.stage-cap p{color:var(--ink2);font-size:.94rem;margin:8px 0 4px}
.stage-meta{font-family:var(--d);font-size:.68rem;color:var(--dim);letter-spacing:.5px}

/* остановка-веха: точка на линии + карточка поочерёдно лево/право */
.stop{position:relative;margin:26px 0;min-height:40px;z-index:3;opacity:0;transition:opacity .55s,transform .55s}
.stop-left{transform:translateX(-26px)}
.stop-right{transform:translateX(26px)}
.stop.in{opacity:1;transform:translateX(0)}
.stop-dot{position:absolute;left:50%;top:26px;width:17px;height:17px;margin-left:-8.5px;border-radius:50%;
  background:var(--cream);border:3px solid var(--track);z-index:4;transition:.18s}
.stop-card{position:relative;width:calc(50% - 42px);background:var(--card);border:1px solid var(--line);
  border-radius:5px;padding:16px 18px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.stop-left .stop-card{margin-right:auto}
.stop-right .stop-card{margin-left:auto}
/* усик-соединитель от карточки к точке */
.stop-card::before{content:"";position:absolute;top:20px;width:26px;height:2px;background:var(--track)}
.stop-left .stop-card::before{right:-26px}
.stop-right .stop-card::before{left:-26px}
.stop:hover .stop-dot{background:var(--terra);border-color:var(--terra-d);transform:scale(1.25);box-shadow:0 0 0 5px rgba(181,98,60,.15)}
.stop:hover .stop-card{transform:translateY(-2px);box-shadow:0 18px 40px rgba(46,42,38,.14);border-color:var(--ochre)}
.stop.fresh .stop-dot{border-color:var(--terra)}
.stop-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.stop-name{font-family:var(--d);font-weight:500;font-size:1.02rem;color:var(--graph);line-height:1.25}
.stop:hover .stop-name{color:var(--terra-d)}
.stop-num{font-family:var(--mono);font-size:.72rem;color:var(--ochre);flex:0 0 auto;letter-spacing:1px}
.stop-desc{color:var(--ink2);font-size:.88rem;margin:6px 0 10px}
.stop-stat{display:flex;gap:16px;font-size:.78rem;color:var(--dim);border-top:1px dashed var(--line);padding-top:9px}
.stop-stat b{font-family:var(--d);font-weight:500;color:var(--ink);font-size:.86rem}
.stop-last{display:flex;align-items:center;gap:9px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);min-width:0}
.stop-last .av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--sand)}
.stop-last .ll{min-width:0}
.stop-last .ll a{display:block;font-family:var(--b);font-weight:700;font-size:.84rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop-last .ll a:hover{color:var(--terra)}
.stop-last .ll span{font-size:.76rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.stop-last .ll b{color:var(--terra-d)}
.stop-last.quiet{color:var(--dim);font-style:italic;font-size:.82rem;display:block}
.av.ini{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:var(--d);font-weight:500;font-size:.7rem;background:var(--khaki)}

.route-end{position:relative;text-align:center;margin:44px 0 10px;z-index:3;color:var(--dim);font-style:italic;font-size:.9rem;opacity:0;transition:opacity .6s}
.route-end.in{opacity:1}
.stop-dot.end{position:static;display:inline-block;margin:0 auto 12px;width:20px;height:20px;background:var(--terra);border-color:var(--terra-d)}

/* ============================================================
   ФОРУМ-ЛИСТ (forumdisplay) — записи маршрута
   ============================================================ */
body{text-align:left}
a,a:hover,a:active,a:focus{text-decoration:none}
img{max-width:100%}
#content,.wrap{max-width:1080px;margin:0 auto;padding-left:22px;padding-right:22px}
#content{padding-top:24px;padding-bottom:20px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--d);font-size:.76rem;color:var(--dim);margin:2px 0 20px;letter-spacing:.3px}
.crumbs a{color:var(--terra)}
.crumbs a:hover{color:var(--terra-d)}
.crumbs .sep{color:var(--track)}
.crumbs .cur{color:var(--ink);pointer-events:none}

.stop-banner{position:relative;background:linear-gradient(135deg,var(--graph),var(--graph2));color:#fff;border-radius:6px;padding:24px 26px;margin-bottom:22px;box-shadow:var(--shadow);overflow:hidden}
.stop-banner::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border:2px dashed rgba(216,174,90,.25);border-radius:50%}
.stop-banner .k{font-family:var(--d);font-size:.66rem;color:var(--ochre-l);text-transform:uppercase;letter-spacing:2px;display:flex;align-items:center;gap:8px}
.stop-banner .bn-dot{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--terra);align-items:center;justify-content:center;font-size:.9rem}
.stop-banner h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:10px 0 6px;letter-spacing:.5px}
.stop-banner p{color:#e6ddce;margin:0;font-size:.94rem;font-family:var(--b)}
.stop-banner .st{margin-top:14px;font-size:.82rem;color:#cabfae;font-family:var(--d)}
.stop-banner .st b{color:var(--ochre-l)}

.tbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:22px 0 8px;flex-wrap:wrap}
.tbar h2{font-family:var(--d);color:var(--terra-d);font-size:1.1rem;letter-spacing:.3px}
.newbtn{display:inline-flex;align-items:center;gap:7px;background:var(--terra);color:#fff;font-family:var(--d);font-size:.8rem;padding:10px 18px;border-radius:5px}
.newbtn:hover{background:var(--terra-d)}
.tlist{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.tlist-head{display:none}
.trow{display:grid;grid-template-columns:1fr 116px 220px;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--track);border-radius:5px;padding:14px 18px;position:relative;transition:.14s}
.trow:hover{background:#fff;border-left-color:var(--terra);box-shadow:0 10px 26px rgba(46,42,38,.09)}
.tt{min-width:0}
.tt .tbadge{font-family:var(--d);font-size:.6rem;font-weight:400;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:3px;margin-right:8px;vertical-align:middle}
.tb-solved{background:#E7ECD8;color:#556B2F} .tb-guide{background:#F0E2CC;color:var(--terra-d)} .tb-report{background:#E9E2D4;color:var(--graph2)} .tb-urgent{background:#F3D9CC;color:var(--terra-d)} .tb-hot{background:#F5E3C4;color:#a06a12}
.tt a.tsub{font-family:var(--d);font-weight:500;font-size:.98rem;color:var(--graph);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:middle}
.trow:hover .tt a.tsub{color:var(--terra-d)}
.tt .by{font-size:.8rem;color:var(--dim);margin-top:3px;font-style:italic}
.tt .by b{color:var(--ink2);font-style:normal}
.tstat{text-align:center;font-size:.76rem;color:var(--dim);line-height:1.5}
.tstat b{display:block;font-family:var(--d);font-weight:500;color:var(--ink);font-size:1rem}
.tlast{display:flex;align-items:center;gap:10px;min-width:0;border-left:1px solid var(--line);padding-left:16px}
.tlast .av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--sand)}
.tlast .li{min-width:0;font-size:.8rem;color:var(--dim)}
.tlast .li b{display:block;color:var(--terra-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--b)}

/* subforums (если есть) */
.subf-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:8px}
.subf{display:block;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:14px 16px}
.subf:hover{border-color:var(--terra)}
.subf .fname{font-family:var(--d);font-weight:500;color:var(--graph);font-size:.94rem}
.subf .fdesc{color:var(--ink2);font-size:.82rem;margin-top:4px}
.subf .fstat{color:var(--dim);font-size:.76rem;margin-top:8px}

/* ============================================================
   ПОСТБИТ — «МАШИНОПИСНАЯ ЗАМЕТКА» (личный travelogue)
   ============================================================ */
.thread-head{margin-bottom:22px}
.thread-head h1{font-family:var(--d);color:var(--graph);font-size:clamp(1.5rem,3vw,2.1rem);margin:8px 0;letter-spacing:.3px}
.thread-head .meta{display:flex;gap:18px;color:var(--dim);font-size:.86rem;flex-wrap:wrap;font-style:italic}
.thread-head .meta b{color:var(--ink2);font-style:normal}

.posts{display:flex;flex-direction:column;gap:22px}
.post{display:grid;grid-template-columns:180px 1fr;background:var(--card);border:1px solid var(--line);border-radius:5px;overflow:hidden;box-shadow:var(--shadow)}
/* автор — камерный блок слева */
.post .pa{padding:20px 16px;text-align:center;background:linear-gradient(180deg,#F3E9D6,#EDE1CB);border-right:1px solid var(--line)}
.post .pa .av{width:78px;height:78px;border-radius:50%;object-fit:cover;border:3px solid var(--cream);box-shadow:0 4px 14px rgba(46,42,38,.16);background:var(--sand)}
.post .pa .av.anon,.post .pa .av.ini{display:inline-flex;align-items:center;justify-content:center;font-family:var(--d);font-size:1.5rem;color:#fff;background:var(--khaki)}
.post .pa .av.anon{background:var(--graph2)}
.post .pa .nm{font-family:var(--d);font-weight:500;font-size:.98rem;margin-top:12px;color:var(--graph);word-break:break-word}
.post .pa .nm a{color:var(--graph)}
.post .pa .role{display:inline-block;margin-top:8px;font-family:var(--d);font-size:.62rem;font-weight:400;text-transform:uppercase;letter-spacing:.6px;padding:4px 10px;border-radius:3px}
.role-way{background:#E9E2D4;color:var(--graph2)} .role-solo{background:#E7ECD8;color:#556B2F} .role-guide{background:#F0E2CC;color:var(--terra-d)} .role-keeper{background:var(--graph);color:var(--ochre-l)}
.post .pa .st{margin-top:12px;font-size:.76rem;color:var(--ink2);border-top:1px dashed var(--line);padding-top:10px;line-height:1.7}
.post .pa .st b{color:var(--ink)}
/* тело — печатная лента / бумага */
.post .pb{padding:22px 26px;position:relative;background:
  repeating-linear-gradient(90deg,transparent 0 15px,rgba(201,183,154,.05) 15px 16px),
  var(--card)}
.post .pb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;
  background:radial-gradient(circle at 5px 8px,var(--cream) 3px,transparent 3.5px);background-size:10px 16px;background-repeat:repeat-y;border-right:1px dashed var(--line)}
.post .pb .top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.74rem;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px;padding-left:8px}
.post .pb .msg{color:var(--ink);font-size:1rem;padding-left:8px;line-height:1.72}
.post .pb .msg strong,.post .pb .msg b{font-family:var(--mono);font-weight:700;background:rgba(216,174,90,.16);padding:0 3px}
.post .pb .msg blockquote{border-left:3px solid var(--ochre);background:rgba(201,183,154,.12);margin:12px 0;padding:8px 14px;border-radius:0 4px 4px 0;color:var(--ink2);font-style:italic}
.post .pb .msg img{border-radius:4px}
.post .pb .sign{margin-top:16px;padding-left:8px;font-family:var(--mono);font-size:.82rem;color:var(--terra-d);letter-spacing:.5px}
.post .pb .sign::before{content:"— ";color:var(--dim)}
.post .pb .best{display:block;margin-top:14px;margin-left:8px;color:var(--khaki);font-family:var(--d);font-size:.76rem;font-weight:400;letter-spacing:.5px;border-top:1px dashed var(--line);padding-top:12px}
.best-post{border-color:var(--khaki);box-shadow:0 0 0 1px var(--khaki),var(--shadow)}
.post .pb .post-buttons{margin-top:16px;margin-left:8px;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.post .pb .post-buttons a{font-family:var(--d);font-size:.72rem;font-weight:400;color:var(--terra-d);background:#F3E9D6;border:1px solid var(--line);padding:5px 12px;border-radius:4px}
.post .pb .post-buttons a:hover{background:var(--terra);color:#fff;border-color:var(--terra)}

/* пагинация */
.pages{display:flex;gap:6px;flex-wrap:wrap;margin:24px 0;align-items:center}
.pages a,.pages span{font-family:var(--d);padding:8px 13px;border-radius:5px;background:var(--card);border:1px solid var(--line);font-size:.82rem;color:var(--ink2)}
.pages a:hover{background:var(--terra);color:#fff;border-color:var(--terra)}
.pages .pagination_current{background:var(--terra);color:#fff;border-color:var(--terra)}
.pages_first,.pages_last{display:none}

/* форма ответа */
.quick-reply{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:22px;margin-top:26px;box-shadow:var(--shadow)}
.quick-reply h3{font-family:var(--d);color:var(--terra-d);margin:0 0 14px}
.quick-reply textarea{width:100%;min-height:120px;border:1px solid var(--line);border-radius:5px;padding:12px;font-family:var(--mono);font-size:.95rem;background:#fff}
input.button,.button{font-family:var(--d);font-weight:400;background:var(--terra);color:#fff;border:0;padding:11px 22px;border-radius:5px;cursor:pointer}
input.button:hover,.button:hover{background:var(--terra-d)}

/* footer */
.foot{background:var(--graph);color:#cabfae;margin-top:30px;padding:44px 0 30px}
.foot .row{display:flex;gap:40px;flex-wrap:wrap}
.foot .brand{color:#fff}
.foot .cols{display:flex;gap:46px;flex-wrap:wrap;margin-left:auto}
.foot h4{font-family:var(--d);color:#fff;font-size:.9rem;margin:0 0 12px;letter-spacing:.5px}
.foot .cols a{display:block;color:#b7ad9c;font-size:.86rem;padding:3px 0;font-family:var(--b)}
.foot .cols a:hover{color:var(--ochre-l)}
.foot .bot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#8f8676;font-style:italic}
.footer_bottom,.lang_switch,.theme_switch{display:none}

@media(max-width:820px){
  .route{max-width:100%}
  .route::before,.route::after{left:20px}
  .stage{text-align:left;padding-left:0}
  .stage-node{margin:0 0 0 -10px}
  .stage-cap{margin-left:44px;text-align:left}
  .stop,.stop-left,.stop-right{transform:none}
  .stop-dot{left:20px;margin-left:-8.5px}
  .stop-card{width:auto;margin-left:52px!important;margin-right:0!important}
  .stop-card::before{left:-26px!important;right:auto!important}
  .route-end{text-align:left;padding-left:52px}
  .stop-dot.end{margin-left:-10px}
  .search{display:none}
  .trow{grid-template-columns:1fr}
  .trow .tstat,.trow .tlast{display:none}
  .post{grid-template-columns:1fr}
  .post .pa{border-right:0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;text-align:left}
  .post .pa .av{width:56px;height:56px}
  .post .pb::before{display:none}
  .post .pb .msg,.post .pb .top,.post .pb .sign,.post .pb .best,.post .pb .post-buttons{padding-left:0;margin-left:0}
}