/* Almighty Guys, site v1. Paper and ink, one colour per kind of work, Sofia Sans only (DIRECTION.md). */

/* ---- fonts: self-hosted Sofia Sans subsets (OFL) ---------------------------------------------- */

@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/sofia-xcond-900-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/sofia-xcond-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/sofia-xcond-900-latin.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: "Sofia Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sofia-cond-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sofia-cond-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sofia-cond-600-latin.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: "Sofia Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sofia-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sofia-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sofia-400-latin.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: "Sofia Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sofia-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sofia-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sofia-600-latin.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;
}

/* ---- tokens -------------------------------------------------------------------------------- */

/* The bottom band a phone browser may cover (Jean, 29.09: in Arc the hero's GUYS went under the floating
   bottom bar). Safari and Arc on iOS float their toolbars over the page, so 100svh still reaches under
   them; anything pinned to the bottom of a screen keeps this much clear. Pointer devices need none. */
:root { --ui-b: env(safe-area-inset-bottom, 0px); }
@media (hover: none) and (pointer: coarse) {
  :root { --ui-b: calc(env(safe-area-inset-bottom, 0px) + 64px); }
}
/* Padding in the page flow keeps the band at a fixed size. iOS Safari slides env(safe-area-inset-bottom) between
   0 and 34 px while its toolbar hides and shows, so a project section padded by it grew and shrank under the
   finger, the page height changed with it, and on the way back up Safari drew a frame at the old scroll position
   (Jean, 02.10: «когда вниз мотаешь, а потом наверх — подлагивает»). The fixed value is the band with the
   toolbar shown, the state the sections were laid out for. */
:root { --ui-b-flow: 0px; }
@media (hover: none) and (pointer: coarse) {
  :root { --ui-b-flow: 64px; }
}
:root {
  --paper: #F2EDE4;
  --ink: #141312;
  --mute: #E4DDD0;
  --pad: clamp(14px, 1.4vw, 24px);
  --gap: clamp(8px, 0.8vw, 14px);
  --rule: 1.5px;
  /* Opening geometry. main.js mirrors these numbers (INTRO, OPEN, STRIP). */
  --intro: 34vw;
  --open: 62vw;
  --strip: 7vw;
  --f-display: "Sofia Sans Extra Condensed", "Arial Narrow", Impact, sans-serif;
  --f-label: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --f-body: "Sofia Sans", system-ui, sans-serif;
  color-scheme: light;
}

/* ---- base ---------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Lenis (from lenis 1.3.25 dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 100; left: 8px; top: 8px;
  padding: 12px 16px; background: var(--ink); color: var(--paper);
  font: 600 14px/1 var(--f-label); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.label {
  font: 600 13px/1.15 var(--f-label);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.link {
  display: inline-flex; align-items: center; gap: .25em;
  text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: .2em;
}
.link:hover { text-decoration-thickness: 3px; }
.link .icon { width: .9em; height: .9em; flex: none; }
.link--big {
  font: 900 clamp(40px, 5vw, 88px)/.86 var(--f-display);
  text-transform: uppercase; text-decoration: none;
}
.link--big:hover { text-decoration: underline; text-decoration-thickness: 4px; }

.icon { width: 24px; height: 24px; }

/* ---- the halo: a flat ring, always a stroke --------------------------------------------------- */

.halo { overflow: visible; }
.halo ellipse { stroke-width: var(--hs, 6); }
.halo--dot { width: 18px; --hs: 11; }
.halo--logo { width: 30px; --hs: 11; margin: 0 auto 4px; }
.halo--mark { width: 44%; --hs: 5; margin: 0 auto 5%; }
.halo--foot { width: 26%; --hs: 4; margin: 0 auto 2.5%; }
.halo--about { width: 100%; --hs: 7; }
.halo--lost { width: min(46vw, 360px); --hs: 4; margin: 0 auto 3vw; }

.cursor {
  position: fixed; z-index: 60; left: 0; top: 0;
  width: 44px; margin: -34px 0 0 -22px;
  color: #fff; mix-blend-mode: difference;
  pointer-events: none; opacity: 0; transition: opacity .18s;
}
.cursor .halo { width: 100%; --hs: 8; }
.cursor.is-on { opacity: 1; }

/* ---- chips, tags, dots, round buttons -------------------------------------------------------- */

/* A service chip: the work done, in its discipline's colour. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: baseline; max-width: 100%;
  padding: 6px 9px 5px;
  background: var(--c); color: var(--on);
  font: 600 13px/1.1 var(--f-label); text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
/* A chip on a panel of its own colour keeps a hairline so it does not dissolve. */
.chip--same { box-shadow: inset 0 0 0 var(--rule) currentColor; }

/* The year: an outlined square tag (Akaru's pill, squared: pills are jean design's). */
.tag {
  display: inline-block; flex: none;
  padding: 4px 7px 3px; border: var(--rule) solid currentColor;
  font-variant-numeric: tabular-nums; line-height: 1;
}

.dots { display: inline-flex; gap: 4px; flex: none; }
.dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 1px var(--ink);
}

.round {
  display: grid; place-items: center; flex: none;
  width: 58px; height: 58px; border-radius: 50%;
  border: var(--rule) solid currentColor;
  transition: background-color .2s, color .2s;
}
.round .icon { width: 24px; height: 24px; }

/* ---- header bar ------------------------------------------------------------------------------ */

.bar {
  position: fixed; z-index: 50; inset: 0 0 auto 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--pad);
  pointer-events: none;
  transition: opacity .25s, visibility .25s;
}
.bar > * { pointer-events: auto; }
.bar__logo {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 12px 9px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font: 900 25px/.8 var(--f-display); text-transform: uppercase; white-space: nowrap;
}
.bar__end { display: flex; align-items: flex-start; gap: 6px; }
.bar__nav { display: flex; background: var(--paper); }
.bar__link {
  padding: 13px 14px 12px;
  font: 600 14px/1 var(--f-label); text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none;
}
.bar__link:hover span, .bar__link[aria-current] span { text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: .25em; }
.bar--home:not(.is-shown) { opacity: 0; visibility: hidden; }

/* The language switch: both languages, the current one filled. */
.langs, .intro-langs { display: flex; }
.langs { background: var(--paper); }
.langs__link, .intro-langs__link {
  display: grid; place-items: center;
  min-width: 38px; padding: 13px 8px 12px;
  font: 600 14px/1 var(--f-label); text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none;
}
.langs__link[aria-current], .intro-langs__link[aria-current] { background: var(--ink); color: var(--paper); }
.langs__link:not([aria-current]):hover, .intro-langs__link:not([aria-current]):hover { text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: .25em; }
.intro-langs { border: var(--rule) solid var(--ink); align-self: flex-start; }
.intro-langs__link { min-width: 34px; padding: 6px 7px 5px; font-size: 13px; }

/* ---- home: the opening (vertical by default; .h switches on the horizontal track) ------------ */

.intro {
  display: flex; flex-direction: column; gap: 28px;
  min-height: 100svh;
  padding: var(--pad);
  background: var(--paper);
}
.intro__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.intro__nav { display: flex; flex: 1; justify-content: space-between; gap: 12px; }
.intro__link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 0;
  font: 600 15px/1 var(--f-label); text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none;
}
.intro__link:hover span { text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: .25em; }
.intro__mark { margin-block: auto; --wm: calc(100vw - 2 * var(--pad)); }
.wordmark {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  line-height: .8; letter-spacing: 0;
}
/* Each line is set to the column width: 3.425 em and 1.799 em are the advance widths of
   ALMIGHTY and GUYS in Sofia Sans Extra Condensed Black. */
.wordmark__words { display: contents; }
.wordmark .word { white-space: nowrap; }
.wordmark .ch { display: inline-block; }
/* Split into letters the word loses its kerning, so the widths carry 2 % of slack. */
.wordmark__l1 { font-size: calc(var(--wm) / 3.5); }
.wordmark__l2 { font-size: calc(var(--wm) / 1.84); margin-top: .02em; }
.intro__line {
  max-width: 30ch; margin: 22px auto 0;
  font: 400 clamp(16px, 1.2vw, 20px)/1.35 var(--f-body);
  text-align: center; text-wrap: balance;
}
.intro__foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 12px; border-top: var(--rule) solid var(--ink);
  font: 600 14px/1.2 var(--f-label); letter-spacing: .02em;
}
.intro__foot li { display: flex; align-items: center; gap: 6px; }
.intro__foot i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

