/* ═════════════ 1. Обложка (MacBook Air 2) ═════════════
   Заголовок уходит вверх вместе с прокруткой, изображение закреплено и затухает по прогрессу.
   Длина участка — 160 % высоты экрана: без долгой пустой прокрутки. */
.cover {
  /* высота закреплённой части — по картинке: на вертикальных экранах без пустоты под ней */
  --cover-h: min(100svh, 79.7vw);
  position: relative;
  height: calc(var(--cover-h) + 40svh);
}
.cover__sticky {
  position: sticky;
  top: 0;
  height: var(--cover-h);
  overflow: hidden;
  opacity: var(--cover-fade, 1);
  will-change: opacity;
}
.cover__image {
  position: absolute;
  inset: 0;
  /* плавный переход в бежевый фон по нижней половине видимой части */
  -webkit-mask: linear-gradient(180deg, #000 0, #000 22%, rgba(0,0,0,.35) 52%, #0000 70%);
  mask: linear-gradient(180deg, #000 0, #000 22%, rgba(0,0,0,.35) 52%, #0000 70%);
}
.cover__image img {
  /* картинка на всю ширину экрана, кадрируется только снизу */
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;   /* глаз выше заголовка */
}
.cover__head {
  position: absolute;
  left: 0;
  right: 0;
  /* нижняя треть картинки: высота картинки — меньшее из высоты экрана и ширины × 1120/1405 */
  top: calc(var(--cover-h) - 7svh);
  transform: translateY(-100%);   /* низ блока — у нижнего края картинки */
  padding-inline: var(--gutter);
  display: grid;
  justify-items: center;
  text-align: center;
}
.cover__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.12;
  color: var(--color-red);
  text-wrap: balance;
}

/* ═════════════ 2. Билет (MacBook Air 4) ═════════════ */
.ticket-block {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: calc(28 * var(--u));
  padding-top: calc(47 * var(--u));
  padding-bottom: calc(80 * var(--u));
  min-height: 70svh;
  align-content: center;
  scroll-margin-top: 0;
}
.ticket-block:focus { outline: none; }
.ticket {
  width: 100%;
  max-width: calc(1290 * var(--u));
  perspective: 1600px;
}
.ticket__spin {
  position: relative;
  aspect-ratio: 1290 / 544;
  transform-style: preserve-3d;
  will-change: transform;
}
.ticket__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--color-red);
  color: var(--color-pink);
  /* вырубка билета: полукруги Ø38 по краям с шагом 50 (Subtract: Ellipse 37–56) */
  --hole: calc(19 * var(--u));
  --step: calc(50 * var(--u));
  -webkit-mask:
    radial-gradient(circle var(--hole) at 0 50%, #0000 98%, #000) 0 calc(22 * var(--u)) / 51% var(--step) repeat-y,
    radial-gradient(circle var(--hole) at 100% 50%, #0000 98%, #000) 100% calc(22 * var(--u)) / 51% var(--step) repeat-y;
  mask:
    radial-gradient(circle var(--hole) at 0 50%, #0000 98%, #000) 0 calc(22 * var(--u)) / 51% var(--step) repeat-y,
    radial-gradient(circle var(--hole) at 100% 50%, #0000 98%, #000) 100% calc(22 * var(--u)) / 51% var(--step) repeat-y;
}
.ticket__face--front {
  display: grid;
  grid-template-columns: calc(917 * var(--u)) 1fr;
}
.ticket__face--front::before {
  /* внутренняя рамка Rectangle 19 (1156 × 481) */
  content: '';
  position: absolute;
  left: calc(67 * var(--u));
  right: calc(67 * var(--u));
  top: calc(31 * var(--u));
  bottom: calc(32 * var(--u));
  border: 1px solid var(--color-pink);
  border-radius: calc(12 * var(--u));
  pointer-events: none;
}
.ticket__face--front::after {
  /* перфорация: два столбца точек Ø10 с шагом 21 (Group 12, 13) */
  content: '';
  position: absolute;
  inset: calc(33 * var(--u)) calc(38 * var(--u));
  background:
    radial-gradient(circle calc(5 * var(--u)) at 50% 50%, var(--color-pink) 96%, #0000) 0 0 / calc(10 * var(--u)) calc(21 * var(--u)) repeat-y,
    radial-gradient(circle calc(5 * var(--u)) at 50% 50%, var(--color-pink) 96%, #0000) 100% 0 / calc(10 * var(--u)) calc(21 * var(--u)) repeat-y;
  pointer-events: none;
}
.ticket__face--back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(135deg, var(--color-pink) 0 1px, #0000 1px 18px),
    var(--color-red);
}
.ticket__main {
  position: relative;
  padding: calc(99 * var(--u)) 0 0 calc(107 * var(--u));
}
.ticket__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-ticket);
  line-height: 1.22;
  color: var(--color-pink);
  max-width: calc(823 * var(--u));
  min-height: 2.44em;
  padding-bottom: calc(47 * var(--u));
  border-bottom: 1px solid var(--color-pink);   /* Line 12 */
}
.ticket__fields {
  display: grid;
  grid-template-columns: calc(370 * var(--u)) 1fr;
  max-width: calc(823 * var(--u));
  margin-top: calc(16 * var(--u));
}
.ticket__field { padding-top: calc(31 * var(--u)); }
.ticket__field + .ticket__field {
  border-left: 1px solid var(--color-pink);      /* Line 13 */
  padding-left: calc(66 * var(--u));
}
.ticket__label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-pink);
  opacity: 0.85;
}
.ticket__value {
  margin-top: calc(5 * var(--u));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-value);
  line-height: 1.2;
  color: var(--color-pink);
}
.ticket__stub {
  position: relative;
  border-left: 1px dashed var(--color-pink);       /* Line 14 */
  margin: calc(31 * var(--u)) 0 calc(32 * var(--u));
  padding: calc(68 * var(--u)) calc(60 * var(--u)) 0 calc(37 * var(--u));
}
.ticket__no {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
}
.ticket__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-num);
  line-height: 1.2;
  margin-bottom: calc(-2 * var(--u));
}
.ticket__note {
  margin-top: calc(47 * var(--u));
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.22;
}
.ticket-block__desc {
  max-width: calc(853 * var(--u));
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--color-ink);
  transition: opacity 0.5s var(--ease);
}
.ticket-block.is-spinning .ticket-block__desc { opacity: 0; }

