/* Дополнения к оригинальному CSS темы. Раньше эти размеры и эффекты выставлял скрипт Koken
   (koken.js + jQuery), теперь — обычный CSS. Подключается после settings.css. */

/* текст только для экранного диктора и поисковиков (h1, «Photo n of N») */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Старый сайт из-за сломанного doctype рисовался в quirks mode: там строки без текста
   не получают лишний отступ под базовой линией. Копия работает в стандартном режиме,
   а эти правила возвращают те же отступы (сверено замерами со старым сайтом). */
.h__logo svg { vertical-align: top; }
span.img-caption { vertical-align: top; }
div.bot .nav i { vertical-align: top; }
div.bot ul li span.cell { line-height: 15px; }
/* в quirks mode height:100% у блока «Next Album» на телефоне считался от окна */
@media only screen and (max-width: 960px) {
	.hg-next { height: 100vh; }
}

/* обложки 2:3 в списках альбомов: кроп уже сделан при подготовке картинок */
span.cover img.content { width: 100%; height: auto; max-height: none; }

/* проявление картинок после загрузки (data-lazy-fade="400") */
img.k-fade { transition: opacity .4s ease; }
img.k-fade.is-loading { opacity: 0; }

/* страница фото: картинка вписывается в ширину и не выше 800 px, без искажений */
div.img img.content { width: auto; height: auto; max-width: 100%; max-height: 800px; }

/* About: картинки в тексте */
.k-content img { width: 100%; height: auto; }

/* лента альбома на широком экране (Swiper 14 вместо Swiper 3) */
@media only screen and (min-width: 961px) {
	.h-gall.swiper-initialized .swiper-wrapper { display: flex; height: 100%; box-sizing: content-box; transition-property: transform; }
	.h-gall.swiper-initialized .swiper-slide { flex-shrink: 0; height: 100%; }
	.h-gall.swiper-initialized .hg-img { width: auto; }
	.h-gall.swiper-initialized .hg-img img { -webkit-user-drag: none; user-select: none; }
	/* клик по левой / правой половине ленты листает на один снимок: курсор показывает куда */
	.h-gall.swiper-initialized { user-select: none; }
	.h-gall.swiper-initialized[data-side="prev"] { cursor: url(/img/ui/cursor-prev.svg) 12 12, w-resize; }
	.h-gall.swiper-initialized[data-side="next"] { cursor: url(/img/ui/cursor-next.svg) 12 12, e-resize; }
	.h-gall.swiper-initialized[data-side="prev"][data-tone="dark"] { cursor: url(/img/ui/cursor-prev-dark.svg) 12 12, w-resize; }
	.h-gall.swiper-initialized[data-side="next"][data-tone="dark"] { cursor: url(/img/ui/cursor-next-dark.svg) 12 12, e-resize; }
	.h-gall.swiper-initialized.is-dragging, .h-gall.swiper-initialized.is-dragging * { cursor: grabbing; }
}

/* Точки, как в карусели Instagram (по просьбе Антона, 22.10.2026).
   Видно до 9 точек вокруг текущей фотки, крайние уменьшаются, если дальше есть ещё.
   Тап по точке — эта фотка в центр; если тянуть вдоль точек, фотки листаются по одной.
   Рядом с точками — подсказка «Tap or drag» со стрелками, которые покачиваются. */