.panel {
  --t: 1;
  position: relative;
  display: grid; grid-template-areas: "media" "body";
  background: var(--bg); color: var(--fg);
}
.panel__media {
  grid-area: media;
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--fg) 12%, var(--bg));
}
.m { width: 100%; height: 100%; object-fit: cover; }
.panel__frame { position: absolute; inset: 0; }
/* Parts of the phone full-screen sections (see the end of the file), hidden elsewhere. */
.panel__bd, .panel__go, .tile__bd, .tile__about, .tile__year, .tile__chips, .tile__go { display: none; }
.panel__body {
  grid-area: body;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "meta meta" "name name" "line line" "chips round";
  gap: 14px 16px;
  min-height: 52vw;
  padding: var(--pad);
}
/* Akaru's meta row: what the project is on one side, what we made and the year on the other. */
.panel__meta {
  grid-area: meta;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 6px 32px; padding-right: 3em;
}
.panel__about { flex: 0 1 auto; max-width: 42ch; }
.panel__kind { display: flex; align-items: flex-start; gap: 10px; flex: 0 1 auto; max-width: 50ch; text-align: right; }
.panel__kind > span { padding-top: 4px; }
.panel__name {
  grid-area: name; align-self: end;
  font: 900 clamp(56px, 15vw, 190px)/.82 var(--f-display); text-transform: uppercase;
  font-size: min(clamp(56px, 15vw, 190px), calc((100vw - 2 * var(--pad)) / var(--fit, .01)));
  text-wrap: balance;
}
.panel__name a { text-decoration: none; }
.panel__line {
  grid-area: line;
  max-width: 42ch;
  font: 400 clamp(17px, 1.3vw, 22px)/1.32 var(--f-body);
  text-wrap: pretty;
}
.panel .chips { grid-area: chips; align-self: end; }
.panel .round { grid-area: round; align-self: end; }
.panel__num { grid-area: body; justify-self: end; align-self: start; margin: var(--pad); }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.stretch:focus-visible { outline: none; }
.panel:has(.stretch:focus-visible) { outline: 3px solid var(--fg); outline-offset: -8px; }
.panel:hover .round { background: var(--fg); color: var(--bg); }
.panel--mixed .panel__media { background: #26241f; }

.h .opening { height: 100vh; overflow: hidden; }
.h .track { display: flex; height: 100%; width: max-content; }
.h .reel { display: contents; }
.h .intro { flex: none; width: var(--intro); height: 100%; min-height: 0; }
.h .intro__mark { --wm: calc(var(--intro) - 2 * var(--pad)); }
.h .panel {
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: none; width: var(--strip); height: 100%;
  overflow: hidden; --t: 0;
  /* Its size comes from main.js, never from its content: a width change lays out this panel only. */
  contain: strict;
}
/* Widths at the first frame, before main.js takes over (same formula, scroll 0). */
.h .panel:nth-of-type(1) { width: 44.28vw; --t: .6778; }
.h .panel:nth-of-type(2) { width: 17.22vw; --t: .1858; }
.h .panel__media {
  position: absolute; left: 0; right: 0;
  /* The media grows upwards from the colour block's top edge, which stays at 58 % for every panel. */
  top: calc((1 - var(--t)) * 36%);
  height: calc(22% + var(--t) * 36%);
  aspect-ratio: auto;
}
.h .panel__body {
  flex: none; width: var(--open); height: 42%; min-height: 0;
  padding: 18px 20px 20px;
  gap: min(12px, 1.3vh) 16px;
  opacity: clamp(0, calc((var(--t) - .25) * 2.5), 1);
}
.h .panel__meta { padding-right: 0; }
.h .panel__name { font-size: min(7.4vw, 11vh, calc((var(--open) - 40px) / var(--fit, .01))); }
.h .panel__line { font-size: clamp(16px, min(1.3vw, 2.2vh), 22px); }
.h .panel .chips { padding-left: 52px; }
.h .panel__num { position: absolute; left: 20px; bottom: 20px; margin: 0; }

/* ---- page tops: every page but the home starts under the fixed bar ---------------------------- */

.p-work main, .p-team main, .p-profile main, .p-contact main, .p-lost main { padding-top: clamp(96px, 9vw, 140px); }
.p-case .bar__logo, .p-case .bar__nav { box-shadow: 0 0 0 1px rgba(20, 19, 18, .08); }

/* Giant page titles (Work, Team, the name on a profile, Start a project). */
.works__title, .team__title, .ct__title {
  font: 900 clamp(96px, 19vw, 360px)/.76 var(--f-display); text-transform: uppercase;
  font-size: min(clamp(96px, 19vw, 360px), calc((100vw - 2 * var(--pad)) / var(--fit, .01)));
  margin-bottom: -.03em;
}

/* ---- home: about ---------------------------------------------------------------------------- */

.about {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px var(--gap);
  padding: clamp(80px, 10vw, 180px) var(--pad) clamp(72px, 9vw, 160px);
}
.about__label { grid-column: 1 / 3; padding-top: .9em; }
.about__text {
  grid-column: 3 / -1;
  max-width: 30ch;
  font: 400 clamp(30px, 3.1vw, 54px)/1.1 var(--f-body);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.about__halo { display: inline-block; width: 1.5em; margin-right: .3em; vertical-align: .05em; }
/* The crew photo sits right of centre under the text, large, like Akaru's agency page. */
.about__photo { grid-column: 5 / -1; margin-top: clamp(40px, 5vw, 96px); }
.about__frame { aspect-ratio: var(--r); overflow: hidden; background: var(--mute); }

/* ---- home: the mission (four crafts, one crew) ----------------------------------------------- */
/* The statement with its four craft words; main.js lights each word's bar in its colour, draws a
   stroke from each word into the halo below, then the halo in ink, and the headline lands. Without
   motion this final state is simply what shows (the strokes need main.js to be placed). */

.mission {
  position: relative;
  display: grid; justify-items: center; text-align: center;
  padding: clamp(80px, 10vw, 180px) var(--pad) clamp(72px, 9vw, 160px);
}
.mission__label { margin-bottom: clamp(20px, 2.4vw, 40px); }
.ms__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ms__line { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mission__text {
  position: relative; z-index: 1;
  max-width: 30ch;
  font: 400 clamp(24px, 3vw, 52px)/1.18 var(--f-body); letter-spacing: -.01em;
  text-wrap: pretty;
}
.mw { position: relative; z-index: 0; white-space: nowrap; }
.mw__bar {
  position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .02em; height: .2em;
  background: var(--c); transform-origin: 0 50%;
}
.mission__mark { position: relative; z-index: 1; width: clamp(150px, 24vw, 400px); margin-top: clamp(48px, 7vw, 120px); }
.ms__halo { overflow: visible; }
.ms__halo ellipse { stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mission__head {
  position: relative; z-index: 1;
  margin-top: clamp(14px, 1.6vw, 28px);
  font: 900 clamp(60px, 9vw, 180px)/.82 var(--f-display); text-transform: uppercase; text-wrap: balance;
  font-size: min(clamp(60px, 9vw, 180px), calc((100vw - 2 * var(--pad)) / var(--fit, .01)));
}
.mission__head .w { display: inline-block; }
.mission .about__photo { grid-column: 1 / -1; justify-self: end; width: min(100%, 64vw); margin-top: clamp(56px, 7vw, 128px); text-align: left; }

/* ---- studio (/about/): the mission, the principles, the crafts --------------------------------- */

.p-studio main { padding-top: clamp(96px, 9vw, 140px); }
.studio__head {
  display: grid; justify-items: center; gap: clamp(16px, 2vw, 32px); text-align: center;
  padding: 0 var(--pad) clamp(72px, 9vw, 160px);
}
.halo--studio { width: clamp(140px, 22vw, 360px); --hs: 4; }
.studio__title {
  font: 900 clamp(72px, 12vw, 240px)/.8 var(--f-display); text-transform: uppercase; text-wrap: balance;
  font-size: min(clamp(72px, 12vw, 240px), calc((100vw - 2 * var(--pad)) / var(--fit, .01)));
}
.studio__text { max-width: 32ch; font: 400 clamp(22px, 2.4vw, 40px)/1.22 var(--f-body); letter-spacing: -.01em; text-wrap: pretty; }
.studio__text .mw { white-space: normal; }
.prs__label { padding: 0 var(--pad) 16px; }
.prs__list { display: grid; }
/* One principle per screen, each on its craft's colour. */
.pr {
  display: grid; align-content: space-between; gap: 28px;
  min-height: 80vh; min-height: 80svh;
  padding: var(--pad) var(--pad) clamp(28px, 4vw, 64px);
  background: var(--bg); color: var(--fg);
}
.pr__num { display: flex; justify-content: space-between; gap: 16px; }
.pr__title {
  max-width: 13ch;
  font: 900 clamp(60px, 9.5vw, 200px)/.82 var(--f-display); text-transform: uppercase; text-wrap: balance;
  font-size: min(clamp(60px, 9.5vw, 200px), calc((100vw - 2 * var(--pad)) / var(--fit, .01)));
}
.pr__text { max-width: 30ch; font: 400 clamp(20px, 2vw, 34px)/1.25 var(--f-body); text-wrap: pretty; }
.studio__photo .about__photo { margin: clamp(56px, 7vw, 128px) var(--pad) 0 auto; width: min(100% - 2 * var(--pad), 76vw); }
.studio .do { padding-top: clamp(72px, 9vw, 160px); }
/* Principles rise in as they arrive (main.js adds .is-in once). */
.fx [data-rv] .w { display: inline-block; transition: transform .9s cubic-bezier(.16, .8, .24, 1), opacity .6s; transition-delay: calc(80ms + var(--i, 0) * 70ms); }
.fx [data-rv] .pr__text { transition: transform .9s cubic-bezier(.16, .8, .24, 1) .35s, opacity .6s .35s; }
.fx [data-rv]:not(.is-in) .w { transform: translateY(55%); opacity: 0; }
.fx [data-rv]:not(.is-in) .pr__text { transform: translateY(24px); opacity: 0; }

/* ---- the duotone over people's photos (Human First's treatment) -------------------------------- */
/* A flat colour layer with mix-blend-mode: color (light from the photo, hue from the colour) and a
   light wash wipe up over the photo on hover, or when the photo is centred in view on touch
   (main.js toggles .is-on). No z-index on .tint: the blend has to see the photo under it. */
.tint { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tint__c, .tint__w { position: absolute; inset: 0; }
.tint__c {
  background: var(--tc, #2E45FF); mix-blend-mode: color; opacity: .85;
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), background-color .35s;
}
.tint__w {
  background: linear-gradient(to top right, color-mix(in srgb, var(--tc, #2E45FF) 34%, transparent), transparent 62%);
  opacity: 0; transition: opacity .5s, background-color .35s;
}
.tint.is-on .tint__c { transform: none; }
.tint.is-on .tint__w { opacity: 1; }
.tp__tile, .about__frame { position: relative; }
.member__name, .member__foot { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.member__link.is-tinted .member__name { transform: translateX(12px); }
.member__link.is-tinted .member__foot { transform: translateX(6px); }

/* ---- work grids (the work index, a profile's selected work) ----------------------------------- */

.sec-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 24px; margin-bottom: clamp(18px, 2vw, 32px);
}
.sec-title {
  font: 900 clamp(72px, 12vw, 220px)/.78 var(--f-display); text-transform: uppercase;
  font-size: min(clamp(72px, 12vw, 220px), calc((100vw - 2 * var(--pad)) / var(--fit, .01)));
  margin-bottom: -.04em;
}
.sec-title--mid { font-size: clamp(56px, 8vw, 150px); margin-bottom: clamp(18px, 2vw, 32px); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters[hidden] { display: none; }
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 13px 9px;
  background: transparent; color: var(--ink);
  border: var(--rule) solid var(--ink); border-radius: 0;
  font: 600 14px/1 var(--f-label); text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer;
}
.filter__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--ink); }
.filter:hover { background: var(--mute); }
.filter[aria-pressed="true"] { background: var(--c, var(--ink)); color: var(--on, var(--paper)); }

/* Justified rows: each tile grows by its ratio, so a row fills the width at one height. The
   ::after spacer takes the last row's slack instead of blowing its tiles up. */
.grid { --row: clamp(150px, 19vw, 380px); display: flex; flex-wrap: wrap; gap: calc(var(--gap) * 2.4) var(--gap); }
.grid::after { content: ""; flex: 999 1 calc(var(--row) * 1.2); }
.grid--big { --row: clamp(170px, 20vw, 400px); }
.tile { flex: var(--r) 1 calc(var(--r) * var(--row)); min-width: 0; }
.tile[hidden] { display: none; }
.tile__link { display: block; text-decoration: none; }
.tile__media { position: relative; display: block; aspect-ratio: var(--r); overflow: hidden; background: var(--mute); }
.tile__media .m { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tile__link:hover .m { transform: scale(1.03); }
.tile__frame { display: block; width: 100%; height: 100%; }
.tile__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; }
.tile__name { font: 600 15px/1.1 var(--f-label); text-transform: uppercase; letter-spacing: .04em; }
/* Tiles rise into place as they come into view (main.js adds .is-wait, then lifts it a few at a time). */
.fx .tile { transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.fx .tile.is-wait { opacity: 0; transform: translateY(48px); }
.tile__link:hover .tile__name { text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: .2em; }
.tile__kind { display: block; padding-top: 3px; font: 400 15px/1.3 var(--f-body); opacity: .72; }
/* The line: over the media, in the lead discipline's colour, on hover or keyboard focus. */
.tile__line {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 11px 12px 12px;
  background: var(--bg); color: var(--fg);
  font: 400 15px/1.3 var(--f-body); text-wrap: pretty;
  opacity: 0; transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .2s;
}
@media (hover: hover) and (pointer: fine) {
  .tile__link:hover .tile__line, .tile__link:focus-visible .tile__line { opacity: 1; transform: none; }
}
@media not ((hover: hover) and (pointer: fine)) {
  .tile__line { display: none; }
}

/* ---- home: what we do and clients --------------------------------------------------------- */

/* Room above the heading (Jean, 01.10: «отступ слишком маленький сверху от заголовка»). */
.do { padding: clamp(96px, 10vw, 180px) var(--pad) clamp(72px, 9vw, 160px); }
.do__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.do__more { margin-top: clamp(28px, 3vw, 48px); max-width: 52ch; font: 400 clamp(19px, 1.55vw, 26px)/1.3 var(--f-body); }
.do__more a { text-underline-offset: .15em; }
.do__tile {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  min-height: min(76vh, 46vw);
  padding: 16px 20px 20px;
  background: var(--bg); color: var(--fg);
}
.do__top { display: flex; justify-content: space-between; gap: 12px; }
.do__name {
  font: 900 clamp(52px, 6vw, 118px)/.8 var(--f-display); text-transform: uppercase; text-wrap: balance;
  font-size: min(clamp(52px, 6vw, 118px), calc(((100vw - 2 * var(--pad) - 3 * var(--gap)) / 4 - 40px) / var(--fit, .01)));
}
.do__name a { text-decoration: none; }
.do__long { margin-top: auto; max-width: 18ch; font: 400 clamp(19px, 1.55vw, 26px)/1.18 var(--f-body); }
.do__list { border-bottom: 1px solid currentColor; }
.do__list li {
  padding: 8px 0 7px; border-top: 1px solid currentColor;
  font: 600 15px/1.15 var(--f-label); text-transform: uppercase; letter-spacing: .04em;
}
.do__tile .round { align-self: flex-end; }
.do__tile:hover .round { background: var(--fg); color: var(--bg); }
.do__tile:has(.stretch:focus-visible) { outline: 3px solid var(--fg); outline-offset: -8px; }

.clients { padding: clamp(28px, 3vw, 44px) 0 clamp(72px, 9vw, 160px); border-top: var(--rule) solid var(--ink); margin: 0 var(--pad); }
.marquee {
  margin-top: clamp(16px, 2vw, 28px);
  font: 900 clamp(40px, 5.6vw, 108px)/.94 var(--f-display);
}
/* Without motion (no JS, reduced motion) the two rows read as one wrapped typographic run. */
.marquee__set { display: flex; flex-wrap: wrap; }
.clients__name { display: flex; align-items: center; white-space: nowrap; text-transform: uppercase; }
.clients__sep { display: inline-block; width: .62em; margin: 0 .22em 0 .2em; }
.clients__sep .halo { width: 100%; --hs: 9; }
.marquee__row--2 .clients__name { color: transparent; -webkit-text-stroke: max(1.5px, .016em) var(--ink); }
/* Logos: one ink colour, sized by build.py for equal visual weight, centred on the row. */
.clients__name--logo, .marquee__row--2 .clients__name--logo { color: var(--ink); -webkit-text-stroke: 0; }
.clients__logo { display: block; height: var(--h, .6em); width: auto; max-width: none; margin: 0 .12em; fill: currentColor; }
.marquee__row--2 .clients__sep { color: var(--ink); }
/* With motion main.js adds .is-on and the moving copies: each row runs on one line, full bleed. */
.marquee.is-on { margin-inline: calc(-1 * var(--pad)); }
.marquee.is-on .marquee__row { overflow: hidden; padding: .04em 0; }
.marquee.is-on .marquee__inner { display: flex; width: max-content; }
.marquee.is-on .marquee__set { flex-wrap: nowrap; flex: none; }

/* ---- footer: the call to a project, the links, the crew on the wordmark ---------------------- */
/* Jean, 28.09: «футер надо интереснее сделать, можно объединить с CTA приема заявок». One dark block on
   every page: START A PROJECT across the page (one link to the form with its line and the arrow; on
   hover the letters run through the four discipline colours), the pages and languages, then the
   wordmark with the inflatable crew standing on it (main.js drops them in). */

.foot {
  padding: clamp(40px, 5vw, 80px) var(--pad) var(--pad);
  background: var(--ink); color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(242, 237, 228, .18);
  overflow: clip; /* the wordmark's descender space would otherwise hang below the page */
}
.foot__cta {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: clamp(16px, 2vw, 32px) 24px; padding-bottom: clamp(28px, 3vw, 48px);
  border-bottom: 1px solid rgba(242, 237, 228, .3); color: inherit; text-decoration: none;
}
/* One line across the page: --adv is the advance width of the title in the display face (build.py). */
.foot__title {
  grid-column: 1 / -1; display: block;
  font: 900 calc((100vw - 2 * var(--pad)) / var(--adv, 5.66))/.8 var(--f-display); text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(90deg, var(--paper) 0 25%, #B7A6F5 32%, #FF5A2A 44%, #CDEE3C 56%, #2E45FF 68%, var(--paper) 75% 100%)
    100% 0 / 400% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1.1s cubic-bezier(.2, .7, .2, 1);
}
.foot__cta:hover .foot__title, .foot__cta:focus-visible .foot__title { background-position: 0 0; }
.foot__line { max-width: 34ch; font: 400 clamp(17px, 1.5vw, 26px)/1.3 var(--f-body); }
.foot__round { width: clamp(64px, 7vw, 120px); height: clamp(64px, 7vw, 120px); }
.foot__round .icon { width: 42%; height: 42%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.foot__cta:hover .foot__round { background: var(--paper); color: var(--ink); }
.foot__cta:hover .foot__round .icon { transform: rotate(45deg); }
.foot__cta:focus-visible { outline: 3px solid var(--paper); outline-offset: 6px; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px;
  padding: 16px 0; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot__link, .foot-langs__link { font: 600 14px/1 var(--f-label); text-transform: uppercase; letter-spacing: .04em;
  color: inherit; text-decoration: none; padding: 6px 0; }
.foot__link:hover span, .foot__link[aria-current] span { text-decoration: underline; text-underline-offset: .25em; }
.foot-langs { display: flex; gap: 14px; }
.foot-langs__link { opacity: .55; }
.foot-langs__link[aria-current] { opacity: 1; }
/* The stage leaves room above the wordmark for the toys; main.js sizes and places them. */
.foot__stage { position: relative; padding-top: min(19vw, 230px); }
.foot__toys { position: absolute; inset: 0; pointer-events: none; }
.foot__toy { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; transform-origin: 50% 100%;
  -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.foot__toy img { display: block; width: 100%; height: 100%; max-width: none; transform-origin: 50% 100%; user-select: none;
  -webkit-user-drag: none; opacity: 0; }
.foot__toy.is-ready img { opacity: 1; }
.foot__mark { display: flex; flex-direction: column; align-items: center; }
.foot__word .ch { backface-visibility: hidden; }
/* ALMIGHTY GUYS on one line at the page width: 5.4 em is its advance width in the display face. */
.foot__word {
  font: 900 calc((100vw - 2 * var(--pad)) / 5.4)/.78 var(--f-display);
  text-transform: uppercase; white-space: nowrap;
}
.foot__word .word, .foot__word .ch { display: inline-block; }
.foot__row {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: clamp(18px, 2vw, 32px); padding-top: 12px;
  border-top: 1px solid rgba(242, 237, 228, .3);
}

/* ---- work index ------------------------------------------------------------------------------ */

.works {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px;
  padding: 0 var(--pad) clamp(72px, 9vw, 160px);
}
.works__head { display: contents; }
.works__title { grid-column: 1; grid-row: 1; align-self: end; }
.works__count { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; }
/* Under the title: the discipline names got longer on 29.09 («Разработка и геймдев»), so beside it they
   squeezed the title. */
.works__filters { grid-column: 1 / -1; grid-row: 2; justify-self: start; align-self: end; }
.works > .grid { grid-column: 1 / -1; margin-top: clamp(12px, 2vw, 36px); }
.works__count { font-variant-numeric: tabular-nums; }

/* ---- case page: the full-screen presentation ------------------------------------------------ */

.cs { background: var(--paper); }

/* A blurred, darkened still behind a centred frame (vertical and square media). */
.bd { position: absolute; inset: 0; overflow: hidden; background: #0d0c0b; }
.bd img { width: 100%; height: 100%; object-fit: cover; }
.bd--live img { transform: scale(1.2); filter: blur(34px) saturate(1.15) brightness(.55); }

.cs-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #0d0c0b; color: var(--paper); }
.cs-hero__media { position: absolute; inset: 0; transform-origin: 50% 0; }
.cs-hero__media > .bd { display: none; }
.cs-hero__frame { position: absolute; inset: 0; }
.cs-hero__frame .m { width: 100%; height: 100%; object-fit: cover; }
/* Vertical projects: the 9:16 loop at full height, centred over its own blurred still. */
.cs-hero--v .cs-hero__media > .bd { display: block; }
.cs-hero--v .cs-hero__frame { left: 50%; right: auto; width: min(100%, calc(100svh * 9 / 16)); transform: translateX(-50%); }
.cs-hero__text {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: clamp(18px, 2vw, 32px);
  padding: clamp(120px, 16vh, 220px) var(--pad) var(--pad);
  background: linear-gradient(to top, rgba(13, 12, 11, .78), rgba(13, 12, 11, .45) 55%, rgba(13, 12, 11, 0));
  pointer-events: none;
}
.cs-hero__title {
  font: 900 clamp(64px, 11.5vw, 230px)/.8 var(--f-display); text-transform: uppercase;
  font-size: min(clamp(64px, 11.5vw, 230px), calc((100vw - 2 * var(--pad)) / var(--fit, .01)));
  text-wrap: balance; max-width: max(14ch, calc(var(--fit, 0) * 1em));
}
.cs-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px var(--gap);
  padding-top: 12px; border-top: 1px solid rgba(242, 237, 228, .45);
}
.cs-meta__item { display: grid; gap: 5px; align-content: start; }
.cs-meta dt { opacity: .7; }
.cs-meta dd { font: 600 clamp(16px, 1.2vw, 19px)/1.3 var(--f-body); max-width: 34ch; }

/* The line and the services, on the lead discipline's colour. */
.cs-lead {
  display: grid; gap: clamp(24px, 3vw, 48px);
  padding: clamp(56px, 7vw, 128px) var(--pad);
  background: var(--bg); color: var(--fg);
}
.cs-lead__line { max-width: 24ch; font: 400 clamp(30px, 3.6vw, 64px)/1.08 var(--f-body); letter-spacing: -.012em; text-wrap: pretty; }
.cs-lead .chips { gap: 8px; }
.cs-lead .chip { padding: 8px 12px 7px; font-size: 15px; }

/* The task and what we did: two columns on hairlines. */
.cs-story {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(24px, 4vw, 72px);
  padding: clamp(56px, 7vw, 128px) var(--pad);
}
.cs-story__col { display: grid; gap: 16px; align-content: start; padding-top: 12px; border-top: var(--rule) solid var(--ink); }
.cs-story__text { max-width: 44ch; font: 400 clamp(19px, 1.45vw, 24px)/1.42 var(--f-body); text-wrap: pretty; }

/* The film: full bleed on ink, the bar under it. */
.film-sec { position: relative; overflow: hidden; background: #0d0c0b; color: var(--paper); }
.film-sec > .bd { z-index: 0; }
.film { position: relative; z-index: 1; margin: 0 auto; max-width: min(100%, calc(100svh * 16 / 9)); }
.film.film--v { max-width: min(100% - 2 * var(--pad), calc((100svh - 150px) * 9 / 16)); padding-top: clamp(40px, 5vw, 80px); }
.film__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.film.film--v .film__frame { aspect-ratio: 9 / 16; }
.film__video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.film__start {
  position: absolute; inset: 0; margin: auto;
  display: grid; place-items: center; align-content: center; gap: 4px;
  width: clamp(104px, 10vw, 150px); height: clamp(104px, 10vw, 150px); border-radius: 50%;
  border: 2px solid var(--paper); background: rgba(20, 19, 18, .35); color: var(--paper);
  font: 600 14px/1 var(--f-label); text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.film__start .icon { width: 34px; height: 34px; margin-left: 4px; }
.film__start:hover { background: var(--paper); color: var(--ink); }
.film.is-started .film__start { display: none; }
.film__bar { display: flex; align-items: center; gap: 12px; padding: 12px var(--pad) var(--pad); }
.film.film--v .film__bar { padding-inline: 0; }
.film__btn {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: var(--rule) solid currentColor; background: transparent; cursor: pointer;
}
.film__btn:hover { background: var(--paper); color: var(--ink); }
.film__btn .icon { width: 20px; height: 20px; }
.film__btn .icon--pause, .film__btn .icon--muted { display: none; }
.film.is-playing [data-act="toggle"] .icon--play { display: none; }
.film.is-playing [data-act="toggle"] .icon--pause { display: block; }
.film.is-muted [data-act="mute"] .icon--sound { display: none; }
.film.is-muted [data-act="mute"] .icon--muted { display: block; }
.film__seek { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.film__seek::-webkit-slider-runnable-track { height: 2px; background: rgba(242, 237, 228, .35); }
.film__seek::-moz-range-track { height: 2px; background: rgba(242, 237, 228, .35); }
.film__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--paper); border: 0; }
.film__seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 0; }
.film__time { min-width: 9ch; text-align: right; font-variant-numeric: tabular-nums; }

/* The gallery: every item is its own full-bleed section. Layouts (build.py g_layout):
   bleed   full width at its ratio, capped at the viewport height (a slight crop past that)
   wide    full width at its ratio, never cropped
   framed  tall and square media centred at viewport height over their own blurred still
   Effects (main.js, data-g) write transform and clip-path on .g__frame / .g__inner only. */
.gallery { display: grid; gap: var(--gap); padding: var(--gap) 0; }
.film-sec + .gallery { padding-top: var(--gap); }
.g { position: relative; margin: 0; overflow: clip; contain: paint; }
.g__frame, .g__inner, .cs-hero__media, .next__inner { backface-visibility: hidden; }
/* Reveal: two covers in the section's colour slide off the frame from its middle (main.js). Without
   motion they are not there at all. */
.g__cover { display: none; }
.fx .g__cover { display: block; position: absolute; z-index: 1; background: var(--paper); pointer-events: none; }
.fx .g--bleed .g__cover, .fx .g--wide .g__cover { left: -1px; right: -1px; height: 50.5%; }
.fx .g--bleed .g__cover--a, .fx .g--wide .g__cover--a { top: -1px; }
.fx .g--bleed .g__cover--b, .fx .g--wide .g__cover--b { bottom: -1px; }
.fx .g--framed .g__cover { top: -1px; bottom: -1px; width: 50.5%; background: #0d0c0b; }
.fx .g--framed .g__cover--a { left: -1px; }
.fx .g--framed .g__cover--b { right: -1px; }
.g__frame { position: relative; overflow: hidden; background: var(--mute); }
.g__inner { position: absolute; inset: 0; }
.g__inner .m { width: 100%; height: 100%; object-fit: cover; }
.g--bleed .g__frame { width: 100%; height: min(calc(100vw / var(--r)), 100vh); height: min(calc(100vw / var(--r)), 100svh); }
.g--wide .g__frame { width: 100%; aspect-ratio: var(--r); }
.g--framed {
  display: grid; place-items: center;
  height: 100vh; height: 100svh; min-height: 480px;
  padding: clamp(28px, 5vh, 64px) var(--pad);
  background: #0d0c0b;
}
.g--framed .g__frame {
  z-index: 1;
  height: 100%; max-height: calc((100vw - 2 * var(--pad)) / var(--r));
  aspect-ratio: var(--r);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
/* Parallax needs media taller than its frame: with motion only, so a still page never crops. */
.fx [data-g="parallax"]:not(.g--framed) .g__inner { inset: -8% 0; }
/* Stack (desktop pointers, set by main.js): the item holds the screen and the next one slides over. */
.g.is-stack { position: sticky; top: 0; z-index: 0; display: grid; place-items: center; height: 100vh; height: 100svh; background: var(--paper); }
.g.is-stack + .g { z-index: 1; }
.g__shade { position: absolute; inset: 0; z-index: 2; background: #0d0c0b; opacity: 0; pointer-events: none; }

/* Credits and the client's links. */
.cs-end {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(24px, 4vw, 72px);
  padding: clamp(56px, 7vw, 128px) var(--pad);
}
.cs-end__col { display: grid; gap: 14px; align-content: start; padding-top: 12px; border-top: var(--rule) solid var(--ink); }
.credits { display: grid; }
.credits__row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 16px;
  padding: 10px 0 9px; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  font: 400 clamp(17px, 1.25vw, 20px)/1.3 var(--f-body);
}
.credits__row:last-child { border-bottom: 0; }
.credits dt { font-weight: 600; }
.cs-links { display: grid; gap: 8px; }
.cs-links .link { font: 600 clamp(22px, 2vw, 32px)/1.2 var(--f-label); }

/* The next project: a full-width colour panel, its loop settling in on the right. */
.next {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap);
  min-height: 86vh; min-height: 86svh;
  padding: var(--pad);
  background: var(--bg); color: var(--fg); text-decoration: none;
}
.next__text { display: flex; flex-direction: column; gap: 14px; padding-bottom: clamp(84px, 8vw, 124px); }
.next__title {
  margin-top: auto; font: 900 clamp(64px, 9.4vw, 200px)/.8 var(--f-display); text-transform: uppercase; text-wrap: balance;
  font-size: min(clamp(64px, 9.4vw, 200px), calc(((100vw - 2 * var(--pad)) * 5 / 12 - var(--gap)) / var(--fit, .01)));
}
.next__kind { max-width: 30ch; font: 400 clamp(17px, 1.3vw, 22px)/1.3 var(--f-body); }
.next__media { position: relative; overflow: hidden; background: color-mix(in srgb, var(--fg) 12%, var(--bg)); }
.next--v .next__media { justify-self: end; width: min(100%, calc((86svh - 2 * var(--pad)) * 9 / 16)); }
.next__inner { position: absolute; inset: 0; }
.next__inner .m { width: 100%; height: 100%; object-fit: cover; }
.next .round { position: absolute; left: var(--pad); bottom: var(--pad); width: clamp(64px, 6vw, 96px); height: clamp(64px, 6vw, 96px); }
.next .round .icon { width: 40%; height: 40%; }
.next:hover .round { background: var(--fg); color: var(--bg); }
.next:hover .next__title { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .06em; }
.next:focus-visible { outline: 3px solid var(--fg); outline-offset: -8px; }

/* ---- team ------------------------------------------------------------------------------------ */

.team { padding: 0 0 clamp(72px, 9vw, 160px); }
.team__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 32px; padding: 0 var(--pad); margin-bottom: clamp(24px, 3vw, 48px);
}
.team__line { max-width: 26ch; font: 400 clamp(22px, 2vw, 34px)/1.15 var(--f-body); text-wrap: pretty; }
/* The group photos: the first full-bleed and large, the rest side by side at one height. */
.team__photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-bottom: clamp(56px, 7vw, 128px); }
.tp { margin: 0; }
.tp--lead .g__frame { width: 100%; height: min(calc(100vw / var(--r)), 100vh); height: min(calc(100vw / var(--r)), 100svh); }
.tp--row { display: flex; justify-content: flex-end; gap: var(--gap); min-width: 0; overflow: hidden; padding: 0 var(--pad); height: min(86svh, 64vw); }
.tp__tile { flex: 0 1 auto; height: 100%; aspect-ratio: var(--r); min-width: 0; margin: 0; overflow: hidden; background: var(--mute); }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--gap); padding: 0 var(--pad); }
.member__link { display: grid; gap: 10px; text-decoration: none; }
.member__name {
  font: 900 clamp(40px, 4.2vw, 80px)/.84 var(--f-display); text-transform: uppercase;
  font-size: min(clamp(40px, 4.2vw, 80px), calc((100vw - 2 * var(--pad) - 2 * var(--gap)) / 3 / var(--fit, .01)));
}
.member__link:hover .member__name { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .08em; }
.member__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member__role { font: 400 16px/1.3 var(--f-body); }
.member__link:hover .portrait img { transform: scale(1.03); }

/* A portrait: the photo when it exists, otherwise the placeholder (colour, halo, initials). */
.portrait {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg, var(--mute)); color: var(--fg, var(--ink));
}
.portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.portrait__halo { position: absolute; left: 50%; top: 19%; width: 54%; margin-left: -27%; }
.halo--portrait { width: 100%; --hs: 5; }
.portrait__ini { font: 900 clamp(120px, 15vw, 300px)/.8 var(--f-display); text-transform: uppercase; }
.portrait--big .portrait__ini { font-size: clamp(150px, 22vw, 420px); }

/* ---- profile --------------------------------------------------------------------------------- */

.profile { padding: 0 var(--pad) clamp(72px, 9vw, 160px); }
.profile__top {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3vw, 56px); align-items: end;
  margin-bottom: clamp(72px, 9vw, 160px);
}
.profile__text { display: grid; gap: clamp(16px, 1.6vw, 26px); align-content: end; }
.profile__name {
  font: 900 clamp(80px, 10.5vw, 220px)/.8 var(--f-display); text-transform: uppercase; text-wrap: balance;
  font-size: min(clamp(80px, 10.5vw, 220px), calc((100vw - 2 * var(--pad)) * 7 / 12 / var(--fit, .01)));
}
.profile__bio { max-width: 38ch; font: 400 clamp(19px, 1.6vw, 28px)/1.3 var(--f-body); text-wrap: pretty; }
.profile__works { padding-top: 12px; border-top: var(--rule) solid var(--ink); }

/* ---- contact: the request form ------------------------------------------------------------- */

.ct {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 80px); align-items: start;
  padding: 0 var(--pad) clamp(72px, 9vw, 160px);
}
.ct__head { display: grid; gap: clamp(18px, 2vw, 32px); }
.ct__title { font-size: clamp(88px, 11vw, 230px); text-wrap: balance; }
.ct__line { max-width: 30ch; font: 400 clamp(19px, 1.5vw, 26px)/1.3 var(--f-body); text-wrap: pretty; }
.ct__body { display: grid; gap: 20px; padding-top: 8px; }
.ct__notice {
  padding: 14px 16px 13px; border-left: 6px solid var(--err);
  background: var(--ink); color: var(--paper);
  font: 600 17px/1.3 var(--f-body);
}
.ct__notice[hidden] { display: none; }
.ct__done { display: grid; gap: 14px; padding: clamp(24px, 3vw, 48px); background: var(--ink); color: var(--paper); outline: none; }
.ct__done[hidden] { display: none; }
.ct__done-title { font: 900 clamp(64px, 8vw, 150px)/.8 var(--f-display); text-transform: uppercase; }
.ct__done-line { font: 400 clamp(19px, 1.5vw, 26px)/1.3 var(--f-body); }

.form { --err: #B42B00; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 36px) var(--gap); }
.ct { --err: #B42B00; }
.form[hidden] { display: none; }
.f { grid-column: 1 / -1; display: grid; gap: 8px; align-content: start; min-width: 0; }
.f--half { grid-column: span 1; }
.f--set { margin: 0; padding: 0; border: 0; }
.f__label { padding: 0; }
.f__req { color: var(--err); }
.f__input {
  width: 100%; min-height: 52px; margin: 0; padding: 10px 0 9px;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: var(--rule) solid var(--ink); border-radius: 0;
  font: 400 clamp(19px, 1.5vw, 24px)/1.3 var(--f-body);
}
.f__input:focus { outline: none; border-bottom-width: 3px; padding-bottom: 7.5px; }
.f__input:focus-visible { outline: none; }
.f__area { min-height: 150px; resize: vertical; padding: 12px; border: var(--rule) solid var(--ink); }
.f__area:focus { border-width: 3px; padding: 10.5px; }
.f__select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9.5 6 6 6-6' fill='none' stroke='%23141312' stroke-width='1.8'/%3E%3C/svg%3E") right 2px center / 22px no-repeat;
}
.f__hint { font: 400 15px/1.35 var(--f-body); opacity: .72; }
.f__err { display: flex; gap: 8px; align-items: baseline; color: var(--err); font: 600 15px/1.35 var(--f-body); }
.f__err::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.f__err[hidden] { display: none; }
.f.is-bad .f__input { border-color: var(--err); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.pick { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 11px 14px 10px 11px; border: var(--rule) solid var(--ink); cursor: pointer; font: 600 15px/1 var(--f-label); text-transform: uppercase; letter-spacing: .04em; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pick__box { display: grid; place-items: center; width: 20px; height: 20px; border: var(--rule) solid currentColor; background: var(--paper); }
.pick__box .icon { width: 16px; height: 16px; opacity: 0; }
.pick:hover { background: var(--mute); }
.pick:has(input:checked) { background: var(--c); color: var(--on); border-color: var(--c); }
.pick:has(input:checked) .pick__box { background: transparent; }
.pick:has(input:checked) .pick__box .icon { opacity: 1; }
.pick:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.f--submit { padding-top: 8px; }
.send {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 14px 14px 14px clamp(18px, 2vw, 28px);
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer;
  font: 900 clamp(40px, 4.4vw, 84px)/.9 var(--f-display); text-transform: uppercase; text-align: left;
}
.send .round { width: clamp(56px, 5vw, 84px); height: clamp(56px, 5vw, 84px); }
.send:hover .round { background: var(--paper); color: var(--ink); }
.send:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.send:disabled { cursor: progress; opacity: .72; }
.is-sending .send .round { animation: ag-spin 1.1s linear infinite; }
@keyframes ag-spin { to { transform: rotate(360deg); } }
/* The honeypot: out of sight and out of the tab order; people never fill it, bots often do. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- 404 --------------------------------------------------------------------------------------- */

.lost { min-height: 64vh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 40px var(--pad) 96px; text-align: center; }
.lost__title { font: 900 clamp(140px, 26vw, 480px)/.76 var(--f-display); text-transform: uppercase; }
.lost__other { display: grid; justify-items: center; gap: 18px; margin-top: 28px; padding-top: 28px; border-top: var(--rule) solid var(--ink); }
.lost__line { font: 400 clamp(18px, 1.6vw, 26px)/1.3 var(--f-body); }

/* ---- smaller screens --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .do__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .do__tile { min-height: min(96vw, 560px); }
  .about__label, .about__text, .about__photo { grid-column: 1 / -1; }
  .about__label { padding-top: 0; }
  .cs-story, .cs-end { grid-template-columns: minmax(0, 1fr); }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile__top { grid-template-columns: minmax(0, 1fr); }
  .profile__pic { max-width: 560px; }
  .ct { grid-template-columns: minmax(0, 1fr); }
  .next { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(40svh, 1fr); }
  .next__title { font-size: min(clamp(64px, 9.4vw, 200px), calc((100vw - 2 * var(--pad)) / var(--fit, .01))); }
  .do__name { font-size: min(clamp(52px, 6vw, 118px), calc(((100vw - 2 * var(--pad) - var(--gap)) / 2 - 40px) / var(--fit, .01))); }
  .member__name { font-size: min(clamp(40px, 4.2vw, 80px), calc((100vw - 2 * var(--pad) - var(--gap)) / 2 / var(--fit, .01))); }
  .profile__name { font-size: min(clamp(80px, 10.5vw, 220px), calc((100vw - 2 * var(--pad)) / var(--fit, .01))); }
  .next__text { padding-bottom: 0; }
  .next--v .next__media { justify-self: stretch; width: auto; }
  .next .round { left: auto; right: var(--pad); bottom: var(--pad); z-index: 1; background: var(--bg); }
  .tp--row { height: auto; flex-wrap: wrap; justify-content: stretch; }
  .tp__tile { flex: var(--r) 1 0; height: auto; }
}
/* Portrait screens: a landscape hero loop sits whole in the upper middle over its blurred still
   instead of being cropped to a sliver. */
@media (max-aspect-ratio: 4 / 5) {
  .cs-hero:not(.cs-hero--v) .cs-hero__media > .bd { display: block; }
  .cs-hero:not(.cs-hero--v) .cs-hero__frame { inset: 22% 0 auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .intro__nav { justify-content: flex-start; gap: 18px; }
  .panel__body { min-height: 88vw; }
  /* Phones: two columns; wide tiles take both, the rest share a row at 4:5. */
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 18px var(--gap); }
  .grid::after { display: none; }
  .tile--wide { grid-column: span 2; }
  .tile:not(.tile--wide) .tile__media { aspect-ratio: 4 / 5; }
  .tile__cap { align-items: flex-start; }
  .panel__meta { flex-direction: column; }
  .panel__kind { text-align: left; }
  .do__grid { grid-template-columns: minmax(0, 1fr); }
  .do__tile { padding: 12px 14px 14px; min-height: 0; gap: 14px; }
  /* Room between the last project section and «What we do», then the four tiles stack as you scroll:
     each sticks under the bar a little lower than the one before and the next slides over it. */
  .p-home .do { padding-top: 120px; }
  .p-home .do__tile, .p-studio .do__tile { position: sticky; top: calc(72px + var(--k, 0) * 14px); }
  .do__tile:nth-child(2) { --k: 1; }
  .do__tile:nth-child(3) { --k: 2; }
  .do__tile:nth-child(4) { --k: 3; }
  .do__long { font-size: 17px; }
  .do__list li { font-size: 13px; }
  .tile__kind { font-size: 14px; }
  .credits__row { grid-template-columns: minmax(0, 1fr); }
  .bar__logo { font-size: 20px; padding: 12px 9px; }
  .bar__logo span { display: none; }
  .halo--logo { width: 26px; margin: 0; }
  .bar { gap: 6px; }
  .bar__end { flex-wrap: wrap; justify-content: flex-end; }
  .intro__top { flex-wrap: wrap; }
  .intro__nav { flex-wrap: wrap; gap: 6px 14px; }
  .mission { text-align: left; justify-items: start; }
  .mission__mark { justify-self: center; }
  .mission__head { justify-self: stretch; text-align: center; }
  .mission__text { font-size: 23px; }
  .mission .about__photo { width: 100%; }
  .studio__photo .about__photo { width: auto; margin-left: var(--pad); }
  .bar__link { padding: 11px 7px 10px; font-size: 13px; }
  .bar__end { gap: 4px; }
  .langs__link { min-width: 0; padding: 11px 6px 10px; font-size: 13px; }
  /* Phones: the toys stand larger (main.js, a quarter of the width) and the stage gives them the room. */
  .foot__stage { margin-top: 24px; padding-top: 34vw; }
  .film__time { display: none; }
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-meta__item:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .team__grid { grid-template-columns: minmax(0, 1fr); }
  /* The longest surname (TURLYKHANOV, 4.4 em) must fit a 390 px screen. */
  .profile__name { font-size: min(80px, calc((100vw - 2 * var(--pad)) / 4.7), calc((100vw - 2 * var(--pad)) / var(--fit, .01))); }
  .g--framed { min-height: 0; height: auto; padding: 28px var(--pad); }
  .g--framed .g__frame { height: auto; width: min(100%, calc((100svh - 56px) * var(--r))); max-height: none; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .f--half { grid-column: 1 / -1; }
  .foot__title { white-space: normal; font-size: calc((100vw - 2 * var(--pad)) / var(--fit, 2.86)); }
  .panel__name { font-size: min(clamp(52px, 16vw, 120px), calc((100vw - 2 * var(--pad)) / var(--fit, .01))); }
  .member__name { font-size: min(clamp(40px, 12vw, 80px), calc((100vw - 2 * var(--pad)) / var(--fit, .01))); }
  .do__name { font-size: min(clamp(48px, 15vw, 80px), calc((100vw - 2 * var(--pad) - 28px) / var(--fit, .01))); }
}

/* ---- phones and touch screens: full-screen project sections ----------------------------------
   Jean, 12.10 (TG 7410, TG 7582): whole-page vertical scrolling with a hard snap, one project per swipe. Each card is
   exactly one stable small viewport high, scroll-snap-stop traps a fast Android fling at the next card, and neither
   the card nor its picture is transformed. The adjacent home sections are snap points too, so mandatory snap does not
   imprison the page inside the project run. Older stack / flow / scrub / rail layouts remain evidence builds. */

.snapcount { display: none; }

@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html.snap:has(body.pc-fullpage) { scroll-snap-type: y mandatory; }
  .pc-fullpage #top,
  .pc-fullpage [data-sections] > [data-sec],
  .pc-fullpage #what-we-do,
  .pc-fullpage .clients,
  .pc-fullpage .foot { scroll-snap-align: start; }
  .pc-fullpage #top,
  .pc-fullpage [data-sections] > [data-sec],
  .pc-fullpage #what-we-do { scroll-snap-stop: always; }
  /* One section: the backdrop, the media frame, the scrim, the text at the bottom. */
  .panel, .p-work .tile__link {
    position: relative; overflow: hidden; contain: paint;
    min-height: 100vh; min-height: 100svh;
    background: #0d0c0b; color: var(--paper);
  }
  .panel { display: block; }
  .pc-fullpage [data-sections] > [data-sec],
  .pc-fullpage [data-sections] > [data-sec] > .tile__link {
    height: 100svh; min-height: 100svh; max-height: 100svh;
  }
  /* The stack: each card stays put once its top (or, for a card taller than the screen, its bottom) reaches the
     screen's edge, and the next card, later in the page, paints over it. A card under two others is never seen
     again before the one above it moves, so it is not painted. */
  .pc-stack [data-sections] > [data-sec] { position: sticky; top: var(--stick, 0px); }
  .pc-stack [data-sections] > [data-sec].is-under { visibility: hidden; }
  .panel__media { position: absolute; inset: 0; aspect-ratio: auto; background: #0d0c0b; overflow: hidden; }
  /* On the work index the media box dissolves, so the line inside it joins the text below. */
  .p-work .tile__media { display: contents; }
  .p-work .tile__bd { display: block; }
  .p-work .tile__frame {
    position: absolute; left: 0; right: 0; top: 19%; width: auto; height: auto;
    aspect-ratio: 16 / 9;
  }
  /* Film and AI film footage may lose its sides (4:3); screens and sites stay whole at 16:9. */
  .p-work .tile--film .tile__frame { aspect-ratio: 4 / 3; }
  .p-work .tile--v .tile__frame { inset: 0; aspect-ratio: auto; }
  .p-work .tile__frame .m { position: absolute; inset: 0; }
  .p-work .tile__media::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(13, 12, 11, .94), rgba(13, 12, 11, .78) 34%, rgba(13, 12, 11, 0) 58%);
  }
  .p-work .tile--v .tile__media::after {
    background: linear-gradient(to top, rgba(13, 12, 11, .94), rgba(13, 12, 11, .72) 40%, rgba(13, 12, 11, .1) 66%, rgba(13, 12, 11, .35));
  }

  /* The home's project sections (Jean, 01.10: «чтобы видео выглядело лучше и не было рамок непонятных сверху и
     снизу… можно меньше текста»): footage fills the whole screen, a shade only at the bottom for the name and at
     the top for the bar; a website or app keeps its interface whole in a 4:3 frame on plain dark, no blurred copy
     around it. The text is the name, what we made and the year, and the arrow; the rest is on the case page. */
  .panel__bd { display: none; }
  .panel__frame { position: absolute; inset: 0; }
  .panel__frame .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .panel__frame { transform: scale(var(--pz, 1)); transform-origin: var(--po, 50% 50%); }
  .panel__media::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(13, 12, 11, .92), rgba(13, 12, 11, .6) 24%, rgba(13, 12, 11, 0) 46%),
      linear-gradient(to bottom, rgba(13, 12, 11, .45), rgba(13, 12, 11, 0) 20%);
  }
  .panel--screen .panel__frame { inset: auto 0; top: 20%; aspect-ratio: 4 / 3; }
  .panel--screen .panel__media::after { background: none; }
  .panel__about, .panel__line, .panel .chips { display: none; }

  .panel__body {
    position: relative; z-index: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    grid-template-areas: "name name" "meta meta" "line line" "chips chips" "go round";
    align-content: end; gap: 12px 16px;
    min-height: 100vh; min-height: 100svh;
    padding: 96px var(--pad) calc(var(--pad) + var(--ui-b-flow));
  }
  .panel__name { align-self: auto; font-size: min(15vw, 96px, calc((100vw - 2 * var(--pad)) / var(--fit, .01))); }
  .panel__meta { flex-direction: column; gap: 4px; padding-right: 0; opacity: .86; }
  .panel__kind { text-align: left; }
  .panel__line { font-size: 17px; }
  .panel .chips { align-self: auto; }
  .panel__go { display: block; grid-area: go; align-self: center; }
  .panel .round { width: 52px; height: 52px; }
  .panel__num { display: none; }
  .chip--same { box-shadow: none; }

  /* The work index: the tiles become sections, full bleed. The filters scroll with the title: stuck under the bar
     they took two rows of a phone screen over the videos and, measured too early, left a gap the list showed
     through (Jean, 30.09: «хэдер не корректно отображается»). */
  .p-work main { padding-top: 0; }
  .works { display: block; }
  .works__head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px;
    padding: 96px 0 16px;
  }
  .works__filters {
    justify-self: auto; align-self: auto; padding: 0 0 10px;
  }
  /* The five filters wrap onto two lines instead of scrolling sideways: a chip cut at the screen edge read as
     cut-off text (Jean, 29.09), and the names got longer. */
  .works__filters .filters { flex-wrap: wrap; }
  .works__filters .filter { background: var(--paper); }
  .works__filters .filter[aria-pressed="true"] { background: var(--c, var(--ink)); color: var(--on, var(--paper)); }
  .p-work .grid { display: block; margin: 0 calc(-1 * var(--pad)); }
  .p-work .grid::after { display: none; }
  .p-work .tile + .tile { margin-top: 0; }
  .p-work .tile__link {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name name" "kind kind" "line line" "chips chips" "go go";
    align-content: end; gap: 12px;
    padding: 132px var(--pad) calc(var(--pad) + var(--ui-b-flow));
  }
  .p-work .tile__link > :not(.tile__media), .p-work .tile__line { position: relative; z-index: 1; }
  .p-work .tile__cap { grid-area: name; padding: 0; }
  .p-work .tile__name {
    font: 900 min(15vw, 96px)/.84 var(--f-display); letter-spacing: 0;
    font-size: min(15vw, 96px, calc((100vw - 2 * var(--pad)) / var(--fit, .01)));
    text-wrap: balance;
  }
  .p-work .tile__cap .dots { display: none; }
  .p-work .tile__kind { grid-area: kind; padding: 0; opacity: .86; font: 600 13px/1.25 var(--f-label); text-transform: uppercase; letter-spacing: .04em; }
  .p-work .tile__about, .p-work .tile__year { display: inline; }
  .p-work .tile__about::after, .p-work .tile__k:has(+ .tile__year)::after { content: " · "; }
  .p-work .tile__line {
    grid-area: line; display: block; position: relative; inset: auto; padding: 0;
    background: none; color: inherit; opacity: 1; transform: none; font-size: 17px;
  }
  .p-work .tile__chips { display: flex; grid-area: chips; }
  .p-work .tile__go { display: inline-flex; grid-area: go; align-items: center; gap: 8px; }
  .p-work .tile__go .icon { width: 20px; height: 20px; }
  .p-work .tile__link:hover .m { transform: none; }

  /* The 03 / 09 mark: under the bar on the right, while the sections are on screen. */
  .snapcount {
    position: fixed; z-index: 40; right: var(--pad); top: 66px;
    display: flex; align-items: center; gap: 8px;
    color: var(--paper); font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(13, 12, 11, .6);
    opacity: 0; transition: opacity .3s; pointer-events: none;
  }
  .p-work .snapcount { top: 112px; }
  .snapcount[hidden] { display: none; }
  .snapcount.is-on { opacity: 1; }
  .snapcount__rail { width: 44px; height: 2px; background: rgba(242, 237, 228, .35); overflow: hidden; }
  .snapcount__rail i { display: block; height: 100%; background: var(--paper); transform-origin: 0 50%; transform: scaleX(.1); }

  /* Entry (stack and fullpage), once per card: only the text moves. The picture and the card never transform, so the
     reveal cannot change the alignment target. The other comparison layouts have no timed entry. */
  .fx [data-sec] .w { display: inline-block; }
  .fx .pc-stack [data-sec] .w, .fx .pc-stack .sec-fade,
  .fx .pc-fullpage [data-sec] .w, .fx .pc-fullpage .sec-fade {
    transition: transform 1s cubic-bezier(.16, .8, .24, 1), opacity .7s cubic-bezier(.2, .7, .2, 1);
    backface-visibility: hidden;
  }
  .fx .pc-stack [data-sec] .w, .fx .pc-fullpage [data-sec] .w { transition-delay: calc(60ms + var(--i, 0) * 70ms); }
  .fx .pc-stack .sec-fade, .fx .pc-fullpage .sec-fade { transition-delay: calc(260ms + var(--j, 0) * 80ms); }
  .fx .pc-stack [data-sec]:not(.is-in) .w, .fx .pc-fullpage [data-sec]:not(.is-in) .w { transform: translateY(55%); opacity: 0; }
  .fx .pc-stack [data-sec]:not(.is-in) .sec-fade, .fx .pc-fullpage [data-sec]:not(.is-in) .sec-fade { transform: translateY(18px); opacity: 0; }
  .fx .p-work .tile { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- studio: the team after the principles (Jean, 29.09) --------------------------------------- */
.team--studio { padding: clamp(56px, 7vw, 120px) var(--pad) 0; }
.team--studio .sec-head { margin-bottom: clamp(16px, 2vw, 32px); }

/* ---- work index, minimal variants (build.py --work-list index | names | thumbs; Jean, 29.09) -------- */
.wl { grid-column: 1 / -1; margin: clamp(20px, 2.4vw, 40px) 0 0; padding: 0; list-style: none; }
.wl__item[hidden] { display: none; }
.wl__link { color: inherit; text-decoration: none; }
.wl__types { font: 600 13px/1.25 var(--f-label); text-transform: uppercase; letter-spacing: .04em; }
.wl__client { font-size: 15px; line-height: 1.3; opacity: .7; }
.wl__year { text-align: right; }

/* index: hairline rows, the still follows the pointer */
.wl--index .wl__item { border-top: 1px solid var(--ink); }
.wl--index .wl__item:last-child { border-bottom: 1px solid var(--ink); }
.wl--index .wl__link { display: grid; grid-template-columns: 3.2em minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) 4.5em;
  gap: 8px 20px; align-items: baseline; padding: 16px 0 14px; transition: padding .35s cubic-bezier(.2, .7, .2, 1); }
.wl--index .wl__title { font: 900 clamp(24px, 2.4vw, 42px)/.95 var(--f-display); text-transform: uppercase; }
.wl--index .wl__link:hover, .wl--index .wl__link:focus-visible { padding-left: 14px; }

/* names: the titles in big type; the row takes the project's colour */
.wl--names .wl__item { border-top: 1px solid var(--ink); }
.wl--names .wl__link { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; grid-template-areas: "num title types" "num title year";
  align-items: center; gap: 0 20px; margin: 0 calc(-1 * var(--pad)); padding: 8px var(--pad) 4px;
  transition: background-color .25s, color .25s; }
.wl--names .wl__num { grid-area: num; }
.wl--names .wl__title { grid-area: title; font: 900 clamp(44px, 7.4vw, 140px)/.86 var(--f-display); text-transform: uppercase; }
.wl--names .wl__types { grid-area: types; justify-self: end; align-self: end; }
.wl--names .wl__year { grid-area: year; align-self: start; }
.wl--names .wl__client { display: none; }
.wl--names .wl__link:hover, .wl--names .wl__link:focus-visible { background: var(--bg); color: var(--fg); }

/* thumbs: a compact grid of small stills */
/* six tracks: a tile takes two (three in a row, Jean 01.10: «максимум на 2-3»), a half tile three */
.wl--thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 40px) clamp(12px, 1.2vw, 20px); }
.wl--thumbs .wl__item { grid-column: span 2; }
.wl--thumbs .wl__link { display: grid; gap: 8px; }
.wl--thumbs .wl__still { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); }
.wl--thumbs .wl__still img, .wl--thumbs .wl__still .m { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.wl--thumbs .wl__link:hover img, .wl--thumbs .wl__link:hover .wl__still .m { transform: scale(1.05); }
.wl--thumbs .wl__title { margin-top: 4px; font: 900 clamp(20px, 1.7vw, 30px)/.95 var(--f-display); text-transform: uppercase; }

/* the preview that follows the pointer (main.js) */
.wl-peek { position: fixed; left: 0; top: 0; z-index: 40; width: min(26vw, 400px); aspect-ratio: 16 / 10; pointer-events: none;
  object-fit: cover; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.9); transition: opacity .2s, scale .3s;
  box-shadow: 0 30px 60px rgba(20, 19, 18, .25); }
.wl-peek.is-on { opacity: 1; }

@media (max-width: 760px) {
  .wl--index .wl__link { grid-template-columns: 2.6em minmax(0, 1fr) auto; grid-template-areas: "num title year" "num types types";
    padding: 14px 0 12px; }
  .wl--index .wl__num { grid-area: num; } .wl--index .wl__title { grid-area: title; font-size: 26px; }
  .wl--index .wl__types { grid-area: types; } .wl--index .wl__year { grid-area: year; } .wl--index .wl__client { display: none; }
  .wl--names .wl__link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "types year"; padding: 10px var(--pad); }
  .wl--names .wl__num { display: none; }
  .wl--names .wl__title { font-size: min(13vw, 64px); }
  .wl--names .wl__types { justify-self: start; }
  .wl--thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* mosaic: the thumbs grid with the featured projects full width, their loop playing */
.wl--mosaic { grid-auto-flow: dense; }
.wl--mosaic .wl__item--big { grid-column: 1 / -1; }
.wl--mosaic .wl__item--half { grid-column: span 3; }
/* A vertical (9:16) project: two small rows high, its video filling what the title leaves (Jean, 30.09). */
.wl--mosaic .wl__item--tall { grid-row: span 2; }
.wl--mosaic .wl__item--tall .wl__link { height: 100%; grid-template-rows: minmax(0, 1fr) auto auto; }
.wl--mosaic .wl__item--tall .wl__still { aspect-ratio: auto; min-height: 0; }
.wl--mosaic .wl__item--tall .wl__still .m { position: absolute; inset: 0; }
.wl--mosaic .wl__item--big .wl__link { gap: 14px; }
.wl--mosaic .wl__media { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--bg); }
.wl--mosaic .wl__media .m { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(var(--zoom, 1)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.wl--mosaic .wl__item--big .wl__link:hover .m { --zoom: 1.03; }
.wl--mosaic .wl__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; }
.wl--mosaic .wl__item--big .wl__title { font-size: clamp(34px, 5vw, 88px); line-height: .88; }
.wl--mosaic .wl__item--big .wl__types { justify-self: end; }
.wl--mosaic .wl__line { grid-column: 1 / -1; max-width: 60ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.4; opacity: .8; }
@media (max-width: 760px) {
  .wl--mosaic .wl__media { aspect-ratio: 4 / 3; }
  .wl--mosaic .wl__cap { grid-template-columns: minmax(0, 1fr); }
  .wl--mosaic .wl__item--big .wl__types { justify-self: start; }
  .wl--thumbs .wl__item, .wl--mosaic .wl__item--half { grid-column: auto; }
  .wl--mosaic .wl__item--big { grid-column: 1 / -1; }
}

/* The work index in motion (main.js setupWorkEntrance; Jean, 30.09: «нужна анимация прикольная»). Each tile
   rises in with a panel in its project's colour over the media; the panel lifts off upwards while the video
   settles from a slight zoom, then the name and types come up. --d: later the further right in a row. The
   transitions sit on the shown state only, so hiding (when .fx switches on) is instant. */
.fx [data-wl] { opacity: 0; transform: translate3d(0, 48px, 0); }
.fx [data-wl].is-in { opacity: 1; transform: none;
  transition: opacity .5s ease var(--d, 0s), transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.wl--mosaic .wl__still::after, .wl--mosaic .wl__media::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--bg); transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; }
.fx .wl--mosaic [data-wl] .wl__still::after, .fx .wl--mosaic [data-wl] .wl__media::after { transform: scaleY(1); }
.fx .wl--mosaic [data-wl].is-in .wl__still::after, .fx .wl--mosaic [data-wl].is-in .wl__media::after { transform: scaleY(0);
  transition: transform .95s cubic-bezier(.76, 0, .24, 1) calc(var(--d, 0s) + .2s); }
.fx [data-wl] .wl__still img, .fx [data-wl] .wl__still .m, .fx [data-wl] .wl__media .m { scale: 1.18; }
.fx [data-wl].is-in .wl__still img, .fx [data-wl].is-in .wl__still .m, .fx [data-wl].is-in .wl__media .m { scale: 1;
  transition: scale 1.6s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .25s); }