/* ═════════════ 3. Анкеты — слайдер (MacBook Air 18–19) ═════════════ */
.profiles {
  position: relative;
  padding-top: 8px;
  padding-bottom: calc(60 * var(--u));
  overflow: clip;
}
.profiles__counter {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-graphite);
  min-height: 1.4em;
  margin-bottom: calc(16 * var(--u));
}
.profiles {
  /* ширина анкеты: по макету 634, но вся композиция (рамка + кнопки + имя) помещается в экран по высоте */
  /* размер анкеты зависит только от ширины экрана — одинаковый во всех контекстах и при любой высоте окна */
  --card-w: 440px;
}
.slider {
  position: relative;
  display: grid;
  /* центральная колонка ровно по ширине анкеты, боковые — поровну: анкета строго по центру */
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--card-w) * 1.75)) minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  touch-action: pan-y;      /* вертикальная прокрутка страницы остаётся за браузером */
}
.slider__ghost {
  width: min(100%, calc(var(--card-w) * 0.486));
  margin-top: calc(var(--card-w) * 0.317);
  aspect-ratio: 308 / 411;
  background: url('../assets/images/decorations/frame-ornate.webp') center / 100% 100% no-repeat;
  opacity: 0.32;            /* боковые рамки — пустые и приглушённые */
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.slider__ghost[data-empty] { opacity: 0.12; }
.slider__track { position: relative; min-width: 0; width: 100%; grid-row: 1; grid-column: 2; }
.slider__ghost--prev { grid-row: 1; grid-column: 1; }
.slider__ghost--next { grid-row: 1; grid-column: 3; }

.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  outline: none;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.card.is-out-left { transform: translateX(-40%) scale(0.86); opacity: 0; }
.card.is-out-right { transform: translateX(40%) scale(0.86); opacity: 0; }
.card.is-in { transform: translateX(28%) scale(0.92); opacity: 0; }
.card.is-dragging { transition: none; }
.card__portrait {
  position: relative;
  width: var(--card-w);
  max-width: 100%;
  aspect-ratio: 634 / 845;
}
.card__oval {
  /* Ellipse 3: 351.93 × 526.20 в (141.85, 144.39) внутри рамки 634 × 845 */
  position: absolute;
  left: 22.37%;
  top: 17.09%;
  width: 55.51%;
  height: 62.27%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg);
}
.card__oval img {
  position: absolute;
  max-width: none;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  object-fit: cover;
}
.card__oval--flip img { transform: scaleX(-1); }
.card__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.card__actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: calc(21 * var(--u));
  margin-top: calc(-13 * var(--u));     /* кнопки заходят на низ рамки (y 832 при высоте 845) */
  position: relative;
  z-index: 1;
}
.card__actions .btn-plaque { width: min(calc(var(--card-w) * 0.54), 48%); }
.card__actions .btn-plaque--fill { color: var(--color-white); }
.card__info {
  /* текст анкеты — по левому краю, колонкой по ширине кнопок: виден вместе с картинкой */
  width: min(100%, calc(var(--card-w) * 1.75));
  margin-top: 4px;
  justify-self: center;
}
.card__name {
  margin-top: calc(-1 * var(--u));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--fs-h1) * 0.72);
  line-height: 1.1;
  color: var(--color-red-name);
  text-align: left;
}
.card__interests,
.card__bio {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.22;
  color: var(--color-ink);
}
.card__interests { margin-top: 4px; color: var(--color-ink-soft); font-size: calc(var(--fs-body) * 0.82); }
.card__bio { margin-top: 6px; line-height: 1.28; font-size: calc(var(--fs-body) * 0.86); }

