/* style.css — LinguaTime school (linguatime). Вид по 03-design.md: белая страница, мята как единственный цвет,
   Noto Serif Display крупно над спокойным Onest. Подключается после tokens.css и base.css. Мобильная версия отдельной композицией внизу. */

/* ---------- общее ---------- */
body { font-family: var(--font-text); line-height: 1.6; letter-spacing: 0.01em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-variation-settings: var(--fv-head); }
.nums { font-variant-numeric: tabular-nums; }
.skip { position: fixed; z-index: 100; left: 1rem; top: 0; width: auto; height: auto; clip-path: none; overflow: visible; padding: 0.75rem 1rem; background: var(--ink); color: var(--bg); transform: translateY(-130%); transition: transform var(--t-ui) var(--ease-out); }
.skip:focus { transform: none; }
.btn { min-height: 3rem; padding: 0 1.4rem; font-weight: 500; letter-spacing: 0.01em; }
.btn--light { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: var(--mint); color: var(--ink); } }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.field-2 :focus-visible, .foot :focus-visible { outline-color: #fff; }
.link-plain { text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
button.link-plain { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }

/* ---------- шапка: знак слева, ссылки по правой половине, одно действие ---------- */
.top { padding-inline: var(--margin); font-size: var(--step-small); }
.top__mark { font-family: var(--font-display); font-variation-settings: var(--fv-display); font-size: var(--step-lead); letter-spacing: -0.02em; }
.top__nav { font-size: var(--step-small); }
.top__nav a { padding-inline: 0.5rem; }
.top__act { font-size: var(--step-small); }
.top__menu { font-size: var(--step-small); }
@media (min-width: 48em) {
  .top { gap: var(--gutter); }
  .top__nav { gap: clamp(0.75rem, 2vw, 2rem); }
}
@media (min-width: 64em) {
  .top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .top__mark { grid-column: 1 / 5; margin: 0; }
  .top__nav { grid-column: 6 / 11; justify-content: space-between; gap: 0.5rem; }
  .top__act { grid-column: 11 / 13; justify-self: end; }
}

/* ---------- 1. первый экран: «Время г◯ворить» ---------- */
.hero { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; padding-inline: var(--margin); }
.hero__line { margin: auto 0; display: flex; align-items: baseline; justify-content: center; font-family: var(--font-display); font-variation-settings: var(--fv-display); font-size: min(var(--step-display), 10.4vw); line-height: 0.95; letter-spacing: -0.03em; white-space: nowrap; }
.hero__line .w { display: inline-block; }
.hero-dial, .o-letter { display: none; }
.o-clock { display: inline-block; width: 0.62em; height: 0.62em; margin: 0 0.02em; vertical-align: baseline; position: relative; top: 0.01em; }
.o-clock svg { width: 100%; height: 100%; display: block; overflow: visible; }
.o-clock__face { fill: var(--mint); }
.o-clock__ticks line { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.o-clock__word { font-family: var(--font-display); font-variation-settings: var(--fv-display); font-size: 17px; fill: var(--ink); letter-spacing: 0; }
.hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; padding-bottom: 1.75rem; }
.hero__say { grid-column: 6 / 11; max-width: 46ch; }
.hero__act { grid-column: 11 / 13; justify-self: end; }

/* ---------- циферблат (встроенный SVG): сектора, часы, приветствия ---------- */
.dial { display: block; width: 100%; height: auto; overflow: visible; }
.dial .hour path { fill: var(--surface); stroke: var(--bg); stroke-width: 5; transition: fill var(--t-hover) ease; }
.dial .hour.is-on path { fill: var(--mint); }
.dial .hour.is-win path { fill: var(--mint); fill-opacity: 0.55; }
.dial .hi { font-family: var(--font-display); font-variation-settings: var(--fv-display); font-size: 25px; fill: var(--ink); letter-spacing: 0; }
.dial .hr { font-family: var(--font-text); font-size: 15px; fill: var(--muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dial .hour.is-on .hr { fill: var(--ink); }
.dial__core { fill: var(--bg); }
.dial__name { font-family: var(--font-display); font-variation-settings: var(--fv-display); font-size: 44px; fill: var(--ink); letter-spacing: 0; }
.dial__sub { font-family: var(--font-text); font-size: 19px; fill: var(--muted); letter-spacing: 0; }
.dial .hand { fill: var(--ink); }
.dial--pick .hour { cursor: pointer; outline: none; }
.dial--pick .hour:focus-visible path { stroke: var(--ink); stroke-width: 6; }
@media (hover: hover) and (pointer: fine) { .dial--pick .hour:not(.is-on):hover path { fill: var(--mint); fill-opacity: 0.4; } }
.dial--pick .hour:active path { fill: var(--mint); }

/* ---------- 2. подберите урок: шаги слева, циферблат и билет справа ---------- */
.pick { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; padding-inline: var(--margin); align-items: start; }
.pick__head { grid-column: 1 / 7; grid-row: 1; display: grid; gap: 1.1rem; }
.pick__form { grid-column: 1 / 7; grid-row: 2; display: grid; gap: 1.1rem; }
.pick__steps { display: grid; gap: 1.5rem; }
.pick__side { grid-column: 7 / 13; grid-row: 1 / 3; display: grid; gap: 2rem; align-content: start; }
.pick__dial { width: min(100%, 560px); justify-self: center; }
.pick__level { padding: 0.9rem 1rem; background: var(--surface); }
.pick__warn { min-height: 1.4em; }
.pick__nojs { display: none; grid-column: 1 / -1; padding: 1rem; background: var(--surface); }
html:not(.js):not(.shot) .pick__nojs { display: block; }
.chips { gap: 0.5rem; }
.chips legend { font-size: var(--step-body); font-weight: 500; }
.chip span { min-height: 2.75rem; background: var(--surface); font-size: var(--step-body); }
.chip input:checked + span { background: var(--ink); color: var(--bg); }
.chips[hidden] { display: none; }
.ticket { background: var(--mint); color: var(--ink); padding: 1.75rem 2.25rem 2rem; display: grid; gap: 0.9rem; clip-path: polygon(0 0, 100% 0, 100% calc(50% - 16px), calc(100% - 8px) calc(50% - 12px), calc(100% - 14px) 50%, calc(100% - 8px) calc(50% + 12px), 100% calc(50% + 16px), 100% 100%, 0 100%, 0 calc(50% + 16px), 8px calc(50% + 12px), 14px 50%, 8px calc(50% - 12px), 0 calc(50% - 16px)); }
.ticket__body { display: grid; gap: 0.5rem; }
.ticket__body[hidden], .ticket__acts[hidden], .ticket__empty[hidden] { display: none; }
.ticket__l1 { font-weight: 500; max-width: none; }
.ticket__lines { display: grid; gap: 0.15rem; margin-top: 0.5rem; }
.ticket__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; margin-top: 0.5rem; max-width: none; }
.ticket__sum { font-family: var(--font-display); font-variation-settings: var(--fv-display); font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; }
.ticket__price.is-text .ticket__sum { font-size: var(--step-lead); line-height: 1.25; }
.ticket__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 0.5rem; }
.ticket__empty { font-size: var(--step-lead); line-height: 1.3; padding-block: 1.5rem; max-width: 22ch; }

/* ---------- 3. числа школы (тёмное поле) ---------- */
.numbers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; padding-inline: var(--margin); align-items: center; padding-block: var(--section); }
.numbers__say { grid-column: 1 / 7; display: grid; gap: 2rem; }
.numbers__first { display: block; color: var(--field-2-muted); }
.numbers__say .head > span { display: block; }
.numbers__facts { display: grid; gap: 0.7rem; padding: 0; list-style: none; color: var(--field-2-muted); font-size: var(--step-body); max-width: 40ch; }
.numbers__list { grid-column: 8 / 13; display: grid; gap: 1.25rem; padding: 0; list-style: none; }
.numbers__list li { display: grid; grid-template-columns: minmax(7.5rem, 1fr) minmax(0, 2fr); column-gap: var(--gutter); align-items: baseline; }
.numbers__n { font-family: var(--font-display); font-variation-settings: var(--fv-head); font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; text-align: right; }
.numbers__t { font-size: var(--step-body); line-height: 1.4; }

/* ---------- 4. программы ---------- */
.programs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 4rem; padding-inline: var(--margin); align-items: start; }
.programs__head { grid-column: 1 / -1; display: grid; gap: 1.5rem; }
.programs__head .head > span { display: block; }
.programs__first { padding-left: 3vw; color: var(--muted); }
.programs__head .lead { max-width: 36ch; }
.prog { grid-column: 6 / 13; grid-row: 2; display: grid; gap: 1.6rem; padding: 0; list-style: none; }
.prog li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto; column-gap: var(--gutter); align-items: baseline; }
.prog li:nth-child(4n + 1):not(:first-child) { margin-top: 1.4rem; }
.prog__name { font-family: var(--font-text); font-variation-settings: normal; font-size: var(--step-body); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; }
.prog__what { color: var(--muted); font-size: var(--step-body); line-height: 1.45; max-width: none; }
.prog__pick { font-size: var(--step-body); white-space: nowrap; }
.programs__ph { grid-column: 1 / 5; grid-row: 2; align-self: end; width: 22vw; max-width: 100%; aspect-ratio: 4 / 5; }

