/* ============================================================
   Академия Наталии Эдис — design system
   Эстетика: тёплый «арт-журнал», управляемый хаос на жёсткой сетке
   ============================================================ */

/* Onest — SIL Open Font License 1.1, © 2021 The Onest Project Authors.
   Текст лицензии лежит рядом со шрифтом: assets/fonts/onest/OFL.txt (хранить обязательно).
   Один вариативный файл: ось веса 100–900, латиница + кириллица, 38 КБ.
   Заменяет шесть отдельных начертаний и заодно чинит правила с font-weight:500. */
@font-face {
  font-family: "Onest";
  src: url("fonts/onest/onest-cyr-lat.woff2") format("woff2-variations"),
       url("fonts/onest/onest-cyr-lat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* neutrals */
  --cream: #FFFFFF;
  --cream-2: #EEF1F8;
  --sunken: #F4F6FC;
  --paper: #FFFFFF;
  --ink: #22202B;
  --ink-soft: #4A4654;
  --muted: #6B6675;
  --line: #E7E0D4;

  /* direction accents */
  --c-paint:  #C75B39;  --c-paint-d:  #8E3D24;  --c-paint-t:  #F6E7E0;
  --c-art:    #34538C;  --c-art-d:    #243B66;  --c-art-t:    #E2E8F2;
  --c-craft:  #6B8E4E;  --c-craft-d:  #4C6837;  --c-craft-t:  #EAF0E2;
  --c-food:   #E0A02F;  --c-food-d:   #8A5F12;  --c-food-t:   #FAF0DC;
  --c-style:  #B5547E;  --c-style-d:  #823A59;  --c-style-t:  #F6E5EC;
  --c-active: #2E8B8B;  --c-active-d: #1F6363;  --c-active-t: #DFF0F0;

  /* themable accent (default = ink) */
  --accent: var(--ink);
  --accent-d: #000;
  --accent-t: var(--cream-2);

  --maxw: 1280px;
  --header-h: 78px;
  --pad: clamp(18px, 4vw, 56px);
  --radius: 22px;
  --radius-s: 16px;

  --font-display: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);

  /* eased (smootherstep) фейды в белый — без видимой «полосы» на старте перехода.
     -down: прозрачный сверху → белый снизу; -up: прозрачный снизу → белый сверху */
  --scrim-white-down: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.009) 10%, rgba(255,255,255,.058) 20%,
    rgba(255,255,255,.163) 30%, rgba(255,255,255,.317) 40%, rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.683) 60%, rgba(255,255,255,.837) 70%, rgba(255,255,255,.942) 80%,
    rgba(255,255,255,.991) 90%, rgb(255,255,255) 100%);
  --scrim-white-up: linear-gradient(to top,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.009) 10%, rgba(255,255,255,.058) 20%,
    rgba(255,255,255,.163) 30%, rgba(255,255,255,.317) 40%, rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.683) 60%, rgba(255,255,255,.837) 70%, rgba(255,255,255,.942) 80%,
    rgba(255,255,255,.991) 90%, rgb(255,255,255) 100%);
}

/* per-page theming */
body.t-paint  { --accent: var(--c-paint);  --accent-d: var(--c-paint-d);  --accent-t: var(--c-paint-t); }
body.t-art    { --accent: var(--c-art);    --accent-d: var(--c-art-d);    --accent-t: var(--c-art-t); }
body.t-craft  { --accent: var(--c-craft);  --accent-d: var(--c-craft-d);  --accent-t: var(--c-craft-t); }
body.t-food   { --accent: var(--c-food);   --accent-d: var(--c-food-d);   --accent-t: var(--c-food-t); }
body.t-style  { --accent: var(--c-style);  --accent-d: var(--c-style-d);  --accent-t: var(--c-style-t); }
body.t-active { --accent: var(--c-active); --accent-d: var(--c-active-d); --accent-t: var(--c-active-t); }
/* «Плотный» акцент — фон под белым текстом (кнопки, метки, CTA). У светлых цветов направлений белый
   текст не читался (кулинария 2.27:1, рукоделие 3.75, активность 4.05, рисование 4.21 при норме 4.5):
   там берём затемнённый тон, а на жёлтом кулинарии — тёмный текст. Это ОТДЕЛЬНЫЕ переменные:
   --accent продолжает красить линии, подчёркивания и тинты как раньше. */
:root         { --accent-solid: var(--ink);        --accent-solid-h: #000;             --on-accent: #fff; }
body.t-paint  { --accent-solid: var(--c-paint-d);  --accent-solid-h: #6E2E1A; }
body.t-art    { --accent-solid: var(--c-art);      --accent-solid-h: var(--c-art-d); }
body.t-craft  { --accent-solid: var(--c-craft-d);  --accent-solid-h: #3A5029; }
body.t-food   { --accent-solid: var(--c-food);     --accent-solid-h: #C98B1C;          --on-accent: var(--ink); }
body.t-style  { --accent-solid: var(--c-style);    --accent-solid-h: var(--c-style-d); }
body.t-active { --accent-solid: var(--c-active-d); --accent-solid-h: #174F4F; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* interactive blue dot field (canvas, injected by JS) sits behind all content */
#dotgrid { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -.01em; }
/* современная балансировка переносов — убирает «сироты» в заголовках (не трогаем герой-колесо) */
h2, h3, h4, .dhero h1, .shead h2, .dirstage__intro h2 { text-wrap: balance; }

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); position: relative; z-index: 1; }
.section { padding-block: clamp(64px, 10vw, 140px); position: relative; z-index: 1; }

/* ---------- eyebrow / sticker tags ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-d);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }

.sticker {
  display: inline-block; font-weight: 700; font-size: 14px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--accent-solid); color: var(--on-accent);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);
}
.sticker--ghost { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px;
  padding: 15px 26px; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  transition: transform .35s var(--ease), background .3s, box-shadow .35s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(34,32,43,.22); }
.btn--accent { background: var(--accent-solid); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-solid-h); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.6px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px var(--pad);
  background: color-mix(in oklab, var(--cream) 94%, transparent);   /* без backdrop-filter: размытие шапки считалось на каждом кадре прокрутки (ревизия 18.09) */
  border-bottom: 1px solid var(--line);
}
.logo { display: inline-flex; align-items: center; line-height: 1; transition: transform .35s var(--ease); }
.logo:hover { transform: scale(1.03) rotate(-1deg); }
.logo img { height: 48px; width: auto; display: block; }
.logo b { color: var(--accent); }
.nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); }
.nav-links a { font-weight: 600; font-size: 15.5px; color: var(--ink-soft); position: relative; padding: 6px 2px; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .3s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { width: 100%; }
.nav-links a[aria-current] { color: var(--ink); }
.nav .btn { padding: 11px 20px; font-size: 15px; }
.nav-links { display: flex; align-items: center; gap: clamp(10px,2vw,28px); }
.burger { display: none; flex-direction: column; gap: 5px; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1.6px solid var(--ink); border-radius: 50%; z-index: 71; transition: background .25s; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .25s; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--cream); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 24px; }
.mobile-menu a:not(.btn) { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 8vw, 40px); color: var(--ink); }
.mobile-menu a[aria-current] { color: var(--accent); }
.mobile-menu .btn { margin-top: 12px; font-size: 18px; justify-content: center; }
body.menu-open { overflow: hidden; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav > .btn { display: none; }
  .nav > .nav-ai { display: none; }
  .burger { display: flex; }
  body.menu-open .header { z-index: 70; background: transparent; border-color: transparent; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(40px, 7vw, 90px); padding-bottom: clamp(40px, 6vw, 80px); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(44px, 8.5vw, 116px); }
.hero h1 .it { font-style: italic; font-weight: 500; }
.hero h1 .hl { color: var(--accent); position: relative; white-space: nowrap; }
.hero__lead { font-size: clamp(18px, 2.2vw, 22px); color: var(--ink-soft); max-width: 30ch; margin-top: 26px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* hero: 6 направлений — крупные ЖИВЫЕ ПУЗЫРИ. Движение/деформацию/отталкивание от
   курсора целиком ведёт JS (heroBubbles в app.js): дрейф-течение + перемешивание +
   при наведении пузырь сжимается и отталкивается от курсора. CSS даёт только вид
   и лёгкий морфинг формы (как поверхность воды). transform не задаём — его ставит JS. */
.hero__art { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center;
  gap: clamp(6px, .9vw, 16px); }
.dcircle { flex: none; display: grid; place-items: center; will-change: transform; }
.dcircle__face {
  width: clamp(152px, 16.5vw, 214px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 16px; color: #fff;
  box-shadow: 0 16px 36px rgba(34,32,43,.16);
  will-change: transform;
}
.hero__art.is-idle .dcircle__face { animation-play-state: paused; }
.dcircle__face span { font-family: var(--font-display); font-weight: 700;
  line-height: 1.08; font-size: clamp(16px, 1.25vw, 22px); letter-spacing: .01em; }
.dcircle.c-paint  .dcircle__face { background: var(--c-paint); }
.dcircle.c-art    .dcircle__face { background: var(--c-art); }
.dcircle.c-craft  .dcircle__face { background: var(--c-craft); }
.dcircle.c-food   .dcircle__face { background: var(--c-food); }
.dcircle.c-style  .dcircle__face { background: var(--c-style); }
.dcircle.c-active .dcircle__face { background: var(--c-active); }

/* разные размеры — крупнее у длинных названий, заодно органичнее */
.dcircle:nth-child(2) .dcircle__face,
.dcircle:nth-child(5) .dcircle__face,
.dcircle:nth-child(6) .dcircle__face { width: clamp(172px, 18.5vw, 240px); }
.dcircle:nth-child(3) .dcircle__face { width: clamp(144px, 15vw, 192px); }

/* разные вертикальные смещения — «вразнобой» (базовая раскладка, поверх неё JS-дрейф) */
.dcircle:nth-child(1) { margin-top: clamp(6px, 1vw, 16px); }
.dcircle:nth-child(2) { margin-top: clamp(26px, 4vw, 54px); }
.dcircle:nth-child(3) { margin-top: 0; }
.dcircle:nth-child(4) { margin-top: clamp(20px, 3vw, 42px); }
.dcircle:nth-child(5) { margin-top: clamp(4px, .8vw, 12px); }
.dcircle:nth-child(6) { margin-top: clamp(22px, 3.4vw, 46px); }
.dcircle:hover, .dcircle:focus-visible { z-index: 5; outline: none; }

/* лёгкий морфинг формы — «поверхность воды» (border-radius не конфликтует с JS-transform) */
.dcircle:nth-child(1) .dcircle__face { animation: bub1 10s ease-in-out  0s   infinite; }
.dcircle:nth-child(2) .dcircle__face { animation: bub2 12s ease-in-out -2.0s infinite; }
.dcircle:nth-child(3) .dcircle__face { animation: bub3 11s ease-in-out -4.0s infinite; }
.dcircle:nth-child(4) .dcircle__face { animation: bub1 13s ease-in-out -1.0s infinite; }
.dcircle:nth-child(5) .dcircle__face { animation: bub2 10.5s ease-in-out -3.0s infinite; }
.dcircle:nth-child(6) .dcircle__face { animation: bub3 11.5s ease-in-out -5.0s infinite; }
@keyframes bub1 { 0%,100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  34% { border-radius: 57% 43% 52% 48% / 48% 56% 44% 52%; } 67% { border-radius: 44% 56% 49% 51% / 55% 45% 53% 47%; } }
@keyframes bub2 { 0%,100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  34% { border-radius: 46% 54% 55% 45% / 54% 47% 53% 46%; } 67% { border-radius: 55% 45% 47% 53% / 45% 55% 47% 53%; } }
@keyframes bub3 { 0%,100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  34% { border-radius: 53% 47% 44% 56% / 49% 53% 47% 51%; } 67% { border-radius: 47% 53% 56% 44% / 53% 46% 54% 47%; } }

/* word-by-word hero reveal helpers */
.line { display: block; overflow: hidden; }
.word { display: inline-block; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 2px solid var(--ink); background: var(--accent); color: #fff; }
.marquee__track { display: inline-flex; gap: 40px; white-space: nowrap; padding: 14px 20px; will-change: transform; }
.marquee__track span { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 3vw, 38px); font-weight: 600; }
.marquee__track span::after { content: "✦"; margin-left: 40px; font-style: normal; opacity: .7; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
  transition: box-shadow .4s var(--ease), border-color .3s; }
.stat:nth-child(odd) { transform: rotate(-1.2deg); }
.stat:nth-child(even) { transform: rotate(1.2deg); }
.stat:hover { box-shadow: 0 18px 40px rgba(34,32,43,.1); border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 56px); color: var(--accent); line-height: 1; }
.stat .lbl { margin-top: 8px; font-size: 15px; color: var(--muted); font-weight: 600; }

/* ---------- section heading ---------- */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.shead h2 { font-size: clamp(34px, 5.5vw, 72px); }
.shead p { color: var(--muted); max-width: 42ch; }

/* ---------- directions: horizontal pinned track ---------- */
.htrack { position: relative; }
.htrack__viewport { overflow: hidden; perspective: 1500px; }
.htrack__row { display: flex; align-items: center; gap: 28px; padding-inline: var(--pad); will-change: transform; }
.dcard {
  flex: 0 0 clamp(280px, 34vw, 420px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; position: relative; overflow: hidden;
  --a: var(--ink);
  transform-style: preserve-3d;
  transition: box-shadow .5s var(--ease);
}
.dcard__desc { overflow: hidden; max-height: 0; opacity: 0; will-change: max-height; }
.dcard__desc p { min-height: 0; margin-top: 14px; }
.dcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--a); }
.dcard__num { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--a); opacity: .65; }
.dcard h3 { font-size: clamp(28px, 3vw, 40px); margin-top: 10px; color: var(--a); }
.dcard p { color: var(--ink-soft); margin-top: 12px; min-height: 3.2em; }
.dcard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; color: var(--a); }
.dcard__go .arr { transition: transform .35s var(--ease); }
.dcard:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 30px 60px rgba(34,32,43,.16); }
.dcard:hover .dcard__go .arr { transform: translateX(6px); }
.dcard__deco { position: absolute; right: -30px; bottom: -30px; width: 150px; height: 150px; border-radius: 50%; background: var(--a); opacity: .1; }
.dcard.c-paint{--a:var(--c-paint)} .dcard.c-art{--a:var(--c-art)} .dcard.c-craft{--a:var(--c-craft)}
.dcard.c-food{--a:var(--c-food)} .dcard.c-style{--a:var(--c-style)} .dcard.c-active{--a:var(--c-active)}
.htrack__hint { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; margin-top: 20px; padding-inline: var(--pad); }
@media (max-width: 760px) {
  .htrack__viewport { overflow-x: auto; }
  .dcard { transform: none !important; }
  .dcard__desc { max-height: none !important; opacity: 1 !important; }
}

/* simple drag-scroll row (direction pages) */
.hscroll { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 24px; scroll-snap-type: x mandatory; cursor: grab; scrollbar-width: thin; }
.hscroll.is-drag { cursor: grabbing; }
.hscroll > * { scroll-snap-align: start; }
.ccard {
  flex: 0 0 clamp(260px, 30vw, 340px); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 24px; position: relative;
}
.ccard h4 { font-size: 23px; }
.ccard .chip { margin-top: 12px; }
.ccard p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }

.chip { display: inline-block; font-size: 14px; font-weight: 700; padding: 6px 13px; border-radius: 999px; background: var(--accent-t); color: var(--accent-d); }

.row-ctrl { display: inline-flex; gap: 10px; }
.row-ctrl button { width: 46px; height: 46px; border-radius: 50%; border: 1.6px solid var(--ink); display: grid; place-items: center; transition: background .25s, color .25s, transform .25s var(--ease); }
.row-ctrl button:hover { background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); transform: translateY(-2px); }

/* ---------- direction hero band ---------- */
.dhero { background: var(--accent-t); border-bottom: 2px solid var(--ink); position: relative; overflow: clip; }
.dhero .container { padding-block: clamp(48px, 8vw, 110px); }
.crumb { font-weight: 600; font-size: 14px; color: var(--accent-d); }
.crumb a { opacity: .7; } .crumb a:hover { opacity: 1; }
.dhero h1 { font-size: clamp(52px, 11vw, 150px); color: var(--accent-d); margin: 14px 0 18px; }
.dhero p { font-size: clamp(18px, 2.2vw, 23px); color: var(--ink-soft); max-width: 46ch; }
.dhero__sticker { position: absolute; right: var(--pad); top: 30%; }

