/* ==========================================================================
   Lovely&Friendly — Oleg Vishnevsky
   Source: Figma um3kUuxAgxj4r5mFgmP43F, frames 2775:16 (EN) and 2788:16 (RU), 1440 × 6550
   Desktop (≥ 1080px): poster layout, every coordinate is the Figma value × --u
   Mobile / tablet (< 1080px): flow layout over the same particle figure
   The particle figure and wall are drawn by js/figure.js into .figure-slot and .plate
   ========================================================================== */

@font-face { font-family: "LF Display"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("../assets/fonts/sofia-sans-extra-condensed-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "LF Display"; font-weight: 900; font-style: normal; font-display: swap;
  src: url("../assets/fonts/sofia-sans-extra-condensed-cyrillic-900-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "LF Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "LF Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/inter-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "LF Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/inter-arrows-400-normal.woff2") format("woff2");
  unicode-range: U+2190, U+2192; }
@font-face { font-family: "LF Text"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "LF Text"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/fonts/inter-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "LF Text"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "LF Text"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../assets/fonts/inter-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* colour: one committed dark look, taken from the mockup */
  --ink: #00031a;           /* page background */
  --paper: #ffffff;         /* text */
  --teal: #38b1ba;          /* title, playlist heading, the hoodie */
  --muted: #7f9394;         /* "get in touch" */
  --hair: rgba(255, 255, 255, 0.376);
  --shade: rgba(0, 3, 26, 0.56);
  --frame-bg: #0a1030;      /* photo frames before the picture is decoded */
  color-scheme: dark;

  /* type */
  --font-display: "LF Display", "Sofia Sans Extra Condensed", "Haettenschweiler", "Impact", "Arial Narrow", sans-serif;
  --font-text: "LF Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* 1 design pixel of the 1440 frame */
  --frame: min(100vw, 2200px);
  --u: calc(var(--frame) / 1440);
  --fu: var(--u);           /* unit of the cases feed (cover height = 166 × --fu) */

  --fs-s: max(13px, calc(var(--u) * 16));
  --fs-nav: max(12px, calc(var(--u) * 14));
  --fs-20: max(13px, calc(var(--u) * 20));
  --fs-p: max(15px, calc(var(--u) * 24));
  --fs-lead: max(18px, calc(var(--u) * 32));
  --fs-m: max(18px, calc(var(--u) * 33.354));
  --fs-soon: calc(var(--u) * 32);
  --fs-l: calc(var(--u) * 120);
  --fs-xxl: calc(var(--u) * 170);
  --fs-xl: calc(var(--u) * 258.561);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wipe: cubic-bezier(0.7, 0, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }   /* hidden: for browsers without clip */

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--fs-s);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;        /* not hidden: body must not become a scroll box of its own */
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 3D layer (js/figure.js) ---------- */

#figure-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.is-3d #figure-canvas { opacity: 1; }

.page {
  touch-action: pan-y pinch-zoom;
  position: relative;
  width: var(--frame);
  margin: 0 auto;
}

/* the wall goes edge to edge on wide screens, the layout stays in the 2200px frame */
.plate {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  margin-left: -50vw;
  height: calc(var(--u) * 2630);
  background:
    linear-gradient(to bottom, rgba(0, 3, 26, 0) 93%, var(--ink) 100%),
    linear-gradient(var(--shade), var(--shade)),
    url("../assets/wall.jpg") center bottom / cover no-repeat,
    #2b3233;
  z-index: 0;
  transition: background-color 0.6s ease;
}
/* the photo wall is only the fallback (no JavaScript, no WebGL); with the particle scene on its way the ground is dark from the start */
.wants-3d .plate,
.is-wall .plate { background: linear-gradient(to bottom, #03081f 0%, #03081f 70%, var(--ink) 100%); }
/* while the data of the figure are loading, a soft still of the same particle figure stands in its place and then dissolves into it */
.figure-slot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/figure-still.webp") center / 100% 100% no-repeat;
  opacity: 0; transition: opacity 0.9s ease;
}
.wants-3d:not(.is-3d) .figure-slot::before { opacity: 1; transition: none; }

.figure-slot {
  position: absolute;
  z-index: 0;
  top: calc(var(--u) * 321);
  height: calc(var(--u) * 2203);
  width: calc(var(--u) * 2203 * 0.32);
  left: calc(var(--u) * 632);
  transform: translateX(-50%);
  touch-action: pan-y;
  cursor: grab;
}
.is-dragging,
.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

.figure-shadow {
  position: absolute;
  left: 50%;
  bottom: -1.2%;
  width: 120%;
  height: 5.5%;
  transform: translateX(-46%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.figure-fallback {
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: brightness(0.74);
  transition: opacity 0.5s ease;
}
.is-3d .figure-fallback,
.wants-3d .figure-fallback { opacity: 0; }

/* ---------- language: one pill, the other one slides out to the left ---------- */

.lang {
  --pw: max(43px, calc(var(--u) * 43));
  --ph: max(26px, calc(var(--u) * 26));
  --step: max(51px, calc(var(--u) * 51));
  position: absolute;
  z-index: 4;
  top: calc(var(--u) * 20);
  right: calc(max(0px, (100% - var(--frame)) / 2) + var(--u) * 40);   /* 40 from the edge of the frame, also on screens wider than 2200px */
  width: calc(var(--pw) + var(--step));
  height: var(--ph);
  pointer-events: none;
}
.lang__btn {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--pw);
  height: var(--ph);
  display: grid;
  place-items: center;
  border: max(1px, calc(var(--u) * 1)) solid var(--paper);   /* 1px stroke in the mockup */
  border-radius: 50%;
  font-size: var(--fs-nav);
  line-height: 1;
  text-transform: uppercase;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  transition: transform 0.55s var(--ease-out), opacity 0.25s ease, visibility 0s linear 0.55s, background-color 0.2s ease, color 0.2s ease;
}
.lang__btn::after { content: ""; position: absolute; inset: -10px -4px; } /* touch target */
.lang__btn[aria-current="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 2;
  transition: transform 0.55s var(--ease-out), opacity 0.25s ease, visibility 0s, background-color 0.2s ease, color 0.2s ease;
}
.lang.is-open .lang__btn:not([aria-current="true"]) {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(var(--step) * -1));
  transition: transform 0.55s var(--ease-out), opacity 0.25s ease, visibility 0s, background-color 0.2s ease, color 0.2s ease;
}
.lang__btn:active { background: var(--paper); color: var(--ink); }
@media (hover: hover) { .lang__btn:hover { background: var(--paper); color: var(--ink); } }   /* no stuck hover after a tap */

/* js/site.js has not started (the 3 s guard): both pills are shown as plain links */
.rv-all .lang__btn { opacity: 1; visibility: visible; transform: none; }
.rv-all .lang__btn:not([aria-current]) { transform: translateX(calc(var(--step) * -1)); }

/* ---------- shared type ---------- */

.poster { position: relative; z-index: 2; overflow-y: clip; }   /* letters waiting under their masks must not add height to the page */

.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  font-synthesis: none;
  letter-spacing: -0.04em;
  line-height: 0.8;
}
.display--l { font-size: var(--fs-l); }
.display--xxl { font-size: var(--fs-xxl); }

/* the title stands on its cap height: line box 1.2em (0.9 above the baseline), caps are 0.655em tall */
.title {
  color: var(--teal);
  font-size: var(--fs-xl);
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-top: -0.245em;
}
.title__fit { display: inline-block; }

.hello { font-size: var(--fs-m); font-weight: 700; line-height: 0.9; text-transform: uppercase; }
.lead { font-size: var(--fs-lead); line-height: 1.1; }
.ai__text { font-size: var(--fs-p); line-height: 1.08334; }
/* Figma sets 16/1.4 lists on a whole-pixel pitch: 22px per row, not 22.4 */
.list { line-height: 1.375; }
.cases__soon { font-size: var(--fs-soon); letter-spacing: 0.02em; }

.ph { overflow: hidden; }
.ph img { width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.ph--hills img { object-position: 50% 100%; }

.badge { display: block; }
.badge img { width: 100%; height: auto; }

/* ---------- cases feed: 62 covers and their copy, 221 s per loop (Figma motion) ---------- */

.feed { overflow: hidden; height: calc(var(--fu) * 166); }
.feed__track {
  display: flex;
  gap: calc(var(--fu) * 10);
  width: max-content;
  height: 100%;
  animation: feed 221s linear infinite;
  will-change: transform;
}
.feed__item {
  flex: none;
  width: calc(var(--fu) * var(--w));
  height: 100%;
  max-width: none;
  object-fit: cover;
  background: var(--frame-bg);
  -webkit-user-drag: none;
  user-select: none;
}
@keyframes feed { to { transform: translate3d(calc(var(--fu) * -14990.93), 0, 0); } }

.feed { touch-action: pan-y; }
.feed__track { transition: opacity 0.35s ease; }
.feed.is-zoom .feed__track { opacity: 0.3; }

/* a cover opened over the strip (js/feed.js): 4 times the cover, the video of the shot plays in it */
.zoom-cap {
  position: fixed; left: 0; top: 0; z-index: 8; margin: 0; padding-top: 10px;
  font-size: var(--fs-nav); line-height: 1.3; color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}
.zoom-cap.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.14s, visibility 0s; }
.zoom-cap__n { margin-right: 0.8em; color: var(--muted); font-variant-numeric: tabular-nums; }
.zoom.is-tap { pointer-events: auto; }
.zoom-shade { position: fixed; inset: 0; z-index: 5; background: var(--ink); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.zoom-shade.is-open { opacity: 0.84; visibility: visible; transition: opacity 0.35s ease, visibility 0s; }
.zoom__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.25s linear; }
.zoom {
  position: fixed; left: 0; top: 0; z-index: 6;
  overflow: hidden; pointer-events: none;
  background: var(--frame-bg) center / cover no-repeat;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  transform-origin: 0 0;
  opacity: 0; visibility: hidden;
  transition: transform 0.24s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.2s ease 0.04s, visibility 0s linear 0.26s;
}
.zoom.is-open {
  opacity: 1; visibility: visible;
  transition: transform 0.46s var(--ease-out), opacity 0.12s ease, visibility 0s;
}
.zoom__img, .zoom__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 0.25s ease; }
.zoom__img.is-ready, .zoom__video.is-playing { opacity: 1; }

/* ---------- playlist ---------- */

.pl__h { color: var(--teal); }
.pl__desc { font-size: var(--fs-20); font-weight: 500; line-height: 1.1; letter-spacing: -0.05em; }
.pl__listen { font-size: var(--fs-s); line-height: 1.4; text-align: left; white-space: nowrap; }
.pl__listen::after { content: ""; position: absolute; inset: -12px -16px; }
.pl__listen:disabled { opacity: 0.4; cursor: default; }
.pl__listen [data-listen-label] { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--ease-out); }
.pl__listen[aria-pressed="true"] [data-listen-label] { background-size: 100% 1px; }
@media (hover: hover) { .pl__listen:hover [data-listen-label] { background-size: 100% 1px; } }
.pl__canvas { display: block; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.pl-on .pl__canvas { opacity: 1; }

/* ---------- contact ---------- */

.contact__label { font-size: var(--fs-p); font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--muted); }
.contact__text { display: block; }
.contact__line { display: block; height: 1px; background: var(--hair); transform-origin: 0 50%; }
.contact__big a { display: block; width: max-content; transition: color 0.25s ease; }
.contact__big a:active { color: var(--teal); }
@media (hover: hover) { .contact__big a:hover { color: var(--teal); } }
.contact__small { font-size: var(--fs-20); line-height: 1.4; }
.contact__small a { display: block; width: max-content; }
.contact__mail { font-size: var(--fs-20); line-height: 1.4; display: block; width: max-content; user-select: all; -webkit-user-select: all; }
.contact__small a,
.contact__mail { position: relative; }
.contact__small a::after,
.contact__mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.14em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s var(--ease-out); }
.contact__small a:active::after,
.contact__mail:active::after { transform: scaleX(1); }
@media (hover: hover) {
  .contact__small a:hover::after,
  .contact__mail:hover::after { transform: scaleX(1); }
}

