/* ============================================================================
   Обвязка страницы — фаза 2 TASK-005.
   Шапка, подвал, оболочка, крошки, заголовок/дека/мета уровня страницы.
   Перенос принятого образца-страницы-статьи-2026-08-15 на шаблоны темы.
   Числа — только через var() из tokens.css.

   Меню принятого образца-шапки-2026-08-03 перенесено целиком: подменю трёх
   разделов, мобильные переключатели «Меню»/«Поиск», раскладка в две строки на
   широком экране. Прогрессивное улучшение: без скрипта меню и поиск открыты и
   проходимы (критерий 8); класс `.js` (ставит nav.js) включает свёртки. Служебные
   леса образца (.probe/.states) в тему не переносятся.
   ============================================================================ */

/* Атрибут `hidden` слабее объявления display компонента — переключатели гасят
   меню и поиск через него, поэтому усиливаем (грабля образца шапки: на 768 px
   поиск оставался раскрытым при свёрнутом меню). */
[hidden]{ display:none !important; }

/* --- ОБОЛОЧКА --------------------------------------------------------------- */
.shell{ max-width: var(--shell); margin-inline: auto; padding-inline: var(--space-4); }

/* Только для скринридера. */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Перейти к содержанию — первый в порядке обхода, виден только на фокусе. */
.skip{
  position:absolute; left:var(--space-4); top:var(--space-2); z-index:20;
  transform:translateY(-200%);
  font-family:var(--font-apparatus); font-size:var(--step-1);
  background:var(--bg); padding:var(--space-2) var(--space-3);
  border:1px solid var(--ink); color:var(--ink); text-decoration:none;
  transition:transform .12s ease-out;
}
.skip:focus-visible{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .skip{ transition:none; } }

/* --- СЛУЖЕБНАЯ СТРОКА ------------------------------------------------------- */
.util{ border-block-end:1px solid var(--rule-soft); }
.util__in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-2) var(--space-4); padding-block:var(--space-2);
  font-family:var(--font-apparatus); font-size:var(--step-1);
  line-height:var(--lh-meta); color:var(--ink-mute);
}
/* На узком экране служебных ссылок нет — они есть в подвале (адаптивность, не
   второй шаблон). */
.util__list{ display:none; flex-wrap:wrap; gap:0 var(--space-4); }
.util__account{ margin-inline-start:auto; display:flex; gap:0 var(--space-4); }
/* Вошедший на легаси (OPEN-093, nav.js): имя-ссылка на профиль вместо «Войти»; длинное — с многоточием. */
.util .util__me{ display:inline-block; max-inline-size:16em; padding-block:var(--space-1); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.util a{ display:inline-block; color:inherit; text-decoration:none; padding-block:var(--space-1); }
.util a:hover{ text-decoration:underline; text-underline-offset:.2em; }
@media (min-width: 40rem){ .util__list{ display:flex; } }

/* --- ШАПКА ------------------------------------------------------------------ */
.head{ border-block-end:1px solid var(--rule-strong); }
.head__in{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--space-3) var(--space-5); padding-block:var(--space-4);
}
/* Знак издания — currentColor из чернил, без отдельного запроса. Пропорция
   13,7:1, задаётся высотой. */
.logo{ display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; padding-block:var(--space-1); }
.logo svg{ display:block; block-size:1.25rem; inline-size:auto; fill:currentColor; }

/* Переключатели «Меню» и «Поиск» — словами. Появляются только когда скрипт
   выполнился: без него меню и поиск открыты, и кнопка, которая ничем не
   управляет, читателю не нужна. Одна общая линия вместо двух рамок сохраняет
   различимые цели, но визуально не спорит со знаком издания. */
.head__switches{
  display:none; margin-inline-start:auto; gap:0;
  border-block-end:1px solid var(--rule-strong);
}
.js .head__switches{ display:flex; }
.switch{
  font-family:var(--font-apparatus); font-size:var(--step-1); font-weight:var(--wght-meta);
  color:var(--ink); background:transparent;
  padding:var(--space-2) var(--space-3); border:0; cursor:pointer;
}
.switch:hover{ background:var(--bg-sunk); }
.switch[aria-expanded="true"]{ box-shadow:inset 0 -2px 0 var(--ink); }
.switch:active{ background:var(--accent-wash); }

/* --- ГЛАВНОЕ МЕНЮ -----------------------------------------------------------
   Второй уровень навигации. Гротеск, --step-2, чернила. Подчёркивания у пунктов
   нет: в списке роль ссылки несёт положение, сплошное подчёркивание двадцати
   пунктов превратило бы меню в штриховку (отступление разобрано в образце).
   На узком экране — вертикальный список; на широком (--bp-широкий) он
   разворачивается в строку целиком, см. медиа-запрос ниже. */
