/* ---------- работы: вступление ---------- */
/* высота по содержимому: заголовок сразу под меткой, без пустого экрана сверху */
.work-intro { position: relative; display: grid; grid-template-rows: auto auto; padding: clamp(104px, 15vh, 168px) var(--pad) var(--pad); border-top: 1px solid var(--rule); }
.work-intro .meta { position: absolute; right: var(--pad); top: calc(var(--pad) + 8px); display: grid; gap: 6px; text-align: right; color: var(--soft); }
.work-intro .meta b { color: var(--ink); font-weight: 500; }
.work-intro .label { position: absolute; left: var(--pad); top: calc(var(--pad) + 8px); color: var(--soft); }
.work-intro h2 { font: 800 clamp(72px, 15.5vw, 250px)/.82 var(--font-display); letter-spacing: -.055em; margin-bottom: clamp(20px, 3vw, 44px); }
.work-intro h2 em { display: block; font: italic 400 clamp(64px, 13.4vw, 216px)/.9 var(--font-serif); letter-spacing: -.03em; padding-left: .55em; }
.work-intro h2 em small { font: inherit; color: var(--acc); }
.work-intro .row { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-top: 1px solid var(--rule); padding-top: 16px; }
.work-intro p { max-width: 34ch; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.45; color: var(--soft); }
.cue { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.cue i { width: 34px; height: 1px; background: currentColor; transform-origin: left; animation: cue 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes cue { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* ---------- работы: закреплённая горизонтальная лента ---------- */
.works { position: relative; height: 100svh; overflow: hidden; }
.ghost {
  position: absolute; left: 0; top: 50%; translate: 0 -54%; white-space: nowrap; pointer-events: none;
  font: 800 clamp(160px, 30vw, 480px)/1 var(--font-display); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(22, 20, 18, .3);
}
.ghost em { font: italic 400 1.04em/1 var(--font-serif); letter-spacing: -.02em; -webkit-text-stroke-color: rgba(217, 87, 47, .6); }
.track { position: absolute; inset: 0; display: flex; align-items: center; gap: clamp(36px, 6vw, 110px); padding: 0 var(--pad) 0 calc(var(--pad) * 2); width: max-content; will-change: transform; }
.panel { flex: none; position: relative; transform-origin: 50% 50%; will-change: transform; }   /* наклон от скорости ставит скрипт; свой слой — без перерисовки всей ленты */
.panel.p-intro { width: clamp(240px, 26vw, 420px); }
.p-intro .mono { color: var(--acc); }
.p-intro h3 { font: 700 clamp(34px, 3.6vw, 60px)/.95 var(--font-display); letter-spacing: -.04em; margin: 14px 0 18px; }
.p-intro h3 em { font: italic 400 1.1em/1 var(--font-serif); letter-spacing: -.01em; }
.p-intro p { color: var(--soft); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; max-width: 30ch; }

.frame { position: relative; overflow: hidden; border-radius: 3px; background: #d9d1c2; display: block; }
.tall .frame { height: min(60svh, 640px); aspect-ratio: 4 / 5; }
.wide .frame { height: min(46svh, 470px); aspect-ratio: 16 / 10; }
.panel.up { margin-bottom: 12svh; }
.panel.down { margin-top: 14svh; }
.frame img { position: absolute; top: 0; left: -12%; width: 124%; max-width: none; height: 100%; object-fit: cover; will-change: transform; transition: scale 1.2s var(--ease-out); }
.frame:hover img { scale: 1.04; }
.frame .tag { position: absolute; left: 14px; top: 12px; color: #f4efe6; mix-blend-mode: difference; }
.cap { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline; margin-top: 16px; }
.cap .n { color: var(--acc); }
.cap h3 { font: 600 clamp(19px, 1.8vw, 30px)/1 var(--font-display); letter-spacing: -.03em; text-transform: none; }
.cap h3 em { font: italic 400 1.12em/1 var(--font-serif); letter-spacing: 0; }
.cap .meta { color: var(--soft); }
.panel.p-end { width: clamp(260px, 30vw, 460px); padding-right: 8vw; }
.p-end .mono { color: var(--soft); }
.p-end .big { font: italic 400 clamp(54px, 6vw, 104px)/.9 var(--font-serif); letter-spacing: -.02em; }
.p-end .btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px 20px; border-radius: 99px; background: var(--ink); color: var(--bg); transition: background .3s; }
.p-end .btn:hover { background: var(--acc); }

/* счётчик и прогресс */
.hud { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) * .8); display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 3vw, 40px); align-items: center; z-index: 3; }
.count { display: flex; align-items: baseline; gap: 6px; font: 600 clamp(22px, 2vw, 32px)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.count .roll { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.count .roll span { display: block; line-height: 1; }
.count .of { color: var(--soft); font: 500 clamp(11px, .85vw, 13px)/1 var(--font-mono); }
.bar { height: 1px; background: var(--rule); position: relative; }
.bar i { position: absolute; inset: -.5px 0; background: var(--ink); transform-origin: left; transform: scaleX(0); will-change: transform; }
.bar b { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--acc); left: 0; will-change: transform; }

@media (max-width: 720px) {
  .work-intro { padding-top: calc(var(--pad) + 132px); }   /* метка и meta друг под другом */
  .work-intro .meta { left: var(--pad); right: auto; top: calc(var(--pad) + 40px); text-align: left; }
  .work-intro h2 em { padding-left: .2em; }
  .work-intro .row { flex-direction: column; align-items: start; }
  .tall .frame { height: 50svh; }
  .wide .frame { height: auto; width: 82vw; }
  .panel.up { margin-bottom: 8svh; }
  .panel.down { margin-top: 8svh; }
  .cap { grid-template-columns: auto 1fr; }
  .cap .meta { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cue i { animation: none; transform: scaleX(1); }
}