/* 10 Captions, titles, graphics – a centred stage (v12). Laptop (from 1000px): the headline over three columns – the
   thread of requests (a chat on the stage's middle line, right-aligned toward the short, each bubble hugging its
   text, 24px from one reply to the next request; only the requests already sent are drawn, the room of the ones still
   to come is kept, invisible), the big short in the middle of the page, and four other shorts beside it, exactly as
   tall as it. Phone and portrait tablet: one request slot over the stage (each new request replaces the last), three
   thin segments for where we are, then the short with the four others in a column beside it, as tall as it – the
   whole chapter, headline included, fits 390x844 and 375x667 at the natural stop. A new look cuts in under the
   logo's yellow slash, then a yellow ring sweeps the other shorts as each is redone. Request 3 is for the long video:
   a wider slash crosses the whole stage and the graphics clip takes its place in the same box (16:9 on a laptop, a
   1:1 cut with the panel above his head on a phone), so nothing around it moves. */
.c10 .c10-hd { max-width: none; }
.c10 .c10-hd .lead { max-width: 46em; text-wrap: balance; }

/* The big short's height drives the stage: as tall as a laptop screen allows under the headline (fit 1440x820). */
.c10 { --fh: clamp(420px, calc(100svh - var(--head) - 180px), 620px); --sh-gap: 12px; }
.c10-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--s6); margin-top: var(--s5); }

/* The thread: a chat (base .ask-stack), leaning on the short, on the stage's middle line: the room it doesn't fill is
   shared above and below it, never one empty block under the last reply (founder's E10) */
.c10 .c10-thread { grid-column: 1; grid-row: 1; align-self: center; justify-self: end; margin: 0; }
/* a request that wraps (a narrow column at 1000–1299px, a small phone) breaks into even lines, never "… at the / start." */
.c10 .c10-thread .ask-me { text-wrap: balance; }
/* Laptop: only the requests already sent are drawn. One still to come is not drawn at all (no grey "quiet" bubble:
   the founder read those as a message that is not a message), but base keeps its room, invisible, so the thread is its
   final height from the first second and nothing in it or beside it moves as 2 and 3 arrive. */

