/* ============ ХРОНИКА: ШКАЛА ЛЕТ ============ */
.chron{padding-block:var(--sec)}
.chead{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4)}
.railwrap{position:relative;padding-block:clamp(130px,14vw,186px)}
.rail{display:flex;align-items:flex-end;overflow-x:auto;overflow-y:hidden;
  padding:var(--s4) 2px var(--s3);cursor:grab;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(128,199,165,.4) transparent}
.rail.drag{cursor:grabbing;scroll-behavior:auto;user-select:none}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:rgba(128,199,165,.38);border-radius:3px}
.rail::-webkit-scrollbar-track{background:rgba(128,199,165,.08);border-radius:3px}
.gap{display:flex;align-items:flex-end;gap:clamp(7px,.78vw,11px);
  padding-inline:clamp(14px,1.5vw,23px);padding-bottom:2px;flex:none}
.gap i{display:block;width:1.5px;height:17px;background:rgba(255,255,255,.24)}
.yr{position:relative;flex:none;border:0;background:none;cursor:pointer;
  padding:0 clamp(20px,2vw,32px) 32px;
  font-family:var(--disp);font-weight:400;font-size:clamp(50px,5.4vw,84px);line-height:1;
  color:var(--mint);letter-spacing:.035em;font-variant-numeric:tabular-nums;
  transition:color var(--slow) var(--ease),text-shadow var(--slow) var(--ease)}
.yr::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:2px;height:18px;background:var(--mint);opacity:.7;
  transition:height var(--slow) var(--ease),opacity var(--slow) var(--ease),box-shadow var(--slow) var(--ease)}
.yr:hover{color:#dcfff0}
.yr.on{color:var(--white);text-shadow:0 0 26px rgba(187,255,222,.4)}
.yr.on::after{height:34px;opacity:1;box-shadow:0 0 14px rgba(187,255,222,.65)}
.railtop{display:flex;flex-direction:column;align-items:center;gap:.55em;
  margin-bottom:var(--s4);font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--mint2);opacity:.8;transition:opacity var(--fast) var(--ease)}
.railtop .fng{width:clamp(24px,2.2vw,32px);height:auto;color:var(--mint);
  animation:swipeHand 2.4s var(--ease) infinite}
.railwrap.picked .railtop{opacity:0}
.railhint{text-align:center;font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--mint2);opacity:.72;margin-top:var(--s4);transition:opacity var(--fast) var(--ease)}
@keyframes swipeHand{
  0%,100%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}
}
@media (prefers-reduced-motion:reduce){.railtop .fng{animation:none}}
.railwrap.picked .railhint{opacity:0}

/* всплывающая карточка (годы и отсеки) */
.card{position:absolute;z-index:20;width:min(520px,86vw);
  background:radial-gradient(120% 140% at 50% 0%,rgba(13,36,45,.94),rgba(8,24,31,.88));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:0;border-radius:clamp(18px,2vw,26px);padding:clamp(26px,2.6vw,38px);
  box-shadow:var(--soft);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease),visibility var(--slow)}
.card.on{opacity:1;visibility:visible;transform:none}
.card h4{font-family:var(--disp);font-weight:400;color:var(--mint);font-size:var(--t-2xl);
  letter-spacing:.04em;line-height:1;margin-bottom:var(--s1);padding-right:var(--s5)}
.card .sub{font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--mint2);
  margin-bottom:var(--s4)}
.card .item+.item{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line-soft)}
.card .item .dt{font-weight:700;color:var(--mint);font-size:var(--t-xs);letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:var(--s1)}
.card .item .tx2{font-weight:300;color:var(--text-soft);font-size:var(--t-sm);line-height:1.78}
.card .body{max-height:min(26vh,190px);overflow-y:auto;padding-right:var(--s2)}
.card .body::-webkit-scrollbar{width:4px}
.card .body::-webkit-scrollbar-thumb{background:rgba(128,199,165,.35);border-radius:3px}
.card .close{position:absolute;top:clamp(14px,1.4vw,20px);right:clamp(14px,1.4vw,20px);
  width:28px;aspect-ratio:1;border:0;border-radius:50%;background:none;color:var(--mint2);
  font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:color var(--fast),background var(--fast)}
.card .close:hover{color:var(--ink);background:var(--mint)}

/* полная хроника списком */
.fullwrap{text-align:center;margin-top:var(--s4)}
.lnkbtn{background:none;border:1.5px solid var(--mint2);border-radius:999px;color:var(--mint);cursor:pointer;
  font-size:var(--t-xs);letter-spacing:var(--track);text-transform:uppercase;padding:12px 26px;
  transition:background var(--fast),color var(--fast),box-shadow var(--fast)}
.lnkbtn:hover{background:var(--mint);color:var(--ink);box-shadow:0 0 18px rgba(187,255,222,.28)}
.tl{position:relative;max-width:1000px;margin:var(--s6) auto 0;padding-left:clamp(26px,3vw,44px);
  border-left:1px solid var(--line)}
.tl[hidden]{display:none}
.ev{position:relative}
.ev+.ev{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line-soft)}
.ev::before{content:">>";position:absolute;left:calc(clamp(26px,3vw,44px) * -1 - 2px);top:.08em;
  font-family:var(--sans);font-weight:700;font-size:.82em;letter-spacing:-.08em;color:var(--mint);
  line-height:1.5;opacity:.9}
.ev .dt{font-weight:700;color:var(--mint);font-size:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;
  line-height:1.4;text-shadow:0 1px 10px rgba(6,20,26,.55)}
.ev .tx2{margin-top:var(--s1);color:var(--text-soft);font-weight:300;font-size:var(--t-sm);line-height:1.75;
  max-width:82ch;text-shadow:0 1px 10px rgba(6,20,26,.55)}