/* ---------- 5. ещё шесть языков: отпечатки у заголовка ---------- */
.langs__stage { position: relative; background: var(--surface); min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.langs__title { position: relative; z-index: 2; margin: 0; text-align: center; font-family: var(--font-display); font-variation-settings: var(--fv-poster); font-size: var(--step-display); line-height: 0.85; letter-spacing: -0.01em; }
.print { position: absolute; z-index: 1; display: block; height: auto; object-fit: cover; border: 8px solid var(--bg); background: var(--bg); aspect-ratio: 3 / 4; }
.print--paris { width: 19vw; left: 2.5vw; top: 14%; transform: rotate(-8deg); }
.print--istanbul { width: 19vw; right: 2.5vw; top: 22%; transform: rotate(6deg); }
.print--beijing { width: 14vw; right: 14vw; bottom: -5%; transform: rotate(3deg); }
.print--astana { width: 14vw; left: 12vw; bottom: -4%; transform: rotate(-4deg); }
.langs__list { padding-inline: var(--margin); display: grid; gap: 3rem; }
.langs__list .lead { max-width: 44ch; }
.lang-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--gutter); padding: 0; list-style: none; }
.lang-card { display: grid; gap: 0.35rem; align-content: start; }
.lang-card__hi { font-family: var(--font-display); font-variation-settings: var(--fv-display); font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.01em; max-width: none; }
.lang-card__name { font-family: var(--font-text); font-variation-settings: normal; font-size: var(--step-body); font-weight: 500; letter-spacing: 0.01em; }
.lang-card__city { color: var(--muted); font-weight: 400; margin-left: 0.6em; }
.lang-card__what { color: var(--muted); font-size: var(--step-body); line-height: 1.45; max-width: 34ch; }

