/* Общая шапка всех страниц «Архива». Цвета заданы прямо здесь, чтобы шапка выглядела одинаково
   и на страницах со style.css, и на страницах с archive.css. */
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-display: swap; src: url(/fonts/golos-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-display: swap; src: url(/fonts/golos-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Pangolin"; font-weight: 400; font-display: swap; src: url(/fonts/pangolin-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Pangolin"; font-weight: 400; font-display: swap; src: url(/fonts/pangolin-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }

.top { flex: none; position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; min-height: 48px; padding: 0 18px; background: #151b22; border-bottom: 1px solid #27313c; color: #e4e9ef; font: 400 15px/1.45 "Golos Text", system-ui, sans-serif; }
.top .brand { display: flex; align-items: center; gap: 9px; padding: 0; font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; color: #e4e9ef; text-decoration: none; }
.top nav { display: flex; align-self: stretch; }
.top nav a { display: flex; align-items: center; min-height: 48px; padding: 0 13px; color: #8794a5; text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.top nav a:hover { color: #e4e9ef; }
.top nav a.on { color: #e4e9ef; border-bottom-color: #c49b5f; }
.top .who { margin: 0 0 0 auto; padding: 0; display: flex; align-items: baseline; gap: 8px; font-size: .875rem; color: #e4e9ef; }
.top .who small { color: #8794a5; }
.top .who button.link { margin-left: 8px; padding: 0; border: 0; background: none; font: inherit; color: #8794a5; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.top .who button.link:hover { color: #e4e9ef; }

/* шестерёнка рядом с названием и её меню */
.top .gearwrap { position: relative; margin-left: -18px; display: flex; align-items: center; }
.top .gear { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238794a5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.9 2.9l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.9-2.9l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.9-2.9l.1.1a1.7 1.7 0 0 0 1.9.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.9 2.9l-.1.1a1.7 1.7 0 0 0-.3 1.9v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.top .gear:hover, .top .gear[aria-expanded="true"] { background-color: #1c242d; }
.top .gearwrap .menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 210px; padding: 10px 12px; display: grid; gap: 2px; border: 1px solid #35424f; border-radius: 8px; background: #232d38; box-shadow: 0 12px 32px rgb(0 0 0 / .5); }
.top .gearwrap .menu[hidden] { display: none; }
.top .gearwrap .menu p { margin: 0 0 4px; font-size: .8125rem; color: #8794a5; }
.top .gearwrap .menu .mi { text-align: left; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font: inherit; color: #8794a5; }
.top .gearwrap .menu small { margin-top: 4px; font-size: .75rem; color: #8794a5; }

@media (max-width: 560px) { .top { gap: 0 12px; padding: 0 12px; } .top nav a { padding: 0 9px; } .top .who small, .top .who span { display: none; } }
@media print { .top { display: none; } }