/* =========================================================
   РЕТРО-ОФОРМЛЕНИЕ САЙТА (основное, решение владельца 19.09.2026).
   Подключается поверх style.css на всех страницах.
   Итальянская кофейная вывеска 50–60-х: кремовая бумага,
   старинный шрифт, приглушённый красный и горчичный.
   ========================================================= */
:root {
  --coffee:   #2b2118;
  --coffee-2: #3c2f22;
  --crema:    #b4442f;  /* приглушённый красный — главный акцент */
  --crema-dk: #8e3221;
  --milk:     #f4ead8;  /* кремовая бумага */
  --latte:    #ead9bd;
  --text:     #2b2118;
  --muted:    #6d5b45;
  --line:     #d9c3a0;
  --white:    #fbf5e9;
  --mustard:  #d59b2e;
  --radius:   6px;
  --shadow:   6px 6px 0 rgba(43, 33, 24, .14);
}

/* --- СТАРАЯ КОФЕЙНАЯ БУМАГА ---------------------------------
   Слои: волокна бумаги + пятна и потёки кофе + ваш рисунок
   кофемашины еле заметно на заднем плане. Ниже — прозрачность
   каждого слоя, её легко поменять. */
body {
  font-family: "Karla", system-ui, sans-serif;
  background-color: var(--milk);
  position: relative;
}
/* фон-мастерская за листом */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url("/img/warsztat.jpg") no-repeat center center / cover, #cfc3ad;
  /* без размытия — картинка чёткая; лёгкое приглушение цвета, чтобы не спорила с текстом */
  filter: saturate(.95) brightness(1.02);
}
/* сам лист бумаги: волокна, пятна кофе и рисунок кофемашины */
.sheet {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  background:
    url("/img/paper-stains.svg") no-repeat center / cover,
    url("/img/paper-fibers.svg") repeat 0 0 / 320px,
    var(--milk);
  box-shadow: 0 24px 70px rgba(30, 20, 12, .45), 0 2px 0 rgba(255,255,255,.4) inset;
}
/* рисунок кофемашины — еле заметно на листе */
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* «fixed» — рисунок не уезжает при прокрутке, поэтому виден на всём сайте */
  background: url("/img/ekspres-szkic.jpg") no-repeat center center / cover fixed;
  opacity: .17;
  mix-blend-mode: multiply;
}
.sheet > * { position: relative; z-index: 1; }
/* затемнённые углы, как на старом фото */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(43,33,24,0) 42%, rgba(43,33,24,.28) 72%, rgba(43,33,24,.58) 100%),
    linear-gradient(to bottom, rgba(43,33,24,.18), rgba(43,33,24,0) 16%, rgba(43,33,24,0) 84%, rgba(43,33,24,.20));
  mix-blend-mode: multiply;
}
.sheet { max-width: min(1180px, 94vw); }
/* на телефоне лист во всю ширину, фото мастерской не грузим */
@media (max-width: 720px) {
  .sheet { max-width: 100%; box-shadow: none; }
  body::before { display: none; }
}

/* блоки со своим фоном — полупрозрачные, чтобы бумага просвечивала */
.section--tint { background: rgba(234,217,189,.72); }
.section--form { background: rgba(234,217,189,.72); }
.topbar { background: rgba(244,234,216,.93); }

h1, h2, h3, .rating__score, .facts strong {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 400; letter-spacing: 0;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.eyebrow { font-family: "Karla", sans-serif; font-weight: 800; letter-spacing: .22em; color: var(--crema); }

/* Кнопки — прямоугольные, с твёрдой тенью */
.btn {
  border-radius: 3px; border: 2px solid var(--coffee); box-shadow: 4px 4px 0 var(--coffee);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: .95rem;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--coffee); }
.btn--ghost { background: var(--white); }
.btn--ghost-light { color: var(--milk); border-color: var(--milk); box-shadow: 4px 4px 0 rgba(250,246,240,.35); }
.btn--big { font-size: 1.05rem; }

/* Шапка — двойная линия снизу */
.topbar { background: var(--milk); border-top: 3px double var(--coffee); border-bottom: 3px double var(--coffee); backdrop-filter: none; }
.topbar__nav a { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 800; }
.lang { background: var(--latte); border: 2px solid var(--coffee); }
.lang__item.is-current { background: var(--crema); color: var(--white); }