/* Вопрос о причине — прямо в анкете (MacBook Air 19) */
.card__reason { display: grid; justify-items: center; margin-top: calc(-1 * var(--u)); }
.card__reason[hidden] { display: none; }
.card__reason .h-question { max-width: calc(853 * var(--u)); }
.card__reason .choice-list { margin-top: calc(31 * var(--u)); }
.card__reason-note {
  margin-top: calc(16 * var(--u));
  min-height: 1.4em;
  font-size: var(--fs-small);
  color: var(--color-graphite);
  text-align: center;
}
.card__undo { margin-top: calc(8 * var(--u)); }
.card.is-deciding .card__info { display: none; }
.card .card__confirm[hidden] { display: none; }

/* ═════════════ 4. Вопрос об уверенности ═════════════ */
.confidence {
  display: grid;
  justify-items: center;
  padding-top: calc(80 * var(--u));
  padding-bottom: calc(100 * var(--u));
  text-align: center;
}
.confidence__lead { margin-top: calc(20 * var(--u)); text-align: center; max-width: calc(760 * var(--u)); }
.confidence .center-action { margin-top: calc(40 * var(--u)); }

/* ═════════════ 5. Манга (MacBook Air 13) ═════════════ */
.stories { padding-top: calc(43 * var(--u)); padding-bottom: calc(80 * var(--u)); }
.stories__head {
  display: grid;
  grid-template-columns: calc(853 * var(--u)) 1fr;
  column-gap: calc(40 * var(--u));
  align-items: end;
}
.stories__lead {
  justify-self: end;
  max-width: calc(526 * var(--u));
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-ink);
  padding-bottom: calc(8 * var(--u));
}
.stories__nav { margin: calc(53 * var(--u)) 0 calc(57 * var(--u)); }
.avatar-row { display: flex; justify-content: space-between; gap: 8px; }
.avatar-row .avatar { --d: 168; }
.avatar-btn {
  position: relative;
  border-radius: 50%;
  display: block;
  transition: transform var(--t-fast) var(--ease);
}
@media (hover: hover) { .avatar-btn:hover { transform: translateY(-3px); } }
.avatar-btn:focus-visible { border-radius: 50%; }
.avatar-btn[aria-current='true'] .avatar { box-shadow: 0 0 0 calc(4 * var(--u)) var(--color-bg), 0 0 0 calc(6 * var(--u)) var(--color-red); }
.avatar-btn__seen {
  position: absolute;
  right: 6%; bottom: 6%;
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  min-width: 18px; min-height: 18px;
  border-radius: 50%;
  background: var(--color-red);
  border: 2px solid var(--color-bg);
  display: grid; place-items: center;
}
.avatar-btn__seen svg { width: 60%; height: 60%; fill: none; stroke: var(--color-pink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.avatar-btn__tag {
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, 8px);
  white-space: nowrap;
  font-size: calc(18 * var(--u));
  color: var(--color-red);
}
.stories__progress {
  margin-top: calc(40 * var(--u));
  font-size: var(--fs-small);
  color: var(--color-graphite);
  text-align: center;
  min-height: 1.4em;
}
.return-bar { position: sticky; top: 12px; z-index: 6; margin-top: 16px; }

.story { padding-top: calc(31 * var(--u)); scroll-margin-top: 16px; }
.story__layout {
  display: grid;
  grid-template-columns: calc(109 * var(--u)) minmax(0, calc(1073 * var(--u))) calc(108 * var(--u));
  justify-content: center;
  align-items: start;
}
/* Закреплённый указатель: небольшая иконка и имя текущего персонажа */
.story__who {
  position: sticky;
  top: 24px;
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: calc(98 * var(--u));
  z-index: 2;
}
.story__who .avatar { --d: 90; min-width: 56px; min-height: 56px; background: var(--color-graphite); }
.story__who-name {
  font-family: var(--font-display);
  font-size: calc(26 * var(--u));
  min-height: 1em;
  line-height: 1.1;
  color: var(--color-graphite);
  max-width: calc(105 * var(--u));
}
.story__main { min-width: 0; grid-column: 2; }
.story__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.21;
  color: var(--color-graphite);
}
.story__intro {
  margin: calc(12 * var(--u)) 0 calc(24 * var(--u));
  font-size: var(--fs-small);
  color: var(--color-graphite);
  max-width: calc(860 * var(--u));
}
.story__closing { margin-top: calc(22 * var(--u)); font-size: var(--fs-body); color: var(--color-graphite); max-width: calc(797 * var(--u)); }

