/* Оформление по брендбуку Pure (19b.studio, вариант VOL 1): графит, медь, светло-серый, белый, серебро.
   Шрифт брендбука — Neue Haas Unica Light (платный); на сайте — свободный Inter Tight (OFL), он ближе всех. */
@font-face { font-family:"Inter Tight"; font-weight:300; font-display:swap; src:url(fonts/inter-tight-cyrillic-300-normal.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Inter Tight"; font-weight:300; font-display:swap; src:url(fonts/inter-tight-latin-300-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Inter Tight"; font-weight:400; font-display:swap; src:url(fonts/inter-tight-cyrillic-400-normal.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Inter Tight"; font-weight:400; font-display:swap; src:url(fonts/inter-tight-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Inter Tight"; font-weight:500; font-display:swap; src:url(fonts/inter-tight-cyrillic-500-normal.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Inter Tight"; font-weight:500; font-display:swap; src:url(fonts/inter-tight-latin-500-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --paper:#ffffff;
  --mist:#eeeeee;         /* светлый из палитры: подложки */
  --ink:#38363a;          /* графит: текст, 12:1 на белом */
  --muted:#6b686d;        /* 5.5:1 на белом, 4.7:1 на --mist */
  --line:#cacaca;         /* серый из палитры: линейки */
  --copper:#ba8a69;       /* медь: только линии и крупное — 3:1 на белом */
  --copper-ink:#8a5f42;   /* медь для мелкого текста, 5.5:1 на белом */
  --silver:linear-gradient(90deg,#858585,#f6f6f6 55%,#9a9a9a);
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --base:17px;
  --ease:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scrollbar-color:var(--line) var(--paper); }
body { margin:0; font:400 var(--base)/1.6 var(--sans); color:var(--ink); background:var(--paper); caret-color:var(--copper-ink); font-feature-settings:"ss01" 0; }
::selection { background:var(--ink); color:var(--paper); }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:underline; text-decoration-color:var(--copper); text-underline-offset:.25em; text-decoration-thickness:1px; transition:color .2s, text-decoration-color .2s; }
a:hover { color:var(--copper-ink); text-decoration-color:currentColor; }
a[href^="tel:"] { white-space:nowrap; }
:focus-visible { outline:2px solid var(--copper-ink); outline-offset:3px; }
.wrap { max-width:1240px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:12px; top:12px; z-index:10; background:var(--paper); padding:8px 12px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Логотип «pure» — вектор из брендбука (logo.svg), красится цветом текста через маску */
.mark { display:block; aspect-ratio:503/193; background:currentColor; -webkit-mask:url(logo.svg) center/contain no-repeat; mask:url(logo.svg) center/contain no-repeat; }

/* Вертикальная подпись на поле, как в брендбуке */
.rail { position:fixed; left:clamp(6px,1.2vw,22px); bottom:32px; writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; letter-spacing:.04em; color:var(--muted); pointer-events:none; }
@media (max-width:1100px) { .rail { display:none; } }

/* Шапка — одинаковая на всех страницах */
.top { display:flex; align-items:center; flex-wrap:wrap; gap:12px 32px; padding-top:28px; padding-bottom:20px; font-size:14px; }
.top .logo { color:var(--ink); width:96px; margin-right:auto; text-decoration:none; }
.top .logo:hover { color:var(--copper-ink); }
.place { color:var(--muted); }
.top .links { display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; }
.vi-btn { white-space:nowrap; font:inherit; color:var(--ink); background:none; border:1px solid var(--line); padding:6px 14px; cursor:pointer; transition:border-color .2s; }
.vi-btn:hover { border-color:var(--ink); }
nav.menu { position:relative; }
nav.menu::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--silver); }
nav.menu ul { list-style:none; margin:0 auto; display:flex; flex-wrap:wrap; gap:0 clamp(16px,2.4vw,36px); }
nav.menu a { display:block; padding:14px 0 13px; text-decoration:none; color:var(--ink); font-size:13px; letter-spacing:.09em; text-transform:uppercase; }
nav.menu a:hover { color:var(--copper-ink); }
nav.menu a[aria-current="page"] { color:var(--copper-ink); box-shadow:inset 0 -1px 0 var(--copper); }
@media (max-width:640px) {
  .top { padding-top:20px; padding-bottom:14px; }
  .place { display:none; }
  .top .links { gap:6px 12px; }
  /* Меню в одну строку с прокруткой вбок; правый край гаснет — видно, что дальше есть ещё пункты */
  nav.menu ul { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:0 20px; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
  nav.menu ul::-webkit-scrollbar { display:none; }
  nav.menu a { white-space:nowrap; padding:12px 0; }
}

/* Первый экран главной: слева логотип и сведения, справа портрет с белым логотипом — разворот VOL 1 */
.hero > .wrap { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,6vw,96px); align-items:end; padding-top:clamp(40px,7vw,96px); padding-bottom:clamp(56px,8vw,120px); }
.hero h1 { margin:0 0 clamp(28px,4vw,48px); font-weight:300; }
.hero h1 .mark { width:min(100%,520px); color:var(--ink); }
.hero h1 .name { display:block; margin-top:clamp(20px,3vw,32px); font-size:clamp(26px,2.6vw,34px); line-height:1.15; letter-spacing:-.015em; }
.hero p { font-size:clamp(17px,1.35vw,19px); color:var(--muted); max-width:32em; margin:0 0 14px; }
.hero p.kind { color:var(--ink); }
.portrait { position:relative; margin:0; background:var(--mist); overflow:hidden; }
.portrait img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.portrait .mark { position:absolute; left:50%; bottom:7%; width:34%; translate:-50% 0; color:#fff; }
@media (max-width:860px) { .hero > .wrap { grid-template-columns:1fr; } .portrait { max-width:520px; } }
@media (prefers-reduced-motion:no-preference) {
  /* Единственное авторское движение: портрет проявляется снизу вверх, как фото в проявителе */
  .portrait img { animation:develop 1.6s var(--ease) both; }
  .portrait .mark { animation:fade 1.2s .7s var(--ease) both; }
  @keyframes develop { from { clip-path:inset(55% 0 0 0); scale:1.06; filter:grayscale(1); } }
  @keyframes fade { from { opacity:.3; } }
}

.btn { display:inline-flex; align-items:center; gap:12px; margin-top:28px; padding:16px 28px; background:var(--ink); color:var(--paper); font:400 13px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border:0; cursor:pointer; transition:background .25s; }
.btn:hover { background:var(--copper-ink); color:var(--paper); }
.btn:active { translate:0 1px; }
.btn svg { width:18px; height:18px; flex:none; }

/* Лента снимков на главной: разная высота, общий низ — ритм как в брендбуке */
.strip { background:var(--mist); }
.strip .wrap { display:grid; grid-template-columns:4fr 5fr 3fr; gap:clamp(12px,2vw,24px); align-items:end; padding-top:clamp(40px,6vw,88px); padding-bottom:clamp(40px,6vw,88px); }
.strip img { width:100%; object-fit:cover; }
.strip img:nth-child(1) { aspect-ratio:4/5; }
.strip img:nth-child(2) { aspect-ratio:3/2; }
.strip img:nth-child(3) { aspect-ratio:1/1; }
@media (max-width:700px) { .strip .wrap { grid-template-columns:1fr 1fr; } .strip img:nth-child(2) { grid-column:1/-1; order:-1; } }

/* Заголовок внутренних страниц: крупно и легко; справа — снимок, если он есть */
.page-head > .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,5vw,80px); align-items:end; padding-top:clamp(40px,6vw,88px); padding-bottom:clamp(36px,5vw,64px); }
.page-head h1 { font:300 clamp(40px,6.4vw,84px)/1.02 var(--sans); letter-spacing:-.03em; margin:0; max-width:14ch; text-wrap:balance; }
.page-head img { width:clamp(220px,30vw,420px); aspect-ratio:4/3; object-fit:cover; }
@media (max-width:700px) { .page-head > .wrap { grid-template-columns:1fr; } .page-head img { width:100%; order:-1; } }

/* Разделы: слева заголовок, справа содержание */
.sec { position:relative; }
.sec::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); }
.sec > .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:clamp(24px,5vw,96px); padding-top:clamp(48px,6vw,96px); padding-bottom:clamp(48px,6vw,96px); }
.sec h2 { font:300 clamp(28px,3vw,40px)/1.1 var(--sans); letter-spacing:-.02em; margin:0; text-wrap:balance; }
.sec .side p { color:var(--muted); margin:16px 0 0; max-width:24em; font-size:15px; }
.body > :first-child { margin-top:0; }
.body h3 { font:500 17px/1.4 var(--sans); margin:36px 0 10px; }
.body p, .body ul, .body ol { margin:0 0 16px; max-width:36em; }
.body li { margin-bottom:8px; }
.body ul { padding-left:1.1em; }
.body ul li::marker { color:var(--copper); }
.note { border:1px solid var(--copper); padding:18px 22px; margin:0 0 20px; max-width:38em; }
@media (min-width:861px) { .sec .side { position:sticky; top:32px; align-self:start; } }
@media (max-width:860px) { .sec > .wrap { grid-template-columns:1fr; } }

