/* LARSFILM · концепция FINAL CUT: сайт как фильм. Mobile first. */
:root {
  --ink: #0a0a0a;
  --ink-2: #131313;
  --ink-3: #1d1d1d;
  --paper: #f1ece4;
  --mute: #8d877e;
  --line: rgba(241, 236, 228, .14);
  --accent: #ff3b24;
  --sub: #ffd84a;
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gut: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.lf-skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--paper); color: var(--ink); padding: 10px 14px; }
.lf-skip:focus { top: 12px; }
.lf-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lf-section { padding: clamp(88px, 14vw, 180px) var(--gut); position: relative; }
.lf-kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.lf-h2 {
  font: 700 clamp(36px, 7.2vw, 104px)/.95 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.lf-lead { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.35; }

/* ===== Кнопки ===== */
.lf-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 28px; border-radius: 99px;
  font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.lf-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--paper); transform: translateY(101%); transition: transform .6s var(--ease);
}
.lf-btn:hover::before { transform: none; }
.lf-btn:hover { color: var(--ink); }
.lf-btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.lf-btn--light::before { background: var(--accent); }
.lf-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); margin-top: 40px; }
.lf-btn__icon { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.lf-btn--play .lf-btn__icon { border-left-color: var(--accent); }
.lf-btn--play:hover .lf-btn__icon { border-left-color: var(--ink); }

/* ===== Отсчёт плёнки ===== */
.lf-leader { display: none; }
.lf-intro .lf-leader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 150;
  background: #151412; color: var(--paper);
}
.lf-leader__frame { position: relative; width: min(64vmin, 420px); aspect-ratio: 1; display: grid; place-items: center; }
.lf-leader__ring { position: absolute; inset: 0; fill: none; stroke: rgba(241, 236, 228, .5); stroke-width: 1; }
.lf-leader__sweep {
  position: absolute; inset: 8%; border-radius: 50%;
  background: conic-gradient(rgba(241, 236, 228, .22) var(--a, 0deg), transparent 0);
}
.lf-leader__num { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(120px, 34vmin, 240px)/1 var(--display); }
.lf-leader__num span { grid-area: 1 / 1; opacity: 0; }
.lf-leader__meta { position: absolute; bottom: 28px; left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; font: 500 11px var(--mono); letter-spacing: .2em; color: var(--mute); }

/* Леттербокс: шторки открываются после отсчёта */
.lf-bars { position: fixed; inset: 0; z-index: 140; pointer-events: none; display: none; }
.lf-intro .lf-bars { display: block; }
.lf-bars i { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ink); }
.lf-bars i:first-child { top: 0; }
.lf-bars i:last-child { bottom: 0; }

/* Зерно плёнки */
/* Зерно ровно по экрану: фиксированный слой шире экрана на Android раздвигал вьюпорт, и шапка уезжала вправо */
.lf-grain {
  position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; } 20% { background-position: -70px 40px; } 40% { background-position: 60px -90px; }
  60% { background-position: -35px 100px; } 80% { background-position: 90px 35px; } 100% { background-position: 0 0; }
}

/* ===== Курсор по сцене (десктоп): видоискатель, карандаш, плейхед, хлопушка ===== */
.lf-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
  .lf-cursor { display: block; position: fixed; left: 0; top: 0; z-index: 130; width: 0; height: 0; pointer-events: none; color: #fff; }
  .lf-cursor[data-mode="frame"], .lf-cursor[data-mode="pen"] { mix-blend-mode: difference; }
  .lf-cursor > * { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .2s, transform .4s var(--ease); }
  .lf-cursor[data-mode="frame"]:not(.is-label) .cur-frame,
  .lf-cursor[data-mode="pen"]:not(.is-label) .cur-pen,
  .lf-cursor[data-mode="scrub"]:not(.is-label) .cur-scrub,
  .lf-cursor[data-mode="clap"]:not(.is-label) .cur-clap,
  .lf-cursor.is-label .cur-label { opacity: 1; }
  /* видоискатель: уголки кадра 16:9 и точка фокуса */
  .cur-frame {
    width: 46px; height: 30px; margin: -15px 0 0 -23px;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 9px 1.5px, linear-gradient(currentColor, currentColor) 0 0 / 1.5px 9px,
      linear-gradient(currentColor, currentColor) 100% 0 / 9px 1.5px, linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 9px,
      linear-gradient(currentColor, currentColor) 0 100% / 9px 1.5px, linear-gradient(currentColor, currentColor) 0 100% / 1.5px 9px,
      linear-gradient(currentColor, currentColor) 100% 100% / 9px 1.5px, linear-gradient(currentColor, currentColor) 100% 100% / 1.5px 9px;
    background-repeat: no-repeat;
  }
  .cur-frame b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: currentColor; }
  .lf-cursor.is-link .cur-frame { transform: scale(.62); }
  .lf-cursor.is-down .cur-frame { transform: scale(.5); }
  .cur-pen { width: 26px; height: 26px; margin: -24px 0 0 -2px; }
  .lf-cursor.is-down .cur-pen { transform: translate(-2px, 2px) rotate(-6deg); }
  .cur-scrub { width: 1.5px; height: 44px; margin: -22px 0 0 -.75px; background: var(--accent); }
  .cur-scrub::before { content: ""; position: absolute; left: -6px; top: -8px; width: 13px; height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
  .cur-clap { width: 34px; height: 30px; margin: -15px 0 0 -17px; fill: #f1ece4; }
  .cur-clap__top { transform-origin: 3px 10px; transform: rotate(-16deg); transition: transform .12s ease-in; }
  .lf-cursor.is-down .cur-clap__top { transform: none; }
  .cur-label { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); transform: scale(.4); }
  .lf-cursor.is-label .cur-label { transform: none; }
}

/* ===== HUD ===== */
.lf-hud {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 24px; padding: 18px var(--gut);
  transition: transform .6s var(--ease), background .4s;
}
.lf-hud.is-hidden { transform: translateY(-110%); }
.lf-hud.is-solid { background: linear-gradient(rgba(10, 10, 10, .85), rgba(10, 10, 10, 0)); }
.lf-hud__logo { display: block; width: 156px; color: var(--paper); }
/* Телефон: шапка как верхняя панель камеры, плотный фон после hero, бургер светлой кнопкой */
@media (max-width: 959px) {
  .lf-hud { padding: 12px var(--gut); gap: 16px; border-bottom: 1px solid transparent; transition: transform .6s var(--ease), background .4s, border-color .4s; }
  .lf-hud.is-solid { background: rgba(10, 10, 10, .78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); }
  .lf-hud .lf-burger { background: var(--paper); border-color: var(--paper); }
  .lf-hud .lf-burger { color: var(--ink); }
}

