/* The Onest font is linked from index.html (a CSS @import would delay it). */

* { box-sizing: border-box; }

/* Motion system. Every movement uses one of three curves and a duration from
   one scale, so the site moves with a single, consistent character:
   --ease-out    things arriving (reveals, hovers, releases)
   --ease-in     things leaving (filter switch out)
   --ease-inout  things travelling between two places (indicator, player UI) */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-xs: 140ms;   /* presses, colour changes */
  --dur-s: 240ms;    /* hovers, small UI */
  --dur-m: 420ms;    /* selection changes, exits */
  --dur-l: 650ms;    /* fades of larger blocks */
  --dur-xl: 1000ms;  /* entrances */
  --rise: 56px;      /* travel of a tile entrance */
  --stagger: 70ms;   /* one step for every cascade (lines, columns, tiles) */
}

html { scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
/* site.js eases wheel scrolling itself; native smoothing would fight it */
html.smooth-scroll { scroll-behavior: auto; }
/* html.is-scrolling is set by site.js while the page moves; hover video
   previews wait for it to clear, clicks and hovers keep working */
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  margin: 0;
  background: #ececec;
  color: #111;
  font-family: 'Onest', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* #app hosts the header as a sibling of the landing/case bodies; its own white
   background keeps the header's margin from exposing the grey page. */
#app { background: #fff; }

a { color: inherit; text-decoration: none; }
a:hover { color: rgba(17,17,17,0.55); }
::selection { background: #111; color: #fff; }
button { font: inherit; }



[data-arrowlink] [data-a] { display: inline-block; transition: transform 450ms cubic-bezier(.16,1,.3,1); }
[data-arrowlink]:hover [data-a] { transform: translate(3px, -3px); }



[data-case]:hover [data-img] { transform:none; }
[data-case] [data-tile] { transition: transform 500ms cubic-bezier(.16,1,.3,1); }
[data-case]:hover [data-tile] { transform: translateY(-3px); }
[data-case]:hover [data-scrim], [data-case]:hover [data-cap] { opacity: 1 !important; transform: none !important; }


@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* header / nav */
.site-header {
  position: sticky; top: 0; z-index: 50; background: #fff;
  transition: transform 500ms cubic-bezier(.16,1,.3,1);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; padding: clamp(16px, 1.8vw, 24px) clamp(20px, 3vw, 48px); margin-bottom: clamp(20px, 2.6vw, 36px);
}
.site-header.modal-header { grid-template-columns: 1fr auto; margin-bottom: 0; padding-left: clamp(20px, 3vw, 48px); padding-right: clamp(20px, 3vw, 48px); }
.site-header.nav-hidden { transform:translateY(-100%); }

.brand { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.brand-name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: rgba(17,17,17,0.6); letter-spacing: 0.06em; text-transform: uppercase; }

.navpill { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(17,17,17,0.05); }
.navpill .ind { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px; background: #111; opacity: 0; transition: transform var(--dur-select, 560ms) var(--ease-out), width var(--dur-select, 560ms) var(--ease-out), opacity var(--dur-s) ease; }
.navpill a { position: relative; padding: 8px 16px; border-radius: 999px; font-size: 15px; color: rgba(17,17,17,0.55); transition: color 350ms; }
.navpill a:hover { color: rgba(17,17,17,0.55); }

.header-right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17,17,17,0.6); }
.lang-btn { letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(17,17,17,0.18); border-radius: 999px; background: transparent; color: rgba(17,17,17,0.6); padding: 5px 9px; cursor: pointer; transition: background 350ms, color 350ms, border-color 350ms; }
.lang-btn:hover { background: #111; color: #fff; border-color: #111; }

.back-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(17,17,17,0.18); transition: background 350ms, color 350ms, border-color 350ms; flex-shrink: 0; }
.back-circle svg { display: block; }
.back-circle:hover { background: #111; color: #fff; border-color: #111; }
.share-btn { font-size: 13px; cursor: pointer; border: 1px solid rgba(17,17,17,0.22); background: transparent; color: #111; border-radius: 999px; padding: 8px 15px; transition: background 350ms; }
.share-btn:hover { background: rgba(17,17,17,0.06); }
.discuss-btn { font-size: 13px; border: 1px solid #111; background: #111; color: #fff; border-radius: 999px; padding: 8px 15px; transition: opacity 350ms; }
.discuss-btn:hover { color: #fff; opacity: 0.82; }

/* layout shell */
.page { min-height: 100vh; box-sizing: border-box; }
.shell { position: relative; background: #fff; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px) 0; }

/* hero */
.hero { position: relative; padding: clamp(20px, 3vw, 40px) 0 clamp(50px, 8vw, 110px); }
.hero-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 12px; color: rgba(17,17,17,0.55); padding-bottom: clamp(26px, 4vw, 52px); }
.hero-top .eyebrow { font-size: 11px; color: #111; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-top .note { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(38px, 8.4vw, 150px); line-height: 0.92; letter-spacing: -0.05em; font-weight: 400; }
.hero h1 > span { display: block; }

.cols4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(18px, 2.4vw, 32px); }
.hero-meta { border-top: 1px solid rgba(17,17,17,0.14); margin-top: clamp(34px, 5vw, 70px); padding-top: clamp(14px, 1.8vw, 22px); }
.meta-item { display: flex; flex-direction: column; gap: 8px; }
.meta-item .label { font-size: 11px; color: rgba(17,17,17,0.6); }
.meta-item .value { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.45; max-width: 26ch; text-wrap: pretty; }

/* reel */
.reel { position: relative; }
.reel-frame {
  position: relative; width: 100%; border-radius: 20px; overflow: hidden; background: #fff;
}
.reel-label { position: absolute; left: clamp(14px, 1.6vw, 24px); bottom: clamp(14px, 1.6vw, 24px); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17,17,17,0.6); pointer-events: none; }

/* work section */
.work-section { position: relative; padding-top: clamp(56px, 9vw, 130px); }
.work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: clamp(18px, 2.4vw, 28px); }
.work-head .label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.work-head .count { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17,17,17,0.6); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid rgba(17,17,17,0.12); padding-top: clamp(16px, 2vw, 22px); margin-bottom: clamp(24px, 3.2vw, 44px); }
.filter-btn { font-size: 13px; letter-spacing: 0.02em; cursor: pointer; border: 1px solid rgba(17,17,17,0.2); background: transparent; color: rgba(17,17,17,0.6); border-radius: 999px; padding: 7px 14px; transition: background 350ms, color 350ms, border-color 350ms; }
.filter-btn.active { background: #111; color: #fff; border-color: #111; }

/* Gallery tiles are positioned with absolute left/top/width/height computed in
   JS (justified rows, see layoutGallery in site.js) and kept as permanent nodes,
   so filtering never rebuilds them or reloads their preview videos. */
.gallery { position: relative; }
.case-link { display: block; cursor: pointer; }
.case-tile {
  position: relative; width: 100%; overflow: hidden; background: #f2f3f4; border-radius: 16px;
}
.case-tile .img { position: absolute; inset: 0; border-radius:inherit; overflow:hidden; background: #f2f3f4 center/cover no-repeat; }
.case-tile .img.is-empty { background: #f2f3f4; display: flex; align-items: center; justify-content: center; }
.case-tile .img.is-empty::after { content: "+"; font-size: 22px; color: rgba(17,17,17,0.18); }

.case-tile .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%); opacity: 0; transition: opacity 400ms; }
.case-logo { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.12); z-index: 2; }
.case-logo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.badges-row { position: absolute; right: 12px; top: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; }
.cat-pill { height: 26px; box-sizing: border-box; line-height: 26px; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.45); border-radius: 999px; padding: 0 11px; white-space: nowrap; display: inline-block; }
.template-chip { width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.case-tile .cap { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 450ms cubic-bezier(.16,1,.3,1); }
.case-tile .cap .title { font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.case-tile .cap .year { font-size: 12px; color: rgba(255,255,255,0.6); white-space: nowrap; }

/* contact */
.contact-section { position: relative; padding: clamp(60px, 10vw, 150px) 0 clamp(20px, 2.4vw, 30px); border-top: 1px solid rgba(17,17,17,0.12); margin-top: clamp(50px, 8vw, 110px); }
.contact-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 12px; color: rgba(17,17,17,0.5); padding-bottom: clamp(26px, 4vw, 52px); }
.contact-top .label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #111; }
.contact-top .title { font-size: clamp(14px, 1.2vw, 17px); color: rgba(17,17,17,0.55); }

.mail-cta { display: block; font-size: clamp(40px, 11.5vw, 210px); line-height: 0.9; letter-spacing: -0.055em; position: relative; padding-bottom: clamp(12px, 1.6vw, 22px); }
.mail-cta .underline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #111; transform: scaleX(0); transform-origin: left; transition: transform 800ms cubic-bezier(.16,1,.3,1); }

.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); padding-top: clamp(28px, 4vw, 52px); }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col .label { font-size: 11px; color: rgba(17,17,17,0.6); }
.footer-col a, .footer-col span.value { font-size: clamp(14px, 1.2vw, 17px); }
.footer-social { display: flex; flex-wrap: wrap; gap: 14px; font-size: clamp(14px, 1.2vw, 17px); }
.footer-extra { display: flex; flex-wrap: wrap; gap: 14px; font-size: clamp(14px, 1.2vw, 17px); margin-top: 6px; }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 11px; color: rgba(17,17,17,0.6); border-top: 1px solid rgba(17,17,17,0.12); margin-top: clamp(40px, 6vw, 80px); padding-top: 16px; }

/* modal / case page */
.modal-page { background: #fff; min-height: 100vh; animation: pageIn 550ms cubic-bezier(.16,1,.3,1) both; }
.modal-inner { padding: 0 clamp(20px, 3vw, 48px); }
.modal-hero { padding: clamp(26px, 4vw, 60px) 0 clamp(26px, 3.4vw, 46px); }
.modal-hero-top { display: flex; align-items: center; gap: 10px; }
.modal-hero .tag { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17,17,17,0.6); }
.template-link-list { display:flex; flex-wrap:wrap; align-items:center; gap:8px clamp(18px,2.4vw,32px); margin-top:14px; }
.template-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: rgba(17,17,17,0.6); cursor: pointer; }
.template-link:hover { color: rgba(17,17,17,0.55); }
.template-link [data-a] { font-size: 15px; }
.modal-hero h1 { margin: 14px 0 0; font-size: clamp(30px, 5.4vw, 84px); line-height: 1; letter-spacing: -0.045em; font-weight: 400; max-width: 18ch; text-wrap: balance; }
.modal-facts { border-top: 1px solid rgba(17,17,17,0.12); margin-top: clamp(28px, 4vw, 56px); padding-top: clamp(14px, 1.8vw, 20px); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }

.player-section { background: #ececec; padding: clamp(20px, 3vw, 48px); }
.player-frame { position: relative; width: 100%; max-width: 100%; margin: 0 auto; background: #e2e2e4; border-radius: 16px; overflow: hidden; }
.player-frame video, .player-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.player-frame .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17,17,17,0.35); }

.desc-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 3.4vw, 60px); padding: clamp(36px, 5vw, 80px) 0 clamp(30px, 4vw, 60px); }
.desc-cols:has(> :only-child) { grid-template-columns: 1fr; }
.desc-main { margin: 0; font-size: clamp(17px, 1.7vw, 26px); line-height: 1.45; letter-spacing: -0.02em; max-width: 46ch; text-wrap: pretty; }
.desc-sub { margin: 0; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; color: rgba(17,17,17,0.55); max-width: 40ch; text-wrap: pretty; }