/* Списки «название — значение» */
dl { margin:0 0 8px; border-top:1px solid var(--ink); }
dl .grp { font:400 12px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:32px 0 12px; border-bottom:1px solid var(--line); }
dl .row { display:grid; grid-template-columns:minmax(0,14em) minmax(0,1fr); gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
dt { color:var(--muted); font-size:15px; padding-top:1px; }
dd { margin:0; font-variant-numeric:tabular-nums lining-nums; overflow-wrap:anywhere; }
dd.num { letter-spacing:.03em; }
@media (max-width:560px) { dl .row { grid-template-columns:1fr; gap:2px; } }

/* Карточки органов и таблицы: прямые углы, как плашки палитры */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:2px; margin:0 0 24px; }
.card { background:var(--mist); padding:24px 24px 20px; overflow-wrap:anywhere; }
.card h3 { margin:0 0 12px; font:500 16px/1.35 var(--sans); }
.card p { margin:0 0 8px; font-size:15px; }
.card a { text-decoration-color:var(--copper-ink); }  /* медь на #eee даёт 2.6:1 — линии нужна тёмная медь */
table { border-collapse:collapse; width:100%; margin:0 0 20px; font-size:16px; font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:12px 14px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:400; font-size:12px; letter-spacing:.08em; text-transform:uppercase; border-bottom-color:var(--ink); }

