/* «О нас» s1 — «Журнал с рельсами», раунд 2. Эталон: dishoom.com/covent-garden (рельсы между главами, рамки фото, деко-иллюстрации,
   сплошная полоса глав снизу). Бренд: канон info.theraki.ru (фарфор, navy, голубой, гжель; только тонкие линии). Контракт движения:
   docs/redesign/v2/about/s1/MOTION.md (раунд 2 — разделы R2.*). Текст, кнопки, ссылки неподвижны и видимы с 0 мс; анимируется декор и фото. */

.jr {
  --bg: #f5fafd; --ink: #17313d; --soft-ink: #5c6e77; --navy: #1d537a; --sky: #b5daeb; --sky-tint: #e6f2f8; --red: #e91b1a;
  --navy-hover: color-mix(in srgb, var(--navy) 80%, var(--sky));   /* палитра мудборда: navy, голубой, фарфор, алый — кобальт/бирюза гжели (#17506b, #2b7da4) сняты */
  --w: min(1200px, 100% - 16px);
  --pad: 20px;                 /* поле текста внутри рельс */
  --gut: 8px;                  /* поле страницы снаружи рельс: (экран − ширина главы) / 2 */
  --mat: 18px;                 /* фарфоровое паспарту героя */
  --bar: 50px;                 /* полоса глав */
  --fb: 3px; --fg: 5px;        /* рамка фото: голубая линия и зазор до неё */
  --soft: cubic-bezier(.22, 1, .36, 1);      /* только ответ на тап ≤ 200 мс (кнопки) */
  /* кинетика 09.10 (жалоба «дёргано и быстро»): разовые входы — мягкий разгон и долгая посадка, не короче эталона Dishoom (500–1000 мс) */
  --glide: cubic-bezier(.45, 0, .15, 1);     /* половина пути за 35 % времени, 90 % за 62 %, пик 3,1× средней (у soft: 13 % / 37 % / 4,5×) */
  --io: cubic-bezier(.65, 0, .35, 1);        /* симметричная: половина за 50 %, пик 2,9× */
  background: var(--bg); color: var(--ink);
  padding-bottom: var(--bar);
}
@media (min-width: 1024px) { .jr { --w: min(1200px, 100% - 80px); --pad: 72px; --gut: max(40px, (100vw - 1200px) / 2); --mat: 24px; --fb: 3px; --fg: 7px; } }
body.sh.jr { background: var(--bg); background-image: none; }   /* узор оболочки снят: у эталона чистая бумага, рельсы и рамки несут страницу */
.jr img { max-width: 100%; }
.j-main { overflow-x: clip; }
.j-bleed { margin-inline: calc(-1 * (var(--pad) + var(--gut))); }

/* ═════ Кнопки и ссылки (видны и нажимаются с 0 мс) ═════ */
.j-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--navy); color: #fff; border: 1.5px solid var(--navy); text-decoration: none; font: 600 15px/1.2 var(--sans); letter-spacing: .01em;
  transition: background-color .2s var(--soft), color .2s var(--soft), transform .16s var(--soft); text-align: center; }
.j-btn:active { transform: scale(.97); }
.j-btn--line { background: transparent; color: var(--navy); }
.j-btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.j-btn--ghost { background: rgba(29, 83, 122, .28); color: #fff; border-color: rgba(255, 255, 255, .85); }
@media (hover: hover) {
  .j-btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }
  .j-btn--light:hover { background: var(--sky); border-color: var(--sky); color: var(--navy); }
  .j-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
}
.j-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font: 600 16px/1.3 var(--sans); text-decoration: underline;
  text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.j-actions { margin-top: 26px !important; }

/* ═════ Герой: паспарту, оттиск → цвет, рельса по полю, знак ═════ */
.j-hero { position: relative; min-height: calc(100svh - var(--bar)); display: grid; place-items: center; color: #fff; isolation: isolate; }
.j-hero-mat { position: absolute; inset: var(--mat); overflow: hidden; z-index: -1; background: var(--navy); }
.j-hero-media { position: absolute; inset: 0; will-change: transform; }
.j-hero-zoom { position: absolute; inset: 0; transform-origin: 50% 40%; }
.j-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.j-hero-media::after { content: ""; position: absolute; inset: 0;   /* вуаль navy (палитра мудборда): фото спокойнее, знак и строка читаются (судьи r2: «пёстрый фон спорит со знаком») */
  background: radial-gradient(ellipse 62% 46% at 50% 50%, rgba(29, 83, 122, .62), rgba(29, 83, 122, .16) 72%, transparent 100%),
    linear-gradient(180deg, rgba(29, 83, 122, .62) 0%, rgba(29, 83, 122, .44) 38%, rgba(29, 83, 122, .52) 62%, rgba(29, 83, 122, .86) 100%); }
.j-hero-rail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.j-hero-rail path { fill: none; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.j-hero-rail .r1 { stroke: var(--navy); stroke-width: 1.5; }
.j-hero-rail .r3 { stroke: var(--sky); stroke-width: 3; }
@media (min-width: 1024px) { .j-hero-rail .r1 { stroke-width: 1.8; } .j-hero-rail .r3 { stroke-width: 3.5; } }
.j-hero-knot { left: 50%; top: calc(100% - var(--mat) / 2); z-index: 2; }
.j-hero-in { width: min(100% - 56px, 900px); text-align: center; padding: 104px 0 64px; }
.j-hero-logo { width: clamp(250px, 34vw, 480px); height: auto; display: block; margin: 0 auto clamp(24px, 3vw, 40px); }
.j-hero h1 { margin: 0 auto; max-width: 30ch; font: 500 clamp(21px, 2.1vw, 30px)/1.25 var(--serif); letter-spacing: .005em; text-wrap: balance;
  text-shadow: 0 1px 18px rgba(29, 83, 122, .6); }
.j-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* вход (R2.1): только у j-motion; текст и кнопки не участвуют */
.j-motion .j-hero-zoom { transform: scale(1.12); }
.j-motion .j-hero-color { clip-path: polygon(50% -30%, 50% -30%, 52% 110%, 48% 110%); }
.j-motion .j-hero-rail path { stroke-dashoffset: 1; }
.j-motion .j-hero-logo { -webkit-mask-image: linear-gradient(100deg, #000 34%, transparent 66%); mask-image: linear-gradient(100deg, #000 34%, transparent 66%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.j-hero.is-go .j-hero-zoom { transform: none; transition: transform 2s var(--glide); }
.j-hero.is-go .j-hero-color { clip-path: polygon(50% -30%, 50% -30%, 300% 110%, -200% 110%); transition: clip-path 1.4s cubic-bezier(.5, 0, .2, 1); }
.j-hero.is-go .j-hero-rail path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--io) .15s; }
.j-hero.is-go .j-hero-logo { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 1.2s var(--glide) .1s, mask-position 1.2s var(--glide) .1s; }
.j-hero.is-go .j-hero-knot { transform: none; opacity: 1; transition-delay: 1.5s, 1.5s; }
.j-hero.is-done .j-hero-print { visibility: hidden; }
.j-hero.is-done .j-hero-color { clip-path: none; transition: none; }
.j-hero.is-done .j-hero-logo { -webkit-mask-image: none; mask-image: none; }
.j-static .j-hero-print { display: none; }

/* ═════ Полоса глав снизу: сплошной фарфор, как полоса эталона ═════ */
.j-chapters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--bg);
  box-shadow: inset 0 1px 0 rgba(29, 83, 122, .55); padding-bottom: env(safe-area-inset-bottom); transition: transform .44s var(--glide); }