.story__question { margin-top: calc(22 * var(--u)); padding-top: calc(46 * var(--u)); border-top: var(--line); text-align: center; display: grid; justify-items: center; }
.story__question > * { width: 100%; }
.answer-row {
  /* три плашки делят ширину колонки поровну и не выходят за её края */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--u));
  width: min(100%, calc(1290 * var(--u)));
  margin: calc(18 * var(--u)) auto 0;
}
.answer-row .btn-plaque { width: 100%; }
.answer-row .btn-plaque { color: var(--color-ink); }
.answer-row .btn-plaque[aria-pressed='true'] { color: var(--color-pink); }
.story__prompt { margin-top: calc(11 * var(--u)); font-size: var(--fs-body); color: var(--color-graphite); }
.story__hint { min-height: 2.6em; margin: calc(18 * var(--u)) auto 0; max-width: calc(860 * var(--u)); font-size: var(--fs-body); color: var(--color-red); }

.story__comment { margin-top: calc(10 * var(--u)); padding-top: calc(46 * var(--u)); border-top: var(--line); }
.story__comment-label { font-size: var(--fs-body); color: var(--color-graphite); }
.story__comment-title {
  margin-top: calc(20 * var(--u));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-q);
  line-height: 1.2;
  color: var(--color-ink);
  max-width: calc(963 * var(--u));
}
.story__personal { margin-top: calc(14 * var(--u)); font-size: var(--fs-small); color: var(--color-graphite); max-width: calc(860 * var(--u)); }
.observations-grid {
  margin-top: calc(38 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.observation { padding-inline: calc(20 * var(--u)); }
.observation + .observation { border-left: var(--line); }
.observation:first-child { padding-left: 0; }
.observation:last-child { padding-right: 0; }
.observation h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-ink);
  margin-bottom: calc(45 * var(--u));
}
.observation p { font-size: var(--fs-small); color: var(--color-ink); }
.story__nav { display: flex; justify-content: center; gap: calc(21 * var(--u)); flex-wrap: wrap; margin-top: calc(30 * var(--u)); }

