:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Mobile Cyrillic and language layout resilience */
html,body{max-width:100%;overflow-x:clip}
.toc,.toc-in,.toc-list,.toc-list li,.toc-list a{min-width:0}
.toc-list .t{overflow:visible;min-width:0}
.toc-list .t>span{overflow-wrap:anywhere;white-space:normal;hyphens:auto}
@media(max-width:760px){
 .toc{height:100dvh;max-height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 88px) clamp(18px,5vw,32px) calc(env(safe-area-inset-bottom,0px) + 34px)}
 .toc-in{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:clamp(14px,3vh,28px);min-height:0}
 .toc-head{flex:none;gap:4px}
 .toc-script{font-size:clamp(43px,12vw,72px);line-height:1.05}
 .toc-meta{font-size:10px;line-height:1.5;letter-spacing:.1em}
 .toc-list{flex:none;width:100%}
 .toc-list a{grid-template-columns:24px minmax(0,1fr) 25px;gap:clamp(8px,2vw,14px);align-items:center;padding:clamp(9px,1.8vh,15px) 0}
 .toc-list .t{font-size:clamp(30px,8.7vw,54px);line-height:1.02;letter-spacing:0}
 .toc-list .n,.toc-list .p{font-size:11px}
 .toc-list .p{justify-self:end}
 .toc-list .d{display:none}
 .bar{max-width:100vw}
 .bar .sec,.bar .lang,.bar .menu-btn{min-width:0}
 .nm,.nm small,.pk-for,.x-nm,.x-d,.grp-t,.s-note,.w-intro p,.x-intro p{overflow-wrap:break-word;hyphens:auto}
 .grp li{grid-template-columns:minmax(0,1fr) auto;gap:clamp(6px,2vw,14px)}
 .grp .nm{font-size:clamp(22px,6.5vw,34px)}
 .pk-grid,.pk,.s-list,.grp,.grp li,.x-grid,.x{min-width:0}
}
@media(max-width:390px){
 .toc{padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
 .toc-list .t{font-size:clamp(28px,8.2vw,35px)}
 .toc-list a{padding:9px 0}
 .toc-script{font-size:48px}
 .toc-meta{font-size:9px}
}
@media(max-height:650px) and (max-width:760px){.toc{padding-top:70px}.toc-head{gap:0}.toc-script{font-size:42px}.toc-list a{padding:8px 0}}

/* Russian menu: smaller display type on mobile without cutting off words. */
@media (max-width:760px){
  html[lang="ru"] .toc-list .t{font-size:clamp(26px,8.2vw,48px);line-height:1.08;overflow:visible;min-width:0;letter-spacing:0}
  html[lang="ru"] .toc-list .t > span{display:block;max-width:100%;overflow-wrap:normal;word-break:normal;hyphens:none;white-space:normal}
  html[lang="ru"] .toc-list a{grid-template-columns:1.7em minmax(0,1fr) 1em;gap:.5em}
  html[lang="ru"] .toc-list .p{font-size:11px;letter-spacing:0}
}
@media (max-width:380px){html[lang="ru"] .toc-list .t{font-size:clamp(24px,7.5vw,30px)}}



/* Layout: poster-like screens — giant condensed word anchored to the bottom edge, one script accent, wide air. Single light look, taken from the deck. */
:root{
  --paper:#efefef;
  --ink:#1f2024;
  --red:#8e1515;
  --red-soft:rgba(142,21,21,.16);
  --mute:#6b6b70;
  --panel:#e4e4e5;
  --micro:clamp(12px,.86vw,14px);
  --shape:url("../brand/contact-shape.webp");
  --hatch:rgba(31,32,36,.06);
  --rule:rgba(31,32,36,.14);
  --line:#b8b8b8;   /* hairline divider on case/archive pages */
  --glass:rgba(239,239,239,.94);
  --paper-dim:rgba(239,239,239,.72);
  --f-display:"Anton","Oswald","Impact","Arial Narrow",sans-serif;
  --f-script:"Pinyon Script","Snell Roundhand","Brush Script MT",cursive;
  --f-body:"Poppins","Montserrat","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,5.6vw,108px);
  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
/* No global smooth scrolling: it also animated the browser's own jump to an
   anchor on page load, so opening index.html#contact crawled ~10 000px and
   looked like the page had opened halfway down. The menu keeps its deliberate
   animated scroll — navigation.js passes behavior:"smooth" explicitly. */
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--paper)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* grain */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + clamp(22px,5.2vw,100px)) var(--gut) 0;color:var(--red);
  font-size:clamp(13px,1.35vw,26px);letter-spacing:.02em;pointer-events:none}
.bar > *{pointer-events:auto}
.roll{display:inline-flex;flex-direction:column;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:top}
/* Высота каждой строки задаётся явно, а не берётся из метрик шрифта:
   пока Google Fonts не загрузились (или заблокированы), подменный шрифт
   с другими метриками наезжал строками друг на друга. */
.roll > span{flex:none;height:1.2em;line-height:1.2em;transition:transform .9s var(--ease)}
.bar[data-s="2"] .sec .roll > span,.menu-open .mb > span{transform:translateY(-100%)}
.bar[data-s="3"] .sec .roll > span{transform:translateY(-200%)}
.bar[data-s="4"] .sec .roll > span{transform:translateY(-300%)}
.bar[data-s="5"] .sec .roll > span{transform:translateY(-400%)}
.bar[data-s="6"] .sec .roll > span{transform:translateY(-500%)}
.label{text-transform:uppercase;text-align:right}
.label .roll{align-items:flex-end}
.intro .bar > *{animation:fadeDown 1.1s var(--ease-out) .9s both}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.stack{position:relative;width:100%}
.giant{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.8;margin:0;white-space:nowrap;letter-spacing:-.005em;
  font-size:26vw;transform:translateY(.035em)}
.giant .ln{display:block;overflow:hidden;padding-top:.04em}
.giant .ch{display:inline-block;will-change:transform;transition:color .45s ease}
.hero .giant{color:var(--ink);text-align:center}
.hero .giant .ch:hover{color:var(--red)}
.intro .hero .giant .ch{animation:rise 1.25s var(--ease) both;animation-delay:calc(.15s + var(--i) * .06s)}
@keyframes rise{from{transform:translateY(105%)}}
.giant .m-br{display:none}