.j-chapters.is-hidden { transform: translateY(100%); }
.j-chapters-in { position: relative; display: flex; gap: 4px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 3px 10px 0; }
.j-chapters-in::-webkit-scrollbar { display: none; }
.j-chapters-in.is-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.j-chapters-in.is-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.j-chapters-in.is-l.is-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.j-chapters-in > a:first-child { margin-left: auto; } .j-chapters-in > a:nth-last-child(2) { margin-right: auto; }   /* центр без потери начала при переполнении */
.j-chapters a { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--navy); text-decoration: none;
  font: 600 14px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; }
.j-chapters a + a::before { content: ""; position: absolute; left: -4px; top: 50%; width: 5px; height: 5px; background: var(--navy); transform: translate(-50%, -50%) rotate(45deg); opacity: .55; }
.j-chapters a[aria-current="true"] { color: var(--ink); }
.j-chapters-bar { position: absolute; left: 0; bottom: 5px; width: 100px; height: 2px; background: var(--red); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .48s var(--glide); pointer-events: none; }
@media (min-width: 1024px) { .j-chapters a { padding: 0 18px; font-size: 14.5px; } }

/* ═════ Главы и рельсы ═════ */
.j-sec { position: relative; width: var(--w); margin: 0 auto; padding: 44px var(--pad) 108px; }
@media (min-width: 1024px) { .j-sec { padding-top: 64px; padding-bottom: 132px; } }
.j-rail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.j-rail path { fill: none; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* две тонкие параллельные линии (правило бренда: только тонкие линии, не толще 3 px): navy справа от хода, голубая слева */
.j-rail .r1 { stroke: var(--navy); stroke-width: 1.5; }
.j-rail .r3 { stroke: var(--sky); stroke-width: 3; }
@media (min-width: 1024px) { .j-rail .r1 { stroke-width: 1.8; } .j-rail .r3 { stroke-width: 3.5; } }
.j-static .j-rail path { stroke-dashoffset: 0; }
.j-knot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 1; pointer-events: none; transform: rotate(-35deg) scale(.6); opacity: 0;
  transition: transform .86s var(--glide), opacity .26s linear; }
.j-knot svg { display: block; width: 100%; height: 100%; }
.j-knot.on, .j-static .j-knot { transform: none; opacity: 1; }
@media (min-width: 1024px) { .j-knot { width: 34px; height: 34px; margin: -17px 0 0 -17px; } }
.j-sec > :not(.j-rail):not(.j-knot) { position: relative; z-index: 1; }

/* ═════ Типографика ═════ */
.jr h2 { margin: 0 0 18px; font: 500 34px/1.08 var(--serif); color: var(--ink); letter-spacing: -.005em; text-wrap: balance; }
@media (min-width: 1024px) { .jr h2 { font-size: 52px; line-height: 1.03; margin-bottom: 24px; } }
.j-copy p { margin: 0 0 16px; font: 500 16px/1.72 var(--sans); }
@media (min-width: 1024px) { .j-copy p { font-size: 17px; line-height: 1.8; } .j-copy:not(.j-copy--center) p { hyphens: auto; } }
.j-copy--center { max-width: 620px; margin: 0 auto 8px; text-align: left; }   /* телефон: абзацы по левому краю (читаемость), центр только на ПК */
@media (min-width: 1024px) { .j-copy--center { text-align: center; } }
.j-lead { font-weight: 600 !important; color: var(--navy); }
.j-pull { font: 500 28px/1.15 var(--serif) !important; color: var(--navy) !important; margin-bottom: 18px !important; hyphens: manual !important; }
@media (min-width: 1024px) { .j-pull { font-size: 42px !important; } }
.j-copy--drop p:first-child::first-letter { float: left; font: 500 5.1em/.78 var(--serif); color: var(--navy); margin: .1em .12em 0 -.02em; }