/* ==========================================================================
   Desktop poster: Figma coordinates
   ========================================================================== */
@media (min-width: 1080px) {
  .poster { height: calc(var(--u) * 6550); }
  .poster > section > *,
  .poster > footer > * { position: absolute; }

  .title { left: calc(var(--u) * 8); top: calc(var(--u) * 69); }
  .hello { left: calc(var(--u) * 960); top: calc(var(--u) * 397); width: calc(var(--u) * 255); }
  .roles { left: calc(var(--u) * 40); top: calc(var(--u) * 744); width: calc(var(--u) * 334); }
  .lead { left: calc(var(--u) * 615); top: calc(var(--u) * 854); width: calc(var(--u) * 775); }
  .ph--flash { left: calc(var(--u) * 615); top: calc(var(--u) * 1036); width: calc(var(--u) * 325); height: calc(var(--u) * 217); }

  .awards__h { left: calc(var(--u) * 40); top: calc(var(--u) * 1348); }
  .awards__list { left: calc(var(--u) * 40); top: calc(var(--u) * 1516); width: calc(var(--u) * 298); }
  .badge { left: calc(var(--u) * 960); top: calc(var(--u) * 1609); width: calc(var(--u) * 105.055); height: calc(var(--u) * 105.055); }

  .ph--museum { left: calc(var(--u) * 40); top: calc(var(--u) * 1930); width: calc(var(--u) * 284); height: calc(var(--u) * 506); }
  .ph--card { left: calc(var(--u) * 385); top: calc(var(--u) * 1930); width: calc(var(--u) * 210); height: calc(var(--u) * 139); }
  .ph--sea { left: calc(var(--u) * 615); top: calc(var(--u) * 1930); width: calc(var(--u) * 210); height: calc(var(--u) * 373); }
  .ph--hills { left: calc(var(--u) * 385); top: calc(var(--u) * 2426); width: calc(var(--u) * 210); height: calc(var(--u) * 298); }
  .ph--sofa { left: calc(var(--u) * 960); top: calc(var(--u) * 2241); width: calc(var(--u) * 200); height: calc(var(--u) * 355); }
  .clients__h { left: calc(var(--u) * 960); top: calc(var(--u) * 1930); }
  .clients__list { left: calc(var(--u) * 960); top: calc(var(--u) * 2069); width: calc(var(--u) * 247); }

  .ind__h { left: calc(var(--u) * 615); top: calc(var(--u) * 2789); }
  .ind__a { left: calc(var(--u) * 1082); top: calc(var(--u) * 2789); white-space: nowrap; }
  .ind__b { left: calc(var(--u) * 1197); top: calc(var(--u) * 2789); white-space: nowrap; }
  :root[lang="ru"] .ind__a { left: calc(var(--u) * 998); }
  :root[lang="ru"] .ind__b { left: calc(var(--u) * 1113); }
  .focus__h { left: calc(var(--u) * 40); top: calc(var(--u) * 3089); }
  .focus__list { left: calc(var(--u) * 40); top: calc(var(--u) * 3257); white-space: nowrap; }
  .ai__h { left: calc(var(--u) * 619); top: calc(var(--u) * 3093); }
  :root[lang="ru"] .ai__h { line-height: 0.93333; }   /* 112 / 120, as in the RU frame */
  .ai__list { left: calc(var(--u) * 615); top: calc(var(--u) * 3350); width: calc(var(--u) * 323); }
  .ai__text { left: calc(var(--u) * 615); top: calc(var(--u) * 3591); width: calc(var(--u) * 670); }

  .cases__h { left: calc(var(--u) * 41); top: calc(var(--u) * 3931); }
  .cases__soon { left: calc(var(--u) * 401); top: calc(var(--u) * 3937); }
  :root[lang="ru"] .cases__soon { left: calc(var(--u) * 454); }
  .feed { left: 50%; top: calc(var(--u) * 4142); width: 100vw; margin-left: -50vw; }

  .pl__canvas { left: 50%; top: calc(var(--u) * 5290); width: 100vw; margin-left: -50vw; height: calc(var(--u) * 470); }
  .pl__h { left: calc(var(--u) * 39); top: calc(var(--u) * 5042); }
  .pl__desc { left: calc(var(--u) * 39); top: calc(var(--u) * 5295); }
  .pl__listen { left: calc(var(--u) * 529); top: calc(var(--u) * 5318); }

  .contact__label { left: calc(var(--u) * 41); top: calc(var(--u) * 5778); width: calc(var(--u) * 1164); }
  .contact__line { position: absolute; left: calc(var(--u) * 253); top: calc(var(--u) * 13); width: calc(var(--u) * 911); }
  .contact__big { left: calc(var(--u) * 41); top: calc(var(--u) * 5964); }
  .contact__small { left: calc(var(--u) * 845); top: calc(var(--u) * 5964); }
  .contact__mail { left: calc(var(--u) * 845); top: calc(var(--u) * 6470); }
}

