/* 40ka — studio site
   Layout: a quiet gallery. Stone-white ground, black ink, magpie-feather sheen as the only colour of our own.
   Display face is wide and calm; the work supplies the colour. */
@font-face { font-family: 'Gros Ventre'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/GrosVentre-Light.woff2') format('woff2'); }
@font-face { font-family: 'Gros Ventre'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/GrosVentre-Regular.woff2') format('woff2'); }
/* Golos Text и IBM Plex Mono лежат на сайте (лицензия OFL), без Google Fonts */
@font-face { font-family: 'Golos Text'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/golos-text-cyrillic-ext-400-normal.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Golos Text'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/golos-text-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/golos-text-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Golos Text'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/golos-text-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Golos Text'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/golos-text-cyrillic-ext-500-normal.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Golos Text'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/golos-text-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/golos-text-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Golos Text'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/golos-text-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-cyrillic-ext-300-normal.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-cyrillic-300-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-cyrillic-ext-400-normal.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --bg: #ECECE8;
  --bg-deep: #DEDEDA;
  --ink: #000000;
  --ink-soft: #5B5E5F;
  --line: #C6C7C2;
  --white: #FFFFFF;
  --sheen-1: #5FD3C4;   /* magpie wing: teal */
  --sheen-2: #6A7CFF;   /* magpie tail: blue-violet */
  --sheen-3: #B48CFF;   /* iridescent violet */
  --font-logo: system-ui, sans-serif; /* the wordmark is drawn (svg); this only sets the em it is sized from */
  /* headings: Gros Ventre by Dimitri Antonov / Blue Curve Designstudio, CC BY 4.0 (assets/fonts, credited in the footer) */
  --font-display: 'Gros Ventre', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --dk: 1.15;        /* Gros Ventre is narrower than the former face: the heading sizes are scaled to keep the line lengths */
  --dls: -.01em;
  --font-body: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --max: 1440px;
  --ease: cubic-bezier(.77, 0, .18, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (min-width: 900px) {
  :root { --gutter: max(48px, env(safe-area-inset-left, 0px)); --gutter-r: max(48px, env(safe-area-inset-right, 0px)); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.wheel-smooth, html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--sheen-2); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* ---------- custom cursor (desktop, fine pointer only) ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) and (any-pointer: fine) {
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
    width: 12px; height: 12px; border-radius: 50%; background: var(--white);
    mix-blend-mode: difference; transform: translate(-50%, -50%);
    transition: width .35s var(--ease-out), height .35s var(--ease-out), opacity .3s;
    opacity: 0;
  }
  body.cursor-on .cursor { opacity: 1; }
  body.cursor-link .cursor { width: 56px; height: 56px; }
  body.cursor-img .cursor { width: 84px; height: 84px; }
  /* labelled cursor: a solid ink disc that says what the click does */
  .cursor { display: grid; place-items: center; }
  .cursor span { font: 500 13px/1 var(--font-body); letter-spacing: .01em; color: var(--bg); white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s var(--ease-out); }
  body.cursor-label .cursor { width: 96px; height: 96px; mix-blend-mode: normal; background: var(--ink); }
  body.cursor-label .cursor span { opacity: 1; transform: none; }
}

/* ---------- intro: the magpie notices the glint, lands, the page opens (assets/intro.js) ---------- */
#intro{position:fixed;inset:0;z-index:9999;background:var(--bg);cursor:pointer;transition:opacity .35s ease}
#intro.done{opacity:0;pointer-events:none}
html:not(.js) #intro, body.intro-skip #intro{display:none}
#intro svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
#hint{position:absolute;bottom:28px;left:0;right:0;text-align:center;font:13px/1 var(--font-body);letter-spacing:.02em;color:var(--ink-soft);opacity:0;pointer-events:none}
/* the intro bird hands over to the hero bird in place: keep the hero branch drawn, no second arrival */
body.intro-done .bird--hero .mp-branch, body.intro-done.bird-ready .bird--hero .mp-branch{animation:none;stroke-dashoffset:0}
/* leaves on the branches: on the hero they appear after the branch is drawn */
.bird--hero .mp-leaves{opacity:0}
body.bird-ready .bird--hero .mp-leaves{animation:fadeIn .5s .9s ease forwards}
body.intro-done .bird--hero .mp-leaves, body.intro-done.bird-ready .bird--hero .mp-leaves{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.bird--hero .mp-leaves{opacity:1}}

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .5s var(--ease);
}
.bar.hide { transform: none; }
/* the bar's background runs edge to edge; its content stays on the page grid */
.bar.wrap { max-width: none; padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-right: max(var(--gutter-r), calc((100% - var(--max)) / 2 + var(--gutter-r))); }
/* over the dark bands the bar turns dark too */
.bar { transition: transform .5s var(--ease), background-color .4s ease, color .4s ease; }
.bar.on-dark { background: color-mix(in srgb, var(--ink) 80%, transparent); color: var(--white); }
.bar.on-dark .mark__bird { color: var(--white); --mp-white: var(--ink); }
.bar.on-dark .mark__bird .mp-white, .bar.on-dark .mark__bird .mp-eye { fill: var(--ink); }
.bar.on-dark nav a::after { background: var(--white); }
.bar.on-dark .lang { color: #9A9C99; } .bar.on-dark .lang b { color: var(--white); }
.bar.on-dark .burger i { background: var(--white); }
.mark {
  font-family: var(--font-logo); font-weight: 400; font-size: 27px; letter-spacing: -.02em; line-height: 1;
  display: flex; align-items: center; height: 40px;
}
.mark__text { order: 2; display: block; }
/* the drawn wordmark (img/logo-40ka.svg): sized in em so it follows the bar's type size; takes the bar's colour */
.mark__word { display: block; height: .907em; width: 2.926em; overflow: visible; }
.mark__bird { pointer-events: none; order: 1; width: 0; margin-right: 0; opacity: 0; transform: translateX(-10px); transition: width .6s var(--ease), margin .6s var(--ease), opacity .4s, transform .6s var(--ease); }
body.scrolled .mark__bird { width: 84px; margin-right: 12px; opacity: 1; transform: none; }
/* with the flight on, the logo slot opens when the magpie flies in (assets/flight.js) */
body.flight-on.scrolled:not(.bird-logo) .mark__bird { width: 0; margin-right: 0; opacity: 0; transform: translateX(-10px); }
body.bird-logo .mark__bird { width: 84px; margin-right: 12px; opacity: 1; transform: none; }
body.bird-inbound .mark__bird .mp-bird { visibility: hidden; }
body.bird-away .bird--hero .mp-bird { visibility: hidden; }
.flight-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; }
.flight-layer.on { display: block; }
.flight-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; color: var(--ink); }
body.menu-open .flight-layer { display: none; }
.mark__bird { height: 38px; color: var(--ink); --mp-white: var(--bg); overflow: visible; flex: none; }
.mark__bird .mp-white, .mark__bird .mp-eye { fill: var(--bg); }
.bar nav { display: flex; gap: 28px; font-size: 15px; }
.bar nav a { position: relative; padding-block: 4px; }
.bar nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ink); transition: right .35s var(--ease); }
.bar nav a:hover::after { right: 0; }
.lang { display: flex; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.lang b { font-weight: 500; color: var(--ink); }
.lang a { transition: color .2s; } .lang a:hover { color: var(--ink); }
.bar.on-dark .lang a:hover { color: var(--white); }
.bar__right { display: flex; align-items: center; gap: 18px; }
.burger { display: none; width: 40px; height: 40px; position: relative; z-index: 71; }
.burger i { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--ink); transition: transform .4s var(--ease), top .4s var(--ease), background .3s; }
.burger i:nth-child(1) { top: 15px; } .burger i:nth-child(2) { top: 23px; }
body.menu-open .burger i { background: var(--white); top: 19px; }
body.menu-open .burger i:nth-child(1) { transform: rotate(45deg); }
body.menu-open .burger i:nth-child(2) { transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--white);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(88px + env(safe-area-inset-top, 0px)) var(--gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); pointer-events: none;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu__links { display: grid; gap: 10px; }
.menu__links a { font-family: var(--font-display); font-weight: 300; font-size: calc(clamp(32px, 9vw, 52px) * var(--dk)); line-height: 1.1; letter-spacing: var(--dls); opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s var(--ease); }
body.menu-open .menu__links a { opacity: 1; transform: none; }
body.menu-open .menu__links a:nth-child(2) { transition-delay: .06s } body.menu-open .menu__links a:nth-child(3) { transition-delay: .12s } body.menu-open .menu__links a:nth-child(4) { transition-delay: .18s }
.menu__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #9A9C99; }
body.menu-open { overflow: hidden; }
body.menu-open .bar { z-index: 72; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
body.menu-open .mark { color: var(--white); --mp-white: var(--ink); position: relative; z-index: 71; }
body.menu-open .mark__bird { color: var(--white); --mp-white: var(--ink); }
body.menu-open .mark__bird .mp-white, body.menu-open .mark__bird .mp-eye { fill: var(--ink); }
body.menu-open .lang { opacity: 0; }
@media (max-width: 760px) {
  .bar nav { display: none; }
  .burger { display: block; }
}

/* ---------- magpie ---------- */
.bird { display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; --mp-white: var(--bg); }
.bird .mp-bird { transform-box: fill-box; transform-origin: 45% 55%; will-change: transform; }
.bird .mp-legs { transition: opacity .3s; }
/* about: the magpie lands on its branch when the section arrives */
.bird .mp-white, .bird .mp-eye { fill: var(--bg); }
/* arrival: the magpie glides in from the upper right and settles on the branch */
.bird--hero .mp-bird { opacity: 0; }
.bird--hero .mp-legs { opacity: 0; }
.bird--hero .mp-branch { stroke-dasharray: var(--bl, 1300); stroke-dashoffset: var(--b0, 1300); }
body.bird-ready .bird--hero .mp-branch { animation: drawLine 1.1s .1s var(--ease) forwards; }
body.bird-ready .bird--hero .mp-bird { animation: arrive 1.9s .25s cubic-bezier(.22, .9, .3, 1) forwards; }
body.bird-ready .bird--hero .mp-legs { animation: fadeIn .35s 1.85s ease forwards; }
@keyframes arrive {
  0%   { opacity: 0; transform: translate(420px, -260px) rotate(-14deg) scale(.86); }
  12%  { opacity: 1; }
  70%  { transform: translate(40px, -18px) rotate(-5deg) scale(1.02); }
  88%  { transform: translate(-6px, 6px) rotate(1.5deg) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes drawLine { to { stroke-dashoffset: 0 } }
@keyframes fadeIn { to { opacity: 1 } }
body.arrived .bird--hero .mp-bird, body.flying .bird--hero .mp-bird { animation: none; opacity: 1; }
body.arrived .bird--hero .mp-legs { animation: none; opacity: 1; }
body.flying .bird--hero .mp-legs { animation: none; opacity: 0; }

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(40px, 7vw, 96px) clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: 7fr 5fr; grid-template-areas: "text bird" "sub sub"; gap: 32px 48px; align-items: end;
}
.hero__text { grid-area: text; }
.hero__bird { grid-area: bird; justify-self: end; width: min(100%, 620px); will-change: transform; }
.hero__sub { grid-area: sub; }
.hero__lead {
  font-size: 15px; color: var(--ink-soft); max-width: 42ch; margin-bottom: clamp(24px, 4vw, 48px);
  padding-left: 18px; border-left: 1px solid var(--line);
}
/* under the headline, a dictionary entry explains the saying */
.hero__def { margin-top: clamp(18px, 2.2vw, 30px); max-width: 44ch; font: 300 15px/1.55 var(--font-mono); color: var(--ink-soft); letter-spacing: 0;
  animation: defIn 1s .55s var(--ease) both; }
.hero__def b { font-weight: 400; color: var(--ink); }
.hero__def i { font-style: italic; }
@keyframes defIn { from { opacity: 0; transform: translateY(10px); } }
.hero__def--name { margin-top: 10px; animation-delay: .75s; }
body.intro-wait .hero__def { animation-play-state: paused; }
body.returning .hero__def { animation: quickIn .4s ease both; }
@media (max-width: 760px) { .hero__def { font-size: 13px; } }
.hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: calc(clamp(38px, 7.2vw, 122px) * var(--dk)); line-height: .98; letter-spacing: var(--dls);
  max-width: 14ch;
}
/* line masks: the box is widened sideways because Gros Ventre letters (A, t, y, Ъ…) overhang their left edge */
.hero__title .l { display: block; overflow: hidden; padding: 0 .15em .06em; margin: 0 -.15em -.06em; }
.hero__title .l > span { display: block; animation: lineUp 1.1s var(--ease) both; }
.hero__title .l:nth-child(2) > span { animation-delay: .12s }
.hero__title .l:nth-child(3) > span { animation-delay: .24s }
@keyframes lineUp { from { transform: translateY(110%) } to { transform: none } }
body.intro-wait .hero__title .l > span { animation-play-state: paused; }
.hero__sub {
  margin-top: clamp(16px, 3vw, 40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end;
}
.hero__sub p { max-width: 36ch; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; }
.hero__sub .cities { font-size: 15px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 2px; justify-self: end; text-align: right; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "text" "bird" "sub"; }
  .hero__bird { justify-self: start; width: min(76%, 400px); margin-left: 22px; }
}
@media (max-width: 760px) {
  .hero__sub { grid-template-columns: 1fr; }
  .hero__sub .cities { justify-self: start; text-align: left; flex-direction: row; gap: 14px; }
}

/* glint: a magpie's flash of light across the image on hover */
.glint { position: relative; }
.glint::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.0) 52%, transparent 65%);
  transform: translateX(-120%); transition: transform 0s;
}
.glint:hover::before { transform: translateX(120%); transition: transform 1.1s var(--ease); }
.work.glint::before { inset: auto; }
.work.glint figure { position: relative; }
.work.glint figure::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.0) 52%, transparent 65%);
  transform: translateX(-120%);
}
.work.glint:hover figure::before { transform: translateX(120%); transition: transform 1.1s var(--ease); }