.script{position:absolute;left:50%;bottom:calc(var(--gh,20vw) * .86);transform:translateX(-50%);z-index:2;pointer-events:none;
  font-family:var(--f-script);color:var(--red);font-size:clamp(64px,10.2vw,210px);line-height:1;white-space:nowrap;padding:.15em .45em}
.script > span{display:block;will-change:transform}
.intro .script{animation:write 1.9s var(--ease) 1s both}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* about */
.about{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  padding-top:clamp(90px,9vw,170px);overflow:hidden}
.copy{padding-left:var(--gut);display:flex;flex-direction:column;gap:clamp(28px,3vw,56px);min-width:0}
.bio{margin:0;color:var(--red);font-size:clamp(17px,1.62vw,31px);line-height:1.55;max-width:26em;font-weight:400}
.bio .w{opacity:var(--o,1);transition:opacity .25s linear}
.tags{display:grid;grid-template-columns:repeat(3,max-content);gap:1.1em 2.4em;margin:0;padding:0;list-style:none;font-size:clamp(11px,.78vw,15px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tags li{display:flex;align-items:center;gap:.8em}
.tags li::before{content:none}
.tags-k{display:none}

.portrait{margin:0;justify-self:end;margin-right:var(--gut);width:min(37.2vw,760px);aspect-ratio:720/763;max-width:100%;position:relative;perspective:900px}
.portrait .frame{width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease-out)}
.portrait img{width:100%;height:100%;display:block;object-fit:contain;filter:grayscale(1) contrast(1.02);transition:filter .8s ease}
.portrait:hover img{filter:grayscale(.15) contrast(1.05)}
.js .portrait .frame{clip-path:inset(100% 0 0 0)}
.js .portrait img{transform:scale(1.2)}
.portrait.in .frame{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--ease),transform .8s var(--ease-out)}
.portrait.in img{transform:scale(1);transition:transform 2s var(--ease-out),filter .8s ease}

.about .giant{color:var(--red);grid-column:1 / -1;align-self:end;text-align:left;font-size:20vw;margin-top:clamp(40px,4vw,80px)}
.js .about .giant .ch,.js .works .giant .ch{transform:translateY(105%)}
.about .giant.in .ch,.works .giant.in .ch{transform:translateY(0);transition:transform 1.2s var(--ease),color .45s ease;transition-delay:calc(var(--i) * .05s),0s}
.about .giant .ch:hover{color:var(--ink)}


/* editorial furniture */







@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}}



.bio::first-letter{font-family:var(--f-display);font-size:3.4em;float:left;line-height:.82;margin:.08em .12em 0 0;color:var(--red)}
.folio{position:absolute;right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(18px,2.4vw,44px));font-size:clamp(11px,.8vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:flex;gap:1.4em;align-items:center}
.folio::before{content:none}
@media (max-width:760px){
  
  
  
  .folio{position:static;grid-column:1/-1;justify-self:end;margin-right:var(--gut);margin-bottom:8px}
}


/* bar parts */
.sec{display:flex;gap:1.3em;align-items:center}
.sec .name{text-transform:uppercase}
.menu-btn{all:unset;pointer-events:auto;cursor:pointer;display:inline-flex;align-items:flex-start;gap:.35em;text-transform:uppercase;color:var(--red);font:inherit;letter-spacing:inherit}
.menu-btn sup{font-size:.55em;line-height:1;margin-top:.15em;color:var(--mute)}
.menu-btn:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.mb{align-items:flex-end}

