/* =========================================================
   EKKA — the chapters' own styles: the opening film, «Что внутри», «Почему EKKA», the wall, the machine's
   insides, partners, about, footer. Loaded after styles.css (the base) and before motion/motion.css (the text
   chapters' motion layer), which is the order they cascade in. Moved here from an inline <style> in index.html.
   ========================================================= */
.stage3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the page's one WebGL canvas (gl.js), laid over the 3D section on screen */
.gl-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film--hero { height: 1100vh; }
.loader__pct { font-size: 12px; letter-spacing: .14em; opacity: .55; font-variant-numeric: tabular-nums; }

/* the pinned stages end above the browser bars (see .film__pin), so nothing needs lifting over them */
:root { --bar: 0px; }

/* ---------- type: a second voice ----------
   Headlines and text are set in Google Sans (sizes: type.css); the words that carry the feeling switch to an italic
   serif (Cormorant), a touch larger so both share one optical size. */
h1 em, h2 em, h3 em, .unbox__say b em {
  font-family: Cormorant, "Times New Roman", serif; font-style: italic; font-weight: 500;
  font-size: 1.12em; letter-spacing: -.015em; line-height: .9;
}

/* ---------- scene text ---------- */
.stop {
  position: absolute; z-index: 2;
  top: 0; bottom: 0;
  width: min(500px, 40vw);
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.stop--left { left: var(--gutter); }
.stop--right { right: var(--gutter); }
.stop a, .stop button { pointer-events: auto; }
/* a soft local shade so the words read over any part of the scene */
.stop::before {
  content: ""; position: absolute; z-index: -1;
  top: 50%; height: 120%; transform: translateY(-50%);
  left: calc(-1 * var(--gutter) - 10vw); right: -14vw;
  background: radial-gradient(closest-side, rgba(11, 8, 9, .62), rgba(11, 8, 9, 0));
}
.stop__n {
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
  color: var(--rose); margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.stop__title {
  font-weight: 400;
  font-size: clamp(34px, 3.9vw, 60px);
  line-height: 1.04; letter-spacing: -.035em;
  text-wrap: balance;
}
.stop__text {
  margin-top: 18px;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.45; font-weight: 400;
  color: rgba(241, 235, 227, .8);
  max-width: 26em;
  text-wrap: pretty;
}
.stop .btn-pill { align-self: flex-start; margin-top: 30px; }
.stop button.btn-pill { border: 0; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.vend-ask { display: flex; flex-direction: column; transition: opacity .6s, transform .8s cubic-bezier(.4,0,.2,1); }
.stop--vend.is-gone .vend-ask, .stop--vend.is-gone .stop__n { opacity: 0; transform: translateY(-14px); transition: opacity .6s, transform .8s; }

/* a constant soft vignette, and a shade on the words' side while words are on screen */
.film--hero .film__shade { z-index: 1; }   /* over the vignette and the focus dim: the edges always end in --hero-edge */
.film__vig { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: calc(1 - var(--focus, 0));
  background: radial-gradient(ellipse 115% 95% at 60% 42%, rgba(9, 7, 8, 0) 52%, rgba(9, 7, 8, .58) 100%); }
.film__side { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: calc(var(--side, 0) * (1 - var(--focus, 0)));
  background: linear-gradient(90deg, rgba(9, 7, 8, .78) 0%, rgba(9, 7, 8, .55) 26%, rgba(9, 7, 8, .18) 46%, rgba(9, 7, 8, 0) 62%); }
@media (max-width: 860px) {
  .film__vig { background: radial-gradient(ellipse 140% 80% at 50% 36%, rgba(9, 7, 8, 0) 50%, rgba(9, 7, 8, .55) 100%); }
  .film__side { background: linear-gradient(0deg, color-mix(in srgb, var(--hero-edge, #0b0809) 100%, transparent) 0%, color-mix(in srgb, var(--hero-edge, #0b0809) 62%, transparent) 34%, color-mix(in srgb, var(--hero-edge, #0b0809) 0%, transparent) 62%); }
}

/* scene 6: the room sinks into the dark, only the screen stays lit */
.vend-focus { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; overflow: hidden; }
.vend-focus i { position: absolute; border-radius: 22px; box-shadow: 0 0 70px 200vmax rgba(9, 7, 8, .86); }
/* the «Получить» glow, Gemini-like: a soft aura of colour that keeps flowing round the button,
   and a fine bright rim on its edge. Pure CSS over the 3D screen: smooth at the display's rate. */
@property --ga { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.vend-glow { position: absolute; z-index: 3; display: none; pointer-events: none; border-radius: 999px; }
.vend-glow.is-on { display: block; }
.vend-glow__aura b, .vend-glow__rim {
  position: absolute; border-radius: 999px;
  background: conic-gradient(from var(--ga), #4f7cff, #8b6cf0, #c86fd6, #f07f9c, #f4b29a, #ffd3a1, #7fb4ff, #4f7cff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: vend-spin 3.6s linear infinite;
}
/* the aura: a band of colour round the button, softened by a blur on its parent (so its edges melt) */
.vend-glow__aura { position: absolute; inset: -40px; filter: blur(15px); animation: vend-breathe 2.8s ease-in-out infinite; }
.vend-glow__aura b { inset: 22px; padding: 18px; }
/* the rim: a thin crisp line of the same colours right on the edge */
.vend-glow__rim { inset: -3px; padding: 3px; }
@keyframes vend-spin { to { --ga: 360deg; } }
@keyframes vend-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }

/* an invisible real button over the one drawn on the 3D screen: a tap always lands */
.vend-hit { position: absolute; z-index: 4; display: none; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vend-hit.is-on { display: block; }
.vend-hit:focus-visible { outline: 2px solid #f0b6a8; outline-offset: 4px; }

/* a hand-drawn arrow to the button; its tip sits at the element's origin */
.vend-hint { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; color: #f0b6a8; opacity: 0; transition: opacity .5s; }
.vend-hint.is-on { opacity: 1; transition-delay: .1s; }
.vend-hint svg { position: absolute; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vend-hint path { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset .8s cubic-bezier(.6,.1,.2,1); }
.vend-hint path + path { transition-duration: .35s; }
.vend-hint.is-on path { stroke-dashoffset: 0; transition-delay: .25s; }
.vend-hint.is-on path + path { transition-delay: .9s; }
.vend-hint__side { left: -141px; top: -24px; }
/* on a phone: above the button, over the display, pointing down at it */
.vend-hint__up { display: none; left: -31px; top: -68px; width: 44px; height: 72px; filter: drop-shadow(0 1px 2px rgba(35, 28, 38, .35)); }
.vend-hint span {
  position: absolute; white-space: nowrap; font-family: "Caveat", "Segoe Print", cursive; font-size: 30px; line-height: 1;
  right: 132px; top: 46px; transform: rotate(-4deg);
}
.vend-hint.is-up .vend-hint__side { display: none; }
.vend-hint.is-up .vend-hint__up { display: block; }
.vend-hint.is-up { color: #e0806b; }
.vend-hint.is-up span { right: 18px; left: auto; top: -108px; font-size: 22px; padding: 6px 14px 7px; border-radius: 99px;
  background: rgba(35, 28, 38, .86); color: #f6c2b5; transform: rotate(-3deg); }
@keyframes tapRing { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.sr-btn {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sr-btn:focus-visible {
  position: static; width: auto; height: auto; clip: auto; margin-top: 18px; align-self: flex-start;
  padding: 12px 22px; border-radius: 999px; border: 0; background: var(--rose); color: #1b1416; font: 500 15px/1 inherit;
}
.film__cover { position: absolute; inset: 0; z-index: 4; background: #070506; opacity: 0; pointer-events: none; }
.film--hero .film__pin { transform-origin: 50% 30%; }

/* ---------- phone: the light sections meet Safari's dark bars softly ----------
   Only the strip under the status bar and under the toolbar darkens, on an eased curve (no visible band).
   Gradients only: no colour for Safari to sample. A computer has no such bars, so it has no fade. */
.edge-fade { display: none; }
@media (max-width: 860px) {
  .edge-fade { display: block; position: fixed; left: 0; right: 0; z-index: 40; pointer-events: none; }
  .edge-fade--top { top: 0; height: calc(env(safe-area-inset-top) + 96px); background: linear-gradient(in oklab 180deg, color-mix(in oklab, var(--hero-edge) 100%, transparent) env(safe-area-inset-top), color-mix(in oklab, var(--hero-edge) 95.8%, transparent) calc(env(safe-area-inset-top) + 5px), color-mix(in oklab, var(--hero-edge) 90.0%, transparent) calc(env(safe-area-inset-top) + 11px), color-mix(in oklab, var(--hero-edge) 83.0%, transparent) calc(env(safe-area-inset-top) + 16px), color-mix(in oklab, var(--hero-edge) 75.1%, transparent) calc(env(safe-area-inset-top) + 21px), color-mix(in oklab, var(--hero-edge) 66.7%, transparent) calc(env(safe-area-inset-top) + 27px), color-mix(in oklab, var(--hero-edge) 58.1%, transparent) calc(env(safe-area-inset-top) + 32px), color-mix(in oklab, var(--hero-edge) 49.4%, transparent) calc(env(safe-area-inset-top) + 37px), color-mix(in oklab, var(--hero-edge) 41.0%, transparent) calc(env(safe-area-inset-top) + 43px), color-mix(in oklab, var(--hero-edge) 33.0%, transparent) calc(env(safe-area-inset-top) + 48px), color-mix(in oklab, var(--hero-edge) 25.6%, transparent) calc(env(safe-area-inset-top) + 53px), color-mix(in oklab, var(--hero-edge) 19.1%, transparent) calc(env(safe-area-inset-top) + 59px), color-mix(in oklab, var(--hero-edge) 13.4%, transparent) calc(env(safe-area-inset-top) + 64px), color-mix(in oklab, var(--hero-edge) 8.7%, transparent) calc(env(safe-area-inset-top) + 69px), color-mix(in oklab, var(--hero-edge) 5.1%, transparent) calc(env(safe-area-inset-top) + 75px), color-mix(in oklab, var(--hero-edge) 2.5%, transparent) calc(env(safe-area-inset-top) + 80px), color-mix(in oklab, var(--hero-edge) 0.9%, transparent) calc(env(safe-area-inset-top) + 85px), color-mix(in oklab, var(--hero-edge) 0.2%, transparent) calc(env(safe-area-inset-top) + 91px), color-mix(in oklab, var(--hero-edge) 0.0%, transparent) calc(env(safe-area-inset-top) + 96px)); }
  .edge-fade--bottom { bottom: 0; height: calc(env(safe-area-inset-bottom) + 84px); background: linear-gradient(in oklab 0deg, color-mix(in oklab, var(--hero-edge) 100%, transparent) env(safe-area-inset-bottom), color-mix(in oklab, var(--hero-edge) 95.8%, transparent) calc(env(safe-area-inset-bottom) + 5px), color-mix(in oklab, var(--hero-edge) 90.0%, transparent) calc(env(safe-area-inset-bottom) + 9px), color-mix(in oklab, var(--hero-edge) 83.0%, transparent) calc(env(safe-area-inset-bottom) + 14px), color-mix(in oklab, var(--hero-edge) 75.1%, transparent) calc(env(safe-area-inset-bottom) + 19px), color-mix(in oklab, var(--hero-edge) 66.7%, transparent) calc(env(safe-area-inset-bottom) + 23px), color-mix(in oklab, var(--hero-edge) 58.1%, transparent) calc(env(safe-area-inset-bottom) + 28px), color-mix(in oklab, var(--hero-edge) 49.4%, transparent) calc(env(safe-area-inset-bottom) + 33px), color-mix(in oklab, var(--hero-edge) 41.0%, transparent) calc(env(safe-area-inset-bottom) + 37px), color-mix(in oklab, var(--hero-edge) 33.0%, transparent) calc(env(safe-area-inset-bottom) + 42px), color-mix(in oklab, var(--hero-edge) 25.6%, transparent) calc(env(safe-area-inset-bottom) + 47px), color-mix(in oklab, var(--hero-edge) 19.1%, transparent) calc(env(safe-area-inset-bottom) + 51px), color-mix(in oklab, var(--hero-edge) 13.4%, transparent) calc(env(safe-area-inset-bottom) + 56px), color-mix(in oklab, var(--hero-edge) 8.7%, transparent) calc(env(safe-area-inset-bottom) + 61px), color-mix(in oklab, var(--hero-edge) 5.1%, transparent) calc(env(safe-area-inset-bottom) + 65px), color-mix(in oklab, var(--hero-edge) 2.5%, transparent) calc(env(safe-area-inset-bottom) + 70px), color-mix(in oklab, var(--hero-edge) 0.9%, transparent) calc(env(safe-area-inset-bottom) + 75px), color-mix(in oklab, var(--hero-edge) 0.2%, transparent) calc(env(safe-area-inset-bottom) + 79px), color-mix(in oklab, var(--hero-edge) 0.0%, transparent) calc(env(safe-area-inset-bottom) + 84px)); }
}

/* ---------- what's inside ---------- */
/* the pad's chapter is set on the opening's deep tone (styles.css, --hero-edge), so the white pad reads against it */
:root { --pad-bg: #1a1311; --pad-ink: #f1ebe3; --pad-mute: rgba(241, 235, 227, .42); --pad-rose: #e3a08f; }
/* ---------- received: the pack opens (unbox/unbox.js) ---------- */
.unbox {
  position: relative; z-index: 5; height: 560vh; margin-top: -100vh; margin-top: -100lvh;
  background: var(--pad-bg); color: var(--pad-ink);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .35);
}
.unbox__pin { position: sticky; top: 5px; height: calc(100vh - 10px); height: calc(100dvh - 10px); overflow: hidden; border-radius: inherit; }
.unbox__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* a soft lens vignette: the close-up feels shot, not drawn */
.unbox__pin::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 55% 45%, rgba(120, 96, 84, 0) 55%, rgba(120, 96, 84, .12) 100%); }
.unbox__say { z-index: 2; }
.unbox__say {
  position: absolute; left: var(--gutter); top: 50%; width: min(420px, 34vw); margin: 0;
  opacity: 0; transform: translateY(calc(-50% + 18px)); pointer-events: none;
  transition: opacity .7s, transform .9s cubic-bezier(.22,.8,.14,1);
}
.unbox__say.is-on { opacity: 1; transform: translateY(-50%); }
.unbox__say small { display: block; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--pad-rose); margin-bottom: 18px; }
.unbox__say b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.unbox__say span { display: block; margin-top: 18px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: rgba(35, 28, 38, .66); max-width: 25em; text-wrap: pretty; }
@media (max-width: 860px) {
  .unbox { border-radius: 22px 22px 0 0; }
  .unbox__say { top: auto; bottom: calc(52px + env(safe-area-inset-bottom)); right: var(--gutter); width: auto; transform: translateY(18px); }
  .unbox__say.is-on { transform: none; }
  .unbox__say b { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.06; }
  .unbox__say span { font-size: 15px; margin-top: 12px; }
}

.inside {
  position: relative; z-index: 5; height: 520vh;   /* opens once and holds while its layers are labelled */
  background: var(--pad-bg); color: var(--pad-ink);
}
/* with the pack scene set aside, «Что внутри» is what slides up over the machine */
.unbox[hidden] + .inside { margin-top: -100vh; margin-top: -100lvh; border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px rgba(0, 0, 0, .35); }
@media (max-width: 860px) { .unbox[hidden] + .inside { border-radius: 22px 22px 0 0; } }
.inside__pin { position: sticky; top: 5px; height: calc(100vh - 10px); height: calc(100dvh - 10px);   /* the visible screen, 5px clear of each edge (see .film__pin) */
  overflow: hidden; border-radius: inherit; }
.inside__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* callouts on the opened pad: a dot on each layer, a thin line, its name (pad3d.js places them) */
.inside__calls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.inside__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .6s; }
.inside__lines line { stroke: rgba(241, 235, 227, .42); stroke-width: 1; }
.inside__lines circle { fill: #fff; stroke: var(--pad-rose); stroke-width: 2; }
.inside__call { position: absolute; left: 0; top: 0; max-width: 210px; padding: 9px 13px 10px; border-radius: 14px;
  background: rgba(26, 19, 17, .64); border: 1px solid rgba(255, 236, 222, .12); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .6s; }
@media (hover: hover) and (pointer: fine) { .inside__call { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } }
.inside__call b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #f1ebe3; line-height: 1.25; }
.inside__call span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: rgba(241, 235, 227, .7); }
.inside__calls.is-on .inside__lines, .inside__calls.is-on .inside__call { opacity: 1; }
@media (max-width: 760px) {
  .inside__call { max-width: 120px; padding: 6px 9px; border-radius: 10px; }
  .inside__call b { font-size: 9.5px; letter-spacing: .04em; }
  .inside__call span { display: none; }   /* a phone shows the names; the lines say which layer */
}
.inside__head, .inside__story, .inside__end { position: absolute; transition: opacity .6s, transform .8s cubic-bezier(.22,.8,.14,1); }
.inside__head { left: var(--gutter); top: 17vh; width: min(440px, 33vw); }
.inside__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--pad-rose); margin-bottom: 18px; }
.inside__title { font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.inside__lead { margin-top: 18px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: rgba(241, 235, 227, .66); max-width: 25em; text-wrap: pretty; }
.is-off { opacity: 0; transform: translateY(-14px); pointer-events: none; }

/* the story of the layers: an index of all five, the one in view lit up, its name set large */
.inside__story { left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(520px, 38vw); }
.inside__story.is-off { transform: translateY(calc(-50% + 14px)); }
.inside__index { list-style: none; margin: 0 0 clamp(28px, 5vh, 56px); padding: 0; display: grid; gap: 10px; }
.inside__index li {
  position: relative; padding-left: 0; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pad-mute); transition: color .5s, padding-left .6s cubic-bezier(.22,.8,.14,1);
}
.inside__index li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1.5px; background: var(--pad-rose);
  transition: width .6s cubic-bezier(.22,.8,.14,1);
}
.inside__index li.is-on { color: var(--pad-ink); padding-left: 34px; }
.inside__index li.is-on::before { width: 22px; }
.inside__index li.is-past { color: rgba(241, 235, 227, .62); }
.inside__layers { display: grid; font-size: clamp(40px, 4.2vw, 68px); }
/* all captions share one cell: the block is as tall as the longest, so it never spills */
.inside__layers article { grid-area: 1 / 1; pointer-events: none; }
.inside__icon {
  width: 34px; height: 34px; margin-bottom: 18px; display: block;
  fill: none; stroke: var(--pad-rose); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .5s, transform .7s cubic-bezier(.22,.8,.14,1);
}
.inside__layers article.is-on .inside__icon { opacity: 1; transform: none; }
.inside__layers h3 { font-weight: 400; font-size: 1em; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.inside__layers h3 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.inside__layers h3 .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.22,.8,.14,1); }
.inside__layers p {
  margin-top: 22px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: rgba(241, 235, 227, .66); max-width: 24em;
  opacity: 0; transform: translateY(10px); transition: opacity .6s .25s, transform .8s .25s cubic-bezier(.22,.8,.14,1);
}
.inside__layers article.is-on h3 .w > span { transform: none; }
.inside__layers article.is-on p { opacity: 1; transform: none; }
.inside__layers article.is-out h3 .w > span { transform: translateY(-105%); transition-duration: .6s; }

/* the close: the pad back in one piece */
/* the close: the words above, the pad lying below them, the five points in one line */
.inside__end { left: var(--gutter); right: var(--gutter); top: 15vh; text-align: center; display: flex; flex-direction: column; align-items: center; }
.inside__end .inside__eyebrow { margin-bottom: 16px; }
.inside__end h3 { font-weight: 400; font-size: clamp(34px, 3.6vw, 58px); letter-spacing: -.045em; line-height: 1.02; max-width: 13em; text-wrap: balance; }
.inside__end-lead { margin-top: 14px; font-size: clamp(16px, 1.25vw, 19px); color: rgba(241, 235, 227, .62); text-wrap: balance; }
.inside__recap { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.inside__recap li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: rgba(241, 235, 227, .72); }
.inside__recap svg { width: 20px; height: 20px; fill: none; stroke: var(--pad-rose); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.inside__end.is-off { transform: translateY(-14px); }

/* ---------- where EKKA hangs: an index of places ---------- */
.where { position: relative; z-index: 6; background: #efe7df; color: #231c26;
  padding: clamp(96px, 14vh, 160px) var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); }
.where__head { position: sticky; top: 120px; align-self: start; }
.where__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #c97e6e; margin-bottom: 16px; }
.where__title { font-weight: 400; font-size: clamp(42px, 5vw, 84px); line-height: .96; letter-spacing: -.045em; }
.where__lead { margin-top: 22px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; color: rgba(35, 28, 38, .66); max-width: 24em; text-wrap: pretty; }
.where__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(35, 28, 38, .14); }
.where__row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); align-items: center;
  padding: clamp(22px, 3.2vh, 34px) 0; border-top: 1px solid rgba(35, 28, 38, .14);
  opacity: 0; transform: translateY(18px); transition: opacity .8s, transform 1s cubic-bezier(.22,.8,.14,1);
}
.where__row.is-in { opacity: 1; transform: none; }
.where__ic { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(201, 126, 110, .28); transition: background .4s, border-color .4s; }
.where__ic svg { width: 26px; height: 26px; fill: none; stroke: #c97e6e; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.where__row b { font-weight: 400; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.05; letter-spacing: -.035em; transition: transform .6s cubic-bezier(.22,.8,.14,1); }
.where__txt { margin-top: 6px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: rgba(35, 28, 38, .6); max-width: 34em; }
@media (hover: hover) {
  .where__row:hover .where__ic { background: #c97e6e; border-color: #c97e6e; }
  .where__row:hover .where__ic svg { stroke: #fff; }
  .where__row:hover b { transform: translateX(6px); }
}
@media (max-width: 860px) {
  .where { grid-template-columns: 1fr; gap: 34px; padding: 84px var(--gutter) 72px; }
  .where__head { position: static; }
  .where__title { font-size: clamp(38px, 11vw, 52px); }
  .where__lead { font-size: 16px; }
  .where__row { grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
  .where__ic { width: 46px; height: 46px; }
  .where__ic svg { width: 22px; height: 22px; }
  .where__row b { font-size: 24px; }
  .where__txt { font-size: 15px; }
}

/* ---------- for partners: one wall — the words and the numbers; the machine on the washroom wall is the opening of
   the look inside (#xray, xray/xray.js): front view with its measurements, the side with its depth, then the dark ---------- */
.wall { position: relative; z-index: 6; background: #ebe3d8; color: #231c26; padding: clamp(80px, 12vh, 140px) var(--gutter); }
.wall__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--pad-rose); margin: 0 0 18px; }
.wall__title { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.wall__lead { margin: 22px 0 0; max-width: 34em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: rgba(35, 28, 38, .66); }
.wall__tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }   /* the measurements, over the opening of #xray */
.wall__tags .wall__tag { opacity: 0; transition: opacity .35s; }
.wall__tags .wall__tag.is-on { opacity: 1; }
.wall__tag { position: absolute; transform: translate(-50%, -50%); background: #f6f1ea; color: #4157a3;
  font: 600 clamp(11px, 1vw, 14px)/1 var(--font); padding: 7px 10px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(28, 23, 29, .12); white-space: nowrap; }
.wall__tag--l { transform: translate(-115%, -50%); }
.wall__tag--r { transform: translate(15%, -50%); }
.wall__tag--u { transform: translate(-50%, -150%); }
.wall__note { margin: 14px 0 0; font-size: 12px; color: rgba(35, 28, 38, .45); }

/* ---------- for partners: inside the machine (xray/xray.js) — the dark room of the opening ---------- */
/* it opens on the light washroom of «одна стена» and goes dark with the scene (--dk, set by xray.js: 0 light, 1 dark) */
.xray { position: relative; z-index: 6; height: 1800vh; background: color-mix(in srgb, #1a1311 calc(var(--dk, 1) * 100%), #ebe3d8); color: #f1ebe3; }
.xray__pin { position: sticky; top: 5px; height: calc(100vh - 10px); height: calc(100dvh - 10px); overflow: hidden; }
.xray__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the room falls off into darkness at the edges, as in the hero */
.xray__pin::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: calc(var(--dk, 1) * (1 - var(--inside, 0)));
  /* a fine grain over the fall-off breaks the rings an 8-bit dark gradient would otherwise show */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 75% 70% at 55% 45%, rgba(26, 19, 17, 0) 40%, rgba(26, 19, 17, .55) 75%, rgba(26, 19, 17, .92) 100%); }
.xray__tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.xray__say { position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(24px, 7vh, 72px); width: min(440px, calc(100% - 32px)); margin: 0;
  padding: 24px 28px 26px; border-radius: 26px; background: rgba(26, 19, 17, .62); border: 1px solid rgba(255, 236, 222, .1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .55s, transform .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .xray__say { -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); } }
.xray__say.is-on { opacity: 1; transform: none; }
.xray__say small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); margin-bottom: 12px; }
.xray__say b { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.01em; display: block; }
.xray__say span { display: block; color: rgba(241, 235, 227, .74); margin-top: 12px; font-size: 16px; line-height: 1.55; }
.xray .tag { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .45s; will-change: transform; }
.xray .tag.on { opacity: 1; }
.xray .tag i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 5px rgba(221, 152, 137, .22); }
.xray .tag svg { position: absolute; left: 0; top: 0; overflow: visible; }
.xray .tag svg line { stroke: rgba(241, 235, 227, .45); stroke-width: 1; }
.xray .tag span { position: absolute; white-space: nowrap; background: rgba(26, 19, 17, .72); color: #f1ebe3;
  border: 1px solid rgba(255, 236, 222, .14); border-radius: 999px; padding: 7px 12px; font: 500 13px var(--font); }
.xray .tag span small { color: rgba(241, 235, 227, .55); font-weight: 400; margin-left: 6px; }
@media (max-width: 760px) {
  .xray .tag span { font-size: 11px; padding: 5px 9px; }
  .xray .tag span small { display: none; }
  /* the card runs edge to edge above the bottom; a soft fade below it keeps the scene from crowding the text */
  .xray__pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; z-index: 2;
    background: linear-gradient(to top, rgba(26, 19, 17, .9) 30%, rgba(26, 19, 17, 0)); opacity: 0; transition: opacity .5s; }
  .xray__pin:has(.xray__say.is-on)::after { opacity: 1; }
  /* compact on a phone: the machine stays in the middle of the screen, the card keeps to the bottom */
  .xray__say { left: 12px; right: 12px; width: auto; bottom: 12px; padding: 14px 16px 15px; border-radius: 18px; }
  .xray__say small { font-size: 10px; margin-bottom: 7px; }
  .xray__say b { font-size: 21px; }
  .xray__say span { font-size: 13.5px; line-height: 1.45; margin-top: 6px; }
}

/* ---------- partners, about, contacts ---------- */
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #c97e6e; margin-bottom: 16px; }
.partners-x, .about-x { position: relative; z-index: 6; background: #f4eee7; color: #231c26; padding: clamp(80px, 12vh, 140px) var(--gutter); }
.partners-x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px) clamp(32px, 5vw, 80px); border-radius: 28px 28px 0 0; }
.px__intro { grid-column: 1 / -1; max-width: 760px; }
.px__title, .ax__title, .fx__title { font-weight: 400; font-size: clamp(40px, 5vw, 80px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.px__lead { margin-top: 22px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: rgba(35, 28, 38, .66); max-width: 30em; text-wrap: pretty; }
.px__grid { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(35, 28, 38, .14); }
.px__grid li { padding: 26px 24px 8px 0; }
.px__grid li + li { padding-left: 24px; border-left: 1px solid rgba(35, 28, 38, .14); }
.px__grid b, .px__steps b { display: block; font-weight: 500; font-size: 18px; letter-spacing: -.01em; margin-bottom: 8px; }
.px__grid span, .px__steps span { display: block; font-size: 15px; line-height: 1.5; color: rgba(35, 28, 38, .62); }
.px__sub { font-weight: 400; font-size: clamp(24px, 2vw, 32px); letter-spacing: -.03em; margin-bottom: 26px; }
.px__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.px__steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
.px__steps i { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 500; background: #fff; color: #c97e6e; border: 1px solid rgba(201, 126, 110, .35); }
.px__form { background: #fff; border-radius: 22px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 30px 60px -40px rgba(35, 28, 38, .35); }
.px__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.px__fields label { display: grid; gap: 6px; }
.px__fields label span { font-size: 13px; color: rgba(35, 28, 38, .6); }
.px__wide { grid-column: 1 / -1; }
.px__fields input, .px__fields select, .px__fields textarea {
  font: inherit; font-size: 16px; color: #231c26; width: 100%;
  padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(35, 28, 38, .16); background: #faf7f3;
  transition: border-color .2s, background .2s;
}
.px__fields input:focus, .px__fields select:focus, .px__fields textarea:focus { outline: none; border-color: #c97e6e; background: #fff; }
.px__fields .is-bad { border-color: #d0614c; }
.px__send { margin-top: 22px; border: 0; cursor: pointer; background: #231c26; color: #f6ece5; font: inherit; font-size: 15px; font-weight: 500; }
.px__send:hover { background: #3a2f3c; }
.px__note { margin-top: 12px; font-size: 12px; color: rgba(35, 28, 38, .5); }
.px__status { margin-top: 10px; font-size: 14px; color: #c97e6e; min-height: 1em; }
.about-x { background: #ece3da; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
.about-x .eyebrow { grid-column: 1 / -1; }
.ax__text { display: grid; gap: 16px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: rgba(35, 28, 38, .72); max-width: 30em; }
.foot-x { position: relative; z-index: 6; background: var(--hero-edge); color: var(--ivory); padding: clamp(72px, 11vh, 120px) var(--gutter) 36px; }
.fx__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; padding-bottom: clamp(56px, 9vh, 100px); border-bottom: 1px solid rgba(241, 235, 227, .14); }
.foot-x .eyebrow { color: #f0b6a8; }
.fx__list { list-style: none; margin: 0; padding: 0; display: grid; }
.fx__list li { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(241, 235, 227, .14); font-size: 17px; }
.fx__list li[hidden] { display: none; }
.fx__list li span { color: rgba(241, 235, 227, .55); display: inline-flex; align-items: center; gap: 10px; }
.fx__ic { width: 20px; height: 20px; flex: none; fill: none; stroke: #f0b6a8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fx__ic .fx__dot { fill: #f0b6a8; stroke: none; }
.fx__list a:hover { color: #f0b6a8; }
.fx__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; font-size: 13px; color: rgba(241, 235, 227, .55); }
.fx__logo { display: flex; align-items: center; gap: 10px; }
.fx__logo img:first-child { width: 24px; height: 24px; }
.fx__logo img:last-child { height: 16px; width: auto; filter: brightness(0) invert(1); }
@media (max-width: 1080px) {
  .px__grid { grid-template-columns: 1fr 1fr; }
  .px__grid li:nth-child(3) { padding-left: 0; border-left: 0; }
  .px__grid li:nth-child(n+3) { border-top: 1px solid rgba(35, 28, 38, .14); }
}
@media (max-width: 860px) {
  .partners-x, .about-x, .fx__top { grid-template-columns: 1fr; }
  .partners-x { border-radius: 22px 22px 0 0; }
  .px__grid { grid-template-columns: 1fr; }
  .px__grid li, .px__grid li + li { padding: 20px 0 6px; border-left: 0; }
  .px__grid li + li { border-top: 1px solid rgba(35, 28, 38, .14); }
  .px__fields { grid-template-columns: 1fr; }
  .about-x { row-gap: 24px; }
  .fx__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- the close: one worry less ---------- */
.calm { position: relative; z-index: 6; height: 260vh; background: #f1e3db; margin-top: -1px; }
.calm__pin { position: sticky; top: 5px; height: calc(100vh - 10px); height: calc(100dvh - 10px);
  overflow: hidden; }
.calm__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.calm__words {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 22vh;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
  color: #231c26; opacity: 0;
}
.calm__title { font-weight: 400; font-size: clamp(44px, 6.4vw, 104px); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.calm__text { font-size: clamp(16px, 1.3vw, 20px); color: rgba(35, 28, 38, .66); }
.calm__cta { margin-top: 10px; background: #231c26; color: #f6ece5; }
@media (max-width: 860px) {
  .calm__words { top: 18svh; gap: 14px; }
  .calm__title { font-size: clamp(38px, 11.5vw, 54px); }
}

/* the opening line sits under the mark, centred */
.stop--intro {
  left: var(--gutter); right: var(--gutter); width: auto;
  top: auto; bottom: 17vh; bottom: 17svh;
  text-align: center; align-items: center;
}
.stop--intro::before { display: none; }
.stop--intro .stop__title { font-size: clamp(30px, 3.4vw, 52px); max-width: 16em; text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .stop, .stop--left, .stop--right {
    left: 0; right: 0; width: auto;
    top: auto; bottom: 0;
    justify-content: flex-end;
    padding: 30vh var(--gutter) calc(34px + var(--bar) + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, color-mix(in srgb, var(--hero-edge, #0b0809) 100%, transparent) 0%, color-mix(in srgb, var(--hero-edge, #0b0809) 70%, transparent) 45%, color-mix(in srgb, var(--hero-edge, #0b0809) 0%, transparent) 100%);
  }
  .stop::before { display: none; }
  .stop__n { margin-bottom: 12px; }
  .stop__title { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.06; }
  .stop__text { margin-top: 12px; font-size: 16px; }
  .stop .btn-pill { margin-top: 22px; }
  .stop--intro { background: none; padding-top: 0; bottom: calc(15svh + var(--bar)); }
  .stop--intro .stop__title { font-size: clamp(26px, 7.4vw, 34px); }
  .film__hint { bottom: calc(18px + var(--bar) + env(safe-area-inset-bottom)); }
  .vend-tap { margin-top: 16px; }
  .stop--vend { background: none; padding-top: 0; }   /* the focus already darkens round the screen */
  .inside__head { top: auto; bottom: calc(52px + env(safe-area-inset-bottom)); left: var(--gutter); right: var(--gutter); width: auto; }
  .inside__eyebrow { margin-bottom: 12px; }
  .inside__title { font-size: clamp(28px, 8vw, 36px); }
  .inside__lead { font-size: 15px; margin-top: 12px; }
  .inside__story { top: auto; bottom: calc(46px + env(safe-area-inset-bottom)); transform: none; left: var(--gutter); right: var(--gutter); width: auto; }
  .inside__story.is-off { transform: translateY(14px); }
  /* on a phone the index is a row of five marks */
  .inside__index { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 22px; }
  .inside__index li { font-size: 0; height: 2px; background: rgba(35, 28, 38, .14); padding: 0 !important; border-radius: 2px; overflow: hidden; }
  .inside__index li::before { top: 0; height: 100%; width: 0; }
  .inside__index li.is-past::before, .inside__index li.is-on::before { width: 100%; }
  .inside__layers { font-size: clamp(30px, 8.6vw, 38px); }
  .inside__icon { width: 28px; height: 28px; margin-bottom: 12px; }
  .inside__layers p { font-size: 15px; margin-top: 14px; }
  .inside__end { top: 96px; }
  .inside__end h3 { font-size: clamp(30px, 8.6vw, 38px); }
  .inside__end-lead { font-size: 15px; }
  .inside__recap { margin-top: 22px; gap: 10px 18px; }
  .inside__recap li { font-size: 12px; }
}
@media (max-width: 860px) and (max-height: 640px) {
  .stop { padding-top: 18vh; }
  .stop__title { font-size: 28px; }
}
/* ---------- headline face: var(--display), Google Sans ---------- */
.stop__title, .inside__title, .inside__layers h3, .inside__end h3, .where__title, .where__row b,
.calm__title, .px__title, .ax__title, .fx__title, .px__sub {
  font-family: var(--display); font-weight: 400; letter-spacing: -.02em;
}
.stop__title, .inside__layers h3, .calm__title { line-height: 1.06; }

/* ---------- one type system for the text sections ----------
   One eyebrow, one section heading (Google Sans, the accent words in the italic serif), one lead. */
:root { --fs-h2: clamp(40px, 5.2vw, 80px); --fs-lead: clamp(16px, 1.3vw, 20px); --rv-ease: cubic-bezier(.22, .8, .14, 1); }
.where__eyebrow, .wall__eyebrow, .eyebrow, .inside__eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--pad-rose); margin: 0 0 18px; }
.foot-x .eyebrow { color: #f0b6a8; }
.where__title, .wall__title, .px__title, .ax__title, .fx__title {
  font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
.where__lead, .wall__lead, .px__lead {
  margin-top: 22px; font-size: var(--fs-lead); line-height: 1.55; color: rgba(35, 28, 38, .66); max-width: 30em; text-wrap: pretty; }
@media (max-width: 760px) { :root { --fs-h2: clamp(36px, 10vw, 48px); --fs-lead: 16px; } }


/* ---------- places as cards: the six dioramas (renders/places), each with its machine on the wall ---------- */
.where__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.where__card { display: grid; gap: 6px; }
.where__card picture { display: block; overflow: hidden; border-radius: 20px; background: #e6ddd3; margin-bottom: 12px; }
.where__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--rv-ease); }
.where__card b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.where__card span { font-size: clamp(14px, 1vw, 16px); line-height: 1.5; color: rgba(35, 28, 38, .6); max-width: 28em; }
@media (hover: hover) { .where__card:hover img { transform: scale(1.04); } }
@media (max-width: 860px) {
  /* a phone: a row to swipe, the next card peeking in */
  .where__cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px;
    scrollbar-width: none; overscroll-behavior-x: contain; }
  .where__cards::-webkit-scrollbar { display: none; }
  .where__card { flex: 0 0 78%; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .where__card img { aspect-ratio: 4 / 5; }
  .where__card b { font-size: 24px; }
}

/* ---------- FAQ for partners ---------- */
.px__faq { grid-column: 1 / -1; margin-top: clamp(24px, 4vh, 48px); }
.px__faq-list { margin-top: 18px; border-bottom: 1px solid rgba(35, 28, 38, .14); }
.px__faq details { border-top: 1px solid rgba(35, 28, 38, .14); }
.px__faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-family: var(--display); font-size: clamp(19px, 1.6vw, 26px); letter-spacing: -.015em; }
.px__faq summary::-webkit-details-marker { display: none; }
.px__faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  color: var(--pad-rose); transition: transform .45s var(--rv-ease); }
.px__faq details[open] summary::after { transform: rotate(45deg); }
.px__faq details p { margin: -6px 0 22px; max-width: 44em; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(35, 28, 38, .66); }
.px__faq details[open] p { animation: faqIn .5s var(--rv-ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- the footer's giant wordmark: rises out of the bottom edge ---------- */
.fx__mark { margin-top: clamp(40px, 7vh, 80px); width: 100%; aspect-ratio: 2030 / 580; overflow: hidden; }
.fx__mark::before { content: ""; display: block; width: 100%; height: 100%;
  -webkit-mask: url(../img/wordmark.svg) center / contain no-repeat; mask: url(../img/wordmark.svg) center / contain no-repeat;
  background: linear-gradient(180deg, rgba(240, 182, 168, .9), rgba(240, 182, 168, .12) 92%);
  transform: translateY(70%); transition: transform 1.6s var(--rv-ease); }
.fx__mark.is-in::before { transform: none; }


/* ---------- why EKKA: one day, from morning to night (day.js) ----------
   The pinned screen is a sky: its colour follows the clock, a soft sun crosses it, a thin moon and the stars
   come out at night. Everything sits on one centred column: the time above, the moment's drawing in the
   middle, its words below. Each drawing comes in its own way (from below, from the side, from the depth,
   turning over) and plays (--k, 0 → 1); the words rise word by word (--e). */
/* the sky's colours live on the section (day.js), so its 5px seams above and below the pinned stage carry the
   same colour; the stage itself stops 5px short of the screen's edges like every other (styles.css, .film__pin) */
.day { position: relative; z-index: 6; height: 540vh; margin-top: -28px; --bg: #efe7df; --ink: 35, 28, 38; --sun: 255, 236, 214; --night: 0; background: var(--bg); }
.day__pin { position: sticky; top: 5px; height: calc(100vh - 10px); height: calc(100dvh - 10px); overflow: hidden; border-radius: 28px 28px 0 0;
  background: var(--bg); color: rgb(var(--ink)); }
.day__sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.day__sky > i, .day__stars { position: absolute; display: block; }
/* the sun moves by transform only (day.js), so a frame never repaints the whole sky */
.day__sun { left: 0; top: 0; width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax; will-change: transform; opacity: calc(1 - var(--night));
  background: radial-gradient(closest-side, rgba(var(--sun), .9), rgba(var(--sun), .42) 20%, rgba(var(--sun), .12) 48%, rgba(var(--sun), 0) 72%); }
.day__stars { inset: 0; opacity: var(--night); }
.day__stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .6);
  animation: dayTwinkle var(--t) ease-in-out var(--dl) infinite; }
@keyframes dayTwinkle { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .25; transform: scale(.6); } }
/* a thin crescent with a halo */
.day__moon { left: 82%; top: 27%; width: 74px; height: 74px; border-radius: 50%; opacity: var(--night);
  transform: translate(-50%, calc(-50% + (1 - var(--night)) * 60px)); box-shadow: inset -15px 7px 0 0 #f4f1ea; filter: drop-shadow(0 0 18px rgba(244, 238, 222, .45)); }
.day__moon::before { content: ''; position: absolute; inset: -140%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(220, 222, 255, .16), rgba(220, 222, 255, 0)); }
.day__grain { inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.day__top { position: absolute; left: var(--gutter); right: var(--gutter); top: clamp(88px, 12vh, 120px); display: flex; align-items: center; gap: 24px; z-index: 3; }
.day__eyebrow { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--pad-rose); white-space: nowrap; }
.day__bar { position: relative; flex: 1; height: 1px; background: rgba(var(--ink), .16); container-type: inline-size; }
.day__bar::before { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--day, 0) * 100%); background: var(--pad-rose); transition: width .9s cubic-bezier(.2, .9, .2, 1); }
.day__bar i { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--pad-rose);
  transform: translateX(calc(var(--day, 0) * (100cqw - 7px))); transition: transform .9s cubic-bezier(.2, .9, .2, 1); box-shadow: 0 0 0 5px rgba(201, 126, 110, .18); }
.day__bar b { position: absolute; top: 10px; font-weight: 400; font-size: 11px; letter-spacing: .08em; color: rgba(var(--ink), .4); }
.day__bar b:last-of-type { right: 0; }

/* one centred column: time · drawing · words */
.day__layout { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; text-align: center;
  padding: calc(clamp(88px, 12vh, 120px) + 44px) var(--gutter) clamp(36px, 7vh, 72px); }
.day__time { display: grid; justify-items: center; }
.day__where { margin: 0 0 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink), .5); height: 1.4em; position: relative; width: 20em; }
.day__where span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--rv-ease); }
.day__where span.is-on { opacity: 1; transform: none; }
.day__clock { display: flex; font-family: var(--font); font-weight: 400; font-variant-numeric: tabular-nums lining-nums; font-size: clamp(44px, 4.6vw, 72px); line-height: 1; letter-spacing: -.02em; height: 1em; overflow: hidden; }
.day__clock .col { display: block; height: 1em; overflow: hidden; text-align: center; }
.day__clock .col i { display: block; font-style: normal; transition: transform .9s cubic-bezier(.2, .85, .2, 1); }
.day__clock .col:nth-child(2) i { transition-delay: .05s; } .day__clock .col:nth-child(4) i { transition-delay: .1s; } .day__clock .col:nth-child(5) i { transition-delay: .15s; }
.day__clock .col i b { display: block; height: 1em; font-weight: 400; }
.day__clock .sep { opacity: .35; padding: 0 .05em; }

.day__stage { position: relative; width: 100%; display: grid; place-items: center; perspective: 1100px; }
.day__viz { position: absolute; width: min(620px, 100%); opacity: 0; visibility: hidden; will-change: transform, opacity; --k: 0; color: rgb(var(--ink)); text-align: left; }
.viz__big { margin: 28px 0 0; font-family: var(--display); font-size: clamp(48px, 5vw, 84px); line-height: 1; letter-spacing: -.03em; text-align: center; }
.viz__big em { font-size: .34em; letter-spacing: 0; color: rgba(var(--ink), .55); }

/* words that rise out of their own masks, one after another, as --e goes 0 → 1 */
.day .wd { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
.day .wd > span { display: inline-block; transform: translateY(calc((1 - clamp(0, var(--e, 1) * 1.7 - var(--wi) * .1, 1)) * 110%)); }
.day__lines { position: relative; width: min(760px, 100%); height: 9.4em; }
.day__line { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; }
.day__line h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 48px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.day__line p { margin: 14px auto 0; font-size: var(--fs-lead); line-height: 1.55; color: rgba(var(--ink), .66); max-width: 30em; text-wrap: balance;
  opacity: clamp(0, var(--e, 1) * 3 - .45, 1); }
.day__line p b { font-weight: 500; color: rgb(var(--ink)); }

.day__frame { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding: 0 var(--gutter); z-index: 2; opacity: 0; visibility: hidden; }
.day__frame h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(42px, 6.4vw, 104px); line-height: 1.02; letter-spacing: -.03em; max-width: 13em; text-wrap: balance; }
.day__frame p { margin: 26px 0 0; max-width: 30em; font-size: var(--fs-lead); line-height: 1.55; color: rgba(var(--ink), .66); text-wrap: pretty; opacity: clamp(0, var(--e, 1) * 3 - .45, 1); }

/* 08:50 — the calendar: the dot hops back from the 17th to the 14th */
.viz-cal { --g: 10px; }
.viz-cal__days { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--g); }
.viz-cal__days span { --p: clamp(0, var(--k) * 4 - var(--n) * .3, 1); aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%;
  font-family: var(--display); font-size: clamp(22px, 2.2vw, 34px); border: 1px solid rgba(var(--ink), .12); background: rgba(255, 255, 255, .25);
  opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 16px)); }
.viz-cal__days small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink), .45); margin-bottom: 2px; }
.viz-cal__days .is-was { border: 1.5px dashed var(--pad-rose); background: transparent; }
.viz-cal__dot { --kd: clamp(0, (var(--k) - .3) * 1.8, 1); --c: calc(5 - 3 * var(--kd)); position: absolute; top: calc(100% + 16px);
  width: 14px; height: 14px; border-radius: 50%; background: var(--pad-rose);
  left: calc((100% - 6 * var(--g)) / 7 * (var(--c) + .5) + var(--g) * var(--c));
  transform: translate(-50%, calc(sin(var(--kd) * 180deg) * -64px)); box-shadow: 0 0 0 calc(9px * var(--kd)) rgba(201, 126, 110, .16); }
.viz-cal__legend { display: flex; justify-content: center; gap: 22px; margin-top: 46px; font-size: 13px; color: rgba(var(--ink), .55); }
.viz-cal__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.viz-cal__legend .o { border: 1.5px dashed var(--pad-rose); } .viz-cal__legend .f { background: var(--pad-rose); }
.viz-cal .viz__big { margin-top: 16px; color: var(--pad-rose); }

/* 13:20 — the break against the walk: 30 minutes = the full bar */
.viz-race { padding-top: 34px; }
.viz-race__row { --kb: clamp(0, (var(--k) - var(--d)) * 1.7, 1); display: grid; grid-template-columns: 9.5em 1fr 5em; align-items: center; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid rgba(var(--ink), .1); font-size: 14px; }
.viz-race__row span { color: rgba(var(--ink), .6); }
.viz-race__row em { font-style: normal; font-family: var(--display); font-size: 22px; text-align: right; white-space: nowrap; }
.viz-race__row em i { font-style: normal; }
.viz-race__row b { position: relative; height: 10px; border-radius: 999px; background: rgba(var(--ink), .75); width: calc(var(--w) * var(--kb)); }
.viz-race .r1 { --w: 33.3%; } .viz-race .r2 { --w: 100%; background: linear-gradient(90deg, var(--pad-rose), #b45f50); } .viz-race .r3 { --w: 3.4%; min-width: 10px; background: #4157a3; }
.viz-race .r2 u { position: absolute; right: 0; bottom: 16px; text-decoration: none; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #b45f50; opacity: clamp(0, var(--kb) * 4 - 3, 1); }
.viz-race__row.is-ekka span, .viz-race__row.is-ekka em { color: #4157a3; }
.viz-race__end { position: absolute; top: 0; bottom: 0; left: calc(9.5em + 14px + (100% - 9.5em - 5em - 28px) * .333); border-left: 1px dashed rgba(var(--ink), .4); font-size: 14px;
  opacity: clamp(0, var(--k) * 3, 1); }
.viz-race__end span { position: absolute; top: 4px; left: 8px; white-space: nowrap; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink), .45); }

/* 16:40 — a pack of twenty: eighteen fall back, two rise */
.viz-pack__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px 12px; max-width: 520px; margin: 0 auto; }
.viz-pack__grid svg { width: 100%; aspect-ratio: 40 / 90; overflow: visible; fill: rgba(var(--ink), .08); stroke: rgba(var(--ink), .35); stroke-width: 1.2;
  --f: clamp(0, (var(--k) - .25 - var(--n) * .014) * 2.6, 1);
  transform: translate(calc(var(--f) * var(--x) * .5px), calc(var(--f) * 16px)) rotate(calc(var(--f) * var(--r) * .5deg)); opacity: calc(1 - var(--f) * .78); }
.viz-pack__grid svg.is-one { fill: var(--pad-rose); stroke: var(--pad-rose); opacity: 1;
  transform: translateY(calc(var(--k) * -16px)) scale(calc(1 + var(--k) * .4)); filter: drop-shadow(0 8px calc(var(--k) * 16px) rgba(201, 126, 110, .5)); }
.viz-pack .viz__big { display: grid; }
.viz-pack .viz__big > span { grid-area: 1 / 1; }
.viz-pack .viz__big .a { opacity: clamp(0, 1 - var(--k) * 2.2, 1); transform: translateY(calc(var(--k) * -14px)); }
.viz-pack .viz__big .b { opacity: clamp(0, var(--k) * 2.2 - 1.1, 1); transform: translateY(calc((1 - var(--k)) * 14px)); color: var(--pad-rose); }

/* 21:40 — the evening, 21:00 → 00:00: a walk to the pharmacy cuts 40 minutes out of it; with EKKA it stays whole */
.viz-eve { padding-top: 6px; }
.viz-eve__row { display: grid; grid-template-columns: 5.5em 1fr; gap: 14px; align-items: center; padding: 18px 0; font-size: 14px; }
.viz-eve__row > span { color: rgba(var(--ink), .65); }
.viz-eve__row.is-ekka > span { color: #a9b6ff; font-weight: 500; }
.viz-eve__track { position: relative; height: 14px; }
.viz-eve__track b { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
/* the cut: 21:40 → 22:20 opens as --k plays */
.viz-eve .a { left: 0; width: calc(40 / 180 * 100% * clamp(0, var(--k) * 3, 1)); background: rgba(var(--ink), .7); }
.viz-eve .gap { left: calc(40 / 180 * 100%); width: calc(40 / 180 * 100%); border: 1.5px dashed var(--pad-rose); background: rgba(201, 126, 110, .12);
  opacity: clamp(0, var(--k) * 3 - 1, 1); }
.viz-eve .gap u { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); text-decoration: none; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pad-rose); }
.viz-eve .c { left: calc(80 / 180 * 100%); width: calc(100 / 180 * 100% * clamp(0, var(--k) * 3 - 1.4, 1)); background: rgba(var(--ink), .3); }
.viz-eve .whole { left: 0; width: calc(100% * clamp(0, var(--k) * 1.6 - .2, 1)); background: linear-gradient(90deg, #6d82e0, #a9b6ff);
  box-shadow: 0 0 calc(var(--k) * 24px) rgba(140, 160, 255, .45); }
.viz-eve__track i { position: absolute; left: calc(40 / 180 * 100%); top: 50%; width: 4px; height: 22px; border-radius: 2px; background: var(--pad-rose);
  transform: translate(-50%, -50%); opacity: clamp(0, var(--k) * 3 - 1.5, 1); }
.viz-eve__scale { margin-left: calc(5.5em + 14px); display: flex; justify-content: space-between; font-size: 11px; color: rgba(var(--ink), .45); }
.viz-eve .viz__big { color: #c9d2ff; }

/* short laptop screens: the drawing a size smaller, so the column always fits between the time and the words */
@media (min-width: 761px) and (max-height: 760px) {
  .day__layout { padding-top: calc(clamp(88px, 12vh, 120px) + 32px); padding-bottom: 28px; }
  .day__clock { font-size: 44px; }
  .day__stage { zoom: .8; }
  .day__lines { height: 8.4em; }
  .day__line h3 { font-size: 32px; }
}
/* phones */
@media (max-width: 760px) {
  .day__top { top: 76px; gap: 14px; }
  .day__sun { width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; }
  .day__moon { left: 84%; top: 22%; width: 46px; height: 46px; box-shadow: inset -10px 5px 0 0 #f4f1ea; }
  .day__layout { padding: 122px var(--gutter) 30px; }
  .day__clock { font-size: 40px; }
  .day__where { font-size: 11px; margin-bottom: 4px; }
  .day__viz { width: 100%; }
  .viz__big { margin-top: 14px; font-size: 42px; }
  .viz-cal { --g: 5px; }
  .viz-cal__days span { font-size: 18px; } .viz-cal__days small { font-size: 8.5px; letter-spacing: .1em; }
  .viz-cal__dot { width: 11px; height: 11px; top: calc(100% + 12px); transform: translate(-50%, calc(sin(var(--kd) * 180deg) * -44px)); }
  .viz-cal__legend { margin-top: 32px; font-size: 12px; }
  .viz-race { padding-top: 28px; }
  .viz-race__row { grid-template-columns: 6.8em 1fr 4em; gap: 10px; padding: 11px 0; font-size: 12.5px; }
  .viz-race__row em { font-size: 18px; }
  .viz-race__end { left: calc(6.8em + 10px + (100% - 6.8em - 4em - 20px) * .333); }
  .viz-race .r2 u { font-size: 9.5px; bottom: 14px; }
  .viz-pack__grid { gap: 10px 7px; }
  .viz-eve__row { grid-template-columns: 4.6em 1fr; gap: 10px; padding: 14px 0; font-size: 12.5px; }
  .viz-eve__scale { margin-left: calc(4.6em + 10px); font-size: 10px; }
  .viz-eve .gap u { font-size: 9.5px; }
  .day__lines { height: 10.6em; }
  .day__line h3 { font-size: clamp(25px, 7vw, 30px); }
  .day__line p { margin-top: 10px; font-size: 15px; }
  .day__frame h2 { font-size: clamp(38px, 11vw, 52px); }
}
@media (max-width: 760px) and (max-height: 720px) {
  .day__top { top: 68px; }
  .day__layout { padding-top: 106px; padding-bottom: 18px; }
  .day__clock { font-size: 34px; }
  .viz__big { font-size: 34px; margin-top: 8px; }
  .viz-cal__legend { margin-top: 26px; }
  .viz-race__row { padding: 8px 0; }
  .viz-eve__row { padding: 10px 0; }
  .day__lines { height: 9.6em; }
  .day__line h3 { font-size: 23px; }
  .day__line p { font-size: 14px; margin-top: 8px; }
}

/* ---------- the turn: from the woman at the wall to the place that hangs it ---------- */
.turn { position: relative; z-index: 6; background: #1f1a1c; color: #f4ede6; border-radius: 28px 28px 0 0; margin-top: -28px;
  min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center;
  padding: clamp(96px, 14vh, 160px) var(--gutter); overflow: hidden; }
.turn::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(1100px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(201, 126, 110, .22), rgba(201, 126, 110, 0)); pointer-events: none; }
.turn > * { position: relative; }
.turn__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #f0b6a8; margin: 0 0 22px; }
.turn__title { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6vw, 96px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; margin: 0; max-width: 14em; }
.turn__lead { margin: 26px 0 0; max-width: 32em; font-size: var(--fs-lead); line-height: 1.55; color: rgba(244, 237, 230, .68); text-wrap: pretty; }
.turn__btns { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.turn__btns a { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 500;
  text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.turn__btns .is-main { background: #f4ede6; color: #231c26; }
.turn__btns .is-alt { border: 1px solid rgba(244, 237, 230, .35); color: #f4ede6; }
@media (hover: hover) { .turn__btns .is-main:hover { background: #fff; } .turn__btns .is-alt:hover { border-color: #f4ede6; } }
.turn + .wall { border-radius: 28px 28px 0 0; margin-top: -28px; }
.where[hidden] { display: none; }
/* ---------- transitions: chapters arrive as sheets; «О нас» settles back as the dark footer covers it ---------- */
.where { border-radius: 28px 28px 0 0; margin-top: -28px; box-shadow: 0 -24px 60px rgba(35, 28, 38, .08); }
.foot-x { z-index: 7; border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px rgba(0, 0, 0, .28); }
.about-x { position: sticky; transform-origin: 50% 100%; }
@media (max-width: 860px) { .where, .foot-x { border-radius: 22px 22px 0 0; } }

/* the colour the pack's film fills the screen with, at the hand-over to «Что внутри» (3d/scene.js) */
/* 5px clear of both screen edges, like every pinned stage, and a gradient rather than a colour: Safari 26 takes the
   colour of a layer touching the edge for its bars and keeps it (styles.css, .film__pin) */
/* the veil of a jump from the menu (3d/scene.js jumpTo): over the page, under the bar and the chat */
.jump-veil { position: fixed; inset: 0; z-index: 45; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.jump-veil.is-on { opacity: 1; transition-duration: .2s; }
.bridge-veil { position: fixed; left: 0; right: 0; top: 5px; bottom: 5px; z-index: 40; background: linear-gradient(var(--pad-bg), var(--pad-bg)); opacity: 0; pointer-events: none; }
/* lines: headings balanced, paragraphs without a lone word on the last line */
h1, h2, h3, .stop__title, .unbox__say b, .xray__say b, .where__card b, .px__faq summary { text-wrap: balance; }
p, li span, .xray__say span, .where__card span, dd, .px__faq details p { text-wrap: pretty; }
/* ---------- one way text arrives (reveal.js) ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--rv-ease), transform 1.1s var(--rv-ease); transition-delay: var(--d, 0s); }
.rv.is-in, .rv-g.is-in > .rv { opacity: 1; transform: none; }
.rv-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .07em .14em; margin: 0 -.07em -.14em; }
.rv-h .w > span { display: inline-block; transform: translateY(108%); transition: transform 1.15s var(--rv-ease); transition-delay: calc(var(--i, 0) * 55ms); }
.rv-h.is-in .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-h .w > span { transition: none; opacity: 1; transform: none; }
}