/* ═════════════ 6. Наблюдения «А что добавил ты?» (MacBook Air 16) ═════════════ */
.observations { padding-top: calc(58 * var(--u)); padding-bottom: calc(80 * var(--u)); }
.observations__hero .body-text { margin-top: max(10px, calc(18 * var(--u))); max-width: calc(635 * var(--u)); }
.compare {
  display: grid;
  grid-template-columns: calc(89 * var(--u)) auto calc(89 * var(--u));
  justify-content: space-between;
  align-items: center;
  margin: calc(38 * var(--u)) calc(54 * var(--u)) 0;
  padding-bottom: calc(20 * var(--u));
}
.compare__pair { display: grid; grid-template-columns: calc(457 * var(--u)) calc(454 * var(--u)); gap: 0; margin-inline: calc(54 * var(--u)); }
.compare__card {
  aspect-ratio: 457 / 305;
  background: url('../assets/images/decorations/card-frame.webp') center / 100% 100% no-repeat;
  padding: calc(72 * var(--u)) calc(36 * var(--u)) 0 calc(47 * var(--u));
}
.compare__label { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-small); color: var(--color-ink); }
.compare__value {
  margin-top: calc(17 * var(--u));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--color-ink);
  min-height: 2.4em;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.compare.is-switching .compare__value { opacity: 0; transform: translateY(8px); }
.compare__caption { grid-column: 1 / -1; margin-top: calc(24 * var(--u)); text-align: center; font-family: var(--font-text); font-weight: 400; font-size: var(--fs-small); color: var(--color-graphite); }
.compare__caption span { margin-right: 0.6em; color: var(--color-red); font-weight: 600; }

.chapter--detail {
  display: grid;
  grid-template-columns: calc(375 * var(--u)) minmax(0, calc(914 * var(--u)));
  justify-content: space-between;
  padding: calc(78 * var(--u)) 0 calc(85 * var(--u));
}
.chapter__cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.observations__question { padding-top: calc(30 * var(--u)); max-width: calc(853 * var(--u)); }
.eye-band {
  position: relative;
  margin: calc(45 * var(--u)) calc(-1 * var(--gutter-wide)) 0;
  height: calc(692 * var(--u));
  overflow: hidden;
}
.eye-band img {
  /* кадрирование image 23 из макета: w 153.96 %, h 255.36 %, left −31.17 %, top −77.68 % */
  position: absolute;
  max-width: none;
  left: -31.17%; top: -77.68%;
  width: 153.96%; height: 255.36%;
}
.eye-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-transparent-alt) 51.406%, var(--color-bg) 102.18%);
}
.observations__next { margin-top: calc(40 * var(--u)); }

/* ═════════════ 7. Психологический разбор — отдельный этап ═════════════ */
.analysis { padding-bottom: calc(80 * var(--u)); }
.analysis:focus { outline: none; }
.chapter--self { padding: calc(20 * var(--u)) 0 calc(75 * var(--u)); }
.quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(22 * var(--u)); margin-top: calc(33 * var(--u)); }
.framed-quote {
  aspect-ratio: 634 / 212;
  display: grid;
  place-items: center;
  padding: 0 9%;
  line-height: 1.18;
  background: url('../assets/images/decorations/quote-frame.webp') center / 100% 100% no-repeat;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: calc(var(--fs-body) * 0.94);
  color: var(--color-ink);
  text-align: center;
}
.chapter--self .two-col { margin-top: calc(4 * var(--u)); padding-inline: calc(3 * var(--u)); }
.proverb {
  margin: calc(90 * var(--u)) auto 0;
  max-width: calc(1287 * var(--u));
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--color-red);
  text-wrap: balance;
}
.self__bottom {
  display: grid;
  grid-template-columns: calc(632 * var(--u)) calc(635 * var(--u));
  justify-content: space-between;
  align-items: start;
  margin-top: calc(-6 * var(--u));
  padding-left: calc(3 * var(--u));
}
.self__bottom > .body-text { margin-top: calc(93 * var(--u)); }
.self__log { width: 100%; height: auto; aspect-ratio: 1; }

