@font-face{font-family:Peyda;src:url(fonts/peyda-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Peyda;src:url(fonts/peyda-semibold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:Peyda;src:url(fonts/peyda-extrabold.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:Peyda;src:url(fonts/peyda-black.woff) format("woff");font-weight:900;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-VariableFont_wght.woff) format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces.woff) format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-italic.woff) format("woff");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:SpaceG;src:url(fonts/SpaceGrotesk-VariableFont_wght.woff) format("woff");font-weight:300 700;font-display:swap}
@font-face{font-family:Unbounded;src:url(fonts/Unbounded-VariableFont_wght.woff) format("woff");font-weight:200 900;font-display:swap}

:root{--deep:#243C48;--dark:#20262B;--slate:#3B5B6B;--sky:#A7C4D9;--sand:#E6C9B8;--brick:#B25C52;
  --fh:Peyda,Vazirmatn,sans-serif;--fb:Vazirmatn,sans-serif;--gut:clamp(20px,4vw,56px);color-scheme:dark}
html:not([lang=fa]){--fh:Fraunces,Georgia,serif;--fb:SpaceG,system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg,var(--deep))}
body{margin:0;background:var(--bg,var(--deep));color:var(--sand);font:400 17px/1.9 var(--fb);position:relative;overflow-x:hidden;min-height:100vh}
.p-systems,.p-build,.p-notes{--bg:var(--dark)}
.p-art,.p-actor{--bg:var(--slate)}
a{color:inherit;text-decoration:none}
p{margin:0 0 .85em}
#bg{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
main,header,footer{position:relative;z-index:2}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

/* the tilted grid: home of the second language */
.tl{display:inline-block;transform:rotate(-7deg);transform-origin:100% 50%}
[dir=ltr] .tl{transform-origin:0 50%}
.tilt{transform:rotate(-7deg);transform-origin:center}
.lat{font-family:Fraunces,Georgia,serif;direction:ltr;unicode-bidi:isolate}
.name{font-family:Unbounded,sans-serif;font-weight:800;letter-spacing:-.03em;direction:ltr;unicode-bidi:isolate}
.fa{font-family:Peyda,Vazirmatn,sans-serif;direction:rtl;unicode-bidi:isolate}
.acc{margin:6px 0 24px;color:rgba(167,196,217,.45);font:900 clamp(40px,6vw,86px)/1.1 Peyda,sans-serif;direction:rtl}

/* header */
.top{display:flex;align-items:center;gap:26px;padding:26px var(--gut);flex-wrap:wrap}
.logo{font:700 15px Unbounded,sans-serif;letter-spacing:.14em;color:var(--sand);transform:rotate(-7deg);direction:ltr;white-space:nowrap}
.nav{display:flex;align-items:center;gap:26px;margin-inline-start:auto}
.nav a{position:relative;white-space:nowrap;font:400 15px var(--fb);color:var(--sky)}
.nav .main a{font:600 16px var(--fh);color:var(--sand)}
.nav .main,.nav .nsec{display:flex;gap:24px}
.nav a.on:after{content:"";position:absolute;inset-inline:0;bottom:-9px;height:2px;background:var(--brick)}
.nav .sep{width:1px;height:18px;background:var(--sky);opacity:.3}
.lang{display:flex;gap:4px;direction:ltr;font:500 12px SpaceG,sans-serif;letter-spacing:.2em}
.lang a{padding:4px 6px;color:var(--sky);opacity:.7}.lang a.on{color:var(--brick);opacity:1}
.menu{display:none;background:none;border:1px solid rgba(167,196,217,.4);color:var(--sand);font:500 12px SpaceG,sans-serif;letter-spacing:.2em;padding:8px 12px;margin-inline-start:auto;cursor:pointer}

/* type */
.title{font:900 clamp(54px,10vw,150px)/1.08 var(--fh);color:var(--brick);margin:40px 0 24px;letter-spacing:-.01em}
.title.s{font-size:clamp(40px,5.2vw,64px)}
.lead b{color:var(--brick)}
.lead{font:700 clamp(22px,2.4vw,32px)/1.55 var(--fh);color:var(--sand)}
.body{color:var(--sky)}
.small{font-size:15px;line-height:1.95}
.lbl{font:600 20px var(--fh);color:var(--sand);margin:0 0 10px}
.lnk{display:inline-block;font:600 16px var(--fb);color:var(--sand);border-bottom:1px solid var(--brick);padding-bottom:4px;margin-top:6px}
.lnk:hover{color:var(--brick)}
.ph{border:1px solid rgba(167,196,217,.35);background:repeating-linear-gradient(135deg,rgba(167,196,217,.07) 0 1px,transparent 1px 14px);display:flex;align-items:center;justify-content:center;color:rgba(167,196,217,.7);font:400 13px var(--fb);min-height:200px}
section{padding:40px 0}