.j-head { text-align: center; margin: 0 auto 18px; max-width: 900px; }
.j-head--tri { position: relative; padding-bottom: 22px; margin-bottom: 26px; }
.j-head--tri h2 { display: block; }
.j-head--tri::after { content: ""; position: absolute; left: 50%; bottom: 0; width: calc(min(560px, 100%) - 48px); height: 7px; transform: translateX(-50%);
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--sky), var(--sky)) 0 4px / 100% 3px no-repeat; }
.j-head--tri::before { content: ""; position: absolute; left: 50%; bottom: -5px; width: min(560px, 100%); height: 16px; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M0 0h18L9 16Z' fill='%23b5daeb'/%3E%3C/svg%3E") 0 0 / 18px 16px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M0 0h18L9 16Z' fill='%23b5daeb'/%3E%3C/svg%3E") 100% 0 / 18px 16px no-repeat; }
/* линейка раскрывается от центра (in-view), треугольники встают после неё */
.j-motion .j-head--tri::after { transform: translateX(-50%) scaleX(0); transition: transform 1s var(--glide); }
.j-motion .j-head--tri::before { opacity: 0; transition: opacity .3s linear .5s; }
.j-motion .j-head--tri.is-in::after { transform: translateX(-50%) scaleX(1); }
.j-motion .j-head--tri.is-in::before { opacity: 1; }

/* ═════ Рамка фото (эталон: толстая цветная рамка с зазором) ═════ */
.j-frame { display: block; margin: 0; }
.j-frame-in { display: block; position: relative; overflow: hidden; border: 1.5px solid var(--navy); background: var(--bg); isolation: isolate; }
/* двойная волосяная рамка (как фото-рамки эталона): navy 1,5 px снаружи, зазор фарфора, голубая 3 px внутри; лежит поверх фото */
.j-frame-in::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 var(--fg) var(--bg), inset 0 0 0 calc(var(--fg) + var(--fb)) var(--sky); z-index: 2; pointer-events: none; }
.j-frame-in img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
figure.j-frame figcaption, .j-special figcaption { margin-top: 12px; text-align: center; font: italic 500 19px/1.2 var(--serif); color: var(--navy); }
.j-frame--wide .j-frame-in { aspect-ratio: 3 / 2; }
.j-frame--tall .j-frame-in { aspect-ratio: 2 / 3; }

/* ═════ Вступление ═════ */
.j-welcome { display: grid; gap: 30px; }
@media (min-width: 1024px) { .j-welcome { grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; } .j-welcome .j-frame { margin-left: -24px; } }

/* ═════ История: колонна, луч, рак ═════ */
.j-story { display: grid; gap: 30px; }
/* окно в живую фреску (Наталья через владельца, боты 730/756/758): арка, двойная фарфоровая рамка как у фото, внутри движок главной фрески */
.j-story-art { position: relative; margin: 0; padding: 9px; justify-self: center; width: min(100%, 420px);
  border: 1.5px solid var(--navy); border-radius: 50% 50% 22px 22px / 40% 40% 22px 22px; background: #fff; }
.j-story-art::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--sky); border-radius: inherit; pointer-events: none; }
.sa-win { position: relative; aspect-ratio: 660 / 825; overflow: hidden; isolation: isolate; background: #efe4cc;
  border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px; }
.sa-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* сцена — вся картина 1536×2752, сдвинута так, что в окне кусок x 870…1530, y 1640…2465 */
.sa-win .sa-stage { position: absolute; left: -131.818%; top: -198.788%; width: 232.727%; height: 333.576%; }
.sa-win .stage { position: absolute; inset: 0; }
.sa-win .stage img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.sa-win .layer { will-change: transform; }
.sa-win .depth { position: absolute; inset: 0; }
.sa-win .glint { position: absolute; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light; opacity: .55;
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.sa-win .glint i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; transform: translateX(-120%) skewX(-30deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 50%, rgba(255,255,255,0)); }
@keyframes j-breathe { from { transform: scaleX(1); } to { transform: scaleX(1.035); } }
.j-flag { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 500 30px/1 var(--serif); color: var(--ink); }
.j-flag-mark { position: relative; width: 84px; height: 26px; background: var(--sky); }
.j-flag-mark i { position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 20px solid var(--navy); }
.j-story-lead { margin: 0 0 14px; font: 500 22px/1.35 var(--serif); color: var(--ink); }
.j-story-soft { margin: 0; font: 400 19px/1.6 var(--sans); color: var(--soft-ink); }
@media (min-width: 1024px) {
  .j-story { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; min-height: 600px; padding-bottom: 110px; }
  .j-story-art { width: min(100%, 500px); padding: 11px; }
  .j-story-art::after { inset: 5px; }
  .j-story-text { max-width: 520px; }
  .j-flag { font-size: 36px; }
  .j-story-lead { font-size: 30px; }
  .j-story-soft { font-size: 21px; }
}

/* ═════ Шеф: фото-якорь на 7 колонок, медальон на углу рамки ═════ */
.j-chef { display: grid; gap: 34px; }
.j-chef-photo { position: relative; }
.j-chef-photo .j-frame-in { aspect-ratio: 4 / 5; }
.j-medal { position: absolute; left: -14px; bottom: 46px; width: 116px; z-index: 3; pointer-events: none; }
.j-medal img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; }
@media (min-width: 1024px) {
  .j-chef { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
  .j-chef-photo { margin-right: calc(-1 * var(--pad) - 24px); }
  .j-chef-photo .j-frame-in { aspect-ratio: 5 / 6; }
  .j-medal { left: -92px; bottom: 70px; width: 184px; }
}

/* ═════ Рецепты: большой + малый со сдвигом, гравюра-ось ═════ */
/* Наталья 11.10 (бот 732): «просто две фотки» — без существ и лесенки, обе целиком 4:3; телефон столбиком, ПК рядом */
.j-specials { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 34px 0 30px; }
.j-special { margin: 0; }
.j-special .j-frame-in { aspect-ratio: 4 / 3; }
.j-special figcaption { font-size: 24px; }
@media (min-width: 1024px) {
  .j-specials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 54px 0 70px; }
  .j-special figcaption { font-size: 28px; }
}

/* ═════ Деко-миска ═════ */
.j-bowl { display: block; width: 160px; margin: 0 auto 14px; }   /* бот 780: вместо тарелки — раскрытая книга-меню (вырезана из картинки владельца) */
.j-bowl img { display: block; width: 100%; height: auto; }   /* рисунок Натальи salad-plate: была плоская миска с шарами */
.j-motion .j-bowl img { transform: translateY(14px) scale(.9); opacity: 0; transition: transform .9s var(--glide), opacity .5s linear; }
.j-motion .j-bowl.is-in img { transform: none; opacity: 1; }
@media (min-width: 1024px) { .j-bowl { width: 210px; } }

