/* CONUE: страница до запуска. Всё от знака клиента: туманно-серый фон, чёрные буквы с засечками и одна нить
   через весь экран. Нить прорисовывается сверху вниз один раз, потом по очереди проявляются буквы.
   Ссылки на файлы относительные: те же файлы работают и у нас (/clients/conue/), и на сервере клиента (/). */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(fonts/inter-400.woff) format("woff")}
:root{--fog:#D9D9D6;--ink:#0B0B0B;--ink2:#3D3D3A;--thread:1.5px;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--fog);color:var(--ink);
  font:400 14px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* нить: от верхнего края до нижнего, за буквами её прячет фон знака, как на логотипе */
body::before{content:"";position:fixed;left:50%;top:0;bottom:0;width:var(--thread);margin-left:calc(var(--thread) / -2);background:var(--ink);
  transform-origin:50% 0;animation:thread 1.3s cubic-bezier(.65,0,.25,1) both}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* учебный проект: честно и сразу */
.tp{position:relative;z-index:2;background:var(--ink);color:var(--fog);font-size:12.5px;line-height:1.45;text-align:center;padding:9px 16px}
.tp a{white-space:nowrap}
.sc{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;align-content:center;
  column-gap:clamp(16px,4vw,56px);padding:clamp(40px,10vh,110px) 16px clamp(28px,6vh,64px)}
.mark{grid-column:2;height:clamp(300px,60vh,720px);height:clamp(300px,60svh,720px);aspect-ratio:175/1000;background:var(--fog)}
.mark svg{display:block;width:100%;height:100%;overflow:visible}
.mark path{animation:letter .9s cubic-bezier(.2,.7,.2,1) both}
.mark path:nth-child(1){animation-delay:.9s}
.mark path:nth-child(2){animation-delay:1.02s}
.mark path:nth-child(3){animation-delay:1.14s}
.mark path:nth-child(4){animation-delay:1.26s}
.mark path:nth-child(5){animation-delay:1.38s}
.side{font-size:13.5px;line-height:1.5;color:var(--ink2);max-width:20ch;animation:fade .8s ease 1.7s both}
.side.l{grid-column:1;grid-row:1;justify-self:end;text-align:right}
.side.r{grid-column:3;grid-row:1;justify-self:start}
.side br{display:block}
.ft{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;padding:14px 16px 16px;font-size:12.5px;color:var(--ink2)}
@keyframes thread{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes letter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:420px){.side{font-size:12.5px}.sc{column-gap:14px}}
@media (prefers-reduced-motion:reduce){body::before,.mark path,.side{animation:none}}