/* Логотип «склейка»: при наведении плёнка срастается, при уходе режется снова */
.lf-logo { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.lf-logo__r { transform: translate(30px, -75px); transition: transform .6s var(--ease); }
.lf-logo__cut { stroke: var(--accent); stroke-width: 20; transform-box: fill-box; transform-origin: 50% 0; transition: transform .5s var(--ease), opacity .3s; }
a:hover > .lf-logo .lf-logo__r, a:focus-visible > .lf-logo .lf-logo__r { transform: none; }
a:hover > .lf-logo .lf-logo__cut, a:focus-visible > .lf-logo .lf-logo__cut { transform: scaleY(0); opacity: 0; }
.lf-nav { display: none; margin-left: auto; gap: 30px; }
.lf-nav a { font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; position: relative; padding: 6px 0; }
.lf-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.lf-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.lf-hud__rec { margin-left: auto; display: flex; align-items: center; gap: 8px; font: 500 11px var(--mono); letter-spacing: .2em; }
.lf-hud__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: rec 1.4s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }
/* Бургер это хлопушка: палка приоткрыта, по нажатию хлопает и вместе с планкой складывается в крестик */
.lf-burger { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); }
.lf-burger__ico { position: relative; width: 22px; height: 22px; }
.lf-burger__ico i { position: absolute; left: 0; right: 0; display: block; }
.lf-burger__stick, .lf-burger__bar { height: 5px; transition: transform .35s var(--ease); }
.lf-burger__stick { top: 1px; }
.lf-burger__bar { top: 7px; }
.lf-burger__stick b, .lf-burger__bar { border-radius: 1px; box-shadow: inset 0 0 0 1.4px currentColor; background: repeating-linear-gradient(118deg, currentColor 0 2.6px, transparent 2.6px 5.2px); }
.lf-burger__stick b { display: block; height: 100%; transform-origin: 1px 100%; transform: rotate(-20deg); transition: transform .3s var(--ease) .3s; }
.lf-burger__body { top: 12px; height: 9px; border: 1.4px solid currentColor; border-top: 0; border-radius: 0 0 2px 2px; transition: transform .3s var(--ease) .3s, opacity .3s .3s; }
.lf-burger__body::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3.5px; height: 1.4px; background: currentColor; opacity: .7; }
@media (hover: hover) { .lf-burger:hover .lf-burger__stick b { transform: rotate(-30deg); transition-delay: 0s; } }
.lf-burger[aria-expanded="true"] .lf-burger__stick b { transform: none; transition: transform .14s cubic-bezier(.5, 0, 1, .5); }
.lf-burger[aria-expanded="true"] .lf-burger__stick { transform: translateY(7.5px) rotate(45deg); transition-delay: .16s; }
.lf-burger[aria-expanded="true"] .lf-burger__bar { transform: translateY(1.5px) rotate(-45deg); transition-delay: .16s; }
.lf-burger[aria-expanded="true"] .lf-burger__body { transform: scaleY(0); transform-origin: top; opacity: 0; transition-delay: .12s; }

.lf-tc { transition: opacity .4s; position: fixed; z-index: 100; left: var(--gut); bottom: 18px; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--paper); mix-blend-mode: difference; display: none; }
.lf-tc span { color: var(--mute); }
.lf-progress { position: fixed; z-index: 101; left: 0; right: 0; top: 0; height: 2px; }
.lf-progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.lf-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; padding: 100px var(--gut) 40px;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); visibility: hidden;
}
.lf-menu.is-open { clip-path: inset(0); visibility: visible; }
.lf-menu nav { display: grid; gap: 4px; }
.lf-menu nav a { font: 700 clamp(40px, 13vw, 84px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.03em; display: flex; align-items: flex-start; gap: 12px; }
.lf-menu small { font: 500 12px var(--mono); color: var(--accent); padding-top: 10px; }
.lf-menu p { margin-top: 40px; font: 500 13px/1.8 var(--mono); color: var(--mute); }

@media (min-width: 960px) {
  .lf-nav { display: flex; }
  .lf-hud__rec { margin-left: 18px; }
  .lf-burger { display: none; }
  .lf-tc { display: block; }
  .lf-hud__logo { width: 160px; }
}

/* ===== HERO ===== */
.lf-hero { position: relative; height: 100svh; min-height: 560px; }
.lf-hero__screen { position: absolute; inset: 0; overflow: hidden; background: #000; will-change: clip-path; }
.lf-hero__media { position: absolute; inset: 0; }
.lf-hero__poster, .lf-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-hero__video { opacity: 0; transition: opacity .35s; pointer-events: none; overflow: hidden; }
.lf-hero__video.is-ready { opacity: 1; }
.lf-hero__shade { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.15), rgba(0,0,0,.75)), linear-gradient(rgba(0,0,0,.45), transparent 30%, transparent 55%, rgba(0,0,0,.85)); }
.lf-corners i { position: absolute; width: 28px; height: 28px; border: 1.5px solid rgba(241, 236, 228, .8); }
.lf-corners i:nth-child(1) { left: var(--gut); top: 84px; border-right: 0; border-bottom: 0; }
.lf-corners i:nth-child(2) { right: var(--gut); top: 84px; border-left: 0; border-bottom: 0; }
.lf-corners i:nth-child(3) { left: var(--gut); bottom: 28px; border-right: 0; border-top: 0; }
.lf-corners i:nth-child(4) { right: var(--gut); bottom: 28px; border-left: 0; border-top: 0; }
.lf-hero__meta { position: absolute; top: 96px; left: calc(var(--gut) + 40px); right: calc(var(--gut) + 40px); display: flex; justify-content: space-between; color: rgba(241, 236, 228, .75); }
.lf-hero__meta span:first-child { display: none; }
.lf-hero__content { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(80px, 12vh, 130px); }
.lf-hero__title {
  font: 800 min(calc((100vw - 2 * var(--gut)) / 6.4), 300px)/.82 var(--display); letter-spacing: -.055em;
  margin: 14px 0 22px -.04em; position: relative;
}
.lf-ch { display: inline-block; }
/* Склейка в hero: без JS слой A это обычная надпись, остальное скрыто */
.lf-cut { display: flex; overflow: hidden; padding-bottom: .04em; }
.lf-cut--b, .lf-cut__line { display: none; }
.lf-hero__title.is-split .lf-cut { overflow: visible; clip-path: var(--clip); }
.lf-hero__title.is-split .lf-cut--a { --clip: var(--clip-a); }
.lf-hero__title.is-split .lf-cut--b { --clip: var(--clip-b); display: flex; position: absolute; left: 0; top: 0; transform: translate(.03em, -.075em); }
.lf-hero__title.is-split .lf-cut__line { display: block; position: absolute; width: .022em; background: var(--accent); transform: rotate(15deg); transform-origin: 50% 0; pointer-events: none; }
.lf-hero__title.is-healed .lf-cut--b { transform: none; }
.lf-hero__title.is-healed .lf-cut__line { transform: rotate(15deg) scaleY(0); }
.lf-hero__title.is-cutting .lf-cut--b { transition: transform .55s cubic-bezier(.3, 1.9, .5, 1) .18s; }
.lf-hero__title.is-cutting .lf-cut__line { transition: transform .28s cubic-bezier(.7, 0, .3, 1); }
.lf-hero__flash { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; mix-blend-mode: overlay; }
.lf-hero__flash.is-on { animation: cutFlash .7s ease-out .2s; }
@keyframes cutFlash { 0% { opacity: 0; } 12% { opacity: .55; } 100% { opacity: 0; } }
.lf-hero__rotator { position: relative; height: 1.4em; font: 400 clamp(18px, 2.2vw, 30px)/1.4 var(--body); overflow: hidden; margin-bottom: 28px; }
.lf-hero__rotator span { position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(110%); transition: transform .9s var(--ease); }
.lf-hero__rotator span.is-on { transform: none; }
.lf-hero__rotator span.is-out { transform: translateY(-110%); }
.lf-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.lf-hero__scroll { position: absolute; right: calc(var(--gut) + 40px); bottom: 40px; display: none; align-items: center; gap: 12px; }
.lf-hero__scroll i { width: 1px; height: 44px; background: var(--paper); transform-origin: top; animation: drop 2s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 768px) {
  .lf-hero__meta span:first-child { display: inline; }
  .lf-hero__scroll { display: flex; }
}