/* ═════ Асимметричная сетка ПК: текст 5 колонок, медиа 7 с выходом за край ═════ */
@media (min-width: 1024px) {
  .j-asym { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: 72px; align-items: start; }
  .j-asym > :not(.j-rail):not(.j-knot) { grid-column: 1; }
  .j-asym > .j-asym-m.j-asym-m { grid-column: 2; grid-row: 1 / span 6; }
  .j-asym--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .j-asym--rev > :not(.j-rail):not(.j-knot) { grid-column: 2; }
  .j-asym--rev > .j-asym-m.j-asym-m { grid-column: 1; }
  .j-asym .j-head { text-align: left; margin: 0 0 22px; }
  .j-asym .j-head--tri::after { left: 0; width: min(420px, 100%); transform-origin: 0 50%; transform: none; }
  .j-asym .j-head--tri::before { left: -9px; width: calc(min(420px, 100%) + 18px); transform: none; }
  .j-motion .j-asym .j-head--tri::after { transform: scaleX(0); }
  .j-motion .j-asym .j-head--tri.is-in::after { transform: none; }
  .j-asym .j-bowl { margin: 0 0 14px; }
}

/* ═════ Карусели: слайд во всю ширину, подпись и стрелки на фото, черта прогресса под ним ═════ */
.j-car { position: relative; margin: 26px calc(-1 * (var(--pad) + var(--gut))) 32px; }
.j-car-track { list-style: none; margin: 0; padding: 0 16px 6px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; scroll-padding-inline: 16px; }
.j-car-track::-webkit-scrollbar { display: none; }
.j-card { flex: 0 0 calc(100% - 24px); scroll-snap-align: start; margin: 0; }
.j-card .j-frame-in { aspect-ratio: 4 / 3; }
.j-card-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 54px 116px 20px 20px; color: #fff; text-align: left;
  font: italic 500 23px/1.15 var(--serif); background: linear-gradient(transparent, rgba(29, 83, 122, .8)); text-shadow: 0 1px 12px rgba(29, 83, 122, .5); }
.j-car--big .j-card .j-frame-in { aspect-ratio: 4 / 3; }
.j-car-line { display: block; position: relative; height: 7px; margin: 10px 16px 0; background: linear-gradient(var(--navy), var(--navy)) 0 3px / 100% 1px no-repeat; }
.j-car-line i { position: absolute; left: 0; top: 1px; height: 5px; width: 100%; background: var(--sky); transform-origin: 0 50%; transform: scaleX(.1); transition: transform .52s var(--glide); }
.j-car-nav { position: absolute; right: 54px; bottom: 37px; display: flex; gap: 8px; z-index: 3; }
.j-car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--navy); background: rgba(245, 250, 253, .94); color: var(--navy); display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background-color .2s var(--soft), color .2s var(--soft); }
.j-car-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .j-car-btn:hover { background: var(--navy); color: #fff; } }
@media (min-width: 1024px) {
  .j-car { --cw: 380px; margin: 0 calc(-1 * (var(--pad) + var(--gut))) 0 0; }
  .j-car--big { --cw: 500px; }
  .j-car-track { padding: 0 calc(var(--pad) + var(--gut)) 6px 0; gap: 20px; scroll-padding-inline: 0; }
  .j-card { flex: 0 0 var(--cw); }
  .j-card .j-frame-in { aspect-ratio: 4 / 5; }
  .j-car--big .j-card .j-frame-in { aspect-ratio: 5 / 6; }
  .j-card-cap { font-size: 26px; padding: 70px 20px 78px 24px; }
  .j-car-line { margin: 14px 0 0; width: calc(var(--cw) * 2 + 20px); max-width: calc(100% - var(--pad) - var(--gut)); }
  .j-car-nav { right: auto; left: calc(var(--cw) - 112px); bottom: 43px; }
}

/* ═════ Фото-полоса: три кадра во всю ширину, панорама внутри кадров ═════ */
.j-band { position: relative; }
.j-band-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 8px; }
.j-band-track::-webkit-scrollbar { display: none; }
.j-band figure { position: relative; flex: 0 0 86%; margin: 0; scroll-snap-align: center; overflow: hidden; height: 64svh; max-height: 540px; }
.j-band img { display: block; position: absolute; top: 0; left: -12%; width: 124%; max-width: none !important; height: 100%; object-fit: cover; }
.j-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; color: #fff; font: italic 500 22px/1.2 var(--serif);
  background: linear-gradient(transparent, rgba(29, 83, 122, .74)); }
@media (min-width: 1024px) {
  .j-band-track { padding: 0; gap: 10px; overflow: visible; }
  .j-band figure { flex: 1 1 0; height: min(80vh, 760px); max-height: none; }
  .j-band figure:nth-child(2) { flex-grow: 1.7; }
  .j-band figcaption { padding: 60px 36px 26px; font-size: 28px; }
}

/* ═════ Доставка: застолье без рамки, выход за край ═════ */
.j-feast { margin: 8px calc(-1 * (var(--pad) + var(--gut))) 30px; overflow: hidden; transform-origin: 50% 50%; }
.j-feast img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.j-icons { list-style: none; margin: 30px auto 0; padding: 0; display: grid; gap: 4px; max-width: 760px; }
.j-icons a { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 6px 4px; color: var(--navy); font: 600 16px/1.3 var(--sans); text-decoration: none;
  border-bottom: 1px solid rgba(29, 83, 122, .18); }