.fx .wl--mosaic [data-wl] .wl__title, .fx .wl--mosaic [data-wl] .wl__types, .fx .wl--mosaic [data-wl] .wl__line {
  opacity: 0; transform: translate3d(0, 14px, 0); }
.fx .wl--mosaic [data-wl].is-in .wl__title, .fx .wl--mosaic [data-wl].is-in .wl__types, .fx .wl--mosaic [data-wl].is-in .wl__line {
  opacity: 1; transform: none;
  transition: opacity .6s ease calc(var(--d, 0s) + .55s), transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .55s); }
/* Letters (splitLetters): each rises out of its own line, the clip open above for accents. */
.sc { display: inline-block; clip-path: inset(-.3em -.05em 0 -.05em); }
.sc > span { display: inline-block; transform: translate3d(0, 108%, 0) rotate(8deg); transform-origin: 0 100%; }
.is-in > .sc > span, .is-in .wl__title > .sc > span { transform: none;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) + var(--l, 0s) + var(--i) * 40ms); }
.wl__item--big .wl__title { --l: .5s; }
.fx .wl--mosaic .wl__item--big .wl__title { opacity: 1; transform: none; }
.fx .works__filters .filter { opacity: 0; transform: translate3d(0, 12px, 0); animation: chip-in .6s cubic-bezier(.2, .7, .2, 1) .28s forwards; }
.fx .works__filters .filter:nth-child(2) { animation-delay: .35s; } .fx .works__filters .filter:nth-child(3) { animation-delay: .42s; }
.fx .works__filters .filter:nth-child(4) { animation-delay: .49s; } .fx .works__filters .filter:nth-child(5) { animation-delay: .56s; }
@keyframes chip-in { to { opacity: 1; transform: none; } }
/* The big projects: the frame widens and the video drifts (main.js setupWorkScrub), so it is a bit taller. */
.wl--mosaic .wl__item--big .wl__media .m { inset: -7% 0; height: 114%; }

