/* HotSki — templates 7 «Магазины» (magaziny.html) and 8 «О магазине, отзывы, опт» (o-magazine.html).
   Skeleton: coolzone about (B1 head · B2 manifest panel + photo · B3 narrow text) and home B8 (photo + panel).
   Colour: red panels + white, ink text; motion lives in js/about.js (transform/opacity only). */

.ab { padding-top: var(--hdr); }

/* ---------- page head: crumbs, H1 44 centred in 820, a quiet line under it (coolzone about B1) ---------- */
.ab-head { padding-top: 26px; padding-bottom: 118px; text-align: center; }
.ab-head--short { padding-bottom: 54px; }
.ab-head__crumbs { text-align: left; }
.ab-head__title { max-width: 820px; margin: 108px auto 0; text-wrap: balance; }
.ab-head--short .ab-head__title { margin-top: 62px; }
.ab-head__meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 34px; }
.ab-head__meta .dot { width: 6px; height: 6px; }
.ab-head__lead { max-width: 560px; margin: 26px auto 0; }
.ab-head__meta a, .can__list a { position: relative; }
.ab-head__meta a::after, .can__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--tr);
}
.ab-head__meta a:hover::after, .ab-head__meta a:focus-visible::after,
.can__list a:hover::after, .can__list a:focus-visible::after { transform: scaleX(1); }

