/* Прозрачность на самом списке, а не на контейнере: на контейнере она гасила
   и кольцо фокуса — на «Шань хай цзин» страничное правило :focus-visible даёт
   оранжевый #dc6a51, и через opacity .75 контраст к фону падал до 2,69 при
   норме 3:1. Теперь приглушены только пункты, а кольцо рисуется в полную силу. */
.breadcrumbs{position:relative;z-index:11;display:block;width:100%;padding:8px 4vw;color:currentColor;font:500 10px/1.4 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0;list-style:none;margin:0;padding:0;opacity:.75}
.breadcrumbs li{display:flex;min-width:0;align-items:center}
/* Кольцо цветом самого текста: он по определению контрастен фону страницы,
   какой бы ни была её палитра. Страничные :focus-visible имеют специфичность
   0,1,0 и этим правилом (0,2,0) перекрываются на всех страницах сразу. */
.breadcrumbs a:focus-visible{outline:3px solid currentColor;outline-offset:2px;opacity:1}
.breadcrumbs ol:has(a:focus-visible){opacity:1}
.breadcrumbs li+li::before{content:"›";padding-inline:9px;opacity:.7}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:24px;padding-block:7px;color:currentColor;text-decoration:none}
.breadcrumbs span[aria-current="page"]{overflow-wrap:anywhere}
.skip-link{position:fixed;z-index:10000;top:0;left:0;min-height:44px;padding:12px 16px;display:flex;align-items:center;background:#000;color:#fff;font:600 14px/1.4 Arial,sans-serif;transform:translateY(-110%);text-decoration:none}
.skip-link:focus-visible{transform:translateY(0);outline:3px solid #fff;outline-offset:-5px}
@media(max-width:620px){.breadcrumbs{padding-inline:5vw}}