/* ---------- teacher block (multi-course) ---------- */
.teacher {
  display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(24px, 4vw, 56px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 40px); margin-bottom: 30px; position: relative;
}
@media (max-width: 820px) { .teacher { grid-template-columns: 1fr; } }
.teacher__side { position: sticky; top: 96px; align-self: start; }
.courses { align-self: start; }   /* обе колонки начинаются от одной линии */
@media (max-width: 820px) { .teacher__side { position: static; } }
/* Фото крупное, во всю ширину колонки. Прежний круг 150px с наклоном
   в -3° ломал общую сетку: у соседних карточек текст начинался на разной
   высоте. Прямоугольник с фиксированной пропорцией держит ряд ровным. */
.teacher__photo { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto;
  border-radius: var(--radius-s); object-fit: cover; object-position: 50% 22%;
  border: 0; background: var(--accent-t);
  box-shadow: 0 18px 40px rgba(34,32,43,.14); transform: none; }
.teacher__mono { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 52px; color: var(--on-accent); background: var(--accent-solid); }
.teacher__name { font-size: clamp(22px, 2.1vw, 28px); margin: 18px 0 12px; line-height: 1.15; }
/* описание преподавателя — подставляется из админки */
.teacher__bio { margin-top: 14px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; }
.teacher__bio p { margin: 0; }
.teacher__bio p + p { margin-top: 10px; }
.teacher__regalia { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.teacher__regalia li { position: relative; padding-left: 20px; color: var(--ink-soft); font-size: 16px; }
.teacher__regalia li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

.courses { position: relative; padding-left: 26px; }
.courses::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px; background: var(--accent); border-radius: 3px; opacity: .5; }
.courses__h { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.course {
  position: relative; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 20px 22px; margin-bottom: 14px;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease);
}
.course::before { content: ""; position: absolute; left: -26px; top: 26px; width: 16px; height: 3px; background: var(--accent); }
.course:hover { transform: translateX(8px); border-color: var(--accent); box-shadow: -6px 10px 26px rgba(34,32,43,.10); }
.course__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.course h5 { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.course__time { font-weight: 700; font-size: 14px; color: var(--accent-d); white-space: nowrap; }
.course p { color: var(--ink-soft); font-size: 15.5px; margin-top: 8px; white-space: pre-line; }   /* абзацы из админки: перенос строки = новая строка */
.course .mini { margin-top: 14px; padding: 9px 16px; font-size: 14px; border-radius: 999px; background: var(--accent-solid); color: var(--on-accent); font-weight: 700; display: inline-flex; }
.course .mini:hover { background: var(--accent-solid-h); }
/* одна колонка: «Северное Медведково · Сб 14:00–15:00 · Вс 16:30–17:30» с nowrap раздвигала карточку
   до 459 px при экране 375 — вся страница /activity уменьшалась и тапы промахивались */
@media (max-width: 820px) { .course__time { white-space: normal; } .teacher__side, .courses { min-width: 0; } }
/* очные преподаватели на телефоне: у карточки с 7 группами — 4 800 px высоты; показываем две, остальные по кнопке */
@media (max-width: 880px) {
  #offline-teachers .courses.is-collapsed > .course:nth-of-type(n+3) { display: none; }
}
.courses__more { display: block; width: 100%; margin-top: 4px; padding: 13px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--cream); font: inherit; font-weight: 700; font-size: 15.5px; color: var(--ink); cursor: pointer; transition: border-color .2s; }
.courses__more:hover { border-color: var(--ink); }

/* ---------- CTA band ---------- */
.cta { background: var(--accent-solid); color: var(--on-accent); border-radius: var(--radius); padding: clamp(34px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; }
.cta h2 { font-size: clamp(30px, 4.6vw, 58px); }
.cta .btn { margin-top: 24px; background: #fff; color: var(--accent-d); }
.cta .btn:hover { background: var(--ink); color: #fff; }
.cta__blob { position: absolute; border-radius: 50%; background: rgba(255,255,255,.14); }

/* ===== О нас — расширенная редакторская секция с фото-коллажем ===== */
.about__head { max-width: 820px; }
.about__head h2 { font-size: clamp(34px, 5.5vw, 76px); line-height: 1.05; text-wrap: balance; margin-top: 14px; }
.about__lead { color: var(--ink-soft); font-size: clamp(18px, 1.7vw, 22px); max-width: 60ch; margin-top: clamp(16px, 1.6vw, 22px); }
/* бенто-коллаж работ: высокий слева, два малых сверху-справа, широкий снизу-справа */
.about__media { margin-top: clamp(34px, 4.5vw, 64px); display: grid; gap: clamp(12px, 1.3vw, 20px);
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, clamp(150px, 17vw, 240px)); }
.about__shot { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--cream-2);
  box-shadow: 0 18px 44px rgba(34,32,43,.12); }
.about__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.about__shot:hover img { transform: scale(1.06); }
.about__shot--tall { grid-row: 1 / span 2; }
.about__shot--wide { grid-column: 2 / span 2; }
@media (max-width: 760px) {
  .about__media { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; gap: 12px; }
  .about__shot { aspect-ratio: 1 / 1; }
  .about__shot--tall, .about__shot--wide { grid-row: auto; grid-column: auto; }
}

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(34px, 4.5vw, 64px); }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 28px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.tile:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(34,32,43,.1); }
.tile .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-t); color: var(--accent-d); display: grid; place-items: center; font-size: 22px; margin-bottom: 16px; }
.tile h4 { font-family: var(--font-body); font-weight: 800; font-size: 19px; }
.tile p { color: var(--muted); margin-top: 8px; font-size: 16px; }

/* locations / chips strip */
.chips-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.chips-wrap .chip { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }

/* ---------- legal pages (политика / согласия) ---------- */
.legal { max-width: 840px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) var(--pad) clamp(48px, 7vw, 96px); position: relative; z-index: 1; }
.legal .crumb { margin-bottom: 18px; }
.legal h1 { font-size: clamp(28px, 5vw, 50px); line-height: 1.08; margin-bottom: 10px; }
.legal__date { color: var(--muted); font-weight: 600; margin-bottom: 32px; }
.legal h2 { font-size: clamp(21px, 2.6vw, 29px); margin: 38px 0 14px; }
.legal h3 { font-size: 19px; margin: 24px 0 10px; }
.legal p { margin-bottom: 14px; line-height: 1.72; color: var(--ink-soft); }
.legal a { color: var(--c-art); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--c-art-d); }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal li { margin-bottom: 8px; line-height: 1.65; color: var(--ink-soft); }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.legal td, .legal th { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; color: var(--ink-soft); }
.legal strong { color: var(--ink); font-weight: 700; }
/* до 820px: на iPad в портрете (768) таблица политики тоже вылезала на 6 px */
@media (max-width: 820px) {
  .legal table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal a, .legal p, .legal li, .legal td { overflow-wrap: anywhere; }
}

/* ---------- cookie banner ---------- */
/* на узком экране баннер занимал 30 % высоты и накрывал календарь: короткая фраза, ссылка «Подробнее», в одну строку с кнопкой */
@media (max-width: 400px) {
  .cookie { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; gap: 10px 14px; border-radius: 16px; }
  .cookie__long { display: none; }
  .cookie__short { display: inline; color: #fff; text-decoration: underline; }
  .cookie__text { flex: 1 1 150px; font-size: 14px; }
  .cookie__btn { padding: 11px 18px; font-size: 14.5px; }
}
/* Искорка на телефоне не показывается, пока открыт cookie-баннер (класс снимает app.js) */
.mascot.is-waiting { visibility: hidden; pointer-events: none; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #d8d3c8; margin-top: 60px; position: relative; z-index: 1; }
.footer .container { padding-block: 56px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .footer .container { grid-template-columns: 1fr; } }
.footer h3 { font-family: var(--font-display); color: var(--cream); font-size: 30px; }
.footer a { color: #d8d3c8; } .footer a:hover { color: #fff; }
.footer .col h5 { text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: #908a7e; margin-bottom: 14px; }
.footer .col p { margin-bottom: 8px; font-size: 16px; }
/* строка ссылки ≥40px: пальцем на телефоне попадать проще (было 21px) */
.footer .col p a, .footer__bottom a { display: inline-block; padding: 8px 0; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #908a7e; }
.footer__bottom .container { padding-block: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   FULLSCREEN STAGE — homepage directions (diagonal flythrough)
   ============================================================ */
.dirstage { position: relative; }
.dirstage__intro { padding-top: clamp(48px, 8vw, 120px); padding-bottom: clamp(22px, 3.2vw, 44px); }
.dirstage__intro h2 { font-size: clamp(34px, 5.5vw, 72px); line-height: 1.06; }
.dirstage__intro p { color: var(--muted); max-width: 44ch; margin-top: clamp(14px, 1.4vw, 20px); }
.dirstage__pin { height: 100vh; position: relative; overflow: hidden; }

.dpanel {
  position: absolute; top: calc(var(--header-h) + 8px); right: clamp(12px, 3vw, 48px); bottom: clamp(16px, 3vh, 40px); left: clamp(12px, 3vw, 48px);
  border-radius: var(--radius); background: var(--at); border: 1px solid var(--line); overflow: hidden;
  display: flex; align-items: center; padding: clamp(28px, 7vw, 100px);
  will-change: transform, opacity; box-shadow: 0 50px 110px rgba(34,32,43,.14);
}
.dpanel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--a); }
.dpanel__inner { position: relative; z-index: 2; max-width: 820px; }
/* У Onest нет настоящего курсива; синтетический наклон плохо читается (аудитория 55+).
   Акцент здесь и так несёт цвет направления — заменяем наклон на вес + разрядку. */
.dpanel__num { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; font-size: clamp(20px, 2vw, 30px); color: var(--a); opacity: .7; }
.dpanel h3 { font-size: clamp(46px, 9.5vw, 140px); color: var(--a); line-height: .96; margin: 4px 0 20px; }
.dpanel p { font-size: clamp(18px, 2.5vw, 30px); color: var(--ink-soft); max-width: 22ch; }
.dpanel__go { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(22px, 3.5vw, 46px); font-weight: 700; font-size: clamp(17px, 1.7vw, 23px); color: #fff; background: var(--a); padding: 16px 32px; border-radius: 999px; transition: transform .35s var(--ease); }
.dpanel__go .arr { transition: transform .35s var(--ease); }
.dpanel:hover .dpanel__go { transform: translateY(-2px); }
.dpanel:hover .dpanel__go .arr { transform: translateX(6px); }
.dpanel__blob { position: absolute; right: -6%; bottom: -22%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: var(--a); opacity: .14; z-index: 1; }
.dpanel.c-paint { --a: var(--c-paint); --at: var(--c-paint-t); } .dpanel.c-art { --a: var(--c-art); --at: var(--c-art-t); }
.dpanel.c-craft { --a: var(--c-craft); --at: var(--c-craft-t); } .dpanel.c-food { --a: var(--c-food); --at: var(--c-food-t); }
.dpanel.c-style { --a: var(--c-style); --at: var(--c-style-t); } .dpanel.c-active { --a: var(--c-active); --at: var(--c-active-t); }
.dirstage__hint { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; margin-top: 16px; padding-inline: var(--pad); }

/* directions — спокойная сетка (всегда; вместо scroll-jacking) */
.dirstage__pin.is-static { height: auto; overflow: visible; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 28px); padding: 0 var(--pad); }
.dirstage__pin.is-static .dpanel { position: static; inset: auto; min-height: clamp(250px, 25vw, 350px); padding: clamp(26px, 3vw, 50px); }
.dirstage__pin.is-static .dpanel h3 { font-size: clamp(32px, 3.8vw, 58px); line-height: .98; margin: 6px 0 14px; }
.dirstage__pin.is-static .dpanel p { font-size: clamp(16px, 1.4vw, 21px); max-width: 26ch; }
@media (max-width: 760px) { .dirstage__pin.is-static { grid-template-columns: 1fr; gap: 18px; } }

/* ============================================================
   FULLSCREEN STAGE — direction page teachers + courses
   ============================================================ */
.tstage { position: relative; }
.tstage__pin { height: 100vh; position: relative; overflow: hidden; }
.tcard {
  position: absolute; top: calc(var(--header-h) + 8px); right: clamp(12px, 3vw, 48px); bottom: clamp(16px, 3vh, 40px); left: clamp(12px, 3vw, 48px);
  border-radius: var(--radius); background: var(--accent-t); border: 1px solid var(--line);
  box-shadow: 0 50px 110px rgba(34,32,43,.16); overflow: hidden;
  padding: clamp(30px, 5vw, 84px); will-change: transform, opacity;
}
.tcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--accent); }
.tcard__teacher {
  position: absolute; top: 50%; left: clamp(30px, 5vw, 84px); right: clamp(30px, 5vw, 84px);
  margin-inline: auto; width: min(42%, 480px); text-align: center; z-index: 3; will-change: transform;
}
.tcard__teacher .teacher__photo, .tcard__teacher .teacher__mono { width: clamp(150px, 17vw, 230px); height: clamp(150px, 17vw, 230px); margin: 0 auto; }
.tcard__teacher .teacher__mono { font-size: clamp(56px, 7vw, 92px); }
.tcard__teacher .teacher__name { font-size: clamp(28px, 3vw, 46px); margin: 24px 0 18px; }
.tcard__teacher .teacher__regalia { display: inline-flex; flex-direction: column; gap: 9px; text-align: left; }
.tcard__teacher .teacher__regalia li { font-size: clamp(15px, 1.3vw, 18px); }
.tcard__teacher .chips-wrap { margin-top: 18px; justify-content: center; }
.tcard__courses { position: absolute; top: clamp(28px, 5vw, 84px); bottom: clamp(28px, 5vw, 84px); right: clamp(40px, 5vw, 84px); width: min(54%, 720px); z-index: 4; will-change: opacity; }
.tcourse {
  position: absolute; inset: 0; background: transparent; border: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: center; will-change: transform, opacity;
}
.tcourse::before { display: none; }
.tcourse:hover { transform: none; box-shadow: none; }
.tcourse .course__top { display: block; }
.tcourse h5 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 48px); color: var(--accent-d); line-height: 1.04; }
.tcourse .course__time { display: inline-block; align-self: flex-start; margin-top: 16px; font-size: clamp(14px, 1.3vw, 18px); font-weight: 700; background: var(--accent-solid); color: var(--on-accent); padding: 10px 22px; border-radius: 999px; }
.tcourse p { font-size: clamp(15px, 1.45vw, 20px); line-height: 1.55; color: var(--ink-soft); margin-top: 18px; max-width: none; }
.tcourse .mini { align-self: flex-start; margin-top: 24px; font-size: 17px; padding: 14px 30px; }
.tcard__count { position: absolute; right: clamp(24px, 3vw, 52px); bottom: clamp(20px, 3vh, 40px); z-index: 5; font-weight: 700; font-size: 15px; color: var(--accent-d); opacity: .55; }

/* duo teacher (a course led by two mentors) */
.duo-badge { display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .02em; padding: 7px 16px; border-radius: 999px; background: var(--accent-solid); color: var(--on-accent); margin-bottom: 18px; box-shadow: 3px 3px 0 var(--ink); }
.duo-photos { display: flex; gap: 14px; justify-content: center; margin-bottom: 4px; }
.duo-photos .teacher__photo { width: clamp(96px, 11vw, 146px); height: clamp(96px, 11vw, 146px); }
.duo-photos .teacher__photo:nth-child(1) { transform: rotate(-4deg); }
.duo-photos .teacher__photo:nth-child(2) { transform: rotate(4deg); }
.teacher__side--duo .teacher__name { font-size: clamp(20px, 2vw, 28px); }
.tcard__teacher.teacher__side--duo .teacher__name { font-size: clamp(22px, 2.2vw, 30px); }