/* tilt: images lean toward the cursor */
.tilt { transform-style: preserve-3d; }
@media (hover: hover) and (pointer: fine) {
  .tilt { transition: transform .5s var(--ease-out); }
  .tilt.tilting { transition: transform .12s linear; }
}


/* ticker */
.ticker { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); overflow: hidden; padding-block: 14px; }
.ticker__track { display: flex; align-items: center; gap: 36px; width: max-content; animation: ticker 40s linear infinite; font-family: var(--font-display); font-weight: 300; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.ticker__track i { width: 6px; height: 6px; background: var(--ink); border-radius: 50%; flex: none; }
@keyframes ticker { to { transform: translateX(-50%) } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ---------- bands: full-bleed tone changes for rhythm ---------- */
.band { padding-left: 0; padding-right: 0; }
.band--dark { --ink: #FFFFFF; --ink-soft: #B9BBB8; --line: #3A3C3B; --bg: #000000; background: #000; color: #fff; border-top: 0; }
.band--dark + .section { border-top: 0; }
/* details: «the nest» — small things from the projects lie in a pile of prints, like a magpie's finds.
   The top print can be tapped or swiped away (it slides back in under the pile); left alone, the pile turns over by itself.
   Nothing here is tied to the scroll position, so there is nothing to lag behind the finger (assets/details.js). */
.details { padding-block: clamp(44px, 7vw, 112px) clamp(48px, 8vw, 120px); overflow: hidden; }
.nest__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 8vw, 132px); align-items: center; }
.nest__side h2 { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(26px, 3.2vw, 46px) * var(--dk)); line-height: 1.05; letter-spacing: var(--dls); }
.nest__side > p { margin-top: 18px; color: var(--ink-soft); max-width: 46ch; font-size: 16px; line-height: 1.5; }
.nest__list { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; border-bottom: 1px solid var(--line); max-width: 520px; }
.nest__list li { border-top: 1px solid var(--line); }
.nest__list button { width: 100%; display: flex; gap: 16px; align-items: baseline; padding: 10px 0; text-align: left; color: var(--ink-soft); font-size: 15px; line-height: 1.4; transition: color .25s; }
.nest__list button span { font: 300 11px/1 var(--font-mono); width: 20px; flex: none; }
.nest__list button:hover, .nest__list button.on { color: var(--ink); }
.nest__list button.on::after { content: ""; margin-left: auto; align-self: center; width: 22px; height: 1px; background: var(--ink); }
.nest__pile { position: relative; height: clamp(360px, 38vw, 560px); touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.nest__pile:focus-visible { outline: 2px solid var(--sheen-2); outline-offset: 6px; }
.nest__pile figure { position: absolute; left: 50%; top: 50%; margin: 0; width: var(--w); aspect-ratio: var(--ar);
  background: #fff; padding: clamp(6px, .6vw, 10px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 18px 34px -18px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform .62s var(--ease-out), opacity .45s ease; transition-delay: var(--d, 0s); }
.nest__pile figure.l { --w: 86%; } .nest__pile figure.p { --w: 50%; }
.nest__pile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.nest__pile figure.out { transform: translate(-50%, -50%) translate(calc(var(--dx) * 118%), -5%) rotate(calc(var(--dx) * 13deg));
  transition: transform .34s cubic-bezier(.45, 0, .85, .55); transition-delay: 0s; }
.nest__pile figure.drag { transition: none; }
.nest--js:not(.in) .nest__pile figure { opacity: 0; transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) - 46%)) rotate(calc(var(--r) * -2.2)) scale(1.06); }
.nest__cap { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 16px; row-gap: 6px; margin-top: 18px;
  font: 300 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.nest__name { display: none; color: var(--ink); }
.nest__n { order: 2; }
.nest__hint { order: 1; }
.nest__hint--touch { display: none; }
@media (hover: none), (pointer: coarse) { .nest__hint--touch { display: inline; } .nest__hint--fine { display: none; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .nest__grid { grid-template-columns: 1fr; }
  .nest__list { display: none; }
  .nest__stage { margin-top: 26px; }
  .nest__pile { height: 92vw; max-height: 420px; }
  .nest__pile figure.l { --w: 88%; } .nest__pile figure.p { --w: 60%; }
  .nest__name { display: block; order: 1; }
  .nest__hint { order: 3; flex-basis: 100%; }
}

/* ---------- section heads ---------- */
.section { padding-block: clamp(56px, 8vw, 128px); }
.section + .section { border-top: 1px solid var(--line); }
/* section heads sit on the same two-column grid as «Работы»: the title in the left column,
   the lead text starts exactly on the second column's edge and ends level with the title's last line */
.section__head {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 8vw, 132px); row-gap: 12px; align-items: end;
  margin-bottom: clamp(32px, 5vw, 72px);
}
.section__head h2 { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(26px, 3.2vw, 46px) * var(--dk)); line-height: 1.05; letter-spacing: var(--dls); }
.section__head p { color: var(--ink-soft); max-width: 46ch; font-size: 16px; line-height: 1.5; margin-bottom: .2em; }
@media (max-width: 760px) { .section__head { grid-template-columns: 1fr; } .section__head p { margin-bottom: 0; } }

