/* primate.church — раскладка и механика emblematica.agency один в один (teardown/emblematica: TEARDOWN.md, out/layout.json).
   Свои: бумага и чернь тёплые, акцент — фиолет мантии, шрифты EB Garamond + Manrope, предметы и портрет владельца.
   Единица --u как у донора: 1px при 1440×760, упор в высоту; --s на телефоне = 1px при ширине 390. */
:root{
  --paper:#e9e5de; --ink:#141210; --white:#fbfaf7; --mute:#6f665c; --violet:#4d2b63; --violet-2:#6a4384; --lilac:#c9b3e6;
  --serif:'EB Garamond',Georgia,serif; --sans:'Manrope',system-ui,'Segoe UI',sans-serif;
  --u:min(0.0694444444vw,0.1315789474dvh); --s:calc(100vw/390); --side:calc((100vw - 1440*var(--u))/2);
  --e-out:cubic-bezier(.16,1,.3,1); --e-menu:cubic-bezier(.16,.96,.19,1); --e-curtain:cubic-bezier(.68,0,.14,1);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{overflow-anchor:none;scrollbar-color:#9d8fae var(--paper);scrollbar-width:thin;-webkit-text-size-adjust:100%}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#9d8fae;border-radius:10px;border:2px solid var(--paper)}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;touch-action:pan-y;position:relative}
html.boot body:not(.unboot){overflow:hidden;background:var(--ink)}
a{color:inherit}
img{display:block;max-width:100%}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.u-probe{position:absolute;width:calc(1000*var(--u));visibility:hidden;pointer-events:none}
:focus-visible{outline:2px solid var(--violet-2);outline-offset:3px}

/* ——— заставка ——— */
.pre{position:fixed;inset:0;z-index:1000;pointer-events:none;display:none}
html.boot body:not(.unboot) .pre{display:block}
.pre-curtain{position:absolute;inset:-1px;background:var(--ink);will-change:transform}
.pre-curtain::after{content:"";position:absolute;left:50%;bottom:-46dvh;width:224vw;height:96dvh;border-radius:0 0 50% 50%;background:var(--ink);translate:-50% 0;transform-origin:50% 0}
.pre-fall{position:absolute;inset:0;display:grid;place-items:center;perspective:calc(1000*var(--u))}
.pre-obj{position:absolute;width:calc(220*var(--u));aspect-ratio:1;background:center/contain no-repeat;opacity:0;
  filter:drop-shadow(0 calc(26*var(--u)) calc(38*var(--u)) rgb(0 0 0/.35));animation:fall 640ms both paused}
.pre.play .pre-obj{animation-play-state:running}
.pre-obj[data-i="0"]{animation-delay:70ms;--a:-18deg;--b:7deg;--c:26deg}.pre-obj[data-i="1"]{animation-delay:180ms;--a:24deg;--b:-8deg;--c:-28deg}
.pre-obj[data-i="2"]{animation-delay:290ms;--a:-28deg;--b:10deg;--c:34deg}.pre-obj[data-i="3"]{animation-delay:400ms;--a:18deg;--b:-6deg;--c:-24deg}
.pre-obj[data-i="4"]{animation-delay:510ms;--a:-12deg;--b:9deg;--c:24deg}.pre-obj[data-i="5"]{animation-delay:620ms;--a:-20deg;--b:8deg;--c:30deg}
.pre-obj[data-i="6"]{animation-delay:730ms;--a:14deg;--b:-10deg;--c:-22deg}.pre-obj[data-i="7"]{animation-delay:840ms;--a:22deg;--b:-7deg;--c:-30deg}
.pre-obj[data-i="8"]{animation-delay:950ms;--a:-20deg;--b:8deg;--c:28deg}
@keyframes fall{
  0%{opacity:0;animation-timing-function:cubic-bezier(.12,.72,.22,1);transform:translate3d(0,2vh,calc(-70*var(--u))) rotate(var(--a)) scale(.76)}
  12%{opacity:1;animation-timing-function:cubic-bezier(.18,.86,.24,1);transform:translate3d(0,0,calc(62*var(--u))) rotate(var(--b)) scale(.96)}
  26%{opacity:1;animation-timing-function:cubic-bezier(.62,0,.92,.42);transform:translate3d(0,-4.8vh,calc(95*var(--u))) rotate(calc(var(--b)*-.55)) scale(1)}
  40%{opacity:1;animation-timing-function:cubic-bezier(.26,.02,.82,.18);transform:translate3d(0,-1.5vh,calc(66*var(--u))) rotate(calc(var(--b)*-.35)) scale(.94)}
  72%{opacity:.92;animation-timing-function:cubic-bezier(.4,0,1,1);transform:translate3d(0,30vh,calc(-44*var(--u))) rotate(calc(var(--c)*.72)) scale(.78)}
  100%{opacity:0;transform:translate3d(0,62vh,calc(-70*var(--u))) rotate(var(--c)) scale(.66)}}
.pre.leave .pre-fall{opacity:0;transition:opacity 260ms ease}
.pre.leave .pre-curtain{transform:translate3d(0,-152%,0);transition:transform 1080ms var(--e-curtain)}
.pre.leave .pre-curtain::after{animation:arc 1080ms var(--e-curtain) both}
@keyframes arc{
  0%{border-radius:0 0 50% 50%/0 0 34% 34%;transform:translateY(0) scale(1.02,.62)}
  24%{border-radius:0 0 50% 50%/0 0 128% 128%;transform:translateY(13vh) scale(1.86,1.82)}
  48%{border-radius:0 0 50% 50%/0 0 156% 156%;transform:translateY(21vh) scale(1.46,1.9)}
  72%{border-radius:0 0 50% 50%/0 0 94% 94%;transform:translateY(13vh) scale(1.08,1.12)}
  100%{border-radius:0 0 50% 50%/0 0 42% 42%;transform:translateY(5vh) scale(.72,.38)}}

/* ——— шапка и пилюли (донор: знак слева, Menu по центру, язык и действие справа) ——— */
.top{position:fixed;z-index:70;left:calc(18*var(--u) + 4px);top:calc(22*var(--u) + 4px);height:calc(38*var(--u));display:flex;align-items:center}
.top-brand{display:flex;align-items:center;gap:calc(9*var(--u));text-decoration:none;font:600 calc(26*var(--u))/1 var(--serif);transition:color .25s}
.top-mark{width:calc(32*var(--u));height:calc(32*var(--u));fill:currentColor}
body.on-dark .top-brand{color:var(--white)}
.bar{position:fixed;z-index:70;left:calc(28*var(--u));right:calc(23*var(--u));top:calc(22.5*var(--u) + 4px);height:calc(38*var(--u));pointer-events:none;
  font:800 calc(14*var(--u))/1 var(--sans);letter-spacing:.01em;text-transform:uppercase}
.bar>*{pointer-events:auto}
.pill{display:inline-flex;align-items:center;gap:calc(5*var(--u));height:calc(38*var(--u));padding:0 calc(14*var(--u));border-radius:999px;border:0;
  background:var(--white);color:var(--ink);font:inherit;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,opacity .24s}
.pill i,.menu-close i{width:calc(5*var(--u));height:calc(5*var(--u));border-radius:50%;background:currentColor;display:block}
.pill i+i,.menu-close i+i{margin-left:calc(-1*var(--u))}
.pill-menu{position:absolute;left:50%;top:0;translate:-50% 0;min-width:calc(90*var(--u));justify-content:center}
.bar-r{position:absolute;right:0;top:0;display:flex;gap:calc(2*var(--u))}
.pill-acc{background:var(--violet);color:#fff}
.pill:hover{background:var(--lilac);color:var(--ink)}
.pill-acc:hover{background:var(--violet-2);color:#fff}
.menu-open .pill-menu{opacity:0}

/* ——— заливка цветом предмета при наведении (донор: круг из центра предмета, 920 мс) ——— */
.wipe{position:fixed;inset:0;z-index:10;background:var(--c);clip-path:circle(0 at var(--x) var(--y));pointer-events:none;
  transition:clip-path 920ms cubic-bezier(.22,.78,.18,1),opacity 300ms ease;will-change:clip-path}
.wipe.on{clip-path:circle(150vmax at var(--x) var(--y))}
.wipe.out{opacity:0}

/* ——— предметы ——— */
/* слой предметов — над манифестом, как у донора (visual-layer z60): при прокрутке предметы висят над чёрным блоком и уходят к краям */
.layer{position:fixed;inset:0;z-index:45;pointer-events:none;transition:opacity .35s ease}
.layer.gone{opacity:0}
.obj{position:absolute;left:0;top:0;width:var(--w);z-index:var(--z,1);will-change:transform;
  transform:translate3d(calc(var(--bx) + var(--tx,0px) + var(--sx,0px)),calc(var(--by) + var(--ty,0px) + var(--sy,0px)),0)
    translate(-50%,-50%) rotate(calc(var(--r0) + var(--rz,0deg))) scale(calc(var(--ss,1) * var(--hs,1)))}
.obj img{width:100%;height:auto;opacity:0;transition:opacity .5s ease,transform 980ms cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 calc(18*var(--u)) calc(26*var(--u)) rgb(40 30 20/.16))}
.obj.ok img{opacity:1}
.obj.hov img{transform:scale(1.085)}
body.menu-open main,body.menu-open .layer{filter:blur(calc(10*var(--u)))}
main{transition:filter .4s ease}

/* ——— первый экран и клон ——— */
.hero,.loop-stage{position:relative;height:100svh;min-height:calc(560*var(--u))}
.cap{position:absolute;z-index:30;bottom:calc(21*var(--u));margin:0;font:800 calc(14*var(--u))/1.17 var(--sans);letter-spacing:.005em;text-transform:uppercase;text-decoration:none}
.cap-l{left:calc(28*var(--u))}
.cap-c{left:50%;translate:-50% 0;width:calc(568*var(--u));text-align:center}
.cap-r{right:calc(23*var(--u));text-align:right}
.loop{position:relative;min-height:160vh;margin-top:calc(-180*var(--u))}  /* нахлёст на конец блока с портретом: ряд у ног и ряд первого экрана читаются соседними (у донора −26vh) */
.loop-stage{position:sticky;top:0;overflow:hidden;z-index:30}  /* sticky создаёт свой слой: без z-index заливка при наведении (z 10) ложилась поверх предметов клона */
.loop-objs{position:absolute;inset:0;z-index:20}

/* ——— манифест ——— */
.manifesto{position:relative;z-index:40;background:var(--ink);color:var(--white);min-height:100vh;padding:calc(140*var(--u)) calc(28*var(--u));
  display:flex;flex-direction:column;justify-content:center}  /* текст втрое короче донорского — блок в экран, без пустого чёрного поля (слово владельца 10.11.2026) */
.m-k{margin:0 auto calc(48*var(--u));max-width:calc(1060*var(--u));font:800 calc(14*var(--u))/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--lilac);text-align:center}
.m-text{margin:0 auto;max-width:calc(1060*var(--u));font:400 calc(48*var(--u))/1.12 var(--serif);letter-spacing:-.012em;text-align:center}
.ch{color:rgb(251 250 247/.18);transition:color .25s linear}.ch.on{color:var(--white)}

/* ——— блок с портретом (донор .about: 2102u; заголовок 70u; фото 1100×1434u; украшения с 1432u) ——— */
.about{position:relative;height:calc(1996*var(--u));background:var(--paper)}
.about>*{position:absolute;z-index:12;margin:0}
.about-k{transform:translate3d(0,var(--py,0px),0);top:calc(102*var(--u));left:0;right:0;text-align:center;font:800 calc(14*var(--u))/1.1 var(--sans);text-transform:uppercase}
.about-title{top:calc(150*var(--u));left:50%;translate:-50% 0;transform:translate3d(0,var(--py,0px),0);will-change:transform;width:calc(980*var(--u));text-align:center;font:500 calc(70*var(--u))/1.02 var(--serif);letter-spacing:-.02em}
.about-title em{font-style:italic;font-weight:400}
.about-title .ln{display:block}
.portrait{top:calc(360*var(--u));left:50%;translate:-50% 0;height:calc(1434*var(--u));z-index:11}
.portrait-c{position:relative;display:block;height:100%;width:auto}
/* размытие к ногам — в canvas (site.js progressiveBlur), гауссово и нарастающее */
.about-l{left:calc(93*var(--u) + var(--side));top:calc(462*var(--u));width:calc(200*var(--u));font:800 calc(14*var(--u))/1.04 var(--sans);text-transform:uppercase}
.about-r{left:calc(1125*var(--u) + var(--side));top:calc(756*var(--u));width:calc(190*var(--u));font:800 calc(14*var(--u))/1.04 var(--sans);text-transform:uppercase}
.about-r p{margin:0 0 calc(30*var(--u))}
.about-r a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.about-orn{left:0;right:0;top:calc(1326*var(--u));height:calc(660*var(--u));z-index:13}
.js [data-reveal]{opacity:0;translate:0 calc(26*var(--u));transition:opacity .9s ease,translate 1.1s var(--e-out)}
.js .portrait[data-reveal]{translate:-50% calc(26*var(--u))}
.js [data-reveal].in{opacity:1;translate:0 0}
.js .portrait[data-reveal].in{translate:-50% 0}
.js [data-reveal].from-top{translate:0 calc(-26*var(--u))}
.js .portrait[data-reveal].from-top{translate:-50% calc(-26*var(--u))}

/* ——— меню из кнопки ——— */
.menu{position:fixed;inset:0;z-index:120;pointer-events:none;
  --edge:calc(12*var(--u));--al:calc(50vw - 45*var(--u));--at:var(--edge);--pl:calc(28*var(--u));--ox:0px;--oy:0px;--osx:.12;--osy:.05;--cx:50vw;--cy:calc(42*var(--u))}
.menu[hidden]{display:none}
.menu-open .menu{pointer-events:auto}
.menu-back{position:absolute;inset:0;background:rgb(233 229 222/.2);backdrop-filter:blur(calc(18*var(--u)));-webkit-backdrop-filter:blur(calc(18*var(--u)));opacity:0;transition:opacity 360ms ease}
.menu-open .menu-back{opacity:1}
.menu-drawer{position:absolute;z-index:3;top:var(--at);left:calc(var(--al) - var(--pl));
  width:min(calc(930*var(--u)),calc(100vw - var(--al) + var(--pl) - var(--edge)));height:calc(100dvh - var(--edge)*2);
  padding:calc(83*var(--u)) calc(28*var(--u)) calc(28*var(--u)) var(--pl);border-radius:calc(28*var(--u));background:rgb(251 250 247/.98);color:var(--ink);
  display:grid;grid-template-rows:1fr auto;gap:calc(24*var(--u));
  box-shadow:0 calc(32*var(--u)) calc(80*var(--u)) rgb(20 18 16/.12),inset 0 calc(1*var(--u)) 0 rgb(255 255 255/.45);
  transform-origin:top left;transform:translate3d(var(--ox),var(--oy),0) scale(var(--osx),var(--osy));opacity:0;
  clip-path:inset(0 round calc(28*var(--u)));overflow:hidden;transition:transform 840ms var(--e-menu),opacity 280ms ease}
.menu-open .menu-drawer{transform:none;opacity:1}
.menu-close{position:fixed;z-index:6;left:var(--cx);top:var(--cy);translate:-50% -50%;display:inline-flex;align-items:center;gap:calc(5*var(--u));
  height:calc(38*var(--u));padding:0 calc(10*var(--u));border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer;
  font:800 calc(14*var(--u))/1 var(--sans);text-transform:uppercase;opacity:0;transition:opacity 240ms ease}
.menu-open .menu-close{opacity:1;transition-delay:160ms}
.menu-nav{align-self:start;display:grid}
.menu-nav a{width:fit-content;max-width:100%;font:800 clamp(calc(48*var(--u)),7vw,calc(102*var(--u)))/.9 var(--sans);text-transform:uppercase;
  text-decoration:none;letter-spacing:-.004em;white-space:nowrap;overflow:hidden;padding:.16em 0 .22em;margin:-.16em 0 -.22em;transition:color 180ms ease}
.menu-nav a:hover,.menu-nav a.acc{color:var(--violet)}
.ml{display:block;transform:translate3d(0,108%,0) skewY(5deg);transform-origin:left top;opacity:0;filter:blur(calc(6*var(--u)));
  transition:transform 860ms var(--e-out),opacity 320ms ease,filter 720ms cubic-bezier(.18,1,.36,1)}
.menu-open .ml{transform:none;opacity:1;filter:none}
.menu-nav a:nth-child(1) .ml{transition-delay:120ms}.menu-nav a:nth-child(2) .ml{transition-delay:160ms}.menu-nav a:nth-child(3) .ml{transition-delay:200ms}
.menu-foot{opacity:0;transform:translate3d(0,calc(26*var(--u)),0);transition:transform 680ms var(--e-out),opacity 260ms ease}
.menu-open .menu-foot{opacity:1;transform:none;transition-delay:220ms}
.menu-foot p{margin:0 0 calc(12*var(--u));font:800 calc(12*var(--u))/1 var(--sans);text-transform:uppercase;color:var(--mute)}
.menu-langs{display:flex;flex-wrap:wrap;gap:calc(6*var(--u))}
.menu-langs a{padding:calc(10*var(--u)) calc(14*var(--u));border-radius:999px;background:var(--paper);text-decoration:none;font:700 calc(14*var(--u))/1 var(--sans);transition:background-color .2s}
.menu-langs a:hover{background:var(--lilac)}
.menu-langs a[aria-current]{background:var(--ink);color:var(--white)}
.menu-dove{position:absolute;z-index:2;left:calc(var(--al) - var(--pl) - 205*var(--u));top:calc(var(--at) + 76*var(--u));width:calc(422*var(--u));
  pointer-events:none;opacity:0;transform:translate3d(calc(24*var(--u)),calc(12*var(--u)),0) rotate(-10deg) scale(.88);transform-origin:80% 50%;
  transition:opacity 260ms ease,transform 760ms var(--e-out)}
.menu-open .menu-dove.ok{opacity:1;transform:rotate(-10deg);transition-delay:180ms}

/* ——— телефон: как у донора — длинный первый экран, пилюли внизу, фото во весь рост ——— */
@media (max-width:900px){
  :root{--u:min(0.23vw,0.92px)}
  .top{left:14px;top:18px;height:auto}
  .top-brand{font-size:21px}.top-mark{width:26px;height:26px}
  .bar{left:0;right:0;top:auto;bottom:30px;height:40px;display:flex;justify-content:center;gap:4px;font-size:14px}
  .pill{height:40px;padding:0 13px}
  .pill-menu,.bar-r{position:static;translate:none}
  .bar-r{display:contents}
  .pill-lang{order:3}
  .pill i{width:4px;height:4px}
  .hero{height:calc(1245*var(--s));min-height:0}
  .loop-stage{height:100svh;min-height:0}
  .loop{margin-top:calc(-60*var(--s))}
  .cap-l,.cap-r{display:none}
  .cap-c{top:calc(363*var(--s));bottom:auto;width:calc(220*var(--s));font-size:15px;line-height:1.14}
  .manifesto{padding:120px 18px 120px;min-height:100vh}
  .m-k{font-size:12px;margin-bottom:28px}
  .m-text{font-size:clamp(26px,7.4vw,34px)}
  .about{height:calc(1801*var(--s))}
  .about-k{top:calc(72*var(--s));font-size:12.5px}
  .about-title{top:calc(115*var(--s));width:calc(362*var(--s));font-size:calc(38*var(--s))}
  /* 10.11.2026 владелец: на телефоне портрет крупно, правое плечо за кадром; нижняя половина уходит градиентом в цвет фона */
  .portrait{top:calc(250*var(--s));height:calc(1040*var(--s));left:60%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 33%,rgba(0,0,0,.5) 45%,transparent 58%);mask-image:linear-gradient(to bottom,#000 0,#000 33%,rgba(0,0,0,.5) 45%,transparent 58%)}
  .about-l,.about-r{z-index:12}
  .about-l{left:calc(14*var(--s));top:calc(806*var(--s));width:calc(190*var(--s));font-size:13.4px}
  .about-r{left:calc(50*var(--s));top:calc(940*var(--s));width:calc(326*var(--s));font-size:13.4px}
  .about-r p{margin-bottom:14px}
  .about-orn{top:calc(1101*var(--s));height:calc(700*var(--s))}
  .menu-drawer{top:8.5dvh;left:2.75vw;width:94vw;height:82dvh;padding:5dvh 5vw 4dvh;border-radius:20px}
  .menu-nav a{font-size:clamp(34px,10.4vw,58px)}
  .menu-close{height:40px;font-size:14px;padding:0 13px;background:var(--white)}
  .menu-dove{display:none}
  .menu-foot p{font-size:11px}.menu-langs a{font-size:14px;padding:10px 13px}
  .wipe{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;translate:none}
}
/* 09.11.2026 владелец: низ раскрытого меню — значки соцсетей вместо ссылок */
.menu-soc{display:flex;flex-wrap:wrap;align-items:center;gap:calc(22*var(--u))}
.menu-soc a{display:inline-flex;width:calc(30*var(--u));height:calc(30*var(--u));color:var(--violet);transition:opacity 180ms ease,transform 260ms var(--e-out)}
.menu-soc a:hover{opacity:.72;transform:translateY(calc(-2*var(--u)))}  /* 09.11.2026 владелец: значки фиолетовые, как «Подписаться» */
.menu-soc svg{width:100%;height:100%;fill:currentColor}
@media (max-width:760px){.menu-soc{gap:20px}.menu-soc a{width:28px;height:28px}}