.hg-dots { position: fixed; z-index: 3; --sp: 12px; --dot: 6px; --n: 9; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hg-dots.is-scrubbing { cursor: grabbing; }
.hg-dots__viewport { overflow: hidden; }
.hg-dots__strip { display: flex; transition: transform .25s ease; }
.hg-dots__dot { flex: 0 0 var(--sp); width: var(--sp); height: var(--sp); margin: 0; padding: 0; border: 0; background: none; cursor: inherit; position: relative; }
.hg-dots__dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius: 50%; background: #c7c7c7; transform: scale(var(--s, 1)); transition: transform .25s ease, background-color .25s ease; }
.hg-dots__dot.is-current::before { background: #151518; }
.hg-dots__dot:focus-visible { outline: none; }
.hg-dots__dot:focus-visible::before { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #151518; }
.hg-dots.is-scrubbing .hg-dots__strip { transition-duration: .12s; }

/* подсказка */
.hg-dots__hint { position: absolute; display: flex; align-items: center; gap: 7px; padding: 7px 11px 6px; border-radius: 14px; background: rgba(21, 21, 24, .88); color: #fff; font: 10px/1 'proxima-nova', 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.hg-dots__hint::after { content: ''; position: absolute; border: 5px solid transparent; }
.hg-dots.show-hint .hg-dots__hint { opacity: 1; visibility: visible; }
@media (hover: hover) {
	.hg-dots:hover:not(.is-scrubbing) .hg-dots__hint { opacity: 1; visibility: visible; }
}
.hg-dots__arrow { display: block; flex: none; }
/* текст подсказки по устройству: на компьютере мышь — «Click or drag», на телефоне «Tap or drag» */
.hg-hint-narrow { display: none; }
@media only screen and (max-width: 960px) {
	.hg-dots__hint .hg-hint-wide { display: none; }
	.hg-dots__hint .hg-hint-narrow { display: inline; }
}
.hg-dots__arrow--prev { animation: hg-hint-prev 1.2s ease-in-out infinite; }
.hg-dots__arrow--next { animation: hg-hint-next 1.2s ease-in-out infinite; }
@keyframes hg-hint-prev { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes hg-hint-next { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* компьютер: точки по центру полосы под лентой фото, подсказка над ними */
@media only screen and (min-width: 961px) {
	.hg-dots { left: 50%; bottom: 13px; transform: translateX(-50%); padding: 9px 6px; }
	.hg-dots__viewport { width: calc(var(--sp) * var(--n)); height: var(--sp); }
	.hg-dots__hint { left: 50%; bottom: 100%; transform: translate(-50%, -4px); }
	.hg-dots__hint::after { left: 50%; top: 100%; margin-left: -5px; border-top-color: rgba(21, 21, 24, .88); }
}
/* телефон: вертикальный столбик точек у правого края на полупрозрачной подложке, подсказка слева.
   Подложка с размытием нарисована псевдоэлементом: в Safari на iPhone всё, что вылезает за границы
   элемента с backdrop-filter, обрезается, и подсказку было бы не видно. */
@media only screen and (max-width: 960px) {
	.hg-dots { --sp: 14px; --dot: 7px; right: 6px; top: 50%; transform: translateY(-50%); padding: 7px 4px; }
	.hg-dots::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 13px; background: rgba(21, 21, 24, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.hg-dots__viewport { width: var(--sp); height: calc(var(--sp) * var(--n)); }
	.hg-dots__strip { flex-direction: column; }
	.hg-dots__dot::before { background: rgba(255, 255, 255, .38); }
	.hg-dots__dot.is-current::before { background: #fff; }
	/* узкая вертикальная плашка: стрелка, «Tap / or / drag» в три строки, стрелка */
	.hg-dots__hint { right: 100%; top: 50%; transform: translate(-10px, -50%); flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 16px; }
	.hg-dots__hint span { width: min-content; white-space: normal; text-align: center; line-height: 1.5; }
	.hg-dots__hint::after { left: 100%; top: 50%; margin-top: -5px; border-left-color: rgba(21, 21, 24, .88); }
	.hg-dots__arrow { transform: rotate(90deg); }
	.hg-dots__arrow--prev { animation-name: hg-hint-up; }
	.hg-dots__arrow--next { animation-name: hg-hint-down; }
	.hg-top { padding-right: 44px; }

	/* Телефон, страница альбома: лента на весь экран, листается свайпом вверх-вниз (Swiper),
	   пошагово — текущая фотка всегда ровно по центру экрана, соседние видны сверху и снизу
	   (по просьбе Антона, 22.10.2026). Страница сама не прокручивается. */
	html.k-lens-album, html.k-lens-album body { overscroll-behavior: none; }
	html.k-lens-album #foo.swiper-vertical { position: fixed !important; left: 0; right: 0; top: 0 !important; bottom: 0; height: auto !important; overflow: hidden !important; touch-action: none; }
	html.k-lens-album #foo.swiper-vertical .swiper-wrapper { display: flex; flex-direction: column; box-sizing: content-box; transition-property: transform; }
	html.k-lens-album #foo.swiper-vertical .swiper-slide { flex-shrink: 0; }
	/* в теме между фото на телефоне белая рамка 2 px + отступ 2 px; Swiper не видит рамку
	   у вертикальных слайдов, поэтому тот же белый зазор 4 px делаем одним отступом */
	html.k-lens-album #foo.swiper-vertical .hg-img { border-bottom: 0; margin-bottom: 4px; }
	/* Последний экран («Next Album» и строка для связи) — по высоте содержимого, а не во весь экран:
	   иначе под последней фоткой оставалась пустая верхняя половина этого экрана (Антон, 22.10.2026).
	   Снизу запас, чтобы круглая кнопка WhatsApp не наезжала на ссылки. */
	html.k-lens-album #foo.swiper-vertical .hg-next { height: auto; padding: 22px 25px 92px; box-sizing: border-box; }
	/* блок поджат, чтобы строка для связи была видна прямо под последней фоткой: у следующего альбома
	   только название и «see this →», без описания (Антон, 22.10.2026). Запас снизу — чтобы блок
	   для связи стоял выше круглой кнопки WhatsApp в левом нижнем углу. */
	html.k-lens-album #foo.swiper-vertical .hg-next__wrapper > p:not(.see-next) { display: none; }
	html.k-lens-album #foo.swiper-vertical .hg-next h4 { margin: 0 0 6px; }
	html.k-lens-album #foo.swiper-vertical .hg-next h4.gray { margin-bottom: 10px; }
	html.k-lens-album #foo.swiper-vertical .hg-next .see-next { margin: 4px 0 0; }
	html.k-lens-album #foo.swiper-vertical .hg-contact { margin-top: 16px; padding: 14px 12px 2px; }
	html.k-lens-album #foo.swiper-vertical .hg-contact:first-child { margin-top: 0; }
}
@keyframes hg-hint-up { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(-3px); } }
@keyframes hg-hint-down { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
	.hg-dots__arrow { animation: none !important; }
}

/* Конец альбома: под «Next Album» строка для связи (по итогам критики, 22.10.2026).
   Ссылка на следующий альбом в теме накрывает весь блок (.hg-next a), поэтому контакты подняты
   над ней и получают обычное положение. Серый #ccc (контраст 1,6:1) затемнён до #767676 (4,5:1). */
.hg-next h4.gray, .see-next { color: #767676; }
/* Блок для связи в тонкой рамке (компонент ContactBox, Антон, 22.10.2026): заголовок капсом, как
   «Next Album» (Raleway bold, разрядка), ссылки ниже обычным текстом. Стоит в конце альбома и на главной. */
.contact-box { padding: 16px 14px 6px; background: #fff; border: 1px solid #151518; text-align: center; font-size: 12px; }
.contact-box p { margin: 0; }
.contact-box__lead { font-family: 'Raleway', 'proxima-nova', Arial, sans-serif; font-weight: 700; font-size: 1em; line-height: 1.5; letter-spacing: 1.5px; text-transform: uppercase; color: #151518; }
.contact-box__links { margin-top: 4px !important; font-size: 1.1em; color: #767676; }
/* тема рисует белые иконки у всех ссылок на почту, WhatsApp и Telegram (для меню на чёрном) — здесь без них */
.contact-box a { position: static; display: inline-block; margin: 0; padding: 8px 3px; color: #151518; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background-image: none !important; }
.contact-box a:hover { color: #151518; opacity: .6; }
.contact-box a:focus-visible { outline: 2px solid #151518; outline-offset: 1px; }
@media only screen and (max-width: 960px) {
	.contact-box a { padding: 13px 5px; }
}
/* в конце альбома: ссылка на следующий альбом накрывает весь блок (.hg-next a) — рамку поднимаем над ней */
.hg-contact { position: relative; z-index: 1; margin-top: 30px; }
.hg-contact:first-child { margin-top: 0; }
.hg-next .contact-box a { position: static; }
/* главная: под фразой о студии и после всех альбомов */
.home-contact { max-width: 380px; margin: 14px auto 0; box-sizing: border-box; }
.home-contact--end { margin: 10px auto 90px; }
@media only screen and (max-width: 960px) {
	.home-contact--end { margin: 10px 25px 110px; }
}

/* Читаемость (по итогам критики, 22.10.2026). Размеры старой темы оставлены, затемнены только цвета:
   подрядчики в описании альбома были #999 (2,8:1), «Contact Us» в меню — белый 37% (≈3,3:1).
   На About и переводах строка текста была до 140 знаков на широком экране: ограничена ~70,
   фото остаются во всю ширину. */
.credits { color: #767676; }
.navContacts p { color: rgba(255, 255, 255, .6); }
html.k-lens-page #page-content > p { max-width: 36em; margin-left: auto; margin-right: auto; }

/* Страница фото. В теме рамка вокруг снимка была шириной во всё окно, а стрелки стояли за её краем —
   на широком экране страница прокручивалась вбок (на 1440 px — на 101 px). Теперь рамка по ширине
   снимка, стрелки рядом с ним. На телефоне тема сжимала снимок до 240 px — теперь он почти
   на всю ширину, стрелки по бокам (по итогам критики, 22.10.2026). */
div.img span.img-wrap { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
@media only screen and (max-width: 767px) {
	div.img span.img-wrap { width: auto; margin: 0 30px 10px; }
	div.img img.content { width: 100%; max-height: none; }
	div.img span.img-pag.left { left: -28px; }
	div.img span.img-pag.right { right: -6px; } /* у стрелки нет ширины: отступ считается от её левого края */
}

/* Фильтр стран: полные названия длиннее кодов — на телефоне поля у кнопок чуть меньше */
@media only screen and (max-width: 767px) {
	.tags-line__tag__link { padding-left: 1em; padding-right: 1em; }
}

/* Слоган «Elegant weddings all around the world» в шапке был 9,2 px — Антон попросил крупнее (22.10.2026).
   Шапка чуть выше, чтобы слоган не обрезался (у неё overflow: hidden); отступ контента под шапкой
   считает chrome.ts по её высоте. */
/* по ширине слоган совпадает с фразой под ним (Антон, 22.10.2026): 16 px и разрядка .24em ≈ 490 px —
   столько же, сколько самая длинная строка фразы; отступ слева компенсирует разрядку после последней буквы */
.tagline { font-size: 16px; letter-spacing: .24em; padding-left: .24em; color: #151518; }
header.main:not(.main2) { height: 120px; }
header.main.fly:not(.main2) { height: 94px; }
/* телефон: размер от ширины экрана, чтобы слоган и тут совпадал по ширине с фразой (на 390 px — 12 px) */
@media only screen and (max-width: 767px) {
	.tagline { font-size: clamp(10px, 3.08vw, 12px); letter-spacing: .15em; padding-left: .15em; }
}

/* Главная: две строки под шапкой — кто снимает, где и как связаться */
.home-intro { max-width: 36em; margin: 0 auto 32px; padding: 0 25px; text-align: center; font-size: 14px; line-height: 1.7; color: #151518; }
.home-intro p { margin: 0; }
/* ссылки внутри фразы: тонкое подчёркивание; иконки, которые тема рисует у ссылок на почту и мессенджеры, убраны */
.home-intro a { color: #151518; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; background-image: none !important; }
.home-intro a:hover { opacity: .6; }

/* Фильтр стран — тем же голосом, что слоган: один кегль, разрядка и цвет (вариант 1, 22.10.2026) */
.tags-line { margin-bottom: 32px; }
.tags-line__tag { font-size: 12px; }
.tags-line__tag__link { letter-spacing: 2px; color: #151518; }
.tags-line .k-nav-current { color: #fff; }
@media only screen and (max-width: 960px) {
	.tags-line__tag { font-size: 11px; }
	.tags-line__tag__link { letter-spacing: 1px; }
}
/* телефон: фильтр в одну строку даже на 360 px; лишний отступ под шапкой на главной и страницах стран убран,
   чтобы от слогана до фразы было столько же воздуха, сколько на компьютере */
@media only screen and (max-width: 767px) {
	.tags-line { margin-left: 0; margin-right: 0; }
	.tags-line__tag .tags-line__tag__link { padding-left: .75em; padding-right: .75em; }
	html.k-lens-albums div#container, html.k-lens-category div#container { padding-top: 0; }
	.home-intro { margin-top: -8px; }
}

/* Телефон, альбом: сверху белая полоса с логотипом (в теме шапка уезжала за экран, Антон попросил
   логотип, 22.10.2026), лента фото — под ней. Кнопка меню — как на остальных страницах, чёрная,
   но с зоной касания 44×44 (по итогам критики). */
@media only screen and (max-width: 960px) {
	html.k-lens-album { --album-header: 72px; }
	html.k-lens-album header.main { height: var(--album-header); }
	html.k-lens-album #foo.swiper-vertical { top: var(--album-header) !important; }
	html.k-lens-album #foo.swiper-vertical .hg-top { padding-top: 36px; }
	html.k-lens-album .hg-dots { top: calc(50% + var(--album-header) / 2); }
	.nav__button, .nav__button.fly { left: auto; right: 8px; margin: 0 !important; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
	.nav__button { top: 13px; }
	.nav__button.fly { top: 8px; }
	html.k-lens-album .nav__button { top: 18px; }
}
/* при открытом меню точки не рисуются поверх затемнения */
html.nav-open .hg-dots { opacity: 0; visibility: hidden; pointer-events: none; }

/* бургер и крестик меню — скруглённые линии (rect вместо path), белые при открытом меню */
.nav__button--active rect { fill: #fff; }