/* Inner pages: once the page moves, the header becomes a solid paper band with a hairline, so the giant titles
   and the tiles no longer show through between its boxes (Jean, 30.09: «хедер себя странно ведет»). */
.bar { transition: opacity .25s, visibility .25s, background-color .25s, box-shadow .25s; }
.bar.is-solid { background: var(--paper); box-shadow: 0 1px 0 rgba(20, 19, 18, .14); }

/* Variants of the home's project sections on phones (build.py --sections; a is the block above). */
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* b (the default): the video whole at its own proportions under the bar, the text on a plate in the project's
     colour that takes the rest of the screen, whatever its height. */
  .sec-b .panel { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--bg); }
  /* At most 58 % of the screen high (landscape tablets): the video then narrows and centres, still uncropped. */
  .sec-b .panel__media { position: relative; inset: auto; flex: none; height: auto; margin-top: 72px;
    width: min(100%, calc(58svh * var(--ar, 1.7778))); align-self: center;
    aspect-ratio: var(--ar, 16 / 9); background: #0d0c0b; }
  .sec-b .panel__frame, .sec-b .panel--screen .panel__frame { position: absolute; inset: 0; top: 0; aspect-ratio: auto; transform: none; }
  .sec-b .panel__media::after { content: none; }
  .sec-b .panel__body { flex: 1; min-height: 0; background: var(--bg); color: var(--fg);
    grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "name name" "meta meta" "line line" "go round";
    align-content: stretch; padding: 22px var(--pad) calc(var(--pad) + var(--ui-b-flow)); }
  .sec-b .panel__go, .sec-b .panel .round { align-self: end; }
  /* The plate has room for the project's one sentence. */
  .sec-b .panel__line { display: block; margin-top: 6px; opacity: .92; }

  /* c: the whole-screen video, the text on a card in the project's colour at the bottom. */
  .sec-c .panel__media::after { background: linear-gradient(to bottom, rgba(13, 12, 11, .45), rgba(13, 12, 11, 0) 20%); }
  .sec-c .panel__body { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--ui-b)); min-height: 0;
    background: var(--bg); color: var(--fg); padding: 20px 18px 18px; gap: 10px 16px; }

  /* d: the whole-screen video, the name on a stripe of the project's colour, what we made on a paper label. */
  .sec-d .panel__media::after { background: linear-gradient(to top, rgba(13, 12, 11, .55), rgba(13, 12, 11, 0) 30%),
    linear-gradient(to bottom, rgba(13, 12, 11, .45), rgba(13, 12, 11, 0) 20%); }
  .sec-d .panel__name { justify-self: start; background: var(--bg); color: var(--fg); padding: .1em .16em 0; line-height: .92; }
  .sec-d .panel__meta { justify-self: start; background: var(--paper); color: var(--ink); padding: 7px 9px; opacity: 1; }
}

