/* Общая шапка about.dom.gd и about.dom.gd/clergy/ — одна на обе страницы (решение владельца 15.10.2026).
   v2 от 25.10.2026 (владелец: «меню печальное и по структуре, и внешне — перепридумать»).
   Разметка — nav/header.html (единственный исходник), поведение — assets/dom-nav.js.

   Структура = карта подвала: «Духовенство», «Новости», панели «Компания» и «Документы»; справа язык,
   «Войти» и «Открыть D.O.M.». Знак с словомаркой без коробки — это «домой».
   Система панелей перенесена с глобального меню apple.com (замер 25.10.2026): полоса со стеклом
   saturate(1.8) blur(20px), панель растёт из полосы одним листом, страница под ней уходит
   за занавес blur(20px) с прозрачностью .4 и задержкой .08s, кривая .4,0,.6,1. Голос — DOM:
   крупные пункты панели обычного веса с отрицательным трекингом (заголовки /auth), подписи
   колонок капсом 850, оранжевый только в кнопке, точке текущей страницы и черте наведения.
   Телефон и всё, где меню не помещается: полноэкранный лист чернилами, как подвал. */

.topbar {
  --nv-ink: var(--ink, #21160d);
  --nv-muted: var(--muted, #765f4b);
  --nv-small: var(--small, #8c6c54);
  --nv-orange: var(--orange, #ff8811);
  --nv-orange-hover: var(--orange-hover, #ed7600);
  --nv-ui: cubic-bezier(.4, 0, .6, 1);
  --nv-display: cubic-bezier(.16, 1, .3, 1);
  --nv-bar: 76px;
  --nv-fg: var(--nv-ink);
  --nv-fg-2: rgba(33, 22, 13, .74);
  --nv-fg-3: #8c6c54;
  --nv-hair: rgba(33, 22, 13, .09);
  --nv-hover: rgba(33, 22, 13, .055);
  --nv-glass: rgba(255, 251, 246, .8);
  --nv-panel: rgba(255, 251, 246, .94);
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  color: var(--nv-fg);
  background: transparent;
  transition: background-color .32s var(--nv-ui), box-shadow .32s var(--nv-ui), color .32s var(--nv-ui);
}
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--nv-glass); border-bottom: 1px solid var(--nv-hair);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  opacity: 0; transition: opacity .32s var(--nv-ui), background-color .32s var(--nv-ui);
}
.is-stuck .topbar, .topbar.panel-open { --nv-bar: 62px; }
.is-stuck .topbar::before, .topbar.panel-open::before { opacity: 1; }
.topbar.panel-open::before { background: var(--nv-panel); }

/* над чернилами (лист новостей, подвал, тёмные секции /clergy/) — тёмное стекло и светлый текст */
.topbar.on-dark, .topbar.sheet-open {
  --nv-fg: #f7ece1;
  --nv-fg-2: rgba(247, 236, 225, .74);
  --nv-fg-3: #b39880;
  --nv-hair: rgba(255, 236, 220, .1);
  --nv-hover: rgba(255, 236, 220, .08);
  --nv-glass: rgba(30, 19, 9, .72);
  --nv-panel: rgba(30, 19, 9, .95);
}

.topbar-in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem;
  height: var(--nv-bar); max-width: 96rem; margin: 0 auto; padding: 0 var(--pad-x, 3rem);
  transition: height .32s var(--nv-ui);
}
.js .topbar-in { opacity: 0; transition: height .32s var(--nv-ui), opacity .72s cubic-bezier(.25, .46, .45, .94) .6s; }
.js.is-ready .topbar-in { opacity: 1; }

/* знак + словомарка, без плашки */
.brand { display: inline-flex; align-items: center; gap: .72rem; justify-self: start; min-height: 44px; color: var(--nv-fg); text-decoration: none; }
.brand img { width: 36px; height: 36px; flex: none; transition: transform .5s var(--nv-display); }
.brand-word { font-size: 1rem; font-weight: 850; letter-spacing: .14em; line-height: 1; transition: letter-spacing .5s var(--nv-display); }
.brand:hover img { transform: rotate(-7deg) scale(1.05); }
.brand:hover .brand-word { letter-spacing: .19em; }

/* ряд пунктов */
.topnav { display: flex; align-items: center; gap: .1rem; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: .35rem; height: 40px; padding: 0 .9rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--nv-fg-2); cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 650; letter-spacing: -.005em; white-space: nowrap; text-decoration: none;
  transition: color .24s var(--nv-ui), background-color .24s var(--nv-ui);
}
.nav-link:hover, .nav-trigger[aria-expanded="true"] { color: var(--nv-fg); background: var(--nv-hover); }
.nav-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .32s var(--nv-ui); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-link[aria-current="page"] { color: var(--nv-fg); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--nv-orange);
}

