@charset "UTF-8";
/* ==========================================================================
   Schulz — немецкие пивные в Новосибирске
   Десктоп: пиксель-в-пиксель под макет 1440px (исходный PSD 2400px, k=0.6).
   Приём: 1rem = 10px на 1440px и плавно тянется вместе с шириной окна,
   поэтому вся десктопная раскладка задана в rem и масштабируется целиком.
   ========================================================================== */

/* ---------- Шрифты ---------- */
@font-face{font-family:"Circe";src:url("../fonts/Circe-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Circe";src:url("../fonts/Circe-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Circe";src:url("../fonts/Circe-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Circe";src:url("../fonts/Circe-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Orpheus";src:url("../fonts/Orpheus-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Orpheus";src:url("../fonts/Orpheus-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Globus";src:url("../fonts/Globus-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Переменные ---------- */
:root{
  --red:#e31e24;
  --white:#ffffff;
  --milk:#f5f0e6;
  --black:#2a2a29;
  --grey:#666666;
  --star:#f8d323;

  --f-display:"Globus",Georgia,serif;
  --f-head:"Orpheus",Georgia,serif;
  --f-text:"Circe","Helvetica Neue",Arial,sans-serif;

  --container:144rem;
  --header-h:7.5rem;

  font-size:10px;                 /* 1rem = 10px — базис макета 1440 */
}

/* Плавное масштабирование всей десктопной раскладки на 901…1439px */
@media (min-width:901px) and (max-width:1439.98px){
  :root{font-size:calc(1000vw / 1440)}
}

/* ---------- Сброс ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--milk);
  color:var(--black);
  font-family:var(--f-text);
  font-size:1.7rem;
  line-height:1.4;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
picture{display:block}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:1rem 2rem;background:var(--red);color:#fff;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ══════════════════════════════════════════════════════════════
   ШАПКА
   ══════════════════════════════════════════════════════════════ */
.header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:var(--white);
}
.header__inner{
  position:relative;
  width:var(--container);height:100%;
  margin:0 auto;
}
.header__logo{position:absolute;left:5.94rem;top:1.26rem}
.header__logo img{width:13.08rem;height:4.8rem}

.nav__list{
  position:absolute;left:0;top:0;
  height:var(--header-h);
  display:flex;align-items:center;
  font-family:var(--f-head);
  font-size:2.3rem;
  text-transform:uppercase;
  white-space:nowrap;
}
/* Отступы взяты из макета — они в нём неравномерные */
.nav__list li:nth-child(1){margin-left:36.92rem}
.nav__list li:nth-child(2){margin-left:10.8rem}
.nav__list li:nth-child(3){margin-left:9.76rem}
.nav__list li:nth-child(4){margin-left:12.64rem}
.nav__list li:nth-child(5){margin-left:12.64rem}
.nav__list a{
  display:block;padding:.6rem 0;
  position:relative;top:-.2rem;
  transition:color .18s ease;
}
.nav__list a:hover{color:var(--red)}

.burger{display:none}

/* ══════════════════════════════════════════════════════════════
   ФОН-БУМАГА (разделы 1–5)
   ══════════════════════════════════════════════════════════════ */
.paper{
  position:relative;
  /* подложка — цвет нижнего края текстуры, иначе на длинной странице виден стык */
  background:#f0e7d6 url("../img/paper-bg.jpg") top center / 100% auto no-repeat;
}
@supports (background-image:image-set(url("../img/paper-bg.webp") 1x)){
  .paper{
    background-image:image-set(url("../img/paper-bg.webp") 1x, url("../img/paper-bg@2x.webp") 2x);
  }
}

/* ══════════════════════════════════════════════════════════════
   РАЗДЕЛ 1 — ГЕРОЙ
   ══════════════════════════════════════════════════════════════ */
.hero__inner{
  position:relative;
  width:var(--container);height:59.4rem;
  margin:0 auto;
}
.hero__food{
  position:absolute;left:43.74rem;top:3.48rem;
  width:89.28rem;height:50.88rem;
}
.hero__food img{width:100%;height:100%;object-fit:contain}

.hero__deckel{
  position:absolute;left:114.96rem;top:5.58rem;
  width:19.8rem;height:19.8rem;
}
.hero__deckel img{width:100%;height:100%}

.hero__text{position:relative;z-index:2}

.hero__title{
  position:absolute;left:15.66rem;top:8.3rem;
  font-family:var(--f-display);
  font-size:8.94rem;
  line-height:.95;
  font-weight:400;
  color:var(--black);
}
.hero__title em{font-style:normal;color:var(--red)}

.hero__sub{
  position:absolute;left:15.72rem;top:35.4rem;
  font-size:2.5rem;
  line-height:1.25;
  text-transform:uppercase;
  color:var(--grey);
}
.hero__btn{
  position:absolute;left:15.48rem;top:44.28rem;
  width:23.16rem;height:5.28rem;
}

/* ══════════════════════════════════════════════════════════════
   КНОПКИ
   ══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-head);
  font-size:2.4rem;
  text-transform:uppercase;
  border-radius:.6rem;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn--sm{font-size:2.3rem}
.btn--red{background:var(--red);color:var(--white)}
.btn--red:hover{background:#c4171c}
.btn--ghost{border:.2rem solid var(--white);color:var(--white)}
.btn--ghost:hover{background:var(--white);color:var(--black)}
.btn--white{background:var(--white);color:var(--black)}
.btn--white:hover{background:var(--milk)}
.btn:active{transform:translateY(.1rem)}

/* ══════════════════════════════════════════════════════════════
   ЗАГОЛОВКИ РАЗДЕЛОВ
   ══════════════════════════════════════════════════════════════ */
.h2{
  font-family:var(--f-head);
  font-size:4rem;
  font-weight:400;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--black);
}
.h2--red{color:var(--red)}

/* ══════════════════════════════════════════════════════════════
   РАЗДЕЛ 2 — О ШУЛЬЦАХ
   ══════════════════════════════════════════════════════════════ */
.about__inner{
  position:relative;
  width:var(--container);height:51.1rem;
  margin:0 auto;
}
.about__photo{
  position:absolute;left:2.04rem;top:0;
  width:68.88rem;height:45.3rem;
}
.about__photo img{width:100%;height:100%;object-fit:contain}

.about__body{position:relative}
.about__body .h2{position:absolute;left:72.06rem;top:.1rem}

.about__text{
  position:absolute;left:72.12rem;top:6.1rem;
  font-size:2.5rem;
  line-height:1.2;
  color:var(--black);
  white-space:nowrap;
}

/* показатели — позиции взяты из макета поэлементно */
.stats__item{position:absolute}
.stats__item:nth-child(1){left:71.52rem;top:21.42rem}
.stats__item:nth-child(2){left:98.52rem;top:24.24rem}
.stats__item:nth-child(3){left:120.3rem;top:23.52rem}

.stats__icon{display:block}
.stats__icon--beers img{width:18.3rem;height:18.24rem}
.stats__icon--sausage img{width:13.08rem;height:13.86rem}
.stats__icon--pin img{width:10.98rem;height:14.04rem}

.stats__row{position:static}
.stats__num,.stats__label{position:absolute;white-space:nowrap}
.stats__num{
  font-family:var(--f-head);
  font-size:4rem;
  font-weight:400;
  line-height:1;
  color:var(--red);
}
.stats__label{
  font-size:2.5rem;
  line-height:1.16;
  color:var(--black);
}
/* «15+ / лет истории» */
.stats__item:nth-child(1) .stats__num  {left:2.28rem;top:18.42rem}
.stats__item:nth-child(1) .stats__label{left:10.14rem;top:17.36rem}
/* «3 / пивные в городе» */
.stats__item:nth-child(2) .stats__num  {left:-.96rem;top:15.6rem}
.stats__item:nth-child(2) .stats__label{left:3rem;top:14.54rem}
/* «4,7 / рейтинг у гостей» */
.stats__item:nth-child(3) .stats__num  {left:-3.12rem;top:16.02rem}
.stats__item:nth-child(3) .stats__label{left:3.96rem;top:14.96rem}

/* ══════════════════════════════════════════════════════════════
   РАЗДЕЛ 3 — ВЫБЕРИТЕ СВОЙ ШУЛЬЦ
   ══════════════════════════════════════════════════════════════ */
.venues{
  position:relative;
  width:var(--container);height:51.2rem;
  margin:0 auto;
}
.venues__title{
  position:absolute;left:47.52rem;top:2.3rem;
}
.venues__grid{
  position:absolute;left:4.74rem;top:9.68rem;
  display:flex;gap:1.44rem;
}
.venue{
  position:relative;
  width:43.92rem;height:37.14rem;
  border-radius:1.2rem;
  overflow:hidden;
}
.venue__photo,.venue__photo img{
  width:100%;height:100%;object-fit:cover;
}
.venue__photo::after{content:""}

.venue__body{
  position:absolute;inset:0;
  display:block;
  text-align:center;
}
.venue__name{
  position:absolute;left:0;right:0;top:19.1rem;
  font-family:var(--f-display);
  font-size:5.75rem;
  font-weight:400;
  line-height:1;
  color:var(--white);
  text-shadow:0 .2rem 1.2rem rgba(0,0,0,.55);
}
.venue__actions{
  position:absolute;left:0;right:0;top:26.96rem;
  display:flex;justify-content:center;gap:2.16rem;
}
.venue__actions .btn{width:13.62rem;height:5.28rem}
.venue__actions .btn--ghost{width:13.56rem}

/* ══════════════════════════════════════════════════════════════
   РАЗДЕЛ 4 — АДРЕСА НА КАРТЕ
   ══════════════════════════════════════════════════════════════ */
.map-sec{
  position:relative;
  width:var(--container);height:53.8rem;
  margin:0 auto;
}
.map-sec__title{position:absolute;left:54.18rem;top:3.2rem}

.map-sec__inner{position:relative;height:100%}

.map-sec__building{
  position:absolute;left:65.16rem;top:0;
  width:79.8rem;height:57.78rem;
  z-index:0;pointer-events:none;
}
.map-sec__building img{width:100%;height:100%;object-fit:contain}

.map-sec__map{
  position:absolute;left:7.62rem;top:9.78rem;
  width:64.98rem;height:42.84rem;
  z-index:1;
}
.map-sec__map img{width:100%;height:100%;object-fit:contain}

.addresses{position:absolute;left:75.54rem;top:14.46rem;z-index:1}
.address{
  position:relative;
  display:flex;align-items:flex-start;gap:.96rem;
  height:12.24rem;
}
.address__pin{width:1.56rem;height:2.22rem;margin-top:.72rem;flex:none}
.address__street{
  font-weight:700;
  font-size:2.4rem;
  line-height:1.21;
  color:var(--black);
}
.address__phones{
  font-size:2.5rem;
  line-height:1.16;
  color:var(--grey);
}
.address__phones a{display:block;transition:color .18s ease}
.address__phones a:hover{color:var(--red)}

/* ══════════════════════════════════════════════════════════════
   РАЗДЕЛ 5 — ОТЗЫВЫ (виджет Яндекс Карт)
   Единственный блок, который сознательно отходит от макета:
   содержимое отдаёт Яндекс в iframe, свой дизайн туда не проникает.
   ══════════════════════════════════════════════════════════════ */
.reviews{
  position:relative;
  width:var(--container);
  margin:0 auto;
  padding:2.6rem 0 4.4rem;
}
.reviews__title{text-align:center}

.reviews__tabs{
  display:flex;justify-content:center;gap:1.6rem;
  margin:2.8rem 0 2.4rem;
}
.rev-tab{
  min-width:19rem;height:5.28rem;
  padding:0 2.4rem;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-head);
  font-size:2.1rem;
  text-transform:uppercase;
  color:var(--black);
  background:transparent;
  border:.2rem solid rgba(42,42,41,.35);
  border-radius:.6rem;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.rev-tab:hover{border-color:var(--red);color:var(--red)}
.rev-tab[aria-selected="true"]{
  background:var(--red);border-color:var(--red);color:var(--white);
}

.reviews__widget{
  width:76rem;max-width:100%;
  margin:0 auto;
  border-radius:1.6rem;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 .4rem 2.4rem rgba(42,42,41,.10);
}
.reviews__frame{
  display:block;
  width:100%;height:56rem;
  border:0;
}

.reviews__meta{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  margin-top:2.4rem;
  font-size:1.9rem;
  color:var(--grey);
  text-align:center;
}
.reviews__rating-num{
  font-family:var(--f-head);
  font-size:2.6rem;font-weight:400;
  color:var(--red);
}
.reviews__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.4rem}
.reviews__link{
  color:var(--black);
  border-bottom:.1rem solid rgba(42,42,41,.35);
  transition:color .18s ease,border-color .18s ease;
}
.reviews__link:hover{color:var(--red);border-color:var(--red)}

/* ══════════════════════════════════════════════════════════════
   РАЗДЕЛ 6 — CTA
   ══════════════════════════════════════════════════════════════ */
.cta{
  position:relative;
  height:46.92rem;
  background:var(--milk) url("../img/cta-bg.webp") center / cover no-repeat;
}
@supports (background-image:image-set(url("../img/cta-bg.webp") 1x)){
  .cta{background-image:image-set(url("../img/cta-bg.webp") 1x, url("../img/cta-bg@2x.webp") 2x)}
}
.cta__inner{
  position:relative;
  width:var(--container);height:100%;
  margin:0 auto;
}
.cta__deckel{
  position:absolute;left:8.58rem;top:11.94rem;
  width:26.4rem;height:26.4rem;
}
.cta__deckel img{width:100%;height:100%}
.cta__title{
  position:absolute;left:40.74rem;top:10.3rem;
  font-family:var(--f-display);
  font-size:8.29rem;
  font-weight:400;
  line-height:1;
  color:var(--white);
}
.cta__text{
  position:absolute;left:52.62rem;top:21.1rem;
  font-size:2.46rem;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  color:var(--white);
}
.cta__btn{
  position:absolute;left:60.72rem;top:33.72rem;
  width:22.68rem;height:5.28rem;
}

/* ══════════════════════════════════════════════════════════════
   РАЗДЕЛ 7 — ФУТЕР
   ══════════════════════════════════════════════════════════════ */
.footer{
  position:relative;
  height:13.02rem;
  background:#30241c url("../img/footer-wood.jpg") center / cover no-repeat;
  color:var(--white);
}
@supports (background-image:image-set(url("../img/footer-wood.webp") 1x)){
  .footer{background-image:image-set(url("../img/footer-wood.webp") 1x, url("../img/footer-wood@2x.webp") 2x)}
}
.footer__inner{
  position:relative;
  width:var(--container);height:100%;
  margin:0 auto;
}
.footer__logo{position:absolute;left:5.94rem;top:3.96rem}
.footer__logo img{width:13.08rem;height:4.8rem}

.footer__copy{
  position:absolute;left:29.82rem;top:4.7rem;
  font-size:2.5rem;
  text-transform:uppercase;
  color:var(--white);
}
.footer__city{
  position:absolute;left:86.52rem;top:4.7rem;
  font-size:2.5rem;
  text-transform:uppercase;
  color:var(--white);
}
.footer__social{
  position:absolute;left:120.36rem;top:2.76rem;
  display:flex;gap:3.72rem;
}
.footer__social img{
  width:7.14rem;height:7.2rem;
  border-radius:1.6rem;
  transition:transform .18s ease;
}
.footer__social a:hover img{transform:scale(1.06)}

/* ══════════════════════════════════════════════════════════════
   ПЛАНШЕТ И МОБИЛЬНЫЕ — раскладка в одну колонку
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  :root{font-size:10px;--container:100%;--header-h:60px}

  body{font-size:16px}

  /* --- шапка --- */
  .header__inner{width:100%;padding:0 20px}
  .header__logo{left:20px;top:8px}
  .header__logo img{width:120px;height:44px}

  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    position:absolute;right:16px;top:12px;
    width:36px;height:36px;
    z-index:60;
  }
  .burger span{
    display:block;height:2.5px;width:24px;margin:0 auto;
    background:var(--black);border-radius:2px;
    transition:transform .25s ease,opacity .2s ease;
  }
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  .nav{
    position:fixed;inset:60px 0 auto 0;
    background:var(--white);
    border-top:1px solid rgba(0,0,0,.08);
    transform:translateY(-120%);
    transition:transform .3s ease;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
  }
  .nav.is-open{transform:translateY(0)}
  .nav__list{
    position:static;height:auto;
    flex-direction:column;align-items:stretch;
    padding:8px 0 16px;
    font-size:20px;
  }
  .nav__list li{margin:0 !important}
  .nav__list a{padding:14px 24px}

  /* --- фон --- */
  .paper{background-size:cover}

  /* --- герой --- */
  .hero__inner{
    width:100%;height:auto;padding:22px 20px 0;text-align:center;
    display:flex;flex-direction:column;
  }
  .hero__text{position:static;order:1}
  .hero__deckel{order:0}
  .hero__food{order:2}
  .hero__title{position:static;font-size:48px;line-height:1.04;margin-bottom:14px}
  .hero__sub{position:static;font-size:16px;letter-spacing:.02em;margin-bottom:22px}
  .hero__btn{position:static;width:200px;height:48px;font-size:18px;margin:0 auto}
  .hero__food{position:static;width:100%;max-width:460px;height:auto;margin:6px auto 0}
  .hero__deckel{
    position:static;left:auto;top:auto;
    width:92px;height:92px;
    margin:0 auto 14px;
  }

  /* --- о шульцах --- */
  .about__inner{width:100%;height:auto;padding:26px 20px 8px}
  .about__photo{position:static;width:100%;height:auto;margin:0 auto 20px}
  .about__body{position:static}
  .about__body .h2{position:static;font-size:28px;margin-bottom:14px;text-align:center}
  .about__text{
    position:static;width:100%;font-size:17px;line-height:1.45;
    white-space:normal;
  }
  .about__text br{display:none}

  .stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    margin-top:26px;
  }
  .stats__item{position:static !important;left:auto !important;top:auto !important;text-align:center}
  .stats__icon img{height:74px;width:auto;margin:0 auto}
  .stats__row{
    display:flex;flex-direction:column;gap:2px;margin:8px 0 0;
    align-items:center;
  }
  .stats__num,.stats__label{
    position:static !important;left:auto !important;top:auto !important;
  }
  .stats__num{font-size:30px}
  .stats__label{font-size:14px;text-align:center;line-height:1.25}

  /* --- заведения --- */
  .venues{width:100%;height:auto;padding:30px 20px 10px}
  .venues__title{position:static;font-size:26px;text-align:center;margin-bottom:20px}
  .venues__grid{position:static;flex-direction:column;gap:18px;align-items:center}
  .venue{width:100%;max-width:440px;height:auto;aspect-ratio:440/372}
  .venue__name{top:auto;bottom:88px;font-size:44px}
  .venue__actions{top:auto;bottom:22px;gap:14px}
  .venue__actions .btn,
  .venue__actions .btn--ghost{width:126px;height:46px;font-size:18px}

  /* --- карта --- */
  .map-sec{width:100%;height:auto;padding:30px 20px 16px}
  .map-sec__title{position:static;font-size:26px;text-align:center;margin-bottom:18px}
  .map-sec__inner{height:auto}
  .map-sec__building{display:none}
  .map-sec__map{position:static;width:100%;height:auto;margin-bottom:22px}
  .addresses{
    position:static;
    display:grid;gap:18px;
  }
  .address{height:auto;justify-content:flex-start;gap:10px}
  .address__street{font-size:18px}
  .address__phones{font-size:19px;margin-top:2px}

  /* --- отзывы --- */
  .reviews{width:100%;padding:30px 20px 34px}
  .reviews__title{font-size:26px;margin-bottom:0}
  .reviews__tabs{
    flex-direction:column;align-items:stretch;gap:10px;
    margin:18px 0 18px;
  }
  .rev-tab{min-width:0;width:100%;height:46px;font-size:18px}
  .reviews__widget{width:100%;border-radius:12px}
  .reviews__frame{height:520px}
  .reviews__meta{margin-top:18px;font-size:16px;gap:8px}
  .reviews__rating-num{font-size:22px}
  .reviews__links{flex-direction:column;gap:8px}

  /* --- CTA --- */
  .cta{height:auto}
  .cta__inner{width:100%;height:auto;padding:34px 20px 38px;text-align:center}
  .cta__deckel{
    position:static;width:132px;height:132px;margin:0 auto 16px;
  }
  .cta__title{position:static;font-size:44px;margin-bottom:14px}
  .cta__text{
    position:static;width:100%;font-size:17px;margin-bottom:22px;
    white-space:normal;
  }
  .cta__text br{display:none}
  .cta__btn{position:static;width:200px;height:48px;font-size:18px;margin:0 auto}

  /* --- футер --- */
  .footer{height:auto}
  .footer__inner{
    width:100%;height:auto;padding:24px 20px 26px;
    display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  }
  .footer__logo,.footer__copy,.footer__city,.footer__social{position:static}
  .footer__logo img{width:120px;height:44px}
  .footer__copy{font-size:15px}
  .footer__city{font-size:15px}
  .footer__social{gap:20px}
  .footer__social img{width:48px;height:48px;border-radius:11px}
}

@media (max-width:420px){
  .hero__title{font-size:40px}
  .venue__name{font-size:38px;bottom:82px}
  .cta__title{font-size:36px}
  .h2,.venues__title,.map-sec__title,.reviews__title,.about__body .h2{font-size:23px}
}

/* ---------- Уважать «уменьшить движение» ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
  .reviews__track{transition:none}
}