@font-face{font-family:'Gosha Sans';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/goshasans-300.woff2') format('woff2')}
@font-face{font-family:'Gosha Sans';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/goshasans-400.woff2') format('woff2')}
@font-face{font-family:'Gosha Sans';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/goshasans-600.woff2') format('woff2')}

:root{
  --violet:#8550F0;--violet-dark:#7D44EF;--sand:#FDBF4A;--sand-light:#FDEFD7;
  --red:#FF3C40;--green:#3D6759;--wine:#540A1A;--ink:#1C1C20;--white:#fff;
  --gutter:1.5rem;
}
@media(min-width:768px){:root{--gutter:2.5rem}}
@media(min-width:1200px){:root{--gutter:5rem}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--violet);color:var(--ink);font-family:'Gosha Sans',Arial,sans-serif;font-size:16px;line-height:1.35;letter-spacing:.045rem;overflow-x:hidden;-webkit-font-smoothing:antialiased}
@media(min-width:1600px){body{font-size:18px}}
img{max-width:100%;display:block}
a{color:inherit}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem var(--gutter);background:var(--violet);color:var(--white)}
.top__logo{font-weight:600;text-decoration:none;font-size:1.05rem;white-space:nowrap}
.top nav{display:none;gap:1.5rem;align-items:center}
.top nav a{text-decoration:none;font-size:.9rem;text-transform:uppercase;letter-spacing:.08rem}
.top nav a:hover{text-shadow:2px 2px 0 var(--red)}
.lang{border:2px solid var(--white);padding:.15rem .6rem;font-weight:600}
.burger{background:none;border:0;color:inherit;font:inherit;font-weight:600;text-transform:uppercase;cursor:pointer;padding:.4rem 0}
.top.open nav{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:100%;left:0;right:0;background:var(--violet);padding:1rem var(--gutter) 1.5rem}
@media(min-width:1100px){.top nav{display:flex}.burger{display:none}}

/* sections */
.sec{position:relative;overflow:hidden;padding:4.5rem 0 5rem}
.sec__in{position:relative;z-index:2;max-width:1800px;margin:0 auto;padding:0 var(--gutter)}
.sec--violet{background:var(--violet);color:var(--white)}
.sec--green{background:var(--green);color:var(--white)}
.sec--wine{background:var(--wine);color:var(--white)}
.sec--ink{background:var(--ink);color:var(--white);padding:2.5rem 0}
.shape{position:absolute;z-index:1;pointer-events:none;width:var(--w);left:var(--x);top:var(--y);transform:rotate(var(--r,0deg))}

h1,h2,h3{font-weight:600;line-height:1.125;margin:0}
h2{font-size:clamp(2.1rem,5vw,3.6rem);max-width:60rem;margin-bottom:2.5rem;color:var(--white);text-shadow:2px 2px 0 var(--red)}
.sec--green h2{text-shadow:2px 2px 0 var(--wine)}
.sec--wine h2{text-shadow:2px 2px 0 var(--violet)}
.lead{font-size:clamp(1.1rem,1.8vw,1.5rem);max-width:44rem;line-height:1.4}

/* buttons: cut-paper shape, no radius */
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:600;text-transform:uppercase;letter-spacing:.1rem;font-size:.9rem;text-decoration:none;min-width:12rem;text-align:center;padding:1.1rem 1.6rem;color:var(--white);background:var(--red);clip-path:polygon(1.5% 12%,98% 0,100% 88%,2.5% 100%);transition:transform .15s}
.btn:hover{transform:rotate(-1.2deg) scale(1.03)}
.btn--white{background:var(--white);color:var(--ink)}
.btn--sand{background:var(--sand);color:var(--ink)}

/* hero */
.hero{padding-top:7rem;min-height:92vh;display:flex;align-items:center}
.hero__grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.hero__grid{grid-template-columns:1.35fr 1fr}}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.2rem;font-weight:600;margin:0 0 1rem;font-size:.95rem}
.hero h1{font-size:clamp(3.6rem,13vw,10.5rem);color:var(--white);text-shadow:4px 4px 0 var(--red);margin-bottom:1.5rem}
.hero .lead{margin:0 0 2rem}
.hero__note{margin:1.5rem 0 0;font-size:.9rem;opacity:.85;max-width:34rem}
.portrait{position:relative;aspect-ratio:4/5;background:var(--sand-light);color:var(--ink);display:flex;align-items:flex-end;padding:1.2rem;clip-path:polygon(3% 0,100% 2%,97% 100%,0 96%);font-weight:600;text-transform:uppercase;letter-spacing:.1rem;font-size:.85rem}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait span{position:relative;background:var(--white);padding:.3rem .6rem}