/* home */
.opening{padding-top:30px}.pre{font:400 clamp(19px,1.8vw,24px)/1.7 var(--fh);color:var(--sky);margin-bottom:22px}.open{font:800 clamp(26px,3vw,42px)/1.45 var(--fh);color:var(--sand);margin-bottom:22px}.open+.open{color:var(--brick)}.opening .aghaz,.opening .selfacc{font-size:16px;opacity:.75}
.q{font:300 clamp(40px,6vw,86px)/1.04 Fraunces,serif;letter-spacing:-.02em;direction:ltr;text-align:left;font-variation-settings:"opsz" 144,"WONK" 1;margin-top:10px}
.q em{color:var(--sky)}
.heroT{color:var(--sky);font-size:17px;margin-top:40px}
.nodes{position:relative;height:420px;margin-top:20px}
.node{position:absolute;font:800 clamp(24px,2.6vw,36px) var(--fh);color:var(--brick);white-space:nowrap}
.node:hover{color:var(--sand)}
.intro p:first-child{font:600 21px/1.7 var(--fh);color:var(--sand)}
.core-anchor{width:14px;height:14px}

/* duality: ART and BUSINESS cross at one point */
.dual{position:relative;height:clamp(300px,34vw,440px);margin:40px 0}
.dual .a,.dual .b{position:absolute;left:50%;top:50%;font:900 clamp(64px,13vw,190px)/1 Unbounded,sans-serif;letter-spacing:-.05em;white-space:nowrap;direction:ltr}
.dual .a{transform:translate(-50%,-50%);color:var(--sand)}
.dual .b{font-size:clamp(46px,9vw,130px);transform:translate(-50%,-50%) rotate(-7deg);color:transparent;-webkit-text-stroke:1.5px var(--brick)}
.dual .x{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:var(--brick);box-shadow:0 0 0 12px rgba(178,92,82,.18)}
.dual .n1,.dual .n2{position:absolute;font:700 clamp(14px,1.4vw,18px) Unbounded,sans-serif;letter-spacing:.02em;direction:ltr;color:var(--sky)}
.dual .n1{left:4%;bottom:6%}.dual .n2{right:4%;top:6%}
.dual .cap{position:absolute;inset-inline:0;bottom:-10px;text-align:center;font:600 18px var(--fh);color:var(--sky)}

/* systems */
.selfsent{font:800 clamp(30px,3.6vw,50px)/1.45 var(--fh);color:var(--sand)}
.selfsent span{display:block;font:400 clamp(20px,2.1vw,30px)/1.6 var(--fh);color:var(--sky);margin-top:16px}
.selfacc{font:600 22px/1.8 Peyda,sans-serif;color:rgba(167,196,217,.6);direction:rtl;text-align:right}
.aghaz{font:italic 300 18px/1.65 Fraunces,serif;direction:ltr;text-align:left}
.aghaz.main{font-style:normal;font-weight:400;font-size:19px}
.pt{width:18px;height:18px;border-radius:50%;background:var(--brick);box-shadow:0 0 0 10px rgba(178,92,82,.15);margin:60px auto}
.sec{margin-bottom:60px}.sec .body{font-size:15.5px}
.tag{font:500 12px SpaceG,sans-serif;letter-spacing:.3em;color:var(--sky);text-transform:uppercase}

/* art: planes that overlap in time */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:60px 0 40px}
.plane{position:relative;padding:40px 38px 44px;padding-inline-end:90px;min-height:480px;font-size:15.5px;line-height:1.95}
.plane:before{content:"";position:absolute;inset:-28px 28px 28px -28px;border:1px dashed rgba(230,201,184,.35);pointer-events:none}
[dir=rtl] .plane:before{inset:-28px -28px 28px 28px}
.plane h3{font:700 30px/1.25 var(--fh);margin:0 0 18px;color:var(--sand)}
.plane:nth-child(1){background:rgba(36,60,72,.92);color:var(--sky)}
.plane:nth-child(2){background:rgba(178,92,82,.62);margin-top:110px;margin-inline-start:-50px}
.plane:nth-child(3){background:rgba(167,196,217,.3);margin-top:220px;margin-inline-start:-50px}
.plane .names{font:italic 300 20px/1.5 Fraunces,serif;margin:0 0 18px}
.crumb{font:500 13px SpaceG,sans-serif;letter-spacing:.2em;color:var(--sky);text-transform:uppercase;margin-top:30px}
.crumb a{color:var(--sand)}