.nav{ width:100%; }
.nav__list{ display:flex; flex-direction:column; gap:0; list-style:none; margin:0; padding:0; }
/* Пункты списка разделены волосяной линейкой — на белом единственный
   конструктивный инструмент, карточек и подложек в системе нет. */
.nav__list > .nav__item + .nav__item{ border-block-start:1px solid var(--rule-soft); }
/* Пункт — свой флекс-контейнер: ссылка и кнопка раскрытия в строку, подменю
   занимает всю ширину пункта и уходит под них. `flex:0 0 auto` обязателен —
   без него при широкой раскладке пункт сжимался и кнопка раскрытия падала
   на вторую строку (грабля образца, видна только рендером). */
.nav__item{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--space-1); flex:0 0 auto; inline-size:100%; }
.nav__top{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-apparatus); font-size:var(--step-2);
  font-weight:var(--wght-normal); line-height:var(--lh-meta);
  color:var(--ink); text-decoration:none; padding-block:var(--space-2);
}
.nav__top:hover{ text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.28em; }
/* Текущий раздел — весом и линейкой под словом, а не цветом. */
.nav__top[aria-current]{ font-weight:var(--wght-meta); box-shadow:inset 0 -2px 0 0 var(--ink); }

/* Кнопка раскрытия. Отдельная от ссылки: пункт одновременно ведёт в раздел и
   открывает подменю, одним элементом эти две вещи не разделить ни мышью, ни
   клавиатурой. Подпись у кнопки для скринридера; на экране её роль несёт
   треугольник, построенный границами блока (глиф ▾ у Golos не гарантирован). */
.nav__more{
  display:none; margin-inline-start:auto;
  align-items:center; justify-content:center;
  inline-size:1.75rem; block-size:1.75rem;
  color:var(--ink); background:var(--bg); cursor:pointer;
}
.js .nav__more{ display:inline-flex; }
.nav__more::before{
  content:""; inline-size:0; block-size:0;
  border-inline:.3125rem solid transparent;         /* 5 px */
  border-block-start:.375rem solid var(--ink-mute); /* 6 px */
  transition:transform .12s ease-out;
}
.nav__more:hover::before{ border-block-start-color:var(--ink); }
.nav__more[aria-expanded="true"]::before{ transform:rotate(180deg); border-block-start-color:var(--ink); }
@media (prefers-reduced-motion: reduce){ .nav__more::before{ transition:none; } }

/* Подменю. Без скрипта — в потоке, видимо (критерий 8). Со скриптом — скрыто
   до раскрытия. */
.nav__sub{
  flex-basis:100%;
  display:flex; flex-direction:column; gap:var(--space-1);
  list-style:none; margin:0;
  padding-block:var(--space-2) var(--space-3); padding-inline:var(--space-4) 0;
}
.js .nav__sub{ display:none; }
.js .nav__item--open .nav__sub{ display:flex; }
.nav__sub a{
  display:block;
  font-family:var(--font-apparatus); font-size:var(--step-1); line-height:var(--lh-meta);
  color:var(--ink-soft); text-decoration:none;
  padding-block:var(--space-2);   /* цель нажатия 24 px, как в служебной строке */
}
.nav__sub a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:.25em; }
.nav__sub a[aria-current]{ color:var(--ink); font-weight:var(--wght-meta); }

/* --- ПОИСК ------------------------------------------------------------------
   Подпись видимая (в legacy у поля ни label, ни aria-label). Поле на нижней
   линейке, кнопка словом. */
.head__in > .search{ display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; width:100%; }
.search__label{ font-family:var(--font-apparatus); font-size:var(--step-1); color:var(--ink-mute); white-space:nowrap; }
.search__field{
  flex:1 1 12rem; min-inline-size:0;
  font-family:var(--font-apparatus); font-size:var(--step-2); line-height:var(--lh-meta);
  color:var(--ink); background:var(--bg);
  border:0; border-block-end:1px solid var(--rule-strong);
  padding:var(--space-2) 0; border-radius:0;
}
.search__field:hover{ border-block-end-color:var(--ink-mute); }
.search__field:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
  border-block-end:2px solid var(--ink); box-shadow:none;
  padding-block-end:calc(var(--space-2) - 1px);
}
.search__go{
  font-family:var(--font-apparatus); font-size:var(--step-1); font-weight:var(--wght-meta);
  padding:var(--space-2) var(--space-3); border:1px solid var(--ink);
  background:var(--bg); color:var(--ink); cursor:pointer;
}
.search__go:hover{ background:var(--bg-sunk); }
.search__go:active{ background:var(--accent-wash); }
.search__go[disabled]{ border-color:var(--rule-strong); color:var(--ink-mute); cursor:not-allowed; }