.chapter--experience {
  display: grid;
  grid-template-columns: calc(409 * var(--u)) calc(416 * var(--u)) calc(417 * var(--u));
  justify-content: space-between;
  padding: calc(62 * var(--u)) 0 calc(140 * var(--u));
}
.experience__head .body-text { margin-top: calc(24 * var(--u)); }
.chapter--experience > .body-text { margin-top: calc(15 * var(--u)); }

.flip-block { padding: calc(14 * var(--u)) 0 calc(28 * var(--u)); }
.flip-hint { text-align: center; font-family: var(--font-text); font-weight: 400; font-size: var(--fs-small); color: var(--color-graphite); margin-bottom: calc(6 * var(--u)); }
.flip-cards { display: grid; grid-template-columns: repeat(3, calc(445 * var(--u))); justify-content: space-between; margin-inline: calc(-15 * var(--u)); }

.chapter--continue { padding-top: calc(54 * var(--u)); }
.continue__lead { margin-top: calc(21 * var(--u)); max-width: calc(853 * var(--u)); }
.notebook { margin: calc(40 * var(--u)) auto; width: 100%; }
.notebook img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 640; }  /* фон картинки приведён к цвету страницы */
.chapter--continue .two-col { margin-top: calc(40 * var(--u)); }
.continue__outro { margin-top: calc(60 * var(--u)); max-width: calc(853 * var(--u)); }
.chapter--continue .center-action { margin-top: calc(80 * var(--u)); }

/* ═════════════ 8. Что теперь ты видишь иначе? (MacBook Air 17) ═════════════ */
.review { padding-bottom: calc(60 * var(--u)); }
.review:focus { outline: none; }
.review__lead { margin-top: 0; }
.review__confidence { margin-top: calc(14 * var(--u)); font-size: var(--fs-small); color: var(--color-graphite); min-height: 1.3em; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(22 * var(--u)); row-gap: calc(22 * var(--u)); margin: calc(42 * var(--u)) 0 0; }
.review-card {
  position: relative;
  /* высота по содержимому (не меньше пропорции рамки из макета): текст и кнопки никогда не выходят за рамку */
  min-height: calc(451 * var(--u) * 0.9);
  background: url('../assets/images/decorations/review-frame.webp') center / 100% 100% no-repeat;
  display: grid;
  grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr);
  column-gap: calc(22 * var(--u));
  /* содержимое ровно по центру рамки: одинаковые поля сверху и снизу, карточки в ряду одной высоты */
  align-content: center;
  align-items: center;
  padding: calc(82 * var(--u) + 10px) calc(70 * var(--u) + 10px) calc(82 * var(--u) + 10px) calc(66 * var(--u) + 6px);
  scroll-margin-top: 80px;
}
.review-card .avatar { --d: 200; background: var(--color-graphite); }
.review-card__name { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--fs-q) * 0.74); line-height: 1.15; color: var(--color-ink); margin-top: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
.review-card__first { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-body); color: var(--color-ink); line-height: 1.22; }
.review-card__first b { font-weight: 600; color: var(--color-red); display: block; }
.review-card__now { font-size: var(--fs-small); color: var(--color-graphite); min-height: 1.3em; }
.review-card__now.is-changed { color: var(--color-red); }
.review-card__controls { display: flex; gap: calc(15 * var(--u)); margin-top: calc(10 * var(--u)); }
.review-card__body { min-width: 0; }
.review-card__controls .round-btn:last-child { margin-left: auto; }
.review__note { margin-top: calc(-6 * var(--u)); }
.finale { padding-top: calc(100 * var(--u)); }
.finale__title { max-width: calc(963 * var(--u)); }
.finale__text { margin-top: calc(14 * var(--u)); max-width: calc(853 * var(--u)); }
.finale .center-action { margin-top: calc(51 * var(--u)); }