/* The result: the short, the shelf and (for request 3) the graphics clip, on a subgrid so the short sits in the middle */
.c10-show { grid-column: 2 / 4; grid-row: 1; display: grid; grid-template-columns: subgrid; grid-template-rows: var(--fh); position: relative; }
.c10-steps { display: none; }
.c10-frame { grid-column: 1; grid-row: 1; position: relative; height: var(--fh); aspect-ratio: 9 / 16; }
.c10-frame { border-radius: var(--r-short); overflow: hidden; box-shadow: var(--sh-3); }
.c10-v { position: absolute; inset: 0; opacity: 0; }
.c10-v.is-on { opacity: 1; z-index: 1; }
.c10-shelf { grid-column: 2; grid-row: 1; justify-self: start; display: grid; grid-template-columns: repeat(2, auto); gap: var(--sh-gap); align-content: start; }
.c10-shelf img { display: block; height: calc((var(--fh) - var(--sh-gap)) / 2); width: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-thumb); background: var(--soft-2); box-shadow: var(--sh-2), 0 0 0 0 rgba(232, 180, 0, 0); transition: box-shadow .35s var(--ease), opacity .18s ease; }
/* A new look cuts in under the logo's yellow slash (the page's signature from the long edit, 04) */
.c10-cut { position: absolute; top: -16%; bottom: -16%; left: 0; width: 13%; z-index: 4; pointer-events: none; background: var(--yellow); transform: translateX(-440%) skewX(-19deg); }
.c10-frame.is-cutting .c10-cut { animation: c10-cut .7s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes c10-cut { from { transform: translateX(-440%) skewX(-19deg); } to { transform: translateX(1200%) skewX(-19deg); } }
/* "Redone": a yellow ring sweeps the shelf, one short after another, as each one changes */
.c10-shelf img.is-flip { box-shadow: var(--sh-2), 0 0 0 3px var(--yellow); }
.c10-shelf img.is-swap { opacity: .35; }

/* Request 3: the graphics clip takes the short's and the shelf's place in the same box. The switch is instant, under
   a wider slash that crosses the whole stage (.c10-sweep), so there is never an empty stage or a double exposure. */
.c10-wide { grid-column: 1 / 3; grid-row: 1; align-self: start; display: grid; justify-items: start; visibility: hidden; }
.c10-show[data-look="graphics"] .c10-frame, .c10-show[data-look="graphics"] .c10-shelf { visibility: hidden; }
.c10-show[data-look="graphics"] .c10-wide { visibility: visible; }
.c10-sweep { position: absolute; inset: 0; grid-column: 1 / 3; grid-row: 1; z-index: 6; overflow: hidden; border-radius: var(--r-short); pointer-events: none; container-type: size; visibility: hidden; }
/* (the % lines are for a browser without container units, Safari < 16: the bar's own width, close enough) */
.c10-sweep i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 9%; width: 9cqw; background: var(--yellow); transform: translateX(-500%) skewX(-19deg); transform: translateX(calc(-9cqw - 22cqh)) skewX(-19deg); }
.c10-sweep.is-cutting { visibility: visible; }
.c10-sweep.is-cutting i { animation: c10-sweep .7s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes c10-sweep {
  from { transform: translateX(-500%) skewX(-19deg); transform: translateX(calc(-9cqw - 22cqh)) skewX(-19deg); }
  to { transform: translateX(1500%) skewX(-19deg); transform: translateX(calc(100cqw + 22cqh)) skewX(-19deg); } }

.c10-g { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-media); box-shadow: var(--sh-3); }
.c10-sound { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; font: 600 16px/1 var(--font); color: #fff; background: rgba(17, 18, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 0; border-radius: var(--r-pill); cursor: pointer; transition: background-color .2s; }
.c10-sound:hover { background: rgba(17, 18, 16, .82); }
.c10-sound::after { content: ""; position: absolute; inset: -2px; }   /* 48px to a thumb */
.c10-sound .ico { width: 18px; height: 18px; }
/* While the clip loads or waits for a tap (reduced motion, Low Power Mode) the big play button is the one control in
   sight. The pill stays in the tab order and shows itself when it has keyboard focus (pressed, it plays with sound),
   so focus never lands on a button nobody can see. */
.nc-box.is-loading .c10-sound, .nc-box.needs-tap .c10-sound { opacity: 0; pointer-events: none; }
.nc-box.is-loading .c10-sound:focus-visible, .nc-box.needs-tap .c10-sound:focus-visible { opacity: 1; }
/* What he says, word by word as he says it: the number lands on screen with the word (muted, the cause is still here) */
.c10-said { margin: var(--s3) 0 0; max-width: 40em; font-size: 19px; line-height: 1.5; font-weight: 500; color: #bcb6a8; text-wrap: pretty; }
.c10-said span { transition: color .18s linear; }
.c10-said span.on { color: var(--ink); }
.c10-said span.n { font-weight: 700; }
.c10-said::before { content: "«"; color: var(--ink); }   /* Russian quotes, «ёлочки» (VOICE §5) */
.c10-said::after { content: "»."; color: #bcb6a8; }   /* the stop after the quote, VOICE §5 */
.c10-said.is-all::after { color: var(--ink); }
.c10-wide .again { margin-top: var(--s1); }

@media (max-width: 1299px) and (min-width: 1000px) { .c10-stage { column-gap: var(--s5); } }

/* ---------- Phone and portrait tablet: one slot over the stage, the four others in a column beside the short ---------- */
@media (max-width: 999px) {
  /* --fh the stage's height: as tall as the column's width allows (--hw: the short + the column of four, 9:16 each,
     fill --cw), no taller than the screen under the headline, the lead and the slot at the natural stop (--hv;
     base.js measures --c10-above, the headline's top to the stage's top), and never under ~450px (--hf: a short
     screen keeps a big short; the slot and the stage still share it once the headline has scrolled away).
     --hc: the caption line stays on screen at the natural stop – the shorts' captions sit at 66–69% of their
     height, so a short screen (375x667, 360x640) gets a short just short enough for its caption to land above the
     fold, never under 300px.
     --sqh: request 3's clip is the stage's width and square, or a little wider than tall when his words and the
     replay link need the room (its bottom, his chest, gives way; the panel at its top never does). */
  .c10 { --cw: min(calc(100vw - 2 * var(--gutter)), 560px); --sh-gap: 6px;
    --hw: calc((var(--cw) - 5.5px) * 64 / 45);
    --hv: calc(100svh - var(--head) - var(--c10-above, 314px) - 12px);
    --hf: min(450px, calc(100svh - var(--head) - 150px));
    --hc: max(300px, calc((100svh - var(--head) - var(--c10-above, 314px) - 20px) / 0.7));
    --fh: min(var(--hw), max(var(--hv), min(var(--hf), var(--hc))));
    --sw: calc(var(--fh) * 9 / 16);
    --tw: calc((var(--fh) - 3 * var(--sh-gap)) / 4 * 9 / 16);
    --gap: clamp(8px, calc(var(--cw) - var(--sw) - var(--tw)), var(--gmax, 32px));
    --bw: calc(var(--sw) + var(--gap) + var(--tw));
    --sqh: min(var(--bw), calc(var(--fh) - 132px)); }
  /* the slot and the stage share their edges (a portrait tablet's stage can be narrower than the column) */
  .c10-stage { grid-template-columns: minmax(0, 1fr); width: min(var(--cw), var(--bw)); margin: var(--s4) auto 0; }
  /* the slot: all three requests in one cell; the current one shows, the ones before it step out */
  .c10 .c10-thread { grid-column: 1; grid-row: 1; display: grid; justify-self: stretch; width: auto; gap: 0; margin: 0; }
  .c10 .c10-thread > .ask { grid-area: 1 / 1; align-content: start; max-width: none; width: 100%; transition: opacity .25s var(--ease); }
  .c10 .c10-thread > .ask.is-past { opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
  .c10-show { grid-column: 1; grid-row: 2; grid-template-columns: var(--sw) var(--tw); grid-template-rows: auto var(--fh); column-gap: var(--gap); justify-content: center; margin-top: var(--s2); }
  /* where we are: three thin segments over the stage, like a story */
  .c10-steps { grid-column: 1 / 3; grid-row: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: var(--s2); }
  .c10-steps i { position: relative; display: block; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
  .c10-steps i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
  .c10-steps i.is-now::after { animation: c10-fill var(--d, 4s) linear forwards; }
  .c10-steps i.is-done::after { animation: none; transform: none; }
  .c10-show[data-demo="paused"] .c10-steps i::after { animation-play-state: paused; }
  .c10-frame { grid-column: 1; grid-row: 2; width: var(--sw); }
  .c10-shelf { grid-column: 2; grid-row: 2; grid-template-columns: var(--tw); gap: var(--sh-gap); }
  .c10-shelf img { width: var(--tw); height: auto; }
  /* request 3: the same box (the short, the gap and the column), the square clip at its top */
  .c10-wide { grid-column: 1 / 3; grid-row: 2; width: var(--bw); justify-items: stretch; }
  .c10-g { width: auto; height: var(--sqh); aspect-ratio: auto; background-position: 50% 0; }
  .c10-g video { object-position: 50% 0; }
  .c10-g.nc-box.needs-tap::after, .c10-g.nc-box.is-loading::before { top: 74%; }   /* on him, not on the panel's words */
  .c10-said { justify-self: stretch; max-width: none; font-size: 17px; line-height: 1.45; margin-top: 10px; }
  .c10-wide .again { justify-self: start; margin-top: 0; }
  .c10-sweep { grid-column: 1 / 3; grid-row: 2; }
}
@keyframes c10-fill { to { transform: none; } }
@media (max-width: 719px) { .c10-sound { left: 10px; bottom: 10px; } }
/* Phone: each request takes one line where the column allows it (all three at 375 and up), so the slot is one bubble
   and one reply tall and never holds an empty line for a longer request */
@media (max-width: 719px) {
  .c10 .c10-thread { --ask-w: 36ch; }
  .c10 .c10-thread .ask-me { max-width: min(100%, calc(var(--ask-w) + 2 * var(--ask-px))); }
}
/* A short phone (375x667, or a 390 phone under Safari's bars): at the natural stop the headline, the request and the
   WHOLE stage share the screen (BRIEF §0: a demo taller than the screen is a bug). The lead goes (the reply says it:
   «Готово. Субтитры во всех шортсах.»), as in 05. The stage is exactly what is left under the slot (--hv, floor 280px), and
   it keeps the column's width so no request or reply wraps: the four others stay 9:16 in their column, and the big
   short takes the rest of the width – a 4:5-ish window on the 9:16 short (as a feed shows a reel) that keeps its
   title (9–20% of its height) and its caption (63–69%) and lets the top edge and the hands at the bottom go.
   Request 3: the square clip shows its top four fifths – the whole panel and his face, his chest gives way – and
   his words fit under it on screen; the replay link comes after them, just under the fold (it only appears once
   the clip has ended). The sound pill moves to the right, onto the wall of shorts, off his face. */
@media (max-width: 719px) and (max-height: 760px) {
  .c10 .c10-hd .lead { display: none; }
  .c10 { --fh: min(var(--hw), max(var(--hv), 280px)); --gap: 14px;
    --sw: min(calc(var(--cw) - var(--gap) - var(--tw)), calc(var(--fh) * 0.9));
    --sqh: min(var(--bw), calc(var(--fh) - 80px)); }
  .c10-stage { width: var(--cw); }
  .c10-v { background-position: 50% 12%; }
  .c10-v video { object-position: 50% 12%; }
  .c10-g { background-position: 50% 9%; }
  .c10-g video { object-position: 50% 9%; }
  .c10-sound { left: auto; right: 10px; }
  .c10-g.nc-box.needs-tap::after, .c10-g.nc-box.is-loading::before { top: 82%; left: 32%; }   /* on his face, under the panel, clear of the pill */
}
/* Keep the Russian heading within the narrowest phone column. */
@media (max-width: 389px) { .c10 .c10-hd h2 { font-size: min(36px, calc((100vw - 2 * var(--gutter)) / 9.7)); } }
@media (max-width: 389px) and (max-height: 760px) { .c10 .c10-hd h2 { font-size: min(32px, calc((100vw - 2 * var(--gutter)) / 9.7)); } }
/* A portrait tablet: the words under the square clip can be bigger */
@media (min-width: 720px) and (max-width: 999px) { .c10-said { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .c10-cut, .c10-sweep { display: none; }
  .c10-steps i::after { animation: none !important; transform: none; }
  .c10-said span { color: var(--ink-2); }
}