.next-section { border-top: 1px solid rgba(17,17,17,0.12); padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 6vw, 90px); }
.next-section > .label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17,17,17,0.6); }
.next-link { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; cursor: pointer; padding-top: 14px; }
.next-link .title { font-size: clamp(24px, 4vw, 60px); line-height: 1.05; letter-spacing: -0.04em; max-width: 20ch; text-wrap: balance; }
.next-link .arrow { font-size: clamp(20px, 2.4vw, 34px); }

@media (max-width: 900px) {
  .cols4, .footer-cols, .desc-cols, .hero-meta.cols4, .modal-facts.cols4 { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .site-header { grid-template-columns: 1fr auto; }
  .navpill { display: none; }
}
/* Local extension of the existing case page. */
.modal-page .player-section { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(6px,.8vw,12px); background:#fff; padding:0; }
.modal-page .player-section.has-previews { grid-template-columns:minmax(0,1fr) auto; }
.modal-page .player-frame { width:100%; height:auto; aspect-ratio:16 / 9; background:#fff; }
.modal-page .player-frame .empty { color:#fff; }
.case-video-previews { display:grid; grid-template-rows:repeat(var(--video-count),minmax(0,1fr)); gap:clamp(6px,.8vw,12px); min-height:0; height:100%; width:0; }
.case-video-preview { position:relative; min-width:0; min-height:0; width:100%; height:100%; min-height:0; align-self:stretch; justify-self:stretch; aspect-ratio:16/9; padding:0; overflow:hidden; border:0; border-radius:16px; background:#f2f3f4; cursor:pointer; transition:opacity 350ms; }
.case-video-preview img { width:100%; height:100%; object-fit:cover; display:block; }

.case-video-preview:hover { opacity:.65; }
.case-video-preview.is-active { opacity:.85; }
.case-video-preview:focus-visible { outline:2px solid #111; outline-offset:2px; }

@media (max-width:900px) {
  .modal-page .player-section.has-previews { grid-template-columns:minmax(0,1fr); }
  .case-video-previews { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; height:auto; width:100% !important; } 
  .case-video-preview { width:100%; height:auto; }
}

/* Shared still + silent loop used by gallery tiles and the case selector.
   The <video> buffers under the still; the still fades out only once real
   frames are playing, so hovering never shows an empty or grey box. */
.preview-media, .preview-still, .preview-video { position:absolute; inset:0; display:block; width:100%; height:100%; }
.preview-media { overflow:hidden; border-radius:inherit; pointer-events:none; isolation:isolate; background:#f2f3f4; }
.preview-still, .preview-video { object-fit:cover; border:0; }
.preview-media.has-still .preview-still { z-index:1; opacity:1; transition:opacity var(--dur-xs) ease; }
.preview-media.has-still.is-playing .preview-still { opacity:0; }
.case-video-previews .case-video-preview { flex-shrink:0; }
@media (max-width:900px) {
  .case-video-preview { justify-self:stretch; }
}


.hero,.work-section,.articles-section,.contact-section { scroll-margin-top:clamp(80px,9vw,120px); }
@media (prefers-reduced-motion:reduce) {
  #app,[data-reveal] { transition-duration:.01ms !important; animation-duration:.01ms !important; }
  html { scroll-behavior:auto; }
}
@media (max-width:640px) {
  .site-header:not(.modal-header) .navpill { display:flex; grid-column:1 / -1; grid-row:2; justify-self:center; }
  .site-header:not(.modal-header) .header-right { grid-column:2; grid-row:1; }
  .navpill a { font-size:13px; padding:7px 12px; }
}

/* Shared entrance for text and controls. */
html.motion-ready [data-reveal] { opacity:0; transform:translate3d(0,18px,0); transition:opacity var(--dur-l) ease,transform var(--dur-l) var(--ease-out); }
html.motion-ready [data-reveal].from-top:not(.is-visible) { transform:translate3d(0,-18px,0); }
html.motion-ready [data-reveal].is-visible { opacity:1; transform:none; transition-delay:var(--reveal-delay,0ms); }
html.motion-ready .filters[data-reveal],html.motion-ready .filters[data-reveal].is-visible { transform:none; }

/* Gallery tiles rise and grow into place while their picture settles inside
   the rounded frame, in a short left-to-right cascade per row. */
html.motion-ready .case-link[data-reveal] { transform:translate3d(0,var(--rise),0) scale(.94); transform-origin:50% 100%; transition:opacity var(--dur-l) ease,transform var(--dur-xl) var(--ease-out); }
html.motion-ready .case-link[data-reveal].from-top { transform-origin:50% 0; }
html.motion-ready .case-link[data-reveal].from-top:not(.is-visible) { transform:translate3d(0,calc(var(--rise) * -1),0) scale(.94); }
html.motion-ready .case-link[data-reveal].is-visible { transform:none; }
html.motion-ready .case-link[data-reveal] .preview-media { transform:scale(1.14); transition:transform 1300ms var(--ease-out); }
html.motion-ready .case-link[data-reveal].is-visible .preview-media { transform:none; transition-delay:var(--reveal-delay,0ms); }

/* Filter switch, in two beats. Out: the current set lifts a little and fades
   in reading order (accelerating, --ease-in). In: the new set rises from below
   in reading order (decelerating, --ease-out). Tiles never slide sideways. */
html.motion-ready .gallery.is-leaving .case-link[data-reveal] { opacity:0; transform:translate3d(0,-18px,0) scale(.97); transition:opacity 260ms ease,transform 320ms var(--ease-in); transition-delay:var(--out-delay,0ms); pointer-events:none; }
html.motion-ready .gallery.is-entering .case-link[data-reveal].is-visible,
html.motion-ready .gallery.is-entering .case-link[data-reveal].is-visible .preview-media { transition-delay:var(--enter-delay,0ms); }
html.motion-ready .gallery.is-resetting .case-link[data-reveal],
html.motion-ready .gallery.is-resetting .case-link[data-reveal] .preview-media { transition:none !important; }
.gallery-empty { margin:0; padding:clamp(40px,8vw,120px) 0; text-align:center; font-size:clamp(14px,1.2vw,17px); color:rgba(17,17,17,0.6); }

/* Click feedback: a light press while held, a soft rebound on release. */
.case-link:active [data-tile] { transform:translateY(-1px) scale(.975); transition-duration:140ms; }
.case-link.is-tapped [data-tile] { animation:tileTap 420ms cubic-bezier(.16,1,.3,1); }
@keyframes tileTap { 0% { transform:scale(.965); } 55% { transform:translateY(-3px) scale(1.008); } 100% { transform:translateY(-3px); } }

/* Case page selector. The chosen video shrinks inside its cell and gets an
   outer ring drawn at the cell's edge, with a clear gap around the picture. */
.case-video-preview { opacity:1; background:transparent; transition:opacity 240ms ease,transform 240ms cubic-bezier(.16,1,.3,1); }
.case-video-preview > .preview-media { inset:0; width:auto; height:auto; border-radius:16px; background:#f2f3f4; transition:inset 420ms cubic-bezier(.16,1,.3,1),border-radius 420ms cubic-bezier(.16,1,.3,1); }
.case-video-preview.is-active > .preview-media { inset:5px; border-radius:11px; }
.case-video-preview::after { content:""; position:absolute; inset:0; z-index:3; border:1.5px solid #111; border-radius:16px; opacity:0; transform:scale(1.04); pointer-events:none; transition:opacity 300ms ease,transform 420ms cubic-bezier(.16,1,.3,1); }
.case-video-preview.is-active::after { opacity:1; transform:none; }
@media (hover:hover) { .case-video-preview:not(.is-active):hover { opacity:.78; } }
.case-video-preview:active { transform:scale(.975); }
.case-video-preview.is-tapped { animation:previewTap 380ms cubic-bezier(.16,1,.3,1); }
@keyframes previewTap { 0% { transform:scale(.93); } 100% { transform:none; } }
.player-frame.is-tapped { animation:playerSwap 480ms cubic-bezier(.16,1,.3,1); }
@keyframes playerSwap { 0% { transform:scale(.985); opacity:.55; } 100% { transform:none; opacity:1; } }
.filter-btn:hover:not(.active) { color:#111; border-color:#111; background:rgba(17,17,17,.05); }
.share-btn:hover { background:#111; border-color:#111; color:#fff; }
.navpill a:hover { color:#111; }
.next-link .arrow { display:inline-block; transition:transform 350ms cubic-bezier(.16,1,.3,1); }
.next-link:hover .arrow { transform:translate(3px,-3px); }


@media (prefers-reduced-motion:reduce) {
  html.motion-ready [data-reveal],html.motion-ready [data-reveal].is-visible,
  html.motion-ready .case-link[data-reveal],html.motion-ready .case-link[data-reveal].from-top:not(.is-visible) { opacity:1; transform:none; transition:none; }
  html.motion-ready .case-link[data-reveal] .preview-media { transform:none; transition:none; }
  .case-video-preview,.case-video-preview::after,.case-video-preview > .preview-media,.next-link .arrow { transition:none; }
  .case-link.is-tapped [data-tile],.case-video-preview.is-tapped,.player-frame.is-tapped { animation:none; }
}

.navpill a.is-active, .navpill a.is-active:hover { color:#fff; }

/* ------------------------------------------------------------------------
   Built-in video player (case videos and the showreel). One <video>, a big
   play button while paused, and a floating glass control bar that slides away
   while the video plays and the pointer rests. */
.vp { position:relative; overflow:hidden; background:#0f0f0f; border-radius:16px; outline:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.vp:focus-visible { outline:2px solid #111; outline-offset:3px; }
.vp-video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#0f0f0f; }
.vp-big { position:absolute; left:50%; top:50%; z-index:2; width:76px; height:76px; margin:-38px 0 0 -38px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:#111; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 36px rgba(0,0,0,.22); transition:opacity var(--dur-s) ease,transform var(--dur-m) var(--ease-out); }
.vp-big svg { width:26px; height:26px; margin-left:3px; }
@media (hover:hover) { .vp:hover .vp-big { transform:scale(1.06); } }
.vp.is-playing .vp-big, .vp.is-loop .vp-big { opacity:0; transform:scale(.8); pointer-events:none; }
.vp-bar { position:absolute; left:12px; right:12px; bottom:12px; z-index:3; display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; background:rgba(17,17,17,.52); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); color:#fff; transition:opacity var(--dur-m) var(--ease-inout),transform var(--dur-m) var(--ease-inout); }
.vp.is-idle { cursor:none; }
.vp.is-idle .vp-bar, .vp.is-ambient .vp-bar { opacity:0; transform:translateY(10px); pointer-events:none; }
/* "Цикл" videos on case pages are pure animation: no controls, no Play button */
.vp.is-loop:not(.is-ambient):not(.is-fullscreen) .vp-bar { display:none; }
.vp.is-loop:not(.is-ambient) { cursor:default; }

/* volume: the slider slides out next to the speaker button */
.vp-vol { display:flex; align-items:center; flex-shrink:0; }
.vp-volume { width:0; opacity:0; margin:0; height:24px; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; transition:width var(--dur-m) var(--ease-out),opacity var(--dur-s) ease,margin var(--dur-m) var(--ease-out); --vol:100%; }
.vp-vol:hover .vp-volume, .vp-volume:focus-visible, .vp.is-fullscreen .vp-volume { width:80px; opacity:1; margin:0 6px 0 2px; }
.vp-volume::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,#fff var(--vol),rgba(255,255,255,.25) var(--vol)); }
.vp-volume::-moz-range-track { height:3px; border-radius:3px; background:linear-gradient(to right,#fff var(--vol),rgba(255,255,255,.25) var(--vol)); }
.vp-volume::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; margin-top:-4.5px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.vp-volume::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#fff; border:0; }
@media (hover:none) { .vp-volume { display:none; } }

/* "Свернуть": always visible while a player is full screen */
.vp-close { position:absolute; top:20px; right:20px; z-index:4; display:none; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px; border:0; border-radius:999px; background:rgba(17,17,17,.55); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:#fff; font:inherit; font-size:13px; cursor:pointer; transition:background var(--dur-xs) ease,transform var(--dur-xs) ease,opacity var(--dur-m) var(--ease-inout); }
.vp-close:hover { background:#fff; color:#111; }
.vp-close:active { transform:scale(.96); }
.vp.is-fullscreen .vp-close { display:inline-flex; }
.vp.is-fullscreen.is-idle .vp-close { opacity:0; pointer-events:none; }
.vp-btn { width:34px; height:34px; padding:0; border:0; border-radius:50%; background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; transition:background var(--dur-xs) ease,transform var(--dur-xs) ease; }
.vp-btn:hover { background:rgba(255,255,255,.14); }
.vp-btn:active { transform:scale(.9); }
.vp-track { position:relative; flex:1; min-width:60px; height:24px; display:flex; align-items:center; cursor:pointer; touch-action:none; outline:none; }
.vp-rail { position:relative; width:100%; height:3px; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.22); transition:height var(--dur-s) var(--ease-out); }
.vp-track:hover .vp-rail, .vp.is-scrubbing .vp-rail, .vp-track:focus-visible .vp-rail { height:5px; }
.vp-buffer, .vp-progress { position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); }
.vp-buffer { background:rgba(255,255,255,.28); }
.vp-progress { background:#fff; }
.vp-knob { position:absolute; top:50%; left:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); transform:scale(0); transition:transform var(--dur-s) var(--ease-out); pointer-events:none; }
.vp-track:hover .vp-knob, .vp.is-scrubbing .vp-knob, .vp-track:focus-visible .vp-knob { transform:scale(1); }
.vp-time { font-size:12px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.86); white-space:nowrap; padding:0 4px; }
.vp.is-waiting.is-playing::after { content:""; position:absolute; left:50%; top:50%; z-index:2; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; animation:vpSpin 800ms linear infinite; }
@keyframes vpSpin { to { transform:rotate(360deg); } }
.vp:fullscreen { border-radius:0; background:#000; }
.vp:-webkit-full-screen { border-radius:0; background:#000; width:100%; height:100%; }
.vp:fullscreen .vp-video { background:#000; object-fit:contain !important; }
.vp:-webkit-full-screen .vp-video { background:#000; object-fit:contain !important; }
.vp:fullscreen .vp-bar { left:24px; right:24px; bottom:24px; }
.vp-label { position:absolute; right:clamp(14px,1.6vw,24px); bottom:clamp(14px,1.6vw,24px); z-index:2; border-radius:999px; background:#fff; color:#111; padding:8px 15px; font-size:13px; pointer-events:none; transition:background var(--dur-s) ease,color var(--dur-s) ease,transform var(--dur-s) var(--ease-out); }
.vp:not(.is-ambient) .vp-label { display:none; }
@media (hover:hover) { .vp.is-ambient:hover .vp-label { background:#111; color:#fff; transform:translateY(-2px); } }

/* Showreel: a silent looping cover on the landing page. */
.reel-frame.vp { background:#f2f3f4; border-radius:20px; }
.reel-frame.vp.is-ambient { cursor:pointer; }
.reel-frame.is-ambient .vp-video { object-fit:cover; background:#f2f3f4; }
.modal-page .player-frame.vp { background:#0f0f0f; }

@media (prefers-reduced-motion:reduce) {
  .vp-big, .vp-bar, .vp-knob, .vp-rail, .vp-label { transition:none; }
}
.modal-page .player-frame:not(.vp) { background:#f2f3f4; }
.modal-page .player-frame .empty { color:rgba(17,17,17,.35); }
/* line breaks typed in the editor show up as line breaks */
.desc-main, .desc-sub { white-space: pre-line; }

/* Rounded media is clipped with clip-path: plain overflow + border-radius lets
   Chrome paint a playing <video> with square corners for a moment while its
   tile moves (the dark square frame on hover). */
.case-tile { clip-path: inset(0 round 16px); }
.case-video-preview { clip-path: inset(0 round 16px); }
.vp { clip-path: inset(0 round 16px); }
.reel-frame.vp { clip-path: inset(0 round 20px); }
.vp:fullscreen, .vp:-webkit-full-screen { clip-path: none; }
.preview-video { background: transparent; }

/* No dark edges on the page: the player is light while loading, a video close
   to the frame's shape fills it, others sit on the light background whole. */
.vp { background: #f2f3f4; }
.vp-video { background: transparent; }
.modal-page .player-frame.vp { background: #f2f3f4; }
.vp.is-fit-cover:not(.is-fullscreen) .vp-video { object-fit: cover; }
.vp.is-fullscreen, .vp.is-fullscreen .vp-video { background: #000; }

/* A preview <video> that is not playing is not painted at all, so its layer
   can never show through the rounded tile as a dark square. It stays visible
   a moment after playback stops, while the still fades back over it. */
.preview-media .preview-video { visibility:hidden; transition:visibility 0s linear 180ms; }
.preview-media.is-playing .preview-video { visibility:visible; transition-delay:0s; }
/* A mask keeps Chrome from lifting playing video into a hardware overlay,
   which ignores rounded corners (the square dark frame on Windows). */
.case-tile, .case-video-preview, .vp {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
}
.vp:fullscreen, .vp:-webkit-full-screen { -webkit-mask-image: none; mask-image: none; }
.preview-still, .preview-video, .vp-video { border-radius: inherit; }

/* Play: a light pill in the site's button style, not a big white disc */
.vp-big { width:auto; height:46px; margin:0; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:10px; padding:0 20px 0 16px; border-radius:999px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); color:#111; font:inherit; font-size:14px; letter-spacing:-.01em; box-shadow:0 6px 24px rgba(0,0,0,.14); transition:opacity var(--dur-s) ease,transform var(--dur-m) var(--ease-out),background var(--dur-xs) ease,color var(--dur-xs) ease; }
.vp-big svg { width:14px; height:14px; margin:0; }
@media (hover:hover) { .vp:hover .vp-big { transform:translate(-50%,-50%) scale(1.04); } .vp-big:hover { background:#111; color:#fff; } }
.vp.is-playing .vp-big, .vp.is-loop .vp-big { opacity:0; transform:translate(-50%,-50%) scale(.92); pointer-events:none; }

/* "Включить звук" when the browser only allowed a silent start */
.vp-unmute { position:absolute; left:16px; top:16px; z-index:4; display:none; align-items:center; gap:8px; height:38px; padding:0 15px 0 12px; border:0; border-radius:999px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:#111; font:inherit; font-size:13px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.12); animation:vpPop var(--dur-m) var(--ease-out) both; transition:background var(--dur-xs) ease,color var(--dur-xs) ease,transform var(--dur-xs) ease; }
.vp-unmute:hover { background:#111; color:#fff; }
.vp-unmute:active { transform:scale(.96); }
.vp.needs-sound.is-muted .vp-unmute { display:inline-flex; }
@keyframes vpPop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* =========================================================================
   Interaction rules — one system for every control on the site
   1. Hover    action buttons fill with ink (#111 / white text), the filled
               "Обсудить проект" and "Поделиться" are the same outlined pill and fill with ink; tags and menu items only darken,
               because their selected state is the black pill; link arrows
               (↗, also for downloads) nudge 3px; the back arrow stays.                --dur-s, ease
   2. Press    the control sinks to 96% while held.       --dur-xs
   3. Release  a soft rebound 94% → 102% → 100%.          420ms, --ease-out
   4. Select   a black pill slides to the chosen item (menu, tags).
                                                          --dur-select, --ease-out
   5. Enter    small text fades up 18px; large type rises from behind a mask;
               tiles rise and grow.                        --dur-l / --dur-xl
   6. Leave    lift and fade.                              --ease-in
   Presses use the `scale` property, so they never fight a control's own
   transform (centering, reveals).
   ========================================================================= */
:root { --dur-select: 560ms; --press: .96; }

.filter-btn, .lang-btn, .share-btn, .discuss-btn, .back-circle, .template-link, .header-right a, .footer-bottom a, .template-chip {
  transition: background var(--dur-s) ease, color var(--dur-s) ease, border-color var(--dur-s) ease, opacity var(--dur-s) ease, scale var(--dur-m) var(--ease-out);
}
.navpill a { transition: color var(--dur-select) var(--ease-out), scale var(--dur-m) var(--ease-out); }
.vp-btn, .vp-close, .vp-unmute { transition: background var(--dur-xs) ease, color var(--dur-xs) ease, opacity var(--dur-m) var(--ease-inout), scale var(--dur-m) var(--ease-out); }

/* 1. hover */
.discuss-btn:hover { background:transparent; color:#111; border-color:rgba(17,17,17,0.22); opacity:1; }
.header-right a:hover, .footer-bottom a:hover, .template-link:hover { color:#111; }
/* the back arrow stays still: the button's fill is the whole hover */
.template-chip:hover { background:#111; }

/* 2. press */
.filter-btn:active, .lang-btn:active, .share-btn:active, .discuss-btn:active, .back-circle:active, .navpill a:active,
.template-link:active, .header-right a:active, .footer-bottom a:active, .template-chip:active,
.vp-btn:active, .vp-close:active, .vp-unmute:active, .vp-big:active {
  scale: var(--press); transform: none; transition-duration: var(--dur-xs);
}
.vp-big:active { transform: translate(-50%,-50%); }

/* 3. release */
.is-tapped:not(.case-link):not(.case-video-preview):not(.player-frame) { animation: ctlTap 420ms var(--ease-out); }
@keyframes ctlTap { 0% { scale:.94; } 55% { scale:1.02; } 100% { scale:1; } }

/* tags on hover only darken: no outline, no fill (the pill marks the chosen one) */
.filter-btn:hover:not(.active) { color:#111; border-color:rgba(17,17,17,0.2); background:transparent; }
/* the control bar appears once the video has been started and paused;
   not before the first start and not after the end */
.vp:not(.has-started):not(.is-fullscreen) .vp-bar, .vp.is-ended:not(.is-fullscreen) .vp-bar { opacity:0; transform:translateY(10px); pointer-events:none; }

/* 4. select: the tags get the same sliding pill as the menu */
.filters { position: relative; }
.filter-btn { position: relative; z-index: 1; }
.filter-ind { position:absolute; left:0; top:0; z-index:0; width:0; height:0; border-radius:999px; background:#111; opacity:0; pointer-events:none;
  transition: transform var(--dur-select) var(--ease-out), width var(--dur-select) var(--ease-out), height var(--dur-select) var(--ease-out), opacity var(--dur-s) ease; }
.filters.has-ind .filter-ind { opacity:1; }
.filters.has-ind .filter-btn.active { background:transparent; border-color:transparent; color:#fff; transition: color var(--dur-select) var(--ease-out), border-color var(--dur-s) ease, scale var(--dur-m) var(--ease-out); }

/* 5. enter: large type rises line by line from behind a mask */
.rv-mask { display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.rv-in { display:block; }
html.motion-ready [data-reveal].rv-text, html.motion-ready [data-reveal].rv-text.is-visible,
html.motion-ready [data-reveal].rv-text.from-top:not(.is-visible) { opacity:1; transform:none; }
html.motion-ready .rv-text .rv-in { transform:translate3d(0,108%,0); transition:transform var(--dur-xl) var(--ease-out); }
html.motion-ready .rv-text.from-top:not(.is-visible) .rv-in { transform:translate3d(0,-108%,0); }
html.motion-ready .rv-text.is-visible .rv-in { transform:none; transition-delay:calc(var(--reveal-delay, 0ms) + var(--line, 0) * var(--stagger)); }
.rv-lines { display:block; }

@media (prefers-reduced-motion:reduce) {
  html.motion-ready .rv-text .rv-in { transform:none !important; transition:none; }
  .is-tapped { animation:none !important; }
  .filter-ind, .navpill .ind { transition:none; }
}

/* =========================================================================
   Articles
   Cards: no plate — a cover in the site's tile radius, then the text in the
   site's type scale (11px label · title · muted text). The whole card opens
   the article.
   Article page: everything hangs from the same left edge as the title (the
   page gutter), like the case page. Text keeps a reading measure of ~65
   characters. Photo/video blocks run the full content width like the
   showreel, one under another with the caption above (or "В ряд"). Rhythm:
   paragraph .85em · subheading 56–72px above · media 32–48px around.
   ========================================================================= */
.articles-section { position: relative; padding-top: clamp(56px, 9vw, 130px); --gut: clamp(20px, 3vw, 48px); }
/* with one article there are no arrows: the rule, then the cards at the
   distance the tags keep from it */
.art-bar:empty { padding-top: 0; margin-bottom: clamp(16px, 2vw, 22px); }
/* arrows are control pills: the height and outline of a tag */
.art-arrow { width: 31px; height: 31px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(17,17,17,0.2); background: transparent; color: #111; cursor: pointer;
  transition: background var(--dur-s) ease, color var(--dur-s) ease, border-color var(--dur-s) ease, opacity var(--dur-s) ease, scale var(--dur-m) var(--ease-out); }
.art-arrow svg { display: block; width: 14px; height: 14px; }
.art-arrow:hover:not(:disabled) { background: #111; color: #fff; border-color: #111; }
.art-arrow:active:not(:disabled) { scale: var(--press, .96); transition-duration: var(--dur-xs); }
.art-arrow:disabled { opacity: .3; cursor: default; }

/* cards take the width of a gallery column (4 / 3 / 2 columns, like the work grid) */
.art-track { --gap: clamp(14px, 1.4vw, 20px); --cols: 4; display: flex; gap: var(--gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  margin: -8px calc(var(--gut) * -1) -8px; padding: 8px var(--gut) 8px; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; -webkit-user-select: none; user-select: none; }
@media (max-width: 1499px) { .art-track { --cols: 3; } }
@media (max-width: 1099px) { .art-track { --cols: 2; } }
@media (max-width: 639px) { .art-track { --cols: 1.15; } }
.art-track::-webkit-scrollbar { display: none; }
.art-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
/* while dragging, the cards show no hover/press state */
.art-track.is-dragging .art-cover { transform: none !important; }

.art-card { flex: 0 0 calc((100vw - 2 * var(--gut) - (var(--cols) - 1) * var(--gap)) / var(--cols)); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
/* the cover behaves like a case tile: lifts on hover, presses in on click */
.art-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #f2f3f4; transition: transform 500ms var(--ease-out); }
.art-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
@media (hover: hover) { .art-card:hover .art-cover { transform: translateY(-3px); } }
.art-card:active .art-cover { transform: translateY(-1px) scale(.975); transition-duration: 140ms; }
.art-body { display: flex; flex-direction: column; gap: 10px; }
.art-title { margin: 0; font-weight: 400; color: #111; text-wrap: pretty; }
.art-excerpt { margin: 0; color: rgba(17,17,17,0.55);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }

/* article page */
.article-hero .tag-sep { color: rgba(17,17,17,0.25); }
.article-hero h1 { max-width: 20ch; }
.article-body { --measure: 700px; --wide: 1080px; border-top: 1px solid rgba(17,17,17,0.12); padding: clamp(32px, 4.4vw, 64px) 0 clamp(48px, 7vw, 100px); }
.ab-p, .ab-h1, .ab-h2 { max-width: var(--measure); }
.ab-p { margin: 0 0 .85em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; letter-spacing: -0.01em; text-wrap: pretty; }
.article-body > .ab-p:first-child { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.4; letter-spacing: -0.02em; }
.ab-h1 { margin: clamp(56px, 6vw, 96px) 0 .45em; font-size: clamp(32px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.045em; font-weight: 400; text-wrap: balance; }
.ab-h2 { margin: clamp(48px, 5vw, 72px) 0 .55em; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 400; text-wrap: balance; }
.article-body > :first-child { margin-top: 0; }
.ab-media { margin: clamp(48px, 6vw, 88px) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
.ab-media.is-row { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }
.ab-fig { margin: 0; display: flex; flex-direction: column; }
.ab-media:not(.is-row) .ab-fig figcaption { order: -1; margin: 0 0 12px; }
.ab-frame { position: relative; overflow: hidden; border-radius: 20px; background: #fff; }
.ab-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-frame.vp { border-radius: 20px; background: #fff; }
.ab-fig figcaption { margin-top: 10px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17,17,17,0.6); }
.article-page .next-section { margin-top: 0; }
@media (max-width: 700px) { .ab-media, .ab-media.is-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .art-cover { transition: none; } }

/* =========================================================================
   Typography — one family (Onest, Cyrillic + Latin, 400 / 500), one scale.
   Every text on the site uses one of these roles; nothing sets its own size.
     display   hero heading, contact call to action
     h1        page title (case, article)
     h2        big heading inside a page, "next project / article"
     h3        subheading inside an article
     lead      first paragraph, main case description
     body      running text, fact values, article card title, footer
     ui        menu, brand, links, tile captions
     ui-s      buttons and pills (tags, share, player controls)
     label     12px, UPPERCASE, tracked — markers that orient, not read:
               the brand line under BATURA, section names and counters
               ("Кейсы / 5 работ"), tags (on tiles and above a case title),
               the line above an article title (type · date · reading time),
               "Следующий проект / статья", the footer line
     caption   12px, sentence case — small text that is read: fact and
               footer labels, video captions
   Notes beside a heading ("Пока ты читаешь…", "Расскажите о проекте…")
   are body text in the secondary colour.
   Colour: #111 for content, 55% for secondary text, 60% for labels (small
   text needs the stronger grey to stay readable: about 5:1 on white).
   ========================================================================= */
:root {
  --fs-display: clamp(38px, 8.4vw, 150px); --lh-display: .92;  --ls-display: -0.05em;
  --fs-h1: clamp(30px, 5.4vw, 84px);       --lh-h1: 1;         --ls-h1: -0.045em;
  --fs-h2: clamp(24px, 3.4vw, 52px);       --lh-h2: 1.05;      --ls-h2: -0.04em;
  --fs-h3: clamp(20px, 2vw, 30px);         --lh-h3: 1.2;       --ls-h3: -0.03em;
  --fs-lead: clamp(18px, 1.7vw, 26px);     --lh-lead: 1.45;    --ls-lead: -0.02em;
  --fs-body: clamp(15px, 1.2vw, 17px);     --lh-body: 1.55;    --ls-body: -0.01em;
  --fs-ui: 15px;                           --lh-ui: 1.3;       --ls-ui: -0.01em;
  --fs-ui-s: 13px;                         --lh-ui-s: 1.2;     --ls-ui-s: 0;
  --fs-label: 12px;                        --lh-label: 1.3;    --ls-label: 0.06em;
}
.hero h1, .mail-cta { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; }
.modal-hero h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 400; }
.next-link .title, .ab-h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 400; }
.ab-h2, .next-link .arrow { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 400; }
.desc-main, .article-body > .ab-p:first-child { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); }
.meta-item .value, .contact-top .title, .footer-col a, .footer-col span.value, .footer-social, .footer-extra,
.desc-sub, .gallery-empty, .ab-p, .art-title, .art-excerpt {
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); text-transform: none; }
.brand-name, .navpill a, .template-link, .template-link [data-a], .case-tile .cap .title {
  font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: var(--ls-ui); text-transform: none; }
.filter-btn, .share-btn, .discuss-btn, .vp-big, .vp-close, .vp-unmute, .vp-label, .vp-time {
  font-size: var(--fs-ui-s); line-height: var(--lh-ui-s); letter-spacing: var(--ls-ui-s); }
.brand-sub, .work-head .label, .work-head .count, .footer-bottom, .hero-top .eyebrow, .contact-top .label,
.cat-pill, .modal-hero .tag, .next-section > .label {
  font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.header-right, .lang-btn, .reel-label, .player-frame .empty,
.ab-fig figcaption, .meta-item .label, .footer-col .label, .case-tile .cap .year {
  font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: 0; text-transform: none; }
.cat-pill { line-height: 26px; }
.hero-top .note, .contact-top .title {
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); text-transform: none; color: rgba(17,17,17,0.55); }
@media (max-width: 640px) { .navpill a { font-size: var(--fs-ui-s); } }

/* "Обсудить проект" is the same outlined pill as "Поделиться":
   transparent with a light outline, fills with ink on hover */
.discuss-btn { background: transparent; color: #111; border-color: rgba(17,17,17,0.22); opacity: 1; }
.discuss-btn:hover { background: #111; color: #fff; border-color: #111; opacity: 1; }
/* "next" arrow: a drawn thin arrow in the stroke of the back button, not the
   ↗ glyph (which the font renders heavy and uneven at large sizes) */
.next-link .arrow { display: inline-flex; align-self: flex-start; margin-top: .1em; line-height: 1; }
.next-link .arrow .arr { width: clamp(30px, 3.8vw, 56px); height: clamp(30px, 3.8vw, 56px); }

/* One arrow everywhere (links, "На весь экран", next project): one SVG path
   (no overlapping strokes), drawn like the back button's arrow — same box and
   1.25 stroke at text size; the large "next" arrow keeps a 1.5px line. */
.arr { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.2em; flex-shrink: 0; }
.next-link .arrow .arr * { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.next-link .arrow .arr { display: block; }
[data-arrowlink] [data-a] { display: inline-flex; align-items: center; }

/* article card: a 16:9 cover and the title under it in body size — like the
   caption of a tile. The track keeps 8px above the cards so the hover lift is
   never clipped. */
.art-title { text-wrap: pretty; }
/* "При наведении" videos in articles: a still until hovered */
.vp-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--dur-s) ease; }
.vp.has-still .vp-still { opacity: 1; }
.vp.is-hover-only.is-playing.has-started .vp-still { opacity: 0; }
.vp.is-hover-only { cursor: default; }

/* Header controls on case and article pages share one height (36px): the
   round back button and the "Поделиться / Обсудить проект" pills. */
.back-circle { width: 36px; height: 36px; }
.share-btn, .discuss-btn { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 15px; }

/* Language switch: a fixed-size pill with its label centred optically */
.lang-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 28px; min-width: 38px; padding: 0 10px; line-height: 1; }

/* Article cards enter like the case tiles: they rise and grow into place
   while the picture settles inside the rounded frame. */
html.motion-ready .art-card[data-reveal] { transform: translate3d(0, var(--rise), 0) scale(.94); transform-origin: 50% 100%; transition: opacity var(--dur-l) ease, transform var(--dur-xl) var(--ease-out); }
html.motion-ready .art-card[data-reveal].from-top { transform-origin: 50% 0; }
html.motion-ready .art-card[data-reveal].from-top:not(.is-visible) { transform: translate3d(0, calc(var(--rise) * -1), 0) scale(.94); }
html.motion-ready .art-card[data-reveal].is-visible { transform: none; }
html.motion-ready .art-card[data-reveal] .art-cover img { transform: scale(1.14); transition: transform 1300ms var(--ease-out); }
html.motion-ready .art-card[data-reveal].is-visible .art-cover img { transform: none; transition-delay: var(--reveal-delay, 0ms); }
/* the row glides by script on desktop; touch keeps the native snap */
.art-track.is-glide { scroll-snap-type: none; scroll-behavior: auto; }
.art-card .art-excerpt { margin-top: -2px; }
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .art-card[data-reveal], html.motion-ready .art-card[data-reveal].from-top:not(.is-visible) { transform: none; transition: none; opacity: 1; }
  html.motion-ready .art-card[data-reveal] .art-cover img { transform: none; transition: none; }
}

/* Media enter like the tiles everywhere (case player and its previews,
   photos and videos in articles): rise and grow, the picture settles inside. */
html.motion-ready .ab-fig[data-reveal], html.motion-ready .case-video-preview[data-reveal], html.motion-ready .player-frame[data-reveal] {
  transform: translate3d(0, var(--rise), 0) scale(.94); transform-origin: 50% 100%; transition: opacity var(--dur-l) ease, transform var(--dur-xl) var(--ease-out); }
html.motion-ready .ab-fig[data-reveal].from-top, html.motion-ready .case-video-preview[data-reveal].from-top, html.motion-ready .player-frame[data-reveal].from-top { transform-origin: 50% 0; }
html.motion-ready .ab-fig[data-reveal].from-top:not(.is-visible), html.motion-ready .case-video-preview[data-reveal].from-top:not(.is-visible), html.motion-ready .player-frame[data-reveal].from-top:not(.is-visible) { transform: translate3d(0, calc(var(--rise) * -1), 0) scale(.94); }
html.motion-ready .ab-fig[data-reveal].is-visible, html.motion-ready .case-video-preview[data-reveal].is-visible, html.motion-ready .player-frame[data-reveal].is-visible { transform: none; }
html.motion-ready .case-video-preview[data-reveal].is-visible:active { transform: scale(.975); transition-duration: var(--dur-xs); }
html.motion-ready .ab-fig[data-reveal] .ab-frame > img, html.motion-ready .ab-fig[data-reveal] .vp-video, html.motion-ready .ab-fig[data-reveal] .vp-still,
html.motion-ready .case-video-preview[data-reveal] .preview-media, html.motion-ready .player-frame[data-reveal] .vp-video { transform: scale(1.14); transition: transform 1300ms var(--ease-out); }
html.motion-ready .ab-fig[data-reveal].is-visible .ab-frame > img, html.motion-ready .ab-fig[data-reveal].is-visible .vp-video, html.motion-ready .ab-fig[data-reveal].is-visible .vp-still,
html.motion-ready .case-video-preview[data-reveal].is-visible .preview-media, html.motion-ready .player-frame[data-reveal].is-visible .vp-video { transform: none; transition-delay: var(--reveal-delay, 0ms); }
.player-frame.vp:fullscreen .vp-video { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .ab-fig[data-reveal], html.motion-ready .case-video-preview[data-reveal], html.motion-ready .player-frame[data-reveal],
  html.motion-ready .ab-fig[data-reveal] .ab-frame > img, html.motion-ready .ab-fig[data-reveal] .vp-video,
  html.motion-ready .case-video-preview[data-reveal] .preview-media, html.motion-ready .player-frame[data-reveal] .vp-video { transform: none !important; transition: none !important; opacity: 1; }
}

/* words are measured inline to find the real lines */
.rv-lines .rv-w { display: inline; }

/* While a video is full screen the page behind it stays put: no wheel, space
   or arrow key scrolls it away from the spot the visitor comes back to. */
html.is-fullscreen { overflow: hidden; }

/* Hover on media previews: the picture leans in a little inside its rounded
   frame — case tiles that loop all the time ("Всегда в цикле") and article
   covers. Hover-played tiles do not: their still would grow and then cut to
   the video. The frame keeps its place; only the picture scales (the `scale`
   property, so it never fights the entrance transforms). */
.preview-media > .preview-still, .art-cover img { transition: scale 700ms var(--ease-out); }
/* the video keeps its delayed hide (see "A preview <video> that is not playing") */
.preview-media > .preview-video { transition: visibility 0s linear 180ms, scale 700ms var(--ease-out); }
.preview-media.is-playing > .preview-video { transition: visibility 0s linear 0s, scale 700ms var(--ease-out); }
html.motion-ready .art-card[data-reveal] .art-cover img { transition: transform 1300ms var(--ease-out), scale 700ms var(--ease-out); }
@media (hover: hover) {
  [data-case]:hover .preview-media.is-loop > .preview-still, [data-case]:hover .preview-media.is-loop > .preview-video,
  .art-card:hover .art-cover img { scale: 1.04; }
  html.is-scrolling [data-case]:hover .preview-media > *, .art-track.is-dragging .art-cover img { scale: 1; }
}

/* Article card hover: a white "Читать статью ↗" pill rises in the cover's
   corner, like the showreel's "На весь экран ↗"; pointing at the pill itself
   fills it with ink, as that pill does. */
.art-go { position: absolute; right: clamp(10px, 1.2vw, 16px); bottom: clamp(10px, 1.2vw, 16px); z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 8px 15px; border-radius: 999px; background: #fff; color: #111; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  font-size: var(--fs-ui-s); line-height: var(--lh-ui-s); letter-spacing: var(--ls-ui-s); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur-s) ease, transform var(--dur-m) var(--ease-out), background var(--dur-s) ease, color var(--dur-s) ease; }
@media (hover: hover) {
  .art-card:hover .art-go { opacity: 1; transform: none; pointer-events: auto; }
  .art-card .art-go:hover { background: #111; color: #fff; }
  .art-track.is-dragging .art-go { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .art-go { transition: none !important; }
  .preview-media > .preview-still, .preview-media > .preview-video, .art-cover img { scale: 1 !important; }
}

/* =========================================================================
   Touch screens and phones
   The phone layout is its own composition, not the desktop one squeezed:
   - navigation is a floating tab bar at the bottom, in reach of the thumb;
     the top bar (name, socials, language) slides away while scrolling down;
   - cases sit two to a row as square previews with the title and "tag ·
     year" under them; the row resting in the middle of the screen plays its
     preview by itself (touch has no hover), a tap opens the case;
   - tags are one row that scrolls sideways; articles are a swipeable row
     that shows the next card peeking in;
   - small label/value text (first screen, case facts, footer) is one
     column, the label above its value as on the desktop, no rules between;
   - a case page shows its videos as a sideways strip under the player;
   - running text wraps plainly (no "pretty" re-balancing, which leaves
     ragged, half-empty lines on a narrow screen).
   ========================================================================= */
html { -webkit-tap-highlight-color: transparent; }
.case-tile .cap-meta { display: none; }

/* A finger leaves :hover behind after a tap: on touch screens the hover
   looks are the resting looks. Presses still answer (:active, bounce). */
@media (hover: none) {
  a:hover, .header-right a:hover, .footer-bottom a:hover { color: inherit; }
  .template-link:hover { color: rgba(17,17,17,0.6); }
  [data-case]:hover [data-tile] { transform: none; }
  .case-video-preview:hover { opacity: 1; }
  .filter-btn:hover:not(.active) { color: rgba(17,17,17,0.6); }
  .lang-btn:hover { background: transparent; color: rgba(17,17,17,0.6); border-color: rgba(17,17,17,0.18); }
  .back-circle:hover { background: transparent; color: inherit; border-color: rgba(17,17,17,0.18); }
  .share-btn:hover, .discuss-btn:hover { background: transparent; color: #111; border-color: rgba(17,17,17,0.22); }
  .template-chip:hover { background: rgba(0,0,0,.45); }
  .navpill a:hover { color: rgba(17,17,17,0.55); }
  /* tablets keep the justified grid; its caption is simply always shown */
  .case-tile .scrim, .case-tile .cap { opacity: 1; transform: none; }
  /* player controls sized for a finger */
  .vp-btn { width: 40px; height: 40px; }
}

@media (max-width: 900px) {
  .hero-meta.cols4, .footer-cols, .modal-facts.cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 16px; }
  .meta-item .value, .desc-main, .desc-sub, .ab-p, .art-title, .art-excerpt, .contact-top .title, .hero-top .note { text-wrap: wrap; }
}

@media (max-width: 639px) {
  :root { --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-lead: 19px; --fs-body: 15px; --rise: 36px; }

  /* top bar: slides up out of the way (by `top`, so the tab bar inside it
     stays fixed to the screen) */
  .site-header { padding: 14px 20px; margin-bottom: 6px; gap: 12px; transition: top 420ms var(--ease-out), transform 500ms var(--ease-out); }
  .site-header:not(.modal-header).nav-hidden { transform: none; top: -84px; }
  .header-right { gap: 14px; }

  /* the tab bar */
  .site-header:not(.modal-header) .navpill { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: max-content; max-width: calc(100% - 24px); margin: 0 auto;
    display: flex; gap: 2px; padding: 5px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 10px 30px rgba(17,17,17,.14), 0 0 0 1px rgba(17,17,17,.06); }
  .site-header:not(.modal-header) .navpill a { padding: 11px 15px; font-size: 14px; }
  .site-header:not(.modal-header) .navpill .ind { top: 5px; height: calc(100% - 10px); }

  /* first screen */
  .hero { padding: 6px 0 48px; }
  .hero-top { justify-content: flex-start; padding-bottom: 22px; }
  .hero-top .eyebrow:empty { display: none; }
  .hero-meta { margin-top: 32px; }

  /* label / value text: one column, the label above its value (as on the
     desktop) — values get the full width and mostly stay on one line */
  .hero-meta.cols4, .modal-facts.cols4, .footer-cols { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; padding-top: 18px; }
  .hero-meta .meta-item, .modal-facts .meta-item, .footer-col { gap: 5px; }
  .meta-item .value { max-width: none; }

  /* showreel */
  .reel-frame.vp { border-radius: 16px; clip-path: inset(0 round 16px); }
  .vp-label { padding: 7px 12px; right: 10px; bottom: 10px; }

  /* cases */
  .work-section, .articles-section { padding-top: 64px; }
  .work-head { padding-bottom: 14px; }
  .filters:not(.art-bar) { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -20px 22px; padding: 14px 20px 2px;
    border-top: 0; background: linear-gradient(rgba(17,17,17,.12), rgba(17,17,17,.12)) 20px 0 / calc(100% - 40px) 1px no-repeat; }
  .filters:not(.art-bar)::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; padding: 8px 15px; }

  .case-link .case-tile { background: transparent; border-radius: 0; clip-path: none; -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .case-tile .img { bottom: 50px; border-radius: 14px; clip-path: inset(0 round 14px); -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }
  .case-tile .scrim { display: none; }
  .case-tile .cap { left: 0; right: 0; top: auto; bottom: 0; height: 50px; padding-top: 9px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; color: #111; opacity: 1; transform: none; }
  .case-tile .cap .title { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .case-tile .cap .year, .badges-row .cat-pill { display: none; }
  .case-tile .cap-meta { display: block; font-size: 12px; line-height: 1.3; color: rgba(17,17,17,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .case-logo { left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 8px; }
  .badges-row { right: 8px; top: 8px; }
  .template-chip { width: 26px; height: 26px; }

  /* articles: a swipeable row, the next card peeking in */
  .art-track { --cols: 1.3; }
  .art-bar .art-arrow { display: none; }
  .art-bar { padding-top: 0; margin-bottom: 16px; }
  .art-card { gap: 10px; }
  .art-cover { border-radius: 14px; }
  .art-body { gap: 6px; }

  /* contact */
  .contact-section { margin-top: 48px; padding: 44px 0 calc(96px + env(safe-area-inset-bottom, 0px)); }
  .contact-top { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 22px; }
  .footer-cols { margin-top: 28px; border-top: 1px solid rgba(17,17,17,.12); }
  .footer-bottom { margin-top: 36px; }

  /* case and article pages */
  .site-header.modal-header { padding: 12px 20px; }
  .site-header.modal-header .share-btn, .site-header.modal-header .discuss-btn { padding: 0 13px; }
  .modal-inner { padding: 0 20px; }
  .modal-hero { padding: 22px 0 26px; }
  .modal-facts { margin-top: 24px; }
  .template-link-list { gap: 6px 22px; }
  .case-video-previews { display: flex !important; overflow-x: auto; gap: 8px; margin: 0 -20px; padding: 2px 20px 4px; width: auto !important; height: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; }
  .case-video-previews::-webkit-scrollbar { display: none; }
  .case-video-preview { flex: 0 0 31%; width: auto; height: auto; aspect-ratio: 16 / 9; scroll-snap-align: start; border-radius: 12px; clip-path: inset(0 round 12px); }
  .case-video-preview > .preview-media, .case-video-preview::after { border-radius: 12px; }
  .case-video-preview.is-active > .preview-media { inset: 4px; border-radius: 9px; }
  /* a hairline edge, so a white frame still reads as a card on the white page */
  .case-video-preview > .preview-media::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(17,17,17,.1); pointer-events: none; }
  .case-video-previews.is-glide { scroll-snap-type: none; }
  .case-video-previews.is-dragging { cursor: grabbing; }
  .case-video-previews.is-dragging .case-video-preview { transform: none !important; }
  .desc-cols { padding: 28px 0 32px; gap: 18px; }
  .next-section { padding: 22px 0 48px; }
  .article-body { padding: 26px 0 48px; }
  .ab-h1 { margin-top: 44px; }
  .ab-h2 { margin-top: 36px; }
  .ab-media { margin: 32px 0; gap: 28px; }
  .ab-frame, .ab-frame.vp { border-radius: 14px; }
  .vp-bar { left: 8px; right: 8px; bottom: 8px; padding: 4px 12px 4px 4px; gap: 4px; }
}

/* Touch: how things answer a finger (see the press handling in site.js).
   Cards press in only when the finger rests on them, not when a scroll
   starts over them; a long press opens no link menu and selects no text;
   small controls get a larger invisible area to hit. */
@media (hover: none) {
  .case-link:active [data-tile], .art-card:active .art-cover { transform: none; }
  .case-video-preview:active, html.motion-ready .case-video-preview[data-reveal].is-visible:active { transform: none; }
  .case-link.is-pressed [data-tile] { transform: scale(.97); transition: transform var(--dur-xs) var(--ease-out); }
  .art-card.is-pressed .art-cover { transform: scale(.97); transition: transform var(--dur-xs) var(--ease-out); }
  .case-video-preview.is-pressed, html.motion-ready .case-video-preview.is-pressed[data-reveal].is-visible { transform: scale(.95); transition-duration: var(--dur-xs); }
  .case-link, .art-card, .case-video-preview, .vp, .filters, .navpill { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  a, button, .vp, .case-link, .art-card { touch-action: manipulation; }
  .template-chip, .back-circle, .header-right a { position: relative; }
  .template-chip::before, .back-circle::before, .header-right a::before { content: ""; position: absolute; inset: -9px; }
}

/* Touch player, like YouTube: while the controls are up over a playing
   video, the centre pill turns into "Пауза"; it fades with the bar. */
.vp-big-ic { display: inline-flex; font-style: normal; }
.vp.is-touch.is-playing:not(.is-idle):not(.is-loop) .vp-big { opacity: 1; transform: translate(-50%,-50%); pointer-events: auto; }
.vp.is-touch.is-playing.is-idle .vp-big { transition: opacity var(--dur-m) var(--ease-inout), transform var(--dur-m) var(--ease-out); }

/* =========================================================================
   Phones: sized for a thumb
   Everything a finger aims at is at least 40–44px tall (Apple's guideline
   for touch targets is 44pt), text sits one step larger than on the desktop
   scale, and the main action of a case or article page — "Обсудить проект" —
   is a wide button at the bottom of the screen, where the tab bar is on the
   home page.
   ========================================================================= */
@media (max-width: 639px) {
  :root { --fs-body: 16px; --fs-ui: 16px; --fs-ui-s: 15px; --fs-lead: 20px; }

  /* top bar: name on the left, socials and language as soft 40px buttons */
  .site-header { padding: 12px 20px; }
  .brand-name { font-size: 17px; }
  .header-right { gap: 6px; }
  .header-right a, .header-right .lang-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 0 12px;
    border: 0; border-radius: 999px; background: rgba(17,17,17,.05); color: #111; font-size: 13px; letter-spacing: .02em; text-transform: none; }
  .header-right a::before { inset: -3px; }

  /* the tab bar: the full width of the screen, four equal 48px buttons */
  .site-header:not(.modal-header) .navpill { left: 12px; right: 12px; width: auto; max-width: none; margin: 0; justify-self: stretch; padding: 5px; gap: 0; }
  .site-header:not(.modal-header) .navpill a { flex: 1 1 0; text-align: center; padding: 14px 4px; font-size: 15px; line-height: 20px; white-space: nowrap; }

  /* case and article pages: back and share up top (44px), the main action
     at the bottom of the screen; the top bar slides away by `top` as on the
     home page, so the bottom button inside it stays fixed to the screen */
  .site-header.modal-header { padding: 10px 20px; }
  .site-header.modal-header.nav-hidden { transform: none; top: -84px; }
  .modal-header .back-circle { width: 44px; height: 44px; }
  .modal-header .share-btn { height: 44px; padding: 0 18px; font-size: 15px; }
  .modal-header .discuss-btn { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    height: 54px; padding: 0 20px; justify-content: center; border: 0; background: #111; color: #fff; font-size: 16px;
    box-shadow: 0 10px 30px rgba(17,17,17,.22); }
  .modal-page { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* first screen */

  /* tags: 44px pills, one scrolling row */
  .filters:not(.art-bar) { gap: 8px; padding-top: 16px; }
  .filter-btn { height: 44px; padding: 0 18px; font-size: 15px; }

  /* case tiles: a larger caption */
  .case-tile .img { bottom: 56px; }
  .case-tile .cap { height: 56px; padding-top: 10px; gap: 3px; }
  .case-tile .cap .title { font-size: 16px; }
  .case-tile .cap-meta { font-size: var(--fs-label); }

  /* articles */
  .art-card .art-title { font-size: var(--fs-body); line-height: 1.4; }

  /* the case's links become buttons */
  .template-link-list { gap: 8px; margin-top: 18px; }
  .template-link, .template-link:hover { color: #111; }
  .template-link { height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(17,17,17,.05); color: #111; font-size: 15px; }
  .template-link [data-a] { font-size: 15px; }

  /* the player's controls */
  .vp-big { height: 50px; padding: 0 22px 0 18px; font-size: 16px; }
  .vp-btn { width: 42px; height: 42px; }
  .vp-time { font-size: 13px; }

  /* contact and footer: the links are buttons too */
  .footer-social, .footer-extra { gap: 8px; }
  .footer-social a, .footer-extra a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(17,17,17,.05); font-size: 15px; }
  .footer-bottom { align-items: center; }
  .footer-bottom a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(17,17,17,.05); color: #111; }
}

/* Phones: the language switch is an outlined pill, set apart from the filled
   social buttons; the showreel's "На весь экран" is sized like every other
   button (it stays white: it sits on the video). */
@media (max-width: 639px) {
  .header-right .lang-btn { margin-left: 4px; background: transparent; border: 1px solid rgba(17,17,17,.22); }
  .vp-label { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px; font-size: 15px; line-height: 1; }
}

/* Touch: a pressed button shows the desktop hover look — the ink fill —
   and sinks in; the release bounce plays on the click (see site.js). */
@media (hover: none) {
  .is-down:not(.reel-frame) { scale: .94; transition-duration: var(--dur-xs) !important; }
  .back-circle.is-down, .share-btn.is-down, .lang-btn.is-down, .filter-btn.is-down:not(.active), .template-link.is-down,
  .header-right a.is-down, .footer-social a.is-down, .footer-extra a.is-down, .footer-bottom a.is-down, .art-arrow.is-down,
  .template-chip.is-down, .vp-big.is-down, .vp-unmute.is-down, .vp-close.is-down {
    background: #111 !important; color: #fff !important; border-color: #111 !important; }
  .discuss-btn.is-down { background: #3a3a3a !important; color: #fff !important; }
  .navpill a.is-down:not(.is-active) { color: #111; }
  .vp-btn.is-down { background: rgba(255,255,255,.22); }
  .reel-frame.is-down .vp-label { background: #111; color: #fff; scale: .96; }
  .vp-label { transition: background var(--dur-xs) ease, color var(--dur-xs) ease, scale var(--dur-m) var(--ease-out); }
}

/* Phones: under the heading, one thesis of their own ("Тезис для телефона" in
   the editor) under a hairline, label over text as on the desktop — instead
   of the four desktop blocks. Then the showreel. */
.facts-phone { display: none; }
@media (max-width: 639px) {
  .hero .hero-meta { display: none; }
  .hero { padding: 36px 0 28px; }
  .facts-phone { display: block; margin: 0 0 28px; padding-top: 16px; border-top: 1px solid rgba(17,17,17,.14); }
  .facts-phone[hidden] { display: none; }
  .phone-thesis { gap: 8px; }
  .phone-thesis .value { max-width: none; }
  .footer-cols { border-top: 0; margin-top: 20px; }
}

/* Sideways rows on phones (tags, articles, a case's videos) end with
   the same 20px of air they start with. Safari drops a scroll row's end
   padding, so the air is a spacer item instead; the last item also snaps to
   the end, so a swipe can always bring it in whole. */
@media (max-width: 639px) {
  .filters:not(.art-bar), .art-track, .case-video-previews { padding-right: 0 !important; }
  .filters:not(.art-bar)::after, .art-track::after, .case-video-previews::after { content: ""; flex: 0 0 20px; align-self: stretch; }
  .filters:not(.art-bar)::after { margin-left: -8px; }
  .art-track::after { margin-left: calc(var(--gap) * -1); }
  .case-video-previews::after { margin-left: -8px; }
  .art-track .art-card:last-child, .case-video-preview:last-child { scroll-snap-align: end; }
  .art-track, .case-video-previews { scroll-padding-inline: 20px; }
}

/* Phones: the side notes ("Движение — часть дизайна", "Расскажите о проекте…")
   are left out; a line that is left with nothing in it goes too. */
@media (max-width: 639px) {
  .hero-top .note, .contact-top .title { display: none; }
  .hero-top:has(.eyebrow:empty), .contact-top:has(.label:empty) { display: none; }
}

/* Phone type scale, one ladder: display 42 · h1 36 · h2 28 · h3 22 · lead 20 ·
   body 16 · buttons 15 · labels and captions 13. Display (the first-screen
   heading and "Давайте поработаем") shrinks with very narrow screens so the
   longest word still fits. Every button — the tab bar, tags, TG/DP/EN,
   "Поделиться", "Обсудить проект", "Смотреть" — speaks at the button size.
   Sections stand 64px apart, as between the cases and the articles. */
@media (max-width: 639px) {
  :root { --fs-display: min(42px, 10.8vw); --fs-label: 13px; }
  .mail-cta { font-size: var(--fs-display); }
  .header-right a, .header-right .lang-btn, .modal-header .discuss-btn, .vp-big { font-size: var(--fs-ui-s); letter-spacing: 0; }
  .site-header .navpill a, .template-link, .footer-social a, .footer-extra a { letter-spacing: 0; }
  .hero { padding-bottom: 33px; }
  .contact-section { margin-top: 64px; padding-top: 32px; }
}

/* "Поделиться" after the link is copied: the ink fill, "Ссылка скопирована" */
.share-btn.is-done, .share-btn.is-done:hover { background: #111; color: #fff; border-color: #111; }

/* Phones: cards in the swipeable rows (articles, a case's videos) enter by
   rising only. The row snaps to its cards, and a card still scaled down for
   its entrance would make the row settle a few pixels off, then jump when
   the card reaches full size. */
@media (max-width: 639px) {
  html.motion-ready .art-card[data-reveal], html.motion-ready .case-video-preview[data-reveal] { transform: translate3d(0, var(--rise), 0); }
  html.motion-ready .art-card[data-reveal].from-top:not(.is-visible), html.motion-ready .case-video-preview[data-reveal].from-top:not(.is-visible) { transform: translate3d(0, calc(var(--rise) * -1), 0); }
  html.motion-ready .art-card[data-reveal].is-visible, html.motion-ready .case-video-preview[data-reveal].is-visible { transform: none; }
}

/* Phones: the top bar is the logo and the name, then TG / DP and the
   language switch; the subtitle stays on the desktop. */
@media (max-width: 639px) {
  .site-header .brand-sub { display: none; }
}

/* The name in the top bar: the name over its subtitle. */
.brand { flex-direction: row; align-items: center; }
.brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Phones: the top bar stays on screen while scrolling, like an app's title
   bar; once the page has moved under it, a hairline sets it apart. */
@media (max-width: 639px) {
  .site-header.nav-hidden, .site-header:not(.modal-header).nav-hidden, .site-header.modal-header.nav-hidden { top: 0; transform: none; }
  .site-header { transition: box-shadow var(--dur-s) ease; }
  .site-header.is-scrolled { box-shadow: 0 1px 0 rgba(17,17,17,.1); }
}

/* =========================================================================
   Phones, second pass: the page reads as a run of screens, not a document.
   - Cases come one after another: the title first, tag · year under it,
     then the picture with "Смотреть кейс" on it.
     The first three show; "Смотреть все кейсы" opens the rest.
   - The articles are a black sheet with rounded top corners; the contacts are
     a white sheet sliding over it — the change of ground sets the rhythm.
   ========================================================================= */
.gallery-more { display: none; }
@media (max-width: 639px) {
  /* cases: the title first */
  .work-section { padding-top: 88px; }
  .case-tile .img { top: 64px; bottom: 0; }
  .case-tile .cap { top: 0; bottom: auto; height: 64px; padding: 0; gap: 3px; }
  .case-tile .cap .title { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
  .case-logo, .badges-row { top: 76px; }
  .cap-go { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px;
    border-radius: 999px; background: #fff; color: #111; font-size: var(--fs-ui-s); line-height: 1; pointer-events: none; }
  .case-link.is-pressed .cap-go { background: #111; color: #fff; }
  .gallery-more { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 36px; border: 0; border-radius: 999px;
    background: #111; color: #fff; font: inherit; font-size: var(--fs-ui-s); cursor: pointer; }
  .gallery-more[hidden] { display: none; }

  /* articles: a black sheet */
  .articles-section { margin: 96px -20px 0; padding: 36px 20px 72px; border-radius: 28px 28px 0 0; background: #111; color: #fff; --gut: 20px; }
  .articles-section .work-head .label { color: #fff; }
  .articles-section .work-head .count { color: rgba(255,255,255,.55); }
  .articles-section .art-bar { border-top-color: rgba(255,255,255,.16); }
  .articles-section .art-card .art-title { color: #fff; }
  .articles-section .art-card .art-excerpt { color: rgba(255,255,255,.6); }
  .articles-section .art-cover { background: #1d1d1d; }

  /* contacts: a white sheet over it */
  .contact-section { position: relative; z-index: 1; margin: -28px -20px 0; padding: 48px 20px calc(96px + env(safe-area-inset-bottom, 0px));
    border-top: 0; border-radius: 28px 28px 0 0; background: #fff; }
}

/* =========================================================================
   Phones, third pass
   - The top bar is two floating capsules — the name, and TG · DP · EN — over
     the page, no bar and no line; on case and article pages "назад" and
     "Поделиться" float the same way.
   - No hairlines on the phone: sections are set apart by space and by their
     titles, set large ("Кейсы", "Статьи") with the count beside them.
   ========================================================================= */
@media (max-width: 639px) {
  :root { --float-shadow: 0 4px 18px rgba(17,17,17,.10), 0 0 0 1px rgba(17,17,17,.05); }

  /* floating capsules */
  .site-header, .site-header.modal-header { background: transparent; pointer-events: none; }
  .site-header > * { pointer-events: auto; }
  .site-header.is-scrolled { box-shadow: none; }
  .site-header .brand { justify-self: start; height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: var(--float-shadow); }
  .site-header .header-right { height: 44px; padding: 0 4px; gap: 0; border-radius: 999px; background: #fff; box-shadow: var(--float-shadow); }
  .site-header .header-right a, .site-header .header-right .lang-btn { height: 36px; min-width: 0; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #111; }
  .site-header .header-right .lang-btn { background: #111; color: #fff; }
  .site-header .header-right a::before { inset: -4px 0; }
  .modal-header .back-circle, .modal-header .share-btn { border: 0; background: #fff; box-shadow: var(--float-shadow); }

  /* no hairlines */
  .facts-phone { border-top: 0; padding-top: 0; }
  .filters:not(.art-bar) { background: none; padding-top: 2px; }
  .filters, .art-bar, .footer-bottom, .modal-facts, .next-section, .article-body, .contact-section { border-top: 0; }
  .modal-facts { padding-top: 0; }

  /* section titles set large, the count beside them */
  .work-head { align-items: baseline; padding-bottom: 18px; }
  .work-head .label { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-transform: lowercase; color: inherit; }
  .work-head .label::first-letter { text-transform: uppercase; }
  .work-head .count { letter-spacing: 0; text-transform: none; }
}

/* =========================================================================
   Phones, fourth pass
   - First screen: the showreel fills it from the very top, under the floating
     capsules; the phone's thesis and the heading lie on the video in white
     over a soft dark fade. A tap on the video opens it full screen, as before.
   - Articles stand in a column like the cases.
   - Cases and articles open four at a time ("Показать ещё").
   ========================================================================= */
.stage, .stage-text { display: contents; }
.art-more-btn { display: none; }
@media (max-width: 639px) {
  .stage { display: grid; grid-template-areas: "stage"; margin: -68px -20px 0; }
  .stage > * { grid-area: stage; }
  .stage #reel { height: 78svh; min-height: 460px; }
  .stage .reel-frame.vp { height: 100%; aspect-ratio: auto !important; border-radius: 0 0 28px 28px; clip-path: inset(0 round 0 0 28px 28px); }
  .stage .reel-frame .vp-video { object-fit: cover; }
  .stage .vp-label { top: 80px; bottom: auto; right: 20px; }
  .stage-text { display: flex; flex-direction: column-reverse; justify-content: flex-start; align-self: end; position: relative; z-index: 3;
    padding: 150px 20px 28px; border-radius: 0 0 28px 28px; pointer-events: none; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,0) 100%); }
  .stage-text .hero { padding: 0; margin-top: 14px; }
  .stage-text .hero h1 { color: #fff; }
  .stage-text .facts-phone { margin: 0; padding: 0; }
  .stage-text .phone-thesis .label { color: rgba(255,255,255,.72); }
  .stage-text .phone-thesis .value { color: #fff; }
  .work-section { padding-top: 64px; }

  /* articles: a column, like the cases */
  .art-track { display: flex; flex-direction: column; gap: 40px; overflow: visible; margin: 0; padding: 0 !important; scroll-snap-type: none; cursor: auto; }
  .art-track::after { display: none; }
  .art-card { flex: none; width: 100%; }
  .art-card.is-more { display: none; }
  .art-card .art-title { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
  .articles-section .art-bar { display: none; }
  .art-more-btn { display: flex; margin-top: 40px; background: #fff; color: #111; }
  .art-more-btn[hidden] { display: none; }
}

/* Type, one rule for every page:
   - "Смотреть кейс" belongs to the phone's case stories only;
   - a tag and a count read as labels (12–13px capitals, tracked) everywhere:
     under a case on the phone, above a case title, beside a section title;
   - every pill button sets its text at the button size on one line height,
     so the words sit alike in every pill — "Наверх" included;
   - the name in the phone's top bar speaks at the interface size. */
.cap-go { display: none; }
@media (max-width: 639px) {
  .cap-go { display: inline-flex; }
  .brand-name { font-size: var(--fs-ui); }
  .case-tile .cap .cap-meta, .work-head .count { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
  .site-header .navpill a, .site-header .header-right a, .site-header .header-right .lang-btn, .filter-btn, .share-btn, .discuss-btn,
  .template-link, .footer-social a, .footer-extra a, .footer-bottom a, .vp-big, .vp-label, .cap-go, .gallery-more, .art-go {
    font-size: var(--fs-ui-s); line-height: var(--lh-ui-s); letter-spacing: 0; }
  .footer-bottom a { text-transform: none; }
  .site-header:not(.modal-header) .navpill a { line-height: var(--lh-ui-s); }
}

/* =========================================================================
   Phones, fifth pass
   - No "Читать статью" pill on narrow screens (it is a hover cue).
   - The footer is buttons: "Обсудить проект" in black across the width,
     then the email and the socials as pills, a quiet line with the city,
     and the name with a round "up" button. No labels.
   ========================================================================= */
.footer-phone { display: none; }
@media (max-width: 639px) {
  .art-go { display: none !important; }

  .contact-section .footer-cols, .contact-section .footer-bottom { display: none; }
  .footer-phone { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
  .fp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 54px; border-radius: 999px; background: #111; color: #fff;
    font-size: var(--fs-ui-s); line-height: var(--lh-ui-s); transition: background var(--dur-s) ease, scale var(--dur-m) var(--ease-out); }
  .fp-cta, .fp-cta:hover { color: #fff; }
  .fp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .fp-pill { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(17,17,17,.05); color: #111;
    font-size: var(--fs-ui-s); line-height: var(--lh-ui-s); transition: background var(--dur-s) ease, color var(--dur-s) ease, scale var(--dur-m) var(--ease-out); }
  .fp-pill:hover { color: #111; }
  .fp-status { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: var(--fs-label); line-height: var(--lh-label); color: rgba(17,17,17,.6); }
  .fp-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(17,17,17,.6); }
  .fp-top { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(17,17,17,.05); color: #111;
    transition: background var(--dur-s) ease, color var(--dur-s) ease, scale var(--dur-m) var(--ease-out); }
  .fp-top svg { display: block; }
  .fp-pill.is-down, .fp-top.is-down { background: #111 !important; color: #fff !important; scale: .94; }
  .fp-cta.is-down { background: #3a3a3a !important; scale: .96; }
}

/* Phones: a case's videos snap to the middle of their strip — a swipe stops
   with a video centred, and a tapped video glides to the centre. */
@media (max-width: 639px) {
  .case-video-preview, .case-video-preview:last-child { scroll-snap-align: center; }
}

/* Phones: the top bar leaves no gap, so the showreel starts at the very top
   edge of the screen, under the floating capsules. */
@media (max-width: 639px) {
  .site-header:not(.modal-header) { margin-bottom: 0; }
}

/* The name in the top bar leads back to the top of the page: it stays the
   same colour on hover and, like every button, sinks in and springs back when
   pressed (on phones its capsule fills with ink while held). */
.site-header .brand, .site-header .brand:hover { color: inherit; }
.site-header .brand { cursor: pointer; transition: scale var(--dur-m) var(--ease-out), background var(--dur-s) ease, color var(--dur-s) ease; }
.site-header .brand:active { scale: var(--press); transition-duration: var(--dur-xs); }
@media (hover: none) {
  .site-header .brand.is-down { background: #111 !important; color: #fff !important; }
  .site-header .brand.is-down .brand-sub { color: rgba(255,255,255,.6); }
}

/* Phones: the case previews have no frame, even on a white picture; the
   white "Смотреть кейс" pill keeps a soft shadow so it still reads there. */
@media (max-width: 639px) {
  .cap-go { box-shadow: 0 2px 12px rgba(17,17,17,.14); }
  .art-cover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
}

/* Case and article pages on phones: "Обсудить проект" is no longer pinned to
   the bottom of the screen; it stands once at the end of the page, above
   "Следующий проект". The desktop keeps it in the top bar. */
.page-cta { display: none; }
@media (max-width: 639px) {
  .modal-header .discuss-btn { display: none; }
  .modal-page { padding-bottom: 0; }
  .page-cta { display: block; padding: 8px 0 40px; }
  .page-cta .fp-cta { display: flex; }
}

/* Sideways rows on phones (tags, a case's videos) scroll sideways only: a
   vertical swipe over them moves the page. Their items enter by fading in
   where they stand — a rise would push them past the row's edge, where they
   were cut off and made the row scroll up and down. A few pixels of air above
   and below keep presses and the chosen video's ring clear of the edge. */
@media (max-width: 639px) {
  .filters:not(.art-bar), .case-video-previews { overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-y: auto; }
  .filters:not(.art-bar) { padding-top: 8px; padding-bottom: 8px; margin-top: -6px; margin-bottom: 16px; }
  .case-video-previews { padding-top: 6px; padding-bottom: 6px; margin-top: -4px; margin-bottom: -4px; }
  html.motion-ready .filters:not(.art-bar) .filter-btn[data-reveal],
  html.motion-ready .case-video-previews .case-video-preview[data-reveal],
  html.motion-ready .case-video-previews .case-video-preview[data-reveal].from-top:not(.is-visible) { transform: none; }
  html.motion-ready .case-video-previews .case-video-preview[data-reveal] .preview-media { transform: none; }
}

/* =========================================================================
   One style for every control (final pass)
   - Buttons that sit on a picture — "Смотреть", "На весь экран",
     "Включить звук", "Свернуть", "Читать статью", "Смотреть кейс" — are one
     pill: the same height (40px, 44px on phones), white, one soft shadow.
   - Everything that floats over the page (the phone's capsules and tab bar,
     those pills) casts that same shadow.
   - Desktop small controls share one height: tags, article arrows and the
     language switch 32px; the case page's back / share / discuss 36px.
   - Phones: tags are soft filled pills like every other secondary button.
   - Every control answers a press: it sinks in while held and springs back;
     big text links (the call to action, "Следующий проект") dim instead.
   ========================================================================= */
:root { --shadow-float: 0 4px 18px rgba(17,17,17,.12), 0 0 0 1px rgba(17,17,17,.05); --h-pill: 40px; }
@media (max-width: 639px) { :root { --h-pill: 44px; --float-shadow: var(--shadow-float); } }

/* pills on pictures */
/* (each keeps its own display rule: shown only where it belongs) */
.vp.is-ambient .vp-label { display: inline-flex; }
.vp-big, .vp-label, .vp-unmute, .art-go, .cap-go {
  align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  height: var(--h-pill); padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #111;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-float);
  font-size: var(--fs-ui-s); line-height: 1; letter-spacing: 0; white-space: nowrap; }
.vp-big, .vp-unmute { padding: 0 18px 0 14px; }
.vp-big svg, .vp-big-ic svg { width: 14px; height: 14px; }
.vp-close { height: var(--h-pill); font-size: var(--fs-ui-s); }
@media (max-width: 639px) {
  .vp-big, .vp-label, .vp-unmute, .cap-go { padding: 0 18px; }
  .vp-big, .vp-unmute { padding: 0 20px 0 16px; }
}
/* the showreel's pill answers a press on the video, like a button */
@media (hover: hover) { .reel-frame.is-ambient:active .vp-label { scale: var(--press); transition-duration: var(--dur-xs); } }

/* one shadow for everything floating */
@media (max-width: 639px) {
  .site-header:not(.modal-header) .navpill { box-shadow: var(--shadow-float); }
}

/* desktop: one height per family of small controls */
@media (min-width: 640px) {
  .filter-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; }
  .art-arrow { width: 32px; height: 32px; }
  .lang-btn { height: 32px; min-width: 40px; }
}
/* article arrows only while there is somewhere to go */
.art-bar.no-scroll .art-arrow { display: none; }
.art-bar.no-scroll { padding-top: 0; margin-bottom: clamp(16px, 2vw, 22px); }

/* phones: tags are soft filled pills */
@media (max-width: 639px) {
  .filter-btn, .filter-btn:hover:not(.active) { border-color: transparent; background: rgba(17,17,17,.05); color: #111; }
  .filters.has-ind .filter-btn.active { background: transparent; }
}

/* presses: big text links dim; the springy release is for buttons */
.mail-cta, .next-link { transition: opacity var(--dur-s) ease; }
.mail-cta:active, .next-link:active { opacity: .55; transition-duration: var(--dur-xs); }
.footer-col a, .footer-social a, .footer-extra a { transition: color var(--dur-s) ease, background var(--dur-s) ease, scale var(--dur-m) var(--ease-out); }
.footer-col a:active, .footer-social a:active, .footer-extra a:active, .fp-cta:active, .fp-pill:active, .fp-top:active, .gallery-more:active {
  scale: var(--press); transition-duration: var(--dur-xs); }
.gallery-more { transition: background var(--dur-s) ease, color var(--dur-s) ease, scale var(--dur-m) var(--ease-out); }
.mail-cta.is-tapped, .next-link.is-tapped { animation: none !important; }
@media (hover: none) {
  .mail-cta.is-down, .next-link.is-down { scale: 1; opacity: .55; }
  .gallery-more.is-down { background: #3a3a3a !important; }
  .art-more-btn.is-down { background: rgba(255,255,255,.8) !important; color: #111 !important; }
  .footer-col a.is-down { color: rgba(17,17,17,.55); }
}

/* =========================================================================
   Video quality
   "1080p" in the control bar opens a row of choices over it: Авто and each
   copy of the video. While a lighter or sharper copy takes over, its last
   frame stays on screen (.vp-snap), so the swap is not seen.
   ========================================================================= */
.vp-q { position: relative; flex-shrink: 0; display: none; }
.vp.has-q .vp-q { display: block; }
.vp-qbtn { width: auto; min-width: 34px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.vp-qmenu { position: absolute; right: -6px; bottom: calc(100% + 12px); z-index: 5; display: none; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(17,17,17,.72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(0,0,0,.22); white-space: nowrap; }
.vp-q.is-open .vp-qmenu { display: flex; animation: vpPop var(--dur-s) var(--ease-out) both; }
.vp-qitem { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.86); font: inherit; font-size: 12px;
  cursor: pointer; transition: background var(--dur-xs) ease, color var(--dur-xs) ease, scale var(--dur-m) var(--ease-out); }
.vp-qitem:hover { background: rgba(255,255,255,.14); color: #fff; }
.vp-qitem.is-on, .vp-qitem.is-on:hover { background: #fff; color: #111; }
.vp-qitem:active { scale: var(--press); transition-duration: var(--dur-xs); }
@media (hover: none) { .vp-qitem.is-down:not(.is-on) { background: rgba(255,255,255,.22) !important; color: #fff !important; } }
@media (max-width: 639px) { .vp-qitem { padding: 0 9px; } .vp-qbtn { font-size: 13px; } }
.vp-snap { position: absolute; inset: 0; z-index: 1; display: none; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.vp-snap.is-on { display: block; }
.vp.is-fullscreen .vp-snap { background: #000; }

/* "Медленный интернет · смотреть в 1080p": offered over a "Плеер" video that
   has been waiting for data for a while; the visitor decides. The same white
   pill as every button on a picture. */
.vp-slow { position: absolute; left: 50%; top: 16px; z-index: 4; display: none; align-items: center; box-sizing: border-box; height: var(--h-pill); padding: 0 18px;
  border: 0; border-radius: 999px; background: #fff; color: #111; box-shadow: var(--shadow-float); font: inherit; font-size: var(--fs-ui-s); line-height: 1;
  white-space: nowrap; cursor: pointer; translate: -50% 0; animation: vpPop var(--dur-m) var(--ease-out) both;
  transition: background var(--dur-xs) ease, color var(--dur-xs) ease, scale var(--dur-m) var(--ease-out); }
.vp.offers-lighter .vp-slow { display: inline-flex; }
.vp-slow:hover { background: #111; color: #fff; }
.vp-slow:active { scale: var(--press); transition-duration: var(--dur-xs); }
@media (hover: none) { .vp-slow.is-down { background: #111 !important; color: #fff !important; } }
@media (max-width: 639px) { .vp-slow { top: 10px; padding: 0 16px; font-size: 13px; } }

/* the quality row takes the place of the centre button while it is open */
.vp:has(.vp-q.is-open) .vp-big { opacity: 0 !important; pointer-events: none; }
/* phones: the bar fits the width — no speaker button (the phone's own buttons
   set the volume; a silent start has its "Включить звук" pill), a slimmer
   time and quality label. Full screen has room for it again. */
@media (max-width: 639px) {
  .vp:not(.is-fullscreen) .vp-vol { display: none; }
  .vp-track { min-width: 36px; }
  .vp-qbtn { min-width: 0; padding: 0 6px; font-size: 12px; }
  .vp-time { font-size: 12px; padding: 0 2px; }
}

/* The volume slider slides out to the LEFT of the speaker button: the button
   stays under the pointer (it used to slide away, leaving the slider under the
   cursor, so a click meant for "mute" moved the volume instead). */
.vp-vol { flex-direction: row-reverse; }
.vp-vol:hover .vp-volume, .vp-volume:focus-visible, .vp.is-fullscreen .vp-volume { margin: 0 2px 0 6px; }

/* Phones: tags have no outline at all (they are filled pills now), so a tap
   can no longer leave a dark ring fading around the chosen tag. */
@media (max-width: 639px) {
  .filter-btn, .filter-btn.is-down, .filters.has-ind .filter-btn.active { border: 0 !important; }
}