/* ---------- 6. цена: одно предложение (мятное поле) ---------- */
.price { min-height: 80svh; padding: var(--section) var(--margin); display: grid; align-content: space-between; gap: 4rem; }
.price__say { font-family: var(--font-display); font-variation-settings: var(--fv-display); font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.03em; max-width: 12ch; }
.price__mark { background: var(--ink); color: var(--mint); padding: 0 0.15em; }
.price__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: baseline; }
.price__what { grid-column: 1 / 7; max-width: 38ch; }
.price__side { grid-column: 9 / 13; display: grid; gap: 1.25rem; justify-items: start; }
.price__links { display: grid; gap: 0.2rem; padding: 0; list-style: none; }
.price__note { max-width: 56ch; color: var(--muted); }

/* ---------- 7. путь: по глаголу на экран ---------- */
.verb { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: #fff; }
.verb--mint { background: var(--mint); color: var(--ink); }
.verb--light { color: var(--ink); }
.verb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.verb--photo:not(.verb--light)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.46); }
.verb__w { position: relative; z-index: 2; font-family: var(--font-display); font-variation-settings: var(--fv-poster); font-size: min(var(--step-mega), 14.4vw); line-height: 0.85; letter-spacing: -0.01em; text-align: center; max-width: 100%; }
.verb__t { position: absolute; z-index: 2; left: var(--margin); bottom: var(--margin); max-width: 38ch; padding: 0.8rem 1rem; font-size: var(--step-body); line-height: 1.45; background: rgba(0, 0, 0, 0.55); color: #fff; }
.verb--mint .verb__t { background: transparent; color: var(--ink); padding: 0; }
.verb--light .verb__t { background: rgba(255, 255, 255, 0.86); color: var(--ink); }
.verb--light::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, 0.4); }