@media (prefers-reduced-motion: reduce) {
  .dpanel, .tpanel { transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   MOBILE polish
   ============================================================ */
@media (max-width: 760px) {
  .dhero__sticker { display: none; }
  .dhero h1 { font-size: clamp(46px, 16vw, 80px); }
  .teacher { padding: 22px; }
  .teacher__photo, .teacher__mono { width: 120px; height: 120px; }
  .duo-photos .teacher__photo { width: 92px; height: 92px; }
  .works-strip { gap: 8px; }
  .work-thumb, .work-more { width: clamp(58px, 18vw, 76px); height: clamp(58px, 18vw, 76px); }
  .cta { padding: 30px 22px; }
  .hero__cta .btn, .dhero .btn { width: 100%; justify-content: center; }
  .section { padding-block: clamp(48px, 12vw, 80px); }
}

/* ---------- reading progress bar ---------- */
.readbar { position: fixed; top: 0; left: 0; height: 4px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; z-index: 95; }

/* ---------- hover dropdown on active direction link ---------- */
.navdrop-wrap { position: relative; display: inline-flex; align-items: center; }
@keyframes navbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.nav-bounce { display: inline-block; animation: navbounce 1.5s ease-in-out infinite; }
.navdrop-wrap:hover .nav-bounce { animation-play-state: paused; }
.navdrop { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 210px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 56px rgba(34,32,43,.18); padding: 10px; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 60; }
.navdrop::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.navdrop::after { content: ""; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; background: var(--paper); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.navdrop-wrap:hover .navdrop, .navdrop-wrap.is-open .navdrop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.navdrop a { padding: 11px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--ink-soft); text-align: center; transition: background .2s, color .2s; }
.navdrop a:hover { background: var(--accent-t); color: var(--accent-d); }
.navdrop__cta { background: var(--accent-solid); color: var(--on-accent) !important; }
.navdrop__cta:hover { background: var(--accent-solid-h) !important; color: var(--on-accent) !important; }
/* directions list dropdown (on «Направления») */
.dirmenu { min-width: 254px; }
.dirmenu a { display: flex; align-items: center; gap: 12px; text-align: left; }
.dirmenu .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 0%, transparent); }
.navdrop-wrap .caret { font-size: 9px; margin-left: 5px; opacity: .55; display: inline-block; transition: transform .25s var(--ease); }
.navdrop-wrap:hover .caret { transform: rotate(180deg); }

/* ---------- overview card: scannable bullets ---------- */
.cg-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cg-list li { position: relative; padding-left: 16px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.cg-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- stage progress: rail + indicator + skip ---------- */
.tstage__rail { position: absolute; right: 18px; top: 14%; bottom: 14%; width: 4px; border-radius: 4px; background: color-mix(in oklab, var(--accent) 20%, transparent); z-index: 6; }
.tstage__railfill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--accent); border-radius: 4px; transform: scaleY(0); transform-origin: top; }
.tstage__ind { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); z-index: 6; font-weight: 700; font-size: 14px; letter-spacing: .03em; color: var(--accent-d); background: var(--paper); border: 1px solid var(--line); padding: 8px 18px; border-radius: 999px; white-space: nowrap; }
.tstage__skip { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 6; font-weight: 700; font-size: 14px; color: var(--accent-d); background: var(--paper); border: 1px solid var(--line); padding: 10px 22px; border-radius: 999px; transition: transform .3s var(--ease), background .25s, color .25s, border-color .25s; }
.tstage__skip:hover { transform: translateX(-50%) translateY(3px); background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); }

/* ---------- calm overview grid (scannable «Все курсы») ---------- */
.coursegrid { padding-block: clamp(48px, 7vw, 100px); position: relative; z-index: 1; }
.cg-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.cg-filter button { font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink-soft); transition: background .25s, color .25s, border-color .25s; }
.cg-filter button.is-active, .cg-filter button:hover { background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); }
.coursegrid__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.cg-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cg-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(34,32,43,.1); }
.cg-teacher { font-size: 14px; font-weight: 700; color: var(--accent-d); text-transform: uppercase; letter-spacing: .08em; }
.cg-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--ink); line-height: 1.1; }
.cg-card .chip { align-self: flex-start; }
.cg-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-card .cg-book { align-self: flex-start; margin-top: auto; padding: 11px 22px; font-size: 15px; border-radius: 999px; background: var(--accent-solid); color: var(--on-accent); font-weight: 700; transition: background .25s; }
.cg-card .cg-book:hover { background: var(--accent-solid-h); }
.cg-card.is-hidden { display: none; }

/* ---------- works gallery (thumbnails + lightbox) ---------- */
.tcourse p.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 5.1em; }
.works { margin-top: 18px; }
.works__label { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-d); margin-bottom: 10px; }
.tcard__teacher .works { margin-top: 22px; }
.tcard__teacher .works__label { text-align: center; }
.tcard__teacher .works-strip { justify-content: center; }
.tcard__teacher .work-thumb, .tcard__teacher .work-more { width: clamp(46px, 4.4vw, 62px); height: clamp(46px, 4.4vw, 62px); border-radius: 12px; }
.works-strip { display: flex; gap: 10px; margin-top: 0; flex-wrap: wrap; }
.work-thumb { flex: none; width: clamp(54px, 5vw, 74px); height: clamp(54px, 5vw, 74px); border-radius: 12px; object-fit: cover; cursor: pointer; border: 3px solid var(--paper); box-shadow: 0 8px 18px rgba(34,32,43,.14); transition: transform .3s var(--ease); background: var(--accent-t); }
.work-thumb:hover { transform: translateY(-5px) scale(1.05); }
.work-more { flex: none; width: clamp(54px, 5vw, 74px); height: clamp(54px, 5vw, 74px); border-radius: 12px; display: grid; place-items: center; background: var(--accent-solid); color: var(--on-accent); font-weight: 700; font-size: 15px; cursor: pointer; border: none; }
.cg-works { display: flex; gap: 8px; }
.cg-works img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; cursor: pointer; transition: transform .25s var(--ease); }
.cg-works img:hover { transform: scale(1.06); }

.lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(20,18,28,.93); opacity: 0; visibility: hidden; transition: opacity .3s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 88vw; max-height: 84vh; border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.5); object-fit: contain; background: #2a2733; }
.lightbox__close { position: absolute; top: 22px; right: 26px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 20px; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255,255,255,.32); }
.lightbox__prev { left: 24px; } .lightbox__next { right: 24px; }
.lightbox__count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; font-size: 14px; opacity: .8; }
@media (max-width: 700px) { .lightbox__nav { width: 46px; height: 46px; } .lightbox__prev { left: 10px; } .lightbox__next { right: 10px; } }