/* ==========================================================================
   Tablet and mobile: the poster retold as a flow.
   The figure keeps its place in the middle; its head and shoulders stay clear,
   the copy starts at the chest, where the figure is dimmed the way the photo
   is in the mockup (50 % over the ink). Collage and contacts are composed, not stacked.
   ========================================================================== */
@media (max-width: 1079.98px) {
  :root {
    --gutter: clamp(16px, 4.4vw, 40px);
    --gap: clamp(84px, 25vw, 150px);
    --fs-s: clamp(14px, 3.7vw, 16px);
    --fs-nav: 13px;
    --fs-20: clamp(16px, 4.3vw, 21px);
    --fs-p: clamp(18px, 4.7vw, 26px);
    --fs-lead: clamp(21px, 5.6vw, 34px);
    --fs-m: clamp(18px, 5vw, 34px);
    --fs-soon: clamp(17px, 4.6vw, 32px);
    --fs-l: clamp(44px, 14.4vw, 124px);
    --fs-xxl: clamp(68px, 24.5vw, 176px);
    --fs-xl: 17.6vw;
    --fu: calc(132px / 166);
    --plate-h: 330vw;
    --copy-top: 84vw;                    /* from the title to the first line of copy: the portrait stays clear */
    --dim: rgba(0, 3, 26, 0.5);
    --cg: 12px;                          /* gap of the photo collage */
    --c: calc((100vw - 2 * var(--gutter) - var(--cg)) / 2);   /* collage column */
  }

  .plate { height: var(--plate-h); }
  .figure-slot {
    top: calc(var(--plate-h) * 0.105);
    height: calc(var(--plate-h) * 0.845);
    width: calc(var(--plate-h) * 0.845 * 0.32);
    left: 50%;
  }

  .lang { --pw: 48px; --ph: 30px; --step: 56px; top: 14px; right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .lang__btn { border-width: 1.5px; }

  .poster { padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 64px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .poster > section,
  .poster > footer { position: relative; }
  .list { line-height: 1.45; }

  /* ---- hero: title, clear portrait, then a caption row and the lead on the dimmed torso ---- */
  .hero { display: grid; grid-template-columns: auto 1fr; column-gap: var(--cg); padding-top: 66px; }
  .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    width: 100vw;
    margin-left: -50vw;
    height: calc(var(--plate-h) * 1.04);
    background: linear-gradient(to bottom,
      rgba(0, 3, 26, 0) calc(var(--copy-top) - 6vw),
      var(--dim) calc(var(--copy-top) + 26vw),
      var(--dim) 92%,
      rgba(0, 3, 26, 0) 100%);
    pointer-events: none;
  }
  /* copy that lies on the figure keeps a dark edge */
  .hello, .roles, .lead, .awards__list { text-shadow: 0 0 12px var(--ink), 0 0 3px var(--ink); }
  .hero > * { grid-column: 1 / -1; }
  .title { grid-row: 1; margin-left: calc(8px - var(--gutter)); margin-right: calc(8px - var(--gutter)); }
  .hello { grid-column: 1; grid-row: 2; margin-top: var(--copy-top); }
  .roles { grid-column: 2; grid-row: 2; justify-self: end; margin-top: calc(var(--copy-top) - 0.24em); }
  .lead { grid-row: 3; margin-top: 9vw; }
  .ph--flash { grid-column: 1 / -1; grid-row: 4; justify-self: end; width: 60%; margin-top: 7vw; aspect-ratio: 325 / 217; }

  .awards { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 30vw; }
  .awards__h { grid-column: 1 / -1; }
  .awards__list { margin-top: 24px; }
  .badge { width: clamp(64px, 18vw, 105px); }

  /* ---- collage: two interlocked columns, the heading and the list stand next to the last photo ---- */
  .clients {
    margin-top: 20vw;
    height: calc(var(--c) * 3.07 + var(--cg) * 2 + var(--fs-l) * 0.8 + 16px + var(--fs-s) * 1.45 * 6);
  }
  .clients > * { position: absolute; }
  .ph--museum { left: 0; top: 0; width: var(--c); height: calc(var(--c) * 1.7817); }
  .ph--card { right: 0; top: 0; width: var(--c); height: calc(var(--c) * 0.6619); }
  .ph--sea { right: 0; top: calc(var(--c) * 0.6619 + var(--cg)); width: var(--c); height: calc(var(--c) * 1.7762); }
  .ph--hills { left: 0; top: calc(var(--c) * 1.7817 + var(--cg)); width: calc(var(--c) * 0.74); height: calc(var(--c) * 1.05); }
  .ph--sofa { right: 0; top: calc(var(--c) * 2.4381 + var(--cg) * 2); width: calc(var(--c) * 0.7); height: calc(var(--c) * 1.2425); }
  .clients__h { left: 0; top: calc(var(--c) * 3.07 + var(--cg) * 2); }
  .clients__list { left: 0; top: calc(var(--c) * 3.07 + var(--cg) * 2 + var(--fs-l) * 0.8 + 16px); }

  .work { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--cg); margin-top: var(--gap); }
  .work > * { grid-column: 1 / -1; }
  .ind__a { grid-column: 1; margin-top: 24px; }
  .ind__b { grid-column: 2; margin-top: 24px; }
  .focus__h, .ai__h { margin-top: var(--gap); }
  .focus__list, .ai__list { margin-top: 24px; }
  :root[lang="ru"] .ai__h { line-height: 0.93333; }
  .ai__text { margin-top: 30px; max-width: 30em; line-height: 1.12; }

  .cases { margin-top: var(--gap); display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 12px; }
  .feed { flex: 0 0 100vw; width: 100vw; margin: 28px 0 0 calc(50% - 50vw); }

  /* ---- playlist: copy, then the field edge to edge; the contacts start right under its front row ---- */
  .playlist { margin-top: var(--gap); padding-bottom: 56vw; }
  .pl__canvas { position: absolute; left: 50%; bottom: 0; width: 100vw; margin-left: -50vw; height: 72vw; }
  .pl__h, .pl__desc, .pl__listen { position: relative; z-index: 1; }
  .pl__desc { margin-top: 24px; font-size: clamp(15px, 4.3vw, 21px); }
  .pl__listen { margin-top: 14px; min-height: 44px; font-size: var(--fs-20); }

  .contact { margin-top: 10vw; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--cg); }
  .contact > * { grid-column: 1 / -1; }
  .contact__label { display: flex; align-items: center; gap: 18px; }
  .contact__text { flex: none; }
  .contact__line { flex: 1; }
  .contact__big { margin-top: 12vw; }
  .contact__small { margin-top: 13vw; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--cg); line-height: 2.1; }
  .contact__mail { margin-top: 8vw; line-height: 2.1; }
}