/* scroll reveal: images open like a shutter */
.js [data-reveal] { clip-path: inset(100% 0 0 0); }
.js [data-reveal] img { transform: scale(1.12); }
.js [data-reveal].in { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease); }
.js [data-reveal].in img { transform: none; transition: transform 1.4s var(--ease); }

/* ---------- works grid ---------- */
/* two columns like a gallery wall: large pictures in their own proportions, so the columns fall out of step;
   under each one a label: name • place, then the field and what we made, each on its own drawn rule */
.works { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 8vw, 132px); align-items: start; }
.works__col { display: grid; row-gap: clamp(72px, 8vw, 124px); align-content: start; }
.work { position: relative; display: block; }
.work figure { position: relative; margin: 0; overflow: hidden; background: var(--bg-deep); aspect-ratio: var(--ar, 4 / 5); }
/* the photo is a little taller than its frame and lags behind it as the page scrolls (scroll.js sets --pp, -1..1) */
.work img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; translate: 0 calc(var(--pp, 0) * 5.5%); transition: transform 1.1s var(--ease); }
.work:hover img { transform: scale(1.035); }
.work__cap { padding-top: 18px; }
.work__title { font: 500 19px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 13px; }
.work__title i { font-style: normal; margin: 0 .3em 0 .15em; }
.work__row { position: relative; font: 300 17px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); padding: 11px 0 12px; }
.work__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.work__row + .work__row::before { transition-delay: .14s; }
.work.line-in .work__row::before { transform: none; }
.work:hover .work__title span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
@media (max-width: 760px) {
  /* phones keep the two columns: smaller labels, same wall */
  .works { column-gap: 18px; }
  .works__col { row-gap: 44px; }
  .work__cap { padding-top: 10px; }
  .work__title { font-size: 12px; letter-spacing: .03em; line-height: 1.3; padding-bottom: 7px; }
  .work__title i { margin: 0 .2em 0 .1em; }
  .work__row { font-size: 10.5px; line-height: 1.35; letter-spacing: 0; padding: 6px 0 7px; }
  .work__row::before { height: 1px; }
}