/* ===== Плеер ===== */


/* ======================================================================
   Ниже hero: кинопроизводство «на ощупь». Титры, сценарий, монтажный стол,
   световой стол с контактным листом, хлопушка, финальные титры.
   ====================================================================== */
:root {
  --trajan: "Forum", "Times New Roman", serif;
  --type: "Courier Prime", "PT Mono", "Courier New", monospace;
  --hand: "Caveat", "Segoe Print", cursive;
  --grease: #d42a1e;
}

/* ===== 2. Сценарий на столе ===== */
.lf-desk {
  position: relative; z-index: 2; padding: clamp(80px, 11vw, 150px) var(--gut);
  background: radial-gradient(70% 55% at 50% 30%, #2a221a, #120f0c 75%);
}
.lf-page {
  position: relative; max-width: 860px; margin: 0 auto; background: #fbf9f2; color: #161412;
  font: 400 clamp(15px, 1.2vw, 17px)/1.62 var(--type);
  padding: clamp(60px, 8vw, 100px) clamp(20px, 8vw, 100px) clamp(60px, 8vw, 100px) clamp(34px, 10vw, 130px);
  box-shadow: 0 50px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .04);
  transform: rotate(-.35deg);
}
.lf-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(120, 100, 60, .08)); }
.lf-page__brad { position: absolute; left: clamp(12px, 3vw, 34px); width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3d68b, #a07a2c 70%); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.lf-page__brad:first-of-type { top: 18%; }
.lf-page__brad:nth-of-type(2) { bottom: 18%; }
.lf-page__num { position: absolute; top: clamp(24px, 4vw, 44px); right: clamp(20px, 5vw, 60px); }
.lf-page__draft { position: absolute; top: clamp(24px, 4vw, 44px); left: clamp(34px, 10vw, 130px); font-size: 11px; color: #9b958a; text-transform: uppercase; letter-spacing: .08em; }
.lf-trans { text-align: right; margin: 2.4em 0 1.4em; }
.lf-trans--left { text-align: left; margin-top: 0; }
.lf-slug { display: flex; justify-content: space-between; gap: 1em; font-weight: 700; text-transform: uppercase; margin: 0 0 1.3em; scroll-margin-top: 90px; }
.lf-slug span { color: #8f897f; font-weight: 400; }
.lf-titlecard { font: 700 clamp(21px, 2.5vw, 32px)/1.3 var(--type); text-transform: uppercase; text-align: center; margin: 1.4em auto 1.6em; max-width: 19em; }
.lf-action { margin: 0 0 1.15em; }
.t-rest { color: transparent; }
.t-caret { display: inline-block; width: .55em; height: 1.05em; margin: 0 -.55em -.15em 0; background: #161412; animation: rec 1s steps(2) infinite; }
.lf-supers { list-style: none; margin: 1.8em 0 0; padding: 0; display: grid; gap: .5em; }
.lf-supers__k { color: #8f897f; }
.lf-supers mark {
  color: inherit; font-weight: 700; font-size: 1.35em; padding: 0 .2em;
  background: linear-gradient(100deg, rgba(255, 222, 70, 0) 0, rgba(255, 222, 70, .85) 4%, rgba(255, 216, 60, .8) 96%, rgba(255, 222, 70, 0)) no-repeat 0 62% / var(--m, 100%) 72%;
}
.js .lf-supers mark { --m: 0%; }
.lf-dlg { position: relative; margin: 2.4em 0; }
.lf-dlg__char { margin: 0 0 0 30%; font-weight: 700; }
.lf-dlg__paren { margin: 0 0 0 24%; color: #4a4640; }
.lf-dlg__line { margin: 0 6% 0 14%; }
.lf-headshot {
  float: right; width: clamp(96px, 26vw, 120px); margin: 0 0 14px 14px; position: relative;
  background: #fff; padding: 6px 6px 26px; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); transform: rotate(var(--r));
}
.lf-headshot img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; filter: grayscale(1) contrast(1.05); }
.lf-headshot figcaption { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 700 20px/1 var(--hand); color: #1d2c72; }
.lf-headshot__clip { position: absolute; top: -16px; left: 16px; width: 13px; height: 42px; border: 2.5px solid #9ea3aa; border-radius: 8px; z-index: 2; }
.lf-headshot__clip::after { content: ""; position: absolute; inset: 5px 2px 9px; border: 2px solid #b9bdc3; border-radius: 6px; }
@media (min-width: 1100px) {
  .lf-headshot { float: none; position: absolute; right: -230px; top: -10px; width: 180px; margin: 0; padding: 9px 9px 36px; }
  .lf-headshot figcaption { font-size: 26px; bottom: 4px; }
  .lf-dlg:nth-of-type(2) .lf-headshot { right: auto; left: -250px; }
  .lf-dlg__line { margin: 0 14% 0 18%; }
  .lf-dlg__char { margin-left: 38%; }
  .lf-dlg__paren { margin-left: 32%; }
}
@media (max-width: 600px) {
  .lf-dlg__char, .lf-dlg__paren { margin-left: 0; }
  .lf-dlg__line { margin: 0; }
  .lf-page__draft { display: none; }
}

/* ===== 3. Монтажный стол ===== */
.lf-edit { position: relative; z-index: 2; background: #0e0e10; color: #d6d6da; --clipw: clamp(150px, 20vw, 290px); --ph: 32%; }
.lf-edit__pin { height: 100svh; display: flex; flex-direction: column; padding-top: 80px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
@media (pointer: fine) { .lf-edit__pin { cursor: grab; } .lf-edit__pin:active { cursor: grabbing; } }
/* Транспорт монтажки: кнопки ◀ ▶ и подсказка, что работы листаются вбок */
.lf-edit__nav { display: flex; align-items: center; gap: 4px; flex: none; }
.lf-edit__nav button { width: 30px; height: 22px; display: grid; place-items: center; border-radius: 3px; background: #26262b; color: #fff; font-size: 9px; transition: background .2s, opacity .2s; }
.lf-edit__nav button:hover { background: var(--accent); }
.lf-edit__nav button:disabled { opacity: .3; pointer-events: none; }
.lf-edit__nav em { font-style: normal; padding: 0 6px; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; animation: rec 1.4s steps(2) infinite; }
.lf-edit.is-touched .lf-edit__nav em { animation: none; color: #77777f; }
@media (pointer: fine) { .lf-edit__nav em { font-size: 0; } .lf-edit__nav em::after { content: "drag"; font-size: 10.5px; } }
.lf-edit__bar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 32px; padding: 0 var(--gut); background: #19191c; border-block: 1px solid #28282c; font: 400 10.5px var(--mono); color: #9a9aa2; white-space: nowrap; overflow: hidden; }
.lf-edit__file { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; }
.lf-edit__file i { width: 9px; height: 9px; border-radius: 2px; background: #8b7bff; flex: none; }
.lf-edit__seq b { color: #fff; font-weight: 500; }
.lf-monitor { flex: 1; min-height: 0; display: grid; place-items: center; padding: clamp(10px, 2vh, 22px) var(--gut); background: #0a0a0b; }
.lf-monitor__screen { position: relative; display: block; height: 100%; max-height: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; box-shadow: 0 0 0 1px #2a2a2e; }
.lf-monitor__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.lf-monitor__img.is-on { opacity: 1; animation: kenburns 9s ease-out both, flicker .12s steps(2) infinite; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes flicker { 50% { filter: brightness(1.06); } }
.lf-monitor__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.lf-monitor__vid.is-on { opacity: 1; }
.lf-monitor__burn { position: absolute; z-index: 1; font: 500 clamp(9px, .85vw, 12px)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); max-width: 60%; }
.lf-monitor__burn--tl { top: 12px; left: 14px; }
.lf-monitor__burn--tr { top: 12px; right: 14px; text-align: right; }
.lf-monitor__burn--bl { bottom: 12px; left: 14px; }
.lf-monitor__burn--br { bottom: 12px; right: 14px; color: var(--accent); }
.lf-tl { flex: none; display: flex; height: clamp(116px, 20vh, 170px); background: #151517; border-top: 1px solid #2a2a2e; }
.lf-tl__heads { flex: none; width: 46px; display: grid; grid-template-rows: 24px 1fr 36%; background: #1c1c1f; border-right: 1px solid #2a2a2e; }
.lf-tl__heads span { display: grid; place-items: center; font: 500 9.5px var(--mono); color: #8c8c94; border-bottom: 1px solid #26262a; }
.lf-tl__view { flex: 1; position: relative; overflow: hidden; }
.lf-tl__track { position: absolute; top: 0; bottom: 0; left: 0; display: grid; grid-template-rows: 24px 1fr 36%; width: max-content; will-change: transform; }
.lf-tl__ruler { position: relative; border-bottom: 1px solid #26262a; background: repeating-linear-gradient(90deg, #45454b 0 1px, transparent 1px 12px) bottom / 100% 6px no-repeat; }
.lf-tl__ruler span { position: absolute; top: 4px; font: 400 9px var(--mono); color: #77777f; transform: translateX(3px); }
.lf-tl__ruler span::before { content: ""; position: absolute; left: -3px; top: -4px; height: 24px; width: 1px; background: #55555c; }
.lf-tl__row { position: relative; display: flex; gap: 2px; padding: 4px 0; border-bottom: 1px solid #222226; }
.lf-clip {
  position: relative; flex: none; width: calc(var(--w) * var(--clipw)); border-radius: 3px; overflow: hidden;
  background: #3f3794; border: 1px solid #6c60d6; color: #fff; transition: border-color .2s, background .2s;
}
.lf-clip::before { content: ""; position: absolute; inset: 18px 0 15px; background: var(--img) repeat-x left center / auto 100%; opacity: .6; }
.lf-clip.is-active { border-color: #fff; background: #5a4fd0; }
.lf-clip__name { position: absolute; top: 3px; left: 6px; right: 6px; font: 600 10.5px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-clip__meta { position: absolute; bottom: 2px; left: 6px; right: 6px; font: 400 8.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #cfcaff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-tl__row--a { padding: 3px 0; }
.lf-tl__row--a svg { display: block; width: 100%; height: 100%; background: #163a26; border: 1px solid #2f8a57; border-radius: 3px; }
.lf-tl__row--a path { fill: #48d48a; }
.lf-tl__playhead { position: absolute; top: 0; bottom: 0; left: var(--ph); width: 1px; background: var(--accent); z-index: 3; pointer-events: none; }
.lf-tl__playhead i { position: absolute; top: 0; left: -6px; width: 13px; height: 16px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
@media (min-width: 900px) { .lf-edit { --ph: 50%; } .lf-tl__heads { width: 60px; } }
.no-js .lf-tl__view { overflow-x: auto; }
.no-js .lf-tl__track { position: relative; height: 100%; }

/* ===== 4. Световой стол ===== */
.lf-table {
  position: relative; z-index: 2; color: #171513; padding: clamp(90px, 12vw, 160px) var(--gut);
  background:
    linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px) 0 0 / 48px 100%,
    radial-gradient(80% 60% at 50% 40%, #fffef9, #e6e1d6 80%);
}
.lf-table__head { max-width: 980px; }
.lf-table__kick { font: 700 clamp(24px, 2.4vw, 32px)/1 var(--hand); color: var(--grease); transform: rotate(-3deg); display: inline-block; margin-bottom: 14px; }
.lf-table__title { font: 400 clamp(36px, 5.6vw, 86px)/1.02 var(--trajan); text-transform: uppercase; letter-spacing: .02em; }
.lf-table__text { margin-top: 26px; max-width: 36em; font-size: clamp(17px, 1.4vw, 20px); color: #3d3934; }
.lf-sheet { position: relative; max-width: 1180px; margin: clamp(56px, 7vw, 96px) auto 0; }
.lf-sheet__paper { background: #fdfcf8; padding: clamp(14px, 2.6vw, 36px) clamp(10px, 2.6vw, 36px); box-shadow: 0 30px 70px rgba(70, 55, 30, .2), 0 1px 0 rgba(0,0,0,.05); transform: rotate(.5deg); display: grid; gap: clamp(36px, 4vw, 52px); }
.lf-neg { position: relative; background: #121010; padding: 26px clamp(8px, 1.4vw, 18px) 30px; }
.lf-neg::before, .lf-neg::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 9px, #34302c 9px 19px); }
.lf-neg::before { top: 7px; }
.lf-neg::after { bottom: 7px; }
.lf-neg__edge { position: absolute; top: -16px; left: 4px; right: 4px; font: 500 9px var(--mono); letter-spacing: .22em; color: #e07d24; white-space: nowrap; overflow: hidden; }
.lf-neg__frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1vw, 12px); }
.lf-neg__frame { position: relative; display: block; aspect-ratio: 3 / 2; background: #000; }
.lf-neg__frame img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.9); transition: filter .4s; }
.lf-neg__frame:hover img { filter: contrast(1.1) saturate(1.1) brightness(1.08); }
.lf-neg__n { position: absolute; left: 3px; bottom: -21px; font: 500 9px var(--mono); color: #e07d24; letter-spacing: .1em; }
.lf-grease { position: absolute; left: -9%; top: -14%; width: 118%; height: 128%; overflow: visible; pointer-events: none; z-index: 2; }
.lf-grease path { fill: none; stroke: var(--grease); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .92; }
.lf-neg__note { position: absolute; z-index: 3; right: -2%; top: -34px; font: 700 clamp(17px, 1.9vw, 27px)/1 var(--hand); color: var(--grease); transform: rotate(-4deg); white-space: nowrap; text-shadow: 0 0 6px #fdfcf8, 0 0 2px #fdfcf8; }
.lf-loupe { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lf-loupe {
    display: block; position: absolute; z-index: 5; left: 0; top: 0; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; overflow: hidden; pointer-events: none;
    box-shadow: 0 0 0 7px #1b1a19, 0 0 0 9px #6b6660, 0 24px 50px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ease); background: #fdfcf8;
  }
  .lf-loupe.is-on { opacity: 1; transform: none; }
  .lf-loupe__in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .lf-sheet[data-loupe] .lf-neg__frame { cursor: none; }
}
.lf-cards { max-width: 1180px; margin: clamp(80px, 10vw, 130px) auto 0; display: grid; gap: 30px; }
.lf-cards__title { font: 400 clamp(34px, 4.6vw, 68px)/1 var(--trajan); text-transform: uppercase; }
.lf-card {
  position: relative; background: #fff; padding: 30px 24px 26px; transform: rotate(var(--r)); box-shadow: 0 14px 30px rgba(60, 45, 20, .16);
  background-image: linear-gradient(transparent 46px, #e66 46px, #e66 47px, transparent 47px), repeating-linear-gradient(transparent 0 27px, #c7d9ee 27px 28px);
  background-position: 0 0, 0 47px;
}
.lf-card__n { font: 700 30px/1 var(--hand); color: var(--grease); position: absolute; top: 10px; right: 18px; }
.lf-card h3 { font: 700 clamp(28px, 2.6vw, 36px)/28px var(--hand); color: #1d2c72; padding-top: 2px; margin-bottom: 26px; padding-right: 34px; }
.lf-card p { font: 400 14.5px/28px var(--type); color: #2b2824; }
@media (min-width: 900px) {
  .lf-cards { grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
  .lf-cards__title { grid-column: 1 / -1; }
  .lf-card:nth-of-type(2) { margin-top: 40px; }
  .lf-card:nth-of-type(3) { margin-top: 12px; }
}
@media (max-width: 640px) {
  .lf-neg__frames { grid-template-columns: 1fr 1fr; }
  .lf-neg__frame:nth-child(3) { display: none; }
  .lf-neg__note { right: -4px; }
  .lf-neg__edge { display: none; }
}

/* ===== 5. Хлопушка ===== */
.lf-slatebox { position: relative; z-index: 2; background: var(--ink); padding: clamp(100px, 13vw, 170px) var(--gut) clamp(80px, 10vw, 130px); display: grid; justify-items: center; text-align: center; }
.lf-slatebox__kick { font: 400 clamp(14px, 1.3vw, 18px) var(--trajan); letter-spacing: .4em; text-transform: uppercase; color: var(--mute); }
.lf-clap { position: relative; width: min(100%, 780px); margin-top: calc(min(100vw - 2 * var(--gut), 780px) * .36); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lf-clap__stick, .lf-clap__stripes { background: repeating-linear-gradient(-58deg, #f1ece4 0 clamp(22px, 3.4vw, 36px), #121212 0 clamp(44px, 6.8vw, 72px)); }
.lf-clap__stick { position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(34px, 5.4vw, 56px); border-radius: 6px 6px 0 0; transform-origin: 14px 100%; transform: rotate(-20deg); box-shadow: 0 -6px 20px rgba(0,0,0,.4); }
.lf-clap__hinge { position: absolute; left: 6px; top: -12px; width: 18px; height: 18px; border-radius: 50%; background: #9aa0a6; box-shadow: inset 0 0 0 4px #6c7177; z-index: 2; }
.lf-clap__board { background: #151515; border-radius: 0 0 12px 12px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, .6); }
.lf-clap__stripes { height: clamp(34px, 5.4vw, 56px); background-image: repeating-linear-gradient(58deg, #f1ece4 0 clamp(22px, 3.4vw, 36px), #121212 0 clamp(44px, 6.8vw, 72px)); }
.lf-clap__grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px; gap: 0; }
.lf-clap__cell { border: 1px solid rgba(241, 236, 228, .5); margin: -1px 0 0 -1px; padding: 10px 12px 12px; min-width: 0; }
.lf-clap__cell--wide { grid-column: 1 / -1; }
.lf-clap__cell small { display: block; font: 600 9.5px var(--body); letter-spacing: .2em; text-transform: uppercase; color: #a9a39a; }
.lf-clap__cell b, .lf-clap__cell a { display: block; font: 700 clamp(19px, 3.2vw, 40px)/1.1 var(--hand); color: #fdfbf6; text-shadow: 0 0 1px rgba(255,255,255,.6); overflow-wrap: break-word; }
.lf-clap__cell a:hover { color: var(--sub); }
.lf-slatebox__cta { margin-top: clamp(56px, 7vw, 90px); display: grid; gap: 24px; justify-items: center; }
.lf-action-btn { font: 400 clamp(46px, 8.4vw, 124px)/1 var(--trajan); text-transform: uppercase; letter-spacing: .03em; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 3px; transition: background-size .6s var(--ease), color .4s; padding-bottom: .08em; }
.lf-action-btn:hover { background-size: 100% 3px; color: var(--accent); }
.lf-action-btn span { font-family: var(--body); font-size: .5em; vertical-align: .4em; }
.lf-slatebox__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font: 400 13px var(--trajan); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.lf-slatebox__socials a:hover { color: var(--paper); }

/* ===== 6. Финальные титры ===== */
.lf-end { position: relative; z-index: 2; background: #000; }
.lf-roll { position: relative; height: 80svh; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.lf-roll__in { position: absolute; left: var(--gut); right: var(--gut); top: 36%; display: grid; gap: 52px; text-align: center; animation: roll 42s linear infinite; animation-play-state: paused; }
.lf-roll.is-on .lf-roll__in { animation-play-state: running; }
@keyframes roll { to { transform: translateY(calc(-100% - 30svh)); } }
.lf-roll p { font: 400 clamp(20px, 2.2vw, 30px)/1.35 var(--trajan); text-transform: uppercase; letter-spacing: .06em; }
.lf-roll small { display: block; font: 500 11px var(--body); letter-spacing: .32em; color: var(--mute); margin-bottom: 10px; }
.lf-roll__logo { width: clamp(240px, 44vw, 600px); margin: 0 auto; color: var(--paper); }
.lf-roll__fin { font-style: italic; text-transform: none !important; font-family: var(--body) !important; color: var(--mute); }
.lf-end__bar { display: flex; justify-content: space-between; gap: 16px; padding: 20px var(--gut) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.lf-end__bar a:hover { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .lf-grain { display: none; }
  .lf-roll { height: auto; -webkit-mask: none; mask: none; padding: 80px 0; }
  .lf-roll__in { position: static; }
  .js .lf-supers mark { --m: 100%; }
}
.loupe-on .lf-cursor { opacity: 0; }
.lf-scr[open] ~ .lf-cursor, html:has(.lf-scr[open]) .lf-cursor { opacity: 0; }
html:has(.lf-scr[open]), html:has(.lf-scr[open]) a, html:has(.lf-scr[open]) button { cursor: auto; }
.lf-tc.is-off, .in-edit .lf-tc { opacity: 0; }

/* ===== Кинозал: попап с видео ===== */
@property --sw { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html:has(.lf-scr[open]) { overflow: hidden; }
.lf-scr {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #050505; color: var(--paper); overflow: hidden;
}
.lf-scr[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.lf-scr::backdrop { background: transparent; }
.lf-scr > :not(.lf-scr__amb) { position: relative; }
.lf-scr kbd { font: 500 10px var(--mono); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--mute); }
/* «эмбилайт»: свечение цветами текущего ролика за экраном */
.lf-scr__amb { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lf-scr__amb img { position: absolute; left: 50%; top: 48%; width: 78%; height: 66%; transform: translate(-50%, -50%); object-fit: cover; filter: blur(90px) saturate(1.8); opacity: .55; }
.lf-scr__amb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 65% at 50% 48%, transparent 30%, #050505 88%); }
.lf-scr__top { display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; padding: 18px var(--gut) 12px; }
.lf-scr__now { display: flex; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.lf-scr__now i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: rec 1.4s steps(2) infinite; }
.lf-scr__now b { color: var(--paper); font-weight: 500; }
.lf-scr__head { grid-column: 1 / -1; grid-row: 2; }
.lf-scr__title { font: 400 clamp(26px, 3.4vw, 50px)/1.02 var(--trajan); text-transform: uppercase; letter-spacing: .03em; }
.lf-scr__meta { margin-top: 8px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.lf-scr__close { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 16px; border: 1px solid var(--line); border-radius: 99px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; transition: background .3s, color .3s; }
.lf-scr__close:hover { background: var(--paper); color: var(--ink); }
.lf-scr__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 2vw, 32px); padding: 6px var(--gut); min-height: 0; }
.lf-scr__screen {
  position: relative; width: min(calc(100vw - 2 * var(--gut) - 380px), calc((100dvh - 330px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 140px rgba(0, 0, 0, .85);
}
.lf-scr__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.lf-scr__frame iframe, .lf-scr__frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.lf-scr.is-live .lf-scr__frame { opacity: 1; }
/* загрузка: тот же плёночный отсчёт, что в прелоадере */
.lf-scr__load { position: absolute; inset: 0; display: grid; place-items: center; background: #151412; transition: opacity .5s; }
.lf-scr.is-live .lf-scr__load { opacity: 0; pointer-events: none; }
.lf-scr__load svg { position: absolute; height: 64%; aspect-ratio: 1; fill: none; stroke: rgba(241, 236, 228, .4); stroke-width: 1; }
.lf-scr__sweep { position: absolute; height: 54%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(rgba(241, 236, 228, .22) var(--sw), transparent 0); animation: sweep .7s linear infinite; }
@keyframes sweep { to { --sw: 360deg; } }
.lf-scr__load b { position: relative; font: 900 clamp(56px, 9vw, 140px)/1 var(--display); }
.lf-scr__nav { display: flex; align-items: center; gap: 14px; color: var(--paper); text-align: left; justify-self: start; max-width: 180px; }
.lf-scr__nav--next { justify-self: end; text-align: right; }
.lf-scr__nav span { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 20px; transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease); }
.lf-scr__nav:hover span { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.lf-scr__nav:hover:not(.lf-scr__nav--next) span { transform: translateX(-4px); }
.lf-scr__nav--next:hover span { transform: translateX(4px); }
.lf-scr__nav small { font: 500 10px/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.lf-scr__bar { display: flex; justify-content: center; align-items: center; gap: 32px; padding: 14px var(--gut) 12px; }
.lf-scr__ext { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid var(--accent); }
.lf-scr__ext:hover { color: var(--accent); }
.lf-scr__keys { display: flex; align-items: center; gap: 6px; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
/* лента всех роликов: плёнка с перфорацией */
.lf-scr__strip {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 20px var(--gut) calc(20px + env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(90deg, #2c2925 0 10px, transparent 10px 20px) left 6px top 6px / 100% 7px no-repeat local,
    repeating-linear-gradient(90deg, #2c2925 0 10px, transparent 10px 20px) left 6px bottom 6px / 100% 7px no-repeat local,
    #0e0d0c;
}
.lf-scr__strip::-webkit-scrollbar { display: none; }
.lf-scr__thumb { position: relative; flex: none; width: 136px; text-align: left; opacity: .45; transition: opacity .3s; }
.lf-scr__thumb:hover, .lf-scr__thumb.is-on { opacity: 1; }
.lf-scr__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .3s; }
.lf-scr__thumb.is-on img { outline-color: var(--accent); }
.lf-scr__thumb span { position: absolute; top: 4px; left: 6px; font: 500 9px var(--mono); color: #fff; text-shadow: 0 1px 3px #000; }
.lf-scr__thumb small { display: block; margin-top: 6px; font: 500 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-scr__thumb.is-on small { color: var(--paper); }
@media (max-width: 860px) {
  .lf-scr__stage { grid-template-columns: 1fr 1fr; grid-template-areas: "s s" "p n"; gap: 18px 10px; padding: 6px 0; align-content: center; }
  .lf-scr__screen { grid-area: s; width: 100%; }
  .lf-scr__nav { grid-area: p; padding-left: var(--gut); }
  .lf-scr__nav--next { grid-area: n; padding: 0 var(--gut) 0 0; }
  .lf-scr__nav span { width: 48px; height: 48px; }
  .lf-scr__keys { display: none; }
  .lf-scr__thumb { width: 104px; }
}

/* ===== Склейки между сценами и прожог плёнки ===== */
.lf-splice {
  position: relative; z-index: 3; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gut);
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, #3a3530 14px 24px) left 0 top 5px / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, #3a3530 14px 24px) left 0 bottom 5px / 100% 6px no-repeat,
    #0b0a09;
  font: 500 9px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #e07d24; overflow: hidden;
}
.lf-splice b { font-weight: 500; color: rgba(241, 236, 228, .55); }
/* косой кусок прозрачного скотча на месте склейки */
.lf-splice::after {
  content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 70px; margin-left: -35px;
  background: linear-gradient(180deg, rgba(255, 250, 235, .2), rgba(255, 250, 235, .08));
  border-inline: 1px solid rgba(255, 250, 235, .25); transform: skewX(-18deg);
}
.lf-splice span:last-child { display: none; }
@media (min-width: 720px) { .lf-splice span:last-child { display: inline; } }
.lf-burn {
  position: fixed; inset: 0; z-index: 119; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(40% 55% at var(--bx, 30%) var(--by, 50%), rgba(255, 248, 225, .95), rgba(255, 170, 60, .85) 30%, rgba(214, 60, 14, .6) 55%, transparent 75%),
    radial-gradient(30% 40% at calc(100% - var(--bx, 30%)) calc(100% - var(--by, 50%)), rgba(255, 120, 30, .7), transparent 70%);
}

/* ===== Production brief: попап письма, лист бриф-формы на машинке ===== */
html:has(.lf-brief[open]) { overflow: hidden; }
html:has(.lf-brief[open]) .lf-cursor { opacity: 0; }
html:has(.lf-brief[open]), html:has(.lf-brief[open]) a, html:has(.lf-brief[open]) button { cursor: auto; }
.lf-brief {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0;
  padding: clamp(56px, 9vh, 96px) 12px; background: rgba(6, 5, 4, .84); color: #161412;
  -webkit-backdrop-filter: blur(10px) saturate(.8); backdrop-filter: blur(10px) saturate(.8);
  overflow-y: auto; overscroll-behavior: contain;
}
.lf-brief[open] { display: grid; justify-items: center; }
.lf-brief::backdrop { background: transparent; }
.lf-brief__bars i { position: fixed; left: 0; right: 0; height: clamp(24px, 6vh, 60px); background: #000; transform-origin: top; pointer-events: none; }
.lf-brief__bars i:first-child { top: 0; }
.lf-brief__bars i:last-child { bottom: 0; transform-origin: bottom; }
.lf-brief__sheet {
  position: relative; z-index: 1; width: min(780px, 100%); margin-block: auto; background: #fbf9f2;
  font: 400 16px/1.6 var(--type);
  padding: clamp(26px, 5vw, 56px) clamp(20px, 5vw, 60px) clamp(28px, 5vw, 52px) clamp(40px, 8vw, 96px);
  box-shadow: 0 50px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .04);
  transform: rotate(-.35deg);
}
.lf-brief__sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(120, 100, 60, .09)); }
.lf-brief__sheet > .lf-page__brad { left: clamp(12px, 3vw, 30px); }
.lf-brief__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lf-brief__no { display: flex; align-items: center; gap: 8px; font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8f897f; }
.lf-brief__no i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rec 1.4s steps(2) infinite; }
.lf-brief__no b { font-weight: 500; color: #161412; white-space: nowrap; }
.lf-brief__close { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border: 1px solid rgba(22, 20, 18, .18); border-radius: 99px; font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; transition: background .3s, color .3s; }
.lf-brief__close:hover { background: #161412; color: var(--paper); }
.lf-brief kbd { font: 500 9.5px var(--mono); padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .5; }
.lf-brief__title { margin: clamp(22px, 3vw, 34px) 0 14px; font: 400 clamp(38px, 6.4vw, 72px)/.95 var(--trajan); text-transform: uppercase; letter-spacing: .01em; }
.lf-brief__to { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 10px 0 14px; border-bottom: 1px dashed rgba(22, 20, 18, .25); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8f897f; }
.lf-brief__to b { font: 700 16px var(--type); letter-spacing: 0; text-transform: none; color: #161412; margin-right: auto; }
.lf-brief__to button, .lf-brief__to a { color: #161412; padding-bottom: 2px; border-bottom: 1px solid var(--accent); text-transform: uppercase; letter-spacing: .12em; }
.lf-brief__to button:hover, .lf-brief__to a:hover { color: var(--accent); }

.lf-brief__form { display: grid; gap: 22px; margin-top: 22px; }
.lf-brief__row { display: grid; gap: 22px; }
@media (min-width: 640px) { .lf-brief__row { grid-template-columns: 1fr 1fr; gap: 28px; } }
.lf-brief__f { display: grid; gap: 2px; }
.lf-brief__f > span, .lf-brief__chips legend { font: 700 13px var(--type); text-transform: uppercase; letter-spacing: .04em; }
.lf-brief__f input, .lf-brief__f textarea {
  width: 100%; border: 0; border-radius: 0; padding: 4px 0; background: transparent; color: #161412; caret-color: var(--accent);
  font: 400 18px/28px var(--type); outline: none;
}
.lf-brief__f input { border-bottom: 1px dotted rgba(22, 20, 18, .45); transition: border-color .3s; }
.lf-brief__f textarea { resize: vertical; min-height: 116px; background: repeating-linear-gradient(transparent 0 27px, rgba(22, 20, 18, .2) 27px 28px) 0 4px / 100% 28px local; }
.lf-brief__f input:focus { border-bottom: 1px solid var(--accent); }
.lf-brief__f ::placeholder { color: #b3ada2; opacity: 1; }
.lf-brief__f.is-bad > span { color: var(--grease); }
.lf-brief__f.is-bad input { border-bottom: 2px solid var(--grease); }
.lf-brief__f.is-bad textarea { box-shadow: inset 3px 0 0 var(--grease); padding-left: 10px; }
.lf-brief__chips { border: 0; margin: 0 0 0 -12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.lf-brief__chips legend { padding: 0 0 0 12px; margin-bottom: 6px; float: left; width: 100%; }
.lf-brief__chips label { position: relative; cursor: pointer; }
.lf-brief__chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lf-brief__chips span { position: relative; display: block; padding: 6px 12px; font: 400 16px/1.3 var(--type); color: #4a463f; transition: color .25s; }
.lf-brief__chips span::before { content: "[ ]"; margin-right: 6px; color: #b3ada2; }
/* выбранное обведено восковым карандашом, кружок дорисовывается по кругу */
.lf-brief__chips span::after {
  content: ""; position: absolute; inset: 1px -2px; border: 2.4px solid var(--grease); border-radius: 52% 46% 55% 44% / 62% 48% 54% 40%;
  transform: rotate(var(--r, -2deg)) scale(.9); opacity: 0; transition: opacity .2s, transform .45s var(--ease);
  -webkit-mask: conic-gradient(#000 var(--draw, 0deg), transparent 0); mask: conic-gradient(#000 var(--draw, 0deg), transparent 0);
}
@property --draw { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lf-brief__chips input:checked + span { color: #161412; }
.lf-brief__chips input:checked + span::before { content: "[x]"; color: var(--grease); }
.lf-brief__chips input:checked + span::after { opacity: .9; transform: rotate(var(--r, -2deg)); --draw: 360deg; transition: opacity .1s, transform .45s var(--ease), --draw .5s ease-out; }
.lf-brief__chips label:hover span { color: #161412; }
.lf-brief__chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lf-brief__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lf-brief__go { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 24px; margin-top: 6px; }
.lf-brief__err { margin-right: auto; font: 700 24px/1.1 var(--hand); color: var(--grease); transform: rotate(-2deg); }
.lf-brief__err:empty { display: none; }
/* кнопка-хлопушка: полосатая палка приоткрыта, на наведении открывается шире, на нажатии хлопает */
.lf-brief__send { position: relative; display: grid; justify-items: start; padding: 22px 30px 14px; background: #161412; color: var(--paper); text-align: left; }
.lf-brief__send::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 13px; margin-bottom: 3px;
  background: repeating-linear-gradient(118deg, #161412 0 13px, var(--paper) 13px 26px); box-shadow: inset 0 0 0 1.5px #161412;
  transform-origin: 0 100%; transform: rotate(-7deg); transition: transform .3s var(--ease);
}
.lf-brief__send:hover::before { transform: rotate(-16deg); }
.lf-brief__send:active::before { transform: none; transition-duration: .06s; }
.lf-brief__send-t { font: 400 clamp(32px, 4.4vw, 46px)/1 var(--trajan); text-transform: uppercase; letter-spacing: .04em; transition: color .3s; }
.lf-brief__send:hover .lf-brief__send-t { color: var(--accent); }
.lf-brief__send small { margin-top: 6px; font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.lf-brief.is-sending .lf-brief__send { pointer-events: none; }
.lf-brief.is-sending .lf-brief__send::before { transform: none; }
.lf-brief.is-sending .lf-brief__send small { color: var(--accent); animation: rec 1s steps(2) infinite; }
.lf-brief.is-sending .lf-brief__send small::after { content: " · rolling"; }

.lf-brief__done { position: relative; padding: clamp(36px, 6vw, 70px) 0 6px; display: grid; justify-items: start; gap: 14px; }
.lf-brief__done[hidden], .lf-brief__form[hidden] { display: none; }
.lf-brief__stamp {
  position: absolute; right: 0; top: 10px; padding: 8px 18px; border: 4px double var(--grease); border-radius: 6px;
  font: 700 clamp(22px, 3.4vw, 34px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grease);
  transform: rotate(-11deg); opacity: .88; mix-blend-mode: multiply;
}
.lf-brief__thanks { font: 700 clamp(44px, 7vw, 76px)/.95 var(--hand); color: #1d2c72; outline: none; max-width: 70%; }
.lf-brief__note { max-width: 32em; color: #4a463f; }
.lf-brief__back { margin-top: 18px; padding-bottom: 3px; border-bottom: 1px solid var(--accent); font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.lf-brief__back:hover { color: var(--accent); }
@media (max-width: 600px) {
  .lf-brief { padding: 64px 0 0; }
  .lf-brief__sheet { transform: none; min-height: calc(100dvh - 64px); margin-block: 0; padding-left: 36px; }
  .lf-brief__sheet > .lf-page__brad { left: 12px; }
  .lf-brief__close kbd { display: none; }
  .lf-brief__to b { flex-basis: 100%; }
  .lf-brief__send { width: 100%; }
  .lf-brief__stamp { top: -6px; }
  .lf-brief__thanks { max-width: none; margin-top: 30px; }
}