/* How the comparison phone layouts move (build.py --phone-cards; fullpage and stack are above). flow: the
   cards follow each other on the page's own scroll and the picture is simply there. scrub: the same, with the picture
   drifting inside its frame as the card crosses the screen; a CSS scroll-driven animation, so its state is the scroll
   position itself and a reversed flick plays it back exactly (without support it stands still, as flow). rail: the
   cards side by side in a strip swiped sideways on its own native scroll, the page passing it in one screen. */
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  @supports (animation-timeline: view()) {
    /* The timeline is the card's passage through the page's scroll (the media box clips, and an overflow box is a
       scroll container of its own for view()). */
    .pc-scrub [data-sections] > [data-sec] { view-timeline: --pc-card block; }
    .fx .pc-scrub [data-sec-media] { animation: pc-drift linear both; animation-timeline: --pc-card; animation-range: cover; }
  }
  .pc-rail [data-sections] {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 24px var(--pad); background: var(--paper);
  }
  .pc-rail [data-sections]::-webkit-scrollbar { display: none; }
  .pc-rail [data-sections] > [data-sec] { flex: none; width: 84vw; min-height: 0; }
  .pc-rail.sec-b .panel__media { margin-top: 0; }
  .pc-rail.sec-b .panel__body { padding-bottom: 18px; }
  /* The names fit the card (84 % of the screen) as they fit the screen elsewhere. */
  .pc-rail .panel__name { font-size: min(13vw, 80px, calc((84vw - 2 * var(--pad)) / var(--fit, .01))); }
}
@keyframes pc-drift {
  from { transform: translate3d(0, -7%, 0) scale(1.16); }
  to { transform: translate3d(0, 7%, 0) scale(1.16); }
}