.ic { position: relative; flex: none; width: 34px; height: 34px; display: block; }
/* значки — мотивы мудборда (канон theraki-info/prototypes/shared/mood.js): кольцо в квадрате, мишень, горох */
.ic-ring, .ic-target, .ic-polka { width: 28px; height: 28px; margin: 3px; background: center / 100% 100% no-repeat; }
.ic-ring { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%231d537a'/%3E%3Ccircle cx='32' cy='32' r='13' fill='none' stroke='%23b5daeb' stroke-width='9'/%3E%3C/svg%3E"); }
.ic-target { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23e91b1a'/%3E%3Ccircle cx='32' cy='32' r='24' fill='%23fff'/%3E%3Ccircle cx='32' cy='32' r='18' fill='%23e91b1a'/%3E%3Ccircle cx='32' cy='32' r='12' fill='%23fff'/%3E%3Ccircle cx='32' cy='32' r='7' fill='%23e91b1a'/%3E%3C/svg%3E"); }
.ic-polka { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%231d537a'/%3E%3Ccircle cx='16' cy='16' r='6.5' fill='%23fff'/%3E%3Ccircle cx='48' cy='16' r='6.5' fill='%23fff'/%3E%3Ccircle cx='32' cy='32' r='6.5' fill='%23fff'/%3E%3Ccircle cx='16' cy='48' r='6.5' fill='%23fff'/%3E%3Ccircle cx='48' cy='48' r='6.5' fill='%23fff'/%3E%3Ccircle cx='0' cy='32' r='6.5' fill='%23fff'/%3E%3Ccircle cx='64' cy='32' r='6.5' fill='%23fff'/%3E%3Ccircle cx='32' cy='0' r='6.5' fill='%23fff'/%3E%3Ccircle cx='32' cy='64' r='6.5' fill='%23fff'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) {
  .j-sec > .j-feast.j-feast { position: sticky; top: 96px; }
  .j-feast { margin: 0 0 0 calc(-1 * (var(--pad) + var(--gut))); }
  .j-feast img { aspect-ratio: auto; height: min(80vh, 760px); object-position: 58% 50%; }
  .j-delivery .j-icons { margin: 18px 0 0; max-width: none; }
  .j-delivery .j-icons a { min-height: 60px; font-size: 17px; }
}

/* ═════ Списки ═════ */
.j-diamonds { list-style: none; margin: 6px 0 20px; padding: 0; display: grid; gap: 2px 28px; }
.j-diamonds li { position: relative; padding: 6px 0 6px 26px; font: 500 16.5px/1.45 var(--sans); }
.j-diamonds li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 10px; height: 10px; background: var(--sky); outline: 1.5px solid var(--navy); outline-offset: 1.5px; transform: rotate(45deg); }

/* ═════ Кто мы: каталог застолий под вступлением (бывшая карусель кейтеринга) ═════ */
.j-welcome > .j-welcome-car { margin-top: 0; margin-bottom: 0; }
@media (min-width: 1024px) { .j-welcome > .j-welcome-car { grid-column: 1 / -1; margin-top: 30px; } }

/* ═════ Другие направления: 4 строки, миниатюра в двойной рамке, разделители двойной волосяной линией ═════ */
.j-ways-list { list-style: none; margin: 0; padding: 0; }
.j-way { display: grid; grid-template-columns: clamp(84px, 26vw, 104px) minmax(0, 1fr); column-gap: 18px; row-gap: 14px; align-items: center; padding: 26px 0 28px;
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--sky), var(--sky)) 0 5px / 100% 3px no-repeat; }
.j-way:first-child { padding-top: 6px; background: none; }
.j-way-photo { grid-row: 1; --fg: 3px; --fb: 2px; }
.j-way-photo .j-frame-in { aspect-ratio: 1 / 1; }
.jr .j-way-title { grid-row: 1; margin: 0; font: 500 clamp(19px, 5.9vw, 23px)/1.14 var(--serif); }
.j-way-body { grid-column: 1 / -1; }
.j-way-body p { margin: 0 0 4px; font: 500 16px/1.72 var(--sans); }
@media (min-width: 1024px) {
  .j-way { grid-template-columns: 280px minmax(0, 330px) minmax(0, 1fr); column-gap: 48px; padding: 36px 0 38px; }
  .j-way:first-child { padding-top: 0; }
  .j-way-photo { --fg: 5px; --fb: 3px; }
  .j-way-photo .j-frame-in { aspect-ratio: 4 / 3; }
  .jr .j-way-title { font-size: 32px; line-height: 1.08; }
  .j-way-body { grid-column: 3; grid-row: 1; }
  .j-way-body p { font-size: 17px; line-height: 1.8; margin-bottom: 6px; }
}

/* ═════ Пресса ═════ */
.j-press-card { display: block; color: inherit; text-decoration: none; margin: 8px 0 30px; }
.j-press-card .j-frame-in { aspect-ratio: 16 / 9; }
.j-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255, 255, 255, .92); z-index: 2;
  box-shadow: 0 0 0 1.5px var(--navy); }
.j-play::after { content: ""; position: absolute; left: 27px; top: 22px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 19px solid var(--navy); }
.j-press-cap { display: block; margin-top: 12px; text-align: center; font: italic 500 21px/1.2 var(--serif); color: var(--navy); }
@media (min-width: 1024px) {
  .j-press-media { display: grid; gap: 34px; }
  .j-press-card { margin: 0 calc(-1 * var(--pad) + 24px) 0 0; }
  .j-press-media .j-press-card { margin-bottom: 0; }
  .j-press-card .j-play { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .j-press-card .j-play::after { left: 35px; top: 28px; border-top-width: 16px; border-bottom-width: 16px; border-left-width: 25px; }
  .j-press-cap { font-size: 26px; }
}

/* ═════ Партнеры: разворот заголовка и лента логотипов между двумя рельсами ═════ */
@media (min-width: 1024px) {
  .j-partners-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: end; }
  .j-partners-head .j-head { text-align: left; margin: 0; }
  .j-partners-head .j-head--tri::after { left: 0; width: min(420px, 100%); transform-origin: 0 50%; transform: none; }
  .j-partners-head .j-head--tri::before { left: -9px; width: calc(min(420px, 100%) + 18px); transform: none; }
  .j-motion .j-partners-head .j-head--tri::after { transform: scaleX(0); }
  .j-motion .j-partners-head .j-head--tri.is-in::after { transform: none; }
  .j-partners-head .j-copy p { margin-bottom: 26px; }
}
.j-ticker { position: relative; margin: 34px calc(-1 * (var(--pad) + var(--gut))) 0; padding: 14px 0; overflow: hidden; background:
  linear-gradient(var(--navy), var(--navy)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--sky), var(--sky)) 0 5px / 100% 3px no-repeat,
  linear-gradient(var(--sky), var(--sky)) 0 calc(100% - 5px) / 100% 3px no-repeat, linear-gradient(var(--navy), var(--navy)) 0 100% / 100% 1.5px no-repeat, #fff; }
