/* Десктопный макет повторяет экспортированный из Figma холст размером 1440 × 2700. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&family=Rubik:wght@500&family=Rubik+One&family=Yaldevi+Colombo:wght@300&display=swap');

:root {
    --artboard-width: 1440px;
    --canvas: #bfd0d3;
    --ink: #282a2c;
    --paper: #efefef;
    --deep-blue: #687e93;
    --teal: #86a9a8;
    --rust: #914746;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--canvas);
    color: var(--ink);
    font-family: 'Yaldevi Colombo', 'Roboto Condensed', sans-serif;
    font-weight: 300;
}

/* Вся композиция масштабируется целиком, пока не достигнет проектной ширины 1440 px. */
.artboard {
    position: relative;
    width: min(100vw, var(--artboard-width));
    aspect-ratio: 8 / 15;
    margin: 0 auto;
    overflow: visible;
    container-type: inline-size;
    background: var(--canvas);
}

/* Главная сохраняет заданный цвет полотна на широком и телефонном экранах. */
body:has(.artboard:not(.patterns-artboard):not(.top10-artboard)),
.artboard:not(.patterns-artboard):not(.top10-artboard) {
    background: #DBE5E6;
}

body:has(.patterns-artboard),
body:has(.top10-artboard),
.patterns-artboard,
.top10-artboard {
    background: #F5F5F5;
}

/* Текстуры шапки экспортированы из Figma и расположены слоями по координатам макета. */
.site-header {
    position: absolute;
    top: 0;
    left: calc((100% - 100vw) / 2);
    width: 100vw;
    height: 14.6cqw;
    z-index: 2;
    transform: none;
    pointer-events: none;
}
/* При наложении фотоколлаж остаётся выше фонового листа с цветными фигурами. */
.hero-collage { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 10.8cqw; overflow: hidden; }
.hero-collage-picture { display: block; width: 100%; height: 100%; }
.hero-collage-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-title {
    position: absolute;
    --hero-title-size: clamp(1.15rem, 3.2cqw, 3rem);
    top: calc(10.8cqw - var(--hero-title-size) - 0.5cqw);
    left: 50%;
    z-index: 3;
    margin: 0;
    color: #fff;
    font-size: var(--hero-title-size);
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: clamp(0em, calc(3.9vw - 15.6px), 1.32em);
    white-space: nowrap;
    text-transform: uppercase;
    transform: translateX(-50%);
}

