/* cocotte.food, "cinema" cut.
   Palette and type come from the app (mobile/lib/core/theme/cc_palette.dart):
   cream + Flame, with the app's other accents (herb, honey, plum, clay) as
   full-bleed feature colours. Fraunces has no Cyrillic: Russian headings fall
   back per glyph to Literata, as in the app. */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-cyr.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --cream: #FFF6EC;
  --bg: #FAF5EE;
  --bg-2: #F3EADD;
  --surface: #FFFDFA;
  --text: #2A2019;
  --muted: #6F6357;
  --border: #E8DDCC;
  --flame: #D2552E;
  --flame-deep: #B8441F;
  --flame-ink: #A83A1E;
  --herb: #566E3C;
  --honey: #9A5606;
  --plum: #723A4F;
  --clay: #82542F;
  --ink: #2A2019;
  --link: #A83A1E;
  --track: #EADFCF;

  --serif: "Fraunces", "Literata", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pad: clamp(20px, 4vw, 56px);
  --shadow-warm: 0 60px 120px rgba(70, 30, 10, .30), 0 18px 40px rgba(70, 30, 10, .18);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17120E;
    --bg-2: #1E1813;
    --surface: #221C16;
    --text: #F5EEE4;
    --muted: #B3A695;
    --border: #352B22;
    --link: #EE8A62;
    --track: #2E261E;
  }
}

html[lang="en"] .l-ru,
html[lang="ru"] .l-en { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--flame) transparent; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  caret-color: var(--flame);
  overflow-x: clip;
}
::selection { background: var(--flame); color: #FFF7EE; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3, p, ol { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: 12px; top: -60px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--cream); z-index: 50; }
.skip:focus { top: 12px; }

.display { font-family: var(--serif); font-weight: 800; font-optical-sizing: auto; letter-spacing: -0.03em; line-height: 0.98; text-wrap: balance; }

/* ---------- nav: cream text on the flame stage, solid once scrolled ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; color: var(--cream); transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.nav[data-solid] { background: color-mix(in srgb, var(--bg) 86%, transparent); color: var(--text); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent); }
.nav__row { height: 68px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand img { border-radius: 9px; }
.brand span { font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: -0.02em; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.lang button { border: 0; background: transparent; cursor: pointer; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: inherit; opacity: .75; transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease, transform 160ms var(--ease-out); }
.lang button[aria-pressed="true"] { background: currentColor; opacity: 1; }
.nav:not([data-solid]) .lang button[aria-pressed="true"] { color: var(--flame); background: var(--cream); }
.nav[data-solid] .lang button[aria-pressed="true"] { color: var(--bg); background: var(--text); }
.lang button:active { transform: scale(0.96); }

/* ---------- badges ---------- */
.stores__note { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.stores__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stores__row--center { justify-content: center; }
.badge { display: inline-block; border-radius: 10px; transition: transform 160ms var(--ease-out), opacity 200ms ease; }
.badge img { height: 50px; width: auto; }
.badge:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .badge:hover { opacity: .9; } }

/* ============================================================
   1. Flame stage
   ============================================================ */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; min-height: max(100svh, 700px);
  padding: 104px var(--pad) 40px;
  display: grid; grid-template-rows: 1fr auto; gap: 28px;
  background: var(--flame); color: var(--cream);
}
.stage__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 22% 18%, rgba(255, 196, 150, .42), transparent 70%),
    radial-gradient(55% 60% at 88% 92%, rgba(110, 30, 8, .45), transparent 70%);
}
.stage__title {
  position: relative; align-self: start;
  font-family: var(--serif); font-weight: 900; font-optical-sizing: auto;
  font-size: clamp(54px, 10.2vw, 196px); line-height: .88; letter-spacing: -0.04em;
}
html[lang="ru"] .stage__title { font-size: clamp(42px, 6.6vw, 130px); line-height: .94; }
.stage__line { display: block; position: relative; }
.stage__line--back { z-index: 1; color: var(--cream); }
.stage__line--front { z-index: 3; color: var(--ink); padding-left: 0.04em; }