/* ═════════════ Подвал и источники ═════════════ */
.site-footer { border-top: var(--line); padding-top: 28px; padding-bottom: 28px; font-family: var(--font-text); font-size: 18px; color: var(--color-graphite); }
.sources { border-bottom: 1px solid var(--color-red-a45, rgba(192,55,64,.45)); }
.sources__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; }
.sources__summary::-webkit-details-marker { display: none; }
.sources__title { font-family: var(--font-display); font-weight: 400; font-size: 34px; color: var(--color-ink); }
.sources__chevron { width: 14px; height: 14px; border-right: 1.5px solid var(--color-red); border-bottom: 1.5px solid var(--color-red); transform: translateY(-4px) rotate(45deg); transition: transform var(--t) var(--ease); }
.sources[open] .sources__chevron { transform: translateY(3px) rotate(225deg); }
.sources__summary:hover .sources__title { color: var(--color-red); }
.sources__body { padding-bottom: 20px; }
.sources[open] .sources__body { animation: sources-in 0.45s var(--ease) both; }
@keyframes sources-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Веб-кольцо: соседние сайты курса */
.sources__list { max-width: 960px; margin-top: 12px; display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; font-size: 17px; line-height: 1.3; }
.sources__credits { margin-top: 14px; font-size: 16px; font-weight: 400; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; margin-top: 28px; padding-top: 18px; border-top: var(--line); }
.site-footer__name { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--color-red); }
.site-footer__row .text-link { margin-left: auto; font-size: 18px; }
.profiles__help { text-align: center; font-size: var(--fs-small); color: var(--color-graphite); max-width: 36em; margin: 0 auto 6px; font-weight: 400; }
.profiles__done { text-align: center; padding: 24px 0 0; margin: 0 auto; }
/* все анкеты пройдены: подсказка и пустые рамки больше не нужны */
.profiles.is-done .profiles__help, .profiles.is-done .profiles__counter, .profiles.is-done .slider__ghost { display: none; }
.profiles.is-done .slider { grid-template-columns: 1fr; }
.profiles.is-done { padding-bottom: 0; }

/* Низ блока анкет: точки, счётчик и тихая ссылка «пропустить остальные» */
.profiles__progress { display: grid; justify-items: center; gap: 10px; margin-top: calc(48 * var(--u) + 12px); min-height: 3.2em; }
.profiles__count { display: grid; justify-items: center; gap: 8px; font-size: var(--fs-small); color: var(--color-graphite); }
.profiles__count b { color: var(--color-red); font-weight: 600; }
.profiles__dots { display: flex; gap: 10px; }
.progress-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--color-red); transition: background-color var(--t) var(--ease), transform var(--t) var(--ease); }
.progress-dot.is-done { background: var(--color-red); }
.progress-dot.is-current { transform: scale(1.35); }
.profiles__skip-rest {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--color-ink);
  opacity: 0.5;
  padding: 6px 4px;
  border-bottom: 1px solid transparent;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.profiles__skip-rest:hover, .profiles__skip-rest:focus-visible { opacity: 0.9; border-bottom-color: currentColor; }
.profiles.is-done .profiles__progress { display: none; }
.card__actions .btn-plaque.card__confirm { width: min(calc(var(--card-w) * 0.8), 100%); min-width: 0; }
/* Статья: большие текстовые блоки — чуть мельче основного текста */
.observations .body-text, .analysis .body-text { font-size: calc(var(--fs-body) * 0.86); line-height: 1.32; }
.observations .body-text--ink, .analysis .body-text--ink { font-size: calc(var(--fs-body) * 0.92); }

/* Веб-ринг курса — общий блок для всех проектов (Inter, как у остальных сайтов кольца). */
.course-webring { margin-top:64px; padding:24px 0; border-top:1px solid currentColor; font-family:Inter,sans-serif; font-size:16px; line-height:1.5; }
.course-webring h2 { margin:0 0 16px; font-family:Inter,sans-serif; font-size:20px; font-weight:600; line-height:1.3; }
.course-webring__nav { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px 24px; align-items:start; }
.course-webring__nav a { display:flex; align-items:center; min-height:44px; padding:10px 0; box-sizing:border-box; color:inherit; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.course-webring__nav a:last-child { justify-content:flex-end; text-align:right; }
.course-webring__nav a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.course-webring--entry .course-webring__nav { grid-template-columns:1fr 1fr; }