/* Кнопка копирования реквизитов */
.copy { margin-top:28px; background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.copy:hover { background:var(--ink); color:var(--paper); }
.copy[data-state="ok"] { background:var(--copper-ink); color:var(--paper); box-shadow:none; }
.status { min-height:1.6em; margin-top:10px; font-size:15px; color:var(--muted); }

/* Формы: отзыв и поиск — поля одной линией снизу */
form.f { display:grid; gap:20px; max-width:36em; }
form.f label { display:grid; gap:6px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
form.f input, form.f textarea { font:400 17px/1.5 var(--sans); letter-spacing:0; text-transform:none; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:8px 0; transition:border-color .2s; }
form.f input:hover, form.f textarea:hover { border-bottom-color:var(--muted); }
form.f input:focus, form.f textarea:focus { outline:none; border-bottom-color:var(--copper-ink); box-shadow:0 1px 0 var(--copper-ink); }
form.f input::placeholder, form.f textarea::placeholder { color:var(--muted); }
form.f textarea { min-height:7em; resize:vertical; }
form.f .agree { display:flex; gap:12px; align-items:flex-start; color:var(--ink); font-size:15px; letter-spacing:0; text-transform:none; }
form.f .agree input { margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--ink); }
form.f .btn { margin-top:8px; justify-self:start; }

/* Подвал: графит и белый логотип — тёмная плашка палитры */
footer { position:relative; background:var(--ink); color:var(--line); font-size:14px; }
footer::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--silver); opacity:.6; }
footer .wrap { display:grid; grid-template-columns:1fr auto; gap:24px 48px; align-items:end; padding-top:clamp(48px,6vw,80px); padding-bottom:32px; }
footer .mark { grid-column:1/-1; width:clamp(140px,22vw,260px); color:var(--paper); margin-bottom:clamp(24px,4vw,56px); }
footer a { text-decoration-color:var(--copper); }
footer a:hover { color:var(--paper); }
footer ::selection { background:var(--paper); color:var(--ink); }
@media (max-width:700px) { footer .wrap { grid-template-columns:1fr; } }

#search-out { list-style:none; padding:0; margin:28px 0 0; }
#search-out li { padding:14px 0; border-bottom:1px solid var(--line); }
#search-out p { margin:4px 0 0; color:var(--muted); font-size:15px; }
/* Пустой <span class="todo"> — метка места, где сведения ещё не заполнены (grep todo). Не показывается. */

/* Версия для слабовидящих: крупный шрифт без засечек, чёрное на белом, без снимков и украшений.
   Включается кнопкой в верхней строке, выбор запоминается (site.js). */
html.vi { --paper:#fff; --mist:#fff; --ink:#000; --muted:#000; --line:#000; --copper:#000; --copper-ink:#000; --silver:#000; --sans:Arial,Helvetica,sans-serif; --base:22px; }
html.vi body { line-height:1.7; letter-spacing:.02em; }
html.vi .rail, html.vi .portrait, html.vi .strip, html.vi .page-head img { display:none; }
html.vi * { animation:none !important; transition:none !important; }
html.vi a { text-decoration-thickness:2px; }
html.vi .hero > .wrap { grid-template-columns:1fr; }
html.vi .hero h1 .mark { width:220px; }
html.vi .hero h1 .name, html.vi .page-head h1 { font-size:48px; font-weight:400; }
html.vi .sec h2 { font-weight:400; }
html.vi h3 { font-size:calc(var(--base) + 2px); }
html.vi nav.menu ul { flex-wrap:wrap; -webkit-mask-image:none; mask-image:none; }
/* Мелкие подписи в обычной версии заданы в px — здесь все они не меньше базового кегля */
html.vi :is(p,li,dt,dd,td,th,label,input,textarea,button,.grp,.status,.place,footer span) { font-size:var(--base); letter-spacing:.02em; }
html.vi .btn { background:#000; color:#fff; font-size:20px; }
html.vi .copy { background:#fff; color:#000; box-shadow:inset 0 0 0 2px #000; }
html.vi nav.menu a, html.vi .top, html.vi form.f label { font-size:20px; }
html.vi .card, html.vi .note { border:2px solid #000; }
html.vi form.f input, html.vi form.f textarea { border:2px solid #000; padding:8px 10px; }
html.vi footer { background:#fff; color:#000; border-top:2px solid #000; }
html.vi footer .mark { color:#000; }
html.vi :focus-visible { outline:3px solid #000; }
@media print { nav.menu, .vi-btn, .rail, .portrait, .strip, .page-head img, .copy, form.f, footer .mark { display:none; } footer { background:none; color:#000; } }