.stage__scene { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 1600px; perspective-origin: 70% 45%; }
.stage__foot { position: relative; z-index: 4; display: grid; gap: 24px; align-items: end; }
.stage__lead { font-size: clamp(24px, 1.8vw, 28px); line-height: 1.35; max-width: 28ch; color: var(--cream); text-wrap: pretty; }
/* text on the flame: kept at large-text sizes (24px regular, 19px bold), where
   cream on #D2552E (3.9:1) passes WCAG AA */
.stage .stores__note { font-size: 19px; font-weight: 700; }
@media (min-width: 900px) { .stage__foot { max-width: 52vw; } }

/* the hero phone: the real iPhone body (iphone.css) tilted in 3D, with a thin
   extruded titanium edge behind it so the side reads when it turns */
.device {
  --w: clamp(210px, min(19vw, 46svh), 330px);
  position: absolute; width: var(--w); aspect-ratio: 407.8 / 861.8;
  transform-style: preserve-3d;
  transform: rotateZ(3deg) rotateY(-14deg) rotateX(6deg);
}
.device .iphone { position: absolute; inset: 0; width: 100%; }
.device .iphone__shadow { display: none; }
.device__depth {
  position: absolute; inset: 0; border-radius: 15.67% / 7.41%;
  background: linear-gradient(135deg, #7a736b 0%, #3a3531 40%, #24211e 60%, #5d5750 100%);
  transform: translateZ(var(--z));
}
.device__depth:nth-child(5) { box-shadow: 0 50px 90px rgba(80, 20, 4, .40), 0 16px 30px rgba(80, 20, 4, .26); }
.device--hero { right: 8vw; top: calc(104px + 10.2vw * 0.9); }
html[lang="ru"] .device--hero { top: calc(104px + 6.6vw * 0.98); }

.float { position: absolute; filter: drop-shadow(0 26px 30px rgba(70, 20, 4, .32)); }
.float--tomatoes { width: clamp(150px, 15vw, 260px); right: calc(9vw + min(19vw, 46svh) - 4vw); bottom: 12%; }
.float--lemon { width: clamp(90px, 9vw, 160px); right: 4vw; top: 16%; }
.float--nectarine { width: clamp(90px, 8vw, 150px); right: 3vw; top: 52%; }

@media (max-width: 899px) {
  .stage { padding-top: 92px; grid-template-rows: auto 1fr auto; }
  .stage__title { font-size: clamp(48px, 14vw, 104px); }
  html[lang="ru"] .stage__title { font-size: clamp(36px, 10vw, 76px); }
  .stage__scene { position: relative; inset: auto; height: calc(min(54vw, 280px, 52svh) * 2.164 + 12vw); margin: -2vw calc(var(--pad) * -1) 0; }
  .device { --w: min(54vw, 280px, 52svh); }
  .device--hero, html[lang="ru"] .device--hero { right: auto; left: 50%; top: 4%; margin: 0 0 0 calc(var(--w) / -2); }
  .float--tomatoes { width: 34vw; right: auto; left: 2vw; top: auto; bottom: 0; }
  .float--lemon { width: 22vw; right: 2vw; top: 6%; }
  .float--nectarine { width: 18vw; right: auto; left: 4vw; top: 6%; }
}

/* load-in: once, before any scroll */
@media (prefers-reduced-motion: no-preference) {
  .js .stage__line { animation: rise 1000ms var(--ease-out) both; }
  .js .stage__line--front { animation-delay: 120ms; }
  .js .stage__foot { animation: rise 900ms var(--ease-out) 260ms both; }
  .js .device--hero { animation: phone-in 1400ms var(--ease-out) 100ms backwards; }
  .js .float { animation: fade-in 900ms ease 500ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.25em); } }
@keyframes phone-in { from { opacity: 0; transform: translateY(80px) rotateZ(12deg) rotateY(-60deg) rotateX(20deg); } }
@keyframes fade-in { from { opacity: 0; } }

/* ============================================================
   2. The plate, taken apart
   ============================================================ */