/* contents overlay: magazine table of contents */
.toc{position:fixed;inset:0;z-index:35;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + clamp(96px,10vw,190px)) var(--gut) calc(env(safe-area-inset-bottom,0px) + clamp(28px,4vw,72px));
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path 1s var(--ease),visibility 0s 1s}
.menu-open .toc{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path 1s var(--ease),visibility 0s}
.toc-in{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(24px,4vw,80px);align-items:end}
.toc-head{display:flex;flex-direction:column;gap:1.6em;align-self:stretch;justify-content:space-between}
.toc-script{font-family:var(--f-script);color:var(--red);font-size:clamp(64px,8vw,170px);line-height:1;padding:.1em .2em .1em 0}
.toc-meta{font-size:clamp(11px,.8vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);line-height:2}
.toc-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.toc-list li{opacity:0;transform:translateY(30px);transition:opacity .5s ease,transform .9s var(--ease-out)}
.menu-open .toc-list li{opacity:1;transform:none;transition-delay:calc(.35s + var(--i) * .07s)}
.toc-list a{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto 4.5em;align-items:baseline;gap:1.4em;padding:.5em 0 .3em;border-top:1px solid var(--rule);transition:opacity .4s ease}
.toc-list .n{color:var(--red);font-size:clamp(12px,.9vw,16px)}
.toc-list .t{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(40px,5.6vw,112px);line-height:.95;color:var(--ink);overflow:hidden}
.toc-list .t > span{display:inline-block;transition:transform .7s var(--ease-out),color .4s ease}
.toc-list .d,.toc-list .p{font-size:clamp(11px,.78vw,15px);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.toc-list .p{text-align:right}
.toc-list:hover a{opacity:.32}
.toc-list a:hover,.toc-list a:focus-visible{opacity:1;outline:none}
.toc-list a:hover .t > span,.toc-list a:focus-visible .t > span{transform:translateX(.22em);color:var(--red)}
@media (max-width:760px){
  .toc-in{grid-template-columns:minmax(0,1fr);align-items:start}
  .toc-head{gap:.6em}
  .toc-script{font-size:clamp(56px,17vw,96px)}
  .toc-meta{font-size:10px;line-height:1.9}
  .toc-list a{grid-template-columns:2.4em minmax(0,1fr) auto;gap:.9em}
  .toc-list .d{display:none}
  .toc-list .t{font-size:clamp(38px,12.5vw,68px)}
  .sec{gap:.9em}
}


/* works */
.works{position:relative;padding-block:clamp(120px,13vw,240px) clamp(110px,10vw,200px);overflow:hidden}
.w-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(24px,4vw,64px);padding-left:var(--gut)}
.w-intro{display:flex;flex-direction:column;gap:1.3em;max-width:22em;padding-bottom:1.4vw;min-width:0}
.kicker{display:flex;align-items:center;gap:.9em;font-size:clamp(11px,.78vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.kicker::before{content:none}
.w-intro p{margin:0;color:var(--red);font-size:clamp(16px,1.3vw,25px);line-height:1.55}
.w-title{position:relative}
.works .giant{color:var(--ink);text-align:right}
.works .giant .ch:hover{color:var(--red)}
.w-script{position:absolute;left:-.3em;top:-.62em;z-index:2;font-family:var(--f-script);color:var(--red);font-size:clamp(64px,8.6vw,180px);line-height:1;padding:.1em .35em;transform:rotate(-7deg);pointer-events:none}
.js .w-script{clip-path:inset(0 100% 0 0)}
.w-title.in .w-script{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease) .55s}

.w-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,40px);row-gap:clamp(64px,7vw,140px);padding-inline:var(--gut);margin-top:clamp(72px,8vw,170px)}
.c1{grid-column:1 / 8}
.c2{grid-column:9 / 13;margin-top:15vw}
.c3{grid-column:2 / 6;margin-top:-9vw}
.c4{grid-column:7 / 13;margin-top:5vw}
.card{min-width:0;will-change:transform}
.card-link{display:block}
.cframe{--ch:clamp(44px,5vw,104px);position:relative;overflow:hidden;aspect-ratio:4/3;max-width:100%;border-radius:clamp(18px,2vw,34px);background:var(--panel);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)}
.c2 .cframe,.c3 .cframe{aspect-ratio:4/5}
.js .card .cframe{clip-path:polygon(0 100%,100% 100%,100% 100%,100% 100%,0 100%)}
.card.in .cframe{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);transition:clip-path 1.4s var(--ease)}
.cframe img,.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.js .card .cframe img,.js .card .ph{transform:scale(1.18)}
.card.in .cframe img,.card.in .ph{transform:scale(1);transition:transform 1.8s var(--ease-out)}
.card.in .card-link:hover .cframe img,.card.in .card-link:hover .ph{transform:scale(1.05);transition:transform 1.2s var(--ease-out)}
.ph{display:grid;place-items:center;background:repeating-linear-gradient(135deg,transparent 0 15px,var(--hatch) 15px 16px)}
.ph-word{font-family:var(--f-script);color:var(--red);font-size:clamp(56px,6.4vw,128px);line-height:1;padding:.1em .3em;opacity:.9}
.ph-size{position:absolute;left:clamp(16px,1.6vw,28px);bottom:clamp(14px,1.4vw,24px);font-size:clamp(10px,.7vw,13px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4em 1em;margin-top:1.2em} /* wrap so "View →" never overflows a narrow card at tablet widths */
.meta .no{color:var(--red);font-size:clamp(12px,.85vw,16px)}
.meta h3{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3vw,58px);line-height:1;color:var(--ink);transition:color .4s ease,transform .7s var(--ease-out)}
.meta .go{margin-left:auto;white-space:nowrap;font-size:clamp(11px,.78vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);transition:color .4s ease}
.meta .go i{display:inline-block;font-style:normal;transition:transform .5s var(--ease-out)}
.desc{margin:.55em 0 0;color:var(--mute);font-size:clamp(13px,.92vw,17px);line-height:1.6;max-width:30em}
.card-link:hover h3,.card-link:focus-visible h3{color:var(--red);transform:translateX(.12em)}
.card-link:hover .go,.card-link:focus-visible .go{color:var(--red)}
.card-link:hover .go i{transform:translate(.2em,-.2em)}
.card-link:focus-visible{outline:2px solid var(--red);outline-offset:8px;border-radius:8px}
.works .folio{bottom:clamp(36px,4vw,72px)}
.cursor.cursor.view{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--red)}
.cursor::after{content:"View";position:absolute;inset:0;display:grid;place-items:center;color:var(--paper);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.cursor.view::after{opacity:1}
@media (max-width:760px){
  .w-head{grid-template-columns:minmax(0,1fr);padding-left:0;gap:36px}
  .w-title{order:-1}
  .w-intro{padding-inline:var(--gut)}
  .w-script{left:var(--gut);top:-.7em;font-size:clamp(58px,17vw,96px)}
  .w-grid{grid-template-columns:minmax(0,1fr);row-gap:64px}
  .c1,.c2,.c3,.c4{grid-column:1 / -1;margin-top:0}
  .c2{justify-self:end;width:86%}
  .c3{justify-self:start;width:86%}
  .meta h3{font-size:clamp(28px,8.6vw,40px)}
  .works .folio{position:absolute;bottom:40px;margin:0}
}


/* services */
.services{position:relative;padding-block:clamp(110px,12vw,230px) clamp(110px,10vw,200px);overflow:hidden}
.s-head{position:relative}
.services .giant{color:var(--red);text-align:left}
.services .giant .ch:hover{color:var(--ink)}
.js .services .giant .ch{transform:translateY(105%)}
.services .giant.in .ch{transform:translateY(0);transition:transform 1.2s var(--ease),color .45s ease;transition-delay:calc(var(--i) * .05s),0s}
.s-script{position:absolute;left:calc(var(--gw,74vw) - 1.6em);bottom:-.42em;z-index:2;font-family:var(--f-script);color:var(--ink);font-size:clamp(56px,7.4vw,160px);line-height:1;padding:.1em .35em;white-space:nowrap;transform:rotate(-6deg);pointer-events:none}
.js .s-script{clip-path:inset(0 100% 0 0)}
.s-head.in .s-script{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease) .6s}
.s-intro{margin:clamp(56px,6vw,120px) var(--gut) 0 auto;max-width:24em;padding-left:var(--gut);color:var(--red);font-size:clamp(16px,1.3vw,25px);line-height:1.55;width:fit-content}

.s-part{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:clamp(24px,4vw,80px);padding-inline:var(--gut);margin-top:clamp(80px,9vw,180px)}
.s-side{position:sticky;top:clamp(120px,14vh,180px);align-self:start;display:flex;flex-direction:column;gap:.9em}
.s-letter{font-family:var(--f-display);color:var(--red);font-size:clamp(64px,7vw,140px);line-height:.85}
.s-name{font-family:var(--f-script);color:var(--ink);font-size:clamp(40px,3.8vw,80px);line-height:1;margin-top:-.15em}
.s-list{display:flex;flex-direction:column;gap:clamp(40px,4.5vw,80px);min-width:0}
.grp-t{display:flex;align-items:baseline;gap:1em;margin:0 0 .4em;font-weight:400;font-size:clamp(11px,.8vw,15px);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.grp-t span{color:var(--red)}
.grp ul{list-style:none;margin:0;padding:0}
.grp li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1.5em;padding:clamp(14px,1.3vw,24px) 0;border-top:1px solid var(--rule)}
.grp li:last-child{border-bottom:1px solid var(--rule)}
.nm{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(24px,2.3vw,44px);line-height:1;color:var(--ink);transition:color .4s ease,transform .6s var(--ease-out);display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em 1.1em}
.nm small{font-family:var(--f-body);text-transform:none;font-size:clamp(12px,.82vw,15px);line-height:1.5;color:var(--mute);letter-spacing:0}
.pr{font-family:var(--f-display);font-size:clamp(22px,2vw,38px);color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums}
.pr small{font-family:var(--f-body);font-size:.36em;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);vertical-align:middle;margin-right:.4em}
.grp li:hover .nm{color:var(--red);transform:translateX(.15em)}