/* На узком экране компактность шапки обеспечивают внешние поля, а не маленькие
   цели: основные ссылки, переключатели и поиск имеют минимум 44 px. */
@media (max-width:61.99rem){
  .head__in{ padding-block:var(--space-2); }
  .logo,
  .switch,
  .nav__top,
  .nav__more,
  .nav__sub a,
  .search__field,
  .search__go{ min-block-size:44px; }
  .logo,
  .switch,
  .nav__top,
  .nav__sub a{ display:inline-flex; align-items:center; }
  .switch{ justify-content:center; }
  .nav__top,
  .nav__sub a{ padding-block:0; }
  .nav__more{ inline-size:44px; block-size:44px; }
}

/* --- РАСКЛАДКА ШАПКИ ПО ШИРИНЕ ----------------------------------------------
   Медиа-запрос переопределяет раскладку меню ЦЕЛИКОМ, а не частично (правило
   журнала прошлых смен). Порядок обхода в разметке — логотип, переключатели,
   меню, поиск; на широком экране раскладка меняется, порядок обхода нет.
   Шапка в две строки: логотип и поиск делят первую, меню занимает вторую
   целиком — иначе меню по остаточной ширине переполнялось молча (грабля
   образца, «Ваше портфолио» уезжало под поле поиска). Порог --bp-широкий,
   62rem: см. tokens.css; кастомная переменная внутри @media не раскрывается,
   поэтому число стоит литералом, а связь держит имя точки. */
@media (min-width: 62rem){
  .head__in{ gap:var(--space-4) var(--space-5); padding-block:var(--space-5) 0; }
  .head__switches, .js .head__switches{ display:none; }
  .logo{ order:1; }
  .logo svg{ block-size:1.5rem; }
  .head__in > .search{ order:2; margin-inline-start:auto; width:auto; flex:0 0 26rem; }
  .nav{ order:3; flex:1 0 100%; width:100%; padding-block-end:var(--space-2); }
  .nav__list{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:0 var(--space-5); }
  .nav__list > .nav__item + .nav__item{ border-block-start:0; }
  .nav__item{ inline-size:auto; }
  .nav__more{ margin-inline-start:0; }
  /* Подменю всплывает над содержанием, чтобы раскладка не прыгала. Ширина по
     содержанию, но не уже пункта. */
  .js .nav__sub{
    position:absolute; z-index:15; inset-inline-start:0; inset-block-start:100%;
    min-inline-size:100%; inline-size:max-content; max-inline-size:16rem;
    background:var(--bg); border:1px solid var(--rule-strong);
    padding:var(--space-2) var(--space-3);
  }
  /* Последний пункт с подменю прижат к правому краю — подменю раскрывается
     влево, иначе вылезает за край и даёт прокрутку. */
  .js .nav__item--last .nav__sub{ inset-inline-start:auto; inset-inline-end:0; }
}

/* --- ГЛАВНАЯ ОБЛАСТЬ, КРОШКИ, ДОРОЖКА ДОКУМЕНТА ------------------------------ */
/* Отступ шапка → крошки задаёт ТОЛЬКО padding-block-start. Было --space-6 (40px,
   принятый образец); по замечанию владельца 07.09.2026 слишком велик — уменьшено до
   --space-4 (20px). FSE-раскладка шаблона добавляла свой блочный зазор margin сверху
   main (24px) поверх него — гасим зазор у main. */
main.main{ margin-block-start: 0; }
.main{ padding-block:var(--space-4) var(--space-8); }
/* Дорожка документа прижата ВЛЕВО (принятый образец, решение владельца
   20.08.2026: логотип и первый блок содержания стоят на одной левой границе).
   Ширина — мера чтения; post-content внутри держит ту же меру, поэтому его
   constrained-центрирование не смещает колонку. Своя рекламная плашка/кадр
   шире колонки в принятой раскладке по умолчанию не выходят. */