/* The analytics notice (src/track.js) and the privacy page. */
.consent { position: fixed; left: 12px; bottom: calc(12px + var(--ui-b, 0px)); z-index: 60; width: max-content; max-width: min(360px, calc(100vw - 24px));
  display: grid; gap: 10px; padding: 6px 6px 6px 12px; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(20, 19, 18, .12), 0 12px 32px rgba(20, 19, 18, .18); }
.consent__text { margin: 0; font-size: 13px; line-height: 1.3; }
.consent__text a { color: inherit; }
/* One short line as wide as its content (it must not cover the hero), «OK» in the accent black; «Settings» is a word in the line that opens the switches (Jean, 01.10). */
.consent__row { display: flex; gap: 12px; align-items: center; }
.consent__row .consent__text { flex: 1; }
.consent__setup { padding: 0; border: 0; white-space: nowrap; background: none; font: inherit; color: inherit; text-decoration: underline;
  text-underline-offset: .2em; cursor: pointer; }
.consent__ok { flex: none; padding: 8px 12px 7px; border: 0; font: 600 13px/1 var(--f-label); text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; background: var(--ink); color: var(--paper); }
.consent__more { font-size: 13px; color: inherit; }
.consent__set { display: grid; gap: 10px; padding: 8px 6px 2px 0; }
.consent__set[hidden] { display: none; }
.consent__opt { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; font-size: 13px; line-height: 1.35; cursor: pointer; }
.consent__opt b { display: block; }
.consent__opt input { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 24px; margin: 0;
  border-radius: 12px; background: rgba(20, 19, 18, .22); cursor: pointer; transition: background .2s; }
.consent__opt input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); transition: transform .2s; }
.consent__opt input:checked { background: var(--ink); }
.consent__opt input:checked::after { transform: translateX(16px); }
.consent__opt input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.foot__legals { display: inline-flex; gap: 14px; }
.foot__legal { color: inherit; opacity: .75; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.p-legal main { padding-top: 110px; }
.legal { margin: 0 var(--pad); padding-bottom: 80px; }
.legal__body { max-width: 760px; }
.legal__title { font: 900 min(140px, calc((100vw - 2 * var(--pad)) / var(--fit, .01)))/.86 var(--f-display); text-transform: uppercase; margin: 0 0 32px; }
.legal__body h2 { margin: 36px 0 10px; font: 600 15px/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .05em; }
.legal__body p { margin: 0 0 12px; font-size: 18px; line-height: 1.5; }