/* SVG задаёт неровный нижний край панели меню из макета Figma. */
.main-navigation {
    position: absolute;
    top: 10.8cqw;
    left: 50%;
    z-index: 20;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7.5cqw;
    width: 100%;
    height: 3.8cqw;
    padding: 0 2.7cqw;
    /* Растягиваем SVG на всю панель меню, не сохраняя исходные пропорции файла. */
    background-color: var(--paper);
    background-image: url('/static/svg_for_main/Rectangle_1.svg');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    pointer-events: auto;
    transform: translateX(-50%);
}
.main-navigation a {
    position: relative;
    z-index: 1;
    color: #303030;
    font-size: 1.2856cqw;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.main-navigation a:hover, .main-navigation a:focus-visible { text-decoration: underline; text-underline-offset: 0.4cqw; }

/* Содержимое позиционируется в той же системе координат шириной 1440 px, что и размеченный макет. */
.page-container { position: absolute; inset: 0; pointer-events: none; }
/* Фоновый лист размером 2563 × 2700 сохраняет проектную высоту и центрируется за холстом шириной 1440 px. */
.artwork-background { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.shape-layer { position: absolute; top: 0; left: 50%; width: 177.986111%; transform: translateX(-50%); }
.shape-picture { display: block; width: 100%; }
.shape-composition { display: block; width: 100%; height: auto; }

/* Текстовые карточки вступления повторяют положение трёх светлых областей на размеченном макете. */
/* Слой вырезанных фотографий находится выше навигации: изображение p_1 частично перекрывает её. */
.intro-section { position: absolute; inset: 0; z-index: 21; }
.intro-card {
    position: absolute;
    z-index: 5;
    margin: 0;
    font-size: 0.925cqw;
    line-height: 1.18;
    text-align: center;
    color: #424242;
}
.intro-card p { margin: 0; }
.intro-card-definition .intro-lead-word { font-size: 1.25em; }
.intro-card-history { top: 14.6%; left: 15.2%; width: 20.4%; }
.intro-card-definition { top: 14.3%; left: 42.5%; width: 17.1%; }
.intro-card-definition strong { font-weight: 300; }
.intro-card-art { top: 23.9%; left: 30.0%; width: 25.6%; }
.photo-layer { position: absolute; inset: 0; z-index: 22; pointer-events: none; transform: translate(3cqw, -3cqw); }
/* Прозрачные вырезанные изображения сохраняют исходные пропорции. */
.pulpulak-photo { position: absolute; z-index: 3; display: block; height: auto; object-fit: contain; }
.pulpulak-photo img { display: block; width: 100%; height: auto; }
.phone-photo { display: none; }
.photo-p1 { top: 11.074%; left: 79.444%; z-index: 3; width: 21.389cqw; }
.photo-p3 { top: 14.222%; left: 61.944%; z-index: 1; width: 16.667cqw; }
.photo-p4 { top: 23.148%; left: 77.222%; z-index: 2; width: 11.806cqw; }
.photo-p2 { top: 16.741%; left: 75.278%; z-index: 0; width: 16.944cqw; }

/* Карта и легенда стоят по координатам макета Figma; интерактивна только сама карта. */
.map-section { position: absolute; inset: 0; z-index: 3; pointer-events: none; --map-width: min(max(68.75cqw, 60vw), 1150px); }
.map-caption {
    position: absolute;
    top: 31.0%;
    left: 13.4%;
    width: 32%;
    font-size: 0.8456cqw;
    line-height: 1.25;
    scroll-margin-top: 4vh;
}
.map-caption p { margin: 0; }
.map-caption-mobile-break { display: inline; }
.map-frame {
    position: absolute;
    top: 33.9%;
    left: 50%;
    width: var(--map-width);
    aspect-ratio: 990 / 635;
    isolation: isolate;
    overflow: visible;
    background: #e9eae6;
    pointer-events: auto;
    transform: translateX(-50%);
}
#map-container { width: 100%; height: 100%; overflow: hidden; }
.distance-scale {
    padding: 6px 9px;
    color: #222;
    background: #fff;
    font: 300 calc(12px + 2pt)/1.1 'Yaldevi Colombo', 'Roboto Condensed', sans-serif;
}
.map-legend {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    display: block;
    width: 40%;
    height: auto;
    pointer-events: none;
    transform: translate(50%, -50%);
}
.map-popup-photo {
    display: block;
    width: min(330px, 70vw);
    height: min(248px, 40vh);
    object-fit: contain;
    /* У изображения овальный вид; clip-path ограничивает и область клика этой формой. */
    clip-path: ellipse(50% 50% at 50% 50%);
    cursor: zoom-in;
}
.map-photo-viewer {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px;
    background: rgb(225 225 225 / 96%);
}
.map-photo-viewer[hidden] { display: none; }
.map-photo-viewer img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.map-photo-viewer-back {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    width: clamp(76px, 9vw, 120px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}
.map-photo-viewer-back img { display: block; width: 100%; height: auto; }
.map-photo-viewer-back:hover { opacity: 0.82; }
.map-photo-viewer-back:focus-visible { outline: 1px solid #282a2c; outline-offset: 2px; }

/* Нижний текст расположен по трём колонкам и форме блока контактов из макета. */
.about-section { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.about-section h2 {
    position: absolute;
    top: 62.5%;
    scroll-margin-top: 3vh;
    left: 31.5%;
    width: 38%;
    margin: 0;
    font-family: 'Rubik One', sans-serif;
    font-size: 3.33cqw;
    font-weight: 400;
    letter-spacing: 0.46em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.about-copy {
    position: absolute;
    color: #f4f4f1;
    font-size: 0.9056cqw;
    line-height: 1.3;
    text-align: center;
}
.about-copy p { margin: 0 0 2.15cqw; }
.about-copy-left { top: 71.7%; left: 10.2%; width: 33.2%; }
.about-copy-left p:first-child { width: 90%; margin-left: 14%; }
.about-copy-left p:nth-child(2) { width: 65%; margin-left: -12%; }
.about-copy-left p.about-license { width: 78%; margin-left: -7%; margin-top: 3.1cqw; }
.about-copy-right { top: 65.9%; left: 68.5%; width: 21.5%; }
.contact-copy {
    position: absolute;
    top: 79.5%;
    left: 40.5%;
    width: 20.5%;
    color: #f5eeee;
    font-size: 0.9056cqw;
    line-height: 1.25;
    text-align: center;
}
.contact-copy p { margin: 0 0 2.6cqw; }
.contact-copy > p:first-child { margin-bottom: 0.6cqw; }
.contact-links { display: grid; justify-items: center; gap: 0.35cqw; color: inherit; font-size: 0.8356cqw; text-align: center; pointer-events: auto; }
.contact-links a { color: inherit; cursor: pointer; pointer-events: auto; text-decoration: none; }
.contact-links a:hover, .contact-links a:focus-visible { text-decoration: underline; }
.copy-email-button { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; pointer-events: auto; }
.copy-email-button:hover, .copy-email-button:focus-visible { text-decoration: underline; }

/* Подпись об авторских правах и значки соцсетей располагаются в нижней полосе холста.
   Положение отдельных элементов задаётся ниже; на телефоне оно переопределяется. */
.site-footer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.site-footer p {
    position: absolute;
    bottom: 0.7%;
    left: 10.8%;
    margin: 0;
    color: #282a2c;
    font-family: Arial, sans-serif;
    font-size: 1.0856cqw;
    line-height: 1.3;
    white-space: nowrap;
}
.footer-socials {
    position: absolute;
    bottom: 2.5%;
    left: 10.8%;
    width: 10.42cqw;
    height: 2.36cqw;
    pointer-events: auto;
}
.footer-socials img { display: block; width: 100%; height: 100%; }
.footer-social-link { position: absolute; top: 0; height: 100%; }
.footer-instagram { left: 0; width: 21.34%; }
.footer-google-form { left: 28%; width: 17.34%; }
.footer-threads { left: 53.34%; width: 17.34%; }
.footer-telegram { left: 76.67%; width: 19.34%; }
.footer-social-link:focus-visible { outline: 2px solid #032f4b; outline-offset: 2px; }
.license-note { position: absolute; top: 89.0%; left: 65.5%; color: #f0f0ef; font-size: 1.6712cqw; pointer-events: auto; text-decoration: none; }
.license-note:hover, .license-note:focus-visible { text-decoration: underline; }
.support-block {
    position: absolute;
    top: 90.8%;
    left: 45.5%;
    width: 29%;
    color: #f0f0ef;
    font-size: 0.9cqw;
    line-height: 1.25;
    text-align: center;
    pointer-events: auto;
}
.support-block p { position: static; margin: 0; color: inherit; font: inherit; white-space: normal; }
.site-footer .support-copy { margin: 0 0 1.1cqw; }
.support-copy-mobile { display: none; }
.support-toggle, .copy-support-value {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.support-toggle { margin-bottom: 0.35cqw; }
.support-toggle:hover, .support-toggle:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.support-details[hidden] { display: none; }
.support-details p { margin: 0; }
.copy-support-value { text-decoration: underline; text-underline-offset: 0.15em; }
.copy-support-value:hover, .copy-support-value:focus-visible { color: #fff; }
.support-copy-status { display: block; min-height: 1.25em; }
.license-dialog[hidden] { display: none; }
.license-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    background: rgb(0 0 0 / 72%);
}
.license-dialog img { display: block; max-width: min(90vw, 719px); max-height: 90vh; width: auto; height: auto; }
.license-dialog-close {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #282a2c;
    font: 32px/1 Arial, sans-serif;
    cursor: pointer;
}
.page-arrows { position: absolute; inset: 0; z-index: 23; pointer-events: none; }
.page-arrows a { display: block; pointer-events: auto; }
.back-to-top { position: absolute; top: 89.4%; left: 10.8%; width: 0.9cqw; height: 6.2cqw; }
.back-to-top img { display: block; width: 100%; height: 100%; }

/* Страница узоров сохраняет исходный холст Figma размером 1440 × 2955. */
.patterns-artboard { aspect-ratio: 1440 / 2955; }
.patterns-artboard .patterns-page { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.patterns-artboard .patterns-background { position: absolute; inset: 0; z-index: 0; }
.patterns-artboard .patterns-background picture { display: block; width: 100%; }
.patterns-artboard .patterns-background img { display: block; width: 100%; height: auto; }
.patterns-artboard .patterns-content { position: absolute; inset: 0; z-index: 1; transform: translateY(-4%); }
.patterns-artboard .patterns-images { position: absolute; inset: 0; z-index: 1; }
.patterns-artboard .pattern-image { position: absolute; display: block; max-width: none; object-fit: fill; }
.patterns-artboard .patterns-group-underlay,
.patterns-artboard .pattern-heading { display: none; }
.patterns-artboard .pattern-copy {
    position: absolute;
    z-index: 2;
    color: #f4f2ee;
    font-size: 0.925cqw;
    font-weight: 300;
    line-height: 1.18;
    text-align: center;
    text-wrap: pretty;
}
.patterns-artboard .pattern-copy a { color: inherit; text-decoration: underline; pointer-events: auto; }
.patterns-artboard .pattern-copy a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.patterns-artboard .pattern-copy-water { top: 18.15%; left: 38.75%; width: 22.5%; color: #555; }
.patterns-artboard .pattern-copy-taps { top: 27.15%; left: 29.5%; width: 24.0%; color: #555; }
.patterns-artboard .pattern-copy-sun { top: 40.9%; left: 44.0%; width: 31.0%; }
.patterns-artboard .pattern-copy-flowers { top: 52.4%; left: 18.6%; width: 28.0%; color: #555; }
.patterns-artboard .pattern-copy-pomegranate { top: 71.4%; left: 20.6%; width: 20.0%; }
.patterns-artboard .pattern-copy-pomegranate-ornaments { top: 74.0%; left: 62.45%; width: 15.5%; }
.patterns-artboard .pattern-copy-grapes { top: 87.8%; left: 43.75%; width: 26.5%; }
.patterns-artboard .visually-hidden, .top10-artboard .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.patterns-back { display: none !important; position: absolute; top: 16.5%; left: 5.6%; color: #161616; font: 300 2.2cqw/1 sans-serif; text-decoration: none; }
.patterns-down { position: absolute; top: 22.0%; left: 10.5%; width: 0.9cqw; height: 6.2cqw; }
.patterns-up { position: absolute; top: 90.0%; left: 10.5%; width: 0.9cqw; height: 6.2cqw; }
.patterns-down img, .patterns-up img { display: block; width: 100%; height: 100%; }
.patterns-artboard .patterns-back { top: 26.2cqw; }
.patterns-artboard .license-note { display: none; }
.patterns-artboard .support-block { display: none; }
.patterns-artboard .back-to-top { display: none; }

/* Высота страницы «Топ-10» определяется списком районов; ниже оставлено место для подвала. */
.top10-artboard {
    aspect-ratio: auto;
    background: #F5F5F5;
}
body:has(.top10-artboard) { background: #F5F5F5; }
.top10-artboard .page-container { position: relative; inset: auto; width: 100%; }
.top10-artboard .top10-page { position: relative; z-index: 1; padding: 72.6cqw 0 5.8cqw; pointer-events: none; }
.top10-artboard .top10-background { position: absolute; inset: 0; z-index: 0; }
.top10-artboard .top10-background picture { display: block; width: 100%; }
.top10-artboard .top10-background img {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 93.1944%;
    height: auto;
    transform: translateX(-50%);
}
.top10-artboard .top10-district-map {
    position: absolute;
    z-index: 1;
    top: 22.511cqw;
    left: 14.5%;
    display: block;
    width: 58%;
    height: auto;
}
.top10-artboard .top10-main-map svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.top10-artboard .top10-main-map a { cursor: pointer; pointer-events: auto; }
.top10-artboard .top10-main-map a path {
    pointer-events: visiblePainted;
    transition: fill 160ms ease;
}
.top10-artboard .top10-main-map a:hover path,
.top10-artboard .top10-main-map a:focus-visible path {
    fill: #a9bdce !important;
}
.top10-artboard .top10-main-map a:focus-visible { outline: none; }
.top10-artboard .top10-intro-copy {
    position: absolute;
    z-index: 2;
    margin: 0;
    color: #626262;
    font-size: 1cqw;
    font-weight: 300;
    line-height: 1.24;
    text-align: center;
}
.top10-artboard .top10-intro-main {
    top: 24.764cqw;
    left: 71%;
    width: 20.7%;
}
.top10-artboard .top10-intro-hint {
    top: 57.404cqw;
    left: 16.5%;
    width: 10.5%;
    color: #fff;
    font-size: 0.72cqw;
    line-height: 1.3;
}
.top10-artboard .top10-districts {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    display: grid;
    grid-template-rows: 1.05fr repeat(4, 1fr);
    width: 100%;
    height: 262.6cqw;
}
.top10-artboard .top10-district {
    position: relative;
    min-height: 0;
}
.top10-artboard .top10-district-spot {
    position: absolute;
    top: 50%;
    left: 4.45%;
    display: block;
    width: 29.1%;
    height: auto;
    transform: translateY(-50%);
}
.top10-artboard .top10-district-map-link {
    position: absolute;
    top: 50%;
    left: 8.55%;
    display: block;
    width: 22%;
    height: auto;
    pointer-events: auto;
    transform: translateY(-50%);
}
.top10-artboard .top10-district-map-picture { display: block; width: 100%; }
.top10-artboard .top10-district-map-small { display: block; width: 100%; height: auto; }
.top10-artboard .top10-district-location-link {
    position: absolute;
    top: 52%;
    left: 20.5%;
    z-index: 2;
    display: block;
    width: 16.2%;
    height: auto;
    pointer-events: auto;
}
.top10-artboard .top10-district-location-button { display: block; width: 100%; height: auto; pointer-events: none; }
.top10-artboard .top10-district-map-link:focus-visible {
    outline: 2px solid var(--rust);
    outline-offset: 4px;
}
.top10-artboard .top10-district-title {
    position: absolute;
    top: 0;
    left: 50%;
    width: max-content;
    max-width: 80%;
    margin: 0;
    color: #4E4E4E;
    font-family: 'Rubik One', sans-serif;
    font-size: 2.04cqw;
    font-weight: 400;
    letter-spacing: 0.42em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
}
.top10-artboard .top10-carousel {
    position: absolute;
    top: 10%;
    left: 39.5%;
    width: 54%;
    aspect-ratio: 4 / 3;
}
.top10-artboard .top10-district-kentron .top10-district-spot,
.top10-artboard .top10-district-kentron .top10-district-map-link {
    transform: translateY(calc(-50% + 2.25cqw));
}
.top10-artboard .top10-district-kentron .top10-district-location-link { transform: translateY(2.25cqw); }
.top10-artboard .top10-district-kentron .top10-district-title { top: 2cqw; }
.top10-artboard .top10-district-kentron .top10-carousel { top: 15%; }
.top10-artboard .top10-carousel-frame {
    border: 0;
    border-radius: 4.625% / 6.167%;
}
.top10-artboard .top10-carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top10-artboard .top10-carousel-border {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.top10-artboard .top10-carousel-frame {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    border: 0;
    border-radius: 4.625% / 6.167%;
}
.top10-artboard .top10-carousel-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top10-artboard .top10-carousel-empty {
    color: #626262;
    font-size: 1cqw;
}
.top10-artboard .top10-carousel-button {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 3.2cqw;
    height: 4cqw;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: 300 2.2cqw/1 sans-serif;
    pointer-events: auto;
    transform: translateY(-50%);
}
.top10-artboard .top10-carousel-button:focus-visible {
    outline: 2px solid var(--rust);
    outline-offset: 2px;
}
.top10-artboard .top10-carousel-button:disabled {
    cursor: default;
    opacity: 0.35;
}
.top10-artboard .top10-carousel-previous { left: -7.07%; }
.top10-artboard .top10-carousel-next { left: 101.55%; }
.top10-artboard .site-footer p { top: 339.2cqw; bottom: auto; left: 10.8%; }
.top10-artboard .footer-socials { top: 335.8cqw; bottom: auto; left: 10.8%; }
.top10-artboard .license-note { display: none; }
.top10-artboard .support-block { display: none; }
.top10-artboard .page-arrows .back-to-top { display: none !important; }
.top10-artboard .patterns-back { top: 26.2cqw; }

/* Для плотных групп точек сохраняем полупрозрачный значок из нескольких кругов. */
.custom-cluster-icon { background: transparent !important; border: 0 !important; }
.cluster-inner { position: relative; width: 100%; height: 100%; }
.cluster-circles { position: absolute; inset: 0; pointer-events: none; }
.cluster-circle-layer { position: absolute; border-radius: 50%; background: rgb(26 77 102 / 35%); mix-blend-mode: multiply; }
.cluster-count { position: absolute; top: 50%; left: 50%; z-index: 1; color: #fff; font-size: calc(15px + 2pt); font-weight: 300; line-height: 1; transform: translate(-50%, -50%); }
.leaflet-container, .leaflet-control { font-family: 'Yaldevi Colombo', 'Roboto Condensed', sans-serif; font-weight: 300; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: transparent !important; box-shadow: none !important; }
.leaflet-popup-content { margin: 0 !important; }
.leaflet-container a.leaflet-popup-close-button {
    top: 0;
    right: 0;
    left: auto;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #282a2c;
    font: 700 27px/36px Arial, sans-serif;
    -webkit-text-stroke: 0.35px currentColor;
    text-align: center;
}

/* В узком окне макет сразу использует ширину окна, без фиксированного холста и трансформации. */
@media (max-width: 900px) {
    .artboard { width: 100vw; max-width: none; transform: none; }
    body { height: 187.5vw; }
    .site-header { left: 0; width: 100vw; height: 14.6cqw; transform: none; }
    .hero-collage, .main-navigation { width: 100vw; }
    .patterns-artboard { aspect-ratio: 1440 / 2955; }
    body:has(.patterns-artboard) { height: 205.2083vw; }
    body:has(.top10-artboard) { height: 341.1111vw; }
}

@media (min-width: 1440px) {
    .site-header { height: 14.6vw; }
    .hero-collage { height: 10.8vw; }
    .main-navigation {
        top: 10.8vw;
        width: 100vw;
        height: 3.8vw;
        gap: 7.5vw;
        padding-right: 2.7vw;
        padding-left: 2.7vw;
    }
    .main-navigation a { font-size: 1.2856vw; }
    .hero-title { top: calc(10.8vw - var(--hero-title-size) - 0.5cqw); }
}

@media (max-width: 1439px) {
    .hero-title { top: calc(10.8cqw - var(--hero-title-size) - 0.5cqw); }
}

/* На небольших экранах шапка сохраняет визуальный вес, а пункты меню остаются собранными по центру. */
@media (max-width: 1200px) {
    .site-header { height: 18.1cqw; }
    .hero-collage { height: 13.2cqw; }
    .hero-title { top: calc(13.2cqw - var(--hero-title-size) - 0.6cqw); }
    .main-navigation {
        top: 13.2cqw;
        height: 4.9cqw;
        gap: clamp(1.4rem, 6cqw, 4.5rem);
    }
    .main-navigation a { font-size: clamp(1rem, 1.7cqw, 1.3rem); }
}

/* МОБИЛЬНАЯ ВЕРСИЯ ВСЕХ СТРАНИЦ
   Этот блок действует только при ширине окна до 600 CSS-пикселей. Он расположен
   после основных стилей ПК, поэтому меняет раскладку только на узком экране.
   Макеты нарисованы в Figma шириной 390 px, но не фиксируются на этой ширине:
   единица cqw ниже означает 1% ширины .artboard. Например, 10cqw — это 39 px
   при ширине 390 px и автоматически меньше или больше на другом телефоне.
   Высота содержимого на телефоне рассчитывается по пропорциям каждой страницы. */
@media (max-width: 600px) {
    /* На телефоне холст занимает ширину окна и растёт вниз вместе со страницей.
       Убираем масштабирование и обрезку, которые используются в макете ПК. */
    body { height: auto; min-height: 100vh; overflow-x: hidden; }
    .artboard {
        width: 100vw;
        max-width: none;
        aspect-ratio: auto;
        margin: 0;
        transform: none;
        overflow: clip;
    }

    /* Общая шапка и меню на всех телефонах поверх страницы занимают ширину окна.
       Для них в HTML подключаются отдельные мобильные изображения и позиции. */
    .site-header {
        top: 0;
        left: 0;
        width: 100%;
        height: 34.6154cqw;
        transform: none;
        pointer-events: none;
    }
    .hero-collage {
        top: 0;
        left: 0;
        width: 100%;
        height: 34.6154cqw;
        overflow: visible;
    }
    .hero-collage-picture { display: block; width: 100%; height: 100%; }
    .hero-collage-image { width: 100%; height: 100%; object-fit: fill; }
    .hero-title {
        top: 17.4cqw;
        left: 50%;
        max-width: 96%;
        font-size: 3.25cqw;
        letter-spacing: 0.78cqw;
        color: transparent;
        transform: translateX(-50%);
    }
    .main-navigation {
        top: 21.8cqw;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        justify-content: stretch;
        gap: 0;
        width: 100%;
        height: 9.5cqw;
        padding: 0;
        background: none;
        transform: none;
    }
    .main-navigation a {
        display: flex;
        min-height: 9.5cqw;
        align-items: center;
        justify-content: center;
        font-size: 3cqw;
        color: transparent;
        letter-spacing: 0;
    }

    /* ГЛАВНАЯ СТРАНИЦА — только телефон.
       Фон и два кадрированных фото берутся из svg_for_main/for_phone.
       Текст, фотографии и карта расставлены относительно ширины холста через cqw. */
    .artboard:not(.patterns-artboard):not(.top10-artboard) { aspect-ratio: 390 / 2406; }
    .artwork-background { inset: 0; }
    .shape-layer {
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
    }
    .shape-picture { display: block; width: 100%; }
    .shape-composition { width: 100%; height: auto; }
    .page-container { inset: 0; }
    .intro-section { inset: 0; }
    .intro-card {
        font-size: 3.08cqw;
        line-height: 1.2;
        text-align: center;
    }
    .intro-card-definition { top: 37cqw; left: 5%; width: 52%; }
    .intro-card-definition .intro-lead-word { font-size: 1.18em; }
    .intro-card-history { top: 92cqw; left: 8%; width: 84%; }
    .intro-card-art { top: 148cqw; left: 50%; width: 44%; transform: translateX(-2%); }
    .photo-layer { inset: 0; transform: none; }
    .pulpulak-photo { display: none; }
    .phone-photo { position: absolute; display: block; height: auto; object-fit: contain; }
    .phone-photo-1 { top: 34cqw; left: 61%; width: 35%; }
    .phone-photo-2 { top: 151cqw; left: 5%; width: 41%; }

    .map-section { top: 206cqw; left: 0; width: 100%; height: 170cqw; }
    .map-caption {
        top: 0;
        left: 3%;
        width: 68%;
        font-size: 2.75cqw;
        line-height: 1.25;
    }
    .map-caption-mobile-break { display: block; }
    .map-frame {
        top: 14cqw;
        left: 0;
        width: 100%;
        height: 150cqw;
        aspect-ratio: auto;
        transform: none;
    }
    .map-legend { top: -22.6cqw; right: 4%; width: 45%; transform: translateX(15%); }
    .map-photo-viewer { position: absolute; }
    .map-photo-viewer-back { left: 10px; width: 22vw; }

    /* Блок «О проекте» главной страницы превращаем в вертикальную колонку.
       display:contents убирает внешние article-контейнеры из визуального потока,
       чтобы отдельные абзацы можно было выстроить одним порядком и с общим gap.
       Порядок ниже: описание проекта, продолжение, текст о неработающих объектах,
       картографическая лицензия, контакты, кнопка лицензии, реквизиты поддержки. */
    .about-section h2 {
        top: 380cqw;
        left: 5%;
        width: 90%;
        font-size: 5.1cqw;
        letter-spacing: 0.38em;
        white-space: normal;
    }
    .about-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3cqw;
        padding: 390cqw 7% 0;
    }
    .about-copy {
        position: static;
        left: auto;
        width: 100%;
        font-size: 2.72cqw;
        line-height: 1.24;
        text-align: center;
    }
    .about-copy-left,
    .about-copy-right { display: contents; }
    .about-section p { width: 100%; margin: 0; }
    .about-section .about-copy-left p:first-child,
    .about-section .about-copy-left p:nth-child(2),
    .about-section .about-copy-left p.about-license,
    .about-section .about-copy-right p { width: 100%; margin: 0; }
    .about-copy-left p:first-child { order: 1; }
    .about-copy-left p:nth-child(2) { order: 2; }
    .about-copy-right p { order: 3; }
    .about-copy-left p.about-license { order: 4; }
    .contact-copy {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        order: 5;
        display: flex;
        flex-direction: column;
        gap: 3cqw;
        margin: 0;
        font-size: 2.65cqw;
        line-height: 1.25;
    }
    .about-section .contact-copy p { margin: 0; }
    .contact-links { gap: 3cqw; margin: 0; font-size: 2.8cqw; }
    .contact-link-label,
    .contact-email .copy-email-button { text-decoration: underline; text-underline-offset: 0.12em; }
    .contact-copy > p:first-child { margin-bottom: 0; }
    .contact-email { overflow-wrap: anywhere; }
    /* Общий футер главной: подпись и иконки привязаны к нижней части холста. */
    .site-footer p {
        bottom: 0.4%;
        left: 5%;
        font-size: 2.2cqw;
    }
    .footer-socials {
        bottom: 1.2%;
        left: 5%;
        width: 36cqw;
        height: 8.2cqw;
    }
    /* На мобильной главной показываем лицензию и поддержку в общем потоке текста.
       Старые абсолютно позиционированные варианты скрываются только для телефона. */
    .support-block, .license-note, .back-to-top { display: none; }
    .artboard:not(.patterns-artboard):not(.top10-artboard) .back-to-top { display: none; }
    .artboard:not(.patterns-artboard):not(.top10-artboard) .license-note {
        display: block;
        position: static;
        order: 6;
        width: 100%;
        margin: 0;
        font-size: 2.8cqw;
        text-align: center;
    }
    .artboard:not(.patterns-artboard):not(.top10-artboard) .support-block {
        display: block;
        position: static;
        order: 7;
        width: 100%;
        margin: 0;
        transform: translateX(12cqw);
        font-size: 2.65cqw;
        line-height: 1.25;
        text-align: center;
    }
    .support-copy-desktop { display: none; }
    .support-copy-mobile { display: inline; }

    /* СТРАНИЦА «УЗОРЫ» — только телефон.
       Используется отдельная длинная подложка Figma; группы орнаментов размещаются
       четырьмя колонками. Скрываем лишние изображения, которые не входят в сетку
       телефонного макета; текст и заголовки сохраняют заданное выравнивание. */
    .patterns-artboard { aspect-ratio: 390 / 3104; }
    body:has(.patterns-artboard), body:has(.top10-artboard) { height: auto; }
    .patterns-artboard .patterns-page,
    .patterns-artboard .patterns-content,
    .patterns-artboard .patterns-images { position: absolute; inset: 0; transform: none; }
    .patterns-artboard .patterns-background { inset: 0; }
    .patterns-artboard .patterns-background picture,
    .patterns-artboard .patterns-background img { display: block; width: 100%; height: 100%; }
    .patterns-artboard .patterns-background img { object-fit: fill; }
    .patterns-artboard .patterns-group {
        position: absolute;
        left: 6.28%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: 0;
        width: 87.44%;
        height: auto;
        aspect-ratio: 1;
        padding: 0;
    }
    .patterns-artboard .patterns-group-underlay { display: none; }
    .patterns-artboard .patterns-group-taps { top: 12.3%; }
    .patterns-artboard .patterns-group-sun { top: 31.7%; }
    .patterns-artboard .patterns-group-flowers { top: 49.2%; }
    .patterns-artboard .patterns-group-pomegranate { top: 69.1%; }
    .patterns-artboard .patterns-group-grapes {
        top: 88.6%;
        height: auto;
        aspect-ratio: 341 / 164;
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }
    .patterns-artboard .patterns-group-underlay {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    .patterns-artboard .pattern-image {
        position: relative;
        top: auto !important;
        left: auto !important;
        display: none;
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        object-fit: contain;
        transform: rotate(var(--pattern-rotation, 0deg)) scaleX(var(--pattern-flip, 1)) !important;
    }
    .patterns-artboard .patterns-group-taps .pattern-image:nth-child(n + 17),
    .patterns-artboard .patterns-group-flowers .pattern-image:nth-child(n + 17),
    .patterns-artboard .patterns-group-pomegranate .pattern-image:nth-child(n + 17),
    .patterns-artboard .patterns-group-grapes .pattern-image:nth-child(n + 9) { display: none; }
    .patterns-artboard .pattern-copy {
        left: 6%;
        width: 88%;
        color: #000;
        font-size: 3.08cqw;
        line-height: 1.22;
        text-align: center;
    }
    .patterns-artboard .pattern-copy-water { top: 5.8%; width: 84%; left: 5%; text-align: left; }
    .patterns-artboard .pattern-copy-taps { top: 8.5%; left: 18%; width: 76%; text-align: right; }
    .patterns-artboard .pattern-copy-sun { top: 25.6%; left: 8%; width: 84%; text-align: right; }
    /* Слово «аревахач» в первом абзаце остаётся ссылкой на Википедию и подчёркнуто на телефоне. */
    .patterns-artboard .pattern-copy-sun a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; }
    .patterns-artboard .pattern-copy-flowers { top: 44.1%; left: 7%; width: 86%; text-align: left; }
    .patterns-artboard .pattern-copy-pomegranate { top: 62.4%; left: 7%; width: 86%; text-align: left; }
    .patterns-artboard .pattern-copy-pomegranate-ornaments { top: 66%; left: 12%; width: 82%; text-align: right; }
    .patterns-artboard .pattern-copy-grapes { top: 84.1%; left: 7%; width: 86%; text-align: left; }
    .patterns-artboard .pattern-heading {
        position: absolute;
        z-index: 3;
        display: block;
        margin: 0;
        color: #4E4E4E;
        font-family: 'Rubik One', sans-serif;
        font-size: 4.7cqw;
        font-weight: 400;
        line-height: 1.08;
        letter-spacing: 0.62cqw;
    }
    .patterns-artboard .pattern-heading-water { top: 4.7%; left: 6%; width: 88%; text-align: left; }
    .patterns-artboard .pattern-heading-sun { top: 24.6%; left: 8%; width: 84%; text-align: right; }
    .patterns-artboard .pattern-heading-flowers { top: 43%; left: 7%; width: 86%; text-align: left; }
    .patterns-artboard .pattern-heading-pomegranate { top: 61.3%; left: 7%; width: 86%; text-align: left; }
    .patterns-artboard .pattern-heading-grapes { top: 83%; left: 7%; width: 86%; text-align: left; }
    .patterns-artboard .patterns-back { top: 28cqw; left: 2%; font-size: 8cqw; }
    .patterns-artboard .patterns-down,
    .patterns-artboard .patterns-up { display: none; }
    .patterns-artboard .footer-socials { top: 96%; bottom: auto; left: 9%; width: 36cqw; height: 8.2cqw; }
    .patterns-artboard .site-footer p { top: 98.5%; bottom: auto; left: 9%; font-size: 2.1cqw; }

    /* СТРАНИЦА «ТОП-10» — только телефон.
       Районы становятся вертикальными карточками с картой района и каруселью.
       Карта выбора района увеличена и выходит за край холста по макету Figma;
       ссылки внутри SVG остаются нажимаемыми. Подложки и мини-карты для телефона
       выбираются HTML-элементами picture/source в шаблонах. */
    .top10-artboard { aspect-ratio: 390 / 2221; background: #F5F5F5; }
    body:has(.top10-artboard) { background: #F5F5F5; }
    .top10-artboard .page-container { position: absolute; inset: 0; width: 100%; }
    .top10-artboard .top10-page { position: absolute; inset: 0; padding: 0; }
    .top10-artboard .top10-background { inset: 0 auto auto 0; width: 100%; height: 151.54cqw; }
    .top10-artboard .top10-background picture,
    .top10-artboard .top10-background img { position: static; display: block; width: 100%; height: auto; transform: none; }
    .top10-artboard .top10-main-map {
        top: 68cqw;
        left: -3%;
        width: 124%;
        height: auto;
    }
    .top10-artboard .top10-intro-copy { left: 6%; width: 88%; font-size: 2.65cqw; line-height: 1.22; }
    .top10-artboard .top10-intro-main { top: 36cqw; color: #fff; font-size: 3.08cqw; }
    .top10-artboard .top10-intro-hint { top: 64cqw; left: 8%; width: 35%; font-size: 2.2cqw; text-align: left; }
    /* Пять районных карточек идут одна за другой; высота строки 75cqw задаёт
       одинаковый шаг для заголовка, мини-карты и карусели каждого района. */
    .top10-artboard .top10-districts {
        position: absolute;
        top: 155.54cqw;
        left: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 75cqw);
        width: 100%;
        height: 375cqw;
    }
    .top10-artboard .top10-district { position: relative; min-height: 0; }
    .top10-artboard .top10-district-title {
        top: 1cqw;
        left: 50%;
        width: 75%;
        max-width: 75%;
        color: #4E4E4E;
        font-family: 'Rubik One', sans-serif;
        font-weight: 400;
        font-size: 4cqw;
        letter-spacing: 0.25em;
        line-height: 1.1;
        text-align: center;
    }
    .top10-artboard .top10-carousel { top: 12cqw; left: 14%; width: 72%; aspect-ratio: 4 / 3; }
    .top10-artboard .top10-carousel-button {
        width: 11cqw;
        height: 13cqw;
        font-size: 8cqw;
        touch-action: manipulation;
    }
    .top10-artboard .top10-carousel-previous { left: -15%; }
    .top10-artboard .top10-carousel-next { left: 104%; }
    .top10-artboard .top10-carousel-empty { font-size: 2.8cqw; }
    .top10-artboard .top10-district-spot { top: 15cqw; left: 80%; width: 16%; transform: none; }
    /* Красная мини-карта района — основная кнопка на телефоне. JavaScript меняет
       её адрес под выбранное фото в карусели, чтобы открыть этот объект на карте. */
    .top10-artboard .top10-district-map-link { top: 12cqw; left: 79%; z-index: 3; width: 18%; cursor: pointer; touch-action: manipulation; transform: none; }
    .top10-artboard .top10-district-map-picture { display: block; }
    .top10-artboard .top10-district-location-link { top: 34cqw; left: 2%; width: 15%; }
    /* Кнопка button.svg оставлена для ПК-макета, а на телефоне скрыта: переход
       выполняет кликабельная мини-карта района рядом с каруселью. */
    .top10-artboard .top10-district-location-link { display: none; }
    .top10-artboard .top10-district-kentron .top10-district-spot,
    .top10-artboard .top10-district-kentron .top10-district-map-link { transform: none; }
    .top10-artboard .top10-district-kentron .top10-district-location-link { transform: none; }
    .top10-artboard .top10-district-kentron .top10-district-title { top: 1cqw; }
    .top10-artboard .top10-district-kentron .top10-carousel { top: 12cqw; }
    /* Подпись и значки соцсетей закреплены у нижнего края общего холста «Топ-10». */
    .top10-artboard .site-footer p { top: auto; bottom: 2cqw; left: 8%; font-size: 2.2cqw; }
    .top10-artboard .footer-socials { top: auto; bottom: 14cqw; left: 8%; width: 36cqw; height: 8.2cqw; }
    .top10-artboard .patterns-back,
    .top10-artboard .back-to-top,
    .top10-artboard .support-block,
    .top10-artboard .license-note { display: none; }
    .top10-artboard .back-to-top { display: none !important; }
}

@media (min-width: 601px) {
    /* Планшет и ПК: для «Узоров» и «Топ-10» сохраняем общий светло-серый фон.
       Мобильные фоны задаются отдельно внутри блока max-width: 600px. */
    body:has(.patterns-artboard),
    body:has(.top10-artboard),
    .patterns-artboard,
    .top10-artboard {
        background-color: #F5F5F5;
    }
}