/* ═════════════ Планшет (≤ 1024) ═════════════ */
@media (max-width: 1024px) {
  .ticket { max-width: none; }
  .ticket__face--front { grid-template-columns: 1fr calc(300 * var(--u) + 120px); }
  .ticket__main { padding: 7% 0 0 9%; }
  .ticket__stub { padding: 9% 9% 0 8%; }
  .ticket__fields { grid-template-columns: 1fr 1fr; }
  .ticket__note { margin-top: 3%; }

  .profiles { --card-w: min(420px, 60vw); }
  .card__actions .btn-plaque { width: min(calc(var(--card-w) * 0.54), 48%); }

  .stories__head { grid-template-columns: 1fr; row-gap: 16px; }
  .stories__lead { justify-self: start; max-width: 640px; }
  .avatar-btn .avatar { --d: 110; }

  .story__layout { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; }
  .story__who { margin-top: 60px; }
  .story__who .avatar { width: 56px; height: 56px; }
  .story__who-name { font-size: 18px; max-width: 72px; }
  .answer-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .answer-row .btn-plaque { width: 100%; }
  .observations-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .observation { padding: 0; }
  .observation + .observation { border-left: 0; border-top: var(--line); padding-top: 24px; }
  .observation h4 { margin-bottom: 12px; }

  .compare { margin-inline: 0; grid-template-columns: 56px 1fr 56px; }
  .compare__pair { margin: 0 12px; grid-template-columns: 1fr 1fr; }
  .compare__card { padding: 13% 8% 0 10%; }
  .round-btn--arrow { --size: 56; }

  .chapter--detail, .chapter--experience { grid-template-columns: 1fr; row-gap: 20px; padding: 48px 0; }
  .chapter__cols, .two-col, .quote-pair, .self__bottom { grid-template-columns: 1fr; row-gap: 20px; }
  .self__bottom > .body-text { margin-top: 24px; }
  .self__log { max-width: 420px; justify-self: center; }
  .eye-band { height: 52vw; }
  .proverb { margin-top: 48px; }
  .flip-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }

  .review-grid { grid-template-columns: 1fr; margin-inline: 0; row-gap: 8px; }
  /* высота карточки — по содержимому, рамка растягивается вместе с ней */
  .review-card { max-width: 600px; width: 100%; justify-self: center; aspect-ratio: auto; padding: 54px 9%; grid-template-columns: 30% minmax(0, 1fr); column-gap: 4%; }
  .review-card .avatar { width: 100%; height: auto; aspect-ratio: 1; }
  .review-card__name { margin-top: 0; }
  .review-card .round-btn { --size: 56; }

  .btn-plaque { width: min(100%, 340px); }
}