/* ---------- services: three cards ---------- */
/* little text on view: what it is, who it is for, a few tags; the full list opens under «Что входит».
   The magpie sheen sits on the middle card and moves to whichever card the pointer is on. */
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2vw, 28px); align-items: start; }
.card { position: sticky; top: calc(96px + var(--i, 0) * 16px); display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "top top" "title body"; column-gap: 48px; min-height: clamp(320px, 30vw, 420px); padding: clamp(22px, 2.4vw, 36px); border: 1px solid #2b2b2b; background: #000; isolation: isolate; transform-origin: 50% 0;
  transform: scale(calc(1 - var(--cover, 0) * .05)); transition: border-color .5s; }
.card > * { opacity: calc(1 - var(--cover, 0) * .55); }
.card__top { grid-area: top; }
.card h3 { grid-area: title; align-self: end; }
.card__side { grid-area: body; align-self: end; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(95, 211, 196, .17), rgba(106, 124, 255, .15) 50%, rgba(180, 140, 255, .1)); opacity: 0; transition: opacity .6s var(--ease); }
.card:nth-child(2)::before { opacity: 1; }
.card:nth-child(2) { border-color: #3a3a46; }
@media (hover: hover) {
  .cards:hover .card::before { opacity: 0; }
  .cards:hover .card { border-color: #2b2b2b; }
  .cards .card:hover::before { opacity: 1; }
  .cards .card:hover { border-color: #3a3a46; }
}
.card__top { display: flex; justify-content: space-between; font: 300 13px/1 var(--font-mono); color: #8b8d8a; text-transform: uppercase; letter-spacing: .04em; }
.card h3 { padding-top: 56px; font-family: var(--font-display); font-weight: 300; font-size: calc(clamp(48px, 6.4vw, 104px) * var(--dk)); letter-spacing: var(--dls); line-height: .95; }
.card__for { margin-top: 14px; font-size: 15px; color: #a9aba8; max-width: 30ch; }
.card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.card__chips span { font: 300 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .03em; border: 1px solid #444; border-radius: 99px; padding: 8px 11px; color: #d7d8d6; }
.card__more { margin-top: 22px; border-top: 1px solid #2b2b2b; }
.card__more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding-top: 16px; font-size: 14px; }
.card__more summary::-webkit-details-marker { display: none; }
.card__more summary i { position: relative; width: 12px; height: 12px; }
.card__more summary i::before, .card__more summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.card__more summary i::after { transform: rotate(90deg); }
.card__more[open] summary i::after { transform: rotate(0); }
.card__body { padding-top: 16px; }
.card__body p { font-size: 15px; line-height: 1.5; }
.card__body ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; color: #c4c6c3; }
.card__body li { padding-left: 14px; position: relative; }
.card__body li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--white); }
.card__more[open] .card__body { animation: cardOpen .5s var(--ease) both; }
@keyframes cardOpen { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 900px) { .card { grid-template-columns: 1fr; grid-template-areas: "top" "title" "body"; top: calc(84px + var(--i, 0) * 12px); min-height: 0; } .card h3 { padding-top: 40px; } .card__side { margin-top: 4px; } }
.h-mask .hl { display: block; overflow: hidden; padding: 0 .15em .08em; margin: 0 -.15em -.08em; }
.h-mask .hl > span { display: block; transform: translateY(108%); transition: transform 1.05s var(--ease); }
.h-mask.h-in .hl > span { transform: none; }
.reading .rw { opacity: .2; transition: opacity .5s ease; }
.reading .read .rw { opacity: 1; }
/* soft passages into and out of the dark blocks */
.fade { height: clamp(90px, 16vh, 170px); }
.fade--down { background: linear-gradient(to bottom, var(--bg), #000); }
.fade--up { background: linear-gradient(to bottom, #000, var(--bg)); }
.section:has(+ .fade) { padding-bottom: clamp(32px, 4vw, 64px); }
.fade + .band--dark { padding-top: clamp(24px, 3vw, 48px); }
.fade--up + .section { padding-top: clamp(32px, 4vw, 64px); }
.services__proof { margin-top: clamp(28px, 3vw, 44px); display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 1.5; color: #c4c6c3; max-width: 72ch; }
.services__proof-mark { flex: none; width: 54px; height: auto; fill: var(--white); color: var(--white); }
.services__note { margin-top: 28px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 15px; color: var(--ink-soft); }
.services__note b { color: var(--ink); font-weight: 500; }

/* ---------- process ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; counter-reset: step; padding-top: 1px; }
.steps__line { position: absolute; left: 0; right: 0; top: 0; height: 0; }
/* the process line: pencil sketch over the first steps, a straight line from "Система" (assets/steps.js) */
.steps__svg { position: absolute; left: 0; top: -30px; overflow: visible; }
.steps__wood { fill: var(--ink); }
.steps__cut { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; }
.steps__stalk { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.steps__blade { fill: var(--ink); }
.steps__vein { fill: none; stroke: var(--bg); stroke-width: 1; stroke-linecap: round; }
.steps__ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.steps__tip { fill: var(--ink); transition: opacity .2s; }
.step__line { display: none; }
.step {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num head" ". text" ". dur";
  column-gap: 14px; row-gap: 8px; align-items: start; align-content: start; padding-top: 22px;
}
.step h3, .step::before { align-self: baseline; }      /* number and title share a baseline; the text below lines up across steps */
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero); grid-area: num;
  font-family: var(--font-display); font-weight: 300; font-size: 13px; color: var(--ink-soft); line-height: 1.6;
}
.step h3 { grid-area: head; font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.step p { grid-area: text; margin: 0; font-size: 15px; color: var(--ink-soft); }
.step .dur { grid-area: dur; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps__line { display: none; }
  .step { position: relative; grid-template-columns: 44px 1fr auto; grid-template-areas: "num head dur" ". text text"; padding-block: 20px; border-top: 0; column-gap: 10px; }
  .step__line { display: block; position: absolute; left: 0; top: -20px; overflow: visible; }
  .step:last-child { border-bottom: 1px solid var(--line); }
  .step .dur { margin: 0; white-space: nowrap; }
}

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; }
.about__left { display: grid; gap: 40px; align-content: start; }
.about__big { font-family: var(--font-display); font-weight: 300; font-size: calc(clamp(30px, 4.6vw, 66px) * var(--dk)); line-height: 1.08; letter-spacing: var(--dls); }
/* «ценное» carries the magpie-feather sheen, the site's only colour (assets/about.js moves it); «заметным» is underlined by hand */
.shine { background: linear-gradient(100deg, var(--ink) 0 26%, #3d8f86 36%, #5FD3C4 42%, #6A7CFF 50%, #B48CFF 57%, var(--ink) 68% 100%); background-size: 260% 100%; background-position: 38% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.uline { position: relative; white-space: nowrap; }
.uline svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .3em; overflow: visible; }
.uline path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.about-anim .uline path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s .55s var(--ease-out); }
.about-anim.about-in .uline path { stroke-dashoffset: 0; }
.about__text { display: grid; gap: 20px; max-width: 58ch; align-content: start; }
.about__text p { font-size: 17px; }
.about__facts { margin-top: 12px; display: grid; grid-template-columns: repeat(3, auto); gap: 24px; justify-content: start; }
.about__facts div { font-size: 14px; color: var(--ink-soft); }
.about__facts strong { display: block; font-family: var(--font-display); font-weight: 300; font-size: calc(clamp(26px, 3vw, 40px) * var(--dk)); color: var(--ink); letter-spacing: var(--dls); line-height: 1.1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- contact ---------- */
.contact { position: relative; background: var(--ink); color: var(--white); overflow: hidden; isolation: isolate; }
.contact .wrap { position: relative; z-index: 1; padding-block: clamp(64px, 9vw, 140px); }
/* magpie-feather sheen drifting in the dark */
/* no filter or blend modes here: soft gradients that only move (transform), so the GPU composites them for free */
.sheen { position: absolute; inset: -20%; z-index: 0; pointer-events: none; }
.sheen i { position: absolute; border-radius: 50%; width: 60vw; height: 60vw; max-width: 940px; max-height: 940px; opacity: .5; will-change: transform; }
.sheen i:nth-child(1) { background: radial-gradient(circle closest-side, rgba(95, 211, 196, .9), rgba(95, 211, 196, .55) 28%, rgba(95, 211, 196, .22) 56%, rgba(95, 211, 196, .06) 80%, rgba(95, 211, 196, 0)); left: 5%; top: 10%; animation: drift1 18s ease-in-out infinite alternate; }
.sheen i:nth-child(2) { background: radial-gradient(circle closest-side, rgba(106, 124, 255, .9), rgba(106, 124, 255, .55) 28%, rgba(106, 124, 255, .22) 56%, rgba(106, 124, 255, .06) 80%, rgba(106, 124, 255, 0)); right: 0%; top: 30%; animation: drift2 22s ease-in-out infinite alternate; }
.sheen i:nth-child(3) { background: radial-gradient(circle closest-side, rgba(180, 140, 255, .9), rgba(180, 140, 255, .55) 28%, rgba(180, 140, 255, .22) 56%, rgba(180, 140, 255, .06) 80%, rgba(180, 140, 255, 0)); left: 40%; bottom: -10%; animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vw, 14vh) scale(1.15) } }
@keyframes drift2 { to { transform: translate(-16vw, -10vh) scale(.9) } }
@keyframes drift3 { to { transform: translate(-10vw, -18vh) scale(1.2) } }
.contact h2 { font-family: var(--font-display); font-weight: 300; font-size: calc(clamp(30px, 5vw, 72px) * var(--dk)); letter-spacing: var(--dls); line-height: 1.05; max-width: 14ch; }
.contact p { margin-top: 24px; max-width: 50ch; color: #C4C6C3; }
.mail { margin-top: clamp(32px, 5vw, 64px); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mail a { font-family: var(--font-display); font-weight: 300; font-size: calc(clamp(20px, 3.4vw, 48px) * var(--dk)); letter-spacing: var(--dls); border-bottom: 1px solid #5A5C5B; padding-bottom: 6px; transition: border-color .3s; word-break: break-all; }
.mail a:hover { border-color: var(--white); }
.mail button { font-size: 13px; color: #C4C6C3; border: 1px solid #5A5C5B; padding: 10px 16px; border-radius: 999px; transition: all .3s; }
.mail button:hover { color: var(--ink); background: var(--white); border-color: var(--white); }
.chat { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.chat__btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border: 1px solid #5A5C5B; border-radius: 999px; font-size: 15px; color: var(--white); transition: color .3s, background .3s, border-color .3s; }
.chat__btn svg { width: 20px; height: 20px; flex: none; }
.chat__btn:hover { color: var(--ink); background: var(--white); border-color: var(--white); }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(48px, 7vw, 120px); padding-top: 24px; border-top: 1px solid #3A3C3B; font-size: 13px; color: #9A9C99; }
.foot__credit { flex: 1 1 auto; text-align: center; } .foot__credit a { white-space: nowrap; border-bottom: 1px solid #3A3C3B; transition: color .2s, border-color .2s; } .foot__credit a:hover { color: var(--white); border-color: currentColor; }
@media (max-width: 760px) { .foot__credit { order: 3; flex-basis: 100%; text-align: left; } }
.foot__top { color: inherit; transition: color .2s; } .foot__top:hover { color: var(--white); }

/* ---------- case pages ---------- */
.case-hero { padding-block: clamp(40px, 7vw, 96px) clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: end; }
.case-hero h1 { font-family: var(--font-display); font-weight: 300; font-size: calc(clamp(36px, 6vw, 96px) * var(--dk)); letter-spacing: var(--dls); line-height: 1.02; }
.case-hero h1 .l { display: block; overflow: hidden; padding: 0 .15em .08em; margin: 0 -.15em -.08em; }
.case-hero h1 .l > span { display: block; animation: lineUp 1.1s var(--ease) both; }
.case-hero .ar { display: block; font-family: var(--font-body); font-weight: 400; font-size: .5em; color: var(--ink-soft); margin-top: .3em; letter-spacing: 0; animation: fadeIn .8s .4s both; }
.case-meta { display: grid; gap: 14px; font-size: 14px; animation: fadeIn .8s .5s both; }
.case-meta div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.case-meta dt { color: var(--ink-soft); }
.case-meta dd { margin: 0; }
.case-cover { overflow: hidden; background: var(--bg-deep); }
.case-cover img { width: 100%; max-height: 86vh; object-fit: cover; will-change: transform; }
.case-text { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-block: clamp(48px, 7vw, 112px); }
.case-text h2 { font-size: 15px; font-weight: 500; color: var(--ink-soft); margin-bottom: 14px; }
.case-text p { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; max-width: 52ch; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); padding-bottom: clamp(48px, 7vw, 112px); }
.case-grid figure { margin: 0; overflow: hidden; background: var(--bg-deep); }
.case-grid img { width: 100%; height: 100%; object-fit: cover; }
.case-grid .full { grid-column: 1 / -1; }
.case-next { border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 80px); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.case-next span { font-size: 14px; color: var(--ink-soft); }
.case-next a { font-family: var(--font-display); font-weight: 300; font-size: calc(clamp(26px, 4vw, 56px) * var(--dk)); letter-spacing: var(--dls); border-bottom: 1px solid var(--line); transition: border-color .3s, letter-spacing .5s var(--ease); }
.case-next a:hover { border-color: var(--ink); letter-spacing: 0; }
@media (max-width: 760px) {
  .case-hero, .case-text { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #intro, .cursor, .sheen { display: none !important; }
  .js [data-reveal] { clip-path: none; }
  .js [data-reveal] img { transform: none; }
  .bird--hero .mp-bird, .bird--hero .mp-legs { opacity: 1; }
  .bird--hero .mp-branch { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* ---------- page transitions: the case photo becomes the case cover (View Transitions, where supported) ---------- */
@view-transition { navigation: auto; }
.bar { view-transition-name: site-bar; }
.case-cover img { view-transition-name: case-cover; }
::view-transition-group(case-cover) { animation-duration: .75s; animation-timing-function: cubic-bezier(.77, 0, .18, 1); }
::view-transition-old(case-cover), ::view-transition-new(case-cover) { animation-duration: .75s; height: 100%; object-fit: cover; }
::view-transition-old(root) { animation: vt-out .35s ease both; }
::view-transition-new(root) { animation: vt-in .5s ease .15s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- returning within a visit: quiet entrances ---------- */
body.returning .bird--hero .mp-bird, body.returning .bird--hero .mp-legs { animation: none !important; opacity: 1; }
body.returning .bird--hero .mp-branch { animation: none !important; stroke-dashoffset: 0; }
body.returning .bird--hero .mp-leaves { animation: none !important; opacity: 1; }
body.returning .hero__title .l > span, body.returning .case-hero h1 .l > span { animation: quickIn .4s ease both; }
body.returning .case-hero .ar, body.returning .case-meta { animation: quickIn .4s .05s ease both; }
@keyframes quickIn { from { opacity: 0; } }