/* =====================================================================
   ROUND 17 · student reviews (real screenshots)
   ===================================================================== */
.reviews__rail { columns: 3 300px; column-gap: 14px; }
.rev { break-inside: avoid; margin: 0 0 14px; padding: 12px; border-radius: var(--r); background: #FFFFFF; box-shadow: 0 18px 34px -26px rgb(18 18 18 / 0.45); }
.rev__t { margin: 2px 4px 10px; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.22; letter-spacing: -0.02em; color: var(--text); }
.rev__t::before { content: "“"; color: var(--acc); margin-right: 2px; }
.rev img { display: block; width: 100%; height: auto; border-radius: 10px; }
.reviews__note { margin-top: 8px; font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--soft); }
@media (prefers-reduced-motion: no-preference) {
  .rev { opacity: 0; transform: translateY(34px) rotate(calc((var(--i) - 3) * 0.6deg)); transition: opacity 700ms var(--sc-ease-out), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i) * 70ms); }
  .rev.is-in { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  /* a swipeable row on the phone */
  .reviews__rail { columns: auto; display: grid; grid-auto-flow: column; grid-auto-columns: 82vw; gap: 12px; align-items: start;
    overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 16px; scrollbar-width: none; }
  .reviews__rail::-webkit-scrollbar { display: none; }
  .rev { scroll-snap-align: center; margin: 0; transition-delay: 0ms; }
}

.reviews__swipe { display: none; color: var(--acc); }
@media (max-width: 860px) { .reviews__swipe { display: inline; } }

/* Julia at work: a real photo in place of the placeholder */
.julia__work { width: 46%; left: -6%; bottom: 0; rotate: -3deg; padding: 6px 6px 8px; background: #FFFFFF; border-radius: var(--r); box-shadow: 0 24px 40px -24px rgb(18 18 18 / 0.5); }
.julia__work .frame__img { aspect-ratio: 3 / 4; }
.julia__work .frame__img img { height: 100%; margin: 0; object-position: 50% 30%; }
.julia__work figcaption { margin-top: 6px; font-family: var(--sc-font-mono); font-size: 0.68rem; color: var(--soft); }
.julia__photos { padding-bottom: 62%; }
.julia__photo2 { bottom: 34%; }
@media (max-width: 860px) {
  .julia__photos { padding-bottom: 58%; }
  .julia__work { width: 48%; left: 0; }
}

/* video slots: wide 16:9, like the lessons. Desktop: one large, two below. Phone: a swipeable row. */
.videos__row { grid-template-columns: 1fr 1fr; gap: 14px; }
.vclip:first-child { grid-column: 1 / -1; }
.vclip video, .vclip__ph { aspect-ratio: 16 / 9; }
@media (max-width: 860px) {
  .videos__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86vw; }
  .vclip:first-child { grid-column: auto; }
}

@media (min-width: 861px) { .videos__row { max-width: 980px; } }