.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,32px);align-items:start;min-width:0}
.pk{--ch:clamp(40px,4vw,80px);position:relative;display:flex;flex-direction:column;gap:1.1em;padding:clamp(22px,2.2vw,40px);border-top:1px solid var(--ink);min-width:0}
.pk.feat{background:var(--red);color:var(--paper);border-top-color:transparent;border-radius:clamp(18px,2vw,32px);margin-top:clamp(-40px,-2.4vw,-16px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)}
.pk-top{display:flex;justify-content:space-between;align-items:baseline;font-size:clamp(11px,.78vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pk-no{font-family:var(--f-script);font-size:2.6em;letter-spacing:0;text-transform:none;color:var(--red);line-height:.8}
.pk h3{margin:0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,3.8vw,76px);line-height:.9}
.pk-for{margin:0;color:var(--mute);font-size:clamp(13px,.9vw,17px)}
.pk-price{font-family:var(--f-display);font-size:clamp(34px,3vw,58px);line-height:1;color:var(--red);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.35em}
.pk-price small{font-family:var(--f-body);font-size:.28em;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pk ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7em;font-size:clamp(13px,.95vw,17px);line-height:1.45}
.pk li{display:block}
.pk li::before{content:none}
.pk-cta{margin-top:.6em;font-size:clamp(11px,.78vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:inline-flex;gap:.6em;align-items:center;width:fit-content;border-bottom:1px solid currentColor;padding-bottom:.4em}
.pk-cta i{font-style:normal;transition:transform .5s var(--ease-out)}
.pk-cta:hover i{transform:translateX(.4em)}
.pk.feat .pk-top,.pk.feat .pk-for,.pk.feat .pk-price small{color:var(--paper-dim)}
.pk.feat .pk-no,.pk.feat .pk-price,.pk.feat .pk-cta{color:var(--paper)}
.s-note{margin:clamp(56px,6vw,110px) var(--gut) 0;padding-left:calc((100% - 2 * var(--gut)) * .278 + clamp(24px,4vw,80px) * .72);font-size:clamp(11px,.78vw,15px);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.services .folio{bottom:clamp(36px,4vw,72px)}

.js .rv{opacity:0;transform:translateY(28px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s var(--ease-out)}
.pk.feat.rv.in{transition-delay:.12s}
.pk.rv.in:last-child{transition-delay:.24s}

@media (max-width:900px){
  .pk-grid{grid-template-columns:minmax(0,1fr)}
  .pk.feat{margin-top:0}
}
/* Turnkey cards: align the two plain cards (START / LAUNCH) to each other —
   equal description height so "FROM €…" lines up, and buttons pushed to a shared
   bottom line. The featured (red) card keeps its own raised position. */
@media (min-width:901px){
  .pk-grid{align-items:stretch}
  .pk.feat{align-self:start}
  .pk:not(.feat) .pk-cta{margin-top:auto}
  /* reserve equal description height so "FROM €…" lines up; RU text is longer, so
     it reserves one line more. Narrower columns (901–999) wrap one line more again. */
  .pk:not(.feat) .pk-for{min-height:3.7em}
  html[lang="ru"] .pk:not(.feat) .pk-for{min-height:4.95em}
}
@media (min-width:901px) and (max-width:999px){
  .pk:not(.feat) .pk-for{min-height:4.95em}
  html[lang="ru"] .pk:not(.feat) .pk-for{min-height:6.2em}
}
@media (max-width:760px){
  .s-script{left:auto;right:var(--gut);bottom:-1.05em;font-size:clamp(48px,14vw,84px)}
  .s-intro{margin:72px var(--gut) 0;padding-left:0}
  .s-part{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:80px}
  .s-side{position:static;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:.2em 1em}
  .s-side .kicker{flex-basis:100%}
  .grp li{grid-template-columns:minmax(0,1fr);gap:.5em}
  .nm{font-size:clamp(24px,7vw,32px);flex-direction:column;align-items:flex-start}
  .pr{font-size:clamp(22px,6.4vw,30px)}
  .s-note{padding-left:0;margin-inline:var(--gut);line-height:1.8}
  .services .folio{position:absolute;bottom:40px;margin:0}
}


/* chapter divider */
.chapter{padding:clamp(130px,13vw,250px) var(--gut) 0}
.ch-rule{position:relative;display:flex;justify-content:space-between;gap:1em;padding-top:1.3em;font-size:clamp(10px,.75vw,14px);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.ch-rule::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:left center}
.js .ch-rule::before{transform:scaleX(0)}
.chapter.in .ch-rule::before{transform:scaleX(1);transition:transform 1.7s var(--ease)}
.js .ch-rule span{opacity:0;transform:translateY(8px)}
.chapter.in .ch-rule span{opacity:1;transform:none;transition:opacity .8s ease .7s,transform 1s var(--ease-out) .7s}









@media (max-width:760px){
  .chapter{padding-top:110px}
  
  
  
  
}
@media (prefers-reduced-motion:reduce){
  .js .ch-rule::before,.js .ch-rule span{transform:none;opacity:1}
}

/* what I do: numbered index on every width */
.tags-k{display:flex}
.tags{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,1.6vw,30px);counter-reset:t;font-family:var(--f-display);font-size:clamp(18px,1.3vw,25px);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-top:-.5em;max-width:34em}
.tags li{counter-increment:t;display:flex;align-items:baseline;gap:.7em;padding:.75em 0 .6em;border-top:1px solid var(--rule);line-height:1.15}
.tags li::before{content:counter(t,decimal-leading-zero);width:auto;height:auto;background:none;opacity:1;font-family:var(--f-body);font-size:max(10px,.42em);letter-spacing:.12em;color:var(--red);flex:none}
.tags li:hover{color:var(--red)}
.js .tags li{opacity:0;transform:translateY(18px)}
.tags.in li{opacity:1;transform:none;transition:opacity .7s ease,transform .9s var(--ease-out),color .4s ease;transition-delay:calc(var(--k) * .06s),calc(var(--k) * .06s),0s}

/* turnkey cards: reveal, staggered content, hover */
.pk{transition:transform .7s var(--ease-out),border-color .4s ease}
.js .pk{clip-path:polygon(0 100%,100% 100%,100% 100%,100% 100%,0 100%)}
.pk.in{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);transition:clip-path 1.3s var(--ease) calc(var(--k) * .15s),transform .7s var(--ease-out),border-color .4s ease}
.pk.feat.in{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)}
.js .pk > *{opacity:0;transform:translateY(22px)}
.pk.in > *{opacity:1;transform:none;transition:opacity .7s ease,transform .9s var(--ease-out);transition-delay:calc(var(--k) * .15s + .4s + var(--j) * .07s)}
.pk:hover{transform:translateY(-8px)}
.pk:not(.feat):hover{border-top-color:var(--red)}
.pk.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.pk.feat.in::after{animation:sheen 1.6s var(--ease) 1.4s both}
.pk.feat:hover::after{animation:sheen 1.2s var(--ease) both}
@keyframes sheen{to{transform:translateX(120%)}}


@media (max-width:760px){
  .tags{grid-template-columns:repeat(2,minmax(0,1fr));font-size:clamp(18px,5.2vw,22px);margin-top:-12px}
  /* services: more air */
  .s-intro{margin-top:96px}
  .s-part{margin-top:112px;gap:36px}
  .s-list{gap:72px}
  .grp-t{margin-bottom:12px}
  .grp li{padding:22px 0 20px;gap:12px}
  .nm{gap:8px}
  .nm small{font-size:13px}
  .pk-grid{gap:48px}
  .pk{padding:30px 22px 34px;gap:1.3em}
  .s-note{margin-top:88px}
}
@media (prefers-reduced-motion:reduce){
  .js .pk,.js .pk > *,.js .tags li{clip-path:none;opacity:1;transform:none}
  .pk.feat{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)!important}
}


