/* Проспект Победителей — путеводитель
   Палитра: бетон, тушь, вода, гранитная бронза */

:root{
  --concrete:#E6E5DF;
  --paper:#F2F1EC;
  --ink:#14181B;
  --ink-soft:#3B4247;
  --river:#0F4A62;
  --bronze:#B07B2C;
  --line:rgba(20,24,27,.16);
  --line-strong:rgba(20,24,27,.34);
  --font-display:'Unbounded','Golos Text',system-ui,sans-serif;
  --font-text:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(18px,5vw,56px);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--concrete);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;line-height:1.02;}

p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid var(--river);outline-offset:3px;}

/* ——— верхняя панель ——— */

.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px var(--gut);
  background:rgba(230,229,223,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.mark{
  font-family:var(--font-display);font-size:14px;letter-spacing:.01em;
  text-decoration:none;text-transform:lowercase;
}
.topnav{display:flex;gap:clamp(12px,2.4vw,32px);flex-wrap:wrap;}
.topnav a{
  font-size:13.5px;text-decoration:none;color:var(--ink-soft);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .18s,border-color .18s;
}
.topnav a:hover{color:var(--ink);border-color:var(--line-strong);}

/* ——— первый экран ——— */

.hero{
  max-width:var(--max);margin:0 auto;
  padding:clamp(40px,8vh,88px) var(--gut) clamp(38px,6vh,72px);
}

.hero h1{
  font-size:clamp(2.3rem,9vw,6.6rem);
  font-weight:300;
  letter-spacing:-.03em;
  line-height:.92;
  margin:0 0 clamp(26px,4vw,48px);
}

.hero__lower{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,270px);
  gap:clamp(28px,5vw,72px);
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:clamp(20px,3vw,30px);
}

.lede{
  max-width:52ch;
  font-size:clamp(1rem,1.3vw,1.16rem);
  color:var(--ink-soft);
  line-height:1.58;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,32px);}

.btn{
  display:inline-block;
  font-family:var(--font-text);font-size:14.5px;font-weight:500;
  text-decoration:none;
  padding:13px 24px;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:1px;
  transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{background:var(--river);border-color:var(--river);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn--ghost:hover{background:transparent;color:var(--river);border-color:var(--river);}
.btn--dark{background:var(--ink);color:var(--paper);margin-top:clamp(24px,3vw,34px);}

/* схема проспекта */

.strip{margin:0;padding-top:2px;}
.strip figcaption{
  font-size:12.5px;color:var(--ink-soft);letter-spacing:.01em;
  margin-bottom:16px;font-family:var(--font-text);
}
.strip ol{
  list-style:none;margin:0;padding:0;
  position:relative;
}
.strip ol::before{
  content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1px;
  background:var(--line-strong);
}
.strip li{
  position:relative;
  padding:0 0 22px 20px;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.3;
}
.strip li:last-child{padding-bottom:0;}
.strip__dot{
  position:absolute;left:0;top:5px;width:7px;height:7px;
  background:var(--concrete);
  border:1px solid var(--line-strong);
  border-radius:50%;
}
.strip li:first-child .strip__dot,
.strip li:last-child .strip__dot{background:var(--ink);border-color:var(--ink);}

/* ——— общая сетка секций ——— */

.about,.what{
  max-width:var(--max);margin:0 auto;
  padding:clamp(40px,7vw,84px) var(--gut);
  border-top:1px solid var(--line);
}
.about{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);
  gap:clamp(24px,5vw,72px);
  align-items:start;
}
h2{
  font-size:clamp(1.5rem,3.1vw,2.35rem);
  letter-spacing:-.02em;
  line-height:1.06;
}
.about .col-head h2{position:sticky;top:88px;}

.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.5;}
.col-body p{max-width:64ch;color:var(--ink-soft);}
.col-body .lead{color:var(--ink);}

/* имена проспекта — последовательность */

.names__title{
  font-size:15px;font-family:var(--font-text);font-weight:600;
  margin:clamp(28px,4vw,44px) 0 14px;
}
.names{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  border-top:1px solid var(--line);
}
.names li{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:4px 20px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.names__when{
  font-size:13px;color:var(--bronze);font-weight:600;
  font-variant-numeric:tabular-nums;
  grid-row:1;
}
.names__what{
  font-family:var(--font-display);font-size:16px;font-weight:400;
}
.names__note{grid-column:2;font-size:14px;color:var(--ink-soft);line-height:1.45;}

/* ——— маршрут ——— */

.route{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(46px,8vw,96px) var(--gut);
}
.route__head{
  max-width:var(--max);margin:0 auto clamp(30px,5vw,54px);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);
  gap:clamp(16px,4vw,56px);
  align-items:start;
}
.route__head h2{color:var(--paper);max-width:15ch;}
.route__head p{
  color:rgba(242,241,236,.72);
  max-width:46ch;
  font-size:15.5px;
}