/* ---------- booking modal + form ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20,18,28,.55); backdrop-filter: blur(3px); }
.modal__card {
  position: relative; z-index: 1; width: min(560px, 100%); max-width: 100%; max-height: 92vh; overflow-y: auto; overflow-x: hidden;
  background: var(--paper); border-radius: var(--radius); padding: clamp(26px, 4vw, 44px);
  box-shadow: 0 30px 80px rgba(20,18,28,.4); transform: translateY(24px) scale(.97); transition: transform .35s var(--ease);
}
.modal.is-open .modal__card { transform: none; }
.modal__x { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 18px; color: var(--ink); transition: background .25s, transform .25s var(--ease); }
.modal__x:hover { background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); transform: rotate(90deg); }
.modal__card h3 { font-size: clamp(26px, 3.4vw, 36px); margin: 14px 0 8px; }
.modal__sub { color: var(--muted); margin-bottom: 22px; }
.bform { display: grid; gap: 16px; min-width: 0; }
.bform label { display: grid; gap: 7px; font-weight: 700; font-size: 14px; color: var(--ink-soft); min-width: 0; }
.bform input:not([type=checkbox]), .bform select { width: 100%; min-width: 0; max-width: 100%; height: 52px; padding: 0 16px; font: inherit; font-weight: 500; color: var(--ink); background: var(--sunken); border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .25s, background .25s; }
.bform input:focus, .bform select:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.bform__hint { font-weight: 500; font-size: 13px; color: var(--muted); line-height: 1.4; }
.bform select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236B6675' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }

/* contact block in booking modal */
.modal__contact { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.modal__contact-label { display: block; font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.modal__contact-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cbtn { flex: 1 1 0; min-width: 96px; padding: 13px 12px; border-radius: 12px; font-weight: 700; font-size: 14.5px; color: #fff; text-align: center; transition: transform .25s var(--ease), filter .2s; }
.cbtn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cbtn--max { background: #6E56CF; }
.cbtn--wa { background: #25D366; }
.cbtn--tg { background: #2AABEE; }
.cbtn--vk { background: #0077FF; }
.modal__phone { display: inline-block; margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); }
.modal__phone:hover { color: var(--accent-d); }
.bform .consent { display: block; position: relative; padding-left: 36px; font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.bform .consent input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; accent-color: var(--accent); }
.bform .consent a { color: var(--accent-d); text-decoration: underline; }
.bform button[type=submit] { justify-content: center; margin-top: 6px; }
.bform input.hp-field { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.bform__err { background: #fdecec; color: #b3261e; border: 1.5px solid #f6c9c5; border-radius: 12px; padding: 11px 14px; font-size: 14.5px; font-weight: 500; }
.bform__done { text-align: center; padding: 16px 6px; }
.bform__check { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; background: var(--accent-solid); color: var(--on-accent); display: grid; place-items: center; font-size: 38px; }
.bform__done h3 { margin-bottom: 8px; }
.bform__done p { color: var(--muted); margin-bottom: 22px; }

/* ---------- reveal base (JS toggles) ---------- */
[data-reveal] { opacity: 0; transform: translateY(38px); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- mobile scroll-reveal (IntersectionObserver adds .m-in) ---------- */
@media (max-width: 900px) {
  /* единичные элементы (заголовки, абзацы) — мягко всплывают */
  html.m-fx [data-reveal] {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  html.m-fx [data-reveal].m-in { opacity: 1; transform: none; }

  /* группы с каскадом (курсы преподавателя, плитки) */
  html.m-fx [data-stagger] > * {
    opacity: 0; transform: translateY(24px);
    transition: opacity .55s ease, transform .6s cubic-bezier(.34,1.4,.5,1);
  }
  html.m-fx [data-stagger].m-in > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); }

  /* курсы преподавателя — выезжают слева вдоль линии-таймлайна */
  html.m-fx .courses[data-stagger] > .course { transform: translateX(-28px); }
  html.m-fx .courses[data-stagger].m-in > .course { transform: none; }
  html.m-fx .courses::before { transform: scaleY(0); transform-origin: top; transition: transform .85s cubic-bezier(.22,1,.36,1) .12s; }
  html.m-fx .courses.m-in::before { transform: scaleY(1); }

  /* горизонтальные карточки курсов направления — каскад при появлении ряда */
  html.m-fx [data-hscroll] > * {
    opacity: 0; transform: translateY(26px) scale(.95);
    transition: opacity .6s ease, transform .65s cubic-bezier(.34,1.45,.5,1);
  }
  html.m-fx [data-hscroll].m-in > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 85ms); }

  /* преподаватель: фото «выпрыгивает», имя и регалии поднимаются следом */
  html.m-fx .teacher .teacher__photo {
    opacity: 0; transform: scale(.6) rotate(-16deg);
    transition: opacity .6s ease, transform .85s cubic-bezier(.34,1.56,.64,1);
  }
  html.m-fx .teacher.m-in .teacher__photo { opacity: 1; transform: rotate(-3deg) scale(1); }
  html.m-fx .teacher .teacher__name {
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s ease .16s, transform .6s cubic-bezier(.22,1,.36,1) .16s;
  }
  html.m-fx .teacher.m-in .teacher__name { opacity: 1; transform: none; }
  html.m-fx .teacher .teacher__regalia li {
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }
  html.m-fx .teacher.m-in .teacher__regalia li { opacity: 1; transform: none; transition-delay: calc(.24s + var(--ri, 0) * 55ms); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html.m-fx [data-reveal], html.m-fx [data-stagger] > *, html.m-fx [data-hscroll] > *,
  html.m-fx .teacher .teacher__photo, html.m-fx .teacher .teacher__name,
  html.m-fx .teacher .teacher__regalia li { opacity: 1 !important; transform: none !important; }
}

/* ---------- подбор занятия по свободному графику (finder) ---------- */
/* красивое разделение между блоком ИИ и подбором по графику + больше воздуха */
.finder { padding-block: clamp(52px, 8vw, 96px); position: relative; z-index: 1; border-top: 1px solid var(--line); }
.finder::before { content: ""; position: absolute; top: -1px; left: var(--pad); width: 56px; height: 3px; border-radius: 3px; background: var(--accent); }
.finder .eyebrow { color: var(--accent-d); }
.finder h2 { font-size: clamp(30px, 4.4vw, 56px); margin: 6px 0 8px; }
.finder > .container > p { color: var(--muted); max-width: 56ch; }
.finder__form { margin-top: 26px; display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 32px); align-items: flex-end;
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 2.6vw, 32px); }
.finder__field { display: flex; flex-direction: column; gap: 10px; }
.finder__field > label { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.finder__days { display: flex; flex-wrap: wrap; gap: 8px; }
.finder__day { padding: 11px 17px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--cream); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 15px; color: var(--ink); transition: background .2s, border-color .2s, color .2s, opacity .2s; }
.finder__day:hover { border-color: var(--accent); }
.finder__day.is-on { background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); }
.finder__day.is-dim { opacity: .4; }
.finder__time { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-soft); }
.finder__time select { height: 52px; padding: 0 16px; font: inherit; font-weight: 600; color: var(--ink); background: var(--sunken);
  border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.finder__go { white-space: nowrap; }
.finder__msg { margin-top: 18px; background: #fff3da; color: #9a6b00; border: 1.5px solid #f0d79a; border-radius: 12px; padding: 14px 18px; font-weight: 600; }
.finder__results { margin-top: 26px; display: flex; flex-direction: column; gap: 26px; }
.finder__group > h3 { font-size: clamp(20px, 2.2vw, 28px); margin-bottom: 14px; }
.finder__group--alt > h3 { color: var(--muted); }
.finder__note { font-size: 17px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.finder__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .finder__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .finder__grid { grid-template-columns: 1fr; } }
.fcard { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--cream); display: flex; flex-direction: column; gap: 6px; }
.fcard__dir { align-self: flex-start; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; padding: 4px 11px; border-radius: 999px; margin-bottom: 4px; }
.fcard__dir.c-paint { background: var(--c-paint); } .fcard__dir.c-art { background: var(--c-art); }
.fcard__dir.c-craft { background: var(--c-craft); } .fcard__dir.c-food { background: var(--c-food); }
.fcard__dir.c-style { background: var(--c-style); } .fcard__dir.c-active { background: var(--c-active); }
.fcard h4 { font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.fcard__teacher { color: var(--muted); font-size: 14px; }
.fcard__time { font-weight: 700; color: var(--accent-d); font-size: 15px; }
.fcard__book { margin-top: 10px; justify-content: center; }
@media (max-width: 760px) { .finder__form { flex-direction: column; align-items: stretch; } .finder__go { width: 100%; justify-content: center; } }

/* ---------- AI-опросник (квиз подбора) ---------- */
.hero__ann { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 9px 8px 9px 16px; font-weight: 600; font-size: 14.5px;
  cursor: pointer; border: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); max-width: 100%; }
.hero__ann:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,32,43,.22); }
.hero__ann b { font-weight: 800; }
.hero__ann .hero__ann-spark { font-size: 16px; }
.hero__ann .hero__ann-go { background: var(--accent); color: #fff; border-radius: 999px; width: 28px; height: 28px; display: grid; place-items: center; flex: none; }

.quiz { display: grid; gap: 18px; }
.quiz__head { display: flex; flex-direction: column; gap: 10px; }
.quiz__bar { height: 8px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.quiz__bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .45s var(--ease); }
.quiz__acc { font-size: 14px; font-weight: 700; color: var(--accent-d); }
.quiz__q { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); line-height: 1.12; }
.quiz__opts { display: grid; gap: 10px; }
.quiz__opt { text-align: left; padding: 15px 18px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--cream);
  font-family: inherit; font-weight: 600; font-size: 16px; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.quiz__opt:hover { border-color: var(--accent); transform: translateX(3px); }
.quiz__opt.is-pick { background: var(--accent); color: #fff; border-color: var(--accent); }
.quiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quiz__back { background: none; border: none; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 14px; }
.quiz__back:hover { color: var(--ink); }
.quiz__submit { justify-content: center; }
.quiz__loading { text-align: center; padding: 30px 10px; }
.quiz__spinner { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; border: 4px solid var(--sunken); border-top-color: var(--accent); animation: quizspin .9s linear infinite; }
@keyframes quizspin { to { transform: rotate(360deg); } }
.quiz__loading p { color: var(--muted); }
.quiz__results { display: grid; gap: 16px; }
/* фаза 2: карточка «творческого портрета» */
.quiz__portrait { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: 20px;
  color: #fff; background: linear-gradient(125deg, #2E8B8B, #34538C); box-shadow: 0 16px 38px rgba(46,83,140,.22);
  animation: portraitIn .55s cubic-bezier(.34,1.3,.5,1) both; }
.quiz__portrait-emoji { margin-top: 2px; }
.quiz__portrait-sum { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.28); font-size: 15.5px; line-height: 1.5; opacity: .97; }
.quiz__portrait--creator  { background: linear-gradient(125deg, #C75B39, #B5547E); }
.quiz__portrait--seeker   { background: linear-gradient(125deg, #34538C, #2E8B8B); }
.quiz__portrait--maker    { background: linear-gradient(125deg, #6B8E4E, #2E8B8B); }
.quiz__portrait--aesthete { background: linear-gradient(125deg, #B5547E, #E0A02F); }
.quiz__portrait--soul     { background: linear-gradient(125deg, #E0A02F, #C75B39); }
.quiz__portrait-emoji { font-size: 46px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.18)); }
.quiz__portrait-txt .eyebrow { color: rgba(255,255,255,.85); }
.quiz__portrait-txt h4 { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3vw, 28px); margin: 4px 0 6px; }
.quiz__portrait-txt p { font-size: 15.5px; line-height: 1.45; opacity: .96; }
@keyframes portraitIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.quiz__temper { background: var(--sunken); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; }
.quiz__temper .eyebrow { color: var(--muted); }
.quiz__temper h5 { font-family: var(--font-display); font-weight: 800; font-size: 21px; margin: 4px 0 7px; color: var(--ink); }
.quiz__temper p { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
/* резюме подбора — как сообщение от Искорки */
.quiz__saymsg { display: flex; gap: 12px; align-items: flex-start; }
.quiz__saymsg-ava { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(34,32,43,.08); }
.quiz__saymsg-ava .mascot__svg { width: 84%; height: 84%; filter: none; }
.quiz__saymsg-bubble { background: var(--cream-2); border-radius: 18px; border-top-left-radius: 5px;
  padding: 14px 18px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.quiz__saymsg-bubble b { font-weight: 800; color: var(--c-active-d); }
.quiz__summary { font-size: 17px; line-height: 1.5; background: var(--accent-t); border-radius: 16px; padding: 18px 20px; color: var(--ink); }
.qcard { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.qcard__dir { align-self: flex-start; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; padding: 4px 11px; border-radius: 999px; }
.qcard__dir.c-paint { background: var(--c-paint); } .qcard__dir.c-art { background: var(--c-art); }
.qcard__dir.c-craft { background: var(--c-craft); } .qcard__dir.c-food { background: var(--c-food); }
.qcard__dir.c-style { background: var(--c-style); } .qcard__dir.c-active { background: var(--c-active); }
.qcard h4 { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.qcard__reason { color: var(--ink-soft); font-size: 15px; }
.qcard__meta { color: var(--muted); font-size: 13.5px; }
.qcard__book { align-self: flex-start; margin-top: 8px; }

/* квиз — шаг контактов */
.quiz__contact { display: grid; gap: 14px; }
.quiz__contact > label { display: grid; gap: 7px; font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.quiz__contact input:not([type=checkbox]) { width: 100%; height: 50px; padding: 0 16px; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--sunken); border: 1.5px solid var(--line); border-radius: 12px; }
.quiz__contact input:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.quiz__contact > label.quiz__consent { display: block; position: relative; padding-left: 36px; gap: 0; font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.quiz__contact > label.quiz__consent input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; accent-color: var(--accent); }
.quiz__contact > label.quiz__consent a { color: var(--accent-d); text-decoration: underline; }
.quiz__err { background: #fdecec; color: #b3261e; border: 1.5px solid #f6c9c5; border-radius: 12px; padding: 10px 13px; font-size: 13.5px; font-weight: 500; }
.quiz__contact .quiz__submit { justify-content: center; margin-top: 4px; }
.quiz__contact .quiz__back { justify-self: center; }

/* квиз пошире */
#quiz .modal__card { width: min(760px, 100%); }

/* ============ AI-блок: полноэкранная фичер-секция с живым aurora-градиентом ============ */
.aiblock--feature {
  position: relative; overflow: hidden; isolation: isolate;
  margin-block: clamp(56px, 8vw, 120px);   /* белый воздух до и после блока (заказчик 18.09) */
  min-height: clamp(560px, 90vh, 920px); display: flex; align-items: center;
  padding-block: clamp(64px, 10vh, 130px);
  /* тёплый коралловый как у героя, но мягче/белее: лёгкая белая вуаль поверх */
  background:
    radial-gradient(125% 95% at 50% 26%, rgba(255,255,255,.34), rgba(255,255,255,0) 58%),
    linear-gradient(118deg, #f4377f 0%, #f15a6a 26%, #f5896b 52%, #f8b48a 78%, #fbd0a8 100%);
  color: #fff;
}
/* Границы блока чёткие, без растворения в белый (заказчик 18.09); градиент внутри остаётся. */
/* живой фон — дрейфующие цветные пятна (по цветам направлений) */
.aiblock__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* мягкие «aurora»-пятна через radial-gradient — без filter:blur (дёшево для GPU, без артефактов) */
/* мягкие тёплые пятна (в тон коралловому герою), низкая насыщенность — не «кричат» */
.aiblock__blob { position: absolute; border-radius: 50%; will-change: transform; }
.aiblock.is-idle .aiblock__blob { animation-play-state: paused; }
/* на телефоне два пятна вместо четырёх и без принудительных GPU-слоёв: четыре слоя по 70vw
   переполняли видеопамять старых телефонов — блоки мигали (ревизия 18.09) */
@media (max-width: 900px) {
  .aiblock__blob { will-change: auto; }
  .aiblock__blob--3, .aiblock__blob--4 { display: none; }
}
.aiblock__blob--1 { width: 70vw; height: 70vw; max-width: 940px; max-height: 940px; left: -14vw; top: -22vw;
  background: radial-gradient(circle, rgba(244,55,127,.42) 0%, rgba(244,55,127,0) 64%); animation: aiDrift1 18s ease-in-out infinite; }
.aiblock__blob--2 { width: 64vw; height: 64vw; max-width: 860px; max-height: 860px; right: -12vw; top: 8vh;
  background: radial-gradient(circle, rgba(248,180,138,.5) 0%, rgba(248,180,138,0) 64%); animation: aiDrift2 22s ease-in-out infinite; }
.aiblock__blob--3 { width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; left: 20vw; bottom: -26vw;
  background: radial-gradient(circle, rgba(241,90,106,.4) 0%, rgba(241,90,106,0) 62%); animation: aiDrift3 20s ease-in-out infinite; }
.aiblock__blob--4 { width: 48vw; height: 48vw; max-width: 640px; max-height: 640px; right: 14vw; top: -14vw;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 62%); animation: aiDrift1 24s ease-in-out infinite reverse; }
@keyframes aiDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,5vh) scale(1.14); } }
@keyframes aiDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,-4vh) scale(1.1); } }
@keyframes aiDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vw,-6vh) scale(1.16); } }

.aiblock__inner { position: relative; z-index: 2; max-width: 900px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2vw, 24px); }
.aiblock--feature .eyebrow { color: rgba(255,255,255,.92); }
.aiblock--feature .eyebrow::before { background: rgba(255,255,255,.85); }
.aiblock--feature h2 { font-size: clamp(36px, 5.6vw, 78px); line-height: 1.04; text-wrap: balance; text-shadow: 0 2px 22px rgba(150,40,60,.2); }
.aiblock--feature p { color: #fff; font-size: clamp(17px, 1.9vw, 22px); max-width: 58ch; text-shadow: 0 1px 16px rgba(150,40,60,.26); }
/* CTA — чистая белая пилюля с мягким свечением */
.aiblock__btn { margin-top: 6px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(18px, 2vw, 23px); padding: 18px 42px; border-radius: 999px; color: #2a2330; cursor: pointer; position: relative;
  background: #fff; box-shadow: 0 16px 40px rgba(20,18,28,.22); animation: aiGlow 3s ease-in-out infinite; transition: transform .3s var(--ease); }
.aiblock__btn .arr { transition: transform .3s var(--ease); }
.aiblock__btn:hover { transform: translateY(-3px); }
.aiblock__btn:hover .arr { transform: translateX(6px); }
@keyframes aiGlow { 0%,100% { box-shadow: 0 16px 40px rgba(20,18,28,.22); } 50% { box-shadow: 0 20px 60px rgba(255,255,255,.4); } }
.aiblock__hint { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
/* убрать полоску-разделитель под ИИ-блоком (фича сама даёт разделение) */
.aiblock--feature + .finder { border-top: none; }
.aiblock--feature + .finder::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .aiblock__blob, .aiblock__btn { animation: none !important; }
}

/* анонс-баннер — широкий, по центру снизу (как cookie) */
.aibanner { position: fixed; left: 50%; bottom: clamp(10px, 2.5vw, 24px); z-index: 96; width: min(600px, calc(100vw - 20px));
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border-radius: 16px; padding: 11px 11px 11px 18px; box-shadow: 0 18px 46px rgba(20,18,28,.42);
  transform: translate(-50%, 160%); opacity: 0; transition: transform .55s var(--ease), opacity .4s; }
.aibanner.is-shown { transform: translate(-50%, 0); opacity: 1; }
.aibanner__main { flex: 1; font-size: 14px; line-height: 1.35; }
.aibanner__main b { font-weight: 800; }
.aibanner__go { flex: none; background: #fff; color: var(--ink); border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s; }
.aibanner__go:hover { transform: translateY(-1px); }
.aibanner__x { flex: none; width: 38px; height: 38px; background: rgba(255,255,255,.13); color: #fff; border-radius: 50%; font-weight: 700; cursor: pointer; }
.aibanner__x:hover { background: rgba(255,255,255,.22); }
@media (max-width: 520px) { .aibanner__main { font-size: 12.5px; } .aibanner__go { padding: 9px 15px; font-size: 13px; } }

/* фейк-загрузка «анализируем» — красивое кольцо */
.quiz__analyze { text-align: center; padding: 34px 10px 26px; }
.quiz__ring { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--c-paint), var(--c-style), var(--c-art), var(--c-active), var(--c-paint));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 0);
  animation: quizspin 1s linear infinite; }
.quiz__analyze-t { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.6vw, 26px); }
.quiz__analyze-s { color: var(--muted); margin-top: 6px; min-height: 1.4em; transition: opacity .2s; }

/* подсветка курса при переходе из ленты курсов */
.course--flash { animation: courseflash 1.5s var(--ease); }
@keyframes courseflash { 0%,100% { box-shadow: 0 0 0 0 transparent; } 18% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .aiblock__btn { animation: none; } .aiblock__btn::after { display: none; } }

/* квиз — подсказка и текстовое поле */
.quiz__hint { color: var(--muted); font-size: 14px; margin-top: -8px; }
.quiz__text { width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); background: var(--sunken);
  border: 1.5px solid var(--line); border-radius: 12px; resize: vertical; min-height: 112px; line-height: 1.5; }
.quiz__text:focus { outline: none; border-color: var(--accent); background: var(--paper); }

/* кнопка «Анализ ИИ» в шапке (на каждой странице) */
.nav-ai { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; font-weight: 700; font-size: 15px; color: #fff;
  border-radius: 999px; background: linear-gradient(120deg, #C75B39, #B5547E 50%, #34538C); box-shadow: 0 8px 20px rgba(181,84,126,.3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.nav-ai::before { content: "✨"; font-size: 13px; }
.nav-ai:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(181,84,126,.5); }

/* кликабельные карточки в ленте курсов */
.ccard { transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.ccard:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(34,32,43,.12); }
.ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* поля контактов в квизе — без переполнения вправо */
.quiz__contact input:not([type=checkbox]) { min-width: 0; max-width: 100%; }

/* квиз — живой переход между вопросами */
.quiz-step { display: grid; gap: 16px; align-content: start; animation: quizStepIn .42s cubic-bezier(.22,1,.36,1) both; }
.quiz-step[data-dir="back"] { animation-name: quizStepInBack; }
@keyframes quizStepIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes quizStepInBack { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
.quiz-step .quiz__opt { animation: quizOptIn .45s cubic-bezier(.34,1.45,.5,1) both; }
.quiz-step .quiz__opt:nth-child(1) { animation-delay: .05s; }
.quiz-step .quiz__opt:nth-child(2) { animation-delay: .11s; }
.quiz-step .quiz__opt:nth-child(3) { animation-delay: .17s; }
.quiz-step .quiz__opt:nth-child(4) { animation-delay: .23s; }
.quiz-step .quiz__opt:nth-child(5) { animation-delay: .29s; }
.quiz-step .quiz__opt:nth-child(6) { animation-delay: .35s; }
@keyframes quizOptIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* загрузка — 2D водный пузырь, который надувается */
.quiz__ring, .quiz__spinner { width: 86px; height: 86px; margin: 0 auto 22px; border-radius: 50%; position: relative; border: 0;
  background: radial-gradient(circle at 38% 32%, #ffffff 0 5%, rgba(150,214,228,.6) 28%, rgba(46,139,139,.6) 74%, rgba(46,139,139,.22) 100%);
  box-shadow: inset 0 -7px 15px rgba(46,139,139,.4), inset 0 7px 13px rgba(255,255,255,.65), 0 12px 28px rgba(46,139,139,.28);
  animation: bubbleInflate 2.2s ease-in-out infinite; }
.quiz__ring::before, .quiz__spinner::before { content: ""; position: absolute; top: 15%; left: 21%; width: 26%; height: 20%;
  border-radius: 50%; background: rgba(255,255,255,.8); filter: blur(.5px); }
@keyframes bubbleInflate {
  0%   { transform: scale(.32); opacity: .3; }
  16%  { opacity: 1; }
  58%  { transform: scale(1); border-radius: 50%; opacity: 1; }
  72%  { transform: scale(1.05); border-radius: 48% 52% 51% 49% / 53% 47% 53% 47%; }
  86%  { transform: scale(.95); }
  100% { transform: scale(.32); opacity: .3; }
}

/* в бургер-меню «Анализ ИИ» того же размера, что и «Записаться» */
.mobile-menu .nav-ai { padding: 15px 26px; font-size: 18px; margin-top: 12px; justify-content: center; }

/* мобильный вертикальный ритм: больше «воздуха» между секциями + мягче межстрочный
   у крупных дисплейных заголовков (аудитория 55+, WCAG 1.4.12 text-spacing) */
@media (max-width: 760px) {
  .section { padding-block: clamp(44px, 11vw, 80px); }
  .dirstage__intro { padding-top: clamp(36px, 9vw, 120px); padding-bottom: 10px; }
  .finder { padding-block: clamp(44px, 9vw, 90px); }
  .coursegrid { padding-top: clamp(14px, 3.5vw, 100px); padding-bottom: clamp(28px, 6.5vw, 100px); }
  /* «Расписание» не должно сильно отрываться от карточек преподавателей */
  #teachers .teacher:last-of-type { margin-bottom: 0; }
  .aiblock.section { padding-block: clamp(40px, 10vw, 64px); }
  /* крупные заголовки на узком экране — мягче leading, чтобы строки не слипались */
  .dirstage__intro h2, .shead h2, .aiblock h2, .finder h2, .cta h2 { line-height: 1.12; }
  .dirstage__pin.is-static .dpanel h3 { line-height: 1.08; }
  /* воздух между меткой-eyebrow и заголовком в интро-блоках */
  .dirstage__intro .eyebrow, .shead .eyebrow, .finder .eyebrow { margin-bottom: 12px; }
  /* абзацы под заголовками — чуть больше отрыва */
  .dirstage__intro p, .aiblock p { margin-top: 14px; }
}

/* баннер выбранной группы в форме записи */
.bform__group { background: var(--accent-t); border: 1.5px solid color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: 12px; padding: 12px 16px; font-weight: 500; font-size: 15px; color: var(--ink); }
.bform__group b { color: var(--accent-d); font-weight: 800; }
/* колонка «Группа» в админке */
.grp { color: var(--accent-d); }

/* ============================ МАСКОТ «ИСКОРКА» ============================ */
.mascot {
  position: fixed; top: 0; left: 0; z-index: 78;
  width: 82px; height: 82px; pointer-events: none;
  transition: transform .85s cubic-bezier(.34,1.2,.4,1);
  will-change: transform;
}
.mascot.is-perched { z-index: 95; transition: transform .7s cubic-bezier(.34,1.3,.45,1); }
.mascot__char {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.mascot__inner { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; animation: mascotBob 3.6s ease-in-out infinite; }
.mascot__tilt { display: block; width: 100%; height: 100%; transition: transform .25s ease; transform-origin: 50% 80%; }
.mascot__svg { width: 100%; height: 100%; overflow: visible; display: block;
  filter: drop-shadow(0 6px 10px rgba(40,28,30,.18)); }
.mascot__char:hover .mascot__inner { animation-duration: 1.9s; }
.mascot__char:active { transform: scale(.93); }

@keyframes mascotBob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }

/* глаза-моргание */
.m-eyes { transform-box: fill-box; transform-origin: 50% 55%; animation: mascotBlink 5.4s infinite; }
@keyframes mascotBlink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.m-pupil { transition: transform .14s ease-out; }
.m-brows { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .25s ease; }
.mascot.is-thinking .m-brows { transform: translateY(-2.5px); }

/* «призрачный» контур в покое: цвет прозрачный, видны только чёрные части — меньше отвлекает */
.m-body { transition: fill .4s ease, stroke .4s ease, stroke-width .4s ease; }
.m-cheek, .m-tongue { transition: opacity .4s ease; }
.mascot__svg { transition: filter .4s ease; }
.mascot.is-ghost .m-body { fill: transparent; stroke: #1c1c1c; stroke-width: 2; }
.mascot.is-ghost .m-cheek, .mascot.is-ghost .m-tongue { opacity: 0; }
.mascot.is-ghost .mascot__svg { filter: none; }
.mascot.is-ghost:hover .m-body { fill: url(#mBodyG); stroke: #EAA200; stroke-width: 1.5; }
.mascot.is-ghost:hover .m-cheek { opacity: .9; }
.mascot.is-ghost:hover .m-tongue { opacity: 1; }
.mascot.is-ghost:hover .mascot__svg { filter: drop-shadow(0 6px 10px rgba(40,28,30,.18)); }

/* приветственная подсказка-облачко */
.mascot__hint {
  position: absolute; top: 50%; right: calc(100% + 8px); transform: translateY(-50%) scale(.6);
  white-space: nowrap; background: var(--ink); color: #fdf3e8; font-size: 14px; font-weight: 600;
  padding: 7px 12px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.mascot__hint::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--ink); border-radius: 2px; }
.mascot.show-hint .mascot__hint { opacity: 1; transform: translateY(-50%) scale(1); }
/* когда Искорка на рамке/ведёт — облачко снизу, с переносом строк, стрелка вверх */
.mascot.is-perched .mascot__hint, .mascot.is-guiding .mascot__hint {
  top: 50%; left: calc(100% + 9px); right: auto;
  white-space: normal; width: max-content; max-width: 250px; line-height: 1.36;
  transform: translateY(-50%) scale(.6); transform-origin: left center;
}
.mascot.is-perched.show-hint .mascot__hint, .mascot.is-guiding.show-hint .mascot__hint { transform: translateY(-50%) scale(1); }
.mascot.is-perched .mascot__hint::after, .mascot.is-guiding .mascot__hint::after { top: 50%; left: -5px; right: auto; transform: translateY(-50%) rotate(45deg); }
/* во время реплики прячем точки-«мысли», чтобы не мешали */
.mascot.show-hint .m-think { opacity: 0 !important; }

/* облачко-«думает» — появляется при подсказке и на рамке попапа */
.m-think { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .3s; }
.mascot.is-thinking .m-think, .mascot.is-writing .m-think { opacity: 1; animation: mascotThink 1.4s ease-in-out infinite; }
@keyframes mascotThink { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.mascot.is-writing .mascot__tilt { transform: rotate(3deg); }

/* ---------- чат Искорки ---------- */
.mascot-chat {
  position: fixed; z-index: 96; width: min(366px, calc(100vw - 24px));
  /* liquid glass: матовое стекло — не сильно прозрачное, с блуром и «живой» насыщенностью */
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(34,32,43,.22), 0 4px 16px rgba(34,32,43,.08),
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.18);
  overflow: hidden;
  display: flex; flex-direction: column; max-height: min(72vh, 580px);
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom right;
  transition: opacity .22s ease, transform .3s var(--ease); pointer-events: none;
}
/* запасной фон для браузеров без backdrop-filter — чуть плотнее, чтобы текст читался */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mascot-chat { background: rgba(255,255,255,.94); }
}
.mascot-chat.is-open { opacity: 1; transform: none; pointer-events: auto; }

.mascot-chat__head { display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  background: rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.5); }
.mascot-chat__ava { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 2px 8px rgba(34,32,43,.10); display: grid; place-items: center; }
.mascot-chat__ava .mascot__svg { width: 88%; height: 88%; filter: none; }
.mascot-chat__head b { font-size: 15.5px; line-height: 1.15; display: block; color: var(--ink); font-weight: 800; }
.mascot-chat__head i { font-size: 14px; font-style: normal; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.mascot-chat__head i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3DBE6B; box-shadow: 0 0 0 3px rgba(61,190,107,.18); }
.mascot-chat__x { margin-left: auto; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.6); color: var(--ink-soft);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; transition: background .2s, color .2s, border-color .2s; }
.mascot-chat__x:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.mascot__log { flex: 1; overflow-y: auto; padding: 16px 15px; display: flex; flex-direction: column; gap: 11px; background: transparent; }
.mc-msg { max-width: 84%; padding: 11px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; }
.mc-msg--bot { align-self: flex-start; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.55);
  color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 4px 14px rgba(34,32,43,.06); }
.mc-msg--me { align-self: flex-end; background: rgba(34,32,43,.88); color: #fff; border-bottom-right-radius: 6px;
  border: 1px solid rgba(255,255,255,.12); }
.mc-links { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.mc-link { font-size: 13.5px; font-weight: 600; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.55); border: 1.5px solid rgba(255,255,255,.65); color: var(--ink);
  transition: border-color .18s, background .18s, transform .12s; }
.mc-link:hover { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.82); }
.mc-link:active { transform: scale(.96); }
.mc-link--go { background: var(--ink); color: #fff; border-color: var(--ink); }
.mc-link--go:hover { background: #000; border-color: #000; }
.mascot.is-guiding { z-index: 95; }
.mc-typing { align-self: flex-start; display: flex; gap: 5px; padding: 13px 15px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.55); border-radius: 18px; border-bottom-left-radius: 6px; }
.mc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; animation: mcTyping 1.1s infinite; }
.mc-typing span:nth-child(2) { animation-delay: .15s; } .mc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mcTyping { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.mascot__form { display: flex; gap: 9px; padding: 12px; border-top: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.3); }
.mascot__input { flex: 1; border: 1.5px solid rgba(255,255,255,.65); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 16px; background: rgba(255,255,255,.55); color: var(--ink); transition: border-color .2s, background .2s; }
.mascot__input::placeholder { color: var(--muted); }
.mascot__input:focus { outline: none; border-color: rgba(255,255,255,.95); background: rgba(255,255,255,.85); }
.mascot__send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px;
  background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .15s, opacity .2s; }
.mascot__send:hover { transform: scale(1.06); }
.mascot__send:disabled { opacity: .45; cursor: default; transform: none; }

@media (max-width: 560px) {
  .mascot { width: 66px; height: 66px; }
  .mascot-chat { left: 10px !important; right: 10px; bottom: 10px !important; top: auto !important; width: auto;
    transform-origin: bottom center; max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot__inner, .m-eyes, .mascot.is-thinking .m-think, .mascot.is-writing .m-think { animation: none !important; }
  .mascot { transition: none; }
}


/* ============ ГЕРОЙ: колесо направлений (Jeton-стиль) ============ */
.hero--wheel { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center;
  margin-top: calc(-1 * var(--header-h));   /* герой заходит под шапку — без белой полосы сверху */
  padding-top: var(--header-h);
  background: linear-gradient(118deg, #f4377f 0%, #f15a6a 26%, #f5896b 52%, #f8b48a 78%, #fbd0a8 100%); }
.hero--wheel .hero__grid { grid-template-columns: 1fr; align-items: center;
  max-width: none; margin: 0; padding-left: clamp(20px, 4vw, 64px); padding-right: 0; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
/* плавный уход кораллового в белый книзу — стыкуется с белыми блоками */
.hero--wheel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 16vh, 200px);
  background: var(--scrim-white-down); z-index: 1; pointer-events: none; }
.hero__copy { position: relative; z-index: 3; max-width: 820px; color: #fff; }
.hero--wheel .eyebrow { color: rgba(255,255,255,.9); }
.hero--wheel .eyebrow::before { background: rgba(255,255,255,.85); }
.hero--wheel h1 { font-size: clamp(46px, 6.2vw, 96px); }
.hero--wheel h1, .hero--wheel .hero__lead { color: #fff; }
.hero--wheel h1 .hl { color: #fff; }
.hero--wheel .hero__lead { opacity: .95; }
.hero--wheel .btn--accent { background: #fff; color: #2a2330; }
.hero--wheel .btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; }

/* пилюли-подписи направлений поверх 3D */
.hero__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wlabel { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: #2a2330; font-weight: 700; font-size: 14px; white-space: nowrap;
  box-shadow: 0 6px 22px rgba(120,30,50,.18); text-decoration: none; pointer-events: auto;
  transition: box-shadow .2s, background .2s; will-change: transform, opacity; }
.wlabel__ic { display: inline-flex; flex: none; }
.wlabel__ic svg { width: 18px; height: 18px; display: block; }
.wlabel__arr { opacity: 0; margin-left: -2px; font-weight: 800; transition: opacity .2s, margin .2s; }
.wlabel.is-front, .wlabel:hover { background: #fff; box-shadow: 0 12px 34px rgba(120,30,50,.30); }
.wlabel.is-front .wlabel__arr, .wlabel:hover .wlabel__arr { opacity: 1; margin-left: 2px; }

/* шапка поверх кораллового героя — светлая */
.header, .header .logo img, .nav-links a, .header .btn, .burger, .burger span {
  transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), filter .35s var(--ease); }
body.over-hero .header { background: transparent; backdrop-filter: none; border-color: transparent; }
body.over-hero .nav-links a { color: rgba(255,255,255,.92); }
body.over-hero .nav-links a[aria-current] { color: #fff; }
body.over-hero .nav-links a::after { background: #fff; }
/* выпадающее меню «Направления» на своём светлом фоне — текст тёмный */
body.over-hero .navdrop a { color: var(--ink-soft); }
body.over-hero .navdrop a:hover { color: var(--accent-d); }
body.over-hero .logo img { filter: brightness(0) invert(1); }
body.over-hero .header .btn { background: #fff; color: var(--ink); }
body.over-hero .burger { border-color: #fff; }
body.over-hero .burger span { background: #fff; }

@media (max-width: 900px) {
  .hero--wheel { min-height: auto; padding-top: clamp(96px, 18vh, 170px); padding-bottom: clamp(48px, 12vh, 100px); }
  .hero__copy { max-width: none; }
}
/* мобильный: колесо в потоке между лидом и кнопкой */
.hero__wheelslot { display: none; }
@media (max-width: 760px) {
  /* отступ от шапки + симметричные поля (чинит «съехавшие вправо» кнопки) */
  .hero--wheel { padding-top: clamp(86px, 12vh, 120px); padding-bottom: clamp(46px, 6vh, 68px); }
  .hero--wheel::after { height: clamp(64px, 11vh, 120px); }
  .hero--wheel .hero__grid { padding-left: clamp(20px, 5.5vw, 30px); padding-right: clamp(20px, 5.5vw, 30px); }
  .hero--wheel h1 { font-size: clamp(32px, 9vw, 52px); line-height: 1.12; }
  .hero--wheel .hero__lead { margin-top: 14px; line-height: 1.5; }
  .hero__wheelslot { display: block; height: 88vw; max-height: 400px; margin: 4px 0 8px; pointer-events: none; }
  /* на мобильном холст колеса — поверх текста в своей зоне, чтобы ловил свайп пальцем */
  .hero--wheel .hero__bg { z-index: 4; }
  .hero--wheel .hero__labels { z-index: 5; }
  /* колесо может чуть выходить за слот по бокам */
  .hero--wheel .hero__bg, .hero--wheel .hero__labels { overflow: visible; }
  /* на мобильном — только передняя подпись, БЕЗ белой плашки, белым текстом */
  .hero__labels .wlabel { display: none; }
  .hero__labels .wlabel.is-front { display: inline-flex; background: transparent; box-shadow: none; color: #fff;
    padding: 0; font-size: 16px; text-shadow: 0 1px 10px rgba(120,30,50,.5); }
  .hero__labels .wlabel__ic { color: #fff !important; }
  .hero__labels .wlabel__arr { opacity: 1; margin-left: 2px; }
}

/* ============================================================
   Особый HERO страницы «Активность и здоровье» (отличается от направлений)
   ============================================================ */
.ahero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--c-active-t) 0%, #fff 68%); }
.ahero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ahero__bg span { position: absolute; border-radius: 50%; filter: opacity(.5); }
.ahero__bg span:nth-child(1) { width: 38vw; height: 38vw; max-width: 460px; max-height: 460px; right: -8vw; top: -12vw;
  background: radial-gradient(circle, rgba(46,139,139,.4), transparent 68%); }
.ahero__bg span:nth-child(2) { width: 26vw; height: 26vw; max-width: 320px; max-height: 320px; left: -6vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(107,142,78,.32), transparent 68%); }
.ahero__inner { position: relative; z-index: 2; padding-block: clamp(40px, 7vw, 96px); }
.ahero .crumb { color: var(--c-active-d); }
.ahero .eyebrow { color: var(--c-active-d); }
.ahero .eyebrow::before { background: var(--c-active); }
.ahero h1 { font-size: clamp(48px, 10vw, 120px); color: var(--c-active-d); line-height: .98; letter-spacing: -.02em; margin: 14px 0 18px; text-wrap: balance; }
/* «ОФЛАЙН» — одно короткое слово, поэтому крупнее обычного h1 и капителью.
   Смысл раздела уносим в подзаголовок, чтобы не потерялся. */
.ahero__big { font-size: clamp(64px, 17vw, 190px) !important; text-transform: uppercase;
  letter-spacing: -.03em !important; line-height: .86 !important; margin: 10px 0 6px !important; }
.ahero__sub { font-size: clamp(19px, 2.6vw, 30px); font-weight: 700; color: var(--c-active);
  line-height: 1.25; max-width: 24ch; margin: 0 0 18px; }
.ahero__lead { font-size: clamp(18px, 2.2vw, 24px); color: var(--ink-soft); max-width: 46ch; line-height: 1.5; }
.ahero__stats { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 54px); margin-top: clamp(26px, 3.5vw, 40px); }
.ahero__stat b { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 56px); color: var(--c-active); display: block; line-height: 1; }
.ahero__stat span { font-size: 14.5px; color: var(--muted); font-weight: 600; margin-top: 4px; display: block; }
.ahero__cta { margin-top: clamp(26px, 3.5vw, 38px); display: flex; gap: 14px; flex-wrap: wrap; }
/* белый текст на #2E8B8B — 4.05:1, ниже нормы 4.5 для аудитории 55+: берём тёмный тон */
.ahero .btn--accent { background: var(--c-active-d); color: #fff; }
.ahero .btn--accent:hover { background: #174F4F; }
@media (max-width: 760px) { .ahero__cta .btn { width: 100%; justify-content: center; } }

/* ============================================================
   ЛОКАТОР очных занятий (OpenLayers) — «Активность и здоровье»
   ============================================================ */
.locator { padding-block: clamp(40px,6vw,80px); position: relative; z-index: 1; }
.locator__intro { margin-bottom: clamp(18px,2.6vw,30px); }
.locator__intro h2 { font-size: clamp(32px,5vw,64px); margin-top: 12px; }
.locator__intro p { color: var(--ink-soft); max-width: 64ch; margin-top: 12px; font-size: clamp(17px,1.5vw,20px); }

/* full-bleed band: инструмент во всю ширину окна */
.loc-band { width: 100vw; margin-left: calc(50% - 50vw); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }

/* toolbar */
.loc-toolbar { padding: 16px clamp(16px,4vw,40px); display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line); }
.loc-toolbar__top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.loc-search { position: relative; flex: 1; min-width: 220px; max-width: 560px; display: flex; align-items: center; }
.loc-search__ic { position: absolute; left: 16px; font-size: 16px; opacity: .6; pointer-events: none; }
.loc-search__input { width: 100%; height: 52px; padding: 0 44px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--sunken); font: inherit; font-size: 17px; color: var(--ink); transition: border-color .2s, background .2s; }
.loc-search__input:focus { outline: none; border-color: var(--c-active); background: #fff; }
.loc-search__clear { position: absolute; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--cream-2); color: var(--muted); cursor: pointer; font-size: 13px; }
.loc-search__clear:hover { background: var(--ink); color: #fff; }
.locator__near { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--c-active-d); color: #fff; font-family: inherit; font-weight: 800; font-size: 16px; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 22px rgba(46,139,139,.28); transition: transform .25s var(--ease), background .25s; }
.locator__near:hover { transform: translateY(-2px); background: #174F4F; }
.locator__near.is-on { background: #174F4F; }
.locator__near-ic { font-size: 17px; }
.locator__filters { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.loc-fgroup { display: flex; gap: 8px; }
/* оба ряда фильтров прокручиваются вбок: типов стало 11, районов — за 20,
   а body { overflow-x: clip } обрезал бы лишние чипы без всякой полосы прокрутки */
.loc-fgroup--types,
.loc-fgroup--dists { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: thin; }
.locator__chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; white-space: nowrap; border: 1.5px solid var(--line); background: var(--cream); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.locator__chip i { font-style: normal; font-weight: 800; font-size: 14px; opacity: .5; }
.locator__chip:hover { border-color: var(--c-active); }
.locator__chip.is-on { background: var(--c-active-d); color: #fff; border-color: var(--c-active-d); }
.locator__chip.is-on i { opacity: .8; }
.locator__select { height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--sunken); font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; max-width: 260px; }
.locator__clear { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--cream); font-family: inherit; font-weight: 700; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.locator__clear:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* split: список слева + карта во всю ширину справа */
.loc-split { display: grid; grid-template-columns: 400px 1fr; height: clamp(440px,58vh,640px); transition: grid-template-columns .32s var(--ease); }
.locator__leftcol { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.locator__list { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; padding: 16px clamp(14px,1.6vw,20px); scrollbar-width: thin; }
.loc-card__count { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 2px; }
.locator__mapcol { position: relative; }
.locator__mapwrap { position: absolute; inset: 0; }
#loc-map { position: absolute; inset: 0; background: var(--sunken); }
/* кнопки масштаба и копирайт — стиль сайта поверх стандартного MapLibre
   (раньше здесь были правила для .ol-* от OpenLayers; после перехода на MapLibre
   они ни к чему не применялись, и кнопки остались стандартными мелкими) */
.locator__mapwrap .maplibregl-ctrl-group { border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(34,32,43,.18); }
.locator__mapwrap .maplibregl-ctrl-group button { background: var(--ink); width: 36px; height: 36px; border-radius: 0; }
.locator__mapwrap .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255,255,255,.18); }
.locator__mapwrap .maplibregl-ctrl-group button:hover { background: #000; }
.locator__mapwrap .maplibregl-ctrl-group button span { filter: invert(1); }
.locator__mapwrap .maplibregl-ctrl-attrib { font-size: 10px; background: rgba(255,255,255,.82); }
.locator__mapwrap { touch-action: pan-y; }
/* клик-активация: полупрозрачный щит поверх неактивной карты */
.loc-mapveil { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 18px; cursor: pointer; transition: opacity .22s var(--ease);
  background: linear-gradient(to top, rgba(34,32,43,.10), rgba(34,32,43,0) 30%); }
.locator.loc-active .loc-mapveil { opacity: 0; pointer-events: none; }
.loc-mapveil__pill { background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%); border: 1px solid var(--line); color: var(--ink);
  font-size: 14.5px; font-weight: 600; padding: 9px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(34,32,43,.16); }
.locator.loc-active .locator__mapwrap { box-shadow: inset 0 0 0 2px var(--accent); }
.locator__mapwrap .maplibregl-ctrl-top-right { z-index: 8; }
@media (hover: hover) and (pointer: fine) { .locator__maphint { display: none !important; } }

/* ===================== ОТЗЫВЫ ===================== */
.rev-h { font-size: clamp(24px, 3vw, 34px); margin: 0 0 6px; }
.rev-sub { color: var(--ink-soft, #6b6b76); margin: 0 0 18px; }
.rev-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #999; flex: none; }
.rev-dot.c-paint { background: #b8651b; } .rev-dot.c-art { background: #7a5cc0; } .rev-dot.c-craft { background: #1f8a70; }
.rev-dot.c-food { background: #c0497a; } .rev-dot.c-style { background: #b08400; } .rev-dot.c-active { background: #2f7fb5; }
.rev-code { font-family: ui-monospace, Menlo, monospace; font-size: 1em; }

.rev-form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius, 18px);
  padding: clamp(20px, 3vw, 34px); max-width: 720px; box-shadow: 0 18px 50px rgba(34,32,43,.06); }
.rev-form { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.rev-field { display: flex; flex-direction: column; gap: 7px; }
.rev-field > label { font-weight: 700; font-size: 14.5px; }
.rev-req { color: #d0584e; } .rev-opt { color: var(--ink-soft, #6b6b76); font-weight: 400; font-size: 14px; }
.rev-input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font: inherit; font-size: 15px; background: var(--cream, #fbf8f3); transition: border-color .15s; }
.rev-input:focus { outline: 0; border-color: var(--accent, #34538c); background: #fff; }
textarea.rev-input { resize: vertical; min-height: 96px; }
.rev-row2 { display: grid; grid-template-columns: 1fr; gap: 16px; }

.rev-combo { position: relative; }
.rev-drop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(34,32,43,.16);
  max-height: 320px; overflow-y: auto; padding: 6px; }
.rev-drop__it { display: flex; gap: 11px; align-items: center; width: 100%; text-align: left; background: none;
  border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; }
.rev-drop__it:hover, .rev-drop__it.is-active { background: var(--cream-2, #eef1f8); }
.rev-drop__it:focus-visible { outline: 2px solid var(--accent, #34538c); outline-offset: -2px; }
.rev-drop__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rev-drop__main b { font-size: 14.5px; }
.rev-drop__sub { font-size: 14px; color: var(--ink-soft, #6b6b76); }
.rev-drop__empty { padding: 14px; color: var(--ink-soft, #6b6b76); font-size: 14px; }
.rev-chosen__card { display: flex; gap: 11px; align-items: center; background: var(--cream, #f6f1e9);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.rev-chosen__card > div { flex: 1; min-width: 0; }
.rev-chosen__sub { font-size: 12.5px; color: var(--ink-soft, #6b6b76); margin-top: 2px; }
.rev-change { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.rev-change:hover { border-color: var(--accent, #34538c); }

.rev-stars { display: flex; gap: 4px; }
.rev-star { font-size: 34px; line-height: 1; background: none; border: 0; cursor: pointer; color: #d9dbe4;
  padding: 0 2px; transition: transform .1s, color .12s; }
.rev-star:hover { transform: scale(1.12); }
.rev-star.is-on { color: #f0a92a; }

.rev-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-soft, #555); }
.rev-consent input { margin-top: 0; width: 24px; height: 24px; flex: none; accent-color: var(--accent, #34538c); }
.rev-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rev-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rev-msg { font-size: 14px; }
.rev-msg.is-ok { color: #1c7a44; font-weight: 600; }
.rev-msg.is-err { color: #c0392b; font-weight: 600; }

.rev-browse-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.rev-browse-bar .rev-input { max-width: 420px; }
.rev-only { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft, #555); white-space: nowrap; }
.rev-only input { width: 24px; height: 24px; accent-color: var(--accent, #34538c); }
.rev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.rev-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; }
.rev-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rev-card__title { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 16px; }
.rev-card__meta { font-size: 14px; color: var(--ink-soft, #6b6b76); margin-top: 4px; line-height: 1.5; }
.rev-rate { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.rev-rate__row { display: inline-flex; align-items: center; gap: 5px; }
.rev-rate b { font-size: 15px; }
.rev-st { color: #d9dbe4; font-size: 14px; } .rev-st.is-on { color: #f0a92a; }
.rev-cnt { font-size: 14px; color: var(--ink-soft, #8a8a93); }
.rev-rate--none .rev-st { font-size: 14px; }
.rev-see { align-self: flex-start; background: var(--cream, #f6f1e9); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.rev-see:hover:not(:disabled) { border-color: var(--accent, #34538c); }
.rev-see:disabled { opacity: .5; cursor: default; }
.rev-card__btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rev-leave { background: var(--accent, #34538c); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 18px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.rev-leave:hover { background: #2a4576; }
.loc-card__rev { margin-top: 9px; }
.rev-thread { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.rev-thread[hidden] { display: none; }
.rev-item__head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rev-item__stars { color: #f0a92a; font-size: 13px; }
.rev-item__date { font-size: 14px; color: var(--ink-soft, #8a8a93); margin-left: auto; }
.rev-item__text { margin: 5px 0 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.rev-loading, .rev-empty { color: var(--ink-soft, #6b6b76); font-size: 14px; padding: 8px 0; }
@media (max-width: 560px) { .rev-list { grid-template-columns: 1fr; } .rev-card__top { flex-direction: column; } .rev-rate { align-items: flex-start; } }

/* ----- виджет отзывов на карточках групп (бейдж + модалка) ----- */
.revw-st { color: #d9dbe4; font-size: 14px; line-height: 1; }
.revw-st.on { color: #f0a92a; }
.revw-badge { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: inherit;
  background: #fff7e9; border: 1px solid #f0d9a8; color: var(--ink, #22202b); border-radius: 999px;
  padding: 6px 12px; font-size: 14px; font-weight: 600; transition: .15s; white-space: nowrap; }
.revw-badge:hover { border-color: #e0a92a; background: #fff1d6; }
.revw-badge b { font-size: 14.5px; }
.revw-bcnt { color: var(--ink-soft, #8a7a55); font-weight: 500; }
.revw-badge--none { background: #f6f1e9; border-color: var(--line, #e6e8f0); color: var(--ink-soft, #6b6b76); }
.revw-blabel { font-weight: 600; }
.revw-courseslot { margin: 8px 0 2px; }

.revw-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 18px; }
.revw-modal[hidden] { display: none; }
.revw-overlay { position: absolute; inset: 0; background: rgba(34,32,43,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.revw-card { position: relative; z-index: 1; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 20px; padding: 26px clamp(18px,3vw,30px) 24px; box-shadow: 0 40px 100px rgba(34,32,43,.32);
  animation: revwIn .25s cubic-bezier(.16,1,.3,1); -webkit-overflow-scrolling: touch; }
@keyframes revwIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.revw-x { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line, #e6e8f0);
  background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink, #22202b); }
.revw-x:hover { background: #f6f1e9; }
.revw-head { padding-right: 36px; border-bottom: 1px solid var(--line, #e6e8f0); padding-bottom: 14px; margin-bottom: 14px; }
.revw-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.revw-sub { font-size: 14px; color: var(--ink-soft, #6b6b76); margin-top: 5px; line-height: 1.5; }
.revw-code { font-family: ui-monospace, Menlo, monospace; }
.revw-avg { margin-top: 10px; display: flex; align-items: center; gap: 7px; }
.revw-avg .revw-st { font-size: 17px; }
.revw-avg b { font-size: 17px; }
.revw-cnt { font-size: 14px; color: var(--ink-soft, #8a8a93); }
.revw-list { display: flex; flex-direction: column; gap: 13px; }
.revw-item { background: var(--cream, #faf7f2); border: 1px solid var(--line, #eee); border-radius: 12px; padding: 12px 14px; }
.revw-ihead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.revw-ihead .revw-st { font-size: 14px; }
.revw-ihead b { font-size: 14.5px; }
.revw-date { font-size: 14px; color: var(--ink-soft, #8a8a93); margin-left: auto; }
.revw-item p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.revw-load { color: var(--ink-soft, #6b6b76); font-size: 14px; padding: 6px 0; }
.revw-leave { margin-top: 16px; border-top: 1px solid var(--line, #e6e8f0); padding-top: 14px; }
.revw-leave > summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; padding: 4px 0; }
.revw-leave > summary::-webkit-details-marker { display: none; }
.revw-form { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; }
.revw-stars { display: flex; gap: 3px; }
.revw-fstar { font-size: 30px; line-height: 1; background: none; border: 0; cursor: pointer; color: #d9dbe4; padding: 0 1px; transition: transform .1s, color .12s; }
.revw-fstar:hover { transform: scale(1.12); }
.revw-fstar.on { color: #f0a92a; }
.revw-in { width: 100%; border: 1.5px solid var(--line, #e6e8f0); border-radius: 11px; padding: 10px 13px; font: inherit; font-size: 15px; background: var(--cream, #fbf8f3); }
.revw-in:focus { outline: 0; border-color: var(--accent, #34538c); background: #fff; }
textarea.revw-in { resize: vertical; min-height: 70px; }
.revw-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft, #555); }
.revw-consent input { margin-top: 0; width: 24px; height: 24px; flex: none; accent-color: var(--accent, #34538c); }
.revw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.revw-act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.revw-msg { font-size: 14.5px; } .revw-msg.err { color: #c0392b; font-weight: 600; }
.revw-ok { color: #1c7a44; font-weight: 600; font-size: 14.5px; padding: 6px 0; }
.loc-expand { position: absolute; top: 12px; right: 12px; z-index: 500; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; border: none; background: var(--ink); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(34,32,43,.3); }
.loc-expand:hover { background: #000; }
.loc-expand__ic { font-size: 15px; }
.locator__recenter { position: absolute; left: 12px; top: 12px; z-index: 500; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-family: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; box-shadow: 0 6px 16px rgba(34,32,43,.3); }
.locator__maphint { position: absolute; left: 12px; bottom: 12px; z-index: 480; display: none; max-width: calc(100% - 24px); background: rgba(34,32,43,.82); color: #fff; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 999px; pointer-events: none; line-height: 1.3; }
.locator.is-expanded .loc-split { grid-template-columns: 0 1fr; height: clamp(520px,76vh,880px); }
.locator.is-expanded .locator__leftcol { opacity: 0; pointer-events: none; border-right: none; }

/* карточка занятия */
.loc-card { display: flex; gap: 13px; padding: 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: border-color .2s, box-shadow .25s var(--ease), transform .2s var(--ease); }
.loc-card:hover, .loc-card:focus-visible { border-color: var(--c-active); box-shadow: 0 12px 26px rgba(46,139,139,.14); outline: none; }
.loc-card.is-sel { box-shadow: 0 0 0 2px var(--c-active), 0 12px 26px rgba(46,139,139,.16); border-color: var(--c-active); }
.loc-card__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 23px; background: var(--c-active-t); }
.loc-card__body { flex: 1; min-width: 0; }
.loc-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.loc-card__top h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.loc-card__dist { flex: none; font-weight: 800; font-size: 14px; color: var(--c-active-d); white-space: nowrap; }
.loc-card__teacher { color: var(--ink-soft); font-size: 15px; margin-top: 3px; }
.loc-card__addr { color: var(--muted); font-size: 14.5px; margin-top: 5px; line-height: 1.4; }
.loc-card__sched { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 14.5px; color: var(--c-active-d); background: var(--c-active-t); padding: 4px 11px; border-radius: 999px; }
.loc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.loc-card__code { font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--c-active-d); background: var(--c-active-t); padding: 3px 9px; border-radius: 7px; }
.loc-card__ya { font-weight: 700; font-size: 14.5px; color: var(--c-active-d); white-space: nowrap; display: inline-block; padding: 8px 0; }
.loc-card__ya:hover { color: var(--c-active); text-decoration: underline; }
.loc-card mark, .loc-pop mark { background: var(--c-active-t); color: var(--c-active-d); font-weight: 800; border-radius: 3px; padding: 0 1px; }
.loc-more { display: block; width: 100%; margin-top: 6px; padding: 14px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--cream); font: inherit; font-weight: 700; font-size: 16px; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.loc-more:hover { border-color: var(--ink); }
.loc-more__n { color: var(--muted); font-weight: 600; }
.loc-empty { padding: 36px 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-s); line-height: 1.5; }
.loc-empty__btn { display: block; margin: 14px auto 0; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--c-active); background: var(--c-active); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }

/* попап-оверлей */
.loc-ovl { position: relative; width: 290px; max-width: 80vw; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 14px 40px rgba(34,32,43,.22); }
.loc-ovl::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: var(--paper); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.loc-ovl__x { position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.loc-ovl__x:hover { background: var(--ink); color: #fff; }
.loc-pop__type { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--c-active-d); flex-wrap: wrap; }
.loc-pop__code { font-size: 11px; background: var(--c-active-t); color: var(--c-active-d); padding: 2px 7px; border-radius: 6px; }
.loc-pop__teacher { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 5px 0 6px; }
.loc-pop__addr { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.loc-pop__addr i { color: var(--muted); font-size: 12.5px; }
.loc-pop__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.loc-pop__chip { font-weight: 700; font-size: 12px; background: var(--c-active-t); color: var(--c-active-d); padding: 3px 10px; border-radius: 999px; }
.loc-pop__dist { font-weight: 800; font-size: 12.5px; color: var(--c-active-d); }
.loc-pop__sched { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.loc-pop__ya { display: inline-block; font-weight: 700; font-size: 13px; color: var(--c-active-d); margin-bottom: 10px; }
.loc-pop__ya:hover { color: var(--c-active); text-decoration: underline; }
.loc-pop__btns { display: flex; gap: 8px; }
.loc-pop__btn { flex: 1; padding: 10px 12px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; border: 1.5px solid var(--c-active); transition: background .2s, color .2s; }
.loc-pop__btn--route { background: var(--c-active); color: #fff; }
.loc-pop__btn--route:hover { background: var(--c-active-d); border-color: var(--c-active-d); }
.loc-pop__btn--book { background: #fff; color: var(--c-active-d); }
.loc-pop__btn--book:hover { background: var(--c-active-t); }
.loc-pop__rows { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; max-height: 240px; overflow-y: auto; }
.loc-pop__row { padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); }
.loc-pop__rowtop { font-weight: 800; font-size: 13.5px; color: var(--c-active-d); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.loc-pop__rowcode { font-size: 10.5px; background: #fff; border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
.loc-pop__rowsub { font-size: 12px; color: var(--muted); margin: 3px 0 8px; }
.loc-pop__rowbtns { display: flex; gap: 6px; }
.loc-pop__mini { flex: 1; padding: 7px 10px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; border: 1.5px solid var(--c-active); background: var(--c-active); color: #fff; transition: background .2s, color .2s; }
.loc-pop__mini--book { background: #fff; color: var(--c-active-d); }
.loc-pop__mini:hover { background: var(--c-active-d); color: #fff; }

/* маршрут — попап поверх списка (карта остаётся видна) */
.loc-routepanel { position: absolute; inset: 0; z-index: 20; overflow-y: auto; background: var(--paper); padding: 20px clamp(16px,2vw,24px) 24px; animation: locRouteIn .28s var(--ease); }
@keyframes locRouteIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.loc-route__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--cream); font-size: 15px; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, transform .25s var(--ease); }
.loc-route__x:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.loc-route__title { font-size: clamp(20px,2.4vw,26px); margin: 6px 0 6px; padding-right: 48px; }
.loc-route__addr { color: var(--ink-soft); font-size: 15px; }
.loc-route__sub { color: var(--muted); font-size: 14px; margin: 14px 0 10px; }
.loc-route__metros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.loc-route__metro { padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--c-active); background: var(--c-active-t); font-family: inherit; font-weight: 700; font-size: 15px; color: var(--c-active-d); cursor: pointer; transition: background .2s, color .2s; }
.loc-route__metro:hover { background: var(--c-active); color: #fff; }
.loc-route__metro--me { border-style: dashed; }
.loc-route__addrrow { display: flex; gap: 8px; }
.loc-route__input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--sunken); font: inherit; font-size: 16px; color: var(--ink); }
.loc-route__input:focus { outline: none; border-color: var(--c-active); background: #fff; }
.loc-route__go { flex: none; padding: 0 22px; border-radius: 12px; background: var(--ink); color: #fff; font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.loc-route__go:hover { background: #000; }
.loc-route__out { margin: 6px 0 8px; }
.loc-route__loading, .loc-route__err { color: var(--muted); font-size: 14.5px; padding: 10px 0; }
.loc-route__err { color: #b3261e; }
.loc-route__sum { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--c-active-d); margin-bottom: 10px; }
.loc-route__steps { list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 8px; }
.loc-route__steps li { position: relative; padding-left: 38px; font-size: 15px; line-height: 1.45; color: var(--ink); min-height: 28px; display: flex; align-items: center; }
.loc-route__steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--c-active-t); color: var(--c-active-d); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.loc-route__ya { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: 15px; color: var(--c-active-d); }
.loc-route__ya:hover { color: var(--c-active); }

/* мобильная раскладка */
@media (max-width: 880px) {
  .loc-split { grid-template-columns: 1fr; height: auto; }
  .locator__mapcol { order: -1; height: 52vh; min-height: 340px; }
  /* высота обязательна: внутри только #loc-map с position:absolute, и без неё
     обёртка схлопывается в 0 — карта на телефоне не появлялась вовсе.
     (у OpenLayers был свой элемент с размером, у MapLibre его нет) */
  .locator__mapwrap { position: relative; height: 100%; }
  .locator__leftcol { overflow: visible; border-right: none; }
  .locator__list { height: auto; max-height: none; padding-left: clamp(12px,4vw,20px); padding-right: clamp(12px,4vw,20px); }
  /* на телефоне панель переезжает в body (locator.js/showPanel) и становится шторкой во весь экран */
  .loc-routepanel.is-sheet { position: fixed; inset: 0; z-index: 75; /* выше шапки (70), ниже формы записи (.modal 80) */ padding: 18px 18px calc(28px + env(safe-area-inset-bottom)); animation: locSheetIn .32s var(--ease); display: flex; flex-direction: column; }
  .loc-routepanel.is-sheet .loc-route__x { position: sticky; top: 0; align-self: flex-end; margin: -4px -4px 0 0; z-index: 2; box-shadow: 0 4px 14px rgba(34,32,43,.14); }
  .loc-routepanel--details.is-sheet .loc-det__eyebrow { margin-top: -30px; }
  .loc-routepanel--details.is-sheet .loc-det__title { padding-right: 56px; }
  .loc-routepanel--details.is-sheet .loc-det__btns { position: sticky; bottom: calc(-28px - env(safe-area-inset-bottom)); margin: auto -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -10px 24px rgba(34,32,43,.08); }
  .loc-routepanel--details.is-sheet .loc-det__foot { margin-top: 0; padding-top: 12px; }
  .locator.is-expanded .loc-split { grid-template-columns: 1fr; }
  .locator.is-expanded .locator__mapcol { height: 78vh; }
  .locator.is-expanded .locator__leftcol { display: none; }
  /* MapLibre сам ставит холсту touch-action:none — тогда палец таскал бы карту
     вместо прокрутки страницы. Возвращаем pan-y: одним пальцем листаем страницу,
     двумя — двигаем и приближаем карту (как обещает подсказка под ней). */
  .locator__mapwrap .maplibregl-canvas-container,
  .locator__mapwrap .maplibregl-canvas { touch-action: pan-y !important; }
  .locator__mapwrap .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .locator__maphint { display: block; }
  .loc-toolbar__top { flex-direction: column; align-items: stretch; }
  .locator__near { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-card, .locator__near, .loc-routepanel, .loc-split { animation: none !important; transition: none !important; }
}

/* карточки преподавателей офлайн */
.course__addr2 { color: var(--muted); font-size: 14.5px; margin-top: 8px; line-height: 1.4; }
.course__addr2 a { color: var(--c-active-d); font-weight: 700; }
.course__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.course__acts .mini { margin-top: 0; }
.course__code { font-size: 14px; background: var(--c-active-t); color: var(--c-active-d); padding: 2px 8px; border-radius: 6px; font-weight: 800; margin-left: 6px; }
.mini--ghost { background: #fff !important; color: var(--c-active-d) !important; border: 1.5px solid var(--c-active); }
.mini--ghost:hover { background: var(--c-active-t) !important; }


/* ============================================================
   СТРАНИЦА «РАСПИСАНИЕ» + недельный календарь (calendar.js)
   ============================================================ */
.schero { background: linear-gradient(135deg, var(--cream-2) 0%, #fff 70%); border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
.schero .container { padding-block: clamp(36px, 6vw, 84px); }
.schero .crumb { font-weight: 600; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.schero .crumb a { opacity: .8; }
.schero h1 { font-size: clamp(44px, 9vw, 108px); color: var(--ink); line-height: .98; letter-spacing: -.02em; margin: 12px 0 16px; text-wrap: balance; }
.schero p { font-size: clamp(17px, 2vw, 22px); color: var(--ink-soft); max-width: 54ch; line-height: 1.5; }

.cal-filters { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-bottom: clamp(18px, 2.4vw, 28px); }
.cal-modes { display: inline-flex; background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.cal-mode { padding: 9px 18px; border-radius: 999px; border: none; background: none; font-family: inherit; font-weight: 700; font-size: 14.5px; color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s; }
.cal-mode.is-on { background: var(--ink); color: #fff; }
.cal-dirs { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--cream); font-family: inherit; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.cal-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cc); flex: none; }
/* выбранный чип — тёмный с цветной точкой: белый текст на жёлтом кулинарии не читался */
.cal-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal-chip.is-on::before { background: var(--cc); box-shadow: 0 0 0 2px #fff; }

/* месячная сетка */
.cal-cal { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(12px,1.6vw,20px); }
.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-nav__btn { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--cream); font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.cal-nav__btn:hover { background: var(--ink); color: #fff; }
.cal-nav__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px,2.4vw,26px); min-width: 190px; }
.cal-nav__today { margin-left: auto; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--cream); font-family: inherit; font-weight: 700; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.cal-nav__today:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-wd span { text-align: center; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 0; }
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { position: relative; aspect-ratio: 1 / 0.92; min-height: 62px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--sunken); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; transition: border-color .15s, background .15s, transform .12s; font-family: inherit; }
.cal-cell[data-d]:hover, .cal-cell[data-d]:focus-visible { border-color: var(--c-active); background: var(--paper); outline: none; transform: translateY(-1px); z-index: 2; box-shadow: 0 8px 20px rgba(34,32,43,.1); }
.cal-cell--empty { border: none; background: none; cursor: default; }
.cal-cell__num { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.cal-cell.is-past { opacity: .5; }
.cal-cell.is-none { cursor: default; }
.cal-cell.is-none:hover { transform: none; border-color: var(--line); background: var(--sunken); box-shadow: none; }
.cal-cell.is-today { border-color: var(--c-active); box-shadow: inset 0 0 0 1px var(--c-active); }
.cal-cell.is-today .cal-cell__num { color: var(--c-active-d); }
.cal-cell__badge { margin-top: auto; align-self: flex-start; font-weight: 800; font-size: 14px; color: #fff; background: var(--c-active-d); padding: 2px 8px; border-radius: 999px; }
.cal-cell.is-past .cal-cell__badge { background: var(--muted); }
/* поповер дня */
.cal-pop { position: absolute; z-index: 30; width: min(320px, 86vw); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(34,32,43,.2); overflow: hidden; transform-origin: top center; animation: calPopIn .26s cubic-bezier(.34,1.4,.5,1); }
@keyframes calPopIn { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
.cal-pop__item { animation: calItemIn .34s var(--ease) both; }
.cal-pop__item:nth-child(1) { animation-delay: .03s; } .cal-pop__item:nth-child(2) { animation-delay: .06s; }
.cal-pop__item:nth-child(3) { animation-delay: .09s; } .cal-pop__item:nth-child(4) { animation-delay: .12s; }
.cal-pop__item:nth-child(5) { animation-delay: .15s; } .cal-pop__item:nth-child(6) { animation-delay: .18s; }
.cal-pop__item:nth-child(7) { animation-delay: .21s; } .cal-pop__item:nth-child(8) { animation-delay: .24s; }
@keyframes calItemIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cal-pop, .cal-pop__item { animation: none !important; } }
.cal-pop__head { display: flex; align-items: baseline; gap: 8px; padding: 13px 15px; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.cal-pop__head b { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.cal-pop__head span { font-size: 14px; color: var(--muted); }
.cal-pop__x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 14px; cursor: pointer; flex: none; }
.cal-pop__x:hover { background: var(--ink); color: #fff; }
.cal-pop__list { max-height: 320px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cal-pop__item { text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--cc); background: var(--sunken); cursor: pointer; font-family: inherit; transition: background .15s, transform .12s; }
.cal-pop__item:hover { background: var(--paper); transform: translateX(2px); }
.cal-pop__time { font-weight: 800; font-size: 14px; color: var(--ink-soft); }
.cal-pop__t { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.15; }
.cal-pop__sub { font-size: 14px; color: var(--muted); }
.cal-pop__empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 14px; }

@media (max-width: 700px) {
  .cal-cell { min-height: 50px; padding: 6px 7px; aspect-ratio: 1 / 1; }
  .cal-cell__num { font-size: 15px; }
  .cal-cell__badge { font-size: 14px; padding: 0 6px; }
  .cal-pop { position: fixed; left: 10px !important; right: 10px; bottom: 10px; top: auto !important; width: auto; max-height: 72vh; }
  .cal-pop__list { max-height: 58vh; }
}
/* iPhone SE/14, Pixel 7: ячейка 50px × 7 + зазоры шире экрана — седьмой столбец обрезался */
@media (max-width: 440px) {
  .cal-wd, .cal-month { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .cal-cell { min-height: 44px; aspect-ratio: auto; padding: 5px; }
  .cal-cell__badge { padding: 0 5px; }
}

/* ============================================================
   КОМАНДА АКАДЕМИИ И БЛАГОДАРНОСТИ
   Общая горизонтальная лента: перетаскивание (data-hscroll) и стрелки
   (data-scroll-target) уже умеет app.js — свой скрипт не нужен.
   ============================================================ */
.gallery { position: relative; }
.gallery__row { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; cursor: grab; }
.gallery__row::-webkit-scrollbar { display: none; }
.gallery__row.is-drag { cursor: grabbing; scroll-snap-type: none; }
.gallery--wide .gallery__row { padding-inline: var(--pad); }
.gshot { margin: 0; flex: none; scroll-snap-align: center; border-radius: 18px; overflow: hidden;
  background: var(--surface, #fff); border: 1px solid var(--line);
  width: min(560px, 82vw); aspect-ratio: 3 / 2; }
.gshot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) { .gshot:hover img { transform: scale(1.035); } }
/* письма — вертикальные документы, кадрировать их нельзя: обрежется текст */
.gshot--doc { width: min(300px, 62vw); aspect-ratio: 3 / 4; background: #F4F1EA; }
.gshot--doc img { object-fit: contain; }

.gallery__nav { display: flex; gap: 10px; margin-top: 18px; }
.gnav { width: 46px; height: 46px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface, #fff); color: var(--ink);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: border-color .18s, background .18s, transform .18s; }
.gnav:hover { border-color: var(--ink); transform: translateY(-2px); }
.gnav:active { transform: translateY(0); }

/* блок «команда + текст»: лента слева, рассказ справа */
.teamblock { display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(26px, 4vw, 48px); }
.teamblock__gal { min-width: 0; }
.teamblock__gal .gshot { width: 100%; }
.teamblock__text p { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--ink-soft); }
.teamblock__text p + p { margin-top: 18px; }
.teamblock__count { color: var(--ink) !important; }
.teamblock__count b { font-weight: 800; }

@media (max-width: 900px) {
  .teamblock { grid-template-columns: 1fr; }
  .gshot { width: min(520px, 88vw); }
  .gshot--doc { width: min(260px, 68vw); }
  .gnav { width: 52px; height: 52px; }   /* палец, аудитория 55+ */
}

/* Предлог не должен висеть в конце строки: «и» переносится вместе со словом,
   к которому относится. Через   не работает — слова заголовка это
   inline-block, и браузер всё равно ставит перенос между ними. */
.nobreak { white-space: nowrap; }

/* Лента команды во всю ширину экрана: вырывается из колонки контейнера.
   Первый кадр — панорама со сцены, у неё своя пропорция. */
.gallery--bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-top: clamp(22px, 3vw, 36px); }
.gallery--bleed .gallery__row { padding-inline: var(--pad); }
.gshot--pano { width: min(1100px, 92vw); aspect-ratio: 7 / 2; }
.gshot--pano img { object-fit: cover; object-position: 50% 45%; }
@media (max-width: 900px) { .gshot--pano { width: min(680px, 92vw); aspect-ratio: 5 / 2; } }

/* ============================================================
   ПЕРВЫЙ ЭКРАН С ИЛЛЮСТРАЦИЕЙ (главная)
   Полотно во всю высоту в белом поле, шапка лежит поверх картинки,
   заголовок на небе, кнопки над нижним краем. Колесо направлений
   переехало в отдельный блок ниже.
   ============================================================ */
body.hero-cover { background: #fff; }
.hero-cover .hero--wheel { margin: clamp(10px, 1.3vw, 18px); border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden; min-height: calc(100vh - clamp(20px, 2.6vw, 36px));
  display: flex; flex-direction: column; padding-top: 0; padding-bottom: 0; }
/* внизу полотна был градиент в белый — нужен резкий край */
.hero-cover .hero--wheel::after { display: none; }
.hero__pic { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/assets/img/hero-city.jpg");
  background-image: image-set(url("/assets/img/hero-city.webp") type("image/webp"), url("/assets/img/hero-city.jpg") type("image/jpeg"));   /* webp 91 КБ вместо jpg 540 КБ */
  background-size: cover; background-position: 50% 100%; }
.hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(38,18,10,.42) 0%, rgba(38,18,10,.26) 30%,
                                      rgba(38,18,10,.06) 50%, transparent 64%); }

/* ---------- шапка поверх полотна и «прилёт» при прокрутке ---------- */
.hero-cover .header { position: absolute; z-index: 50;
  top: clamp(10px, 1.3vw, 18px); left: clamp(10px, 1.3vw, 18px); right: clamp(10px, 1.3vw, 18px);
  padding: clamp(16px, 2.2vw, 30px) clamp(16px, 2.2vw, 34px);
  gap: clamp(12px, 1.6vw, 22px);
  background: transparent; backdrop-filter: none; border-bottom: 0; }
.hero-cover .header .logo img { height: clamp(56px, 5.2vw, 84px); }
.hero-cover .nav-links { gap: clamp(10px, 1.3vw, 20px); }
.hero-cover .nav-links a { white-space: nowrap; }
@media (max-width: 1180px) { .hero-cover .header .logo img { height: clamp(48px, 4.6vw, 64px); } }
/* Первый экран пройден — шапка прилетает сверху уже с фоном. */
/* Цвет задан явно: color-mix с переменной здесь считался в прозрачный.
   Анимация без fill — если браузер её притормозит (фоновая вкладка),
   шапка всё равно окажется на месте, а не застрянет за краем экрана. */
.hero-cover .header.is-pinned { position: fixed; top: 0; left: 0; right: 0;
  padding: 12px var(--pad);
  background: rgba(251, 247, 240, .96);
  border-bottom: 1px solid var(--line);
  animation: hdrDrop .32s cubic-bezier(.16,1,.3,1); }
.hero-cover .header.is-pinned .logo img { height: 44px; }
@keyframes hdrDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hero-cover .header.is-pinned { animation: none; } }

/* ---------- содержимое первого экрана ---------- */
.hcover { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center;
  flex: 1 1 auto; width: min(1180px, 100%); margin: 0 auto; text-align: center;
  padding: clamp(104px, 15vh, 168px) clamp(20px, 4vw, 48px) 0; }
.hcover__title { margin: 0; color: #fff; text-transform: uppercase; letter-spacing: -.01em;
  text-shadow: 0 2px 22px rgba(30,14,8,.42); }
.hcover__title span { display: block; font-weight: 700; font-size: clamp(16px, 2.2vw, 28px); letter-spacing: .06em; opacity: .95; }
.hcover__title b { display: block; font-weight: 800; line-height: 1.02; margin-top: .06em;
  font-size: clamp(28px, 4.8vw, 64px); }
.hcover__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1vw, 14px);
  margin-top: auto; margin-bottom: clamp(26px, 6vh, 74px); }
.hcover__nav a { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 clamp(16px, 2vw, 28px); background: #fff; color: var(--ink);
  font-weight: 700; font-size: clamp(14px, 1.1vw, 16.5px); text-decoration: none;
  border-radius: 8px; transition: background .18s, transform .18s; }
.hcover__nav a:hover { background: var(--c-food, #E0A02F); transform: translateY(-2px); }

/* ---------- вступление под первым экраном ---------- */
.intro { padding-block: clamp(40px, 6vw, 84px); }
.intro__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-size: 14px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.intro__rule { flex: none; width: clamp(28px, 4vw, 54px); height: 2px; border-radius: 2px; background: var(--accent); }
.intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); }
.intro__cols p { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.62; color: var(--ink-soft); }
.intro__cols b { color: var(--ink); font-weight: 800; }

/* ---------- блок выбора направления (колесо переехало сюда) ---------- */
.pick { position: relative; padding-block: clamp(30px, 5vw, 70px) 0;
  display: flex; flex-direction: column; min-height: clamp(760px, 92vh, 980px); overflow: clip; }
.pick__head { text-align: center; position: relative; z-index: 5; }
.pick__head h2 { margin: 0; font-size: clamp(28px, 4.4vw, 48px); }
.pick__head p { color: var(--ink-soft); margin-top: 8px; }
.pick__stage { position: relative; flex: 1; min-height: clamp(660px, 56vw, 820px); }
/* На телефоне колесо не показываем и не грузим (см. wheel-load.js): блок целиком скрыт */
@media (max-width: 760px) { .pick { display: none; } }
.pick__stage .hero__labels { overflow: hidden; }
/* без WebGL/three.module.js вместо пустых 620 px — обычный список направлений (app.js: wheelFallback) */
.pick.is-fallback { min-height: 0; }
.pick__stage.is-fallback { flex: 0 0 auto; min-height: 0; padding: 20px 0 40px; }
.pick__stage.is-fallback .hero__bg { display: none; }
.pick__stage.is-fallback .hero__labels { position: static; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 var(--pad); pointer-events: auto; overflow: visible; }
.pick__stage.is-fallback .hero__labels .wlabel { position: static; display: inline-flex; transform: none; opacity: 1; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 22px rgba(34,32,43,.12); font-size: 16px; padding: 12px 18px; text-shadow: none; }
.pick__stage.is-fallback .hero__labels .wlabel__arr { opacity: 1; margin-left: 4px; }

@media (max-width: 760px) {
  .hero-cover .hero--wheel { min-height: calc(100svh - 20px); }
  .intro__cols { grid-template-columns: 1fr; gap: 16px; }
  .hcover__nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .hcover__nav a { min-height: 56px; }
}

/* Карточка преподавателя на узких экранах: колонка одна, фото не раздувается
   на всю ширину телефона — иначе оно съедает первый экран карточки. */
@media (max-width: 820px) {
  .teacher { grid-template-columns: 1fr; }
  .teacher__photo { max-width: 300px; aspect-ratio: 1 / 1; }
}

/* ---------- метки локатора (MapLibre) ---------- */
/* Метка — обычная кнопка, а не рисунок карты: так эмодзи направления
   рисуется системным шрифтом. В глифах карты эмодзи нет. */
.loc-pin { width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  background: #fff; border: 3px solid var(--c-active); display: grid; place-items: center;
  font-size: 15px; line-height: 1; box-shadow: 0 4px 12px rgba(31,99,99,.22);
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.loc-pin:hover, .loc-pin.is-hi { transform: scale(1.22); border-color: var(--c-active-d);
  box-shadow: 0 0 0 8px rgba(31,99,99,.18), 0 6px 16px rgba(31,99,99,.28); z-index: 5; }
.loc-pin--many { background: var(--c-active); border-color: #fff; color: #fff;
  width: 40px; height: 40px; font-weight: 800; font-size: 15px; }
.loc-pin__n { font-family: var(--font-body); }
/* попап: убираем оформление MapLibre, оставляем наше */
.loc-ovlwrap .maplibregl-popup-content { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.loc-ovlwrap .maplibregl-popup-tip { display: none; }

/* ---------- фото площадок очных занятий (works.js, ключ "l:<id>") ---------- */
.venue-ph { margin-top: 12px; }
.venue-ph__label { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-active-d); margin-bottom: 8px; }
.venue-ph__strip { display: flex; gap: 8px; flex-wrap: wrap; }
.venue-ph__img { flex: none; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; cursor: zoom-in; border: 3px solid var(--paper); box-shadow: 0 8px 18px rgba(34,32,43,.14); background: var(--c-active-t); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.venue-ph__img:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 24px rgba(46,139,139,.22); }
.venue-ph__more { flex: none; width: 72px; height: 72px; border-radius: 12px; display: grid; place-items: center; background: var(--c-active); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; border: none; }
.venue-ph--pop { margin-top: 10px; }
.venue-ph--pop .venue-ph__img, .venue-ph--pop .venue-ph__more { width: 80px; height: 60px; border-radius: 10px; border-width: 2px; }
.venue-ph--card { margin-top: 8px; }
.venue-ph--card .venue-ph__img, .venue-ph--card .venue-ph__more { width: 52px; height: 40px; border-radius: 8px; border-width: 2px; box-shadow: 0 4px 10px rgba(34,32,43,.12); }
.venue-ph--course .venue-ph__img, .venue-ph--course .venue-ph__more { width: clamp(64px, 6vw, 88px); height: clamp(48px, 4.5vw, 66px); }
.venue-ph--route { margin: 4px 0 12px; }
@media (max-width: 720px) {
  .venue-ph--course .venue-ph__img, .venue-ph--course .venue-ph__more { width: 64px; height: 48px; }
}

/* ---------- карточка группы на карте (панель поверх списка) ---------- */
.loc-det__eyebrow { display: block; margin-top: 2px; }
.loc-det__title { font-size: clamp(22px,2.4vw,27px); line-height: 1.15; margin: 8px 0 14px; padding-right: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.loc-det__code { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 5px 10px; border-radius: 8px; background: var(--c-active-t); color: var(--c-active-d); }
.loc-det__teacher { display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: var(--cream); border: 1.5px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .25s var(--ease); }
.loc-det__teacher:hover { border-color: var(--c-active); box-shadow: 0 10px 22px rgba(46,139,139,.14); }
.loc-det__photo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); box-shadow: 0 6px 16px rgba(34,32,43,.16); background: var(--c-active-t); display: grid; place-items: center; font-size: 26px; }
.loc-det__tname b { display: block; font-size: 17px; line-height: 1.25; }
.loc-det__regalia { list-style: none; margin: 4px 0 0; padding: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; }
.loc-det__more { display: inline-block; margin-top: 6px; font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--c-active-d); }
.loc-det__facts { margin: 16px 0 0; display: flex; flex-direction: column; gap: 9px; }
.loc-det__fact { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: start; margin: 0; }
.loc-det__fact dt { font-size: 17px; line-height: 1.4; }
.loc-det__fact dd { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.loc-det__fact dd i { display: block; color: var(--muted); font-size: 14px; }
.loc-det__fact--chips dd { display: flex; flex-wrap: wrap; gap: 6px; }
.loc-det__chip { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--sunken); color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.loc-det__chip--dist { background: var(--c-active-t); color: var(--c-active-d); }
.loc-det__desc { margin: 16px 0 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.venue-ph--det { margin-top: 18px; }
.venue-ph--det .venue-ph__img, .venue-ph--det .venue-ph__more { width: calc(25% - 6px); height: auto; aspect-ratio: 4 / 3; border-radius: 12px; }
.loc-det__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.loc-det__btns .loc-pop__btn { flex: 1 1 140px; min-height: 50px; font-size: 16px; }
.loc-det__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 880px) {
  .loc-det__title { font-size: 24px; }
  .venue-ph--det .venue-ph__img, .venue-ph--det .venue-ph__more { width: calc(33.333% - 6px); }
}
@keyframes locSheetIn { from { opacity: .35; } to { opacity: 1; } }
.loc-route__back { display: inline-block; margin: 0 0 8px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--cream); font-family: inherit; font-weight: 700; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.loc-route__back:hover { border-color: var(--c-active); color: var(--c-active-d); }
.loc-det__facts + .loc-det__desc { margin-top: 18px; }

/* ---------- страница записи в группу /z/… ---------- */
.z { max-width: 960px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--pad) clamp(48px, 7vw, 96px); position: relative; z-index: 1; }
.z .crumb { margin-bottom: 18px; }
.z__title { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin: 10px 0 8px; text-wrap: balance; }
.z__sub { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); margin: 0 0 26px; max-width: 60ch; }
.z-card { background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); margin-bottom: 18px; box-shadow: 0 14px 40px rgba(34,32,43,.06); }
.z-card--empty p { font-size: 17px; color: var(--ink-soft); margin: 0 0 16px; }
.z-card__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 16px; }
.z-card__type { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.z-card__code { font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 5px 10px; border-radius: 8px; background: var(--c-active-t); color: var(--c-active-d); }
.z-card__sched { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--c-active-d); }
.z-card__grid { display: grid; grid-template-columns: 1fr 280px; gap: 22px; align-items: start; }
.z-teacher { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--cream); border: 1.5px solid var(--line); }
.z-teacher__photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); box-shadow: 0 6px 16px rgba(34,32,43,.16); background: var(--c-active-t); display: grid; place-items: center; font-size: 28px; }
.z-teacher b { display: block; font-size: 18px; line-height: 1.25; }
.z-teacher__regalia { list-style: none; margin: 4px 0 0; padding: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.4; }
.z-facts { margin: 16px 0 0; }
.z-facts > div { display: grid; grid-template-columns: 28px 1fr; gap: 6px; align-items: start; }
.z-facts dt { font-size: 18px; line-height: 1.4; }
.z-facts dd { margin: 0; font-size: 17px; line-height: 1.45; }
.z-facts dd i { display: block; color: var(--muted); font-size: 15px; }
.z-facts__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.z-chip { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--sunken); color: var(--ink-soft); font-size: 13.5px; font-weight: 700; }
.z-card__desc { margin: 16px 0 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.55; white-space: pre-line; }
.z-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.z-photos__img, .z-photos__more { width: calc(25% - 6px); aspect-ratio: 4 / 3; border-radius: 12px; object-fit: cover; cursor: zoom-in; border: 3px solid var(--paper); box-shadow: 0 8px 18px rgba(34,32,43,.14); background: var(--c-active-t); }
.z-photos__more { display: grid; place-items: center; color: #fff; background: var(--c-active); font-weight: 800; font-size: 16px; cursor: pointer; }
.z-card__side { display: grid; gap: 10px; position: sticky; top: 90px; }
.z-card__side .btn { min-height: 54px; font-size: 17px; justify-content: center; text-align: center; }
.z-book { box-shadow: 0 12px 28px rgba(228,103,74,.3); }
.z-maplink { font-weight: 700; color: var(--c-active-d); text-align: center; padding: 6px 0; }
.z-side__note { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.45; text-align: center; }
.z-contact { margin-top: 30px; padding: clamp(18px, 2.4vw, 28px); border-radius: 22px; background: var(--c-active-t); }
.z-contact h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 6px; }
.z-contact p { margin: 0 0 14px; color: var(--ink-soft); font-size: 16.5px; max-width: 60ch; }
.z-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.z-actions .btn { min-height: 50px; }
@media (max-width: 760px) {
  .z-card__grid { grid-template-columns: 1fr; }
  .z-card__side { position: static; }
  .z-photos__img, .z-photos__more { width: calc(33.333% - 6px); }
}