/* ---------- B2 manifest: red panel 340 + photo 4:3; the brand word sits between the photo and its clipped copy ---------- */
.mf { display: grid; grid-template-columns: 340px 1fr; align-items: stretch; }
.mf__panel { position: relative; overflow: hidden; background: var(--accent); color: var(--white); padding: 24px 20px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.mf__panel > :not(.mf__track) { position: relative; z-index: 1; }
/* R18 S-turn as a track of dots (R04, home B4): white on the red panel, between the slogan and the paragraph */
.mf__track { position: absolute; left: 0; right: 0; top: 30%; height: 38%; width: 100%; overflow: visible; pointer-events: none; }
.mf__track circle { fill: var(--white); }
.mf__foot { display: grid; gap: 28px; justify-items: start; }
.mf__photo { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 880px; overflow: hidden; background: #3f86d8; container-type: inline-size; }
/* the stack is always the 4:3 picture (clip-path is in its percent); on screens wider than 1500 the box crops its bottom */
.mf__stack { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 3; transform-origin: 46% 42%; }
.mf__stack > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.mf__blur { filter: blur(18px) saturate(1.1); transform: scale(1.08); opacity: 0; visibility: hidden; pointer-events: none; }
.mf__wordwrap { position: absolute; left: 0; right: 0; top: 0; height: 31.5%; pointer-events: none; will-change: transform; }
.mf__word {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; white-space: nowrap;
  font-size: 25.5cqw; font-weight: 900; line-height: 0.74; letter-spacing: -0.012em; color: var(--white);
  text-shadow: 0 0.04em 0.18em rgba(20, 50, 110, 0.18);
}
.mf__word .ch { display: inline-block; will-change: transform; }

/* ---------- B3 client text: narrow centred column 660 (coolzone about B3) ---------- */
.ab-text { position: relative; padding-top: 112px; padding-bottom: 96px; }
.ab-text__label { position: absolute; left: var(--pad); top: 116px; display: flex; align-items: center; gap: 12px; }
.ab-text__col { max-width: 660px; margin: 0 auto; display: grid; gap: 16px; }

/* brands: one line of the client's marks, a slow ticker between two rules */
.brands { position: relative; overflow: hidden; margin: 0 var(--pad); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.brands__track { display: flex; width: max-content; will-change: transform; }
.brands__line {
  flex: 0 0 auto; margin: 0; padding: 26px 0 12px; white-space: nowrap;
  font-family: var(--f-disp); font-weight: 700; font-size: 100px; line-height: 0.8; text-transform: uppercase; letter-spacing: 0;
}
.brands__b { display: inline-block; transition: color 0.3s; }
.brands__b:hover { color: var(--accent); }
.brands__dot, .brands__line.is-split::after {
  content: ""; display: inline-block; width: 0.13em; height: 0.13em; border-radius: 50%; background: var(--accent);
  margin: 0 0.3em; vertical-align: 0.2em;
}

/* ---------- B4 reviews: index of 16 names with dots | the chosen review large ---------- */
.rw { padding-top: 116px; padding-bottom: 104px; scroll-margin-top: var(--hdr); }
.rw__head { margin-bottom: 30px; }
.rw__aside { display: flex; gap: 32px; padding-bottom: 6px; }
.rw__body { display: grid; grid-template-columns: var(--col) 1fr; gap: 0 var(--gap); border-top: 1px solid var(--ink); }
.rw__index { margin: 0; padding: 0; list-style: none; }
.rw__name {
  position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; width: 100%;
  padding: 12px 0 11px; text-align: left; font-size: 13px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em;
  border-bottom: 1px solid #e2e2e2; transition: color 0.25s;
}
.rw__name:hover, .rw__name:focus-visible { color: var(--accent); outline: none; }
.rw__dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; transition: background-color 0.3s, box-shadow 0.3s, transform 0.45s var(--ease-out); }
.rw__name.is-on { color: var(--ink); }
.rw__name.is-on .rw__dot { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); transform: scale(1.35); }
.rw__num { font-size: 10px; letter-spacing: 0.04em; color: var(--gray); }
.rw__fill { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.rw__side { display: flex; flex-direction: column; justify-content: space-between; padding: 30px 0 0 calc(var(--col) * 0.22); min-width: 0; }
.rw__stage { position: relative; display: grid; }
.rw__item { grid-area: 1 / 1; margin: 0; display: grid; align-content: start; gap: 34px; }
.js .rw__item { opacity: 0; visibility: hidden; }
.js .rw__item.is-on, .js .rw__item.is-out { visibility: visible; }
.js .rw__item.is-on { opacity: 1; }
.rw__text { margin: 0; max-width: 940px; font-size: 34px; line-height: 1.24; font-weight: 300; letter-spacing: -0.012em; text-wrap: pretty; }
.rw__who { display: flex; align-items: center; gap: 12px; }
.rw__nav { margin-top: 44px; }
.rw__nav .car__progress { overflow: visible; } /* base clips the 3 px runner to the 1 px line — local fix, see report */
.rw__nav .car__progress i { transition: transform 0.85s var(--ease-out); }
.rw__count { min-width: 70px; text-align: right; }

/* ---------- B5 wholesale: the client's paragraph large | red panel with the phone ---------- */
.opt { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 110px; }
.opt__main { border-top: 1px solid var(--ink); padding: 24px 64px 0 0; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.opt__label { display: flex; align-items: center; gap: 12px; }
.opt__text { max-width: 640px; font-size: 30px; line-height: 1.24; font-weight: 300; letter-spacing: -0.01em; text-wrap: pretty; }
.opt__panel { background: var(--accent); color: var(--white); padding: 24px 22px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 430px; }
.opt__tel, .call__tel { display: block; width: max-content; max-width: 100%; white-space: nowrap; line-height: 0.84; letter-spacing: 0; transition: color 0.3s; }
.opt__tel { font-size: min(100px, 7vw); }
.opt__tel:hover { color: var(--ink); }
.opt__foot { display: grid; gap: 18px; justify-items: start; }

/* ---------- magaziny B1: two shops side by side — photo + red panel each (coolzone home B8) ---------- */
.shp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.shp__col { display: grid; grid-template-rows: auto 1fr; scroll-margin-top: calc(var(--hdr) + 16px); }
.shp__photo { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--surface); }
.shp__photo img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; max-width: none; object-fit: cover; object-position: 50% 22%; opacity: 0; transition: opacity 0.85s ease-in-out; will-change: transform; }
.shp__photo img.is-on { opacity: 1; }
.shp__shutter { position: absolute; inset: 0; z-index: 3; background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; }
.shp__nav { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
.shp__nav .arr { border-color: transparent; background: rgba(255, 255, 255, 0.92); }
.shp__dots { display: inline-flex; gap: 7px; }
.shp__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); transition: background-color 0.3s, transform 0.4s var(--ease-out); }
.shp__dots i.is-on { background: var(--accent); transform: scale(1.25); }
.shp__panel { background: var(--accent); color: var(--white); padding: 24px 22px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 292px; }
.shp__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.shp__sign { padding-top: 12px; }
.shp__sign .dot { background: var(--white); }
.shp__info { display: grid; gap: 14px; justify-items: start; max-width: 470px; }
.shp__info .blink { margin-top: 12px; }
.shp__tel { transition: opacity var(--tr); }
.shp__tel:hover { opacity: 0.78; }

/* magaziny B2: what the shop gives — the client's line large, two facts as links */
.can { padding-top: 124px; padding-bottom: 116px; text-align: center; }
.can__text { max-width: 940px; margin: 0 auto; text-wrap: balance; }
.can__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 52px; margin-top: 42px; }
.can__list li { display: inline-flex; align-items: center; gap: 12px; }