/* cards */
.cards{display:grid;gap:1.5rem}
@media(min-width:800px){.cards--3{grid-template-columns:repeat(3,1fr)}.cards--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards--4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:800px) and (max-width:999px){.cards--4{grid-template-columns:repeat(2,1fr)}}
.card{position:relative;background:var(--sand-light);color:var(--ink);padding:2rem 1.8rem 2.2rem;clip-path:polygon(0 2%,98% 0,100% 97%,2% 100%)}
.card:nth-child(2n){clip-path:polygon(2% 0,100% 3%,98% 100%,0 96%)}
.card:nth-child(3n){clip-path:polygon(0 0,97% 3%,100% 100%,3% 97%)}
.tag{display:inline-block;background:var(--sand);color:var(--ink);font-weight:600;padding:.2rem .7rem;margin-bottom:1.2rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.08rem}
.card h3{font-size:1.5rem;margin-bottom:.8rem}
.card p{margin:0 0 .9rem;font-size:1.02rem;line-height:1.45}
.card .src{font-size:.78rem;opacity:.65;margin:0}
.card .src a{text-decoration:none;border-bottom:1px solid currentColor}
.num{font-size:3rem;font-weight:600;color:var(--violet);line-height:1;margin-bottom:.6rem;text-shadow:2px 2px 0 var(--sand)}
.card--dark{background:var(--ink);color:var(--white)}
.card--plain{background:var(--white)}

/* manifest */
.manifest{font-size:clamp(1.8rem,4.6vw,3.8rem);font-weight:600;line-height:1.15;max-width:62rem;margin:0 0 1.5rem}
.manifest em{font-style:normal;color:var(--sand)}
.manifest-src{font-size:.85rem;opacity:.75;margin:0}
.manifest-src a{text-decoration:none;border-bottom:1px solid currentColor}

/* timeline */
.tl{list-style:none;margin:0;padding:0;border-top:2px solid rgba(255,255,255,.5)}
.tl li{display:grid;gap:.3rem 1.5rem;padding:1.1rem 0;border-bottom:2px solid rgba(255,255,255,.5)}
@media(min-width:800px){.tl li{grid-template-columns:11rem 1fr 14rem;align-items:baseline}}
.tl time{font-weight:600;color:var(--sand)}
.tl b{font-weight:600;font-size:1.15rem}
.tl a{text-decoration:none}
.tl a:hover b{text-shadow:2px 2px 0 var(--red)}
.tl span{opacity:.85}

/* work */
.work{display:grid;gap:1.5rem}
@media(min-width:800px){.work{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.work{grid-template-columns:repeat(4,1fr)}}
.work .card{display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;min-height:15rem}
.work .card h3{margin:0}
.work .card .btn{align-self:flex-start;min-width:0}

/* links */
.links{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;margin:0 0 1.5rem}
.fine{font-size:.85rem;opacity:.8;max-width:46rem;margin:0}
.foot{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;font-size:.85rem}
.foot a{text-decoration:none;border-bottom:1px solid currentColor}

/* dialog */
dialog{border:0;padding:0;background:transparent;max-width:34rem;width:calc(100% - 2rem);color:var(--ink)}
dialog::backdrop{background:rgba(28,28,32,.65)}
.dlg{background:var(--sand-light);padding:2rem 1.6rem;clip-path:polygon(0 1%,99% 0,100% 99%,1% 100%);max-height:90vh;overflow:auto}
.dlg h3{font-size:1.6rem;margin-bottom:1.2rem}
.dlg label{display:block;font-weight:600;font-size:.85rem;margin:0 0 1rem;text-transform:uppercase;letter-spacing:.06rem}
.dlg input[type=text],.dlg input[type=email],.dlg input[type=tel],.dlg textarea{display:block;width:100%;margin-top:.35rem;padding:.7rem .8rem;border:2px solid var(--ink);background:var(--white);font:inherit;font-weight:400;text-transform:none;letter-spacing:.02rem;color:var(--ink);border-radius:0}
.dlg textarea{min-height:5.5rem;resize:vertical}
.dlg .check{display:flex;gap:.6rem;align-items:flex-start;text-transform:none;font-weight:400;letter-spacing:.02rem;font-size:.85rem}
.dlg .check input{margin-top:.2rem}
.dlg .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dlg__row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}
.dlg__close{background:none;border:0;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;color:var(--ink)}
.dlg__msg{margin:1rem 0 0;font-weight:600}
.dlg__msg.err{color:#b00020}

.doc{background:var(--sand-light);color:var(--ink);min-height:100vh;padding:7rem var(--gutter) 4rem}
.doc__in{max-width:46rem;margin:0 auto}
.doc h1{font-size:2.2rem;margin-bottom:1.5rem}
.doc p,.doc li{line-height:1.5}

/* contacts: round icons */
.socs{display:flex;flex-wrap:wrap;gap:1.2rem;margin:0 0 2rem}
.soc{display:flex;align-items:center;justify-content:center;width:clamp(6.5rem,16vw,11rem);aspect-ratio:1;border-radius:50%;color:var(--white);transition:transform .15s}
.soc svg{width:42%;height:42%}
.soc--tg{background:var(--red)}
.soc--ig{background:var(--sand);color:var(--ink)}
.soc:hover{transform:rotate(-6deg) scale(1.05)}
.foot .fine{max-width:30rem;flex:1 1 18rem}
.soc--mail{border:0;cursor:pointer;background:var(--white);color:var(--red)}
.btn--wide{width:100%;margin-top:.5rem}
.dlg label:has(>input[type=text],>input[type=email],>input[type=tel],>textarea){text-transform:none}
.dlg__close{display:block;margin:1rem auto 0}