.stops{
  list-style:none;margin:0 auto;padding:0;
  max-width:var(--max);
  display:grid;gap:0;
}
.stop{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:clamp(12px,3vw,32px);
  padding:clamp(22px,3.4vw,34px) 0;
  border-top:1px solid rgba(242,241,236,.2);
}
.stop:last-child{border-bottom:1px solid rgba(242,241,236,.2);}
.stop__num{
  font-family:var(--font-display);
  font-size:clamp(15px,1.5vw,18px);
  color:var(--bronze);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  padding-top:6px;
}
.stop__body h3{
  font-size:clamp(1.1rem,2vw,1.5rem);
  letter-spacing:-.015em;
  margin-bottom:10px;
  max-width:24ch;
}
.stop__body p{
  color:rgba(242,241,236,.74);
  max-width:66ch;
  font-size:15.5px;
  line-height:1.6;
}

/* ——— что есть ——— */

.what h2{margin-bottom:clamp(20px,3vw,36px);}
.facts{margin:0;border-top:1px solid var(--line);}
.fact{
  display:grid;
  grid-template-columns:minmax(0,.55fr) minmax(0,2fr);
  gap:clamp(8px,3vw,40px);
  padding:clamp(16px,2.4vw,24px) 0;
  border-bottom:1px solid var(--line);
}
.fact dt{
  font-family:var(--font-display);
  font-size:clamp(14px,1.5vw,17px);
  line-height:1.25;
}
.fact dd{
  margin:0;
  color:var(--ink-soft);
  max-width:66ch;
  font-size:15.5px;
}

/* ——— как добраться ——— */

.getting{
  background:var(--river);
  color:var(--paper);
  padding:clamp(46px,8vw,96px) var(--gut);
}
.getting__col,.getting__list,.getting .btn{
  max-width:var(--max);margin-left:auto;margin-right:auto;
}
.getting__col{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);
  gap:clamp(16px,4vw,56px);
  align-items:start;
  margin-bottom:clamp(24px,4vw,40px);
}
.getting__col h2{color:var(--paper);}
.getting__col p{color:rgba(242,241,236,.75);max-width:46ch;font-size:15.5px;}
.getting__list{
  list-style:none;padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,4vw,56px);
}
.getting__list li{
  padding:clamp(18px,2.4vw,26px) 0;
  border-top:1px solid rgba(242,241,236,.24);
}
.getting__list h3{
  font-size:15.5px;font-family:var(--font-text);font-weight:600;
  margin-bottom:8px;
}
.getting__list p{
  font-size:15px;line-height:1.6;
  color:rgba(242,241,236,.78);
}
.getting .btn{margin-top:clamp(22px,3vw,32px);display:table;}
.getting .btn--dark{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.getting .btn--dark:hover{background:var(--bronze);border-color:var(--bronze);color:var(--ink);}

/* ——— подвал ——— */

.foot{
  padding:clamp(34px,5vw,56px) var(--gut);
  max-width:var(--max);margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr) auto;
  gap:14px clamp(16px,4vw,56px);
  align-items:start;
  font-size:13px;
  color:var(--ink-soft);
}
.foot p{margin:0;}
.foot__mark{font-family:var(--font-display);font-size:14px;color:var(--ink);}
.foot__note{max-width:58ch;line-height:1.5;}
.foot__meta{color:var(--bronze);font-variant-numeric:tabular-nums;}

/* ——— адаптив ——— */

@media (max-width:900px){
  .hero__lower{grid-template-columns:minmax(0,1fr);}
  .strip{display:none;}
  .about{grid-template-columns:minmax(0,1fr);}
  .about .col-head h2{position:static;}
  .route__head,.getting__col{grid-template-columns:minmax(0,1fr);}
  .getting__list{grid-template-columns:minmax(0,1fr);}
  .foot{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:560px){
  .topbar{padding:11px 18px;flex-wrap:wrap;gap:8px 16px;}
  .topnav{gap:14px;}
  .topnav a{font-size:12.5px;}
  .names li{grid-template-columns:minmax(0,1fr);}
  .names__note{grid-column:1;}
  .stop{grid-template-columns:44px minmax(0,1fr);}
  .fact{grid-template-columns:minmax(0,1fr);gap:6px;}
  .hero h1{letter-spacing:-.025em;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}