/* ---- tablet: the three axes of the mockup (40, 615 and 960 of 1440) ---- */
@media (min-width: 600px) and (max-width: 1079.98px) {
  :root {
    --plate-h: 250vw;
    --copy-top: 66vw;
    --gap: clamp(96px, 15vw, 150px);
    --fs-s: clamp(14px, 2vw, 17px);
    --fs-20: clamp(17px, 2.5vw, 22px);
    --fs-p: clamp(20px, 3vw, 26px);
    --fs-lead: clamp(24px, 3.9vw, 34px);
    --fs-m: clamp(24px, 4vw, 34px);
    --fs-l: 9.4vw;
    --fs-xxl: 15vw;
    --fs-xl: 17.6vw;
    --fu: calc(150px / 166);
    --c: calc((100vw - 2 * var(--gutter) - 2 * var(--cg)) / 3);
    --axes: 42.7fr 24fr 33.3fr;
  }

  .hero { grid-template-columns: var(--axes); column-gap: 0; }
  .hello { grid-column: 1; }
  .roles { grid-column: 2 / -1; justify-self: start; }
  .lead { margin-top: 6vw; max-width: 24em; }
  .ph--flash { grid-column: 2 / -1; justify-self: start; margin-top: 5vw; width: 78%; }

  .awards { grid-template-columns: var(--axes); margin-top: 22vw; }
  .awards__list { grid-column: 1 / 3; }
  .badge { grid-column: 3; }

  /* collage: three columns, as in the mockup the heading and the list open the right one */
  .clients { margin-top: 15vw; height: calc(var(--c) * 2.8317 + var(--cg)); }
  .ph--card { right: auto; left: calc(var(--c) + var(--cg)); }
  .ph--sea { right: auto; left: calc(var(--c) + var(--cg)); }
  .clients__h { left: calc((var(--c) + var(--cg)) * 2); top: 0; }
  .clients__list { left: calc((var(--c) + var(--cg)) * 2); top: calc(var(--fs-l) * 0.8 + 16px); }
  .ph--sofa { top: calc(var(--fs-l) * 0.8 + 16px + var(--fs-s) * 1.45 * 6 + 4vw); width: calc(var(--c) * 0.82); height: calc(var(--c) * 0.82 * 1.775); right: auto; left: calc((var(--c) + var(--cg)) * 2); }

  .work { grid-template-columns: var(--axes); column-gap: 0; }
  .ind__h { grid-column: 2 / -1; }
  .ind__a { grid-column: 2; }
  .ind__b { grid-column: 3; }
  .focus__h, .focus__list { grid-column: 1 / -1; }
  .ai__list { grid-column: 1; }
  .ai__text { grid-column: 2 / -1; margin-top: 24px; }

  .cases__soon { margin-left: 2vw; }
  .feed { margin-top: 4vw; }

  .playlist { display: grid; grid-template-columns: var(--axes); align-items: end; padding-bottom: 46vw; }
  .pl__h { grid-column: 1 / -1; }
  .pl__desc { grid-column: 1 / 3; font-size: var(--fs-20); }
  .pl__listen { grid-column: 3; margin-top: 0; min-height: 0; justify-self: start; }
  .pl__canvas { height: 50vw; }

  .contact { grid-template-columns: 58.7fr 41.3fr; column-gap: 0; margin-top: 6vw; }
  .contact__big { grid-column: 1; grid-row: 2 / 4; margin-top: 9vw; }
  .contact__small { grid-column: 2; grid-row: 2; margin-top: 9vw; display: block; line-height: 1.75; }
  .contact__mail { grid-column: 2; grid-row: 3; align-self: end; margin-top: 0; margin-bottom: 0.9em; line-height: 1.4; }
}