.j-logos { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; }
.j-logos li { flex: none; display: grid; place-items: center; width: 190px; height: 112px; padding: 16px 28px; border-right: 1px solid rgba(29, 83, 122, .2); }
.j-logos img { max-width: 100%; max-height: 56px; width: auto; height: auto; mix-blend-mode: multiply; }
.j-motion .j-logos { animation: j-tick 30s linear infinite; }
@keyframes j-tick { to { transform: translateX(-50%); } }
.j-static .j-logos { width: auto; flex-wrap: wrap; justify-content: center; }
@media (min-width: 1024px) { .j-ticker { margin-top: 50px; padding: 18px 0; } .j-logos li { width: 250px; height: 150px; } .j-logos img { max-height: 66px; } .j-motion .j-logos { animation-duration: 38s; } }

/* ═════ Команда во всю ширину экрана (финал) ═════ */
.j-pano { position: relative; margin: 0 calc(-1 * (var(--pad) + var(--gut))) 40px; overflow: hidden; transform-origin: 50% 50%; }
.j-pano img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 40%; }
.j-pano figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 16px; color: #fff; font: italic 500 22px/1.2 var(--serif);
  background: linear-gradient(transparent, rgba(29, 83, 122, .74)); }
@media (min-width: 1024px) {
  .j-pano { margin-bottom: 72px; margin-top: -24px; }
  .j-pano img { aspect-ratio: auto; height: min(84vh, 780px); }
  .j-pano figcaption { padding: 80px calc(var(--pad) + var(--gut)) 30px; font-size: 30px; }
}

/* ═════ Финал ═════ */
.j-final { padding-top: 64px; padding-bottom: 84px; }
.j-final-in { display: grid; gap: 30px; }
.j-final-photo { width: min(100%, 360px); margin: 0 auto; }
.j-final-text p { margin: 0 0 22px; font: 500 16px/1.72 var(--sans); }
.j-final-btns { display: grid; gap: 10px; }
@media (min-width: 1024px) {
  .j-final { padding-bottom: 120px; }
  .j-final-in { grid-template-columns: 420px 1fr; gap: 80px; align-items: center; }
  .j-final-photo { width: 100%; }
  .j-final-text p { font-size: 18px; line-height: 1.8; }
  .j-final-btns { grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; }
}

/* ═════ Подвал: волна оболочки во всю ширину экрана ═════ */
.jr .sh-foot-wave { max-width: none; margin-left: -24px; margin-right: -24px; }
@media (max-width: 640px) { .jr .sh-foot-wave { margin-left: -16px; margin-right: -16px; } }

/* шторка поперечины: закрывает ещё не дорисованную часть бордюра, уезжает transform-ом (композитор, без перерисовки плитки) */
.j-xb { overflow: hidden; }
.j-xb > i { position: absolute; inset: 0; background: var(--bg); will-change: transform; }
.j-static .j-xb > i { display: none; }

/* ═════ Статика ?rm ═════ */
.j-static *, .j-static *::before, .j-static *::after { animation: none !important; transition: none !important; }

/* ═════ Фолк-каркас (правка 08.10, третий проход — язык рисунков Натальи: полоса с тонкой синей кромкой, внутри ряд точек / треугольников / ромбов),
   узлы = алые мишени, линейки заголовков = ряд треугольников, разделители = горох. Плитки — геометрия theraki-info/prototypes/shared/mood.js ═════ */