/* extras: the small print, set large */
.extras{position:relative;padding-block:clamp(100px,10vw,200px) clamp(110px,10vw,200px);overflow:hidden}
.x-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:clamp(24px,5vw,100px);padding-inline:var(--gut)}
.x-title{position:relative;padding-top:.2em}
.extras .giant{color:var(--ink);text-align:left;transform:none}
.extras .giant .ch:hover{color:var(--red)}
.js .extras .giant .ch{transform:translateY(105%)}
.extras .giant.in .ch{transform:translateY(0);transition:transform 1.2s var(--ease),color .45s ease;transition-delay:calc(var(--i) * .05s),0s}
.x-script{position:absolute;left:-.1em;top:-.75em;z-index:2;font-family:var(--f-script);color:var(--red);font-size:clamp(44px,4.6vw,96px);line-height:1;padding:.1em .35em .1em 0;white-space:nowrap;transform:rotate(-5deg);transform-origin:left bottom;pointer-events:none}
.js .x-script{clip-path:inset(0 100% 0 0)}
.x-title.in .x-script{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease) .55s}
.x-intro{margin:0 0 .6em;max-width:22em;color:var(--red);font-size:clamp(16px,1.25vw,24px);line-height:1.55;justify-self:end}

.x-grid{list-style:none;margin:clamp(70px,8vw,160px) 0 0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,40px)}
.x{display:flex;flex-direction:column;gap:.7em;min-width:0}
.x-ab{display:block;overflow:hidden;border-bottom:1px solid var(--ink);font-family:var(--f-display);font-size:clamp(64px,7.4vw,150px);line-height:.82;color:var(--ink);padding-top:.06em;margin-bottom:.35em}
.x-ab > span{display:inline-block;transform:translateY(.1em);transition:transform .7s var(--ease-out),color .45s ease}
.x:hover .x-ab > span{transform:translateY(-.02em);color:var(--red)}
.x-nm{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(18px,1.4vw,26px);color:var(--ink);line-height:1.1}
.x-d{flex:1;color:var(--mute);font-size:clamp(13px,.9vw,16px);line-height:1.55;max-width:22em}
.x-pr{margin-top:.4em;font-family:var(--f-display);font-size:clamp(24px,2vw,38px);color:var(--red);white-space:nowrap}
.x-pr small{font-family:var(--f-body);font-size:.36em;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);vertical-align:middle;margin:0 .4em}
.x-pr small:first-child{margin-left:0}
.js .x-ab{border-bottom-color:transparent}
.js .x-ab > span{transform:translateY(110%)}
.js .x > :not(.x-ab){opacity:0;transform:translateY(16px)}
.x-grid.in .x-ab{border-bottom-color:var(--ink);transition:border-color .8s ease calc(var(--k) * .12s)}
.x-grid.in .x-ab > span{transform:translateY(.1em);transition:transform 1.2s var(--ease) calc(.15s + var(--k) * .12s),color .45s ease}
.x-grid.in .x:hover .x-ab > span{transform:translateY(-.02em);transition:transform .7s var(--ease-out),color .45s ease}
.x-grid.in .x > :not(.x-ab){opacity:1;transform:none;transition:opacity .8s ease,transform 1s var(--ease-out);transition-delay:calc(.55s + var(--k) * .12s)}
.extras .folio{bottom:clamp(36px,4vw,72px)}
@media (max-width:900px){.x-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px}}
@media (max-width:760px){
  .x-head{grid-template-columns:minmax(0,1fr);gap:56px}
  .x-script{font-size:clamp(40px,11vw,60px);top:-.85em}
  .x-intro{justify-self:start}
  .x-grid{gap:56px 18px;margin-top:72px}
  .x-ab{font-size:clamp(52px,15vw,80px)}
  .x-pr{font-size:26px}
  .extras .folio{position:absolute;bottom:40px;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .js .extras .giant .ch,.js .x-ab > span,.js .x > :not(.x-ab){transform:none;opacity:1}.js .x-script{clip-path:none}.js .x-ab{border-bottom-color:var(--ink)}
}


/* contact */
.contact{position:relative;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:start;padding-top:clamp(110px,11vw,210px);overflow:hidden}
.c-photo{grid-column:1;grid-row:1;margin:0 0 0 var(--gut);width:min(34vw,700px);max-width:calc(100% - var(--gut));aspect-ratio:720/763;position:relative}
.c-shape{position:relative;width:100%;height:100%;transform:scaleX(-1);-webkit-mask:var(--shape) center / 100% 100% no-repeat;mask:var(--shape) center / 100% 100% no-repeat;background:var(--panel)}
.c-shape > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:grayscale(1)}
.c-shape img{object-position:50% 22%;transition:transform 1.4s var(--ease-out)}
.c-photo:hover .c-shape img{transform:scaleX(-1) scale(1.04)}
.c-ph{display:grid;place-items:center;filter:none;background:repeating-linear-gradient(135deg,transparent 0 15px,var(--hatch) 15px 16px)}