/* narrow tablets: the long rows of the AI list need the whole width, the paragraph steps to the right axis below it */
@media (min-width: 600px) and (max-width: 719.98px) {
  .ai__list { grid-column: 1 / -1; }
  .ai__text { margin-top: 30px; }
}

/* ==========================================================================
   Reveals (js/site.js). Hidden states exist only under html.rv, so without JS,
   with reduced motion, or after the 3 s guard everything is simply visible.
   Every block is revealed once and then stands still: nothing moves on scroll.
   ========================================================================== */
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; clip-path: inset(-0.34em -0.08em -0.14em); }
.ch > span { display: inline-block; }
.ln { display: block; clip-path: inset(-0.14em -0.5em -0.22em); }
.ln > span { display: block; }
.ln--fixed > span { white-space: nowrap; }

/* before the text is split it is kept out of sight, not out of the layout */
.rv:not(.rv-all) [data-rv]:not(.rv-item) { visibility: hidden; }

.rv:not(.rv-all) .rv-item:not(.in) .ch > span { transform: translateY(125%) rotate(6deg); transform-origin: 0 100%; }
.rv:not(.rv-all) .rv-item:not(.in) .ln > span { transform: translateY(135%) rotate(2.5deg); transform-origin: 0 100%; }
.rv:not(.rv-all) .ph.rv-item:not(.in) { background: none; }
.rv:not(.rv-all) .ph.rv-item:not(.in) img { clip-path: inset(100% 0 0 0); transform: scale(1.16); }
.rv:not(.rv-all) .badge.rv-item:not(.in) img { transform: rotate(-90deg) scale(0); }
.rv:not(.rv-all) .rv-item:not(.in) .contact__line { transform: scaleX(0); }