/* Верх страницы: бумажная полоса + свисающие листья (целиком, без обрезки).
   .decor__band — сколько видно бумаги (красная линия владельца).
   .decor__gap  — пустое место под ней, чтобы листья не легли на шапку. */
.decor { position: relative; }
/* Ретро-краски: зелень приглушена и слегка выцвела, как на старом снимке */
.decor img { filter: sepia(.42) saturate(.72) hue-rotate(-12deg) contrast(.95) brightness(1.03); }
.decor__band {
  aspect-ratio: 1018 / 145; overflow: hidden;
  /* мягкий переход: низ бумаги плавно растворяется в странице */
  -webkit-mask-image: linear-gradient(to bottom, #000 28%, rgba(0,0,0,.85) 52%, rgba(0,0,0,.45) 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 28%, rgba(0,0,0,.85) 52%, rgba(0,0,0,.45) 76%, transparent 100%);
}
.decor__band img { width: 100%; display: block; }
.decor__gap { aspect-ratio: 1018 / 92; } /* меньше число — страница выше */
.decor__beans {
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  z-index: 26; pointer-events: none;
}
.decor__leaves {
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  z-index: 25; pointer-events: none;
  /* низ зелени плавно тает, чтобы под шапкой не висели обрывки листьев и зёрен */
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, rgba(0,0,0,.6) 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, rgba(0,0,0,.6) 94%, transparent 100%);
  filter: sepia(.42) saturate(.72) hue-rotate(-12deg) contrast(.95) brightness(1.03) drop-shadow(0 8px 10px rgba(43, 33, 24, .25));
}
@media (max-width: 720px) {
  .decor__band { aspect-ratio: 1018 / 150; }
  .decor__gap { aspect-ratio: 1018 / 110; }
}

/* Первый экран: рисунок без подложки */
.hero__card { background: none; border: 0; box-shadow: none; }
.hero__card::after { display: none; }

.phones--hero { border: 2px solid var(--coffee); border-radius: 4px; box-shadow: var(--shadow); }
.facts strong { font-size: 2.2rem; }

/* Полоски-разделители и рамки секций */
.brands { background: var(--coffee); border-top: 0; border-bottom: 0; }
.brands__title, .brands__list li { color: var(--milk); }
.brands__list li { opacity: 1; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.section--tint { background: var(--latte); border-top: 3px double var(--coffee); border-bottom: 3px double var(--coffee); }
.section--form { background: var(--latte); }

.service, .rating, .lead-form, .steps li, .review {
  border: 2px solid var(--coffee); border-radius: 4px; box-shadow: var(--shadow); background: var(--white);
}
.service--main { background: var(--coffee); }
.service--main .price, .service--main p { color: var(--latte); }
.steps__n {
  background: var(--mustard); color: var(--coffee); border: 2px solid var(--coffee);
  font-family: "DM Serif Display", serif; font-size: 1.2rem;
}
.why__item { border-top: 4px double var(--crema); }
.praise li { border: 2px solid var(--coffee); border-radius: 3px; box-shadow: 3px 3px 0 var(--latte); }
.praise li::before { color: var(--crema); }
.scope li { border-bottom: 1px dashed var(--line); }
ol.scope li::before { background: var(--mustard); color: var(--coffee); border: 1.5px solid var(--coffee); }
.scope__note { background: var(--white); border: 2px solid var(--coffee); border-left-width: 8px; border-radius: 4px; }
details { border-bottom: 1px dashed var(--line); }
summary::after { color: var(--crema); }

/* Отзывы и адреса */
.stars { color: var(--mustard); }
.section--dark { background: var(--coffee); }
.place { background: var(--coffee-2); border: 2px solid var(--milk); border-radius: 4px; }
.place__hours { color: var(--mustard); }
.place__map { border-radius: 2px; }

/* Форма */
.field input, .field select, .field textarea {
  border-radius: 3px; border: 2px solid var(--coffee); background: var(--milk);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--crema); box-shadow: 3px 3px 0 var(--crema);
}

/* Призыв и подвал */
.cta { background: var(--crema); border-top: 3px double var(--coffee); border-bottom: 3px double var(--coffee); }
.cta .btn { border-color: var(--milk); box-shadow: 4px 4px 0 var(--coffee); }
.footer { background: var(--coffee); }
.footer a, .footer strong { color: var(--latte); }
.callbar { border-radius: 4px; border: 2px solid var(--coffee); }
.callbar__call { border-radius: 2px 0 0 2px; }
.callbar__lead { border-radius: 0 2px 2px 0; }