@charset "UTF-8";
.profile-shell { padding-bottom: 68px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; padding-block: 20px 30px; font-size: 11px; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumbs [aria-current] { color: var(--ink); }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 9%; align-items: start; }
.gallery { min-width: 0; }
.gallery-viewport { position: relative; touch-action: pan-y pinch-zoom; }
.gallery-slide { margin: 0 0 18px; position: relative; aspect-ratio: 4/5; background: var(--surface); overflow: hidden; }
.gallery-slide > img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.gallery-enhanced .gallery-slide { margin-bottom: 0; }
.gallery-placeholder { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(135deg, #ffffff26, #0000000d), var(--portrait); display: grid; place-items: center; }
.gallery-placeholder.variant-1 { background-image: linear-gradient(35deg, #363a3915, #ffffff15); }
.gallery-placeholder.variant-2 { background-image: linear-gradient(135deg, #a7857326, #ffffff09); }
.gallery-shape { position: absolute; inset: 22px; border: 1px solid #ffffff48; }
.gallery-initial { font: 140px/1 var(--serif); color: var(--portrait-ink); opacity: .65; }
.gallery-demo-label { position: absolute; top: 37px; left: 37px; font-size: 9px; letter-spacing: 1.5px; color: var(--portrait-ink); }
.gallery-frame-number { position: absolute; top: 35px; right: 37px; font-size: 11px; color: var(--portrait-ink); }
/* Слой обязателен. Сама фотография лежит на z-index: 1 — её поднимают над размытой
   подложкой (см. .gallery-backdrop ниже), и стрелки без своего слоя уходят под снимок,
   хотя в разметке стоят после него. */
.gallery-arrows { position: absolute; inset: auto 36px 34px; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; }
.gallery-arrows button { pointer-events: auto; width: 46px; height: 46px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 21px; border-radius: 0; }
.gallery-arrows button:hover { background: var(--ink); color: var(--paper); }
.gallery-caption { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-block: 14px; font-size: 11px; color: var(--muted); }
.gallery-counter { color: var(--ink); font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.gallery-thumbnails { display: flex; gap: 12px; overflow-x: auto; padding: 3px 3px 8px; scrollbar-width: thin; position: relative; }
.gallery-thumbnail { display: block; position: relative; width: 68px; height: 86px; flex-shrink: 0; overflow: hidden; border: 2px solid transparent; opacity: .65; }
.gallery-thumbnail[aria-current="true"] { opacity: 1; outline: 1px solid var(--accent); outline-offset: 1px; }
.gallery-thumbnail:hover { opacity: 1; }
.gallery-thumbnail > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbnail .gallery-initial { font-size: 29px; line-height: 1; }
.gallery-thumbnail .gallery-shape { inset: 6px; }
.thumbnail-number { position: absolute; right: 3px; bottom: 3px; padding-inline: 4px; background: var(--paper); color: var(--ink); font-size: 9px; }
.gallery-image-error { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
.profile-copy { min-width: 0; padding-top: 13px; }
.profile-copy h1 { font-size: 65px; line-height: 1.15; letter-spacing: -1.8px; margin-bottom: 18px; }
.profile-lead { color: var(--muted); max-width: 430px; font-size: 14px; line-height: 1.9; }
.profile-copy h2 { font-size: 27px; letter-spacing: -.4px; margin-bottom: 17px; }
.profile-parameters { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.profile-parameters dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 25px; }
.profile-parameters dl > div { padding-block: 13px; border-bottom: 1px solid var(--line); }
.profile-parameters dt { color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.profile-parameters dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.profile-description { margin-top: 30px; }
.profile-description p, .profile-muted { color: var(--muted); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.related { padding-block: 40px 62px; border-top: 1px solid var(--line); }
.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related .portrait { aspect-ratio: 4/4.5; }
@media (max-width: 1000px) {
  .profile-layout { gap: 5%; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .profile-copy h1 { font-size: 53px; }
}
@media (max-width: 700px) {
  .profile-shell { padding-bottom: 40px; }
  .breadcrumbs { padding-block: 9px 18px; gap: 10px; font-size: 10px; }
  .profile-layout { grid-template-columns: 1fr; gap: 23px; }
  .gallery-shape { inset: 15px; }
  .gallery-demo-label { left: 25px; top: 27px; font-size: 8px; letter-spacing: .8px; }
  .gallery-frame-number { right: 25px; top: 24px; }
  .gallery-arrows { inset: auto 25px 25px; }
  .gallery-initial { font-size: 110px; }
  .gallery-caption { font-size: 10px; }
  .gallery-thumbnail { width: 60px; height: 76px; }
  .profile-copy { padding-top: 0; }
  .profile-copy h1 { font-size: 49px; margin-bottom: 14px; }
  .profile-lead { font-size: 13px; }
  .profile-parameters { margin-top: 27px; padding-top: 24px; }
  .profile-parameters dl { column-gap: 20px; }
  .profile-parameters dt { font-size: 10px; }
  .profile-parameters dd { font-size: 12px; }
  .related { padding-block: 32px 42px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Пустота в слайдере. Рамка слайда одна — 4:5, а снимки в паке идут от 0.65 до 1.0 по
   отношению сторон: из четырёхсот замеренных с рамкой совпали 69. При object-fit: contain
   остальные получали пустые полосы — снизу у широких, по бокам у узких.
   Рамка закрывается тем же снимком, растянутым по ней и размытым. Фотография при этом
   видна целиком и не обрезана, а пустого места не остаётся. Для подложки берётся превью,
   если оно есть: размывать полноразмерный файл незачем. */
.gallery-slide > img.gallery-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(26px) brightness(.45) saturate(1.1);
  /* Увеличение прячет мягкие края размытия, которые иначе видны по периметру рамки. */
  transform: scale(1.12);
  pointer-events: none; user-select: none;
}
.gallery-slide > img:not(.gallery-backdrop) { position: relative; z-index: 1; }

/* Блок связи под параметрами анкеты. Раньше кнопки стояли только в шапке: дочитавший
   описание упирался в конец страницы, а следующего шага там не было. Оформление следует
   соседним блокам — та же верхняя линия и тот же кегль заголовка, — чтобы блок читался
   частью анкеты, а не баннером. Правила привязаны к теме: в noir у .profile-contacts своя
   карточка, и общая верхняя линия ломала бы её. */
.public-page[data-theme="forma"] .profile-contacts { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.public-page[data-theme="forma"] .profile-contacts h2 { margin-bottom: 10px; }
.public-page[data-theme="forma"] .profile-contacts-lead { color: var(--muted); font-size: 13px; line-height: 1.9; margin-bottom: 16px; max-width: 430px; }
.public-page[data-theme="forma"] .profile-contacts .contact-links { gap: 20px; }
@media (max-width: 700px) {
  .public-page[data-theme="forma"] .profile-contacts { margin-top: 26px; padding-top: 22px; }
  .public-page[data-theme="forma"] .profile-contacts-lead { font-size: 12px; margin-bottom: 13px; }
}