.rv .rv-item .ch > span { transition: transform 0.9s var(--ease-out) calc(var(--i) * 28ms); }
.rv .rv-item .ln > span { transition: transform 0.7s var(--ease-out) calc(var(--i) * 60ms); }
.rv .hello .ln > span { transition-delay: calc(var(--i) * 60ms + 380ms); }
.rv .lead .ln > span,
.rv .ai__text .ln > span { transition-duration: 0.65s; transition-delay: calc(var(--i) * 70ms + 100ms); }
.rv .ph.rv-item img { clip-path: inset(0); transform-origin: 50% 100%; transition: clip-path 1s var(--ease-wipe), transform 1.2s var(--ease-wipe); }
.rv .badge.rv-item img { transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.2s; }
.rv .rv-item .contact__line { transition: transform 1.1s var(--ease-wipe) 0.15s; }

/* after the reveal the masks and transitions are taken off: the block is plain static content */
.rv .rv-item.settled .ch,
.rv .rv-item.settled .ln { clip-path: none; }
.rv .ph.rv-item.settled img { clip-path: none; transition: none; }

/* language switch: the old text leaves upwards, the new one arrives from below */
.rv .rv-item.sw-out .ch,
.rv .rv-item.sw-out .ln { clip-path: inset(-0.14em -0.5em -0.22em); }
.rv .rv-item.sw-out .ch > span,
.rv .rv-item.sw-out .ln > span { transform: translateY(-130%); transition: transform 0.28s cubic-bezier(0.5, 0, 0.75, 0) calc(var(--i) * 6ms); }

@media (prefers-reduced-motion: reduce) {
  #figure-canvas, .figure-fallback, .lang__btn, .pl__canvas { transition: none; }
  .feed { overflow-x: auto; }
  .feed__track { animation: none; will-change: auto; }
  .zoom, .zoom.is-open, .zoom-cap, .zoom-cap.is-open, .zoom-shade, .zoom-shade.is-open, .zoom__bar, .feed__track { transition: none; }
}