.jr {
  --t-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Crect y='2' width='30' height='24' fill='%23a2d3eb'/%3E%3Crect y='8' width='30' height='12' fill='%2370bade'/%3E%3Ccircle cx='15' cy='14' r='3' fill='%23fff'/%3E%3Ccircle cx='0' cy='14' r='2.4' fill='%23db1108'/%3E%3Ccircle cx='30' cy='14' r='2.4' fill='%23db1108'/%3E%3Ccircle cx='7.5' cy='4.6' r='1.1' fill='%23fff'/%3E%3Ccircle cx='22.5' cy='4.6' r='1.1' fill='%23fff'/%3E%3Ccircle cx='7.5' cy='23.4' r='1.1' fill='%23fff'/%3E%3Ccircle cx='22.5' cy='23.4' r='1.1' fill='%23fff'/%3E%3Cpath d='M0 8H30M0 20H30' stroke='%231d76a0' stroke-width='.9'/%3E%3Cpath d='M0 1.3H30M0 26.7H30' stroke='%231d76a0' stroke-width='2.2'/%3E%3C/svg%3E");
  --t-tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect y='2' width='28' height='24' fill='%23fff'/%3E%3Crect y='21' width='28' height='5' fill='%23a2d3eb'/%3E%3Cpath d='M4.5 21L14 5.5L23.5 21Z' fill='%2370bade'/%3E%3Ccircle cx='14' cy='23.5' r='1.1' fill='%23fff'/%3E%3Ccircle cx='0' cy='9' r='2' fill='%2370bade'/%3E%3Ccircle cx='28' cy='9' r='2' fill='%2370bade'/%3E%3Cpath d='M0 21H28' stroke='%231d76a0' stroke-width='.9'/%3E%3Cpath d='M0 1.3H28M0 26.7H28' stroke='%231d76a0' stroke-width='2.2'/%3E%3C/svg%3E");
  --t-triflip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect y='2' width='28' height='24' fill='%23fff'/%3E%3Crect y='2' width='28' height='5' fill='%23a2d3eb'/%3E%3Cpath d='M4.5 7L14 22.5L23.5 7Z' fill='%2370bade'/%3E%3Ccircle cx='14' cy='4.5' r='1.1' fill='%23fff'/%3E%3Ccircle cx='0' cy='19' r='2' fill='%2370bade'/%3E%3Ccircle cx='28' cy='19' r='2' fill='%2370bade'/%3E%3Cpath d='M0 7H28' stroke='%231d76a0' stroke-width='.9'/%3E%3Cpath d='M0 1.3H28M0 26.7H28' stroke='%231d76a0' stroke-width='2.2'/%3E%3C/svg%3E");
  /* Наталья 11.10 (бот 734 + голосовое 739): вместо треугольников — плавная «волна с точками» из s3; --t-sq голая, --t-sqband в полосе с кромками */
  --t-sq: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 27'><path d='M-4 17.0L-2 15.2L0 13.2L2 11.2L4 9.4L6 7.9L8 6.8L10 6.3L12 6.3L14 6.8L16 7.9L18 9.4L20 11.2L22 13.2L24 15.2L26 17.0L28 18.5L30 19.6L32 20.1L34 20.1L36 19.6L38 18.5L40 17.0L42 15.2L44 13.2L46 11.2L48 9.4' fill='none' stroke='%231d76a0' stroke-width='5.6' stroke-linecap='round'/><circle cx='11' cy='21.8' r='5' fill='%23db1108'/><circle cx='33' cy='5.2' r='5' fill='%2370bade'/></svg>");
  --t-sqband: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'><rect y='2' width='44' height='32' fill='%23fff'/><path d='M0 1.3H44M0 34.7H44' stroke='%231d76a0' stroke-width='2.2'/><g transform='translate(0 4.5)'><path d='M-4 17.0L-2 15.2L0 13.2L2 11.2L4 9.4L6 7.9L8 6.8L10 6.3L12 6.3L14 6.8L16 7.9L18 9.4L20 11.2L22 13.2L24 15.2L26 17.0L28 18.5L30 19.6L32 20.1L34 20.1L36 19.6L38 18.5L40 17.0L42 15.2L44 13.2L46 11.2L48 9.4' fill='none' stroke='%231d76a0' stroke-width='5.6' stroke-linecap='round'/><circle cx='11' cy='21.8' r='5' fill='%23db1108'/><circle cx='33' cy='5.2' r='5' fill='%2370bade'/></g></svg>");
  --t-diam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Crect y='2' width='36' height='24' fill='%23a2d3eb'/%3E%3Cpath d='M18 4.5L28 14L18 23.5L8 14Z' fill='%23fff' stroke='%231d76a0' stroke-width='.7'/%3E%3Cpath d='M18 9L22.6 14L18 19L13.4 14Z' fill='%2370bade'/%3E%3Ccircle cx='18' cy='14' r='2' fill='%23db1108'/%3E%3Ccircle cx='0' cy='14' r='2.2' fill='%23db1108'/%3E%3Ccircle cx='36' cy='14' r='2.2' fill='%23db1108'/%3E%3Cpath d='M0 1.3H36M0 26.7H36' stroke='%231d76a0' stroke-width='2.2'/%3E%3C/svg%3E");
  --t-polka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Crect y='1' width='48' height='10' fill='%23a2d3eb'/%3E%3Cpath d='M0 1H48M0 11H48' stroke='%231d76a0' stroke-width='.9'/%3E%3Cpath d='M8 9.6L12 2.4L16 9.6Z' fill='%23db1108'/%3E%3Ccircle cx='36' cy='6' r='3.4' fill='%23fff' stroke='%231d76a0' stroke-width='.6'/%3E%3Ccircle cx='36' cy='6' r='1.3' fill='%2370bade'/%3E%3Ccircle cx='24' cy='6' r='1' fill='%23fff'/%3E%3Ccircle cx='0' cy='6' r='1' fill='%23fff'/%3E%3Ccircle cx='48' cy='6' r='1' fill='%23fff'/%3E%3C/svg%3E");
}
.jr { --xbh: 30px; }
@media (min-width: 1024px) { .jr { --xbh: 42px; } }
/* поперечина главы: бордюр поверх двойной линии, фарфоровая подложка закрывает её */
.j-xb { position: absolute; z-index: 1; height: var(--xbh); margin-top: calc(var(--xbh) / -2); pointer-events: none;
  background: var(--t-wave) 50% 50% / auto calc(100% - 6px) round no-repeat var(--bg); }