.lane--doc{ max-width:var(--measure-text); }
.lane--doc .alignwide,
.lane--doc .alignfull{ max-width:100%; margin-inline:0; }
.crumbs{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-2);
  font-family:var(--font-apparatus); font-size:var(--step-1);
  line-height:var(--lh-meta); color:var(--ink-mute); margin-block-end:var(--space-6);
}
.crumbs a{ display:inline-block; color:inherit; text-decoration:none; padding-block:var(--space-1); }
.crumbs a:hover{ text-decoration:underline; text-underline-offset:.2em; }
.crumbs [aria-current]{ color:var(--ink); }

/* --- ЛОКАЛЬНАЯ НАВИГАЦИЯ ПО РАЗДЕЛАМ ГРУППЫ (шорткод ph_section_nav) ----------
   Переключатель на странице группы и на листингах её разделов: якорь-группа
   (ссылка на хаб) + пилюли разделов. Текущий — чернильной обводкой и весом
   (цвета в системе нет, политика фазы 2). Переносится на узком; проходима с
   клавиатуры; ставится под крошками. */
.secnav{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-3);
  margin-block:0 var(--space-5); padding-block-end:var(--space-4);
  border-block-end:1px solid var(--rule);
}
.secnav__group{
  font-family:var(--font-apparatus); font-size:var(--step-2); font-weight:var(--wght-strong);
  color:var(--ink); text-decoration:none;
}
.secnav__group:hover{ text-decoration:underline; text-underline-offset:.2em; }
.secnav__group.is-current{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.22em; }
.secnav__list{ display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0; }
.secnav__item{
  display:inline-block; font-family:var(--font-apparatus); font-size:var(--step-1);
  line-height:var(--lh-meta); color:var(--ink-mute); text-decoration:none;
  padding:var(--space-1) var(--space-3); border:1px solid var(--rule); border-radius:2px;
}
.secnav__item:hover{ border-color:var(--ink-mute); color:var(--ink); }
.secnav__item.is-current{ color:var(--ink); border-color:var(--ink); font-weight:var(--wght-meta); }
.secnav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* --- ЗАГОЛОВОК / ДЕКА / МЕТА уровня страницы (принятые .t-display/.t-deck/.t-byline/.t-meta) */
.single__title{
  font-family:var(--font-text); font-size:var(--step-6);
  font-weight:var(--wght-display); font-variation-settings:"opsz" var(--opsz-display);
  line-height:var(--lh-display); letter-spacing:-.025em;
  text-wrap:balance; max-inline-size:var(--measure-text); margin-block-end:var(--space-4);
}
.single__deck{
  font-family:var(--font-text); font-size:var(--step-4);
  font-variation-settings:"opsz" var(--opsz-deck); font-weight:var(--wght-normal);
  line-height:var(--lh-deck); color:var(--ink-soft); max-width:var(--measure-deck);
  text-wrap:pretty; margin-block-end:var(--space-3);
}
/* Мета уровня страницы (принятый образец: «Веха · 16 октября 2024»): рубрика
   весом чернил, дата служебным тоном, разделитель — средняя точка. Раздел
   (post-terms) стоит рубрикой, дата — длинным форматом «j F Y». */
.single__meta{
  display:flex; flex-wrap:wrap; gap:0 .1em;
  font-family:var(--font-apparatus); font-size:var(--step-1);
  line-height:var(--lh-meta); color:var(--ink-mute); font-variant-numeric:tabular-nums;
  margin-block-end:var(--space-3);
}
.single__meta > * + *::before{ content:"\00B7"; color:var(--rule-strong); margin-inline:.55em; }
.single__meta .wp-block-post-terms{ color:var(--ink); font-weight:var(--wght-strong); }
.single__meta a{ color:inherit; text-decoration:none; }
.single__meta a:hover{ text-decoration:underline; text-underline-offset:.2em; }
/* Число отзывов (ph_discussion_count): ссылка на #discussion, число — весом чернил. */
.single__meta .single__talk-n{ color:var(--ink); font-weight:var(--wght-strong); }
.single__byline{
  font-family:var(--font-apparatus); font-size:var(--step-2); line-height:var(--lh-deck);
  color:var(--ink-mute); display:flex; flex-wrap:wrap; gap:.15em .9em;
  max-width:var(--measure-text); margin-block-end:var(--space-6);
}
.single__byline a{
  color:var(--ink); font-weight:var(--wght-strong);
  text-decoration-line:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:.07em; text-underline-offset:.16em;
}

/* --- МЕТКИ МАТЕРИАЛА (OPEN-095) — под статьёй и выставкой ------------------
   Служебная строка: подпись капителью тоном меты, метки — ссылками с
   волосяным подчёркиванием, акцент только на отклике. */
