/* After the first one (#repeat): a careful first version becomes a Skill, and the Skill repeats.
   Without JS or with reduced motion this is a still page: the first episodes, the Skill card, the
   eight episodes it made. repeat.js adds .is-live: the section pins and scroll runs the "print run"
   (the first cards fold into the Skill, then EP04 to EP11 print out of it, each in four languages).
   Below the stage: the five kinds of video that now repeat, with real frames. */

.rt { position: relative; background: var(--dark); color: var(--on-dark); }
.rt-in { padding: clamp(80px, 9vw, 120px) 0 32px; display: grid; gap: 40px; }
.rt-head { max-width: 460px; }
@media (min-width: 1000px) { .rt.is-live .rt-head h2 { font-size: clamp(30px, 2.65vw, 38px); } .rt.is-live .rt-head h2 span { white-space: nowrap; } }
.rt-head h2 { margin: 12px 0 18px; font-family: var(--display); font-size: var(--t-h2); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; color: var(--on-dark); }
.rt-head h2 span { display: block; }
.rt-head h2 span + span { color: var(--signal); }
.rt-say p { margin: 0 0 12px; font-size: var(--t-body); line-height: 1.55; color: var(--on-dark-soft); text-wrap: pretty; }
.rt-say b { display: block; margin-bottom: 2px; color: var(--on-dark); font-weight: 650; }

/* the pieces */
.rt-card { position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: var(--dark-2); box-shadow: 0 18px 40px -22px oklch(0 0 0 / .9); }
.rt-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .1); pointer-events: none; }
.rt-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-card figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 22px 9px 8px; background: linear-gradient(transparent, oklch(0.16 0.01 70 / .92)); font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); white-space: nowrap; }
.rt-card figcaption b { font-weight: 500; color: var(--on-dark); }