.vid{aspect-ratio:16/9;min-height:0;background-color:rgba(32,38,43,.35)}
.vid:before{content:"▶";font-size:28px;color:var(--sand);margin-inline-end:12px}
.fill{border-style:dashed;font-size:14px}
/* build: modules that lock */
.mods{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;margin:40px 0}
.mod{position:relative;padding:38px 36px 40px;font-size:15px;line-height:1.9}
.mod h3{font:800 clamp(28px,2.8vw,40px)/1.05 Unbounded,sans-serif;letter-spacing:-.03em;margin:0 0 40px;direction:ltr}
.mod h4{font:800 32px/1.2 var(--fh);margin:0 0 18px}
.mod .ex{font-weight:600;margin-top:10px}
.mod:after{content:"";position:absolute;width:34px;height:80px;background:inherit;top:40%;inset-inline-end:-34px;z-index:3}
.mod:before{content:"";position:absolute;width:10px;height:10px;background:var(--brick);top:calc(40% + 35px);inset-inline-end:-22px;z-index:4}
.m1{grid-column:1/8;background:var(--sand);color:var(--dark)}
.m2{grid-column:8/13;background:var(--brick);color:var(--sand);margin-top:80px}.m2:before{background:var(--sand)}
.m3{grid-column:1/5;background:var(--slate);color:var(--sand)}
.m4{grid-column:5/13;background:var(--deep);color:var(--sky);outline:1px solid rgba(167,196,217,.4);outline-offset:-1px}.m4 h3{color:var(--sand)}
.m5{grid-column:1/13;background:var(--sky);color:var(--dark)}
.m2:after,.m4:after,.m5:after{display:none}.m2:before,.m4:before,.m5:before{display:none}
.m3:after{top:auto;bottom:-30px;inset-inline-end:auto;inset-inline-start:40%;width:80px;height:30px}
.m3:before{top:auto;bottom:-20px;inset-inline-end:auto;inset-inline-start:calc(40% + 35px)}

/* projects */
.proj h3{margin:18px 0 10px;color:var(--sand)}
.proj .body{font-size:15.5px}

/* notes: each pair is one line that never closes */
.ten{display:grid;grid-template-columns:auto 1fr minmax(220px,340px) 1fr auto;align-items:center;gap:14px;margin:54px 0}
.ten .w{font:800 clamp(22px,2.3vw,30px) var(--fh);white-space:nowrap}
.ten .w.b{color:var(--sky)}
.ten .ln{height:1px;background:rgba(167,196,217,.5)}
.ten .ln.d{background:none;border-top:1px dashed rgba(230,201,184,.45)}
.ten .qq{font-size:15.5px;line-height:1.85;color:var(--sky);text-align:center}
.ten:nth-child(odd){margin-inline-end:12%}.ten:nth-child(even){margin-inline-start:12%}
.ten:nth-child(3n){transform:rotate(-2deg)}.ten:nth-child(3n+1){transform:rotate(1.5deg)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brick);margin:0 8px;vertical-align:middle}

/* contact */
.cpt{width:18px;height:18px;border-radius:50%;background:var(--brick);margin:40px auto 0}
.c h3{font:800 clamp(34px,3.6vw,48px)/1 Unbounded,sans-serif;letter-spacing:-.03em;color:var(--sand);margin:0 0 40px;direction:ltr}

footer{padding:60px var(--gut) 40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--sky);font:400 13px SpaceG,sans-serif;letter-spacing:.14em;direction:ltr}

/* motion fragments */
.frag{position:absolute;z-index:6;white-space:nowrap;pointer-events:none}

@media (max-width:980px){
  .menu{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:14px;margin:6px 0 0}
  .nav.open{display:flex}
  .nav .main,.nav .nsec{flex-direction:column;gap:12px}.nav .sep{display:none}
  .nav a.on:after{bottom:-4px}
  .grid>*{grid-column:1/-1!important;margin-top:0!important}
  .nodes{height:auto;display:flex;flex-direction:column;gap:22px;margin:40px 0}
  .node{position:static}
  .planes{grid-template-columns:1fr}
  .plane{min-height:0;margin:0 0 50px!important}
  .plane:nth-child(2){margin-inline-start:24px!important}.plane:nth-child(3){margin-inline-start:48px!important}
  .mods{grid-template-columns:1fr;gap:34px}
  .mod{grid-column:1/-1!important;margin:0!important}
  .mod:after,.mod:before{display:none!important}
  .ten{grid-template-columns:auto 1fr auto;margin:44px 0!important;transform:none!important}
  .ten .qq{grid-column:1/-1;grid-row:2;text-align:start}
  .ten .ln.d{display:none}
  .dual{margin-bottom:70px}.dual .n1{bottom:10px}.dual .n2{top:0}.dual .cap{bottom:-56px}.plane{padding-inline-end:38px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}