/* ==========================================================================
   Музей Кошки — style.css
   Реконструкция макета catmuseum.ru (Wix): фиксированная ширина 980 px,
   шапка 567 px с абсолютным позиционированием элементов (координаты сняты
   с живого сайта 2026-09-01), полупрозрачная подложка контента.
   ========================================================================== */

/* Запасной источник шрифтов (если локальные файлы недоступны) */
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Open+Sans+Condensed:wght@300;700&display=swap');

/* --- Локальные шрифты Wix-оригинала (латиница и кириллица — отдельные файлы) --- */
@font-face { font-family: 'Lobster'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/gs9xqh.woff2') format('woff2');
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Lobster'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/xqh1i.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face { font-family: 'Open Sans Condensed'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/470nln.woff2') format('woff2');
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/ko28b3.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/gmde1.woff2') format('woff2');
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/nrzxor.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face { font-family: 'DIN Next Light'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/ewkw1q.woff2') format('woff2'); }
@font-face { font-family: 'Adobe Caslon SmBd'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/bxb0bb.woff2') format('woff2'); }

:root {
  --f-osc: 'Open Sans Condensed', 'Open Sans', 'Arial Narrow', Arial, sans-serif;
  --f-lob: 'Lobster', cursive;
  --f-din: 'DIN Next Light', 'Open Sans Condensed', Arial, sans-serif;
  --f-cas: 'Adobe Caslon SmBd', Georgia, 'Times New Roman', serif;
  --c-text: #171717;
  --c-brown: #5e3c17;
  --c-grey: #707070;
  --c-grey-light: #a0a09f;
  --c-menu: #cccccc;
  --c-page: #f9f0bb;
  --c-green: #1c8a43;
}

/* --- Базовое --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--f-osc);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.35;
  color: var(--c-text);
  /* Иллюстрация с котами поверх жёлтого фона, как на Wix-оригинале */
  background: var(--c-page) url('../images/bg-cats.jpg') center top / cover no-repeat fixed;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }
ul { list-style: none; }
.lob { font-family: var(--f-lob); font-weight: 400; }
.din { font-family: var(--f-din); font-weight: 300; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Каркас: колонка 980 px по центру --- */
.site { width: 980px; max-width: 100%; margin: 0 auto; }

/* ==========================================================================
   Шапка (980 × 567): все элементы позиционированы абсолютно по оригиналу
   ========================================================================== */
.hero-wrap { position: relative; height: 567px; }
.hero-scale { width: 980px; transform-origin: 0 0; }
.hero {
  position: relative;
  width: 980px;
  height: 567px;
  background: #fff;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.hero > * { position: absolute; }

/* Диагональные линии на белом поле шапки */
.hero__lines {
  left: 0; top: 0; width: 980px; height: 509px;
  background:
    repeating-linear-gradient(62deg, transparent 0 172px, #dcdcdc 172px 174px),
    repeating-linear-gradient(118deg, transparent 0 172px, #dcdcdc 172px 174px);
  background-position: 46px 0, 0 0;
  z-index: 0;
}
.hero__sprig { z-index: 1; }
.hero__sprig--1 { left: 331px; top: 117px; width: 62px; height: 67px; }
.hero__sprig--2 { left: 904px; top: 311px; width: 42px; height: 46px; }

.hero__logo { left: 6px; top: 68px; width: 277px; height: 217px; z-index: 2; }
.hero__logo img { width: 277px; height: 217px; }

.hero__first {
  left: 88px; top: 42px; z-index: 2;
  font-size: 16px; line-height: 20.8px; font-weight: 300; letter-spacing: 0.02em;
}

.hero__title {
  left: 362px; top: 46px; z-index: 2;
  font-family: var(--f-lob); font-weight: 400;
  font-size: 65px; line-height: 84.5px;
  color: var(--c-brown);
  white-space: nowrap;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.35);
}
.hero__title .b { font-weight: 700; }
.hero__title .osc { font-family: var(--f-osc); font-weight: 700; }
.hero__title .cas { font-family: var(--f-cas); font-weight: 700; }
.hero__title .big { font-size: 70px; }

.hero__leaf { left: 809px; top: 43px; width: 40px; height: 40px; z-index: 2; }

.hero__social { left: 871px; top: 84px; display: flex; gap: 7px; z-index: 3; }
.hero__social img { width: 25px; height: 25px; }

/* Серые подложки под цифрами и под текстом о режиме работы */
.hero__bar { background: var(--c-grey-light); opacity: 0.28; z-index: 1; }
.hero__bar--1 { left: 365px; top: 199px; width: 605px; height: 38px; }
.hero__bar--2 { left: -9px; top: 288px; width: 814px; height: 53px; }

.hero__count {
  left: 365px; top: 184px; z-index: 2;
  font-family: var(--f-lob); font-weight: 700; font-size: 50px; line-height: 62px;
  color: var(--c-grey);
}
.hero__count-label {
  left: 486px; top: 217px; z-index: 2;
  font-size: 16px; line-height: 20.8px; font-weight: 700; color: var(--c-grey);
}
.hero__city {
  left: 699px; top: 190px; z-index: 2;
  font-size: 25px; line-height: 34px; font-weight: 300; white-space: nowrap;
}
.hero__city .cap { font-size: 35px; }
.hero__street {
  left: 699px; top: 224px; z-index: 2;
  font-size: 16px; line-height: 16px; font-weight: 700; white-space: nowrap;
}
.hero__num {
  left: 842px; top: 157px; z-index: 2;
  font-family: var(--f-lob); font-weight: 700; font-size: 80px; line-height: 104px;
  color: var(--c-brown);
}
.hero__hours {
  left: 472px; top: 250px; z-index: 2;
  font-family: var(--f-lob); font-weight: 700; font-size: 35px; line-height: 45.5px;
}
.hero__phone {
  left: 749px; top: 249px; z-index: 2;
  font-family: var(--f-lob); font-size: 19px; line-height: 24.7px;
}
.hero__notice {
  left: 472px; top: 312px; width: 461px; z-index: 2;
  font-size: 18px; line-height: 45.5px; font-weight: 700;
}
.hero__sub {
  left: 70px; top: 343px; width: 292px; z-index: 2;
  font-family: var(--f-din); font-weight: 300;
  font-size: 40px; line-height: 56px;
  color: var(--c-grey-light);
}
.hero__ribbon { left: 118px; top: 438px; width: 127px; height: 65px; z-index: 2; }
.hero__ribbon img { width: 127px; height: 65px; }
.hero__ribbon span {
  position: absolute; left: 0; right: 0; top: 20px;
  text-align: center; font-size: 15px; line-height: 19.5px; font-weight: 300;
}
.hero__bee { left: 848px; top: 448px; width: 52px; height: 44px; z-index: 2; }

/* Зубчатый разделитель (треугольники вверх) и полоса над меню */
.hero__zigzag {
  left: 0; top: 509px; width: 980px; height: 13px; z-index: 2;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='13'%3E%3Cpath d='M0 13L13 0l13 13z' fill='%23707070'/%3E%3C/svg%3E") 0 0 / 26px 13px repeat-x;
}

/* Меню */
.menu {
  left: 0; top: 522px; width: 980px; height: 45px; z-index: 3;
  background: var(--c-menu);
  border-top: 4px solid var(--c-grey);
}
.menu ul { display: flex; height: 41px; }
.menu li { flex: 0 0 auto; }
.menu li:last-child { flex: 1 1 auto; }
.menu li:last-child a { padding-right: 0; text-align: center; }
.menu a {
  display: block; padding: 0 53px; height: 41px; line-height: 41px;
  font-size: 16px; font-weight: 700; color: var(--c-grey);
  white-space: nowrap;
}
.menu a.is-active, .menu a:hover { background: var(--c-grey-light); color: #fff; }
.menu-toggle { display: none; }

/* ==========================================================================
   Контент: полупрозрачная белая подложка поверх фона с котами
   ========================================================================== */
.page { position: relative; background: rgba(255, 255, 255, 0.82); }  /* у Wix 0.45, но текст на фоне с котами читался плохо */
.page p { text-align: justify; }

/* --- Главная: две колонки (522 + 450) --- */
.intro { display: grid; grid-template-columns: 522px 450px; position: relative; }
.intro__left { position: relative; }
.km {
  position: absolute; left: 124px; top: -5px; z-index: 2;
  width: 300px; color: var(--c-brown); text-transform: uppercase;
  font-size: 16px; line-height: 20.8px; font-weight: 300;
}
.km__num { float: left; font-family: var(--f-lob); font-size: 43px; line-height: 54px; margin-right: 0; }
.km__l1 { display: block; padding-top: 27px; }
.km__l2 { display: block; clear: both; margin-left: 3px; }
.km b { font-weight: 700; }
.km .cap { font-size: 22px; }

.slider { position: relative; margin: 73px 0 0 15px; width: 489px; height: 540px; overflow: hidden; background: #e9e4d2; }
.slider__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.slider__img.is-visible { opacity: 1; }

.intro__events { margin: 15px 0 0 18px; width: 488px; }

.intro__right { padding-top: 17px; }
.intro__right p { margin-bottom: 23px; }
.intro__right p:last-of-type { margin-bottom: 0; }
.lob-name { font-family: var(--f-lob); font-size: 23px; line-height: 1; }
.intro__photo { margin-top: 80px; width: 444px; height: 333px; }

.wide { padding: 48px 8px 0; }
.wide p { width: 964px; max-width: 100%; margin-bottom: 23px; }
.wide p.tight { margin-bottom: 32px; }
.yt-title {
  font-family: var(--f-osc); font-weight: 700; font-size: 25px; line-height: 34px;
  margin: -1px 0 0; text-align: left;
}
.yt-title .yt { color: #de5021; }
.yt-subscribe { margin: 15px 0 0 608px; }
.yt-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 55px;
  padding: 0 14px 0 8px; background: #fff; border: 1px solid #ddd; border-radius: 3px;
  font-family: Roboto, Arial, sans-serif; font-size: 13px; color: #030303;
}
.yt-btn img { width: 40px; height: 40px; border-radius: 50%; }
.yt-btn span { background: #c00; color: #fff; font-weight: 700; padding: 6px 10px; border-radius: 2px; }
.yt-video { margin-top: 24px; }
.yt-video iframe { display: block; width: 744px; height: 430px; border: 0; }

/* --- Подвал (на фоне с котами, без подложки) --- */
.footer { position: relative; height: 54px; padding: 6px 6px 0; font-family: var(--f-din); font-weight: 300; font-size: 15px; line-height: 18px; }
.footer p { text-align: left; }
.footer__social { position: absolute; left: 891px; top: 12px; display: flex; gap: 7px; }
.footer__social img { width: 25px; height: 25px; }

/* --- Стоимость --- */
.page--stoimost { padding-top: 36px; min-height: 1221px; }
.center { text-align: center !important; }
.lob-h { font-family: var(--f-lob); font-weight: 400; font-size: 23px; line-height: 29px; text-align: center; }
.page--stoimost .lob-h:first-of-type { margin-top: 21px; }
.price { margin: 26px 0 0 240px; padding-left: 13px; list-style: disc; width: 530px; font-family: var(--f-din); line-height: 24.5px; }
.price .lob { font-size: 18px; }
.price-extra { margin: 28px 0 0 231px; width: 522px; font-family: var(--f-din); line-height: 22px; color: var(--c-grey); }
.page--stoimost .lob-h + .center { margin-top: 0; }
.h-details { margin-top: 23px; }
.small-grey { font-size: 15px; line-height: 18px; color: var(--c-grey); }
.price-photo { margin: 9px auto 0; width: 430px; height: 574px; }

/* --- Партнёры: логотипы прижаты к низу подложки, координаты как на Wix --- */
.partners { position: relative; height: 157px; margin-top: 64px; }
.partners img { position: absolute; bottom: 0; }
.partners img:nth-child(1) { left: 10px; width: 213px; bottom: 40px; }
.partners img:nth-child(2) { left: 272px; width: 138px; bottom: 6px; }
.partners img:nth-child(3) { left: 470px; width: 254px; }
.partners img:nth-child(4) { left: 774px; width: 195px; }

/* --- Как добраться --- */
.page--kak { height: 658px; }
.page--kak > * { position: absolute; }
.kak__map { left: 10px; top: 16px; width: 475px; height: 270px; background: var(--c-grey-light); padding: 1px; }
.kak__map iframe { display: block; width: 473px; height: 268px; border: 0; }
.kak__text { left: 503px; top: 16px; width: 380px; font-size: 18px; line-height: 25px; text-align: left !important; }
.kak__text .phone { font-size: 19px; }
.kak__pin { left: 897px; top: 10px; width: 72px; height: 82px; }
.kak__form { left: 490px; top: 342px; width: 484px; height: 166px; }
.kak__form > * { position: absolute; }
.kak__form input, .kak__form textarea, .kak__form button {
  font-family: var(--f-din); font-size: 15px; font-weight: 300;
  border: 1px solid var(--c-grey-light); border-radius: 0; background: #fff; color: var(--c-text);
  padding: 0 8px;
}
.kak__form input::placeholder, .kak__form textarea::placeholder { color: var(--c-grey); }
.kak__form .f-name { left: 0; top: 0; width: 242px; height: 33px; }
.kak__form .f-email { left: 0; top: 38px; width: 242px; height: 33px; }
.kak__form .f-phone { left: 0; top: 76px; width: 242px; height: 33px; }
.kak__form .f-msg { left: 245px; top: 0; width: 237px; height: 109px; padding: 6px 8px; resize: none; }
.kak__form .f-status { left: 0; top: 114px; width: 380px; font-size: 14px; line-height: 16px; color: #bada55; text-align: left !important; }
.kak__form .f-status.is-error { color: #c0392b; }
.kak__form button {
  left: 406px; top: 114px; width: 78px; height: 31px;
  background: var(--c-grey-light); color: #fff; border-color: var(--c-text); cursor: pointer;
}
.kak__form button:hover { background: var(--c-grey); }
.page--kak .partners { left: 0; right: 0; bottom: 0; margin: 0; }

/* --- Афиша --- */
.page--afisha { min-height: 757px; padding: 22px 0 0 22px; }
.afisha { width: 480px; font-size: 17px; line-height: 24px; font-weight: 700; color: #000; }
.afisha p { margin-bottom: 24px; }
.page--afisha .partners { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }

/* --- Страница 404 --- */
.page--404 { min-height: 420px; padding: 60px 30px; text-align: center; }
.page--404 h2 { font-family: var(--f-lob); font-size: 42px; color: var(--c-brown); margin-bottom: 12px; }
.page--404 p { text-align: center; margin-bottom: 24px; }
.page--404 a.btn { display: inline-block; margin: 0 6px; padding: 8px 18px; background: var(--c-grey-light); color: #fff; font-weight: 700; font-size: 16px; }

/* ==========================================================================
   Узкие экраны: шапка масштабируется скриптом, контент в одну колонку
   ========================================================================== */
@media (max-width: 999px) {
  body { background-attachment: scroll; }
  .site { width: 100%; }
  .page { padding-left: 12px; padding-right: 12px; }
  .intro { display: block; }
  .km { position: static; margin: 12px 0 0; width: auto; }
  .slider { margin: 12px 0 0; width: 100%; height: auto; aspect-ratio: 489 / 540; }
  .intro__events { margin: 16px 0 0; width: auto; }
  .intro__right { padding-top: 24px; }
  .intro__photo { width: 100%; height: auto; margin-top: 24px; }
  .wide { padding: 24px 0 0; }
  .wide p { width: auto; }
  .yt-subscribe { margin-left: 0; }
  .yt-video iframe { width: 100%; height: auto; aspect-ratio: 744 / 430; }
  .footer { height: auto; padding: 10px 90px 10px 12px; }
  .footer__social { left: auto; right: 12px; }

  .page--stoimost { min-height: 0; padding-top: 24px; }
  .price { margin: 20px 0 0 12px; width: auto; padding-left: 16px; }
  .price-extra { margin: 20px 0 0; width: auto; }
  .price-photo { width: 100%; max-width: 430px; height: auto; }

  .partners, .page--kak .partners, .page--afisha .partners {
    position: static; height: auto; margin: 32px 0 0;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 32px; padding-bottom: 20px;
  }
  .partners img { position: static; bottom: auto; width: auto; max-height: 90px; max-width: 45%; }

  .page--kak { height: auto; padding-top: 16px; padding-bottom: 8px; }
  .page--kak > * { position: static; }
  .kak__map { width: 100%; height: auto; }
  .kak__map iframe { width: 100%; height: 268px; }
  .kak__text { width: auto; margin-top: 20px; }
  .kak__pin { display: none; }
  .kak__form { width: auto; height: auto; margin-top: 20px; }
  .kak__form > * { position: static; }
  .kak__form input, .kak__form textarea, .kak__form button { width: 100%; margin-bottom: 8px; height: 38px; }
  .kak__form .f-msg { height: 110px; }
  .kak__form .f-status { width: auto; margin: 4px 0 8px; }

  .page--afisha { min-height: 0; padding: 16px 12px 0; }
  .afisha { width: auto; }
}