.rt-first { display: flex; gap: 14px; }
.rt-first-c { position: relative; width: 150px; }
.rt-vers { position: absolute; left: 50%; top: -34px; translate: -50% 0; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rt-vers li { padding: 5px 8px; border-radius: var(--r-pill); background: var(--dark-2); box-shadow: inset 0 0 0 1px var(--dark-line); font: 500 10.5px/1 var(--mono); color: var(--on-dark-2); transition: background-color .25s, color .25s, opacity .25s; }
.rt-vers li.is-no { opacity: .45; text-decoration: line-through; }
.rt-vers li.is-ok { background: var(--signal); color: var(--ink); box-shadow: none; }

.rt-skill { width: 356px; padding: 20px 22px 18px; border-radius: var(--r-m); background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -30px oklch(0 0 0 / .9); }
.rt-file { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 500 12px/1.2 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.rt-file .ic { flex: none; width: 16px; height: 16px; color: var(--signal-ink); }
.rt-skill ol { margin: 0; padding: 0; list-style: none; counter-reset: rule; display: grid; gap: 9px; }
.rt-skill li { counter-increment: rule; display: grid; grid-template-columns: 22px 1fr; font-size: 14.5px; line-height: 1.4; font-weight: 520; text-wrap: pretty; }
.rt-skill li::before { content: counter(rule, decimal-leading-zero); font: 500 11px/1.9 var(--mono); color: var(--signal-ink); }
.rt-why { margin: 14px 0 0; font-family: var(--display); font-style: italic; font-size: 15px; color: var(--soft); }

.rt-run { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.rt-run-c { position: relative; }
.rt-langs { position: absolute; inset: 0; }
.rt-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; opacity: 0; box-shadow: 0 10px 24px -14px oklch(0 0 0 / .9), inset 0 0 0 1px oklch(1 0 0 / .1); }
.rt-stamp { position: absolute; left: -8px; top: -10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--signal); color: var(--ink); font: 600 12px/1 var(--mono); font-style: normal; rotate: -10deg; box-shadow: 0 6px 14px -6px oklch(0 0 0 / .8); }
.rt-count { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.rt-count b { font-family: var(--display); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; color: var(--signal); font-variant-numeric: tabular-nums; }

/* still page (no JS, reduced motion): everything in reading order */
.rt:not(.is-live) .rt-stage { display: grid; gap: 44px; padding-top: 34px; }

/* live: pinned stage, pieces placed by repeat.js */
.rt.is-live .rt-track { height: 300svh; }
.rt.is-live .rt-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.rt.is-live .rt-in { flex: none; padding-block: 64px 24px; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.rt.is-live .rt-say { display: grid; }
.rt.is-live .rt-say p { grid-area: 1 / 1; opacity: 0; translate: 0 8px; transition: opacity .45s, translate .45s cubic-bezier(.2, .7, .2, 1); }
.rt.is-live .rt-say p.is-on { opacity: 1; translate: 0 0; }
.rt.is-live .rt-stage { position: relative; height: min(74svh, 660px); }
.rt.is-live .rt-first, .rt.is-live .rt-run { display: block; }
.rt.is-live .rt-first-c, .rt.is-live .rt-skill, .rt.is-live .rt-run-c { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.rt.is-live .rt-run-c { width: var(--rt-w, 120px); }
.rt.is-live .rt-first-c { width: var(--rt-w0, 180px); }
.rt.is-live .rt-skill li { transition: opacity .35s, translate .35s; }
.rt.is-live .rt-skill li:not(.is-on) { opacity: 0; translate: 0 6px; }
.rt.is-live .rt-stamp { transition: scale .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.rt.is-live .rt-run-c:not(.is-landed) .rt-stamp { scale: .2; opacity: 0; }
.rt.is-live .rt-l { transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .35s; }
.rt.is-live .rt-run-c.is-landed .rt-l { opacity: .92; }
.rt.is-live .rt-run-c.is-landed .rt-l0 { transform: translate(7px, -9px) rotate(4deg); }
.rt.is-live .rt-run-c.is-landed .rt-l1 { transform: translate(14px, -18px) rotate(8deg); }
.rt.is-live .rt-run-c.is-landed .rt-l2 { transform: translate(21px, -27px) rotate(12deg); }
.rt.is-live .rt-count { position: absolute; left: 0; bottom: 0; opacity: 0; transition: opacity .4s; }
.rt.is-live .rt-count.is-on { opacity: 1; }

@media (max-width: 999px) {
  .rt.is-live .rt-in { grid-template-columns: 1fr; gap: 14px; padding-block: 72px 16px; }
  .rt.is-live .rt-head h2 { font-size: clamp(28px, 7vw, 40px); margin-bottom: 10px; }
  .rt.is-live .rt-say p { font-size: 15px; }
  .rt.is-live .rt-stage { height: min(52svh, 520px); }
  .rt.is-live .rt-skill { width: 316px; padding: 16px 18px 14px; }
  .rt.is-live .rt-skill li { font-size: 13.5px; }
  .rt.is-live .rt-count b { font-size: 34px; }
}
@media (max-width: 999px) and (max-height: 700px) { .rt.is-live .rt-say b { display: inline; } }

/* the five kinds of video on repeat */
.rt-more { padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 8vw, 112px); }
.rt-more-head { max-width: 720px; margin: 0 0 32px; }
.rt-more-head h3 { margin: 0 0 12px; font-family: var(--display); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; color: var(--on-dark); text-wrap: balance; }
.rt-more-head h3 span { display: block; }
.rt-more-head h3 span + span { color: var(--on-dark-2); }
.rt-more-head p { margin: 0; color: var(--on-dark-soft); font-size: var(--t-body); line-height: 1.55; text-wrap: pretty; }
.rt-rows { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.rt-row { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 18px; border-radius: var(--r-l); background: oklch(1 0 0 / .035); box-shadow: inset 0 0 0 1px var(--dark-line); }
.rt-strip { position: relative; height: 210px; display: flex; justify-content: center; align-items: flex-end; }
.rt-strip img { position: relative; flex: none; height: 100%; width: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; outline: 1px solid oklch(1 0 0 / .14); outline-offset: -1px; background: var(--dark-2); box-shadow: 0 16px 30px -16px oklch(0 0 0 / .9); }
.rt-strip img + img { margin-left: -76px; }
.rt-strip img:nth-child(1) { rotate: -6deg; translate: 0 6px; } .rt-strip img:nth-child(3) { rotate: 6deg; translate: 0 6px; }
.rt-strip img:nth-child(2) { z-index: 1; }
.rt-row-wide .rt-strip img { rotate: none; translate: none; }
.rt-row-wide .rt-strip img:first-child { aspect-ratio: 3 / 4; height: 78%; }
.rt-row-wide .rt-strip img:nth-child(2) { aspect-ratio: 16 / 9; height: 40%; margin-left: -70px; align-self: center; }
.rt-row-t h4 { margin: 0 0 4px; font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.rt-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; }
.rt-big b { font-family: var(--display); font-size: clamp(38px, 3.4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--signal); white-space: nowrap; }
.rt-big span { font-size: 17px; font-weight: 600; color: var(--on-dark); }
.rt-row-t small { display: block; font-size: 14px; line-height: 1.4; color: var(--on-dark-soft); text-wrap: pretty; }
@media (max-width: 1100px) { .rt-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rt-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rt-row { padding: 12px 12px 14px; }
  .rt-strip { height: 170px; }
  .rt-strip img + img { margin-left: -58px; }
  .rt-row:last-child { grid-column: 1 / -1; }
}
.rt-total { margin: 32px 0 0; font-size: var(--t-body); line-height: 1.55; color: var(--on-dark-soft); text-wrap: pretty; }
.rt-total b { color: var(--on-dark); }
.rt-total + .rt-total { margin-top: 10px; }
@media (max-width: 760px) {
  .rt:not(.is-live) .rt-run { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rt:not(.is-live) .rt-first-c { width: calc((100% - 28px) / 3); }
  .rt:not(.is-live) .rt-skill { width: 100%; }
}

/* desktop: the headline across the top, the stage uses the full width below it */
@media (min-width: 1000px) {
  .rt.is-live .rt-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100svh; padding-block: 92px 30px; gap: 22px; align-items: stretch; }
  .rt.is-live .rt-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; column-gap: 48px; }
  .rt.is-live .rt-head .eyebrow { grid-column: 1 / -1; }
  .rt.is-live .rt-head h2 { margin: 0; font-size: clamp(38px, 3.7vw, 56px); }
  .rt.is-live .rt-say p { font-size: 18px; }
  .rt.is-live .rt-stage { height: 100%; min-height: 0; }
  .rt.is-live .rt-skill { width: 420px; padding: 24px 26px 22px; }
  .rt.is-live .rt-skill li { font-size: 17px; }
  .rt.is-live .rt-file { font-size: 13.5px; }
  .rt.is-live .rt-count { left: 0; right: auto; bottom: 4px; }
  .rt.is-live .rt-count b { font-size: 72px; }
  .rt.is-live .rt-count span { font-size: 14px; }
  .rt.is-live .rt-card figcaption { font-size: 12px; padding: 30px 12px 10px; }
  .rt.is-live .rt-stamp { width: 44px; height: 44px; font-size: 15px; }
}

/* release previews: the v0.9.3 hook, both cuts side by side, big */
.rt-row-wide .rt-strip img:first-child { aspect-ratio: 3 / 4; height: 100%; rotate: -4deg; }
.rt-row-wide .rt-strip img:nth-child(2) { aspect-ratio: 16 / 9; height: 58%; margin-left: -60px; align-self: flex-end; rotate: 3deg; z-index: 1; }
.rt-row-wide .rt-strip img:first-child { height: 92%; align-self: flex-start; } .rt-row-wide .rt-strip img:nth-child(2) { margin-left: -24px; height: 50%; }

/* keep both release-preview images inside their card */
@media (min-width: 761px) and (max-width: 1100px) { .rt-row-wide { grid-column: span 2; } }
@media (min-width: 1101px) {
  .rt-row-wide .rt-strip img:first-child { height: 72%; }
  .rt-row-wide .rt-strip img:nth-child(2) { height: 38%; margin-left: -56px; }
}