/* ---------- 8. школа: портрет как буквица ---------- */
.school { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; padding-inline: var(--margin); align-items: start; }
.school__text { grid-column: 3 / 13; display: grid; gap: 1.5rem; }
.school__text .lead { max-width: 56ch; }
.school__logo { float: left; width: 13.5rem; height: auto; margin: 0.25rem 1.5rem 0.5rem 0; background: none; }
.school__text .lead:first-of-type { display: block; }
.school__facts { grid-column: 1 / 3; grid-row: 1; display: grid; gap: 1.25rem; padding: 0; list-style: none; }
.school__facts li { display: grid; gap: 0.15rem; }
.school__facts b { font-weight: 500; }
.school__facts span { color: var(--muted); }

/* ---------- 9. контакты ---------- */
.contacts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; padding-inline: var(--margin); align-items: start; }
.contacts__say { grid-column: 1 / 6; display: grid; gap: 1rem; }
.contacts__ph { grid-column: 7 / 9; width: 10rem; aspect-ratio: 1; }
.contacts__ph svg { width: 100%; height: 100%; display: block; }
.contacts__links { grid-column: 9 / 13; display: grid; gap: 0.75rem; }
.contacts__q { font-weight: 500; }
.contacts__list { display: grid; gap: 0; padding: 0; list-style: none; }

/* ---------- 10. подвал: приглашение над обрезанным именем ---------- */
.foot { min-height: 100svh; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2rem; padding: calc(var(--section) / 2) var(--margin) 0; }
.foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.foot__invite { grid-column: 1 / 8; display: grid; gap: 1.75rem; justify-items: start; }
.foot__say { max-width: 18ch; }
.foot__facts { grid-column: 9 / 13; display: grid; gap: 1.25rem; font-size: var(--step-small); }
.foot__facts a { text-underline-offset: 0.18em; }
.foot__credit { max-width: 60ch; color: rgba(255, 255, 255, 0.85); margin-top: 0; }
.foot__credit a { text-decoration: underline; }
.foot__name { margin: auto 0 0; font-family: var(--font-display); font-variation-settings: var(--fv-poster); font-size: var(--step-mega); line-height: 0.85; letter-spacing: -0.01em; white-space: nowrap; transform: translateY(30%); max-width: none; }

