/* 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); }
}
: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); }
.studio__next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--pad); }
.studio__go {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  min-height: min(36vh, 360px); padding: 14px 0 0;
  border-top: var(--rule) solid var(--ink);
  font: 900 clamp(44px, 5.6vw, 110px)/.84 var(--f-display); text-transform: uppercase; text-decoration: none;
}
.studio__go .round { width: clamp(58px, 5vw, 88px); height: clamp(58px, 5vw, 88px); }
.studio__go:hover .round { background: var(--ink); color: var(--paper); }
.studio__go:hover span:first-child { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .08em; }
/* 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__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__next { grid-template-columns: minmax(0, 1fr); }
  .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, 28.09: on the home page and the work index each project is a section one screen high, the
   loop over its own blurred still, the text over a scrim; the page snaps from section to section
   with native CSS scroll snap (no Lenis on touch, no JS scroll). Everything that is not a project
   section is one tall snap area (.rest) or the footer's end, so it scrolls freely. Landscape media
   stay whole (screens and sites carry interface text a portrait crop would cut); 9:16 media fill
   the screen. main.js adds .is-in to the section in view for its entry and keeps the 03 / 09 mark. */

.snapcount { display: none; }

@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html.snap { scroll-snap-type: y mandatory; }
  html.snap.snap-free { scroll-snap-type: none; }
  .snap .intro, .snap .rest, .snap .works__head { scroll-snap-align: start; }
  .snap .foot { scroll-snap-align: end; }
  [data-sec] { scroll-snap-align: start; 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; }
  .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));
  }
  .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));
  }
  .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: the media settles from 1.08, the title rises word by word, the rest follows. Only with
     motion (.fx); without it, or before main.js runs, everything simply stands there. */
  .fx [data-sec] .w { display: inline-block; }
  .fx [data-sec] [data-sec-media], .fx [data-sec] .w, .fx .sec-fade {
    transition: transform 1s cubic-bezier(.16, .8, .24, 1), opacity .7s cubic-bezier(.2, .7, .2, 1);
    backface-visibility: hidden;
  }
  .fx [data-sec] .w { transition-delay: calc(60ms + var(--i, 0) * 70ms); }
  .fx .sec-fade { transition-delay: calc(260ms + var(--j, 0) * 80ms); }
  .fx [data-sec]:not(.is-in) [data-sec-media] { transform: scale(1.08); opacity: .5; }
  .fx [data-sec]:not(.is-in) .w { transform: translateY(55%); opacity: 0; }
  .fx [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 */
.wl--thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 40px) clamp(12px, 1.2vw, 20px); }
.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; }
/* 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; }
}

/* 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)); }
  .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; }
}

/* 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; max-width: 420px;
  display: grid; gap: 10px; padding: 14px 16px; 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: 14px; line-height: 1.4; }
.consent__text a { color: inherit; }
/* Three equal choices (the second opinion: accept and refuse equally easy). */
.consent__do { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; justify-content: start; }
.consent__do button { padding: 9px 12px 8px; border: 0; font: 600 13px/1 var(--f-label); text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px currentColor; }
.consent__set { display: grid; gap: 8px; }
.consent__set[hidden] { display: none; }
.consent__opt { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; font-size: 13px; line-height: 1.35; }
.consent__opt input { margin-top: 2px; accent-color: var(--ink); }
@media (max-width: 640px) { .consent { right: 12px; max-width: none; } }
.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; }