.js .c-photo .c-shape{clip-path:inset(100% 0 0 0)}
.c-photo.in .c-shape{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--ease)}
.c-body{grid-column:2;grid-row:1;padding-right:var(--gut);padding-left:clamp(0px,2vw,40px);display:flex;flex-direction:column;gap:clamp(40px,4vw,72px);min-width:0}
.c-lead{display:flex;flex-direction:column;gap:.4em}
.c-script{font-family:var(--f-script);color:var(--red);font-size:clamp(52px,5.4vw,112px);line-height:1;padding:.05em .3em .05em 0;transform:rotate(-4deg);transform-origin:left bottom;width:fit-content}
.c-lead p{margin:0;max-width:24em;color:var(--red);font-size:clamp(16px,1.3vw,25px);line-height:1.55}
.c-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.c-list li.rv.in{transition-delay:calc(var(--k) * .07s)}
.c-row{display:grid;grid-template-columns:2.4em 10em minmax(0,1fr) auto;align-items:baseline;gap:1em;padding:clamp(14px,1.2vw,22px) 0;border-top:1px solid var(--rule)}
.c-n{color:var(--red);font-size:clamp(11px,.8vw,15px)}
.c-lbl{font-size:clamp(10px,.75vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.c-val{font-family:var(--f-display);font-size:clamp(20px,1.9vw,36px);line-height:1.1;color:var(--ink);overflow-wrap:anywhere;transition:color .4s ease,transform .6s var(--ease-out)}
.c-go{color:var(--mute);transition:color .4s ease,transform .5s var(--ease-out)}
.c-row:hover .c-val,.c-row:focus-visible .c-val{color:var(--red);transform:translateX(.15em)}
.c-row:hover .c-go{color:var(--red);transform:translate(.2em,-.2em)}
.c-row:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.c-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4em 2em;margin:0}
.c-meta dt{font-size:clamp(10px,.72vw,13px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:.4em}
.c-meta dd{margin:0;font-size:clamp(14px,1vw,18px);color:var(--ink)}
.contact .giant{grid-column:1 / -1;color:var(--red);text-align:right;margin-top:clamp(70px,7vw,140px)}
.contact .giant .ch:hover{color:var(--ink)}
.js .contact .giant .ch{transform:translateY(105%)}
.contact .giant.in .ch{transform:translateY(0);transition:transform 1.2s var(--ease),color .45s ease;transition-delay:calc(var(--i) * .05s),0s}
.contact .folio{right:auto;left:var(--gut);bottom:clamp(30px,3vw,60px)}
.c-ph .ph-size{bottom:auto;top:clamp(16px,1.6vw,28px)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1em 2em;padding:clamp(22px,2vw,36px) var(--gut) calc(env(safe-area-inset-bottom,0px) + clamp(22px,2vw,36px));border-top:1px solid var(--rule);font-size:clamp(10px,.75vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.foot a{transition:color .4s ease}
.foot a:hover{color:var(--red)}
.foot-top i{display:inline-block;font-style:normal;transition:transform .5s var(--ease-out)}
.foot-top:hover i{transform:translateY(-.3em)}

@media (max-width:760px){
  .contact{grid-template-columns:minmax(0,1fr);padding-top:110px;row-gap:44px}
  .contact .giant{grid-row:1;order:-1;margin:0;text-align:left}
  .c-photo{grid-row:2;width:min(84vw,420px);margin-left:var(--gut)}
  
  .c-body{grid-column:1;grid-row:3;padding-left:var(--gut)}
  .c-row{grid-template-columns:2em minmax(0,1fr);gap:.3em .8em}
  .c-lbl,.c-val{grid-column:2}
  .c-n{grid-row:1 / span 2}
  .c-go{display:none}
  .c-val{font-size:clamp(20px,6vw,26px)}
  .c-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2em 1em}
  .contact .folio{position:static;grid-row:4;justify-self:end;margin:8px var(--gut) 40px 0}
  .foot{flex-direction:column;align-items:flex-start;gap:.9em}
}
@media (prefers-reduced-motion:reduce){
  .js .c-photo .c-shape{clip-path:none}.js .contact .giant .ch{transform:none}
}


/* language switch */
.bar{gap:clamp(18px,2.4vw,44px)}
.lang{margin-left:auto;display:flex;align-items:center;gap:.45em;text-transform:uppercase}
.lang button{all:unset;cursor:pointer;pointer-events:auto;position:relative;opacity:.42;transition:opacity .35s ease}
.lang button[aria-pressed="true"]{opacity:1}
.lang button::after{content:"";position:absolute;left:0;right:0;bottom:-.25em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.lang button[aria-pressed="true"]::after{transform:scaleX(1)}
.lang button:hover{opacity:1}
.lang button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.lang i{font-style:normal;opacity:.42}
.bar > .lang{padding:.55em .9em;margin:-.55em -.9em -.55em auto;border-radius:999px;transition:color .45s ease,background-color .45s ease,box-shadow .45s ease}
main,.toc-in,.foot{transition:opacity .28s ease}
.switching main,.switching .toc-in,.switching .foot{opacity:0}

/* consistency pass */
.kicker,.folio,.ph-size,.grp-t,.pk-top,.pk-cta,.meta .go,.s-note,.toc-meta,.toc-list .d,.toc-list .p,.ch-rule,.c-lbl,.c-meta dt,.foot,.pr small,.x-pr small,.pk-price small{font-size:var(--micro);letter-spacing:.2em}
.pk-no{font-size:2.6em;letter-spacing:0}
.w-script,.s-script,.x-script,.c-script{transform:rotate(-5deg);transform-origin:left bottom}
.js .c-script{clip-path:inset(0 100% 0 0)}
.c-lead.in .c-script{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease) .3s}
.w-intro p,.s-intro p,.x-intro p,.c-lead p{font-size:clamp(16px,1.3vw,25px);line-height:1.55;margin:0;color:var(--red)}
.s-intro,.x-intro{display:flex;flex-direction:column;gap:1.3em}
.works,.services,.extras,.contact{padding-top:clamp(110px,12vw,230px)}
.works,.services,.extras{padding-bottom:clamp(110px,10vw,200px)}
.pr,.x-pr{font-size:clamp(22px,2vw,38px)}
.toc-list a:hover .t > span,.toc-list a:focus-visible .t > span,.card-link:hover h3,.card-link:focus-visible h3{transform:translateX(.15em)}
.tags{border-bottom:1px solid var(--rule)}
/* Short display labels wrap by whole words — auto-hyphenation split them mid-word
   on phones ("ONLINE INVITA-TIONS"). The email keeps `anywhere` so it can still break. */
.tags li,.x-nm,.nm{overflow-wrap:break-word;hyphens:manual}
.c-val{overflow-wrap:anywhere;hyphens:manual}
@media (max-width:760px){
  .works,.services,.extras,.contact{padding-top:110px}
  .pr,.x-pr{font-size:26px}
  .lang{font-size:12px}
  .tags{font-size:clamp(16px,4.6vw,20px)}
}
@media (prefers-reduced-motion:reduce){.js .c-script{clip-path:none}}


/* russian typesetting: one family per role, no mixed glyphs */
html[lang="ru"]{--f-body:"Montserrat","Helvetica Neue",Arial,sans-serif}
html[lang="ru"] .nm,html[lang="ru"] .x-nm,html[lang="ru"] .tags,html[lang="ru"] .card .meta h3,html[lang="ru"] .toc-list .t,html[lang="ru"] .bio .w.dc{font-family:"Oswald","Anton","Arial Narrow",sans-serif;font-weight:600;letter-spacing:.01em}
html[lang="ru"] .nm small{font-family:var(--f-body);font-weight:400}
html[lang="ru"] .tags li,html[lang="ru"] .x-nm,html[lang="ru"] .nm,html[lang="ru"] .c-val{hyphens:manual;overflow-wrap:normal}
html[lang="ru"] .bio,html[lang="ru"] .w-intro p,html[lang="ru"] .s-intro p,html[lang="ru"] .x-intro p,html[lang="ru"] .c-lead p{font-size:clamp(15px,1.2vw,23px);line-height:1.6}
html[lang="ru"] .bio{max-width:27em}
html[lang="ru"] .kicker,html[lang="ru"] .folio,html[lang="ru"] .grp-t,html[lang="ru"] .pk-top,html[lang="ru"] .pk-cta,html[lang="ru"] .meta .go,html[lang="ru"] .s-note,html[lang="ru"] .toc-meta,html[lang="ru"] .toc-list .d,html[lang="ru"] .toc-list .p,html[lang="ru"] .ch-rule,html[lang="ru"] .c-lbl,html[lang="ru"] .c-meta dt,html[lang="ru"] .foot,html[lang="ru"] .ph-size{letter-spacing:.14em}
.bio,.w-intro p,.s-intro p,.x-intro p,.c-lead p,.desc,.x-d,.pk-for,.nm small,.c-meta dd,.s-note{text-wrap:pretty}
.nm,.x-nm,.meta h3,.pk h3{text-wrap:balance}
@media (max-width:760px){
  html[lang="ru"] .bio,html[lang="ru"] .w-intro p,html[lang="ru"] .s-intro p,html[lang="ru"] .x-intro p,html[lang="ru"] .c-lead p{font-size:16px}
}


/* RU: first word as the drop cap */
html[lang="ru"] .bio::first-letter{font:inherit;float:none;margin:0;color:inherit;line-height:inherit}
html[lang="ru"] .bio .w.dc{float:left;font-size:3.1em;line-height:.8;margin:.1em .16em 0 0;text-transform:uppercase;color:var(--red);opacity:1}
/* bar: language only on the cover; steadier spacing on phones */
.lang{transition:color .45s ease,background-color .45s ease,box-shadow .45s ease;will-change:opacity,transform}
@media (max-width:760px){
  .bar{padding-top:calc(env(safe-area-inset-top,0px) + 56px)}
}


@media (max-width:760px){html[lang="ru"] .tags{font-size:17px}}


/* signature on the photos: in the grey corner, quiet */
.portrait .frame{position:relative}
.ph-sig{position:absolute;z-index:3;left:8.5%;top:7%;font-family:"Anton","Oswald",sans-serif;text-transform:uppercase;font-size:clamp(10px,.95vw,17px);letter-spacing:.14em;line-height:1.25;pointer-events:none}
.ph-sig.light{color:rgba(255,255,255,.92)}
.ph-sig.dark{color:var(--ink);opacity:.85}
.js .ph-sig{opacity:0;transform:translateY(6px)}
.portrait.in .ph-sig,.c-photo.in .ph-sig{opacity:1;transform:none;transition:opacity .9s ease 1.2s,transform 1.1s var(--ease-out) 1.2s}
.portrait.in .ph-sig.dark,.c-photo.in .ph-sig.dark{opacity:.85}
@media (prefers-reduced-motion:reduce){.js .ph-sig{opacity:1;transform:none}}

/* chameleon bar */
.bar > .sec,.bar > .menu-btn{padding:.55em .9em;margin:-.55em -.9em;border-radius:999px;transition:color .45s ease,background-color .45s ease,box-shadow .45s ease}
.bar > [data-tone="inv"]{color:var(--paper)}
.bar > [data-tone="inv"] sup{color:var(--paper-dim)}
.bar > [data-tone="pill"]{background-color:var(--glass);box-shadow:0 0 0 1px var(--rule);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* cursor */
.cursor{position:fixed;left:0;top:0;opacity:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--red);
  pointer-events:none;z-index:60;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .35s;display:none}
.cursor.on{opacity:1}
.cursor.big{width:72px;height:72px;margin:-36px 0 0 -36px;background:var(--red-soft)}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* mobile */
@media (max-width:760px){
  .hero .giant .m-br{display:block}
  .hero .giant .ch-sp{display:none}
  .hero .giant{line-height:.82}
  .script{font-size:clamp(56px,19vw,120px);bottom:calc(var(--gh,40vw) * .9)}
  .about{grid-template-columns:minmax(0,1fr);padding-top:96px;row-gap:44px}
  .about .giant{order:-1}
  .portrait{order:0}
  .copy{order:1;gap:28px}
  .about .folio{order:2}
  .copy{padding-right:var(--gut)}
  .bio{font-size:clamp(17px,4.6vw,21px)}
  .tags-k{display:flex;margin-top:12px}
  .tags{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;counter-reset:t;font-family:var(--f-display);font-size:clamp(18px,5.2vw,22px);letter-spacing:.02em;color:var(--ink);margin-top:-12px}
  .tags li{counter-increment:t;align-items:baseline;gap:.7em;padding:13px 0 11px;border-top:1px solid var(--rule);line-height:1.15}
  .tags li::before{content:counter(t,decimal-leading-zero);width:auto;height:auto;background:none;opacity:1;font-family:var(--f-body);font-size:10px;letter-spacing:.12em;color:var(--red);flex:none}
  .portrait{width:min(86vw,440px);margin-right:var(--gut);justify-self:end}
  .about .giant{margin:0 0 4px}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}.js .s-script{clip-path:none}.js .services .giant .ch{transform:none}
  .js .card .cframe{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)}
  .js .w-script{clip-path:none}.js .works .giant .ch,.js .card .ph,.js .card .cframe img{transform:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .portrait .frame{clip-path:none}.js .portrait img,.js .about .giant .ch{transform:none}
  .grain{display:none}
}



/* Reserve room for the longer second label in the animated menu/close roll. */
html[lang="ru"] .menu-btn .mb{width:8ch;flex-shrink:0;white-space:nowrap}
html[lang="ru"] .menu-btn .mb > span{display:block;white-space:nowrap}
@media(max-width:390px){html[lang="ru"] .menu-btn{letter-spacing:0}html[lang="ru"] .menu-btn .mb{width:7.5ch}}

/* Approved change · 2026-10-10: burgundy category folders on the portfolio homepage ONLY.
   Keep existing card proportions, clip shape, reveal, hover motion, captions and links. */
.works .w-grid .card .cframe { background: var(--red, var(--red)); }
.works .w-grid .card .ph {
  background: repeating-linear-gradient(135deg,
    transparent 0 15px,
    rgba(255,255,255,.12) 15px 16px),
    var(--red, var(--red));
}
.works .w-grid .card .ph-word { color: #f7f2ee; opacity: 1; }
.works .w-grid .card .ph-size { color: rgba(255,255,255,.76); }

/* v2: clear project index CTA while preserving four existing burgundy folders. */
.works-all-link{margin:clamp(75px,11vw,170px) var(--gut) 0;border-top:1px solid var(--rule);padding:clamp(23px,3vw,43px) 0;display:flex;align-items:flex-end;justify-content:space-between;gap:20px 50px}
.works-all-copy{flex:1;max-width:380px}
.works-all-copy p{margin:14px 0 0;font-size:clamp(13px,1.12vw,18px);line-height:1.55;color:var(--mute)}
.works-all-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:clamp(15px,3vw,60px);color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding:4px 0 12px;font-family:var(--f-display);font-size:clamp(26px,3.15vw,56px);line-height:1.05;letter-spacing:.005em;transition:color .3s ease}
.works-all-cta:hover,.works-all-cta:focus-visible{color:var(--red)}
.works-all-arrow,.prefooter-brief-arrow{font-family:Arial,sans-serif;font-weight:400;font-size:.65em;line-height:1;display:inline-block;transition:transform .3s ease}
.works-all-cta:hover .works-all-arrow,.prefooter-brief-link:hover .prefooter-brief-arrow{transform:translate(4px,-4px)}
.prefooter-brief{border-top:1px solid var(--rule);padding:clamp(38px,5vw,85px) var(--gut);display:flex;align-items:flex-end;justify-content:space-between;gap:25px 50px;background:var(--paper)}
.prefooter-brief-info{flex:1;max-width:490px}
.prefooter-brief-info p{font-size:clamp(15px,1.3vw,21px);line-height:1.5;color:var(--mute);margin:15px 0 0}
.prefooter-brief-link{display:inline-flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,65px);min-width:0;padding-bottom:13px;border-bottom:2px solid var(--red);font:400 clamp(29px,3.3vw,60px)/1.04 var(--f-display);color:var(--red);text-decoration:none;transition:color .3s ease}
.prefooter-brief-link:hover,.prefooter-brief-link:focus-visible{color:var(--ink)}
@media(max-width:760px){
 .works-all-link,.prefooter-brief{flex-direction:column;align-items:stretch;gap:26px}
 .works-all-cta,.prefooter-brief-link{width:100%;font-size:clamp(30px,8.4vw,47px)}
 .works-all-link{margin-top:80px}
}
/* Readable captions and navigation notes on narrow screens. */
@media(max-width:760px){
 :root{--micro:12px}
 .toc-meta,.toc-list .p,.pk-top,.pk-cta,.c-meta dt,.s-note,.kicker,.folio,.cap,.foot{line-height:1.5;letter-spacing:.1em;overflow-wrap:anywhere}
 .toc-meta{max-width:100%;font-size:12px}
}

/* ── Доступность (добавлено при аудите) ─────────────────────────────────
   Увеличивает только зону нажатия и добавляет skip-link.
   Ничего не сдвигается визуально. Чтобы откатить — удалите блок целиком. */

/* Зона нажатия 44×44 (WCAG 2.5.8). Рисуется невидимым псевдоэлементом,
   поэтому отступы и вёрстка остаются прежними. */
.lang button{position:relative}
.lang button::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.pk-cta,.foot a,.meta .go{position:relative}
.pk-cta::before,.foot a::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* Skip-link: виден только с клавиатуры. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--red);color:#fff;
  padding:14px 20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:var(--gut,24px);top:12px}

/* Narrowest phones: one column in the "what I do" list, so the longest labels
   ("DIGITAL CERTIFICATES") stay whole words instead of breaking. */
@media (max-width:359px){.tags{grid-template-columns:minmax(0,1fr)}}
/* Russian labels are longer: give them one column on phone widths (most iPhones
   are 390-393px), otherwise words like "Онлайн-приглашения" overflow their column. */
@media (max-width:399px){html[lang="ru"] .tags{grid-template-columns:minmax(0,1fr)}}

/* Tablet (761–1000px): 3 tag columns leave ~68px for each label after its number,
   so words like CERTIFICATES overflow their cell. Two columns match the phone layout. */
@media (min-width:761px) and (max-width:1000px){.tags{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Email row: the RU rule above sets .c-val to overflow-wrap:normal, so the unbroken
   local part ("elenitsandekidou@") ran past its column at tablet widths. Let addresses break. */
a.c-row[href^="mailto:"] .c-val{overflow-wrap:anywhere}