.bar-right { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; justify-self: end; min-width: 0; }
.bar-login {
  display: inline-flex; align-items: center; height: 40px; padding: 0 .85rem; border-radius: 999px; white-space: nowrap;
  color: var(--nv-fg); font-size: .9rem; font-weight: 700; text-decoration: none;
  transition: background-color .24s var(--nv-ui);
}
.bar-login:hover { background: var(--nv-hover); }
.bar-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 1.15rem; border-radius: 999px; white-space: nowrap;
  background: var(--nv-orange); color: #fff; font-size: .88rem; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 22px -10px rgba(255, 120, 0, .75);
  transition: background-color .2s var(--nv-ui), transform .4s var(--nv-display), box-shadow .3s var(--nv-ui);
}
.bar-cta:hover { background: var(--nv-orange-hover); transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(255, 120, 0, .85); }

/* переключатель языка — код языка в контурной пилюле, поповер со списком как .dom-auth-language */
.lang { position: relative; flex: none; }
.lang-trigger {
  display: flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .7rem 0 .75rem; cursor: pointer;
  border: 1px solid var(--nv-hair); border-radius: 999px; background: transparent; color: var(--nv-fg);
  font: inherit; font-size: .76rem; font-weight: 800; letter-spacing: .08em;
  transition: background-color .24s var(--nv-ui), border-color .24s var(--nv-ui);
}
.lang-trigger:hover, .lang-trigger[aria-expanded="true"] { background: var(--nv-hover); }
.lang-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lang-chevron { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .22s var(--nv-ui); }
.lang-trigger[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }
.lang-popover {
  position: absolute; top: calc(100% + .7rem); right: 0; z-index: 5; width: min(22rem, calc(100vw - 2rem)); overflow: hidden;
  border: 1px solid #ead8c9; border-radius: 18px; background: #fff; color: #21160d;
  box-shadow: 0 22px 48px rgba(89, 38, 0, .22); transform-origin: top right;
  animation: nv-pop .2s var(--nv-display);
}
@keyframes nv-pop { from { opacity: 0; transform: translateY(-5px) scale(.975); } to { opacity: 1; transform: none; } }
.lang-search { display: flex; align-items: center; gap: .6rem; margin: .8rem; padding: 0 .75rem; border: 1px solid #ead8c9; border-radius: 12px; background: #fffaf5; }
.lang-search svg { width: 17px; height: 17px; flex: none; color: #8c6c54; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lang-search input { width: 100%; min-height: 42px; border: 0; background: transparent; color: #21160d; outline: none; font: inherit; font-size: 16px; }
.lang-search input::placeholder { color: #8c6c54; }
.lang-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lang-list { max-height: min(420px, 58vh); overflow: auto; padding: 0 .55rem .65rem; scrollbar-width: thin; scrollbar-color: #ead8c9 transparent; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem .75rem; border-radius: 12px; color: #21160d; text-decoration: none; transition: background-color .16s var(--nv-ui); }
.lang-list a:hover, .lang-list a:focus-visible { background: #fff1e2; }
.lang-list a.active { background: #ffead4; }
.lang-list a > span { display: grid; gap: .15rem; }
.lang-list strong { font-size: .88rem; }
.lang-list small { color: #8c6c54; font-size: .74rem; }
.lang-list .empty { padding: .8rem .75rem 1rem; color: #8c6c54; font-size: .84rem; }
.lang-check { width: 17px; height: 17px; flex: none; color: #d96600; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- панели: лист растёт из полосы ---------- */
.nav-panels { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s var(--nv-ui); }
.topbar.panel-open .nav-panels { grid-template-rows: 1fr; }
.nav-panels > .nav-panel { min-height: 0; overflow: hidden; grid-row: 1; grid-column: 1; }
.nav-panel[hidden] { display: block; visibility: hidden; }
.panel-in {
  display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr) minmax(15rem, 21rem); gap: clamp(2rem, 4vw, 4.5rem);
  max-width: 96rem; margin: 0 auto; padding: 1.6rem var(--pad-x, 3rem) 3.2rem;
}
.panel-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.panel-label { margin: 0 0 .95rem; color: var(--nv-fg-3); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.panel-big {
  position: relative; display: inline-block; padding: .26rem 0; color: var(--nv-fg); text-decoration: none;
  font-size: clamp(1.45rem, 1.85vw, 1.9rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.12;
  transition: transform .45s var(--nv-display), color .2s var(--nv-ui);
}
.panel-big::before {
  content: ""; position: absolute; left: -1.25rem; top: 50%; width: .8rem; height: 2px; margin-top: -1px;
  background: var(--nv-orange); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--nv-display);
}
.panel-big:hover, .panel-big:focus-visible { transform: translateX(1.25rem); }
.panel-big:hover::before, .panel-big:focus-visible::before { transform: scaleX(1); }
.panel-small {
  display: inline-block; padding: .34rem 0; color: var(--nv-fg-2); text-decoration: none;
  font-size: .95rem; font-weight: 600; transition: color .2s var(--nv-ui);
}
.panel-small:hover, .panel-small:focus-visible { color: var(--nv-fg); }

.panel-card {
  position: relative; display: flex; flex-direction: column; gap: .7rem; min-height: 15.5rem; padding: 1.4rem 1.5rem 1.3rem;
  border-radius: 1.25rem; overflow: hidden; isolation: isolate; text-decoration: none; color: #f7ece1;
  background: linear-gradient(160deg, #33200e, #1f1409);
  transition: transform .5s var(--nv-display), box-shadow .4s var(--nv-ui);
}
.panel-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 60% at 100% 0%, rgba(255, 136, 17, .32), rgba(255, 136, 17, 0) 70%);
  opacity: .8; transition: opacity .4s var(--nv-ui);
}
.panel-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -18px rgba(60, 24, 0, .55); }
.panel-card:hover::before { opacity: 1; }
.topbar.on-dark .panel-card { background: linear-gradient(160deg, rgba(255, 236, 220, .09), rgba(255, 236, 220, .03)); }
.panel-card img { width: 52px; height: 52px; margin-bottom: auto; transition: transform .6s var(--nv-display); }
.panel-card:hover img { transform: rotate(-7deg); }
.panel-card .panel-label { margin: 0 0 auto; color: #b39880; }
.panel-card-date { color: #b39880; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.panel-card-date:empty { display: none; }
.panel-card-title {
  font-size: 1.3rem; font-weight: 400; letter-spacing: -.025em; line-height: 1.2; color: #f7ece1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.panel-card-foot { display: flex; align-items: center; gap: .45rem; color: #bda791; font-size: .8rem; font-weight: 700; }
.panel-card-foot svg { width: 15px; height: 15px; fill: none; stroke: var(--nv-orange); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--nv-display); }
.panel-card:hover .panel-card-foot svg { transform: translateX(4px); }

/* содержимое панели встаёт ступенью после того, как лист раскрылся */
.nav-panel .panel-label, .nav-panel .panel-big, .nav-panel .panel-small, .nav-panel .panel-card {
  opacity: 0; translate: 0 -6px; transition-property: opacity, translate, transform, color, box-shadow;
  transition-duration: .3s, .36s, .45s, .2s, .4s; transition-timing-function: var(--nv-ui), var(--nv-ui), var(--nv-display), var(--nv-ui), var(--nv-ui);
}
.nav-panel.is-shown .panel-label, .nav-panel.is-shown .panel-big, .nav-panel.is-shown .panel-small, .nav-panel.is-shown .panel-card {
  opacity: 1; translate: none; transition-delay: calc(.08s + var(--i, 0) * 22ms), calc(.08s + var(--i, 0) * 22ms), 0s, 0s, 0s;
}

/* занавес: страница под открытой панелью уходит в размытие */
.nav-curtain {
  position: fixed; inset: 0; z-index: 39; pointer-events: none; visibility: hidden; opacity: 0;
  background: rgba(250, 246, 241, .4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: opacity .32s var(--nv-ui) .08s, visibility .32s steps(1) .08s;
}
.nav-curtain.on-dark { background: rgba(14, 9, 4, .45); }
.nav-curtain.is-on { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }

/* ---------- кнопка меню и лист на телефоне ---------- */
.nav-toggle {
  display: none; position: relative; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--nv-hair); border-radius: 999px; background: transparent; color: var(--nv-fg);
  transition: background-color .24s var(--nv-ui), border-color .24s var(--nv-ui);
}
.nav-toggle span {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; margin-left: -8px; border-radius: 2px; background: currentColor;
  transition: transform .45s var(--nv-display);
}
.nav-toggle span:first-child { transform: translateY(-3.5px); }
.nav-toggle span:last-child { transform: translateY(3.5px); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.nav-sheet {
  position: fixed; inset: 0; z-index: -2; display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  padding-top: var(--nv-bar); color: #f7ece1;
  background: radial-gradient(90% 45% at 100% 0%, rgba(255, 136, 17, .2), rgba(255, 136, 17, 0) 70%), linear-gradient(180deg, #2b1a0b, #160e05);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .6s var(--nv-display), visibility .6s steps(1);
}
.nav-sheet[hidden] { display: flex; }
.topbar.sheet-open .nav-sheet { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--nv-display), visibility 0s; }
.sheet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.4rem var(--pad-x, 1.25rem) 1.5rem; }
.sheet-main { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 236, 220, .1); }
.sheet-big {
  position: relative; display: flex; align-items: center; min-height: 64px; padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 236, 220, .1); color: #f7ece1; text-decoration: none;
  font-size: clamp(1.9rem, 8.4vw, 2.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.05;
}
.sheet-big[aria-current="page"]::after { content: ""; width: 7px; height: 7px; margin-left: .7rem; border-radius: 50%; background: var(--nv-orange); flex: none; }
.sheet-big:active { color: #ffb366; }
.sheet-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-top: 2rem; }
.sheet-group { display: flex; flex-direction: column; min-width: 0; }
.sheet-group .panel-label { margin-bottom: .4rem; color: #b39880; }
.sheet-group a { display: flex; align-items: center; min-height: 44px; color: #bda791; font-size: .98rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.sheet-group a:active { color: #fff; }
.sheet-actions {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem;
  padding: .9rem var(--pad-x, 1.25rem) calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 236, 220, .1); background: rgba(22, 14, 5, .6);
}
.sheet-btn {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1rem; border-radius: 999px; text-align: center;
  font-size: .95rem; font-weight: 800; text-decoration: none;
}
.sheet-btn-ghost { border: 1px solid rgba(255, 236, 220, .24); color: #f7ece1; }
.sheet-btn-cta { background: var(--nv-orange); color: #fff; box-shadow: 0 12px 28px -12px rgba(255, 120, 0, .8); }
.nav-sheet .sheet-big, .nav-sheet .sheet-group, .nav-sheet .sheet-actions { opacity: 0; translate: 0 14px; transition: opacity .4s var(--nv-ui), translate .7s var(--nv-display); }
.topbar.sheet-open .nav-sheet .sheet-big, .topbar.sheet-open .nav-sheet .sheet-group, .topbar.sheet-open .nav-sheet .sheet-actions {
  opacity: 1; translate: none; transition-delay: calc(.12s + var(--i, 0) * 45ms);
}
html.nav-locked { overflow: hidden; }

.topbar.nav-start .topbar-in { grid-template-columns: auto minmax(0, 1fr) auto; }
.topbar.nav-start .topnav { justify-self: start; margin-left: .75rem; }

/* компактный режим: меню не помещается в строку (решает dom-nav.js замером на текущем языке) или узкий экран */
.topbar.is-compact .topnav, .topbar.is-compact .bar-login, .topbar.is-compact .bar-cta, .topbar.is-compact .nav-panels { display: none; }
.topbar.is-compact .nav-toggle { display: block; }
.topbar.is-compact .topbar-in { grid-template-columns: minmax(0, 1fr) auto; }
.topbar.is-compact { --nv-bar: 68px; }
.is-stuck .topbar.is-compact { --nv-bar: 60px; }
@media (min-width: 600px) { .topbar.is-compact .bar-cta { display: inline-flex; } }
@media (max-width: 599px) {
  .lang-current, .lang-chevron { display: none; }
  .lang-trigger { width: 44px; height: 44px; justify-content: center; padding: 0; }
  .brand img { width: 34px; height: 34px; }
  .brand-word { font-size: .95rem; }
  .lang-popover { position: fixed; top: calc(var(--nv-bar) + .4rem); left: 1rem; right: 1rem; width: auto; }
}

.topbar :focus-visible { outline: 2px solid var(--nv-orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .topbar, .topbar::before, .topbar-in, .nav-panels, .nav-curtain, .nav-sheet, .panel-big, .panel-card, .brand img, .brand-word, .nav-toggle span { transition: none !important; }
  .nav-panel .panel-label, .nav-panel .panel-big, .nav-panel .panel-small, .nav-panel .panel-card,
  .nav-sheet .sheet-big, .nav-sheet .sheet-group, .nav-sheet .sheet-actions { translate: none; transition: opacity .15s linear !important; }
  .lang-popover { animation: none; }
}