/* Language switcher: a small dropdown in the header on wide screens, a row of chips in the section menu on phones and tablets.
   Used by the Russian pages and by the generated /en /uk /kk /ar pages (scripts/i18n-222.mjs). */
.hdr__end{display:flex;align-items:center;gap:14px}
.lang{position:relative;font-family:var(--f-mono)}
.lang__btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:transparent;color:inherit;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s,background .25s}
.lang__btn:hover,.lang.is-open .lang__btn{border-color:var(--black);background:rgba(10,10,10,.04)}
.lang__btn::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease)}
.lang.is-open .lang__btn::after{margin-top:3px;transform:rotate(-135deg)}
.lang__list{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:5;min-width:188px;margin:0;padding:6px;list-style:none;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(10,10,10,.16);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .3s var(--ease),visibility 0s linear .3s}
.lang.is-open .lang__list{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lang__list a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:10px;font:500 14px/1.2 var(--f-body);letter-spacing:0;text-transform:none;text-decoration:none;color:var(--black);transition:background .2s}
.lang__list a:hover,.lang__list a:focus-visible{background:rgba(10,10,10,.06)}
.lang__list a[aria-current]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1.5px var(--black)}
.hdr__lang{display:none}
@media (max-width:980px){
  .hdr__end{margin-inline-start:auto}
  .hdr__end .lang{display:none}
  .hdr__end .hdr__cta{margin-left:0}
  .hdr__menu .hdr__lang{display:block;padding:18px 0 4px}
  .hdr__menu .hdr__lang p{margin:0 0 10px;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .hdr__menu .hdr__lang div{display:flex;flex-wrap:wrap;gap:8px}
  .hdr__menu .hdr__lang a{display:inline-flex;padding:10px 15px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:999px;font:500 14px/1 var(--f-body);letter-spacing:0;text-transform:none;color:var(--black)}
  .hdr__menu .hdr__lang a[aria-current]{background:var(--black);border-color:var(--black);color:var(--yellow)}
}

/* per-language layout adjustments for the translated pages */
@media (max-width:360px){
  html[lang=kk] .hdr__cta{padding:8px 11px;letter-spacing:.04em;gap:6px}
}

/* the first step of the staircase carries a long span ("almost a century"): the dates on one line, the span under them */
html:is([lang=en],[lang=uk],[lang=kk]) .st:first-child .st__sep{display:block;height:0;margin:0;overflow:hidden;font-size:0;line-height:0}
/* English names of the steps are wider than the Russian ones: keep "SMARTPHONE" inside its step */
html[lang=en] .st__in{font-size:clamp(11px,1.12vw,15px)}
@media (min-width:601px) and (max-width:1000px){
  html[lang=en] .st__in{font-size:clamp(11px,1.6vw,15px)}
}