/* ---------- телефон: отдельная композиция ---------- */
@media (max-width: 56.24em) {
  .hero__line { flex-direction: column; align-items: flex-start; justify-content: flex-start; margin: 1.25rem 0 0; white-space: normal; font-size: min(var(--step-display), 17.4vw); }
  .hero__line .w2 { display: block; }
  .hero-dial { display: block; width: min(78vw, 340px); margin: 1.5rem auto 0.5rem; }
  .o-clock { display: none; }
  .o-letter { display: inline; }
  .dial--hero .hr { display: none; }
}
@media (max-width: 47.99em) {
  .top { gap: 0.5rem; }
  .top__mark { font-size: var(--step-lead); }
  .hero { min-height: auto; padding-bottom: 1.5rem; }
  .hero__foot { grid-template-columns: 1fr; padding-top: 1.25rem; padding-bottom: 0; }
  .hero__say, .hero__act { grid-column: 1; }
  .hero__act { justify-self: stretch; min-height: 3.5rem; }

  .pick { row-gap: 1.5rem; }
  .pick__head, .pick__form, .pick__side { grid-column: 1 / -1; grid-row: auto; }
  .pick__side { gap: 1.5rem; }
  .pick__dial { width: min(100%, 360px); }
  .dial--pick .hi { display: none; }
  .dial--pick .hr { font-size: 27px; fill: var(--ink); transform: translateY(-13px); }
  .ticket { padding: 1.5rem 1.5rem 1.75rem; }
  .ticket__acts .btn { width: 100%; min-height: 3.5rem; }

  .numbers { grid-template-columns: 1fr; row-gap: 2rem; padding-block: calc(var(--section) / 1.4); }
  .numbers__say, .numbers__list { grid-column: 1; }
  .numbers__list li { grid-template-columns: 1fr; row-gap: 0.35rem; }   /* qa1 QA1-02: подпись под числом (8–22 наезжало на подпись) */
  .numbers__n { font-size: 15.5vw; line-height: 0.95; text-align: left; }

  .programs { row-gap: 2rem; }
  .prog { grid-column: 1 / -1; grid-row: auto; gap: 1.4rem; }
  .prog li { grid-template-columns: 1fr; row-gap: 0.15rem; }
  .prog li:nth-child(4n + 1):not(:first-child) { margin-top: 0.6rem; }
  .programs__ph { grid-column: 7 / 13; grid-row: auto; width: auto; justify-self: end; }

  .langs__stage { min-height: 78svh; padding-block: 8rem; }
  .langs__title { font-size: var(--step-display); }
  .print--paris { width: 44vw; left: 5vw; top: 3%; transform: rotate(-6deg); }
  .print--istanbul { width: 44vw; right: 5vw; top: auto; bottom: 3%; transform: rotate(5deg); }
  .print--beijing, .print--astana { display: none; }
  .lang-cards { grid-template-columns: 1fr; gap: 1.75rem; }

  .price { min-height: auto; gap: 2.5rem; }
  .price__say { font-size: 11vw; max-width: none; }
  .price__mark { white-space: nowrap; }
  .price__row { grid-template-columns: 1fr; }
  .price__what, .price__side { grid-column: 1; }
  .price__side .btn { width: 100%; min-height: 3.5rem; }

  .verb__w { font-size: 15.5vw; }
  .verb__t { right: var(--margin); max-width: none; bottom: 0; left: 0; right: 0; padding: 1rem var(--margin) 1.25rem; }
  .verb--mint .verb__t { padding: 1rem var(--margin) 1.25rem; }

  .school { grid-template-columns: 1fr; }
  .school__text, .school__facts { grid-column: 1; grid-row: auto; }
  .school__text .lead { font-size: var(--step-lead); }
  .school__logo { width: 7rem; margin-right: 1rem; }
  .school__facts { grid-template-columns: 1fr; }

  .contacts { grid-template-columns: 1fr; }
  .contacts__say, .contacts__ph, .contacts__links { grid-column: 1; }
  .contacts__ph { width: 6rem; }

  .foot { min-height: auto; padding-top: calc(var(--section) / 2); }
  .foot__top { grid-template-columns: 1fr; }
  .foot__invite, .foot__facts { grid-column: 1; }
  .foot__invite .btn { width: 100%; min-height: 3.5rem; }
  .foot__say { font-size: 11vw; max-width: none; }
  .foot__name { font-size: 24vw; margin-top: 2.5rem; transform: translateY(24%); }
}
@media (max-width: 47.99em) and (orientation: landscape) { .langs__stage { min-height: 120svh; } }
@media (max-width: 85em) { .programs__ph { width: 24vw; } }
@media (max-width: 63.99em) {
  .numbers { grid-template-columns: 1fr; }
  .numbers__say, .numbers__list { grid-column: 1; }
  .price__row { grid-template-columns: 1fr; }
  .price__what, .price__side { grid-column: 1; }
  .foot__top { grid-template-columns: 1fr; }
  .foot__invite, .foot__facts { grid-column: 1; }
}
@media (max-width: 64em) and (min-width: 48em) {
  .pick__head, .pick__form { grid-column: 1 / 7; }
  .lang-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prog li { grid-template-columns: minmax(0, 1fr) auto; }
  .prog__what { grid-column: 1 / -1; grid-row: 2; }
  .programs__ph { grid-column: 1 / 5; width: auto; }
  .prog { grid-column: 5 / 13; }
}