.plate { position: relative; background: var(--bg); }
.plate__pin {
  min-height: 100svh; padding: 96px var(--pad) 48px;
  display: grid; gap: 40px; align-items: center;
}
@media (min-width: 900px) { .plate__pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100svh; min-height: 680px; } }
.plate__title { font-size: clamp(34px, 3.8vw, 60px); margin-bottom: 18px; max-width: 15ch; }
.plate__body { color: var(--muted); font-size: 18px; max-width: 46ch; text-wrap: pretty; margin-bottom: clamp(20px, 3vw, 36px); }

.tally__total { font-family: var(--serif); font-weight: 900; font-optical-sizing: auto; letter-spacing: -0.04em; line-height: .9; font-size: clamp(92px, 11vw, 190px); font-variant-numeric: lining-nums tabular-nums; margin-bottom: 18px; }
.tally__unit { font-family: var(--sans); font-weight: 600; font-size: clamp(18px, 1.4vw, 22px); letter-spacing: 0; color: var(--muted); }
.tally__steps { list-style: none; padding: 0; display: grid; gap: 10px; }
.tally__step { display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--muted); }
.tally__chip { flex: none; min-width: 64px; height: 36px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--bg-2); color: var(--text); }
.tally__chip--add { background: color-mix(in srgb, var(--flame) 14%, var(--bg)); color: var(--flame-ink); }
.tally__chip--total { background: var(--ink); color: var(--cream); }
@media (prefers-color-scheme: dark) { .tally__chip--total { background: var(--flame); } .tally__chip--add { color: #F2A07E; } }
.js .tally__step { opacity: .28; transition: opacity 350ms ease; }
.js .tally__step.is-on { opacity: 1; }
.js .tally__step.is-on span:last-child { color: var(--text); }

.plate__scene { position: relative; height: min(76svh, 720px); perspective: 1500px; perspective-origin: 50% 40%; }
.explode { position: absolute; inset: 0; display: grid; place-items: center end; padding-right: 6%; }
.explode__phone { --w: clamp(220px, 21vw, 330px); position: relative; width: var(--w); }
.explode__phone .iphone { width: 100%; }
/* a box exactly over the screen (8.9 pt edge of a 407.8 x 861.8 pt body) */
.explode__over { position: absolute; left: 2.1825%; top: 1.0327%; width: 95.635%; height: 97.935%; }
/* card boxes measured on the 390 x 844 capture */
.slot, .lift { position: absolute; left: 4.103%; width: 91.795%; border-radius: calc(var(--w) * 0.045); }
.slot--photo, .lift--photo { top: 14.455%; height: 17.891%; }
.slot--kcal, .lift--kcal { top: 41.706%; height: 18.957%; }
.slot--list, .lift--list { top: 62.322%; height: 24.408%; }
.slot { background: #EDE3D5; box-shadow: inset 0 1px 4px rgba(90, 52, 28, .14); opacity: 0; }
.lift img { width: 100%; height: 100%; border-radius: inherit; }
.lift__shadow { position: absolute; inset: 0; border-radius: inherit; opacity: 0; box-shadow: 0 26px 50px rgba(70, 30, 10, .30), 0 8px 18px rgba(70, 30, 10, .16); }
.ask { position: absolute; width: clamp(210px, 20vw, 320px); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(70, 30, 10, .22); will-change: transform, opacity; left: 2%; }
.ask img { width: 100%; }
/* the tap on «Fried in oil»: the radio at 8.9 % of the card width */
.ask__dot { position: absolute; left: 8.9%; top: 50%; width: 7.4%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: var(--flame); box-shadow: 0 0 0 3px #FFFDFA inset; }
.ask--q { top: 14%; }
.ask--a { top: calc(14% + clamp(210px, 20vw, 320px) * 0.413 + 12px); }
.float--pan { width: clamp(160px, 16vw, 260px); left: 0; bottom: 0; transform: rotate(-24deg); z-index: -1; }
.js .ask { opacity: 0; }
@media (max-width: 899px) {
  .plate__scene { height: 120vw; max-height: 640px; }
  .explode__phone { --w: min(52vw, 260px); }
  .explode { place-items: center end; padding-right: 2%; }
  .ask { width: 50vw; left: -2%; }
  .ask--q { top: 20%; }
  .ask--a { top: calc(20% + 50vw * 0.413 + 8px); }
  .scene-tally { display: flex; }
}

/* ============================================================
   3. Feature reel: sideways on wide screens, stacked on phones
   ============================================================ */
.reel { position: relative; background: var(--bg); }
.reel__track { display: grid; gap: 16px; padding: 24px 16px 48px; }
.reel__title { font-size: clamp(44px, 6vw, 112px); max-width: 9ch; }
.panel { position: relative; overflow: hidden; border-radius: 36px; color: var(--cream); display: grid; }
.panel--intro { color: var(--text); background: transparent; padding: 32px 8px; }
.panel--herb { background: var(--herb); }
.panel--honey { background: var(--honey); }
.panel--flame { background: var(--flame-deep); }
.panel--plum { background: var(--plum); }
.panel--clay { background: var(--clay); }
.panel--ink { background: var(--ink); }
@media (prefers-color-scheme: dark) { .panel--ink { background: #2E261E; } }
.panel__text { padding: 36px 32px 0; align-self: center; }
.panel h3 { font-family: var(--serif); font-weight: 800; font-optical-sizing: auto; letter-spacing: -0.025em; line-height: 1; font-size: clamp(34px, 4.2vw, 72px); margin-bottom: 18px; text-wrap: balance; max-width: 13ch; }
.panel p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; max-width: 34ch; color: color-mix(in srgb, var(--cream) 90%, transparent); text-wrap: pretty; }
.panel__art { position: relative; min-height: 440px; perspective: 1200px; }
.flat-phone { position: absolute; left: 50%; bottom: -26%; width: clamp(220px, 19vw, 300px); transform: translateX(-50%); }
.flat-phone .iphone { width: 100%; }
.panel__food { position: absolute; width: clamp(180px, 17vw, 300px); right: -6%; bottom: 4%; filter: drop-shadow(0 30px 36px rgba(0, 0, 0, .35)); }
.panel__food--wide { width: clamp(220px, 22vw, 380px); right: -12%; }
.panel__photo { position: absolute; inset: 8% 6% auto auto; width: 72%; height: 84%; object-fit: cover; border-radius: 28px; opacity: .95; }

@media (min-width: 900px) {
  .has-gsap .reel { height: 100svh; overflow: hidden; }
  .has-gsap .reel__track { display: flex; gap: 2vw; height: 100svh; padding: 92px 4vw 4vh; width: max-content; align-items: stretch; }
  .reel__track { grid-template-columns: 1fr 1fr; padding: 48px 4vw 72px; }
  .panel { grid-template-columns: 1fr 1fr; min-height: 560px; }
  .panel--intro { grid-column: 1 / -1; }
  .has-gsap .panel { width: 74vw; max-width: 1180px; min-height: 0; }
  .has-gsap .panel--intro { width: 40vw; display: flex; align-items: center; padding: 0 2vw; }
  .panel__text { padding: 0 0 0 4vw; }
  .panel__art { min-height: 0; }
  .flat-phone { bottom: -18%; }
}

/* ============================================================
   4. The day: real diary cards, then the calm ring
   ============================================================ */
.day { background: var(--bg); padding: clamp(72px, 9vw, 140px) 0; }
.day__band { overflow: hidden; padding: 12px 0 40px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.day__row { display: flex; width: max-content; }
.day__item { flex: none; margin-right: 16px; width: clamp(300px, 30vw, 440px); border-radius: 24px; overflow: hidden; background: #FFFDFA; border: 1px solid #EADFCF; box-shadow: 0 18px 40px rgba(90, 52, 28, .10); }
.day__item img { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .day__row[data-running] { animation: marquee var(--marquee-dur, 40s) linear infinite; }
}
@keyframes marquee { to { transform: translateX(var(--marquee-shift, -50%)); } }

.day__calm { display: grid; gap: 40px; align-items: center; padding: 40px var(--pad) 0; max-width: 1240px; margin: 0 auto; }
@media (min-width: 900px) { .day__calm { grid-template-columns: auto 1fr; gap: 80px; } }
.ring { position: relative; width: min(420px, 78vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.ring__svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring__track, .ring__arc { fill: none; stroke-width: 15; }
.ring__track { stroke: var(--track); }
.ring__arc { stroke: var(--flame); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ring__inner { text-align: center; }
.ring__num { display: block; font-family: var(--serif); font-weight: 900; font-size: clamp(74px, 8.6vw, 128px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.ring__of { font-weight: 600; font-size: 18px; color: var(--muted); }
.day__title { font-size: clamp(48px, 6.4vw, 112px); margin-bottom: 22px; }
.day__body { font-size: clamp(18px, 1.4vw, 21px); color: var(--muted); max-width: 40ch; text-wrap: pretty; }

/* ============================================================
   5. Film
   ============================================================ */
.film { background: var(--bg); padding: 0 0 clamp(72px, 9vw, 140px); overflow: hidden; }
.film__title { font-size: clamp(40px, 5vw, 88px); padding: 0 var(--pad); margin: 0 auto clamp(28px, 3vw, 44px); max-width: 1240px; }
.film__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #F3EDE6; overflow: hidden; transform-origin: 50% 0; border-radius: 32px; }
.film__frame video { width: 100%; height: 100%; object-fit: cover; }
.film__toggle {
  position: absolute; right: 20px; bottom: 20px; z-index: 2; height: 42px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(42, 32, 25, .74); color: #FFF7EE; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 600; transition: transform 160ms var(--ease-out);
}
.film__toggle:active { transform: scale(0.96); }
.film__frame[data-state="playing"] [data-when="paused"],
.film__frame:not([data-state="playing"]) [data-when="playing"] { display: none; }

/* ============================================================
   6. Finale + footer
   ============================================================ */
.finale {
  position: relative; overflow: hidden; background: var(--ink); color: var(--cream);
  padding: clamp(40px, 5vw, 80px) var(--pad) clamp(64px, 8vw, 120px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px;
}
.finale::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(45% 50% at 50% 26%, rgba(210, 85, 46, .38), transparent 70%); pointer-events: none; }
.finale > * { position: relative; z-index: 1; }
.finale__pot { width: clamp(220px, 24vw, 360px); aspect-ratio: 393 / 852; margin: calc(clamp(220px, 24vw, 360px) * -0.55) 0 calc(clamp(220px, 24vw, 360px) * -0.62); }
.finale__pot { position: relative; }
.finale__pot img, .finale__pot svg { width: 100%; height: 100%; }
.finale__pot-layer { position: absolute; inset: 0; }
.finale__title { font-size: clamp(44px, 6.4vw, 116px); max-width: 14ch; }
.finale__mail { font-size: 17px; color: color-mix(in srgb, var(--cream) 90%, transparent); }
.finale__mail a { color: #F2A07E; }
.finale .display { color: var(--cream); }

.foot { background: var(--ink); color: #CDBFAE; font-size: 14px; padding: 28px var(--pad) 40px; border-top: 1px solid #3A2F27; }
.foot__row { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; align-items: center; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot__links a { color: #CDBFAE; text-decoration: none; }
.foot__links a:hover { color: #FFF6EC; text-decoration: underline; }

/* ============================================================
   Reduced motion: everything settles in its final state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .tally__step { opacity: 1; }
  .js .ask { opacity: 1; }
}

/* phones: the running sum rides on the pinned scene */
.scene-tally { display: none; position: absolute; z-index: 3; left: 0; top: 0; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 12px 30px rgba(90, 52, 28, .14); }
.scene-tally__num { font-family: var(--serif); font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.scene-tally__num small { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.scene-tally__note { font-size: 13px; color: var(--muted); min-height: 1.3em; }
html[lang="ru"] .ask--a { top: calc(14% + clamp(210px, 20vw, 320px) * 0.503 + 12px); }
@media (max-width: 899px) {
  .scene-tally { display: flex; }
  html[lang="ru"] .ask--a { top: calc(20% + 50vw * 0.503 + 8px); }
}