.j-xb--tri { background-image: var(--t-sqband); }
.j-sec > .j-xb.j-xb { position: absolute; z-index: 1; grid-column: auto; grid-row: auto; }   /* перебивает общие правила детей главы (relative, колонка сетки) */
.j-xb--diam { background-image: var(--t-diam); }
/* узел — алая мишень с фарфоровым ободом (мудборд: мишени в узлах) */
.j-knot { width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 2; }
@media (min-width: 1024px) { .j-knot { width: 66px; height: 66px; margin: -33px 0 0 -33px; } }
/* линейка заголовка: ряд треугольников вместо двойной волосяной */
.j-head--tri::after { width: 182px; height: 18px; bottom: 0; background: var(--t-sq) 50% 50% / auto 100% round no-repeat; }
.j-head--tri::before { content: none; }
@media (min-width: 1024px) {
  .j-asym .j-head--tri::after, .j-partners-head .j-head--tri::after { left: 0; width: 210px; height: 20px; }
  .j-head--tri::after { width: 252px; height: 20px; }
}
/* колонна истории: средняя штриховка → столбец алого гороха */
/* разделители «Других направлений»: ряд гороха алый/голубой */
.j-way { background: var(--t-polka) 0 0 / auto 12px repeat-x; }
.j-way:first-child { background: none; }
/* лента партнёров: треугольники сверху и снизу вместо двойных линий */
.j-ticker { padding: 34px 0; background: var(--t-sqband) 0 0 / auto 22px repeat-x, var(--t-sqband) 0 100% / auto 22px repeat-x, #fff; }
@media (min-width: 1024px) { .j-ticker { padding: 42px 0; background-size: auto 28px, auto 28px, auto; } }
/* подвал: волна с точками крупнее (мерка мудборда) */
.jr .sh-foot-wave, .jr .sh-foot-wave .sh-wv { height: 40px; }
.jr .sh-foot-wave .sh-wv svg { height: 40px; }
@media (min-width: 1024px) { .jr .sh-foot-wave, .jr .sh-foot-wave .sh-wv, .jr .sh-foot-wave .sh-wv svg { height: 52px; } }
/* маркеры списка факторов: алый ромб с голубым обводом (алый акцент на экране без иллюстраций) */
.j-diamonds li::before { background: var(--red); outline-color: var(--sky); }
/* узел героя меньше: целиком над полосой глав */
.j-hero-knot { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
@media (min-width: 1024px) { .j-hero-knot { width: 44px; height: 44px; margin: -22px 0 0 -22px; } }

/* ═════ Графика в палитре рисунков Натальи (docs/redesign/moodboard/natalia/PALETTE.md; генератор s3/gen/clouds-svg/s1_decor.py). Текст и кнопки — navy страницы ═════ */
.jr { --g-red: #db1108; --g-sky: #a2d3eb; --g-mid: #70bade; --g-line: #1d76a0; }
.j-rail .r1, .j-hero-rail .r1 { stroke: var(--g-line); }
.j-rail .r3, .j-hero-rail .r3 { stroke: var(--g-sky); }
.j-frame-in { border-color: var(--g-line); }
.j-frame-in::after { box-shadow: inset 0 0 0 var(--fg) var(--bg), inset 0 0 0 calc(var(--fg) + var(--fb)) var(--g-sky); }
.j-flag-mark { background: var(--g-sky); }
.j-chapters a + a::before { background: var(--g-line); }
.j-chapters-bar { background: var(--g-red); }
.j-diamonds li::before { background: var(--g-red); outline-color: var(--g-line); }
.j-car-line { background: linear-gradient(var(--g-line), var(--g-line)) 0 3px / 100% 1px no-repeat; }
.j-car-line i { background: var(--g-mid); }

/* Наталья 12.10 (бот 765): фото направлений «симпатично, в кружках» — медальон: круг в двойном кольце (navy + голубой),
   снаружи венчик точек алый/голубой, как у мишеней-узлов. Сами фото потом заменят — рамка от них не зависит */
.j-way-photo { position: relative; padding: 8px; align-self: center; }
.j-way-photo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23db1108' stroke-width='3' stroke-linecap='round' pathLength='18' stroke-dasharray='0 1'/%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%2370bade' stroke-width='3' stroke-linecap='round' pathLength='18' stroke-dasharray='0 1' stroke-dashoffset='.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.j-way-photo .j-frame-in, .j-way-photo .j-frame-in::after { border-radius: 50%; }
.j-way-photo .j-frame-in { aspect-ratio: 1 / 1; }
@media (min-width: 1024px) {
  .j-way { grid-template-columns: 240px minmax(0, 330px) minmax(0, 1fr); }
  .j-way-photo { padding: 13px; }
  .j-way-photo .j-frame-in { aspect-ratio: 1 / 1; }
}

/* бот 772/774 (владелец: «горизонтальная фотка криво, как баг»): команда в двойной рамке по колонке текста, без растяжки на всю ширину */
.j-team { margin: 0 0 40px; }
.j-team .j-frame-in { aspect-ratio: 3 / 2; }
.j-team img { object-position: 50% 40%; }
@media (min-width: 1024px) { .j-team { width: min(100%, 980px); margin: -8px auto 72px; --fg: 5px; --fb: 3px; } }

/* бот 783/784/777–779 (владелец: «за линию перекрывает»): фото не заходят за рельсы — лента зала и кадр доставки внутри двойной линии */
.j-band { padding: 0 calc(var(--gut) + 12px); }
.j-band-track { padding: 0; }
.j-feast.j-feast { margin-left: calc(-1 * var(--pad) + 12px); margin-right: calc(-1 * var(--pad) + 12px); }
@media (min-width: 1024px) { .j-feast.j-feast { margin-left: calc(-1 * var(--pad) + 18px); margin-right: 0; } }
/* бот 786/790: поперечина между партнёрами и финалом убрана (над ней уже волна ленты логотипов); логотипы крупнее */
.j-sec[data-no-xb] > .j-xb { display: none; }
.j-logos li { width: 230px; height: 140px; padding: 14px 24px; }
.j-logos img { max-height: 84px; }
@media (min-width: 1024px) { .j-logos li { width: 300px; height: 180px; padding: 18px 32px; } .j-logos img { max-height: 110px; } }
/* бот 791: кружочки побольше */
.j-way { grid-template-columns: clamp(124px, 37vw, 150px) minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 1024px) { .j-way { grid-template-columns: 290px minmax(0, 330px) minmax(0, 1fr); } }
/* бот 792: фото и видео со скруглёнными углами ~8 px (рамка-паспарту скругляется вместе с фото; круги и арка — свои) */
.j-frame-in { border-radius: 8px; }
.j-feast, .j-band figure { border-radius: 8px; }
.j-feast { overflow: hidden; }
/* бот 793: партнёры двумя строками навстречу друг другу; бот 794: финальное фото горизонтальное */
@keyframes j-tick2 { from { transform: translateX(0); } to { transform: translateX(var(--set, -50%)); } }
.j-motion .j-logos { animation-name: j-tick2; animation-timing-function: linear; animation-iteration-count: infinite; }
.j-motion .j-logos--rev { animation-direction: reverse; }
.j-tick-div { display: block; height: 12px; margin: 6px 0; background: var(--t-polka) 0 0 / auto 12px repeat-x; }
.j-logos li { width: 210px; height: 120px; padding: 12px 22px; }
.j-logos img { max-height: 78px; }
@media (min-width: 1024px) { .j-logos li { width: 280px; height: 160px; padding: 16px 30px; } .j-logos img { max-height: 104px; } .j-tick-div { margin: 8px 0; } }
.j-final-photo { width: 100%; }
@media (min-width: 1024px) { .j-final-in { grid-template-columns: 560px 1fr; gap: 64px; } }
/* бот 795: ролики со своего сервера; кнопка — та же j-play, но настоящая button */
.j-video .j-frame-in video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0e2433; }
.j-video .j-frame-in video[controls] { object-fit: contain; }
button.j-play { border: 0; padding: 0; cursor: pointer; font: inherit; }
button.j-play:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
@media (hover: hover) { button.j-play:hover { transform: scale(1.06); } }
button.j-play { transition: transform .25s var(--glide, ease); }
/* бот 799–802: скруглить углы САМОЙ фотки (не только рамки), чуть больше — 10 px. Паспарту рисуется inset-тенью:
   внутренний край тени = радиус рамки − (зазор + линия), поэтому рамке даём 10 px + их толщину */
.j-frame-in { border-radius: calc(10px + var(--fg) + var(--fb)); }
.j-feast, .j-band figure { border-radius: 10px; }
/* таймлапс снят 4:3 (полосы по бокам обрезаны) — рамка под него */
.j-video:nth-child(2) .j-frame-in { aspect-ratio: 4 / 3; }
.j-frame-in::after { border-radius: inherit; }   /* паспарту — отдельный слой: без inherit тень квадратная и угол фото острый */