/* magaziny B3: call — the client's sentence and the phone | red panel with the call-back form (#zvonok) */
.call { display: grid; grid-template-columns: 2fr 1fr; padding-bottom: 110px; }
.call__main { border-top: 1px solid var(--ink); padding: 24px 64px 0 0; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.call__text { max-width: 900px; }
.call__tel-wrap { display: grid; gap: 16px; justify-items: start; }
.call__tel { font-size: min(132px, 9.2vw); }
.call__tel:hover { color: var(--accent); }
.call__panel { background: var(--accent); color: var(--white); padding: 24px 22px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 470px; scroll-margin-top: calc(var(--hdr) + 16px); }
.call__form { display: grid; gap: 26px; }
.call__field .field__label { color: var(--white); transition: color 0.25s; }
.call__field input { color: var(--white); border-bottom-color: rgba(255, 255, 255, 0.8); transition: border-color 0.25s, box-shadow 0.25s; }
.call__field input:focus { border-bottom-color: var(--white); box-shadow: 0 1px 0 var(--white); }
.call__field input:-webkit-autofill { -webkit-text-fill-color: var(--white); transition: background-color 99999s; }
.call__field.is-err .field__label { color: var(--ink); }
.call__field.is-err input { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.call__btn { justify-self: start; margin-top: 10px; }
.call__done { display: grid; gap: 22px; align-content: end; justify-items: start; }
.call__mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
.call__mark .dot { width: 12px; height: 12px; background: var(--white); }
.call__done[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .brands__track, .mf__wordwrap, .shp__photo img { will-change: auto; }
}

/* ======================================================================
   adaptive — ADAPTIVE.md §4 (7 магазины · 8 о магазине): the same content, another packaging.
   md 768–1199: side by side as on the desktop, narrower. The big phone numbers are sized by their own column
     (cqw, measured 6.2 em wide at 1440), not by the window — at 768 the call-back panel was pushed off-screen.
     The manifest photo covers its row: the 4:3 stack (the sky polygon is in its percent) is centred by container
     units instead of leaving a blue band under a short picture; the dot track stands in the flow between the
     slogan and the paragraph, so it never crosses them.
   sm <=767: one column — each shop photo over its red panel, the call-back panel under the phone, the manifest
     photo over its red panel, review names in a row that scrolls sideways with the review under it, opt stacked.
   1200+ is untouched: 1440 must match shots/r2.
   ====================================================================== */
@media (max-width: 1199px) {
  .ab-head { padding-bottom: clamp(48px, 8vw, 118px); }
  .ab-head__title { margin-top: clamp(40px, 7.5vw, 108px); }
  .ab-head--short { padding-bottom: clamp(34px, 4.5vw, 54px); }
  .ab-head--short .ab-head__title { margin-top: clamp(40px, 5vw, 62px); }

  .mf__panel { gap: 28px; }
  .mf__title { order: 1; }
  .mf__track { order: 2; position: relative; top: auto; flex: 1 1 110px; min-height: 110px; height: auto; margin: 0 -20px; width: calc(100% + 40px); }
  .mf__foot { order: 3; }

  .ab-text { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(56px, 7vw, 96px); }
  .brands__line { font-size: clamp(64px, 5vw + 44px, 100px); }

  .rw { padding-top: clamp(72px, 10vw, 116px); padding-bottom: clamp(64px, 9vw, 104px); }
  .rw__aside { flex-wrap: wrap; justify-content: flex-end; gap: 10px 24px; }
  .rw__aside .blink { white-space: nowrap; }
  .rw__body { grid-template-columns: clamp(220px, 28vw, 338px) minmax(0, 1fr); }
  .rw__side { padding-left: clamp(24px, 4vw, 74px); }
  .rw__text { font-size: clamp(20px, 1.2vw + 16px, 34px); }

  .opt__main { padding-right: 40px; }
  .opt__text { font-size: clamp(20px, 1.2vw + 15px, 30px); }
  .opt__panel { container-type: inline-size; }
  .opt__tel { font-size: min(100px, 15.6cqw); }

  .call { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
  .call__main { container-type: inline-size; padding-right: 40px; }
  .call__tel { font-size: min(132px, 15.6cqw); }
}

/* the label hangs in the left gutter while the centred 660 column leaves room for it (from ~960 px) */
@media (max-width: 1023px) {
  .ab-text__label { position: static; margin-bottom: 22px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .mf { grid-template-columns: clamp(280px, 33vw, 340px) minmax(0, 1fr); }
  .mf__photo { container-type: size; }
  .mf__stack {
    container-type: inline-size; top: 50%; left: 50%; width: max(100cqw, 133.334cqh);
    margin: calc(max(100cqw, 133.334cqh) * -0.375) 0 0 calc(max(100cqw, 133.334cqh) * -0.5);
  }
}

@media (max-width: 767px) {
  .ab-head__meta { flex-direction: column; gap: 10px; margin-top: 26px; }
  .ab-head__lead { margin-top: 18px; }

  /* magaziny B1: each shop — the photo, under it the red panel */
  .shp { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .shp__photo { aspect-ratio: 4 / 3; }
  .shp__panel { min-height: 0; gap: 34px; padding: 20px 20px 24px; }
  .shp__nav { left: 14px; right: 14px; bottom: 14px; }
  .shp__nav .arr { width: 34px; height: 34px; }

  .can { padding-top: 72px; padding-bottom: 64px; }
  .can__list { flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
  .can__list li { display: block; }                         /* a wrapped fact keeps its dot on the first line */
  .can__list .dot { margin-right: 10px; vertical-align: 0.1em; }

  /* magaziny B3: the phone, the call-back panel under it */
  .call { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .call__main { padding: 22px 0 0; gap: 34px; }
  .call__panel { min-height: 0; margin-top: 34px; gap: 40px; padding: 22px 20px 28px; }

  /* o-magazine B2: the photo, under it the red panel (the track between the slogan and the paragraph) */
  .mf { grid-template-columns: minmax(0, 1fr); }
  .mf__photo { order: -1; }
  .mf__panel { padding: 22px 20px 26px; }

  .brands__line { padding: 20px 0 8px; }

  /* B4: names in a row that scrolls sideways, the review under it */
  .rw__aside { justify-content: flex-start; }
  .rw__body { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .rw__index {
    position: relative; display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); border-top: 1px solid var(--ink); border-bottom: 1px solid #e2e2e2;
  }
  .rw__index::-webkit-scrollbar { display: none; }
  .rw__index li { flex: 0 0 auto; }
  .rw__name { grid-template-columns: 16px auto; padding: 15px 0 14px; border-bottom: 0; white-space: nowrap; }
  .rw__num { display: none; }
  .rw__side { padding: 26px 0 0; }
  .rw__item { gap: 22px; }
  .rw__text { line-height: 1.3; }
  .rw__nav { margin-top: 30px; }

  /* B5 opt: the paragraph, under it the red panel */
  .opt { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .opt__main { padding: 22px 0 0; gap: 26px; }
  .opt__panel { min-height: 280px; margin-top: 34px; gap: 40px; }
}

/* ======================================================================
   P8 · seasons (logic/NEW_MAP_SEASON.md §1, §5): both seasons in the HTML ([data-only]), tokens of css/base.css repaint
   the panels (--accent red in winter, sky #0a6fd1 in summer), no new colours.
   ====================================================================== */
/* magaziny B1: «Зенит» is the one shop of both seasons (client #932) — photo 2/3 + panel 1/3 (coolzone home B8) */
.shp--one { grid-template-columns: minmax(0, 1fr); }
.shp--one .shp__col { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: none; }
.shp--one .shp__panel { min-height: 0; }
.shp--one .shp__info { max-width: 400px; }
.shp__mail a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity var(--tr); }
.shp__mail a:hover { opacity: 0.78; }
/* 09.10 walk #24: the card holds the home block's facts (hours, phone, how to get there), text at the home block's size;
   the name opens the shop on Yandex Maps */
.shp__facts { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; max-width: 520px; }
.shp__facts dt { font-size: 13px; opacity: 0.9; margin-bottom: 6px; }
.shp__facts dd { margin: 0; font-size: clamp(20px, 1.5vw, 24px); line-height: 1.25; }
.shp__facts dd { white-space: nowrap; }
.shp__facts a { color: inherit; }
.shp__info .t15 { font-size: 18px; line-height: 1.45; }
.shp__info .shp__tel { font-size: clamp(20px, 1.5vw, 24px); }
.shp__org { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.shp__org:hover { opacity: 0.8; }
.shp--one .shp__panel { justify-content: space-between; gap: 28px; }
@media (max-width: 767px) { .shp__facts { gap: 14px; } .shp__facts dd { white-space: normal; } }

/* magaziny B2 summer: the news of mailsport — date line, the title large (as the winter line), the text */
.nws__meta { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.nws__meta time { color: var(--gray); }
.nws__text { max-width: 560px; margin: 26px auto 0; }

/* magaziny B3 summer: «Контакты для оптовиков» — the client's line over the summer phone */
.call__top { display: grid; gap: 22px; }
.call__label { display: flex; align-items: center; gap: 12px; }
.call__msg { min-height: 1.35em; color: var(--white); }
.call__num { color: var(--white); }

/* magaziny B4 summer: the legal address — the client's table in thin lines, as the delivery terms table */
.jur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gap); padding-bottom: 110px; }
.jur__title { border-top: 1px solid var(--ink); padding-top: 24px; }
.jur__list { margin: 0; border-top: 1px solid var(--ink); }
.jur__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 24px; padding: 22px 0 24px; border-bottom: 1px solid #e4e4e4; }
.jur__row dt { color: var(--gray); padding-top: 3px; line-height: 1.35; }
.jur__row dd { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 400; }

/* o-magazine B2 summer: the panel of the season + a summer landscape drawn in code — sky of the accent, the white sun
   (the brand dot), hills of the summer footer (refs/summer L03), AUTHOR rising from behind the front hill (R24 by summer) */
.mfs .mf__foot { margin-top: auto; }
.mfs__label { display: flex; align-items: center; gap: 12px; }
.mfs__label .dot { background: var(--white); }
.mfs__scene {
  position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 880px; overflow: hidden; container-type: inline-size;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--accent-rgb), 0.62) 40%, rgba(var(--accent-rgb), 0.22) 74%, #ffffff 100%);
}
.mfs__sun {
  position: absolute; right: 13%; top: 12%; width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--white);
  box-shadow: 0 0 0 2.4cqw rgba(255, 255, 255, 0.16), 0 0 0 5cqw rgba(255, 255, 255, 0.07); will-change: transform;
}
.mfs__hill { position: absolute; left: -3%; width: 106%; max-width: none; will-change: transform; }
.mfs__hill--back { bottom: 12%; height: 30%; }
.mfs__hill--back path { fill: rgba(var(--accent-rgb), 0.55); }
.mfs__hill--front { bottom: -1%; height: 34%; }
.mfs__hill--front path { fill: var(--lime); }
.mfs__wordwrap { position: absolute; left: 0; right: 0; top: 0; height: 91%; pointer-events: none; will-change: transform; }
.mfs__word {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; white-space: nowrap;
  font-family: var(--f-disp); font-weight: 900; font-size: 31cqw; line-height: 0.74; letter-spacing: -0.012em;
  text-transform: uppercase; color: var(--white); text-shadow: 0 0.04em 0.18em rgba(var(--accent-rgb), 0.35);
}
.mfs__word .ch { display: inline-block; will-change: transform; }

/* o-magazine B4 summer: the two articles — panels with the brand word large, «Подробнее» in brackets */
.arts { padding-top: 116px; padding-bottom: 110px; }
.arts__head { margin-bottom: 30px; }
.arts__all { transition: color var(--tr); }
.arts__all:hover, .arts__all:focus-visible { color: var(--accent); }
.arts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.arts__card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 430px;
  padding: 24px 22px 26px; overflow: hidden; background: var(--accent); color: var(--white);
}
.arts__card--b { background: var(--surface); color: var(--ink); }
.arts__top { display: flex; justify-content: space-between; align-items: center; }
.arts__card .dot { background: var(--white); }
.arts__card--b .dot { background: var(--accent); }
.arts__num { opacity: 0.8; }
.arts__word {
  font-family: var(--f-disp); font-weight: 900; font-size: clamp(96px, 7vw + 50px, 210px); line-height: 0.76; letter-spacing: -0.005em;
  text-transform: uppercase; transition: transform 0.6s var(--ease-out);
}
.arts__card:hover .arts__word, .arts__card:focus-visible .arts__word { transform: translateY(-10px); }
.arts__card:hover .blink > span::after, .arts__card:focus-visible .blink > span::after { transform: scaleX(1); }
.arts__more { align-self: flex-start; }

/* ======================================================================
   P8 · СТАТЬИ (stati.html, mailsport /articles/): the list — H1 «Статьи» in caps, two rows «номер · слово бренда · первый
   абзац · [ подробнее ]»; one article (?a=author|horst) — the brand word across the page, the column «Статьи» on the left
   (switch, the brand's catalogue, «Вернуться»), the client's text on the right: the first paragraph large, the rest in 660.
   Which view is shown is set before the first paint by the inline script of the page (html[data-article]).
   ====================================================================== */
.st-art { display: none; }
html[data-article] .st-list { display: none; }
html[data-article="author"] .st-art[data-st-art="author"], html[data-article="horst"] .st-art[data-st-art="horst"] { display: block; }

.st-index { margin: 0; padding-top: 10px; padding-bottom: 120px; list-style: none; }
.st-row {
  position: relative; display: grid; grid-template-columns: 70px minmax(0, 1.25fr) minmax(0, 1fr) auto; column-gap: var(--gap);
  align-items: end; padding: 26px 0 30px; border-top: 1px solid var(--ink);
}
.st-row:last-child { border-bottom: 1px solid var(--ink); }
.st-row__num { align-self: start; padding-top: 10px; }
.st-row__word {
  margin: 0; font-family: var(--f-disp); font-weight: 900; font-size: clamp(96px, 9vw + 40px, 220px); line-height: 0.76;
  letter-spacing: -0.008em; text-transform: uppercase; transition: color 0.35s;
}
.st-row__word a::after { content: ""; position: absolute; inset: 0; }           /* the whole row opens the article */
.st-row__word .ch { display: inline-block; }
.st-row:hover .st-row__word { color: var(--accent); }
.st-row__lead { max-width: 520px; padding-bottom: 4px; }
.st-row__more { position: relative; z-index: 1; align-self: end; white-space: nowrap; padding-bottom: 4px; }
.st-row:hover .st-row__more > span::after { transform: scaleX(1); }
.st-row__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.st-row:hover .st-row__line { transform: scaleX(1); }

.st-art__head { padding-bottom: 0; text-align: left; }
.st-art__wordbox { display: flex; align-items: flex-end; overflow: hidden; margin-top: 48px; padding-top: 0.04em; }
/* the brand dot closes the word like a full stop (the «O» disc of the logo, the dot sign of the system) */
.st-art__dot { flex: none; font-size: 24vw; width: 0.12em; height: 0.12em; margin: 0 0 0.05em 0.035em; border-radius: 50%; background: var(--accent); }
.st-art__word {
  margin: 0; font-family: var(--f-disp); font-weight: 900; font-size: 24vw; line-height: 0.74; letter-spacing: -0.012em;
  text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
.st-art__word .ch { display: inline-block; will-change: transform; }
.st-art__body {
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gap);
  padding-top: 40px; padding-bottom: 120px; border-top: 1px solid var(--ink); margin: 0 var(--pad); padding-left: 0; padding-right: 0;
}
.st-art__side { position: sticky; top: calc(var(--hdr) + 30px); align-self: start; display: grid; gap: 26px; justify-items: start; }
.st-art__label { display: flex; align-items: center; gap: 12px; }
.st-art__nav { display: grid; width: 100%; border-top: 1px solid #e2e2e2; }
.st-art__nav a { display: flex; align-items: center; gap: 12px; padding: 12px 0 11px; border-bottom: 1px solid #e2e2e2; color: var(--gray); transition: color var(--tr); }
.st-art__nav a .dot { width: 8px; height: 8px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; transition: background-color 0.3s, box-shadow 0.3s; }
.st-art__nav a:hover, .st-art__nav a.is-on { color: var(--ink); }
.st-art__nav a.is-on .dot { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.st-art__act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.st-art__text { max-width: 940px; padding-left: calc(var(--col) * 0.22); }
.st-art__lead { font-size: 30px; line-height: 1.24; font-weight: 300; letter-spacing: -0.01em; text-wrap: pretty; }
.st-art__col { max-width: 660px; display: grid; gap: 16px; margin-top: 52px; }
.st-art__last { margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--ink); font-weight: 400; }

/* adaptive — ADAPTIVE.md §4 for the P8 parts: the same content, another packaging.
   md: the shop panel takes 2/5; the legal rows and the article cards keep two columns; the article column «Статьи» narrower.
   sm <=767: the shop photo over its panel; the legal table one column; the summer scene over its panel; the cards stacked;
   the list rows — the word over the paragraph; an article — the column «Статьи» becomes a row over the text */
@media (max-width: 1199px) {
  .shp--one .shp__col { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .jur { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); padding-bottom: clamp(72px, 9vw, 110px); }
  .arts { padding-top: clamp(72px, 10vw, 116px); padding-bottom: clamp(64px, 9vw, 110px); }
  .arts__card { min-height: 340px; }
  .st-row { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); row-gap: 18px; }
  .st-row__more { grid-column: 3; justify-self: start; }
  .st-art__body { grid-template-columns: clamp(220px, 26vw, 338px) minmax(0, 1fr); }
  .st-art__text { padding-left: clamp(16px, 3vw, 74px); }
  .st-art__lead { font-size: clamp(20px, 1.2vw + 16px, 30px); }
}
@media (max-width: 767px) {
  .shp--one .shp__col { grid-template-columns: minmax(0, 1fr); }
  .nws__meta { margin-bottom: 22px; }
  .call__top { gap: 16px; }
  .jur { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-bottom: 72px; }
  .jur__title { padding-top: 22px; padding-bottom: 20px; }
  .jur__row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 18px 0 20px; }
  .mfs__scene { order: -1; }
  .arts__grid { grid-template-columns: minmax(0, 1fr); }
  .arts__card { min-height: 260px; padding: 20px 18px 22px; }
  .arts__word { font-size: clamp(84px, 28vw, 140px); }
  .st-index { padding-bottom: 72px; }
  .st-row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 14px; padding: 20px 0 24px; align-items: start; }
  .st-row__word { font-size: clamp(76px, 26vw, 130px); }
  .st-row__lead, .st-row__more { grid-column: 2; }
  .st-row__more { justify-self: start; }
  .st-art__wordbox { margin-top: 30px; }
  .st-art__body { grid-template-columns: minmax(0, 1fr); padding-top: 22px; padding-bottom: 72px; }
  .st-art__side { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 30px; }
  .st-art__nav { display: flex; width: auto; gap: 22px; border-top: 0; }
  .st-art__nav a { border-bottom: 0; padding: 4px 0; }
  .st-art__act { width: 100%; gap: 14px 24px; }
  .st-art__text { padding-left: 0; }
  .st-art__lead { line-height: 1.3; }
  .st-art__col { margin-top: 34px; }
}

/* sky line of img/scene/manifest.webp, measured 26.09: a smooth colour model of the clear sky (2-D polynomial fitted on
   rows 0..285 of 1536), per column the first pixel from the top that leaves it by > 30 in RGB sum (> 70 over the heads,
   x 760..1150, to skip their soft glow), notches <= 7 px closed, Douglas-Peucker 1.6 px -> 262 points, percent of the box.
   Everything below the line — peaks and the couple — is drawn again ABOVE the brand word (R24: the word stands behind them).
   Another photo = another line: the polygon is valid only for this file. */
.mf__fg { clip-path: /*SKY*/polygon(0% 100%, 0% 28.19%, 0.00% 28.19%, 0.59% 28.52%, 0.68% 28.91%, 1.07% 28.39%, 1.86% 27.86%, 2.25% 28.06%, 2.74% 27.54%, 3.03% 27.54%, 3.52% 27.99%, 3.91% 27.86%, 4.01% 27.28%, 4.10% 27.41%, 4.30% 27.15%, 4.89% 27.28%, 5.67% 26.69%, 5.96% 26.17%, 6.16% 26.17%, 7.03% 25.39%, 7.52% 25.52%, 8.40% 26.30%, 9.28% 26.56%, 9.97% 25.65%, 10.36% 25.59%, 10.94% 24.87%, 11.53% 24.80%, 12.41% 23.96%, 13.19% 24.48%, 14.17% 23.96%, 15.14% 24.87%, 15.44% 25.46%, 15.53% 25.20%, 15.63% 25.72%, 15.93% 25.91%, 16.32% 25.78%, 16.71% 26.17%, 16.90% 25.85%, 17.59% 25.98%, 17.68% 26.43%, 17.88% 26.30%, 18.17% 26.43%, 18.66% 27.21%, 18.86% 27.21%, 19.25% 27.67%, 19.64% 27.80%, 19.93% 28.19%, 20.32% 28.26%, 20.52% 28.71%, 21.10% 29.17%, 21.30% 28.97%, 21.79% 29.10%, 23.06% 29.69%, 23.55% 30.08%, 23.64% 29.88%, 23.94% 29.82%, 24.33% 30.27%, 25.60% 30.21%, 26.48% 30.66%, 26.97% 30.66%, 27.06% 30.99%, 28.24% 30.27%, 28.82% 30.27%, 28.92% 29.95%, 29.12% 29.82%, 29.41% 29.75%, 29.51% 30.01%, 29.80% 30.01%, 30.09% 29.56%, 30.68% 29.43%, 30.97% 28.91%, 31.36% 28.71%, 31.75% 28.12%, 31.95% 28.12%, 32.14% 27.86%, 32.63% 27.86%, 33.90% 28.65%, 34.68% 28.65%, 35.76% 29.23%, 36.44% 29.17%, 36.64% 28.97%, 36.74% 29.10%, 37.03% 28.78%, 37.52% 29.23%, 37.62% 29.88%, 37.71% 29.43%, 37.81% 29.75%, 38.01% 29.23%, 38.40% 29.49%, 40.06% 29.10%, 40.35% 28.91%, 40.55% 28.19%, 40.64% 26.82%, 40.84% 26.56%, 41.04% 22.01%, 41.13% 22.33%, 41.33% 22.27%, 41.52% 22.07%, 41.62% 20.90%, 41.91% 20.70%, 42.01% 20.90%, 42.40% 21.03%, 42.79% 19.86%, 43.19% 20.12%, 43.28% 19.79%, 43.87% 20.31%, 44.16% 19.99%, 44.55% 20.05%, 44.65% 20.38%, 45.43% 20.83%, 45.82% 20.96%, 45.92% 20.70%, 46.02% 20.96%, 46.31% 21.16%, 46.70% 21.22%, 46.80% 21.09%, 46.90% 21.48%, 47.39% 21.68%, 48.36% 22.53%, 49.34% 24.02%, 49.63% 25.07%, 49.93% 27.67%, 50.12% 27.47%, 50.22% 26.30%, 50.32% 26.37%, 50.51% 25.85%, 50.81% 25.52%, 51.20% 25.59%, 51.29% 26.50%, 51.39% 26.43%, 51.49% 25.46%, 51.69% 25.26%, 51.88% 26.17%, 51.98% 26.17%, 52.08% 24.87%, 52.17% 26.04%, 52.37% 25.98%, 52.47% 25.26%, 52.56% 25.91%, 52.66% 25.91%, 52.96% 25.20%, 53.05% 25.72%, 53.64% 26.04%, 53.93% 25.78%, 54.52% 26.37%, 55.01% 26.63%, 55.20% 26.56%, 55.59% 27.08%, 55.89% 27.08%, 56.08% 27.60%, 56.18% 27.08%, 56.38% 27.21%, 56.47% 27.08%, 56.67% 27.67%, 56.86% 27.54%, 56.96% 27.73%, 57.35% 27.60%, 57.45% 27.34%, 58.13% 28.26%, 58.33% 28.19%, 58.72% 28.39%, 59.40% 28.32%, 59.50% 28.12%, 59.70% 28.12%, 60.48% 28.58%, 60.77% 28.97%, 60.97% 28.78%, 61.85% 29.43%, 62.24% 29.43%, 62.63% 29.88%, 63.21% 29.95%, 63.41% 29.69%, 63.80% 29.88%, 64.39% 29.75%, 64.97% 30.01%, 65.95% 30.08%, 66.05% 30.34%, 66.63% 30.21%, 67.42% 29.36%, 67.71% 29.17%, 67.90% 29.23%, 68.00% 28.97%, 68.30% 28.78%, 68.49% 28.91%, 69.27% 28.52%, 69.37% 28.91%, 70.15% 28.26%, 70.25% 27.99%, 70.64% 27.99%, 70.74% 28.26%, 70.93% 28.19%, 71.03% 28.32%, 71.23% 27.99%, 71.42% 28.12%, 71.52% 27.99%, 71.62% 28.45%, 72.01% 28.19%, 72.79% 28.39%, 72.89% 28.26%, 73.57% 28.26%, 73.96% 27.99%, 74.06% 28.39%, 75.13% 28.12%, 75.23% 28.52%, 75.62% 28.12%, 75.82% 28.26%, 75.92% 27.86%, 76.21% 28.12%, 76.31% 27.60%, 77.67% 27.47%, 77.77% 27.73%, 78.65% 27.47%, 78.75% 27.15%, 79.14% 27.34%, 79.34% 27.21%, 79.43% 27.60%, 80.31% 27.73%, 80.41% 28.12%, 80.51% 27.73%, 80.61% 27.73%, 80.70% 27.99%, 81.19% 28.26%, 81.78% 29.10%, 82.07% 28.78%, 82.36% 28.78%, 82.46% 28.52%, 84.81% 28.58%, 85.00% 28.39%, 85.39% 28.52%, 85.69% 28.12%, 85.78% 28.39%, 85.98% 28.39%, 86.08% 28.78%, 87.35% 27.80%, 87.64% 27.80%, 88.42% 28.26%, 88.72% 28.65%, 89.11% 28.65%, 90.38% 29.43%, 91.35% 29.30%, 91.55% 29.43%, 91.65% 29.75%, 92.13% 29.95%, 92.23% 29.69%, 92.92% 29.95%, 93.21% 29.56%, 93.50% 29.82%, 93.89% 29.82%, 93.99% 30.08%, 94.38% 29.95%, 95.26% 29.95%, 95.46% 30.08%, 95.75% 29.82%, 96.04% 29.82%, 96.14% 30.08%, 96.53% 30.08%, 96.82% 30.34%, 97.22% 30.40%, 97.31% 30.86%, 98.29% 30.01%, 98.58% 30.14%, 98.78% 29.69%, 98.97% 29.82%, 100.00% 29.82%, 100% 29.82%, 100% 100%); }

/* F10 (walk 12.10): the shop review panel on «О магазине» */
.rv-form { display: grid; gap: 18px; padding: 8px 0 0; }
.rv-form__send { display: flex; align-items: center; gap: 14px; }
.rv-form__ok { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.rv-form__ok svg { width: 12px; height: 12px; color: var(--white); }
.rv-form.is-sent .rv-form__ok { opacity: 1; transform: none; }