.tags-line{
  font-family:var(--font-apparatus); font-size:var(--step-2); line-height:var(--lh-deck);
  color:var(--ink-mute); max-width:var(--measure-text);
  margin-block:var(--space-6) 0; padding-block-start:var(--space-4);
  border-block-start:1px solid var(--rule);
}
.tags-line__label{
  font-size:var(--step-1); font-weight:var(--wght-meta); letter-spacing:.06em;
  text-transform:uppercase; margin-inline-end:.6em;
}
.tags-line a{
  color:var(--ink); text-decoration-line:underline; text-decoration-color:var(--rule-strong);
  text-decoration-thickness:.07em; text-underline-offset:.16em;
}
.tags-line a:hover{ text-decoration-color:var(--accent); }
.tags-line a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* --- ПОДВАЛ ----------------------------------------------------------------- */
.foot{
  border-block-start:1px solid var(--rule-strong);
  padding-block:var(--space-6) var(--space-7);
  font-family:var(--font-apparatus); font-size:var(--step-1);
  line-height:var(--lh-meta); color:var(--ink-mute);
}
.foot__nav{
  display:flex; flex-wrap:wrap; gap:0 var(--space-5);
  padding-block-end:var(--space-4); border-block-end:1px solid var(--rule-soft);
}
.foot__nav a{ display:inline-block; padding-block:var(--space-1); }
.foot a{ color:var(--ink-soft); text-decoration:none; }
.foot a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:.2em; }
.foot__legal{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding-block-start:var(--space-4); max-inline-size:56rem;
}
.foot__copy{ color:var(--ink-soft); font-weight:var(--wght-meta); }
.foot__terms{ margin:0; max-inline-size:calc(var(--step-1) * 40); }

/* Выставки фотографа на сайте (TASK-006, фаза 3). Обратная связь из био на
   выставки: показывается в виде авторов внутри выставки и на карточке фотографа
   (оговорка владельца 04.09.2026). Карточка — миниатюра обложки + имя и год
   (владелец 04.09.2026: с миниатюрой выставки). Доводка 04.09.2026 (Impeccable
   layout): блок отбивается от био верхней линейкой и просветом (было слито с
   текстом), миниатюра и имя укрупнены (имя выходит на размер тела чтения, было
   мельче), метка-заголовок из приглушённой становится полновесной. Обложка не
   кадрируется (кроме широких сверх потолка), линейка-обводка — как у ленты. */
.ph-exh-list{
  margin-block-start:var(--space-7); padding-block-start:var(--space-5);
  border-block-start:1px solid var(--rule-strong);
  max-inline-size:var(--measure-text);
}
.ph-exh-list__label{
  margin:0 0 var(--space-4); font-family:var(--font-apparatus);
  font-size:var(--step-2); font-weight:var(--wght-meta); line-height:var(--lh-meta);
  color:var(--ink);
}
.ph-exh-list__label a{
  color:inherit; text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:.16em;
}
.ph-exh-list__label a:hover{ text-decoration-color:var(--ink); }
.ph-exh-list ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-4); }
.ph-exh-card{
  display:flex; align-items:center; gap:var(--space-4);
  color:var(--ink); text-decoration:none; outline-offset:3px;
}
.ph-exh-card__thumb{ flex:0 0 auto; display:block; }
.ph-exh-card__thumb img{
  display:block; block-size:96px; inline-size:auto; max-inline-size:150px;
  object-fit:cover; outline:1px solid var(--rule-strong); outline-offset:-1px;
}
.ph-exh-card__thumb--empty{
  inline-size:96px; block-size:96px; background:var(--bg-sunk);
  outline:1px solid var(--rule-strong); outline-offset:-1px;
}
.ph-exh-card:hover .ph-exh-card__thumb img,
.ph-exh-card:hover .ph-exh-card__thumb--empty{ outline-color:var(--ink-mute); }
.ph-exh-card:active .ph-exh-card__thumb img{ outline-color:var(--ink); }
.ph-exh-card__text{ min-inline-size:0; display:flex; flex-direction:column; gap:var(--space-1); }
.ph-exh-card__name{
  font-size:var(--step-3); line-height:var(--lh-meta);
  text-decoration:underline; text-decoration-color:var(--rule-strong);
  text-underline-offset:.16em;
}
.ph-exh-card:hover .ph-exh-card__name{ text-decoration-color:var(--ink); }
.ph-exh-card__year{
  font-family:var(--font-apparatus); font-size:var(--step-1);
  line-height:var(--lh-meta); color:var(--ink-mute);
}