/* ═════════════ Телефон (≤ 600) ═════════════ */
@media (max-width: 600px) {
  /* на телефоне шрифт реплик не меньше 12 px — расширяем плашки, чтобы текст не шёл столбиком; правый край кадра не пересекаем */
  .bubble { max-width: min(calc(97% - var(--x)), max(var(--bw), 56%)); }
  .cover { --cover-h: min(100svh, calc(79.7vw + 130px)); height: calc(var(--cover-h) + 22svh); }
  .cover__image { bottom: 130px; }
  .ticket-block { min-height: 0; padding-top: 12px; }
  .cover__head { top: calc(min(100svh, 79.7vw) - 36px); transform: none; }

  /* Билет на телефоне — вертикальный: корешок уходит вниз */
  /* высота по содержимому: лицевая сторона в потоке, оборот накрывает её */
  .ticket__spin { aspect-ratio: auto; min-height: 0; }
  .ticket__face--front { position: relative; inset: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .ticket__face { --hole: 12px; --step: 34px; }
  .ticket__face--front::before { left: 26px; right: 26px; top: 16px; bottom: 16px; border-radius: 10px; }
  .ticket__face--front::after { inset: 18px 14px; background-size: 6px 15px, 6px 15px; background-image:
    radial-gradient(circle 3px at 50% 50%, var(--color-pink) 96%, #0000), radial-gradient(circle 3px at 50% 50%, var(--color-pink) 96%, #0000); }
  .ticket__main { padding: 40px 40px 0; }
  .ticket__line { padding-bottom: 18px; max-width: none; min-height: 0; }
  .ticket__fields { grid-template-columns: 1fr 1fr; margin-top: 4px; }
  .ticket__field { padding-top: 14px; }
  .ticket__field + .ticket__field { padding-left: 16px; }
  .ticket__label { font-size: 16px; }
  .ticket__stub { border-left: 0; border-top: 1px dashed var(--color-pink); margin: 22px 40px 34px; padding: 16px 0 0; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: end; }
  .ticket__no { grid-column: 1 / -1; font-size: 16px; }
  .ticket__num { grid-row: 2 / 4; }
  .ticket__stub .ticket__label { align-self: end; }
  .ticket__note { margin-top: 0; font-size: 16px; }
  .ticket-block { gap: 20px; }
  .ticket-block__desc { font-size: 17px; max-width: 36em; }

  .profiles { padding-inline: 0; }
  .profiles__counter { padding-inline: var(--gutter); }
  .profiles { --card-w: min(360px, calc(100vw - 2 * var(--gutter) - 24px)); }
  .slider { grid-template-columns: minmax(0, 1fr); }
  .slider__track { grid-column: 1; }
  .slider__ghost { display: none; }
  .card { padding-inline: 6px; }
  .card__actions { gap: 8px; width: 100%; margin-top: -4px; }
  .card__actions .btn-plaque { width: 48%; }
  .card__name, .card__interests, .card__bio, .card__reason { padding-inline: 4px; }
  .card__interests, .card__bio { font-size: 17px; }
  .card__reason .h-question { font-size: 28px; }

  .avatar-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 8px; }
  .avatar-btn { width: 100%; min-height: 44px; }
  .avatar-btn .avatar { width: 100%; height: auto; aspect-ratio: 1; min-width: 0; min-height: 0; max-width: 96px; margin-inline: auto; }

  /* Указатель персонажа — компактная плашка сверху, не перекрывающая кадры */
  .story__layout { grid-template-columns: 1fr; }
  /* Указатель — тонкая сплошная полоса во всю ширину: кадры и текст проходят под ней,
     а не просвечивают по краям плавающей плашки */
  .story__who {
    position: sticky;
    top: 0;
    z-index: 4;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    gap: 8px;
    margin: 0 calc(-1 * var(--gutter-wide)) 12px;
    padding: 6px var(--gutter-wide);
    border-bottom: 1px solid var(--color-red);
    background: var(--color-bg);
  }
  .story__who .avatar { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
  .story__who-name { font-size: 16px; max-width: none; }
  .story__main { grid-column: 1; }
  .manga, .manga__row { gap: 8px; }
  .panel-frame { border-width: 2px; }
  .manga__row--pair { flex-direction: column; }
  .manga__row--pair .panel-frame { flex: none; width: 100%; }
  .bubble { font-size: clamp(13px, 4.1cqw, 17px); }
  .answer-row { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .answer-row .btn-plaque { width: min(100%, 300px); }
  .story__nav { flex-direction: column; align-items: center; gap: 0; }

  .compare { grid-template-columns: 44px 1fr 44px; }
  .compare__pair { grid-template-columns: 1fr; gap: 6px; margin: 0 6px; }
  .compare__card { padding: 12% 8% 0 10%; }
  .compare__value { margin-top: 6px; min-height: 0; }
  .round-btn--arrow { --size: 44; }
  .eye-band { height: 70vw; }
  .flip-cards { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .flip-card { width: min(100%, 360px); }

  /* на телефоне высота карточки — по содержимому, рамка растягивается вместе с ней */
  .review-card { padding: 46px 9% 46px 8%; grid-template-columns: 28% minmax(0, 1fr); column-gap: 14px; }
  .review-card > * { min-width: 0; }
  .review-card__name { font-size: 24px; white-space: normal; }
  .review-card__first { font-size: 16px; }
  .review-card__now { font-size: 14px; }
  .review-card .round-btn { --size: 44; }
  .review-card__controls { gap: 8px; }

  .btn-plaque { width: min(100%, 320px); }
  .stage-top { flex-wrap: wrap; }
  .site-footer__row .text-link { margin-left: 0; }
}

/* Узкие телефоны: поля билета не упираются в разделитель */
@media (max-width: 430px) {
  .ticket__main { padding: 32px 42px 0; }
  .ticket__stub { margin: 20px 42px 30px; }
  .ticket__value { font-size: 21px; }
  .ticket__field:first-child { padding-right: 12px; }
  .ticket__field + .ticket__field { padding-left: 12px; }
}
@media (max-width: 360px) {
  .ticket__fields { grid-template-columns: 1fr; }
  .ticket__field:first-child { padding-right: 0; }
  .ticket__field + .ticket__field { border-left: 0; padding-left: 0; padding-top: 10px; }
}

/* Телефон: текстовые блоки на всю колонку. Ширины из макета (в единицах 1440) здесь слишком узкие */
@media (max-width: 600px) {
  .story__intro, .story__closing, .story__hint, .story__personal, .story__comment-title,
  .card__bio, .card__interests, .card__reason .h-question, .confidence__lead, .stories__lead,
  .observations__hero .body-text, .observations__question, .continue__lead, .continue__outro,
  .finale__title, .finale__text, .proverb { max-width: none; }
}

/* Планшет: плашки цитат не растягиваются на всю ширину, карточки трактовок не переполняются */
@media (max-width: 1024px) {
  .quote-pair { max-width: 560px; margin-inline: auto; width: 100%; }
  .flip-card__face { padding: 12% 12% 21%; font-size: 16px; }
}
@media (max-width: 860px) {
  .flip-cards { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .flip-card { width: min(100%, 400px); }
  .flip-card__face { padding: 12% 14% 20%; font-size: 18px; }
}
@media (max-width: 600px) {
  /* на телефоне вместо растянутой картинки — тонкая двойная рамка, текст свободно переносится */
  .framed-quote { aspect-ratio: auto; min-height: 0; background: none; border: 1px solid var(--color-red); outline: 1px solid var(--color-red); outline-offset: 3px; border-radius: 40px; padding: 14px 26px; margin: 4px; font-size: 16px; line-height: 1.2; }
  .quote-pair { row-gap: 14px; }
}

@media (max-width: 600px) {
  .sources__title { font-size: 28px; }
}
@media (max-width: 600px) {
  .card__actions .btn-plaque { min-width: 0; }
}
@media (max-width: 360px) {
  .card__actions .btn-plaque { letter-spacing: -0.01em; }
}

@media (max-width:720px) {
  .course-webring__nav, .course-webring--entry .course-webring__nav { grid-template-columns:1fr; }
  .course-webring__nav a:last-child { justify-content:flex-start; text-align:left; }
}